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="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <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://unpkg.com/feather-icons"></script> | |
| <style> | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| color: #e2e8f0; | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #60a5fa, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4); | |
| } | |
| .device-icon { | |
| width: 80px; | |
| height: 80px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background: rgba(59, 130, 246, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="py-6 px-4 md:px-8"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <i data-feather="shield" class="text-white"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold">جدار الحماية</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8 space-x-reverse"> | |
| <a href="#" class="hover:text-blue-400 transition">الرئيسية</a> | |
| <a href="#" class="hover:text-blue-400 transition">الميزات</a> | |
| <a href="#" class="hover:text-blue-400 transition">الأسعار</a> | |
| <a href="#" class="hover:text-blue-400 transition">الدعم</a> | |
| </nav> | |
| <button class="btn-primary text-white px-6 py-2 rounded-full font-medium">ابدأ الآن</button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="py-16 md:py-24 px-4"> | |
| <div class="container mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6" data-aos="fade-up"> | |
| حماية شاملة <span class="gradient-text">لجميع أجهزة الهواتف</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10 text-gray-300" data-aos="fade-up" data-aos-delay="200"> | |
| جدار الحماية المتقدم لحماية شبكتك وجميع أجهزتك المحمولة من التهديدات السيبرانية | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="400"> | |
| <button class="btn-primary text-white px-8 py-4 rounded-full font-medium text-lg">جرب مجاناً</button> | |
| <button class="bg-transparent border-2 border-blue-500 text-blue-400 px-8 py-4 rounded-full font-medium text-lg hover:bg-blue-500 hover:text-white transition">تعرف على المزيد</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Devices Section --> | |
| <section class="py-16 px-4 bg-slate-800/50"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16" data-aos="fade-up">متوافق مع جميع المنصات</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8"> | |
| <div class="device-icon mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| <i data-feather="smartphone" class="text-blue-400 w-10 h-10"></i> | |
| </div> | |
| <div class="device-icon mx-auto" data-aos="fade-up" data-aos-delay="200"> | |
| <i data-feather="tablet" class="text-blue-400 w-10 h-10"></i> | |
| </div> | |
| <div class="device-icon mx-auto" data-aos="fade-up" data-aos-delay="300"> | |
| <i data-feather="monitor" class="text-blue-400 w-10 h-10"></i> | |
| </div> | |
| <div class="device-icon mx-auto" data-aos="fade-up" data-aos-delay="400"> | |
| <i data-feather="cpu" class="text-blue-400 w-10 h-10"></i> | |
| </div> | |
| <div class="device-icon mx-auto" data-aos="fade-up" data-aos-delay="500"> | |
| <i data-feather="server" class="text-blue-400 w-10 h-10"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 px-4"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16" data-aos="fade-up">🛡️ المنتجات الأمنية</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Firewall Feature --> | |
| <div class="feature-card bg-slate-800/50 p-8" data-aos="fade-up"> | |
| <div class="w-16 h-16 rounded-full bg-blue-500/10 flex items-center justify-center mb-6"> | |
| <i data-feather="shield" class="text-blue-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">1. جدار الحماية (Firewall)</h3> | |
| <ul class="space-y-2 text-gray-300"> | |
| <li class="flex items-start"><i data-feather="check-circle" class="text-green-400 ml-2 mt-1 w-5 h-5 flex-shrink-0"></i> يعمل كحاجز بين شبكتك والإنترنت</li> | |
| <li class="flex items-start"><i data-feather="check-circle" class="text-green-400 ml-2 mt-1 w-5 h-5 flex-shrink-0"></i> يمنع الوصول غير المصرح به</li> | |
| <li class="flex items-start"><i data-feather="check-circle" class="text-green-400 ml-2 mt-1 w-5 h-5 flex-shrink-0"></i> يفلتر البيانات الداخلة والخارجة</li> | |
| </ul> | |
| </div> | |
| <!-- Network Security Feature --> | |
| <div class="feature-card bg-slate-800/50 p-8" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-16 h-16 rounded-full bg-purple-500/10 flex items-center justify-center mb-6"> | |
| <i data-feather="wifi" class="text-purple-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">2. حماية الشبكة (Network Security)</h3> | |
| <ul class="space-y-2 text-gray-300"> | |
| <li class="flex items-start"><i data-feather="check-circle" class="text-green-400 ml-2 mt-1 w-5 h-5 flex-shrink-0"></i> تشمل أنظمة كشف التسلل ومنع الاختراق</li> | |
| <li class="flex items-start"><i data-feather="check-circle" class="text-green-400 ml-2 mt-1 w-5 h-5 flex-shrink-0"></i> تأمين أجهزة التوجيه والمبدلات</li> | |
| <li class="flex items-start"><i data-feather="check-circle" class="text-green-400 ml-2 mt-1 w-5 h-5 flex-shrink-0"></i> تشفير الاتصالات داخل الشبكة</li> | |
| </ul> | |
| </div> | |
| <!-- Advanced Protection Feature --> | |
| <div class="feature-card bg-slate-800/50 p-8" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center mb-6"> | |
| <i data-feather="zap" class="text-red-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">3. الحماية المتقدمة (Advanced Protection)</h3> | |
| <ul class="space-y-2 text-gray-300"> | |
| <li class="flex items-start"><i data-feather="check-circle" class="text-green-400 ml-2 mt-1 w-5 h-5 flex-shrink-0"></i> تقنيات متطورة ضد الهجمات السيبرانية المعقدة مثل Zero-Day Attacks</li> | |
| <li class="flex items-start"><i data-feather="check-circle" class="text-green-400 ml-2 mt-1 w-5 h-5 flex-shrink-0"></i> ذكاء اصطناعي وتحليل سلوك المستخدم</li> | |
| <li class="flex items-start"><i data-feather="check-circle" class="text-green-400 ml-2 mt-1 w-5 h-5 flex-shrink-0"></i> حلول مضادة للبرمجيات الخبيثة المتقدمة</li> | |
| </ul> | |
| </div> | |
| <!-- Continuous Monitoring Feature --> | |
| <div class="feature-card bg-slate-800/50 p-8" data-aos="fade-up" data-aos-delay="600"> | |
| <div class="w-16 h-16 rounded-full bg-green-500/10 flex items-center justify-center mb-6"> | |
| <i data-feather="eye" class="text-green-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">4. المراقبة المستمرة (Continuous Monitoring)</h3> | |
| <ul class="space-y-2 text-gray-300"> | |
| <li class="flex items-start"><i data-feather="check-circle" class="text-green-400 ml-2 mt-1 w-5 h-5 flex-shrink-0"></i> مراقبة الأنظمة على مدار الساعة (24/7)</li> | |
| <li class="flex items-start"><i data-feather="check-circle" class="text-green-400 ml-2 mt-1 w-5 h-5 flex-shrink-0"></i> تنبيهات فورية عند وجود تهديد</li> | |
| <li class="flex items-start"><i data-feather="check-circle" class="text-green-400 ml-2 mt-1 w-5 h-5 flex-shrink-0"></i> تقارير تحليلية دورية لمتابعة الحالة الأمنية</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-20 px-4 bg-slate-800/50"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div data-aos="fade-up"> | |
| <div class="text-4xl md:text-5xl font-bold gradient-text mb-2">99.9%</div> | |
| <p class="text-gray-300">فعالية الحماية</p> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="200"> | |
| <div class="text-4xl md:text-5xl font-bold gradient-text mb-2">500+</div> | |
| <p class="text-gray-300">ألف مستخدم</p> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="400"> | |
| <div class="text-4xl md:text-5xl font-bold gradient-text mb-2">24/7</div> | |
| <p class="text-gray-300">مراقبة مستمرة</p> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="600"> | |
| <div class="text-4xl md:text-5xl font-bold gradient-text mb-2">0</div> | |
| <p class="text-gray-300">تسريبات البيانات</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-4"> | |
| <div class="container mx-auto text-center max-w-3xl"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">ابدأ الحماية اليوم</h2> | |
| <p class="text-xl text-gray-300 mb-10" data-aos="fade-up" data-aos-delay="200"> | |
| انضم إلى آلاف المستخدمين المحميين بجدار الحماية المتقدم لدينا | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="400"> | |
| <button class="btn-primary text-white px-8 py-4 rounded-full font-medium text-lg">جرب مجاناً لمدة 30 يوم</button> | |
| <button class="bg-transparent border-2 border-blue-500 text-blue-400 px-8 py-4 rounded-full font-medium text-lg hover:bg-blue-500 hover:text-white transition">اطلب عرض أسعار</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-4 bg-slate-900"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <i data-feather="shield" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">جدار الحماية</h3> | |
| </div> | |
| <p class="text-gray-400">حماية شاملة لجميع أجهزة الهواتف والشبكات من التهديدات السيبرانية</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">المنتجات</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-blue-400 transition">🛡️ جدار الحماية</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition">🌐 حماية الشبكة</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition">⚡ الحماية المتقدمة</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition">👁️🗨️ المراقبة المستمرة</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">الدعم</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-blue-400 transition">مركز المساعدة</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition">الاتصال بنا</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition">الأسئلة الشائعة</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition">المدونة</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">الشركة</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-blue-400 transition">من نحن</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition">الوظائف</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition">الشراكات</a></li> | |
| <li><a href="#" class="hover:text-blue-400 transition">الخصوصية</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> | |
| <p>© 2023 جدار الحماية. جميع الحقوق محفوظة.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script>AOS.init();</script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |