Edit background in register

app/register/owner/page.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef } from 'react';
+import { useState, useRef, useMemo  } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
@@ -238,18 +238,64 @@ export default function OwnerRegisterPage() {
     animate: { transition: { staggerChildren: 0.1 } }
   };
 
+
+const backgroundElements = useMemo(() => {
+  const circles = [
+    { style: { top: '20%', right: '20%', width: '256px', height: '256px' }, className: 'bg-amber-500/5' },
+    { style: { bottom: '20%', left: '20%', width: '320px', height: '320px' }, className: 'bg-blue-500/5' },
+    { style: { top: '50%', left: '50%', width: '384px', height: '384px', transform: 'translate(-50%, -50%)' }, className: 'bg-purple-500/5' },
+  ];
+
+  const dots = [
+    { left: '5%', top: '10%', size: '120px' },
+    { left: '15%', top: '70%', size: '80px' },
+    { left: '25%', top: '30%', size: '150px' },
+    { left: '35%', top: '85%', size: '100px' },
+    { left: '45%', top: '15%', size: '90px' },
+    { left: '55%', top: '60%', size: '130px' },
+    { left: '65%', top: '40%', size: '70px' },
+    { left: '75%', top: '80%', size: '110px' },
+    { left: '85%', top: '20%', size: '140px' },
+    { left: '95%', top: '50%', size: '85px' },
+  ];
+
+  return (
+    <>
+      {circles.map((circle, i) => (
+        <div
+          key={`circle-${i}`}
+          className={`absolute rounded-full ${circle.className}`}
+          style={circle.style}
+        />
+      ))}
+      {dots.map((dot, i) => (
+        <div
+          key={`dot-${i}`}
+          className="absolute rounded-full bg-amber-500/10"
+          style={{ left: dot.left, top: dot.top, width: dot.size, height: dot.size }}
+        />
+      ))}
+    </>
+  );
+}, []); 
+
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center p-4 relative overflow-hidden">
       <Toaster position="top-center" reverseOrder={false} />
 
-      <div className="absolute inset-0 overflow-hidden">
+      {/* <div className="absolute inset-0 overflow-hidden">
         {[...Array(20)].map((_, i) => (
           <motion.div key={i} className="absolute rounded-full bg-amber-500/10"
             style={{ left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, width: Math.random() * 200 + 50, height: Math.random() * 200 + 50 }}
             animate={{ x: [0, Math.random() * 100 - 50, 0], y: [0, Math.random() * 100 - 50, 0] }}
             transition={{ duration: Math.random() * 15 + 15, repeat: Infinity, ease: "linear" }} />
         ))}
-      </div>
+      </div> */}
+
+<div className="absolute inset-0 overflow-hidden">
+  {backgroundElements}
+</div>
 
       <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }}
         className="relative z-10 w-full max-w-2xl">

app/register/tenant/page.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef } from 'react';
+import { useState, useRef, useMemo  } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
@@ -239,19 +239,61 @@ export default function TenantRegisterPage() {
     animate: { transition: { staggerChildren: 0.1 } }
   };
 
+
+  const backgroundElements = useMemo(() => {
+  const circles = [
+    { style: { top: '20%', right: '20%', width: '256px', height: '256px' }, className: 'bg-blue-500/10' },
+    { style: { bottom: '20%', left: '20%', width: '320px', height: '320px' }, className: 'bg-blue-500/10' },
+    { style: { top: '50%', left: '50%', width: '384px', height: '384px', transform: 'translate(-50%, -50%)' }, className: 'bg-blue-500/10' },
+  ];
+
+  const dots = [
+    { left: '5%', top: '10%', size: '120px' },
+    { left: '15%', top: '70%', size: '80px' },
+    { left: '25%', top: '30%', size: '150px' },
+    { left: '35%', top: '85%', size: '100px' },
+    { left: '45%', top: '15%', size: '90px' },
+    { left: '55%', top: '60%', size: '130px' },
+    { left: '65%', top: '40%', size: '70px' },
+    { left: '75%', top: '80%', size: '110px' },
+    { left: '85%', top: '20%', size: '140px' },
+    { left: '95%', top: '50%', size: '85px' },
+  ];
+
+  return (
+    <>
+      {circles.map((circle, i) => (
+        <div
+          key={`circle-${i}`}
+          className={`absolute rounded-full ${circle.className}`}
+          style={circle.style}
+        />
+      ))}
+      {dots.map((dot, i) => (
+        <div
+          key={`dot-${i}`}
+          className="absolute rounded-full bg-blue-500/10"
+          style={{ left: dot.left, top: dot.top, width: dot.size, height: dot.size }}
+        />
+      ))}
+    </>
+  );
+}, []); 
   return (
     <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center p-4 relative overflow-hidden">
       <Toaster position="top-center" reverseOrder={false} />
 
-      <div className="absolute inset-0 overflow-hidden">
+      {/* <div className="absolute inset-0 overflow-hidden">
         {[...Array(20)].map((_, i) => (
           <motion.div key={i} className="absolute rounded-full bg-blue-500/10"
             style={{ left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, width: Math.random() * 200 + 50, height: Math.random() * 200 + 50 }}
             animate={{ x: [0, Math.random() * 100 - 50, 0], y: [0, Math.random() * 100 - 50, 0] }}
             transition={{ duration: Math.random() * 15 + 15, repeat: Infinity, ease: "linear" }} />
         ))}
-      </div>
+      </div> */}
-
+<div className="absolute inset-0 overflow-hidden">
+  {backgroundElements}
+</div>
       <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }}
         className="relative z-10 w-full max-w-md">
         {/* Back */}