Rahaf/SweetHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Edit background in register
All checks were successful
Build frontend / build (push) Successful in 1m39s
Details

Browse Source
This commit is contained in:
Rahaf
2026-03-30 15:28:39 +03:00
parent 722d69cc92
commit 891756e092
2 changed files with 95 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/register/owner/page.js
View File

@ -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">

50
app/register/tenant/page.js
View File

@ -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 */}