Add src/app/login/page.tsx
This commit is contained in:
156
src/app/login/page.tsx
Normal file
156
src/app/login/page.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import Input from '@/components/form/Input';
|
||||
import ButtonIconArrow from '@/components/button/ButtonIconArrow';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function LoginPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Login attempt with:", { email, password });
|
||||
// Implement actual login logic here
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Metrics", id: "#metrics" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg"
|
||||
logoAlt="CryptoSphere Logo"
|
||||
brandName="CryptoSphere"
|
||||
button={{ text: "Sign Up", href: "/register" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-md w-full space-y-8 p-10 bg-card rounded-lg shadow-xl">
|
||||
<div>
|
||||
<h2 className="mt-6 text-center text-3xl font-extrabold text-foreground">
|
||||
Sign in to your account
|
||||
</h2>
|
||||
</div>
|
||||
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="rounded-md shadow-sm -space-y-px">
|
||||
<div>
|
||||
<label htmlFor="email-address" className="sr-only">Email address</label>
|
||||
<Input
|
||||
id="email-address"
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
placeholder="Email address"
|
||||
value={email}
|
||||
onChange={setEmail}
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-primary-cta focus:border-primary-cta focus:z-10 sm:text-sm bg-background-accent text-foreground"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password" className="sr-only">Password</label>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={setPassword}
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-primary-cta focus:border-primary-cta focus:z-10 sm:text-sm bg-background-accent text-foreground"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm">
|
||||
<Link href="/forgot-password" className="font-medium text-primary-cta hover:text-accent">
|
||||
Forgot your password?
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ButtonIconArrow
|
||||
text="Sign in"
|
||||
type="submit"
|
||||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-cta hover:bg-accent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<div className="text-center text-sm text-foreground">
|
||||
Don't have an account?{" "}
|
||||
<Link href="/register" className="font-medium text-primary-cta hover:text-accent">
|
||||
Sign up
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Platform", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "How It Works", href: "#about" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 CryptoSphere. All rights reserved."
|
||||
bottomRightText="Built with Webild"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user