Spaces:

AhmedMostafaAttia
/

NABAD-RASD

Running

App Files Files Community

AhmedMostafaAttia commited on Sep 22, 2025

Commit

e0e2c4d

verified ·

1 Parent(s): 18f561f

Update index.html

Browse files

Files changed (1) hide show

index.html +145 -245

index.html CHANGED Viewed

@@ -3,8 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>نَبَض NABAD | منصة ذكاء الإعلام الوطني</title>
-    <meta name="description" content="Nabad: The pulse of the nation's story. An advanced AI platform tracking Saudi Arabia's global media narrative and the impact of Vision 2030.">
     <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
@@ -12,216 +11,122 @@
         tailwind.config = {
             theme: {
                 extend: {
-                    colors: {
-                        'brand-dark': '#0D1B2A',
-                        'brand-blue': '#3A86FF',
-                        'brand-gold': '#FFBE0B',
-                        'brand-light': '#E0E1DD',
-                        'brand-gray': '#415A77',
-                    },
-                    fontFamily: {
-                        'tajawal': ['Tajawal', 'sans-serif']
-                    },
-                    animation: {
-                        'float': 'float 6s ease-in-out infinite',
-                        'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
-                        'aurora': 'aurora 20s ease-in-out infinite alternate',
-                    },
-                    keyframes: {
-                        float: {
-                            '0%, 100%': { transform: 'translateY(0px)' },
-                            '50%': { transform: 'translateY(-20px)' },
-                        },
-                        'pulse-glow': {
-                           '0%, 100%': { boxShadow: '0 0 20px rgba(58, 134, 255, 0.4)' },
-                           '50%': { boxShadow: '0 0 35px rgba(58, 134, 255, 0.8)' },
-                        },
-                        aurora: {
-                            '0%': { backgroundPosition: '0% 50%' },
-                            '100%': { backgroundPosition: '100% 50%' },
-                        }
-                    }
                 }
             }
         }
     </script>
     <style>
-        body {
-            font-family: 'Tajawal', sans-serif;
-            background-color: #0D1B2A;
-            color: #E0E1DD;
-        }
-        .glass-card {
-            background: rgba(65, 90, 119, 0.2);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid rgba(224, 225, 221, 0.1);
-        }
-        .hero-aurora {
-            background: linear-gradient(125deg, #0D1B2A, #3A86FF, #FFBE0B, #0D1B2A);
-            background-size: 400% 400%;
-            animation: aurora 20s ease-in-out infinite alternate;
-        }
-        .rtl { direction: rtl; }
-        .ltr { direction: ltr; }
-        .scroll-reveal {
-            opacity: 0;
-            transform: translateY(30px);
-            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
-        }
-        .scroll-reveal.visible {
-            opacity: 1;
-            transform: translateY(0);
-        }
     </style>
 </head>
-<body class="font-tajawal">
     <!-- Header -->
-    <header class="fixed top-0 w-full z-50 bg-brand-dark/80 backdrop-blur-md border-b border-brand-gray/50">
-        <nav class="max-w-screen-xl mx-auto px-6 py-4 flex justify-between items-center">
             <div class="flex items-center space-x-4">
-                <i class="fas fa-wave-square text-brand-blue text-3xl"></i>
-                <h1 class="text-2xl font-bold text-white" data-en="NABAD" data-ar="نَبَض">NABAD</h1>
-            </div>
-            <div class="hidden lg:flex items-center space-x-8 text-lg">
-                <a href="#hero" class="hover:text-brand-blue transition-colors" data-en="Home" data-ar="الرئيسية">Home</a>
-                <a href="#projects" class="hover:text-brand-blue transition-colors" data-en="Mega Projects" data-ar="المشاريع العملاقة">Mega Projects</a>
-                <a href="#ai" class="hover:text-brand-blue transition-colors" data-en="AI Core" data-ar="قدرات الذكاء الاصطناعي">AI Core</a>
-                <a href="dashboard.html" class="hover:text-brand-blue transition-colors" data-en="Live Dashboards" data-ar="لوحات التحكم المباشرة">Live Dashboards</a>
-                <a href="video.html" class="hover:text-brand-blue transition-colors" data-en="Media Hub" data-ar="المركز الإعلامي">Media Hub</a>
             </div>
-            <div class="flex items-center space-x-4">
-                <a href="dashboard.html" class="px-6 py-2 bg-brand-blue text-white font-bold rounded-full hover:bg-opacity-80 transition-all hidden sm:block">
-                    <span data-en="Explore" data-ar="استكشف">Explore</span>
-                </a>
-                <button onclick="toggleLanguage()" class="w-10 h-10 border-2 border-brand-gray rounded-full hover:border-brand-blue transition-colors">
-                    <span id="lang-toggle">ع</span>
-                </button>
-            </div>
-        </nav>
     </header>
     <main>
-        <!-- Hero Section -->
-        <section id="hero" class="relative min-h-screen flex items-center justify-center text-center overflow-hidden hero-aurora">
-            <div class="absolute inset-0 bg-brand-dark opacity-50"></div>
-            <video autoplay muted loop playsinline class="absolute inset-0 w-full h-full object-cover opacity-20">
-                <source src="vision-2030-bg.mp4" type="video/mp4">
-            </video>
-            <div class="relative z-10 max-w-4xl mx-auto px-6">
-                <div class="animate-float">
-                    <div class="w-28 h-28 mx-auto mb-8 glass-card rounded-full flex items-center justify-center animate-pulse-glow">
-                        <i class="fas fa-satellite-dish text-brand-blue text-5xl"></i>
-                    </div>
-                </div>
-                <h1 class="text-5xl md:text-7xl font-extrabold text-white leading-tight mb-6" data-en="The Pulse of a Nation's Story" data-ar="نَبَض قصة وطن">The Pulse of a Nation's Story</h1>
-                <p class="text-xl md:text-2xl text-brand-light opacity-90 max-w-3xl mx-auto mb-10" data-en="Harnessing advanced AI to track, analyze, and amplify the global narrative of Saudi Arabia's transformation." data-ar="تسخير الذكاء الاصطناعي المتقدم لتتبع وتحليل وتعظيم الصدى العالمي لقصة تحول المملكة العربية السعودية.">
-                    Harnessing advanced AI to track, analyze, and amplify the global narrative of Saudi Arabia's transformation.
                 </p>
-                <div class="flex flex-col sm:flex-row gap-6 justify-center">
-                    <a href="dashboard.html" class="px-8 py-4 bg-brand-blue text-white text-lg font-bold rounded-full hover:scale-105 transition-transform">
-                        <i class="fas fa-chart-line mr-2"></i>
-                        <span data-en="Enter Live Dashboards" data-ar="الدخول للوحات التحكم المباشرة">Enter Live Dashboards</span>
-                    </a>
-                    <a href="video.html" class="px-8 py-4 glass-card text-white text-lg font-bold rounded-full hover:scale-105 transition-transform">
-                        <i class="fas fa-play-circle mr-2"></i>
-                        <span data-en="Visit Media Hub" data-ar="زيارة المركز الإعلامي">Visit Media Hub</span>
-                    </a>
-                </div>
             </div>
         </section>
-        <!-- Mega Projects Section -->
-        <section id="projects" class="py-24 bg-brand-dark">
-            <div class="max-w-screen-xl mx-auto px-6">
-                <div class="text-center mb-16 scroll-reveal">
-                    <h2 class="text-4xl font-bold text-white mb-4" data-en="Chronicling the Future: Vision 2030" data-ar="تأريخ المستقبل: رؤية 2030">Chronicling the Future: Vision 2030</h2>
-                    <p class="text-lg text-brand-light max-w-3xl mx-auto" data-en="Monitoring the global media pulse of the Kingdom's groundbreaking mega-projects." data-ar="نرصد النبض الإعلامي العالمي لمشاريع المملكة العملاقة التي ترسم ملامح المستقبل.">
-                        Monitoring the global media pulse of the Kingdom's groundbreaking mega-projects.
-                    </p>
-                </div>
-                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-                    <!-- NEOM Card -->
-                    <div class="scroll-reveal group relative rounded-2xl overflow-hidden h-96">
-                        <img src="project-neom.jpg" alt="NEOM" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
-                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
-                        <div class="absolute bottom-0 left-0 p-6">
-                            <h3 class="text-3xl font-bold text-white" data-en="NEOM & The Line" data-ar="نيوم وذا لاين">NEOM & The Line</h3>
-                            <p class="text-brand-light opacity-90 mt-2" data-en="The land of the future, a new vision for civilization." data-ar="أرض المستقبل، ورؤية جديدة للحضارة.">The land of the future, a new vision for civilization.</p>
-                        </div>
-                    </div>
-                    <!-- Diriyah Gate Card -->
-                    <div class="scroll-reveal group relative rounded-2xl overflow-hidden h-96">
-                        <img src="project-diriyah.jpg" alt="Diriyah Gate" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
-                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
-                        <div class="absolute bottom-0 left-0 p-6">
-                            <h3 class="text-3xl font-bold text-white" data-en="Diriyah Gate" data-ar="بوابة الدرعية">Diriyah Gate</h3>
-                            <p class="text-brand-light opacity-90 mt-2" data-en="The Kingdom's historical and cultural heart, reborn." data-ar="قلب المملكة التاريخي والثقافي يولد من جديد.">The Kingdom's historical and cultural heart, reborn.</p>
                         </div>
-                    </div>
-                    <!-- Red Sea Project Card -->
-                    <div class="scroll-reveal group relative rounded-2xl overflow-hidden h-96">
-                        <img src="project-redsea.jpg" alt="Red Sea Project" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
-                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
-                        <div class="absolute bottom-0 left-0 p-6">
-                            <h3 class="text-3xl font-bold text-white" data-en="Red Sea Global" data-ar="البحر الأحمر الدولية">Red Sea Global</h3>
-                            <p class="text-brand-light opacity-90 mt-2" data-en="Pioneering regenerative tourism on a global scale." data-ar="ريادة السياحة المتجددة عل�� نطاق عالمي.">Pioneering regenerative tourism on a global scale.</p>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
-        <!-- AI Core Section -->
-        <section id="ai" class="py-24 bg-brand-dark/50">
-            <div class="max-w-screen-xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">
-                <div class="scroll-reveal">
-                    <span class="text-brand-blue font-bold" data-en="NABAD AI CORE" data-ar="قلب نَبَض الذكي">NABAD AI CORE</span>
-                    <h2 class="text-4xl font-bold text-white mt-2 mb-6" data-en="Understanding the Narrative, in Real-Time" data-ar="فهم السرد الإعلامي، في الزمن الفعلي">Understanding the Narrative, in Real-Time</h2>
-                    <p class="text-lg text-brand-light mb-8" data-en="Our proprietary AI models go beyond keywords. They understand context, sentiment, and influence, providing unparalleled insights into how Saudi Arabia's story is being told and perceived globally." data-ar="نماذجنا الخاصة للذكاء الاصطناعي تتجاوز الكلمات المفتاحية. هي تفهم السياق، وتحلل المشاعر، وتقيس التأثير، لتقدم رؤى لا مثيل لها حول كيفية سرد قصة المملكة وتلقيها عالمياً.">
-                        Our proprietary AI models go beyond keywords. They understand context, sentiment, and influence, providing unparalleled insights into how Saudi Arabia's story is being told and perceived globally.
-                    </p>
-                    <div class="space-y-4">
-                        <div class="flex items-center space-x-4">
-                            <i class="fas fa-brain text-2xl text-brand-blue"></i>
-                            <span class="text-xl" data-en="Contextual Sentiment Analysis" data-ar="تحليل المشاعر السياقي">Contextual Sentiment Analysis</span>
-                        </div>
-                        <div class="flex items-center space-x-4">
-                            <i class="fas fa-project-diagram text-2xl text-brand-blue"></i>
-                            <span class="text-xl" data-en="Narrative Spread & Virality Tracking" data-ar="تتبع انتشار السرد والانتشار الفيروسي">Narrative Spread & Virality Tracking</span>
-                        </div>
-                        <div class="flex items-center space-x-4">
-                            <i class="fas fa-shield-alt text-2xl text-brand-blue"></i>
-                            <span class="text-xl" data-en="Misinformation & Disinformation Detection" data-ar="كشف المعلومات المضللة والخاطئة">Misinformation & Disinformation Detection</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="scroll-reveal">
-                    <div class="glass-card rounded-2xl p-8">
-                        <h4 class="text-xl font-bold text-white mb-4" data-en="Live AI Analysis Simulation" data-ar="محاكاة لتحليل الذكاء الاصطناعي المباشر">Live AI Analysis Simulation</h4>
-                        <div class="bg-brand-dark rounded-lg p-4 mb-6 min-h-[150px]">
-                            <p class="text-sm text-brand-light" data-en="<Article Text> Saudi Arabia's Vision 2030 is an ambitious blueprint for economic diversification, global engagement, and enhanced quality of life. Projects like NEOM are set to redefine urban living..." data-ar="<نص المقال> رؤية السعودية 2030 هي خارطة طريق طموحة للتنويع الاقتصادي، والانفتاح العالمي، وتحسين جودة الحياة. مشاريع مثل نيوم تستعد لإعادة تعريف الحياة الحضرية...">
-                                &lt;Article Text&gt; Saudi Arabia's Vision 2030 is an ambitious blueprint for economic diversification, global engagement, and enhanced quality of life. Projects like NEOM are set to redefine urban living...
-                            </p>
-                        </div>
-                        <div class="grid grid-cols-2 gap-4 text-center">
-                            <div>
-                                <div class="text-3xl font-bold text-green-400">96.8%</div>
-                                <div class="text-sm text-brand-light" data-en="Positive Sentiment" data-ar="مشاعر إيجابية">Positive Sentiment</div>
                             </div>
-                            <div>
-                                <div class="text-3xl font-bold text-yellow-400">1.2%</div>
-                                <div class="text-sm text-brand-light" data-en="Misinformation Risk" data-ar="خطر التضليل">Misinformation Risk</div>
                             </div>
                         </div>
-                        <div class="mt-6">
-                            <h5 class="font-bold text-white mb-2" data-en="Key Themes Detected:" data-ar="المواضيع الرئيسية المكتشفة:">Key Themes Detected:</h5>
-                            <div class="flex flex-wrap gap-2">
-                                <span class="bg-brand-blue/50 text-white text-xs px-3 py-1 rounded-full">Vision 2030</span>
-                                <span class="bg-brand-blue/50 text-white text-xs px-3 py-1 rounded-full">NEOM</span>
-                                <span class="bg-brand-blue/50 text-white text-xs px-3 py-1 rounded-full" data-en="Economy" data-ar="الاقتصاد">Economy</span>
-                                <span class="bg-brand-blue/50 text-white text-xs px-3 py-1 rounded-full" data-en="Future" data-ar="المستقبل">Future</span>
                             </div>
                         </div>
                     </div>
@@ -229,17 +134,17 @@
             </div>
         </section>
-        <!-- National Pride Section -->
-        <section id="anthem" class="py-24">
-             <div class="max-w-screen-xl mx-auto px-6 text-center">
-                <div class="scroll-reveal">
-                    <h2 class="text-4xl font-bold text-white mb-4" data-en="The Soul of the Nation" data-ar="روح الوطن">The Soul of the Nation</h2>
-                    <p class="text-lg text-brand-light max-w-3xl mx-auto mb-12" data-en="A story of heritage, pride, and a future built on a glorious past." data-ar="قصة إرث، وفخر، ومستقبل يُبنى على ماضٍ مجيد.">
-                        A story of heritage, pride, and a future built on a glorious past.
-                    </p>
-                    <div class="aspect-video max-w-4xl mx-auto rounded-2xl overflow-hidden shadow-2xl shadow-brand-blue/20">
-                        <iframe class="w-full h-full" src="https://www.youtube.com/embed/IzogBJpcEWg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-                    </div>
                 </div>
             </div>
         </section>
@@ -247,61 +152,56 @@
     </main>
     <!-- Footer -->
-    <footer class="py-16 bg-brand-dark/70 border-t border-brand-gray/50">
-        <div class="max-w-screen-xl mx-auto px-6">
-            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8 text-center md:text-start">
-                <div>
-                    <div class="flex items-center justify-center md:justify-start space-x-4 mb-4">
-                        <i class="fas fa-wave-square text-brand-blue text-3xl"></i>
-                        <h1 class="text-2xl font-bold text-white" data-en="NABAD" data-ar="نَبَض">NABAD</h1>
-                    </div>
-                    <p class="text-brand-light" data-en="The pulse of the nation's story." data-ar="نبض قصة وطن.">The pulse of the nation's story.</p>
-                </div>
-                <div>
-                    <h4 class="text-xl font-bold text-white mb-4" data-en="Navigate" data-ar="تنقل">Navigate</h4>
-                    <ul class="space-y-2">
-                        <li><a href="index.html" class="text-brand-light hover:text-brand-blue transition-colors" data-en="Home" data-ar="الرئيسية">Home</a></li>
-                        <li><a href="dashboard.html" class="text-brand-light hover:text-brand-blue transition-colors" data-en="Dashboards" data-ar="لوحات التحكم">Dashboards</a></li>
-                        <li><a href="video.html" class="text-brand-light hover:text-brand-blue transition-colors" data-en="Media Hub" data-ar="المركز الإعلامي">Media Hub</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="text-xl font-bold text-white mb-4" data-en="Core Features" data-ar="الميزات الأساسية">Core Features</h4>
-                    <ul class="space-y-2">
-                        <li><span class="text-brand-light" data-en="Geospatial Analysis" data-ar="التحليل الجغرافي">Geospatial Analysis</span></li>
-                        <li><span class="text-brand-light" data-en="Mega-Project Tracking" data-ar="تتبع المشاريع العملاقة">Mega-Project Tracking</span></li>
-                        <li><span class="text-brand-light" data-en="AI Sentiment Engine" data-ar="محرك المشاعر الذكي">AI Sentiment Engine</span></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="text-xl font-bold text-white mb-4" data-en="Connect" data-ar="تواصل">Connect</h4>
-                    <div class="flex justify-center md:justify-start space-x-4 text-2xl">
-                        <a href="#" class="text-brand-light hover:text-brand-blue transition-colors"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-brand-light hover:text-brand-blue transition-colors"><i class="fab fa-linkedin"></i></a>
-                        <a href="#" class="text-brand-light hover:text-brand-blue transition-colors"><i class="fab fa-youtube"></i></a>
-                    </div>
-                </div>
-            </div>
-            <div class="border-t border-brand-gray/50 pt-8 text-center text-brand-light/70">
-                <p>&copy; <span id="year"></span> NABAD National Media Intelligence Platform. All Rights Reserved.</p>
-            </div>
         </div>
     </footer>
-    <script src="translations.js"></script>
-    <script src="script.js"></script>
-  <!-- Background Music Player (Hidden) -->
-    <div id="youtube-player" class="hidden"></div>
-    <!-- Floating Music Control Button -->
-    <div class="fixed bottom-6 left-6 z-50">
-        <button id="music-toggle" class="w-14 h-14 bg-brand-dark/50 glass-card text-white rounded-full shadow-lg hover:border-brand-blue border-2 border-transparent transition-all flex items-center justify-center" title="Toggle Background Music">
-            <i class="fas fa-music text-xl"></i>
-        </button>
-    </div>
-    <!-- Loading YouTube API -->
-    <script src="https://www.youtube.com/iframe_api"></script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title data-en="News Analysis | Rasd Intelligence Platform" data-ar="تحليل خبر | منصة رصد الذكية">تحليل خبر | منصة رصد الذكية</title>
     <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
         tailwind.config = {
             theme: {
                 extend: {
+                    colors: { 'saudi-green': '#006C35', 'saudi-gold': '#C9A646', 'saudi-dark': '#1A2E44' },
+                    fontFamily: { 'tajawal': ['Tajawal', 'sans-serif'] }
                 }
             }
         }
     </script>
     <style>
+        body { font-family: 'Tajawal', sans-serif; background-color: #f4f7f6; }
+        .gradient-bg { background: linear-gradient(135deg, #006C35 0%, #004d26 100%); }
+        .gold-gradient { background: linear-gradient(135deg, #C9A646 0%, #b8941e 100%); }
+        .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
+        .rtl { direction: rtl; } .ltr { direction: ltr; }
     </style>
 </head>
+<body class="font-tajawal min-h-screen">
     <!-- Header -->
+    <header class="sticky top-0 w-full bg-white/95 backdrop-blur-md z-50 shadow-sm">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-16">
             <div class="flex items-center space-x-4">
+                <img src="./spa-logo-white.png" alt="SPA Logo" class="h-8" loading="lazy">
+                <div class="text-3xl font-bold text-saudi-green" data-en="Rasd" data-ar="رصد">رصد</div>
             </div>
+            <button onclick="toggleLanguage()" class="flex items-center space-x-2 px-3 py-2 rounded-lg border-2 border-saudi-green text-saudi-green hover:bg-saudi-green hover:text-white transition-all">
+                <i class="fas fa-globe"></i>
+                <span id="lang-toggle">العربية</span>
+            </button>
+        </div>
     </header>
     <main>
+        <!-- SECTION 1: Platform Description -->
+        <section class="py-20 bg-white">
+            <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+                <h1 class="text-4xl md:text-5xl font-bold text-saudi-dark mb-6" data-en="Welcome to Rasd: The Intelligent Media Analytics Platform" data-ar="مرحبًا بك في رصد: منصة التحليلات الإعلامية الذكية">Welcome to Rasd: The Intelligent Media Analytics Platform</h1>
+                <p class="text-xl text-gray-700 leading-relaxed max-w-4xl mx-auto" data-en="Rasd is an integrated smart platform that employs artificial intelligence to analyze the media impact of SPA news. We track the spread of news and images, detect paraphrasing, analyze sentiment, and provide data-driven insights to enhance the agency's role as a primary source of information." data-ar="'رصد' هي منصة ذكية ومتكاملة توظف تقنيات الذكاء الاصطناعي لتحليل الأثر الإعلامي لأخبار وكالة الأنباء السعودية. نقوم بتتبع انتشار الأخبار والصور، اكتشاف إعادة الصياغة، تحليل المشاعر، وتقديم رؤى قائمة على البيانات لتعزيز دور الوكالة كمصدر رئيسي للمعلومة.">
+                    Rasd is an integrated smart platform that employs artificial intelligence to analyze the media impact of SPA news. We track the spread of news and images, detect paraphrasing, analyze sentiment, and provide data-driven insights to enhance the agency's role as a primary source of information.
                 </p>
             </div>
         </section>
+        <!-- SECTION 2: The News Prototype -->
+        <section class="gradient-bg text-white py-16">
+            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="bg-white/10 backdrop-blur-sm rounded-3xl p-8">
+                    <div class="grid lg:grid-cols-3 gap-8 items-center text-left">
+                        <div class="lg:col-span-1">
+                            <img src="./news.png" alt="AI Healthcare Initiative" class="w-full h-auto object-cover rounded-2xl shadow-lg" loading="lazy">
                         </div>
+                        <div class="lg:col-span-2">
+                            <div class="mb-4">
+                                <span class="bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold" data-en="BREAKING NEWS" data-ar="خبر عاجل">BREAKING NEWS</span>
+                            </div>
+                            <h2 class="text-3xl font-bold mb-4" data-en="Saudi Arabia Launches Revolutionary AI Healthcare Initiative" data-ar="المملكة تطلق مبادرة ثورية للذكاء الاصطناعي في الرعاية الصحية">Saudi Arabia Launches Revolutionary AI Healthcare Initiative</h2>
+                            <p class="opacity-90 leading-relaxed" data-en="The Kingdom announces a groundbreaking $5 billion investment in AI-powered healthcare systems, aimed at revolutionizing medical services across all regions and enhancing patient care through cutting-edge technology. This initiative positions Saudi Arabia as a leader in innovative health solutions." data-ar="تعلن المملكة عن استثمار رائد بقيمة 5 مليارات دولار في أنظمة الرعاية الصحية المدعومة بالذكاء الاصطناعي، بهدف إحداث ثورة في الخدمات الطبية في جميع المناطق وتعزيز رعاية المرضى من خلال التكنولوجيا المتطورة. هذه المبادرة تضع المملكة في صدارة حلول الرعاية الصحية المبتكرة.">
+                                The Kingdom announces a groundbreaking $5 billion investment in AI-powered healthcare systems, aimed at revolutionizing medical services across all regions and enhancing patient care through cutting-edge technology. This initiative positions Saudi Arabia as a leader in innovative health solutions.
+                            </p>
+                            <!-- Mini Dashboard for THIS News -->
+                            <div class="mt-8 p-6 bg-white/20 rounded-2xl shadow-inner">
+                                <h3 class="text-xl font-bold mb-4" data-en="Quick Impact Snapshot for this News" data-ar="نظرة سريعة على تأثير هذا الخبر">Quick Impact Snapshot for this News</h3>
+                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
+                                    <div>
+                                        <p class="text-3xl font-bold text-saudi-gold" data-en="94.3%" data-ar="94.3%">94.3%</p>
+                                        <p class="text-sm opacity-80" data-en="Positive Sentiment" data-ar="مشاعر إيجابية">Positive Sentiment</p>
+                                    </div>
+                                    <div>
+                                        <p class="text-3xl font-bold text-saudi-gold" data-en="2.8M+" data-ar="2.8 مليون+">2.8M+</p>
+                                        <p class="text-sm opacity-80" data-en="Global Reach" data-ar="وصول عالمي">Global Reach</p>
+                                    </div>
+                                    <div>
+                                        <p class="text-3xl font-bold text-saudi-gold" data-en="89 Countries" data-ar="89 دولة">89 Countries</p>
+                                        <p class="text-sm opacity-80" data-en="Media Coverage" data-ar="تغطية إعلامية">Media Coverage</p>
+                                    </div>
+                                </div>
+                                <p class="text-sm opacity-90 mt-6 text-center" data-en="The detailed intelligence dashboards, accessible via the button below, provide in-depth analysis specific to this news story." data-ar="لوحات التحليل الذكية المفصلة، المتوفرة عبر الزر أدناه، تقدم تحليلاً معمقًا خاصًا بهذا الخبر تحديداً.">The detailed intelligence dashboards, accessible via the button below, provide in-depth analysis specific to this news story.</p>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
+        <!-- SECTION 3: Explore All Dashboards Button -->
+        <section class="py-12 bg-white">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+                <a href="full-dashboard.html" class="inline-flex items-center space-x-3 px-8 py-4 gold-gradient text-saudi-dark font-bold rounded-full hover:scale-105 transition-transform text-lg shadow-lg">
+                    <i class="fas fa-chart-pie"></i>
+                    <span data-en="Explore All Intelligence Dashboards" data-ar="استكشف جميع لوحات الذكاء">Explore All Intelligence Dashboards</span>
+                </a>
+            </div>
+        </section>
+        <!-- SECTION 4: Global Trends with Plot -->
+        <section class="py-20 bg-gray-100">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <h2 class="text-3xl font-bold text-saudi-dark text-center mb-6" data-en="Global Trends: Current Hot Topics" data-ar="الاتجاهات العالمية: المواضيع الرائجة حالياً">Global Trends: Current Hot Topics</h2>
+                <p class="text-lg text-gray-600 text-center mb-12" data-en="Monitor trending topics and view their global impact across different regions and media platforms, providing insights into public interest." data-ar="راقب المواضيع الرائجة وشاهد مدى تأثيرها العالمي عبر المناطق والمنصات الإعلامية المختلفة، مما يوفر رؤى قي��ة حول اهتمام الجمهور.">Monitor trending topics and view their global impact across different regions and media platforms, providing insights into public interest.</p>
+                <div class="bg-white p-8 rounded-3xl shadow-lg">
+                    <div class="space-y-6">
+                        <div class="grid grid-cols-4 items-center gap-4">
+                            <span class="font-bold text-saudi-dark text-right" data-en="AI in Healthcare" data-ar="الذكاء الاصطناعي بالصحة">AI in Healthcare</span>
+                            <div class="col-span-3 bg-gray-200 rounded-full h-6">
+                                <div class="bg-saudi-green h-6 rounded-full text-white text-sm flex items-center px-3" style="width: 92%;" data-en="Trending Up" data-ar="في صعود">Trending Up</div>
                             </div>
+                        </div>
+                        <div class="grid grid-cols-4 items-center gap-4">
+                            <span class="font-bold text-saudi-dark text-right" data-en="Vision 2030" data-ar="رؤية 2030">Vision 2030</span>
+                            <div class="col-span-3 bg-gray-200 rounded-full h-6">
+                                <div class="bg-saudi-gold h-6 rounded-full text-saudi-dark text-sm flex items-center px-3" style="width: 85%;" data-en="High Engagement" data-ar="تفاعل عالي">High Engagement</div>
                             </div>
                         </div>
+                        <div class="grid grid-cols-4 items-center gap-4">
+                            <span class="font-bold text-saudi-dark text-right" data-en="Digital Health" data-ar="الصحة الرقمية">Digital Health</span>
+                            <div class="col-span-3 bg-gray-200 rounded-full h-6">
+                                <div class="bg-blue-500 h-6 rounded-full text-white text-sm flex items-center px-3" style="width: 78%;" data-en="Stable Growth" data-ar="نمو مستقر">Stable Growth</div>
                             </div>
                         </div>
                     </div>
             </div>
         </section>
+        <!-- SECTION 5: Search for a Specific News Impact -->
+        <section class="py-20 bg-gray-50">
+            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+                <h2 class="text-3xl font-bold text-saudi-dark mb-4" data-en="Search for a Specific News Impact" data-ar="ابحث عن تأثير خبر معين">Search for a Specific News Impact</h2>
+                <p class="text-lg text-gray-600 mb-8 leading-relaxed" data-en="Enter any news headline, keywords, or topics to instantly analyze their global media impact, track their spread across different platforms, and access comprehensive analytical dashboards with detailed insights and metrics." data-ar="أدخل أي عنوان إخباري أو كلمات مفتاحية أو مواضيع لتحليل تأثيرها الإعلامي العالمي فورًا، وتتبع انتشارها عبر المنصات المختلفة، والوصول إلى لوحات تحليلية شاملة مع رؤى ومقاييس مفصلة.">Enter any news headline, keywords, or topics to instantly analyze their global media impact, track their spread across different platforms, and access comprehensive analytical dashboards with detailed insights and metrics.</p>
+                <div class="flex flex-col sm:flex-row gap-4 max-w-2xl mx-auto">
+                    <input type="text" class="w-full px-5 py-4 border border-gray-300 rounded-full focus:border-saudi-green focus:outline-none focus:ring-2 focus:ring-saudi-green/50" data-en-placeholder="Enter news headline here..." data-ar-placeholder="أدخل عنوان الخبر هنا..." placeholder="Enter news headline here...">
+                    <button class="px-8 py-4 gradient-bg text-white font-bold rounded-full hover:opacity-90 transition-opacity">
+                        <i class="fas fa-search mr-2"></i>
+                        <span data-en="Analyze Impact" data-ar="تحليل التأثير">Analyze Impact</span>
+                    </button>
                 </div>
             </div>
         </section>
     </main>
     <!-- Footer -->
+    <footer class="gradient-bg text-white py-10">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <p class="opacity-80" data-en="Rasd Intelligence Platform © 2025" data-ar="منصة رصد الذكية © 2025">Rasd Intelligence Platform © 2025</p>
         </div>
     </footer>
+    <script>
+        let currentLanguage = 'en';
+        function toggleLanguage() {
+            currentLanguage = currentLanguage === 'en' ? 'ar' : 'en';
+            updatePageLanguage();
+        }
+        function updatePageLanguage() {
+            const isArabic = currentLanguage === 'ar';
+            const htmlEl = document.getElementById('html');
+            htmlEl.setAttribute('lang', currentLanguage);
+            htmlEl.setAttribute('dir', isArabic ? 'rtl' : 'ltr');
+            document.body.classList.toggle('rtl', isArabic);
+            document.body.classList.toggle('ltr', !isArabic);
+            document.getElementById('lang-toggle').textContent = isArabic ? 'English' : 'العربية';
+            // Update text content for elements with data-en attributes
+            document.querySelectorAll('[data-en]').forEach(el => {
+                const text = el.getAttribute(`data-${currentLanguage}`);
+                if (text) {
+                    el.textContent = text;
+                }
+            });
+            // Update placeholder text for input fields
+            document.querySelectorAll('[data-en-placeholder]').forEach(el => {
+                const placeholderText = el.getAttribute(`data-${currentLanguage}-placeholder`);
+                if (placeholderText) {
+                    el.placeholder = placeholderText;
+                }
+            });
+            // Update title element separately
+            document.querySelectorAll('title[data-en]').forEach(el => {
+                const text = el.getAttribute(`data-${currentLanguage}`);
+                if (text) {
+                    el.textContent = text;
+                }
+            });
+        }
+        document.addEventListener('DOMContentLoaded', updatePageLanguage);
+    </script>
 </body>
 </html>