Add src/app/auth/page.tsx
This commit is contained in:
152
src/app/auth/page.tsx
Normal file
152
src/app/auth/page.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
export default function AuthPage() {
|
||||
const [isLogin, setIsLogin] = useState(true);
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (isLogin) {
|
||||
console.log('Login:', { email, password });
|
||||
// Implement login logic here
|
||||
} else {
|
||||
console.log('Signup:', { email, password });
|
||||
// Implement signup logic here
|
||||
}
|
||||
alert(`${isLogin ? 'Login' : 'Signup'} successful for ${email}! (Mock authentication)`);
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
{ name: "Login", href: "/auth" },
|
||||
{ name: "Dashboard", href: "/dashboard" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={navItems}
|
||||
brandName="Trade Snooper"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-screen items-center justify-center p-4 bg-background">
|
||||
<div className="w-full max-w-md bg-card text-foreground p-8 rounded-lg shadow-lg border border-accent/20">
|
||||
<h1 className="text-3xl font-bold text-center mb-6 text-primary-cta">
|
||||
{isLogin ? 'Login' : 'Sign Up'}
|
||||
</h1>
|
||||
<p className="text-center text-sm mb-8 text-foreground/70">
|
||||
{isLogin ? 'Welcome back! Please login to your account.' : 'Join Trade Snooper today! Create your account.'}
|
||||
</p>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
className="w-full p-3 bg-background border border-accent/30 rounded-md text-foreground placeholder-foreground/50 focus:ring-2 focus:ring-primary-cta focus:border-transparent outline-none transition-all duration-200"
|
||||
placeholder="you@example.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
className="w-full p-3 bg-background border border-accent/30 rounded-md text-foreground placeholder-foreground/50 focus:ring-2 focus:ring-primary-cta focus:border-transparent outline-none transition-all duration-200"
|
||||
placeholder="********"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-primary-cta text-white font-semibold py-3 px-4 rounded-md hover:bg-primary-cta/90 transition-colors duration-200"
|
||||
>
|
||||
{isLogin ? 'Login' : 'Sign Up'}
|
||||
</button>
|
||||
</form>
|
||||
<p className="text-center text-sm text-foreground/60 mt-6">
|
||||
{isLogin ? "Don't have an account? " : 'Already have an account? '}
|
||||
<button
|
||||
onClick={() => setIsLogin(!isLogin)}
|
||||
className="text-primary-cta hover:underline focus:outline-none"
|
||||
>
|
||||
{isLogin ? 'Sign Up' : 'Login'}
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoSrc="http://img.b2bpic.net/free-vector/gradient-technology-logo-collection_23-2148162307.jpg"
|
||||
logoAlt="Trade Snooper Logo"
|
||||
logoText="Trade Snooper"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform", items: [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
{ label: "Markets", href: "#" },
|
||||
{ label: "AI Analytics", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Partners", href: "#social-proof" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 Trade Snooper. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user