Mostro neste video-guia (tutorial) como criar um site usando o que há de melhor na tecnologia de Inteligência Artificial do Gemini. Mostro todo processo desde a conscepção até o deploy na Hostinger – melhor custo/benefício – via MCP auto!
Código PROMPT mestre MELHORADO!
Atue como um Desenvolvedor Front-end Sênior e Especialista em UI/UX. Sua missão é criar uma Landing Page / Single Page Application (SPA) de e-commerce altamente interativa, com design premium e foco total em Mobile-First, e em seguida, fazer o deploy utilizando a ferramenta Hostinger MCP. A stack deve ser estritamente HTML5, CSS3 e Vanilla JavaScript (sem frameworks).
### FASE 1: COLETA DE REQUISITOS (PARE AQUI PRIMEIRO)
Antes de escrever qualquer linha de código ou iniciar o deploy, você DEVE me fazer as seguintes perguntas e aguardar minhas respostas:
1. "Por favor, anexe a imagem de referência do design que vamos seguir."
2. "Qual será o nome do site/marca?"
3. "Qual é o nicho da loja (ex: Viagem, Moda, Eletrônicos)?"
4. "Quantos produtos teremos por categoria?"
5. "Os produtos serão mockados (gerados por você) ou fornecerei um arquivo CSV?"
Aguarde minhas respostas. Somente APÓS eu responder e enviar a imagem, prossiga rigorosamente com as diretrizes da FASE 2 em diante. O código final deve ser completo, sem omissões ou placeholders (ex: "// adicione o resto aqui").
### FASE 2: DADOS MOCKADOS E IMAGENS
Se eu escolher produtos mockados, crie um array de objetos complexo no JS.
- Crie 3 categorias baseadas no meu nicho.
- Cada produto deve ter: id, nome, descricao curta, preço, 4 diferenciais (ícones e textos), link de vídeo do YouTube (para o modal) e um array com exatas 3 URLs de imagens.
- **CRÍTICO PARA IMAGENS:** Utilize apenas imagens em formato **Widescreen (16:9 / Paisagem)** em alta resolução para que não sofram zoom excessivo e desfigurem o produto na tela cheia. As 3 imagens de cada produto devem ter coerência visual (serem do mesmo objeto, não aleatórias).
### FASE 3: ARQUITETURA DE UI/UX (DESIGN CLEAN E MODO CLARO)
O design deve ser **estritamente MODO CLARO (Light Mode)**. Deve ser "clean" e profissional, sem aspecto genérico de IA.
**Header (Fixo, Transparente e Responsivo):**
- Logo à esquerda, menu de Categorias à direita (exibidas dinamicamente do JS).
- **Mobile:** O menu mobile (hamburger) deve ser perfeito, sem vazar (overflow-x: hidden), ocupando a tela corretamente.
**Primeira Dobra (Hero Section - 100vh):**
- **Background Fullscreen:** A imagem do produto atual ocupará 100vh e 100vw (`object-fit: cover; background-position: center;`). A imagem do produto é o principal e DEVE ser vista com clareza.
- **Bloco de Informações (Esquerda):** Título, descrição, diferenciais e botões ("Comprar" e "Assistir Vídeo").
- **Estilo do Bloco (Desktop):** Utilize um efeito *Glassmorphism* EXTREMAMENTE LEVE (apenas um leve desfoque tipo `backdrop-filter: blur(8px)` com fundo sutilmente esbranquiçado e transparente, SEM BORDAS e SEM CARD OPACO). Este fundo serve apenas para dar nitidez ao texto escuro sobre imagens claras.
- **Estilo do Bloco (Mobile):** REMOVA COMPLETAMENTE o efeito glassmorphism e qualquer fundo do texto no mobile. O texto deve flutuar diretamente para não tampar a imagem do produto em telas pequenas. Ajuste text-shadow se necessário para leitura.
- **Animações (UX Profissional):** A aparição do glassmorphism, dos textos e a troca da imagem de fundo devem ter transições muito suaves (`transition: all 0.5s ease-in-out`). Nada deve aparecer de forma abrupta na tela.
- **Navegação (Slide):** Para trocar de produto, utilize APENAS setas (ícones ← e →) com design elegante. NÃO use a palavra "Próximo". A página fica travada na Hero, atualizando fundo, textos e miniaturas suavemente ao clicar nas setas.
- **Mini-galeria (Canto Inferior Esquerdo):** 3 miniaturas do produto atual. Clicar nelas troca a imagem de fundo principal suavemente, mantendo os dados do produto.
**Segunda Dobra (Carrossel da Categoria):**
- Abaixo da primeira dobra (com ícone visual sutil indicando rolagem).
- Carrossel horizontal com os cards de todos os produtos da categoria selecionada. Ao clicar num card, a tela rola suavemente para o topo e carrega esse produto na Hero.
### FASE 4: INTERAÇÕES E MODAIS
- **Modal de Vídeo:** Botão "Assistir Vídeo" abre pop-up com iframe do YouTube.
- **Modal de Compra (Checkout Whatsapp):** Botão "Comprar" abre modal (bottom-sheet no mobile) com: miniatura, nome, preço, quantidade (+/-), aviso de pagamento na entrega e botão "Enviar Pedido". O clique redireciona para a API do WhatsApp formatando o pedido.
### FASE 5: DEPLOY HOSTINGER MCP
Após gerar o código front-end perfeitamente estilizado, conecte-se à ferramenta Hostinger MCP.
- Execute a ação para criar e publicar esses arquivos diretamente na minha hospedagem (Index.html, style.css e script.js).
- Retorne o link final do deploy.Abaixo a Referência Original – copie e cole ao enviar o prompt!
Resultado final – IMPRESSIONANTE
