Add src/app/register/page.tsx

2026-06-09 09:18:23 +00:00
parent 8b4cc49efe
commit f378c7353e
1 changed files with 130 additions and 0 deletions
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import Input from '@/components/form/Input';
+import ButtonTextUnderline from '@/components/button/ButtonTextUnderline';
+import { useState } from "react";
+
+export default function RegisterPage() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const handleRegister = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      alert("Passwords do not match!");
+      return;
+    }
+    console.log("Registration submitted:", { name, email, password });
+    // Add registration logic here
+  };
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Products", id: "#products" },
+    { name: "Features", id: "#features" },
+    { name: "Testimonials", id: "#testimonials" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "FAQ", id: "#faq" },
+    { name: "Contact", id: "#contact" },
+    { name: "Login", id: "/login" },
+    { name: "Register", id: "/register" },
+    { name: "Customer", id: "/customer/dashboard" },
+    { name: "Seller", id: "/seller/dashboard" }
+  ];
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-shift"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="inset"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={navItems}
+            brandName="DesignFlow"
+            button={{ text: "Get Started", href: "#products" }}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <div className="min-h-[calc(100vh-80px)] flex items-center justify-center p-4">
+          <div className="w-full max-w-md bg-card text-foreground p-8 rounded-lg shadow-xl">
+            <h1 className="text-3xl font-bold mb-6 text-center">Register for DesignFlow</h1>
+            <form onSubmit={handleRegister} className="space-y-4">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium mb-1">Name</label>
+                <Input
+                  id="name"
+                  type="text"
+                  placeholder="John Doe"
+                  value={name}
+                  onChange={setName}
+                  required
+                  className="w-full"
+                />
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-1">Email</label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="your.email@example.com"
+                  value={email}
+                  onChange={setEmail}
+                  required
+                  className="w-full"
+                />
+              </div>
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium mb-1">Password</label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="********"
+                  value={password}
+                  onChange={setPassword}
+                  required
+                  className="w-full"
+                />
+              </div>
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium mb-1">Confirm Password</label>
+                <Input
+                  id="confirmPassword"
+                  type="password"
+                  placeholder="********"
+                  value={confirmPassword}
+                  onChange={setConfirmPassword}
+                  required
+                  className="w-full"
+                />
+              </div>
+              <ButtonTextUnderline
+                type="submit"
+                text="Register"
+                className="w-full justify-center"
+              />
+              <p className="text-center text-sm mt-4">
+                Already have an account?{" "}
+                <a href="/login" className="text-primary-cta hover:underline">Login here</a>
+              </p>
+            </form>
+          </div>
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}