foodsnap/index.html

158 lines
No EOL
6 KiB
HTML

<!DOCTYPE html>
<html lang="pt-BR" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>FoodSnap.ai - Nutricionista de Bolso com Inteligência Artificial</title>
<meta name="title" content="FoodSnap.ai - Nutricionista de Bolso com Inteligência Artificial" />
<meta name="description"
content="Transforme sua dieta com o FoodSnap.ai. Fotografe seu prato e receba análise nutricional completa (calorias, macros) via WhatsApp em segundos. Teste Grátis!" />
<meta name="keywords"
content="nutrição ia, contador de calorias foto, dieta whatsapp, nutricionista artificial, emagrecimento ia, food tracker, macro calculator" />
<meta name="author" content="FoodSnap AI" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://foodsnap.ai" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://foodsnap.ai/" />
<meta property="og:title" content="FoodSnap.ai - Seu Nutricionista IA no WhatsApp" />
<meta property="og:description"
content="Analise calorias e macros apenas tirando uma foto. Sem digitação, sem apps pesados. Tudo pelo WhatsApp." />
<meta property="og:image" content="https://foodsnap.ai/og-image.jpg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://foodsnap.ai/" />
<meta property="twitter:title" content="FoodSnap.ai - Nutrição Inteligente" />
<meta property="twitter:description"
content="Chega de contar calorias manualmente. Deixe a IA fazer isso por você." />
<meta property="twitter:image" content="https://foodsnap.ai/og-image.jpg" />
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "FoodSnap.ai",
"applicationCategory": "HealthApplication",
"operatingSystem": "Web, WhatsApp",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "BRL"
},
"description": "Aplicativo de nutrição baseado em IA que analisa fotos de comida para contagem de calorias e macros através do WhatsApp.",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "1250"
}
}
</script>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"
rel="stylesheet">
<!-- Configurações de Tema e Tratamento de Erros -->
<script>
// Define ambiente de produção para otimizar React
window.process = { env: { NODE_ENV: 'production' } };
// Configuração Tailwind
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['"Plus Jakarta Sans"', 'Inter', 'sans-serif'],
},
colors: {
gray: {
25: '#fcfcfd',
50: '#f9fafb',
100: '#f3f4f6',
200: '#e5e7eb',
300: '#d1d5db',
400: '#9ca3af',
500: '#6b7280',
600: '#4b5563',
700: '#374151',
800: '#1f2937',
850: '#111827',
900: '#030712',
},
brand: {
50: '#ecfdf5',
100: '#d1fae5',
200: '#a7f3d0',
300: '#6ee7b7',
400: '#34d399',
500: '#10b981',
600: '#059669',
700: '#047857',
800: '#065f46',
900: '#064e3b',
950: '#022c22',
},
},
boxShadow: {
'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
'glow': '0 0 40px rgba(16, 185, 129, 0.2)',
'premium': '0 20px 40px -5px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.04)',
'card': '0 0 0 1px rgba(0,0,0,0.03), 0 2px 8px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.04)',
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'shimmer': 'linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 60%)',
}
}
}
}
window.onerror = function (msg, url, line, col, error) {
console.error("Critical Error:", msg, error);
};
</script>
<!-- Import Map OTIMIZADO -->
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18.3.1",
"react/": "https://esm.sh/react@18.3.1/",
"react-dom": "https://esm.sh/react-dom@18.3.1",
"react-dom/": "https://esm.sh/react-dom@18.3.1/",
"react-dom/client": "https://esm.sh/react-dom@18.3.1/client",
"react/jsx-runtime": "https://esm.sh/react@18.3.1/jsx-runtime",
"lucide-react": "https://esm.sh/lucide-react@0.344.0?deps=react@18.3.1,react-dom@18.3.1",
"framer-motion": "https://esm.sh/framer-motion@11.0.8?deps=react@18.3.1,react-dom@18.3.1",
"@supabase/supabase-js": "https://esm.sh/@supabase/supabase-js@2.39.7",
"@google/genai": "https://esm.sh/@google/genai@^1.33.0"
}
}
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>