Update src/app/login/page.tsx

src/app/login/page.tsx

@@ -2,46 +2,69 @@
 
 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 Input from '@/components/form/Input';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Mail, Lock, ArrowRight, AlertCircle } from 'lucide-react';
+import { useState } from '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 [formData, setFormData] = useState({
+    email: '',
+    password: ''
+  });
+  const [errors, setErrors] = useState<{ [key: string]: string }>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const validateForm = () => {
-    const newErrors: { email?: string; password?: string } = {};
+    const newErrors: { [key: string]: string } = {};
     
-    if (!email) {
-      newErrors.email = "Email é obrigatório";
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      newErrors.email = "Email inválido";
+    if (!formData.email) {
+      newErrors.email = 'Email é obrigatório';
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.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";
+    if (!formData.password) {
+      newErrors.password = 'Senha é obrigatória';
+    } else if (formData.password.length < 6) {
+      newErrors.password = 'Senha deve ter pelo menos 6 caracteres';
     }
     
-    return newErrors;
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+    if (errors[name]) {
+      setErrors(prev => ({
+        ...prev,
+        [name]: ''
+      }));
+    }
+  };
+
+  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);
+    if (!validateForm()) {
+      return;
+    }
+    
+    setIsSubmitting(true);
+    try {
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      console.log('Login attempt:', formData);
+      alert('Login bem-sucedido!');
+      setFormData({ email: '', password: '' });
+    } catch (error) {
+      setErrors({ submit: 'Erro ao fazer login. Tente novamente.' });
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -62,99 +85,175 @@ export default function LoginPage() {
         <NavbarStyleCentered
           navItems={[
             { name: "Dashboard", id: "/" },
-            { name: "Treino", id: "training" },
-            { name: "Nutrição", id: "nutrition" },
-            { name: "Comunidade", id: "community" },
-            { name: "Perfil", id: "profile" }
+            { name: "Sobre", id: "#hero" },
+            { name: "Features", id: "#onboarding" },
+            { name: "Contato", id: "#contact" },
+            { name: "Signup", id: "/signup" }
           ]}
-          button={{ text: "Começar Agora", href: "/signup" }}
+          button={{ text: "Fazer Login", href: "/login" }}
           brandName="FitFlow Pro"
         />
       </div>
 
-      <div className="min-h-[calc(100vh-80px)] flex items-center justify-center py-12 px-4">
-        <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>
+      <div id="login" data-section="login" className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-md space-y-8">
+          <div className="text-center space-y-3">
+            <h1 className="text-4xl font-extrabold tracking-tight">Bem-vindo de volta</h1>
+            <p className="text-base text-gray-600 dark:text-gray-400">Faça login na sua conta FitFlow Pro</p>
+          </div>
 
+          <div className="bg-card rounded-2xl border border-primary-cta/20 p-8 shadow-lg">
             <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>
-                )}
-              </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>
+              {/* Email Field */}
+              <div className="space-y-2">
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
+                  Email
                 </label>
                 <div className="relative">
-                  <Input
-                    value={password}
-                    onChange={setPassword}
-                    type={showPassword ? "text" : "password"}
-                    placeholder="••••••••"
-                    required
-                    className={errors.password ? "border-red-500" : "pr-10"}
+                  <Mail className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    placeholder="seu@email.com"
+                    className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
+                      errors.email
+                        ? 'border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:ring-primary-cta'
+                    }`}
                   />
-                  <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"}
-                  >
-                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
-                  </button>
                 </div>
-                {errors.password && (
-                  <p className="text-red-500 text-sm mt-1">{errors.password}</p>
+                {errors.email && (
+                  <div className="flex items-center gap-2 text-red-500 text-sm">
+                    <AlertCircle className="w-4 h-4" />
+                    {errors.email}
+                  </div>
                 )}
               </div>
 
+              {/* Password Field */}
+              <div className="space-y-2">
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">
+                  Senha
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
+                  <input
+                    id="password"
+                    name="password"
+                    type="password"
+                    value={formData.password}
+                    onChange={handleChange}
+                    placeholder="••••••••"
+                    className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
+                      errors.password
+                        ? 'border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:ring-primary-cta'
+                    }`}
+                  />
+                </div>
+                {errors.password && (
+                  <div className="flex items-center gap-2 text-red-500 text-sm">
+                    <AlertCircle className="w-4 h-4" />
+                    {errors.password}
+                  </div>
+                )}
+              </div>
+
+              {/* Submit Errors */}
+              {errors.submit && (
+                <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3 flex items-center gap-2 text-red-700 dark:text-red-400 text-sm">
+                  <AlertCircle className="w-4 h-4 flex-shrink-0" />
+                  {errors.submit}
+                </div>
+              )}
+
+              {/* Submit Button */}
               <button
                 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"
+                disabled={isSubmitting}
+                className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-2.5 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                {isSubmitted ? "Entrando..." : "Entrar"}
+                {isSubmitting ? 'Entrando...' : 'Fazer Login'}
+                {!isSubmitting && <ArrowRight className="w-4 h-4" />}
               </button>
             </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="mt-6 relative">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
+              </div>
+              <div className="relative flex justify-center text-sm">
+                <span className="px-2 bg-card text-gray-500">ou continue com</span>
+              </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 Buttons */}
+            <div className="mt-6 space-y-3">
+              <button className="w-full bg-background hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-600 text-foreground font-medium py-2.5 rounded-lg transition-all">
+                Google
+              </button>
+              <button className="w-full bg-background hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-600 text-foreground font-medium py-2.5 rounded-lg transition-all">
+                Apple
+              </button>
             </div>
           </div>
+
+          {/* Sign Up Link */}
+          <p className="text-center text-gray-600 dark:text-gray-400 text-sm">
+            Não tem conta?{' '}
+            <a href="/signup" className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors">
+              Criar conta
+            </a>
+          </p>
+
+          {/* Forgot Password Link */}
+          <p className="text-center text-gray-600 dark:text-gray-400 text-sm">
+            <a href="#" className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors">
+              Esqueceu sua senha?
+            </a>
+          </p>
         </div>
       </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          columns={[
+            {
+              items: [
+                { label: "Home", href: "/" },
+                { label: "Sobre", href: "/#hero" },
+                { label: "Features", href: "/#onboarding" }
+              ]
+            },
+            {
+              items: [
+                { label: "Blog", href: "#" },
+                { label: "Ajuda", href: "#" },
+                { label: "Suporte", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Privacidade", href: "#" },
+                { label: "Termos", href: "#" },
+                { label: "Contato", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Login", href: "/login" },
+                { label: "Signup", href: "/signup" },
+                { label: "Dashboard", href: "/" }
+              ]
+            }
+          ]}
+          logoText="FitFlow Pro"
+        />
+      </div>
     </ThemeProvider>
   );
-}
+}