Hugging Face's logo

Spaces:
wasmdashai
/
greenai-p
Running

App Files Community
wasmdashai commited on
Commit
91f71f6
·
verified ·
1 Parent(s): fe46822

undefined - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +463 -424
index.html CHANGED
@@ -3,559 +3,543 @@
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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap" rel="stylesheet">
10
  <style>
11
  body {
12
  font-family: 'Tajawal', sans-serif;
13
  }
14
- .hero-bg {
15
- background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1476231682824-37e0bc46ab00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
16
- background-size: cover;
17
- background-position: center;
18
  }
19
- .leaf-pattern {
20
- background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233D9970' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
21
- }
22
- .stats-card:hover {
23
  transform: translateY(-5px);
24
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
25
  }
26
- .solution-card:hover .solution-icon {
27
- transform: scale(1.1);
 
 
 
 
 
 
28
  }
29
  </style>
30
  </head>
31
  <body class="bg-gray-50 text-gray-800">
32
- <!-- Navigation -->
33
- <nav class="bg-white shadow-lg sticky top-0 z-50">
34
- <div class="max-w-7xl mx-auto px-4">
35
- <div class="flex justify-between items-center h-16">
36
- <!-- Logo -->
37
- <div class="flex-shrink-0 flex items-center">
38
- <i class="fas fa-leaf text-green-600 text-2xl mr-2"></i>
39
- <span class="text-xl font-bold text-green-700">GreenAI</span>
40
- </div>
41
-
42
- <!-- Desktop Menu -->
43
- <div class="hidden md:flex space-x-4 space-x-reverse">
44
- <a href="#" class="text-green-700 px-3 py-2 rounded-md font-medium">الرئيسية</a>
45
- <a href="#" class="text-gray-600 hover:text-green-700 px-3 py-2 rounded-md font-medium">من نحن</a>
46
- <a href="#" class="text-gray-600 hover:text-green-700 px-3 py-2 rounded-md font-medium">الحلول الذكية</a>
47
- <a href="#" class="text-gray-600 hover:text-green-700 px-3 py-2 rounded-md font-medium">لوحة البيانات</a>
48
- <a href="#" class="text-gray-600 hover:text-green-700 px-3 py-2 rounded-md font-medium">اعتمد شجرة</a>
49
- </div>
50
-
51
- <!-- Mobile menu button -->
52
- <div class="md:hidden">
53
- <button id="mobile-menu-button" class="text-gray-600 hover:text-green-700 focus:outline-none">
54
- <i class="fas fa-bars text-xl"></i>
55
- </button>
56
- </div>
57
  </div>
58
  </div>
59
 
60
  <!-- Mobile Menu -->
61
- <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
62
- <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
63
- <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-green-700 bg-green-50">الرئيسية</a>
64
- <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-green-700 hover:bg-green-50">من نحن</a>
65
- <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-green-700 hover:bg-green-50">الحلول الذكية</a>
66
- <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-green-700 hover:bg-green-50">لوحة البيانات</a>
67
- <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-green-700 hover:bg-green-50">اعتمد شجرة</a>
68
- </div>
69
  </div>
70
- </nav>
71
 
72
  <!-- Hero Section -->
73
- <section class="hero-bg text-white py-20 md:py-32 leaf-pattern">
74
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
75
- <div class="text-center">
76
- <h1 class="text-4xl md:text-5xl font-bold mb-6">ازرع المستقبل مع <span class="text-green-300">GreenAI</span></h1>
77
- <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">منصة الذكاء الاصطناعي الرائدة لتحويل المدن إلى مساحات خضراء مستدامة</p>
78
- <div class="flex flex-col sm:flex-row justify-center gap-4">
79
- <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">
80
- ابدأ الآن
81
- </a>
82
- <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">
83
- اعتمد شجرة
84
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  </div>
86
  </div>
87
  </div>
88
  </section>
89
 
90
- <!-- Problem Section -->
91
- <section class="py-16 bg-white">
92
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
93
- <div class="text-center mb-12">
94
- <h2 class="text-3xl font-bold text-gray-800 mb-4">ما المشكلة البيئية التي نحلها؟</h2>
95
- <p class="text-gray-600 max-w-3xl mx-auto">التصحر وانخفاض المساحات الخضراء في المدن يؤدي إلى تدهور جودة الهواء وارتفاع درجات الحرارة</p>
96
- </div>
97
-
98
- <div class="grid md:grid-cols-3 gap-8">
99
- <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
100
- <div class="text-green-600 text-4xl mb-4">
101
- <i class="fas fa-temperature-high"></i>
102
  </div>
103
- <h3 class="text-xl font-bold mb-2">ارتفاع درجات الحرارة</h3>
104
- <p class="text-gray-600">المدن الحضرية أكثر دفئًا بمقدار 1-3°C من المناطق الريفية المحيطة بها</p>
105
  </div>
106
-
107
- <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
108
- <div class="text-green-600 text-4xl mb-4">
109
- <i class="fas fa-wind"></i>
110
  </div>
111
- <h3 class="text-xl font-bold mb-2">تلوث الهواء</h3>
112
- <p class="text-gray-600">الأشجار يمكنها امتصاص ما يصل إلى 48 رطل من ثاني أكسيد الكربون سنويًا</p>
113
  </div>
114
-
115
- <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
116
- <div class="text-green-600 text-4xl mb-4">
117
- <i class="fas fa-tint"></i>
118
  </div>
119
- <h3 class="text-xl font-bold mb-2">نقص المياه</h3>
120
- <p class="text-gray-600">الأشجار الذكية توفر ما يصل إلى 30% من استهلاك المياه في عمليات الري</p>
121
  </div>
122
- </div>
123
-
124
- <div class="mt-12 bg-green-50 rounded-xl p-6">
125
- <div class="flex flex-col md:flex-row items-center">
126
- <div class="md:w-1/2 mb-6 md:mb-0">
127
- <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"
128
- alt="Green City" class="rounded-lg shadow-md w-full">
129
- </div>
130
- <div class="md:w-1/2 md:pr-8">
131
- <h3 class="text-2xl font-bold text-green-700 mb-4">الحل: التشجير الذكي</h3>
132
- <p class="text-gray-700 mb-4">باستخدام الذكاء الاصطناعي، نحدد أفضل الأماكن لزراعة الأشجار ونختار الأنواع المناسبة لكل منطقة بناءً على الظروف البيئية</p>
133
- <ul class="space-y-2 mb-6">
134
- <li class="flex items-start">
135
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
136
- <span>زيادة المساحات الخضراء بنسبة 40%</span>
137
- </li>
138
- <li class="flex items-start">
139
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
140
- <span>خفض درجات الحرارة بمقدار 2-4°C</span>
141
- </li>
142
- <li class="flex items-start">
143
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
144
- <span>تحسين جودة الهواء بنسبة 30%</span>
145
- </li>
146
- </ul>
147
- <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">
148
- تعرف على المزيد
149
- </a>
150
  </div>
 
 
151
  </div>
152
  </div>
153
  </div>
154
  </section>
155
 
156
- <!-- How It Works -->
157
- <section class="py-16 bg-gray-50 leaf-pattern">
158
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
159
- <div class="text-center mb-12">
160
- <h2 class="text-3xl font-bold text-gray-800 mb-4">كيف تعمل منصة GreenAI؟</h2>
161
- <p class="text-gray-600 max-w-3xl mx-auto">نستخدم أحدث تقنيات الذكاء الاصطناعي لتحقيق أقصى تأثير بيئي</p>
162
  </div>
163
 
164
- <div class="grid md:grid-cols-4 gap-6">
165
- <div class="bg-white p-6 rounded-xl shadow-sm text-center">
 
166
  <div class="text-green-600 text-4xl mb-4">
167
  <i class="fas fa-map-marked-alt"></i>
168
  </div>
169
- <h3 class="text-xl font-bold mb-2">1. تحليل الموقع</h3>
170
- <p class="text-gray-600">نحدد أفضل المواقع لزراعة الأشجار بناءً على البيانات البيئية</p>
171
  </div>
172
 
173
- <div class="bg-white p-6 rounded-xl shadow-sm text-center">
 
174
  <div class="text-green-600 text-4xl mb-4">
175
- <i class="fas fa-tree"></i>
176
  </div>
177
- <h3 class="text-xl font-bold mb-2">2. اختيار الشجرة</h3>
178
- <p class="text-gray-600">نختار نوع الشجرة الأمثل لكل موقع بناءً على الظروف المحلية</p>
179
  </div>
180
 
181
- <div class="bg-white p-6 rounded-xl shadow-sm text-center">
 
182
  <div class="text-green-600 text-4xl mb-4">
183
- <i class="fas fa-tint"></i>
184
  </div>
185
- <h3 class="text-xl font-bold mb-2">3. الري الذكي</h3>
186
- <p class="text-gray-600">نظام ري ذكي يحافظ على المياه ويضمن نموًا صحيًا للأشجار</p>
187
  </div>
188
 
189
- <div class="bg-white p-6 rounded-xl shadow-sm text-center">
 
190
  <div class="text-green-600 text-4xl mb-4">
191
- <i class="fas fa-chart-line"></i>
192
  </div>
193
- <h3 class="text-xl font-bold mb-2">4. المتابعة</h3>
194
- <p class="text-gray-600">نراقب نمو الأشجار ونقدم تقارير دورية عن التأثير البيئي</p>
195
  </div>
196
  </div>
 
 
 
 
 
 
 
 
 
 
197
 
198
- <div class="mt-12 text-center">
199
- <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">
200
- شاهد الفيديو التوضيحي
201
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
202
  </div>
203
  </div>
204
  </section>
205
 
206
- <!-- Smart Solutions -->
207
- <section class="py-16 bg-white">
208
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
209
- <div class="text-center mb-12">
210
- <h2 class="text-3xl font-bold text-gray-800 mb-4">حلولنا الذكية</h2>
211
- <p class="text-gray-600 max-w-3xl mx-auto">تقنيات مبتكرة تجعل التشجير أكثر ذكاءً وفعالية</p>
212
  </div>
213
 
214
- <div class="grid md:grid-cols-2 gap-8">
215
- <!-- Solution 1 -->
216
- <div class="solution-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
217
- <div class="flex items-start">
218
- <div class="solution-icon text-green-600 text-4xl mr-4 transition duration-300">
219
- <i class="fas fa-map-marked-alt"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
220
  </div>
221
- <div>
222
- <h3 class="text-xl font-bold mb-2">AI TreeSpotter</h3>
223
- <p class="text-gray-600 mb-4">خريطة ذكية تحدد أفضل المواقع لزراعة الأشجار بناءً على تحليل صور الأقمار الصناعية وبيانات جودة الهواء</p>
224
- <a href="#" class="text-green-600 font-medium inline-flex items-center">
225
- تعرف على المزيد
226
- <i class="fas fa-arrow-left mr-2"></i>
227
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
228
  </div>
229
  </div>
230
  </div>
231
 
232
- <!-- Solution 2 -->
233
- <div class="solution-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
234
- <div class="flex items-start">
235
- <div class="solution-icon text-green-600 text-4xl mr-4 transition duration-300">
236
- <i class="fas fa-tree"></i>
237
  </div>
238
  <div>
239
- <h3 class="text-xl font-bold mb-2">Smart Tree Recommender</h3>
240
- <p class="text-gray-600 mb-4">نظام يوصي بأنواع الأشجار المثالية لكل منطقة بناءً على التربة والمناخ واستهلاك المياه</p>
241
- <a href="#" class="text-green-600 font-medium inline-flex items-center">
242
- تعرف على المزيد
243
- <i class="fas fa-arrow-left mr-2"></i>
244
- </a>
 
 
 
 
245
  </div>
246
  </div>
247
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
248
 
249
- <!-- Solution 3 -->
250
- <div class="solution-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
251
- <div class="flex items-start">
252
- <div class="solution-icon text-green-600 text-4xl mr-4 transition duration-300">
253
- <i class="fas fa-camera-retro"></i>
254
  </div>
255
- <div>
256
- <h3 class="text-xl font-bold mb-2">TreeTrack AI</h3>
257
- <p class="text-gray-600 mb-4">تحليل صور الأشجار المزروعة لتقييم صحتها ونموها باستخدام رؤية الحاسوب</p>
258
- <a href="#" class="text-green-600 font-medium inline-flex items-center">
259
- تعرف على المزيد
260
- <i class="fas fa-arrow-left mr-2"></i>
261
- </a>
262
  </div>
263
  </div>
264
  </div>
265
 
266
- <!-- Solution 4 -->
267
- <div class="solution-card bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
268
- <div class="flex items-start">
269
- <div class="solution-icon text-green-600 text-4xl mr-4 transition duration-300">
270
  <i class="fas fa-robot"></i>
271
  </div>
272
- <div>
273
- <h3 class="text-xl font-bold mb-2">GreenBot</h3>
274
- <p class="text-gray-600 mb-4">مساعد ذكي يجيب على أسئلتك حول التشجير والعناية بالأشجار</p>
275
- <a href="#" class="text-green-600 font-medium inline-flex items-center">
276
- جربه الآن
277
- <i class="fas fa-arrow-left mr-2"></i>
278
- </a>
279
  </div>
280
  </div>
281
  </div>
282
  </div>
 
 
 
 
 
 
 
 
 
 
283
  </div>
284
  </section>
285
 
286
- <!-- Stats Section -->
287
- <section class="py-16 bg-green-700 text-white">
288
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
289
  <div class="text-center mb-12">
290
- <h2 class="text-3xl font-bold mb-4">أرقامنا تتحدث</h2>
291
- <p class="max-w-3xl mx-auto opacity-90">إنجازاتنا في تحويل المدن إلى مساحات خضراء أكثر استدامة</p>
292
  </div>
293
 
294
- <div class="grid md:grid-cols-4 gap-6">
295
- <div class="stats-card bg-green-600 p-6 rounded-xl text-center transition duration-300">
296
- <div class="text-4xl font-bold mb-2">12,845</div>
297
- <div class="text-green-100">شجرة مزروعة</div>
298
  </div>
299
-
300
- <div class="stats-card bg-green-600 p-6 rounded-xl text-center transition duration-300">
301
- <div class="text-4xl font-bold mb-2">24</div>
302
- <div class="text-green-100">مدينة مشاركة</div>
303
  </div>
304
-
305
- <div class="stats-card bg-green-600 p-6 rounded-xl text-center transition duration-300">
306
- <div class="text-4xl font-bold mb-2">2.5°C</div>
307
- <div class="text-green-100">انخفاض في الحرارة</div>
308
  </div>
309
-
310
- <div class="stats-card bg-green-600 p-6 rounded-xl text-center transition duration-300">
311
- <div class="text-4xl font-bold mb-2">8,450</div>
312
- <div class="text-green-100">متطوع مشارك</div>
313
  </div>
314
  </div>
315
  </div>
316
  </section>
317
 
318
- <!-- Testimonials -->
319
- <section class="py-16 bg-white">
320
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
321
- <div class="text-center mb-12">
322
- <h2 class="text-3xl font-bold text-gray-800 mb-4">آراء شركائنا</h2>
323
- <p class="text-gray-600 max-w-3xl mx-auto">ما يقوله عنا الشركاء والمتطوعون</p>
324
- </div>
325
 
326
- <div class="grid md:grid-cols-3 gap-8">
327
- <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
328
- <div class="flex items-center mb-4">
329
- <div class="text-yellow-400 mr-2">
330
- <i class="fas fa-star"></i>
331
- <i class="fas fa-star"></i>
332
- <i class="fas fa-star"></i>
333
- <i class="fas fa-star"></i>
334
- <i class="fas fa-star"></i>
335
- </div>
336
- </div>
337
- <p class="text-gray-700 mb-4">"بفضل GreenAI، استطعنا زيادة المساحات الخضراء في منطقتنا بنسبة 30% خلال عام واحد فقط."</p>
338
- <div class="flex items-center">
339
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Person" class="w-10 h-10 rounded-full mr-3">
340
- <div>
341
- <div class="font-medium">سارة أحمد</div>
342
- <div class="text-sm text-gray-500">رئيسة جمعية البيئة</div>
343
- </div>
344
- </div>
345
- </div>
346
-
347
- <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
348
- <div class="flex items-center mb-4">
349
- <div class="text-yellow-400 mr-2">
350
- <i class="fas fa-star"></i>
351
- <i class="fas fa-star"></i>
352
- <i class="fas fa-star"></i>
353
- <i class="fas fa-star"></i>
354
- <i class="fas fa-star"></i>
355
- </div>
356
- </div>
357
- <p class="text-gray-700 mb-4">"التقنيات الذكية التي تقدمها المنصة ساعدتنا في توفير 40% من مياه الري مع ضمان نمو صحي للأشجار."</p>
358
- <div class="flex items-center">
359
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Person" class="w-10 h-10 rounded-full mr-3">
360
- <div>
361
- <div class="font-medium">محمد الخالد</div>
362
- <div class="text-sm text-gray-500">مدير بلدية الرياض</div>
363
- </div>
364
- </div>
365
- </div>
366
-
367
- <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
368
- <div class="flex items-center mb-4">
369
- <div class="text-yellow-400 mr-2">
370
- <i class="fas fa-star"></i>
371
- <i class="fas fa-star"></i>
372
- <i class="fas fa-star"></i>
373
- <i class="fas fa-star"></i>
374
- <i class="fas fa-star-half-alt"></i>
375
- </div>
376
- </div>
377
- <p class="text-gray-700 mb-4">"كنت متطوعًا مع GreenAI لمدة عام، وشهدت بنفسي الفرق الكبير الذي أحدثوه في منطقتنا."</p>
378
- <div class="flex items-center">
379
- <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Person" class="w-10 h-10 rounded-full mr-3">
380
- <div>
381
- <div class="font-medium">نورة السعد</div>
382
- <div class="text-sm text-gray-500">متطوعة</div>
383
- </div>
384
- </div>
385
- </div>
386
  </div>
387
  </div>
388
  </section>
389
 
390
- <!-- CTA Section -->
391
- <section class="py-16 bg-green-50 leaf-pattern">
392
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
393
- <div class="bg-white rounded-xl shadow-md overflow-hidden">
394
- <div class="flex flex-col md:flex-row">
395
- <div class="md:w-1/2 p-8 md:p-12">
396
- <h2 class="text-2xl font-bold text-gray-800 mb-4">انضم إلى حركتنا الخضراء</h2>
397
- <p class="text-gray-600 mb-6">سجل الآن وكن جزءًا من التغيير الإيجابي في مدينتك</p>
398
-
399
- <form class="space-y-4">
 
 
 
400
  <div>
401
- <label for="name" class="block text-sm font-medium text-gray-700 mb-1">الاسم</label>
402
- <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">
 
 
 
 
 
 
403
  </div>
404
-
405
  <div>
406
- <label for="email" class="block text-sm font-medium text-gray-700 mb-1">البريد الإلكتروني</label>
407
- <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">
 
 
 
 
 
 
408
  </div>
409
-
410
  <div>
411
- <label for="role" class="block text-sm font-medium text-gray-700 mb-1">كيف تريد المشاركة؟</label>
412
- <select id="role" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500">
413
- <option>متطوع فردي</option>
414
- <option>مدرسة/جامعة</option>
415
- <option>جهة حكومية</option>
416
- <option>شركة/مؤسسة</option>
417
- </select>
418
  </div>
419
-
420
- <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">
421
- سجل الآن
422
- </button>
423
- </form>
424
  </div>
425
 
426
- <div class="md:w-1/2 bg-green-600 text-white p-8 md:p-12 flex flex-col justify-center">
427
- <h3 class="text-2xl font-bold mb-4">اعتمد شجرة اليوم</h3>
428
- <p class="mb-6 opacity-90">بمبلغ رمزي، يمكنك اعتماد شجرة وسنقوم بزراعتها والعناية بها وإرسال تحديثات دورية عن نموها</p>
429
-
430
- <div class="bg-green-700 rounded-lg p-4 mb-6">
431
- <div class="flex justify-between items-center mb-2">
432
- <span class="font-medium">حزمة الأساسية</span>
433
- <span class="font-bold">150 ر.س</span>
434
- </div>
435
- <ul class="text-sm space-y-1">
436
- <li class="flex items-start">
437
- <i class="fas fa-check mt-1 mr-2 text-green-300"></i>
438
- <span>شجرة واحدة مع لوحة اسمك</span>
439
- </li>
440
- <li class="flex items-start">
441
- <i class="fas fa-check mt-1 mr-2 text-green-300"></i>
442
- <span>تحديثات شهرية بالصور</span>
443
- </li>
444
- <li class="flex items-start">
445
- <i class="fas fa-check mt-1 mr-2 text-green-300"></i>
446
- <span>شهادة مشاركة إلكترونية</span>
447
- </li>
448
- </ul>
449
  </div>
450
-
451
- <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">
452
- اعتمد شجرة الآن
453
- </a>
454
  </div>
455
  </div>
456
- </div>
457
- </div>
458
- </section>
459
-
460
- <!-- Partners -->
461
- <section class="py-12 bg-white">
462
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
463
- <div class="text-center mb-8">
464
- <h3 class="text-sm font-semibold text-green-600 tracking-wider uppercase">شركاؤنا</h3>
465
- </div>
466
-
467
- <div class="flex flex-wrap justify-center gap-8 md:gap-16">
468
- <div class="flex items-center justify-center h-16">
469
- <img src="https://via.placeholder.com/120x40?text=Ministry" alt="Ministry" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
470
- </div>
471
- <div class="flex items-center justify-center h-16">
472
- <img src="https://via.placeholder.com/120x40?text=UNEP" alt="UNEP" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
473
- </div>
474
- <div class="flex items-center justify-center h-16">
475
- <img src="https://via.placeholder.com/120x40?text=City" alt="City" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
476
- </div>
477
- <div class="flex items-center justify-center h-16">
478
- <img src="https://via.placeholder.com/120x40?text=University" alt="University" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
479
- </div>
480
- <div class="flex items-center justify-center h-16">
481
- <img src="https://via.placeholder.com/120x40?text=Tech" alt="Tech" class="h-12 opacity-70 hover:opacity-100 transition duration-300">
482
  </div>
483
  </div>
484
  </div>
485
  </section>
486
 
487
  <!-- Footer -->
488
- <footer class="bg-gray-900 text-white pt-12 pb-8">
489
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
490
- <div class="grid md:grid-cols-4 gap-8">
491
  <div>
492
  <div class="flex items-center mb-4">
493
- <i class="fas fa-leaf text-green-400 text-2xl mr-2"></i>
494
- <span class="text-xl font-bold">GreenAI</span>
495
- </div>
496
- <p class="text-gray-400 mb-4">منصة الذكاء الاصطناعي الرائدة لتحويل المدن إلى مساحات خضراء مستدامة</p>
497
- <div class="flex space-x-4 space-x-reverse">
498
- <a href="#" class="text-gray-400 hover:text-green-400">
499
- <i class="fab fa-twitter"></i>
500
- </a>
501
- <a href="#" class="text-gray-400 hover:text-green-400">
502
- <i class="fab fa-instagram"></i>
503
- </a>
504
- <a href="#" class="text-gray-400 hover:text-green-400">
505
- <i class="fab fa-linkedin"></i>
506
- </a>
507
- <a href="#" class="text-gray-400 hover:text-green-400">
508
- <i class="fab fa-youtube"></i>
509
- </a>
510
  </div>
 
511
  </div>
512
 
513
  <div>
514
- <h3 class="text-lg font-semibold mb-4">روابط سريعة</h3>
515
  <ul class="space-y-2">
516
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">الرئيسية</a></li>
517
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">من نحن</a></li>
518
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">الحلول الذكية</a></li>
519
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">لوحة البيانات</a></li>
520
- <li><a href="#" class="text-gray-400 hover:text-green-400 transition duration-300">اعتمد شجرة</a></li>
521
  </ul>
522
  </div>
523
 
524
  <div>
525
- <h3 class="text-lg font-semibold mb-4">تواصل معنا</h3>
526
- <ul class="space-y-2 text-gray-400">
527
- <li class="flex items-start">
528
- <i class="fas fa-map-marker-alt mt-1 mr-2 text-green-400"></i>
529
- <span>الرياض، المملكة العربية السعودية</span>
530
- </li>
531
- <li class="flex items-start">
532
- <i class="fas fa-phone-alt mt-1 mr-2 text-green-400"></i>
533
- <span>+966 12 345 6789</span>
534
- </li>
535
- <li class="flex items-start">
536
- <i class="fas fa-envelope mt-1 mr-2 text-green-400"></i>
537
- <span>[email protected]</span>
538
- </li>
539
  </ul>
540
  </div>
541
 
542
  <div>
543
- <h3 class="text-lg font-semibold mb-4">النشرة البريدية</h3>
544
  <p class="text-gray-400 mb-4">اشترك ليصلك آخر أخبارنا وعروضنا</p>
545
  <form class="flex">
546
- <input type="email" placeholder="بريدك الإلكتروني" class="px-4 py-2 rounded-r-md border-0 w-full focus:ring-2 focus:ring-green-500">
547
- <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-l-md transition duration-300">
548
  <i class="fas fa-paper-plane"></i>
549
  </button>
550
  </form>
551
  </div>
552
  </div>
553
 
554
- <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
555
- <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 GreenAI. جميع الحقوق محفوظة.</p>
 
 
556
  <div class="flex space-x-6 space-x-reverse">
557
- <a href="#" class="text-gray-400 hover:text-green-400 text-sm transition duration-300">الشروط والأحكام</a>
558
- <a href="#" class="text-gray-400 hover:text-green-400 text-sm transition duration-300">سياسة الخصوصية</a>
559
  </div>
560
  </div>
561
  </div>
@@ -568,25 +552,80 @@
568
  menu.classList.toggle('hidden');
569
  });
570
 
571
- // Animate stats on scroll
572
- const animateStats = () => {
573
- const statsSection = document.querySelector('.stats-card');
574
- if (isInViewport(statsSection)) {
575
- // Animation logic here
576
- }
577
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
578
 
579
- const isInViewport = (element) => {
580
- const rect = element.getBoundingClientRect();
581
- return (
582
- rect.top >= 0 &&
583
- rect.left >= 0 &&
584
- rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
585
- rect.right <= (window.innerWidth || document.documentElement.clientWidth)
586
- );
587
- };
 
 
 
 
 
 
 
 
588
 
589
- window.addEventListener('scroll', animateStats);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
590
  </script>
591
  <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-p" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
592
  </html>
 
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
 
490
  <!-- Footer -->
491
+ <footer class="bg-gray-900 text-white py-12">
492
+ <div class="container mx-auto px-4">
493
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
494
  <div>
495
  <div class="flex items-center mb-4">
496
+ <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>
497
+ <h3 class="text-xl font-bold">GreenAI</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
498
  </div>
499
+ <p class="text-gray-400">منصة ذكية لتشجير المدن وتحسين البيئة الحضرية باستخدام الذكاء الاصطناعي</p>
500
  </div>
501
 
502
  <div>
503
+ <h4 class="text-lg font-bold mb-4">روابط سريعة</h4>
504
  <ul class="space-y-2">
505
+ <li><a href="#" class="text-gray-400 hover:text-white transition">الرئيسية</a></li>
506
+ <li><a href="#" class="text-gray-400 hover:text-white transition">المميزات</a></li>
507
+ <li><a href="#" class="text-gray-400 hover:text-white transition">كيف تعمل</a></li>
508
+ <li><a href="#" class="text-gray-400 hover:text-white transition">لوحة البيانات</a></li>
509
+ <li><a href="#" class="text-gray-400 hover:text-white transition">تواصل معنا</a></li>
510
  </ul>
511
  </div>
512
 
513
  <div>
514
+ <h4 class="text-lg font-bold mb-4">الخدمات</h4>
515
+ <ul class="space-y-2">
516
+ <li><a href="#" class="text-gray-400 hover:text-white transition">تحليل مواقع التشجير</a></li>
517
+ <li><a href="#" class="text-gray-400 hover:text-white transition">اختيار الأشجار</a></li>
518
+ <li><a href="#" class="text-gray-400 hover:text-white transition">تتبع النمو</a></li>
519
+ <li><a href="#" class="text-gray-400 hover:text-white transition">GreenBot</a></li>
520
+ <li><a href="#" class="text-gray-400 hover:text-white transition">برامج الشراكة</a></li>
 
 
 
 
 
 
 
521
  </ul>
522
  </div>
523
 
524
  <div>
525
+ <h4 class="text-lg font-bold mb-4">النشرة البريدية</h4>
526
  <p class="text-gray-400 mb-4">اشترك ليصلك آخر أخبارنا وعروضنا</p>
527
  <form class="flex">
528
+ <input type="email" placeholder="بريدك الإلكتروني" class="px-4 py-2 rounded-r-lg w-full focus:outline-none text-gray-800">
529
+ <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded-l-lg hover:bg-green-700 transition">
530
  <i class="fas fa-paper-plane"></i>
531
  </button>
532
  </form>
533
  </div>
534
  </div>
535
 
536
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
537
+ <div class="text-gray-400 mb-4 md:mb-0">
538
+ &copy; 2023 GreenAI. جميع الحقوق محفوظة.
539
+ </div>
540
  <div class="flex space-x-6 space-x-reverse">
541
+ <a href="#" class="text-gray-400 hover:text-white transition">شروط الخدمة</a>
542
+ <a href="#" class="text-gray-400 hover:text-white transition">سياسة الخصوصية</a>
543
  </div>
544
  </div>
545
  </div>
 
552
  menu.classList.toggle('hidden');
553
  });
554
 
555
+ // Animated counters
556
+ function animateCounters() {
557
+ const counters = document.querySelectorAll('.animated-counter');
558
+ const speed = 200;
559
+
560
+ counters.forEach(counter => {
561
+ const target = +counter.getAttribute('data-target');
562
+ const count = +counter.innerText;
563
+ const increment = target / speed;
564
+
565
+ if (count < target) {
566
+ counter.innerText = Math.ceil(count + increment);
567
+ setTimeout(animateCounters, 1);
568
+ } else {
569
+ counter.innerText = target;
570
+ }
571
+ });
572
+ }
573
+
574
+ // Hero section counters
575
+ function animateHeroCounters() {
576
+ const treeCounter = document.getElementById('tree-counter');
577
+ const co2Counter = document.getElementById('co2-counter');
578
+
579
+ let treeCount = 0;
580
+ let co2Count = 0;
581
+
582
+ const treeInterval = setInterval(() => {
583
+ treeCount += 2;
584
+ treeCounter.innerText = treeCount;
585
+ if (treeCount >= 24) clearInterval(treeInterval);
586
+ }, 50);
587
+
588
+ const co2Interval = setInterval(() => {
589
+ co2Count += 0.5;
590
+ co2Counter.innerText = co2Count.toFixed(1);
591
+ if (co2Count >= 12.5) clearInterval(co2Interval);
592
+ }, 50);
593
+ }
594
 
595
+ // Initialize animations when page loads
596
+ window.addEventListener('load', function() {
597
+ animateCounters();
598
+
599
+ // Animate hero counters when hero section is in view
600
+ const observer = new IntersectionObserver((entries) => {
601
+ if (entries[0].isIntersecting) {
602
+ animateHeroCounters();
603
+ observer.unobserve(entries[0].target);
604
+ }
605
+ }, { threshold: 0.5 });
606
+
607
+ const heroSection = document.querySelector('.hero-gradient');
608
+ if (heroSection) {
609
+ observer.observe(heroSection);
610
+ }
611
+ });
612
 
613
+ // Smooth scrolling for anchor links
614
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
615
+ anchor.addEventListener('click', function (e) {
616
+ e.preventDefault();
617
+
618
+ const targetId = this.getAttribute('href');
619
+ const targetElement = document.querySelector(targetId);
620
+
621
+ if (targetElement) {
622
+ window.scrollTo({
623
+ top: targetElement.offsetTop - 80,
624
+ behavior: 'smooth'
625
+ });
626
+ }
627
+ });
628
+ });
629
  </script>
630
  <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-p" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
631
  </html>