Created
March 10, 2025 15:56
-
-
Save feliperohdee/5b8631f6920b8a390ec9b0cdbc207da2 to your computer and use it in GitHub Desktop.
maratona de sta maria
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Maratona Santa Maria 2025</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| :root { | |
| --primary-50: #f0f9ff; | |
| --primary-100: #e0f2fe; | |
| --primary-200: #bae6fd; | |
| --primary-300: #7dd3fc; | |
| --primary-400: #38bdf8; | |
| --primary-500: #0ea5e9; | |
| --primary-600: #0284c7; | |
| --primary-700: #0369a1; | |
| --primary-800: #075985; | |
| --primary-900: #0c4a6e; | |
| } | |
| .hero-bg { | |
| background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(147, 51, 234, 0.8)), url('https://placehold.co/1920x1080'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .countdown-bg { | |
| background-image: linear-gradient(45deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.9)), url('https://placehold.co/1200x800'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .gallery-gradient { | |
| background: linear-gradient(90deg, #3B82F6, #8B5CF6); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50"> | |
| <!-- Header/Navbar --> | |
| <header class="fixed w-full bg-white bg-opacity-95 shadow-md z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://placehold.co/50x50" alt="Logo Maratona Santa Maria" class="h-12 w-auto mr-3"> | |
| <div> | |
| <h1 class="font-bold text-primary-700 text-xl">MARATONA</h1> | |
| <h2 class="text-gray-600 text-sm">SANTA MARIA 2025</h2> | |
| </div> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#inicio" class="text-gray-700 hover:text-primary-600 font-medium transition">Início</a> | |
| <a href="#sobre" class="text-gray-700 hover:text-blue-600 font-medium transition">Sobre</a> | |
| <a href="#percurso" class="text-gray-700 hover:text-blue-600 font-medium transition">Percurso</a> | |
| <a href="#galeria" class="text-gray-700 hover:text-blue-600 font-medium transition">Galeria</a> | |
| <a href="#parceiros" class="text-gray-700 hover:text-blue-600 font-medium transition">Parceiros</a> | |
| <a href="#contato" class="text-gray-700 hover:text-blue-600 font-medium transition">Contato</a> | |
| </nav> | |
| <button class="md:hidden text-gray-700"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| <a href="#inscricao" class="hidden md:block bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold py-2 px-6 rounded-full shadow-lg hover:shadow-xl transition duration-300">Inscreva-se</a> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="inicio" class="hero-bg h-screen flex items-center relative"> | |
| <div class="container mx-auto px-4 pt-24"> | |
| <div class="max-w-3xl mx-auto text-center text-white"> | |
| <h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight">MARATONA SANTA MARIA 2025</h1> | |
| <p class="text-xl md:text-2xl mb-8 font-light">01 de Setembro de 2025 • Santa Maria, RS</p> | |
| <div class="flex flex-wrap justify-center gap-4 mb-12"> | |
| <a href="#inscricao" class="bg-white text-black font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition duration-300">INSCREVA-SE AGORA</a> | |
| <a href="#percurso" class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-primary-700 transition duration-300">VER PERCURSO</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wave SVG --> | |
| <div class="absolute bottom-0 left-0 w-full"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120"> | |
| <path fill="#f8fafc" fill-opacity="1" d="M0,96L48,85.3C96,75,192,53,288,48C384,43,480,53,576,69.3C672,85,768,107,864,101.3C960,96,1056,64,1152,48C1248,32,1344,32,1392,32L1440,32L1440,120L1392,120C1344,120,1248,120,1152,120C1056,120,960,120,864,120C768,120,672,120,576,120C480,120,384,120,288,120C192,120,96,120,48,120L0,120Z"></path> | |
| </svg> | |
| </div> | |
| </section> | |
| <!-- Countdown Section --> | |
| <section class="countdown-bg py-20 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-2">CONTAGEM REGRESSIVA</h2> | |
| <p class="text-lg text-gray-300">Prepare-se para um dos maiores eventos esportivos de Santa Maria!</p> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-4 md:gap-8"> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-6 w-36 md:w-40 text-center"> | |
| <span id="countdown-days" class="text-4xl md:text-5xl font-bold block mb-1">175</span> | |
| <span class="text-sm uppercase tracking-wide">Dias</span> | |
| </div> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-6 w-36 md:w-40 text-center"> | |
| <span id="countdown-hours" class="text-4xl md:text-5xl font-bold block mb-1">12</span> | |
| <span class="text-sm uppercase tracking-wide">Horas</span> | |
| </div> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-6 w-36 md:w-40 text-center"> | |
| <span id="countdown-minutes" class="text-4xl md:text-5xl font-bold block mb-1">45</span> | |
| <span class="text-sm uppercase tracking-wide">Minutos</span> | |
| </div> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-6 w-36 md:w-40 text-center"> | |
| <span id="countdown-seconds" class="text-4xl md:text-5xl font-bold block mb-1">22</span> | |
| <span class="text-sm uppercase tracking-wide">Segundos</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sobre a Maratona --> | |
| <section id="sobre" class="py-20 bg-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-10 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 text-gray-800">SOBRE A MARATONA</h2> | |
| <p class="text-gray-600 mb-6 leading-relaxed">A Maratona Santa Maria 2025 é o maior evento de corrida do interior do Rio Grande do Sul. Com um percurso repleto de belezas naturais e um clima de superação e determinação, a maratona promete reunir atletas profissionais e amadores de todo o Brasil.</p> | |
| <p class="text-gray-600 mb-6 leading-relaxed">Em sua 5ª edição, o evento contará com diferentes modalidades:</p> | |
| <div class="flex flex-col gap-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-gradient-to-r from-primary-500 to-purple-500 rounded-full p-1 mr-3 mt-1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg text-gray-800">Maratona - 42km</h3> | |
| <p class="text-gray-600">Percurso completo pelos principais pontos da cidade</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-gradient-to-r from-primary-500 to-purple-500 rounded-full p-1 mr-3 mt-1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg text-gray-800">Meia Maratona - 21km</h3> | |
| <p class="text-gray-600">Desafio intermediário com percurso simplificado</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-gradient-to-r from-primary-500 to-purple-500 rounded-full p-1 mr-3 mt-1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg text-gray-800">Corrida - 10km</h3> | |
| <p class="text-gray-600">Percurso ideal para iniciantes e corredores amadores</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-gradient-to-r from-primary-500 to-purple-500 rounded-full p-1 mr-3 mt-1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg text-gray-800">Caminhada - 5km</h3> | |
| <p class="text-gray-600">Percurso acessível para todas as idades</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <img src="https://placehold.co/600x400" alt="Maratona Santa Maria" class="rounded-xl shadow-xl w-full"> | |
| <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-xl shadow-lg"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-center"> | |
| <span class="block text-4xl font-bold text-primary-600">5ª</span> | |
| <span class="text-sm text-gray-500">Edição</span> | |
| </div> | |
| <div class="h-12 w-0.5 bg-gray-200"></div> | |
| <div class="text-center"> | |
| <span class="block text-2xl font-bold text-primary-600">4.500+</span> | |
| <span class="text-sm text-gray-500">Participantes em 2024</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Informações Gerais --> | |
| <section class="py-20 bg-slate-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-800">INFORMAÇÕES GERAIS</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Confira todos os detalhes que você precisa saber sobre a Maratona Santa Maria 2025</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <div class="bg-gradient-to-r from-primary-600 to-primary-700 py-4 px-6"> | |
| <h3 class="text-xl font-semibold text-white">Data e Horário</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="text-primary-600 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Dia</h4> | |
| <p class="text-gray-600">01 de Setembro de 2025 (Segunda-feira)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-primary-600 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Horários de Largada</h4> | |
| <p class="text-gray-600">Maratona: 06:00</p> | |
| <p class="text-gray-600">Meia Maratona: 06:30</p> | |
| <p class="text-gray-600">10km: 07:00</p> | |
| <p class="text-gray-600">Caminhada: 07:30</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <div class="bg-gradient-to-r from-primary-600 to-primary-700 py-4 px-6"> | |
| <h3 class="text-xl font-semibold text-white">Local</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="text-primary-600 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Largada e Chegada</h4> | |
| <p class="text-gray-600">Parque Itaimbé - Santa Maria, RS</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-primary-600 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Pontos de Apoio</h4> | |
| <p class="text-gray-600">15 pontos de hidratação ao longo do percurso</p> | |
| <p class="text-gray-600">Ambulâncias e equipe médica em locais estratégicos</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <div class="bg-gradient-to-r from-primary-600 to-primary-700 py-4 px-6"> | |
| <h3 class="text-xl font-semibold text-white">Kit do Atleta</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="text-primary-600 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Conteúdo do Kit</h4> | |
| <p class="text-gray-600">Camiseta oficial do evento</p> | |
| <p class="text-gray-600">Número de peito com chip</p> | |
| <p class="text-gray-600">Sacola exclusiva</p> | |
| <p class="text-gray-600">Brindes dos patrocinadores</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-primary-600 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Entrega dos Kits</h4> | |
| <p class="text-gray-600">30 e 31 de Agosto de 2025</p> | |
| <p class="text-gray-600">Shopping Royal Plaza - 10h às 20h</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Percurso/Strava Section --> | |
| <section id="percurso" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-800">PERCURSO</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Explore o percurso da Maratona Santa Maria 2025, passando pelos principais pontos da cidade</p> | |
| </div> | |
| <div class="bg-slate-50 rounded-xl shadow-lg p-6 md:p-10"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/3 md:pr-8 mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Detalhes do Percurso</h3> | |
| <p class="text-gray-600 mb-6">O percurso oficial da Maratona Santa Maria 2025 foi projetado para oferecer um equilíbrio entre desafio e beleza, passando por pontos históricos e áreas verdes da cidade.</p> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary-500 to-primary-700 flex items-center justify-center text-white font-bold mr-4">A</div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Largada: Parque Itaimbé</h4> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary-500 to-primary-700 flex items-center justify-center text-white font-bold mr-4">B</div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Centro Histórico</h4> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary-500 to-primary-700 flex items-center justify-center text-white font-bold mr-4">C</div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Campus da UFSM</h4> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary-500 to-primary-700 flex items-center justify-center text-white font-bold mr-4">D</div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Chegada: Parque Itaimbé</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Distância</span> | |
| <span class="font-semibold text-gray-800">42,195 km</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">Elevação</span> | |
| <span class="font-semibold text-gray-800">+350m</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Tipo de Superfície</span> | |
| <span class="font-semibold text-gray-800">Asfalto (95%)</span> | |
| </div> | |
| </div> | |
| <a href="https://www.strava.com/" target="_blank" class="inline-flex items-center bg-[#FC4C02] text-white font-medium py-2 px-4 rounded-lg hover:bg-opacity-90 transition"> | |
| <svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M15.387 17.944l-2.089-4.116h-3.065L15.387 24l5.15-10.172h-3.066m-7.008-5.599l2.836 5.598h4.172L10.463 0l-7 13.828h4.169" /> | |
| </svg> | |
| Ver no Strava | |
| </a> | |
| </div> | |
| <div class="md:w-2/3 h-96 md:h-auto bg-slate-200 rounded-lg overflow-hidden"> | |
| <!-- Strava Embed Placeholder --> | |
| <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-200 to-slate-300"> | |
| <div class="text-center p-6"> | |
| <svg class="w-16 h-16 mx-auto text-[#FC4C02] mb-4" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M15.387 17.944l-2.089-4.116h-3.065L15.387 24l5.15-10.172h-3.066m-7.008-5.599l2.836 5.598h4.172L10.463 0l-7 13.828h4.169" /> | |
| </svg> | |
| <h3 class="text-xl font-semibold text-gray-700">Mapa Interativo do Percurso</h3> | |
| <p class="text-gray-500 mb-4">O mapa interativo será exibido aqui no dia do evento</p> | |
| <p class="text-sm text-gray-400">Dados fornecidos pelo Strava</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Galeria de Imagens --> | |
| <section id="galeria" class="py-20 gallery-gradient"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">GALERIA</h2> | |
| <p class="text-white text-opacity-80 max-w-2xl mx-auto">Relembre os melhores momentos das edições anteriores da Maratona Santa Maria</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <!-- Imagem 1 --> | |
| <div class="relative group overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://placehold.co/600x400" alt="Maratona Santa Maria Edição Anterior" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-300 flex items-end"> | |
| <div class="p-4"> | |
| <h3 class="text-white font-semibold">Largada 2024</h3> | |
| <p class="text-white text-opacity-80 text-sm">Mais de 4.500 corredores</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Imagem 2 --> | |
| <div class="relative group overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://placehold.co/600x400" alt="Maratona Santa Maria Edição Anterior" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-300 flex items-end"> | |
| <div class="p-4"> | |
| <h3 class="text-white font-semibold">Percurso UFSM</h3> | |
| <p class="text-white text-opacity-80 text-sm">Trecho pelo campus universitário</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Imagem 3 --> | |
| <div class="relative group overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://placehold.co/600x400" alt="Maratona Santa Maria Edição Anterior" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-300 flex items-end"> | |
| <div class="p-4"> | |
| <h3 class="text-white font-semibold">Pódio 2024</h3> | |
| <p class="text-white text-opacity-80 text-sm">Vencedores da categoria Elite</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Imagem 4 --> | |
| <div class="relative group overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://placehold.co/600x400" alt="Maratona Santa Maria Edição Anterior" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-300 flex items-end"> | |
| <div class="p-4"> | |
| <h3 class="text-white font-semibold">Chegada</h3> | |
| <p class="text-white text-opacity-80 text-sm">Momento de superação e conquista</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Imagem 5 --> | |
| <div class="relative group overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://placehold.co/600x400" alt="Maratona Santa Maria Edição Anterior" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-300 flex items-end"> | |
| <div class="p-4"> | |
| <h3 class="text-white font-semibold">Entrega de Kits</h3> | |
| <p class="text-white text-opacity-80 text-sm">Organização e infraestrutura</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Imagem 6 --> | |
| <div class="relative group overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://placehold.co/600x400" alt="Maratona Santa Maria Edição Anterior" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-300 flex items-end"> | |
| <div class="p-4"> | |
| <h3 class="text-white font-semibold">Ponto de Hidratação</h3> | |
| <p class="text-white text-opacity-80 text-sm">Suporte aos atletas</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Imagem 7 --> | |
| <div class="relative group overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://placehold.co/600x400" alt="Maratona Santa Maria Edição Anterior" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-300 flex items-end"> | |
| <div class="p-4"> | |
| <h3 class="text-white font-semibold">Centro Histórico</h3> | |
| <p class="text-white text-opacity-80 text-sm">Trecho pelo coração da cidade</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Imagem 8 --> | |
| <div class="relative group overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://placehold.co/600x400" alt="Maratona Santa Maria Edição Anterior" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-80 transition duration-300 flex items-end"> | |
| <div class="p-4"> | |
| <h3 class="text-white font-semibold">Preparação</h3> | |
| <p class="text-white text-opacity-80 text-sm">Atletas se preparando para a largada</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center bg-white text-primary-700 font-semibold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition duration-300"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /> | |
| </svg> | |
| Ver Galeria Completa | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Seção de Inscrição / CTA --> | |
| <section id="inscricao" class="py-20 bg-white relative"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-primary-500 to-purple-600 opacity-10"></div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-2/5 bg-gradient-to-br from-primary-600 to-purple-700 p-8 text-white"> | |
| <h2 class="text-3xl font-bold mb-6">Inscreva-se Agora</h2> | |
| <p class="mb-6 text-white text-opacity-90">Garanta sua vaga na maior maratona do interior do Rio Grande do Sul. Vagas limitadas!</p> | |
| <div class="space-y-4 mb-8"> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| <span>Camiseta oficial do evento</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| <span>Medalha de participação</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| <span>Cronometragem eletrônica</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| <span>Kit de participação exclusivo</span> | |
| </div> | |
| </div> | |
| <div class="bg-white bg-opacity-20 rounded-lg p-4"> | |
| <h3 class="font-semibold mb-2">Prazo para inscrições:</h3> | |
| <p>1º Lote: até 31/05/2025</p> | |
| <p>2º Lote: até 31/07/2025</p> | |
| <p>3º Lote: até 20/08/2025</p> | |
| </div> | |
| </div> | |
| <div class="md:w-3/5 p-8"> | |
| <h3 class="text-2xl font-bold mb-6 text-gray-800">Selecione sua modalidade</h3> | |
| <div class="space-y-4 mb-8"> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:border-primary-500 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Maratona - 42km</h4> | |
| <p class="text-gray-600 text-sm">Para atletas experientes</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-primary-600 font-bold">R$ 180,00</p> | |
| <p class="text-xs text-gray-500">1º Lote</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:border-primary-500 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Meia Maratona - 21km</h4> | |
| <p class="text-gray-600 text-sm">Desafio intermediário</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-primary-600 font-bold">R$ 140,00</p> | |
| <p class="text-xs text-gray-500">1º Lote</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:border-primary-500 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Corrida - 10km</h4> | |
| <p class="text-gray-600 text-sm">Para amadores e iniciantes</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-primary-600 font-bold">R$ 100,00</p> | |
| <p class="text-xs text-gray-500">1º Lote</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:border-primary-500 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Caminhada - 5km</h4> | |
| <p class="text-gray-600 text-sm">Para todas as idades</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-primary-600 font-bold">R$ 70,00</p> | |
| <p class="text-xs text-gray-500">1º Lote</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-gradient-to-r from-primary-600 to-purple-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition duration-300"> | |
| INSCREVER-SE AGORA | |
| </button> | |
| <p class="text-center text-sm text-gray-500 mt-4">Ao inscrever-se, você concorda com os termos e regulamentos do evento</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Parceiros e Patrocinadores --> | |
| <section id="parceiros" class="py-20 bg-slate-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-800">PARCEIROS E PATROCINADORES</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Empresas e organizações que tornam a Maratona Santa Maria possível</p> | |
| </div> | |
| <div class="mb-12"> | |
| <h3 class="text-xl font-semibold text-center mb-8 text-gray-700">Patrocinadores Master</h3> | |
| <div class="flex flex-wrap justify-center gap-12"> | |
| <div class="bg-white p-6 rounded-lg shadow-md w-48 h-32 flex items-center justify-center"> | |
| <img src="https://placehold.co/120x60" alt="Patrocinador 1" class="max-w-full max-h-full"> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md w-48 h-32 flex items-center justify-center"> | |
| <img src="https://placehold.co/120x60" alt="Patrocinador 2" class="max-w-full max-h-full"> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md w-48 h-32 flex items-center justify-center"> | |
| <img src="https://placehold.co/120x60" alt="Patrocinador 3" class="max-w-full max-h-full"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-12"> | |
| <h3 class="text-xl font-semibold text-center mb-8 text-gray-700">Patrocinadores Ouro</h3> | |
| <div class="flex flex-wrap justify-center gap-8"> | |
| <div class="bg-white p-4 rounded-lg shadow-md w-40 h-24 flex items-center justify-center"> | |
| <img src="https://placehold.co/100x50" alt="Patrocinador 4" class="max-w-full max-h-full"> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-md w-40 h-24 flex items-center justify-center"> | |
| <img src="https://placehold.co/100x50" alt="Patrocinador 5" class="max-w-full max-h-full"> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-md w-40 h-24 flex items-center justify-center"> | |
| <img src="https://placehold.co/100x50" alt="Patrocinador 6" class="max-w-full max-h-full"> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-md w-40 h-24 flex items-center justify-center"> | |
| <img src="https://placehold.co/100x50" alt="Patrocinador 7" class="max-w-full max-h-full"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-center mb-8 text-gray-700">Apoio</h3> | |
| <div class="flex flex-wrap justify-center gap-6"> | |
| <div class="bg-white p-3 rounded-lg shadow-md w-32 h-20 flex items-center justify-center"> | |
| <img src="https://placehold.co/80x40" alt="Apoiador 1" class="max-w-full max-h-full"> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-md w-32 h-20 flex items-center justify-center"> | |
| <img src="https://placehold.co/80x40" alt="Apoiador 2" class="max-w-full max-h-full"> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-md w-32 h-20 flex items-center justify-center"> | |
| <img src="https://placehold.co/80x40" alt="Apoiador 3" class="max-w-full max-h-full"> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-md w-32 h-20 flex items-center justify-center"> | |
| <img src="https://placehold.co/80x40" alt="Apoiador 4" class="max-w-full max-h-full"> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-md w-32 h-20 flex items-center justify-center"> | |
| <img src="https://placehold.co/80x40" alt="Apoiador 5" class="max-w-full max-h-full"> | |
| </div> | |
| <div class="bg-white p-3 rounded-lg shadow-md w-32 h-20 flex items-center justify-center"> | |
| <img src="https://placehold.co/80x40" alt="Apoiador 6" class="max-w-full max-h-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contato e Footer --> | |
| <section id="contato" class="py-20 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 md:pr-8 mb-12 md:mb-0"> | |
| <h2 class="text-3xl font-bold mb-6">Fale Conosco</h2> | |
| <p class="mb-8 text-gray-300">Tem dúvidas sobre a Maratona Santa Maria 2025? Entre em contato conosco pelos canais abaixo:</p> | |
| <div class="space-y-4 mb-8"> | |
| <div class="flex items-start"> | |
| <div class="text-primary-400 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-white">Email</h4> | |
| <p class="text-gray-300">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-primary-400 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-white">Telefone</h4> | |
| <p class="text-gray-300">(55) 3222-1234</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-primary-400 mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-white">Endereço</h4> | |
| <p class="text-gray-300">Av. Roraima, 1000 - Camobi</p> | |
| <p class="text-gray-300">Santa Maria - RS, 97105-900</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-white bg-opacity-10 hover:bg-opacity-20 rounded-full p-3 transition"> | |
| <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="bg-white bg-opacity-10 hover:bg-opacity-20 rounded-full p-3 transition"> | |
| <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.067-.06-1.407-.06-4.123v-.08c0-2.643.012-2.987.06-4.043.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772 4.902 4.902 0 011.772-1.153c.636-.247 1.363-.416 2.427-.465 1.067-.048 1.407-.06 4.123-.06h.08c2.643 0 2.987.012 4.043.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.716 0-3.056-.012-4.123-.06z"></path> | |
| <path d="M12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="bg-white bg-opacity-10 hover:bg-opacity-20 rounded-full p-3 transition"> | |
| <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 9.99 9.99 0 01-3.159 1.207A4.92 4.92 0 0012.09 8.59a13.95 13.95 0 01-10.11-5.12 4.929 4.929 0 001.522 6.57 4.887 4.887 0 01-2.235-.616c-.054 2.28 1.55 4.414 3.895 4.89a4.93 4.93 0 01-2.224.084 4.935 4.935 0 004.6 3.42A9.886 9.886 0 010 19.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 3.975z"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="bg-white bg-opacity-10 hover:bg-opacity-20 rounded-full p-3 transition"> | |
| <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="bg-white bg-opacity-5 p-6 rounded-lg"> | |
| <h3 class="text-xl font-semibold mb-6">Envie sua mensagem</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2" for="name">Nome completo</label> | |
| <input type="text" id="name" class="w-full bg-white bg-opacity-10 rounded-lg px-4 py-2 border border-gray-700 focus:border-primary-500 focus:outline-none text-white" placeholder="Seu nome"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2" for="email">Email</label> | |
| <input type="email" id="email" class="w-full bg-white bg-opacity-10 rounded-lg px-4 py-2 border border-gray-700 focus:border-primary-500 focus:outline-none text-white" placeholder="[email protected]"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2" for="subject">Assunto</label> | |
| <input type="text" id="subject" class="w-full bg-white bg-opacity-10 rounded-lg px-4 py-2 border border-gray-700 focus:border-primary-500 focus:outline-none text-white" placeholder="Assunto da mensagem"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2" for="message">Mensagem</label> | |
| <textarea id="message" rows="4" class="w-full bg-white bg-opacity-10 rounded-lg px-4 py-2 border border-gray-700 focus:border-primary-500 focus:outline-none text-white" placeholder="Digite sua mensagem"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-primary-600 to-purple-600 text-white font-semibold py-2 px-4 rounded-lg hover:opacity-90 transition">Enviar Mensagem</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer class="bg-black text-white py-10"> | |
| <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"> | |
| <img src="https://placehold.co/50x50" alt="Logo Maratona Santa Maria" class="h-10 w-auto mr-3"> | |
| <div> | |
| <h3 class="font-bold text-lg">MARATONA SANTA MARIA</h3> | |
| <p class="text-sm text-gray-400">© 2025 - Todos os direitos reservados</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-6 text-sm"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Termos de Uso</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Regulamento</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">FAQ</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- JavaScript para contagem regressiva --> | |
| <script> | |
| // Definir a data do evento | |
| const eventDate = new Date('September 1, 2025 06:00:00').getTime(); | |
| // Atualizar contador a cada segundo | |
| const countdown = setInterval(function() { | |
| // Data e hora atuais | |
| const now = new Date().getTime(); | |
| // Diferença entre a data do evento e a data atual | |
| const distance = eventDate - now; | |
| // Cálculos para dias, horas, minutos e segundos | |
| 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); | |
| // Atualizar elementos HTML | |
| document.getElementById('countdown-days').innerHTML = days; | |
| document.getElementById('countdown-hours').innerHTML = hours; | |
| document.getElementById('countdown-minutes').innerHTML = minutes; | |
| document.getElementById('countdown-seconds').innerHTML = seconds; | |
| // Se a contagem regressiva terminar | |
| if (distance < 0) { | |
| clearInterval(countdown); | |
| document.getElementById('countdown-days').innerHTML = "0"; | |
| document.getElementById('countdown-hours').innerHTML = "0"; | |
| document.getElementById('countdown-minutes').innerHTML = "0"; | |
| document.getElementById('countdown-seconds').innerHTML = "0"; | |
| } | |
| }, 1000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment