Spaces:
Running
Running
Crea una página web moderna y atractiva para una cafetería artesanal llamada "Café Aroma". Estilo y diseño: Paleta de colores: tonos cálidos (café, beige, crema) con acentos en verde oscuro. Estilo minimalista y elegante, con tipografía serif para títulos y sans-serif para texto. Imágenes grandes de café, granos y postres artesanales. Diseño responsivo para móviles y escritorio. Secciones principales: Inicio / Hero Section: Imagen de fondo de una taza de café humeante. Título llamativo: "El café que despierta tus sentidos". Botón destacado: "Ver Menú". Sobre Nosotros: Breve historia de la cafetería. Foto del local y del equipo. Menú: Lista de cafés, tés y postres con precios. Posibilidad de dividir por categorías (Cafés, Tés, Postres). Galería de fotos: Imágenes del café, interior de la cafetería y clientes disfrutando. Testimonios: Opiniones de clientes satisfechos con 3–4 reseñas. Contacto: Dirección física con mapa (Google Maps embebido). Número de teléfono y correo electrónico. Formulario de contacto. Pie de página (Footer): Enlaces a redes sociales (Instagram, Facebook, TikTok). Horarios de apertura. Funcionalidades extra: Botón de WhatsApp flotante para pedidos rápidos. Opción de “Suscríbete a nuestro boletín” para novedades. Animaciones suaves al hacer scroll. - Initial Deployment
e7f655c verified | <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Café Aroma - Cafetería Artesanal</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .hero { | |
| background-image: linear-gradient(rgba(60, 45, 35, 0.7), rgba(60, 45, 35, 0.7)), url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .menu-item { | |
| transition: transform 0.3s ease; | |
| } | |
| .menu-item:hover { | |
| transform: translateY(-5px); | |
| } | |
| .testimonial-card { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.6s ease; | |
| } | |
| .testimonial-card.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 1s ease-in forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-cream-50 text-brown-900"> | |
| <!-- WhatsApp flotante --> | |
| <a href="https://wa.me/1234567890" class="fixed bottom-6 right-6 bg-green-600 text-white w-14 h-14 rounded-full flex items-center justify-center text-2xl shadow-lg z-50 hover:bg-green-700 transition-all"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| <!-- Header --> | |
| <header class="fixed w-full bg-white bg-opacity-90 shadow-sm z-40"> | |
| <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <a href="#" class="text-2xl font-bold text-brown-800">Café Aroma</a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#inicio" class="hover:text-green-800 transition">Inicio</a> | |
| <a href="#nosotros" class="hover:text-green-800 transition">Nosotros</a> | |
| <a href="#menu" class="hover:text-green-800 transition">Menú</a> | |
| <a href="#galeria" class="hover:text-green-800 transition">Galería</a> | |
| <a href="#contacto" class="hover:text-green-800 transition">Contacto</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="menu-toggle"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </nav> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-white w-full px-6 py-4 shadow-md" id="mobile-menu"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#inicio" class="hover:text-green-800 transition">Inicio</a> | |
| <a href="#nosotros" class="hover:text-green-800 transition">Nosotros</a> | |
| <a href="#menu" class="hover:text-green-800 transition">Menú</a> | |
| <a href="#galeria" class="hover:text-green-800 transition">Galería</a> | |
| <a href="#contacto" class="hover:text-green-800 transition">Contacto</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="inicio" class="hero min-h-screen flex items-center justify-center text-center pt-20"> | |
| <div class="container mx-auto px-6"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 animate-fade-in">El café que despierta tus sentidos</h1> | |
| <p class="text-xl text-white mb-8 max-w-2xl mx-auto">Descubre el auténtico sabor del café artesanal en un ambiente cálido y acogedor.</p> | |
| <a href="#menu" class="bg-green-800 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 inline-block">Ver Menú</a> | |
| </div> | |
| </section> | |
| <!-- Sobre Nosotros --> | |
| <section id="nosotros" class="py-20 bg-brown-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-brown-800">Nuestra Historia</h2> | |
| <div class="flex flex-col md:flex-row items-center gap-10"> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Interior de Café Aroma" class="rounded-lg shadow-xl w-full h-auto"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-bold mb-4 text-green-800">Desde 2010 sirviendo el mejor café</h3> | |
| <p class="mb-4">Café Aroma nació del sueño de dos apasionados por el café que querían compartir su amor por los granos de alta calidad y métodos de preparación artesanales.</p> | |
| <p class="mb-6">Hoy, más de una década después, seguimos comprometidos con nuestra filosofía: seleccionar personalmente los mejores granos de pequeños productores y tostarlos en casa para garantizar la máxima frescura y sabor.</p> | |
| <div class="flex items-center space-x-4"> | |
| <img src="https://images.unsplash.com/photo-1562788865-9d89e9f44a1e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Equipo de Café Aroma" class="w-16 h-16 rounded-full object-cover"> | |
| <div> | |
| <h4 class="font-bold">María y Juan</h4> | |
| <p class="text-sm text-brown-600">Fundadores de Café Aroma</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Menú --> | |
| <section id="menu" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-brown-800">Nuestro Menú</h2> | |
| <!-- Filtros de categoría --> | |
| <div class="flex justify-center mb-12 space-x-4"> | |
| <button class="category-btn px-4 py-2 rounded-full bg-green-800 text-white" data-category="all">Todo</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-brown-100 hover:bg-brown-200 transition" data-category="coffee">Cafés</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-brown-100 hover:bg-brown-200 transition" data-category="tea">Tés</button> | |
| <button class="category-btn px-4 py-2 rounded-full bg-brown-100 hover:bg-brown-200 transition" data-category="dessert">Postres</button> | |
| </div> | |
| <!-- Items del menú --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Café --> | |
| <div class="menu-item coffee p-6 bg-brown-50 rounded-lg shadow-md"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-bold">Espresso Artesanal</h3> | |
| <span class="text-green-800 font-bold">$3.50</span> | |
| </div> | |
| <p class="text-brown-600 mb-4">Nuestro espresso clásico, preparado con granos 100% arábica tostados a la perfección.</p> | |
| <div class="flex items-center text-sm text-brown-500"> | |
| <i class="fas fa-coffee mr-2"></i> | |
| <span>30ml</span> | |
| </div> | |
| </div> | |
| <!-- Café --> | |
| <div class="menu-item coffee p-6 bg-brown-50 rounded-lg shadow-md"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-bold">Cappuccino Clásico</h3> | |
| <span class="text-green-800 font-bold">$4.50</span> | |
| </div> | |
| <p class="text-brown-600 mb-4">Espresso suave con leche vaporizada y una capa de espuma cremosa.</p> | |
| <div class="flex items-center text-sm text-brown-500"> | |
| <i class="fas fa-coffee mr-2"></i> | |
| <span>180ml</span> | |
| </div> | |
| </div> | |
| <!-- Té --> | |
| <div class="menu-item tea p-6 bg-brown-50 rounded-lg shadow-md"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-bold">Té Verde Matcha</h3> | |
| <span class="text-green-800 font-bold">$4.00</span> | |
| </div> | |
| <p class="text-brown-600 mb-4">Matcha premium de Japón, preparado tradicionalmente con agua a temperatura exacta.</p> | |
| <div class="flex items-center text-sm text-brown-500"> | |
| <i class="fas fa-leaf mr-2"></i> | |
| <span>240ml</span> | |
| </div> | |
| </div> | |
| <!-- Té --> | |
| <div class="menu-item tea p-6 bg-brown-50 rounded-lg shadow-md"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-bold">Chai Latte</h3> | |
| <span class="text-green-800 font-bold">$4.25</span> | |
| </div> | |
| <p class="text-brown-600 mb-4">Mezcla de especias tradicionales con té negro y leche vaporizada.</p> | |
| <div class="flex items-center text-sm text-brown-500"> | |
| <i class="fas fa-leaf mr-2"></i> | |
| <span>240ml</span> | |
| </div> | |
| </div> | |
| <!-- Postre --> | |
| <div class="menu-item dessert p-6 bg-brown-50 rounded-lg shadow-md"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-bold">Croissant Artesanal</h3> | |
| <span class="text-green-800 font-bold">$3.00</span> | |
| </div> | |
| <p class="text-brown-600 mb-4">Croissant recién horneado, crujiente por fuera y esponjoso por dentro.</p> | |
| <div class="flex items-center text-sm text-brown-500"> | |
| <i class="fas fa-bread-slice mr-2"></i> | |
| <span>1 unidad</span> | |
| </div> | |
| </div> | |
| <!-- Postre --> | |
| <div class="menu-item dessert p-6 bg-brown-50 rounded-lg shadow-md"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="text-xl font-bold">Tarta de Chocolate</h3> | |
| <span class="text-green-800 font-bold">$5.50</span> | |
| </div> | |
| <p class="text-brown-600 mb-4">Tarta de chocolate belga con un toque de sal marina, acompañada de frutos rojos.</p> | |
| <div class="flex items-center text-sm text-brown-500"> | |
| <i class="fas fa-utensils mr-2"></i> | |
| <span>1 porción</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Galería --> | |
| <section id="galeria" class="py-20 bg-brown-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-brown-800">Nuestra Galería</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1517701550928-30aac5df40c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Café preparado" class="w-full h-64 object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1461023058943-07fcbe16d735?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Interior de la cafetería" class="w-full h-64 object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Granos de café" class="w-full h-64 object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Barista preparando café" class="w-full h-64 object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1554118811-1e0d58224d24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2047&q=80" alt="Clientes disfrutando" class="w-full h-64 object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1497034825429-c343d7c6a68f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Postres artesanales" class="w-full h-64 object-cover transition-transform duration-500 hover:scale-110"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonios --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-brown-800">Lo que dicen nuestros clientes</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="testimonial-card p-6 bg-brown-50 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-brown-600 mb-4">"El mejor café de la ciudad. Cada vez que vengo pruebo un grano diferente y siempre es una experiencia única. El ambiente es perfecto para trabajar o relajarse."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Cliente satisfecho" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Laura Martínez</h4> | |
| <p class="text-sm text-brown-500">Cliente frecuente</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6 bg-brown-50 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-brown-600 mb-4">"Me encanta venir los fines de semana a desayunar. Sus croissants son increíbles y el cappuccino está perfectamente equilibrado. El personal siempre es muy amable."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Cliente satisfecho" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Carlos Rodríguez</h4> | |
| <p class="text-sm text-brown-500">Cliente desde 2018</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6 bg-brown-50 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-brown-600 mb-4">"Descubrí este lugar por recomendación y ahora es mi cafetería favorita. El matcha latte es espectacular y el ambiente tan acogedor que siempre termino quedándome más de lo planeado."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Cliente satisfecho" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Ana Sánchez</h4> | |
| <p class="text-sm text-brown-500">Nueva cliente</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contacto --> | |
| <section id="contacto" class="py-20 bg-brown-800 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Visítanos</h2> | |
| <div class="flex flex-col lg:flex-row gap-10"> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-2xl font-bold mb-6">Información de contacto</h3> | |
| <div class="mb-6"> | |
| <h4 class="font-bold text-green-300 mb-2">Dirección</h4> | |
| <p>Calle del Aroma, 123<br>28001 Madrid, España</p> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-bold text-green-300 mb-2">Horario</h4> | |
| <p>Lunes a Viernes: 7:30 - 20:00<br>Sábado y Domingo: 8:00 - 21:00</p> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-bold text-green-300 mb-2">Contacto</h4> | |
| <p>Teléfono: +34 912 345 678<br>Email: hola@cafearoma.com</p> | |
| </div> | |
| <div class="flex space-x-4 mt-8"> | |
| <a href="#" class="text-2xl hover:text-green-300 transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-2xl hover:text-green-300 transition"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-2xl hover:text-green-300 transition"><i class="fab fa-tiktok"></i></a> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <!-- Mapa --> | |
| <div class="mb-8 h-64 bg-brown-700 rounded-lg overflow-hidden"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3037.430493487535!2d-3.703790384593413!3d40.41677547936472!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42287e9a5a5a81%3A0x5a5a5a5a5a5a5a5a!2sPuerta%20del%20Sol%2C%20Madrid!5e0!3m2!1ses!2ses!4v1620000000000!5m2!1ses!2ses" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> | |
| </div> | |
| <!-- Formulario de contacto --> | |
| <h3 class="text-2xl font-bold mb-6">Escríbenos</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block mb-1">Nombre</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 rounded bg-brown-700 border border-brown-600 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 rounded bg-brown-700 border border-brown-600 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-1">Mensaje</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 rounded bg-brown-700 border border-brown-600 focus:outline-none focus:ring-2 focus:ring-green-500"></textarea> | |
| </div> | |
| <button type="submit" class="bg-green-700 hover:bg-green-600 text-white font-bold py-2 px-6 rounded transition duration-300">Enviar</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 bg-green-800 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h3 class="text-2xl font-bold mb-4">Suscríbete a nuestro boletín</h3> | |
| <p class="mb-6 max-w-2xl mx-auto">Recibe noticias sobre nuestros nuevos productos, eventos especiales y promociones exclusivas.</p> | |
| <form class="flex flex-col sm:flex-row justify-center max-w-md mx-auto"> | |
| <input type="email" placeholder="Tu email" class="px-4 py-2 rounded-l sm:rounded-r-none mb-2 sm:mb-0 w-full text-brown-900 focus:outline-none"> | |
| <button type="submit" class="bg-brown-800 hover:bg-brown-700 text-white font-bold py-2 px-6 rounded-r sm:rounded-l-none transition duration-300">Suscribirse</button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-brown-900 text-white py-8"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-2xl font-bold">Café Aroma</h3> | |
| <p class="text-brown-400 mt-1">Cafetería artesanal desde 2010</p> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="text-brown-400">© 2023 Café Aroma. Todos los derechos reservados.</p> | |
| <p class="text-brown-400 mt-1">Diseñado con <i class="fas fa-heart text-red-400"></i> para amantes del café</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const menuToggle = document.getElementById('menu-toggle'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuToggle.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Filter menu items | |
| const categoryBtns = document.querySelectorAll('.category-btn'); | |
| const menuItems = document.querySelectorAll('.menu-item'); | |
| categoryBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| // Remove active class from all buttons | |
| categoryBtns.forEach(b => { | |
| b.classList.remove('bg-green-800', 'text-white'); | |
| b.classList.add('bg-brown-100', 'hover:bg-brown-200'); | |
| }); | |
| // Add active class to clicked button | |
| btn.classList.add('bg-green-800', 'text-white'); | |
| btn.classList.remove('bg-brown-100', 'hover:bg-brown-200'); | |
| const category = btn.dataset.category; | |
| menuItems.forEach(item => { | |
| if (category === 'all' || item.classList.contains(category)) { | |
| item.style.display = 'block'; | |
| } else { | |
| item.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Testimonial animations on scroll | |
| const testimonialCards = document.querySelectorAll('.testimonial-card'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| testimonialCards.forEach(card => { | |
| observer.observe(card); | |
| }); | |
| // Smooth scroll for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cris2080534/doxy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |