Merge version_6 into main #24
@@ -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('');
|
||||
}
|
||||
}
|
||||
@@ -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('');
|
||||
}
|
||||
}
|
||||
30
src/app/api/auth/verify/route.ts
Normal file
30
src/app/api/auth/verify/route.ts
Normal file
@@ -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 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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" }
|
||||
|
||||
@@ -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"
|
||||
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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
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: [
|
||||
{
|
||||
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"
|
||||
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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
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: [
|
||||
{
|
||||
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"
|
||||
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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
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: [
|
||||
{
|
||||
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"
|
||||
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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
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: [
|
||||
{
|
||||
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"
|
||||
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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
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: [
|
||||
{
|
||||
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"
|
||||
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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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: [
|
||||
{
|
||||
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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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: [
|
||||
{
|
||||
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"
|
||||
},
|
||||
{
|
||||
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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
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" }
|
||||
|
||||
Reference in New Issue
Block a user