🎸 GuitarHub — Landing de guitarras (React + Tailwind)

Sitio web responsivo construido con React y Tailwind CSS. Presenta secciones de introducción con video, información de la marca, novedades, suscripción y ubicación, con navegación optimizada para escritorio y móvil.

• Estado: En desarrollo activo
• SPA con React 18 y React Router DOM 6
• Estilos con Tailwind CSS 3

🧭 Secciones principales

• Inicio — Hero con video y branding.
• Sobre — Información de la marca y detalles clave.
• Novedades — Sección de noticias y lanzamientos.
• Suscripción — Formulario para recibir novedades.
• Ubicación — Información de contacto y ubicación.
• Navegación — Barra superior con versión móvil.

🛠️ Tecnologías

• react 18
• react-dom 18
• react-router-dom 6
• react-scripts (Create React App)
• tailwindcss 3

📁 Estructura del proyecto

GuitarHub/
├── public/
│   ├── index.html
│   └── logo.png
├── src/
│   ├── App.js
│   ├── index.js
│   ├── index.css
│   ├── assets/               # Imágenes, videos y recursos
│   ├── components/           # Componentes de UI por sección
├── tailwind.config.js
├── package.json
└── package-lock.json

⚙️ Instalación y uso

Requisitos: Node.js >= 18 y npm.

1. Instalar dependencias:

   npm install

2. Iniciar servidor de desarrollo:

   npm start

   Abre http://localhost:3000 en tu navegador.

3. Construir para producción:

   npm run build

4. Ejecutar tests (si se agregan):

   npm test

📦 Scripts del proyecto

• start — Inicia el servidor de desarrollo.
• build — Genera la build optimizada para producción.
• test — Ejecuta pruebas (configurables).
• eject — Expone la configuración de CRA (irreversible).

🎯 Funcionalidades clave

• Hero con video de fondo y mensaje principal.
• Navegación superior con soporte móvil.
• Sección “Sobre” con imagen y texto.
• Grilla de novedades con imágenes.
• Suscripción por correo.
• Footer con enlaces sociales.
• Sección de ubicación/contacto.

🖼️ Vista previa (opcional)

Agrega una imagen o GIF cuando tengas una build estable:

![Demo](./src/assets/preview.png)

⚠️ Consideraciones

• El contenido es estático; no hay backend conectado.
• Las imágenes y videos se sirven localmente desde src/assets.
• El formulario de suscripción no persiste datos sin integración externa.

🔧 Posibles mejoras

• SEO y metadatos enriquecidos.
• Modo oscuro con Tailwind.
• Optimización de imágenes y carga diferida del video.
• Integración real de suscripción (Mailchimp/SendGrid).
• Internacionalización (ES/EN).
• Tests unitarios y de integración.
• Accesibilidad (alt, roles, foco, contraste).
• PWA: manifest y service worker.

📄 Licencia

ISC según package.json. Puedes cambiar a MIT si prefieres una licencia más común para OSS.

👨‍💻 Autor

• Charles Castillo (FROSTYLAN)
• GitHub: https://github.com/FROSTYLAN
• LinkedIn: https://linkedin.com/in/charles-castillo-772968234

---

Si te resultó útil, considera dar una estrella al repositorio.
¡Explora GuitarHub y disfruta de una experiencia visual limpia y responsiva!