Update src/app/onboarding/page.tsx

This commit is contained in:
2026-03-11 20:10:39 +00:00
parent a647371658
commit 69d14ea498

View File

@@ -4,9 +4,9 @@ import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ChevronRight, User, Heart } from 'lucide-react';
import { ChevronRight, User, Users } from 'lucide-react';
interface ProfileData {
interface UserProfile {
name: string;
gender: string;
height: string;
@@ -14,50 +14,49 @@ interface ProfileData {
age: string;
}
const GENDERS = ['Masculino', 'Feminino', 'Outro'];
type OnboardingStep = 'basic' | 'biometric' | 'complete';
export default function OnboardingPage() {
const [step, setStep] = useState<'biometric' | 'metrics'>('biometric');
const [formData, setFormData] = useState<ProfileData>({
const [step, setStep] = useState<OnboardingStep>('basic');
const [profile, setProfile] = useState<UserProfile>({
name: '',
gender: '',
height: '',
weight: '',
age: ''
});
const [savedProfile, setSavedProfile] = useState<ProfileData | null>(null);
const handleBiometricChange = (field: keyof Omit<ProfileData, 'height' | 'weight' | 'age'>, value: string) => {
setFormData(prev => ({ ...prev, [field]: value }));
const handleBasicChange = (field: keyof Pick<UserProfile, 'name' | 'gender'>, value: string) => {
setProfile(prev => ({ ...prev, [field]: value }));
};
const handleMetricsChange = (field: 'height' | 'weight' | 'age', value: string) => {
setFormData(prev => ({ ...prev, [field]: value }));
const handleBiometricChange = (field: keyof Pick<UserProfile, 'height' | 'weight' | 'age'>, value: string) => {
setProfile(prev => ({ ...prev, [field]: value }));
};
const handleBasicSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (profile.name && profile.gender) {
setStep('biometric');
}
};
const handleBiometricSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (formData.name && formData.gender) {
setStep('metrics');
if (profile.height && profile.weight && profile.age) {
saveProfile();
setStep('complete');
}
};
const handleMetricsSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (formData.height && formData.weight && formData.age) {
// Save to localStorage
localStorage.setItem('userProfile', JSON.stringify(formData));
setSavedProfile(formData);
setTimeout(() => {
window.location.href = '/';
}, 2000);
}
const saveProfile = () => {
localStorage.setItem('userProfile', JSON.stringify(profile));
console.log('Profile saved:', profile);
};
const handleReset = () => {
setStep('biometric');
setFormData({ name: '', gender: '', height: '', weight: '', age: '' });
setSavedProfile(null);
setProfile({ name: '', gender: '', height: '', weight: '', age: '' });
setStep('basic');
};
return (
@@ -80,253 +79,247 @@ export default function OnboardingPage() {
{ name: "Treino", id: "training" },
{ name: "Nutrição", id: "nutrition" },
{ name: "Comunidade", id: "community" },
{ name: "Perfil", id: "profile" }
{ name: "Perfil", id: "onboarding" }
]}
button={{ text: "Começar Agora", href: "/" }}
button={{ text: "Começar Agora", href: "contact" }}
brandName="FitFlow Pro"
/>
</div>
<main className="min-h-svh flex items-center justify-center py-8 px-4">
<div className="w-full max-w-md">
{!savedProfile ? (
<div className="space-y-8">
{/* Header */}
<div className="text-center space-y-3">
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-br from-primary-cta to-accent mx-auto">
<User className="w-6 h-6 text-white" />
</div>
<h1 className="text-3xl font-extrabold">
{step === 'biometric' ? 'Criar Perfil' : 'Dados Físicos'}
</h1>
<p className="text-foreground/70 text-sm">
{step === 'biometric'
? 'Comece preenchendo seus dados básicos'
: 'Agora adicione suas medidas'}
</p>
<div id="onboarding-flow" data-section="onboarding-flow" className="min-h-screen flex items-center justify-center py-20">
<div className="w-full max-w-2xl px-6">
{/* Progress Indicator */}
<div className="mb-12">
<div className="flex items-center justify-between mb-4">
<div className={`flex items-center gap-2 ${
step === 'basic' || step === 'biometric' || step === 'complete'
? 'text-primary-cta'
: 'text-gray-400'
}`}>
<div className="w-8 h-8 rounded-full bg-primary-cta flex items-center justify-center text-white text-sm font-bold">1</div>
<span className="font-semibold">Dados Pessoais</span>
</div>
{/* Progress Indicator */}
<div className="flex items-center justify-center gap-2">
<div
className={`h-1.5 flex-1 rounded-full transition-all ${
step === 'biometric' ? 'bg-primary-cta' : 'bg-secondary-cta'
}`}
/>
<div
className={`h-1.5 flex-1 rounded-full transition-all ${
step === 'metrics' ? 'bg-primary-cta' : 'bg-secondary-cta'
}`}
/>
</div>
{/* Form Container */}
<div className="bg-card rounded-2xl border border-accent/20 p-6 space-y-6">
{step === 'biometric' && (
<form onSubmit={handleBiometricSubmit} className="space-y-5">
{/* Name Field */}
<div className="space-y-2">
<label className="block text-sm font-semibold text-foreground">
Nome Completo
</label>
<input
type="text"
value={formData.name}
onChange={(e) => handleBiometricChange('name', e.target.value)}
placeholder="Ex: João Silva"
className="w-full px-4 py-3 bg-background border border-accent/30 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent transition-all text-foreground placeholder:text-foreground/50"
required
/>
</div>
{/* Gender Field */}
<div className="space-y-2">
<label className="block text-sm font-semibold text-foreground">
Gênero
</label>
<div className="grid grid-cols-3 gap-3">
{GENDERS.map((g) => (
<button
key={g}
type="button"
onClick={() => handleBiometricChange('gender', g)}
className={`py-3 px-3 rounded-xl font-medium text-sm transition-all border ${
formData.gender === g
? 'bg-primary-cta text-white border-primary-cta'
: 'bg-background border-accent/30 text-foreground hover:border-primary-cta'
}`}
>
{g}
</button>
))}
</div>
</div>
{/* Submit Button */}
<button
type="submit"
className="w-full bg-gradient-to-r from-primary-cta to-accent text-white font-semibold py-3 rounded-xl hover:shadow-lg transition-all flex items-center justify-center gap-2 mt-6"
>
Próximo
<ChevronRight className="w-4 h-4" />
</button>
</form>
)}
{step === 'metrics' && (
<form onSubmit={handleMetricsSubmit} className="space-y-5">
{/* Height Field */}
<div className="space-y-2">
<label className="block text-sm font-semibold text-foreground">
Altura (cm)
</label>
<input
type="number"
value={formData.height}
onChange={(e) => handleMetricsChange('height', e.target.value)}
placeholder="Ex: 175"
min="100"
max="250"
className="w-full px-4 py-3 bg-background border border-accent/30 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent transition-all text-foreground placeholder:text-foreground/50"
required
/>
</div>
{/* Weight Field */}
<div className="space-y-2">
<label className="block text-sm font-semibold text-foreground">
Peso (kg)
</label>
<input
type="number"
value={formData.weight}
onChange={(e) => handleMetricsChange('weight', e.target.value)}
placeholder="Ex: 75"
min="20"
max="300"
step="0.1"
className="w-full px-4 py-3 bg-background border border-accent/30 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent transition-all text-foreground placeholder:text-foreground/50"
required
/>
</div>
{/* Age Field */}
<div className="space-y-2">
<label className="block text-sm font-semibold text-foreground">
Idade
</label>
<input
type="number"
value={formData.age}
onChange={(e) => handleMetricsChange('age', e.target.value)}
placeholder="Ex: 28"
min="13"
max="120"
className="w-full px-4 py-3 bg-background border border-accent/30 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent transition-all text-foreground placeholder:text-foreground/50"
required
/>
</div>
{/* Button Group */}
<div className="flex gap-3 mt-6">
<button
type="button"
onClick={() => setStep('biometric')}
className="flex-1 bg-background border border-accent/30 text-foreground font-semibold py-3 rounded-xl hover:bg-background/80 transition-all"
>
Voltar
</button>
<button
type="submit"
className="flex-1 bg-gradient-to-r from-primary-cta to-accent text-white font-semibold py-3 rounded-xl hover:shadow-lg transition-all"
>
Concluir
</button>
</div>
</form>
)}
</div>
{/* Form Info */}
<div className="text-center space-y-2">
<p className="text-xs text-foreground/60">
Seus dados são salvos localmente e podem ser editados depois
</p>
<div className="flex-1 h-1 mx-4 bg-gray-300"></div>
<div className={`flex items-center gap-2 ${
step === 'biometric' || step === 'complete'
? 'text-primary-cta'
: 'text-gray-400'
}`}>
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
step === 'biometric' || step === 'complete'
? 'bg-primary-cta text-white'
: 'bg-gray-300 text-gray-600'
}`}>2</div>
<span className="font-semibold">Biometria</span>
</div>
</div>
) : (
/* Success State */
<div className="space-y-8 text-center">
<div className="space-y-4">
<div className="flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-primary-cta to-accent mx-auto animate-pulse">
<Heart className="w-8 h-8 text-white" />
</div>
<h2 className="text-2xl font-extrabold">Perfil Criado!</h2>
<p className="text-foreground/70">
Bem-vindo, <span className="font-semibold text-primary-cta">{savedProfile.name}</span>!
</p>
</div>
{/* Step 1: Basic Information */}
{step === 'basic' && (
<div className="bg-card rounded-2xl p-8 shadow-lg">
<div className="mb-8">
<h1 className="text-4xl font-extrabold mb-2">Vamos Começar!</h1>
<p className="text-gray-600">Primeiro, precisamos conhecer você melhor.</p>
</div>
{/* Profile Summary */}
<div className="bg-card rounded-2xl border border-accent/20 p-6 space-y-3 text-left">
<div className="flex justify-between items-center py-2 border-b border-accent/10">
<span className="text-foreground/70">Gênero:</span>
<span className="font-semibold">{savedProfile.gender}</span>
<form onSubmit={handleBasicSubmit} className="space-y-6">
{/* Name Input */}
<div>
<label className="block text-sm font-semibold mb-2">Nome Completo</label>
<input
type="text"
value={profile.name}
onChange={(e) => handleBasicChange('name', e.target.value)}
placeholder="Digite seu nome"
className="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-primary-cta focus:outline-none transition"
required
/>
</div>
<div className="flex justify-between items-center py-2 border-b border-accent/10">
<span className="text-foreground/70">Altura:</span>
<span className="font-semibold">{savedProfile.height} cm</span>
{/* Gender Selection */}
<div>
<label className="block text-sm font-semibold mb-2">Gênero</label>
<div className="grid grid-cols-2 gap-4">
{['Masculino', 'Feminino'].map((gender) => (
<button
key={gender}
type="button"
onClick={() => handleBasicChange('gender', gender)}
className={`py-3 px-4 rounded-lg font-semibold transition-all ${
profile.gender === gender
? 'bg-primary-cta text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
}`}
>
{gender}
</button>
))}
</div>
</div>
<div className="flex justify-between items-center py-2 border-b border-accent/10">
<span className="text-foreground/70">Peso:</span>
<span className="font-semibold">{savedProfile.weight} kg</span>
{/* Submit Button */}
<button
type="submit"
disabled={!profile.name || !profile.gender}
className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition flex items-center justify-center gap-2"
>
Próximo <ChevronRight size={18} />
</button>
</form>
</div>
)}
{/* Step 2: Biometric Information */}
{step === 'biometric' && (
<div className="bg-card rounded-2xl p-8 shadow-lg">
<div className="mb-8">
<h1 className="text-4xl font-extrabold mb-2">Dados Biométricos</h1>
<p className="text-gray-600">Agora, alguns dados de biometria para personalizar seu treino.</p>
</div>
<form onSubmit={handleBiometricSubmit} className="space-y-6">
{/* Height Input */}
<div>
<label className="block text-sm font-semibold mb-2">Altura (cm)</label>
<input
type="number"
value={profile.height}
onChange={(e) => handleBiometricChange('height', e.target.value)}
placeholder="Ex: 175"
className="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-primary-cta focus:outline-none transition"
required
/>
</div>
<div className="flex justify-between items-center py-2">
<span className="text-foreground/70">Idade:</span>
<span className="font-semibold">{savedProfile.age} anos</span>
{/* Weight Input */}
<div>
<label className="block text-sm font-semibold mb-2">Peso (kg)</label>
<input
type="number"
value={profile.weight}
onChange={(e) => handleBiometricChange('weight', e.target.value)}
placeholder="Ex: 75"
step="0.1"
className="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-primary-cta focus:outline-none transition"
required
/>
</div>
{/* Age Input */}
<div>
<label className="block text-sm font-semibold mb-2">Idade</label>
<input
type="number"
value={profile.age}
onChange={(e) => handleBiometricChange('age', e.target.value)}
placeholder="Ex: 28"
className="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-primary-cta focus:outline-none transition"
required
/>
</div>
{/* Buttons */}
<div className="grid grid-cols-2 gap-4">
<button
type="button"
onClick={() => setStep('basic')}
className="py-3 px-4 rounded-lg font-semibold border-2 border-gray-300 hover:bg-gray-100 transition"
>
Voltar
</button>
<button
type="submit"
disabled={!profile.height || !profile.weight || !profile.age}
className="bg-primary-cta text-white py-3 px-4 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition flex items-center justify-center gap-2"
>
Concluir <ChevronRight size={18} />
</button>
</div>
</form>
</div>
)}
{/* Step 3: Completion */}
{step === 'complete' && (
<div className="bg-card rounded-2xl p-8 shadow-lg text-center">
<div className="mb-8">
<div className="w-16 h-16 bg-primary-cta rounded-full flex items-center justify-center mx-auto mb-6">
<User size={32} className="text-white" />
</div>
<h1 className="text-4xl font-extrabold mb-2">Perfil Criado com Sucesso!</h1>
<p className="text-gray-600 mb-6">Bem-vindo ao FitFlow Pro, {profile.name}!</p>
{/* Profile Summary */}
<div className="bg-gray-50 rounded-lg p-6 mb-8 text-left space-y-3">
<div className="flex justify-between">
<span className="font-semibold text-gray-700">Nome:</span>
<span className="text-gray-600">{profile.name}</span>
</div>
<div className="flex justify-between">
<span className="font-semibold text-gray-700">Gênero:</span>
<span className="text-gray-600">{profile.gender}</span>
</div>
<div className="flex justify-between">
<span className="font-semibold text-gray-700">Altura:</span>
<span className="text-gray-600">{profile.height} cm</span>
</div>
<div className="flex justify-between">
<span className="font-semibold text-gray-700">Peso:</span>
<span className="text-gray-600">{profile.weight} kg</span>
</div>
<div className="flex justify-between">
<span className="font-semibold text-gray-700">Idade:</span>
<span className="text-gray-600">{profile.age} anos</span>
</div>
</div>
</div>
<p className="text-sm text-foreground/60">
Redirecionando para o dashboard em breve...
</p>
<button
onClick={handleReset}
className="w-full bg-background border border-accent/30 text-foreground font-semibold py-3 rounded-xl hover:bg-background/80 transition-all"
>
Editar Perfil
</button>
{/* Action Buttons */}
<div className="grid grid-cols-2 gap-4">
<button
onClick={handleReset}
className="py-3 px-4 rounded-lg font-semibold border-2 border-gray-300 hover:bg-gray-100 transition"
>
Editar Dados
</button>
<a
href="/"
className="bg-primary-cta text-white py-3 px-4 rounded-lg font-semibold hover:opacity-90 transition flex items-center justify-center gap-2"
>
Ir para Dashboard <ChevronRight size={18} />
</a>
</div>
</div>
)}
</div>
</main>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Produto", items: [
{ label: "Dashboard", href: "/" },
{ label: "Treino", href: "/" },
{ label: "Nutrição", href: "/" },
{ label: "Cardio Hub", href: "/" }
{ label: "Dashboard", href: "dashboard" },
{ label: "Treino", href: "training" },
{ label: "Nutrição", href: "nutrition" },
{ label: "Cardio Hub", href: "cardio" }
]
},
{
title: "Comunidade", items: [
{ label: "Comunidade", href: "/" },
{ label: "Perfil", href: "/" },
{ label: "Rankings", href: "/" },
{ label: "Blog", href: "/" }
{ label: "Comunidade", href: "community" },
{ label: "Perfil", href: "onboarding" },
{ label: "Rankings", href: "rankings" },
{ label: "Blog", href: "blog" }
]
},
{
title: "Empresa", items: [
{ label: "Sobre", href: "/" },
{ label: "Contato", href: "/" },
{ label: "Privacidade", href: "/" },
{ label: "Termos", href: "/" }
{ label: "Sobre", href: "about" },
{ label: "Contato", href: "contact" },
{ label: "Privacidade", href: "privacy" },
{ label: "Termos", href: "terms" }
]
}
]}
@@ -336,4 +329,4 @@ export default function OnboardingPage() {
</div>
</ThemeProvider>
);
}
}