Added Admin page, Login, forgot password, register and owner with profile

app/auth/choose-role/page.js

@@ -0,0 +1,232 @@
+'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>
+  );
+}