Spaces:
Running
Running
| <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Projeto Cade Cravinhos - Transformando vidas através da educação e arte</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> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); body { font-family: 'Poppins', sans-serif; scroll-behavior: smooth; } .logo { width: 80px; height: 80px; background: conic-gradient( from 0deg at 50% 50%, #3b82f6 0deg 120deg, #f97316 120deg 240deg, #ec4899 240deg 360deg ); border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; } .logo::before { content: ""; position: absolute; width: 60%; height: 60%; background: white; border-radius: 50%; } .hand { position: absolute; width: 30px; height: 40px; background-color: currentColor; border-radius: 50% 50% 0 0; } .hand-1 { color: #3b82f6; transform: rotate(0deg) translate(40px) rotate(0deg); } .hand-2 { color: #f97316; transform: rotate(120deg) translate(40px) rotate(-120deg); } .hand-3 { color: #ec4899; transform: rotate(240deg) translate(40px) rotate(-240deg); } .hero-gradient { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(249, 115, 22, 0.1) 50%, rgba(236, 72, 153, 0.1) 100%); } .activity-card { transition: all 0.3s ease; } .activity-card:hover { transform: translateY(-10px); } .donation-btn { background: linear-gradient(90deg, #3b82f6, #ec4899); transition: all 0.3s ease; } .donation-btn:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .testimonial-card { border-left: 4px solid; transition: all 0.3s ease; } .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } </style> </head> <body class="bg-gray-50"> <!-- Header/Navigation --> <header class="bg-white shadow-md sticky top-0 z-50"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center space-x-2"> <div class="logo"> <div class="hand hand-1"></div> <div class="hand hand-2"></div> <div class="hand hand-3"></div> </div> <h1 class="text-xl font-bold text-gray-800">Projeto Cade <span class="text-blue-500">Cravinhos</span></h1> </div> <nav class="hidden md:flex space-x-8"> <a href="#inicio" class="text-gray-700 hover:text-blue-500 font-medium">Início</a> <a href="#sobre" class="text-gray-700 hover:text-orange-500 font-medium">Sobre</a> <a href="#atividades" class="text-gray-700 hover:text-pink-500 font-medium">Atividades</a> <a href="#doacao" class="text-gray-700 hover:text-blue-500 font-medium">Doação</a> <a href="#contato" class="text-gray-700 hover:text-orange-500 font-medium">Contato</a> </nav> <button class="md:hidden text-gray-700"> <i class="fas fa-bars text-2xl"></i> </button> </div> </header> <!-- Hero Section --> <section id="inicio" class="hero-gradient py-20"> <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-10 md:mb-0"> <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Transformando vidas através da <span class="text-blue-500">educação</span> e <span class="text-pink-500">arte</span></h2> <p class="text-lg text-gray-600 mb-8">O Projeto Cade Cravinhos oferece atividades lúdicas, alimentação e apoio educacional para crianças em situação de vulnerabilidade social.</p> <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> <a href="#doacao" class="donation-btn text-white font-bold py-3 px-6 rounded-full text-center">Faça uma doação</a> <a href="#atividades" class="bg-white text-gray-800 font-bold py-3 px-6 rounded-full border border-gray-200 text-center hover:bg-gray-50 transition">Conheça nossas atividades</a> </div> </div> <div class="md:w-1/2 flex justify-center"> <img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Crianças aprendendo" class="rounded-xl shadow-xl max-w-full h-auto md:max-w-md"> </div> </div> </section> <!-- Stats Section --> <section class="bg-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> <div class="p-6 rounded-lg"> <div class="text-5xl font-bold text-blue-500 mb-2">200+</div> <div class="text-gray-600">Crianças atendidas</div> </div> <div class="p-6 rounded-lg"> <div class="text-5xl font-bold text-orange-500 mb-2">15</div> <div class="text-gray-600">Anos de atuação</div> </div> <div class="p-6 rounded-lg"> <div class="text-5xl font-bold text-pink-500 mb-2">10</div> <div class="text-gray-600">Atividades oferecidas</div> </div> </div> </div> </section> <!-- About Section --> <section id="sobre" class="py-20 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Sobre o <span class="text-blue-500">Projeto</span></h2> <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto"></div> </div> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> <img src="https://images.unsplash.com/photo-1524179091875-bf99a9a6af57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sobre o projeto" class="rounded-xl shadow-lg w-full"> </div> <div class="md:w-1/2"> <h3 class="text-2xl font-bold text-gray-800 mb-4">Nossa missão</h3> <p class="text-gray-600 mb-6">O Projeto Cade Cravinhos nasceu da necessidade de oferecer oportunidades para crianças em situação de vulnerabilidade social. Acreditamos que através da educação, arte e esporte, podemos transformar realidades e construir um futuro melhor.</p> <div class="mb-6"> <div class="flex items-start mb-4"> <div class="bg-blue-100 p-2 rounded-full mr-4"> <i class="fas fa-utensils text-blue-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Alimentação</h4> <p class="text-gray-600">Fornecemos refeições balanceadas para garantir o desenvolvimento saudável das crianças.</p> </div> </div> <div class="flex items-start mb-4"> <div class="bg-orange-100 p-2 rounded-full mr-4"> <i class="fas fa-book text-orange-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Educação</h4> <p class="text-gray-600">Apoio escolar, reforço e acompanhamento pedagógico para melhorar o desempenho acadêmico.</p> </div> </div> <div class="flex items-start"> <div class="bg-pink-100 p-2 rounded-full mr-4"> <i class="fas fa-child text-pink-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Atividades lúdicas</h4> <p class="text-gray-600">Balé, xadrez, música e outras atividades que estimulam a criatividade e o desenvolvimento cognitivo.</p> </div> </div> </div> <a href="#contato" class="inline-block bg-gray-800 text-white font-bold py-3 px-6 rounded-full hover:bg-gray-700 transition">Saiba mais</a> </div> </div> </div> </section> <!-- Activities Section --> <section id="atividades" 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 text-gray-800 mb-4">Nossas <span class="text-pink-500">Atividades</span></h2> <p class="text-xl text-gray-600 max-w-2xl mx-auto">Oferecemos diversas atividades que contribuem para o desenvolvimento integral das crianças.</p> <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto mt-4"></div> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Ballet Card --> <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> <div class="h-48 bg-pink-100 flex items-center justify-center"> <i class="fas fa-child-reaching text-6xl text-pink-500"></i> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Balé</h3> <p class="text-gray-600 mb-4">Aulas de balé que promovem disciplina, coordenação motora e expressão artística.</p> <div class="flex items-center text-sm text-gray-500"> <i class="fas fa-calendar-alt mr-2"></i> <span>Segundas e quartas, 14h-16h</span> </div> </div> </div> <!-- Chess Card --> <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> <div class="h-48 bg-blue-100 flex items-center justify-center"> <i class="fas fa-chess text-6xl text-blue-500"></i> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Xadrez</h3> <p class="text-gray-600 mb-4">Aulas de xadrez que desenvolvem raciocínio lógico, concentração e estratégia.</p> <div class="flex items-center text-sm text-gray-500"> <i class="fas fa-calendar-alt mr-2"></i> <span>Terças e quintas, 10h-12h</span> </div> </div> </div> <!-- Music Card --> <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> <div class="h-48 bg-orange-100 flex items-center justify-center"> <i class="fas fa-music text-6xl text-orange-500"></i> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Música</h3> <p class="text-gray-600 mb-4">Aulas de canto e instrumentos musicais que estimulam a criatividade e expressão.</p> <div class="flex items-center text-sm text-gray-500"> <i class="fas fa-calendar-alt mr-2"></i> <span>Sextas, 9h-11h</span> </div> </div> </div> <!-- Arts Card --> <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> <div class="h-48 bg-pink-100 flex items-center justify-center"> <i class="fas fa-palette text-6xl text-pink-500"></i> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Artes</h3> <p class="text-gray-600 mb-4">Oficinas de pintura, desenho e artesanato que desenvolvem habilidades manuais.</p> <div class="flex items-center text-sm text-gray-500"> <i class="fas fa-calendar-alt mr-2"></i> <span>Quintas, 14h-16h</span> </div> </div> </div> <!-- Sports Card --> <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> <div class="h-48 bg-blue-100 flex items-center justify-center"> <i class="fas fa-futbol text-6xl text-blue-500"></i> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Esportes</h3> <p class="text-gray-600 mb-4">Atividades esportivas que promovem saúde, trabalho em equipe e disciplina.</p> <div class="flex items-center text-sm text-gray-500"> <i class="fas fa-calendar-alt mr-2"></i> <span>Quartas e sextas, 15h-17h</span> </div> </div> </div> <!-- Tutoring Card --> <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> <div class="h-48 bg-orange-100 flex items-center justify-center"> <i class="fas fa-book-open text-6xl text-orange-500"></i> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Reforço escolar</h3> <p class="text-gray-600 mb-4">Acompanhamento pedagógico para melhorar o desempenho acadêmico das crianças.</p> <div class="flex items-center text-sm text-gray-500"> <i class="fas fa-calendar-alt mr-2"></i> <span>Segunda a sexta, 8h-12h</span> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="py-20 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Depoimentos</h2> <p class="text-xl text-gray-600 max-w-2xl mx-auto">O que as famílias e crianças dizem sobre o projeto</p> <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto mt-4"></div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="testimonial-card bg-white p-6 rounded-lg shadow-sm border-l-4 border-blue-500"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> <i class="fas fa-user text-blue-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Ana Silva</h4> <p class="text-sm text-gray-500">Mãe da Maria</p> </div> </div> <p class="text-gray-600 italic">"O balé mudou completamente minha filha. Ela está mais confiante, disciplinada e feliz. Agradeço ao projeto por essa oportunidade."</p> </div> <div class="testimonial-card bg-white p-6 rounded-lg shadow-sm border-l-4 border-orange-500"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center mr-4"> <i class="fas fa-user text-orange-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Carlos Mendes</h4> <p class="text-sm text-gray-500">Pai do João</p> </div> </div> <p class="text-gray-600 italic">"Meu filho melhorou muito na escola depois que começou o reforço e o xadrez. Ele está mais concentrado e suas notas subiram significativamente."</p> </div> <div class="testimonial-card bg-white p-6 rounded-lg shadow-sm border-l-4 border-pink-500"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center mr-4"> <i class="fas fa-user text-pink-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Luiza Fernandes</h4> <p class="text-sm text-gray-500">Voluntária</p> </div> </div> <p class="text-gray-600 italic">"Ser voluntária neste projeto é uma das experiências mais gratificantes da minha vida. Ver o desenvolvimento dessas crianças não tem preço."</p> </div> </div> </div> </section> <!-- Donation Section --> <section id="doacao" class="py-20 bg-gradient-to-r from-blue-500 to-pink-500 text-white"> <div class="container mx-auto px-4"> <div class="max-w-4xl mx-auto text-center"> <h2 class="text-3xl md:text-4xl font-bold mb-6">Ajude a transformar vidas</h2> <p class="text-xl mb-8">Sua doação permite que continuemos oferecendo alimentação, educação e atividades lúdicas para crianças em situação de vulnerabilidade.</p> <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-8 mb-10"> <h3 class="text-2xl font-bold mb-6">Escolha o valor da doação</h3> <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8"> <button class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white font-bold py-3 px-4 rounded-lg transition">R$ 30</button> <button class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white font-bold py-3 px-4 rounded-lg transition">R$ 50</button> <button class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white font-bold py-3 px-4 rounded-lg transition">R$ 100</button> <button class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white font-bold py-3 px-4 rounded-lg transition">Outro valor</button> </div> <div class="mb-6"> <label class="block text-left mb-2">Frequência</label> <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4"> <button class="bg-white text-blue-500 font-bold py-3 px-6 rounded-full">Única</button> <button class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white font-bold py-3 px-6 rounded-full">Mensal</button> </div> </div> <button class="donation-btn bg-white text-blue-500 font-bold py-3 px-8 rounded-full w-full max-w-xs mx-auto hover:bg-gray-100 transition">Doar agora</button> </div> <div class="text-sm opacity-80"> <p>Todas as doações são fiscalizadas e aplicadas integralmente no projeto.</p> <p>O Projeto Cade Cravinhos é uma organização sem fins lucrativos.</p> </div> </div> </div> </section> <!-- Gallery Section --> <section 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 text-gray-800 mb-4">Nossos <span class="text-orange-500">Momentos</span></h2> <p class="text-xl text-gray-600 max-w-2xl mx-auto">Alguns registros das atividades e conquistas do projeto</p> <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto mt-4"></div> </div> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1542816417-098367509469?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Aula de balé" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1546521343-4eb2c01aa44b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Aula de xadrez" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Refeição" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1501612780327-45045538702b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Atividades artísticas" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1571260899304-425eee4c7ef0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Evento especial" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1608889825101-22d60e3f1f5a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Aula de música" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Crianças aprendendo" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1524179091875-bf99a9a6af57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Voluntários" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> </div> </div> </section> <!-- Contact Section --> <section id="contato" class="py-20 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Entre em <span class="text-blue-500">Contato</span></h2> <p class="text-xl text-gray-600 max-w-2xl mx-auto">Tem dúvidas ou quer ser um voluntário? Fale conosco!</p> <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto mt-4"></div> </div> <div class="flex flex-col md:flex-row"> <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> <div class="bg-white rounded-xl shadow-lg p-8 h-full"> <h3 class="text-2xl font-bold text-gray-800 mb-6">Informações de contato</h3> <div class="mb-6"> <div class="flex items-start mb-4"> <div class="bg-blue-100 p-3 rounded-full mr-4"> <i class="fas fa-map-marker-alt text-blue-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Endereço</h4> <p class="text-gray-600">Rua das Flores, 123 - Centro, Cravinhos/SP</p> </div> </div> <div class="flex items-start mb-4"> <div class="bg-orange-100 p-3 rounded-full mr-4"> <i class="fas fa-phone text-orange-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Telefone</h4> <p class="text-gray-600">(16) 99999-9999</p> </div> </div> <div class="flex items-start"> <div class="bg-pink-100 p-3 rounded-full mr-4"> <i class="fas fa-envelope text-pink-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Email</h4> <p class="text-gray-600">contato@projetocadecravinhos.org.br</p> </div> </div> </div> <div> <h4 class="font-bold text-gray-800 mb-4">Horário de funcionamento</h4> <div class="flex justify-between border-b border-gray-200 py-2"> <span class="text-gray-600">Segunda a sexta</span> <span class="font-medium">8h às 18h</span> </div> <div class="flex justify-between border-b border-gray-200 py-2"> <span class="text-gray-600">Sábado</span> <span class="font-medium">9h às 12h</span> </div> <div class="flex justify-between py-2"> <span class="text-gray-600">Domingo</span> <span class="font-medium">Fechado</span> </div> </div> </div> </div> <div class="md:w-1/2"> <div class="bg-white rounded-xl shadow-lg p-8 h-full"> <h3 class="text-2xl font-bold text-gray-800 mb-6">Envie uma mensagem</h3> <form> <div class="mb-4"> <label for="name" class="block text-gray-700 font-medium mb-2">Nome</label> <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div class="mb-4"> <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div class="mb-4"> <label for="subject" class="block text-gray-700 font-medium mb-2">Assunto</label> <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> <option value="">Selecione um assunto</option> <option value="volunteer">Quero ser voluntário</option> <option value="donation">Dúvidas sobre doações</option> <option value="enrollment">Matrícula de crianças</option> <option value="other">Outro assunto</option> </select> </div> <div class="mb-6"> <label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label> <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> </div> <button type="submit" class="w-full bg-blue-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-600 transition">Enviar mensagem</button> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-800 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <div class="flex items-center space-x-2 mb-4"> <div class="logo"> <div class="hand hand-1"></div> <div class="hand hand-2"></div> <div class="hand hand-3"></div> </div> <h3 class="text-xl font-bold">Projeto Cade Cravinhos</h3> </div> <p class="text-gray-300 mb-4">Transformando vidas através da educação, arte e esporte desde 2008.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-youtube"></i></a> </div> </div> <div> <h4 class="text-lg font-bold mb-4">Links úteis</h4> <ul class="space-y-2"> <li><a href="#inicio" class="text-gray-300 hover:text-white transition">Início</a></li> <li><a href="#sobre" class="text-gray-300 hover:text-white transition">Sobre</a></li> <li><a href="#atividades" class="text-gray-300 hover:text-white transition">Atividades</a></li> <li><a href="#doacao" class="text-gray-300 hover:text-white transition">Doação</a></li> <li><a href="#contato" class="text-gray-300 hover:text-white transition">Contato</a></li> </ul> </div> <div> <h4 class="text-lg font-bold mb-4">Atividades</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-white transition">Balé</a></li> <li><a href="#" class="text-gray-300 hover:text-white transition">Xadrez</a></li> <li><a href="#" class="text-gray-300 hover:text-white transition">Música</a></li> <li><a href="#" class="text-gray-300 hover:text-white transition">Artes</a></li> <li><a href="#" class="text-gray-300 hover:text-white transition">Esportes</a></li> </ul> </div> <div> <h4 class="text-lg font-bold mb-4">Newsletter</h4> <p class="text-gray-300 mb-4">Assine nossa newsletter e receba novidades sobre o projeto.</p> <form class="flex"> <input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l-lg w-full text-gray-800 focus:outline-none"> <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r-lg hover:bg-blue-600 transition"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> <p>© 2023 Projeto Cade Cravinhos. Todos os direitos reservados.</p> <p class="mt-2">CNPJ: 00.000.000/0001-00 - Organização sem fins lucrativos</p> </div> </div> </footer> <!-- Back to Top Button --> <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-500 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-600 transition opacity-0 invisible"> <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 additional implementation) const mobileMenuButton = document.querySelector('.md\\:hidden'); mobileMenuButton.addEventListener('click', () => { alert('Menu mobile seria implementado aqui com JavaScript adicional'); }); </script> </body> </html> |