evandro/nutriscan
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete NutriScan redesign

Browse Source
This commit is contained in:
evandrodevbr committed 2026-07-16 16:31:50 -03:00
1 parent c1fe4af997
commit f71cd167b3
163 files changed
+30802 -14169
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/sobre/components/ValuesSection.tsx
+82 -126
View File
@@ -1,173 +1,129 @@
"use client";
import React from "react";
import { motion } from "framer-motion";
import {
ShieldCheck, Eye, Gift, Lock,
CheckCircle2, Github, Database,
Scale, Terminal, Fingerprint
} from "lucide-react";
import { cn } from "@/lib/utils";
// 1. Data Contracts - Centralizando a lógica para fácil manutenção
const PROTOCOLS = [
{
tag: "Open Data",
title: "Dados Abertos",
desc: "Acesso irrestrito a metadados alimentares sob licença ODbL.",
icon: Eye,
color: "text-blue-500",
bg: "bg-blue-500/10",
tag: "Open Data"
desc: "Acesso irrestrito a metadados alimentares sob licença ODbL. Nenhum dado fica preso atrás de paywall.",
},
{
tag: "Non-Profit",
title: "Gratuidade Perpétua",
desc: "Arquitetura sustentada por comunidade, livre de paywalls ou ads.",
icon: Gift,
color: "text-emerald-500",
bg: "bg-emerald-500/10",
tag: "Non-Profit"
desc: "Arquitetura sustentada pela comunidade. Livre de assinaturas, anúncios ou interesses comerciais.",
},
{
tag: "Privacy First",
title: "Privacy by Design",
desc: "Zero-tracking. Coleta mínima de dados conforme LGPD/GDPR.",
icon: Lock,
color: "text-purple-500",
bg: "bg-purple-500/10",
tag: "Security"
desc: "Zero rastreamento. Coleta mínima de dados conforme LGPD/GDPR. Sua navegação é sua.",
},
{
tag: "Accuracy",
title: "Alta Fidelidade",
desc: "Algoritmos de validação cruzada para garantir integridade.",
icon: ShieldCheck,
color: "text-orange-500",
bg: "bg-orange-500/10",
tag: "Accuracy"
}
desc: "Algoritmos de validação cruzada para garantir a integridade de cada registro consultado.",
},
];
export function ValuesSection() {
return (
<section className="py-32 bg-white dark:bg-[#030712] relative overflow-hidden transition-colors duration-500">
{/* Background Decor - Grid de Engenharia sutil */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:32px_32px]" />
<section className="bg-surface section-py">
<div className="container-editorial">
<div className="max-w-7xl mx-auto px-6 relative z-10">
{/* Header - Tom de Autoridade */}
<div className="text-center mb-24">
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/5 border border-blue-500/20 text-blue-600 dark:text-blue-400 text-[10px] font-black uppercase tracking-[0.3em] mb-6"
>
<Scale size={12} /> Compliance & Ethics
</motion.div>
<h2 className="text-4xl md:text-6xl font-black text-gray-900 dark:text-white mb-6 tracking-tighter">
Protocolos de <span className="bg-gradient-to-r from-blue-600 to-emerald-500 bg-clip-text text-transparent">Integridade</span>
{/* Section header */}
<div className="section-header">
<span className="eyebrow">Valores</span>
<h2 className="font-display">
Protocolos de integridade.
</h2>
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto font-medium">
Nossa governança é pautada pela transparência radical. Não maquiamos dados; entregamos a verdade técnica.
<p>
Nossa governança é pautada pela transparência radical. Não maquiamos dados — entregamos a verdade técnica.
</p>
</div>
{/* Values Grid - Bento Box Style */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
{PROTOCOLS.map((item, i) => (
<motion.div
{/* Values grid */}
<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">
{PROTOCOLS.map((item) => (
<div
key={item.title}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.1 }}
viewport={{ once: true }}
className="group p-8 rounded-[2.5rem] bg-gray-50 dark:bg-gray-900/40 border border-gray-100 dark:border-gray-800 hover:border-blue-500/30 transition-all duration-500"
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", item.bg)}>
<item.icon className={cn("w-7 h-7", item.color)} />
</div>
<span className={cn("text-[10px] font-mono font-bold uppercase tracking-widest mb-2 block", item.color)}>
{item.tag}
</span>
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4 tracking-tight">
<span className="label text-accent mb-4 block">{item.tag}</span>
<h3 className="font-display text-display-sm text-[var(--fg-primary)] mb-4">
{item.title}
</h3>
<p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed font-medium mb-6">
<p className="text-sm text-[var(--fg-secondary)] leading-relaxed flex-1">
{item.desc}
</p>
<div className="flex items-center gap-2 text-[10px] font-black text-gray-400 uppercase tracking-tighter group-hover:text-blue-500 transition-colors">
<CheckCircle2 size={12} className="text-emerald-500" /> System Verified
<div className="mt-8 pt-6 border-t border-[var(--border-subtle)] flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-[var(--accent)]" />
<span className="text-xs text-[var(--fg-faint)] uppercase tracking-widest font-medium">
Verified
</span>
</div>
</motion.div>
</div>
))}
</div>
{/* OSS Deep Dive - O Diferencial Sênior */}
<motion.div
initial={{ opacity: 0, scale: 0.98 }}
whileInView={{ opacity: 1, scale: 1 }}
className="relative rounded-[3rem] bg-slate-950 border border-slate-800 p-10 md:p-16 overflow-hidden shadow-3xl"
>
<div className="absolute top-0 right-0 w-full h-full bg-[radial-gradient(circle_at_top_right,#1e293b,transparent)] opacity-50" />
<div className="relative z-10 flex flex-col lg:flex-row gap-12 items-center">
<div className="flex-1 space-y-6">
<div className="flex items-center gap-4">
<div className="p-3 bg-white/10 rounded-2xl backdrop-blur-md">
<Github className="text-white w-8 h-8" />
</div>
<div>
<h3 className="text-3xl font-black text-white tracking-tighter">Open Source Manifesto</h3>
<p className="text-blue-400 font-mono text-xs uppercase tracking-widest mt-1">Status: Fully Auditability</p>
</div>
</div>
<p className="text-slate-400 text-lg leading-relaxed">
Acreditamos que algoritmos que impactam a saúde pública devem ser de domínio público. Nosso código é aberto para inspeção, garantindo que não existam backdoors ou manipulação de dados comerciais.
{/* Open Source manifest — dark panel with warm contrast */}
<div className="bg-[var(--fg-primary)] rounded-lg overflow-hidden">
<div className="border-l-2 border-[var(--accent)] grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-12 p-10 lg:p-14 items-center">
<div>
<span className="label text-[var(--accent)] mb-5 block">Open Source Manifesto</span>
<h3 className="font-display text-display-md text-[var(--bg-base)] mb-5">
Algoritmos que impactam a saúde pública pertencem ao domínio público.
</h3>
<p className="text-[var(--fg-muted)] leading-relaxed max-w-lg mb-8 text-sm">
Nosso código é aberto para inspeção, garantindo que não existam backdoors
ou manipulação de dados comerciais. A auditabilidade é o nosso nível mais alto de confiança.
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{[
{ label: "Core Logic", val: "MIT Licensed", icon: Terminal },
{ label: "Dataset", val: "ODbL Support", icon: Database },
{ label: "Auth", val: "Privacy-First", icon: Fingerprint },
{ label: "Core Logic", val: "MIT Licensed" },
{ label: "Dataset", val: "ODbL Support" },
{ label: "Auth", val: "Privacy-First" },
].map((spec) => (
<div key={spec.label} className="p-4 bg-white/5 rounded-2xl border border-white/10">
<spec.icon className="w-4 h-4 text-blue-500 mb-2" />
<div className="text-xs font-black text-white uppercase tracking-widest mb-1">{spec.label}</div>
<div className="text-[10px] font-mono text-slate-500 uppercase">{spec.val}</div>
<div
key={spec.label}
className="p-4 border border-[var(--border-subtle)]/20 rounded"
>
<div className="label text-[var(--fg-faint)] mb-1 block">{spec.label}</div>
<div className="text-sm font-medium text-[var(--bg-base)]">{spec.val}</div>
</div>
))}
</div>
</div>
{/* GitHub Stats Mockup / Placeholder visual */}
<div className="w-full lg:w-72 h-48 bg-slate-900/50 rounded-3xl border border-slate-800 p-6 font-mono text-[10px] space-y-3 relative">
<div className="flex justify-between text-slate-500 border-b border-slate-800 pb-2">
<span>nutriscan-core / main</span>
<span className="text-emerald-500">online</span>
</div>
<div className="space-y-1">
<p className="text-blue-400">$ npm run audit</p>
<p className="text-slate-400"> Scanning dependencies...</p>
<p className="text-emerald-500"> 0 vulnerabilities found</p>
<p className="text-slate-400"> Data Integrity: 100% Verified</p>
</div>
<div className="absolute bottom-4 right-6 animate-pulse">
<div className="w-3 h-3 bg-emerald-500 rounded-full shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
</div>
{/* Terminal mockup */}
<div className="hidden lg:block w-72 shrink-0 border border-[var(--border-subtle)]/20 rounded-lg overflow-hidden">
<div className="flex items-center gap-1.5 px-4 py-3 border-b border-[var(--border-subtle)]/20 bg-[var(--bg-surface)]/5">
<span className="w-2.5 h-2.5 rounded-full bg-[var(--border-strong)]/40" />
<span className="w-2.5 h-2.5 rounded-full bg-[var(--border-strong)]/40" />
<span className="w-2.5 h-2.5 rounded-full bg-[var(--accent)]/60" />
<span className="ml-2 text-[10px] text-[var(--fg-muted)] font-mono">nutriscan-core</span>
</div>
<div className="p-5 font-mono text-[11px] space-y-2">
<p className="text-[var(--accent)]">$ npm run audit</p>
<p className="text-[var(--fg-muted)]"> Scanning dependencies...</p>
<p className="text-[var(--accent-light)]"> 0 vulnerabilities found</p>
<p className="text-[var(--fg-muted)]"> Data Integrity: 100%</p>
<div className="flex items-center gap-2 pt-2">
<span className="w-2 h-2 rounded-full bg-[var(--accent)] animate-pulse" />
<span className="text-[var(--accent)]">All checks passed</span>
</div>
</div>
</div>
</div>
</motion.div>
{/* Final Trust Verification */}
<div className="mt-24 grid grid-cols-2 md:grid-cols-4 gap-12 opacity-50 grayscale hover:grayscale-0 transition-all duration-700">
{/* Aqui você colocaria logotipos de bases de dados ou menções técnicas (ex: Open Food Facts, GitHub, Next.js, Radix UI) */}
<div className="text-center font-mono text-[10px] font-black uppercase tracking-[0.4em] text-gray-500">Open Food Facts</div>
<div className="text-center font-mono text-[10px] font-black uppercase tracking-[0.4em] text-gray-500">MIT License</div>
<div className="text-center font-mono text-[10px] font-black uppercase tracking-[0.4em] text-gray-500">Privacy First</div>
<div className="text-center font-mono text-[10px] font-black uppercase tracking-[0.4em] text-gray-500">ODbL Data</div>
</div>
{/* Trust footer — editorial badge row */}
<div className="mt-16 pt-8 hairline flex flex-wrap items-center justify-center gap-12 opacity-50 hover:opacity-100 transition-opacity duration-500">
{["Open Food Facts", "MIT License", "Privacy First", "ODbL Data"].map((name) => (
<span key={name} className="label text-[var(--fg-muted)]">
{name}
</span>
))}
</div>
</div>
</section>
);
}
}