Hugging Face's logo

Spaces:
wasmdashai
/
greenai-p
Running

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

undefined - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +424 -463
index.html CHANGED
@@ -3,543 +3,559 @@
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,80 +568,25 @@
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>
 
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
  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>