Home Page - Copy this React, Tailwind Component to your project

طبق نفس هذه التغييرات وايضا يوجد مشكله ان زرتقييمات اللاعبين لا يعمل كالسابق import React, { useState, useEffect } from "react"; import { FaDiscord, FaPlus, FaQuestionCircle, FaHeadset, FaStar, FaFileAlt, FaLock, FaSearch, FaGamepad, FaUserPlus, FaExclamationTriangle, FaStar as FaRatingStar, FaRobot, FaCrown, FaShieldAlt, FaUsers } from "react-icons/fa"; import { IoMdClose } from "react-icons/io"; import { motion, AnimatePresence } from "framer-motion"; const DiscordBot = () => { const [showCommands, setShowCommands] = useState(false); const [showReviews, setShowReviews] = useState(false); const [showTerms, setShowTerms] = useState(false); const [showPrivacy, setShowPrivacy] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [isLoading, setIsLoading] = useState(true); useEffect(() => { setTimeout(() => setIsLoading(false), 1500); // عند تحميل الصفحة، نتحقق من الرابط إذا كان يحتوي على #terms-of-service أو #privacy-policy if (window.location.hash === "#terms-of-service") { setShowTerms(true); } else if (window.location.hash === "#privacy-policy") { setShowPrivacy(true); } }, []); const features = [ { icon: <FaDiscord className="w-8 h-8 text-purple-400" />, title: "تكامل مع ديسكورد", description: "البوت مصمم خصيصًا للعمل بسلاسة مع سيرفرات ديسكورد لتوفير تجربة لعب مميزة" }, { icon: <FaUsers className="w-8 h-8 text-blue-400" />, title: "البحث عن لاعبين", description: "نظام متكامل للبحث عن اللاعبين المطابقين لتفضيلاتك في الألعاب" }, { icon: <FaShieldAlt className="w-8 h-8 text-green-400" />, title: "أمان وخصوصية", description: "نضمن حماية بيانات المستخدمين وسلامة التفاعلات داخل البوت" }, { icon: <FaCrown className="w-8 h-8 text-yellow-400" />, title: "مزايا البريميوم", description: "استمتع بإمكانيات إضافية مثل تخصيص البحث وفلاتر متقدمة مع الاشتراك المدفوع" } ]; const commands = [ { name: "/register", description: "سجل بروفايلك لتتمكن من استخدام البوت" }, { name: "/findplayer", description: "ابحث عن لاعبين للعب معك" }, { name: "/report", description: "أبلغ عن سلوك مخالف" }, { name: "/rate", description: "قيم لاعب بناءً على تجربتك معه" }, { name: "/premium", description: "تفعيل كود الاشتراك" } ]; const reviews = [ { user: "Ahmed", rating: 5, comment: "وجدت لاعبين رائعين!" }, { user: "Fatima", rating: 4, comment: "تجربة لعب ممتعة ومنظمة" }, { user: "Mohammed", rating: 5, comment: "أفضل بوت للعثور على فريق" } ]; const filteredCommands = commands.filter(cmd => cmd.name.toLowerCase().includes(searchQuery.toLowerCase()) || cmd.description.toLowerCase().includes(searchQuery.toLowerCase()) ); const handleAddBot = () => { window.open("https://discord.com/oauth2/authorize?client_id=1201384102281097216", "_blank"); }; const handleSupport = () => { window.open("https://discord.gg/lobbyhub", "_blank"); }; if (isLoading) { return ( <div className="min-h-screen bg-gray-900 flex items-center justify-center"> <motion.div animate={{ rotate: 360 }} transition={{ duration: 1, repeat: Infinity, ease: "linear" }} className="w-16 h-16 border-4 border-purple-500 border-t-transparent rounded-full" /> </div> ); } const openTerms = () => { setShowTerms(true); window.location.hash = "#terms-of-service"; // تغيير الرابط إلى #terms-of-service عند فتح نافذة سياسة الاستخدام }; const openPrivacy = () => { setShowPrivacy(true); window.location.hash = "#privacy-policy"; // تغيير الرابط إلى #privacy-policy عند فتح نافذة سياسة الخصوصية }; const closeTerms = () => { setShowTerms(false); window.history.pushState(null, "", window.location.pathname); // إعادة الرابط إلى الحالة السابقة عند إغلاق نافذة سياسة الاستخدام }; const closePrivacy = () => { setShowPrivacy(false); window.history.pushState(null, "", window.location.pathname); // إعادة الرابط إلى الحالة السابقة عند إغلاق نافذة سياسة الخصوصية }; return ( <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 text-white"> <div className="container mx-auto px-4 py-8"> {/* Hero Section */} <div className="text-center mb-16"> <div className="flex justify-center mb-6"> <motion.img whileHover={{ scale: 1.1, rotate: 5 }} src="https://images.unsplash.com/photo-1614680376593-902f74cf0d41?auto=format&fit=crop&w=200&h=200" alt="Bot Logo" className="w-32 h-32 rounded-full shadow-lg border-4 border-purple-500" /> </div> <h1 className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 mb-4 font-heading">لوبي هوب</h1> <p className="text-2xl text-gray-300 mb-8">رفيقك المثالي للعثور على لاعبين</p> {/* Main CTA Buttons */} <div className="flex flex-wrap justify-center gap-4 mb-12"> <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} onClick={handleAddBot} className="flex items-center px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg shadow-lg hover:shadow-purple-500/50 transition-all duration-300" > <FaPlus className="mr-2" />Add Bot </motion.button> <motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} onClick={handleSupport} className="flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg shadow-lg hover:shadow-blue-500/50 transition-all duration-300" > <FaHeadset className="mr-2" />Support Server </motion.button> </div> {/* Features Grid */} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto mb-16"> {features.map((feature, index) => ( <motion.div key={index} whileHover={{ scale: 1.05 }} className="bg-gray-800 bg-opacity-50 backdrop-blur-lg rounded-xl p-6 shadow-lg border border-gray-700" > <div className="flex justify-center mb-4"> {feature.icon} </div> <h3 className="text-xl font-semibold mb-2 text-white">{feature.title}</h3> <p className="text-gray-300">{feature.description}</p> </motion.div> ))} </div> {/* Secondary Navigation Buttons */} <div className="flex flex-wrap justify-center gap-6 mb-12 px-4"> <motion.button whileHover={{ scale: 1.05, y: -5 }} whileTap={{ scale: 0.95 }} onClick={() => setShowCommands(true)} className="flex items-center px-8 py-4 bg-gradient-to-br from-emerald-500 to-green-600 text-white rounded-xl shadow-xl hover:shadow-emerald-500/30 transition-all duration-300 transform hover:-translate-y-1" > <FaFileAlt className="mr-3 text-xl" /> <span className="text-lg font-semibold">قائمة الأوامر</span> </motion.button> <motion.button whileHover={{ scale: 1.05, y: -5 }} whileTap={{ scale: 0.95 }} onClick={() => setShowReviews(true)} className="flex items-center px-8 py-4 bg-gradient-to-br from-violet-500 to-purple-600 text-white rounded-xl shadow-xl hover:shadow-violet-500/30 transition-all duration-300 transform hover:-translate-y-1" > <FaStar className="mr-3 text-xl" /> <span className="text-lg font-semibold">تقييمات اللاعبين</span> </motion.button> <motion.button whileHover={{ scale: 1.05, y: -5 }} whileTap={{ scale: 0.95 }} onClick={openTerms} // فتح نافذة سياسة الاستخدام وتغيير الرابط className="flex items-center px-8 py-4 bg-gradient-to-br from-amber-500 to-yellow-600 text-white rounded-xl shadow-xl hover:shadow-amber-500/30 transition-all duration-300 transform hover:-translate-y-1" > <FaQuestionCircle className="mr-3 text-xl" /> <span className="text-lg font-semibold">سياسة الاستخدام</span> </motion.button> <motion.button whileHover={{ scale: 1.05, y: -5 }} whileTap={{ scale: 0.95 }} onClick={openPrivacy} // فتح نافذة سياسة الخصوصية وتغيير الرابط className="flex items-center px-8 py-4 bg-gradient-to-br from-rose-500 to-red-600 text-white rounded-xl shadow-xl hover:shadow-rose-500/30 transition-all duration-300 transform hover:-translate-y-1" > <FaLock className="mr-3 text-xl" /> <span className="text-lg font-semibold">سياسة الخصوصية</span> </motion.button> </div> </div> <AnimatePresence> {/* Commands Modal */} {showCommands && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm flex items-center justify-center p-4 z-50" > <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }} className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-2xl w-full max-w-2xl p-6" > <div className="flex justify-between items-center mb-4"> <h2 className="text-2xl font-bold text-purple-400">قائمة الأوامر</h2> <button onClick={() => setShowCommands(false)} className="text-gray-400 hover:text-white"> <IoMdClose size={24} /> </button> </div> <div className="mb-4"> <div className="relative"> <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" /> <input type="text" placeholder="ابحث عن الأوامر..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w-full pl-10 pr-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" /> </div> </div> <div className="space-y-3"> {filteredCommands.map((cmd, index) => ( <div key={index} className="bg-gray-700 p-3 rounded-lg hover:bg-gray-600 transition-colors"> <h3 className="font-mono text-purple-400">{cmd.name}</h3> <p className="text-gray-300 text-sm">{cmd.description}</p> </div> ))} </div> </motion.div> </motion.div> )} {/* سياسة الاستخدام */} {showTerms && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm flex items-center justify-center p-4 z-50" > <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }} className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-2xl w-full max-w-2xl p-6" > <div className="flex justify-between items-center mb-4"> <h2 className="text-2xl font-bold text-yellow-400">سياسة الاستخدام</h2> <button onClick={closeTerms} className="text-gray-400 hover:text-white"> <IoMdClose size={24} /> </button> </div> <div className="space-y-4 text-gray-300"> <p>يجب على جميع المستخدمين الالتزام بقواعد وشروط استخدام البوت:</p> <ul className="list-disc list-inside space-y-2"> <li>احترام جميع المستخدمين وعدم الإساءة لهم</li> <li>عدم استخدام البوت لأغراض مخالفة للقوانين</li> <li>الإبلاغ عن أي سلوك مسيء أو مخالف</li> <li>عدم محاولة اختراق أو إساءة استخدام خدمات البوت</li> </ul> </div> </motion.div> </motion.div> )} {/* سياسة الخصوصية */} {showPrivacy && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm flex items-center justify-center p-4 z-50" > <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }} className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-2xl w-full max-w-2xl p-6" > <div className="flex justify-between items-center mb-4"> <h2 className="text-2xl font-bold text-red-400">سياسة الخصوصية</h2> <button onClick={closePrivacy} className="text-gray-400 hover:text-white"> <IoMdClose size={24} /> </button> </div> <div className="space-y-4 text-gray-300"> <p>نحن نلتزم بحماية خصوصية مستخدمينا:</p> <ul className="list-disc list-inside space-y-2"> <li>لا نشارك معلوماتك الشخصية مع أي طرف ثالث</li> <li>نستخدم تقنيات تشفير متقدمة لحماية بياناتك</li> <li>يمكنك طلب حذف بياناتك في أي وقت</li> <li>نجمع فقط المعلومات الضرورية لتشغيل الخدمة</li> </ul> </div> </motion.div> </motion.div> )} </AnimatePresence> </div> </div> ); }; export default DiscordBot;