Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>O Amor que pode dar certo - Workshop com Ángel Martínez Viejo</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: { | |
| lavender: { | |
| 100: '#f3e8ff', | |
| 200: '#e9d5ff', | |
| 300: '#d8b4fe', | |
| 400: '#c084fc', | |
| 500: '#a855f7', | |
| 600: '#9333ea', | |
| 700: '#7e22ce', | |
| 800: '#6b21a8', | |
| 900: '#581c87', | |
| }, | |
| olive: { | |
| 100: '#ecfccb', | |
| 200: '#d9f99d', | |
| 300: '#bef264', | |
| 400: '#a3e635', | |
| 500: '#84cc16', | |
| 600: '#65a30d', | |
| 700: '#4d7c0f', | |
| 800: '#3f6212', | |
| 900: '#365314', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(168, 85, 247, 0.9) 0%, rgba(132, 204, 22, 0.9) 100%); | |
| } | |
| .section-divider { | |
| height: 100px; | |
| background: linear-gradient(to bottom right, transparent 49.5%, white 50%), | |
| linear-gradient(to top right, transparent 49.5%, white 50%); | |
| background-size: 100% 50%; | |
| background-repeat: no-repeat; | |
| background-position: top, bottom; | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Countdown Section --> | |
| <div class="hero-gradient text-white py-8"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-xl md:text-2xl font-light mb-4">WORKSHOP PRESENCIAL COM ÁNGEL MARTÍNEZ VIEJO</h2> | |
| <h1 class="text-3xl md:text-5xl font-bold mb-8">O AMOR QUE PODE DAR CERTO</h1> | |
| <p class="text-lg md:text-xl mb-8">Um olhar sistêmico sobre os relacionamentos</p> | |
| <div class="max-w-4xl mx-auto bg-white bg-opacity-20 rounded-lg p-6 backdrop-blur-sm"> | |
| <p class="text-lg mb-4">O evento começa em:</p> | |
| <div id="countdown" class="flex justify-center gap-4 md:gap-8"> | |
| <div class="text-center"> | |
| <div class="text-3xl md:text-5xl font-bold countdown-item" id="days">00</div> | |
| <div class="text-sm">Dias</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl md:text-5xl font-bold countdown-item" id="hours">00</div> | |
| <div class="text-sm">Horas</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl md:text-5xl font-bold countdown-item" id="minutes">00</div> | |
| <div class="text-sm">Minutos</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl md:text-5xl font-bold countdown-item" id="seconds">00</div> | |
| <div class="text-sm">Segundos</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <p class="text-lg">20, 21 e 22 de Junho de 2025 | 9h às 18h</p> | |
| <p class="text-lg">Leques Brasil Hotel-Escola - São Paulo/SP</p> | |
| </div> | |
| <a href="#inscricao" class="mt-8 inline-block bg-olive-600 hover:bg-olive-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105"> | |
| GARANTA SUA VAGA | |
| </a> | |
| </div> | |
| </div> | |
| <div class="section-divider"></div> | |
| <!-- About Event Section --> | |
| <div class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" | |
| alt="Workshop sobre relacionamentos" | |
| class="rounded-lg shadow-xl w-full h-auto floating"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold text-lavender-800 mb-6">PARA QUEM É ESTE WORKSHOP?</h2> | |
| <p class="text-gray-700 mb-6 text-lg"> | |
| Para você que deseja entender por que o amor, mesmo com tanto esforço, às vezes simplesmente não flui. Para você, que sente que já viveu dores amorosas e busca um novo olhar para si e para o amor, que sente que "algo maior" interfere em sua vida afetiva — e está pronto(a) para acessar e curar essas raízes. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-lavender-500 text-white"> | |
| <i class="fas fa-heart text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700">Casais que buscam reconexão e melhor comunicação</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-lavender-500 text-white"> | |
| <i class="fas fa-user text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700">Pessoas solteiras que vivem padrões repetitivos nos relacionamentos</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-lavender-500 text-white"> | |
| <i class="fas fa-brain text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700">Profissionais terapêuticos que querem conhecer o olhar sistêmico aplicado ao amor</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Speaker Section --> | |
| <div class="py-16 bg-lavender-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-lavender-800 mb-12">CONHEÇA ÁNGEL MARTÍNEZ VIEJO</h2> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/3"> | |
| <img src="https://misterx.com.br/aline/foto.jpg" | |
| alt="Ángel Martínez Viejo" | |
| class="rounded-full w-64 h-64 mx-auto object-cover border-4 border-white shadow-lg"> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h3 class="text-2xl font-bold text-olive-800 mb-4">Psicólogo e Constelador Sistêmico</h3> | |
| <p class="text-gray-700 mb-6"> | |
| Com mais de 25 anos de experiência no trabalho com pessoas, casais, famílias, grupos e organizações. Membro Didata da Associação Espanhola de Constelações Familiares e Sistêmicas. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold text-olive-600 mb-2">Formação Acadêmica</h4> | |
| <ul class="list-disc list-inside text-gray-700 space-y-1"> | |
| <li>Licenciado em Psicologia - Universidade de Sevilha</li> | |
| <li>Máster em Psicoterapia Relacional Sistêmica</li> | |
| <li>Diplomado em Constelações Familiares</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold text-olive-600 mb-2">Especializações</h4> | |
| <ul class="list-disc list-inside text-gray-700 space-y-1"> | |
| <li>Hipnoterapia Ericksoniana</li> | |
| <li>Terapia Gestalt</li> | |
| <li>EMDR</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-bold text-olive-600 mb-2">Autor do Livro</h4> | |
| <p class="text-gray-700"> | |
| "Emoción y Acción. Psicología de la vida apasionada" - Uma obra que explora as conexões entre emoção e ação na construção de uma vida plena. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Program Section --> | |
| <div class="py-16 bg-olive-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-olive-800 mb-12">PROGRAMA DO WORKSHOP</h2> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-bold text-lavender-700 mb-4">IMERSÃO PRESENCIAL DE 3 DIAS</h3> | |
| <p class="text-gray-700 mb-6"> | |
| Pura entrega às questões mais profundas e inconscientes da alma. Vista seu amor mais profundo por si mesmo e venha com roupas confortáveis, o amor é quentinho! | |
| </p> | |
| </div> | |
| <div class="space-y-8"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <div class="md:w-1/3 bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="text-lavender-600 text-4xl mb-4"> | |
| <i class="fas fa-calendar-day"></i> | |
| </div> | |
| <h4 class="font-bold text-olive-800 mb-2">DIA 1</h4> | |
| <p class="text-gray-700"> | |
| Como heranças familiares invisíveis impactam o amor. Introdução às Constelações Familiares aplicadas aos relacionamentos. | |
| </p> | |
| </div> | |
| <div class="md:w-1/3 bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="text-lavender-600 text-4xl mb-4"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <h4 class="font-bold text-olive-800 mb-2">DIA 2</h4> | |
| <p class="text-gray-700"> | |
| Como lealdades sistêmicas e repetições inconscientes travam a vida amorosa. Exercícios práticos de reconexão. | |
| </p> | |
| </div> | |
| <div class="md:w-1/3 bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="text-lavender-600 text-4xl mb-4"> | |
| <i class="fas fa-hands-helping"></i> | |
| </div> | |
| <h4 class="font-bold text-olive-800 mb-2">DIA 3</h4> | |
| <p class="text-gray-700"> | |
| O caminho da Cura emocional e da Reconexão com a própria história familiar. Encerramento com ritual de integração. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <h4 class="font-bold text-olive-800 mb-2">HORÁRIO DIÁRIO</h4> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex-1 min-w-[200px] bg-olive-50 p-4 rounded"> | |
| <p class="font-semibold text-olive-700">Manhã</p> | |
| <p class="text-gray-700">9h às 12h30 - Sessão principal</p> | |
| </div> | |
| <div class="flex-1 min-w-[200px] bg-olive-50 p-4 rounded"> | |
| <p class="font-semibold text-olive-700">Almoço</p> | |
| <p class="text-gray-700">12h30 às 14h</p> | |
| </div> | |
| <div class="flex-1 min-w-[200px] bg-olive-50 p-4 rounded"> | |
| <p class="font-semibold text-olive-700">Tarde</p> | |
| <p class="text-gray-700">14h às 18h - Com dois breaks</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Location Section --> | |
| <div class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-lavender-800 mb-12">LOCAL DO EVENTO</h2> | |
| <div class="flex flex-col md:flex-row gap-12 items-center"> | |
| <div class="md:w-1/2"> | |
| <div class="rounded-lg overflow-hidden shadow-xl"> | |
| <iframe | |
| src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.071318020108!2d-46.63652092468712!3d-23.56197847880086!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce59a00cc9896b%3A0x4d7fa8becba4e40d!2sLiberdade%2C%20S%C3%A3o%20Paulo%20-%20State%20of%20S%C3%A3o%20Paulo!5e0!3m2!1sen!2sbr!4v1689876036783!5m2!1sen!2sbr" | |
| width="100%" | |
| height="400" | |
| style="border:0;" | |
| allowfullscreen="" | |
| loading="lazy" | |
| referrerpolicy="no-referrer-when-downgrade"> | |
| </iframe> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-bold text-olive-800 mb-4">Leques Brasil Hotel-Escola</h3> | |
| <p class="text-gray-700 mb-6"> | |
| R. São Joaquim, 216 - Liberdade, São Paulo - SP, 01508-000 | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-olive-500 text-white"> | |
| <i class="fas fa-subway text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700">Próximo à estação São Joaquim do Metrô (Linha 1-Azul)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-olive-500 text-white"> | |
| <i class="fas fa-parking text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700">Estacionamento disponível no local</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-full bg-olive-500 text-white"> | |
| <i class="fas fa-utensils text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-700">Restaurantes e cafés próximos para o intervalo</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-lavender-50 p-6 rounded-lg"> | |
| <h4 class="font-bold text-lavender-700 mb-2">IDIOMAS</h4> | |
| <p class="text-gray-700"> | |
| O workshop será conduzido em espanhol com tradução simultânea para português. Todos os materiais serão disponibilizados nos dois idiomas. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials Section --> | |
| <div class="py-16 bg-lavender-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-lavender-800 mb-12">DEPOIMENTOS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Ana Carolina</p> | |
| <div class="flex space-x-1 text-sm text-yellow-400"> | |
| <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-600 italic"> | |
| "Participar do workshop do Ángel mudou minha perspectiva sobre relacionamentos. Entendi padrões que se repetiam na minha vida e hoje me sinto mais livre para amar." | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Ricardo e Juliana</p> | |
| <div class="flex space-x-1 text-sm text-yellow-400"> | |
| <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-600 italic"> | |
| "Como casal, estávamos em crise. O workshop nos ajudou a ver além dos conflitos superficiais e encontrar a raiz dos nossos problemas. Recomendamos muito!" | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">Dra. Fernanda</p> | |
| <div class="flex space-x-1 text-sm text-yellow-400"> | |
| <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-600 italic"> | |
| "Como terapeuta, aprendi abordagens poderosas que já integrei na minha prática. A profundidade do trabalho do Ángel é impressionante." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div id="inscricao" class="py-16 bg-gradient-to-r from-lavender-600 to-olive-600 text-cinza"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">VAGAS LIMITADAS</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto"> | |
| Garanta sua participação neste workshop transformador que irá mudar sua perspectiva sobre relacionamentos e amor. | |
| </p> | |
| <div class="max-w-2xl mx-auto bg-white bg-opacity-20 rounded-xl p-8 backdrop-blur-sm"> | |
| <h3 class="text-2xl font-bold mb-6">FAÇA SUA INSCRIÇÃO</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-white bg-opacity-30 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2">PAGAMENTO À VISTA</h4> | |
| <p class="text-xl font-bold">R$ XXXX,XX</p> | |
| <p class="text-sm">Via PIX com 10% de desconto</p> | |
| </div> | |
| <div class="bg-white bg-opacity-30 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2">PARCELADO</h4> | |
| <p class="text-xl font-bold">Até 12X</p> | |
| <p class="text-sm">No cartão de crédito</p> | |
| </div> | |
| </div> | |
| <form class="space-y-4 text-left"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium">Nome Completo</label> | |
| <input type="text" id="name" class="mt-1 block w-full rounded-md bg-white bg-opacity-70 border-transparent focus:border-white focus:bg-white focus:ring-0 text-gray-800 p-3"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium">E-mail</label> | |
| <input type="email" id="email" class="mt-1 block w-full rounded-md bg-white bg-opacity-70 border-transparent focus:border-white focus:bg-white focus:ring-0 text-gray-800 p-3"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium">Telefone</label> | |
| <input type="tel" id="phone" class="mt-1 block w-full rounded-md bg-white bg-opacity-70 border-transparent focus:border-white focus:bg-white focus:ring-0 text-gray-800 p-3"> | |
| </div> | |
| <div> | |
| <label for="payment" class="block text-sm font-medium">Forma de Pagamento</label> | |
| <select id="payment" class="mt-1 block w-full rounded-md bg-white bg-opacity-70 border-transparent focus:border-white focus:bg-white focus:ring-0 text-gray-800 p-3"> | |
| <option>Selecione...</option> | |
| <option>PIX (10% de desconto)</option> | |
| <option>Cartão de Crédito (até 12x)</option> | |
| <option>Boleto Bancário</option> | |
| </select> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" class="w-full bg-olive-600 hover:bg-olive-700 text-white font-bold py-3 px-4 rounded-md transition duration-300"> | |
| CONFIRMAR INSCRIÇÃO | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ Section --> | |
| <div class="py-16 bg-white"> | |
| <div class="container mx-auto px-4 max-w-4xl"> | |
| <h2 class="text-3xl font-bold text-center text-lavender-800 mb-12">PERGUNTAS FREQUENTES</h2> | |
| <div class="space-y-4"> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="flex justify-between items-center w-full p-4 text-left bg-gray-50 hover:bg-gray-100 transition"> | |
| <span class="font-medium text-olive-800">Preciso ter conhecimento prévio sobre Constelação Familiar?</span> | |
| <i class="fas fa-chevron-down text-lavender-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="p-4 text-gray-700 hidden"> | |
| Não é necessário nenhum conhecimento prévio. O workshop foi desenhado para ser acessível tanto para iniciantes quanto para profissionais da área terapêutica. | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="flex justify-between items-center w-full p-4 text-left bg-gray-50 hover:bg-gray-100 transition"> | |
| <span class="font-medium text-olive-800">Posso participar sozinho(a) ou é melhor vir em casal?</span> | |
| <i class="fas fa-chevron-down text-lavender-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="p-4 text-gray-700 hidden"> | |
| O workshop foi pensado para atender tanto pessoas sozinhas quanto casais. Cada formato traz aprendizados diferentes e igualmente valiosos. | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="flex justify-between items-center w-full p-4 text-left bg-gray-50 hover:bg-gray-100 transition"> | |
| <span class="font-medium text-olive-800">Há material de apoio incluído?</span> | |
| <i class="fas fa-chevron-down text-lavender-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="p-4 text-gray-700 hidden"> | |
| Sim, todos os participantes receberão um kit com material de apoio em português e espanhol, além de acesso a gravações de alguns exercícios (quando permitido). | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="flex justify-between items-center w-full p-4 text-left bg-gray-50 hover:bg-gray-100 transition"> | |
| <span class="font-medium text-olive-800">Qual a política de cancelamento?</span> | |
| <i class="fas fa-chevron-down text-lavender-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="p-4 text-gray-700 hidden"> | |
| Cancelamentos com até 30 dias de antecedência recebem reembolso de 100%. Entre 30 e 15 dias, 50%. Menos de 15 dias, não há reembolso, mas você pode transferir sua vaga para outra pessoa. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between gap-8"> | |
| <div class="md:w-1/3"> | |
| <h3 class="text-xl font-bold mb-4 text-lavender-300">O AMOR QUE PODE DAR CERTO</h3> | |
| <p class="text-gray-400"> | |
| Um workshop transformador com Ángel Martínez Viejo sobre relacionamentos sob a perspectiva das Constelações Familiares. | |
| </p> | |
| </div> | |
| <div class="md:w-1/3"> | |
| <h3 class="text-xl font-bold mb-4 text-lavender-300">CONTATO</h3> | |
| <div class="space-y-2"> | |
| <p class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-olive-400"></i> | |
| <span class="text-gray-400">contato@eventoamor.com</span> | |
| </p> | |
| <p class="flex items-center"> | |
| <i class="fas fa-phone mr-2 text-olive-400"></i> | |
| <span class="text-gray-400">(11) 99999-9999</span> | |
| </p> | |
| <p class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2 text-olive-400"></i> | |
| <span class="text-gray-400">São Paulo - SP, Brasil</span> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="md:w-1/3"> | |
| <h3 class="text-xl font-bold mb-4 text-lavender-300">REDES SOCIAIS</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-lavender-600 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-lavender-600 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-lavender-600 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-lavender-600 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <img src="https://via.placeholder.com/150x50?text=LOGO+EMPRESA" alt="Logo da Empresa" class="h-10 opacity-90"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm"> | |
| <p>© 2025 O Amor que pode dar certo. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Countdown Timer | |
| function updateCountdown() { | |
| const eventDate = new Date('June 20, 2025 09:00:00').getTime(); | |
| const now = new Date().getTime(); | |
| const distance = eventDate - now; | |
| const days = Math.floor(distance / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((distance % (1000 * 60)) / 1000); | |
| document.getElementById('days').innerHTML = days.toString().padStart(2, '0'); | |
| document.getElementById('hours').innerHTML = hours.toString().padStart(2, '0'); | |
| document.getElementById('minutes').innerHTML = minutes.toString().padStart(2, '0'); | |
| document.getElementById('seconds').innerHTML = seconds.toString().padStart(2, '0'); | |
| // Animation | |
| const countdownItems = document.querySelectorAll('.countdown-item'); | |
| countdownItems.forEach(item => { | |
| item.classList.add('animate-pulse'); | |
| setTimeout(() => { | |
| item.classList.remove('animate-pulse'); | |
| }, 300); | |
| }); | |
| } | |
| setInterval(updateCountdown, 1000); | |
| updateCountdown(); | |
| // FAQ Accordion | |
| document.querySelectorAll('.border button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| // Close other open items | |
| document.querySelectorAll('.border button').forEach(otherButton => { | |
| if (otherButton !== button) { | |
| otherButton.nextElementSibling.classList.add('hidden'); | |
| otherButton.querySelector('i').classList.remove('rotate-180'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </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=alexandreafd/aline-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |