From c9a85766301b500e24d7d3714c5ab7cc0ee6a376 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:51:31 +0000
Subject: [PATCH 01/10] Update src/app/api/auth/login/route.ts

---
 src/app/api/auth/login/route.ts | 52 +++++++++++++++------------------
 1 file changed, 23 insertions(+), 29 deletions(-)

diff --git a/src/app/api/auth/login/route.ts b/src/app/api/auth/login/route.ts
index 064d78c..d1d897d 100644
--- a/src/app/api/auth/login/route.ts
+++ b/src/app/api/auth/login/route.ts
@@ -1,7 +1,11 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from "next/server";
+import bcrypt from "bcryptjs";
+import jwt from "jsonwebtoken";
 
-// Temporary in-memory user storage (replace with database)
-const users: Map<string, any> = new Map();
+const JWT_SECRET = process.env.JWT_SECRET || "your-secret-key-change-in-production";
+
+// Mock database - in production, use a real database
+const users: Array<{ id: string; name: string; email: string; passwordHash: string }> = [];
 
 export async function POST(request: NextRequest) {
   try {
@@ -10,58 +14,48 @@ export async function POST(request: NextRequest) {
     // Validation
     if (!email || !password) {
       return NextResponse.json(
-        { message: 'Email and password are required' },
+        { message: "Email e senha são obrigatórios" },
         { status: 400 }
       );
     }
 
     // Find user
-    const user = users.get(email);
+    const user = users.find((u) => u.email === email);
     if (!user) {
       return NextResponse.json(
-        { message: 'Invalid email or password' },
+        { message: "Email ou senha incorretos" },
         { status: 401 }
       );
     }
 
-    // Compare password using simple hash (not production-ready)
-    const hashedPassword = await hashPassword(password);
-    const isPasswordValid = hashedPassword === user.password;
+    // Verify password
+    const isPasswordValid = await bcrypt.compare(password, user.passwordHash);
     if (!isPasswordValid) {
       return NextResponse.json(
-        { message: 'Invalid email or password' },
+        { message: "Email ou senha incorretos" },
         { status: 401 }
       );
     }
 
-    // Create JWT-like token (simplified)
-    const token = Buffer.from(JSON.stringify({ userId: user.id, email })).toString('base64');
+    // Create JWT token
+    const token = jwt.sign(
+      { id: user.id, email: user.email, name: user.name },
+      JWT_SECRET,
+      { expiresIn: "7d" }
+    );
 
     return NextResponse.json(
       {
-        message: 'Login successful',
         token,
-        user: {
-          id: user.id,
-          name: user.name,
-          email: user.email,
-        },
+        user: { id: user.id, name: user.name, email: user.email },
       },
       { status: 200 }
     );
   } catch (error) {
+    console.error("Login error:", error);
     return NextResponse.json(
-      { message: 'Login failed' },
+      { message: "Erro ao fazer login" },
       { status: 500 }
     );
   }
-}
-
-// Simple hash function (not secure - for development only)
-async function hashPassword(password: string): Promise<string> {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(password);
-  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
-  const hashArray = Array.from(new Uint8Array(hashBuffer));
-  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
-}
+}
\ No newline at end of file
-- 
2.49.1


From d3444db04116c2b5c5566d04128427909d5dc0d0 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:51:32 +0000
Subject: [PATCH 02/10] Update src/app/api/auth/register/route.ts

---
 src/app/api/auth/register/route.ts | 66 +++++++++++++-----------------
 1 file changed, 28 insertions(+), 38 deletions(-)

diff --git a/src/app/api/auth/register/route.ts b/src/app/api/auth/register/route.ts
index 7963053..0ffabe7 100644
--- a/src/app/api/auth/register/route.ts
+++ b/src/app/api/auth/register/route.ts
@@ -1,7 +1,11 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from "next/server";
+import bcrypt from "bcryptjs";
+import jwt from "jsonwebtoken";
 
-// Temporary in-memory user storage (replace with database)
-const users: Map<string, any> = new Map();
+const JWT_SECRET = process.env.JWT_SECRET || "your-secret-key-change-in-production";
+
+// Mock database - in production, use a real database
+const users: Array<{ id: string; name: string; email: string; passwordHash: string }> = [];
 
 export async function POST(request: NextRequest) {
   try {
@@ -10,68 +14,54 @@ export async function POST(request: NextRequest) {
     // Validation
     if (!name || !email || !password) {
       return NextResponse.json(
-        { message: 'Name, email, and password are required' },
+        { message: "Nome, email e senha são obrigatórios" },
         { status: 400 }
       );
     }
 
-    if (password.length < 6) {
+    if (password.length < 8) {
       return NextResponse.json(
-        { message: 'Password must be at least 6 characters' },
+        { message: "A senha deve ter pelo menos 8 caracteres" },
         { status: 400 }
       );
     }
 
     // Check if user already exists
-    if (users.has(email)) {
+    const existingUser = users.find((u) => u.email === email);
+    if (existingUser) {
       return NextResponse.json(
-        { message: 'User already exists' },
+        { message: "Este email já está registrado" },
         { status: 409 }
       );
     }
 
-    // Hash password using simple hash (not production-ready)
-    const hashedPassword = await hashPassword(password);
+    // Hash password
+    const passwordHash = await bcrypt.hash(password, 10);
 
     // Create user
-    const user = {
-      id: Math.random().toString(36).substr(2, 9),
-      name,
-      email,
-      password: hashedPassword,
-      createdAt: new Date(),
-    };
+    const userId = `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    const newUser = { id: userId, name, email, passwordHash };
+    users.push(newUser);
 
-    users.set(email, user);
-
-    // Create JWT-like token (simplified)
-    const token = Buffer.from(JSON.stringify({ userId: user.id, email })).toString('base64');
+    // Create JWT token
+    const token = jwt.sign(
+      { id: userId, email, name },
+      JWT_SECRET,
+      { expiresIn: "7d" }
+    );
 
     return NextResponse.json(
       {
-        message: 'User registered successfully',
         token,
-        user: {
-          id: user.id,
-          name: user.name,
-          email: user.email,
-        },
+        user: { id: userId, name, email },
       },
       { status: 201 }
     );
   } catch (error) {
+    console.error("Register error:", error);
     return NextResponse.json(
-      { message: 'Registration failed' },
+      { message: "Erro ao registrar usuário" },
       { status: 500 }
     );
   }
-}
-
-// Simple hash function (not secure - for development only)
-async function hashPassword(password: string): Promise<string> {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(password);
-  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
-  const hashArray = Array.from(new Uint8Array(hashBuffer));
-  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
-}
+}
\ No newline at end of file
-- 
2.49.1


From 1ded73a33bd2dc9300b52c22747b6e0c6f22cbfb Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:51:32 +0000
Subject: [PATCH 03/10] Add src/app/api/auth/verify/route.ts

---
 src/app/api/auth/verify/route.ts | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/app/api/auth/verify/route.ts

diff --git a/src/app/api/auth/verify/route.ts b/src/app/api/auth/verify/route.ts
new file mode 100644
index 0000000..b78bc59
--- /dev/null
+++ b/src/app/api/auth/verify/route.ts
@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from "next/server";
+import jwt from "jsonwebtoken";
+
+const JWT_SECRET = process.env.JWT_SECRET || "your-secret-key-change-in-production";
+
+export async function GET(request: NextRequest) {
+  try {
+    const authHeader = request.headers.get("authorization");
+    if (!authHeader || !authHeader.startsWith("Bearer ")) {
+      return NextResponse.json(
+        { message: "Token não fornecido" },
+        { status: 401 }
+      );
+    }
+
+    const token = authHeader.substring(7);
+    const decoded = jwt.verify(token, JWT_SECRET) as any;
+
+    return NextResponse.json(
+      { user: { id: decoded.id, email: decoded.email, name: decoded.name } },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Verify error:", error);
+    return NextResponse.json(
+      { message: "Token inválido ou expirado" },
+      { status: 401 }
+    );
+  }
+}
\ No newline at end of file
-- 
2.49.1


From b744886412c30ec0fa27de8cb18a891b21870b31 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:51:33 +0000
Subject: [PATCH 04/10] Update src/app/auth/login/page.tsx

---
 src/app/auth/login/page.tsx | 140 ++++++++++++++++++++----------------
 1 file changed, 77 insertions(+), 63 deletions(-)

diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
index d3a410b..0537898 100644
--- a/src/app/auth/login/page.tsx
+++ b/src/app/auth/login/page.tsx
@@ -2,24 +2,24 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import Input from '@/components/form/Input';
-import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';
-import { Mail, Lock, LogIn } from 'lucide-react';
+import { Mail, Lock, Eye, EyeOff } from 'lucide-react';
 
 export default function LoginPage() {
   const router = useRouter();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
-    setIsLoading(true);
+    setLoading(true);
 
     try {
       const response = await fetch("/api/auth/login", {
@@ -29,14 +29,19 @@ export default function LoginPage() {
 
       if (!response.ok) {
         const data = await response.json();
-        throw new Error(data.message || "Login failed");
+        setError(data.message || "Falha ao fazer login");
+        return;
       }
 
-      await router.push("/dashboard");
-    } catch (err: any) {
-      setError(err.message);
+      const data = await response.json();
+      localStorage.setItem("authToken", data.token);
+      localStorage.setItem("user", JSON.stringify(data.user));
+      router.push("/dashboard");
+    } catch (err) {
+      setError("Erro ao conectar ao servidor");
+      console.error(err);
     } finally {
-      setIsLoading(false);
+      setLoading(false);
     }
   };
 
@@ -56,87 +61,86 @@ export default function LoginPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[
-            { name: "Home", id: "/" },
+            { name: "Dashboard", id: "/dashboard" },
             { name: "Treino", id: "training" },
             { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
           ]}
           button={{ text: "Registrar", href: "/auth/register" }}
           brandName="FitFlow Pro"
         />
       </div>
 
-      <div className="min-h-[calc(100vh-200px)] flex items-center justify-center py-20 px-4">
+      <div className="min-h-screen flex items-center justify-center px-4 py-20">
         <div className="w-full max-w-md">
-          <div className="bg-card rounded-2xl p-8 shadow-lg border border-accent/20">
-            <div className="mb-8 text-center">
-              <div className="flex items-center justify-center mb-4 gap-2">
-                <LogIn className="w-8 h-8 text-primary-cta" />
-                <h1 className="text-3xl font-extrabold text-foreground">Login</h1>
+          <div className="bg-card rounded-2xl p-8 shadow-lg">
+            <h1 className="text-3xl font-bold text-center mb-2">Entrar</h1>
+            <p className="text-center text-foreground/60 mb-8">Bem-vindo de volta ao FitFlow Pro</p>
+
+            {error && (
+              <div className="bg-red-500/10 border border-red-500 text-red-500 px-4 py-3 rounded-lg mb-6">
+                {error}
               </div>
-              <p className="text-foreground/70 text-sm">Acesse sua conta FitFlow Pro</p>
-            </div>
+            )}
 
             <form onSubmit={handleLogin} className="space-y-6">
               <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Email
-                </label>
+                <label className="block text-sm font-medium mb-2">Email</label>
                 <div className="relative">
-                  <Mail className="absolute left-3 top-3 w-5 h-5 text-accent/50" />
-                  <Input
-                    value={email}
-                    onChange={setEmail}
+                  <Mail className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                  <input
                     type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
                     placeholder="seu.email@exemplo.com"
                     required
-                    disabled={isLoading}
-                    className="pl-10"
+                    className="w-full pl-10 pr-4 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
                   />
                 </div>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Senha
-                </label>
+                <label className="block text-sm font-medium mb-2">Senha</label>
                 <div className="relative">
-                  <Lock className="absolute left-3 top-3 w-5 h-5 text-accent/50" />
-                  <Input
+                  <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                  <input
+                    type={showPassword ? "text" : "password"}
                     value={password}
-                    onChange={setPassword}
-                    type="password"
-                    placeholder="Sua senha segura"
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="Digite sua senha"
                     required
-                    disabled={isLoading}
-                    className="pl-10"
+                    className="w-full pl-10 pr-10 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
                   />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-3 text-foreground/40"
+                  >
+                    {showPassword ? (
+                      <EyeOff className="w-5 h-5" />
+                    ) : (
+                      <Eye className="w-5 h-5" />
+                    )}
+                  </button>
                 </div>
               </div>
 
-              {error && (
-                <div className="p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
-                  <p className="text-red-600 text-sm font-medium">{error}</p>
-                </div>
-              )}
-
-              <div className="flex gap-3">
-                <ButtonDirectionalHover
-                  text={isLoading ? "Entrando..." : "Entrar"}
-                  onClick={() => handleLogin(new Event('submit') as unknown as React.FormEvent)}
-                  disabled={isLoading}
-                  className="flex-1"
-                />
-              </div>
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 transition"
+              >
+                {loading ? "Entrando..." : "Entrar"}
+              </button>
             </form>
 
-            <div className="mt-6 pt-6 border-t border-accent/20 text-center">
-              <p className="text-foreground/70 text-sm">
-                Não tem conta?{" "}
-                <a href="/auth/register" className="text-primary-cta hover:text-primary-cta/80 font-semibold">
-                  Registre-se
-                </a>
-              </p>
-            </div>
+            <p className="text-center mt-6 text-foreground/60">
+              Não tem conta?{" "}
+              <Link href="/auth/register" className="text-primary-cta font-semibold hover:underline">
+                Registre-se aqui
+              </Link>
+            </p>
           </div>
         </div>
       </div>
@@ -146,16 +150,26 @@ export default function LoginPage() {
           columns={[
             {
               title: "Produto",              items: [
-                { label: "Dashboard", href: "dashboard" },
+                { 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: "profile" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
               ]
             },
             {
               title: "Empresa",              items: [
-                { label: "Sobre", href: "/" },
+                { label: "Sobre", href: "about" },
                 { label: "Contato", href: "contact" },
                 { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
               ]
             }
           ]}
@@ -165,4 +179,4 @@ export default function LoginPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1


From c61a8fbed8b602eade2ce82f5ab58cca89cc7952 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:51:34 +0000
Subject: [PATCH 05/10] Update src/app/auth/register/page.tsx

---
 src/app/auth/register/page.tsx | 237 ++++++++++++++++++++-------------
 1 file changed, 146 insertions(+), 91 deletions(-)

diff --git a/src/app/auth/register/page.tsx b/src/app/auth/register/page.tsx
index afc95c9..70adca3 100644
--- a/src/app/auth/register/page.tsx
+++ b/src/app/auth/register/page.tsx
@@ -2,49 +2,73 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import Input from '@/components/form/Input';
-import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';
-import { Mail, Lock, User, UserPlus } from 'lucide-react';
+import { Mail, Lock, User, Eye, EyeOff, Check } from 'lucide-react';
 
 export default function RegisterPage() {
   const router = useRouter();
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    password: "",    confirmPassword: ""});
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
   const [error, setError] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [agreedToTerms, setAgreedToTerms] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
 
   const handleRegister = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
 
-    if (password !== confirmPassword) {
-      setError("Senhas não correspondem");
+    if (!agreedToTerms) {
+      setError("Você deve concordar com os Termos e Condições");
       return;
     }
 
-    setIsLoading(true);
+    if (formData.password !== formData.confirmPassword) {
+      setError("As senhas não conferem");
+      return;
+    }
+
+    if (formData.password.length < 8) {
+      setError("A senha deve ter pelo menos 8 caracteres");
+      return;
+    }
+
+    setLoading(true);
 
     try {
       const response = await fetch("/api/auth/register", {
         method: "POST",        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name, email, password }),
+        body: JSON.stringify({
+          name: formData.name,
+          email: formData.email,
+          password: formData.password,
+        }),
       });
 
       if (!response.ok) {
         const data = await response.json();
-        throw new Error(data.message || "Registration failed");
+        setError(data.message || "Falha ao registrar");
+        return;
       }
 
-      await router.push("/auth/login?registered=true");
-    } catch (err: any) {
-      setError(err.message);
+      const data = await response.json();
+      localStorage.setItem("authToken", data.token);
+      localStorage.setItem("user", JSON.stringify(data.user));
+      router.push("/dashboard");
+    } catch (err) {
+      setError("Erro ao conectar ao servidor");
+      console.error(err);
     } finally {
-      setIsLoading(false);
+      setLoading(false);
     }
   };
 
@@ -64,123 +88,144 @@ export default function RegisterPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[
-            { name: "Home", id: "/" },
+            { name: "Dashboard", id: "/dashboard" },
             { name: "Treino", id: "training" },
             { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
           ]}
-          button={{ text: "Login", href: "/auth/login" }}
+          button={{ text: "Entrar", href: "/auth/login" }}
           brandName="FitFlow Pro"
         />
       </div>
 
-      <div className="min-h-[calc(100vh-200px)] flex items-center justify-center py-20 px-4">
+      <div className="min-h-screen flex items-center justify-center px-4 py-20">
         <div className="w-full max-w-md">
-          <div className="bg-card rounded-2xl p-8 shadow-lg border border-accent/20">
-            <div className="mb-8 text-center">
-              <div className="flex items-center justify-center mb-4 gap-2">
-                <UserPlus className="w-8 h-8 text-primary-cta" />
-                <h1 className="text-3xl font-extrabold text-foreground">Registrar</h1>
-              </div>
-              <p className="text-foreground/70 text-sm">Crie sua conta FitFlow Pro</p>
-            </div>
+          <div className="bg-card rounded-2xl p-8 shadow-lg">
+            <h1 className="text-3xl font-bold text-center mb-2">Registre-se</h1>
+            <p className="text-center text-foreground/60 mb-8">Comece sua transformação com FitFlow Pro</p>
 
-            <form onSubmit={handleRegister} className="space-y-5">
+            {error && (
+              <div className="bg-red-500/10 border border-red-500 text-red-500 px-4 py-3 rounded-lg mb-6">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleRegister} className="space-y-6">
               <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Nome Completo
-                </label>
+                <label className="block text-sm font-medium mb-2">Nome Completo</label>
                 <div className="relative">
-                  <User className="absolute left-3 top-3 w-5 h-5 text-accent/50" />
-                  <Input
-                    value={name}
-                    onChange={setName}
+                  <User className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                  <input
                     type="text"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleChange}
                     placeholder="Seu nome completo"
                     required
-                    disabled={isLoading}
-                    className="pl-10"
+                    className="w-full pl-10 pr-4 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
                   />
                 </div>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Email
-                </label>
+                <label className="block text-sm font-medium mb-2">Email</label>
                 <div className="relative">
-                  <Mail className="absolute left-3 top-3 w-5 h-5 text-accent/50" />
-                  <Input
-                    value={email}
-                    onChange={setEmail}
+                  <Mail className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                  <input
                     type="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleChange}
                     placeholder="seu.email@exemplo.com"
                     required
-                    disabled={isLoading}
-                    className="pl-10"
+                    className="w-full pl-10 pr-4 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
                   />
                 </div>
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  Senha
-                </label>
+                <label className="block text-sm font-medium mb-2">Senha</label>
                 <div className="relative">
-                  <Lock className="absolute left-3 top-3 w-5 h-5 text-accent/50" />
-                  <Input
-                    value={password}
-                    onChange={setPassword}
-                    type="password"
-                    placeholder="Sua senha segura"
+                  <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    name="password"
+                    value={formData.password}
+                    onChange={handleChange}
+                    placeholder="Mínimo 8 caracteres"
                     required
-                    disabled={isLoading}
-                    className="pl-10"
+                    className="w-full pl-10 pr-10 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
                   />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-3 text-foreground/40"
+                  >
+                    {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-foreground mb-2">
-                  Confirmar Senha
-                </label>
+                <label className="block text-sm font-medium mb-2">Confirmar Senha</label>
                 <div className="relative">
-                  <Lock className="absolute left-3 top-3 w-5 h-5 text-accent/50" />
-                  <Input
-                    value={confirmPassword}
-                    onChange={setConfirmPassword}
-                    type="password"
+                  <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                  <input
+                    type={showConfirm ? "text" : "password"}
+                    name="confirmPassword"
+                    value={formData.confirmPassword}
+                    onChange={handleChange}
                     placeholder="Confirme sua senha"
                     required
-                    disabled={isLoading}
-                    className="pl-10"
+                    className="w-full pl-10 pr-10 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
                   />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirm(!showConfirm)}
+                    className="absolute right-3 top-3 text-foreground/40"
+                  >
+                    {showConfirm ? (
+                      <EyeOff className="w-5 h-5" />
+                    ) : (
+                      <Eye className="w-5 h-5" />
+                    )}
+                  </button>
                 </div>
               </div>
 
-              {error && (
-                <div className="p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
-                  <p className="text-red-600 text-sm font-medium">{error}</p>
-                </div>
-              )}
-
-              <div className="flex gap-3">
-                <ButtonDirectionalHover
-                  text={isLoading ? "Registrando..." : "Criar Conta"}
-                  onClick={() => handleRegister(new Event('submit') as unknown as React.FormEvent)}
-                  disabled={isLoading}
-                  className="flex-1"
+              <div className="flex items-start space-x-3">
+                <input
+                  type="checkbox"
+                  id="terms"
+                  checked={agreedToTerms}
+                  onChange={(e) => setAgreedToTerms(e.target.checked)}
+                  className="mt-1 w-5 h-5 rounded cursor-pointer"
                 />
+                <label htmlFor="terms" className="text-sm text-foreground/60 cursor-pointer">
+                  Concordo com os <Link href="/terms" className="text-primary-cta hover:underline">Termos e Condições</Link> e a <Link href="/privacy" className="text-primary-cta hover:underline">Política de Privacidade</Link>
+                </label>
               </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 transition"
+              >
+                {loading ? "Registrando..." : "Criar Conta"}
+              </button>
             </form>
 
-            <div className="mt-6 pt-6 border-t border-accent/20 text-center">
-              <p className="text-foreground/70 text-sm">
-                Já tem conta?{" "}
-                <a href="/auth/login" className="text-primary-cta hover:text-primary-cta/80 font-semibold">
-                  Faça login
-                </a>
-              </p>
-            </div>
+            <p className="text-center mt-6 text-foreground/60">
+              Já tem uma conta?{" "}
+              <Link href="/auth/login" className="text-primary-cta font-semibold hover:underline">
+                Faça login aqui
+              </Link>
+            </p>
           </div>
         </div>
       </div>
@@ -190,16 +235,26 @@ export default function RegisterPage() {
           columns={[
             {
               title: "Produto",              items: [
-                { label: "Dashboard", href: "dashboard" },
+                { 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: "profile" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
               ]
             },
             {
               title: "Empresa",              items: [
-                { label: "Sobre", href: "/" },
+                { label: "Sobre", href: "about" },
                 { label: "Contato", href: "contact" },
                 { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
               ]
             }
           ]}
@@ -209,4 +264,4 @@ export default function RegisterPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1


From e6905d194d37905fb7ced9545baa035e4e100b3a Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:51:34 +0000
Subject: [PATCH 06/10] Update src/app/dashboard/page.tsx

---
 src/app/dashboard/page.tsx | 229 +++++++++++++++++++++----------------
 1 file changed, 128 insertions(+), 101 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index a425bf9..fa04a86 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { LogOut, User, Settings } from 'lucide-react';
+import { LogOut, User, Mail, Zap } from 'lucide-react';
 
-interface User {
+interface UserData {
   id: string;
   name: string;
   email: string;
@@ -15,34 +15,48 @@ interface User {
 
 export default function DashboardPage() {
   const router = useRouter();
-  const [user, setUser] = useState<User | null>(null);
+  const [user, setUser] = useState<UserData | null>(null);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
 
   useEffect(() => {
-    // Check if user is authenticated
-    const token = localStorage.getItem('token');
-    const userData = localStorage.getItem('user');
+    const checkAuth = async () => {
+      const token = localStorage.getItem("authToken");
+      const userData = localStorage.getItem("user");
 
-    if (!token) {
-      router.push('/auth');
-      return;
-    }
+      if (!token || !userData) {
+        router.push("/auth/login");
+        return;
+      }
 
-    if (userData) {
-      setUser(JSON.parse(userData));
-    }
-    setLoading(false);
+      try {
+        const response = await fetch("/api/auth/verify", {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+
+        if (!response.ok) {
+          localStorage.removeItem("authToken");
+          localStorage.removeItem("user");
+          router.push("/auth/login");
+          return;
+        }
+
+        setUser(JSON.parse(userData));
+      } catch (err) {
+        setError("Erro ao verificar sessão");
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    checkAuth();
   }, [router]);
 
-  const handleLogout = async () => {
-    try {
-      await fetch('/api/auth/logout', { method: 'POST' });
-      localStorage.removeItem('token');
-      localStorage.removeItem('user');
-      router.push('/');
-    } catch (error) {
-      console.error('Logout failed:', error);
-    }
+  const handleLogout = () => {
+    localStorage.removeItem("authToken");
+    localStorage.removeItem("user");
+    router.push("/");
   };
 
   if (loading) {
@@ -59,10 +73,33 @@ export default function DashboardPage() {
         secondaryButtonStyle="glass"
         headingFontWeight="extrabold"
       >
-        <div className="flex items-center justify-center min-h-screen">
+        <div className="min-h-screen flex items-center justify-center">
           <div className="text-center">
-            <div className="w-12 h-12 border-4 border-primary-cta border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-            <p className="text-foreground/60">Carregando...</p>
+            <div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary-cta"></div>
+            <p className="mt-4 text-foreground/60">Carregando...</p>
+          </div>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  if (error) {
+    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 className="min-h-screen flex items-center justify-center">
+          <div className="text-center">
+            <p className="text-red-500">{error}</p>
           </div>
         </div>
       </ThemeProvider>
@@ -91,92 +128,82 @@ export default function DashboardPage() {
             { name: "Comunidade", id: "community" },
             { name: "Perfil", id: "profile" }
           ]}
-          button={{ text: "Sair", onClick: handleLogout }}
+          button={{ text: "Sair", href: "/" }}
           brandName="FitFlow Pro"
         />
       </div>
 
-      <div className="min-h-screen bg-background py-12 px-4 sm:px-6 lg:px-8">
+      <div className="min-h-screen px-4 py-20">
         <div className="max-w-4xl mx-auto">
-          {/* Welcome Section */}
-          <div className="mb-8">
-            <h1 className="text-4xl font-extrabold text-foreground mb-2">
-              Bem-vindo de volta, {user?.name}!
-            </h1>
-            <p className="text-foreground/60">Aqui está seu dashboard pessoal de fitness</p>
-          </div>
+          <h1 className="text-4xl font-bold mb-8">Dashboard</h1>
 
-          {/* Quick Stats Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
-            {[
-              { label: 'Treinos', value: '24', icon: '💪' },
-              { label: 'Calorias', value: '2.4k', icon: '🔥' },
-              { label: 'Passos', value: '15.2k', icon: '👣' },
-              { label: 'Sequência', value: '7 dias', icon: '🔥' },
-            ].map((stat, idx) => (
-              <div key={idx} className="bg-card rounded-lg p-6 border border-background-accent">
-                <div className="text-3xl mb-2">{stat.icon}</div>
-                <p className="text-foreground/60 text-sm mb-1">{stat.label}</p>
-                <p className="text-2xl font-bold text-foreground">{stat.value}</p>
-              </div>
-            ))}
-          </div>
-
-          {/* Main Content */}
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            {/* User Profile Card */}
-            <div className="lg:col-span-1">
-              <div className="bg-card rounded-lg p-6 border border-background-accent">
-                <div className="flex items-center justify-center w-16 h-16 rounded-full bg-primary-cta/10 mb-4">
-                  <User className="w-8 h-8 text-primary-cta" />
-                </div>
-                <h2 className="text-xl font-bold text-foreground mb-1">{user?.name}</h2>
-                <p className="text-foreground/60 text-sm mb-6">{user?.email}</p>
-                <button className="w-full py-2 px-4 bg-secondary-cta text-foreground rounded-lg hover:opacity-90 transition flex items-center justify-center gap-2">
-                  <Settings className="w-4 h-4" />
-                  Configurações
-                </button>
-              </div>
-            </div>
-
-            {/* Recent Activity */}
-            <div className="lg:col-span-2">
-              <div className="bg-card rounded-lg p-6 border border-background-accent">
-                <h3 className="text-lg font-bold text-foreground mb-4">Atividade Recente</h3>
-                <div className="space-y-4">
-                  {[
-                    { title: 'Treino de Perna', time: 'Hoje às 10:30', status: '✅' },
-                    { title: 'Corida Matinal', time: 'Ontem às 06:00', status: '✅' },
-                    { title: 'Treino de Costas', time: '2 dias atrás', status: '✅' },
-                  ].map((activity, idx) => (
-                    <div key={idx} className="flex items-center justify-between pb-4 border-b border-background-accent last:border-0 last:pb-0">
+          {user && (
+            <div className="grid gap-6">
+              <div className="bg-card rounded-2xl p-8 shadow-lg border border-foreground/10">
+                <h2 className="text-2xl font-bold mb-6">Bem-vindo, {user.name}!</h2>
+                
+                <div className="grid md:grid-cols-2 gap-8">
+                  <div className="space-y-4">
+                    <div className="flex items-center space-x-3">
+                      <User className="w-6 h-6 text-primary-cta" />
                       <div>
-                        <p className="font-medium text-foreground">{activity.title}</p>
-                        <p className="text-sm text-foreground/60">{activity.time}</p>
+                        <p className="text-sm text-foreground/60">Nome</p>
+                        <p className="font-semibold">{user.name}</p>
                       </div>
-                      <span className="text-lg">{activity.status}</span>
                     </div>
-                  ))}
+                    <div className="flex items-center space-x-3">
+                      <Mail className="w-6 h-6 text-primary-cta" />
+                      <div>
+                        <p className="text-sm text-foreground/60">Email</p>
+                        <p className="font-semibold">{user.email}</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="space-y-4">
+                    <div className="bg-background rounded-lg p-4">
+                      <p className="text-sm text-foreground/60 mb-2">Status da Sessão</p>
+                      <div className="flex items-center space-x-2">
+                        <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
+                        <p className="font-semibold text-green-500">Conectado</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid md:grid-cols-3 gap-6">
+                <div className="bg-gradient-to-br from-primary-cta/20 to-accent/20 rounded-2xl p-6 border border-primary-cta/20">
+                  <Zap className="w-8 h-8 text-primary-cta mb-2" />
+                  <h3 className="text-lg font-semibold mb-1">Treinos</h3>
+                  <p className="text-3xl font-bold text-primary-cta">0</p>
+                  <p className="text-sm text-foreground/60 mt-2">Treinos concluídos</p>
+                </div>
+
+                <div className="bg-gradient-to-br from-accent/20 to-secondary-cta/20 rounded-2xl p-6 border border-accent/20">
+                  <Zap className="w-8 h-8 text-accent mb-2" />
+                  <h3 className="text-lg font-semibold mb-1">Nutrição</h3>
+                  <p className="text-3xl font-bold text-accent">0</p>
+                  <p className="text-sm text-foreground/60 mt-2">Refeições rastreadas</p>
+                </div>
+
+                <div className="bg-gradient-to-br from-secondary-cta/20 to-primary-cta/20 rounded-2xl p-6 border border-secondary-cta/20">
+                  <Zap className="w-8 h-8 text-secondary-cta mb-2" />
+                  <h3 className="text-lg font-semibold mb-1">Cardio</h3>
+                  <p className="text-3xl font-bold text-secondary-cta">0 km</p>
+                  <p className="text-sm text-foreground/60 mt-2">Distância total</p>
                 </div>
               </div>
-            </div>
-          </div>
 
-          {/* Action Buttons */}
-          <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
-            {[
-              { label: 'Iniciar Treino', color: 'bg-primary-cta' },
-              { label: 'Registrar Refeição', color: 'bg-accent' },
-              { label: 'Ver Progresso', color: 'bg-secondary-cta' },
-            ].map((btn, idx) => (
               <button
-                key={idx}
-                className={`${btn.color} text-background font-semibold py-3 px-6 rounded-lg hover:opacity-90 transition`}
+                onClick={handleLogout}
+                className="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-lg font-semibold transition flex items-center justify-center space-x-2"
               >
-                {btn.label}
+                <LogOut className="w-5 h-5" />
+                <span>Sair da Conta</span>
               </button>
-            ))}
-          </div>
+            </div>
+          )}
         </div>
       </div>
 
@@ -185,7 +212,7 @@ export default function DashboardPage() {
           columns={[
             {
               title: "Produto",              items: [
-                { label: "Dashboard", href: "dashboard" },
+                { label: "Dashboard", href: "/dashboard" },
                 { label: "Treino", href: "training" },
                 { label: "Nutrição", href: "nutrition" },
                 { label: "Cardio Hub", href: "cardio" }
-- 
2.49.1


From ac2e5c80f2a804bd05f179a469a21fc6a86b5d39 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:51:35 +0000
Subject: [PATCH 07/10] Update src/app/page.tsx

---
 src/app/page.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 27ae98e..eefa872 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -83,10 +83,10 @@ export default function LandingPage() {
               title: "Perfil Biométrico",              description: "Coloque seus dados (gênero, altura, peso, idade) e veja o app adaptar todas as demonstrações, avatares e ilustrações anatomicamente.",              icon: Target,
               mediaItems: [
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png",                  alt: "Tela de biometria"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png",                  imageAlt: "Tela de biometria"
                 },
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2",                  alt: "Dashboard adaptado"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2",                  imageAlt: "Dashboard adaptado"
                 }
               ]
             },
@@ -94,10 +94,10 @@ export default function LandingPage() {
               title: "Metas Inteligentes",              description: "Escolha: Perder Peso ou Ganhar Massa. O sistema calcula TMB, projeta planilha de metas e mostra exatamente quando você atingirá seu objetivo.",              icon: Zap,
               mediaItems: [
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  alt: "Plano de nutrição"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  imageAlt: "Plano de nutrição"
                 },
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1",                  alt: "Métricas de progresso"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1",                  imageAlt: "Métricas de progresso"
                 }
               ]
             }
@@ -119,10 +119,10 @@ export default function LandingPage() {
               title: "Running Tracker Avançado",              description: "GPS ativado em tempo real. Mapeia sua rota, calcula queima de calorias baseado no peso, mostra ritmo ao vivo em painel estilo smartwatch.",              icon: Zap,
               mediaItems: [
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png",                  alt: "Rastreamento GPS"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png",                  imageAlt: "Rastreamento GPS"
                 },
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2",                  alt: "Métricas de cardio"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2",                  imageAlt: "Métricas de cardio"
                 }
               ]
             },
@@ -130,10 +130,10 @@ export default function LandingPage() {
               title: "Pedômetro & Caminhada",              description: "Contador de passos embutido com rastreamento de distância e calorias. Vença suas metas de 10.000 passos com visual de anéis de progresso motivacional.",              icon: Activity,
               mediaItems: [
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=3",                  alt: "Dashboard de passos"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=3",                  imageAlt: "Dashboard de passos"
                 },
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3",                  alt: "Progresso de atividade"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3",                  imageAlt: "Progresso de atividade"
                 }
               ]
             }
@@ -155,10 +155,10 @@ export default function LandingPage() {
               title: "Dualidade de Ambientes",              description: "Treinos em Casa (peso corporal, calistenia) ou Ginásio (máquinas, pesos livres). Sistema diferencia automaticamente baseado em sua escolha e disponibilidade de equipamento.",              icon: Dumbbell,
               mediaItems: [
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=1",                  alt: "Seleção de exercícios"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=1",                  imageAlt: "Seleção de exercícios"
                 },
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1",                  alt: "Execução de treino"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1",                  imageAlt: "Execução de treino"
                 }
               ]
             },
@@ -166,10 +166,10 @@ export default function LandingPage() {
               title: "Isolamento por Grupo Muscular",              description: "Modelo anatômico 3D/2D interativo. Clique em um músculo (peitoral, glúteo, etc.) e veja lista filtrada de exercícios com foco nesse músculo específico.",              icon: Zap,
               mediaItems: [
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=2",                  alt: "Anatomia interativa"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=2",                  imageAlt: "Anatomia interativa"
                 },
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2",                  alt: "Exercícios filtrados"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2",                  imageAlt: "Exercícios filtrados"
                 }
               ]
             }
-- 
2.49.1


From 92007b1ff792b8000494fedc26fc876cd8334ee1 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:51:36 +0000
Subject: [PATCH 08/10] Update src/app/recipes/page.tsx

---
 src/app/recipes/page.tsx | 495 ++++++++++++++++++---------------------
 1 file changed, 227 insertions(+), 268 deletions(-)

diff --git a/src/app/recipes/page.tsx b/src/app/recipes/page.tsx
index 14ec0f9..9db7588 100644
--- a/src/app/recipes/page.tsx
+++ b/src/app/recipes/page.tsx
@@ -1,164 +1,99 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Filter, ChefHat, Flame, Zap, Clock, Users } from 'lucide-react';
+import { Apple, Filter, Flame, Zap, TrendingDown, TrendingUp, Users, Mail } from 'lucide-react';
 
-interface Recipe {
-  id: string;
-  name: string;
-  goal: 'weight-loss' | 'muscle-gain';
-  calories: number;
-  protein: number;
-  carbs: number;
-  fat: number;
-  prepTime: number;
-  difficulty: 'easy' | 'medium' | 'hard';
-  ingredients: string[];
-  instructions: string[];
-  imageUrl?: string;
-}
-
-const recipeDatabase: Recipe[] = [
+// Recipe Database
+const recipeDatabase = [
   {
-    id: '1',
-    name: 'Peito de Frango Grelhado com Brócolis',
-    goal: 'muscle-gain',
-    calories: 450,
+    id: "1",    name: "Grilled Chicken Breast with Quinoa",    category: "Protein",    calories: 450,
     protein: 45,
     carbs: 35,
-    fat: 12,
-    prepTime: 25,
-    difficulty: 'easy',
-    ingredients: ['Peito de frango 200g', 'Brócolis 200g', 'Azeite 1 colher', 'Sal e pimenta'],
-    instructions: ['Tempere o frango', 'Grelhe em fogo alto 8 minutos cada lado', 'Cozinhe o brócolis no vapor', 'Sirva quente'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
+    fats: 12,
+    prepTime: "25 min",    goals: ["muscle-gain"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Grilled Chicken with Quinoa"
   },
   {
-    id: '2',
-    name: 'Salada Verde com Proteína',
-    goal: 'weight-loss',
-    calories: 280,
-    protein: 30,
-    carbs: 15,
-    fat: 8,
-    prepTime: 15,
-    difficulty: 'easy',
-    ingredients: ['Alface 200g', 'Peito de frango 150g', 'Cenoura 50g', 'Limão 1', 'Azeite 1 colher'],
-    instructions: ['Lave as folhas de alface', 'Corte a cenoura em palitos', 'Desfihe o frango cozido', 'Misture e tempere com limão e azeite'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
+    id: "2",    name: "Veggie Stir-Fry with Tofu",    category: "Vegetarian",    calories: 280,
+    protein: 18,
+    carbs: 42,
+    fats: 8,
+    prepTime: "20 min",    goals: ["weight-loss"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Veggie Stir-Fry"
   },
   {
-    id: '3',
-    name: 'Omelete de Claras com Vegetais',
-    goal: 'weight-loss',
-    calories: 200,
-    protein: 25,
-    carbs: 10,
-    fat: 5,
-    prepTime: 10,
-    difficulty: 'easy',
-    ingredients: ['Claras de ovo 5', 'Espinafre 100g', 'Tomate 100g', 'Sal e pimenta'],
-    instructions: ['Bata as claras com sal', 'Aqueça a frigideira com spray', 'Coloque os vegetais', 'Despeje as claras e cozinhe até firmar'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
+    id: "3",    name: "Salmon with Sweet Potato",    category: "Fish",    calories: 520,
+    protein: 38,
+    carbs: 48,
+    fats: 18,
+    prepTime: "30 min",    goals: ["muscle-gain"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Salmon with Sweet Potato"
   },
   {
-    id: '4',
-    name: 'Arroz Integral com Frango e Feijão',
-    goal: 'muscle-gain',
-    calories: 580,
-    protein: 40,
-    carbs: 65,
-    fat: 10,
-    prepTime: 40,
-    difficulty: 'medium',
-    ingredients: ['Arroz integral 1 xícara cozido', 'Frango 200g', 'Feijão 100g', 'Cebola e alho'],
-    instructions: ['Cozinhe o arroz integral', 'Refogue cebola e alho', 'Adicione o frango cortado', 'Misture com o feijão', 'Finalize com o arroz'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
+    id: "4",    name: "Egg White Omelet with Veggies",    category: "Breakfast",    calories: 180,
+    protein: 22,
+    carbs: 12,
+    fats: 4,
+    prepTime: "15 min",    goals: ["weight-loss", "muscle-gain"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Egg White Omelet"
   },
   {
-    id: '5',
-    name: 'Salmão ao Forno com Abóbora',
-    goal: 'muscle-gain',
-    calories: 520,
-    protein: 42,
-    carbs: 40,
-    fat: 15,
-    prepTime: 35,
-    difficulty: 'medium',
-    ingredients: ['Salmão 200g', 'Abóbora 300g', 'Alecrim', 'Azeite', 'Limão'],
-    instructions: ['Tempere o salmão com limão', 'Corte a abóbora em cubos', 'Coloque em assadeira', 'Asse a 200°C por 25 minutos'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
-  },
-  {
-    id: '6',
-    name: 'Batida de Proteína com Frutas',
-    goal: 'muscle-gain',
-    calories: 350,
+    id: "5",    name: "Turkey Meatballs with Zucchini Noodles",    category: "Protein",    calories: 320,
     protein: 35,
-    carbs: 40,
-    fat: 3,
-    prepTime: 5,
-    difficulty: 'easy',
-    ingredients: ['Whey protein 30g', 'Banana 1', 'Maçã 1', 'Leite desnatado 200ml'],
-    instructions: ['Bata tudo no liquidificador', 'Sirva imediatamente'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
-  },
-  {
-    id: '7',
-    name: 'Sopa de Legumes com Caldo de Galinha',
-    goal: 'weight-loss',
-    calories: 150,
-    protein: 15,
     carbs: 18,
-    fat: 2,
-    prepTime: 30,
-    difficulty: 'easy',
-    ingredients: ['Caldo de galinha 500ml', 'Cenoura 100g', 'Abobrinha 100g', 'Brócolis 100g', 'Sal'],
-    instructions: ['Aqueça o caldo', 'Corte os legumes em pequenos cubos', 'Cozinhe até ficarem macios', 'Tempere e sirva'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
+    fats: 10,
+    prepTime: "28 min",    goals: ["weight-loss"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Turkey Meatballs"
   },
   {
-    id: '8',
-    name: 'Iogurte Grego com Granola',
-    goal: 'muscle-gain',
-    calories: 320,
-    protein: 28,
-    carbs: 35,
-    fat: 8,
-    prepTime: 2,
-    difficulty: 'easy',
-    ingredients: ['Iogurte grego 200g', 'Granola 50g', 'Mel 1 colher', 'Morango fresco'],
-    instructions: ['Coloque o iogurte na tigela', 'Adicione a granola', 'Regue com mel', 'Complete com morangos'],
-    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
+    id: "6",    name: "Lean Beef with Brown Rice",    category: "Protein",    calories: 580,
+    protein: 42,
+    carbs: 58,
+    fats: 14,
+    prepTime: "35 min",    goals: ["muscle-gain"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Lean Beef with Rice"
+  },
+  {
+    id: "7",    name: "Green Salad with Grilled Chicken",    category: "Salad",    calories: 280,
+    protein: 32,
+    carbs: 22,
+    fats: 6,
+    prepTime: "18 min",    goals: ["weight-loss"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Green Salad"
+  },
+  {
+    id: "8",    name: "High-Protein Pasta with Lean Ground Meat",    category: "Pasta",    calories: 480,
+    protein: 40,
+    carbs: 52,
+    fats: 8,
+    prepTime: "25 min",    goals: ["muscle-gain"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "High-Protein Pasta"
   }
 ];
 
 export default function RecipesPage() {
-  const [selectedGoal, setSelectedGoal] = useState<'weight-loss' | 'muscle-gain' | null>(null);
-  const [userGoal, setUserGoal] = useState<'weight-loss' | 'muscle-gain' | null>(null);
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [selectedGoal, setSelectedGoal] = useState<"all" | "weight-loss" | "muscle-gain">("all");
 
-  useEffect(() => {
-    // Simulate checking login status from localStorage or auth context
-    const storedGoal = localStorage.getItem('userFitnessGoal');
-    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
-    
-    if (storedGoal) {
-      setUserGoal(storedGoal as 'weight-loss' | 'muscle-gain');
-    }
-    setIsLoggedIn(loggedIn);
-  }, []);
+  // Filter recipes based on selected goal
+  const filteredRecipes = selectedGoal === "all" 
+    ? recipeDatabase 
+    : recipeDatabase.filter(recipe => recipe.goals.includes(selectedGoal));
 
-  const filteredRecipes = selectedGoal || userGoal
-    ? recipeDatabase.filter(recipe => recipe.goal === (selectedGoal || userGoal))
-    : recipeDatabase;
-
-  const handleGoalChange = (goal: 'weight-loss' | 'muscle-gain' | null) => {
-    setSelectedGoal(goal);
-  };
+  // Convert filtered recipes to product format for ProductCardOne
+  const recipeProducts = filteredRecipes.map(recipe => ({
+    id: recipe.id,
+    name: recipe.name,
+    price: `${recipe.calories} cal | ${recipe.protein}g protein`,
+    imageSrc: recipe.imageSrc,
+    imageAlt: recipe.imageAlt,
+    onProductClick: () => console.log(`Selected recipe: ${recipe.name}`)
+  }));
 
   return (
     <ThemeProvider
@@ -176,7 +111,7 @@ export default function RecipesPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[
-            { name: "Dashboard", id: "/" },
+            { name: "Dashboard", id: "dashboard" },
             { name: "Treino", id: "training" },
             { name: "Receitas", id: "/recipes" },
             { name: "Comunidade", id: "community" },
@@ -187,148 +122,172 @@ export default function RecipesPage() {
         />
       </div>
 
-      <div className="min-h-screen bg-gradient-to-b from-background to-card py-16 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-6xl mx-auto">
-          {/* Header */}
-          <div className="mb-12 text-center">
-            <h1 className="text-4xl sm:text-5xl font-extrabold mb-4 flex items-center justify-center gap-3">
-              <ChefHat className="w-10 h-10" />
-              Receituário Personalizado
-            </h1>
-            <p className="text-lg text-foreground/70 mb-8">
-              {isLoggedIn && userGoal
-                ? `Suas receitas estão personalizadas para ${userGoal === 'weight-loss' ? 'perda de peso' : 'ganho de massa'}`
-                : 'Filtre receitas por seu objetivo de fitness'}
-            </p>
-          </div>
+      <div id="recipes-hero" data-section="recipes-hero">
+        <HeroSplitKpi
+          title="Receitas Inteligentes Alinhadas com Suas Metas"
+          description="Acesso a um banco de receitas nutricionais desenvolvidas por especialistas. Cada receita é otimizada para seu objetivo: perda de peso ou ganho de massa muscular."
+          tag="Nutrição Estratégica"
+          tagIcon={Flame}
+          background={{ variant: "glowing-orb" }}
+          kpis={[
+            { value: "100+", label: "Receitas Disponíveis" },
+            { value: "2", label: "Filtros por Objetivo" },
+            { value: "4.8★", label: "Avaliação Média" }
+          ]}
+          enableKpiAnimation={true}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png"
+          imageAlt="Dashboard de receitas nutricionais"
+          imagePosition="right"
+          mediaAnimation="slide-up"
+          buttons={[
+            { text: "Explorar Receitas", href: "#recipes-grid" }
+          ]}
+        />
+      </div>
 
-          {/* Filter Section */}
-          <div className="mb-12 bg-card border border-accent/20 rounded-lg p-6">
-            <div className="flex items-center gap-3 mb-6">
-              <Filter className="w-5 h-5" />
-              <h2 className="text-xl font-semibold">Filtrar por Objetivo</h2>
-            </div>
-            <div className="flex gap-4 flex-wrap">
-              <button
-                onClick={() => handleGoalChange(null)}
-                className={`px-6 py-2 rounded-full font-semibold transition-all ${
-                  !selectedGoal && !userGoal
-                    ? 'bg-primary-cta text-background'
-                    : 'bg-background/50 border border-accent/30 hover:border-accent/60'
-                }`}
-              >
-                Todas as Receitas
-              </button>
-              <button
-                onClick={() => handleGoalChange('weight-loss')}
-                className={`px-6 py-2 rounded-full font-semibold transition-all flex items-center gap-2 ${
-                  selectedGoal === 'weight-loss' || (userGoal === 'weight-loss' && !selectedGoal)
-                    ? 'bg-primary-cta text-background'
-                    : 'bg-background/50 border border-accent/30 hover:border-accent/60'
-                }`}
-              >
-                <Flame className="w-4 h-4" />
-                Perda de Peso
-              </button>
-              <button
-                onClick={() => handleGoalChange('muscle-gain')}
-                className={`px-6 py-2 rounded-full font-semibold transition-all flex items-center gap-2 ${
-                  selectedGoal === 'muscle-gain' || (userGoal === 'muscle-gain' && !selectedGoal)
-                    ? 'bg-primary-cta text-background'
-                    : 'bg-background/50 border border-accent/30 hover:border-accent/60'
-                }`}
-              >
-                <Zap className="w-4 h-4" />
-                Ganho de Massa
-              </button>
-            </div>
-          </div>
+      <div id="recipes-filter" data-section="recipes-filter">
+        <FeatureCardTwentyFive
+          title="Filtre Receitas por Objetivo"
+          description="Selecione seu objetivo atual e o sistema recomendará as melhores receitas para atingir suas metas nutricionais e de transformação corporal."
+          tag="Recomendação Inteligente"
+          tagIcon={Filter}
+          features={[
+            {
+              title: "Perda de Peso",              description: "Receitas com déficit calórico otimizado. Alto em proteína para preservar músculos, baixo em carboidratos estratégicos. Ideal para queimar gordura mantendo a força.",              icon: TrendingDown,
+              mediaItems: [
+                {
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  imageAlt: "Receitas para perda de peso"
+                },
+                {
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",                  imageAlt: "Progresso de déficit calórico"
+                }
+              ]
+            },
+            {
+              title: "Ganho de Massa",              description: "Receitas com superávit calórico controlado. Proteína máxima (2g por kg), carboidratos pré e pós-treino, gorduras saudáveis. Perfeito para crescimento muscular.",              icon: TrendingUp,
+              mediaItems: [
+                {
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  imageAlt: "Receitas para ganho de massa"
+                },
+                {
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",                  imageAlt: "Progresso de ganho muscular"
+                }
+              ]
+            }
+          ]}
+          animationType="blur-reveal"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
 
-          {/* Recipes Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {filteredRecipes.map((recipe) => (
-              <div
-                key={recipe.id}
-                className="bg-card border border-accent/20 rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
-              >
-                {/* Image */}
-                {recipe.imageUrl && (
-                  <div className="w-full h-48 bg-background/50 overflow-hidden">
+      <div id="recipes-grid" data-section="recipes-grid">
+        <div className="w-full py-20">
+          <div className="max-w-7xl mx-auto px-6">
+            {/* Filter Buttons */}
+            <div className="flex flex-col items-center gap-8 mb-16">
+              <div className="text-center">
+                <h2 className="text-4xl font-extrabold mb-4">Receitas Recomendadas</h2>
+                <p className="text-lg text-foreground/75">Selecione seu objetivo para ver receitas personalizadas</p>
+              </div>
+              <div className="flex gap-4 flex-wrap justify-center">
+                <button
+                  onClick={() => setSelectedGoal("all")}
+                  className={`px-6 py-3 rounded-full font-semibold transition-all ${
+                    selectedGoal === "all"
+                      ? "bg-primary-cta text-white"
+                      : "bg-secondary-cta/20 text-foreground hover:bg-secondary-cta/40"
+                  }`}
+                >
+                  Todas as Receitas
+                </button>
+                <button
+                  onClick={() => setSelectedGoal("weight-loss")}
+                  className={`px-6 py-3 rounded-full font-semibold transition-all ${
+                    selectedGoal === "weight-loss"
+                      ? "bg-primary-cta text-white"
+                      : "bg-secondary-cta/20 text-foreground hover:bg-secondary-cta/40"
+                  }`}
+                >
+                  Perda de Peso
+                </button>
+                <button
+                  onClick={() => setSelectedGoal("muscle-gain")}
+                  className={`px-6 py-3 rounded-full font-semibold transition-all ${
+                    selectedGoal === "muscle-gain"
+                      ? "bg-primary-cta text-white"
+                      : "bg-secondary-cta/20 text-foreground hover:bg-secondary-cta/40"
+                  }`}
+                >
+                  Ganho de Massa
+                </button>
+              </div>
+            </div>
+
+            {/* Recipe Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              {filteredRecipes.map(recipe => (
+                <div key={recipe.id} className="bg-card rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
+                  <div className="relative h-64 overflow-hidden">
                     <img
-                      src={recipe.imageUrl}
-                      alt={recipe.name}
-                      className="w-full h-full object-cover hover:scale-105 transition-transform"
+                      src={recipe.imageSrc}
+                      alt={recipe.imageAlt}
+                      className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                     />
                   </div>
-                )}
+                  <div className="p-6">
+                    <div className="flex items-start justify-between mb-3">
+                      <h3 className="text-xl font-bold text-foreground">{recipe.name}</h3>
+                      <span className="text-xs font-semibold bg-primary-cta/20 text-primary-cta px-3 py-1 rounded-full">
+                        {recipe.category}
+                      </span>
+                    </div>
+                    <p className="text-sm text-foreground/75 mb-4">Tempo: {recipe.prepTime}</p>
+                    
+                    {/* Macros */}
+                    <div className="grid grid-cols-4 gap-2 mb-4">
+                      <div className="text-center">
+                        <p className="text-xs text-foreground/60">Calorias</p>
+                        <p className="font-bold text-foreground">{recipe.calories}</p>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-xs text-foreground/60">Proteína</p>
+                        <p className="font-bold text-foreground">{recipe.protein}g</p>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-xs text-foreground/60">Carbs</p>
+                        <p className="font-bold text-foreground">{recipe.carbs}g</p>
+                      </div>
+                      <div className="text-center">
+                        <p className="text-xs text-foreground/60">Gordura</p>
+                        <p className="font-bold text-foreground">{recipe.fats}g</p>
+                      </div>
+                    </div>
 
-                {/* Content */}
-                <div className="p-6">
-                  <h3 className="text-xl font-bold mb-2">{recipe.name}</h3>
-                  
-                  {/* Macros */}
-                  <div className="grid grid-cols-4 gap-3 mb-6 text-sm">
-                    <div className="bg-background/50 rounded p-2 text-center">
-                      <div className="font-semibold text-primary-cta">{recipe.calories}</div>
-                      <div className="text-xs text-foreground/60">kcal</div>
-                    </div>
-                    <div className="bg-background/50 rounded p-2 text-center">
-                      <div className="font-semibold text-primary-cta">{recipe.protein}g</div>
-                      <div className="text-xs text-foreground/60">Proteína</div>
-                    </div>
-                    <div className="bg-background/50 rounded p-2 text-center">
-                      <div className="font-semibold text-primary-cta">{recipe.carbs}g</div>
-                      <div className="text-xs text-foreground/60">Carbs</div>
-                    </div>
-                    <div className="bg-background/50 rounded p-2 text-center">
-                      <div className="font-semibold text-primary-cta">{recipe.fat}g</div>
-                      <div className="text-xs text-foreground/60">Gordura</div>
-                    </div>
-                  </div>
-
-                  {/* Info */}
-                  <div className="flex gap-4 text-sm text-foreground/70 mb-6">
-                    <div className="flex items-center gap-1">
-                      <Clock className="w-4 h-4" />
-                      {recipe.prepTime}min
-                    </div>
-                    <div className="flex items-center gap-1">
-                      <ChefHat className="w-4 h-4" />
-                      {recipe.difficulty === 'easy' ? 'Fácil' : recipe.difficulty === 'medium' ? 'Médio' : 'Difícil'}
-                    </div>
-                  </div>
-
-                  {/* Ingredients Summary */}
-                  <div className="mb-6">
-                    <h4 className="font-semibold text-sm mb-2">Ingredientes:</h4>
-                    <ul className="text-sm text-foreground/70 space-y-1">
-                      {recipe.ingredients.slice(0, 3).map((ingredient, idx) => (
-                        <li key={idx} className="flex items-start gap-2">
-                          <span className="text-primary-cta mt-1">•</span>
-                          <span>{ingredient}</span>
-                        </li>
-                      ))}
-                      {recipe.ingredients.length > 3 && (
-                        <li className="text-primary-cta font-semibold">+{recipe.ingredients.length - 3} mais</li>
+                    {/* Goal Tags */}
+                    <div className="flex flex-wrap gap-2">
+                      {recipe.goals.includes("weight-loss") && (
+                        <span className="text-xs bg-accent/20 text-accent px-2 py-1 rounded-full">Perda</span>
                       )}
-                    </ul>
+                      {recipe.goals.includes("muscle-gain") && (
+                        <span className="text-xs bg-accent/20 text-accent px-2 py-1 rounded-full">Ganho</span>
+                      )}
+                    </div>
+
+                    <button className="w-full mt-4 bg-primary-cta text-white font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">
+                      Ver Detalhes
+                    </button>
                   </div>
-
-                  {/* Button */}
-                  <button className="w-full bg-primary-cta text-background font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">
-                    Ver Receita Completa
-                  </button>
                 </div>
-              </div>
-            ))}
-          </div>
-
-          {filteredRecipes.length === 0 && (
-            <div className="text-center py-12">
-              <Users className="w-12 h-12 mx-auto mb-4 text-foreground/30" />
-              <p className="text-lg text-foreground/70">Nenhuma receita encontrada para este filtro.</p>
+              ))}
             </div>
-          )}
+
+            {filteredRecipes.length === 0 && (
+              <div className="text-center py-12">
+                <p className="text-lg text-foreground/75">Nenhuma receita encontrada para este objetivo.</p>
+              </div>
+            )}
+          </div>
         </div>
       </div>
 
@@ -337,7 +296,7 @@ export default function RecipesPage() {
           columns={[
             {
               title: "Produto",              items: [
-                { label: "Dashboard", href: "/" },
+                { label: "Dashboard", href: "dashboard" },
                 { label: "Treino", href: "training" },
                 { label: "Receitas", href: "/recipes" },
                 { label: "Cardio Hub", href: "cardio" }
-- 
2.49.1


From 3583f3389c7288807773242ee244575f9a179e30 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:54:47 +0000
Subject: [PATCH 09/10] Update src/app/page.tsx

---
 src/app/page.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index eefa872..842c8b2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -83,10 +83,10 @@ export default function LandingPage() {
               title: "Perfil Biométrico",              description: "Coloque seus dados (gênero, altura, peso, idade) e veja o app adaptar todas as demonstrações, avatares e ilustrações anatomicamente.",              icon: Target,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png",                  imageAlt: "Tela de biometria"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png",                  alt: "Tela de biometria"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2",                  imageAlt: "Dashboard adaptado"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2",                  alt: "Dashboard adaptado"
                 }
               ]
             },
@@ -94,10 +94,10 @@ export default function LandingPage() {
               title: "Metas Inteligentes",              description: "Escolha: Perder Peso ou Ganhar Massa. O sistema calcula TMB, projeta planilha de metas e mostra exatamente quando você atingirá seu objetivo.",              icon: Zap,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  imageAlt: "Plano de nutrição"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  alt: "Plano de nutrição"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1",                  imageAlt: "Métricas de progresso"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1",                  alt: "Métricas de progresso"
                 }
               ]
             }
@@ -119,10 +119,10 @@ export default function LandingPage() {
               title: "Running Tracker Avançado",              description: "GPS ativado em tempo real. Mapeia sua rota, calcula queima de calorias baseado no peso, mostra ritmo ao vivo em painel estilo smartwatch.",              icon: Zap,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png",                  imageAlt: "Rastreamento GPS"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png",                  alt: "Rastreamento GPS"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2",                  imageAlt: "Métricas de cardio"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2",                  alt: "Métricas de cardio"
                 }
               ]
             },
@@ -130,10 +130,10 @@ export default function LandingPage() {
               title: "Pedômetro & Caminhada",              description: "Contador de passos embutido com rastreamento de distância e calorias. Vença suas metas de 10.000 passos com visual de anéis de progresso motivacional.",              icon: Activity,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=3",                  imageAlt: "Dashboard de passos"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=3",                  alt: "Dashboard de passos"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3",                  imageAlt: "Progresso de atividade"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3",                  alt: "Progresso de atividade"
                 }
               ]
             }
@@ -155,10 +155,10 @@ export default function LandingPage() {
               title: "Dualidade de Ambientes",              description: "Treinos em Casa (peso corporal, calistenia) ou Ginásio (máquinas, pesos livres). Sistema diferencia automaticamente baseado em sua escolha e disponibilidade de equipamento.",              icon: Dumbbell,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=1",                  imageAlt: "Seleção de exercícios"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=1",                  alt: "Seleção de exercícios"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1",                  imageAlt: "Execução de treino"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1",                  alt: "Execução de treino"
                 }
               ]
             },
@@ -166,10 +166,10 @@ export default function LandingPage() {
               title: "Isolamento por Grupo Muscular",              description: "Modelo anatômico 3D/2D interativo. Clique em um músculo (peitoral, glúteo, etc.) e veja lista filtrada de exercícios com foco nesse músculo específico.",              icon: Zap,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=2",                  imageAlt: "Anatomia interativa"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=2",                  alt: "Anatomia interativa"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2",                  imageAlt: "Exercícios filtrados"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2",                  alt: "Exercícios filtrados"
                 }
               ]
             }
-- 
2.49.1


From 1fb92d6469de4aca4205363b2a57b049be2b5b95 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 20:54:48 +0000
Subject: [PATCH 10/10] Update src/app/recipes/page.tsx

---
 src/app/recipes/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/recipes/page.tsx b/src/app/recipes/page.tsx
index 9db7588..93171a9 100644
--- a/src/app/recipes/page.tsx
+++ b/src/app/recipes/page.tsx
@@ -156,10 +156,10 @@ export default function RecipesPage() {
               title: "Perda de Peso",              description: "Receitas com déficit calórico otimizado. Alto em proteína para preservar músculos, baixo em carboidratos estratégicos. Ideal para queimar gordura mantendo a força.",              icon: TrendingDown,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  imageAlt: "Receitas para perda de peso"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  alt: "Receitas para perda de peso"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",                  imageAlt: "Progresso de déficit calórico"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",                  alt: "Progresso de déficit calórico"
                 }
               ]
             },
@@ -167,10 +167,10 @@ export default function RecipesPage() {
               title: "Ganho de Massa",              description: "Receitas com superávit calórico controlado. Proteína máxima (2g por kg), carboidratos pré e pós-treino, gorduras saudáveis. Perfeito para crescimento muscular.",              icon: TrendingUp,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  imageAlt: "Receitas para ganho de massa"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  alt: "Receitas para ganho de massa"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",                  imageAlt: "Progresso de ganho muscular"
+                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",                  alt: "Progresso de ganho muscular"
                 }
               ]
             }
-- 
2.49.1