GTA VI — Fan Website

⚠️ Proyecto educativo sin fines comerciales. Todos los derechos de GTA VI pertenecen a Rockstar Games y Take-Two Interactive.

🚀 Características

Diseño y UI/UX

• Diseño moderno inspirado en la estética de GTA VI.
• Responsive optimizado para resoluciones desktop (1024px – 4K).
• Menú desplegable con panel dividido y animaciones secuenciales (GSAP).
• Sistema de pestañas: Personajes, Lugares, Tráilers, Descargas.
• Hover en personajes/lugares muestra imágenes a pantalla completa (transición 1000ms).
• Sección de tráilers con previews interactivos y badges "Nuevo".
• Sección de descargas con cards animadas, bordes amarillos en hover y zoom sutil.

Stack

• Astro v5.14.1 — framework estático
• Tailwind CSS v4.1.13 — utility-first
• GSAP v3.13.0 — animaciones profesionales
• Vanilla JavaScript — interacciones y lógica del menú

Características técnicas

• Arquitectura estática optimizada para rendimiento.
• SEO-friendly.
• Transiciones fade in/out controladas.
• Componentes modulares y reutilizables.
• Variables CSS para paleta de colores consistente.
• Efectos hover avanzados con transformaciones CSS.

📋 Estructura del proyecto

gta-vi-website/
├── src/
│   ├── assets/          # Imágenes, SVGs y recursos visuales
│   ├── layouts/         # Layouts base de Astro
│   └── pages/
│       └── index.astro  # Página principal
├── public/              # Archivos estáticos
├── astro.config.mjs
└── package.json

🛠️ Instalación y uso

git clone https://github.com/Fr4n0m/gta-vi-website.git
cd gta-vi-website
npm install
npm run dev

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

📜 Comandos disponibles

Comando	Descripción
npm run dev	Servidor de desarrollo en localhost:4321
npm run build	Build de producción en ./dist/
npm run preview	Vista previa del build
npm run lint	Validaciones Astro (astro check)

🎨 Paleta de colores

--gradient-left:  linear-gradient(135deg, #286074 0%, #523c47 100%);
--gradient-right: linear-gradient(223.17deg, #1b1828 0%, #111117 100%);
--yellow-accent:  #fef3c7;
--purple-dark:    #36364e;
--pink-accent:    #cc96bc;

🤝 Contribuciones

1. Fork el proyecto.
2. Crea una rama (feature/AmazingFeature).
3. Commit y push.
4. Abre un Pull Request.

📄 Licencia

Proyecto educativo sin ánimo de lucro. Todos los derechos de GTA VI pertenecen a Rockstar Games y Take-Two Interactive.