Add src/app/login/page.tsx

src/app/login/page.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+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';
+
+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 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) => {
+    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);
+    }
+  };
+
+  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 id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "/" },
+            { name: "Treino", id: "training" },
+            { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
+          ]}
+          button={{ text: "Começar Agora", href: "/signup" }}
+          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>
+
+            <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>
+                </label>
+                <div className="relative">
+                  <Input
+                    value={password}
+                    onChange={setPassword}
+                    type={showPassword ? "text" : "password"}
+                    placeholder="••••••••"
+                    required
+                    className={errors.password ? "border-red-500" : "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"}
+                  >
+                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
+                </div>
+                {errors.password && (
+                  <p className="text-red-500 text-sm mt-1">{errors.password}</p>
+                )}
+              </div>
+
+              <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"
+              >
+                {isSubmitted ? "Entrando..." : "Entrar"}
+              </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>
+            </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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}