Barbería - Landing Page en React + Vite (editado con Gemini)

Este proyecto es una reimplementación de la landing page original de la barbería, creada con HTML/CSS/JS plano:
🔗 Versión original

La nueva versión está construida con tecnologías modernas para una mejor experiencia de desarrollo y accesibilidad:

• ⚛️ React con Vite
• 路由 React Router para el enrutamiento del lado del cliente
• 💨 Tailwind CSS para el diseño responsivo
• ✍️ TypeScript para un tipado estático y un código más robusto
• 🌐 Accesibilidad mejorada (uso adecuado de etiquetas y roles)
• ✉️ Formulario funcional con integración a Formspree
• 🧠 Código organizado con alias personalizados
• 🎯 Buenas prácticas en componentes reutilizables

---

🚀 Instalación

pnpm install
pnpm run dev

---

📦 Tecnologías Utilizadas

• react
• react-dom
• react-router
• react-lite-youtube-embed
• tailwindcss
• @tailwindcss/vite
• vite
• typescript
• eslint

---

🧩 Estructura del Proyecto

src/
├── assets/                 # Imágenes, fuentes, íconos y otros recursos estáticos
├── components/             # Componentes UI reutilizables (ServicioCard, Button, Input, etc.)
├── hooks/                  # Hooks personalizados (useDestacados, etc.)
├── lib/                    # Lógica compartida / datos / tipos (no UI)
├── pages/                  # Páginas principales (Servicios, Inicio, Contacto, etc.)
├── App.jsx                 # Componente raíz (layout general, proveedores)
└── main.jsx                # Punto de entrada de Vite (montaje en DOM)

---

🛠️ Características Implementadas

✂️ Landing Page

• Hero principal con presentación del negocio
• Sección de Servicios (Cabello, Barba, Tinte, Cejas, Limpieza facial, etc.)
• Sección de ¿Por qué elegirnos? (Rapidez, Calidez, Atención personalizada, etc.)
• Footer accesible con información de contacto

🧾 Servicios

Página con detalle de todos los servicios disponibles, cada uno con:

• Imagen ilustrativa
• Título, descripción y precio
• Etiqueta de "Nuevo" para servicios destacados

📞 Contacto

• Formulario accesible y funcional
• Campos:
  • Nombre, correo electrónico, teléfono (input reutilizable)
  • Medio de contacto preferido (radio)
  • Horario de preferencia (select)
  • Mensaje (textarea reutilizable)
• Integración con Formspree para envío de datos

✨ Otros

• Se corrigieron errores de importación y exportación en componentes.
• Se actualizaron datos de imágenes para un desarrollo más fluido.
• Se restauró la sección de video en la página de inicio.

---

🧠 Alias utilizados

Alias	Ruta referida
@	src/
$	src/components/
&	src/pages/
~	src/assets/

Configurados en vite.config.js con path.resolve.

---

🖼️ Imágenes utilizadas

• 🎨 dgim-studio en Freepik
• 🧴 pikisuperstar en Freepik
• 💇‍♂️ freepik

💈 Créditos

Creado por @Miguel92 — versión modernizada de su propio diseño clásico.