Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DQEsthetics - Centro de Estética y Cosmiatría</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#f8c8dc', | |
| secondary: '#d4a373', | |
| accent: '#e9b8c3', | |
| dark: '#5a3d2b', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-image { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-out forwards; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-white text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-spa text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-xl font-bold text-dark">DQ<span class="text-accent">Esthetics</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#inicio" class="text-dark hover:text-accent transition">Inicio</a> | |
| <a href="#servicios" class="text-dark hover:text-accent transition">Servicios</a> | |
| <a href="#galeria" class="text-dark hover:text-accent transition">Galería</a> | |
| <a href="#testimonios" class="text-dark hover:text-accent transition">Testimonios</a> | |
| <a href="#contacto" class="text-dark hover:text-accent transition">Contacto</a> | |
| </nav> | |
| <div class="md:hidden"> | |
| <button id="menu-toggle" class="text-dark focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#inicio" class="text-dark hover:text-accent transition">Inicio</a> | |
| <a href="#servicios" class="text-dark hover:text-accent transition">Servicios</a> | |
| <a href="#galeria" class="text-dark hover:text-accent transition">Galería</a> | |
| <a href="#testimonios" class="text-dark hover:text-accent transition">Testimonios</a> | |
| <a href="#contacto" class="text-dark hover:text-accent transition">Contacto</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="inicio" class="hero-image min-h-screen flex items-center justify-center text-white relative"> | |
| <div class="absolute inset-0 bg-black opacity-30"></div> | |
| <div class="container mx-auto px-4 z-10 text-center fade-in"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Belleza que <span class="text-primary">renace</span></h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Tratamientos personalizados para cuidar tu piel y elevar tu autoestima</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <a href="https://wa.me/5491122563805" class="bg-primary hover:bg-accent text-white font-bold py-3 px-6 rounded-full transition flex items-center justify-center gap-2"> | |
| <i class="fab fa-whatsapp"></i> Reservar consulta | |
| </a> | |
| <a href="#servicios" class="bg-transparent hover:bg-white hover:text-dark border-2 border-white text-white font-bold py-3 px-6 rounded-full transition"> | |
| Conoce nuestros servicios | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-0 right-0 flex justify-center"> | |
| <a href="#servicios" class="text-white animate-bounce"> | |
| <i class="fas fa-chevron-down text-3xl"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-16 bg-primary bg-opacity-10"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <img src="http://imgfz.com/i/uX3EfV1.png" | |
| alt="Dianyth Querales - Propietaria de DQEsthetics" | |
| class="rounded-lg shadow-xl w-full h-auto max-h-96 object-cover"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold text-dark mb-6">Sobre <span class="text-accent">DQEsthetics</span></h2> | |
| <p class="text-lg mb-6">Bienvenidos a DQEsthetics, un espacio creado por Dianyth Querales, Cosmetocosmíatra profesional, donde combinamos ciencia y belleza para ofrecerte los mejores tratamientos para tu piel.</p> | |
| <div class="bg-white p-6 rounded-lg shadow-md mb-6"> | |
| <h3 class="text-xl font-semibold text-dark mb-3">Nuestra Misión</h3> | |
| <p class="text-gray-700">Cuidar, elevar la piel y autoestima con tratamientos personalizados según biotipo cutáneo, utilizando tecnología de vanguardia y productos de alta calidad.</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-certificate text-white"></i> | |
| </div> | |
| <span class="font-medium">Profesional Certificada</span> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-heart text-white"></i> | |
| </div> | |
| <span class="font-medium">Tratamientos Personalizados</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="servicios" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Nuestros <span class="text-accent">Servicios</span></h2> | |
| <p class="text-lg max-w-2xl mx-auto">Descubre nuestros tratamientos especializados diseñados para realzar tu belleza natural</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Consulta diagnóstico de piel" | |
| class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-search text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">Consulta Diagnóstico de Piel</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Evaluación profesional gratuita para determinar tu biotipo cutáneo y necesidades específicas.</p> | |
| <div class="bg-primary bg-opacity-10 px-3 py-1 rounded-full inline-block"> | |
| <span class="text-primary font-medium">GRATUITO</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Tratamientos con EXOSOMAS - Regeneración celular" | |
| class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-dna text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">Tratamientos con EXOSOMAS</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Tecnología de regeneración celular avanzada para una piel más joven y saludable.</p> | |
| <div class="flex items-center text-secondary"> | |
| <i class="fas fa-star mr-1"></i> | |
| <i class="fas fa-star mr-1"></i> | |
| <i class="fas fa-star mr-1"></i> | |
| <i class="fas fa-star mr-1"></i> | |
| <i class="fas fa-star mr-1"></i> | |
| <span class="ml-2 text-sm">Más solicitado</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Higiene facial profunda" | |
| class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-spa text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">Higiene Facial Profunda</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Limpieza profunda con extracciones para eliminar impurezas y renovar tu piel.</p> | |
| <div class="flex items-center text-secondary"> | |
| <i class="fas fa-birthday-cake mr-2"></i> | |
| <span class="font-medium">20% OFF en tu cumpleaños</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="DERMAPLANING - Exfoliación mecánica profesional" | |
| class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-cut text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">DERMAPLANING</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Exfoliación mecánica que elimina células muertas y vello facial para una piel radiante.</p> | |
| <div class="flex items-center text-secondary"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span class="font-medium">Resultados inmediatos</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Maquillaje profesional" | |
| class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-paint-brush text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">Maquillaje Profesional</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Técnicas profesionales para eventos especiales o aprendizaje en nuestros cursos.</p> | |
| <div class="flex items-center text-secondary"> | |
| <i class="fas fa-graduation-cap mr-2"></i> | |
| <span class="font-medium">Cursos disponibles</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1576086213369-97a306d36557?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" | |
| alt="Tratamientos faciales con aparatología" | |
| class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-microchip text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark">Aparatología Facial</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Tecnología avanzada para tratamientos de rejuvenecimiento y cuidado facial.</p> | |
| <div class="flex items-center text-secondary"> | |
| <i class="fas fa-bolt mr-2"></i> | |
| <span class="font-medium">Tecnología de punta</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="https://wa.me/5491122563805" class="bg-primary hover:bg-accent text-white font-bold py-3 px-8 rounded-full transition inline-flex items-center"> | |
| <i class="fab fa-whatsapp mr-2"></i> Consultar disponibilidad | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section id="galeria" class="py-16 bg-primary bg-opacity-10"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Transformaciones <span class="text-accent">Reales</span></h2> | |
| <p class="text-lg max-w-2xl mx-auto">Descubre los resultados de nuestros tratamientos personalizados</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1576086213369-97a306d36557?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" | |
| alt="Resultado de tratamiento" | |
| class="w-full h-64 object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1556228579-6d256d1d7e82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Resultado de tratamiento" | |
| class="w-full h-64 object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Resultado de tratamiento" | |
| class="w-full h-64 object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| </div> | |
| <div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="h-40 overflow-hidden rounded-lg shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Treatment 1" | |
| class="w-full h-full object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| <div class="h-40 overflow-hidden rounded-lg shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Treatment 2" | |
| class="w-full h-full object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| <div class="h-40 overflow-hidden rounded-lg shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Treatment 3" | |
| class="w-full h-full object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| <div class="h-40 overflow-hidden rounded-lg shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1556228579-6d256d1d7e82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Treatment 4" | |
| class="w-full h-full object-cover hover:scale-105 transition duration-300"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonios" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Lo que dicen <span class="text-accent">nuestras clientas</span></h2> | |
| <p class="text-lg max-w-2xl mx-auto">Experiencias reales de quienes confiaron en nuestros tratamientos</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-primary bg-opacity-10 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-dark">María G.</h4> | |
| <div class="flex text-secondary"> | |
| <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> | |
| </div> | |
| <p class="text-gray-700 italic">"Los tratamientos con exosomas cambiaron completamente mi piel. Después de años de luchar con manchas y textura irregular, finalmente tengo una piel uniforme y radiante. Dianyth es increíblemente profesional y sabe exactamente lo que necesita cada piel."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-primary bg-opacity-10 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-dark">Laura V.</h4> | |
| <div class="flex text-secondary"> | |
| <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> | |
| </div> | |
| <p class="text-gray-700 italic">"El dermaplaning fue una revelación para mí. No solo eliminó el vello facial que tanto me molestaba, sino que dejó mi piel increíblemente suave y preparada para absorber mejor mis productos de cuidado. El ambiente en DQEsthetics es tan relajante que siempre salgo renovada por dentro y por fuera."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-primary bg-opacity-10 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-dark">Carolina R.</h4> | |
| <div class="flex text-secondary"> | |
| <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> | |
| </div> | |
| <p class="text-gray-700 italic">"Tomé el curso de maquillaje y fue una experiencia increíble. Aprendí técnicas profesionales que nunca hubiera descubierto por mi cuenta. Dianyth tiene una paciencia infinita y explica todo de manera clara. Ahora me maquillo mejor que nunca y hasta he empezado a maquillar a mis amigas para eventos especiales."</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="https://wa.me/5491122563805" class="bg-primary hover:bg-accent text-white font-bold py-3 px-8 rounded-full transition inline-flex items-center"> | |
| <i class="fas fa-pen mr-2"></i> Deja tu testimonio | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reservation Section --> | |
| <section class="py-16 bg-accent bg-opacity-10"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Reserva tu <span class="text-accent">Cita</span></h2> | |
| <p class="text-lg max-w-2xl mx-auto">Selecciona el servicio y fecha que prefieras para tu próxima visita</p> | |
| </div> | |
| <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-xl font-bold text-dark mb-6">Disponibilidad</h3> | |
| <div class="mb-6"> | |
| <label for="service" class="block text-gray-700 font-medium mb-2">Servicio</label> | |
| <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="">Selecciona un servicio</option> | |
| <option value="Consulta diagnóstico">Consulta diagnóstico de piel</option> | |
| <option value="Exosomas">Tratamientos con EXOSOMAS</option> | |
| <option value="Higiene facial">Higiene facial profunda</option> | |
| <option value="Dermaplaning">DERMAPLANING</option> | |
| <option value="Maquillaje">Maquillaje profesional</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="date" class="block text-gray-700 font-medium mb-2">Fecha</label> | |
| <input type="date" id="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="time" class="block text-gray-700 font-medium mb-2">Hora</label> | |
| <select id="time" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="">Selecciona una hora</option> | |
| <option value="15:30">15:30</option> | |
| <option value="16:00">16:00</option> | |
| <option value="16:30">16:30</option> | |
| <option value="17:00">17:00</option> | |
| <option value="17:30">17:30</option> | |
| <option value="18:00">18:00</option> | |
| <option value="18:30">18:30</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 bg-primary bg-opacity-10 p-8 flex flex-col justify-between"> | |
| <div> | |
| <h3 class="text-xl font-bold text-dark mb-4">Resumen de Reserva</h3> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-700">Servicio:</span> | |
| <span class="font-medium" id="service-summary">-</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-700">Fecha:</span> | |
| <span class="font-medium" id="date-summary">-</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-700">Hora:</span> | |
| <span class="font-medium" id="time-summary">-</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <button class="w-full bg-primary hover:bg-accent text-white font-bold py-3 px-6 rounded-full transition"> | |
| Confirmar Reserva | |
| </button> | |
| <p class="text-sm text-gray-500 mt-3 text-center">Al confirmar, serás redirigido a WhatsApp para finalizar el proceso.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Schedule Section --> | |
| <section class="py-16 bg-primary text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-3xl font-bold mb-6">Horarios de <span class="text-accent">Atención</span></h2> | |
| <div class="bg-white bg-opacity-20 p-6 rounded-xl backdrop-blur-sm"> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between border-b border-white border-opacity-30 pb-2"> | |
| <span class="font-medium">Lunes</span> | |
| <span>15:30 - 19:00</span> | |
| </div> | |
| <div class="flex justify-between border-b border-white border-opacity-30 pb-2"> | |
| <span class="font-medium">Martes</span> | |
| <span>15:30 - 19:00</span> | |
| </div> | |
| <div class="flex justify-between border-b border-white border-opacity-30 pb-2"> | |
| <span class="font-medium">Miércoles</span> | |
| <span>15:30 - 19:00</span> | |
| </div> | |
| <div class="flex justify-between border-b border-white border-opacity-30 pb-2"> | |
| <span class="font-medium">Jueves</span> | |
| <span>14:00 - 19:00</span> | |
| </div> | |
| <div class="flex justify-between border-b border-white border-opacity-30 pb-2"> | |
| <span class="font-medium">Viernes</span> | |
| <span>15:30 - 19:00</span> | |
| </div> | |
| <div class="flex justify-between pb-2"> | |
| <span class="font-medium">Sábado y Domingo</span> | |
| <span>Cerrado</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <h3 class="text-2xl font-bold mb-6">¿Necesitas un horario especial?</h3> | |
| <p class="text-lg mb-6">Entendemos que cada persona tiene compromisos diferentes. Contáctanos y haremos lo posible por acomodar tu agenda.</p> | |
| <div class="bg-white text-dark p-6 rounded-xl"> | |
| <h4 class="text-xl font-bold mb-4">Promoción de cumpleaños</h4> | |
| <p class="mb-4">Celebra tu día especial con un 20% de descuento en cualquier tratamiento facial durante todo tu mes de cumpleaños.</p> | |
| <div class="flex items-center text-secondary"> | |
| <i class="fas fa-gift text-2xl mr-3"></i> | |
| <span class="font-medium">Presenta tu DNI para validar el descuento</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contacto" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Contáctanos</span></h2> | |
| <p class="text-lg max-w-2xl mx-auto">Estamos aquí para responder todas tus preguntas y ayudarte a reservar tu cita</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/2"> | |
| <div class="bg-primary bg-opacity-10 p-8 rounded-xl h-full"> | |
| <h3 class="text-2xl font-bold text-dark mb-6">Información de <span class="text-accent">Contacto</span></h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-map-marker-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-dark mb-1">Ubicación</h4> | |
| <p class="text-gray-700">Lomas de Zamora, Provincia de Buenos Aires, Argentina</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-phone-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-dark mb-1">Teléfono</h4> | |
| <p class="text-gray-700">+54 9 11 2256-3805</p> | |
| <a href="https://wa.me/5491122563805" class="text-primary hover:text-accent transition mt-2 inline-flex items-center"> | |
| <i class="fab fa-whatsapp mr-2"></i> Envíanos un mensaje por WhatsApp | |
| </a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-envelope text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-dark mb-1">Email</h4> | |
| <p class="text-gray-700">[email protected]</p> | |
| <p class="text-sm text-gray-500 mt-2">(Respuesta en 24-48 horas)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold text-dark mb-4">Síguenos en redes sociales</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary hover:bg-accent flex items-center justify-center text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary hover:bg-accent flex items-center justify-center text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-primary hover:bg-accent flex items-center justify-center text-white transition"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white shadow-lg rounded-xl p-8 h-full"> | |
| <h3 class="text-2xl font-bold text-dark mb-6">Formulario de <span class="text-accent">Contacto</span></h3> | |
| <form id="contact-form" class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nombre completo</label> | |
| <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Teléfono</label> | |
| <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="service" class="block text-gray-700 font-medium mb-2">Servicio de interés</label> | |
| <select id="service" name="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="">Selecciona un servicio</option> | |
| <option value="Consulta diagnóstico">Consulta diagnóstico de piel GRATUITA</option> | |
| <option value="Exosomas">Tratamientos con EXOSOMAS</option> | |
| <option value="Higiene facial">Higiene facial profunda</option> | |
| <option value="Dermaplaning">DERMAPLANING</option> | |
| <option value="Maquillaje">Maquillaje profesional</option> | |
| <option value="Cursos">Cursos de maquillaje</option> | |
| <option value="Otro">Otro</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Mensaje</label> | |
| <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" class="w-full bg-primary hover:bg-accent text-white font-bold py-3 px-6 rounded-full transition"> | |
| Enviar mensaje | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map Section --> | |
| <div class="h-96 w-full bg-gray-200"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3279.991430712867!2d-58.40384192417368!3d-34.7359183729175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcd2a6896483d9%3A0x9b5f1abf6a640c1a!2sLomas%20de%20Zamora%2C%20Provincia%20de%20Buenos%20Aires!5e0!3m2!1ses!2sar!4v1689875436785!5m2!1ses!2sar" | |
| width="100%" | |
| height="100%" | |
| style="border:0;" | |
| allowfullscreen="" | |
| loading="lazy" | |
| referrerpolicy="no-referrer-when-downgrade"></iframe> | |
| </div> | |
| <!-- WhatsApp Float Button --> | |
| <div class="fixed bottom-6 right-6 z-50"> | |
| <a href="https://wa.me/5491122563805" class="bg-green-500 hover:bg-green-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg transition transform hover:scale-110"> | |
| <i class="fab fa-whatsapp text-2xl"></i> | |
| </a> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3"> | |
| <i class="fas fa-spa text-white"></i> | |
| </div> | |
| <h2 class="text-xl font-bold">DQ<span class="text-accent">Esthetics</span></h2> | |
| </div> | |
| <p class="mt-2 text-gray-300">Cuidando tu piel, elevando tu autoestima</p> | |
| </div> | |
| <div class="flex flex-col items-center md:items-end"> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-300 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white transition"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| </div> | |
| <p class="text-sm text-gray-400">© 2023 DQEsthetics. Todos los derechos reservados.</p> | |
| <p class="text-xs text-gray-500 mt-2">Esta es una demo desarrollada por KazeCode. Visita <a href="https://kazecode.com.ar" class="text-primary hover:underline">kazecode.com.ar</a> para conocer más sobre nuestros servicios de desarrollo web.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Form submission | |
| const contactForm = document.getElementById('contact-form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Here you would typically send the form data to a server | |
| // For this demo, we'll just show an alert | |
| alert('¡Gracias por tu mensaje! Nos pondremos en contacto contigo pronto.'); | |
| contactForm.reset(); | |
| }); | |
| } | |
| // Smooth scrolling for anchor 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 | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| 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=Walterkz/dqesthetics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |