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>GreenAI - المنصة الذكية لتشجير المدن</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(61, 153, 112, 0.9) 0%, rgba(44, 122, 123, 0.9) 100%); | |
| } | |
| .tree-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .animated-counter { | |
| transition: all 0.5s ease; | |
| } | |
| .map-container { | |
| height: 400px; | |
| background-color: #e5e7eb; | |
| border-radius: 1rem; | |
| overflow: hidden; | |
| } | |
| </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-shrink-0 flex items-center"> | |
| <i class="fas fa-leaf text-green-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-green-700">GreenAI</span> | |
| </div> | |
| <nav class="hidden md:flex space-x-6 space-x-reverse"> | |
| <a href="#home" class="text-green-600 font-medium">الرئيسية</a> | |
| <a href="#features" class="text-gray-600 hover:text-green-600">المميزات</a> | |
| <a href="#how-it-works" class="text-gray-600 hover:text-green-600">كيف تعمل</a> | |
| <a href="#dashboard" class="text-gray-600 hover:text-green-600">لوحة البيانات</a> | |
| <a href="#contact" class="text-gray-600 hover:text-green-600">تواصل معنا</a> | |
| </nav> | |
| <div class="flex items-center space-x-4 space-x-reverse"> | |
| <button class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">تسجيل الدخول</button> | |
| <button class="md:hidden text-gray-600" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-lg" id="mobile-menu"> | |
| <a href="#home" class="block py-2 text-green-600 font-medium">الرئيسية</a> | |
| <a href="#features" class="block py-2 text-gray-600">المميزات</a> | |
| <a href="#how-it-works" class="block py-2 text-gray-600">كيف تعمل</a> | |
| <a href="#dashboard" class="block py-2 text-gray-600">لوحة البيانات</a> | |
| <a href="#contact" class="block py-2 text-gray-600">تواصل معنا</a> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient text-white py-20"> | |
| <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 font-bold mb-6">دع المدن تتنفس مع GreenAI</h1> | |
| <p class="text-xl mb-8">منصة ذكية تعتمد على الذكاء الاصطناعي لاختيار أفضل مواقع التشجير وتتبع نمو الأشجار لمدن أكثر استدامة</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 sm:space-x-reverse"> | |
| <button class="bg-white text-green-600 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition">جرب المنصة الآن</button> | |
| <button class="border-2 border-white text-white px-6 py-3 rounded-lg font-bold hover:bg-white hover:text-green-600 transition">شاهد الفيديو التعريفي <i class="fas fa-play mr-2"></i></button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="bg-white/20 backdrop-blur-md rounded-xl p-6 shadow-xl"> | |
| <div class="text-center mb-4"> | |
| <h3 class="font-bold text-xl">تحليل الذكاء الاصطناعي لشارعك</h3> | |
| </div> | |
| <div class="map-container mb-4"></div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-white/30 p-3 rounded-lg text-center"> | |
| <div class="text-2xl font-bold mb-1" id="tree-counter">0</div> | |
| <div class="text-sm">أشجار مقترحة</div> | |
| </div> | |
| <div class="bg-white/30 p-3 rounded-lg text-center"> | |
| <div class="text-2xl font-bold mb-1" id="co2-counter">0</div> | |
| <div class="text-sm">طن CO2 سيتم امتصاصه</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-gray-100 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="text-green-600 text-3xl mb-2"> | |
| <i class="fas fa-tree"></i> | |
| </div> | |
| <div class="text-3xl font-bold mb-1 animated-counter" data-target="12500">0</div> | |
| <div class="text-gray-600">شجرة مزروعة</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="text-green-600 text-3xl mb-2"> | |
| <i class="fas fa-city"></i> | |
| </div> | |
| <div class="text-3xl font-bold mb-1 animated-counter" data-target="42">0</div> | |
| <div class="text-gray-600">حي مشجر</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="text-green-600 text-3xl mb-2"> | |
| <i class="fas fa-temperature-low"></i> | |
| </div> | |
| <div class="text-3xl font-bold mb-1 animated-counter" data-target="3.5">0</div> | |
| <div class="text-gray-600">درجة مئوية انخفاض في الحرارة</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="text-green-600 text-3xl mb-2"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div class="text-3xl font-bold mb-1 animated-counter" data-target="8500">0</div> | |
| <div class="text-gray-600">متطوع</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Smart Solutions --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">حلولنا الذكية</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto">تقنيات مبتكرة تجعل التشجير أكثر ذكاءً وفعالية</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Solution 1 --> | |
| <div class="solution-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="flex items-start"> | |
| <div class="solution-icon text-green-600 text-4xl mr-4 transition duration-300"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">AI TreeSpotter</h3> | |
| <p class="text-gray-600 mb-4">خريطة ذكية تحدد أفضل المواقع لزراعة الأشجار بناءً على تحليل صور الأقمار الصناعية وبيانات جودة الهواء</p> | |
| <a href="#" class="text-green-600 font-medium inline-flex items-center"> | |
| تعرف على المزيد | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Solution 2 --> | |
| <div class="solution-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="flex items-start"> | |
| <div class="solution-icon text-green-600 text-4xl mr-4 transition duration-300"> | |
| <i class="fas fa-tree"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">Smart Tree Recommender</h3> | |
| <p class="text-gray-600 mb-4">نظام يوصي بأنواع الأشجار المثالية لكل منطقة بناءً على التربة والمناخ واستهلاك المياه</p> | |
| <a href="#" class="text-green-600 font-medium inline-flex items-center"> | |
| تعرف على المزيد | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Solution 3 --> | |
| <div class="solution-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="flex items-start"> | |
| <div class="solution-icon text-green-600 text-4xl mr-4 transition duration-300"> | |
| <i class="fas fa-camera-retro"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">TreeTrack AI</h3> | |
| <p class="text-gray-600 mb-4">تحليل صور الأشجار المزروعة لتقييم صحتها ونموها باستخدام رؤية الحاسوب</p> | |
| <a href="#" class="text-green-600 font-medium inline-flex items-center"> | |
| تعرف على المزيد | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Solution 4 --> | |
| <div class="solution-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="flex items-start"> | |
| <div class="solution-icon text-green-600 text-4xl mr-4 transition duration-300"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">GreenBot</h3> | |
| <p class="text-gray-600 mb-4">مساعد ذكي يجيب على أسئلتك حول التشجير والعناية بالأشجار</p> | |
| <a href="#" class="text-green-600 font-medium inline-flex items-center"> | |
| جربه الآن | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">حلولنا الذكية لتشجير المدن</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">نقدم مجموعة من الحلول المبتكرة المدعومة بالذكاء الاصطناعي لتحقيق أقصى استفادة من التشجير الحضري</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="tree-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="text-green-600 text-4xl mb-4"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">التنبؤ بمواقع التشجير</h3> | |
| <p class="text-gray-600">نظام ذكي يحلل بيانات الحرارة والتلوث والازدحام لتحديد أفضل المواقع لزراعة الأشجار</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="tree-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="text-green-600 text-4xl mb-4"> | |
| <i class="fas fa-seedling"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">اختيار نوع الشجرة</h3> | |
| <p class="text-gray-600">اقتراح أنواع الأشجار المناسبة لكل موقع بناءً على التربة والمناخ والمساحة المتاحة</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="tree-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="text-green-600 text-4xl mb-4"> | |
| <i class="fas fa-satellite-dish"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">تتبع النمو والصحة</h3> | |
| <p class="text-gray-600">مراقبة نمو الأشجار وصحتها باستخدام تحليل الصور والأقمار الصناعية والطائرات المسيرة</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="tree-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="text-green-600 text-4xl mb-4"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">مساعد ذكي بيئي</h3> | |
| <p class="text-gray-600">GreenBot يساعدك في الإجابة على استفساراتك البيئية ويقدم نصائح شخصية لرعاية الأشجار</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">كيف تعمل منصة GreenAI؟</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">عملية بسيطة من ثلاث خطوات لتحويل شوارع مدينتك إلى مساحات خضراء مستدامة</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <!-- Step 1 --> | |
| <div class="flex flex-col items-center mb-10 md:mb-0 w-full md:w-1/3 px-6"> | |
| <div class="bg-green-600 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold mb-4">1</div> | |
| <h3 class="text-xl font-bold mb-3 text-center">تحليل البيانات البيئية</h3> | |
| <p class="text-gray-600 text-center">يقوم الذكاء الاصطناعي بتحليل خرائط الحرارة، بيانات التلوث، نوع التربة، والبيانات المناخية</p> | |
| </div> | |
| <!-- Arrow --> | |
| <div class="hidden md:block text-green-600 text-3xl mb-10"> | |
| <i class="fas fa-arrow-left"></i> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="flex flex-col items-center mb-10 md:mb-0 w-full md:w-1/3 px-6"> | |
| <div class="bg-green-600 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold mb-4">2</div> | |
| <h3 class="text-xl font-bold mb-3 text-center">اقتراح خطة التشجير</h3> | |
| <p class="text-gray-600 text-center">يقدم النظام تقريرًا مفصلًا بأفضل المواقع وأنواع الأشجار الموصى بها مع خطة التنفيذ</p> | |
| </div> | |
| <!-- Arrow --> | |
| <div class="hidden md:block text-green-600 text-3xl mb-10"> | |
| <i class="fas fa-arrow-left"></i> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="flex flex-col items-center w-full md:w-1/3 px-6"> | |
| <div class="bg-green-600 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold mb-4">3</div> | |
| <h3 class="text-xl font-bold mb-3 text-center">التنفيذ والمتابعة</h3> | |
| <p class="text-gray-600 text-center">بعد الزراعة، يتم متابعة نمو الأشجار وصحتها آليًا وإرسال تقارير دورية</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dashboard Preview --> | |
| <section id="dashboard" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">لوحة بيانات الاستدامة</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">تابع تأثير التشجير على بيئة مدينتك عبر لوحة البيانات التفاعلية</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="text-xl font-bold">لوحة تحليل منطقة الرياض</h3> | |
| <div class="flex space-x-3 space-x-reverse"> | |
| <button class="px-4 py-2 bg-green-600 text-white rounded-lg">2023</button> | |
| <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg">2022</button> | |
| <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg">2021</button> | |
| </div> | |
| </div> | |
| <div class="p-6 grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Map --> | |
| <div class="lg:col-span-2"> | |
| <div class="map-container"> | |
| <!-- This would be replaced with an actual map in production --> | |
| <div class="w-full h-full flex items-center justify-center bg-green-50"> | |
| <div class="text-center"> | |
| <i class="fas fa-map-marked-alt text-5xl text-green-200 mb-4"></i> | |
| <p class="text-green-400 font-medium">خريطة تفاعلية تظهر مناطق التشجير</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats --> | |
| <div class="space-y-6"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <h4 class="font-bold mb-3">تأثير التشجير على الحرارة</h4> | |
| <div class="h-40"> | |
| <!-- Chart placeholder --> | |
| <div class="w-full h-full flex items-center justify-center bg-blue-50 rounded"> | |
| <div class="text-center"> | |
| <i class="fas fa-chart-line text-3xl text-blue-200 mb-2"></i> | |
| <p class="text-blue-400 text-sm">انخفاض درجات الحرارة في المناطق المشجرة</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <h4 class="font-bold mb-3">جودة الهواء</h4> | |
| <div class="h-40"> | |
| <!-- Chart placeholder --> | |
| <div class="w-full h-full flex items-center justify-center bg-purple-50 rounded"> | |
| <div class="text-center"> | |
| <i class="fas fa-wind text-3xl text-purple-200 mb-2"></i> | |
| <p class="text-purple-400 text-sm">تحسن في جودة الهواء بعد التشجير</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 bg-gray-50 border-t border-gray-200"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center"> | |
| <div> | |
| <div class="text-lg font-bold text-green-600">1,250</div> | |
| <div class="text-sm text-gray-500">شجرة مزروعة هذا العام</div> | |
| </div> | |
| <div> | |
| <div class="text-lg font-bold text-green-600">2.3°C</div> | |
| <div class="text-sm text-gray-500">انخفاض في الحرارة</div> | |
| </div> | |
| <div> | |
| <div class="text-lg font-bold text-green-600">15%</div> | |
| <div class="text-sm text-gray-500">تحسن في جودة الهواء</div> | |
| </div> | |
| <div> | |
| <div class="text-lg font-bold text-green-600">85%</div> | |
| <div class="text-sm text-gray-500">معدل نجاح الأشجار</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <button class="bg-green-600 text-white px-8 py-3 rounded-lg font-bold hover:bg-green-700 transition">تصفح لوحة البيانات الكاملة</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- GreenBot Section --> | |
| <section class="py-20 bg-green-600 text-white"> | |
| <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"> | |
| <h2 class="text-3xl font-bold mb-6">GreenBot - مساعدك الذكي البيئي</h2> | |
| <p class="text-xl mb-8">اطرح أي سؤال حول التشجير، رعاية الأشجار، أو تأثير التشجير على البيئة وسيجيبك GreenBot فورًا</p> | |
| <div class="bg-white/20 p-4 rounded-lg mb-6"> | |
| <div class="flex space-x-3 space-x-reverse"> | |
| <div class="w-10 h-10 bg-white/30 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-bold mb-1">أنت</div> | |
| <div>ما هي أفضل الأشجار لزراعتها في الرياض؟</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white/30 p-4 rounded-lg"> | |
| <div class="flex space-x-3 space-x-reverse"> | |
| <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-green-600"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-bold mb-1">GreenBot</div> | |
| <div>للمناخ الحار في الرياض، أنصح بأشجار السدر، النخيل، الأثل، واللبخ. هذه الأشجار تتحمل الحرارة وتستهلك ماءً أقل.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="bg-white/20 backdrop-blur-md rounded-xl p-8 max-w-md w-full"> | |
| <h3 class="text-xl font-bold mb-6 text-center">جرّب GreenBot الآن</h3> | |
| <div class="mb-4"> | |
| <textarea class="w-full p-3 rounded-lg bg-white/90 text-gray-800" rows="4" placeholder="اطرح سؤالك عن التشجير والبيئة..."></textarea> | |
| </div> | |
| <button class="w-full bg-white text-green-600 py-3 rounded-lg font-bold hover:bg-gray-100 transition">إرسال السؤال</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">انضم إلى مستقبل أكثر اخضرارًا</h2> | |
| <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">سواء كنت بلدية، شركة، أو مواطنًا مهتمًا، يمكنك المساهمة في تشجير مدينتك</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 sm:space-x-reverse"> | |
| <button class="bg-green-600 text-white px-8 py-3 rounded-lg font-bold hover:bg-green-700 transition">سجل كشريك</button> | |
| <button class="border-2 border-green-600 text-green-600 px-8 py-3 rounded-lg font-bold hover:bg-green-600 hover:text-white transition">اعتمد شجرة</button> | |
| <button class="border-2 border-gray-300 text-gray-600 px-8 py-3 rounded-lg font-bold hover:bg-gray-100 transition">تواصل معنا</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h2 class="text-3xl font-bold mb-6">تواصل مع فريق GreenAI</h2> | |
| <p class="text-gray-600 mb-8">لديك استفسار أو ترغب في التعاون معنا؟ تواصل معنا وسنكون سعداء بمساعدتك</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start space-x-4 space-x-reverse"> | |
| <div class="text-green-600 text-xl mt-1"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">العنوان</h4> | |
| <p class="text-gray-600">الرياض، المملكة العربية السعودية</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4 space-x-reverse"> | |
| <div class="text-green-600 text-xl mt-1"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">البريد الإلكتروني</h4> | |
| <p class="text-gray-600">info@greenai.sa</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4 space-x-reverse"> | |
| <div class="text-green-600 text-xl mt-1"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">الهاتف</h4> | |
| <p class="text-gray-600">+966 11 123 4567</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">تابعنا على</h4> | |
| <div class="flex space-x-4 space-x-reverse"> | |
| <a href="#" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <h3 class="text-xl font-bold mb-6">أرسل رسالة</h3> | |
| <form> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 mb-2">الاسم</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 mb-2">البريد الإلكتروني</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600 focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block text-gray-700 mb-2">الموضوع</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600 focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 mb-2">الرسالة</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-600 focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-green-600 text-white py-3 rounded-lg font-bold hover:bg-green-700 transition">إرسال الرسالة</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Problem Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">ما المشكلة البيئية التي نحلها؟</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto">التصحر وانخفاض المساحات الخضراء في المدن يؤدي إلى تدهور جودة الهواء وارتفاع درجات الحرارة</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm"> | |
| <div class="text-green-600 text-4xl mb-4"> | |
| <i class="fas fa-temperature-high"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">ارتفاع درجات الحرارة</h3> | |
| <p class="text-gray-600">المدن الحضرية أكثر دفئًا بمقدار 1-3°C من المناطق الريفية المحيطة بها</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm"> | |
| <div class="text-green-600 text-4xl mb-4"> | |
| <i class="fas fa-wind"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">تلوث الهواء</h3> | |
| <p class="text-gray-600">الأشجار يمكنها امتصاص ما يصل إلى 48 رطل من ثاني أكسيد الكربون سنويًا</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-sm"> | |
| <div class="text-green-600 text-4xl mb-4"> | |
| <i class="fas fa-tint"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">نقص المياه</h3> | |
| <p class="text-gray-600">الأشجار الذكية توفر ما يصل إلى 30% من استهلاك المياه في عمليات الري</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-green-50 rounded-xl p-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-6 md:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" | |
| alt="Green City" class="rounded-lg shadow-md w-full"> | |
| </div> | |
| <div class="md:w-1/2 md:pr-8"> | |
| <h3 class="text-2xl font-bold text-green-700 mb-4">الحل: التشجير الذكي</h3> | |
| <p class="text-gray-700 mb-4">باستخدام الذكاء الاصطناعي، نحدد أفضل الأماكن لزراعة الأشجار ونختار الأنواع المناسبة لكل منطقة بناءً على الظروف البيئية</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>زيادة المساحات الخضراء بنسبة 40%</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>خفض درجات الحرارة بمقدار 2-4°C</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>تحسين جودة الهواء بنسبة 30%</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="inline-block bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-full transition duration-300"> | |
| تعرف على المزيد | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-16 bg-gray-50 leaf-pattern"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">كيف تعمل منصة GreenAI؟</h2> | |
| <p class="text-gray-600 max-w-3xl mx-auto">نستخدم أحدث تقنيات الذكاء الاصطناعي لتحقيق أقصى تأثير بيئي</p> | |
| </div> | |
| <div class="grid md:grid-cols-4 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center"> | |
| <div class="text-green-600 text-4xl mb-4"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">1. تحليل الموقع</h3> | |
| <p class="text-gray-600">نحدد أفضل المواقع لزراعة الأشجار بناءً على البيانات البيئية</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center"> | |
| <div class="text-green-600 text-4xl mb-4"> | |
| <i class="fas fa-tree"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">2. اختيار الشجرة</h3> | |
| <p class="text-gray-600">نختار نوع الشجرة الأمثل لكل موقع بناءً على الظروف المحلية</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center"> | |
| <div class="text-green-600 text-4xl mb-4"> | |
| <i class="fas fa-tint"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">3. الري الذكي</h3> | |
| <p class="text-gray-600">نظام ري ذكي يحافظ على المياه ويضمن نموًا صحيًا للأشجار</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center"> | |
| <div class="text-green-600 text-4xl mb-4"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">4. المتابعة</h3> | |
| <p class="text-gray-600">نراقب نمو الأشجار ونقدم تقارير دورية عن التأثير البيئي</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#" class="inline-block border-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white font-medium py-2 px-8 rounded-full transition duration-300"> | |
| شاهد الفيديو التوضيحي | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-16 bg-green-700 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">أرقامنا تتحدث</h2> | |
| <p class="max-w-3xl mx-auto opacity-90">إنجازاتنا في تحويل المدن إلى مساحات خضراء أكثر استدامة</p> | |
| </div> | |
| <div class="grid md:grid-cols-4 gap-6"> | |
| <div class="stats-card bg-green-600 p-6 rounded-xl text-center transition duration-300"> | |
| <div class="text-4xl font-bold mb-2">12,845</div> | |
| <div class="text-green-100">شجرة مزروعة</div> | |
| </div> | |
| <div class="stats-card bg-green-600 p-6 rounded-xl text-center transition duration-300"> | |
| <div class="text-4xl font-bold mb-2">24</div> | |
| <div class="text-green-100">مدينة مشاركة</div> | |
| </div> | |
| <div class="stats-card bg-green-600 p-6 rounded-xl text-center transition duration-300"> | |
| <div class="text-4xl font-bold mb-2">2.5°C</div> | |
| <div class="text-green-100">انخفاض في الحرارة</div> | |
| </div> | |
| <div class="stats-card bg-green-600 p-6 rounded-xl text-center transition duration-300"> | |
| <div class="text-4xl font-bold mb-2">8,450</div> | |
| <div class="text-green-100">متطوع مشارك</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-green-50 leaf-pattern"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 p-8 md:p-12"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">انضم إلى حركتنا الخضراء</h2> | |
| <p class="text-gray-600 mb-6">سجل الآن وكن جزءًا من التغيير الإيجابي في مدينتك</p> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">الاسم</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label for="role" class="block text-sm font-medium text-gray-700 mb-1">كيف تريد المشاركة؟</label> | |
| <select id="role" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"> | |
| <option>متطوع فردي</option> | |
| <option>مدرسة/جامعة</option> | |
| <option>جهة حكومية</option> | |
| <option>شركة/مؤسسة</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition duration-300"> | |
| سجل الآن | |
| </button> | |
| </form> | |
| </div> | |
| <div class="md:w-1/2 bg-green-600 text-white p-8 md:p-12 flex flex-col justify-center"> | |
| <h3 class="text-2xl font-bold mb-4">اعتمد شجرة اليوم</h3> | |
| <p class="mb-6 opacity-90">بمبلغ رمزي، يمكنك اعتماد شجرة وسنقوم بزراعتها والعناية بها وإرسال تحديثات دورية عن نموها</p> | |
| <div class="bg-green-700 rounded-lg p-4 mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">حزمة الأساسية</span> | |
| <span class="font-bold">150 ر.س</span> | |
| </div> | |
| <ul class="text-sm space-y-1"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mt-1 mr-2 text-green-300"></i> | |
| <span>شجرة واحدة مع لوحة اسمك</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mt-1 mr-2 text-green-300"></i> | |
| <span>تحديثات شهرية بالصور</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check mt-1 mr-2 text-green-300"></i> | |
| <span>شهادة مشاركة إلكترونية</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <a href="#" class="inline-block bg-white hover:bg-gray-100 text-green-700 font-medium py-2 px-6 rounded-md transition duration-300 text-center"> | |
| اعتمد شجرة الآن | |
| </a> | |
| </div> | |
| </div> | |
| </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-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">G</div> | |
| <h3 class="text-xl font-bold">GreenAI</h3> | |
| </div> | |
| <p class="text-gray-400">منصة ذكية لتشجير المدن وتحسين البيئة الحضرية باستخدام الذكاء الاصطناعي</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">روابط سريعة</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">الرئيسية</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">المميزات</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">كيف تعمل</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">لوحة البيانات</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">تواصل معنا</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">الخدمات</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">تحليل مواقع التشجير</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">اختيار الأشجار</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">تتبع النمو</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">GreenBot</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">برامج الشراكة</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">النشرة البريدية</h4> | |
| <p class="text-gray-400 mb-4">اشترك ليصلك آخر أخبارنا وعروضنا</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="بريدك الإلكتروني" class="px-4 py-2 rounded-r-lg w-full focus:outline-none text-gray-800"> | |
| <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded-l-lg hover:bg-green-700 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="text-gray-400 mb-4 md:mb-0"> | |
| © 2023 GreenAI. جميع الحقوق محفوظة. | |
| </div> | |
| <div class="flex space-x-6 space-x-reverse"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">شروط الخدمة</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">سياسة الخصوصية</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Animated counters | |
| function animateCounters() { | |
| const counters = document.querySelectorAll('.animated-counter'); | |
| const speed = 200; | |
| counters.forEach(counter => { | |
| const target = +counter.getAttribute('data-target'); | |
| const count = +counter.innerText; | |
| const increment = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(animateCounters, 1); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| }); | |
| } | |
| // Hero section counters | |
| function animateHeroCounters() { | |
| const treeCounter = document.getElementById('tree-counter'); | |
| const co2Counter = document.getElementById('co2-counter'); | |
| let treeCount = 0; | |
| let co2Count = 0; | |
| const treeInterval = setInterval(() => { | |
| treeCount += 2; | |
| treeCounter.innerText = treeCount; | |
| if (treeCount >= 24) clearInterval(treeInterval); | |
| }, 50); | |
| const co2Interval = setInterval(() => { | |
| co2Count += 0.5; | |
| co2Counter.innerText = co2Count.toFixed(1); | |
| if (co2Count >= 12.5) clearInterval(co2Interval); | |
| }, 50); | |
| } | |
| // Initialize animations when page loads | |
| window.addEventListener('load', function() { | |
| animateCounters(); | |
| // Animate hero counters when hero section is in view | |
| const observer = new IntersectionObserver((entries) => { | |
| if (entries[0].isIntersecting) { | |
| animateHeroCounters(); | |
| observer.unobserve(entries[0].target); | |
| } | |
| }, { threshold: 0.5 }); | |
| const heroSection = document.querySelector('.hero-gradient'); | |
| if (heroSection) { | |
| observer.observe(heroSection); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </html> |