Add src/app/login/page.tsx
This commit is contained in:
153
src/app/login/page.tsx
Normal file
153
src/app/login/page.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user