232 lines
8.5 KiB
JavaScript
232 lines
8.5 KiB
JavaScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import Link from 'next/link';
|
|
import { Home, Building, ArrowLeft } from 'lucide-react';
|
|
|
|
export default function ChooseRolePage() {
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2,
|
|
delayChildren: 0.3
|
|
}
|
|
}
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { y: 20, opacity: 0 },
|
|
visible: {
|
|
y: 0,
|
|
opacity: 1,
|
|
transition: { type: 'spring', stiffness: 100 }
|
|
}
|
|
};
|
|
|
|
const floatingAnimation = {
|
|
y: [0, -10, 0],
|
|
transition: {
|
|
duration: 3,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}
|
|
};
|
|
|
|
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">
|
|
<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() * 100 + 50,
|
|
height: Math.random() * 100 + 50,
|
|
}}
|
|
animate={{
|
|
x: [0, Math.random() * 50 - 25, 0],
|
|
y: [0, Math.random() * 50 - 25, 0],
|
|
}}
|
|
transition={{
|
|
duration: Math.random() * 10 + 10,
|
|
repeat: Infinity,
|
|
ease: "linear"
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
className="relative z-10 w-full max-w-4xl"
|
|
>
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="absolute -top-16 left-0"
|
|
>
|
|
<Link
|
|
href="/"
|
|
className="group flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
|
|
>
|
|
<motion.div whileHover={{ x: -5 }}>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
</motion.div>
|
|
<span>العودة للرئيسية</span>
|
|
</Link>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="text-center mb-12"
|
|
>
|
|
<motion.h1
|
|
className="text-4xl md:text-5xl font-bold text-white mb-4"
|
|
animate={floatingAnimation}
|
|
>
|
|
مرحباً بك في SweetHome
|
|
</motion.h1>
|
|
<p className="text-xl text-gray-400">
|
|
اختر نوع الحساب المناسب لك
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<motion.div
|
|
variants={itemVariants}
|
|
whileHover={{ scale: 1.05, y: -5 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="group cursor-pointer"
|
|
>
|
|
<Link href="/register/owner">
|
|
<div className="bg-gradient-to-br from-amber-500 to-amber-600 rounded-3xl p-8 text-white shadow-2xl shadow-amber-500/20 relative overflow-hidden">
|
|
<motion.div
|
|
className="absolute -top-20 -right-20 w-40 h-40 bg-white/10 rounded-full"
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
rotate: [0, 90, 0],
|
|
}}
|
|
transition={{ duration: 8, repeat: Infinity }}
|
|
/>
|
|
|
|
<div className="relative z-10">
|
|
<motion.div
|
|
className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center mb-6 backdrop-blur-sm"
|
|
whileHover={{ rotate: 360 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<Building className="w-10 h-10 text-white" />
|
|
</motion.div>
|
|
|
|
<h2 className="text-3xl font-bold mb-3">صاحب عقار</h2>
|
|
<p className="text-amber-100 mb-6">
|
|
تريد عرض عقار للإيجار أو البيع؟ انضم كمالك عقار وابدأ الآن
|
|
</p>
|
|
|
|
<ul className="space-y-2 text-sm text-amber-100">
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-white rounded-full" />
|
|
إضافة عقارات غير محدودة
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-white rounded-full" />
|
|
إدارة الحجوزات بسهولة
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-white rounded-full" />
|
|
تواصل مباشر مع المستأجرين
|
|
</li>
|
|
</ul>
|
|
|
|
<motion.button
|
|
className="mt-8 w-full bg-white text-amber-600 py-3 rounded-xl font-bold hover:bg-amber-50 transition-colors"
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
إنشاء حساب مالك
|
|
</motion.button>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={itemVariants}
|
|
whileHover={{ scale: 1.05, y: -5 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="group cursor-pointer"
|
|
>
|
|
<Link href="/register/tenant">
|
|
<div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-3xl p-8 text-white shadow-2xl shadow-blue-500/20 relative overflow-hidden">
|
|
<motion.div
|
|
className="absolute -bottom-20 -left-20 w-40 h-40 bg-white/10 rounded-full"
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
rotate: [0, -90, 0],
|
|
}}
|
|
transition={{ duration: 8, repeat: Infinity }}
|
|
/>
|
|
|
|
<div className="relative z-10">
|
|
<motion.div
|
|
className="w-20 h-20 bg-white/20 rounded-2xl flex items-center justify-center mb-6 backdrop-blur-sm"
|
|
whileHover={{ rotate: 360 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<Home className="w-10 h-10 text-white" />
|
|
</motion.div>
|
|
|
|
<h2 className="text-3xl font-bold mb-3">مستأجر / مشتري</h2>
|
|
<p className="text-blue-100 mb-6">
|
|
تبحث عن عقار للإيجار أو الشراء؟ انضم كعميل وابحث عن منزل أحلامك
|
|
</p>
|
|
|
|
<ul className="space-y-2 text-sm text-blue-100">
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-white rounded-full" />
|
|
آلاف العقارات المتاحة
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-white rounded-full" />
|
|
بحث متقدم بفلاتر ذكية
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 bg-white rounded-full" />
|
|
حجز وإستئجار فوري
|
|
</li>
|
|
</ul>
|
|
|
|
<motion.button
|
|
className="mt-8 w-full bg-white text-blue-600 py-3 rounded-xl font-bold hover:bg-blue-50 transition-colors"
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
إنشاء حساب مستأجر
|
|
</motion.button>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.p
|
|
variants={itemVariants}
|
|
className="text-center text-gray-400 mt-8"
|
|
>
|
|
لديك حساب بالفعل؟{' '}
|
|
<Link
|
|
href="/login"
|
|
className="text-amber-400 hover:text-amber-300 font-medium transition-colors"
|
|
>
|
|
تسجيل الدخول
|
|
</Link>
|
|
</motion.p>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
} |