Add src/app/register/page.tsx
This commit is contained in:
246
src/app/register/page.tsx
Normal file
246
src/app/register/page.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import { useState } from "react";
|
||||
import { Input } from "@/components/form/Input";
|
||||
import ButtonTextStagger from "@/components/button/ButtonTextStagger/ButtonTextStagger";
|
||||
import Link from "next/link";
|
||||
import { Mail, Lock, User, Phone } from "lucide-react";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: "", email: "", phone: "", password: "", confirmPassword: ""});
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
if (errors[field]) {
|
||||
setErrors((prev) => ({ ...prev, [field]: "" }));
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.fullName.trim()) {
|
||||
newErrors.fullName = "Full name is required";
|
||||
}
|
||||
if (!formData.email.trim()) {
|
||||
newErrors.email = "Email is required";
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
||||
newErrors.email = "Please enter a valid email";
|
||||
}
|
||||
if (!formData.phone.trim()) {
|
||||
newErrors.phone = "Phone number is required";
|
||||
}
|
||||
if (!formData.password) {
|
||||
newErrors.password = "Password is required";
|
||||
} else if (formData.password.length < 8) {
|
||||
newErrors.password = "Password must be at least 8 characters";
|
||||
}
|
||||
if (!formData.confirmPassword) {
|
||||
newErrors.confirmPassword = "Please confirm your password";
|
||||
} else if (formData.password !== formData.confirmPassword) {
|
||||
newErrors.confirmPassword = "Passwords do not match";
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (validateForm()) {
|
||||
setSubmitted(true);
|
||||
console.log("Registration submitted:", formData);
|
||||
setTimeout(() => {
|
||||
setSubmitted(false);
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Platform", items: [
|
||||
{ label: "For Buyers", href: "/buyer" },
|
||||
{ label: "For Sellers", href: "/seller" },
|
||||
{ label: "How It Works", href: "#" },
|
||||
{ label: "Pricing", href: "#pricing" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Help Center", href: "#" },
|
||||
{ label: "Contact Us", href: "/contact" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Report Issue", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="large"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Agora"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Register", id: "/register" },
|
||||
]}
|
||||
button={{ text: "Launch Platform", href: "/dashboard" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-[calc(100vh-200px)] flex items-center justify-center py-20 px-4">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-card rounded-lg p-8 shadow-lg">
|
||||
<h1 className="text-3xl font-bold mb-2 text-center">Create Account</h1>
|
||||
<p className="text-center text-foreground/70 mb-8">
|
||||
Join Agora marketplace today
|
||||
</p>
|
||||
|
||||
{submitted && (
|
||||
<div className="mb-6 p-4 bg-green-100 text-green-800 rounded-lg text-center">
|
||||
Registration submitted successfully!
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Full Name
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Enter your full name"
|
||||
value={formData.fullName}
|
||||
onChange={(value) => handleChange("fullName", value)}
|
||||
required
|
||||
/>
|
||||
{errors.fullName && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.fullName}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Email</label>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
value={formData.email}
|
||||
onChange={(value) => handleChange("email", value)}
|
||||
required
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<Input
|
||||
type="tel"
|
||||
placeholder="Enter your phone number"
|
||||
value={formData.phone}
|
||||
onChange={(value) => handleChange("phone", value)}
|
||||
required
|
||||
/>
|
||||
{errors.phone && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Password
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Create a password"
|
||||
value={formData.password}
|
||||
onChange={(value) => handleChange("password", value)}
|
||||
required
|
||||
/>
|
||||
{errors.password && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.password}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">
|
||||
Confirm Password
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Confirm your password"
|
||||
value={formData.confirmPassword}
|
||||
onChange={(value) => handleChange("confirmPassword", value)}
|
||||
required
|
||||
/>
|
||||
{errors.confirmPassword && (
|
||||
<p className="text-red-500 text-xs mt-1">
|
||||
{errors.confirmPassword}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<ButtonTextStagger
|
||||
text="Create Account"
|
||||
onClick={handleSubmit}
|
||||
className="w-full py-3 text-center"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-sm mt-6 text-foreground/70">
|
||||
Already have an account?{" "}
|
||||
<Link href="/login" className="text-primary-cta hover:underline">
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AfBvzLipXWZDam6ggyuaVWEFRP/an-illustration-representing-digital-mar-1772974545983-08d3526b.png"
|
||||
imageAlt="Agora Marketplace Community"
|
||||
logoText="Agora Marketplace"
|
||||
copyrightText="© 2025 Agora. All rights reserved."
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user