Update src/app/login/page.tsx

src/app/login/page.tsx

@@ -1,11 +1,18 @@
 "use client";
 
+import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import FooterSimple from "@/components/sections/footer/FooterSimple";
-import Link from "next/link";
+import { Lock, Mail, Eye, EyeOff, Zap, AlertCircle } 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 [focusedField, setFocusedField] = useState<string | null>(null);
+
   const navItems = [
     { name: "Home", id: "/" },
     { name: "Features", id: "#features" },
@@ -14,44 +21,38 @@ export default function LoginPage() {
     { name: "Sign Up", id: "https://example.com/signup" },
   ];
 
-  const footerColumns = [
-    {
-      title: "Product",
-      items: [
-        { label: "Features", href: "#features" },
-        { label: "Security", href: "#metrics" },
-        { label: "Pricing", href: "#" },
-        { label: "Documentation", href: "#" },
-      ],
-    },
-    {
-      title: "Company",
-      items: [
-        { label: "About Us", href: "#" },
-        { label: "Blog", href: "#" },
-        { label: "Careers", href: "#" },
-        { label: "Contact", href: "#" },
-      ],
-    },
-    {
-      title: "Resources",
-      items: [
-        { label: "API Docs", href: "#" },
-        { label: "Security Guide", href: "#" },
-        { label: "FAQ", href: "#faq" },
-        { label: "Status", href: "#" },
-      ],
-    },
-    {
-      title: "Legal",
-      items: [
-        { label: "Privacy Policy", href: "#" },
-        { label: "Terms of Service", href: "#" },
-        { label: "Cookie Policy", href: "#" },
-        { label: "Compliance", href: "#" },
-      ],
-    },
-  ];
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      if (!email || !password) {
+        setError("Please fill in all fields");
+        return;
+      }
+
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        setError("Please enter a valid email address");
+        return;
+      }
+
+      if (password.length < 8) {
+        setError("Password must be at least 8 characters");
+        return;
+      }
+
+      // Simulate API call with delay
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+
+      // Redirect to verify OTP page
+      window.location.href = "/verify-otp";
+    } catch (err) {
+      setError("Login failed. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   return (
     <ThemeProvider
@@ -60,7 +61,7 @@ export default function LoginPage() {
       borderRadius="rounded"
       contentWidth="compact"
       sizing="largeSmallSizeMediumTitles"
-      background="noiseDiagonalGradient"
+      background="circleGradient"
       cardStyle="gradient-radial"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="radial-glow"
@@ -70,101 +71,168 @@ export default function LoginPage() {
         <NavbarStyleApple brandName="AuthVault" navItems={navItems} />
       </div>
 
-      <div id="login-hero" data-section="login-hero" className="min-h-screen flex items-center justify-center py-12 px-4">
-        <div className="w-full max-w-md">
-          <div className="rounded-theme bg-card border border-accent/20 shadow-lg p-8">
-            <h1 className="text-3xl font-bold text-foreground mb-2">Sign In</h1>
-            <p className="text-foreground/60 mb-8">Access your secure account</p>
+      <div id="login" data-section="login" className="min-h-screen flex items-center justify-center px-4 py-20 relative overflow-hidden">
+        {/* Animated background grid */}
+        <div className="absolute inset-0 -z-10">
+          <div className="absolute inset-0 bg-gradient-to-br from-background via-card to-background" />
+          <div className="absolute inset-0 opacity-30">
+            <div
+              className="absolute inset-0"
+              style={{
+                backgroundImage: `
+                  linear-gradient(0deg, transparent 24%, rgba(155, 155, 155, .15) 25%, rgba(155, 155, 155, .15) 26%, transparent 27%, transparent 74%, rgba(155, 155, 155, .15) 75%, rgba(155, 155, 155, .15) 76%, transparent 77%, transparent),
+                  linear-gradient(90deg, transparent 24%, rgba(155, 155, 155, .15) 25%, rgba(155, 155, 155, .15) 26%, transparent 27%, transparent 74%, rgba(155, 155, 155, .15) 75%, rgba(155, 155, 155, .15) 76%, transparent 77%, transparent)
+                `,
+                backgroundSize: "50px 50px"}}
+            />
+          </div>
+        </div>
 
-            <form className="space-y-6">
-              <div>
-                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
+        <div className="w-full max-w-md animate-in fade-in zoom-in duration-500">
+          {/* Header */}
+          <div className="text-center mb-8">
+            <div className="flex justify-center mb-4">
+              <div className="relative">
+                <div className="absolute inset-0 bg-gradient-to-br from-primary-cta to-accent rounded-lg blur-lg opacity-60 animate-pulse" />
+                <div className="relative bg-background p-3 rounded-lg border border-primary-cta/20 animate-bounce">
+                  <Lock className="w-8 h-8 text-primary-cta" />
+                </div>
+              </div>
+            </div>
+            <h1 className="text-4xl font-bold text-foreground mb-2 animate-in slide-in-from-bottom duration-700">
+              Secure Login
+            </h1>
+            <p className="text-foreground/70 animate-in slide-in-from-bottom duration-700 delay-100">
+              Access your AuthVault account with enterprise-grade security
+            </p>
+          </div>
+
+          {/* Login Card */}
+          <div className="bg-card border border-accent/30 rounded-lg p-8 shadow-lg backdrop-blur-sm animate-in scale-in duration-700 delay-200">
+            <form onSubmit={handleLogin} className="space-y-6">
+              {/* Email Field */}
+              <div className="group relative">
+                <label className="block text-sm font-medium text-foreground mb-2 transition-all group-focus-within:text-primary-cta">
                   Email Address
                 </label>
-                <input
-                  id="email"
-                  type="email"
-                  placeholder="your@email.com"
-                  className="w-full px-4 py-3 rounded-theme bg-background border border-accent/30 text-foreground placeholder-foreground/40 focus:outline-none focus:border-primary-cta transition-colors"
-                />
-              </div>
-
-              <div>
-                <label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
-                  Password
-                </label>
-                <input
-                  id="password"
-                  type="password"
-                  placeholder="••••••••"
-                  className="w-full px-4 py-3 rounded-theme bg-background border border-accent/30 text-foreground placeholder-foreground/40 focus:outline-none focus:border-primary-cta transition-colors"
-                />
-              </div>
-
-              <div className="flex items-center justify-between">
-                <label className="flex items-center space-x-2">
+                <div
+                  className={`relative transition-all duration-300 ${
+                    focusedField === "email"
+                      ? "ring-2 ring-primary-cta/50 border-primary-cta"
+                      : "border-accent/30"
+                  } rounded-lg border`}
+                >
+                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-accent pointer-events-none transition-colors group-focus-within:text-primary-cta" />
                   <input
-                    type="checkbox"
-                    className="w-4 h-4 rounded border-accent/30 text-primary-cta focus:ring-primary-cta"
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    onFocus={() => setFocusedField("email")}
+                    onBlur={() => setFocusedField(null)}
+                    placeholder="you@example.com"
+                    className="w-full bg-transparent pl-10 pr-4 py-3 text-foreground placeholder-foreground/50 focus:outline-none transition-all"
                   />
-                  <span className="text-sm text-foreground/70">Remember me</span>
-                </label>
-                <Link href="#" className="text-sm text-primary-cta hover:text-primary-cta/80 transition-colors">
-                  Forgot password?
-                </Link>
+                </div>
               </div>
 
+              {/* Password Field */}
+              <div className="group relative">
+                <div className="flex justify-between items-center mb-2">
+                  <label className="block text-sm font-medium text-foreground transition-all group-focus-within:text-primary-cta">
+                    Password
+                  </label>
+                  <a href="#" className="text-xs text-primary-cta hover:text-primary-cta/80 transition-colors">
+                    Forgot?
+                  </a>
+                </div>
+                <div
+                  className={`relative transition-all duration-300 ${
+                    focusedField === "password"
+                      ? "ring-2 ring-primary-cta/50 border-primary-cta"
+                      : "border-accent/30"
+                  } rounded-lg border`}
+                >
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-accent pointer-events-none transition-colors group-focus-within:text-primary-cta" />
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    onFocus={() => setFocusedField("password")}
+                    onBlur={() => setFocusedField(null)}
+                    placeholder="••••••••"
+                    className="w-full bg-transparent pl-10 pr-12 py-3 text-foreground placeholder-foreground/50 focus:outline-none transition-all"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-accent hover:text-primary-cta transition-colors"
+                  >
+                    {showPassword ? (
+                      <EyeOff className="w-5 h-5" />
+                    ) : (
+                      <Eye className="w-5 h-5" />
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              {/* Error Message */}
+              {error && (
+                <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded-lg animate-in shake duration-300">
+                  <AlertCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
+                  <span className="text-sm text-red-500">{error}</span>
+                </div>
+              )}
+
+              {/* Login Button */}
               <button
                 type="submit"
-                className="w-full bg-primary-cta text-primary-cta-text py-3 rounded-theme font-semibold hover:opacity-90 transition-opacity"
+                disabled={isLoading}
+                className="w-full relative group bg-gradient-to-r from-primary-cta to-accent text-white font-semibold py-3 px-4 rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-primary-cta/50 disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                Sign In
+                <div className="absolute inset-0 bg-gradient-to-r from-accent to-primary-cta opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                <div className="relative flex items-center justify-center gap-2">
+                  {isLoading ? (
+                    <>
+                      <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                      <span>Authenticating...</span>
+                    </>
+                  ) : (
+                    <>
+                      <Zap className="w-4 h-4" />
+                      <span>Secure Login</span>
+                    </>
+                  )}
+                </div>
               </button>
             </form>
 
-            <div className="mt-6 relative">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-accent/20"></div>
-              </div>
-              <div className="relative flex justify-center text-sm">
-                <span className="px-2 bg-card text-foreground/60">New to AuthVault?</span>
-              </div>
+            {/* Divider */}
+            <div className="my-6 flex items-center gap-3">
+              <div className="flex-1 h-px bg-accent/20" />
+              <span className="text-xs text-foreground/50 font-medium">OR</span>
+              <div className="flex-1 h-px bg-accent/20" />
             </div>
 
-            <p className="mt-6 text-center text-foreground/70">
-              <Link href="https://example.com/signup" className="text-primary-cta hover:text-primary-cta/80 font-medium transition-colors">
-                Create an account
-              </Link>
-            </p>
-
-            <p className="mt-8 text-xs text-foreground/50 text-center">
-              This site is protected by reCAPTCHA and the Google{" "}
-              <a href="#" className="underline hover:text-foreground/70">
-                Privacy Policy
-              </a>{" "}
-              and{" "}
-              <a href="#" className="underline hover:text-foreground/70">
-                Terms of Service
-              </a>{" "}
-              apply.
+            {/* Sign Up Link */}
+            <p className="text-center text-sm text-foreground/70">
+              Don't have an account?{" "}
+              <a
+                href="https://example.com/signup"
+                className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors"
+              >
+                Create one now
+              </a>
             </p>
           </div>
 
-          <div className="mt-8 p-4 rounded-theme bg-background-accent/20 border border-background-accent/40">
-            <p className="text-sm text-foreground/80">
-              <span className="font-semibold">🔒 Security First:</span> We use military-grade AES-256 encryption to protect your credentials. Your password is never stored in plain text.
-            </p>
+          {/* Security Badge */}
+          <div className="mt-8 flex items-center justify-center gap-2 text-xs text-foreground/60 animate-in fade-in duration-700 delay-500">
+            <Lock className="w-4 h-4" />
+            <span>AES-256 Encrypted Connection</span>
           </div>
         </div>
       </div>
-
-      <div id="footer" data-section="footer">
-        <FooterSimple
-          columns={footerColumns}
-          bottomLeftText="© 2025 AuthVault. All rights reserved. Enterprise-grade security solutions."
-          bottomRightText="Made with security in mind"
-        />
-      </div>
     </ThemeProvider>
   );
-}
+}