Add src/app/signup/page.tsx
This commit is contained in:
290
src/app/signup/page.tsx
Normal file
290
src/app/signup/page.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Mail, Lock, User, Phone, ArrowRight, Eye, EyeOff, CheckCircle } from "lucide-react";
|
||||
|
||||
export default function SignupPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "", email: "", phone: "", password: "", confirmPassword: ""});
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
const [agreeTerms, setAgreeTerms] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSignup = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
// Simulate signup
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
// Handle signup logic here
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="StockTracker"
|
||||
bottomLeftText="Market Intelligence Platform"
|
||||
bottomRightText="support@stocktracker.com"
|
||||
/>
|
||||
</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-2xl p-8 border border-accent/20">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold mb-2">Get Started Free</h1>
|
||||
<p className="text-foreground/70">Join thousands tracking stocks, gold, silver, Nifty & crypto</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSignup} className="space-y-4">
|
||||
{/* Name Input */}
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium mb-2">
|
||||
Full Name
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-3 w-5 h-5 text-primary-cta/60" />
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="John Doe"
|
||||
className="w-full pl-10 pr-4 py-2 bg-background border border-accent/30 rounded-lg focus:outline-none focus:border-primary-cta transition-colors"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email Input */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-3 w-5 h-5 text-primary-cta/60" />
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
placeholder="your@email.com"
|
||||
className="w-full pl-10 pr-4 py-2 bg-background border border-accent/30 rounded-lg focus:outline-none focus:border-primary-cta transition-colors"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Phone Input */}
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Phone className="absolute left-3 top-3 w-5 h-5 text-primary-cta/60" />
|
||||
<input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="+91 98765 43210"
|
||||
className="w-full pl-10 pr-4 py-2 bg-background border border-accent/30 rounded-lg focus:outline-none focus:border-primary-cta transition-colors"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password Input */}
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium mb-2">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-3 w-5 h-5 text-primary-cta/60" />
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
placeholder="••••••••"
|
||||
className="w-full pl-10 pr-12 py-2 bg-background border border-accent/30 rounded-lg focus:outline-none focus:border-primary-cta transition-colors"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-3 text-primary-cta/60 hover:text-primary-cta transition-colors"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="w-5 h-5" />
|
||||
) : (
|
||||
<Eye className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Confirm Password Input */}
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-medium mb-2">
|
||||
Confirm Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-3 w-5 h-5 text-primary-cta/60" />
|
||||
<input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
value={formData.confirmPassword}
|
||||
onChange={handleChange}
|
||||
placeholder="••••••••"
|
||||
className="w-full pl-10 pr-12 py-2 bg-background border border-accent/30 rounded-lg focus:outline-none focus:border-primary-cta transition-colors"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
className="absolute right-3 top-3 text-primary-cta/60 hover:text-primary-cta transition-colors"
|
||||
>
|
||||
{showConfirmPassword ? (
|
||||
<EyeOff className="w-5 h-5" />
|
||||
) : (
|
||||
<Eye className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Terms Agreement */}
|
||||
<label className="flex items-start gap-3 cursor-pointer py-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={agreeTerms}
|
||||
onChange={(e) => setAgreeTerms(e.target.checked)}
|
||||
className="rounded w-5 h-5 mt-0.5 bg-background border border-accent/30 cursor-pointer"
|
||||
required
|
||||
/>
|
||||
<span className="text-sm text-foreground/70">
|
||||
I agree to the{" "}
|
||||
<a href="#" className="text-primary-cta hover:underline">
|
||||
Terms of Service
|
||||
</a>
|
||||
{" "}and{" "}
|
||||
<a href="#" className="text-primary-cta hover:underline">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
{/* Signup Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || !agreeTerms}
|
||||
className="w-full py-3 px-4 bg-primary-cta text-primary-cta-text rounded-lg font-semibold hover:opacity-90 transition-opacity disabled:opacity-50 flex items-center justify-center gap-2 mt-6"
|
||||
>
|
||||
{isLoading ? "Creating Account..." : "Start 3-Day Free Trial"}
|
||||
{!isLoading && <ArrowRight className="w-4 h-4" />}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Trial Info */}
|
||||
<div className="mt-6 p-4 bg-background/50 rounded-lg space-y-2">
|
||||
<p className="text-sm font-semibold text-foreground/80 flex items-center gap-2">
|
||||
<CheckCircle className="w-4 h-4 text-primary-cta" />
|
||||
What you get in 3 days:
|
||||
</p>
|
||||
<ul className="text-xs text-foreground/60 space-y-1 ml-6">
|
||||
<li>✓ Real-time stock & crypto data</li>
|
||||
<li>✓ Gold & silver tracking</li>
|
||||
<li>✓ NIFTY 50 index updates</li>
|
||||
<li>✓ Price alerts (5 active)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Sign In Link */}
|
||||
<p className="text-center text-foreground/70 text-sm mt-6">
|
||||
Already have an account?{" "}
|
||||
<a href="/login" className="text-primary-cta font-semibold hover:underline">
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="StockTracker"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#" },
|
||||
{ label: "Pricing", href: "#" },
|
||||
{ label: "Mobile App", href: "#" },
|
||||
{ label: "API", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Market Data", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Disclaimer", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 StockTracker. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user