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>الأمن السيبراني - RT Security</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.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: #0a0a0a; | |
| } | |
| .cyber-grid { | |
| background-image: | |
| linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| .glow { | |
| box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); | |
| } | |
| .text-glow { | |
| text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); | |
| } | |
| .service-card { | |
| background: linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%); | |
| border: 1px solid rgba(0, 255, 255, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3); | |
| border-color: rgba(0, 255, 255, 0.6); | |
| } | |
| .vanta-canvas { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .field-card { | |
| background: linear-gradient(135deg, rgba(0, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.8) 100%); | |
| border: 1px solid rgba(0, 255, 255, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .field-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 20px rgba(0, 255, 255, 0.2); | |
| border-color: rgba(0, 255, 255, 0.4); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full bg-black/90 backdrop-blur-md z-50 border-b border-cyan-500/20"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="shield" class="w-8 h-8 text-cyan-400"></i> | |
| <span class="text-2xl font-bold text-glow">RT Security</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="index.html#home" class="hover:text-cyan-400 transition-colors">الرئيسية</a> | |
| <a href="index.html#services" class="hover:text-cyan-400 transition-colors">خدماتنا</a> | |
| <a href="cybersecurity.html" class="hover:text-cyan-400 transition-colors">الأمن السيبراني</a> | |
| <a href="index.html#contact" class="hover:text-cyan-400 transition-colors">اتصل بنا</a> | |
| </div> | |
| <button class="md:hidden" id="menu-toggle"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center cyber-grid overflow-hidden pt-16"> | |
| <div id="vanta-bg" class="vanta-canvas"></div> | |
| <div class="container mx-auto px-6 text-center z-10"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 text-glow" data-aos="fade-up"> | |
| الأمن السيبراني | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 text-gray-300" data-aos="fade-up" data-aos-delay="200"> | |
| حماية العالم الرقمي من التهديدات الإلكترونية | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Introduction Section --> | |
| <section class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-8 text-glow text-center" data-aos="fade-up"> | |
| ما هو الأمن السيبراني؟ | |
| </h2> | |
| <p class="text-gray-300 text-lg leading-relaxed mb-8" data-aos="fade-up" data-aos-delay="100"> | |
| هو مجال متخصص يهدف إلى حماية الأنظمة والشبكات من الهجمات الإلكترونية، وتأمين البيانات والمعلومات من الاختراق أو التسريب، والكشف المبكر عن التهديدات والتعامل معها بسرعة، وتطوير استراتيجيات تمنع الجرائم الإلكترونية. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12"> | |
| <div class="field-card p-6 rounded-xl" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-start gap-4"> | |
| <div class="w-12 h-12 bg-cyan-500/20 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <span class="text-cyan-400 font-bold">1</span> | |
| </div> | |
| <p class="text-gray-300">حماية الأنظمة والشبكات من الهجمات الإلكترونية</p> | |
| </div> | |
| </div> | |
| <div class="field-card p-6 rounded-xl" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-start gap-4"> | |
| <div class="w-12 h-12 bg-cyan-500/20 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <span class="text-cyan-400 font-bold">2</span> | |
| </div> | |
| <p class="text-gray-300">تأمين البيانات والمعلومات من الاختراق أو التسريب</p> | |
| </div> | |
| </div> | |
| <div class="field-card p-6 rounded-xl" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="flex items-start gap-4"> | |
| <div class="w-12 h-12 bg-cyan-500/20 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <span class="text-cyan-400 font-bold">3</span> | |
| </div> | |
| <p class="text-gray-300">الكشف المبكر عن التهديدات والتعامل معها بسرعة</p> | |
| </div> | |
| </div> | |
| <div class="field-card p-6 rounded-xl" data-aos="fade-up" data-aos-delay="500"> | |
| <div class="flex items-start gap-4"> | |
| <div class="w-12 h-12 bg-cyan-500/20 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <span class="text-cyan-400 font-bold">4</span> | |
| </div> | |
| <p class="text-gray-300">تطوير استراتيجيات تمنع الجرائم الإلكترونية</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Fields Section --> | |
| <section class="py-20 bg-gradient-to-b from-black to-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-16 text-glow" data-aos="fade-up"> | |
| مجالات الأمن السيبراني | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <div class="field-card p-8 rounded-xl text-center" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <span class="text-2xl">🔒</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">حماية المعلومات</h3> | |
| <p class="text-gray-400">(Information Security)</p> | |
| </div> | |
| <div class="field-card p-8 rounded-xl text-center" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <span class="text-2xl">🌐</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">أمن الشبكات</h3> | |
| <p class="text-gray-400">(Network Security)</p> | |
| </div> | |
| <div class="field-card p-8 rounded-xl text-center" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <span class="text-2xl">🕵️</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">التحقيق الرقمي</h3> | |
| <p class="text-gray-400">(Digital Forensics)</p> | |
| </div> | |
| <div class="field-card p-8 rounded-xl text-center" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <span class="text-2xl">🤖</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">أمن الذكاء الاصطناعي</h3> | |
| <p class="text-gray-400">(AI Security)</p> | |
| </div> | |
| <div class="field-card p-8 rounded-xl text-center" data-aos="fade-up" data-aos-delay="500"> | |
| <div class="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <span class="text-2xl">📡</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">مكافحة الهجمات السيبرانية</h3> | |
| <p class="text-gray-400">(Cyber Attacks Prevention)</p> | |
| </div> | |
| <div class="field-card p-8 rounded-xl text-center" data-aos="fade-up" data-aos-delay="600"> | |
| <div class="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <span class="text-2xl">🛡️</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">أمان التطبيقات</h3> | |
| <p class="text-gray-400">(Application Security)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Goal Section --> | |
| <section class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-8 text-glow" data-aos="fade-up"> | |
| الهدف من الأمن السيبراني | |
| </h2> | |
| <div class="field-card p-10 rounded-xl" data-aos="fade-up" data-aos-delay="200"> | |
| <p class="text-xl text-gray-300 leading-relaxed"> | |
| تأمين العالم الرقمي من التهديدات، وضمان بيئة آمنة للمستخدمين والأفراد والشركات | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-black"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-8 text-glow" data-aos="fade-up"> | |
| هل أنت مستعد لحماية عالمك الرقمي؟ | |
| </h2> | |
| <p class="text-gray-300 text-lg mb-10 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200"> | |
| انضم إلينا في RT Security وابدأ رحلتك في مجال الأمن السيبراني | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center" data-aos="fade-up" data-aos-delay="400"> | |
| <a href="index.html#contact" class="px-8 py-4 bg-cyan-500 hover:bg-cyan-600 rounded-lg font-semibold transition-all glow"> | |
| تواصل معنا الآن | |
| </a> | |
| <a href="index.html#services" class="px-8 py-4 bg-gray-800 hover:bg-gray-700 rounded-lg font-semibold transition-all border border-gray-700"> | |
| اكتشف خدماتنا | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-8 border-t border-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <i data-feather="shield" class="w-6 h-6 text-cyan-400"></i> | |
| <span class="text-lg font-semibold">RT Security</span> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="text-gray-400 mb-2">تصميم: ريان بن خالد بن عبدالمحسن الثميري</p> | |
| <p class="text-gray-500 text-sm">الرقم العمل حر FL-333236721</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-6 pt-6 border-t border-gray-800"> | |
| <p class="text-gray-500 text-sm">© 2023 الأمن السيبراني. جميع الحقوق محفوظة.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 1000, | |
| once: true | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Initialize Vanta.js Background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x0, | |
| color2: 0xff00, | |
| size: 1.00, | |
| backgroundColor: 0x0 | |
| }); | |
| // Mobile Menu Toggle | |
| const menuToggle = document.getElementById('menu-toggle'); | |
| const mobileMenu = document.createElement('div'); | |
| mobileMenu.className = 'fixed inset-0 bg-black/95 z-40 hidden'; | |
| mobileMenu.innerHTML = ` | |
| <div class="flex flex-col items-center justify-center h-full space-y-8 text-2xl"> | |
| <button class="absolute top-8 right-8" id="close-menu"> | |
| <i data-feather="x" class="w-8 h-8"></i> | |
| </button> | |
| <a href="index.html#home" class="hover:text-cyan-400 transition-colors">الرئيسية</a> | |
| <a href="index.html#services" class="hover:text-cyan-400 transition-colors">خدماتنا</a> | |
| <a href="cybersecurity.html" class="hover:text-cyan-400 transition-colors">الأمن السيبراني</a> | |
| <a href="index.html#contact" class="hover:text-cyan-400 transition-colors">اتصل بنا</a> | |
| </div> | |
| `; | |
| document.body.appendChild(mobileMenu); | |
| menuToggle.addEventListener('click', () => { | |
| mobileMenu.classList.remove('hidden'); | |
| }); | |
| document.getElementById('close-menu').addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| // Smooth Scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |