Spaces:
Running
Running
File size: 16,173 Bytes
48703f0 418697b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 |
<!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>
<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>
|