From f3f3217857e4fc3ec89ee8ddec176ce6cfd7003b Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 13:16:33 +0000
Subject: [PATCH] Add src/app/register/page.tsx

---
 src/app/register/page.tsx | 246 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 246 insertions(+)
 create mode 100644 src/app/register/page.tsx

diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
new file mode 100644
index 0000000..2bca43b
--- /dev/null
+++ b/src/app/register/page.tsx
@@ -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>
+  );
+}
\ No newline at end of file