500 lines
21 KiB
TypeScript
500 lines
21 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect, useCallback } from 'react'
|
||
import Link from 'next/link'
|
||
import { motion, AnimatePresence } from 'framer-motion'
|
||
import { Scale, ArrowRight, Mail, Sparkles, Shield, FileSearch, Brain } from 'lucide-react'
|
||
|
||
/* ─── Particle Field ─── */
|
||
function Particles() {
|
||
const [particles, setParticles] = useState<{ id: number; x: number; y: number; size: number; duration: number; delay: number }[]>([])
|
||
|
||
useEffect(() => {
|
||
const pts = Array.from({ length: 60 }, (_, i) => ({
|
||
id: i,
|
||
x: Math.random() * 100,
|
||
y: Math.random() * 100,
|
||
size: Math.random() * 3 + 1,
|
||
duration: Math.random() * 20 + 15,
|
||
delay: Math.random() * -20,
|
||
}))
|
||
setParticles(pts)
|
||
}, [])
|
||
|
||
return (
|
||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||
{particles.map((p) => (
|
||
<div
|
||
key={p.id}
|
||
className="absolute rounded-full bg-emerald-400/20 animate-float"
|
||
style={{
|
||
left: `${p.x}%`,
|
||
top: `${p.y}%`,
|
||
width: `${p.size}px`,
|
||
height: `${p.size}px`,
|
||
animationDuration: `${p.duration}s`,
|
||
animationDelay: `${p.delay}s`,
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/* ─── Feature Card ─── */
|
||
function FeatureCard({
|
||
icon: Icon,
|
||
emoji,
|
||
title,
|
||
desc,
|
||
delay,
|
||
}: {
|
||
icon: React.ComponentType<{ className?: string }>
|
||
emoji: string
|
||
title: string
|
||
desc: string
|
||
delay: number
|
||
}) {
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: '-50px' }}
|
||
transition={{ duration: 0.7, delay, ease: [0.25, 0.4, 0.25, 1] }}
|
||
className="group relative p-8 rounded-3xl bg-white/[0.03] backdrop-blur-xl border border-white/[0.08] hover:border-emerald-500/30 transition-all duration-700 hover:-translate-y-2 hover:shadow-2xl hover:shadow-emerald-500/[0.05]"
|
||
>
|
||
<div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-emerald-500/[0.05] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
|
||
<div className="relative">
|
||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-teal-500/10 border border-emerald-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
|
||
<span className="text-2xl">{emoji}</span>
|
||
</div>
|
||
<h3 className="text-xl font-bold text-white mb-3">{title}</h3>
|
||
<p className="text-[15px] text-zinc-400 leading-relaxed">{desc}</p>
|
||
</div>
|
||
</motion.div>
|
||
)
|
||
}
|
||
|
||
/* ─── Main Page ─── */
|
||
export default function Home() {
|
||
const [email, setEmail] = useState('')
|
||
const [submitted, setSubmitted] = useState(false)
|
||
const [mounted, setMounted] = useState(false)
|
||
|
||
useEffect(() => {
|
||
setMounted(true)
|
||
}, [])
|
||
|
||
const handleSubmit = useCallback(
|
||
(e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
if (email.trim()) {
|
||
setSubmitted(true)
|
||
}
|
||
},
|
||
[email]
|
||
)
|
||
|
||
return (
|
||
<main className="min-h-screen bg-[#040810] text-white overflow-hidden">
|
||
{/* ═══ CSS Animations ═══ */}
|
||
<style jsx global>{`
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.2; }
|
||
25% { transform: translateY(-30px) translateX(10px); opacity: 0.6; }
|
||
50% { transform: translateY(-15px) translateX(-10px); opacity: 0.3; }
|
||
75% { transform: translateY(-40px) translateX(5px); opacity: 0.5; }
|
||
}
|
||
.animate-float { animation: float linear infinite; }
|
||
|
||
@keyframes gradient-shift {
|
||
0%, 100% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
}
|
||
.animate-gradient {
|
||
background-size: 200% 200%;
|
||
animation: gradient-shift 8s ease infinite;
|
||
}
|
||
|
||
@keyframes pulse-ring {
|
||
0% { transform: scale(0.9); opacity: 1; }
|
||
100% { transform: scale(1.8); opacity: 0; }
|
||
}
|
||
.animate-pulse-ring {
|
||
animation: pulse-ring 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
|
||
}
|
||
|
||
@keyframes glow {
|
||
0%, 100% { opacity: 0.4; }
|
||
50% { opacity: 0.8; }
|
||
}
|
||
.animate-glow { animation: glow 4s ease-in-out infinite; }
|
||
|
||
@keyframes scan-line {
|
||
0% { transform: translateY(-100%); }
|
||
100% { transform: translateY(100vh); }
|
||
}
|
||
.animate-scan {
|
||
animation: scan-line 8s linear infinite;
|
||
}
|
||
`}</style>
|
||
|
||
{/* ═══ NAVBAR ═══ */}
|
||
<nav className="fixed top-0 left-0 right-0 z-50 bg-[#040810]/60 backdrop-blur-2xl border-b border-white/[0.04]">
|
||
<div className="max-w-7xl mx-auto px-6 lg:px-8 h-16 flex items-center justify-between">
|
||
<Link href="/" className="flex items-center gap-2.5">
|
||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-600 flex items-center justify-center shadow-lg shadow-emerald-500/20">
|
||
<Scale className="w-4 h-4 text-white" />
|
||
</div>
|
||
<span className="text-xl font-bold tracking-tight">
|
||
<span className="text-white">Lex</span>
|
||
<span className="text-emerald-400">Mind</span>
|
||
</span>
|
||
</Link>
|
||
<div className="flex items-center gap-3">
|
||
<Link
|
||
href="/login"
|
||
className="text-sm text-zinc-500 hover:text-zinc-300 transition-colors px-4 py-2"
|
||
>
|
||
Já tem conta? Acessar
|
||
</Link>
|
||
<Link
|
||
href="/register"
|
||
className="hidden sm:block text-sm px-5 py-2 rounded-full border border-white/10 text-zinc-400 hover:text-white hover:border-white/20 transition-all"
|
||
>
|
||
Criar Conta
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* ═══ HERO — Full Viewport ═══ */}
|
||
<section className="relative min-h-screen flex flex-col items-center justify-center px-6 pt-16">
|
||
{/* Background effects */}
|
||
<div className="absolute inset-0">
|
||
{/* Central mega glow */}
|
||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full bg-emerald-500/[0.04] blur-[200px] animate-glow" />
|
||
<div className="absolute top-1/3 left-[20%] w-[400px] h-[400px] rounded-full bg-teal-500/[0.03] blur-[150px] animate-glow" style={{ animationDelay: '-2s' }} />
|
||
<div className="absolute bottom-1/4 right-[15%] w-[300px] h-[300px] rounded-full bg-cyan-500/[0.03] blur-[120px] animate-glow" style={{ animationDelay: '-4s' }} />
|
||
|
||
{/* Scan line */}
|
||
<div className="absolute left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-emerald-500/20 to-transparent animate-scan" />
|
||
|
||
{/* Grid */}
|
||
<div
|
||
className="absolute inset-0 opacity-[0.02]"
|
||
style={{
|
||
backgroundImage: 'linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)',
|
||
backgroundSize: '60px 60px',
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{mounted && <Particles />}
|
||
|
||
<div className="relative max-w-4xl mx-auto text-center z-10">
|
||
{/* "Em Breve" Badge */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="inline-flex items-center gap-2.5 mb-10"
|
||
>
|
||
<div className="relative">
|
||
<div className="absolute inset-0 rounded-full bg-emerald-500/40 animate-pulse-ring" />
|
||
<div className="relative px-6 py-2.5 rounded-full bg-emerald-500/[0.1] border border-emerald-500/30 backdrop-blur-sm">
|
||
<span className="flex items-center gap-2 text-sm font-semibold text-emerald-300 tracking-wide">
|
||
<Sparkles className="w-4 h-4" />
|
||
EM BREVE
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Headline */}
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 1, delay: 0.4, ease: [0.25, 0.4, 0.25, 1] }}
|
||
className="text-5xl sm:text-6xl lg:text-8xl font-extrabold tracking-tight leading-[1.05] mb-8"
|
||
>
|
||
<span className="block text-white/90">O Direito nunca mais</span>
|
||
<span className="block bg-gradient-to-r from-emerald-300 via-teal-300 to-cyan-300 bg-clip-text text-transparent animate-gradient">
|
||
será o mesmo.
|
||
</span>
|
||
</motion.h1>
|
||
|
||
{/* Subheadline */}
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.7 }}
|
||
className="text-lg sm:text-xl text-zinc-400 max-w-2xl mx-auto mb-14 leading-relaxed"
|
||
>
|
||
Inteligência Artificial que entende a lei como você.
|
||
<br className="hidden sm:block" />
|
||
<span className="text-zinc-300">Mais rápido, mais preciso, mais inteligente.</span>
|
||
</motion.p>
|
||
|
||
{/* Email Form */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.9 }}
|
||
className="max-w-lg mx-auto"
|
||
>
|
||
<p className="text-sm text-zinc-500 mb-4 font-medium">Seja o primeiro a ter acesso</p>
|
||
|
||
<AnimatePresence mode="wait">
|
||
{!submitted ? (
|
||
<motion.form
|
||
key="form"
|
||
onSubmit={handleSubmit}
|
||
className="flex flex-col sm:flex-row gap-3"
|
||
exit={{ opacity: 0, scale: 0.95 }}
|
||
>
|
||
<div className="relative flex-1">
|
||
<Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-zinc-600" />
|
||
<input
|
||
type="email"
|
||
required
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
placeholder="seu@email.com.br"
|
||
className="w-full pl-12 pr-4 py-4 rounded-2xl bg-white/[0.05] border border-white/[0.08] text-white placeholder-zinc-600 focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all text-[15px]"
|
||
/>
|
||
</div>
|
||
<button
|
||
type="submit"
|
||
className="group px-8 py-4 rounded-2xl bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-bold text-[15px] transition-all hover:shadow-2xl hover:shadow-emerald-500/30 hover:-translate-y-0.5 active:translate-y-0 flex items-center justify-center gap-2 whitespace-nowrap"
|
||
>
|
||
Quero Acesso Antecipado
|
||
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||
</button>
|
||
</motion.form>
|
||
) : (
|
||
<motion.div
|
||
key="thanks"
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.5 }}
|
||
className="py-5 px-8 rounded-2xl bg-emerald-500/[0.1] border border-emerald-500/30 text-center"
|
||
>
|
||
<p className="text-emerald-300 font-semibold text-lg">🎉 Obrigado!</p>
|
||
<p className="text-zinc-400 text-sm mt-1">Você será notificado assim que o LexMind estiver disponível.</p>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 1.2 }}
|
||
className="text-xs text-zinc-600 mt-4 flex items-center justify-center gap-1.5"
|
||
>
|
||
<Shield className="w-3.5 h-3.5" />
|
||
Vagas limitadas para o lançamento
|
||
</motion.p>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Scroll indicator */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 2 }}
|
||
className="absolute bottom-10 left-1/2 -translate-x-1/2"
|
||
>
|
||
<div className="w-6 h-10 rounded-full border-2 border-white/10 flex items-start justify-center p-1.5">
|
||
<motion.div
|
||
animate={{ y: [0, 12, 0] }}
|
||
transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
|
||
className="w-1.5 h-1.5 rounded-full bg-emerald-400/60"
|
||
/>
|
||
</div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* ═══ FEATURES PREVIEW ═══ */}
|
||
<section className="relative py-32 px-6">
|
||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[1px] bg-gradient-to-r from-transparent via-emerald-500/20 to-transparent" />
|
||
|
||
<div className="max-w-6xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="text-center mb-20"
|
||
>
|
||
<p className="text-sm font-semibold text-emerald-400 mb-4 tracking-[0.2em] uppercase">
|
||
O que está por vir
|
||
</p>
|
||
<h2 className="text-4xl sm:text-5xl font-extrabold text-white mb-6">
|
||
Tecnologia que redefine<br />
|
||
<span className="bg-gradient-to-r from-emerald-300 to-teal-300 bg-clip-text text-transparent">
|
||
a prática jurídica
|
||
</span>
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||
<FeatureCard
|
||
icon={Brain}
|
||
emoji="🤖"
|
||
title="IA Jurídica Avançada"
|
||
desc="Peças processuais completas em menos de 30 segundos, com fundamentação técnica e jurisprudência atualizada."
|
||
delay={0}
|
||
/>
|
||
<FeatureCard
|
||
icon={FileSearch}
|
||
emoji="⚖️"
|
||
title="Jurisprudência Inteligente"
|
||
desc="Pesquisa semântica em milhares de decisões de todos os tribunais do Brasil. Encontre o precedente perfeito."
|
||
delay={0.15}
|
||
/>
|
||
<FeatureCard
|
||
icon={FileSearch}
|
||
emoji="📄"
|
||
title="Análise de Processos"
|
||
desc="Upload do PDF e receba parecer completo com legislação atualizada. Análise profunda em segundos."
|
||
delay={0.3}
|
||
/>
|
||
<FeatureCard
|
||
icon={Shield}
|
||
emoji="🔒"
|
||
title="Segurança Total"
|
||
desc="Seus dados protegidos com criptografia de ponta a ponta. Conformidade total com a LGPD."
|
||
delay={0.45}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ═══ SOCIAL PROOF ═══ */}
|
||
<section className="relative py-24 px-6">
|
||
<div className="max-w-4xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="relative p-12 sm:p-16 rounded-[2rem] bg-gradient-to-b from-white/[0.04] to-white/[0.01] border border-white/[0.06] text-center overflow-hidden"
|
||
>
|
||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[300px] h-[200px] rounded-full bg-emerald-500/[0.05] blur-[100px]" />
|
||
<div className="relative">
|
||
<div className="flex items-center justify-center gap-1 mb-8">
|
||
{Array.from({ length: 5 }).map((_, i) => (
|
||
<motion.div
|
||
key={i}
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: i * 0.1 + 0.3 }}
|
||
className="text-2xl"
|
||
>
|
||
⭐
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
<p className="text-2xl sm:text-3xl font-bold text-white/90 mb-4 leading-snug">
|
||
“A nova era do Direito está chegando.”
|
||
</p>
|
||
<p className="text-zinc-400 text-lg mb-8">
|
||
Desenvolvido por especialistas em IA e Direito
|
||
</p>
|
||
<div className="flex flex-wrap items-center justify-center gap-8 text-sm text-zinc-500">
|
||
<span className="flex items-center gap-2">
|
||
<div className="w-2 h-2 rounded-full bg-emerald-500" />
|
||
Tecnologia de ponta
|
||
</span>
|
||
<span className="flex items-center gap-2">
|
||
<div className="w-2 h-2 rounded-full bg-teal-500" />
|
||
Escritórios inovadores
|
||
</span>
|
||
<span className="flex items-center gap-2">
|
||
<div className="w-2 h-2 rounded-full bg-cyan-500" />
|
||
Precisão jurídica
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ═══ SECOND CTA ═══ */}
|
||
<section className="relative py-32 px-6">
|
||
<div className="absolute inset-0">
|
||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] rounded-full bg-emerald-500/[0.04] blur-[180px]" />
|
||
</div>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.8 }}
|
||
className="relative max-w-2xl mx-auto text-center"
|
||
>
|
||
<h2 className="text-3xl sm:text-4xl font-extrabold text-white mb-6">
|
||
Não fique de fora da revolução
|
||
</h2>
|
||
<p className="text-lg text-zinc-400 mb-10">
|
||
Garanta seu acesso antecipado e transforme sua prática jurídica com inteligência artificial.
|
||
</p>
|
||
<Link
|
||
href="/register"
|
||
className="group inline-flex items-center gap-3 px-10 py-5 rounded-full bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-bold text-lg transition-all hover:shadow-2xl hover:shadow-emerald-500/30 hover:-translate-y-0.5"
|
||
>
|
||
Criar Conta
|
||
<ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
|
||
</Link>
|
||
</motion.div>
|
||
</section>
|
||
|
||
{/* ═══ FOOTER ═══ */}
|
||
<footer className="border-t border-white/[0.04] bg-[#030609] py-12 px-6">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-6 h-6 rounded-md bg-gradient-to-br from-emerald-400 to-teal-600 flex items-center justify-center">
|
||
<Scale className="w-3 h-3 text-white" />
|
||
</div>
|
||
<span className="text-sm font-bold">
|
||
<span className="text-white">Lex</span>
|
||
<span className="text-emerald-400">Mind</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-6 text-sm text-zinc-600">
|
||
<a href="/adv/termos" target="_blank" className="hover:text-zinc-400 transition-colors">Termos de Uso</a>
|
||
<span className="text-zinc-800">|</span>
|
||
<a href="/adv/privacidade" target="_blank" className="hover:text-zinc-400 transition-colors">Política de Privacidade</a>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-4">
|
||
{/* Social placeholders */}
|
||
{['𝕏', 'in', '▶'].map((s, i) => (
|
||
<div
|
||
key={i}
|
||
className="w-8 h-8 rounded-full bg-white/[0.04] border border-white/[0.06] flex items-center justify-center text-xs text-zinc-600 hover:text-zinc-400 hover:border-white/10 transition-all cursor-pointer"
|
||
>
|
||
{s}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-8 pt-6 border-t border-white/[0.04] text-center">
|
||
<p className="text-xs text-zinc-700">
|
||
© 2026 LexMind Tecnologia Jurídica Ltda. Todos os direitos reservados.
|
||
</p>
|
||
<div className="flex items-center justify-center gap-2 mt-3 opacity-40 hover:opacity-70 transition-opacity duration-300">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-teal-400"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
||
<span className="text-[0.65rem] text-teal-400/60 tracking-[0.15em] font-semibold">KISLANSKI INDUSTRIES</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
)
|
||
}
|