Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>النمور السعودية | منصة المستقبل للتجارة والصناعة</title> | |
| <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: '#e6f7f7', | |
| 200: '#b0e8e8', | |
| 300: '#8ad9d9', | |
| 400: '#64caca', | |
| 500: '#3ebbbb', | |
| 600: '#2da8a8', | |
| 700: '#1d9595', | |
| 800: '#0d8282', | |
| 900: '#006f6f', | |
| } | |
| }, | |
| fontFamily: { | |
| 'sans': ['Tajawal', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .holographic-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); | |
| transition: all 0.3s ease; | |
| } | |
| .holographic-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25); | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 10px rgba(62, 187, 187, 0.5); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3ebbbb 0%, #006f6f 100%); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #3ebbbb 0%, #006f6f 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| right: 0; | |
| background-color: #3ebbbb; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .chat-bubble { | |
| position: relative; | |
| background-color: white; | |
| border-radius: 1rem; | |
| padding: 1rem; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| max-width: 80%; | |
| } | |
| .chat-bubble::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10px; | |
| right: 20px; | |
| border-width: 10px 10px 0; | |
| border-style: solid; | |
| border-color: white transparent transparent; | |
| } | |
| .ai-response { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .product-card { | |
| transition: all 0.3s ease; | |
| perspective: 1000px; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px) rotateX(5deg); | |
| } | |
| .dashboard-card { | |
| background: rgba(255, 255, 255, 0.9); | |
| backdrop-filter: blur(5px); | |
| transition: all 0.3s ease; | |
| } | |
| .dashboard-card:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring-circle { | |
| transition: stroke-dashoffset 0.5s; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4 space-x-reverse"> | |
| <div> | |
| <h1 class="text-2xl md:text-3xl font-bold glow-text">النمور السعودية</h1> | |
| <p class="text-sm md:text-base opacity-90">منصة المستقبل للتجارة والصناعة</p> | |
| </div> | |
| </div> | |
| <nav class="hidden md:flex space-x-8 space-x-reverse"> | |
| <a href="#" class="nav-link text-white font-medium">الرئيسية</a> | |
| <a href="#" class="nav-link text-white font-medium">المتاجر</a> | |
| <a href="#" class="nav-link text-white font-medium">المصانع</a> | |
| <a href="#" class="nav-link text-white font-medium">الخدمات</a> | |
| <a href="#" class="nav-link text-white font-medium">عن المنصة</a> | |
| <a href="#" class="nav-link text-white font-medium">اتصل بنا</a> | |
| </nav> | |
| <div class="flex items-center space-x-3 space-x-reverse"> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| <button class="bg-white text-turquoise-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition"> | |
| تسجيل الدخول | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-16 md:py-24"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight"> | |
| مستقبل <span class="gradient-text">التجارة</span> و<span class="gradient-text">الصناعة</span> في المملكة | |
| </h1> | |
| <p class="text-lg md:text-xl mb-8 opacity-90"> | |
| منصة النمور السعودية توفر حلولاً متكاملة للمتاجر والمصانع باستخدام أحدث التقنيات الذكية والذكاء الاصطناعي | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 sm:space-x-reverse"> | |
| <button class="bg-white text-turquoise-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition flex items-center justify-center space-x-2 space-x-reverse"> | |
| <span>ابدأ الآن</span> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <button class="border-2 border-white text-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-turquoise-600 transition flex items-center justify-center space-x-2 space-x-reverse"> | |
| <span>شاهد الفيديو</span> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-turquoise-200 opacity-20"></div> | |
| <div class="absolute -bottom-10 -left-10 w-40 h-40 rounded-full bg-turquoise-300 opacity-20"></div> | |
| <div class="relative holographic-card rounded-2xl p-6 backdrop-blur-lg"> | |
| <img src="https://via.placeholder.com/500x300/3ebbbb/ffffff?text=النمور+السعودية" alt="Dashboard Preview" class="rounded-xl shadow-lg w-full"> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex space-x-2 space-x-reverse"> | |
| <div class="w-3 h-3 rounded-full bg-green-400"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-400"></div> | |
| <div class="w-3 h-3 rounded-full bg-red-400"></div> | |
| </div> | |
| <p class="text-sm text-gray-600">لوحة التحكم الذكية</p> | |
| </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 md:text-4xl font-bold mb-4">مميزات <span class="gradient-text">المنصة</span></h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto"> | |
| نقدم مجموعة متكاملة من الحلول الذكية التي تساعد متاجرك ومصانعك على النمو والازدهار | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="holographic-card rounded-xl p-6"> | |
| <div class="w-16 h-16 rounded-full bg-turquoise-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-robot text-3xl text-turquoise-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">مساعد النمر الذكي</h3> | |
| <p class="text-gray-600"> | |
| روبوت ذكي يساعدك في إدارة عملياتك التجارية والصناعية باستخدام الذكاء الاصطناعي | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="holographic-card rounded-xl p-6"> | |
| <div class="w-16 h-16 rounded-full bg-turquoise-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-line text-3xl text-turquoise-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">تحليلات متقدمة</h3> | |
| <p class="text-gray-600"> | |
| لوحة تحكم ذكية توفر تحليلات دقيقة لمساعدتك في اتخاذ القرارات الاستراتيجية | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="holographic-card rounded-xl p-6"> | |
| <div class="w-16 h-16 rounded-full bg-turquoise-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-store text-3xl text-turquoise-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">إدارة متكاملة للمتاجر</h3> | |
| <p class="text-gray-600"> | |
| نظام متكامل لإدارة المخزون والمبيعات والعملاء بسهولة وكفاءة | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="holographic-card rounded-xl p-6"> | |
| <div class="w-16 h-16 rounded-full bg-turquoise-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-industry text-3xl text-turquoise-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">حلول صناعية ذكية</h3> | |
| <p class="text-gray-600"> | |
| أنظمة متطورة لمراقبة خطوط الإنتاج وإدارة سلسلة التوريد | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="holographic-card rounded-xl p-6"> | |
| <div class="w-16 h-16 rounded-full bg-turquoise-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-money-bill-wave text-3xl text-turquoise-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">مدفوعات آمنة</h3> | |
| <p class="text-gray-600"> | |
| نظام دفع إلكتروني آمن ومتكامل مع جميع البنوك المحلية | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="holographic-card rounded-xl p-6"> | |
| <div class="w-16 h-16 rounded-full bg-turquoise-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-mobile-alt text-3xl text-turquoise-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">تطبيق جوال</h3> | |
| <p class="text-gray-600"> | |
| تطبيق جوال متكامل لإدارة أعمالك من أي مكان وفي أي وقت | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Assistant Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <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 flex justify-center"> | |
| <div class="relative"> | |
| <div class="absolute -bottom-10 -right-10 w-40 h-40 rounded-full bg-turquoise-100 opacity-30"></div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">مساعد <span class="gradient-text">النمر</span> الذكي</h2> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| روبوت النمر الذكي هو مساعدك الشخصي الذي يستخدم الذكاء الاصطناعي لمساعدتك في إدارة أعمالك التجارية والصناعية بكل كفاءة | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3 space-x-reverse"> | |
| <div class="w-10 h-10 rounded-full bg-turquoise-100 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-check text-turquoise-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">إجابات فورية</h4> | |
| <p class="text-gray-600 text-sm">احصل على إجابات فورية لاستفساراتك حول المبيعات والمخزون والعملاء</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3 space-x-reverse"> | |
| <div class="w-10 h-10 rounded-full bg-turquoise-100 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-chart-pie text-turquoise-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">تحليلات تنبؤية</h4> | |
| <p class="text-gray-600 text-sm">توقعات ذكية لحركة المبيعات وطلب السوق بناءً على البيانات التاريخية</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3 space-x-reverse"> | |
| <div class="w-10 h-10 rounded-full bg-turquoise-100 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-bell text-turquoise-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">تنبيهات ذكية</h4> | |
| <p class="text-gray-600 text-sm">إشعارات فورية لأي تغييرات مهمة في عملياتك التجارية</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-8 bg-turquoise-600 text-white px-6 py-3 rounded-full font-bold hover:bg-turquoise-700 transition flex items-center space-x-2 space-x-reverse"> | |
| <span>جرب المساعد الآن</span> | |
| <i class="fas fa-comment-dots"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Chat Demo --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">تجربة <span class="gradient-text">المساعد الذكي</span></h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto"> | |
| تفاعل مع مساعد النمر الذكي لمعرفة كيف يمكنه مساعدتك في إدارة أعمالك | |
| </p> | |
| </div> | |
| <div class="max-w-2xl mx-auto bg-gray-50 rounded-2xl p-6 shadow-lg"> | |
| <div class="bg-white rounded-xl p-4 mb-4 h-96 overflow-y-auto" id="chat-container"> | |
| <div class="flex items-start space-x-3 space-x-reverse mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-turquoise-100 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-robot text-turquoise-600"></i> | |
| </div> | |
| <div class="chat-bubble"> | |
| <p class="text-gray-800">مرحباً! أنا مساعد النمر الذكي. كيف يمكنني مساعدتك اليوم؟</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3 space-x-reverse"> | |
| <input type="text" placeholder="اكتب رسالتك هنا..." class="flex-1 border border-gray-300 rounded-full px-4 py-3 focus:outline-none focus:ring-2 focus:ring-turquoise-500"> | |
| <button class="bg-turquoise-600 text-white w-12 h-12 rounded-full flex items-center justify-center hover:bg-turquoise-700 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <button class="text-xs bg-turquoise-100 text-turquoise-800 px-3 py-1 rounded-full hover:bg-turquoise-200 transition quick-question"> | |
| كيف يمكنني زيادة المبيعات؟ | |
| </button> | |
| <button class="text-xs bg-turquoise-100 text-turquoise-800 px-3 py-1 rounded-full hover:bg-turquoise-200 transition quick-question"> | |
| ما هي أفضل طريقة لإدارة المخزون؟ | |
| </button> | |
| <button class="text-xs bg-turquoise-100 text-turquoise-800 px-3 py-1 rounded-full hover:bg-turquoise-200 transition quick-question"> | |
| كيف يمكنني تحسين خط الإنتاج؟ | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dashboard Preview --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">لوحة <span class="gradient-text">التحكم الذكية</span></h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto"> | |
| لوحة تحكم متكاملة توفر لك جميع الأدوات التي تحتاجها لإدارة أعمالك بكفاءة | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="bg-gray-100 p-3 flex space-x-2 space-x-reverse"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <!-- Stats Card 1 --> | |
| <div class="dashboard-card rounded-xl p-6 border border-gray-200"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="font-bold text-gray-600">إجمالي المبيعات</h3> | |
| <div class="bg-turquoise-100 text-turquoise-800 px-2 py-1 rounded-full text-xs"> | |
| +12.5% | |
| </div> | |
| </div> | |
| <p class="text-3xl font-bold mb-2">245,320 <span class="text-lg text-gray-500">ر.س</span></p> | |
| <div class="h-2 bg-gray-200 rounded-full"> | |
| <div class="h-2 bg-turquoise-500 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <!-- Stats Card 2 --> | |
| <div class="dashboard-card rounded-xl p-6 border border-gray-200"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="font-bold text-gray-600">عدد العملاء</h3> | |
| <div class="bg-turquoise-100 text-turquoise-800 px-2 py-1 rounded-full text-xs"> | |
| +8.2% | |
| </div> | |
| </div> | |
| <p class="text-3xl font-bold mb-2">1,842</p> | |
| <div class="h-2 bg-gray-200 rounded-full"> | |
| <div class="h-2 bg-turquoise-500 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <!-- Stats Card 3 --> | |
| <div class="dashboard-card rounded-xl p-6 border border-gray-200"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <h3 class="font-bold text-gray-600">معدل التحويل</h3> | |
| <div class="bg-turquoise-100 text-turquoise-800 px-2 py-1 rounded-full text-xs"> | |
| +3.1% | |
| </div> | |
| </div> | |
| <p class="text-3xl font-bold mb-2">4.8%</p> | |
| <div class="h-2 bg-gray-200 rounded-full"> | |
| <div class="h-2 bg-turquoise-500 rounded-full" style="width: 48%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Sales Chart --> | |
| <div class="dashboard-card rounded-xl p-6 border border-gray-200"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-gray-600">مبيعات الشهر</h3> | |
| <select class="text-sm border border-gray-300 rounded-full px-3 py-1 focus:outline-none focus:ring-1 focus:ring-turquoise-500"> | |
| <option>آخر 7 أيام</option> | |
| <option>آخر 30 يوم</option> | |
| <option selected>هذا الشهر</option> | |
| <option>هذا العام</option> | |
| </select> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="salesChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Top Products --> | |
| <div class="dashboard-card rounded-xl p-6 border border-gray-200"> | |
| <h3 class="font-bold text-gray-600 mb-4">أفضل المنتجات مبيعاً</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-md bg-turquoise-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-box text-turquoise-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">جهاز تحلية المياه</h4> | |
| <p class="text-sm text-gray-500">المنزلية</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-bold">78 <span class="text-sm font-normal text-gray-500">وحدة</span></p> | |
| <p class="text-xs text-green-500">+12.5%</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-md bg-turquoise-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-box text-turquoise-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">خلاط كهربائي</h4> | |
| <p class="text-sm text-gray-500">المطبخ</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-bold">64 <span class="text-sm font-normal text-gray-500">وحدة</span></p> | |
| <p class="text-xs text-green-500">+8.3%</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-md bg-turquoise-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-box text-turquoise-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">سجادة صلاة</h4> | |
| <p class="text-sm text-gray-500">دينية</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-bold">52 <span class="text-sm font-normal text-gray-500">وحدة</span></p> | |
| <p class="text-xs text-green-500">+5.7%</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-md bg-turquoise-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-box text-turquoise-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">عطر رجالي</h4> | |
| <p class="text-sm text-gray-500">العناية الشخصية</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-bold">48 <span class="text-sm font-normal text-gray-500">وحدة</span></p> | |
| <p class="text-xs text-red-500">-2.1%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </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 md:text-4xl font-bold mb-4">آراء <span class="gradient-text">العملاء</span></h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto"> | |
| ما يقوله عملاؤنا عن منصة النمور السعودية | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="holographic-card rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-turquoise-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-xl text-turquoise-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">أحمد السديري</h4> | |
| <p class="text-sm text-gray-500">مالك متجر إلكتروني</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| "منصة النمور السعودية غيرت طريقة إدارة متجري بالكامل. التحليلات الذكية ساعدتني في فهم عملائي بشكل أفضل وزيادة مبيعاتي بنسبة 40% في ثلاثة أشهر فقط." | |
| </p> | |
| <div class="flex space-x-1 text-yellow-400"> | |
| <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="holographic-card rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-turquoise-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-xl text-turquoise-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">سارة القحطاني</h4> | |
| <p class="text-sm text-gray-500">مديرة مصنع ألبان</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-4"> | |
| "المساعد الذكي في المنصة ساعدنا في تحسين خط الإنتاج وتقليل الهدر بنسبة 25%. النظام سهل الاستخدام ويوفر الوقت والجهد في إدارة العمليات اليومية." | |
| </p> | |
| <div class="flex space-x-1 text-yellow-400"> | |
| <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="holographic-card rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-turquoise-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-xl text-turquoise-600"></i> | |
| </div> | |
| <div> | |
| <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 space-x-1 text-yellow-400"> | |
| <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> | |
| <!-- CTA Section --> | |
| <section class="py-16 gradient-bg text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">جاهز لبدء رحلتك مع <span class="glow-text">النمور السعودية</span>؟</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto"> | |
| انضم إلى مئات المتاجر والمصانع التي تعتمد على منصتنا لإدارة أعمالهم بكل كفاءة واحترافية | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6 sm:space-x-reverse"> | |
| <button class="bg-white text-turquoise-600 px-8 py-4 rounded-full font-bold hover:bg-gray-100 transition flex items-center justify-center space-x-2 space-x-reverse"> | |
| <span>ابدأ تجربتك المجانية</span> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <button class="border-2 border-white text-white px-8 py-4 rounded-full font-bold hover:bg-white hover:text-turquoise-600 transition flex items-center justify-center space-x-2 space-x-reverse"> | |
| <span>تواصل مع المبيعات</span> | |
| <i class="fas fa-headset"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> | |
| <!-- Column 1 --> | |
| <div> | |
| <div class="flex items-center space-x-3 space-x-reverse mb-4"> | |
| <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 rounded-full bg-gray-800 flex items-center justify-center hover:bg-turquoise-600 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-turquoise-600 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-turquoise-600 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-turquoise-600 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Column 2 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 border-b border-gray-800 pb-2">الخدمات</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition">إدارة المتاجر الإلكترونية</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition">حلول إدارة المصانع</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition">التحليلات الذكية</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition">مساعد النمر الذكي</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition">أنظمة الدفع الإلكتروني</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 3 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 border-b border-gray-800 pb-2">الشركة</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition">عن المنصة</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition">فريق العمل</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition">الوظائف</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition">الشروط والأحكام</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-turquoise-400 transition">سياسة الخصوصية</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 4 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 border-b border-gray-800 pb-2">تواصل معنا</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start space-x-2 space-x-reverse"> | |
| <i class="fas fa-map-marker-alt text-turquoise-400 mt-1"></i> | |
| <span class="text-gray-400">الرياض، المملكة العربية السعودية</span> | |
| </li> | |
| <li class="flex items-start space-x-2 space-x-reverse"> | |
| <i class="fas fa-phone-alt text-turquoise-400 mt-1"></i> | |
| <span class="text-gray-400">920000000</span> | |
| </li> | |
| <li class="flex items-start space-x-2 space-x-reverse"> | |
| <i class="fas fa-envelope text-turquoise-400 mt-1"></i> | |
| <span class="text-gray-400">[email protected]</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 text-center text-gray-400"> | |
| <p>© 2023 النمور السعودية. جميع الحقوق محفوظة.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Chat Widget --> | |
| <div class="fixed bottom-6 left-6 z-50"> | |
| <button id="chat-widget-button" class="w-16 h-16 rounded-full bg-turquoise-600 text-white shadow-xl flex items-center justify-center hover:bg-turquoise-700 transition"> | |
| <i class="fas fa-comment-dots text-2xl"></i> | |
| </button> | |
| <div id="chat-widget" class="hidden absolute bottom-20 left-0 w-80 bg-white rounded-xl shadow-xl overflow-hidden"> | |
| <div class="bg-turquoise-600 text-white p-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2 space-x-reverse"> | |
| <span class="font-bold">مساعد النمر</span> | |
| </div> | |
| <button id="close-chat" class="text-white hover:text-gray-200"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 h-64 overflow-y-auto" id="widget-chat-container"> | |
| <div class="flex items-start space-x-2 space-x-reverse mb-3"> | |
| <div class="w-8 h-8 rounded-full bg-turquoise-100 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-robot text-turquoise-600 text-sm"></i> | |
| </div> | |
| <div class="bg-gray-100 text-gray-800 px-3 py-2 rounded-lg max-w-xs"> | |
| <p class="text-sm">مرحباً! أنا مساعد النمر الذكي. كيف يمكنني مساعدتك اليوم؟</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-200"> | |
| <div class="flex space-x-2 space-x-reverse"> | |
| <input type="text" placeholder="اكتب رسالتك..." class="flex-1 border border-gray-300 rounded-full px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-turquoise-500"> | |
| <button class="w-10 h-10 rounded-full bg-turquoise-600 text-white flex items-center justify-center hover:bg-turquoise-700 transition"> | |
| <i class="fas fa-paper-plane text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Initialize sales chart | |
| const salesCtx = document.getElementById('salesChart').getContext('2d'); | |
| const salesChart = new Chart(salesCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['1', '5', '10', '15', '20', '25', '30'], | |
| datasets: [{ | |
| label: 'المبيعات اليومية', | |
| data: [12000, 19000, 15000, 22000, 18000, 25000, 21000], | |
| backgroundColor: 'rgba(62, 187, 187, 0.1)', | |
| borderColor: 'rgba(62, 187, 187, 1)', | |
| borderWidth: 2, | |
| tension: 0.4, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(0, 0, 0, 0.05)' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Chat functionality | |
| const chatContainer = document.getElementById('chat-container'); | |
| const quickQuestions = document.querySelectorAll('.quick-question'); | |
| quickQuestions.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const question = this.textContent.trim(); | |
| addUserMessage(question); | |
| // Simulate AI response after a delay | |
| setTimeout(() => { | |
| addAiMessage(getAiResponse(question)); | |
| }, 1000); | |
| }); | |
| }); | |
| function addUserMessage(message) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'flex items-start space-x-3 space-x-reverse mb-4 justify-end'; | |
| messageDiv.innerHTML = ` | |
| <div class="chat-bubble bg-turquoise-600 text-white"> | |
| <p>${message}</p> | |
| </div> | |
| <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-user text-gray-600"></i> | |
| </div> | |
| `; | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| function addAiMessage(message) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'flex items-start space-x-3 space-x-reverse mb-4 ai-response'; | |
| messageDiv.innerHTML = ` | |
| <div class="w-10 h-10 rounded-full bg-turquoise-100 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-robot text-turquoise-600"></i> | |
| </div> | |
| <div class="chat-bubble"> | |
| <p class="text-gray-800">${message}</p> | |
| </div> | |
| `; | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| function getAiResponse(question) { | |
| const responses = { | |
| "كيف يمكنني زيادة المبيعات؟": "لزيادة المبيعات، أنصحك بالتركيز على:<br>1- تحسين تجربة العميل<br>2- تقديم عروض ترويجية جذابة<br>3- تحسين ظهور منتجاتك في محركات البحث<br>4- استخدام تحليلات المنصة لتحديد أفضل أوقات البيع", | |
| "ما هي أفضل طريقة لإدارة المخزون؟": "إدارة المخزون الفعالة تتضمن:<br>1- استخدام نظام تتبع المخزون الآلي<br>2- تحديد مستويات إعادة الطلب<br>3- تحليل معدل دوران المخزون<br>4- التكامل مع الموردين لتحسين سلسلة التوريد", | |
| "كيف يمكنني تحسين خط الإنتاج؟": "لتحسين خط الإنتاج:<br>1- تحليل بيانات الإنتاج لتحديد الاختناقات<br>2- أتمتة العمليات المتكررة<br>3- تدريب العمالة على أفضل الممارسات<br>4- مراقبة جودة المنتج باستمرار" | |
| }; | |
| return responses[question] || "أنا هنا لمساعدتك في أي استفسار لديك حول إدارة متجرك أو مصنعك. هل يمكنك توضيح سؤالك أكثر؟"; | |
| } | |
| // Chat widget functionality | |
| const chatWidgetButton = document.getElementById('chat-widget-button'); | |
| const chatWidget = document.getElementById('chat-widget'); | |
| const closeChat = document.getElementById('close-chat'); | |
| chatWidgetButton.addEventListener('click', function() { | |
| chatWidget.classList.toggle('hidden'); | |
| }); | |
| closeChat.addEventListener('click', function() { | |
| chatWidget.classList.add('hidden'); | |
| }); | |
| // Quick questions for widget | |
| const widgetQuickQuestions = [ | |
| "كيف أسجل في المنصة؟", | |
| "ما هي تكلفة الاشتراك؟", | |
| "هل يوجد دعم فني؟" | |
| ]; | |
| const widgetChatContainer = document.getElementById('widget-chat-container'); | |
| // Add quick question buttons to widget | |
| const quickQuestionsDiv = document.createElement('div'); | |
| quickQuestionsDiv.className = 'flex flex-wrap gap-2 mb-3'; | |
| widgetQuickQuestions.forEach(question => { | |
| const button = document.createElement('button'); | |
| button.className = 'text-xs bg-turquoise-100 text-turquoise-800 px-2 py-1 rounded-full hover:bg-turquoise-200 transition'; | |
| button.textContent = question; | |
| button.addEventListener('click', function() { | |
| addWidgetUserMessage(question); | |
| // Simulate AI response after a delay | |
| setTimeout(() => { | |
| addWidgetAiMessage(getWidgetAiResponse(question)); | |
| }, 1000); | |
| }); | |
| quickQuestionsDiv.appendChild(button); | |
| }); | |
| widgetChatContainer.appendChild(quickQuestionsDiv); | |
| function addWidgetUserMessage(message) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'flex items-start space-x-2 space-x-reverse mb-3 justify-end'; | |
| messageDiv.innerHTML = ` | |
| <div class="bg-turquoise-600 text-white px-3 py-2 rounded-lg max-w-xs"> | |
| <p class="text-sm">${message}</p> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-user text-gray-600 text-sm"></i> | |
| </div> | |
| `; | |
| widgetChatContainer.appendChild(messageDiv); | |
| widgetChatContainer.scrollTop = widgetChatContainer.scrollHeight; | |
| } | |
| function addWidgetAiMessage(message) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'flex items-start space-x-2 space-x-reverse mb-3 ai-response'; | |
| messageDiv.innerHTML = ` | |
| <div class="w-8 h-8 rounded-full bg-turquoise-100 flex items-center justify-center flex-shrink-0"> | |
| <i class="fas fa-robot text-turquoise-600 text-sm"></i> | |
| </div> | |
| <div class="bg-gray-100 text-gray-800 px-3 py-2 rounded-lg max-w-xs"> | |
| <p class="text-sm">${message}</p> | |
| </div> | |
| `; | |
| widgetChatContainer.appendChild(messageDiv); | |
| widgetChatContainer.scrollTop = widgetChatContainer.scrollHeight; | |
| } | |
| function getWidgetAiResponse(question) { | |
| const responses = { | |
| "كيف أسجل في المنصة؟": "يمكنك التسجيل عن طريق:<br>1- زيارة موقعنا الإلكتروني<br>2- الضغط على زر 'ابدأ الآن'<br>3- ملء نموذج التسجيل<br>4- تفعيل الحساب عبر البريد الإلكتروني", | |
| "ما هي تكلفة الاشتراك؟": "نقدم عدة باقات اشتراك تبدأ من 199 ريال شهرياً للمتاجر الصغيرة وحتى 1999 ريال شهرياً للمصانع الكبيرة. يمكنك تجربة المنصة مجاناً لمدة 14 يوم.", | |
| "هل يوجد دعم فني؟": "نعم، لدينا فريق دعم فني متاح 24/7 عبر:<br>1- الدردشة الحية<br>2- البريد الإلكتروني<br>3- الهاتف<br>4- مركز المساعدة" | |
| }; | |
| return responses[question] || "شكراً لاستخدامك خدمة مساعد النمر الذكي. كيف يمكنني مساعدتك اليوم؟"; | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Maram5522/tigers-kas-sa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |