Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>عرض اليوم الوطني - غرفة الزلفي</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🇸🇦</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap'); | |
| body { font-family: 'Tajawal', sans-serif; } | |
| .gradient-bg { background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e293b 100%); } | |
| .gold-gradient { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%); } | |
| .green-gradient { background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%); } | |
| .pulse-glow { box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); animation: pulse-glow 2s ease-in-out infinite; } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); } | |
| 50% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.8); } | |
| } | |
| .text-glow { text-shadow: 0 0 10px rgba(251, 191, 36, 0.3); } | |
| .floating { animation: floating 3s ease-in-out infinite; } | |
| @keyframes floating { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .countdown-timer { font-family: 'Courier New', monospace; } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-900 text-white overflow-x-hidden"> | |
| <!-- Hero Section with Vanta Background --> | |
| <section id="hero" class="relative min-h-screen flex items-center justify-center"> | |
| <div id="vanta-bg" class="absolute inset-0 z-0"></div> | |
| <div class="relative z-10 text-center px-4 max-w-6xl mx-auto"> | |
| <!-- Animated Saudi Flag --> | |
| <div class="floating mb-8"> | |
| <span class="text-6xl md:text-8xl">🇸🇦</span> | |
| </div> | |
| <h1 class="text-4xl md:text-7xl font-bold mb-6 text-glow" data-aos="fade-up"> | |
| لا تفوت عروض اليوم الوطني | |
| </h1> | |
| <div class="gold-gradient text-slate-900 px-6 py-3 rounded-full inline-block mb-8 text-xl font-bold pulse-glow" data-aos="fade-up" data-aos-delay="200"> | |
| خصم 50% لفترة محدودة! | |
| </div> | |
| <p class="text-xl md:text-2xl mb-8 opacity-90" data-aos="fade-up" data-aos-delay="400"> | |
| دبلومات احترافية بأسعار لا تُقاوم في غرفة الزلفي | |
| </p> | |
| <!-- Countdown Timer --> | |
| <div class="glass-effect rounded-2xl p-6 mb-8 max-w-md mx-auto" data-aos="zoom-in" data-aos-delay="600"> | |
| <h3 class="text-lg font-bold mb-4 text-gold-400">ينتهي العرض خلال:</h3> | |
| <div class="countdown-timer text-3xl md:text-4xl font-bold" id="countdown"> | |
| 23:59:59 | |
| </div> | |
| </div> | |
| <button onclick="scrollToOffers()" class="gold-gradient text-slate-900 px-8 py-4 rounded-full text-xl font-bold hover:scale-105 transition-transform pulse-glow" data-aos="fade-up" data-aos-delay="800"> | |
| اعرض العروض الآن | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Offers Section --> | |
| <section id="offers" class="py-20 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center mb-16" data-aos="fade-up"> | |
| عروضنا الخاصة باليوم الوطني | |
| </h2> | |
| <!-- Main Offers Grid --> | |
| <div class="grid md:grid-cols-2 gap-8 mb-16"> | |
| <!-- 300 Hour Diploma --> | |
| <div class="glass-effect rounded-3xl p-8 relative overflow-hidden" data-aos="fade-right"> | |
| <div class="absolute top-0 left-0 w-full h-1 gold-gradient"></div> | |
| <div class="absolute -top-10 -right-10 w-32 h-32 gold-gradient rounded-full opacity-10"></div> | |
| <div class="text-center mb-6"> | |
| <i data-feather="award" class="w-16 h-16 mx-auto mb-4 text-yellow-400"></i> | |
| <h3 class="text-2xl font-bold mb-2">دبلوم 300 ساعة تدريبية</h3> | |
| <p class="text-sm opacity-75">دورة عام دراسي كامل</p> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <div class="text-3xl font-bold line-through opacity-50">3,900 ريال</div> | |
| <div class="text-5xl font-bold text-yellow-400 mb-2">1,980 ريال</div> | |
| <div class="text-sm opacity-75">خصم 50% من اليوم الوطني</div> | |
| </div> | |
| <div class="glass-effect rounded-xl p-4 mb-6"> | |
| <div class="text-center"> | |
| <p class="font-bold">أو تقسيط على 4 دفعات</p> | |
| <p class="text-2xl font-bold text-green-400">495 ريال / دفعة</p> | |
| <p class="text-sm opacity-75">بدون فوائد</p> | |
| </div> | |
| </div> | |
| <button class="w-full gold-gradient text-slate-900 py-3 rounded-xl font-bold hover:scale-105 transition-transform"> | |
| سجّل الآن | |
| </button> | |
| </div> | |
| <!-- 240 Hour Diploma --> | |
| <div class="glass-effect rounded-3xl p-8 relative overflow-hidden" data-aos="fade-left"> | |
| <div class="absolute top-0 left-0 w-full h-1 green-gradient"></div> | |
| <div class="absolute -top-10 -right-10 w-32 h-32 green-gradient rounded-full opacity-10"></div> | |
| <div class="text-center mb-6"> | |
| <i data-feather="trending-up" class="w-16 h-16 mx-auto mb-4 text-green-400"></i> | |
| <h3 class="text-2xl font-bold mb-2">دبلوم 240 ساعة تدريبية</h3> | |
| <p class="text-sm opacity-75">دورة 6 أشهر</p> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <div class="text-3xl font-bold line-through opacity-50">2,500 ريال</div> | |
| <div class="text-5xl font-bold text-green-400 mb-2">1,180 ريال</div> | |
| <div class="text-sm opacity-75">خصم 50% من اليوم الوطني</div> | |
| </div> | |
| <div class="glass-effect rounded-xl p-4 mb-6"> | |
| <div class="text-center"> | |
| <p class="font-bold">أو تقسيط على 4 دفعات</p> | |
| <p class="text-2xl font-bold text-green-400">295 ريال / دفعة</p> | |
| <p class="text-sm opacity-75">بدون فوائد</p> | |
| </div> | |
| </div> | |
| <button class="w-full green-gradient text-slate-900 py-3 rounded-xl font-bold hover:scale-105 transition-transform"> | |
| سجّل الآن | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Special Bonus --> | |
| <div class="glass-effect rounded-3xl p-8 text-center" data-aos="zoom-in"> | |
| <i data-feather="gift" class="w-20 h-20 mx-auto mb-4 text-red-400"></i> | |
| <h3 class="text-3xl font-bold mb-4 text-red-400">مكافأة خاصة!</h3> | |
| <p class="text-xl mb-4">أول 10 مسجلين يحصلون على 4 دورات مجانية</p> | |
| <div class="text-sm bg-red-500/20 rounded-full px-4 py-2 inline-block"> | |
| <i data-feather="alert-triangle" class="inline w-4 h-4"></i> | |
| المقاعد محدودة - سارع بالتسجيل | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Medical Records Course --> | |
| <section class="py-20 px-4 bg-gradient-to-r from-green-900/50 to-blue-900/50"> | |
| <div class="max-w-4xl mx-auto text-center" data-aos="fade-up"> | |
| <div class="glass-effect rounded-3xl p-8"> | |
| <i data-feather="file-text" class="w-20 h-20 mx-auto mb-6 text-blue-400"></i> | |
| <h3 class="text-3xl font-bold mb-4">دورة إدارة السجلات الطبية</h3> | |
| <div class="text-4xl font-bold text-blue-400 mb-4">99 ريال فقط!</div> | |
| <p class="text-lg mb-6 opacity-90"> | |
| فرصة ذهبية لتطوير نفسك بسعر لا يفوّت!<br> | |
| اكتسب مهارة مطلوبة في المستشفيات والمراكز الصحية | |
| </p> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-xl font-bold transition-colors"> | |
| احجز مقعدك الآن | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-8" data-aos="fade-up">للحجز أو الاستفسار</h2> | |
| <div class="glass-effect rounded-3xl p-8" data-aos="zoom-in"> | |
| <div class="flex items-center justify-center mb-6"> | |
| <i data-feather="phone" class="w-12 h-12 ml-4 text-green-400"></i> | |
| <div> | |
| <p class="text-2xl font-bold">واتساب: 050 987 3590</p> | |
| <p class="text-sm opacity-75">غرفة الزلفي</p> | |
| </div> | |
| </div> | |
| <a href="https://wa.me/966509873590" target="_blank" class="inline-flex items-center bg-green-500 hover:bg-green-600 text-white px-8 py-4 rounded-xl font-bold transition-colors pulse-glow hover:scale-105"> | |
| <i data-feather="message-circle" class="ml-2"></i> | |
| تواصل عبر الواتساب الآن | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Floating WhatsApp Button --> | |
| <a href="https://wa.me/966509873590" target="_blank" | |
| class="fixed bottom-6 left-6 bg-green-500 text-white p-4 rounded-full shadow-lg hover:scale-110 transition-transform pulse-glow z-50"> | |
| <i data-feather="message-circle" class="w-8 h-8"></i> | |
| <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center font-bold animate-ping"> | |
| جديد | |
| </span> | |
| </a> | |
| <!-- Footer --> | |
| <footer class="bg-slate-800 py-8 px-4 text-center"> | |
| <p class="text-sm opacity-75">غرفة الزلفي - جميع الحقوق محفوظة © 2024</p> | |
| </footer> | |
| <script> | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 1000, | |
| once: true | |
| }); | |
| // Initialize Vanta.js | |
| VANTA.WAVES({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x1e293b, | |
| shininess: 30.00, | |
| waveHeight: 15.00, | |
| waveSpeed: 0.75, | |
| zoom: 0.75 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Countdown Timer | |
| function updateCountdown() { | |
| const now = new Date(); | |
| const tomorrow = new Date(now); | |
| tomorrow.setDate(tomorrow.getDate() + 1); | |
| tomorrow.setHours(0, 0, 0, 0); | |
| const diff = tomorrow - now; | |
| const hours = Math.floor(diff / (1000 * 60 * 60)); | |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); | |
| document.getElementById('countdown').textContent = | |
| `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; | |
| } | |
| setInterval(updateCountdown, 1000); | |
| updateCountdown(); | |
| // Smooth scroll function | |
| function scrollToOffers() { | |
| document.getElementById('offers').scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| // Add click handlers for registration buttons | |
| document.querySelectorAll('button').forEach(button => { | |
| if (button.textContent.includes('سجّل الآن') || button.textContent.includes('احجز مقعدك الآن')) { | |
| button.addEventListener('click', () => { | |
| window.open('https://wa.me/966509873590', '_blank'); | |
| }); | |
| } | |
| }); | |
| // Add floating animation to gift icons | |
| anime({ | |
| targets: '.floating', | |
| translateY: [-10, 10], | |
| duration: 3000, | |
| loop: true, | |
| direction: 'alternate', | |
| easing: 'easeInOutSine' | |
| }); | |
| // Animate numbers | |
| anime({ | |
| targets: '.text-5xl', | |
| scale: [0.8, 1], | |
| duration: 1000, | |
| delay: anime.stagger(200), | |
| easing: 'easeOutElastic(1, .5)' | |
| }); | |
| </script> | |
| </body> | |
| </html> | |