Spaces:

huggingchat
/

chat-ui

Running

App Files Files Community

766

Create TIGERS-KAS

#757

by Maram5522 - opened Aug 16, 2025

base: refs/heads/main

←

from: refs/pr/757

Discussion Files changed

+725

-0

Files changed (1) hide show

TIGERS-KAS +725 -0

TIGERS-KAS ADDED Viewed

	@@ -0,0 +1,725 @@

+<!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>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        turquoise: {
+                            100: '#e6fffa',
+                            200: '#b2f5ea',
+                            300: '#81e6d9',
+                            400: '#4fd1c5',
+                            500: '#38b2ac',
+                            600: '#319795',
+                            700: '#2c7a7b',
+                            800: '#285e61',
+                            900: '#234e52',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
+        body {
+            font-family: 'Tajawal', sans-serif;
+        }
+        .chat-bubble {
+            border-radius: 20px 20px 0 20px;
+        }
+        .user-bubble {
+            border-radius: 20px 20px 20px 0;
+        }
+        .tiger-pattern {
+            background-image: radial-gradient(circle, rgba(56, 178, 172, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(56, 178, 172, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(56, 178, 172, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(56, 178, 172, 0); }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800">
+    <!-- Header -->
+    <header class="bg-white shadow-md">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2 space-x-reverse">
+                <div class="w-12 h-12 bg-turquoise-500 rounded-full flex items-center justify-center text-white text-2xl">
+                    <i class="fas fa-paw"></i>
+                </div>
+                <h1 class="text-2xl font-bold text-turquoise-700">النمور السعودية</h1>
+            </div>
+            <nav class="hidden md:flex space-x-6 space-x-reverse">
+                <a href="#" class="text-turquoise-700 font-medium hover:text-turquoise-500">الرئيسية</a>
+                <a href="#" class="text-gray-600 hover:text-turquoise-500">المتاجر</a>
+                <a href="#" class="text-gray-600 hover:text-turquoise-500">المصانع</a>
+                <a href="#" class="text-gray-600 hover:text-turquoise-500">المنتجات</a>
+                <a href="#" class="text-gray-600 hover:text-turquoise-500">التقارير</a>
+                <a href="#" class="text-gray-600 hover:text-turquoise-500">الدعم</a>
+            </nav>
+            <div class="flex items-center space-x-3 space-x-reverse">
+                <button class="md:hidden text-gray-600">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+                <button class="bg-turquoise-500 hover:bg-turquoise-600 text-white px-4 py-2 rounded-lg">
+                    تسجيل الدخول
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="bg-gradient-to-r from-turquoise-50 to-white tiger-pattern">
+        <div class="container mx-auto px-4 py-16 md:py-24 flex flex-col md:flex-row items-center">
+            <div class="md:w-1/2 mb-10 md:mb-0">
+                <h2 class="text-4xl md:text-5xl font-bold text-turquoise-800 mb-4">منظومة <span class="text-turquoise-600">النمور السعودية</span> المتكاملة</h2>
+                <p class="text-lg text-gray-600 mb-8 leading-relaxed">
+                    نظام متكامل لإدارة المتاجر والمصانع السعودية بأعلى معايير الجودة والكفاءة. نوفر لك جميع الأدوات التي تحتاجها لإدارة عملياتك بسلاسة واحترافية.
+                </p>
+                <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 space-x-reverse">
+                    <button class="bg-turquoise-600 hover:bg-turquoise-700 text-white px-6 py-3 rounded-lg font-medium shadow-lg transition duration-300">
+                        ابدأ الآن مجانًا
+                    </button>
+                    <button class="border border-turquoise-600 text-turquoise-600 hover:bg-turquoise-50 px-6 py-3 rounded-lg font-medium transition duration-300">
+                        شاهد الفيديو التعريفي
+                    </button>
+                </div>
+            </div>
+            <div class="md:w-1/2 relative">
+                <div class="relative max-w-md mx-auto">
+                    <div class="absolute -top-10 -right-10 w-32 h-32 bg-turquoise-200 rounded-full opacity-30"></div>
+                    <div class="absolute -bottom-10 -left-10 w-40 h-40 bg-turquoise-300 rounded-full opacity-20"></div>
+                    <div class="relative bg-white rounded-xl shadow-xl overflow-hidden border border-turquoise-100">
+                        <div class="bg-turquoise-500 text-white p-4 flex items-center">
+                            <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-turquoise-500 mr-3">
+                                <i class="fas fa-robot"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-bold">نمر المساعد</h3>
+                                <p class="text-xs opacity-80">متصل - جاهز للمساعدة</p>
+                            </div>
+                        </div>
+                        <div class="p-4 h-64 overflow-y-auto">
+                            <div class="flex justify-end mb-3">
+                                <div class="bg-turquoise-100 text-gray-800 p-3 max-w-xs chat-bubble">
+                                    مرحبا! أنا نمر، كيف يمكنني مساعدتك اليوم؟
+                                </div>
+                            </div>
+                            <div class="flex justify-start mb-3">
+                                <div class="bg-gray-100 text-gray-800 p-3 max-w-xs user-bubble">
+                                    أريد معرفة المزيد عن نظام إدارة المخزون
+                                </div>
+                            </div>
+                            <div class="flex justify-end mb-3">
+                                <div class="bg-turquoise-100 text-gray-800 p-3 max-w-xs chat-bubble">
+                                    بالطبع! نظامنا يوفر إدارة مخزون ذكية مع تنبيهات عند نفاذ المنتجات وتقارير مفصلة.
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 border-t border-gray-200 flex">
+                            <input type="text" placeholder="اكتب رسالتك..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-turquoise-500 focus:border-transparent">
+                            <button class="bg-turquoise-500 text-white px-4 rounded-r-lg hover:bg-turquoise-600">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl font-bold text-turquoise-800 mb-4">مميزات منظومة النمور السعودية</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">نقدم مجموعة متكاملة من الحلول الذكية لإدارة متاجرك ومصانعك بكفاءة عالية</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
+                    <div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
+                        <i class="fas fa-store text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-turquoise-700 mb-3">إدارة المتاجر</h3>
+                    <p class="text-gray-600">
+                        نظام متكامل لإدارة جميع فروع متجرك، متابعة المبيعات، إدارة الموظفين، وتقارير أداء الفروع.
+                    </p>
+                </div>
+                <!-- Feature 2 -->
+                <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
+                    <div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
+                        <i class="fas fa-industry text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-turquoise-700 mb-3">إدارة المصانع</h3>
+                    <p class="text-gray-600">
+                        تحكم كامل في عمليات الإنتاج، إدارة خطوط التصنيع، متابعة الجودة، وحساب تكاليف الإنتاج بدقة.
+                    </p>
+                </div>
+                <!-- Feature 3 -->
+                <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
+                    <div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
+                        <i class="fas fa-boxes text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-turquoise-700 mb-3">إدارة المخزون</h3>
+                    <p class="text-gray-600">
+                        نظام مخزون ذكي مع تنبيهات تلقائية، إدارة المشتريات، وتحليل معدل دوران المخزون.
+                    </p>
+                </div>
+                <!-- Feature 4 -->
+                <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
+                    <div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
+                        <i class="fas fa-chart-line text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-turquoise-700 mb-3">التقارير والتحليلات</h3>
+                    <p class="text-gray-600">
+                        لوحات تحكم تفاعلية مع تقارير مخصصة تساعدك في اتخاذ القرارات بناءً على بيانات دقيقة.
+                    </p>
+                </div>
+                <!-- Feature 5 -->
+                <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
+                    <div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
+                        <i class="fas fa-robot text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-turquoise-700 mb-3">نمر المساعد الذكي</h3>
+                    <p class="text-gray-600">
+                        مساعد ذكي يعمل بالذكاء الاصطناعي لمساعدتك في إدارة عملياتك والإجابة على استفساراتك.
+                    </p>
+                </div>
+                <!-- Feature 6 -->
+                <div class="bg-gray-50 rounded-xl p-6 border border-gray-200 hover:border-turquoise-300 transition duration-300 hover:shadow-lg">
+                    <div class="w-14 h-14 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600 mb-4">
+                        <i class="fas fa-mobile-alt text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-turquoise-700 mb-3">تطبيق جوال</h3>
+                    <p class="text-gray-600">
+                        إدارة عملك من أي مكان عبر تطبيقاتنا الذكية المتوافقة مع جميع الأجهزة المحمولة.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Nimr AI Assistant Section -->
+    <section class="py-16 bg-gradient-to-b from-turquoise-50 to-white">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
+                    <div class="relative inline-block">
+                        <div class="absolute -top-5 -right-5 w-20 h-20 bg-turquoise-200 rounded-full opacity-30"></div>
+                        <div class="relative bg-white p-2 rounded-full shadow-xl pulse">
+                            <img src="https://placehold.co/300x300/e5f9f7/38b2ac?text=نمر" alt="نمر المساعد" class="w-64 h-64 rounded-full border-4 border-turquoise-300 object-cover">
+                        </div>
+                    </div>
+                </div>
+                <div class="md:w-1/2">
+                    <h2 class="text-3xl font-bold text-turquoise-800 mb-4">نمر - المساعد الذكي</h2>
+                    <p class="text-gray-600 mb-6 leading-relaxed">
+                        مساعدك الشخصي الذي يعمل بالذكاء الاصطناعي لمساعدتك في إدارة متجرك أو مصنعك. يمكنك سؤاله عن أي شيء متعلق بعملك وسيقوم بتقديم الإجابات الفورية أو تنفيذ المهام نيابة عنك.
+                    </p>
+                    <div class="space-y-4">
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="w-8 h-8 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600">
+                                    <i class="fas fa-check"></i>
+                                </div>
+                            </div>
+                            <div class="mr-3">
+                                <p class="text-gray-800 font-medium">إجابة على استفساراتك فورًا</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="w-8 h-8 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600">
+                                    <i class="fas fa-check"></i>
+                                </div>
+                            </div>
+                            <div class="mr-3">
+                                <p class="text-gray-800 font-medium">تنبيهات ذكية لأهم الأمور</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="w-8 h-8 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600">
+                                    <i class="fas fa-check"></i>
+                                </div>
+                            </div>
+                            <div class="mr-3">
+                                <p class="text-gray-800 font-medium">تنفيذ مهام متقدمة بأوامر صوتية</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mt-1">
+                                <div class="w-8 h-8 bg-turquoise-100 rounded-full flex items-center justify-center text-turquoise-600">
+                                    <i class="fas fa-check"></i>
+                                </div>
+                            </div>
+                            <div class="mr-3">
+                                <p class="text-gray-800 font-medium">تعلم مستمر ليتكيف مع احتياجات عملك</p>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="mt-8 bg-turquoise-600 hover:bg-turquoise-700 text-white px-6 py-3 rounded-lg font-medium shadow-lg transition duration-300 flex items-center">
+                        <i class="fas fa-comment-alt ml-2"></i>
+                        تحدث مع نمر الآن
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-turquoise-800 mb-4">آراء عملائنا</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">انضم الآلاف من أصحاب المتاجر والمصانع إلى منظومة النمور السعودية</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Testimonial 1 -->
+                <div class="bg-gray-50 rounded-xl p-6 border border-gray-200">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-turquoise-100 flex items-center justify-center text-turquoise-600 font-bold text-xl">
+                            م
+                        </div>
+                        <div class="mr-3">
+                            <h4 class="font-bold">محمد العتيبي</h4>
+                            <p class="text-sm text-gray-500">مالك مصنع أثاث</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 mb-4">
+                        "منظومة النمور السعودية غيرت طريقة إدارتنا للمصنع بالكامل. أصبحت لدينا رؤية واضحة لكل العمليات والتكاليف."
+                    </p>
+                    <div class="flex text-turquoise-500">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+                <!-- Testimonial 2 -->
+                <div class="bg-gray-50 rounded-xl p-6 border border-gray-200">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-turquoise-100 flex items-center justify-center text-turquoise-600 font-bold text-xl">
+                            س
+                        </div>
+                        <div class="mr-3">
+                            <h4 class="font-bold">سارة القحطاني</h4>
+                            <p class="text-sm text-gray-500">مالكة سلسلة متاجر إلكترونية</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 mb-4">
+                        "خاصية نمر المساعد وفرت علينا ساعات من العمل يوميًا. يمكننا الآن الحصول على أي معلومة أو تقرير بأمر صوتي بسيط."
+                    </p>
+                    <div class="flex text-turquoise-500">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star-half-alt"></i>
+                    </div>
+                </div>
+                <!-- Testimonial 3 -->
+                <div class="bg-gray-50 rounded-xl p-6 border border-gray-200">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-turquoise-100 flex items-center justify-center text-turquoise-600 font-bold text-xl">
+                            خ
+                        </div>
+                        <div class="mr-3">
+                            <h4 class="font-bold">خالد الحربي</h4>
+                            <p class="text-sm text-gray-500">مدير سلسلة متاجر مواد غذائية</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 mb-4">
+                        "التكامل بين إدارة المخزون والمبيعات في المنظومة وفر علينا الكثير من الأخطاء البشربة وزاد من كفاءة عملياتنا."
+                    </p>
+                    <div class="flex text-turquoise-500">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Pricing -->
+    <section class="py-16 bg-gradient-to-b from-white to-turquoise-50">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-turquoise-800 mb-4">باقات الأسعار</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">اختر الباقة التي تناسب حجم عملك</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+                <!-- Basic Plan -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-turquoise-200 transform hover:scale-105 transition duration-300">
+                    <div class="bg-turquoise-100 p-6 text-center">
+                        <h3 class="text-xl font-bold text-turquoise-800">الباقة الأساسية</h3>
+                        <div class="mt-4">
+                            <span class="text-4xl font-bold text-turquoise-700">199</span>
+                            <span class="text-gray-600">ريال/شهر</span>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <ul class="space-y-3 mb-6">
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>إدارة متجر واحد</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>حتى 5 مستخدمين</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>إدارة المخزون الأساسية</span>
+                            </li>
+                            <li class="flex items-center text-gray-400">
+                                <i class="fas fa-times mr-2"></i>
+                                <span>إدارة المصانع</span>
+                            </li>
+                            <li class="flex items-center text-gray-400">
+                                <i class="fas fa-times mr-2"></i>
+                                <span>نمر المساعد (محدود)</span>
+                            </li>
+                        </ul>
+                        <button class="w-full bg-turquoise-100 hover:bg-turquoise-200 text-turquoise-700 font-medium py-2 rounded-lg transition duration-300">
+                            اختر الباقة
+                        </button>
+                    </div>
+                </div>
+                <!-- Pro Plan -->
+                <div class="bg-white rounded-xl shadow-xl overflow-hidden border-2 border-turquoise-400 transform hover:scale-105 transition duration-300 relative">
+                    <div class="absolute top-0 right-0 bg-turquoise-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
+                        الأكثر مبيعًا
+                    </div>
+                    <div class="bg-turquoise-500 p-6 text-center">
+                        <h3 class="text-xl font-bold text-white">الباقة المتوسطة</h3>
+                        <div class="mt-4">
+                            <span class="text-4xl font-bold text-white">499</span>
+                            <span class="text-turquoise-100">ريال/شهر</span>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <ul class="space-y-3 mb-6">
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>إدارة حتى 3 متاجر</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>حتى 15 مستخدم</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>إدارة المخزون المتقدمة</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>إدارة مصنع واحد</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>نمر المساعد (كامل)</span>
+                            </li>
+                        </ul>
+                        <button class="w-full bg-turquoise-600 hover:bg-turquoise-700 text-white font-medium py-2 rounded-lg transition duration-300">
+                            اختر الباقة
+                        </button>
+                    </div>
+                </div>
+                <!-- Enterprise Plan -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-turquoise-200 transform hover:scale-105 transition duration-300">
+                    <div class="bg-turquoise-100 p-6 text-center">
+                        <h3 class="text-xl font-bold text-turquoise-800">الباقة المتقدمة</h3>
+                        <div class="mt-4">
+                            <span class="text-4xl font-bold text-turquoise-700">999</span>
+                            <span class="text-gray-600">ريال/شهر</span>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <ul class="space-y-3 mb-6">
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>عدد غير محدود من المتاجر</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>عدد غير محدود من المستخدمين</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>إدارة المخزون المتقدمة</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>إدارة حتى 5 مصانع</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-turquoise-500 mr-2"></i>
+                                <span>نمر المساعد (مخصص)</span>
+                            </li>
+                        </ul>
+                        <button class="w-full bg-turquoise-100 hover:bg-turquoise-200 text-turquoise-700 font-medium py-2 rounded-lg transition duration-300">
+                            اختر الباقة
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA -->
+    <section class="py-16 bg-turquoise-700 text-white">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="text-3xl font-bold mb-6">جاهز لتحويل إدارة متجرك أو مصنعك؟</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">
+                انضم إلى منظومة النمور السعودية اليوم وتمتع بكل المميزات التي تقدمها لك المنظومة المتكاملة.
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4 space-x-reverse">
+                <button class="bg-white text-turquoise-700 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold shadow-lg transition duration-300">
+                    ابدأ تجربتك المجانية
+                </button>
+                <button class="border border-white text-white hover:bg-turquoise-800 px-8 py-3 rounded-lg font-bold transition duration-300">
+                    تواصل مع المبيعات
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white pt-16 pb-8">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
+                <!-- Column 1 -->
+                <div>
+                    <div class="flex items-center space-x-2 space-x-reverse mb-4">
+                        <div class="w-10 h-10 bg-turquoise-500 rounded-full flex items-center justify-center text-white">
+                            <i class="fas fa-paw"></i>
+                        </div>
+                        <h3 class="text-xl font-bold">النمور السعودية</h3>
+                    </div>
+                    <p class="text-gray-400 mb-4">
+                        منظومة متكاملة لإدارة المتاجر والمصانع السعودية بأعلى معايير الجودة والكفاءة.
+                    </p>
+                    <div class="flex space-x-4 space-x-reverse">
+                        <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-turquoise-600 rounded-full flex items-center justify-center transition duration-300">
+                            <i class="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-turquoise-600 rounded-full flex items-center justify-center transition duration-300">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-turquoise-600 rounded-full flex items-center justify-center transition duration-300">
+                            <i class="fab fa-linkedin-in"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-turquoise-600 rounded-full flex items-center justify-center transition duration-300">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- Column 2 -->
+                <div>
+                    <h4 class="text-lg font-bold mb-4 text-turquoise-400">الشركة</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">من نحن</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">وظائف</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">الأخبار</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">الشركاء</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">اتصل بنا</a></li>
+                    </ul>
+                </div>
+                <!-- Column 3 -->
+                <div>
+                    <h4 class="text-lg font-bold mb-4 text-turquoise-400">المنتجات</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">إدارة المتاجر</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">إدارة المصانع</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">إدارة المخزون</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">التقارير والتحليلات</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">نمر المساعد</a></li>
+                    </ul>
+                </div>
+                <!-- Column 4 -->
+                <div>
+                    <h4 class="text-lg font-bold mb-4 text-turquoise-400">الدعم</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">الأسئلة الشائعة</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">المساعدة</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">الشروط والأحكام</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">سياسة الخصوصية</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">التواصل الفني</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-400 mb-4 md:mb-0">
+                    © 2023 منظومة النمور السعودية. جميع الحقوق محفوظة.
+                </p>
+                <div class="flex space-x-6 space-x-reverse">
+                    <a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">سياسة الخصوصية</a>
+                    <a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">الشروط والأحكام</a>
+                    <a href="#" class="text-gray-400 hover:text-turquoise-400 transition duration-300">خريطة الموقع</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- Floating Nimr Assistant -->
+    <div class="fixed bottom-6 left-6 z-50">
+        <button id="nimrAssistantBtn" class="w-16 h-16 bg-turquoise-600 rounded-full flex items-center justify-center text-white shadow-xl hover:bg-turquoise-700 transition duration-300 floating">
+            <i class="fas fa-robot text-2xl"></i>
+        </button>
+        <div id="nimrAssistantPopup" class="hidden absolute bottom-20 left-0 w-80 bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden">
+            <div class="bg-turquoise-600 text-white p-3 flex items-center justify-between">
+                <div class="flex items-center">
+                    <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-turquoise-600 mr-2">
+                        <i class="fas fa-robot"></i>
+                    </div>
+                    <h3 class="font-bold">نمر المساعد</h3>
+                </div>
+                <button id="closeNimrBtn" class="text-white hover:text-gray-200">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="p-3 h-48 overflow-y-auto bg-gray-50">
+                <div class="flex justify-end mb-2">
+                    <div class="bg-turquoise-100 text-gray-800 p-2 max-w-xs rounded-lg text-sm chat-bubble">
+                        مرحبا! أنا نمر، كيف يمكنني مساعدتك اليوم؟
+                    </div>
+                </div>
+            </div>
+            <div class="p-3 border-t border-gray-200 flex bg-white">
+                <input type="text" placeholder="اكتب رسالتك..." class="flex-1 border border-gray-300 rounded-l-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-turquoise-500 focus:border-transparent">
+                <button class="bg-turquoise-600 text-white px-3 rounded-r-lg hover:bg-turquoise-700">
+                    <i class="fas fa-paper-plane"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Toggle Nimr Assistant Popup
+        const nimrBtn = document.getElementById('nimrAssistantBtn');
+        const nimrPopup = document.getElementById('nimrAssistantPopup');
+        const closeNimrBtn = document.getElementById('closeNimrBtn');
+        nimrBtn.addEventListener('click', () => {
+            nimrPopup.classList.toggle('hidden');
+        });
+        closeNimrBtn.addEventListener('click', () => {
+            nimrPopup.classList.add('hidden');
+        });
+        // Mobile menu toggle (placeholder - would need proper implementation)
+        const mobileMenuBtn = document.querySelector('.md\\:hidden');
+        mobileMenuBtn.addEventListener('click', () => {
+            alert('سيتم عرض قائمة الجوال هنا');
+        });
+        // Simple chat simulation
+        const chatInput = document.querySelector('#nimrAssistantPopup input');
+        const chatSendBtn = document.querySelector('#nimrAssistantPopup button');
+        const chatMessages = document.querySelector('#nimrAssistantPopup .h-48');
+        chatSendBtn.addEventListener('click', sendMessage);
+        chatInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendMessage();
+        });
+        function sendMessage() {
+            const message = chatInput.value.trim();
+            if (message) {
+                // Add user message
+                const userMsg = document.createElement('div');
+                userMsg.className = 'flex justify-start mb-2';
+                userMsg.innerHTML = `
+                    <div class="bg-gray-200 text-gray-800 p-2 max-w-xs rounded-lg text-sm user-bubble">
+                        ${message}
+                    </div>
+                `;
+                chatMessages.appendChild(userMsg);
+                // Clear input
+                chatInput.value = '';
+                // Scroll to bottom
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                // Simulate response after delay
+                setTimeout(() => {
+                    const responses = [
+                        "حسنًا، يمكنني مساعدتك في ذلك. هل تريد معلومات أكثر تفصيلاً؟",
+                        "لدي الإجابة على سؤالك. هل هناك شيء آخر تحتاج مساعدتي فيه؟",
+                        "هذا سؤال جيد! دعني أتحقق من المعلومات وأعود إليك على الفور.",
+                        "لدي عدة اقتراحات قد تساعدك. هل تريد أن أشاركها معك الآن؟",
+                        "يمكنني تزويدك بتقرير مفصل عن هذا الموضوع. هل تريدني أن أعد ذلك لك؟"
+                    ];
+                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+                    const botMsg = document.createElement('div');
+                    botMsg.className = 'flex justify-end mb-2';
+                    botMsg.innerHTML = `
+                        <div class="bg-turquoise-100 text-gray-800 p-2 max-w-xs rounded-lg text-sm chat-bubble">
+                            ${randomResponse}
+                        </div>
+                    `;
+                    chatMessages.appendChild(botMsg);
+                    // Scroll to bottom again
+                    chatMessages.scrollTop = chatMessages.scrollHeight;
+                }, 1000);
+            }
+        }
+    </script>
+</body>
+</html>