Spaces:

Arthurrn
/

saaa

Running

App Files Files Community

Arthurrn commited on Jun 11

Commit

fb8ff2b

verified ·

1 Parent(s): bd4addd

crie um site para me de fotografia amador para um jovem de 25 anos - Initial Deployment

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +725 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Saaa
-emoji: 📚
-colorFrom: blue
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: saaa
+emoji: 🐳
+colorFrom: yellow
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,725 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+        /* Efeitos personalizados */
+        .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;
+        }
+        /* Custom scrollbar */
+        ::-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">
+    <!-- Cabeçalho -->
+    <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">
+                    LC
+                </div>
+                <h1 class="text-xl font-bold gradient-text">Lente Criativa</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>
+        <!-- Menu mobile -->
+        <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>
+    <!-- Hero Section -->
+    <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">João, 25 anos</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Estatísticas -->
+    <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">50+</div>
+                    <div class="text-gray-600">Clientes satisfeitos</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Portfólio -->
+    <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>
+            <!-- Filtros -->
+            <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>
+            <!-- Galeria -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Item 1 -->
+                <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>
+                <!-- Item 2 -->
+                <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>
+                <!-- Item 3 -->
+                <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>
+                <!-- Item 4 -->
+                <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>
+                <!-- Item 5 -->
+                <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>
+                <!-- Item 6 -->
+                <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>
+    <!-- Sobre Mim -->
+    <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">
+                            25 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 João! Sou um jovem fotógrafo amador de 25 anos 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>
+    <!-- Equipamentos -->
+    <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">
+                <!-- Câmera -->
+                <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>
+                <!-- Lente 1 -->
+                <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>
+                <!-- Lente 2 -->
+                <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/71n+ZC5MS9L._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 50mm f/1.8</h3>
+                        <p class="text-gray-600 mb-4">Lente prime para retratos com belo bokeh</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.5</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Acessório -->
+                <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>
+    <!-- Depoimentos -->
+    <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">
+                <!-- Depoimento 1 -->
+                <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 João 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>
+                <!-- Depoimento 2 -->
+                <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>
+                <!-- Depoimento 3 -->
+                <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>
+    <!-- Contato -->
+    <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="#" 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 https://www.instagram.com/spartanphots/class="fab fa-instagram"></i>
+                                </a>
+                                <a href="#" 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>
+    <!-- Rodapé -->
+    <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>&copy; 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>
+    <!-- Voltar ao topo -->
+    <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>
+        // Filtro da galeria
+        document.querySelectorAll('.filter-btn').forEach(button => {
+            button.addEventListener('click', () => {
+                // Ativar botão clicado
+                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');
+                // Filtrar itens
+                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';
+                    }
+                });
+            });
+        });
+        // Menu mobile
+        document.querySelector('header button').addEventListener('click', () => {
+            const menu = document.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+        // Voltar ao topo
+        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'
+            });
+        });
+        // Suavizar rolagem
+        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'
+                    });
+                }
+                // Fechar menu mobile se aberto
+                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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ crie um site para me de fotografia amador para um jovem de 25 anos