Spaces:

R87
/

pecas

Running

App Files Files Community

R87 commited on Apr 30, 2025

Commit

47e90a5

verified ·

1 Parent(s): 7465e86

Add 2 files

Browse files

Files changed (2) hide show

index.html +652 -379
prompts.txt +4 -1

index.html CHANGED Viewed

@@ -3,491 +3,764 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AutoPeças - O maior mercado de peças automotivas</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>
-        .search-bar {
-            background-color: #fff159;
-        }
-        .ml-blue {
-            background-color: #2968c8;
-        }
-        .ml-yellow {
-            background-color: #fff159;
         }
-        .category-card:hover {
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            transform: translateY(-2px);
         }
-        .product-card:hover {
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-            transform: translateY(-5px);
         }
-        .product-image {
             transition: all 0.3s ease;
-            transform-origin: center center;
         }
         .product-card:hover .product-image {
             transform: scale(1.05);
         }
-        .deal-badge {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            background-color: #00a650;
-            color: white;
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            font-weight: bold;
-            z-index: 2;
-        }
-        .free-shipping {
-            color: #00a650;
-            font-weight: bold;
-        }
-        .dropdown:hover .dropdown-menu {
-            display: block;
         }
-        .banner-fx {
-            position: relative;
-            overflow: hidden;
-            border-radius: 8px;
         }
-        .banner-fx::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(45deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 50%);
-            z-index: 1;
         }
-        .banner-fx:hover::before {
-            background: linear-gradient(45deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 50%);
         }
-        .pulse {
-            animation: pulse 2s infinite;
         }
-        @keyframes pulse {
-            0% {
-                transform: scale(1);
-            }
-            50% {
-                transform: scale(1.05);
-            }
-            100% {
-                transform: scale(1);
-            }
         }
-        .shine {
             position: relative;
             overflow: hidden;
         }
-        .shine::after {
             content: '';
             position: absolute;
             top: -50%;
             left: -60%;
             width: 20%;
             height: 200%;
-            background: rgba(255,255,255,0.2);
             transform: rotate(30deg);
             transition: all 0.3s ease;
         }
-        .shine:hover::after {
             left: 120%;
         }
     </style>
 </head>
-<body class="bg-gray-100">
-    <!-- Header -->
-    <header class="search-bar py-2">
-        <div class="container mx-auto px-4">
-            <div class="flex items-center justify-between">
-                <!-- Logo -->
-                <div class="flex items-center">
-                    <a href="#" class="flex items-center shine">
-                        <img src="https://via.placeholder.com/134x34?text=AutoPeças" alt="AutoPeças" class="h-10">
-                    </a>
-                </div>
-                <!-- Search Bar -->
-                <div class="flex-1 mx-4">
-                    <div class="relative">
-                        <input type="text" placeholder="Buscar peças, marcas e muito mais..."
-                               class="w-full py-2 px-4 rounded shadow-sm focus:outline-none">
-                        <button class="absolute right-0 top-0 h-full px-4 bg-gray-200 rounded-r hover:bg-gray-300 transition">
-                            <i class="fas fa-search"></i>
-                        </button>
-                    </div>
                 </div>
-                <!-- User Menu -->
                 <div class="flex items-center space-x-4">
-                    <a href="#" class="text-sm hidden md:block hover:text-blue-600 transition">
-                        <i class="fas fa-map-marker-alt mr-1"></i>
-                        <span>Enviar para São Paulo</span>
-                    </a>
-                    <div class="dropdown relative">
-                        <button class="flex items-center text-sm hover:text-blue-600 transition">
-                            <i class="fas fa-user-circle mr-1 text-xl"></i>
-                            <span class="hidden md:inline">Minha conta</span>
-                            <i class="fas fa-chevron-down ml-1 text-xs"></i>
-                        </button>
-                        <div class="dropdown-menu absolute hidden right-0 mt-2 w-48 bg-white rounded shadow-lg py-2 z-10">
-                            <a href="#" class="block px-4 py-2 hover:bg-gray-100 transition">Minhas compras</a>
-                            <a href="#" class="block px-4 py-2 hover:bg-gray-100 transition">Favoritos</a>
-                            <a href="#" class="block px-4 py-2 hover:bg-gray-100 transition">Meus anúncios</a>
-                            <div class="border-t my-1"></div>
-                            <a href="#" class="block px-4 py-2 hover:bg-gray-100 transition">Entrar</a>
-                            <a href="#" class="block px-4 py-2 hover:bg-gray-100 transition">Criar conta</a>
-                        </div>
-                    </div>
-                    <a href="#" class="text-sm hover:text-blue-600 transition relative">
-                        <i class="fas fa-shopping-cart mr-1 text-xl"></i>
-                        <span class="hidden md:inline">Carrinho</span>
-                        <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
-                    </a>
                 </div>
             </div>
         </div>
-    </header>
-    <!-- Categories Nav -->
-    <nav class="bg-white shadow-sm">
-        <div class="container mx-auto px-4">
-            <div class="flex overflow-x-auto py-2 space-x-6 text-sm">
-                <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Motor</a>
-                <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Freios</a>
-                <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Suspensão</a>
-                <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Transmissão</a>
-                <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Elétrica</a>
-                <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Arrefecimento</a>
-                <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Escapamento</a>
-                <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Interior</a>
-                <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Exterior</a>
-                <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Acessórios</a>
-                <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Pneus e Rodas</a>
-                <a href="#" class="whitespace-nowrap hover:text-blue-500 transition">Óleos e Fluidos</a>
-            </div>
-        </div>
     </nav>
-    <!-- Main Content -->
-    <main class="container mx-auto px-4 py-6">
-        <!-- Banner -->
-        <div class="mb-6 banner-fx">
-            <img src="https://via.placeholder.com/1200x300?text=Promoções+de+Peças+Automotivas"
-                 alt="Promoções" class="w-full rounded pulse">
-        </div>
-        <!-- Categories Grid -->
-        <div class="mb-8">
-            <h2 class="text-xl font-bold mb-4">Categorias</h2>
-            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
-                <a href="#" class="category-card bg-white rounded p-4 text-center transition duration-200 shine">
-                    <div class="h-16 mx-auto mb-2">
-                        <i class="fas fa-car-battery text-4xl text-gray-600"></i>
-                    </div>
-                    <span class="text-sm font-medium">Baterias</span>
                 </a>
-                <a href="#" class="category-card bg-white rounded p-4 text-center transition duration-200 shine">
-                    <div class="h-16 mx-auto mb-2">
-                        <i class="fas fa-oil-can text-4xl text-gray-600"></i>
-                    </div>
-                    <span class="text-sm font-medium">Óleos</span>
                 </a>
-                <a href="#" class="category-card bg-white rounded p-4 text-center transition duration-200 shine">
-                    <div class="h-16 mx-auto mb-2">
-                        <i class="fas fa-tire text-4xl text-gray-600"></i>
-                    </div>
-                    <span class="text-sm font-medium">Pneus</span>
-                </a>
-                <a href="#" class="category-card bg-white rounded p-4 text-center transition duration-200 shine">
-                    <div class="h-16 mx-auto mb-2">
-                        <i class="fas fa-tools text-4xl text-gray-600"></i>
-                    </div>
-                    <span class="text-sm font-medium">Ferramentas</span>
                 </a>
-                <a href="#" class="category-card bg-white rounded p-4 text-center transition duration-200 shine">
-                    <div class="h-16 mx-auto mb-2">
-                        <i class="fas fa-lightbulb text-4xl text-gray-600"></i>
-                    </div>
-                    <span class="text-sm font-medium">Lâmpadas</span>
                 </a>
-                <a href="#" class="category-card bg-white rounded p-4 text-center transition duration-200 shine">
-                    <div class="h-16 mx-auto mb-2">
-                        <i class="fas fa-fan text-4xl text-gray-600"></i>
-                    </div>
-                    <span class="text-sm font-medium">Radiador</span>
                 </a>
             </div>
         </div>
-        <!-- Featured Products -->
-        <div class="mb-8">
-            <div class="flex justify-between items-center mb-4">
-                <h2 class="text-xl font-bold">Ofertas especiais</h2>
-                <a href="#" class="text-blue-500 text-sm font-medium hover:text-blue-700 transition">Ver todas</a>
             </div>
-            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
                 <!-- Product 1 -->
-                <div class="product-card bg-white rounded p-4 relative transition duration-200">
-                    <span class="deal-badge">OFERTA</span>
-                    <div class="overflow-hidden">
-                        <img src="https://via.placeholder.com/200x200?text=Kit+Amortecedor"
-                             alt="Kit Amortecedor" class="w-full h-40 object-contain mb-3 product-image">
                     </div>
-                    <div class="text-sm text-gray-500 mb-1">Suspensão</div>
-                    <h3 class="font-medium mb-2">Kit Amortecedor Dianteiro Gol 1.0 2015 a 2020</h3>
-                    <div class="text-xl font-bold mb-1">R$ 289,90</div>
-                    <div class="text-green-500 text-sm mb-2">12x R$ 24,16 sem juros</div>
-                    <div class="free-shipping text-sm mb-2">
-                        <i class="fas fa-truck"></i> Frete grátis
                     </div>
-                    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
-                        Comprar agora
-                    </button>
                 </div>
                 <!-- Product 2 -->
-                <div class="product-card bg-white rounded p-4 relative transition duration-200">
-                    <div class="overflow-hidden">
-                        <img src="https://via.placeholder.com/200x200?text=Bateria+Moura"
-                             alt="Bateria Moura" class="w-full h-40 object-contain mb-3 product-image">
                     </div>
-                    <div class="text-sm text-gray-500 mb-1">Baterias</div>
-                    <h3 class="font-medium mb-2">Bateria Moura 60Ah M60L - Original</h3>
-                    <div class="text-xl font-bold mb-1">R$ 429,90</div>
-                    <div class="text-green-500 text-sm mb-2">12x R$ 35,83 sem juros</div>
-                    <div class="free-shipping text-sm mb-2">
-                        <i class="fas fa-truck"></i> Frete grátis
                     </div>
-                    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
-                        Comprar agora
-                    </button>
                 </div>
                 <!-- Product 3 -->
-                <div class="product-card bg-white rounded p-4 relative transition duration-200">
-                    <span class="deal-badge">10% OFF</span>
-                    <div class="overflow-hidden">
-                        <img src="https://via.placeholder.com/200x200?text=Pastilha+Freio"
-                             alt="Pastilha de Freio" class="w-full h-40 object-contain mb-3 product-image">
                     </div>
-                    <div class="text-sm text-gray-500 mb-1">Freios</div>
-                    <h3 class="font-medium mb-2">Pastilha de Freio Dianteira Bosch HB193B</h3>
-                    <div class="flex items-center">
-                        <div class="text-xl font-bold mr-2">R$ 89,90</div>
-                        <div class="text-sm text-gray-500 line-through">R$ 99,90</div>
                     </div>
-                    <div class="text-green-500 text-sm mb-2">3x R$ 29,97 sem juros</div>
-                    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
-                        Comprar agora
-                    </button>
                 </div>
                 <!-- Product 4 -->
-                <div class="product-card bg-white rounded p-4 relative transition duration-200">
-                    <div class="overflow-hidden">
-                        <img src="https://via.placeholder.com/200x200?text=Filtro+Ar"
-                             alt="Filtro de Ar" class="w-full h-40 object-contain mb-3 product-image">
                     </div>
-                    <div class="text-sm text-gray-500 mb-1">Filtros</div>
-                    <h3 class="font-medium mb-2">Filtro de Ar Original Toyota Corolla 2.0</h3>
-                    <div class="text-xl font-bold mb-1">R$ 49,90</div>
-                    <div class="text-green-500 text-sm mb-2">Em até 2x sem juros</div>
-                    <div class="text-sm text-gray-500 mb-2">Frete: R$ 12,90</div>
-                    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
-                        Comprar agora
-                    </button>
                 </div>
-                <!-- Product 5 -->
-                <div class="product-card bg-white rounded p-4 relative transition duration-200">
-                    <span class="deal-badge">LANÇAMENTO</span>
-                    <div class="overflow-hidden">
-                        <img src="https://via.placeholder.com/200x200?text=Óleo+Motor"
-                             alt="Óleo de Motor" class="w-full h-40 object-contain mb-3 product-image">
                     </div>
-                    <div class="text-sm text-gray-500 mb-1">Óleos</div>
-                    <h3 class="font-medium mb-2">Óleo Mobil Super 3000 5W30 1L - Sintético</h3>
-                    <div class="text-xl font-bold mb-1">R$ 39,90</div>
-                    <div class="text-green-500 text-sm mb-2">Em até 2x sem juros</div>
-                    <div class="free-shipping text-sm mb-2">
-                        <i class="fas fa-truck"></i> Frete grátis
                     </div>
-                    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
-                        Comprar agora
-                    </button>
                 </div>
             </div>
-        </div>
-        <!-- Brands Section -->
-        <div class="mb-8">
-            <h2 class="text-xl font-bold mb-4">Marcas populares</h2>
-            <div class="grid grid-cols-3 md:grid-cols-6 gap-4">
-                <a href="#" class="bg-white p-4 rounded flex items-center justify-center hover:shadow-md transition">
-                    <img src="https://via.placeholder.com/100x50?text=Bosch" alt="Bosch" class="h-10 object-contain hover:scale-105 transition">
-                </a>
-                <a href="#" class="bg-white p-4 rounded flex items-center justify-center hover:shadow-md transition">
-                    <img src="https://via.placeholder.com/100x50?text=Moura" alt="Moura" class="h-10 object-contain hover:scale-105 transition">
-                </a>
-                <a href="#" class="bg-white p-4 rounded flex items-center justify-center hover:shadow-md transition">
-                    <img src="https://via.placeholder.com/100x50?text=VW" alt="Volkswagen" class="h-10 object-contain hover:scale-105 transition">
-                </a>
-                <a href="#" class="bg-white p-4 rounded flex items-center justify-center hover:shadow-md transition">
-                    <img src="https://via.placeholder.com/100x50?text=GM" alt="GM" class="h-10 object-contain hover:scale-105 transition">
-                </a>
-                <a href="#" class="bg-white p-4 rounded flex items-center justify-center hover:shadow-md transition">
-                    <img src="https://via.placeholder.com/100x50?text=Shell" alt="Shell" class="h-10 object-contain hover:scale-105 transition">
-                </a>
-                <a href="#" class="bg-white p-4 rounded flex items-center justify-center hover:shadow-md transition">
-                    <img src="https://via.placeholder.com/100x50?text=Goodyear" alt="Goodyear" class="h-10 object-contain hover:scale-105 transition">
                 </a>
             </div>
         </div>
-        <!-- More Products -->
-        <div class="mb-8">
-            <div class="flex justify-between items-center mb-4">
-                <h2 class="text-xl font-bold">Peças em destaque</h2>
-                <a href="#" class="text-blue-500 text-sm font-medium hover:text-blue-700 transition">Ver todas</a>
             </div>
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                <!-- Product 6 -->
-                <div class="product-card bg-white rounded p-4 relative transition duration-200">
-                    <div class="overflow-hidden">
-                        <img src="https://via.placeholder.com/200x200?text=Correia+Dentada"
-                             alt="Correia Dentada" class="w-full h-40 object-contain mb-3 product-image">
                     </div>
-                    <div class="text-sm text-gray-500 mb-1">Motor</div>
-                    <h3 class="font-medium mb-2">Kit Correia Dentada HB20 1.0 2012-2017</h3>
-                    <div class="text-xl font-bold mb-1">R$ 189,90</div>
-                    <div class="text-green-500 text-sm mb-2">6x R$ 31,65 sem juros</div>
-                    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
-                        Comprar agora
-                    </button>
-                </div>
-                <!-- Product 7 -->
-                <div class="product-card bg-white rounded p-4 relative transition duration-200">
-                    <div class="overflow-hidden">
-                        <img src="https://via.placeholder.com/200x200?text=Velas+Ignição"
-                             alt="Velas de Ignição" class="w-full h-40 object-contain mb-3 product-image">
                     </div>
-                    <div class="text-sm text-gray-500 mb-1">Motor</div>
-                    <h3 class="font-medium mb-2">Vela de Ignição NGK Laser Iridium LFR5AIX-11</h3>
-                    <div class="text-xl font-bold mb-1">R$ 59,90</div>
-                    <div class="text-green-500 text-sm mb-2">2x R$ 29,95 sem juros</div>
-                    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
-                        Comprar agora
-                    </button>
                 </div>
-                <!-- Product 8 -->
-                <div class="product-card bg-white rounded p-4 relative transition duration-200">
-                    <div class="overflow-hidden">
-                        <img src="https://via.placeholder.com/200x200?text=Disco+Freio"
-                             alt="Disco de Freio" class="w-full h-40 object-contain mb-3 product-image">
                     </div>
-                    <div class="text-sm text-gray-500 mb-1">Freios</div>
-                    <h3 class="font-medium mb-2">Disco de Freio Traseiro Onix 1.4 2012-2019</h3>
-                    <div class="text-xl font-bold mb-1">R$ 129,90</div>
-                    <div class="text-green-500 text-sm mb-2">4x R$ 32,48 sem juros</div>
-                    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
-                        Comprar agora
-                    </button>
                 </div>
-                <!-- Product 9 -->
-                <div class="product-card bg-white rounded p-4 relative transition duration-200">
-                    <div class="overflow-hidden">
-                        <img src="https://via.placeholder.com/200x200?text=Farol+Dianteiro"
-                             alt="Farol Dianteiro" class="w-full h-40 object-contain mb-3 product-image">
                     </div>
-                    <div class="text-sm text-gray-500 mb-1">Elétrica</div>
-                    <h3 class="font-medium mb-2">Farol Dianteiro Esquerdo Civic 2015-2020</h3>
-                    <div class="text-xl font-bold mb-1">R$ 459,90</div>
-                    <div class="text-green-500 text-sm mb-2">12x R$ 38,33 sem juros</div>
-                    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded text-sm transition">
-                        Comprar agora
-                    </button>
                 </div>
             </div>
         </div>
-    </main>
     <!-- Footer -->
-    <footer class="bg-gray-800 text-white py-8">
         <div class="container mx-auto px-4">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div>
-                    <h3 class="font-bold mb-4">Informações</h3>
-                    <ul class="space-y-2 text-sm">
-                        <li><a href="#" class="hover:underline transition">Sobre nós</a></li>
-                        <li><a href="#" class="hover:underline transition">Política de privacidade</a></li>
-                        <li><a href="#" class="hover:underline transition">Termos e condições</a></li>
-                        <li><a href="#" class="hover:underline transition">Trocas e devoluções</a></li>
-                    </ul>
                 </div>
                 <div>
-                    <h3 class="font-bold mb-4">Atendimento</h3>
-                    <ul class="space-y-2 text-sm">
-                        <li><a href="#" class="hover:underline transition">Central de ajuda</a></li>
-                        <li><a href="#" class="hover:underline transition">Perguntas frequentes</a></li>
-                        <li><a href="#" class="hover:underline transition">Fale conosco</a></li>
-                        <li><a href="#" class="hover:underline transition">Nossas lojas</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="font-bold mb-4">Formas de pagamento</h3>
-                    <div class="grid grid-cols-3 gap-2">
-                        <img src="https://via.placeholder.com/50x30?text=Visa" alt="Visa" class="h-8 hover:scale-110 transition">
-                        <img src="https://via.placeholder.com/50x30?text=Master" alt="Mastercard" class="h-8 hover:scale-110 transition">
-                        <img src="https://via.placeholder.com/50x30?text=Elo" alt="Elo" class="h-8 hover:scale-110 transition">
-                        <img src="https://via.placeholder.com/50x30?text=Boleto" alt="Boleto" class="h-8 hover:scale-110 transition">
-                        <img src="https://via.placeholder.com/50x30?text=Pix" alt="Pix" class="h-8 hover:scale-110 transition">
-                        <img src="https://via.placeholder.com/50x30?text=Hiper" alt="Hipercard" class="h-8 hover:scale-110 transition">
-                    </div>
                 </div>
                 <div>
-                    <h3 class="font-bold mb-4">Redes sociais</h3>
-                    <div class="flex space-x-4">
-                        <a href="#" class="text-2xl hover:text-blue-400 transition"><i class="fab fa-facebook"></i></a>
-                        <a href="#" class="text-2xl hover:text-pink-600 transition"><i class="fab fa-instagram"></i></a>
-                        <a href="#" class="text-2xl hover:text-red-600 transition"><i class="fab fa-youtube"></i></a>
-                        <a href="#" class="text-2xl hover:text-blue-400 transition"><i class="fab fa-twitter"></i></a>
-                    </div>
-                    <div class="mt-4">
-                        <h4 class="font-bold mb-2">Baixe nosso app</h4>
-                        <div class="flex space-x-2">
-                            <a href="#" class="hover:scale-105 transition">
-                                <img src="https://via.placeholder.com/120x40?text=App+Store" alt="App Store" class="h-10">
                             </a>
-                            <a href="#" class="hover:scale-105 transition">
-                                <img src="https://via.placeholder.com/120x40?text=Play+Store" alt="Play Store" class="h-10">
-                            </a>
-                        </div>
-                    </div>
                 </div>
             </div>
-            <div class="border-t border-gray-700 mt-8 pt-6 text-sm text-center">
-                <p>© 2023 AutoPeças - CNPJ 00.000.000/0000-00 - Todos os direitos reservados</p>
-                <p class="mt-2">Preços e condições de pagamento exclusivos para compras via internet. Ofertas válidas até o término de nossos estoques.</p>
             </div>
         </div>
     </footer>
-    <!-- Floating WhatsApp Button -->
-    <div class="fixed bottom-6 right-6 animate-bounce">
-        <a href="#" class="bg-green-500 hover:bg-green-600 text-white rounded-full p-4 shadow-lg flex items-center justify-center transition transform hover:scale-110">
-            <i class="fab fa-whatsapp text-2xl"></i>
-        </a>
-    </div>
 <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=R87/pecas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GreenLeaf Collective | Cannabis Wellness</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&display=swap');
+        body {
+            font-family: 'Raleway', sans-serif;
+            scroll-behavior: smooth;
         }
+        .hero-section {
+            height: 100vh;
+            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
+                        url('https://images.unsplash.com/photo-1598983062491-5934abe9fcf5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
+            background-size: cover;
+            background-position: center;
+            background-attachment: fixed;
+            animation: fadeIn 1.5s ease-in-out;
         }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
         }
+        .nav-scrolled {
+            background-color: rgba(22, 50, 34, 0.95);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
             transition: all 0.3s ease;
         }
         .product-card:hover .product-image {
             transform: scale(1.05);
+            transition: transform 0.3s ease;
         }
+        .product-card:hover .quick-view {
+            opacity: 1;
+            transform: translateY(0);
         }
+        .quick-view {
+            opacity: 0;
+            transform: translateY(10px);
+            transition: all 0.3s ease;
         }
+        .countdown-item {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(5px);
         }
+        .parallax-section {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
         }
+        .zoom-hover {
+            transition: transform 0.5s ease;
         }
+        .zoom-hover:hover {
+            transform: scale(1.03);
         }
+        .shine-effect {
             position: relative;
             overflow: hidden;
         }
+        .shine-effect::after {
             content: '';
             position: absolute;
             top: -50%;
             left: -60%;
             width: 20%;
             height: 200%;
+            background: rgba(255, 255, 255, 0.2);
             transform: rotate(30deg);
             transition: all 0.3s ease;
         }
+        .shine-effect:hover::after {
             left: 120%;
         }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        .thc-badge {
+            background: linear-gradient(135deg, #8e44ad, #9b59b6);
+        }
+        .cbd-badge {
+            background: linear-gradient(135deg, #27ae60, #2ecc71);
+        }
+        .organic-badge {
+            background: linear-gradient(135deg, #f39c12, #f1c40f);
+        }
+        .premium-badge {
+            background: linear-gradient(135deg, #3498db, #2980b9);
+        }
+        .age-gate {
+            background: rgba(22, 50, 34, 0.95);
+            backdrop-filter: blur(10px);
+        }
     </style>
 </head>
+<body class="bg-gray-50">
+    <!-- Age Verification Modal -->
+    <div class="fixed inset-0 flex items-center justify-center z-50 age-gate" id="ageVerification">
+        <div class="bg-white rounded-xl max-w-md w-full mx-4 p-8 text-center">
+            <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-emerald-100 rounded-full">
+                <i class="fas fa-cannabis text-3xl text-emerald-700"></i>
+            </div>
+            <h2 class="text-2xl font-bold mb-4">Verificação de Idade</h2>
+            <p class="text-gray-700 mb-6">Você deve ter 21 anos ou mais para acessar este site. Ao entrar, você concorda com nossos Termos de Serviço e Política de Privacidade.</p>
+            <div class="flex flex-col space-y-4">
+                <button id="verifyAge" class="bg-emerald-700 hover:bg-emerald-800 text-white px-6 py-3 rounded-full font-bold transition">
+                    Sim, sou maior de 21 anos
+                </button>
+                <button id="exitSite" class="bg-transparent border border-gray-300 hover:bg-gray-100 text-gray-700 px-6 py-3 rounded-full font-medium transition">
+                    Não, sou menor de idade
+                </button>
+            </div>
+            <p class="text-xs text-gray-500 mt-6">
+                Este site não incentiva o uso irresponsável de cannabis. A venda é restrita a maiores de 21 anos e segue as leis locais.
+            </p>
+        </div>
+    </div>
+    <!-- Navigation -->
+    <nav class="fixed w-full z-40 transition-all duration-300 bg-emerald-900" id="mainNav">
+        <div class="container mx-auto px-4 py-3">
+            <div class="flex justify-between items-center">
+                <a href="#" class="text-2xl font-bold text-white shine-effect">
+                    <span class="text-emerald-300">GREEN</span>LEAF
+                </a>
+                <div class="hidden md:flex space-x-8">
+                    <a href="#" class="text-white hover:text-emerald-300 transition font-medium">
+                        <i class="fas fa-leaf mr-1"></i> Flores
+                    </a>
+                    <a href="#" class="text-white hover:text-emerald-300 transition font-medium">
+                        <i class="fas fa-flask mr-1"></i> Concentrados
+                    </a>
+                    <a href="#" class="text-white hover:text-emerald-300 transition font-medium">
+                        <i class="fas fa-cookie-bite mr-1"></i> Edibles
+                    </a>
+                    <a href="#" class="text-white hover:text-emerald-300 transition font-medium">
+                        <i class="fas fa-smoking mr-1"></i> Acessórios
+                    </a>
+                    <a href="#" class="text-emerald-300 font-bold hover:text-emerald-200 transition">
+                        <i class="fas fa-tag mr-1"></i> Promoções
+                    </a>
                 </div>
                 <div class="flex items-center space-x-4">
+                    <button class="text-white hover:text-emerald-300 transition">
+                        <i class="fas fa-search text-lg"></i>
+                    </button>
+                    <button class="text-white hover:text-emerald-300 transition">
+                        <i class="fas fa-user text-lg"></i>
+                    </button>
+                    <button class="text-white hover:text-emerald-300 transition relative">
+                        <i class="fas fa-shopping-bag text-lg"></i>
+                        <span class="absolute -top-2 -right-2 bg-emerald-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
+                    </button>
+                    <button class="md:hidden text-white" id="mobileMenuButton">
+                        <i class="fas fa-bars text-xl"></i>
+                    </button>
                 </div>
             </div>
         </div>
     </nav>
+    <!-- Mobile Menu -->
+    <div class="fixed inset-0 bg-emerald-900 bg-opacity-95 z-30 hidden" id="mobileMenu">
+        <div class="container mx-auto px-4 py-20">
+            <div class="flex flex-col space-y-6 text-center">
+                <a href="#" class="text-white text-2xl hover:text-emerald-300 transition font-medium">
+                    <i class="fas fa-leaf mr-2"></i> Flores
                 </a>
+                <a href="#" class="text-white text-2xl hover:text-emerald-300 transition font-medium">
+                    <i class="fas fa-flask mr-2"></i> Concentrados
                 </a>
+                <a href="#" class="text-white text-2xl hover:text-emerald-300 transition font-medium">
+                    <i class="fas fa-cookie-bite mr-2"></i> Edibles
                 </a>
+                <a href="#" class="text-white text-2xl hover:text-emerald-300 transition font-medium">
+                    <i class="fas fa-smoking mr-2"></i> Acessórios
                 </a>
+                <a href="#" class="text-emerald-300 text-2xl font-bold hover:text-emerald-200 transition">
+                    <i class="fas fa-tag mr-2"></i> Promoções
                 </a>
             </div>
+            <button class="absolute top-4 right-4 text-white text-2xl" id="closeMobileMenu">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+    </div>
+    <!-- Hero Section -->
+    <section class="hero-section flex items-center justify-center relative">
+        <div class="container mx-auto px-4 text-center">
+            <div class="max-w-4xl mx-auto">
+                <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
+                    ELEVE SEU <span class="text-emerald-300">WELLNESS</span>
+                </h1>
+                <p class="text-xl text-white mb-8 opacity-90">
+                    Cannabis premium cultivada com sustentabilidade e ciência. Descubra nossa seleção de produtos certificados.
+                </p>
+                <div class="flex justify-center space-x-4">
+                    <a href="#" class="bg-emerald-600 hover:bg-emerald-700 text-white px-8 py-3 rounded-full font-bold transition transform hover:scale-105">
+                        EXPLORAR PRODUTOS
+                    </a>
+                    <a href="#" class="bg-transparent border-2 border-white hover:bg-white hover:text-emerald-900 text-white px-8 py-3 rounded-full font-bold transition transform hover:scale-105">
+                        CONSULTAR ESPECIALISTA
+                    </a>
+                </div>
+            </div>
         </div>
+        <div class="absolute bottom-10 left-0 right-0 text-center">
+            <a href="#featured" class="text-white animate-bounce inline-block">
+                <i class="fas fa-chevron-down text-2xl"></i>
+            </a>
+        </div>
+    </section>
+    <!-- Featured Products -->
+    <section class="py-16 bg-white" id="featured">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-4">NOSSOS DESTAQUES</h2>
+                <div class="w-20 h-1 bg-emerald-600 mx-auto"></div>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                 <!-- Product 1 -->
+                <div class="product-card bg-gray-50 rounded-lg overflow-hidden relative group">
+                    <div class="relative overflow-hidden h-80">
+                        <img src="https://images.unsplash.com/photo-1581539250439-c96689b516dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1065&q=80"
+                             alt="Sativa Haze" class="w-full h-full object-cover product-image transition duration-500">
+                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition duration-300"></div>
+                        <div class="quick-view absolute bottom-4 left-0 right-0 text-center">
+                            <button class="bg-white text-emerald-900 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition">
+                                Visualização Rápida
+                            </button>
+                        </div>
+                        <div class="absolute top-4 left-4 flex flex-col space-y-2">
+                            <span class="thc-badge text-white text-xs font-bold px-2 py-1 rounded">
+                                THC 22%
+                            </span>
+                            <span class="organic-badge text-white text-xs font-bold px-2 py-1 rounded">
+                                ORGÂNICO
+                            </span>
+                        </div>
                     </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Sativa Haze</h3>
+                        <p class="text-gray-600 text-sm mb-2">Efeito energizante e criativo</p>
+                        <div class="flex items-center">
+                            <span class="text-lg font-bold">R$ 89,90</span>
+                            <span class="text-sm text-gray-500 line-through ml-2">R$ 109,90</span>
+                        </div>
                     </div>
                 </div>
                 <!-- Product 2 -->
+                <div class="product-card bg-gray-50 rounded-lg overflow-hidden relative group">
+                    <div class="relative overflow-hidden h-80">
+                        <img src="https://images.unsplash.com/photo-1598983062491-5934abe9fcf5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="CBD Oil 1000mg" class="w-full h-full object-cover product-image transition duration-500">
+                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition duration-300"></div>
+                        <div class="quick-view absolute bottom-4 left-0 right-0 text-center">
+                            <button class="bg-white text-emerald-900 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition">
+                                Visualização Rápida
+                            </button>
+                        </div>
+                        <div class="absolute top-4 left-4 flex flex-col space-y-2">
+                            <span class="cbd-badge text-white text-xs font-bold px-2 py-1 rounded">
+                                CBD 1000mg
+                            </span>
+                            <span class="premium-badge text-white text-xs font-bold px-2 py-1 rounded">
+                                PREMIUM
+                            </span>
+                        </div>
                     </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Óleo Full Spectrum</h3>
+                        <p class="text-gray-600 text-sm mb-2">Alívio sem psicoatividade</p>
+                        <div class="flex items-center">
+                            <span class="text-lg font-bold">R$ 249,90</span>
+                        </div>
                     </div>
                 </div>
                 <!-- Product 3 -->
+                <div class="product-card bg-gray-50 rounded-lg overflow-hidden relative group">
+                    <div class="relative overflow-hidden h-80">
+                        <img src="https://images.unsplash.com/photo-1606313564200-1a0e12b43068?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80"
+                             alt="Gummies Relax" class="w-full h-full object-cover product-image transition duration-500">
+                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition duration-300"></div>
+                        <div class="quick-view absolute bottom-4 left-0 right-0 text-center">
+                            <button class="bg-white text-emerald-900 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition">
+                                Visualização Rápida
+                            </button>
+                        </div>
+                        <div class="absolute top-4 left-4 flex flex-col space-y-2">
+                            <span class="thc-badge text-white text-xs font-bold px-2 py-1 rounded">
+                                THC 10mg/un
+                            </span>
+                            <span class="organic-badge text-white text-xs font-bold px-2 py-1 rounded">
+                                VEGANO
+                            </span>
+                        </div>
                     </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Gummies Relax</h3>
+                        <p class="text-gray-600 text-sm mb-2">Pacote com 20 unidades</p>
+                        <div class="flex items-center">
+                            <span class="text-lg font-bold">R$ 129,90</span>
+                        </div>
                     </div>
                 </div>
                 <!-- Product 4 -->
+                <div class="product-card bg-gray-50 rounded-lg overflow-hidden relative group">
+                    <div class="relative overflow-hidden h-80">
+                        <img src="https://images.unsplash.com/photo-1606312619470-1a0f5342b4e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80"
+                             alt="Vaporizador Pax" class="w-full h-full object-cover product-image transition duration-500">
+                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition duration-300"></div>
+                        <div class="quick-view absolute bottom-4 left-0 right-0 text-center">
+                            <button class="bg-white text-emerald-900 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition">
+                                Visualização Rápida
+                            </button>
+                        </div>
+                        <div class="absolute top-4 left-4">
+                            <span class="premium-badge text-white text-xs font-bold px-2 py-1 rounded">
+                                TECNOLOGIA
+                            </span>
+                        </div>
                     </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Vaporizador Pax 3</h3>
+                        <p class="text-gray-600 text-sm mb-2">Discreto e portátil</p>
+                        <div class="flex items-center">
+                            <span class="text-lg font-bold">R$ 899,90</span>
+                            <span class="text-sm text-gray-500 line-through ml-2">R$ 1.099,90</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <a href="#" class="inline-block border-2 border-emerald-900 text-emerald-900 hover:bg-emerald-900 hover:text-white px-8 py-3 rounded-full font-bold transition">
+                    VER TODOS OS PRODUTOS
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Wellness Benefits -->
+    <section class="py-16 bg-emerald-50">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-4">BENEFÍCIOS DO CANNABIS</h2>
+                <p class="text-lg text-gray-700">Descubra como a cannabis pode contribuir para seu bem-estar</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Benefit 1 -->
+                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition text-center">
+                    <div class="w-16 h-16 mx-auto mb-4 bg-emerald-100 rounded-full flex items-center justify-center">
+                        <i class="fas fa-brain text-2xl text-emerald-700"></i>
+                    </div>
+                    <h3 class="font-bold text-xl mb-2">Saúde Mental</h3>
+                    <p class="text-gray-700">
+                        Estudos mostram que o CBD pode ajudar no gerenciamento de ansiedade, estresse e qualidade do sono.
+                    </p>
                 </div>
+                <!-- Benefit 2 -->
+                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition text-center">
+                    <div class="w-16 h-16 mx-auto mb-4 bg-emerald-100 rounded-full flex items-center justify-center">
+                        <i class="fas fa-bone text-2xl text-emerald-700"></i>
                     </div>
+                    <h3 class="font-bold text-xl mb-2">Alívio da Dor</h3>
+                    <p class="text-gray-700">
+                        Eficaz no tratamento de dores crônicas, inflamações e condições como artrite e fibromialgia.
+                    </p>
+                </div>
+                <!-- Benefit 3 -->
+                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition text-center">
+                    <div class="w-16 h-16 mx-auto mb-4 bg-emerald-100 rounded-full flex items-center justify-center">
+                        <i class="fas fa-heartbeat text-2xl text-emerald-700"></i>
                     </div>
+                    <h3 class="font-bold text-xl mb-2">Saúde Física</h3>
+                    <p class="text-gray-700">
+                        Pode auxiliar no controle de náuseas, estimular o apetite e ajudar em tratamentos como quimioterapia.
+                    </p>
                 </div>
             </div>
+            <div class="text-center mt-12">
+                <a href="#" class="inline-block bg-emerald-700 hover:bg-emerald-800 text-white px-8 py-3 rounded-full font-bold transition">
+                    APRENDA MAIS NO NOSSO BLOG
                 </a>
             </div>
         </div>
+    </section>
+    <!-- Sustainable Farming -->
+    <section class="py-16 parallax-section" style="background-image: url('https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80');">
+        <div class="container mx-auto px-4">
+            <div class="max-w-2xl mx-auto bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm rounded-xl p-8 shadow-lg">
+                <h2 class="text-3xl font-bold mb-6 text-center">CULTIVO SUSTENTÁVEL</h2>
+                <p class="text-gray-700 mb-4">
+                    Na GreenLeaf, priorizamos práticas agrícolas regenerativas que respeitam o meio ambiente. Nossas plantas são cultivadas sem pesticidas sintéticos, usando apenas nutrientes orgânicos e controle biológico de pragas.
+                </p>
+                <p class="text-gray-700 mb-6">
+                    Acreditamos que cannabis de qualidade começa com um solo saudável e práticas éticas de cultivo. Todos os nossos produtos passam por rigorosos testes de laboratório para garantir pureza e potência.
+                </p>
+                <div class="text-center">
+                    <a href="#" class="inline-block bg-emerald-700 hover:bg-emerald-800 text-white px-8 py-3 rounded-full font-bold transition">
+                        CONHEÇA NOSSO PROCESSO
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="py-16 bg-gray-100">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-4">DEPOIMENTOS VERIFICADOS</h2>
+                <div class="w-20 h-1 bg-emerald-600 mx-auto"></div>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Testimonial 1 -->
+                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
+                    <div class="flex items-center mb-4">
+                        <div class="text-yellow-400 text-xl">
+                            <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>
+                    <p class="text-gray-700 mb-4">
+                        "O óleo de CBD mudou minha vida. Depois de anos sofrendo com ansiedade, finalmente encontrei alívio sem efeitos colaterais."
+                    </p>
+                    <div class="flex items-center">
+                        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Ana Santos" class="w-10 h-10 rounded-full mr-3">
+                        <div>
+                            <h4 class="font-bold">Ana Santos</h4>
+                            <p class="text-gray-600 text-sm">Cliente desde 2022</p>
+                        </div>
                     </div>
                 </div>
+                <!-- Testimonial 2 -->
+                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
+                    <div class="flex items-center mb-4">
+                        <div class="text-yellow-400 text-xl">
+                            <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>
+                    <p class="text-gray-700 mb-4">
+                        "A qualidade das flores é incomparável. Frescor, aroma e efeito consistentes. Minha fonte confiável para cannabis medicinal."
+                    </p>
+                    <div class="flex items-center">
+                        <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Carlos Mendes" class="w-10 h-10 rounded-full mr-3">
+                        <div>
+                            <h4 class="font-bold">Carlos Mendes</h4>
+                            <p class="text-gray-600 text-sm">Paciente medicinal</p>
+                        </div>
                     </div>
                 </div>
+                <!-- Testimonial 3 -->
+                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
+                    <div class="flex items-center mb-4">
+                        <div class="text-yellow-400 text-xl">
+                            <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>
+                    <p class="text-gray-700 mb-4">
+                        "Atendimento excepcional e produtos de altíssima qualidade. Os gummies são perfeitos para dosagem precisa e discreta."
+                    </p>
+                    <div class="flex items-center">
+                        <img src="https://randomuser.me/api/portraits/women/75.jpg" alt="Juliana Oliveira" class="w-10 h-10 rounded-full mr-3">
+                        <div>
+                            <h4 class="font-bold">Juliana Oliveira</h4>
+                            <p class="text-gray-600 text-sm">Cliente premium</p>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
+    </section>
+    <!-- Newsletter -->
+    <section class="py-16 bg-emerald-900 text-white">
+        <div class="container mx-auto px-4">
+            <div class="max-w-3xl mx-auto text-center">
+                <h2 class="text-3xl font-bold mb-4">JUNTE-SE À NOSSA COMUNIDADE</h2>
+                <p class="text-emerald-200 mb-8">
+                    Cadastre-se para receber conteúdos exclusivos, ofertas especiais e as últimas novidades sobre cannabis medicinal e wellness.
+                </p>
+                <form class="flex flex-col md:flex-row gap-4 max-w-xl mx-auto">
+                    <input type="email" placeholder="Seu melhor e-mail"
+                           class="flex-1 px-4 py-3 rounded-full text-gray-900 focus:outline-none focus:ring-2 focus:ring-emerald-500">
+                    <button type="submit"
+                            class="bg-emerald-600 hover:bg-emerald-700 px-6 py-3 rounded-full font-bold transition transform hover:scale-105">
+                        ASSINAR
+                    </button>
+                </form>
+                <p class="text-emerald-300 text-sm mt-4">
+                    Respeitamos sua privacidade. Consulte nossa <a href="#" class="text-white hover:underline">Política de Privacidade</a>.
+                </p>
+            </div>
+        </div>
+    </section>
     <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
         <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                 <div>
+                    <h3 class="text-xl font-bold mb-4">GREENLEAF COLLECTIVE</h3>
+                    <p class="text-gray-400 mb-4">
+                        Tecnologia e natureza trabalhando juntas para seu bem-estar.
+                    </p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <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-twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition">
+                            <i class="fab fa-youtube"></i>
+                        </a>
+                    </div>
                 </div>
                 <div>
+                    <h4 class="font-bold mb-4">PRODUTOS</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Flores</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Concentrados</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Edibles</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Acessórios</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Kits Wellness</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h4 class="font-bold mb-4">INFORMAÇÕES</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Blog Educativo</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Guia de Dosagem</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Perguntas Frequentes</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Termos de Serviço</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a></li>
+                    </ul>
                 </div>
                 <div>
+                    <h4 class="font-bold mb-4">ATENDIMENTO</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li class="flex items-start">
+                            <i class="fas fa-map-marker-alt mt-1 mr-2"></i>
+                            <span>Av. das Flores, 420 - São Paulo/SP</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-phone-alt mr-2"></i>
+                            <span>(11) 4200-6969</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope mr-2"></i>
+                            <span>contato@greenleaf.com.br</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-clock mr-2"></i>
+                            <span>Seg-Sex: 9h-18h</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fab fa-trello mr-2"></i>
+                            <a href="https://trello.com/b/2aGtz8Ds/ecommerce2" target="_blank" class="text-gray-400 hover:text-white transition">
+                                Nosso Trello
                             </a>
+                        </li>
+                    </ul>
                 </div>
             </div>
+            <div class="border-t border-gray-800 pt-8">
+                <div class="flex flex-col md:flex-row justify-between items-center">
+                    <div class="mb-4 md:mb-0">
+                        <p class="text-gray-400 text-sm">
+                            © 2024 GreenLeaf Collective. Todos os direitos reservados.
+                        </p>
+                        <p class="text-gray-500 text-xs mt-1">
+                            A venda de cannabis é restrita a maiores de 21 anos. Consulte a legislação da sua região.
+                        </p>
+                    </div>
+                    <div class="flex space-x-6">
+                        <img src="https://via.placeholder.com/40x25?text=Visa" alt="Visa" class="h-6">
+                        <img src="https://via.placeholder.com/40x25?text=Master" alt="Mastercard" class="h-6">
+                        <img src="https://via.placeholder.com/40x25?text=BTC" alt="Bitcoin" class="h-6">
+                        <img src="https://via.placeholder.com/40x25?text=Pix" alt="Pix" class="h-6">
+                    </div>
+                </div>
             </div>
         </div>
     </footer>
+    <!-- Floating WhatsApp -->
+    <a href="#" class="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white rounded-full p-4 shadow-xl transition transform hover:scale-110 z-50">
+        <i class="fab fa-whatsapp text-2xl"></i>
+    </a>
+    <!-- Back to Top -->
+    <a href="#" id="backToTop" class="fixed bottom-24 right-6 bg-emerald-700 hover:bg-emerald-800 text-white rounded-full p-3 shadow-xl transition transform hover:scale-110 z-50 hidden">
+        <i class="fas fa-arrow-up"></i>
+    </a>
+    <script>
+        // Age Verification
+        const ageVerified = localStorage.getItem('ageVerified');
+        const ageVerification = document.getElementById('ageVerification');
+        const verifyAge = document.getElementById('verifyAge');
+        const exitSite = document.getElementById('exitSite');
+        if (!ageVerified) {
+            ageVerification.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        }
+        verifyAge.addEventListener('click', () => {
+            localStorage.setItem('ageVerified', 'true');
+            ageVerification.classList.add('hidden');
+            document.body.style.overflow = '';
+        });
+        exitSite.addEventListener('click', () => {
+            window.location.href = 'https://www.google.com';
+        });
+        // Mobile Menu Toggle
+        const mobileMenuButton = document.getElementById('mobileMenuButton');
+        const mobileMenu = document.getElementById('mobileMenu');
+        const closeMobileMenu = document.getElementById('closeMobileMenu');
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        });
+        closeMobileMenu.addEventListener('click', () => {
+            mobileMenu.classList.add('hidden');
+            document.body.style.overflow = '';
+        });
+        // Navbar Scroll Effect
+        window.addEventListener('scroll', () => {
+            const nav = document.getElementById('mainNav');
+            if (window.scrollY > 50) {
+                nav.classList.add('nav-scrolled');
+            } else {
+                nav.classList.remove('nav-scrolled');
+            }
+            // Back to Top Button
+            const backToTop = document.getElementById('backToTop');
+            if (window.scrollY > 300) {
+                backToTop.classList.remove('hidden');
+            } else {
+                backToTop.classList.add('hidden');
+            }
+        });
+        // Smooth Scrolling
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    if (!mobileMenu.classList.contains('hidden')) {
+                        mobileMenu.classList.add('hidden');
+                        document.body.style.overflow = '';
+                    }
+                }
+            });
+        });
+        // Product Image Zoom Effect
+        document.querySelectorAll('.product-image').forEach(image => {
+            image.addEventListener('mousemove', (e) => {
+                const { left, top, width, height } = image.getBoundingClientRect();
+                const x = (e.clientX - left) / width * 100;
+                const y = (e.clientY - top) / height * 100;
+                image.style.transformOrigin = `${x}% ${y}%`;
+            });
+        });
+    </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=R87/pecas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,2 +1,5 @@
 CRIA UM SITE DE PEÇAS DE CARRO ESTILO O MERCADOLIVRE
-ADD IMAGEM EFEITO FX E ZOOM DE VIDA AO SITE

 CRIA UM SITE DE PEÇAS DE CARRO ESTILO O MERCADOLIVRE
+ADD IMAGEM EFEITO FX E ZOOM DE VIDA AO SITE
+Estrutura e Layout: Página Inicial: Hero Section: Banner em fullscreen com animação suave, destaque para uma promoção ou lançamento (ex: "Coleção Outono 2024"). Menu de Navegação: Cabeçalho fixo com categorias (Homem, Mulher, Crianças, Esportes, Ofertas). Seção de Produtos em Destaque: Grade de produtos com cards interativos (hover com zoom e detalhes rápidos). Promoções: Seção de descontos com contador regressivo para ofertas relâmpago. Sobre a Marca: Texto curto com valores da empresa (ex: sustentabilidade, inovação). Páginas de Categoria (ex: Tênis, Roupas): Filtros laterais (tamanho, cor, preço, esporte). Visualização em grade ou lista. Ordenação por relevância, preço ou lançamentos. Página de Produto: Imagens em alta resolução com galeria (360° se possível). Descrição detalhada, especificações técnicas e tabela de tamanhos. Botões de "Adicionar ao Carrinho" e "Comprar Agora". Avaliações e comentários dos clientes. Carrinho e Checkout: Resumo do pedido com opção de editar quantidades. Cálculo automático de frete. Opções de pagamento (cartão, PayPal, PIX). Campo para cupons de desconto. Conta do Usuário: Login/Cadastro (incluindo opção por redes sociais). Painel com histórico de pedidos, favoritos e endereços salvos. Blog/Notícias: Artigos sobre esportes, lifestyle e lançamentos. Integração com redes sociais (Instagram, Twitter). Contato: Formulário de contato, FAQ e chat online. Localização de lojas físicas com mapa interativo. Design e Identidade Visual: Cores: Preto, branco e vermelho (paleta da Nike). Tipografia: Fonte sans-serif moderna (ex: Helvetica, Futura). Elementos Gráficos: Ícones minimalistas, overlays em camadas e efeitos de parallax. Responsividade: Otimizado para mobile e tablets. Funcionalidades Técnicas: CMS: Gerenciamento de conteúdo para atualização de produtos e blog. SEO: Meta tags, URLs amigáveis e otimização de imagens. Performance: Tempo de carregamento rápido (< 2 segundos). Segurança: Certificado SSL, proteção contra ataques e dados criptografados. Extras: Animações: Transições suaves entre páginas e microinterações (ex: botões vibrantes). Personalização: Opção de customizar produtos (ex: escolher cores de tênis). Notificações: Alertas de estoque baixo ou promoções por e-mail/SMS. Exemplo de Conteúdo:  Produtos Fictícios: "Nike Air Max 2024", "Jaqueta ThermaFit", "Meia de Performance". Blog: "Como escolher o tênis ideal para corrida" ou "Tendências de moda esportiva 2024". Observação: Evite usar logos, slogans ou imagens reais da Nike para não infringir direitos autorais. Mantenha a identidade visual inspirada, mas original.  Pronto! Este prompt pode ser usado como base para desenvolver o site em ferramentas como Figma (protótipo), WordPress (com WooCommerce) ou frameworks como React.js + Next.js.
+Prompt Adaptado para um Site de Vendas de Cannabis (Estilo Nike) Objetivo: Desenvolver um site moderno, profissional e seguro para venda de produtos de cannabis (como flores, óleos, acessórios ou produtos de wellness), inspirado no design minimalista e na experiência de usuário da Nike, mas adaptado às particularidades do setor.  Estrutura e Layout: Página Inicial: Hero Section: Vídeo ou imagens de alta qualidade mostrando produtos, lifestyle saudável ou agricultura sustentável. Chamada clara como "Descubra o poder da natureza" ou "Qualidade que você confia" . Menu de Navegação: Categorias: Flores , Concentrados , Edíveis , Acessórios , Promoções . Botão de Verificação de Idade (obrigatória para acesso). Seção de Produtos em Destaque: Cards com imagens profissionais, preços e selos como "Orgânico" ou "Premiado" . Seção Educativa: Links para guias sobre uso responsável, benefícios terapêuticos ou segurança. Páginas de Categoria: Filtros por tipo de produto, THC/CBD, marca, preço e uso (medicinal/recreativo). Descrições técnicas detalhadas (ex: teor de cannabinoides, origem da planta). Página de Produto: Galeria de imagens ou vídeos explicativos. Informações sobre cultivo, aroma, efeitos e dosagem recomendada. Botão "Adicionar ao Carrinho" e opção de "Consultar um Especialista" . Avaliações de clientes verificados. Carrinho e Checkout: Cálculo de impostos e frete com base na região. Opções de pagamento seguras (cartão, criptomoedas, transferência). Aviso legal sobre restrições de envio e idade mínima. Blog/Recursos: Artigos sobre cannabis e saúde, receitas com edíveis, notícias do setor. Vídeos educativos com profissionais da saúde ou cultivadores. Segurança e Compliance: Verificação de idade na entrada do site. Pop-up de consentimento para termos de uso e privacidade. Sistema de autenticação de dois fatores para pedidos. Design e Identidade Visual (Estilo Nike): Cores: Tons terrosos (verde-esmeralda, bege, dourado) combinados com preto e branco. Tipografia: Fontes modernas e limpas (ex: Montserrat ou Raleway ). Elementos Gráficos: Ícones minimalistas para categorias (ex: folha de cannabis estilizada). Animações suaves para transições e interações. Funcionalidades Técnicas: Idioma e Localização: Suporte a múltiplos idiomas e moedas. SEO: Otimização para termos como "comprar cannabis orgânica" ou "produtos CBD" . Segurança: Certificado SSL e criptografia de dados. Sistema antifraude para transações. Integrações: Parceria com laboratórios para certificação de qualidade. API de rastreamento de pedidos. Diferenciais (Adaptados ao Nicho): Programa de Fidelidade: Pontos por compras, resgatáveis em descontos ou produtos exclusivos. Assinaturas Mensais: Kits personalizados de wellness com cannabis. Área de Parceiros: Para médicos, cultivadores ou revendedores autorizados. Aviso Legal Obrigatório: Incluir cláusulas como: "Este site não incentiva o uso irresponsável de cannabis. A venda é restrita a maiores de 21 anos e segue as leis locais." Link para políticas de privacidade e termos de uso detalhados. Dica Final: Se a legislação da sua região ainda não permite a venda online, adapte o site para ser um hub educativo ou blog de lifestyle , gerando engajamento até que a regulamentação avance. Mantenha a marca alinhada a valores como saúde, sustentabilidade e transparência, seguindo o exemplo de empresas como a Curaleaf ou Canopy Growth .   Copiar  Pergunte  Explique
+CRIAR https://trello.com/b/2aGtz8Ds/ecommerce2