diff --git a/src/app/onboarding/page.tsx b/src/app/onboarding/page.tsx
new file mode 100644
index 0000000..c601675
--- /dev/null
+++ b/src/app/onboarding/page.tsx
@@ -0,0 +1,332 @@
+"use client";
+
+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, Users } from 'lucide-react';
+
+interface UserProfile {
+  name: string;
+  gender: string;
+  height: string;
+  weight: string;
+  age: string;
+}
+
+type OnboardingStep = 'basic' | 'biometric' | 'complete';
+
+export default function OnboardingPage() {
+  const [step, setStep] = useState<OnboardingStep>('basic');
+  const [profile, setProfile] = useState<UserProfile>({
+    name: '',
+    gender: '',
+    height: '',
+    weight: '',
+    age: ''
+  });
+
+  const handleBasicChange = (field: keyof Pick<UserProfile, 'name' | 'gender'>, value: string) => {
+    setProfile(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 (profile.height && profile.weight && profile.age) {
+      saveProfile();
+      setStep('complete');
+    }
+  };
+
+  const saveProfile = () => {
+    localStorage.setItem('userProfile', JSON.stringify(profile));
+    console.log('Profile saved:', profile);
+  };
+
+  const handleReset = () => {
+    setProfile({ name: '', gender: '', height: '', weight: '', age: '' });
+    setStep('basic');
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "dashboard" },
+            { name: "Treino", id: "training" },
+            { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "onboarding" }
+          ]}
+          button={{ text: "Começar Agora", href: "contact" }}
+          brandName="FitFlow Pro"
+        />
+      </div>
+
+      <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>
+              <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>
+          </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>
+
+              <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>
+
+                {/* 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>
+
+                {/* 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>
+
+                {/* 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>
+
+              {/* 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>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          columns={[
+            {
+              title: "Produto",              items: [
+                { label: "Dashboard", href: "dashboard" },
+                { label: "Treino", href: "training" },
+                { label: "Nutrição", href: "nutrition" },
+                { label: "Cardio Hub", href: "cardio" }
+              ]
+            },
+            {
+              title: "Comunidade",              items: [
+                { label: "Comunidade", href: "community" },
+                { label: "Perfil", href: "onboarding" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
+              ]
+            },
+            {
+              title: "Empresa",              items: [
+                { label: "Sobre", href: "about" },
+                { label: "Contato", href: "contact" },
+                { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
+              ]
+            }
+          ]}
+          logoText="FitFlow Pro"
+          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file