|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Sp|Fotogafi Amadora</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> |
|
|
|
|
|
.photo-card:hover .photo-overlay { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.photo-overlay { |
|
|
transition: all 0.3s ease; |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { |
|
|
transform: translateY(0); |
|
|
} |
|
|
50% { |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: float 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
|
|
|
::-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="bg-gray-50 font-sans antialiased"> |
|
|
|
|
|
<header class="fixed w-full bg-white/90 backdrop-blur-sm z-50 shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center text-white font-bold mr-2"> |
|
|
AB |
|
|
</div> |
|
|
<h1 class="text-xl font-bold gradient-text">Arthur Brito</h1> |
|
|
</div> |
|
|
|
|
|
<nav class="hidden md:block"> |
|
|
<ul class="flex space-x-8"> |
|
|
<li><a href="#inicio" class="text-gray-700 hover:text-purple-600 transition">Início</a></li> |
|
|
<li><a href="#portfolio" class="text-gray-700 hover:text-purple-600 transition">Portfólio</a></li> |
|
|
<li><a href="#sobre" class="text-gray-700 hover:text-purple-600 transition">Sobre</a></li> |
|
|
<li><a href="#equipamentos" class="text-gray-700 hover:text-purple-600 transition">Equipamentos</a></li> |
|
|
<li><a href="#contato" class="text-gray-700 hover:text-purple-600 transition">Contato</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
<button class="md:hidden text-gray-700"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-md" id="mobile-menu"> |
|
|
<ul class="space-y-4"> |
|
|
<li><a href="#inicio" class="block text-gray-700 hover:text-purple-600 transition">Início</a></li> |
|
|
<li><a href="#portfolio" class="block text-gray-700 hover:text-purple-600 transition">Portfólio</a></li> |
|
|
<li><a href="#sobre" class="block text-gray-700 hover:text-purple-600 transition">Sobre</a></li> |
|
|
<li><a href="#equipamentos" class="block text-gray-700 hover:text-purple-600 transition">Equipamentos</a></li> |
|
|
<li><a href="#contato" class="block text-gray-700 hover:text-purple-600 transition">Contato</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="inicio" class="pt-24 pb-16 md:pt-32 md:pb-24 px-4" style="background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);"> |
|
|
<div class="container mx-auto flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 text-gray-800 leading-tight"> |
|
|
Capturando <span class="gradient-text">momentos</span>, criando <span class="gradient-text">memórias</span> |
|
|
</h1> |
|
|
<p class="text-lg text-gray-600 mb-8"> |
|
|
Fotografia amadora com olhar profissional. Explore meu portfólio e descubra o mundo através da minha lente. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#portfolio" class="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 py-3 rounded-full font-medium hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"> |
|
|
Ver Portfólio |
|
|
</a> |
|
|
<a href="#contato" class="border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-full font-medium hover:border-purple-500 hover:text-purple-600 transition"> |
|
|
Contato |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl floating"> |
|
|
<img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Fotógrafo" |
|
|
class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end pb-8 justify-center"> |
|
|
<span class="text-white text-lg font-semibold">Arthur Brito</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-wrap justify-center md:justify-between text-center"> |
|
|
<div class="w-1/2 md:w-auto mb-8 md:mb-0 px-4"> |
|
|
<div class="text-4xl font-bold text-purple-600 mb-2">3+</div> |
|
|
<div class="text-gray-600">Anos de experiência</div> |
|
|
</div> |
|
|
<div class="w-1/2 md:w-auto mb-8 md:mb-0 px-4"> |
|
|
<div class="text-4xl font-bold text-blue-500 mb-2">500+</div> |
|
|
<div class="text-gray-600">Fotos capturadas</div> |
|
|
</div> |
|
|
<div class="w-1/2 md:w-auto px-4"> |
|
|
<div class="text-4xl font-bold text-indigo-500 mb-2">10+</div> |
|
|
<div class="text-gray-600">Eventos registrados</div> |
|
|
</div> |
|
|
<div class="w-1/2 md:w-auto px-4"> |
|
|
<div class="text-4xl font-bold text-pink-500 mb-2">10+</div> |
|
|
<div class="text-gray-600">Clientes satisfeitos</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="portfolio" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Meu <span class="gradient-text">Portfólio</span></h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Explore minha coleção de trabalhos - desde retratos espontâneos até paisagens que contam histórias.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex justify-center mb-8 flex-wrap gap-2"> |
|
|
<button class="px-4 py-2 rounded-full bg-purple-500 text-white filter-btn active" data-filter="all">Todas</button> |
|
|
<button class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 filter-btn" data-filter="natureza">Natureza</button> |
|
|
<button class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 filter-btn" data-filter="retratos">Retratos</button> |
|
|
<button class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 filter-btn" data-filter="urbano">Urbano</button> |
|
|
<button class="px-4 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 filter-btn" data-filter="eventos">Eventos</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="photo-item group" data-category="natureza"> |
|
|
<div class="relative overflow-hidden rounded-xl shadow-lg h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Paisagem natural" |
|
|
class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500"> |
|
|
<div class="photo-overlay absolute inset-0 bg-black/50 flex flex-col justify-end p-6"> |
|
|
<h3 class="text-white text-xl font-semibold mb-2">Alvorada na Montanha</h3> |
|
|
<p class="text-gray-300">Capturada durante uma caminhada matinal em Minas Gerais</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="photo-item group" data-category="retratos"> |
|
|
<div class="relative overflow-hidden rounded-xl shadow-lg h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" |
|
|
alt="Retrato de jovem" |
|
|
class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500"> |
|
|
<div class="photo-overlay absolute inset-0 bg-black/50 flex flex-col justify-end p-6"> |
|
|
<h3 class="text-white text-xl font-semibold mb-2">Olhar Profundo</h3> |
|
|
<p class="text-gray-300">Sessão casual com iluminação natural</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="photo-item group" data-category="urbano"> |
|
|
<div class="relative overflow-hidden rounded-xl shadow-lg h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1533134242443-2042a3e2d0f7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" |
|
|
alt="Cena urbana noturna" |
|
|
class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500"> |
|
|
<div class="photo-overlay absolute inset-0 bg-black/50 flex flex-col justify-end p-6"> |
|
|
<h3 class="text-white text-xl font-semibold mb-2">Metrópole Noturna</h3> |
|
|
<p class="text-gray-300">Longa exposição capturando o movimento da cidade</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="photo-item group" data-category="eventos"> |
|
|
<div class="relative overflow-hidden rounded-xl shadow-lg h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1527529482837-4698179dc6ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Casamento" |
|
|
class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500"> |
|
|
<div class="photo-overlay absolute inset-0 bg-black/50 flex flex-col justify-end p-6"> |
|
|
<h3 class="text-white text-xl font-semibold mb-2">Primeiro Beijo</h3> |
|
|
<p class="text-gray-300">Momento especial capturado em um casamento</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="photo-item group" data-category="natureza"> |
|
|
<div class="relative overflow-hidden rounded-xl shadow-lg h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Cachoeira" |
|
|
class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500"> |
|
|
<div class="photo-overlay absolute inset-0 bg-black/50 flex flex-col justify-end p-6"> |
|
|
<h3 class="text-white text-xl font-semibold mb-2">Força da Natureza</h3> |
|
|
<p class="text-gray-300">Cachoeira em Chapada dos Veadeiros</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="photo-item group" data-category="retratos"> |
|
|
<div class="relative overflow-hidden rounded-xl shadow-lg h-64"> |
|
|
<img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Retrato urbano" |
|
|
class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500"> |
|
|
<div class="photo-overlay absolute inset-0 bg-black/50 flex flex-col justify-end p-6"> |
|
|
<h3 class="text-white text-xl font-semibold mb-2">Expressão Urbana</h3> |
|
|
<p class="text-gray-300">Retrato em ambiente industrial</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-block border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-full font-medium hover:border-purple-500 hover:text-purple-600 transition"> |
|
|
Ver Mais Fotos |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="sobre" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/3 mb-10 md:mb-0 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" |
|
|
alt="Fotógrafo" |
|
|
class="w-64 h-64 md:w-80 md:h-80 rounded-full object-cover border-4 border-white shadow-xl"> |
|
|
<div class="absolute -bottom-4 -right-4 bg-purple-500 text-white px-4 py-2 rounded-full font-medium"> |
|
|
21 anos |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-2/3 md:pl-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Sobre <span class="gradient-text">Mim</span></h2> |
|
|
<p class="text-gray-600 mb-6 leading-relaxed"> |
|
|
Olá, eu sou o Arthur Brito! Sou um jovem fotógrafo amador que encontrou na fotografia uma maneira de expressar minha criatividade e conexão com o mundo. |
|
|
</p> |
|
|
<p class="text-gray-600 mb-6 leading-relaxed"> |
|
|
Tudo começou como um hobby durante a faculdade, quando comprei minha primeira câmera para registrar viagens com amigos. Desde então, a paixão só cresceu e hoje dedico meu tempo livre a explorar diferentes técnicas e estilos fotográficos. |
|
|
</p> |
|
|
<p class="text-gray-600 mb-8 leading-relaxed"> |
|
|
Acredito que a fotografia vai além de simplesmente capturar imagens - é sobre contar histórias, preservar memórias e ver beleza nos detalhes que muitas vezes passam despercebidos. |
|
|
</p> |
|
|
|
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<div class="flex items-center bg-gray-100 px-4 py-2 rounded-full"> |
|
|
<i class="fas fa-camera text-purple-500 mr-2"></i> |
|
|
<span>Fotografia desde 2020</span> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-100 px-4 py-2 rounded-full"> |
|
|
<i class="fas fa-graduation-cap text-blue-500 mr-2"></i> |
|
|
<span>Formado em Design</span> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-100 px-4 py-2 rounded-full"> |
|
|
<i class="fas fa-map-marker-alt text-pink-500 mr-2"></i> |
|
|
<span>MarcionilioSouza, BA</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="equipamentos" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Meus <span class="gradient-text">Equipamentos</span></h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Conheça as ferramentas que uso para transformar visões em imagens</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> |
|
|
<div class="h-48 bg-gray-100 flex items-center justify-center p-6"> |
|
|
<img src="https://m.media-amazon.com/images/I/61+s0KyqqFL._AC_SL1500_.jpg" alt="Câmera Canon" class="h-full object-contain"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Canon EOS RP</h3> |
|
|
<p class="text-gray-600 mb-4">Câmera mirrorless full-frame com 26.2MP</p> |
|
|
<div class="flex items-center 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> |
|
|
<span class="text-gray-600 ml-2 text-sm">4.7</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> |
|
|
<div class="h-48 bg-gray-100 flex items-center justify-center p-6"> |
|
|
<img src="https://m.media-amazon.com/images/I/61OQLbj3HUL._AC_SL1500_.jpg" alt="Lente Canon" class="h-full object-contain"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">RF 24-105mm f/4L</h3> |
|
|
<p class="text-gray-600 mb-4">Lente versátil para diversas situações</p> |
|
|
<div class="flex items-center 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> |
|
|
<span class="text-gray-600 ml-2 text-sm">5.0</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> |
|
|
<div class="h-48 bg-gray-100 flex items-center justify-center p-6"> |
|
|
<img src="https://m.media-amazon.com/images/I/71Fd+K2RGQL._AC_SL1500_.jpg" alt="Tripé" class="h-full object-contain"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Tripé Manfrotto</h3> |
|
|
<p class="text-gray-600 mb-4">Tripé compacto e resistente para viagens</p> |
|
|
<div class="flex items-center 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="far fa-star"></i> |
|
|
<span class="text-gray-600 ml-2 text-sm">4.2</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-8 md:p-12"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4">Meu Processo Criativo</h3> |
|
|
<p class="text-gray-600 mb-6 leading-relaxed"> |
|
|
Enquanto equipamentos de qualidade são importantes, acredito que o olhar do fotógrafo é o que verdadeiramente faz a diferença. Uso minha câmera como uma extensão da minha visão, buscando sempre aprender e experimentar novas técnicas. |
|
|
</p> |
|
|
<p class="text-gray-600 leading-relaxed"> |
|
|
Apesar de ter equipamentos profissionais, também adoro desafios com equipamentos mais simples, provando que criatividade e técnica podem compensar qualquer limitação técnica. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-purple-500 to-blue-500 text-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">O que dizem <span class="text-yellow-300">sobre mim</span></h2> |
|
|
<p class="max-w-2xl mx-auto opacity-90">Depoimentos de clientes e amigos que já trabalharam comigo</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20"> |
|
|
<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-semibold">Ana Carolina</h4> |
|
|
<div class="flex text-yellow-300 text-sm"> |
|
|
<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="opacity-90 italic"> |
|
|
"O Arthur capturou momentos do meu casamento que eu nem tinha percebido. Sua sensibilidade para enquadrar e escolher os ângulos foi incrível. Super recomendo!" |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20"> |
|
|
<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-semibold">Ricardo Almeida</h4> |
|
|
<div class="flex text-yellow-300 text-sm"> |
|
|
<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="opacity-90 italic"> |
|
|
"Contratei o João para fazer fotos do meu restaurante novo e fiquei impressionado com o resultado. Ele conseguiu transmitir exatamente o clima que eu queria." |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-semibold">Mariana Souza</h4> |
|
|
<div class="flex text-yellow-300 text-sm"> |
|
|
<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="opacity-90 italic"> |
|
|
"Fiz uma sessão de fotos com o João para meu perfil profissional e amei o resultado natural e sem poses forçadas. Ele tem um ótimo olhar para retratos." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contato" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Vamos <span class="gradient-text">Conversar</span></h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Entre em contato para sessões, eventos ou apenas para trocar ideias sobre fotografia</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="bg-gray-50 rounded-xl p-6 shadow-sm"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">Informações de Contato</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-100 p-3 rounded-full mr-4 text-purple-600"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Localização</h4> |
|
|
<p class="text-gray-600">Marcionilio Sauza, </p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4 text-blue-600"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Email</h4> |
|
|
<p class="text-gray-600">freegames185@gmail.com</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4 text-green-600"> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Telefone</h4> |
|
|
<p class="text-gray-600">(75) 99121-0815</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-pink-100 p-3 rounded-full mr-4 text-pink-600"> |
|
|
<i class="fas fa-clock"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Horário</h4> |
|
|
<p class="text-gray-600">Segunda a Sábado, 9h às 18h</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h4 class="font-medium text-gray-800 mb-4">Redes Sociais</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="https://www.instagram.com/spartanphots/" target="_blank" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-instagram hover:text-white hover:bg-gradient-to-r from-purple-500 to-pink-500 transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
|
|
|
<a href="https://www.instagram.com/spartanphots/" target="_blank" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-blue-400 hover:text-white transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-red-500 hover:text-white transition"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-6 shadow-sm"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">Mensagem</h3> |
|
|
|
|
|
<form class="space-y-4"> |
|
|
<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 focus:border-transparent"> |
|
|
</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 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="subject" class="block text-gray-700 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-purple-500 focus:border-transparent"> |
|
|
<option value="">Selecione um assunto</option> |
|
|
<option value="session">Sessão Fotográfica</option> |
|
|
<option value="event">Cobertura de Evento</option> |
|
|
<option value="question">Dúvida</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 focus:border-transparent"></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 py-3 rounded-lg font-medium hover:shadow-lg transition-all duration-300"> |
|
|
Enviar Mensagem |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-gray-400 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 mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center text-white font-bold mr-2"> |
|
|
LC |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-white">Lente Criativa</h3> |
|
|
</div> |
|
|
<p class="mb-4">Fotografia amadora com profissionalismo e paixão.</p> |
|
|
<p>© 2023 Lente Criativa. Todos os direitos reservados.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-white mb-4">Links Rápidos</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#inicio" class="hover:text-white transition">Início</a></li> |
|
|
<li><a href="#portfolio" class="hover:text-white transition">Portfólio</a></li> |
|
|
<li><a href="#sobre" class="hover:text-white transition">Sobre Mim</a></li> |
|
|
<li><a href="#equipamentos" class="hover:text-white transition">Equipamentos</a></li> |
|
|
<li><a href="#contato" class="hover:text-white transition">Contato</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-white mb-4">Serviços</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-white transition">Retratos</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Eventos</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Paisagens</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Fotos de Produto</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Workshops</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-white mb-4">Newsletter</h4> |
|
|
<p class="mb-4">Inscreva-se para receber dicas de fotografia e novidades.</p> |
|
|
<form class="flex"> |
|
|
<input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-gray-900"> |
|
|
<button type="submit" class="bg-purple-600 text-white px-4 py-2 rounded-r-lg hover:bg-purple-700 transition"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center"> |
|
|
<p>Desenvolvido com ❤️ por um apaixonado por fotografia</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-purple-600 text-white rounded-full shadow-lg flex items-center justify-center hidden"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.filter-btn').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
|
|
|
document.querySelectorAll('.filter-btn').forEach(btn => { |
|
|
btn.classList.remove('active', 'bg-purple-500', 'text-white'); |
|
|
btn.classList.add('bg-gray-200', 'text-gray-700'); |
|
|
}); |
|
|
|
|
|
button.classList.add('active', 'bg-purple-500', 'text-white'); |
|
|
button.classList.remove('bg-gray-200', 'text-gray-700'); |
|
|
|
|
|
|
|
|
const filter = button.dataset.filter; |
|
|
const items = document.querySelectorAll('.photo-item'); |
|
|
|
|
|
items.forEach(item => { |
|
|
if(filter === 'all' || item.dataset.category === filter) { |
|
|
item.style.display = 'block'; |
|
|
} else { |
|
|
item.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('header button').addEventListener('click', () => { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTopButton = document.getElementById('back-to-top'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if(window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('hidden'); |
|
|
} else { |
|
|
backToTopButton.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopButton.addEventListener('click', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if(target) { |
|
|
window.scrollTo({ |
|
|
top: target.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if(!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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/saaa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
