feat: complete NutriScan redesign
This commit is contained in:
evandrodevbr committed
1 parent
c1fe4af997
commit
f71cd167b3
163 files changed
+30802
-14169
No files matched your search
@@ -1,158 +1,113 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Heart, Zap, BookOpen, Baby, Dumbbell, ArrowRight, ShieldCheck } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const PERSONAS = [
|
||||
{
|
||||
id: "parents",
|
||||
tag: "Segurança Familiar",
|
||||
title: "Pais e Mães",
|
||||
tagline: "Segurança familiar",
|
||||
description: "Decifre rótulos complexos e garanta que o lanche escolar seja livre de ingredientes ultraprocessados ocultos.",
|
||||
icon: Baby,
|
||||
color: "text-pink-500",
|
||||
bg: "bg-pink-500/10",
|
||||
border: "hover:border-pink-500/30",
|
||||
features: ["Identificação de Alérgenos", "Nutri-Score Infantil", "Educação Nutricional"]
|
||||
description:
|
||||
"Decifre rótulos complexos e garanta que o lanche escolar seja livre de ingredientes ultraprocessados ocultos.",
|
||||
features: ["Identificação de alérgenos", "Nutri-Score infantil", "Educação nutricional"],
|
||||
},
|
||||
{
|
||||
id: "athletes",
|
||||
tag: "Performance",
|
||||
title: "Atletas",
|
||||
tagline: "Performance Máxima",
|
||||
description: "Otimize sua composição corporal monitorando densidade calórica e a qualidade dos macronutrientes em tempo real.",
|
||||
icon: Dumbbell,
|
||||
color: "text-emerald-500",
|
||||
bg: "bg-emerald-500/10",
|
||||
border: "hover:border-emerald-500/30",
|
||||
features: ["Monitoramento de Macros", "Foco em Bio-disponibilidade", "Zero Açúcares Ocultos"]
|
||||
description:
|
||||
"Otimize sua composição corporal monitorando densidade calórica e a qualidade dos macronutrientes.",
|
||||
features: ["Monitoramento de macros", "Biodisponibilidade", "Zero açúcares ocultos"],
|
||||
},
|
||||
{
|
||||
id: "allergic",
|
||||
tag: "Risco Zero",
|
||||
title: "Alérgicos",
|
||||
tagline: "Risco Zero",
|
||||
description: "Sistemas de alerta para contaminação cruzada e componentes críticos. Segurança total na palma da sua mão.",
|
||||
icon: ShieldCheck,
|
||||
color: "text-orange-500",
|
||||
bg: "bg-orange-500/10",
|
||||
border: "hover:border-orange-500/30",
|
||||
features: ["Glúten & Lactose Tracker", "Traços de Alérgenos", "Scan de Segurança"]
|
||||
description:
|
||||
"Alertas para contaminação cruzada e componentes críticos. Segurança total na palma da mão.",
|
||||
features: ["Glúten & lactose tracker", "Traços de alérgenos", "Scan de segurança"],
|
||||
},
|
||||
{
|
||||
id: "conscious",
|
||||
tag: "Decisão Crítica",
|
||||
title: "Consumidores",
|
||||
tagline: "Decisão Crítica",
|
||||
description: "Para quem questiona a indústria. Acesse a lista real de ingredientes e a origem dos dados de forma aberta.",
|
||||
icon: BookOpen,
|
||||
color: "text-blue-500",
|
||||
bg: "bg-blue-500/10",
|
||||
border: "hover:border-blue-500/30",
|
||||
features: ["Análise de Aditivos", "Comparação de SKUs", "Transparência ODBL"]
|
||||
}
|
||||
description:
|
||||
"Para quem questiona a indústria. Acesse a lista real de ingredientes e a origem dos dados de forma aberta.",
|
||||
features: ["Análise de aditivos", "Comparação de produtos", "Transparência ODBL"],
|
||||
},
|
||||
];
|
||||
|
||||
export function TargetAudienceSection() {
|
||||
return (
|
||||
<section className="py-32 bg-white dark:bg-[#030712] relative overflow-hidden transition-colors duration-500">
|
||||
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||||
|
||||
{/* Header com Motion Stagger */}
|
||||
<div className="text-center mb-24">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-4xl md:text-6xl font-black text-gray-900 dark:text-white mb-6 tracking-tighter"
|
||||
>
|
||||
Projetado para <span className="bg-gradient-to-r from-blue-600 to-emerald-500 bg-clip-text text-transparent">Cidadãos Conscientes</span>
|
||||
</motion.h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto font-medium">
|
||||
Se a transparência é um requisito para sua mesa, o NutriScan é sua ferramenta de governança alimentar.
|
||||
<section className="bg-surface section-py">
|
||||
<div className="container-editorial">
|
||||
|
||||
{/* Section header */}
|
||||
<div className="section-header">
|
||||
<span className="eyebrow">Para Quem</span>
|
||||
<h2 className="font-display">
|
||||
Projetado para cidadãos que exigem transparência.
|
||||
</h2>
|
||||
<p>
|
||||
Se a clareza é um requisito para sua mesa, o NutriScan é a sua ferramenta de governança alimentar.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Persona Bento Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-24">
|
||||
{PERSONAS.map((persona, i) => (
|
||||
<motion.div
|
||||
{/* Persona grid — clean, warm cards with numbered list features */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-[var(--border-subtle)] border border-[var(--border-subtle)] rounded-lg overflow-hidden mb-20">
|
||||
{PERSONAS.map((persona) => (
|
||||
<div
|
||||
key={persona.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className={cn(
|
||||
"group relative p-8 rounded-[2.5rem] bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800 transition-all duration-500",
|
||||
persona.border,
|
||||
"hover:shadow-2xl hover:shadow-gray-200 dark:hover:shadow-none"
|
||||
)}
|
||||
className="bg-elevated p-8 hover-lift group cursor-default flex flex-col"
|
||||
>
|
||||
<div className={cn("w-14 h-14 rounded-2xl flex items-center justify-center mb-8 transition-transform group-hover:scale-110", persona.bg)}>
|
||||
<persona.icon className={cn("w-7 h-7", persona.color)} />
|
||||
</div>
|
||||
|
||||
<span className={cn("text-[10px] font-black uppercase tracking-[0.2em] mb-2 block", persona.color)}>
|
||||
{persona.tagline}
|
||||
</span>
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 tracking-tight">
|
||||
<span className="label text-accent mb-4 block">{persona.tag}</span>
|
||||
<h3 className="font-display text-display-sm text-[var(--fg-primary)] mb-4">
|
||||
{persona.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed mb-8">
|
||||
<p className="text-sm text-[var(--fg-secondary)] leading-relaxed mb-8 flex-1">
|
||||
{persona.description}
|
||||
</p>
|
||||
|
||||
<ul className="space-y-3">
|
||||
{persona.features.map(f => (
|
||||
<li key={f} className="flex items-center gap-2 text-xs font-bold text-gray-500 dark:text-gray-500">
|
||||
<div className={cn("w-1 h-1 rounded-full", persona.bg.replace('/10', ''))} />
|
||||
<ul className="space-y-2 border-t border-[var(--border-subtle)] pt-6">
|
||||
{persona.features.map((f) => (
|
||||
<li
|
||||
key={f}
|
||||
className="flex items-center gap-3 text-xs text-[var(--fg-muted)]"
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full bg-[var(--accent)] flex-shrink-0" />
|
||||
{f}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* High-Impact Callout: Glassmorphism Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.98 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative rounded-[3rem] bg-gradient-to-br from-blue-600 to-emerald-600 p-1 md:p-px shadow-3xl"
|
||||
>
|
||||
<div className="bg-white/5 dark:bg-black/20 backdrop-blur-3xl rounded-[2.9rem] p-10 md:p-16 text-center text-white">
|
||||
<h3 className="text-3xl md:text-5xl font-black mb-6 tracking-tighter">
|
||||
A informação alimentar é um <span className="text-yellow-400">Direito Universal</span>
|
||||
</h3>
|
||||
<p className="text-blue-50 text-lg md:text-xl mb-12 max-w-4xl mx-auto leading-relaxed opacity-90">
|
||||
Se você busca soberania sobre suas escolhas, o NutriScan é o seu protocolo de acesso à verdade. Sem interesses corporativos, apenas dados puros e auditáveis.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
{[
|
||||
{ icon: Zap, label: "Baixa Latência", text: "Dados em < 2s" },
|
||||
{ icon: Heart, label: "Auditável", text: "Open Source" },
|
||||
{ icon: ShieldCheck, label: "Privacidade", text: "No Tracking" },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col items-center gap-2 bg-white/10 px-8 py-6 rounded-2xl border border-white/10 backdrop-blur-md">
|
||||
<item.icon className="w-6 h-6 text-yellow-400" />
|
||||
<span className="text-xs font-black uppercase tracking-widest">{item.label}</span>
|
||||
<span className="text-[10px] text-blue-100 opacity-70 uppercase">{item.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="mt-16 inline-flex items-center gap-3 px-10 py-5 bg-white text-blue-600 rounded-2xl font-black uppercase tracking-widest text-sm shadow-xl shadow-black/10 transition-all hover:bg-yellow-400 hover:text-black"
|
||||
>
|
||||
Iniciar Scan Agora <ArrowRight size={18} />
|
||||
</motion.button>
|
||||
{/* Callout banner — warm, accent-bordered, no color blobs */}
|
||||
<div className="card-accent-top card-warm p-10 lg:p-16 text-center">
|
||||
<span className="label text-accent mb-5 block">Princípio Fundamental</span>
|
||||
<h3 className="font-display text-display-md text-[var(--fg-primary)] mb-6 max-w-2xl mx-auto">
|
||||
A informação alimentar é um direito universal.
|
||||
</h3>
|
||||
<p className="text-[var(--fg-secondary)] leading-relaxed max-w-2xl mx-auto mb-10">
|
||||
Sem interesses corporativos, apenas dados puros e auditáveis. O NutriScan é
|
||||
o protocolo de acesso à verdade sobre o que você consome.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
{[
|
||||
{ label: "Baixa Latência", sub: "Dados em < 2s" },
|
||||
{ label: "Auditável", sub: "Open Source" },
|
||||
{ label: "Privacidade", sub: "Zero tracking" },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="flex flex-col items-center gap-1 px-8 py-5 border border-[var(--border-subtle)] rounded bg-[var(--bg-surface)]"
|
||||
>
|
||||
<span className="label text-[var(--fg-primary)]">{item.label}</span>
|
||||
<span className="text-xs text-[var(--fg-muted)]">{item.sub}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user