Hugging Face's logo

Spaces:
wasmdashai
/
greenai-dash
Running

App Files Community
wasmdashai commited on
Commit
35d7963
·
verified ·
1 Parent(s): 72f3a14

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1018 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Greenai Dash
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: greenai-dash
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1018 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GreenAI - المنصة الذكية لتشجير المدن</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ body {
12
+ font-family: 'Tajawal', sans-serif;
13
+ }
14
+ .hero-gradient {
15
+ background: linear-gradient(135deg, rgba(61, 153, 112, 0.9) 0%, rgba(44, 122, 123, 0.9) 100%);
16
+ }
17
+ .tree-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .animated-counter {
22
+ transition: all 0.5s ease;
23
+ }
24
+ .map-container {
25
+ height: 400px;
26
+ background-color: #e5e7eb;
27
+ border-radius: 1rem;
28
+ overflow: hidden;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-50 text-gray-800">
33
+ <!-- Header -->
34
+ <header class="bg-white shadow-md">
35
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
36
+ <div class="flex items-center">
37
+ <div class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">G</div>
38
+ <h1 class="text-2xl font-bold text-green-600">GreenAI</h1>
39
+ </div>
40
+
41
+ <nav class="hidden md:flex space-x-6 space-x-reverse">
42
+ <a href="#home" class="text-green-600 font-medium">الرئيسية</a>
43
+ <a href="#features" class="text-gray-600 hover:text-green-600">المميزات</a>
44
+ <a href="#how-it-works" class="text-gray-600 hover:text-green-600">كيف تعمل</a>
45
+ <a href="#dashboard" class="text-gray-600 hover:text-green-600">لوحة البيانات</a>
46
+ <a href="#contact" class="text-gray-600 hover:text-green-600">تواصل معنا</a>
47
+ </nav>
48
+
49
+ <div class="flex items-center space-x-4 space-x-reverse">
50
+ <button class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">تسجيل الدخول</button>
51
+ <button class="md:hidden text-gray-600" id="mobile-menu-button">
52
+ <i class="fas fa-bars text-2xl"></i>
53
+ </button>
54
+ </div>
55
+ </div>
56
+
57
+ <!-- Mobile Menu -->
58
+ <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-lg" id="mobile-menu">
59
+ <a href="#home" class="block py-2 text-green-600 font-medium">الرئيسية</a>
60
+ <a href="#features" class="block py-2 text-gray-600">المميزات</a>
61
+ <a href="#how-it-works" class="block py-2 text-gray-600">كيف تعمل</a>
62
+ <a href="#dashboard" class="block py-2 text-gray-600">لوحة البيانات</a>
63
+ <a href="#contact" class="block py-2 text-gray-600">تواصل معنا</a>
64
+ </div>
65
+ </header>
66
+
67
+ <!-- Hero Section -->
68
+ <section id="home" class="hero-gradient text-white py-20">
69
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
70
+ <div class="md:w-1/2 mb-10 md:mb-0">
71
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">دع المدن تتنفس مع GreenAI</h1>
72
+ <p class="text-xl mb-8">منصة ذكية تعتمد على الذكاء الاصطناعي لاختيار أفضل مواقع التشجير وتتبع نمو الأشجار لمدن أكثر استدامة</p>
73
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 sm:space-x-reverse">
74
+ <button class="bg-white text-green-600 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition">جرب المنصة الآن</button>
75
+ <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>
76
+ </div>
77
+ </div>
78
+ <div class="md:w-1/2 flex justify-center">
79
+ <div class="relative w-full max-w-md">
80
+ <div class="bg-white/20 backdrop-blur-md rounded-xl p-6 shadow-xl">
81
+ <div class="text-center mb-4">
82
+ <h3 class="font-bold text-xl">تحليل الذكاء الاصطناعي لشارعك</h3>
83
+ </div>
84
+ <div class="map-container mb-4"></div>
85
+ <div class="grid grid-cols-2 gap-4">
86
+ <div class="bg-white/30 p-3 rounded-lg text-center">
87
+ <div class="text-2xl font-bold mb-1" id="tree-counter">0</div>
88
+ <div class="text-sm">أشجار مقترحة</div>
89
+ </div>
90
+ <div class="bg-white/30 p-3 rounded-lg text-center">
91
+ <div class="text-2xl font-bold mb-1" id="co2-counter">0</div>
92
+ <div class="text-sm">طن CO2 سيتم امتصاصه</div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </section>
100
+
101
+ <!-- Stats Section -->
102
+ <section class="bg-gray-100 py-12">
103
+ <div class="container mx-auto px-4">
104
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
105
+ <div class="bg-white p-6 rounded-xl shadow-sm">
106
+ <div class="text-green-600 text-3xl mb-2">
107
+ <i class="fas fa-tree"></i>
108
+ </div>
109
+ <div class="text-3xl font-bold mb-1 animated-counter" data-target="12500">0</div>
110
+ <div class="text-gray-600">شجرة مزروعة</div>
111
+ </div>
112
+ <div class="bg-white p-6 rounded-xl shadow-sm">
113
+ <div class="text-green-600 text-3xl mb-2">
114
+ <i class="fas fa-city"></i>
115
+ </div>
116
+ <div class="text-3xl font-bold mb-1 animated-counter" data-target="42">0</div>
117
+ <div class="text-gray-600">حي مشجر</div>
118
+ </div>
119
+ <div class="bg-white p-6 rounded-xl shadow-sm">
120
+ <div class="text-green-600 text-3xl mb-2">
121
+ <i class="fas fa-temperature-low"></i>
122
+ </div>
123
+ <div class="text-3xl font-bold mb-1 animated-counter" data-target="3.5">0</div>
124
+ <div class="text-gray-600">درجة مئوية انخفاض في الحرارة</div>
125
+ </div>
126
+ <div class="bg-white p-6 rounded-xl shadow-sm">
127
+ <div class="text-green-600 text-3xl mb-2">
128
+ <i class="fas fa-users"></i>
129
+ </div>
130
+ <div class="text-3xl font-bold mb-1 animated-counter" data-target="8500">0</div>
131
+ <div class="text-gray-600">متطوع</div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </section>
136
+
137
+ <!-- Features Section -->
138
+ <section id="features" class="py-20 bg-white">
139
+ <div class="container mx-auto px-4">
140
+ <div class="text-center mb-16">
141
+ <h2 class="text-3xl font-bold mb-4">حلولنا الذكية لتشجير المدن</h2>
142
+ <p class="text-gray-600 max-w-2xl mx-auto">نقدم مجموعة من الحلول المبتكرة المدعومة بالذكاء الاصطناعي لتحقيق أقصى استفادة من التشجير الحضري</p>
143
+ </div>
144
+
145
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
146
+ <!-- Feature 1 -->
147
+ <div class="tree-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
148
+ <div class="text-green-600 text-4xl mb-4">
149
+ <i class="fas fa-map-marked-alt"></i>
150
+ </div>
151
+ <h3 class="text-xl font-bold mb-3">التنبؤ بمواقع التشجير</h3>
152
+ <p class="text-gray-600">نظام ذكي يحلل بيانات الحرارة والتلوث والازدحام لتحديد أفضل المواقع لزراعة الأشجار</p>
153
+ </div>
154
+
155
+ <!-- Feature 2 -->
156
+ <div class="tree-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
157
+ <div class="text-green-600 text-4xl mb-4">
158
+ <i class="fas fa-seedling"></i>
159
+ </div>
160
+ <h3 class="text-xl font-bold mb-3">اختيار نوع الشجرة</h3>
161
+ <p class="text-gray-600">اقتراح أنواع الأشجار المناسبة لكل موقع بناءً على التربة والمناخ والمساحة المتاحة</p>
162
+ </div>
163
+
164
+ <!-- Feature 3 -->
165
+ <div class="tree-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
166
+ <div class="text-green-600 text-4xl mb-4">
167
+ <i class="fas fa-satellite-dish"></i>
168
+ </div>
169
+ <h3 class="text-xl font-bold mb-3">تتبع النمو والصحة</h3>
170
+ <p class="text-gray-600">مراقبة نمو الأشجار وصحتها باستخدام تحليل الصور والأقمار الصناعية والطائرات المسيرة</p>
171
+ </div>
172
+
173
+ <!-- Feature 4 -->
174
+ <div class="tree-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
175
+ <div class="text-green-600 text-4xl mb-4">
176
+ <i class="fas fa-robot"></i>
177
+ </div>
178
+ <h3 class="text-xl font-bold mb-3">مساعد ذكي بيئي</h3>
179
+ <p class="text-gray-600">GreenBot يساعدك في الإجابة على استفساراتك البيئية ويقدم نصائح شخصية لرعاية الأشجار</p>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </section>
184
+
185
+ <!-- How It Works Section -->
186
+ <section id="how-it-works" class="py-20 bg-gray-100">
187
+ <div class="container mx-auto px-4">
188
+ <div class="text-center mb-16">
189
+ <h2 class="text-3xl font-bold mb-4">كيف تعمل منصة GreenAI؟</h2>
190
+ <p class="text-gray-600 max-w-2xl mx-auto">عملية بسيطة من ثلاث خطوات لتحويل شوارع مدينتك إلى مساحات خضراء مستدامة</p>
191
+ </div>
192
+
193
+ <div class="flex flex-col md:flex-row items-center justify-between">
194
+ <!-- Step 1 -->
195
+ <div class="flex flex-col items-center mb-10 md:mb-0 w-full md:w-1/3 px-6">
196
+ <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>
197
+ <h3 class="text-xl font-bold mb-3 text-center">تحليل البيانات البيئية</h3>
198
+ <p class="text-gray-600 text-center">يقوم الذكاء الاصطناعي بتحليل خرائط الحرارة، بيانات التلوث، نوع التربة، والبيانات المناخية</p>
199
+ </div>
200
+
201
+ <!-- Arrow -->
202
+ <div class="hidden md:block text-green-600 text-3xl mb-10">
203
+ <i class="fas fa-arrow-left"></i>
204
+ </div>
205
+
206
+ <!-- Step 2 -->
207
+ <div class="flex flex-col items-center mb-10 md:mb-0 w-full md:w-1/3 px-6">
208
+ <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>
209
+ <h3 class="text-xl font-bold mb-3 text-center">اقتراح خطة التشجير</h3>
210
+ <p class="text-gray-600 text-center">يقدم النظام تقريرًا مفصلًا بأفضل المواقع وأنواع الأشجار الموصى بها مع خطة التنفيذ</p>
211
+ </div>
212
+
213
+ <!-- Arrow -->
214
+ <div class="hidden md:block text-green-600 text-3xl mb-10">
215
+ <i class="fas fa-arrow-left"></i>
216
+ </div>
217
+
218
+ <!-- Step 3 -->
219
+ <div class="flex flex-col items-center w-full md:w-1/3 px-6">
220
+ <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>
221
+ <h3 class="text-xl font-bold mb-3 text-center">التنفيذ والمتابعة</h3>
222
+ <p class="text-gray-600 text-center">بعد الزراعة، يتم متابعة نمو الأشجار وصحتها آليًا وإرسال تقارير دورية</p>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </section>
227
+
228
+ <!-- Dashboard Preview -->
229
+ <section id="dashboard" class="py-20 bg-white">
230
+ <div class="container mx-auto px-4">
231
+ <div class="text-center mb-16">
232
+ <h2 class="text-3xl font-bold mb-4">لوحة بيانات الاستدامة</h2>
233
+ <p class="text-gray-600 max-w-2xl mx-auto">تابع تأثير التشجير على بيئة مدينتك عبر لوحة البيانات التفاعلية</p>
234
+ </div>
235
+
236
+ <div class="bg-gray-50 rounded-xl shadow-md overflow-hidden">
237
+ <div class="p-6 border-b border-gray-200 flex justify-between items-center">
238
+ <h3 class="text-xl font-bold">لوحة تحليل منطقة الرياض</h3>
239
+ <div class="flex space-x-3 space-x-reverse">
240
+ <button class="px-4 py-2 bg-green-600 text-white rounded-lg">2023</button>
241
+ <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg">2022</button>
242
+ <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg">2021</button>
243
+ </div>
244
+ </div>
245
+
246
+ <div class="p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
247
+ <!-- Map -->
248
+ <div class="lg:col-span-2">
249
+ <div class="map-container">
250
+ <!-- This would be replaced with an actual map in production -->
251
+ <div class="w-full h-full flex items-center justify-center bg-green-50">
252
+ <div class="text-center">
253
+ <i class="fas fa-map-marked-alt text-5xl text-green-200 mb-4"></i>
254
+ <p class="text-green-400 font-medium">خريطة تفاعلية تظهر مناطق التشجير</p>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Stats -->
261
+ <div class="space-y-6">
262
+ <div class="bg-white p-4 rounded-lg shadow-sm">
263
+ <h4 class="font-bold mb-3">تأثير التشجير على الحرارة</h4>
264
+ <div class="h-40">
265
+ <!-- Chart placeholder -->
266
+ <div class="w-full h-full flex items-center justify-center bg-blue-50 rounded">
267
+ <div class="text-center">
268
+ <i class="fas fa-chart-line text-3xl text-blue-200 mb-2"></i>
269
+ <p class="text-blue-400 text-sm">انخفاض درجات الحرارة في المناطق المشجرة</p>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="bg-white p-4 rounded-lg shadow-sm">
276
+ <h4 class="font-bold mb-3">جودة الهواء</h4>
277
+ <div class="h-40">
278
+ <!-- Chart placeholder -->
279
+ <div class="w-full h-full flex items-center justify-center bg-purple-50 rounded">
280
+ <div class="text-center">
281
+ <i class="fas fa-wind text-3xl text-purple-200 mb-2"></i>
282
+ <p class="text-purple-400 text-sm">تحسن في جودة الهواء بعد التشجير</p>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="p-6 bg-gray-50 border-t border-gray-200">
291
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
292
+ <div>
293
+ <div class="text-lg font-bold text-green-600">1,250</div>
294
+ <div class="text-sm text-gray-500">شجرة مزروعة هذا العام</div>
295
+ </div>
296
+ <div>
297
+ <div class="text-lg font-bold text-green-600">2.3°C</div>
298
+ <div class="text-sm text-gray-500">انخفاض في الحرارة</div>
299
+ </div>
300
+ <div>
301
+ <div class="text-lg font-bold text-green-600">15%</div>
302
+ <div class="text-sm text-gray-500">تحسن في جودة الهواء</div>
303
+ </div>
304
+ <div>
305
+ <div class="text-lg font-bold text-green-600">85%</div>
306
+ <div class="text-sm text-gray-500">معدل نجاح الأشجار</div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <div class="mt-10 text-center">
313
+ <button class="bg-green-600 text-white px-8 py-3 rounded-lg font-bold hover:bg-green-700 transition">تصفح لوحة البيانات الكاملة</button>
314
+ </div>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- GreenBot Section -->
319
+ <section class="py-20 bg-green-600 text-white">
320
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
321
+ <div class="md:w-1/2 mb-10 md:mb-0">
322
+ <h2 class="text-3xl font-bold mb-6">GreenBot - مساعدك الذكي البيئي</h2>
323
+ <p class="text-xl mb-8">اطرح أي سؤال حول التشجير، رعاية الأشجار، أو تأثير التشجير على البيئة وسيجيبك GreenBot فورًا</p>
324
+
325
+ <div class="bg-white/20 p-4 rounded-lg mb-6">
326
+ <div class="flex space-x-3 space-x-reverse">
327
+ <div class="w-10 h-10 bg-white/30 rounded-full flex items-center justify-center">
328
+ <i class="fas fa-user"></i>
329
+ </div>
330
+ <div class="flex-1">
331
+ <div class="font-bold mb-1">أنت</div>
332
+ <div>ما هي أفضل الأشجار لزراعتها في الرياض؟</div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="bg-white/30 p-4 rounded-lg">
338
+ <div class="flex space-x-3 space-x-reverse">
339
+ <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-green-600">
340
+ <i class="fas fa-robot"></i>
341
+ </div>
342
+ <div class="flex-1">
343
+ <div class="font-bold mb-1">GreenBot</div>
344
+ <div>للمناخ الحار في الرياض، أنصح بأشجار السدر، النخيل، الأثل، واللبخ. هذه الأشجار تتحمل الحرارة وتستهلك ماءً أقل.</div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <div class="md:w-1/2 flex justify-center">
351
+ <div class="bg-white/20 backdrop-blur-md rounded-xl p-8 max-w-md w-full">
352
+ <h3 class="text-xl font-bold mb-6 text-center">جرّب GreenBot الآن</h3>
353
+ <div class="mb-4">
354
+ <textarea class="w-full p-3 rounded-lg bg-white/90 text-gray-800" rows="4" placeholder="اطرح سؤالك عن التشجير والبيئة..."></textarea>
355
+ </div>
356
+ <button class="w-full bg-white text-green-600 py-3 rounded-lg font-bold hover:bg-gray-100 transition">إرسال السؤال</button>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </section>
361
+
362
+ <!-- Partners Section -->
363
+ <section class="py-16 bg-gray-100">
364
+ <div class="container mx-auto px-4">
365
+ <div class="text-center mb-12">
366
+ <h2 class="text-3xl font-bold mb-4">شركاؤنا في الاستدامة</h2>
367
+ <p class="text-gray-600 max-w-2xl mx-auto">نتعاون مع جهات حكومية وخاصة لتحقيق رؤيتنا في مدن أكثر خضرة</p>
368
+ </div>
369
+
370
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
371
+ <div class="bg-white p-6 rounded-xl shadow-sm flex items-center justify-center">
372
+ <div class="text-3xl text-gray-400 font-bold">وزارة البيئة</div>
373
+ </div>
374
+ <div class="bg-white p-6 rounded-xl shadow-sm flex items-center justify-center">
375
+ <div class="text-3xl text-gray-400 font-bold">أمانة الرياض</div>
376
+ </div>
377
+ <div class="bg-white p-6 rounded-xl shadow-sm flex items-center justify-center">
378
+ <div class="text-3xl text-gray-400 font-bold">سابك</div>
379
+ </div>
380
+ <div class="bg-white p-6 rounded-xl shadow-sm flex items-center justify-center">
381
+ <div class="text-3xl text-gray-400 font-bold">الرؤية 2030</div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </section>
386
+
387
+ <!-- CTA Section -->
388
+ <section class="py-20 bg-white">
389
+ <div class="container mx-auto px-4 text-center">
390
+ <h2 class="text-3xl font-bold mb-6">انضم إلى مستقبل أكثر اخضرارًا</h2>
391
+ <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">سواء كنت بلدية، شركة، أو مواطنًا مهتمًا، يمكنك المساهمة في تشجير مدينتك</p>
392
+
393
+ <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">
394
+ <button class="bg-green-600 text-white px-8 py-3 rounded-lg font-bold hover:bg-green-700 transition">سجل كشريك</button>
395
+ <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>
396
+ <button class="border-2 border-gray-300 text-gray-600 px-8 py-3 rounded-lg font-bold hover:bg-gray-100 transition">تواصل معنا</button>
397
+ </div>
398
+ </div>
399
+ </section>
400
+
401
+ <!-- Contact Section -->
402
+ <section id="contact" class="py-20 bg-gray-100">
403
+ <div class="container mx-auto px-4">
404
+ <div class="grid md:grid-cols-2 gap-12">
405
+ <div>
406
+ <h2 class="text-3xl font-bold mb-6">تواصل مع فريق GreenAI</h2>
407
+ <p class="text-gray-600 mb-8">لديك استفسار أو ترغب في التعاون معنا؟ تواصل معنا وسنكون سعداء بمساع��تك</p>
408
+
409
+ <div class="space-y-6">
410
+ <div class="flex items-start space-x-4 space-x-reverse">
411
+ <div class="text-green-600 text-xl mt-1">
412
+ <i class="fas fa-map-marker-alt"></i>
413
+ </div>
414
+ <div>
415
+ <h4 class="font-bold">العنوان</h4>
416
+ <p class="text-gray-600">الرياض، المملكة العربية السعودية</p>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="flex items-start space-x-4 space-x-reverse">
421
+ <div class="text-green-600 text-xl mt-1">
422
+ <i class="fas fa-envelope"></i>
423
+ </div>
424
+ <div>
425
+ <h4 class="font-bold">البريد الإلكتروني</h4>
426
+ <p class="text-gray-600">[email protected]</p>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="flex items-start space-x-4 space-x-reverse">
431
+ <div class="text-green-600 text-xl mt-1">
432
+ <i class="fas fa-phone-alt"></i>
433
+ </div>
434
+ <div>
435
+ <h4 class="font-bold">الهاتف</h4>
436
+ <p class="text-gray-600">+966 11 123 4567</p>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <div class="mt-8">
442
+ <h4 class="font-bold mb-4">تابعنا على</h4>
443
+ <div class="flex space-x-4 space-x-reverse">
444
+ <a href="#" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700 transition">
445
+ <i class="fab fa-twitter"></i>
446
+ </a>
447
+ <a href="#" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700 transition">
448
+ <i class="fab fa-linkedin-in"></i>
449
+ </a>
450
+ <a href="#" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700 transition">
451
+ <i class="fab fa-instagram"></i>
452
+ </a>
453
+ <a href="#" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700 transition">
454
+ <i class="fab fa-youtube"></i>
455
+ </a>
456
+ </div>
457
+ </div>
458
+ </div>
459
+
460
+ <div>
461
+ <div class="bg-white p-8 rounded-xl shadow-sm">
462
+ <h3 class="text-xl font-bold mb-6">أرسل رسالة</h3>
463
+ <form>
464
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
465
+ <div>
466
+ <label for="name" class="block text-gray-700 mb-2">الاسم</label>
467
+ <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">
468
+ </div>
469
+ <div>
470
+ <label for="email" class="block text-gray-700 mb-2">البريد الإلكتروني</label>
471
+ <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">
472
+ </div>
473
+ </div>
474
+ <div class="mb-6">
475
+ <label for="subject" class="block text-gray-700 mb-2">الموضوع</label>
476
+ <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">
477
+ </div>
478
+ <div class="mb-6">
479
+ <label for="message" class="block text-gray-700 mb-2">الرسالة</label>
480
+ <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>
481
+ </div>
482
+ <button type="submit" class="w-full bg-green-600 text-white py-3 rounded-lg font-bold hover:bg-green-700 transition">��رسال الرسالة</button>
483
+ </form>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </section>
489
+ <!-- Hero Section -->
490
+ <section class="hero-bg text-white py-20 md:py-32 leaf-pattern">
491
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
492
+ <div class="text-center">
493
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">ازرع المستقبل مع <span class="text-green-300">GreenAI</span></h1>
494
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">منصة الذكاء الاصطناعي الرائدة لتحويل المدن إلى مساحات خضراء مستدامة</p>
495
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
496
+ <a href="#" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
497
+ ابدأ الآن
498
+ </a>
499
+ <a href="#" class="bg-white hover:bg-gray-100 text-green-700 font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
500
+ اعتمد شجرة
501
+ </a>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </section>
506
+
507
+ <!-- Problem Section -->
508
+ <section class="py-16 bg-white">
509
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
510
+ <div class="text-center mb-12">
511
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">ما المشكلة البيئية التي نحلها؟</h2>
512
+ <p class="text-gray-600 max-w-3xl mx-auto">التصحر وانخفاض المساحات الخضراء في المدن يؤدي إلى تدهور جودة الهواء وارتفاع درجات الحرارة</p>
513
+ </div>
514
+
515
+ <div class="grid md:grid-cols-3 gap-8">
516
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
517
+ <div class="text-green-600 text-4xl mb-4">
518
+ <i class="fas fa-temperature-high"></i>
519
+ </div>
520
+ <h3 class="text-xl font-bold mb-2">ارتفاع درجات الحرارة</h3>
521
+ <p class="text-gray-600">المدن الحضرية أكثر دفئًا بمقدار 1-3°C من المناطق الريفية المحيطة بها</p>
522
+ </div>
523
+
524
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
525
+ <div class="text-green-600 text-4xl mb-4">
526
+ <i class="fas fa-wind"></i>
527
+ </div>
528
+ <h3 class="text-xl font-bold mb-2">تلوث الهواء</h3>
529
+ <p class="text-gray-600">الأشجار يمكنها امتصاص ما يصل إلى 48 رطل من ثاني أكسيد الكربون سنويًا</p>
530
+ </div>
531
+
532
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
533
+ <div class="text-green-600 text-4xl mb-4">
534
+ <i class="fas fa-tint"></i>
535
+ </div>
536
+ <h3 class="text-xl font-bold mb-2">نقص المياه</h3>
537
+ <p class="text-gray-600">الأشجار الذكية توفر ما يصل إلى 30% من استهلاك المياه في عمليات الري</p>
538
+ </div>
539
+ </div>
540
+
541
+ <div class="mt-12 bg-green-50 rounded-xl p-6">
542
+ <div class="flex flex-col md:flex-row items-center">
543
+ <div class="md:w-1/2 mb-6 md:mb-0">
544
+ <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"
545
+ alt="Green City" class="rounded-lg shadow-md w-full">
546
+ </div>
547
+ <div class="md:w-1/2 md:pr-8">
548
+ <h3 class="text-2xl font-bold text-green-700 mb-4">الحل: التشجير الذكي</h3>
549
+ <p class="text-gray-700 mb-4">باستخدام الذكاء الاصطناعي، نحدد أفضل الأماكن لزراعة الأشجار ونختار الأنواع المناسبة لكل منطقة بناءً على الظروف البيئية</p>
550
+ <ul class="space-y-2 mb-6">
551
+ <li class="flex items-start">
552
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
553
+ <span>زيادة المساحات الخضراء بنسبة 40%</span>
554
+ </li>
555
+ <li class="flex items-start">
556
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
557
+ <span>خفض درجات الحرارة بمقدار 2-4°C</span>
558
+ </li>
559
+ <li class="flex items-start">
560
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
561
+ <span>تحسين جودة الهواء بنسبة 30%</span>
562
+ </li>
563
+ </ul>
564
+ <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">
565
+ تعرف على المزيد
566
+ </a>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </section>
572
+
573
+ <!-- How It Works -->
574
+ <section class="py-16 bg-gray-50 leaf-pattern">
575
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
576
+ <div class="text-center mb-12">
577
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">كيف تعمل منصة GreenAI؟</h2>
578
+ <p class="text-gray-600 max-w-3xl mx-auto">نستخدم أحدث تقنيات الذكاء الاصطناعي لتحقيق أقصى تأثير بيئي</p>
579
+ </div>
580
+
581
+ <div class="grid md:grid-cols-4 gap-6">
582
+ <div class="bg-white p-6 rounded-xl shadow-sm text-center">
583
+ <div class="text-green-600 text-4xl mb-4">
584
+ <i class="fas fa-map-marked-alt"></i>
585
+ </div>
586
+ <h3 class="text-xl font-bold mb-2">1. تحليل الموقع</h3>
587
+ <p class="text-gray-600">نحدد أفضل المواقع لزراعة الأشجار بناءً على البيانات البيئية</p>
588
+ </div>
589
+
590
+ <div class="bg-white p-6 rounded-xl shadow-sm text-center">
591
+ <div class="text-green-600 text-4xl mb-4">
592
+ <i class="fas fa-tree"></i>
593
+ </div>
594
+ <h3 class="text-xl font-bold mb-2">2. اختيار الشجرة</h3>
595
+ <p class="text-gray-600">نختار نوع الشجرة الأمثل لكل موقع بناءً على الظروف المحلية</p>
596
+ </div>
597
+
598
+ <div class="bg-white p-6 rounded-xl shadow-sm text-center">
599
+ <div class="text-green-600 text-4xl mb-4">
600
+ <i class="fas fa-tint"></i>
601
+ </div>
602
+ <h3 class="text-xl font-bold mb-2">3. الري الذكي</h3>
603
+ <p class="text-gray-600">نظام ري ذكي يحافظ على المياه ويضمن نموًا صحيًا للأشجار</p>
604
+ </div>
605
+
606
+ <div class="bg-white p-6 rounded-xl shadow-sm text-center">
607
+ <div class="text-green-600 text-4xl mb-4">
608
+ <i class="fas fa-chart-line"></i>
609
+ </div>
610
+ <h3 class="text-xl font-bold mb-2">4. المتابعة</h3>
611
+ <p class="text-gray-600">نراقب نمو الأشجار ونقدم تقارير دورية عن التأثير البيئي</p>
612
+ </div>
613
+ </div>
614
+
615
+ <div class="mt-12 text-center">
616
+ <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">
617
+ شاهد الفيديو التوضيحي
618
+ </a>
619
+ </div>
620
+ </div>
621
+ </section>
622
+
623
+ <!-- Smart Solutions -->
624
+ <section class="py-16 bg-white">
625
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
626
+ <div class="text-center mb-12">
627
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">حلولنا الذكية</h2>
628
+ <p class="text-gray-600 max-w-3xl mx-auto">تقنيات مبتكرة تجعل التشجير أكثر ذكاءً وفعالية</p>
629
+ </div>
630
+
631
+ <div class="grid md:grid-cols-2 gap-8">
632
+ <!-- Solution 1 -->
633
+ <div class="solution-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
634
+ <div class="flex items-start">
635
+ <div class="solution-icon text-green-600 text-4xl mr-4 transition duration-300">
636
+ <i class="fas fa-map-marked-alt"></i>
637
+ </div>
638
+ <div>
639
+ <h3 class="text-xl font-bold mb-2">AI TreeSpotter</h3>
640
+ <p class="text-gray-600 mb-4">خريطة ذكية تحدد أفضل المواقع لزراعة الأشجار بناءً على تحليل صور الأقمار الصناعية وبيانات جودة الهواء</p>
641
+ <a href="#" class="text-green-600 font-medium inline-flex items-center">
642
+ تعرف على المزيد
643
+ <i class="fas fa-arrow-left mr-2"></i>
644
+ </a>
645
+ </div>
646
+ </div>
647
+ </div>
648
+
649
+ <!-- Solution 2 -->
650
+ <div class="solution-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
651
+ <div class="flex items-start">
652
+ <div class="solution-icon text-green-600 text-4xl mr-4 transition duration-300">
653
+ <i class="fas fa-tree"></i>
654
+ </div>
655
+ <div>
656
+ <h3 class="text-xl font-bold mb-2">Smart Tree Recommender</h3>
657
+ <p class="text-gray-600 mb-4">نظام يوصي بأنواع الأشجار المثالية لكل منطقة بناءً على التربة والمناخ واستهلاك المياه</p>
658
+ <a href="#" class="text-green-600 font-medium inline-flex items-center">
659
+ تعرف على المزيد
660
+ <i class="fas fa-arrow-left mr-2"></i>
661
+ </a>
662
+ </div>
663
+ </div>
664
+ </div>
665
+
666
+ <!-- Solution 3 -->
667
+ <div class="solution-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
668
+ <div class="flex items-start">
669
+ <div class="solution-icon text-green-600 text-4xl mr-4 transition duration-300">
670
+ <i class="fas fa-camera-retro"></i>
671
+ </div>
672
+ <div>
673
+ <h3 class="text-xl font-bold mb-2">TreeTrack AI</h3>
674
+ <p class="text-gray-600 mb-4">تحليل صور الأشجار المزروعة لتقييم صحتها ونموها باستخدام رؤية الحاسوب</p>
675
+ <a href="#" class="text-green-600 font-medium inline-flex items-center">
676
+ تعرف على المزيد
677
+ <i class="fas fa-arrow-left mr-2"></i>
678
+ </a>
679
+ </div>
680
+ </div>
681
+ </div>
682
+
683
+ <!-- Solution 4 -->
684
+ <div class="solution-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
685
+ <div class="flex items-start">
686
+ <div class="solution-icon text-green-600 text-4xl mr-4 transition duration-300">
687
+ <i class="fas fa-robot"></i>
688
+ </div>
689
+ <div>
690
+ <h3 class="text-xl font-bold mb-2">GreenBot</h3>
691
+ <p class="text-gray-600 mb-4">مساعد ذكي يجيب على أسئلتك حول التشجير والعناية بالأشجار</p>
692
+ <a href="#" class="text-green-600 font-medium inline-flex items-center">
693
+ جربه الآن
694
+ <i class="fas fa-arrow-left mr-2"></i>
695
+ </a>
696
+ </div>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ </div>
701
+ </section>
702
+
703
+ <!-- Stats Section -->
704
+ <section class="py-16 bg-green-700 text-white">
705
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
706
+ <div class="text-center mb-12">
707
+ <h2 class="text-3xl font-bold mb-4">أرقامنا تتحدث</h2>
708
+ <p class="max-w-3xl mx-auto opacity-90">إنجازاتنا في تحويل المدن إلى مساحات خضراء أكثر استدامة</p>
709
+ </div>
710
+
711
+ <div class="grid md:grid-cols-4 gap-6">
712
+ <div class="stats-card bg-green-600 p-6 rounded-xl text-center transition duration-300">
713
+ <div class="text-4xl font-bold mb-2">12,845</div>
714
+ <div class="text-green-100">شجرة مزروعة</div>
715
+ </div>
716
+
717
+ <div class="stats-card bg-green-600 p-6 rounded-xl text-center transition duration-300">
718
+ <div class="text-4xl font-bold mb-2">24</div>
719
+ <div class="text-green-100">مدينة مشاركة</div>
720
+ </div>
721
+
722
+ <div class="stats-card bg-green-600 p-6 rounded-xl text-center transition duration-300">
723
+ <div class="text-4xl font-bold mb-2">2.5°C</div>
724
+ <div class="text-green-100">انخفاض في الحرارة</div>
725
+ </div>
726
+
727
+ <div class="stats-card bg-green-600 p-6 rounded-xl text-center transition duration-300">
728
+ <div class="text-4xl font-bold mb-2">8,450</div>
729
+ <div class="text-green-100">متطوع مشارك</div>
730
+ </div>
731
+ </div>
732
+ </div>
733
+ </section>
734
+
735
+ <!-- Testimonials -->
736
+ <section class="py-16 bg-white">
737
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
738
+ <div class="text-center mb-12">
739
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">آراء شركائنا</h2>
740
+ <p class="text-gray-600 max-w-3xl mx-auto">ما يقوله عنا الشركاء والمتطوعون</p>
741
+ </div>
742
+
743
+ <div class="grid md:grid-cols-3 gap-8">
744
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
745
+ <div class="flex items-center mb-4">
746
+ <div class="text-yellow-400 mr-2">
747
+ <i class="fas fa-star"></i>
748
+ <i class="fas fa-star"></i>
749
+ <i class="fas fa-star"></i>
750
+ <i class="fas fa-star"></i>
751
+ <i class="fas fa-star"></i>
752
+ </div>
753
+ </div>
754
+ <p class="text-gray-700 mb-4">"بفضل GreenAI، استطعنا زيادة المساحات الخضراء في منطقتنا بنسبة 30% خلال عام واحد فقط."</p>
755
+ <div class="flex items-center">
756
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Person" class="w-10 h-10 rounded-full mr-3">
757
+ <div>
758
+ <div class="font-medium">سارة أحمد</div>
759
+ <div class="text-sm text-gray-500">رئيسة جمعية البيئة</div>
760
+ </div>
761
+ </div>
762
+ </div>
763
+
764
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
765
+ <div class="flex items-center mb-4">
766
+ <div class="text-yellow-400 mr-2">
767
+ <i class="fas fa-star"></i>
768
+ <i class="fas fa-star"></i>
769
+ <i class="fas fa-star"></i>
770
+ <i class="fas fa-star"></i>
771
+ <i class="fas fa-star"></i>
772
+ </div>
773
+ </div>
774
+ <p class="text-gray-700 mb-4">"التقنيات الذكية التي تقدمها المنصة ساعدتنا في توفير 40% من مياه الري مع ضمان نمو صحي للأشجار."</p>
775
+ <div class="flex items-center">
776
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Person" class="w-10 h-10 rounded-full mr-3">
777
+ <div>
778
+ <div class="font-medium">محمد الخالد</div>
779
+ <div class="text-sm text-gray-500">مدير بلدية الرياض</div>
780
+ </div>
781
+ </div>
782
+ </div>
783
+
784
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
785
+ <div class="flex items-center mb-4">
786
+ <div class="text-yellow-400 mr-2">
787
+ <i class="fas fa-star"></i>
788
+ <i class="fas fa-star"></i>
789
+ <i class="fas fa-star"></i>
790
+ <i class="fas fa-star"></i>
791
+ <i class="fas fa-star-half-alt"></i>
792
+ </div>
793
+ </div>
794
+ <p class="text-gray-700 mb-4">"كنت متطوعًا مع GreenAI لمدة عام، وشهدت بنفسي الفرق الكبير الذي أحدثوه في منطقتنا."</p>
795
+ <div class="flex items-center">
796
+ <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Person" class="w-10 h-10 rounded-full mr-3">
797
+ <div>
798
+ <div class="font-medium">نورة السعد</div>
799
+ <div class="text-sm text-gray-500">متطوعة</div>
800
+ </div>
801
+ </div>
802
+ </div>
803
+ </div>
804
+ </div>
805
+ </section>
806
+
807
+ <!-- CTA Section -->
808
+ <section class="py-16 bg-green-50 leaf-pattern">
809
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
810
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
811
+ <div class="flex flex-col md:flex-row">
812
+ <div class="md:w-1/2 p-8 md:p-12">
813
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">انضم إلى حركتنا الخضراء</h2>
814
+ <p class="text-gray-600 mb-6">سجل الآن وكن جزءًا من التغيير الإيجابي في مدينتك</p>
815
+
816
+ <form class="space-y-4">
817
+ <div>
818
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">الاسم</label>
819
+ <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">
820
+ </div>
821
+
822
+ <div>
823
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label>
824
+ <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">
825
+ </div>
826
+
827
+ <div>
828
+ <label for="role" class="block text-sm font-medium text-gray-700 mb-1">كيف تريد المشاركة؟</label>
829
+ <select id="role" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500">
830
+ <option>متطوع فردي</option>
831
+ <option>مدرسة/جامعة</option>
832
+ <option>جهة حكومية</option>
833
+ <option>شركة/مؤسسة</option>
834
+ </select>
835
+ </div>
836
+
837
+ <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">
838
+ سجل الآن
839
+ </button>
840
+ </form>
841
+ </div>
842
+
843
+ <div class="md:w-1/2 bg-green-600 text-white p-8 md:p-12 flex flex-col justify-center">
844
+ <h3 class="text-2xl font-bold mb-4">اعتمد شجرة اليوم</h3>
845
+ <p class="mb-6 opacity-90">بمبلغ رمزي، يمكنك اعتماد شجرة وسنقوم بزراعتها والعناية بها وإرسال تحديثات دورية عن نموها</p>
846
+
847
+ <div class="bg-green-700 rounded-lg p-4 mb-6">
848
+ <div class="flex justify-between items-center mb-2">
849
+ <span class="font-medium">حزمة الأساسية</span>
850
+ <span class="font-bold">150 ر.س</span>
851
+ </div>
852
+ <ul class="text-sm space-y-1">
853
+ <li class="flex items-start">
854
+ <i class="fas fa-check mt-1 mr-2 text-green-300"></i>
855
+ <span>شجرة واحدة مع لوحة اسمك</span>
856
+ </li>
857
+ <li class="flex items-start">
858
+ <i class="fas fa-check mt-1 mr-2 text-green-300"></i>
859
+ <span>تحديثات شهرية بالصور</span>
860
+ </li>
861
+ <li class="flex items-start">
862
+ <i class="fas fa-check mt-1 mr-2 text-green-300"></i>
863
+ <span>شهادة مشاركة إلكترونية</span>
864
+ </li>
865
+ </ul>
866
+ </div>
867
+
868
+ <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">
869
+ اعتمد شجرة الآن
870
+ </a>
871
+ </div>
872
+ </div>
873
+ </div>
874
+ </div>
875
+ </section>
876
+
877
+ <!-- Footer -->
878
+ <footer class="bg-gray-900 text-white py-12">
879
+ <div class="container mx-auto px-4">
880
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
881
+ <div>
882
+ <div class="flex items-center mb-4">
883
+ <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>
884
+ <h3 class="text-xl font-bold">GreenAI</h3>
885
+ </div>
886
+ <p class="text-gray-400">منصة ذكية لتشجير المدن وتحسين البيئة الحضرية باستخدام الذكاء الاصطناعي</p>
887
+ </div>
888
+
889
+ <div>
890
+ <h4 class="text-lg font-bold mb-4">روابط سريعة</h4>
891
+ <ul class="space-y-2">
892
+ <li><a href="#" class="text-gray-400 hover:text-white transition">الرئيسية</a></li>
893
+ <li><a href="#" class="text-gray-400 hover:text-white transition">المميزات</a></li>
894
+ <li><a href="#" class="text-gray-400 hover:text-white transition">كيف تعمل</a></li>
895
+ <li><a href="#" class="text-gray-400 hover:text-white transition">لوحة البيانات</a></li>
896
+ <li><a href="#" class="text-gray-400 hover:text-white transition">تواصل معنا</a></li>
897
+ </ul>
898
+ </div>
899
+
900
+ <div>
901
+ <h4 class="text-lg font-bold mb-4">الخدمات</h4>
902
+ <ul class="space-y-2">
903
+ <li><a href="#" class="text-gray-400 hover:text-white transition">تحليل مواقع التشجير</a></li>
904
+ <li><a href="#" class="text-gray-400 hover:text-white transition">اختيار الأشجار</a></li>
905
+ <li><a href="#" class="text-gray-400 hover:text-white transition">تتبع النمو</a></li>
906
+ <li><a href="#" class="text-gray-400 hover:text-white transition">GreenBot</a></li>
907
+ <li><a href="#" class="text-gray-400 hover:text-white transition">برامج الشراكة</a></li>
908
+ </ul>
909
+ </div>
910
+
911
+ <div>
912
+ <h4 class="text-lg font-bold mb-4">النشرة البريدية</h4>
913
+ <p class="text-gray-400 mb-4">اشترك ليصلك آخر أخبارنا وعروضنا</p>
914
+ <form class="flex">
915
+ <input type="email" placeholder="بريدك الإلكتروني" class="px-4 py-2 rounded-r-lg w-full focus:outline-none text-gray-800">
916
+ <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded-l-lg hover:bg-green-700 transition">
917
+ <i class="fas fa-paper-plane"></i>
918
+ </button>
919
+ </form>
920
+ </div>
921
+ </div>
922
+
923
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
924
+ <div class="text-gray-400 mb-4 md:mb-0">
925
+ &copy; 2023 GreenAI. جميع الحقوق محفوظة.
926
+ </div>
927
+ <div class="flex space-x-6 space-x-reverse">
928
+ <a href="#" class="text-gray-400 hover:text-white transition">شروط الخدمة</a>
929
+ <a href="#" class="text-gray-400 hover:text-white transition">سياسة الخصوصية</a>
930
+ </div>
931
+ </div>
932
+ </div>
933
+ </footer>
934
+
935
+ <script>
936
+ // Mobile menu toggle
937
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
938
+ const menu = document.getElementById('mobile-menu');
939
+ menu.classList.toggle('hidden');
940
+ });
941
+
942
+ // Animated counters
943
+ function animateCounters() {
944
+ const counters = document.querySelectorAll('.animated-counter');
945
+ const speed = 200;
946
+
947
+ counters.forEach(counter => {
948
+ const target = +counter.getAttribute('data-target');
949
+ const count = +counter.innerText;
950
+ const increment = target / speed;
951
+
952
+ if (count < target) {
953
+ counter.innerText = Math.ceil(count + increment);
954
+ setTimeout(animateCounters, 1);
955
+ } else {
956
+ counter.innerText = target;
957
+ }
958
+ });
959
+ }
960
+
961
+ // Hero section counters
962
+ function animateHeroCounters() {
963
+ const treeCounter = document.getElementById('tree-counter');
964
+ const co2Counter = document.getElementById('co2-counter');
965
+
966
+ let treeCount = 0;
967
+ let co2Count = 0;
968
+
969
+ const treeInterval = setInterval(() => {
970
+ treeCount += 2;
971
+ treeCounter.innerText = treeCount;
972
+ if (treeCount >= 24) clearInterval(treeInterval);
973
+ }, 50);
974
+
975
+ const co2Interval = setInterval(() => {
976
+ co2Count += 0.5;
977
+ co2Counter.innerText = co2Count.toFixed(1);
978
+ if (co2Count >= 12.5) clearInterval(co2Interval);
979
+ }, 50);
980
+ }
981
+
982
+ // Initialize animations when page loads
983
+ window.addEventListener('load', function() {
984
+ animateCounters();
985
+
986
+ // Animate hero counters when hero section is in view
987
+ const observer = new IntersectionObserver((entries) => {
988
+ if (entries[0].isIntersecting) {
989
+ animateHeroCounters();
990
+ observer.unobserve(entries[0].target);
991
+ }
992
+ }, { threshold: 0.5 });
993
+
994
+ const heroSection = document.querySelector('.hero-gradient');
995
+ if (heroSection) {
996
+ observer.observe(heroSection);
997
+ }
998
+ });
999
+
1000
+ // Smooth scrolling for anchor links
1001
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1002
+ anchor.addEventListener('click', function (e) {
1003
+ e.preventDefault();
1004
+
1005
+ const targetId = this.getAttribute('href');
1006
+ const targetElement = document.querySelector(targetId);
1007
+
1008
+ if (targetElement) {
1009
+ window.scrollTo({
1010
+ top: targetElement.offsetTop - 80,
1011
+ behavior: 'smooth'
1012
+ });
1013
+ }
1014
+ });
1015
+ });
1016
+ </script>
1017
+ <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=wasmdashai/greenai-dash" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1018
+ </html>