From 1caea88b0b9a7dcae30fd85a97b42e2c076fd7bc Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 22 Mar 2026 13:54:30 +0000
Subject: [PATCH] Add src/app/register/page.tsx

---
 src/app/register/page.tsx | 281 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 281 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..11535c1
--- /dev/null
+++ b/src/app/register/page.tsx
@@ -0,0 +1,281 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function RegisterPage() {
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    password: "",    confirmPassword: ""});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [successMessage, setSuccessMessage] = useState("");
+
+  const navItems = [
+    { name: "Home", id: "home" },
+    { name: "Features", id: "features" },
+    { name: "AI Models", id: "models" },
+    { name: "Pricing", id: "pricing" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Product",      items: [
+        { label: "Features", href: "/#features" },
+        { label: "Pricing", href: "/#pricing" },
+        { label: "AI Models", href: "/#models" },
+        { label: "Blog", href: "#" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/about" },
+        { label: "Contact", href: "/#contact" },
+        { label: "Careers", href: "#" },
+        { label: "Press", href: "#" },
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Documentation", href: "#" },
+        { label: "Community", href: "#" },
+        { label: "Guides", href: "#" },
+        { label: "Support", href: "#" },
+      ],
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+        { label: "Cookie Policy", href: "#" },
+        { label: "Disclaimer", href: "#" },
+      ],
+    },
+  ];
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.name.trim()) {
+      newErrors.name = "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.password) {
+      newErrors.password = "Password is required";
+    } else if (formData.password.length < 8) {
+      newErrors.password = "Password must be at least 8 characters";
+    }
+
+    if (formData.password !== formData.confirmPassword) {
+      newErrors.confirmPassword = "Passwords do not match";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    if (errors[name]) {
+      setErrors((prev) => ({
+        ...prev,
+        [name]: ""}));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSuccessMessage("");
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const userData = {
+        name: formData.name,
+        email: formData.email,
+        password: formData.password,
+        createdAt: new Date().toISOString(),
+        preferences: {
+          theme: "light",          notifications: true,
+          language: "en"},
+      };
+
+      localStorage.setItem(`user_${formData.email}`, JSON.stringify(userData));
+      localStorage.setItem("currentUser", JSON.stringify(userData));
+
+      setSuccessMessage("Account created successfully! Redirecting to login...");
+      setFormData({ name: "", email: "", password: "", confirmPassword: "" });
+
+      setTimeout(() => {
+        window.location.href = "/login";
+      }, 2000);
+    } catch (error) {
+      setErrors({ form: "An error occurred. Please try again." });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="large"
+      background="noise"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Aarti AI"
+          bottomLeftText="Divine AI Guidance"
+          bottomRightText="connect@aartiAI.com"
+        />
+      </div>
+
+      <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-md">
+          <div className="bg-card rounded-lg shadow-md p-8 border border-background-accent">
+            <h1 className="text-3xl font-bold text-center mb-2">Create Account</h1>
+            <p className="text-center text-foreground/70 mb-8">
+              Join Aarti AI and start your spiritual journey
+            </p>
+
+            {successMessage && (
+              <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
+                {successMessage}
+              </div>
+            )}
+
+            {errors.form && (
+              <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+                {errors.form}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
+                  Full Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleInputChange}
+                  placeholder="Your full name"
+                  className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                />
+                {errors.name && (
+                  <p className="mt-1 text-sm text-red-600">{errors.name}</p>
+                )}
+              </div>
+
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  placeholder="your@email.com"
+                  className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                />
+                {errors.email && (
+                  <p className="mt-1 text-sm text-red-600">{errors.email}</p>
+                )}
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">
+                  Password
+                </label>
+                <input
+                  type="password"
+                  id="password"
+                  name="password"
+                  value={formData.password}
+                  onChange={handleInputChange}
+                  placeholder="••••••••"
+                  className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                />
+                {errors.password && (
+                  <p className="mt-1 text-sm text-red-600">{errors.password}</p>
+                )}
+              </div>
+
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-1">
+                  Confirm Password
+                </label>
+                <input
+                  type="password"
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  value={formData.confirmPassword}
+                  onChange={handleInputChange}
+                  placeholder="••••••••"
+                  className="w-full px-4 py-2 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                />
+                {errors.confirmPassword && (
+                  <p className="mt-1 text-sm text-red-600">{errors.confirmPassword}</p>
+                )}
+              </div>
+
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-2 px-4 rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isSubmitting ? "Creating Account..." : "Create Account"}
+              </button>
+            </form>
+
+            <p className="mt-6 text-center text-sm text-foreground/70">
+              Already have an account?{" "}
+              <Link href="/login" className="text-primary-cta hover:underline font-medium">
+                Sign In
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={footerColumns}
+          bottomLeftText="© 2025 Aarti AI. Bridging Spirituality & Technology."
+          bottomRightText="Made with devotion for spiritual seekers"
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file