| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Good to Go Brownie - Os melhores brownies da cidade!</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=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f9f5f0; |
| } |
| |
| .hero { |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1606313564200-e75d5e30476c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .brownie-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .flavor-tag { |
| transition: all 0.3s ease; |
| } |
| |
| .flavor-tag:hover { |
| background-color: #6b46c1; |
| color: white; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="bg-amber-900 text-white sticky top-0 z-50 shadow-lg"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-cookie-bite text-2xl text-amber-300"></i> |
| <h1 class="text-2xl font-bold">Good to Go Brownie</h1> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#home" class="hover:text-amber-200 transition">Início</a> |
| <a href="#menu" class="hover:text-amber-200 transition">Cardápio</a> |
| <a href="#about" class="hover:text-amber-200 transition">Sobre</a> |
| <a href="#contact" class="hover:text-amber-200 transition">Contato</a> |
| </nav> |
| |
| <div class="flex items-center space-x-4"> |
| <button class="md:hidden text-2xl" id="mobile-menu-button"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <button class="bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-full font-medium transition hidden md:block"> |
| <i class="fas fa-shopping-cart mr-2"></i>Pedir agora |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="md:hidden hidden bg-amber-800 w-full px-4 py-3" id="mobile-menu"> |
| <div class="flex flex-col space-y-3"> |
| <a href="#home" class="hover:text-amber-200 transition">Início</a> |
| <a href="#menu" class="hover:text-amber-200 transition">Cardápio</a> |
| <a href="#about" class="hover:text-amber-200 transition">Sobre</a> |
| <a href="#contact" class="hover:text-amber-200 transition">Contato</a> |
| <button class="bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-full font-medium transition w-full"> |
| <i class="fas fa-shopping-cart mr-2"></i>Pedir agora |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="home" class="hero text-white py-20 md:py-32 flex items-center"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Os brownies mais <span class="text-amber-300">incríveis</span> que você já provou!</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Feitos com ingredientes premium e muito amor. Perfeitos para qualquer ocasião!</p> |
| <div class="flex flex-col md:flex-row justify-center gap-4"> |
| <button class="bg-amber-600 hover:bg-amber-700 px-8 py-4 rounded-full font-bold text-lg transition"> |
| Ver Cardápio |
| </button> |
| <button class="bg-white hover:bg-gray-100 text-amber-900 px-8 py-4 rounded-full font-bold text-lg transition"> |
| <i class="fas fa-phone-alt mr-2"></i>Fazer Pedido |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-amber-50 py-16"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="text-center p-6"> |
| <div class="bg-amber-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-award text-3xl text-amber-700"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Qualidade Premium</h3> |
| <p class="text-gray-700">Ingredientes selecionados e receitas exclusivas para garantir o melhor sabor.</p> |
| </div> |
| <div class="text-center p-6"> |
| <div class="bg-amber-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-birthday-cake text-3xl text-amber-700"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Feito com Amor</h3> |
| <p class="text-gray-700">Cada brownie é preparado artesanalmente com muita dedicação e carinho.</p> |
| </div> |
| <div class="text-center p-6"> |
| <div class="bg-amber-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-truck text-3xl text-amber-700"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Entrega Rápida</h3> |
| <p class="text-gray-700">Receba seus brownies fresquinhos no conforto da sua casa.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="menu" class="py-16 bg-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 text-amber-900">Nosso Cardápio Delicioso</h2> |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Escolha entre nossas variedades incríveis de brownies artesanais</p> |
| </div> |
| |
| |
| <div class="flex flex-wrap justify-center gap-3 mb-12"> |
| <button class="flavor-tag bg-amber-100 text-amber-800 px-4 py-2 rounded-full font-medium">Todos</button> |
| <button class="flavor-tag bg-amber-100 text-amber-800 px-4 py-2 rounded-full font-medium">Tradicionais</button> |
| <button class="flavor-tag bg-amber-100 text-amber-800 px-4 py-2 rounded-full font-medium">Especiais</button> |
| <button class="flavor-tag bg-amber-100 text-amber-800 px-4 py-2 rounded-full font-medium">Sem Glúten</button> |
| <button class="flavor-tag bg-amber-100 text-amber-800 px-4 py-2 rounded-full font-medium">Veganos</button> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="brownie-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1570145820251-bc0cb38fdbd0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Brownie Tradicional" class="w-full h-64 object-cover"> |
| <div class="absolute top-4 right-4 bg-amber-600 text-white px-3 py-1 rounded-full text-sm font-bold">Mais Vendido</div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-bold text-gray-800">Brownie Tradicional</h3> |
| <span class="text-amber-700 font-bold">R$ 12,90</span> |
| </div> |
| <p class="text-gray-600 mb-4">O clássico brownie com textura perfeita: crocante por fora e macio por dentro.</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-1 text-amber-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm font-medium transition"> |
| Adicionar |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="brownie-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1606313564200-e75d5e30476c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Brownie de Nutella" class="w-full h-64 object-cover"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-bold text-gray-800">Brownie de Nutella</h3> |
| <span class="text-amber-700 font-bold">R$ 15,90</span> |
| </div> |
| <p class="text-gray-600 mb-4">Delicioso brownie com recheio cremoso de Nutella e pedaços de avelã.</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-1 text-amber-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm font-medium transition"> |
| Adicionar |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="brownie-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1607920063981-935b4a5d1a0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Brownie Vegano" class="w-full h-64 object-cover"> |
| <div class="absolute top-4 right-4 bg-green-600 text-white px-3 py-1 rounded-full text-sm font-bold">Vegano</div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-bold text-gray-800">Brownie Vegano</h3> |
| <span class="text-amber-700 font-bold">R$ 14,50</span> |
| </div> |
| <p class="text-gray-600 mb-4">Feito sem ingredientes de origem animal, mas com todo o sabor e textura do tradicional.</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-1 text-amber-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="far fa-star"></i> |
| </div> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm font-medium transition"> |
| Adicionar |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="brownie-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1562440499-64c9a111f713?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Brownie de Café" class="w-full h-64 object-cover"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-bold text-gray-800">Brownie de Café</h3> |
| <span class="text-amber-700 font-bold">R$ 13,90</span> |
| </div> |
| <p class="text-gray-600 mb-4">A combinação perfeita de chocolate e café para os amantes de sabores intensos.</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-1 text-amber-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm font-medium transition"> |
| Adicionar |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="brownie-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1591703291607-6115d830a72a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Brownie de Red Velvet" class="w-full h-64 object-cover"> |
| <div class="absolute top-4 right-4 bg-amber-600 text-white px-3 py-1 rounded-full text-sm font-bold">Novidade</div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-bold text-gray-800">Brownie Red Velvet</h3> |
| <span class="text-amber-700 font-bold">R$ 16,90</span> |
| </div> |
| <p class="text-gray-600 mb-4">A sofisticação do red velvet em formato de brownie, com cobertura de cream cheese.</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-1 text-amber-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm font-medium transition"> |
| Adicionar |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="brownie-card bg-white rounded-xl overflow-hidden shadow-lg transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1527&q=80" alt="Brownie de Doce de Leite" class="w-full h-64 object-cover"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-xl font-bold text-gray-800">Brownie de Doce de Leite</h3> |
| <span class="text-amber-700 font-bold">R$ 14,90</span> |
| </div> |
| <p class="text-gray-600 mb-4">Camadas de brownie de chocolate intercaladas com doce de leite cremoso.</p> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-1 text-amber-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="far fa-star"></i> |
| </div> |
| <button class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full text-sm font-medium transition"> |
| Adicionar |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <button class="border-2 border-amber-600 text-amber-600 hover:bg-amber-600 hover:text-white px-8 py-3 rounded-full font-bold transition"> |
| Ver Cardápio Completo |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 bg-amber-50"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center gap-12"> |
| <div class="md:w-1/2"> |
| <img src="https://images.unsplash.com/photo-1602351447937-745cb720612f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1586&q=80" alt="Sobre a Good to Go Brownie" class="rounded-xl shadow-lg w-full"> |
| </div> |
| <div class="md:w-1/2"> |
| <h2 class="text-3xl font-bold mb-6 text-amber-900">Nossa História</h2> |
| <p class="text-gray-700 mb-4">A Good to Go Brownie nasceu do amor por brownies perfeitos. Tudo começou em 2015, quando nossa fundadora decidiu compartilhar sua receita secreta de família com amigos e familiares.</p> |
| <p class="text-gray-700 mb-6">Hoje, somos uma equipe apaixonada por criar os brownies mais deliciosos que você já experimentou. Cada pedaço é feito com ingredientes de alta qualidade e muito carinho, garantindo uma experiência única a cada mordida.</p> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="bg-amber-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-heart text-amber-700"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg text-gray-800">Missão</h4> |
| <p class="text-gray-600">Levar felicidade através de brownies incríveis, feitos com ingredientes premium e muito amor.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-amber-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-eye text-amber-700"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg text-gray-800">Visão</h4> |
| <p class="text-gray-600">Ser reconhecida como a melhor brownieria da região, expandindo nosso amor por brownies para todo o país.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-amber-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-star text-amber-700"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg text-gray-800">Valores</h4> |
| <p class="text-gray-600">Qualidade, paixão, inovação e respeito aos clientes e ao meio ambiente.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-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 text-amber-900">O que nossos clientes dizem</h2> |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">A felicidade de nossos clientes é nossa maior recompensa</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-amber-50 p-6 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="flex space-x-1 text-amber-400 mr-3"> |
| <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> |
| <span class="text-gray-500 text-sm">2 dias atrás</span> |
| </div> |
| <p class="text-gray-700 mb-4">"Os brownies são incríveis! Comprei vários sabores e todos estavam perfeitos. O de Nutella é meu favorito, mas o tradicional também é maravilhoso."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Cliente" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <h4 class="font-medium">Ana Carolina</h4> |
| <p class="text-gray-500 text-sm">Cliente desde 2020</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-amber-50 p-6 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="flex space-x-1 text-amber-400 mr-3"> |
| <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> |
| <span class="text-gray-500 text-sm">1 semana atrás</span> |
| </div> |
| <p class="text-gray-700 mb-4">"Comprei os brownies veganos para uma festa e todos adoraram, mesmo quem não é vegano! Textura perfeita e sabor incrível. Recomendo muito!"</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <h4 class="font-medium">Ricardo Almeida</h4> |
| <p class="text-gray-500 text-sm">Cliente desde 2021</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-amber-50 p-6 rounded-xl"> |
| <div class="flex items-center mb-4"> |
| <div class="flex space-x-1 text-amber-400 mr-3"> |
| <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> |
| <span class="text-gray-500 text-sm">3 dias atrás</span> |
| </div> |
| <p class="text-gray-700 mb-4">"Sou cliente há anos e nunca me decepcionei! Sempre que preciso presentear alguém, levo uma caixa de brownies. Todo mundo fica encantado com o sabor e a apresentação."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Cliente" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <h4 class="font-medium">Juliana Santos</h4> |
| <p class="text-gray-500 text-sm">Cliente desde 2018</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-amber-900 text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para experimentar nossos brownies?</h2> |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Faça seu pedido agora e receba em casa ou retire em nossa loja!</p> |
| <div class="flex flex-col md:flex-row justify-center gap-4"> |
| <button class="bg-white hover:bg-gray-100 text-amber-900 px-8 py-4 rounded-full font-bold text-lg transition"> |
| <i class="fas fa-phone-alt mr-2"></i>(11) 9999-9999 |
| </button> |
| <button class="border-2 border-white hover:bg-white hover:text-amber-900 px-8 py-4 rounded-full font-bold text-lg transition"> |
| <i class="fas fa-map-marker-alt mr-2"></i>Ver Localização |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row gap-12"> |
| <div class="md:w-1/2"> |
| <h2 class="text-3xl font-bold mb-6 text-amber-900">Entre em Contato</h2> |
| <p class="text-gray-700 mb-8">Tem dúvidas, sugestões ou quer fazer um pedido especial? Mande uma mensagem que responderemos o mais rápido possível!</p> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="bg-amber-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-map-marker-alt text-amber-700"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg text-gray-800">Endereço</h4> |
| <p class="text-gray-600">Rua dos Brownies, 123 - Centro, São Paulo - SP</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-amber-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-phone-alt text-amber-700"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg text-gray-800">Telefone</h4> |
| <p class="text-gray-600">(11) 9999-9999</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-amber-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-envelope text-amber-700"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg text-gray-800">Email</h4> |
| <p class="text-gray-600">contato@goodtogobrownie.com.br</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-amber-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-clock text-amber-700"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg text-gray-800">Horário de Funcionamento</h4> |
| <p class="text-gray-600">Segunda a Sábado: 9h às 19h<br>Domingo: 10h às 16h</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="font-bold text-lg text-gray-800 mb-4">Nos siga nas redes sociais</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-amber-100 hover:bg-amber-200 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-facebook-f text-amber-700"></i> |
| </a> |
| <a href="#" class="bg-amber-100 hover:bg-amber-200 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-instagram text-amber-700"></i> |
| </a> |
| <a href="#" class="bg-amber-100 hover:bg-amber-200 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| <i class="fab fa-whatsapp text-amber-700"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <form class="bg-amber-50 p-8 rounded-xl"> |
| <div class="mb-6"> |
| <label for="name" class="block text-gray-700 font-medium mb-2">Seu Nome</label> |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="email" class="block text-gray-700 font-medium mb-2">Seu Email</label> |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Seu Telefone</label> |
| <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="message" class="block text-gray-700 font-medium mb-2">Sua Mensagem</label> |
| <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea> |
| </div> |
| <button type="submit" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-bold w-full transition"> |
| Enviar Mensagem |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-amber-950 text-white 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 space-x-2 mb-4"> |
| <i class="fas fa-cookie-bite text-2xl text-amber-300"></i> |
| <h3 class="text-2xl font-bold">Good to Go Brownie</h3> |
| </div> |
| <p class="text-amber-200">Os brownies mais deliciosos da cidade, feitos com ingredientes premium e muito amor.</p> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Links Rápidos</h4> |
| <ul class="space-y-2"> |
| <li><a href="#home" class="text-amber-200 hover:text-white transition">Início</a></li> |
| <li><a href="#menu" class="text-amber-200 hover:text-white transition">Cardápio</a></li> |
| <li><a href="#about" class="text-amber-200 hover:text-white transition">Sobre Nós</a></li> |
| <li><a href="#contact" class="text-amber-200 hover:text-white transition">Contato</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Informações</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt text-amber-300 mt-1 mr-2"></i> |
| <span class="text-amber-200">Rua dos Brownies, 123 - Centro, SP</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-phone-alt text-amber-300 mt-1 mr-2"></i> |
| <span class="text-amber-200">(11) 9999-9999</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-envelope text-amber-300 mt-1 mr-2"></i> |
| <span class="text-amber-200">contato@goodtogobrownie.com.br</span> |
| </li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-bold mb-4">Newsletter</h4> |
| <p class="text-amber-200 mb-4">Assine nossa newsletter e receba promoções exclusivas!</p> |
| <form class="flex"> |
| <input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l-lg w-full text-gray-800 focus:outline-none"> |
| <button type="submit" class="bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-r-lg transition"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| </div> |
| </div> |
| <div class="border-t border-amber-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-amber-300 mb-4 md:mb-0">© 2023 Good to Go Brownie. Todos os direitos reservados.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-amber-300 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-amber-300 hover:text-white transition"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-amber-300 hover:text-white transition"><i class="fab fa-whatsapp"></i></a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| |
| |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.brownie-card button').forEach(button => { |
| button.addEventListener('click', function() { |
| const card = this.closest('.brownie-card'); |
| card.classList.add('animate-pulse'); |
| |
| setTimeout(() => { |
| card.classList.remove('animate-pulse'); |
| }, 500); |
| |
| |
| alert('Brownie adicionado ao carrinho!'); |
| }); |
| }); |
| </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=mateusbmo/goodtogo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
