Vídeo:
https://youtu.be/5JKLsYUqK4c
Mostro como pegar referencia, criar prompt e adptar com IA, executar no google ai studio com Argon e depois deploy na hostinger de forma simplifcada.
Prompt copia/cola
**Contexto para a IA:** Atue como um Desenvolvedor Front-End Sênior e Especialista em UI/UX.
**Objetivo:** Desenvolver uma Single Page Application (SPA) para um cardápio digital interativo em um único arquivo `index.html`. O projeto utilizará apenas HTML, CSS e JavaScript Vanilla. Não haverá painel administrativo ou banco de dados externo; todos os pratos devem ser renderizados dinamicamente a partir de um array de objetos mockado no próprio JavaScript, facilitando a edição manual ou via IA futuramente.
**Design e Estrutura Visual:**
Replique a estética de uma landing page premium (inspirada no estilo "Savoria Kitchen"), utilizando uma paleta de cores quentes (beges, marrons e tons terrosos). O layout deve ser moderno, limpo e 100% responsivo.
1. **Header:** Nome da marca (ex: "Lanches & Cia") com tipografia elegante, links de navegação simulados e um ícone de carrinho.
2. **Hero Section:** Banner principal com a headline "Momentos Deliciosos para Todos os Gostos", texto de apoio persuasivo, botões de ação ("Pedir Agora", "Ver Menu") e uma imagem de destaque de alta qualidade (utilize uma URL pública de um banco de imagens gratuito).
3. **Navegação por Categorias:** Uma seção "Navegue por Categoria" contendo botões circulares (com ícones ou emojis) representando: Pizza, Hambúrgueres, Massas, Sobremesas, Bebidas e Entradas.
4. **Grid de Produtos ("Pratos Populares"):** Cards elegantes para cada item. O card deve exibir a imagem do produto, nome, preço formatado, avaliação (ex: ⭐ 4.8) e, se aplicável, uma tag sobreposta na imagem ("Best Seller" ou "Hot").
**Estrutura de Dados Mockados (JavaScript):**
Crie um array de objetos chamado `menuItems` contendo pelo menos 15 itens realistas e atrativos, bem distribuídos entre as categorias citadas. Cada objeto deve seguir esta estrutura: `id`, `nome`, `categoria`, `preco`, `avaliacao`, `tag` (opcional), e `imagem` (use URLs de imagens de comida do Unsplash ou similar).
**Funcionalidades Exigidas:**
1. **Filtro Dinâmico:** Ao clicar nos botões de categoria, o JavaScript deve filtrar o array `menuItems` e atualizar o grid de produtos instantaneamente para exibir apenas os itens da categoria correspondente, sem recarregar a página. O botão ativo deve ganhar destaque visual.
2. **Modal de Checkout via WhatsApp:**
* Ao clicar em qualquer card de produto, um modal (overlay) deve ser aberto no centro da tela.
* O modal deve exibir a foto, o nome e o preço unitário do prato selecionado.
* Deve conter um formulário para o cliente preencher: Nome Completo, Endereço de Entrega completo e Quantidade (com botões de + e -).
* O valor total deve ser atualizado dinamicamente na tela conforme a quantidade é alterada.
* Botão "Enviar Pedido": Ao clicar, o JavaScript valida os campos e redireciona o usuário para a API do WhatsApp (`[https://wa.me/5511999999999?text=](https://wa.me/5511999999999?text=)...`). A mensagem deve ser enviada formatada, contendo a saudação, o nome do cliente, o pedido detalhado (nome do prato e quantidade), o valor total e o endereço de entrega.
**Restrição de Saída:**
Gere o código completo, sem cortes ou abreviações (nada de `// resto do código aqui`), estruturado em um único bloco. O CSS deve estar na tag `<style>` e o JavaScript na tag `<script>`. O arquivo deve estar perfeitamente pronto para ser salvo como `index.html` e executado em qualquer navegador.Veja abaixo a referência usada:
Veja o resultado – print
Meus Produtos:
*✅ Fast-WebX – Transforme seu blog em uma máquina de SEO e Velocidade – cuom 10% off FWX10OFF: * https://urlaki.com/fast-webx
✅ PostTTS-Pro – Crie áudios humanizados e aumente a retenção do blog: https://urlaki.com/posttts-pro
✅ Receitas-Pro WPX – Crie Receitas Culinárias Profissionais no Piloto Automático – cupom – YT10OFF9 : https://urlaki.com/receitas-pro
*✅ GeraAiPro – Conteúdo automatizado (de verdade ) com IA de ponta para seu blog – cuom 10% off GAP10YT: * https://urlaki.com/plugin-gaipro
✅ ImobPro – Transforme seu wordpress em um marketplace imobiliário: https://urlaki.com/imobwpx
✅ WhatsFloat – Crie um botão para whastsapp AVANÇADO e 10% GRÁTIS: https://urlaki.com/whatsfloat
✅ Links Que Falei no Vídeo https://mesaquemota.com.br/bio/
