feat: Fase 1 - Autenticação completa
- Prisma com SQLite configurado - Tabelas: users, sessions, subscriptions, children, etc - Auth.js com credentials provider - API de registro com criação de usuário + criança - Middleware para proteger rotas - Login/Cadastro funcionais - Dashboard com sessão real
This commit is contained in:
3
src/app/api/auth/[...nextauth]/route.ts
Normal file
3
src/app/api/auth/[...nextauth]/route.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import { handlers } from '@/lib/auth';
|
||||
|
||||
export const { GET, POST } = handlers;
|
||||
112
src/app/api/register/route.ts
Normal file
112
src/app/api/register/route.ts
Normal file
@@ -0,0 +1,112 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import bcrypt from 'bcrypt';
|
||||
import { prisma } from '@/lib/prisma';
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
|
||||
const {
|
||||
// Step 1 - Responsável
|
||||
nomeResponsavel,
|
||||
email,
|
||||
telefone,
|
||||
cidade,
|
||||
estado,
|
||||
|
||||
// Step 2 - Criança
|
||||
nomeCrianca,
|
||||
dataNascimento,
|
||||
diagnostico,
|
||||
quandoDiagnostico,
|
||||
quaisTerapias,
|
||||
|
||||
// Step 3 - Prioridades
|
||||
prioridades,
|
||||
desafios,
|
||||
disponibilidade,
|
||||
planoInteresse,
|
||||
|
||||
// Senha
|
||||
password,
|
||||
} = body;
|
||||
|
||||
// Validações básicas
|
||||
if (!email || !password || !nomeResponsavel) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Campos obrigatórios faltando' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Verificar se usuário já existe
|
||||
const existingUser = await prisma.user.findUnique({
|
||||
where: { email },
|
||||
});
|
||||
|
||||
if (existingUser) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Este e-mail já está cadastrado' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Hash da senha
|
||||
const hashedPassword = await bcrypt.hash(password, 10);
|
||||
|
||||
// Criar usuário e criança em uma transação
|
||||
const result = await prisma.$transaction(async (tx) => {
|
||||
// Criar usuário
|
||||
const user = await tx.user.create({
|
||||
data: {
|
||||
email,
|
||||
password: hashedPassword,
|
||||
name: nomeResponsavel,
|
||||
phone: telefone,
|
||||
city: cidade,
|
||||
state: estado,
|
||||
role: 'parent',
|
||||
},
|
||||
});
|
||||
|
||||
// Criar assinatura pendente
|
||||
await tx.subscription.create({
|
||||
data: {
|
||||
userId: user.id,
|
||||
plan: planoInteresse || 'completo',
|
||||
status: 'pending',
|
||||
},
|
||||
});
|
||||
|
||||
// Criar perfil da criança
|
||||
if (nomeCrianca && dataNascimento) {
|
||||
await tx.child.create({
|
||||
data: {
|
||||
parentId: user.id,
|
||||
name: nomeCrianca,
|
||||
birthDate: new Date(dataNascimento),
|
||||
diagnosis: diagnostico || '',
|
||||
diagnosisDate: quandoDiagnostico,
|
||||
currentTherapies: JSON.stringify(quaisTerapias || []),
|
||||
priorities: JSON.stringify(prioridades || []),
|
||||
challenges: desafios,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return user;
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: 'Cadastro realizado com sucesso!',
|
||||
userId: result.id,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Erro no cadastro:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Erro interno do servidor' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
618
src/app/cadastro/page.tsx
Normal file
618
src/app/cadastro/page.tsx
Normal file
@@ -0,0 +1,618 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
Sparkles, ArrowLeft, ArrowRight, Check, User, Baby, Target,
|
||||
Lock, Eye, EyeOff
|
||||
} from 'lucide-react';
|
||||
|
||||
type Step = 1 | 2 | 3;
|
||||
|
||||
interface FormData {
|
||||
// Step 1 - Responsável
|
||||
nomeResponsavel: string;
|
||||
email: string;
|
||||
password: string;
|
||||
confirmPassword: string;
|
||||
telefone: string;
|
||||
cidade: string;
|
||||
estado: string;
|
||||
comoConheceu: string;
|
||||
|
||||
// Step 2 - Criança
|
||||
nomeCrianca: string;
|
||||
dataNascimento: string;
|
||||
diagnostico: string;
|
||||
quandoDiagnostico: string;
|
||||
fazTerapia: string;
|
||||
quaisTerapias: string[];
|
||||
|
||||
// Step 3 - Prioridades
|
||||
prioridades: string[];
|
||||
desafios: string;
|
||||
expectativas: string;
|
||||
disponibilidade: string[];
|
||||
planoInteresse: string;
|
||||
}
|
||||
|
||||
export default function CadastroPage() {
|
||||
const router = useRouter();
|
||||
const [step, setStep] = useState<Step>(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
nomeResponsavel: '',
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
telefone: '',
|
||||
cidade: '',
|
||||
estado: '',
|
||||
comoConheceu: '',
|
||||
nomeCrianca: '',
|
||||
dataNascimento: '',
|
||||
diagnostico: '',
|
||||
quandoDiagnostico: '',
|
||||
fazTerapia: '',
|
||||
quaisTerapias: [],
|
||||
prioridades: [],
|
||||
desafios: '',
|
||||
expectativas: '',
|
||||
disponibilidade: [],
|
||||
planoInteresse: 'completo',
|
||||
});
|
||||
|
||||
const estados = ['AC','AL','AP','AM','BA','CE','DF','ES','GO','MA','MT','MS','MG','PA','PB','PR','PE','PI','RJ','RN','RS','RO','RR','SC','SP','SE','TO'];
|
||||
|
||||
const terapias = ['ABA', 'Fonoaudiologia', 'Terapia Ocupacional', 'Psicologia', 'Psicopedagogia', 'Musicoterapia', 'Equoterapia', 'Nenhuma'];
|
||||
|
||||
const prioridadesOpcoes = [
|
||||
'Comunicação / Fala',
|
||||
'Comportamentos desafiadores',
|
||||
'Habilidades sociais',
|
||||
'Autonomia / Vida diária',
|
||||
'Sono',
|
||||
'Alimentação seletiva',
|
||||
'Treino de desfralde',
|
||||
'Rotina escolar',
|
||||
'Regulação emocional',
|
||||
'Estereotipias',
|
||||
];
|
||||
|
||||
const disponibilidadeOpcoes = [
|
||||
'Manhã (8h-12h)',
|
||||
'Tarde (13h-18h)',
|
||||
'Noite (19h-21h)',
|
||||
'Sábados',
|
||||
];
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
setError('');
|
||||
};
|
||||
|
||||
const handleCheckbox = (field: 'quaisTerapias' | 'prioridades' | 'disponibilidade', value: string) => {
|
||||
const current = formData[field];
|
||||
if (current.includes(value)) {
|
||||
setFormData({ ...formData, [field]: current.filter(v => v !== value) });
|
||||
} else {
|
||||
setFormData({ ...formData, [field]: [...current, value] });
|
||||
}
|
||||
};
|
||||
|
||||
const nextStep = () => {
|
||||
// Validações por step
|
||||
if (step === 1) {
|
||||
if (!formData.nomeResponsavel || !formData.email || !formData.password) {
|
||||
setError('Preencha todos os campos obrigatórios');
|
||||
return;
|
||||
}
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
setError('As senhas não conferem');
|
||||
return;
|
||||
}
|
||||
if (formData.password.length < 6) {
|
||||
setError('A senha deve ter no mínimo 6 caracteres');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (step < 3) setStep((step + 1) as Step);
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
if (step > 1) setStep((step - 1) as Step);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Erro ao cadastrar');
|
||||
}
|
||||
|
||||
router.push('/cadastro/sucesso');
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-indigo-50 to-white">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-100">
|
||||
<div className="max-w-4xl mx-auto px-4 py-4">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-10 h-10 rounded-xl gradient-rainbow flex items-center justify-center">
|
||||
<Sparkles className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-gradient">Íris</span>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Progress */}
|
||||
<div className="max-w-4xl mx-auto px-4 py-8">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
{[1, 2, 3].map((s) => (
|
||||
<div key={s} className="flex items-center">
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center font-semibold transition ${
|
||||
s < step ? 'bg-green-500 text-white' :
|
||||
s === step ? 'bg-indigo-600 text-white' :
|
||||
'bg-gray-200 text-gray-500'
|
||||
}`}>
|
||||
{s < step ? <Check className="w-5 h-5" /> : s}
|
||||
</div>
|
||||
<span className={`ml-3 hidden sm:block ${s === step ? 'text-indigo-600 font-medium' : 'text-gray-500'}`}>
|
||||
{s === 1 ? 'Seus Dados' : s === 2 ? 'Sobre a Criança' : 'Prioridades'}
|
||||
</span>
|
||||
{s < 3 && <div className={`w-12 sm:w-24 h-1 mx-4 ${s < step ? 'bg-green-500' : 'bg-gray-200'}`} />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Form Card */}
|
||||
<div className="bg-white rounded-2xl shadow-xl p-8">
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
||||
{/* Step 1 - Responsável */}
|
||||
{step === 1 && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-xl bg-indigo-100 text-indigo-600 flex items-center justify-center">
|
||||
<User className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Seus Dados</h2>
|
||||
<p className="text-gray-500">Informações do responsável</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Nome Completo *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="nomeResponsavel"
|
||||
value={formData.nomeResponsavel}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
placeholder="Seu nome completo"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">E-mail *</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
placeholder="seu@email.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Senha *</label>
|
||||
<div className="relative">
|
||||
<Lock className="w-5 h-5 text-gray-400 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
required
|
||||
minLength={6}
|
||||
className="w-full pl-12 pr-12 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
placeholder="Mínimo 6 caracteres"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Confirmar Senha *</label>
|
||||
<div className="relative">
|
||||
<Lock className="w-5 h-5 text-gray-400 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
name="confirmPassword"
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
placeholder="Repita a senha"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Telefone/WhatsApp *</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="telefone"
|
||||
value={formData.telefone}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
placeholder="(11) 99999-9999"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Estado *</label>
|
||||
<select
|
||||
name="estado"
|
||||
value={formData.estado}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
>
|
||||
<option value="">Selecione</option>
|
||||
{estados.map(uf => <option key={uf} value={uf}>{uf}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Cidade *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="cidade"
|
||||
value={formData.cidade}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
placeholder="Sua cidade"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Como conheceu a Íris?</label>
|
||||
<select
|
||||
name="comoConheceu"
|
||||
value={formData.comoConheceu}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
>
|
||||
<option value="">Selecione</option>
|
||||
<option value="google">Google</option>
|
||||
<option value="instagram">Instagram</option>
|
||||
<option value="facebook">Facebook</option>
|
||||
<option value="indicacao">Indicação</option>
|
||||
<option value="terapeuta">Terapeuta</option>
|
||||
<option value="outro">Outro</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2 - Criança */}
|
||||
{step === 2 && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-xl bg-pink-100 text-pink-600 flex items-center justify-center">
|
||||
<Baby className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Sobre a Criança</h2>
|
||||
<p className="text-gray-500">Informações do seu filho(a)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Nome da Criança *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="nomeCrianca"
|
||||
value={formData.nomeCrianca}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
placeholder="Nome do seu filho(a)"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Data de Nascimento *</label>
|
||||
<input
|
||||
type="date"
|
||||
name="dataNascimento"
|
||||
value={formData.dataNascimento}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Diagnóstico *</label>
|
||||
<select
|
||||
name="diagnostico"
|
||||
value={formData.diagnostico}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
>
|
||||
<option value="">Selecione</option>
|
||||
<option value="tea_leve">TEA - Nível 1 (Leve)</option>
|
||||
<option value="tea_moderado">TEA - Nível 2 (Moderado)</option>
|
||||
<option value="tea_severo">TEA - Nível 3 (Severo)</option>
|
||||
<option value="suspeita">Suspeita (sem diagnóstico fechado)</option>
|
||||
<option value="outro">Outro</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Quando foi o diagnóstico?</label>
|
||||
<select
|
||||
name="quandoDiagnostico"
|
||||
value={formData.quandoDiagnostico}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
>
|
||||
<option value="">Selecione</option>
|
||||
<option value="menos_6m">Menos de 6 meses</option>
|
||||
<option value="6m_1a">6 meses a 1 ano</option>
|
||||
<option value="1a_2a">1 a 2 anos</option>
|
||||
<option value="mais_2a">Mais de 2 anos</option>
|
||||
<option value="sem_diag">Ainda sem diagnóstico</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Faz alguma terapia atualmente? *</label>
|
||||
<div className="flex gap-4">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="fazTerapia"
|
||||
value="sim"
|
||||
checked={formData.fazTerapia === 'sim'}
|
||||
onChange={handleChange}
|
||||
className="w-4 h-4 text-indigo-600"
|
||||
/>
|
||||
<span>Sim</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
name="fazTerapia"
|
||||
value="nao"
|
||||
checked={formData.fazTerapia === 'nao'}
|
||||
onChange={handleChange}
|
||||
className="w-4 h-4 text-indigo-600"
|
||||
/>
|
||||
<span>Não</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formData.fazTerapia === 'sim' && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-3">Quais terapias?</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{terapias.map(t => (
|
||||
<label key={t} className={`flex items-center gap-2 p-3 border rounded-xl cursor-pointer transition ${
|
||||
formData.quaisTerapias.includes(t) ? 'border-indigo-500 bg-indigo-50' : 'border-gray-200 hover:border-indigo-300'
|
||||
}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.quaisTerapias.includes(t)}
|
||||
onChange={() => handleCheckbox('quaisTerapias', t)}
|
||||
className="w-4 h-4 text-indigo-600 rounded"
|
||||
/>
|
||||
<span className="text-sm">{t}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3 - Prioridades */}
|
||||
{step === 3 && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-xl bg-green-100 text-green-600 flex items-center justify-center">
|
||||
<Target className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">Prioridades Terapêuticas</h2>
|
||||
<p className="text-gray-500">O que você gostaria de trabalhar?</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-3">
|
||||
Selecione até 3 prioridades *
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{prioridadesOpcoes.map(p => (
|
||||
<label key={p} className={`flex items-center gap-2 p-3 border rounded-xl cursor-pointer transition ${
|
||||
formData.prioridades.includes(p) ? 'border-indigo-500 bg-indigo-50' : 'border-gray-200 hover:border-indigo-300'
|
||||
} ${formData.prioridades.length >= 3 && !formData.prioridades.includes(p) ? 'opacity-50 cursor-not-allowed' : ''}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.prioridades.includes(p)}
|
||||
onChange={() => {
|
||||
if (formData.prioridades.length < 3 || formData.prioridades.includes(p)) {
|
||||
handleCheckbox('prioridades', p);
|
||||
}
|
||||
}}
|
||||
disabled={formData.prioridades.length >= 3 && !formData.prioridades.includes(p)}
|
||||
className="w-4 h-4 text-indigo-600 rounded"
|
||||
/>
|
||||
<span className="text-sm">{p}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Descreva os principais desafios do dia a dia
|
||||
</label>
|
||||
<textarea
|
||||
name="desafios"
|
||||
value={formData.desafios}
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition resize-none"
|
||||
placeholder="Conte um pouco sobre as dificuldades que você enfrenta..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-3">
|
||||
Disponibilidade para sessões *
|
||||
</label>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{disponibilidadeOpcoes.map(d => (
|
||||
<label key={d} className={`flex items-center gap-2 p-3 border rounded-xl cursor-pointer transition ${
|
||||
formData.disponibilidade.includes(d) ? 'border-indigo-500 bg-indigo-50' : 'border-gray-200 hover:border-indigo-300'
|
||||
}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.disponibilidade.includes(d)}
|
||||
onChange={() => handleCheckbox('disponibilidade', d)}
|
||||
className="w-4 h-4 text-indigo-600 rounded"
|
||||
/>
|
||||
<span className="text-sm">{d}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-3">
|
||||
Plano de interesse *
|
||||
</label>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
{[
|
||||
{ id: 'essencial', name: 'Essencial', price: 'R$ 297/mês', sessions: '2 sessões' },
|
||||
{ id: 'completo', name: 'Completo', price: 'R$ 497/mês', sessions: '4 sessões', popular: true },
|
||||
{ id: 'intensivo', name: 'Intensivo', price: 'R$ 897/mês', sessions: '8 sessões' },
|
||||
].map(plan => (
|
||||
<label key={plan.id} className={`relative p-4 border-2 rounded-xl cursor-pointer transition ${
|
||||
formData.planoInteresse === plan.id ? 'border-indigo-500 bg-indigo-50' : 'border-gray-200 hover:border-indigo-300'
|
||||
}`}>
|
||||
{plan.popular && (
|
||||
<span className="absolute -top-2 left-4 bg-indigo-600 text-white text-xs px-2 py-0.5 rounded-full">
|
||||
Popular
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
type="radio"
|
||||
name="planoInteresse"
|
||||
value={plan.id}
|
||||
checked={formData.planoInteresse === plan.id}
|
||||
onChange={handleChange}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className="font-semibold text-gray-900">{plan.name}</div>
|
||||
<div className="text-indigo-600 font-bold">{plan.price}</div>
|
||||
<div className="text-sm text-gray-500">{plan.sessions}</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex justify-between mt-8 pt-6 border-t border-gray-200">
|
||||
{step > 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={prevStep}
|
||||
className="flex items-center gap-2 px-6 py-3 text-gray-600 hover:text-gray-900 transition"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
Voltar
|
||||
</button>
|
||||
) : (
|
||||
<Link href="/" className="flex items-center gap-2 px-6 py-3 text-gray-600 hover:text-gray-900 transition">
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
Início
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{step < 3 ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={nextStep}
|
||||
className="flex items-center gap-2 bg-indigo-600 text-white px-8 py-3 rounded-full hover:bg-indigo-700 transition font-medium"
|
||||
>
|
||||
Continuar
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex items-center gap-2 bg-green-600 text-white px-8 py-3 rounded-full hover:bg-green-700 transition font-medium disabled:opacity-50"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<Check className="w-5 h-5" />
|
||||
Finalizar Cadastro
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
103
src/app/cadastro/sucesso/page.tsx
Normal file
103
src/app/cadastro/sucesso/page.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { CheckCircle, Calendar, MessageCircle, FileText, ArrowRight, Sparkles } from 'lucide-react';
|
||||
|
||||
export default function SucessoPage() {
|
||||
const proximosPassos = [
|
||||
{
|
||||
icon: Calendar,
|
||||
title: 'Agendamento da Avaliação',
|
||||
desc: 'Em até 24h, nossa equipe entrará em contato para agendar sua avaliação gratuita com uma terapeuta.',
|
||||
time: '24 horas'
|
||||
},
|
||||
{
|
||||
icon: MessageCircle,
|
||||
title: 'Acesso ao Chat IA',
|
||||
desc: 'Você já pode usar nosso assistente inteligente para tirar dúvidas sobre autismo e desenvolvimento.',
|
||||
time: 'Imediato'
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
title: 'Materiais de Boas-Vindas',
|
||||
desc: 'Enviamos para seu e-mail um guia completo para pais de crianças com TEA.',
|
||||
time: 'Enviado'
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-green-50 to-white">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-100">
|
||||
<div className="max-w-4xl mx-auto px-4 py-4">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-10 h-10 rounded-xl gradient-rainbow flex items-center justify-center">
|
||||
<Sparkles className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-gradient">Íris</span>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="max-w-2xl mx-auto px-4 py-16">
|
||||
{/* Success Icon */}
|
||||
<div className="text-center mb-12">
|
||||
<div className="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6 animate-float">
|
||||
<CheckCircle className="w-14 h-14 text-green-600" />
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Cadastro Realizado com Sucesso! 🎉
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
Bem-vindo(a) à família Íris! Estamos muito felizes em ter você conosco.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Próximos Passos */}
|
||||
<div className="bg-white rounded-2xl shadow-xl p-8 mb-8">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-6">Próximos Passos</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
{proximosPassos.map((passo, i) => (
|
||||
<div key={i} className="flex gap-4">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<passo.icon className="w-6 h-6 text-indigo-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-gray-900">{passo.title}</h3>
|
||||
<span className="text-sm text-indigo-600 bg-indigo-50 px-2 py-1 rounded-full">
|
||||
{passo.time}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-600 mt-1">{passo.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="bg-indigo-600 rounded-2xl p-8 text-center text-white">
|
||||
<h3 className="text-xl font-bold mb-2">Enquanto isso, que tal conhecer nosso assistente?</h3>
|
||||
<p className="text-indigo-200 mb-6">
|
||||
Tire suas primeiras dúvidas com nossa IA especializada em autismo
|
||||
</p>
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="inline-flex items-center gap-2 bg-white text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-indigo-50 transition"
|
||||
>
|
||||
Acessar Meu Painel
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Contato */}
|
||||
<div className="text-center mt-8 text-gray-500">
|
||||
<p>Dúvidas? Entre em contato:</p>
|
||||
<p className="font-medium text-gray-700">contato@iris.com.br | (11) 99999-9999</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
342
src/app/dashboard/page.tsx
Normal file
342
src/app/dashboard/page.tsx
Normal file
@@ -0,0 +1,342 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { useSession, signOut } from 'next-auth/react';
|
||||
import {
|
||||
Sparkles, Home, MessageCircle, Calendar, FileText, Settings, LogOut,
|
||||
Video, Bell, ChevronRight, Star, Send, Brain, TrendingUp,
|
||||
Clock, Award, Menu, X, Phone
|
||||
} from 'lucide-react';
|
||||
|
||||
interface Message {
|
||||
role: 'user' | 'ai';
|
||||
text: string;
|
||||
time: string;
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { data: session } = useSession();
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [messages, setMessages] = useState<Message[]>([
|
||||
{ role: 'ai', text: 'Olá! Sou a assistente da Íris 🌈 Como posso ajudar você hoje?', time: '10:00' },
|
||||
]);
|
||||
const [inputMessage, setInputMessage] = useState('');
|
||||
const [isTyping, setIsTyping] = useState(false);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
scrollToBottom();
|
||||
}, [messages]);
|
||||
|
||||
const aiResponses = [
|
||||
'Entendo sua preocupação! Isso é muito comum em crianças com TEA. Vamos trabalhar juntos algumas estratégias que podem ajudar.',
|
||||
'Ótima pergunta! Baseado na análise comportamental aplicada (ABA), recomendo que você tente dividir a tarefa em pequenos passos e use reforço positivo após cada conquista.',
|
||||
'Isso pode ser desafiador, mas existem técnicas que funcionam muito bem. Já tentou usar histórias sociais ou antecipação com apoio visual?',
|
||||
'Que bom que você trouxe isso! Esse é um dos pontos que podemos aprofundar na próxima sessão com a Dra. Marina. Mas enquanto isso, você pode tentar...',
|
||||
'Compreendo como isso pode ser difícil no dia a dia. Uma estratégia que muitos pais relatam sucesso é criar uma rotina visual com imagens.',
|
||||
];
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
if (!inputMessage.trim()) return;
|
||||
|
||||
const now = new Date();
|
||||
const time = now.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
|
||||
|
||||
setMessages(prev => [...prev, { role: 'user', text: inputMessage, time }]);
|
||||
setInputMessage('');
|
||||
setIsTyping(true);
|
||||
|
||||
// Simula resposta da IA
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
|
||||
const aiResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)];
|
||||
const responseTime = new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
|
||||
|
||||
setIsTyping(false);
|
||||
setMessages(prev => [...prev, { role: 'ai', text: aiResponse, time: responseTime }]);
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSendMessage();
|
||||
}
|
||||
};
|
||||
|
||||
const stats = [
|
||||
{ label: 'Sessões Realizadas', value: '12', icon: Video, color: 'bg-blue-100 text-blue-600' },
|
||||
{ label: 'Próxima Sessão', value: 'Amanhã', icon: Calendar, color: 'bg-green-100 text-green-600' },
|
||||
{ label: 'Metas Atingidas', value: '8/10', icon: Award, color: 'bg-yellow-100 text-yellow-600' },
|
||||
{ label: 'Dias de Streak', value: '15', icon: TrendingUp, color: 'bg-purple-100 text-purple-600' },
|
||||
];
|
||||
|
||||
const progressItems = [
|
||||
{ name: 'Comunicação', progress: 75, color: 'bg-blue-500' },
|
||||
{ name: 'Habilidades Sociais', progress: 60, color: 'bg-green-500' },
|
||||
{ name: 'Autonomia', progress: 45, color: 'bg-yellow-500' },
|
||||
{ name: 'Regulação Emocional', progress: 80, color: 'bg-purple-500' },
|
||||
];
|
||||
|
||||
const proximasAtividades = [
|
||||
{ tipo: 'Sessão', titulo: 'Teleterapia com Dra. Marina', data: 'Amanhã, 15:00', icon: Video },
|
||||
{ tipo: 'Tarefa', titulo: 'Praticar rotina visual de manhã', data: 'Diário', icon: FileText },
|
||||
{ tipo: 'Lembrete', titulo: 'Reunião de grupo de pais', data: 'Sábado, 10:00', icon: Bell },
|
||||
];
|
||||
|
||||
const handleLogout = async () => {
|
||||
await signOut({ callbackUrl: '/' });
|
||||
};
|
||||
|
||||
// Pegar primeiro nome
|
||||
const firstName = session?.user?.name?.split(' ')[0] || 'Usuário';
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex">
|
||||
{/* Sidebar */}
|
||||
<aside className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-gray-200 transform transition-transform duration-300 lg:translate-x-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>
|
||||
<div className="flex items-center gap-2 p-6 border-b border-gray-100">
|
||||
<div className="w-10 h-10 rounded-xl gradient-rainbow flex items-center justify-center">
|
||||
<Sparkles className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-gradient">Íris</span>
|
||||
</div>
|
||||
|
||||
<nav className="p-4 space-y-2">
|
||||
<a href="#" className="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-xl font-medium">
|
||||
<Home className="w-5 h-5" />
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="#chat" className="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition">
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
Chat IA
|
||||
</a>
|
||||
<Link href="/dashboard/agenda" className="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition">
|
||||
<Calendar className="w-5 h-5" />
|
||||
Agenda
|
||||
</Link>
|
||||
<Link href="/dashboard/relatorios" className="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition">
|
||||
<FileText className="w-5 h-5" />
|
||||
Relatórios
|
||||
</Link>
|
||||
<Link href="/dashboard/configuracoes" className="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition">
|
||||
<Settings className="w-5 h-5" />
|
||||
Configurações
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-100">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition w-full"
|
||||
>
|
||||
<LogOut className="w-5 h-5" />
|
||||
Sair
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Overlay */}
|
||||
{sidebarOpen && (
|
||||
<div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setSidebarOpen(false)} />
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 lg:ml-64">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 px-4 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="lg:hidden" onClick={() => setSidebarOpen(true)}>
|
||||
<Menu className="w-6 h-6" />
|
||||
</button>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-gray-900">Olá, {firstName}! 👋</h1>
|
||||
<p className="text-sm text-gray-500">Bem-vindo ao seu dashboard</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="relative p-2 text-gray-400 hover:text-gray-600">
|
||||
<Bell className="w-6 h-6" />
|
||||
<span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
</button>
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white font-semibold">
|
||||
{firstName.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-4 lg:p-8">
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||
{stats.map((stat, i) => (
|
||||
<div key={i} className="bg-white rounded-xl p-4 shadow-sm">
|
||||
<div className={`w-10 h-10 rounded-lg ${stat.color} flex items-center justify-center mb-3`}>
|
||||
<stat.icon className="w-5 h-5" />
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-gray-900">{stat.value}</p>
|
||||
<p className="text-sm text-gray-500">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-8">
|
||||
{/* Left Column */}
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
{/* Terapeuta Card */}
|
||||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||
<h2 className="text-lg font-bold text-gray-900 mb-4">Sua Terapeuta</h2>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center text-white text-xl font-bold">
|
||||
MR
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900">Dra. Marina Rodrigues</h3>
|
||||
<p className="text-sm text-gray-500">BCBA • Especialista em TEA</p>
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
{[1,2,3,4,5].map(i => <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />)}
|
||||
<span className="text-sm text-gray-500 ml-1">(127 avaliações)</span>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-4">
|
||||
<button className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition">
|
||||
<Video className="w-4 h-4" />
|
||||
Iniciar Sessão
|
||||
</button>
|
||||
<button className="flex items-center gap-2 border border-gray-300 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 transition">
|
||||
<Phone className="w-4 h-4" />
|
||||
Ligar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progresso */}
|
||||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-bold text-gray-900">Progresso</h2>
|
||||
<Link href="/dashboard/relatorios" className="text-sm text-indigo-600 hover:underline flex items-center gap-1">
|
||||
Ver relatório completo
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{progressItems.map((item, i) => (
|
||||
<div key={i}>
|
||||
<div className="flex justify-between mb-1">
|
||||
<span className="text-sm font-medium text-gray-700">{item.name}</span>
|
||||
<span className="text-sm text-gray-500">{item.progress}%</span>
|
||||
</div>
|
||||
<div className="h-2 bg-gray-200 rounded-full">
|
||||
<div
|
||||
className={`h-2 ${item.color} rounded-full transition-all`}
|
||||
style={{ width: `${item.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Próximas Atividades */}
|
||||
<div className="bg-white rounded-xl shadow-sm p-6">
|
||||
<h2 className="text-lg font-bold text-gray-900 mb-4">Próximas Atividades</h2>
|
||||
<div className="space-y-3">
|
||||
{proximasAtividades.map((ativ, i) => (
|
||||
<div key={i} className="flex items-center gap-4 p-3 bg-gray-50 rounded-lg">
|
||||
<div className="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center text-indigo-600">
|
||||
<ativ.icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-medium text-gray-900">{ativ.titulo}</p>
|
||||
<p className="text-sm text-gray-500">{ativ.data}</p>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Chat */}
|
||||
<div className="lg:col-span-1">
|
||||
<div id="chat" className="bg-white rounded-xl shadow-sm h-[600px] flex flex-col">
|
||||
<div className="p-4 border-b border-gray-100">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full gradient-rainbow flex items-center justify-center">
|
||||
<Brain className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">Assistente Íris</h3>
|
||||
<p className="text-xs text-green-500 flex items-center gap-1">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full" />
|
||||
Online
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{messages.map((msg, i) => (
|
||||
<div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
|
||||
<div className={`max-w-[85%] ${msg.role === 'user' ? 'order-2' : ''}`}>
|
||||
<div className={`p-3 rounded-2xl ${
|
||||
msg.role === 'user'
|
||||
? 'bg-indigo-600 text-white rounded-br-md'
|
||||
: 'bg-gray-100 text-gray-800 rounded-bl-md'
|
||||
}`}>
|
||||
{msg.text}
|
||||
</div>
|
||||
<p className={`text-xs text-gray-400 mt-1 ${msg.role === 'user' ? 'text-right' : ''}`}>
|
||||
{msg.time}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{isTyping && (
|
||||
<div className="flex justify-start">
|
||||
<div className="bg-gray-100 p-3 rounded-2xl rounded-bl-md">
|
||||
<div className="flex gap-1">
|
||||
<span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
|
||||
<span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
|
||||
<span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
<div className="p-4 border-t border-gray-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={inputMessage}
|
||||
onChange={(e) => setInputMessage(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder="Digite sua dúvida..."
|
||||
className="flex-1 px-4 py-2 bg-gray-100 rounded-full outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
<button
|
||||
onClick={handleSendMessage}
|
||||
className="w-10 h-10 bg-indigo-600 text-white rounded-full flex items-center justify-center hover:bg-indigo-700 transition"
|
||||
>
|
||||
<Send className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +1,57 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
--iris-purple: #6366f1;
|
||||
--iris-purple-dark: #4f46e5;
|
||||
--iris-blue: #3b82f6;
|
||||
--iris-green: #10b981;
|
||||
--iris-yellow: #f59e0b;
|
||||
--iris-red: #ef4444;
|
||||
--iris-rainbow: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #3b82f6, #8b5cf6);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.gradient-rainbow {
|
||||
background: var(--iris-rainbow);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #3b82f6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chat-bubble::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 10px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.chat-bubble-right::after {
|
||||
left: auto;
|
||||
right: 20px;
|
||||
border-top-color: #6366f1;
|
||||
}
|
||||
|
||||
@@ -1,20 +1,14 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { Providers } from "@/components/providers";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Íris | Teleterapia ABA para Autismo",
|
||||
description: "Conectamos famílias de crianças com TEA a terapeutas certificados BCBA. Teleterapia de qualidade + assistente IA 24/7.",
|
||||
keywords: ["autismo", "TEA", "terapia ABA", "BCBA", "teleterapia", "crianças especiais"],
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -23,11 +17,9 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
<html lang="pt-BR">
|
||||
<body className={inter.className}>
|
||||
<Providers>{children}</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
151
src/app/login/page.tsx
Normal file
151
src/app/login/page.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { signIn } from 'next-auth/react';
|
||||
import { Sparkles, Mail, Lock, ArrowRight, Eye, EyeOff } from 'lucide-react';
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
email: '',
|
||||
password: '',
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const result = await signIn('credentials', {
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
redirect: false,
|
||||
});
|
||||
|
||||
if (result?.error) {
|
||||
setError('E-mail ou senha inválidos');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push('/dashboard');
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
setError('Erro ao fazer login. Tente novamente.');
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-indigo-50 to-white flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="p-4">
|
||||
<div className="max-w-md mx-auto">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-10 h-10 rounded-xl gradient-rainbow flex items-center justify-center">
|
||||
<Sparkles className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-gradient">Íris</span>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Login Form */}
|
||||
<div className="flex-1 flex items-center justify-center px-4 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-white rounded-2xl shadow-xl p-8">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-2">Bem-vindo de volta!</h1>
|
||||
<p className="text-gray-500">Entre na sua conta para continuar</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-red-700 text-center">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">E-mail</label>
|
||||
<div className="relative">
|
||||
<Mail className="w-5 h-5 text-gray-400 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
required
|
||||
className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
placeholder="seu@email.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Senha</label>
|
||||
<div className="relative">
|
||||
<Lock className="w-5 h-5 text-gray-400 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
||||
required
|
||||
className="w-full pl-12 pr-12 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" className="w-4 h-4 text-indigo-600 rounded" />
|
||||
<span className="text-sm text-gray-600">Lembrar de mim</span>
|
||||
</label>
|
||||
<a href="#" className="text-sm text-indigo-600 hover:underline">
|
||||
Esqueceu a senha?
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-indigo-600 text-white py-3 rounded-xl hover:bg-indigo-700 transition font-medium flex items-center justify-center gap-2 disabled:opacity-50"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
Entrar
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-gray-500">
|
||||
Não tem uma conta?{' '}
|
||||
<Link href="/cadastro" className="text-indigo-600 font-medium hover:underline">
|
||||
Cadastre-se
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
631
src/app/page.tsx
631
src/app/page.tsx
@@ -1,65 +1,582 @@
|
||||
import Image from "next/image";
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import {
|
||||
MessageCircle, Video, Brain, Heart, Shield, Clock,
|
||||
ChevronRight, ChevronDown, Star, Check, Menu, X, Sparkles,
|
||||
Users, Calendar, Award, ArrowRight, Zap, Phone, Mail,
|
||||
Bot, Cpu, BarChart3, Mic, Camera, BookOpen, Target,
|
||||
Lightbulb, TrendingUp, Play, Globe, DollarSign, Headphones,
|
||||
Gamepad2, ClipboardCheck, UserCheck, MessageSquare, LineChart,
|
||||
GraduationCap, Home as HomeIcon
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [openFaq, setOpenFaq] = useState<number | null>(null);
|
||||
|
||||
const howItWorks = [
|
||||
{
|
||||
num: '01',
|
||||
title: 'Cadastro Simples',
|
||||
desc: 'Preencha os dados da família e conte sobre seu filho em 5 minutos.',
|
||||
icon: ClipboardCheck,
|
||||
detail: 'Idade, diagnóstico, principais desafios e prioridades'
|
||||
},
|
||||
{
|
||||
num: '02',
|
||||
title: 'Avaliação Inteligente',
|
||||
desc: 'Nossa IA faz perguntas adaptativas para entender as necessidades específicas.',
|
||||
icon: Brain,
|
||||
detail: '15 minutos de questionário personalizado'
|
||||
},
|
||||
{
|
||||
num: '03',
|
||||
title: 'Sessão com BCBA',
|
||||
desc: 'Videochamada com terapeuta certificado para validar e criar o plano.',
|
||||
icon: UserCheck,
|
||||
detail: 'Profissional com mestrado em Análise do Comportamento'
|
||||
},
|
||||
{
|
||||
num: '04',
|
||||
title: 'Atividades Diárias',
|
||||
desc: 'Criança acessa jogos e exercícios terapêuticos guiados pela IA.',
|
||||
icon: Gamepad2,
|
||||
detail: '15-30 min/dia de atividades gamificadas'
|
||||
},
|
||||
{
|
||||
num: '05',
|
||||
title: 'Suporte 24/7',
|
||||
desc: 'Pais tiram dúvidas a qualquer hora com nossa IA especializada em ABA.',
|
||||
icon: MessageSquare,
|
||||
detail: '"Meu filho está em crise, o que faço?"'
|
||||
},
|
||||
{
|
||||
num: '06',
|
||||
title: 'Evolução Contínua',
|
||||
desc: 'Relatórios semanais + supervisão mensal do BCBA para ajustar o plano.',
|
||||
icon: LineChart,
|
||||
detail: 'Dashboard com métricas e progresso em tempo real'
|
||||
},
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: Bot,
|
||||
title: 'IA Terapeuta 24/7',
|
||||
desc: 'Assistente treinado em ABA disponível a qualquer hora para orientar os pais e interagir com a criança.',
|
||||
},
|
||||
{
|
||||
icon: GraduationCap,
|
||||
title: 'BCBAs Certificados',
|
||||
desc: 'Profissionais com mestrado supervisionam o tratamento e garantem qualidade clínica.',
|
||||
},
|
||||
{
|
||||
icon: Gamepad2,
|
||||
title: 'Atividades Gamificadas',
|
||||
desc: 'Jogos e exercícios baseados em ABA que a criança realmente quer fazer.',
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: 'Relatórios Automáticos',
|
||||
desc: 'Dashboard em tempo real com progresso, métricas e insights gerados por IA.',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Treinamento de Pais',
|
||||
desc: 'Aprenda técnicas ABA para aplicar no dia a dia e potencializar resultados.',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'Seguro e Privado',
|
||||
desc: 'Dados criptografados, conformidade LGPD e privacidade garantida.',
|
||||
},
|
||||
];
|
||||
|
||||
const whatWeHelp = [
|
||||
'Desenvolver comunicação e fala',
|
||||
'Reduzir crises e comportamentos desafiadores',
|
||||
'Melhorar habilidades sociais',
|
||||
'Aumentar autonomia nas atividades diárias',
|
||||
'Estabelecer rotinas e transições',
|
||||
'Trabalhar seletividade alimentar',
|
||||
'Treinar habilidades de brincar',
|
||||
'Preparar para ambiente escolar',
|
||||
];
|
||||
|
||||
const stats = [
|
||||
{ value: '94%', label: 'das famílias relatam melhoria em 60 dias' },
|
||||
{ value: '24/7', label: 'suporte disponível via IA' },
|
||||
{ value: '85%', label: 'mais acessível que clínicas tradicionais' },
|
||||
{ value: '48h', label: 'para começar (sem lista de espera)' },
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
text: 'A combinação de IA com terapeuta humano é perfeita. A IA está sempre disponível quando preciso de ajuda rápida, e a BCBA garante que estamos no caminho certo. Meu filho evoluiu muito em 3 meses!',
|
||||
name: 'Fernanda',
|
||||
location: 'São Paulo, SP',
|
||||
child: 'mãe do Davi, 4 anos'
|
||||
},
|
||||
{
|
||||
text: 'Moramos no interior onde não tem BCBA. A IrisTEA trouxe terapia de qualidade para nossa casa. As atividades são tão divertidas que meu filho pede para fazer! Os relatórios me ajudam a ver a evolução.',
|
||||
name: 'Carlos',
|
||||
location: 'Chapecó, SC',
|
||||
child: 'pai do Miguel, 6 anos'
|
||||
},
|
||||
{
|
||||
text: 'Pagávamos R$3.000 em clínica e esperamos 8 meses na fila. Com a IrisTEA começamos em 2 dias, pagando 1/6 do valor. A IA responde minhas dúvidas às 3 da manhã quando meu filho não dorme.',
|
||||
name: 'Juliana',
|
||||
location: 'Recife, PE',
|
||||
child: 'mãe do Théo, 5 anos'
|
||||
},
|
||||
];
|
||||
|
||||
const plans = [
|
||||
{
|
||||
name: 'Essencial',
|
||||
price: '297',
|
||||
features: [
|
||||
'Acesso à IA 24/7',
|
||||
'Atividades ilimitadas',
|
||||
'1 sessão BCBA/mês (50 min)',
|
||||
'Plano terapêutico personalizado',
|
||||
'Relatórios semanais',
|
||||
'Chat de suporte'
|
||||
],
|
||||
bcba: '1 sessão/mês',
|
||||
popular: false
|
||||
},
|
||||
{
|
||||
name: 'Completo',
|
||||
price: '497',
|
||||
features: [
|
||||
'Tudo do Essencial +',
|
||||
'2 sessões BCBA/mês',
|
||||
'Treinamento de pais',
|
||||
'Grupo de apoio semanal',
|
||||
'Materiais exclusivos',
|
||||
'Relatórios para escola/médico'
|
||||
],
|
||||
bcba: '2 sessões/mês',
|
||||
popular: true
|
||||
},
|
||||
{
|
||||
name: 'Intensivo',
|
||||
price: '897',
|
||||
features: [
|
||||
'Tudo do Completo +',
|
||||
'4 sessões BCBA/mês',
|
||||
'Equipe multidisciplinar (fono, TO)',
|
||||
'Suporte prioritário',
|
||||
'Sessões extras sob demanda',
|
||||
'Acompanhamento escolar'
|
||||
],
|
||||
bcba: '4 sessões/mês',
|
||||
popular: false
|
||||
},
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
q: 'Como funciona a combinação de IA com terapeuta humano?',
|
||||
a: 'A IA cuida do dia a dia: atividades com a criança, suporte 24/7 aos pais, coleta de dados e relatórios. O BCBA (terapeuta humano certificado) faz a avaliação inicial, cria o plano terapêutico, supervisiona o progresso mensalmente e faz ajustes. É o melhor dos dois mundos: disponibilidade da IA + expertise humana.'
|
||||
},
|
||||
{
|
||||
q: 'Quem são os BCBAs da IrisTEA?',
|
||||
a: 'Nossos BCBAs são analistas do comportamento com mestrado ou doutorado, certificados pelo BACB (Behavior Analyst Certification Board). Todos têm mais de 1.000 horas de experiência supervisionada em TEA. Você conhece seu BCBA na primeira sessão e ele acompanha sua família durante todo o tratamento.'
|
||||
},
|
||||
{
|
||||
q: 'Para qual idade funciona?',
|
||||
a: 'Atendemos crianças de 2 a 12 anos. As atividades da IA são adaptadas automaticamente para cada faixa etária e nível de desenvolvimento. A intervenção precoce (2-6 anos) costuma ter os melhores resultados, mas crianças mais velhas também evoluem muito.'
|
||||
},
|
||||
{
|
||||
q: 'Precisa de diagnóstico fechado?',
|
||||
a: 'Recomendamos ter diagnóstico, mas aceitamos famílias com suspeita de TEA em processo de avaliação. Nossa IA e BCBAs podem ajudar a identificar áreas de atenção para compartilhar com o médico.'
|
||||
},
|
||||
{
|
||||
q: 'Quanto tempo por dia meu filho precisa usar?',
|
||||
a: 'Recomendamos 15-30 minutos de atividades na plataforma, mas isso é flexível. As atividades são gamificadas e a maioria das crianças pede para fazer mais! O importante é a consistência: um pouco todo dia é melhor que muito de vez em quando.'
|
||||
},
|
||||
{
|
||||
q: 'Como é diferente de clínicas tradicionais?',
|
||||
a: 'Preço: R$ 297-897 vs R$ 2.000-5.000. Espera: 48h vs 3-12 meses. Acesso: 24/7 vs horário comercial. Localização: qualquer lugar do Brasil vs sua cidade. Relatórios: automáticos em tempo real vs manuais mensais. A qualidade clínica é a mesma porque temos BCBAs certificados.'
|
||||
},
|
||||
{
|
||||
q: 'Vocês têm convênio com plano de saúde?',
|
||||
a: 'Ainda não, mas estamos em processo de credenciamento com os principais planos. Por enquanto, oferecemos recibo para reembolso. Muitos planos reembolsam 50-80% do valor de terapia ABA.'
|
||||
},
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header */}
|
||||
<header className="fixed top-0 w-full bg-white/95 backdrop-blur-md z-50 border-b border-gray-100">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<div className="flex items-center gap-2">
|
||||
<Image src="/icon-iristea.svg" alt="IrisTEA" width={40} height={40} className="rounded-xl" />
|
||||
<span className="text-2xl font-bold">
|
||||
<span className="text-gray-900">Iris</span>
|
||||
<span className="text-gradient">TEA</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<a href="#como-funciona" className="text-gray-600 hover:text-indigo-600 transition">Como Funciona</a>
|
||||
<a href="#planos" className="text-gray-600 hover:text-indigo-600 transition">Planos</a>
|
||||
<a href="#depoimentos" className="text-gray-600 hover:text-indigo-600 transition">Depoimentos</a>
|
||||
<a href="#faq" className="text-gray-600 hover:text-indigo-600 transition">FAQ</a>
|
||||
<Link href="/login" className="text-gray-600 hover:text-indigo-600 transition">Entrar</Link>
|
||||
<Link href="/cadastro" className="bg-indigo-600 text-white px-5 py-2 rounded-full hover:bg-indigo-700 transition font-medium">
|
||||
Começar Agora
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
|
||||
{isMenuOpen ? <X /> : <Menu />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden bg-white border-t border-gray-100 p-4">
|
||||
<nav className="flex flex-col gap-4">
|
||||
<a href="#como-funciona" className="text-gray-600">Como Funciona</a>
|
||||
<a href="#planos" className="text-gray-600">Planos</a>
|
||||
<a href="#faq" className="text-gray-600">FAQ</a>
|
||||
<Link href="/login" className="text-gray-600">Entrar</Link>
|
||||
<Link href="/cadastro" className="bg-indigo-600 text-white px-5 py-2 rounded-full text-center font-medium">
|
||||
Começar Agora
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* Hero */}
|
||||
<section className="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-b from-indigo-50 via-white to-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center max-w-4xl mx-auto">
|
||||
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-indigo-100 to-purple-100 text-indigo-700 px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
IA + Terapeutas Certificados = Resultado
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight mb-6">
|
||||
Terapia ABA acessível para seu filho com{' '}
|
||||
<span className="text-gradient">autismo</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
Combinamos <strong>inteligência artificial 24/7</strong> com <strong>terapeutas BCBA certificados</strong> para oferecer tratamento de qualidade por uma fração do preço das clínicas tradicionais.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link href="/cadastro" className="bg-indigo-600 text-white px-8 py-4 rounded-full hover:bg-indigo-700 transition font-medium text-lg flex items-center justify-center gap-2 shadow-lg shadow-indigo-200">
|
||||
Começar Avaliação Gratuita
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</Link>
|
||||
<a href="#como-funciona" className="border-2 border-gray-300 text-gray-700 px-8 py-4 rounded-full hover:border-indigo-600 hover:text-indigo-600 transition font-medium text-lg flex items-center justify-center gap-2">
|
||||
<Play className="w-5 h-5" />
|
||||
Ver Como Funciona
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12 pt-8 border-t border-gray-200">
|
||||
{stats.map((stat, i) => (
|
||||
<div key={i} className="text-center">
|
||||
<div className="text-2xl md:text-3xl font-bold text-indigo-600">{stat.value}</div>
|
||||
<div className="text-sm text-gray-500">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How it Works - Step by Step */}
|
||||
<section id="como-funciona" className="py-20 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Como a IrisTEA funciona
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
Um processo simples em 6 passos para transformar o desenvolvimento do seu filho
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{howItWorks.map((step, i) => (
|
||||
<div key={i} className="relative bg-gradient-to-br from-gray-50 to-indigo-50 rounded-2xl p-8 hover:shadow-lg transition">
|
||||
<div className="text-5xl font-bold text-indigo-100 absolute top-4 right-4">{step.num}</div>
|
||||
<div className="w-14 h-14 rounded-xl bg-indigo-600 text-white flex items-center justify-center mb-6">
|
||||
<step.icon className="w-7 h-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">{step.title}</h3>
|
||||
<p className="text-gray-600 mb-3">{step.desc}</p>
|
||||
<p className="text-sm text-indigo-600 font-medium">{step.detail}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section className="py-20 bg-indigo-600 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||||
O que você recebe
|
||||
</h2>
|
||||
<p className="text-xl text-indigo-200">
|
||||
Tudo que sua família precisa em uma única plataforma
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{features.map((feature, i) => (
|
||||
<div key={i} className="bg-white/10 backdrop-blur rounded-2xl p-6 hover:bg-white/20 transition">
|
||||
<div className="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center mb-4">
|
||||
<feature.icon className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
|
||||
<p className="text-indigo-200">{feature.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What we help with */}
|
||||
<section className="py-20 bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
|
||||
Trabalhamos os principais desafios do TEA
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-8">
|
||||
Nossa IA e BCBAs são especializados nos desafios mais comuns que famílias enfrentam no dia a dia. Criamos estratégias personalizadas baseadas em ABA para cada situação.
|
||||
</p>
|
||||
<Link href="/cadastro" className="inline-flex items-center gap-2 bg-indigo-600 text-white px-6 py-3 rounded-full hover:bg-indigo-700 transition font-medium">
|
||||
Começar Avaliação Gratuita
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{whatWeHelp.map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-3 bg-white p-4 rounded-xl shadow-sm">
|
||||
<div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<Check className="w-4 h-4 text-green-600" />
|
||||
</div>
|
||||
<span className="text-gray-700">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<section id="depoimentos" className="py-20 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Famílias reais, resultados reais
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{testimonials.map((t, i) => (
|
||||
<div key={i} className="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-2xl p-8">
|
||||
<div className="flex items-center gap-1 mb-4">
|
||||
{[1,2,3,4,5].map(j => (
|
||||
<Star key={j} className="w-5 h-5 fill-yellow-400 text-yellow-400" />
|
||||
))}
|
||||
</div>
|
||||
<p className="text-gray-700 mb-6">“{t.text}”</p>
|
||||
<div>
|
||||
<p className="font-semibold text-gray-900">{t.name}</p>
|
||||
<p className="text-sm text-gray-500">{t.child}</p>
|
||||
<p className="text-sm text-gray-400">{t.location}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing */}
|
||||
<section id="planos" className="py-20 bg-gradient-to-b from-white to-indigo-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 bg-green-100 text-green-700 px-4 py-2 rounded-full text-sm font-medium mb-4">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
Até 85% mais acessível que clínicas tradicionais
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Planos para todas as famílias
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600">
|
||||
Sem taxa de adesão. Cancele quando quiser.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{plans.map((plan, i) => (
|
||||
<div key={i} className={`rounded-2xl p-8 ${plan.popular ? 'bg-indigo-600 text-white ring-4 ring-indigo-600 ring-offset-4 scale-105' : 'bg-white border-2 border-gray-200'}`}>
|
||||
{plan.popular && (
|
||||
<span className="bg-yellow-400 text-yellow-900 text-sm font-medium px-3 py-1 rounded-full">
|
||||
Mais Popular
|
||||
</span>
|
||||
)}
|
||||
<h3 className={`text-2xl font-bold mt-4 ${plan.popular ? 'text-white' : 'text-gray-900'}`}>
|
||||
{plan.name}
|
||||
</h3>
|
||||
<p className={`text-sm ${plan.popular ? 'text-indigo-200' : 'text-gray-500'}`}>
|
||||
{plan.bcba}
|
||||
</p>
|
||||
<div className="my-6">
|
||||
<span className={`text-5xl font-bold ${plan.popular ? 'text-white' : 'text-gray-900'}`}>
|
||||
R${plan.price}
|
||||
</span>
|
||||
<span className={plan.popular ? 'text-indigo-200' : 'text-gray-500'}>/mês</span>
|
||||
</div>
|
||||
<ul className="space-y-3 mb-8">
|
||||
{plan.features.map((f, j) => (
|
||||
<li key={j} className="flex items-start gap-2">
|
||||
<Check className={`w-5 h-5 mt-0.5 ${plan.popular ? 'text-indigo-200' : 'text-indigo-600'}`} />
|
||||
<span className={plan.popular ? 'text-indigo-100' : 'text-gray-600'}>{f}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link
|
||||
href="/cadastro"
|
||||
className={`block text-center py-3 rounded-full font-medium transition ${
|
||||
plan.popular
|
||||
? 'bg-white text-indigo-600 hover:bg-indigo-50'
|
||||
: 'bg-indigo-600 text-white hover:bg-indigo-700'
|
||||
}`}
|
||||
>
|
||||
Começar Agora
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-12 p-6 bg-white rounded-2xl shadow-sm max-w-2xl mx-auto">
|
||||
<p className="text-gray-600">
|
||||
<strong>Comparativo:</strong> Clínicas tradicionais cobram R$ 2.000-5.000/mês com lista de espera de 3-12 meses.
|
||||
Com a IrisTEA você começa em 48h pagando até 85% menos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ */}
|
||||
<section id="faq" className="py-20 bg-white">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Perguntas Frequentes
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{faqs.map((faq, i) => (
|
||||
<div key={i} className="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button
|
||||
onClick={() => setOpenFaq(openFaq === i ? null : i)}
|
||||
className="w-full flex items-center justify-between p-6 text-left bg-white hover:bg-gray-50 transition"
|
||||
>
|
||||
<span className="font-semibold text-gray-900 pr-4">{faq.q}</span>
|
||||
<ChevronDown className={`w-5 h-5 text-gray-500 transition-transform flex-shrink-0 ${openFaq === i ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
{openFaq === i && (
|
||||
<div className="px-6 pb-6 text-gray-600">
|
||||
{faq.a}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="py-20 bg-gradient-to-r from-indigo-600 to-purple-600">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
|
||||
Seu filho merece o melhor tratamento
|
||||
</h2>
|
||||
<p className="text-xl text-indigo-200 mb-8">
|
||||
Avaliação gratuita com nossa IA + primeira sessão com BCBA.
|
||||
Sem compromisso. Comece em 48 horas.
|
||||
</p>
|
||||
<Link href="/cadastro" className="inline-flex items-center gap-2 bg-white text-indigo-600 px-8 py-4 rounded-full hover:bg-indigo-50 transition font-medium text-lg shadow-xl">
|
||||
<Sparkles className="w-5 h-5" />
|
||||
Começar Avaliação Gratuita
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-gray-900 text-gray-400 py-12">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid md:grid-cols-4 gap-8 mb-8">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Image src="/icon-iristea.svg" alt="IrisTEA" width={40} height={40} className="rounded-xl" />
|
||||
<span className="text-2xl font-bold text-white">IrisTEA</span>
|
||||
</div>
|
||||
<p className="text-sm">
|
||||
Terapia ABA acessível combinando inteligência artificial com terapeutas certificados.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-4">Plataforma</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li><a href="#como-funciona" className="hover:text-white transition">Como Funciona</a></li>
|
||||
<li><a href="#planos" className="hover:text-white transition">Planos</a></li>
|
||||
<li><a href="#" className="hover:text-white transition">Para Profissionais</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-4">Recursos</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li><a href="#" className="hover:text-white transition">Blog</a></li>
|
||||
<li><a href="#" className="hover:text-white transition">Guias para Pais</a></li>
|
||||
<li><a href="#faq" className="hover:text-white transition">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-4">Contato</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4" />
|
||||
contato@iristea.com.br
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
Chat 24/7 no app
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center text-sm">
|
||||
<p>© 2026 IrisTEA. Todos os direitos reservados.</p>
|
||||
<div className="flex gap-6 mt-4 md:mt-0">
|
||||
<a href="#" className="hover:text-white transition">Privacidade</a>
|
||||
<a href="#" className="hover:text-white transition">Termos</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user