iPhone Store

Tienda online profesional de iPhones con diseño moderno y responsive.

🚀 Características

• Diseño premium: Estética inspirada en Apple con toques modernos de ecommerce
• Totalmente responsive: Optimizado para móvil, tablet y desktop
• Rendimiento: HTML, CSS y JavaScript vanilla sin frameworks pesados
• Accesibilidad: Contraste adecuado, navegación por teclado, etiquetas ARIA
• SEO básico: Meta descripciones, etiquetas semánticas, estructura clara

📁 Estructura del proyecto

iphone-catalog/
├── index.html          # Homepage con hero, productos y beneficios
├── iphone-15.html      # Página de producto iPhone 15
├── iphone-16.html      # Página de producto iPhone 16
├── iphone-17.html      # Página de producto iPhone 17
├── styles.css          # Sistema de diseño completo
├── script.js           # Interacciones y utilidades
├── images/             # Imágenes de productos
│   ├── iphone15.jpg
│   ├── iphone16.jpg
│   └── iphone17.jpg
└── README.md

🛠️ Tecnologías

• HTML5: Estructura semántica y accesible
• CSS3: Variables CSS, Grid, Flexbox, animaciones
• JavaScript: Vanilla JS sin dependencias

📱 Páginas

Homepage (index.html)

• Header fijo con navegación responsive
• Hero section con CTA
• Grid de productos con tarjetas modernas
• Sección de beneficios
• Estadísticas de confianza
• Footer profesional

Páginas de producto

• Galería de imágenes
• Especificaciones técnicas
• Badges (Nuevo, Popular, En stock)
• Botones de acción (Comprar, Contactar)
• Productos relacionados

🎨 Sistema de diseño

Colores

• Primary: #0071e3 (Azul Apple)
• Secondary: #1d1d1f (Negro Apple)
• Background: #f5f5f7 (Gris claro)
• Surface: #ffffff (Blanco)

Tipografía

• Font family: SF Pro Display, system-ui, sans-serif
• Escalado fluido con clamp()

Componentes

• Botones con variantes: primary, secondary, outline
• Tarjetas de producto con hover effects
• Badges para estados
• Grid responsive

🚀 Despliegue

Este proyecto está optimizado para GitHub Pages:

1. Sube los archivos a un repositorio
2. Ve a Settings > Pages
3. Selecciona la rama main y carpeta / (root)
4. Tu sitio estará disponible en https://tuusuario.github.io/iphone-catalog/

📝 Notas

• Los selectores data-testid se mantienen para compatibilidad con scraping
• Las imágenes deben estar en la carpeta images/
• El menú móvil funciona sin dependencias externas

📄 Licencia

Proyecto de demostración para fines educativos.