<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الدورات الرائعة | تعلم مدى الحياة، حسب الطلب</title>
<!-- Load Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Configure Tailwind for custom font -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
'primary': '#1e3a8a', // Dark Blue
'secondary': '#fcd34d', // Yellow/Gold
'background': '#f9fafb', // Light Gray Background
}
}
}
}
</script>
<!-- Use Inter font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<style>
/* Base styles for course cards and shadows */
.course-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.course-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Stronger shadow on hover */
}
/* 1. Global Screen Animation: Subtle Pulsing Background for Depth */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 10% 20%, rgba(30, 58, 138, 0.05) 0%, rgba(249, 250, 251, 0) 50%);
opacity: 0.8;
pointer-events: none;
animation: backgroundPulse 15s infinite alternate ease-in-out;
z-index: -1;
}
@keyframes backgroundPulse {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.1) translate(5%, -5%); }
}
/* 2. Button Press/Click Animation */
.cta-button {
perspective: 1000px;
transition: all 0.2s;
transform: translateZ(0);
}
.cta-button:active {
transform: scale(0.95);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3) inset;
}
/* 3. Scroll Reveal Animations (Intersection Observer Targets) */
.scroll-reveal {
opacity: 0;
transform: translateY(40px);
/* Custom easing for a smoother 'slide-up' effect */
transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.scroll-reveal.revealed {
opacity: 1;
transform: translateY(0);
}
/* Delay utility classes for staggered entry */
.scroll-reveal.delay-200 { transition-delay: 0.2s; }
.scroll-reveal.delay-400 { transition-delay: 0.4s; }
.scroll-reveal.delay-600 { transition-delay: 0.6s; }
/* 4. Hero Text Entry Animation on Page Load */
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-text-animation {
opacity: 0;
animation: slideInUp 0.8s ease-out forwards;
}
.hero-text-h1 { animation-delay: 0.2s; }
.hero-text-p { animation-delay: 0.4s; }
.hero-text-buttons { animation-delay: 0.6s; }
/* Animation for the LLM loader */
.loader {
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid #fcd34d;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
.loader.small {
width: 16px;
height: 16px;
border-width: 3px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-background font-sans text-gray-800">
<!-- Navigation Bar -->
<header class="sticky top-0 z-50 bg-white shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<a href="#" class="text-2xl font-extrabold text-primary tracking-tight">
The<span class="text-secondary">Great</span>Classes
</a>
<!-- Desktop Navigation Links -->
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-gray-600 hover:text-primary transition duration-150">الفهرس</a>
<a href="#" class="text-gray-600 hover:text-primary transition duration-150">المدربون</a>
<a href="#" class="text-gray-600 hover:text-primary transition duration-150">عنّا</a>
<!-- تم تحديث رابط "الأسئلة الشائعة" -->
<a href="https://drabdelaal.site/wp-admin/admin.php?page=smart-clinic-reports" class="text-gray-600 hover:text-primary transition duration-150">الأسئلة الشائعة</a>
</nav>
<!-- Action Buttons -->
<div class="flex items-center space-x-4">
<!-- تم تحويل زر "Log In" المكتبي إلى رابط للتوجيه إلى صفحة تسجيل الدخول -->
<a href="https://drabdelaal.site/wp-admin/" class="text-primary hover:text-blue-700 transition duration-150 hidden sm:block">تسجيل الدخول</a>
<button class="bg-primary text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-150 shadow-md hidden md:block cta-button">
ابدأ التجربة المجانية
</button>
<!-- Mobile Menu Button -->
<button id="mobile-menu-button" class="md:hidden text-gray-600 hover:text-primary">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu (Hidden by default) -->
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100 shadow-inner">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50">الفهرس</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50">المدربون</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50">عنّا</a>
<!-- تم إضافة وتحديث رابط "الأسئلة الشائعة" في قائمة الجوال -->
<a href="https://drabdelaal.site/wp-admin/admin.php?page=smart-clinic-reports" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50">الأسئلة الشائعة</a>
<!-- رابط تسجيل الدخول -->
<a href="https://drabdelaal.site/wp-admin/" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50">تسجيل الدخول</a>
<button class="w-full bg-primary text-white py-2 px-4 rounded-lg mt-2 hover:bg-blue-700 transition duration-150 cta-button">
ابدأ التجربة المجانية
</button>
</div>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="bg-primary text-white py-20 sm:py-32 overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl sm:text-6xl font-extrabold mb-4 leading-tight hero-text-animation hero-text-h1">
أعظم المعارف في العالم. تدرس من قبل الأفضل.
</h1>
<p class="text-xl sm:text-2xl font-light mb-8 max-w-3xl mx-auto opacity-90 hero-text-animation hero-text-p">
اكتشف آلاف المحاضرات في العلوم والتاريخ والفنون والمهارات المهنية باشتراك واحد.
</p>
<div class="space-y-4 sm:space-y-0 sm:space-x-6 hero-text-animation hero-text-buttons">
<!-- التعديل هنا: تحويل الزر إلى رابط باللينك المطلوب -->
<a href="https://drabdelaal.site/wp-admin/admin.php?page=smart-clinic-reports" class="bg-secondary text-primary font-bold py-3 px-8 rounded-full text-lg hover:bg-yellow-400 transition duration-150 shadow-xl cta-button inline-flex items-center justify-center">
استكشاف الدورات
</a>
<button class="bg-white text-primary font-semibold py-3 px-8 rounded-full text-lg hover:bg-gray-100 transition duration-150 shadow-xl cta-button" id="install-pwa-button" style="display:none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
تثبيت التطبيق
</button>
</div>
</div>
</section>
<!-- Why Choose Us Section (New, Animated) -->
<section class="py-16 sm:py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-12 text-primary scroll-reveal">لماذا تختارنا؟</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
<div class="p-6 bg-gray-50 rounded-xl shadow-lg border border-gray-100 scroll-reveal">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-secondary mx-auto mb-4 animate-bounce-slow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15.375l-2.31 1.73a1 1 0 01-1.383-.377L3.483 8.35a1 1 0 01-.017-1.144L5.67 4.54a1 1 0 011.09-.234l4.23 2.115a1 1 0 01.5.87V11a1 1 0 001 1h4a1 1 0 001-1V8.586a1 1 0 01.5-0.87l4.23-2.115a1 1 0 011.09.234l2.17 2.376a1 1 0 01-.017 1.144L20.44 11.23a1 1 0 01-1.383.377L15.684 12a1 1 0 00-1 1v6.755z" />
</svg>
<h3 class="text-xl font-bold text-gray-900 mb-2">مدربون خبراء</h3>
<p class="text-gray-600">تعلم من أساتذة مشهورين عالميًا وخبراء في مجالاتهم.</p>
</div>
<div class="p-6 bg-gray-50 rounded-xl shadow-lg border border-gray-100 scroll-reveal delay-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-secondary mx-auto mb-4 animate-spin-slow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.46 9.208 5 7.5 5c-4.418 0-8 3.582-8 8s3.582 8 8 8c1.708 0 3.332-.46 4.753-1.253M12 6.253c1.708-.94 3.332-1.253 4.753-1.253C17.792 5.04 19.39 5 21 5h1c4.418 0 8 3.582 8 8s-3.582 8-8 8c-1.61 0-3.208-.04-4.753-.125" />
</svg>
<h3 class="text-xl font-bold text-gray-900 mb-2">وصول غير محدود</h3>
<p class="text-gray-600">شاهد آلاف المحاضرات المصورة على أي جهاز وفي أي وقت.</p>
</div>
<div class="p-6 bg-gray-50 rounded-xl shadow-lg border border-gray-100 scroll-reveal delay-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-secondary mx-auto mb-4 animate-wiggle" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4M18 17v4M3 11h20M14 5h7M7 5H3" />
</svg>
<h3 class="text-xl font-bold text-gray-900 mb-2">محتوى منسق</h3>
<p class="text-gray-600">تم تصميم كل دورة بعناية فائقة لمسار تعليمي مثالي.</p>
</div>
</div>
</div>
</section>
<!-- Featured Courses Section (Existing, with Scroll Reveal) -->
<section class="py-16 sm:py-24 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-12 text-primary scroll-reveal">دورات مميزة</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Course Card 1: Astronomy -->
<div class="course-card bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100 scroll-reveal delay-200">
<img src="https://placehold.co/600x400/1e3a8a/ffffff?text=Astronomy" alt="The Nature of Space and Time" class="w-full h-48 object-cover">
<div class="p-6">
<span class="inline-block bg-primary text-white text-xs font-semibold px-2 py-1 rounded-full mb-3">علوم</span>
<h3 class="text-xl font-bold text-gray-900 mb-2">طبيعة المكان والزمان</h3>
<p class="text-sm text-gray-500 mb-4">د. نيل ديغراس، دكتوراه</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-primary">$49.99</span>
<div class="text-secondary">
★★★★☆ <span class="text-gray-500 text-sm">(4.5)</span>
</div>
</div>
</div>
</div>
<!-- Course Card 2: History -->
<div class="course-card bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100 scroll-reveal delay-400">
<img src="https://placehold.co/600x400/fcd34d/1e3a8a?text=Ancient+Rome" alt="The History of Ancient Rome" class="w-full h-48 object-cover">
<div class="p-6">
<span class="inline-block bg-yellow-600 text-white text-xs font-semibold px-2 py-1 rounded-full mb-3">تاريخ</span>
<h3 class="text-xl font-bold text-gray-900 mb-2">تاريخ روما القديمة</h3>
<p class="text-sm text-gray-500 mb-4">البروفيسور جوليا فيلا</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-primary">مشمول</span>
<div class="text-secondary">
★★★★★ <span class="text-gray-500 text-sm">(4.9)</span>
</div>
</div>
</div>
</div>
<!-- Course Card 3: Philosophy -->
<div class="course-card bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100 scroll-reveal delay-600">
<img src="https://placehold.co/600x400/8b5cf6/ffffff?text=Ethics" alt="Introduction to Modern Ethics" class="w-full h-48 object-cover">
<div class="p-6">
<span class="inline-block bg-purple-600 text-white text-xs font-semibold px-2 py-1 rounded-full mb-3">فلسفة</span>
<h3 class="text-xl font-bold text-gray-900 mb-2">مقدمة في الأخلاق الحديثة</h3>
<p class="text-sm text-gray-500 mb-4">د. إلينور فانس</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-primary">$59.99</span>
<div class="text-secondary">
★★★★☆ <span class="text-gray-500 text-sm">(4.3)</span>
</div>
</div>
</div>
</div>
</div>
<!-- NEW: GEMINI Course Idea Generator Feature -->
<div class="text-center mt-16 p-8 bg-white rounded-xl shadow-2xl border-2 border-secondary scroll-reveal delay-600">
<h3 class="text-2xl font-bold text-primary mb-4">✨ ابتكار دورة سريعة</h3>
<p class="text-gray-600 mb-6">دع الذكاء الاصطناعي يقترح عليك فكرة دورة جديدة ومطلوبة بناءً على اهتمامات السوق الحالية.</p>
<button id="generate-course-button" class="bg-primary text-white font-bold py-3 px-8 rounded-full text-lg hover:bg-blue-700 transition duration-150 shadow-lg cta-button flex items-center justify-center mx-auto">
<span id="generate-course-text">اقتراح فكرة دورة الآن ✨</span>
<div id="generate-course-loader" class="loader hidden ml-3"></div>
</button>
<div id="course-idea-result" class="mt-6 p-4 bg-yellow-50 text-yellow-800 rounded-lg text-right border-l-4 border-secondary hidden">
<p class="font-semibold text-primary">الاقتراح:</p>
<p id="course-idea-text" class="mt-2"></p>
</div>
</div>
<div class="text-center mt-12 scroll-reveal delay-800">
<button class="text-primary font-semibold hover:text-blue-700 transition duration-150">
عرض الفهرس بالكامل →
</button>
</div>
</div>
</section>
<!-- Instructor Spotlight Section (New, Highly Animated) -->
<section class="py-16 sm:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-12 text-primary scroll-reveal">مدرب مميز: البروفيسور فانس</h2>
<div class="lg:flex lg:items-center bg-white rounded-2xl shadow-2xl overflow-hidden p-8 border border-gray-100 instructor-card scroll-reveal delay-200">
<div class="lg:w-1/3 flex justify-center p-4">
<img src="https://placehold.co/300x400/8b5cf6/ffffff?text=Dr.+Vance" alt="Dr. Eleanor Vance" class="rounded-xl object-cover shadow-xl instructor-card-inner transition duration-500">
</div>
<div class="lg:w-2/3 lg:pl-10 mt-6 lg:mt-0 p-4">
<h3 class="text-4xl font-extrabold text-primary mb-3">د. إلينور فانس</h3>
<!-- GEMINI Feature 2 Target -->
<p id="instructor-tagline" class="text-lg text-secondary font-medium mb-6">أخلاقية رائدة ومؤلفة الأكثر مبيعاً</p>
<button id="generate-tagline-button" class="mt-2 mb-6 bg-gray-200 text-gray-800 py-2 px-4 rounded-full text-sm hover:bg-gray-300 transition duration-300 shadow-md cta-button flex items-center">
<span id="generate-tagline-text">توليد سطر جديد ومثير ✨</span>
<div id="generate-tagline-loader" class="loader small hidden mr-2"></div>
</button>
<div class="space-y-4 text-gray-700">
<p>تشغل الدكتورة فانس كرسي الفلسفة الأخلاقية في جامعة كامبريدج وأحدثت ثورة في دراسة الأخلاق الحديثة. أسلوبها التدريسي الجذاب والمحاور يجعل المعضلات الأخلاقية المعقدة في متناول الجميع.</p>
<p class="font-semibold">دورات مميزة:</p>
<ul class="list-disc list-inside mr-4 space-y-1">
<li>مقدمة في الأخلاق الحديثة (الأكثر مبيعاً في الدورات الرائعة)</li>
<li>فلسفة اتخاذ القرار</li>
<li>الأخلاق في العصر الرقمي</li>
</ul>
</div>
<button class="mt-8 bg-purple-600 text-white py-3 px-8 rounded-full text-lg hover:bg-purple-700 transition duration-300 shadow-lg cta-button">
مشاهدة جميع دوراتها
</button>
</div>
</div>
</div>
</section>
<!-- Testimonials/Stats Section (Existing, with Scroll Reveal) -->
<section class="bg-gray-100 py-16 sm:py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-8 items-center">
<!-- Stat 1 -->
<div class="text-center p-6 bg-white rounded-xl shadow-md border border-gray-200 scroll-reveal">
<p class="text-5xl font-extrabold text-primary counter-animate">5,000+</p>
<p class="text-lg font-medium text-gray-600 mt-2">ساعة من المحتوى</p>
</div>
<!-- Stat 2 -->
<div class="text-center p-6 bg-white rounded-xl shadow-md border border-gray-200 scroll-reveal delay-200">
<p class="text-5xl font-extrabold text-primary counter-animate">100k+</p>
<p class="text-lg font-medium text-gray-600 mt-2">مشترك نشط</p>
</div>
<!-- Testimonial -->
<div class="lg:col-span-1 p-6 bg-white rounded-xl shadow-xl border-r-4 border-secondary scroll-reveal delay-400">
<blockquote class="text-lg italic text-gray-700">
"جودة التدريس لا تُضاهى. أشعر وكأنني أحصل على شهادة جامعية من غرفة المعيشة الخاصة بي."
</blockquote>
<footer class="mt-4 font-semibold text-primary">
— سارة ك.، متعلمة متحمسة
</footer>
</div>
</div>
</div>
</section>
<!-- Flexible Access/Pricing Section (New, Animated) -->
<section class="py-16 sm:py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-12 text-primary scroll-reveal">وصول مرن لكل متعلم</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
<!-- Pricing Card 1: Monthly -->
<div class="p-8 bg-gray-50 rounded-xl shadow-xl border-2 border-primary/20 hover:border-primary transition duration-300 scroll-reveal delay-200">
<div class="flex items-center justify-between mb-4">
<h3 class="text-2xl font-bold text-gray-900">الخطة الشهرية</h3>
<span class="text-xl font-extrabold text-primary">$19<span class="text-base text-gray-600">/شهر</span></span>
</div>
<p class="text-gray-600 mb-6">مثالية للمشاريع قصيرة الأجل أو فترات التعلم الموسمية.</p>
<ul class="space-y-2 text-gray-700 mb-8">
<li class="flex items-center"><svg class="w-5 h-5 text-secondary ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> وصول كامل للفهرس</li>
<li class="flex items-center"><svg class="w-5 h-5 text-secondary ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> البث عبر الهاتف والتلفزيون</li>
<li class="flex items-center opacity-50"><svg class="w-5 h-5 text-gray-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> خصم سنوي غير متاح</li>
</ul>
<button class="w-full bg-primary text-white py-3 rounded-lg font-bold hover:bg-blue-700 transition duration-300 shadow-md cta-button">
اختر الخطة الشهرية
</button>
</div>
<!-- Pricing Card 2: Annual (Best Value) -->
<div class="p-8 bg-primary text-white rounded-2xl shadow-2xl border-4 border-secondary transition duration-300 scroll-reveal delay-400 transform hover:scale-[1.02]">
<span class="absolute top-0 left-0 bg-secondary text-primary text-xs font-bold px-3 py-1 rounded-br-lg">أفضل قيمة</span>
<div class="flex items-center justify-between mb-4">
<h3 class="text-2xl font-bold">الخطة السنوية</h3>
<span class="text-xl font-extrabold text-secondary">$15<span class="text-base text-gray-200">/شهر (تُدفع سنويًا)</span></span>
</div>
<p class="text-gray-200 mb-6">أقصى توفير للمتعلم الملتزم والمستمر.</p>
<ul class="space-y-2 mb-8">
<li class="flex items-center"><svg class="w-5 h-5 text-secondary ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> وصول كامل للفهرس</li>
<li class="flex items-center"><svg class="w-5 h-5 text-secondary ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> البث عبر الهاتف والتلفزيون</li>
<li class="flex items-center"><svg class="w-5 h-5 text-secondary ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> **توفير أكثر من 20% سنويًا**</li>
</ul>
<button class="w-full bg-secondary text-primary py-3 rounded-lg font-bold hover:bg-yellow-400 transition duration-300 shadow-2xl cta-button">
ابدأ الاشتراك السنوي
</button>
</div>
</div>
</div>
</section>
<!-- Final CTA Section (Existing, with Scroll Reveal) -->
<section class="py-16 bg-primary/90">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center scroll-reveal delay-200">
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">هل أنت مستعد لبدء التعلم؟</h2>
<p class="text-xl text-gray-200 mb-8">سجل اليوم واحصل على أول 30 يومًا مجانًا.</p>
<button class="bg-secondary text-primary font-bold py-3 px-10 rounded-full text-xl hover:bg-yellow-400 transition duration-150 shadow-2xl cta-button">
اطلب تجربتك المجانية
</button>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<!-- Column 1: Logo & Mission -->
<div class="scroll-reveal delay-200">
<a href="#" class="text-xl font-extrabold text-secondary tracking-tight">
TheGreatClasses
</a>
<p class="text-sm text-gray-400 mt-3">
الفضول يدفعنا. المعرفة تمكنك.
</p>
</div>
<!-- Column 2: Explore -->
<div class="scroll-reveal delay-400">
<h4 class="font-semibold text-white mb-4 border-b border-gray-700 pb-1">استكشاف</h4>
<ul class="space-y-2 text-sm text-gray-400">
<li><a href="#" class="hover:text-secondary">الفنون والموسيقى</a></li>
<li><a href="#" class="hover:text-secondary">العلوم والرياضيات</a></li>
<li><a href="#" class="hover:text-secondary">التاريخ</a></li>
<li><a href="#" class="hover:text-secondary">المهارات المهنية</a></li>
</ul>
</div>
<!-- Column 3: Company -->
<div class="scroll-reveal delay-600">
<h4 class="font-semibold text-white mb-4 border-b border-gray-700 pb-1">الشركة</h4>
<ul class="space-y-2 text-sm text-gray-400">
<li><a href="#" class="hover:text-secondary">عنا</a></li>
<li><a href="#" class="hover:text-secondary">الوظائف</a></li>
<li><a href="#" class="hover:text-secondary">الصحافة</a></li>
<li><a href="#" class="hover:text-secondary">شروط الخدمة</a></li>
</ul>
</div>
<!-- Column 4: Support -->
<div class="scroll-reveal delay-800">
<h4 class="font-semibold text-white mb-4 border-b border-gray-700 pb-1">الدعم</h4>
<ul class="space-y-2 text-sm text-gray-400">
<li><a href="#" class="hover:text-secondary">مركز المساعدة</a></li>
<li><a href="#" class="hover:text-secondary">اتصل بنا</a></li>
<li><a href="#" class="hover:text-secondary">خريطة الموقع</a></li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-gray-700 text-center text-sm text-gray-500">
© 2025 TheGreatClasses. جميع الحقوق محفوظة.
</div>
</div>
</footer>
<script>
// --- Navigation Menu Toggle (Mobile) ---
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// --- PWA Installation Prompt Logic (Android/Chrome only) ---
let deferredPrompt;
const installButton = document.getElementById('install-pwa-button');
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify user they can install the PWA
installButton.style.display = 'inline-block';
});
installButton.addEventListener('click', async (e) => {
if (deferredPrompt) {
// Hide the button
installButton.style.display = 'none';
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Reset the deferred prompt variable
deferredPrompt = null;
if (outcome === 'accepted') {
console.log('User accepted the install prompt.');
} else {
console.log('User dismissed the install prompt.');
// You might choose to show the button again here.
installButton.style.display = 'inline-block';
}
} else {
console.log('Install prompt not available or already installed.');
// Fallback message/modal for iOS users or if the prompt criteria aren't met
}
});
window.addEventListener('appinstalled', () => {
// Hide the install promotion
installButton.style.display = 'none';
console.log('PWA was successfully installed.');
});
// --- 5. Intersection Observer for Scroll Reveal Animations ---
const scrollRevealObserver = () => {
const targets = document.querySelectorAll('.scroll-reveal');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
observer.unobserve(entry.target);
}
});
}, {
// Trigger when 10% of the item is visible
threshold: 0.1
});
targets.forEach(target => {
observer.observe(target);
});
};
// Initialize the scroll reveal when the window loads
window.addEventListener('load', scrollRevealObserver);
// --- GEMINI API INTEGRATION ---
const apiKey = "";
const API_BASE_URL = "https://generativelanguage.googleapis.com/v1beta/models/";
// 1. Exponential Backoff Fetcher
async function exponentialBackoffFetch(url, options, maxRetries = 5) {
let attempt = 0;
while (attempt < maxRetries) {
try {
const response = await fetch(url, options);
if (response.status === 429) {
throw new Error("Rate limit exceeded (429)");
}
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response;
} catch (error) {
attempt++;
if (attempt >= maxRetries) {
throw error;
}
// Exponential backoff delay
const delay = Math.pow(2, attempt) * 1000 + Math.random() * 1000;
await new Promise(resolve => setTimeout(resolve, delay));
}
}
}
// 2. Main Content Generation Function
async function generateContent(modelName, systemPrompt, userQuery, useSearch = false) {
const url = `${API_BASE_URL}${modelName}:generateContent?key=${apiKey}`;
const payload = {
contents: [{ parts: [{ text: userQuery }] }],
systemInstruction: { parts: [{ text: systemPrompt }] },
};
if (useSearch) {
payload.tools = [{ "google_search": {} }];
}
const options = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
};
try {
const response = await exponentialBackoffFetch(url, options);
const result = await response.json();
const candidate = result.candidates?.[0];
const text = candidate?.content?.parts?.[0]?.text || "تعذر توليد المحتوى.";
return text;
} catch (error) {
console.error("Gemini API call failed:", error);
return "حدث خطأ أثناء الاتصال بالنموذج. يرجى المحاولة مرة أخرى.";
}
}
// --- Feature 1: Course Idea Generator ---
const generateCourseButton = document.getElementById('generate-course-button');
const generateCourseText = document.getElementById('generate-course-text');
const generateCourseLoader = document.getElementById('generate-course-loader');
const courseIdeaResult = document.getElementById('course-idea-result');
const courseIdeaText = document.getElementById('course-idea-text');
generateCourseButton.addEventListener('click', async () => {
// UI State: Loading
generateCourseText.textContent = 'جاري الاقتراح...';
generateCourseLoader.classList.remove('hidden');
generateCourseButton.disabled = true;
courseIdeaResult.classList.add('hidden');
const systemPrompt = "You are a chief curriculum strategist for a premium online education platform. Your task is to suggest one highly relevant and captivating new course idea that addresses a current global trend or high-demand skill. Provide the course title and a one-sentence motivation/description. Respond ONLY in Arabic.";
const userQuery = "Suggest a new, high-value course idea for our platform's catalog, focusing on a popular or emerging topic in technology, environment, or personal finance.";
const generatedText = await generateContent('gemini-2.5-flash-preview-09-2025', systemPrompt, userQuery, true); // Using Search Grounding
// UI State: Result
courseIdeaText.innerHTML = generatedText.replace(/\n/g, '<br>');
courseIdeaResult.classList.remove('hidden');
generateCourseText.textContent = 'اقتراح فكرة دورة أخرى ✨';
generateCourseLoader.classList.add('hidden');
generateCourseButton.disabled = false;
});
// --- Feature 2: Instructor Bio Generator ---
const generateTaglineButton = document.getElementById('generate-tagline-button');
const generateTaglineText = document.getElementById('generate-tagline-text');
const generateTaglineLoader = document.getElementById('generate-tagline-loader');
const instructorTagline = document.getElementById('instructor-tagline');
generateTaglineButton.addEventListener('click', async () => {
// UI State: Loading
generateTaglineText.textContent = 'توليد...';
generateTaglineLoader.classList.remove('hidden');
generateTaglineButton.disabled = true;
const systemPrompt = "You are a creative marketing copywriter for an educational brand. Generate one, short (less than 10 words) and incredibly catchy tagline/descriptor for a professor of moral philosophy and ethics, Dr. Eleanor Vance. The tone should be exciting and intellectual. Respond ONLY in Arabic.";
const userQuery = "Generate a new tagline for Dr. Eleanor Vance, an expert in Modern Ethics.";
const generatedTagline = await generateContent('gemini-2.5-flash-preview-09-2025', systemPrompt, userQuery, false); // Creative generation
// UI State: Result
instructorTagline.textContent = generatedTagline.trim();
generateTaglineText.textContent = 'توليد سطر جديد ومثير ✨';
generateTaglineLoader.classList.add('hidden');
generateTaglineButton.disabled = false;
});
</script>
</body>
</html>