Update src/app/login/page.tsx

src/app/login/page.tsx

@@ -1,47 +1,60 @@
 "use client";
 
+import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import { useState } from "react";
-import { Eye, EyeOff, Mail, Lock } from 'lucide-react';
+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';
 
 export default function LoginPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
-  const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
-  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [rememberMe, setRememberMe] = useState(false);
 
-  const validateForm = () => {
-    const newErrors: { email?: string; password?: string } = {};
-    
-    if (!email) {
-      newErrors.email = "Email é obrigatório";
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      newErrors.email = "Email inválido";
-    }
-    
-    if (!password) {
-      newErrors.password = "Senha é obrigatória";
-    } else if (password.length < 6) {
-      newErrors.password = "Senha deve ter no mínimo 6 caracteres";
-    }
-    
-    return newErrors;
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    const newErrors = validateForm();
-    setErrors(newErrors);
-    
-    if (Object.keys(newErrors).length === 0) {
-      setIsSubmitted(true);
-      console.log("Login attempt:", { email, password });
-      setTimeout(() => {
-        setIsSubmitted(false);
-      }, 2000);
+    setError("");
+    setIsLoading(true);
+
+    try {
+      // Simulate API call
+      if (!email || !password) {
+        setError("Por favor, preencha todos os campos.");
+        return;
+      }
+
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        setError("Por favor, insira um email válido.");
+        return;
+      }
+
+      if (password.length < 6) {
+        setError("A senha deve ter no mínimo 6 caracteres.");
+        return;
+      }
+
+      // Simulate successful login
+      const response = { success: true, token: "user_token_123" };
+
+      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";
+      }
+    } catch (err) {
+      setError("Erro ao fazer login. Tente novamente.");
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -61,100 +74,181 @@ export default function LoginPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[
-            { name: "Dashboard", id: "/" },
+            { name: "Dashboard", id: "/dashboard" },
             { name: "Treino", id: "training" },
             { name: "Nutrição", id: "nutrition" },
             { name: "Comunidade", id: "community" },
             { name: "Perfil", id: "profile" }
           ]}
-          button={{ text: "Começar Agora", href: "/signup" }}
+          button={{ text: "Voltar ao Início", href: "/" }}
           brandName="FitFlow Pro"
         />
       </div>
 
-      <div className="min-h-[calc(100vh-80px)] flex items-center justify-center py-12 px-4">
+      <div className="min-h-screen flex items-center justify-center px-4 py-12">
         <div className="w-full max-w-md">
-          <div className="bg-card rounded-3xl shadow-lg p-8 border border-accent/10">
-            <div className="mb-8">
-              <h1 className="text-3xl font-extrabold text-foreground mb-2">Bem-vindo de Volta</h1>
-              <p className="text-foreground/70">Faça login para acessar seu progresso</p>
+          <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>
 
-            <form onSubmit={handleSubmit} className="space-y-6">
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  <div className="flex items-center gap-2">
-                    <Mail size={16} />
-                    Email
-                  </div>
-                </label>
-                <Input
-                  value={email}
-                  onChange={setEmail}
-                  type="email"
-                  placeholder="seu@email.com"
-                  required
-                  className={errors.email ? "border-red-500" : ""}
-                />
-                {errors.email && (
-                  <p className="text-red-500 text-sm mt-1">{errors.email}</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">
+                {error}
               </div>
+            )}
 
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-2">
-                  <div className="flex items-center gap-2">
-                    <Lock size={16} />
-                    Senha
-                  </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">
+                  Email
                 </label>
                 <div className="relative">
+                  <Mail className="absolute left-3 top-3 w-5 h-5 text-foreground/50" />
+                  <Input
+                    value={email}
+                    onChange={setEmail}
+                    type="email"
+                    placeholder="seu.email@exemplo.com"
+                    required
+                    className="pl-10"
+                  />
+                </div>
+              </div>
+
+              {/* Password Field */}
+              <div className="space-y-2">
+                <label className="block text-sm font-medium text-foreground">
+                  Senha
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/50" />
                   <Input
                     value={password}
                     onChange={setPassword}
                     type={showPassword ? "text" : "password"}
                     placeholder="••••••••"
                     required
-                    className={errors.password ? "border-red-500" : "pr-10"}
+                    className="pl-10 pr-10"
                   />
                   <button
                     type="button"
                     onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors"
-                    aria-label={showPassword ? "Ocultar senha" : "Mostrar senha"}
+                    className="absolute right-3 top-3 text-foreground/50 hover:text-foreground transition-colors"
                   >
-                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                    {showPassword ? (
+                      <EyeOff className="w-5 h-5" />
+                    ) : (
+                      <Eye className="w-5 h-5" />
+                    )}
                   </button>
                 </div>
-                {errors.password && (
-                  <p className="text-red-500 text-sm mt-1">{errors.password}</p>
-                )}
               </div>
 
-              <button
+              {/* 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}
                 type="submit"
-                disabled={isSubmitted}
-                className="w-full py-3 px-4 bg-primary-cta hover:opacity-90 disabled:opacity-50 text-white font-semibold rounded-full transition-all duration-300 transform hover:scale-105"
-              >
-                {isSubmitted ? "Entrando..." : "Entrar"}
-              </button>
+                className="w-full"
+              />
             </form>
 
-            <div className="mt-6 text-center text-sm text-foreground/70">
-              <p>
-                Não tem conta?{" "}
-                <a href="/signup" className="text-primary-cta font-semibold hover:underline">
-                  Criar conta
-                </a>
-              </p>
+            {/* 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>
 
-            <div className="mt-6 pt-6 border-t border-accent/10 text-center text-xs text-foreground/50">
-              <p>Teste gratuito por 30 dias. Sem cartão de crédito necessário.</p>
+            {/* 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
+              </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>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          columns={[
+            {
+              title: "Produto",              items: [
+                { label: "Dashboard", href: "/dashboard" },
+                { label: "Treino", href: "training" },
+                { label: "Nutrição", href: "nutrition" },
+                { label: "Cardio Hub", href: "cardio" }
+              ]
+            },
+            {
+              title: "Comunidade",              items: [
+                { label: "Comunidade", href: "community" },
+                { label: "Perfil", href: "profile" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
+              ]
+            },
+            {
+              title: "Empresa",              items: [
+                { label: "Sobre", href: "about" },
+                { label: "Contato", href: "contact" },
+                { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
+              ]
+            }
+          ]}
+          logoText="FitFlow Pro"
+          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
+        />
+      </div>
     </ThemeProvider>
   );
 }