Hugging Face's logo

Spaces:
Arthurrn
/
teucuu
Running

App Files Community
teucuu / index.html
Arthurrn's picture
Arthurrn
gostaria de criar um site profissional para meu trabalho como fotógrafo. Quero um site bem planejado, com foco visual e navegação simples. Objetivo do site: Exibir meu portfólio de fotografia (por categorias: casamentos, ensaios, eventos, etc.) Atrair novos clientes Permitir que pessoas entrem em contato ou solicitem orçamentos O que espero do site: Design moderno e responsivo (funcione bem em celular e desktop) Galeria de fotos bem organizada Página “Sobre mim” com minha história e abordagem fotográfica Blog (opcional) para compartilhar bastidores ou dicas Integração com redes sociais Formulário de contato Boa performance (rápido para carregar) e otimizado para Google (SEO) Referências que gosto: [Link de sites de fotógrafos que você admira] Prazos e orçamento: Gostaria de uma estimativa de tempo e custo com base nesse briefing. - Initial Deployment
a39a9fb verified
raw
history blame contribute delete
48.7 kB
 <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fotógrafo Profissional | Seu Nome Aqui</title>
<meta name="description" content="Fotógrafo profissional especializado em casamentos, ensaios e eventos. Capturando momentos únicos com arte e sensibilidade.">
<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>
/* Custom CSS for animations and effects */
.bg-hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-4.0.3');
background-size: cover;
background-position: center;
height: 80vh;
}
.gallery-item {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.03);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.active-tab {
border-bottom: 3px solid #fff;
}
/* Custom fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fadeIn 1s ease-in-out;
}
/* Image modal styling */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 90%;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Custom loading spinner */
.spinner {
border: 5px solid #f3f3f3;
border-top: 5px solid #555;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="font-sans text-gray-800 bg-gray-50">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-black bg-opacity-90 transition-all duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<a href="#" class="text-white text-2xl font-serif font-bold">Foto<span class="text-amber-400">Grafia</span></a>
<!-- Desktop Navigation -->
<div class="hidden md:flex space-x-8">
<a href="#home" class="text-white hover:text-amber-400 transition">Home</a>
<a href="#portfolio" class="text-white hover:text-amber-400 transition">Portfólio</a>
<a href="#about" class="text-white hover:text-amber-400 transition">Sobre</a>
<a href="#services" class="text-white hover:text-amber-400 transition">Serviços</a>
<a href="#blog" class="text-white hover:text-amber-400 transition">Blog</a>
<a href="#contact" class="text-white hover:text-amber-400 transition">Contato</a>
</div>
<!-- Mobile menu button -->
<button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Navigation -->
<div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95 w-full py-2 px-4">
<a href="#home" class="block py-2 text-white hover:text-amber-400 transition">Home</a>
<a href="#portfolio" class="block py-2 text-white hover:text-amber-400 transition">Portfólio</a>
<a href="#about" class="block py-2 text-white hover:text-amber-400 transition">Sobre</a>
<a href="#services" class="block py-2 text-white hover:text-amber-400 transition">Serviços</a>
<a href="#blog" class="block py-2 text-white hover:text-amber-400 transition">Blog</a>
<a href="#contact" class="block py-2 text-white hover:text-amber-400 transition">Contato</a>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="bg-hero flex items-center justify-center pt-16">
<div class="text-center px-4 text-white animate-fade-in">
<h1 class="text-4xl md:text-6xl font-bold mb-4 font-serif">Seu <span class="text-amber-400">Nome</span> Aqui</h1>
<p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Transformando momentos em memórias eternas através da fotografia</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="#contact" class="bg-amber-500 hover:bg-amber-600 text-white px-6 py-3 rounded-md font-medium transition">Solicite um Orçamento</a>
<a href="#portfolio" class="border border-white hover:bg-white hover:text-black text-white px-6 py-3 rounded-md font-medium transition">Veja Meu Trabalho</a>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="py-16 px-4 max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Portfólio</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Explore meu trabalho e veja como posso capturar seus momentos especiais</p>
</div>
<!-- Portfolio Filter -->
<div class="flex flex-wrap justify-center mb-10 border-b border-gray-200">
<button class="portfolio-tab px-4 py-2 mx-2 font-medium text-gray-600 hover:text-black transition active-tab" data-category="all">Todos</button>
<button class="portfolio-tab px-4 py-2 mx-2 font-medium text-gray-600 hover:text-black transition" data-category="weddings">Casamentos</button>
<button class="portfolio-tab px-4 py-2 mx-2 font-medium text-gray-600 hover:text-black transition" data-category="portraits">Ensaios</button>
<button class="portfolio-tab px-4 py-2 mx-2 font-medium text-gray-600 hover:text-black transition" data-category="events">Eventos</button>
<button class="portfolio-tab px-4 py-2 mx-2 font-medium text-gray-600 hover:text-black transition" data-category="family">Família</button>
</div>
<!-- Portfolio Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 portfolio-grid">
<!-- This will be populated by JavaScript -->
<div class="text-center py-8">
<div class="spinner"></div>
<p>Carregando imagens...</p>
</div>
</div>
</section>
<!-- Image Modal -->
<div id="imageModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="modalImage">
<div id="caption" class="text-white text-center mt-4"></div>
</div>
<!-- About Section -->
<section id="about" class="py-16 px-4 bg-gray-100">
<div class="max-w-7xl mx-auto">
<div class="md:flex items-center">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3" alt="Fotógrafo" class="rounded-lg shadow-lg w-full">
</div>
<div class="md:w-1/2">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Sobre Mim</h2>
<p class="text-gray-700 mb-4">Sou um fotógrafo profissional apaixonado por capturar momentos especiais e transformá-los em memórias eternas. Com mais de 10 anos de experiência, tenho o privilégio de documentar histórias de amor, alegria e conexão.</p>
<p class="text-gray-700 mb-6">Minha abordagem combina técnica apurada com sensibilidade artística, buscando sempre registrar a essência e emoção de cada momento de forma natural e autêntica.</p>
<div class="flex flex-wrap gap-4">
<div class="flex items-center">
<div class="bg-amber-100 p-3 rounded-full mr-3">
<i class="fas fa-camera text-amber-600"></i>
</div>
<span class="font-medium">+500 ensaios realizados</span>
</div>
<div class="flex items-center">
<div class="bg-amber-100 p-3 rounded-full mr-3">
<i class="fas fa-heart text-amber-600"></i>
</div>
<span class="font-medium">+200 casamentos</span>
</div>
</div>
<div class="mt-8">
<a href="#contact" class="bg-black hover:bg-gray-800 text-white px-6 py-3 rounded-md font-medium transition">Vamos Conversar</a>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-16 px-4 max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Serviços</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Ofereço uma variedade de serviços de fotografia para atender suas necessidades</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
<div class="text-amber-500 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-700 mb-4">Cobertura completa do seu grande dia, desde os preparativos até a festa, capturando cada momento especial com sensibilidade e arte.</p>
<p class="font-semibold">A partir de R$ 2.500</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
<div class="text-amber-500 text-4xl mb-4">
<i class="fas fa-user"></i>
</div>
<h3 class="text-xl font-bold mb-3">Ensaios Fotográficos</h3>
<p class="text-gray-700 mb-4">Ensaios individuais, de casal ou família em locação ou estúdio, com direção especializada para fotos incríveis e naturais.</p>
<p class="font-semibold">A partir de R$ 500</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
<div class="text-amber-500 text-4xl mb-4">
<i class="fas fa-glass-cheers"></i>
</div>
<h3 class="text-xl font-bold mb-3">Eventos</h3>
<p class="text-gray-700 mb-4">Cobertura profissional de aniversários, formaturas, batizados e eventos corporativos, registrando momentos importantes.</p>
<p class="font-semibold">A partir de R$ 800</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
<div class="text-amber-500 text-4xl mb-4">
<i class="fas fa-home"></i>
</div>
<h3 class="text-xl font-bold mb-3">Gestantes & Newborn</h3>
<p class="text-gray-700 mb-4">Registro delicado da gravidez e dos primeiros dias do bebê, com segurança e cuidado em sessões personalizadas.</p>
<p class="font-semibold">A partir de R$ 600</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
<div class="text-amber-500 text-4xl mb-4">
<i class="fas fa-briefcase"></i>
</div>
<h3 class="text-xl font-bold mb-3">Fotografia Comercial</h3>
<p class="text-gray-700 mb-4">Fotos profissionais para produtos, estabelecimentos comerciais e catálogos que destacam seu negócio com qualidade.</p>
<p class="font-semibold">Sob consulta</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
<div class="text-amber-500 text-4xl mb-4">
<i class="fas fa-film"></i>
</div>
<h3 class="text-xl font-bold mb-3">Edição de Imagens</h3>
<p class="text-gray-700 mb-4">Serviços profissionais de edição fotográfica incluindo tratamento de cor, retoques e composições criativas.</p>
<p class="font-semibold">Sob consulta</p>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-16 bg-gray-900 text-white px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Depoimentos</h2>
<p class="text-gray-300 max-w-2xl mx-auto">O que meus clientes dizem sobre meu trabalho</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 testimonial-slider">
<div class="bg-gray-800 p-6 rounded-lg">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Ana Silva</h4>
<div class="flex text-amber-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-300">"Fotógrafo absolutamente incrível! Capturou cada momento do nosso casamento com tanta sensibilidade e arte. As fotos superaram todas nossas expectativas!"</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Carlos Mendes</h4>
<div class="flex text-amber-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-300">"Contratei para o ensaio corporativo e ficamos muito satisfeitos. Profissionalismo total, ótima direção e as fotos ficaram perfeitas para nosso site."</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Juliana Costa</h4>
<div class="flex text-amber-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-300">"Fizemos ensaio newborn com nosso bebê de 15 dias e foi maravilhoso! Paciente, cuidadoso e as fotos são um tesouro que guardaremos para sempre."</p>
</div>
</div>
</div>
</section>
<!-- Blog Section -->
<section id="blog" class="py-16 px-4 max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Blog</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Dicas, bastidores e inspirações fotográficas</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1506084868230-bb9d95c24759?ixlib=rb-4.0.3" alt="Post do blog" class="w-full h-48 object-cover">
<div class="p-6">
<div class="text-xs text-gray-500 mb-2">20 de Junho, 2023 • 5 min de leitura</div>
<h3 class="text-xl font-bold mb-2">Como escolher o melhor fotógrafo para seu casamento</h3>
<p class="text-gray-700 mb-4">Guia completo com perguntas importantes para fazer ao contratar um fotógrafo de casamento e garantir que sua experiência seja perfeita.</p>
<a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Ler mais →</a>
</div>
</div>
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1522881193459-3ae468209c63?ixlib=rb-4.0.3" alt="Post do blog" class="w-full h-48 object-cover">
<div class="p-6">
<div class="text-xs text-gray-500 mb-2">15 de Maio, 2023 • 4 min de leitura</div>
<h3 class="text-xl font-bold mb-2">5 Poses Naturais para Ensaios Fotográficos</h3>
<p class="text-gray-700 mb-4">Dicas para ficar à vontade na frente das câmeras e conseguir fotos naturais e incríveis no seu ensaio.</p>
<a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Ler mais →</a>
</div>
</div>
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition">
<img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-4.0.3" alt="Post do blog" class="w-full h-48 object-cover">
<div class="p-6">
<div class="text-xs text-gray-500 mb-2">2 de Maio, 2023 • 7 min de leitura</div>
<h3 class="text-xl font-bold mb-2">Bastidores: Um Dia de Casamento</h3>
<p class="text-gray-700 mb-4">Veja como é um dia típico fotografando um casamento, desde os preparativos até a última foto da festa.</p>
<a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Ler mais →</a>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="bg-black hover:bg-gray-800 text-white px-6 py-3 rounded-md font-medium transition">Ver Todos os Posts</a>
</div>
</section>
<!-- Instagram Feed -->
<section class="py-12 bg-gray-100 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold mb-2">Siga no Instagram</h2>
<a href="#" class="text-amber-600 hover:text-amber-700 transition">@seuusuario</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 instagram-feed">
<!-- Instagram images will be loaded here -->
<div class="bg-gray-300 h-40 animate-pulse"></div>
<div class="bg-gray-300 h-40 animate-pulse"></div>
<div class="bg-gray-300 h-40 animate-pulse"></div>
<div class="bg-gray-300 h-40 animate-pulse"></div>
<div class="bg-gray-300 h-40 animate-pulse"></div>
<div class="bg-gray-300 h-40 animate-pulse"></div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 px-4 max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Entre em Contato</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Preencha o formulário abaixo para solicitar um orçamento ou tirar dúvidas</p>
</div>
<div class="md:flex">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
<form id="contactForm" class="space-y-6">
<div>
<label for="name" class="block text-gray-700 font-medium mb-2">Nome</label>
<input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent" required>
</div>
<div>
<label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
<input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent" required>
</div>
<div>
<label for="phone" class="block text-gray-700 font-medium mb-2">Telefone</label>
<input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent">
</div>
<div>
<label for="service" class="block text-gray-700 font-medium mb-2">Serviço de Interesse</label>
<select id="service" name="service" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent">
<option value="">Selecione...</option>
<option value="wedding">Casamento</option>
<option value="portrait">Ensaio Fotográfico</option>
<option value="event">Evento</option>
<option value="newborn">Newborn</option>
<option value="commercial">Fotografia Comercial</option>
<option value="other">Outro</option>
</select>
</div>
<div>
<label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label>
<textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent" required></textarea>
</div>
<button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-white font-medium py-3 px-4 rounded-md transition">Enviar Mensagem</button>
</form>
</div>
<div class="md:w-1/2 md:pl-8">
<div class="bg-gray-100 p-8 rounded-lg h-full">
<h3 class="text-xl font-bold mb-6">Informações de Contato</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="text-amber-600 text-xl mr-4 mt-1">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h4 class="font-medium mb-1">Endereço</h4>
<p class="text-gray-700">Rua das Flores, 123<br>São Paulo/SP - Brasil</p>
</div>
</div>
<div class="flex items-start">
<div class="text-amber-600 text-xl mr-4 mt-1">
<i class="fas fa-phone-alt"></i>
</div>
<div>
<h4 class="font-medium mb-1">Telefone</h4>
<p class="text-gray-700">(11) 98765-4321</p>
<p class="text-gray-700">(11) 1234-5678 (WhatsApp)</p>
</div>
</div>
<div class="flex items-start">
<div class="text-amber-600 text-xl mr-4 mt-1">
<i class="fas fa-envelope"></i>
</div>
<div>
<h4 class="font-medium mb-1">Email</h4>
<p class="text-gray-700">contato@seusite.com</p>
<p class="text-gray-700">orçamentos@seusite.com</p>
</div>
</div>
<div class="flex items-start">
<div class="text-amber-600 text-xl mr-4 mt-1">
<i class="fas fa-clock"></i>
</div>
<div>
<h4 class="font-medium mb-1">Horário de Atendimento</h4>
<p class="text-gray-700">Segunda a Sexta: 9h às 18h</p>
<p class="text-gray-700">Sábado: 10h às 14h</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-medium mb-4">Redes Sociais</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-700 hover:text-amber-600 transition text-xl"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-700 hover:text-amber-600 transition text-xl"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-gray-700 hover:text-amber-600 transition text-xl"><i class="fab fa-whatsapp"></i></a>
<a href="#" class="text-gray-700 hover:text-amber-600 transition text-xl"><i class="fab fa-pinterest"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Map -->
<div class="mt-16 bg-gray-200 h-64 md:h-80 rounded-lg overflow-hidden">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.1975844554424!2d-46.65867592465684!3d-23.561410200000013!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce59c8ef965d59%3A0x770c9b5dcba1df40!2sAv.%20Paulista%2C%201000%20-%20Bela%20Vista%2C%20S%C3%A3o%20Paulo%20-%20SP%2C%2001310-100!5e0!3m2!1sen!2sbr!4v1685049730618!5m2!1sen!2sbr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>
<!-- Newsletter -->
<section class="py-16 bg-gray-900 text-white px-4">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-4">Receba Novidades e Promoções</h2>
<p class="text-gray-300 mb-8">Inscreva-se em minha newsletter para receber dicas de fotografia, promoções exclusivas e novidades sobre meu trabalho.</p>
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
<input type="email" placeholder="Seu melhor email" class="flex-grow px-4 py-3 rounded-md text-gray-900 focus:outline-none focus:ring-2 focus:ring-amber-500">
<button type="submit" class="bg-amber-500 hover:bg-amber-600 text-white font-medium px-6 py-3 rounded-md transition whitespace-nowrap">Inscrever-se</button>
</form>
<p class="text-xs text-gray-500 mt-4">Não enviaremos spam. Respeitamos sua privacidade.</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-white py-8 px-4">
<div class="max-w-7xl mx-auto">
<div class="md:flex md:justify-between md:items-center">
<div class="mb-6 md:mb-0">
<a href="#" class="text-2xl font-serif font-bold">Foto<span class="text-amber-400">Grafia</span></a>
<p class="text-gray-400 mt-2">Capturando momentos, criando memórias.</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
<div>
<h3 class="text-lg font-medium mb-4">Links</h3>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li>
<li><a href="#portfolio" class="text-gray-400 hover:text-white transition">Portfólio</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition">Sobre</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white transition">Serviços</a></li>
<li><a href="#blog" class="text-gray-400 hover:text-white transition">Blog</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition">Contato</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-medium mb-4">Serviços</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Casamentos</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Ensaios Fotográficos</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Eventos</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Gestante & Newborn</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Fotografia Comercial</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-medium mb-4">Legal</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Termos de Uso</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li>
</ul>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8">
<div class="md:flex md:items-center md:justify-between">
<p class="text-gray-400">© 2023 Fotógrafo Profissional. Todos os direitos reservados.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-pinterest"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="backToTop" class="fixed bottom-8 right-8 bg-amber-500 hover:bg-amber-600 text-white rounded-full p-3 shadow-lg opacity-0 invisible transition-all duration-300">
<i class="fas fa-arrow-up"></i>
</button>
<!-- Success Modal -->
<div id="successModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 opacity-0 invisible transition-opacity duration-300">
<div class="bg-white rounded-lg p-8 max-w-md mx-4 text-center">
<div class="text-green-500 text-5xl mb-4">
<i class="fas fa-check-circle"></i>
</div>
<h3 class="text-2xl font-bold mb-2">Mensagem Enviada!</h3>
<p class="text-gray-700 mb-6">Obrigado pelo seu contato. Responderei o mais breve possível.</p>
<button id="closeModal" class="bg-amber-500 hover:bg-amber-600 text-white px-6 py-2 rounded-md transition">Fechar</button>
</div>
</div>
<script>
// Portfolio data - in a real scenario, you'd fetch this from a database or API
const portfolioData = {
all: [
{ id: 1, src: 'https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3', category: 'weddings', alt: 'Casamento no campo' },
{ id: 2, src: 'https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-4.0.3', category: 'weddings', alt: 'Noivos dançando' },
{ id: 3, src: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3', category: 'portraits', alt: 'Ensaio feminino' },
{ id: 4, src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3', category: 'portraits', alt: 'Retrato masculino' },
{ id: 5, src: 'https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3', category: 'events', alt: 'Show musical' },
{ id: 6, src: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3', category: 'events', alt: 'Evento corporativo' },
{ id: 7, src: 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3', category: 'family', alt: 'Família no parque' },
{ id: 8, src: 'https://images.unsplash.com/photo-1529333164855-9f3c10d82397?ixlib=rb-4.0.3', category: 'family', alt: 'Gestante' },
{ id: 9, src: 'https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-4.0.3', category: 'weddings', alt: 'Beijo dos noivos' },
{ id: 10, src: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3', category: 'portraits', alt: 'Ensaio criativo' },
{ id: 11, src: 'https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3', category: 'events', alt: 'Festa de formatura' },
{ id: 12, src: 'https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?ixlib=rb-4.0.3', category: 'family', alt: 'Bebê fotografado' }
],
weddings: [
{ id: 1, src: 'https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3', category: 'weddings', alt: 'Casamento no campo' },
{ id: 2, src: 'https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-4.0.3', category: 'weddings', alt: 'Noivos dançando' },
{ id: 9, src: 'https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-4.0.3', category: 'weddings', alt: 'Beijo dos noivos' },
{ id: 13, src: 'https://images.unsplash.com/photo-1507048331197-7d4ac70811cf?ixlib=rb-4.0.3', category: 'weddings', alt: 'Cerimônia de casamento' },
{ id: 14, src: 'https://images.unsplash.com/photo-1491975474562-1f4e30bc9468?ixlib=rb-4.0.3', category: 'weddings', alt: 'Decoração do casamento' },
{ id: 15, src: 'https://images.unsplash.com/photo-1485274466491-6c0baa1cfc0a?ixlib=rb-4.0.3', category: 'weddings', alt: 'Festa de casamento' }
],
portraits: [
{ id: 3, src: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3', category: 'portraits', alt: 'Ensaio feminino' },
{ id: 4, src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3', category: 'portraits', alt: 'Retrato masculino' },
{ id: 10, src: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3', category: 'portraits', alt: 'Ensaio criativo' },
{ id: 16, src: 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3', category: 'portraits', alt: 'Retrato em preto e branco' }
],
events: [
{ id: 5, src: 'https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3', category: 'events', alt: 'Show musical' },
{ id: 6, src: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3', category: 'events', alt: 'Evento corporativo' },
{ id: 11, src: 'https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3', category: 'events', alt: 'Festa de formatura' },
{ id: 17, src: 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3', category: 'events', alt: 'Palestra corporativa' }
],
family: [
{ id: 7, src: 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3', category: 'family', alt: 'Família no parque' },
{ id: 8, src: 'https://images.unsplash.com/photo-1529333164855-9f3c10d82397?ixlib=rb-4.0.3', category: 'family', alt: 'Gestante' },
{ id: 12, src: 'https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?ixlib=rb-4.0.3', category: 'family', alt: 'Bebê fotografado' },
{ id: 18, src: 'https://images.unsplash.com/photo-1523419409533-e91634057e3d?ixlib=rb-4.0.3', category: 'family', alt: 'Família com crianças' }
]
};
// Instagram data - in a real scenario you'd fetch from API
const instagramData = [
'https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3',
'https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-4.0.3',
'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3',
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3',
'https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3',
'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3'
];
// DOM elements
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const portfolioTabs = document.querySelectorAll('.portfolio-tab');
const portfolioGrid = document.querySelector('.portfolio-grid');
const imageModal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage');
const captionText = document.getElementById('caption');
const closeModal = document.getElementsByClassName('close')[0];
const backToTop = document.getElementById('backToTop');
const contactForm = document.getElementById('contactForm');
const successModal = document.getElementById('successModal');
const closeSuccessModal = document.getElementById('closeModal');
const instagramFeed = document.querySelector('.instagram-feed');
// Mobile menu toggle
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Smooth scrolling for navigation
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
mobileMenu.classList.add('hidden');
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Portfolio filter functionality
portfolioTabs.forEach(tab => {
tab.addEventListener('click', () => {
portfolioTabs.forEach(t => t.classList.remove('active-tab'));
tab.classList.add('active-tab');
const category = tab.getAttribute('data-category');
loadPortfolioItems(category);
});
});
// Load portfolio items
function loadPortfolioItems(category) {
const items = category === 'all' ?
portfolioData.all :
portfolioData[category] || [];
portfolioGrid.innerHTML = '';
if (items.length === 0) {
portfolioGrid.innerHTML = '<p class="text-center py-8">Nenhuma imagem encontrada nesta categoria.</p>';
return;
}
items.forEach(item => {
const portfolioItem = document.createElement('div');
portfolioItem.className = 'gallery-item relative group overflow-hidden rounded-lg cursor-pointer';
portfolioItem.innerHTML = `
<img src="${item.src}" alt="${item.alt}" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
<span class="text-white text-lg font-medium">${item.alt}</span>
</div>
`;
portfolioItem.addEventListener('click', () => {
modalImage.src = item.src;
captionText.innerHTML = item.alt;
imageModal.style.display = "block";
});
portfolioGrid.appendChild(portfolioItem);
});
}
// Initialize portfolio with all items
loadPortfolioItems('all');
// Modal functionality
closeModal.addEventListener('click', () => {
imageModal.style.display = "none";
});
window.addEventListener('click', (event) => {
if (event.target === imageModal) {
imageModal.style.display = "none";
}
});
// Back to top button
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTop.classList.remove('opacity-0', 'invisible');
backToTop.classList.add('opacity-100', 'visible');
} else {
backToTop.classList.remove('opacity-100', 'visible');
backToTop.classList.add('opacity-0', 'invisible');
}
});
backToTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Contact form submission
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// In a real scenario, you would send the form data to a server
console.log('Form submitted:', {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
phone: document.getElementById('phone').value,
service: document.getElementById('service').value,
message: document.getElementById('message').value
});
// Show success modal
successModal.classList.remove('opacity-0', 'invisible');
successModal.classList.add('opacity-100', 'visible');
// Reset form
contactForm.reset();
});
// Close success modal
closeSuccessModal.addEventListener('click', () => {
successModal.classList.remove('opacity-100', 'visible');
successModal.classList.add('opacity-0', 'invisible');
});
// Load Instagram feed
function loadInstagramFeed() {
instagramFeed.innerHTML = '';
instagramData.forEach(imgSrc => {
const instaItem = document.createElement('div');
instaItem.className = 'relative group overflow-hidden cursor-pointer';
instaItem.innerHTML = `
<img src="${imgSrc}" alt="Instagram post" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
<i class="fab fa-instagram text-white text-2xl"></i>
</div>
`;
instagramFeed.appendChild(instaItem);
});
}
loadInstagramFeed();
// Lazy loading images when they come into view
const lazyLoad = function() {
const lazyImages = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.getAttribute('data-src');
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
});
lazyImages.forEach(function(img) {
imageObserver.observe(img);
});
};
// Initialize lazy loading
document.addEventListener('DOMContentLoaded', lazyLoad);
</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=Arthurrn/teucuu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>