Luna Cafe - Landing Page Cafeteria

Landing page elegante y moderna para Luna Cafe, una cafeteria especializada en café de alta calidad y tapas, con un enfoque en el arte del latte y una selección curada de vinos.

Descripción

Este proyecto es una landing page de una página (single-page) desarrollada para promover un negocio de cafeteria boutique. El sitio web presenta:

• Diseño sofisticado con paleta de colores cálidos (crema, espresso, dorado, teal)
• Sección hero con llamada a la acción
• Barra de estadísticas destacando logros (12+ diseños de latte, 8 platillos GF, 40+ vinos, calificación 5★)
• Galería de Latte Art con obras de arte en café
• Menú completo con tapas y platillos sin gluten
• Sección de vinos con tarjetas interactivas
• Footer informativo con contacto y horarios
• Integración con Cal.com para reservaciones flotantes

El diseño enfatiza "arte en cada taza", creando una experiencia visual artistica y apetitosa.

Tecnologías Utilizadas

• HTML5: Estructura semántica moderna
• CSS3:
  • Variables CSS personalizadas
  • Flexbox y Grid layouts
  • Glassmorphism en navegación
  • Animaciones y transiciones suaves
  • Efectos Scroll-Driven reveal
  • Diseño responsive mobile-first
• JavaScript (ES6):
  • Menú móvil toggle
  • Navbar sticky behavior
  • Intersection Observer para animaciones al scroll
  • Integración de widget externo

Fuentes externas:

• Google Fonts (Playfair Display, Lato)
• Imágenes de Unsplash
• Cal.com para reservaciones
• Iconos SVG nativos

Cómo Ver el Proyecto

1. Clona el repositorio:

   git clone https://github.com/guillesrl/cafeteria.git

2. Navega al directorio:

   cd cafeteria

3. Abre el archivo index.html en tu navegador:

   # En macOS
   open index.html
   
   # En Linux
   xdg-open index.html
   
   # En Windows
   start index.html

No requiere servidor local ni instalación de dependencias. Es un sitio estático que se puede abrir directamente.

Caracteró­sticas Principales

• Diseño Responsive: Se adaptas a todos los dispositivos (desktop, tablet, móvil)
• Animaciones Sutiles: Efectos de reveal al hacer scroll, hover states elegantes
• Navegación Móvil: Menú hamburguesa con overlay
• Widget de Reservaciones: Botón flotante integrado con Cal.com
• Tipografía Elegante: Paired fonts para jerarquía visual
• Accesibilidad: Estructura semántica HTML5
• Optimización de Imágenes: Imágenes de alta calidad con fallbacks

Estructura del Proyecto

cafeteria/
├── index.html      # Página principal
├── cafe2.jpg       # Imagen de fondo/hero
└── README.md       # Este archivo

Autor

Desarrollado por guillesrl

Licencia

Todos los derechos reservados.