| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Auzenir Abrantes | Fotografia em Sousa-PB</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| .hero-image { |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1493863641943-9b68992a8d47?ixlib=rb-4.0.3'); |
| background-size: cover; |
| background-position: center; |
| transition: all 0.5s ease; |
| } |
| |
| .gallery-item { |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
| |
| .gallery-item:hover { |
| transform: scale(1.03); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
| } |
| |
| .fade-in { |
| animation: fadeIn 1s ease-in; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| .testimonial-card { |
| transition: all 0.3s ease; |
| } |
| |
| .testimonial-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 10px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50 text-gray-800"> |
| |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <div class="flex justify-between items-center py-4"> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center"> |
| <i class="fas fa-camera-retro text-2xl text-purple-600"></i> |
| <span class="ml-2 text-xl font-bold text-purple-600">Auzenir Abrantes</span> |
| </div> |
| </div> |
| <div class="hidden md:flex items-center space-x-8"> |
| <a href="#home" class="text-purple-600 font-medium hover:text-purple-800 transition">Início</a> |
| <a href="#about" class="text-gray-600 hover:text-purple-600 transition">Sobre</a> |
| <a href="#portfolio" class="text-gray-600 hover:text-purple-600 transition">Portfólio</a> |
| <a href="#services" class="text-gray-600 hover:text-purple-600 transition">Serviços</a> |
| <a href="#testimonials" class="text-gray-600 hover:text-purple-600 transition">Depoimentos</a> |
| <a href="#contact" class="text-gray-600 hover:text-purple-600 transition">Contato</a> |
| </div> |
| <div class="md:hidden"> |
| <button id="menu-btn" class="text-gray-600 focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white pb-4 px-4"> |
| <a href="#home" class="block py-2 text-gray-600 hover:text-purple-600 transition">Início</a> |
| <a href="#about" class="block py-2 text-gray-600 hover:text-purple-600 transition">Sobre</a> |
| <a href="#portfolio" class="block py-2 text-gray-600 hover:text-purple-600 transition">Portfólio</a> |
| <a href="#services" class="block py-2 text-gray-600 hover:text-purple-600 transition">Serviços</a> |
| <a href="#testimonials" class="block py-2 text-gray-600 hover:text-purple-600 transition">Depoimentos</a> |
| <a href="#contact" class="block py-2 text-gray-600 hover:text-purple-600 transition">Contato</a> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="hero-image min-h-screen flex items-center justify-center text-white fade-in"> |
| <div class="text-center px-4"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Auzenir Abrantes</h1> |
| <p class="text-xl md:text-2xl mb-8">Capturando momentos especiais em Sousa-PB</p> |
| <div class="flex flex-col md:flex-row justify-center gap-4"> |
| <a href="#portfolio" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 transform hover:scale-105">Ver Portfólio</a> |
| <a href="#contact" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300 transform hover:scale-105">Agendar Sessão</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-white"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-600 mb-4">Sobre Mim</h2> |
| <div class="w-20 h-1 bg-purple-500 mx-auto"></div> |
| </div> |
| <div class="flex flex-col md:flex-row items-center gap-12"> |
| <div class="md:w-1/2"> |
| <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3" alt="Auzenir Abrantes" class="rounded-lg shadow-xl w-full h-auto max-h-96 object-cover"> |
| </div> |
| <div class="md:w-1/2"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Olá, eu sou Auzenir</h3> |
| <p class="text-gray-600 mb-6">Fotógrafa profissional baseada em Sousa, Paraíba, especializada em retratos, eventos e fotografia documental. Com mais de 10 anos de experiência, meu objetivo é capturar a essência e a beleza de cada momento especial.</p> |
| <p class="text-gray-600 mb-6">Minha paixão pela fotografia começou quando era criança, observando a luz e as paisagens do sertão paraibano. Desde então, venho desenvolvendo um estilo único que combina sensibilidade artística com técnica profissional.</p> |
| <div class="grid grid-cols-2 gap-4 mb-6"> |
| <div class="flex items-center"> |
| <i class="fas fa-camera text-purple-500 mr-2"></i> |
| <span class="text-gray-700">Fotografia Profissional</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-heart text-purple-500 mr-2"></i> |
| <span class="text-gray-700">Casamentos</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-baby text-purple-500 mr-2"></i> |
| <span class="text-gray-700">Newborn</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-graduation-cap text-purple-500 mr-2"></i> |
| <span class="text-gray-700">Formaturas</span> |
| </div> |
| </div> |
| <a href="#contact" class="inline-block bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition">Entre em Contato</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="portfolio" class="py-20 bg-gray-50"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-600 mb-4">Meu Portfólio</h2> |
| <div class="w-20 h-1 bg-purple-500 mx-auto mb-8"></div> |
| <div class="flex justify-center space-x-4 mb-8"> |
| <button class="filter-btn px-4 py-2 rounded-full bg-purple-600 text-white" data-filter="all">Todos</button> |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-purple-600 hover:text-white transition" data-filter="wedding">Casamentos</button> |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-purple-600 hover:text-white transition" data-filter="portrait">Retratos</button> |
| <button class="filter-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-purple-600 hover:text-white transition" data-filter="family">Família</button> |
| </div> |
| </div> |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 bg-white"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-600 mb-4">Meus Serviços</h2> |
| <div class="w-20 h-1 bg-purple-500 mx-auto"></div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300"> |
| <div class="text-purple-600 text-4xl mb-4"> |
| <i class="fas fa-ring"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Casamentos</h3> |
| <p class="text-gray-600">Cobertura completa do seu grande dia, desde os preparativos até a festa. Capturo cada momento especial com sensibilidade e profissionalismo.</p> |
| </div> |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300"> |
| <div class="text-purple-600 text-4xl mb-4"> |
| <i class="fas fa-baby"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Newborn</h3> |
| <p class="text-gray-600">Sessões delicadas para registrar os primeiros dias do seu bebê. Trabalho com segurança, conforto e todo o cuidado que essa fase especial merece.</p> |
| </div> |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300"> |
| <div class="text-purple-600 text-4xl mb-4"> |
| <i class="fas fa-users"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Família</h3> |
| <p class="text-gray-600">Sessões descontraídas para registrar o amor e a conexão da sua família. Momentos espontâneos que se tornarão recordações preciosas.</p> |
| </div> |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300"> |
| <div class="text-purple-600 text-4xl mb-4"> |
| <i class="fas fa-user-graduate"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Formaturas</h3> |
| <p class="text-gray-600">Registro profissional dessa importante conquista. Sessões individuais ou em grupo, com locações especiais em Sousa e região.</p> |
| </div> |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300"> |
| <div class="text-purple-600 text-4xl mb-4"> |
| <i class="fas fa-birthday-cake"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Eventos</h3> |
| <p class="text-gray-600">Cobertura completa de festas, aniversários, batizados e outros eventos especiais. Capturo a emoção e a alegria de cada momento.</p> |
| </div> |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300"> |
| <div class="text-purple-600 text-4xl mb-4"> |
| <i class="fas fa-portrait"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Retratos</h3> |
| <p class="text-gray-600">Sessões individuais que revelam sua personalidade e beleza única. Ideal para redes sociais, currículos ou simplesmente presentear alguém especial.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="py-20 bg-purple-50"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-600 mb-4">Depoimentos</h2> |
| <div class="w-20 h-1 bg-purple-500 mx-auto"></div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="testimonial-card bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Maria Silva</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">"Auzenir capturou perfeitamente a essência do nosso casamento. As fotos são lindas e nos emocionam cada vez que as vemos. Super profissional e atenciosa!"</p> |
| </div> |
| <div class="testimonial-card bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Carlos Oliveira</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">"As fotos da nossa família ficaram incríveis! Auzenir tem um olhar único e soube capturar a conexão entre nós. Recomendo muito seu trabalho!"</p> |
| </div> |
| <div class="testimonial-card bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-bold">Ana Paula</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">"Fizemos a sessão de newborn com a Auzenir e foi uma experiência maravilhosa. Ela foi super cuidadosa com o bebê e as fotos ficaram perfeitas!"</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-white"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-600 mb-4">Entre em Contato</h2> |
| <div class="w-20 h-1 bg-purple-500 mx-auto"></div> |
| </div> |
| <div class="flex flex-col md:flex-row gap-12"> |
| <div class="md:w-1/2"> |
| <h3 class="text-2xl font-bold mb-6">Agende sua sessão</h3> |
| <form id="contact-form" class="space-y-6"> |
| <div> |
| <label for="name" class="block text-gray-700 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-purple-500" required> |
| </div> |
| <div> |
| <label for="email" class="block text-gray-700 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-purple-500" required> |
| </div> |
| <div> |
| <label for="phone" class="block text-gray-700 mb-2">Telefone</label> |
| <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required> |
| </div> |
| <div> |
| <label for="service" class="block text-gray-700 mb-2">Serviço de interesse</label> |
| <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| <option value="wedding">Casamento</option> |
| <option value="newborn">Newborn</option> |
| <option value="family">Família</option> |
| <option value="graduation">Formatura</option> |
| <option value="portrait">Retrato</option> |
| <option value="event">Evento</option> |
| <option value="other">Outro</option> |
| </select> |
| </div> |
| <div> |
| <label for="message" class="block text-gray-700 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-purple-500"></textarea> |
| </div> |
| <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition w-full">Enviar Mensagem</button> |
| </form> |
| </div> |
| <div class="md:w-1/2"> |
| <h3 class="text-2xl font-bold mb-6">Informações de Contato</h3> |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="text-purple-600 text-xl mr-4 mt-1"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800 mb-1">Localização</h4> |
| <p class="text-gray-600">Sousa, Paraíba, Brasil</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="text-purple-600 text-xl mr-4 mt-1"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800 mb-1">Email</h4> |
| <p class="text-gray-600">contato@auzenirabrantes.com</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="text-purple-600 text-xl mr-4 mt-1"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800 mb-1">Telefone</h4> |
| <p class="text-gray-600">(83) 99999-9999</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="text-purple-600 text-xl mr-4 mt-1"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-gray-800 mb-1">Horário de Atendimento</h4> |
| <p class="text-gray-600">Segunda a Sexta: 9h - 18h</p> |
| <p class="text-gray-600">Sábado: 9h - 13h</p> |
| </div> |
| </div> |
| </div> |
| <div class="mt-8"> |
| <h4 class="font-bold text-gray-800 mb-4">Redes Sociais</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-purple-600 hover:text-purple-800 text-2xl transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-purple-600 hover:text-purple-800 text-2xl transition"> |
| <i class="fab fa-facebook"></i> |
| </a> |
| <a href="#" class="text-purple-600 hover:text-purple-800 text-2xl transition"> |
| <i class="fab fa-whatsapp"></i> |
| </a> |
| </div> |
| </div> |
| <div class="mt-8"> |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3961.952912521219!2d-38.48137968523171!3d-6.889668895019261!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7a44f8a6d9e3a1d%3A0x5c8f3e5b3d6a2b1c!2sSousa%2C%20PB!5e0!3m2!1spt-BR!2sbr!4v1620000000000!5m2!1spt-BR!2sbr" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-lg shadow-md"></iframe> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-800 text-white py-12"> |
| <div class="max-w-6xl mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Auzenir Abrantes</h3> |
| <p class="text-gray-400">Fotógrafa profissional em Sousa-PB, especializada em capturar momentos especiais com sensibilidade e técnica.</p> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Links Rápidos</h3> |
| <ul class="space-y-2"> |
| <li><a href="#home" class="text-gray-400 hover:text-white transition">Início</a></li> |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">Sobre</a></li> |
| <li><a href="#portfolio" class="text-gray-400 hover:text-white transition">Portfólio</a></li> |
| <li><a href="#services" class="text-gray-400 hover:text-white transition">Serviços</a></li> |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contato</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Newsletter</h3> |
| <p class="text-gray-400 mb-4">Assine para receber novidades e promoções.</p> |
| <form class="flex"> |
| <input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full"> |
| <button type="submit" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-r-lg"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 Auzenir Abrantes Fotografia. Todos os direitos reservados.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-purple-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> |
| <i class="fas fa-arrow-up"></i> |
| </button> |
|
|
| |
| <script> |
| |
| const menuBtn = document.getElementById('menu-btn'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| menuBtn.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| mobileMenu.classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| const backToTopBtn = document.getElementById('back-to-top'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 300) { |
| backToTopBtn.classList.remove('opacity-0', 'invisible'); |
| backToTopBtn.classList.add('opacity-100', 'visible'); |
| } else { |
| backToTopBtn.classList.remove('opacity-100', 'visible'); |
| backToTopBtn.classList.add('opacity-0', 'invisible'); |
| } |
| }); |
| |
| backToTopBtn.addEventListener('click', () => { |
| window.scrollTo({ |
| top: 0, |
| behavior: 'smooth' |
| }); |
| }); |
| |
| |
| const filterButtons = document.querySelectorAll('.filter-btn'); |
| const portfolioContainer = document.querySelector('#portfolio .grid'); |
| |
| |
| const portfolioItems = [ |
| { |
| image: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3', |
| category: 'wedding', |
| title: 'Casamento no Sertão' |
| }, |
| { |
| image: 'https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?ixlib=rb-4.0.3', |
| category: 'portrait', |
| title: 'Retrato Feminino' |
| }, |
| { |
| image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3', |
| category: 'portrait', |
| title: 'Retrato Masculino' |
| }, |
| { |
| image: 'https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3', |
| category: 'family', |
| title: 'Família Feliz' |
| }, |
| { |
| image: 'https://images.unsplash.com/photo-1526893381913-e311045b8064?ixlib=rb-4.0.3', |
| category: 'wedding', |
| title: 'Noivos na Praia' |
| }, |
| { |
| image: 'https://images.unsplash.com/photo-1526666925395-59a69a8871b1?ixlib=rb-4.0.3', |
| category: 'family', |
| title: 'Mãe e Filha' |
| }, |
| { |
| image: 'https://images.unsplash.com/photo-1524502397800-2eea0587e269?ixlib=rb-4.0.3', |
| category: 'portrait', |
| title: 'Retrato Artístico' |
| }, |
| { |
| image: 'https://images.unsplash.com/photo-1526667264907-2d7950f094bd?ixlib=rb-4.0.3', |
| category: 'wedding', |
| title: 'Beijo dos Noivos' |
| }, |
| { |
| image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3', |
| category: 'family', |
| title: 'Pai e Filho' |
| } |
| ]; |
| |
| |
| function displayPortfolioItems(filter = 'all') { |
| portfolioContainer.innerHTML = ''; |
| |
| const filteredItems = filter === 'all' |
| ? portfolioItems |
| : portfolioItems.filter(item => item.category === filter); |
| |
| filteredItems.forEach(item => { |
| const portfolioItem = document.createElement('div'); |
| portfolioItem.className = 'gallery-item relative overflow-hidden rounded-lg shadow-md'; |
| portfolioItem.innerHTML = ` |
| <img src="${item.image}" alt="${item.title}" class="w-full h-64 object-cover"> |
| <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300"> |
| <h3 class="text-white text-xl font-bold">${item.title}</h3> |
| </div> |
| `; |
| portfolioContainer.appendChild(portfolioItem); |
| }); |
| } |
| |
| |
| displayPortfolioItems(); |
| |
| |
| filterButtons.forEach(button => { |
| button.addEventListener('click', () => { |
| |
| filterButtons.forEach(btn => { |
| btn.classList.remove('bg-purple-600', 'text-white'); |
| btn.classList.add('bg-gray-200', 'hover:bg-purple-600', 'hover:text-white'); |
| }); |
| |
| button.classList.remove('bg-gray-200', 'hover:bg-purple-600', 'hover:text-white'); |
| button.classList.add('bg-purple-600', 'text-white'); |
| |
| |
| const filter = button.getAttribute('data-filter'); |
| displayPortfolioItems(filter); |
| }); |
| }); |
| |
| |
| const contactForm = document.getElementById('contact-form'); |
| |
| contactForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| |
| const name = document.getElementById('name').value; |
| const email = document.getElementById('email').value; |
| const phone = document.getElementById('phone').value; |
| const service = document.getElementById('service').value; |
| const message = document.getElementById('message').value; |
| |
| |
| console.log('Form submitted:', { name, email, phone, service, message }); |
| |
| |
| alert('Obrigada pela sua mensagem, ' + name + '! Entrarei em contato em breve.'); |
| |
| |
| contactForm.reset(); |
| }); |
| |
| |
| const animateOnScroll = () => { |
| const elements = document.querySelectorAll('.fade-in, .testimonial-card, .gallery-item'); |
| |
| elements.forEach(element => { |
| const elementPosition = element.getBoundingClientRect().top; |
| const screenPosition = window.innerHeight / 1.3; |
| |
| if (elementPosition < screenPosition) { |
| element.classList.add('animate__animated', 'animate__fadeInUp'); |
| } |
| }); |
| }; |
| |
| window.addEventListener('scroll', animateOnScroll); |
| window.addEventListener('load', animateOnScroll); |
| </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=jptec2024/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
