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

---
 src/app/login/page.tsx | 196 ++++++++++++++++-------------------------
 1 file changed, 75 insertions(+), 121 deletions(-)

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 166c52e..2d533ae 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -3,56 +3,68 @@
 import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import Input from '@/components/form/Input';
-import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';
-import { LogIn, Mail, Lock, Eye, EyeOff } from 'lucide-react';
+import { Mail, Lock } from 'lucide-react';
 
 export default function LoginPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState("");
-  const [rememberMe, setRememberMe] = useState(false);
+  const [loading, setLoading] = useState(false);
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
-    setIsLoading(true);
+    setLoading(true);
 
     try {
-      // Simulate API call
+      // Validate inputs
       if (!email || !password) {
         setError("Por favor, preencha todos os campos.");
+        setLoading(false);
         return;
       }
 
       if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
         setError("Por favor, insira um email válido.");
+        setLoading(false);
         return;
       }
 
       if (password.length < 6) {
-        setError("A senha deve ter no mínimo 6 caracteres.");
+        setError("A senha deve ter pelo menos 6 caracteres.");
+        setLoading(false);
         return;
       }
 
-      // Simulate successful login
-      const response = { success: true, token: "user_token_123" };
+      // Call login API
+      const response = await fetch("/api/auth/login", {
+        method: "POST",        headers: {
+          "Content-Type": "application/json"},
+        body: JSON.stringify({ email, password }),
+      });
 
-      if (response.success) {
-        // Store session
-        sessionStorage.setItem("authToken", response.token);
-        sessionStorage.setItem("userEmail", email);
-        if (rememberMe) {
-          localStorage.setItem("userEmail", email);
-        }
-        // Redirect to dashboard
-        window.location.href = "/dashboard";
+      const data = await response.json();
+
+      if (!response.ok) {
+        setError(data.message || "Erro ao fazer login. Tente novamente.");
+        setLoading(false);
+        return;
       }
-    } finally {
-      setIsLoading(false);
+
+      // Store user session
+      localStorage.setItem("userSession", JSON.stringify({
+        token: data.token,
+        user: data.user,
+        expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+      }));
+
+      // Redirect to dashboard
+      window.location.href = "/dashboard";
+    } catch (err) {
+      setError("Erro de conexão. Tente novamente mais tarde.");
+      setLoading(false);
     }
   };
 
@@ -78,140 +90,82 @@ export default function LoginPage() {
             { name: "Comunidade", id: "community" },
             { name: "Perfil", id: "profile" }
           ]}
-          button={{ text: "Voltar ao Início", href: "/" }}
+          button={{ text: "Começar Agora", href: "contact" }}
           brandName="FitFlow Pro"
         />
       </div>
 
-      <div className="min-h-screen flex items-center justify-center px-4 py-12">
+      <div id="login" data-section="login" className="min-h-screen flex items-center justify-center py-20 px-4">
         <div className="w-full max-w-md">
-          <div className="bg-card rounded-2xl p-8 shadow-lg border border-card">
-            {/* Header */}
-            <div className="text-center mb-8">
-              <div className="flex justify-center mb-4">
-                <div className="w-12 h-12 bg-primary-cta rounded-full flex items-center justify-center">
-                  <LogIn className="w-6 h-6 text-white" />
-                </div>
-              </div>
-              <h1 className="text-3xl font-extrabold text-foreground mb-2">
-                Bem-vindo de Volta
-              </h1>
-              <p className="text-foreground/70">
-                Faça login na sua conta FitFlow Pro
-              </p>
-            </div>
+          <div className="rounded-2xl border border-primary-cta/20 bg-card p-8 shadow-lg">
+            <h1 className="text-3xl font-bold text-foreground mb-2">Bem-vindo de Volta</h1>
+            <p className="text-foreground/60 mb-8">Faça login em sua conta FitFlow Pro</p>
 
-            {/* Error Message */}
             {error && (
-              <div className="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-600 text-sm">
+              <div className="mb-6 p-4 rounded-lg bg-red-500/10 border border-red-500/30 text-red-600 text-sm">
                 {error}
               </div>
             )}
 
-            {/* Login Form */}
-            <form onSubmit={handleSubmit} className="space-y-4">
-              {/* Email Field */}
-              <div className="space-y-2">
-                <label className="block text-sm font-medium text-foreground">
+            <form onSubmit={handleLogin} className="space-y-5">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
                   Email
                 </label>
                 <div className="relative">
-                  <Mail className="absolute left-3 top-3 w-5 h-5 text-foreground/50" />
-                  <Input
-                    value={email}
-                    onChange={setEmail}
+                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-foreground/40" />
+                  <input
                     type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
                     placeholder="seu.email@exemplo.com"
-                    required
-                    className="pl-10"
+                    className="w-full pl-10 pr-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta/50 text-foreground placeholder-foreground/40 transition"
+                    disabled={loading}
                   />
                 </div>
               </div>
 
-              {/* Password Field */}
-              <div className="space-y-2">
-                <label className="block text-sm font-medium text-foreground">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
                   Senha
                 </label>
                 <div className="relative">
-                  <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/50" />
-                  <Input
+                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-foreground/40" />
+                  <input
+                    type="password"
                     value={password}
-                    onChange={setPassword}
-                    type={showPassword ? "text" : "password"}
+                    onChange={(e) => setPassword(e.target.value)}
                     placeholder="••••••••"
-                    required
-                    className="pl-10 pr-10"
+                    className="w-full pl-10 pr-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta/50 text-foreground placeholder-foreground/40 transition"
+                    disabled={loading}
                   />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-3 top-3 text-foreground/50 hover:text-foreground transition-colors"
-                  >
-                    {showPassword ? (
-                      <EyeOff className="w-5 h-5" />
-                    ) : (
-                      <Eye className="w-5 h-5" />
-                    )}
-                  </button>
                 </div>
               </div>
 
-              {/* Remember Me & Forgot Password */}
-              <div className="flex items-center justify-between text-sm">
-                <label className="flex items-center gap-2 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={rememberMe}
-                    onChange={(e) => setRememberMe(e.target.checked)}
-                    className="w-4 h-4 rounded"
-                  />
-                  <span className="text-foreground/70">Lembrar-me</span>
-                </label>
-                <a href="/forgot-password" className="text-primary-cta hover:underline">
-                  Esqueceu a senha?
-                </a>
-              </div>
-
-              {/* Submit Button */}
-              <ButtonElasticEffect
-                text={isLoading ? "Entrando..." : "Entrar"}
-                disabled={isLoading}
+              <button
                 type="submit"
-                className="w-full"
-              />
+                disabled={loading}
+                className="w-full py-3 rounded-lg bg-primary-cta text-white font-medium hover:bg-primary-cta/90 transition disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? "Entrando..." : "Entrar"}
+              </button>
             </form>
 
-            {/* Divider */}
-            <div className="my-6 flex items-center gap-4">
-              <div className="flex-1 h-px bg-foreground/10"></div>
-              <span className="text-sm text-foreground/50">ou</span>
-              <div className="flex-1 h-px bg-foreground/10"></div>
+            <div className="mt-6 text-center">
+              <p className="text-foreground/60 text-sm">
+                Não tem uma conta?{" "}
+                <a href="/signup" className="text-primary-cta hover:underline font-medium">
+                  Cadastre-se aqui
+                </a>
+              </p>
             </div>
 
-            {/* Social Login */}
-            <div className="space-y-3">
-              <button className="w-full py-3 border border-foreground/20 rounded-lg text-foreground hover:bg-background-accent transition-colors font-medium">
-                Continuar com Google
-              </button>
-              <button className="w-full py-3 border border-foreground/20 rounded-lg text-foreground hover:bg-background-accent transition-colors font-medium">
-                Continuar com Apple
-              </button>
-            </div>
-
-            {/* Sign Up Link */}
-            <div className="mt-6 text-center text-sm text-foreground/70">
-              Não tem conta?{" "}
-              <a href="/signup" className="text-primary-cta font-semibold hover:underline">
-                Inscreva-se aqui
+            <div className="mt-6 text-center">
+              <a href="/" className="text-primary-cta hover:underline font-medium text-sm">
+                Voltar para Home
               </a>
             </div>
           </div>
-
-          {/* Security Note */}
-          <p className="text-center text-xs text-foreground/50 mt-4">
-            Sua senha está sempre protegida. Nunca compartilhamos seus dados com terceiros.
-          </p>
         </div>
       </div>
 
@@ -220,7 +174,7 @@ 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" }