Add src/app/login/page.tsx

2026-03-21 15:21:39 +00:00
parent e6f0c2c728
commit 55a6873a13
1 changed files with 283 additions and 0 deletions
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -0,0 +1,283 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { Lock, Mail, AlertCircle, CheckCircle } from "lucide-react";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [submitStatus, setSubmitStatus] = useState<"success" | "error" | null>(null);
+
+  const navItems = [
+    { name: "Dashboard", id: "dashboard" },
+    { name: "How It Works", id: "how-it-works" },
+    { name: "Features", id: "features" },
+    { name: "Support", id: "support" },
+  ];
+
+  const footerColumns = [
+    {
+      items: [
+        { label: "Dashboard", href: "/dashboard" },
+        { label: "How It Works", href: "#how-it-works" },
+        { label: "Features", href: "#features" },
+        { label: "Support", href: "/support" },
+      ],
+    },
+    {
+      items: [
+        { label: "About Us", href: "#" },
+        { label: "Our Team", href: "#" },
+        { label: "Blog", href: "#" },
+        { label: "Careers", href: "#" },
+      ],
+    },
+    {
+      items: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+        { label: "Security", href: "#" },
+        { label: "Compliance", href: "#" },
+      ],
+    },
+    {
+      items: [
+        { label: "Email", href: "mailto:support@financeflow.com" },
+        { label: "Phone", href: "tel:+919876543210" },
+        { label: "Twitter", href: "https://twitter.com" },
+        { label: "LinkedIn", href: "https://linkedin.com" },
+      ],
+    },
+  ];
+
+  const validateForm = () => {
+    const newErrors: { email?: string; password?: string } = {};
+
+    if (!email) {
+      newErrors.email = "Email is required";
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      newErrors.email = "Please enter a valid email address";
+    }
+
+    if (!password) {
+      newErrors.password = "Password is required";
+    } else if (password.length < 6) {
+      newErrors.password = "Password must be at least 6 characters";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitStatus(null);
+
+    if (!validateForm()) {
+      setSubmitStatus("error");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 1500));
+      setSubmitStatus("success");
+      setEmail("");
+      setPassword("");
+      setErrors({});
+      // In a real app, redirect to dashboard
+    } catch (error) {
+      setSubmitStatus("error");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumSmall"
+      sizing="largeSizeMediumTitles"
+      background="none"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="FinanceFlow"
+          bottomLeftText="Global Investment Platform"
+          bottomRightText="support@financeflow.com"
+        />
+      </div>
+
+      <div className="min-h-screen flex items-center justify-center px-4 md:px-6 py-16">
+        <div className="w-full max-w-md">
+          <div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-900 dark:to-gray-800 rounded-2xl p-8 shadow-lg border border-blue-100 dark:border-gray-700">
+            {/* Header */}
+            <div className="mb-8 text-center">
+              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 mb-4">
+                <Lock className="w-6 h-6 text-blue-600 dark:text-blue-400" />
+              </div>
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                Welcome Back
+              </h1>
+              <p className="text-gray-600 dark:text-gray-400">
+                Sign in to your FinanceFlow account
+              </p>
+            </div>
+
+            {/* Status Messages */}
+            {submitStatus === "success" && (
+              <div className="mb-6 p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 flex items-start gap-3">
+                <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
+                <div>
+                  <p className="text-sm font-medium text-green-800 dark:text-green-200">
+                    Login successful!
+                  </p>
+                  <p className="text-sm text-green-700 dark:text-green-300 mt-1">
+                    Redirecting to your dashboard...
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {submitStatus === "error" && Object.keys(errors).length > 0 && (
+              <div className="mb-6 p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 flex items-start gap-3">
+                <AlertCircle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+                <div>
+                  <p className="text-sm font-medium text-red-800 dark:text-red-200">
+                    Please fix the errors below
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* Form */}
+            <form onSubmit={handleSubmit} className="space-y-5">
+              {/* Email Field */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Email Address
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                  <input
+                    id="email"
+                    type="email"
+                    value={email}
+                    onChange={(e) => {
+                      setEmail(e.target.value);
+                      if (errors.email) setErrors({ ...errors, email: undefined });
+                    }}
+                    placeholder="you@example.com"
+                    className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-colors ${
+                      errors.email
+                        ? "border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700"
+                        : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
+                    } text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400`}
+                    disabled={isLoading}
+                  />
+                </div>
+                {errors.email && (
+                  <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.email}</p>
+                )}
+              </div>
+
+              {/* Password Field */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Password
+                  </label>
+                  <Link
+                    href="#"
+                    className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+                  >
+                    Forgot?
+                  </Link>
+                </div>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                  <input
+                    id="password"
+                    type="password"
+                    value={password}
+                    onChange={(e) => {
+                      setPassword(e.target.value);
+                      if (errors.password) setErrors({ ...errors, password: undefined });
+                    }}
+                    placeholder="••••••••"
+                    className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-colors ${
+                      errors.password
+                        ? "border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700"
+                        : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800"
+                    } text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400`}
+                    disabled={isLoading}
+                  />
+                </div>
+                {errors.password && (
+                  <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.password}</p>
+                )}
+              </div>
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full mt-6 px-4 py-2.5 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-600 text-white font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              >
+                {isLoading ? (
+                  <>
+                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                    Signing in...
+                  </>
+                ) : (
+                  "Sign In"
+                )}
+              </button>
+            </form>
+
+            {/* Divider */}
+            <div className="flex items-center gap-3 my-6">
+              <div className="flex-1 h-px bg-gray-300 dark:bg-gray-600"></div>
+              <span className="text-sm text-gray-600 dark:text-gray-400">or</span>
+              <div className="flex-1 h-px bg-gray-300 dark:bg-gray-600"></div>
+            </div>
+
+            {/* Sign Up Link */}
+            <p className="text-center text-sm text-gray-600 dark:text-gray-400">
+              Don't have an account?{" "}
+              <Link
+                href="/signup"
+                className="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+              >
+                Create one now
+              </Link>
+            </p>
+          </div>
+
+          {/* Additional Info */}
+          <p className="text-center text-xs text-gray-500 dark:text-gray-400 mt-6">
+            Your data is secure and protected by industry-leading encryption
+          </p>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis logoText="FinanceFlow" columns={footerColumns} />
+      </div>
+    </ThemeProvider>
+  );
+}