Uma plataforma web premium e de alta conversão para o serviço de marmitas saudáveis, fitness e gourmet em Fortaleza-CE. Desenvolvido com foco em estética minimalista sofisticada, carregamento ultra-rápido, copywriting de alto impacto e segurança estrita de dados.
A vitrine virtual com paleta de cores verde floresta profunda (oklch), tipografia elegante e animação orgânica de folhas flutuantes.
Nosso robô conversacional guiando o cliente na montagem sequencial em 4 etapas rápidas e gerando o pedido pré-formatado para o WhatsApp da Irene.
A área administrativa segura onde a Irene gerencia seu cardápio ativo e desfruta do compressor off-screen de imagens em tempo real.
Fotos reais de alta fidelidade e nitidez mantida, otimizadas do lado do cliente (compactadas de 5MB para ~50KB) para garantir carregamento instantâneo.
Um widget flutuante premium no canto inferior direito que engaja os clientes em tempo real:
- Montador de Kits Automatizado (Wizard 4 Passos):
- Planos: Iniciante (1 marmita), Semanal (7 marmitas), Quinzena (15 marmitas) ou Mensal (30 marmitas).
- Linha: Fitness, Gourmet, Sopas & Caldos, Sobremesas Fit ou Detox.
- Porções: 250g, 350g, 400g ou 550g.
- Restrições: Sem Glúten, Sem Lactose, Vegano, Low Carb ou Nenhuma.
- Envio Direto ao WhatsApp: Compila as escolhas do usuário em uma nota de pedido formatada e abre o WhatsApp da Irene em um único clique.
- Inteligência Artificial (OpenRouter): Integrado ao modelo
openai/gpt-oss-120b:freepara tirar dúvidas nutricionais gerais. - Contexto de Estoque Ativo: Injeta dinamicamente os pratos reais cadastrados no banco de dados (
localStorage) no prompt do sistema do bot. - Resiliência Offline: Se o limite da API externa for atingido, o chatbot assume uma máquina de estados interativa local para que o cliente nunca veja um erro.
- Roteamento Inteligente: Dúvidas médicas severas ou questões de frete são identificadas pelo bot, que sugere educadamente o atendimento pessoal com a Irene.
- Scroll Imediato (0ms): Ao clicar em "Ver Cardápio", a página desliza de forma instantânea e sem lag até a vitrine de pratos.
Evita erros de carregamento e reduz custos de banda:
- Client-Side Optimization: Fotos pesadas de celulares modernos (5MB a 15MB) carregadas no painel de administração são redimensionadas em tempo real antes de serem enviadas.
- Redimensionamento Proporcional: Escala automática limitando a largura/altura máxima a 800px.
- Compressão em Massa: Conversão para JPEG com 75% de qualidade usando HTML5 Canvas.
- Resultado: Imagens convertidas em base64 extremamente leves de 50KB a 80KB, garantindo que o cardápio dos clientes carregue instantaneamente mesmo sob redes móveis limitadas.
- Estética Sofisticada: Paleta de cores em tons de verde profundo (escala HSL/OKLCH) e tipografia elegante (
FraunceseInter). - Animações Fluidas: Sistema de folhas decorativas flutuantes (
animate-float) que cria uma atmosfera orgânica e premium. - Responsividade Total: Layout 100% fluido e adaptado para a experiência em celulares e tablets.
- Nome de Site Otimizado (Google Site Name): Configuração de dados estruturados JSON-LD
WebSitee tags OpenGraphog:site_namepara garantir que o Google exiba "Irene Comida Saudável" nos resultados de pesquisa ao invés do domínio padrão da Vercel. - Hierarquia Semântica: Estruturação correta de tags
<h1>,<h2>e<h3>com foco em palavras-chave regionais de Fortaleza.
- Isolamento de Credenciais: O arquivo
.gitignorefoi rigorosamente atualizado para ignorar arquivos de variáveis de ambiente (.env,.env.local, etc.). - Zero Segredos Hardcoded: Todas as chaves e segredos da API do OpenRouter e Supabase foram isolados do repositório público e são consumidos estritamente das variáveis de ambiente (
import.meta.env).
- React 19 & TypeScript
- TanStack Start & TanStack Router (Roteamento moderno de alta performance)
- Tailwind CSS v4 (Abordagem de estilo moderna e performática)
- Lucide React (Ícones limpos e profissionais)
- Vite (Ferramenta de build e desenvolvimento veloz)
Certifique-se de possuir o Node.js instalado em sua máquina.
Crie um arquivo .env na raiz do projeto contendo as credenciais de desenvolvimento (não comente ou envie este arquivo ao GitHub):
# Configurações do Assistente Virtual IA (OpenRouter)
VITE_OPENROUTER_API_KEY=sua_chave_privada_aqui
VITE_OPENROUTER_MODEL=openai/gpt-oss-120b:free
# Configurações do Banco de Dados / Supabase
VITE_SUPABASE_URL=https://sua-url-do-supabase.supabase.co
VITE_SUPABASE_ANON_KEY=sua_chave_anonima_do_supabase- Instale as dependências:
npm install
- Execute em modo de desenvolvimento:
npm run dev
- Abra o navegador no endereço indicado (geralmente
http://localhost:5173).
Para acompanhar as melhorias, tarefas técnicas e critérios de aceitação detalhados das issues criadas para esta fase, consulte o arquivo local: 👉 ISSUES.md
Desenvolvido com foco em excelência estética, segurança e resultados de negócios.
Desenvolvedor Kayohan Costa
🔗 LinkedIn