youssef-barber

byYoussef Ikabouren

Crea una página web **ULTRA MODERNA, PREMIUM Y MUY LLAMATIVA** para una barbería a domicilio llamada **YOUSSEF BARBER**. La prioridad es que cuando un cliente entre a la web piense inmediatamente que es una barbería profesional y moderna. **NO quiero una página web básica ni una plantilla genérica.** ## 🔥 ESTILO VISUAL Utiliza un estilo: * Premium * Moderno * Urbano * Elegante * Masculino * Futurista pero limpio * Inspirado en webs de barberías de alta gama Colores principales: * Negro / negro carbón * Blanco * Gris oscuro * Detalles dorados o metálicos Utiliza tipografías grandes y llamativas para los títulos. Añade efectos de iluminación, partículas sutiles, sombras, gradientes y efectos de profundidad, pero **sin sobrecargar la página**. ## ⚡ ANIMACIONES La web debe tener MUCHAS animaciones profesionales y fluidas. Añadir: * Animación de entrada al cargar la página. * Logo que aparezca suavemente. * Títulos con efecto de aparición. * Botones con efecto hover. * Botones con pequeñas animaciones al pasar el cursor. * Tarjetas de servicios que se eleven ligeramente al pasar el cursor. * Imágenes con zoom suave. * Animaciones al hacer scroll. * Secciones que aparezcan progresivamente. * Contadores animados. * Transiciones suaves entre secciones. * Efectos de brillo alrededor de botones importantes. * Efectos de partículas muy sutiles en el fondo. * Animaciones suaves en las estrellas de las reseñas. * Efectos de transición al abrir el formulario de reserva. * Animación de confirmación cuando se realiza una reserva. Las animaciones deben ser **rápidas, suaves y profesionales**, no infantiles. ## 🎬 HERO PRINCIPAL La primera pantalla debe ser espectacular. Mostrar: **YOUSSEF BARBER** **TU CORTE. TU ESTILO. TU CASA.** Texto secundario: **Cortes profesionales a domicilio. Fades, clásicos y cortes personalizados.** Añadir dos botones grandes: **🔥 RESERVAR CITA** **💬 WHATSAPP** El botón de reservar debe destacar visualmente. Añadir una imagen grande relacionada con barbería/cortes. Crear un efecto de fondo cinematográfico con iluminación y movimiento sutil. Al entrar en la página, el contenido debe aparecer con una animación elegante. ## ✂️ SERVICIOS Crear tarjetas premium para: **CORTE CLÁSICO** 10 € **FADE / DEGRADADO** 12 € **CORTE PERSONALIZADO** 12 € **CORTE + BARBA** 15 € Cada tarjeta debe tener: * Imagen o icono * Nombre * Precio * Descripción * Botón reservar * Animación hover Cuando el usuario pase el cursor, la tarjeta debe reaccionar visualmente. ## 📅 RESERVAS Crear un sistema de reservas moderno. El cliente podrá: 1. Elegir servicio. 2. Elegir fecha. 3. Elegir hora disponible. 4. Introducir nombre. 5. Introducir teléfono. 6. Introducir dirección. 7. Personalizar su corte. 8. Revisar el resumen. 9. Confirmar. El formulario debe tener animaciones entre cada paso. Mostrar una barra de progreso: **Servicio → Fecha → Personalización → Datos → Confirmación** ## 💈 PERSONALIZA TU CORTE Crear una sección visual llamada: **DISEÑA TU CORTE** El cliente podrá seleccionar: * Fade bajo * Fade medio * Fade alto * Taper * Clásico * Corte personalizado * Con diseño * Sin diseño * Con barba * Sin barba Añadir un campo: **¿Cómo quieres tu corte?** Para que el cliente pueda escribir instrucciones. ## ⭐ RESEÑAS Crear una sección espectacular: **LO QUE DICEN NUESTROS CLIENTES** Mostrar tarjetas de reseñas con: ⭐⭐⭐⭐⭐ Nombre del cliente Comentario Fecha Las tarjetas deben tener animaciones al aparecer. Añadir botón: **⭐ DEJAR MI RESEÑA** Formulario para enviar: * Nombre * Estrellas * Comentario Las reseñas deben guardarse en la base de datos y poder moderarse desde el panel de administración. ## 📸 GALERÍA Crear una sección: **TRABAJOS RECIENTES** Galería de fotografías de cortes. Al pulsar una fotografía: * Abrirla en pantalla grande. * Añadir transición. * Permitir cerrar con una animación suave. Añadir categorías: **Todos | Fades | Clásicos | Personalizados | Barba** ## 🚀 LLAMADAS A LA ACCIÓN Durante la página deben aparecer varios CTA, por ejemplo: **¿LISTO PARA CAMBIAR DE LOOK?** **RESERVA TU CITA AHORA** Y: **TU PRÓXIMO CORTE ESTÁ A UN CLIC.** Esto debe hacer que la página tenga un flujo pensado para convertir visitantes en clientes. ## 📱 WHATSAPP Añadir un botón flotante de WhatsApp que permanezca visible mientras el usuario navega. Al pasar el cursor debe mostrar: **¿Necesitas ayuda? Escríbeme** Al pulsarlo debe abrir WhatsApp con un mensaje preparado para solicitar una cita. ## 📷 INSTAGRAM Añadir una sección de Instagram con fotografías y un botón: **VER INSTAGRAM** ## 📍 SERVICIO A DOMICILIO Crear una sección: **VOY HASTA TU CASA** Explicar de forma visual: 📍 Elige tu ubicación ↓ 📅 Elige tu horario ↓ ✂️ Elige tu corte ↓ 🏠 Yo voy hasta ti ## 👨‍💻 PANEL DE ADMINISTRACIÓN Crear un panel privado para administrar: * Citas * Horarios * Clientes * Servicios * Precios * Reseñas * Fotografías * Disponibilidad Permitir aceptar/rechazar citas y bloquear horarios. ## 📱 MÓVIL La web debe estar especialmente optimizada para móviles. En móvil: * Menú hamburguesa animado. * Botón de reservar siempre accesible. * Botón WhatsApp flotante. * Animaciones optimizadas. * Imágenes adaptadas. * Formularios fáciles de utilizar. ## 🧠 EXPERIENCIA Quiero que la página tenga una sensación de: **"WOW, esta barbería parece profesional."** Cada sección debe llevar al usuario naturalmente hacia: **CONOCER → VER TRABAJOS → VER SERVICIOS → PERSONALIZAR → RESERVAR** No utilizar animaciones excesivas que hagan lenta la página. Priorizar: **velocidad + estética + animaciones + facilidad para reservar.** ## 🛠️ IMPORTANTE Genera el proyecto completo y funcional. No quiero solamente una imagen o maqueta. Utiliza componentes reutilizables, código limpio y responsive. Si la plataforma permite backend, utilizar una base de datos real para citas y reseñas. Si permite autenticación, crear acceso seguro para el administrador. La web debe estar preparada para poder añadir posteriormente: * Pagos online * Cupones * Promociones * Notificaciones * Historial de clientes * Programa de fidelización **Nombre:** YOUSSEF BARBER **Eslogan:** TU CORTE. TU ESTILO. TU CASA. **Servicios:** Fades | Clásicos | Personalizados | Barba **Objetivo principal:** conseguir que los visitantes reserven una cita. y usa React/Next.js + Tailwind + Framer Motion