فكرة مشروع: منصة تعليم تفاعلية للمهارات الحياتية والذهنية الفكرة: منصة تفاعلية تقدم دورات قصيرة ومكثفة لتطوير المهارات الحياتية مثل إدارة الوقت، التفكير النقدي، مهارات التواصل، الذكاء العاطفي، وكيفية التعامل مع الضغوط. تعتمد المنصة على فيديوهات، تمارين تفاعلية، واختبارات قصيرة. تدمج الذكاء الاصطناعي لتخصيص مسار التعلم حسب مستوى واحتياجات المستخدم. ليش فكرة قوية؟ تطوير المهارات الحياتية مطلوب كثير خصوصاً بين الشباب والطلاب. بعيد عن التخصصات الأكاديمية التقليدية، تركز على مهارات تنفع في كل المجالات. يمكن تقديمها للشركات أيضاً كجزء من تدريب موظفيها. كيف تحقق أرباح؟ اشتراك شهري أو سنوي للوصول للمحتوى. بيع دورات متخصصة أو شهادات معتمدة. شراكات مع مؤسسات تعليمية أو شركات. - Follow Up Deployment
52cb5b3
verified
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>مهارات - منصة تعليم المهارات الحياتية</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%); | |
| } | |
| .course-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .ai-section { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #10b981 100%); | |
| } | |
| .testimonial-card { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center text-white font-bold text-xl">م</div> | |
| <h1 class="mr-3 text-2xl font-bold text-indigo-600">مهارات</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6 space-x-reverse"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">الرئيسية</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">الدورات</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">عن المنصة</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">الأسعار</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">اتصل بنا</a> | |
| </nav> | |
| <div class="flex items-center space-x-3 space-x-reverse"> | |
| <a href="#" class="px-4 py-2 text-indigo-600 font-medium hover:bg-indigo-50 rounded-lg">تسجيل الدخول</a> | |
| <a href="#" class="px-4 py-2 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition">اشترك الآن</a> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white"> | |
| <div class="container mx-auto px-4 py-20 md:py-32"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">طور مهاراتك الحياتية واصنع مستقبلاً أفضل</h1> | |
| <p class="text-xl mb-8 opacity-90">منصة تفاعلية تساعدك على تطوير المهارات الأساسية للنجاح في الحياة والعمل مثل إدارة الوقت، التفكير النقدي، الذكاء العاطفي وغيرها الكثير</p> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 sm:space-x-reverse"> | |
| <a href="#" class="px-6 py-3 bg-white text-indigo-600 font-bold rounded-lg hover:bg-gray-100 text-center">ابدأ التعلم الآن</a> | |
| <a href="#" class="px-6 py-3 border-2 border-white text-white font-bold rounded-lg hover:bg-white hover:bg-opacity-10 text-center">شاهد الفيديو التعريفي</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1580894732444-8ecded7900cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="تعلم المهارات الحياتية" class="rounded-xl shadow-2xl max-w-md w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-indigo-600 mb-2">25,000+</div> | |
| <div class="text-gray-600">متعلم مسجل</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-indigo-600 mb-2">120+</div> | |
| <div class="text-gray-600">دورة تدريبية</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-indigo-600 mb-2">50+</div> | |
| <div class="text-gray-600">خبير متخصص</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-indigo-600 mb-2">95%</div> | |
| <div class="text-gray-600">رضى المتعلمين</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">كيف ستساعدك منصة مهارات؟</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">نقدم حلولاً تعليمية مبتكرة لتطوير المهارات الأساسية التي تحتاجها في حياتك الشخصية والمهنية</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-6"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">تطوير المهارات الذهنية</h3> | |
| <p class="text-gray-600">تعلم التفكير النقدي، حل المشكلات، الإبداع واتخاذ القرارات لتحقيق النجاح في مختلف جوانب الحياة</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-6"> | |
| <i class="fas fa-users text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">تحسين المهارات الاجتماعية</h3> | |
| <p class="text-gray-600">اكتسب مهارات التواصل الفعال، الذكاء العاطفي، القيادة والعمل الجماعي لبناء علاقات ناجحة</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-6"> | |
| <i class="fas fa-clock text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">إدارة الذات والوقت</h3> | |
| <p class="text-gray-600">تعلم كيفية تنظيم وقتك، تحديد الأهداف، التخطيط الاستراتيجي والتعامل مع الضغوط لتحقيق التوازن في الحياة</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Courses Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">استكشف دوراتنا الأكثر شعبية</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">دورات قصيرة ومكثفة تقدم محتوى عملي يمكنك تطبيقه فوراً</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Course 1 --> | |
| <div class="course-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1454165804606-3aedd6f0bb07?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="إدارة الوقت" class="w-full h-48 object-cover"> | |
| <div class="absolute top-4 left-4 bg-indigo-600 text-white text-sm px-3 py-1 rounded-full">جديد</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-sm text-indigo-600 font-medium">المهارات الذهنية</span> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="text-gray-600 ml-1">4.9</span> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">إتقان إدارة الوقت والتركيز</h3> | |
| <p class="text-gray-600 mb-4">تعلم استراتيجيات فعالة لتنظيم وقتك، زيادة الإنتاجية والتغلب على التسويف</p> | |
| <div class="flex justify-between items-center pt-4 border-t border-gray-100"> | |
| <div class="flex items-center"> | |
| <i class="far fa-clock text-gray-500 mr-2"></i> | |
| <span class="text-sm text-gray-600">6 ساعات</span> | |
| </div> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800">عرض التفاصيل</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 2 --> | |
| <div class="course-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="التواصل الفعال" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-sm text-green-600 font-medium">المهارات الاجتماعية</span> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="text-gray-600 ml-1">4.8</span> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">فن التواصل الفعال والقيادة</h3> | |
| <p class="text-gray-600 mb-4">اكتسب مهارات التواصل المؤثر، الإقناع والقيادة لتحقيق النجاح في العلاقات والعمل</p> | |
| <div class="flex justify-between items-center pt-4 border-t border-gray-100"> | |
| <div class="flex items-center"> | |
| <i class="far fa-clock text-gray-500 mr-2"></i> | |
| <span class="text-sm text-gray-600">8 ساعات</span> | |
| </div> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800">عرض التفاصيل</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 3 --> | |
| <div class="course-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="الذكاء العاطفي" class="w-full h-48 object-cover"> | |
| <div class="absolute top-4 left-4 bg-indigo-600 text-white text-sm px-3 py-1 rounded-full">الأكثر طلباً</div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <span class="text-sm text-blue-600 font-medium">النمو الشخصي</span> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="text-gray-600 ml-1">5.0</span> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">الذكاء العاطفي وإدارة الضغوط</h3> | |
| <p class="text-gray-600 mb-4">طور ذكاءك العاطفي وتعلم كيفية التعامل مع الضغوط والتحديات اليومية بفعالية</p> | |
| <div class="flex justify-between items-center pt-4 border-t border-gray-100"> | |
| <div class="flex items-center"> | |
| <i class="far fa-clock text-gray-500 mr-2"></i> | |
| <span class="text-sm text-gray-600">10 ساعات</span> | |
| </div> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-800">عرض التفاصيل</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="px-6 py-3 bg-indigo-600 text-white font-bold rounded-lg hover:bg-indigo-700 inline-block">عرض جميع الدورات</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Personalization Section --> | |
| <section class="ai-section text-white py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl font-bold mb-6">تعلم مخصص حسب احتياجاتك</h2> | |
| <p class="text-xl mb-8 opacity-90">باستخدام الذكاء الاصطناعي، نقوم بتحليل مستوى مهاراتك واهتماماتك لإنشاء مسار تعلم شخصي يساعدك على تحقيق أهدافك بأسرع وقت ممكن</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| </div> | |
| <div class="mr-3"> | |
| <h4 class="font-bold mb-1">تقييم المهارات الأولي</h4> | |
| <p class="opacity-90">اختبار قصير لتحديد مستواك الحالي في مختلف المهارات</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| </div> | |
| <div class="mr-3"> | |
| <h4 class="font-bold mb-1">مسار تعلم مخصص</h4> | |
| <p class="opacity-90">مقترح دورات وتمارين بناءً على نقاط القوة والضعف لديك</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| </div> | |
| <div class="mr-3"> | |
| <h4 class="font-bold mb-1">تتبع التقدم</h4> | |
| <p class="opacity-90">تقارير دورية تظهر تطورك وتقترح تحسينات لمسارك التعليمي</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="bg-white bg-opacity-10 rounded-2xl p-8 backdrop-blur-sm max-w-md w-full"> | |
| <div class="text-center mb-8"> | |
| <h3 class="text-2xl font-bold mb-2">اختبر مهاراتك الآن</h3> | |
| <p class="opacity-90">اختبار قصير لمساعدتنا على تخصيص تجربة التعلم لك</p> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block font-medium mb-2">ما هي أهم المهارات التي ترغب في تطويرها؟</label> | |
| <select class="w-full bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg px-4 py-3 text-white"> | |
| <option>إدارة الوقت والتنظيم</option> | |
| <option>التواصل والعلاقات</option> | |
| <option>الذكاء العاطفي</option> | |
| <option>حل المشكلات</option> | |
| <option>التفكير الإبداعي</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block font-medium mb-2">ما هو مستواك الحالي في هذه المهارة؟</label> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span>مبتدئ</span> | |
| <span>خبير</span> | |
| </div> | |
| <input type="range" class="w-full" min="1" max="5" value="3"> | |
| </div> | |
| <div> | |
| <label class="block font-medium mb-2">ما هو هدفك من التعلم؟</label> | |
| <div class="space-y-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 bg-white bg-opacity-20 border-white"> | |
| <span>تحسين أدائي في العمل</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 bg-white bg-opacity-20 border-white"> | |
| <span>تحقيق التوازن بين الحياة والعمل</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="mr-2 bg-white bg-opacity-20 border-white"> | |
| <span>بناء علاقات أفضل</span> | |
| </label> | |
| </div> | |
| </div> | |
| <button class="w-full bg-white text-indigo-600 py-3 rounded-lg font-bold hover:bg-opacity-90">ابدأ الاختبار</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Learning Method Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">طريقة التعلم في منصة مهارات</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">نقدم مزيجاً من الأساليب التعليمية التفاعلية لضمان أفضل نتائج التعلم</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-4"> | |
| <i class="fas fa-video text-xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">فيديوهات تعليمية</h3> | |
| <p class="text-gray-600 text-sm">دروس قصيرة ومباشرة يقدمها خبراء في مختلف المجالات</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-4"> | |
| <i class="fas fa-tasks text-xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">تمارين تفاعلية</h3> | |
| <p class="text-gray-600 text-sm">أنشطة عملية لتطبيق ما تعلمته في مواقف حقيقية</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-4"> | |
| <i class="fas fa-question-circle text-xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">اختبارات قصيرة</h3> | |
| <p class="text-gray-600 text-sm">تقويم مستمر لمستوى تقدمك وفهمك للمحتوى</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mb-4"> | |
| <i class="fas fa-comments text-xl"></i> | |
| </div> | |
| <h3 class="font-bold mb-2">مناقشات جماعية</h3> | |
| <p class="text-gray-600 text-sm">تفاعل مع زملائك المتعلمين وتبادل الخبرات</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-bold mb-6">تعلم بطريقة فعالة وممتعة</h3> | |
| <p class="text-gray-600 mb-6">نؤمن بأن أفضل طريقة للتعلم هي من خلال الممارسة والتطبيق العملي. لذلك صممنا دوراتنا لتكون تفاعلية وتشاركية، مع التركيز على التطبيق العملي للمهارات في الحياة اليومية.</p> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">إتمام الدورة</span> | |
| <span class="text-indigo-600 font-bold">87%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 87%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">رضى المتعلمين</span> | |
| <span class="text-green-600 font-bold">95%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium">تحسن المهارات</span> | |
| <span class="text-blue-600 font-bold">92%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">آراء متعلمينا</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">كيف ساعدتهم منصة مهارات في تطوير حياتهم الشخصية والمهنية</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="testimonial-card bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold mr-4">س</div> | |
| <div> | |
| <h4 class="font-bold">سارة محمد</h4> | |
| <p class="text-gray-600 text-sm">مديرة مشاريع</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6">"دورة إدارة الوقت غيرت طريقة عملي بالكامل. استطعت زيادة إنتاجيتي بنسبة 40% وتخفيض ساعات العمل مع تحقيق نتائج أفضل."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="testimonial-card bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold mr-4">أ</div> | |
| <div> | |
| <h4 class="font-bold">أحمد خالد</h4> | |
| <p class="text-gray-600 text-sm">مهندس برمجيات</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6">"مهارات التواصل التي تعلمتها ساعدتني في الترقية إلى منصب قيادي. أصبحت أكثر ثقة في التعبير عن أفكاري وإدارة الفريق."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="testimonial-card bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold mr-4">ل</div> | |
| <div> | |
| <h4 class="font-bold">ليلى عبدالله</h4> | |
| <p class="text-gray-600 text-sm">طالبة جامعية</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6">"الذكاء العاطفي علمني كيفية التعامل مع ضغوط الدراسة والعلاقات. أشعر الآن بتوازن أكبر وسعادة في حياتي اليومية."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">خطط الاشتراك</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">اختر الخطة التي تناسب احتياجاتك وابدأ رحلة تطوير مهاراتك</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border-2 border-gray-100"> | |
| <h3 class="text-xl font-bold mb-4">الاشتراك الشهري</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">99</span> | |
| <span class="text-gray-600">ر.س/شهر</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>وصول غير محدود لجميع الدورات</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>تمارين تفاعلية</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>شهادة إتمام لكل دورة</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times mr-2"></i> | |
| <span>جلسات مع الخبراء</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block w-full py-3 bg-gray-100 text-gray-800 font-bold rounded-lg text-center hover:bg-gray-200">اختر هذه الخطة</a> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg border-2 border-indigo-500 relative"> | |
| <div class="absolute top-0 right-0 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">الأكثر شعبية</div> | |
| <h3 class="text-xl font-bold mb-4">الاشتراك السنوي</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">799</span> | |
| <span class="text-gray-600">ر.س/سنة</span> | |
| <div class="text-sm text-green-600 mt-1">وفر 33% مقارنة بالاشتراك الشهري</div> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>وصول غير محدود لجميع الدورات</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>تمارين تفاعلية</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>شهادة إتمام لكل دورة</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>جلسة شهرية مع خبراء</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block w-full py-3 bg-indigo-600 text-white font-bold rounded-lg text-center hover:bg-indigo-700">اختر هذه الخطة</a> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border-2 border-gray-100"> | |
| <h3 class="text-xl font-bold mb-4">الشركات والمؤسسات</h3> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">مخصص</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>حسابات متعددة للموظفين</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>تقارير تقدم الموظفين</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>دورات مخصصة لاحتياجات الشركة</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>ورش عمل مباشرة</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block w-full py-3 bg-gray-100 text-gray-800 font-bold rounded-lg text-center hover:bg-gray-200">اتصل بنا</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-indigo-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">جاهز لبدء رحلة تطوير مهاراتك؟</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">انضم إلى آلاف المتعلمين الذين طوروا مهاراتهم وحققوا أهدافهم مع منصة مهارات</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4 sm:space-x-reverse"> | |
| <a href="#" class="px-8 py-3 bg-white text-indigo-600 font-bold rounded-lg hover:bg-gray-100">اشترك الآن</a> | |
| <a href="#" class="px-8 py-3 border-2 border-white text-white font-bold rounded-lg hover:bg-white hover:bg-opacity-10">تعرف أكثر</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-300 pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-12 mb-12"> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white font-bold text-lg">م</div> | |
| <h3 class="mr-3 text-xl font-bold text-white">مهارات</h3> | |
| </div> | |
| <p class="mb-6">منصة تعليمية رائدة في مجال تطوير المهارات الحياتية والذهنية لمساعدة الأفراد على تحقيق النجاح والتوازن في حياتهم.</p> | |
| <div class="flex space-x-4 space-x-reverse"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-6">روابط سريعة</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="hover:text-white">الرئيسية</a></li> | |
| <li><a href="#" class="hover:text-white">الدورات</a></li> | |
| <li><a href="#" class="hover:text-white">عن المنصة</a></li> | |
| <li><a href="#" class="hover:text-white">الأسعار</a></li> | |
| <li><a href="#" class="hover:text-white">المدونة</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-6">الدورات</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="hover:text-white">المهارات الذهنية</a></li> | |
| <li><a href="#" class="hover:text-white">المهارات الاجتماعية</a></li> | |
| <li><a href="#" class="hover:text-white">إدارة الذات</a></li> | |
| <li><a href="#" class="hover:text-white">القيادة</a></li> | |
| <li><a href="#" class="hover:text-white">الذكاء العاطفي</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-6">اتصل بنا</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-2 text-indigo-400"></i> | |
| <span>المملكة العربية السعودية، الرياض</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone-alt mt-1 mr-2 text-indigo-400"></i> | |
| <span>+966 12 345 6789</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-2 text-indigo-400"></i> | |
| <span>info@maharati.com</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p>© 2023 مهارات. جميع الحقوق محفوظة.</p> | |
| </div> | |
| <div class="flex space-x-6 space-x-reverse"> | |
| <a href="#" class="hover:text-white">شروط الخدمة</a> | |
| <a href="#" class="hover:text-white">سياسة الخصوصية</a> | |
| <a href="#" class="hover:text-white">الأسئلة الشائعة</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for course cards on scroll | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const courseCards = document.querySelectorAll('.course-card'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| courseCards.forEach(card => { | |
| observer.observe(card); | |
| }); | |
| // Mobile menu toggle (would need implementation) | |
| const mobileMenuButton = document.querySelector('button.md\\:hidden'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| // This would toggle a mobile menu | |
| console.log('Mobile menu clicked - would open menu in full implementation'); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fokan/chatarya" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |