Spaces:
Running
Running
| <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); | |
| } | |
| /* Mobile menu styles */ | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .mobile-menu.open { | |
| max-height: 500px; | |
| } | |
| /* Animation for logo hands */ | |
| @keyframes wave { | |
| 0%, 100% { | |
| transform: rotate(0deg) translate(40px) rotate(0deg); | |
| } | |
| 50% { | |
| transform: rotate(10deg) translate(40px) rotate(-10deg); | |
| } | |
| } | |
| .hand-1 { | |
| animation: wave 2s infinite; | |
| } | |
| .hand-2 { | |
| animation: wave 2s infinite 0.66s; | |
| } | |
| .hand-3 { | |
| animation: wave 2s infinite 1.33s; | |
| } | |
| /* Pulse animation for donation button */ | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| </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 id="mobileMenuButton" class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="mobile-menu bg-white md:hidden"> | |
| <div class="container mx-auto px-4 py-3 flex flex-col space-y-4"> | |
| <a href="#inicio" class="text-gray-700 hover:text-blue-500 font-medium py-2 border-b border-gray-100">Início</a> | |
| <a href="#sobre" class="text-gray-700 hover:text-orange-500 font-medium py-2 border-b border-gray-100">Sobre</a> | |
| <a href="#atividades" class="text-gray-700 hover:text-pink-500 font-medium py-2 border-b border-gray-100">Atividades</a> | |
| <a href="#doacao" class="text-gray-700 hover:text-blue-500 font-medium py-2 border-b border-gray-100">Doação</a> | |
| <a href="#contato" class="text-gray-700 hover:text-orange-500 font-medium py-2">Contato</a> | |
| </div> | |
| </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 pulse-animation">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 hover:bg-blue-50 transition"> | |
| <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 hover:bg-orange-50 transition"> | |
| <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 hover:bg-pink-50 transition"> | |
| <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 id="contactForm"> | |
| <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" required> | |
| </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" required> | |
| </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" required> | |
| <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" required></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 | |
| const mobileMenuButton = document.getElementById('mobileMenuButton'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('open'); | |
| const icon = mobileMenuButton.querySelector('i'); | |
| if (mobileMenu.classList.contains('open')) { | |
| icon.classList.remove('fa-bars'); | |
| icon.classList.add('fa-times'); | |
| } else { | |
| icon.classList.remove('fa-times'); | |
| icon.classList.add('fa-bars'); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| // Close mobile menu if open | |
| if (mobileMenu.classList.contains('open')) { | |
| mobileMenu.classList.remove('open'); | |
| const icon = mobileMenuButton.querySelector('i'); | |
| icon.classList.remove('fa-times'); | |
| icon.classList.add('fa-bars'); | |
| } | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Form submission | |
| const contactForm = document.getElementById('contactForm'); | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Get form values | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| const subject = document.getElementById('subject').value; | |
| const message = document.getElementById('message').value; | |
| // Here you would typically send the data to a server | |
| // For this example, we'll just show an alert | |
| alert(`Obrigado, ${name}! Sua mensagem sobre "${subject}" foi recebida. Entraremos em contato em breve no email ${email}.`); | |
| // Reset form | |
| contactForm.reset(); | |
| }); | |
| // Donation buttons | |
| const donationButtons = document.querySelectorAll('.donation-btn'); | |
| donationButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Here you would typically redirect to a payment page | |
| alert('Você será redirecionado para nossa página segura de doações. Obrigado pelo seu apoio!'); | |
| }); | |
| }); | |
| </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=automatize/cade-cravinhos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |