Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dra. Petra Montilla | Psicóloga Clínica en Santo Domingo</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"> | |
| <style> | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .fade-in { | |
| animation: fadeIn 1.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card { | |
| background: rgba(255, 255, 255, 0.9); | |
| backdrop-filter: blur(10px); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 text-gray-800"> | |
| <!-- Header/Navigation --> | |
| <header class="fixed w-full bg-white shadow-md z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-brain text-3xl text-indigo-600 mr-3"></i> | |
| <h1 class="text-2xl font-bold text-indigo-800">Dra. Petra Montilla</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#inicio" class="text-indigo-700 font-medium hover:text-indigo-500 transition">Inicio</a> | |
| <a href="#servicios" class="text-gray-600 hover:text-indigo-500 transition">Servicios</a> | |
| <a href="#sobre-mi" class="text-gray-600 hover:text-indigo-500 transition">Sobre Mí</a> | |
| <a href="#testimonios" class="text-gray-600 hover:text-indigo-500 transition">Testimonios</a> | |
| <a href="#contacto" class="text-gray-600 hover:text-indigo-500 transition">Contacto</a> | |
| </nav> | |
| <button class="md:hidden text-gray-600 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="inicio" class="hero-bg min-h-screen flex items-center pt-20"> | |
| <div class="container mx-auto px-6 py-20 text-white fade-in"> | |
| <div class="max-w-2xl"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Bienestar Emocional para una Vida Plena</h1> | |
| <p class="text-xl mb-8">Soy la Dra. Petra Montilla, psicóloga clínica especializada en ayudar a personas como tú a superar desafíos emocionales y alcanzar su máximo potencial.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contacto" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 text-center">Agendar Cita</a> | |
| <a href="#servicios" class="bg-white hover:bg-gray-100 text-indigo-600 font-bold py-3 px-8 rounded-full transition duration-300 text-center">Conoce Más</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="servicios" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-4">Mis Servicios</h2> | |
| <p class="max-w-2xl mx-auto text-gray-600">Ofrezco terapia psicológica personalizada adaptada a tus necesidades específicas.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-gray-50 rounded-xl p-8 card-hover"> | |
| <div class="text-indigo-600 text-4xl mb-6"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 text-indigo-800">Terapia Individual</h3> | |
| <p class="text-gray-600 mb-4">Sesiones personalizadas para abordar ansiedad, depresión, estrés, traumas y otros desafíos emocionales.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i> | |
| <span>Enfoque cognitivo-conductual</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i> | |
| <span>Sesiones de 50 minutos</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i> | |
| <span>Seguimiento personalizado</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-gray-50 rounded-xl p-8 card-hover"> | |
| <div class="text-indigo-600 text-4xl mb-6"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 text-indigo-800">Terapia de Pareja</h3> | |
| <p class="text-gray-600 mb-4">Ayuda profesional para mejorar la comunicación, resolver conflictos y fortalecer la relación.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i> | |
| <span>Enfoque sistémico</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i> | |
| <span>Sesiones de 80 minutos</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i> | |
| <span>Técnicas de comunicación efectiva</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-gray-50 rounded-xl p-8 card-hover"> | |
| <div class="text-indigo-600 text-4xl mb-6"> | |
| <i class="fas fa-child"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4 text-indigo-800">Terapia Infantil</h3> | |
| <p class="text-gray-600 mb-4">Atención especializada para niños y adolescentes con problemas emocionales o de comportamiento.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i> | |
| <span>Terapia lúdica</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i> | |
| <span>Orientación a padres</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i> | |
| <span>Enfoque adaptado a cada edad</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Me Section --> | |
| <section id="sobre-mi" class="py-20 bg-indigo-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <img src="https://images.unsplash.com/photo-1590086783191-a0694c7d1e6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Dra. Petra Montilla" class="rounded-xl shadow-xl w-full max-w-md mx-auto"> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-6">Sobre Mí</h2> | |
| <p class="text-gray-700 mb-6">Soy la Dra. Petra Montilla, psicóloga clínica con más de 15 años de experiencia ayudando a personas a superar sus desafíos emocionales y mejorar su calidad de vida.</p> | |
| <p class="text-gray-700 mb-6">Me gradué con honores de la Universidad Autónoma de Santo Domingo (UASD) y completé mi maestría en Psicología Clínica en la Pontificia Universidad Católica Madre y Maestra (PUCMM).</p> | |
| <p class="text-gray-700 mb-8">Mi enfoque terapéutico combina técnicas científicamente validadas con un trato humano y cercano, adaptándome siempre a las necesidades específicas de cada paciente.</p> | |
| <div class="grid grid-cols-2 gap-4 mb-8"> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-graduation-cap text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-indigo-800">Formación</h4> | |
| <p class="text-sm text-gray-600">Lic. en Psicología (UASD)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-certificate text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-indigo-800">Especialización</h4> | |
| <p class="text-sm text-gray-600">Maestría en Psicología Clínica (PUCMM)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-language text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-indigo-800">Idiomas</h4> | |
| <p class="text-sm text-gray-600">Español e Inglés</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-star text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-indigo-800">Experiencia</h4> | |
| <p class="text-sm text-gray-600">15+ años de práctica clínica</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#contacto" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-full transition duration-300"> | |
| Contactar Ahora | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonios" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-4">Testimonios</h2> | |
| <p class="max-w-2xl mx-auto text-gray-600">Lo que mis pacientes dicen sobre su experiencia en terapia.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card rounded-xl p-8 shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <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-gray-700 mb-6 italic">"La Dra. Montilla me ayudó a superar mi ansiedad cuando sentía que ya no había salida. Su enfoque profesional y su calidez humana hacen que cada sesión sea realmente terapéutica."</p> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-indigo-800">María R.</h4> | |
| <p class="text-sm text-gray-600">Paciente desde 2019</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card rounded-xl p-8 shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <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-gray-700 mb-6 italic">"Gracias a la terapia de pareja con la Dra. Montilla, mi esposo y yo hemos aprendido a comunicarnos mejor y resolver nuestros conflictos de manera saludable. Recomiendo totalmente sus servicios."</p> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-indigo-800">Carlos y Ana</h4> | |
| <p class="text-sm text-gray-600">Pacientes desde 2020</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card rounded-xl p-8 shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <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-gray-700 mb-6 italic">"Llevé a mi hijo de 10 años con la Dra. Montilla por problemas de comportamiento en la escuela. En pocos meses notamos una gran mejoría. Es increíble cómo conecta con los niños."</p> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-indigo-800">Laura M.</h4> | |
| <p class="text-sm text-gray-600">Madre de paciente</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contacto" class="py-20 bg-indigo-800 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Contacto</h2> | |
| <p class="max-w-2xl mx-auto">Agenda una cita o contáctame para más información sobre mis servicios.</p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <h3 class="text-2xl font-bold mb-6">Información de Contacto</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-600 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Ubicación</h4> | |
| <p class="text-indigo-200">Av. Abraham Lincoln #1234, Suite 502<br>Santo Domingo, República Dominicana</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-600 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Teléfono</h4> | |
| <p class="text-indigo-200">(809) 555-1234</p> | |
| <p class="text-indigo-200">WhatsApp: (829) 555-5678</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-600 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Correo Electrónico</h4> | |
| <p class="text-indigo-200">contacto@drapetramontilla.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-600 p-3 rounded-full mr-4"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Horario de Atención</h4> | |
| <p class="text-indigo-200">Lunes a Viernes: 9:00 AM - 6:00 PM</p> | |
| <p class="text-indigo-200">Sábados: 9:00 AM - 1:00 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h4 class="font-bold mb-4">Sígueme en Redes Sociales</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-indigo-600 hover:bg-indigo-700 p-3 rounded-full transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-indigo-600 hover:bg-indigo-700 p-3 rounded-full transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-indigo-600 hover:bg-indigo-700 p-3 rounded-full transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-indigo-600 hover:bg-indigo-700 p-3 rounded-full transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-2xl font-bold mb-6">Formulario de Contacto</h3> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block mb-2 font-medium">Nombre Completo</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg bg-indigo-700 border border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white placeholder-indigo-300" placeholder="Tu nombre"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2 font-medium">Correo Electrónico</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-indigo-700 border border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white placeholder-indigo-300" placeholder="tu@email.com"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block mb-2 font-medium">Teléfono</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg bg-indigo-700 border border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white placeholder-indigo-300" placeholder="(809) 555-1234"> | |
| </div> | |
| <div> | |
| <label for="service" class="block mb-2 font-medium">Servicio de Interés</label> | |
| <select id="service" class="w-full px-4 py-3 rounded-lg bg-indigo-700 border border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"> | |
| <option value="">Selecciona un servicio</option> | |
| <option value="individual">Terapia Individual</option> | |
| <option value="pareja">Terapia de Pareja</option> | |
| <option value="infantil">Terapia Infantil</option> | |
| <option value="otro">Otro</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-2 font-medium">Mensaje</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg bg-indigo-700 border border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white placeholder-indigo-300" placeholder="Cuéntame cómo puedo ayudarte..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-white hover:bg-gray-100 text-indigo-800 font-bold py-3 px-6 rounded-lg transition duration-300"> | |
| Enviar Mensaje | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map Section --> | |
| <div class="h-96 bg-gray-200"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3784.006539682913!2d-69.931865924687!3d18.48317167196001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e56287a0c720041%3A0x8476f62bb5008fc4!2sAv.%20Abraham%20Lincoln%2C%20Santo%20Domingo!5e0!3m2!1sen!2sdo!4v1689876543210!5m2!1sen!2sdo" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-indigo-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-brain text-3xl text-indigo-400 mr-3"></i> | |
| <h2 class="text-2xl font-bold">Dra. Petra Montilla</h2> | |
| </div> | |
| <p class="mt-2 text-indigo-300">Psicóloga Clínica en Santo Domingo</p> | |
| </div> | |
| <div class="flex flex-col items-center md:items-end"> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-indigo-300 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-indigo-300 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-indigo-300 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-indigo-300 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| <p class="text-indigo-300 text-sm">© 2023 Dra. Petra Montilla. Todos los derechos reservados.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="backToTop" class="fixed bottom-8 right-8 bg-indigo-600 text-white p-4 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Mobile Menu Toggle (would need actual implementation) | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| alert('Menú móvil se abriría aquí. En una implementación real, esto mostraría/ocultaría el menú.'); | |
| }); | |
| // Form submission (would need actual implementation) | |
| const form = document.querySelector('form'); | |
| if (form) { | |
| form.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| alert('Formulario enviado. En una implementación real, esto enviaría los datos al servidor.'); | |
| form.reset(); | |
| }); | |
| } | |
| </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=WebLancer/weblancer-mockups" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |