Add src/app/login/page.tsx

2026-03-02 21:33:36 +00:00
parent 5ec3397a99
commit 2d7e4c9035
1 changed files with 153 additions and 0 deletions
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { LogIn } from 'lucide-react';
+import { useState } from 'react';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    // Add login logic here
+    setTimeout(() => setLoading(false), 1000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="noise"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Learn", id: "features" },
+            { name: "Courses", id: "learning" },
+            { name: "Community", id: "testimonials" },
+            { name: "FAQ", id: "faq" },
+            { name: "Login", id: "/login" },
+          ]}
+          button={{
+            text: "Start Learning",            href: "/"
+          }}
+          brandName="FinHub"
+        />
+      </div>
+
+      <div className="min-h-screen flex items-center justify-center px-4 py-20">
+        <div className="w-full max-w-md">
+          <div className="bg-card rounded-lg shadow-lg p-8">
+            <div className="flex items-center justify-center mb-6">
+              <LogIn className="text-primary-cta mr-2" size={32} />
+              <h1 className="text-3xl font-bold text-foreground">Welcome Back</h1>
+            </div>
+            
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="your@email.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
+                  Password
+                </label>
+                <input
+                  type="password"
+                  id="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-4 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="••••••••"
+                  required
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full bg-primary-cta text-primary-cta-text py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity disabled:opacity-50"
+              >
+                {loading ? 'Logging In...' : 'Log In'}
+              </button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-foreground text-sm">
+                Don't have an account?{' '}
+                <a href="/signup" className="text-primary-cta hover:underline font-semibold">
+                  Sign up here
+                </a>
+              </p>
+            </div>
+
+            <div className="mt-4 text-center">
+              <a href="#" className="text-primary-cta text-sm hover:underline">
+                Forgot your password?
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APDZNAPblxpNYRuXTIE4hmL6HY/abstract-gradient-background-with-soft-f-1772485585424-a9e26a7b.png"
+          imageAlt="FinHub gradient background"
+          logoText="FinHub"
+          copyrightText="© 2025 FinHub | Making Finance Fun for Everyone"
+          columns={[
+            {
+              title: "Learning",              items: [
+                { label: "Courses", href: "learning" },
+                { label: "Lessons", href: "features" },
+                { label: "Challenges", href: "#" },
+                { label: "Resources", href: "#" },
+              ],
+            },
+            {
+              title: "Community",              items: [
+                { label: "Forum", href: "#" },
+                { label: "Discord", href: "#" },
+                { label: "Leaderboard", href: "#" },
+                { label: "Events", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Contact", href: "contact" },
+                { label: "Privacy Policy", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}