Hugging Face's logo

Spaces:
Aliosx997
/
vswo
Running

App Files Community
Aliosx997 commited on
Commit
ffa4d89
·
verified ·
1 Parent(s): 052fdc8

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +449 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vswo
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: vswo
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,449 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>الصفحة الرئيسية - FOCP</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
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
11
+ body {
12
+ font-family: 'Tajawal', sans-serif;
13
+ }
14
+ .hero-section {
15
+ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://www.focp.ae/wp-content/themes/twentytwenty-child/assets/images/banner-round.png');
16
+ background-size: cover;
17
+ background-position: center;
18
+ }
19
+ .testimonial-card:hover {
20
+ transform: translateY(-10px);
21
+ transition: all 0.3s ease;
22
+ }
23
+ .dropdown:hover .dropdown-menu {
24
+ display: block;
25
+ }
26
+ .pink-strip {
27
+ background: url('https://www.focp.ae/wp-content/themes/twentytwenty-child/assets/images/strip.png');
28
+ background-size: cover;
29
+ height: 20px;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-50 text-gray-800">
34
+ <!-- Top Bar -->
35
+ <div class="bg-pink-700 text-white py-2 px-4">
36
+ <div class="container mx-auto flex justify-between items-center">
37
+ <div class="flex items-center space-x-4 space-x-reverse">
38
+ <a href="https://www.facebook.com/FOCPUAE/" class="text-white hover:text-pink-300"><i class="fab fa-facebook-f"></i></a>
39
+ <a href="https://twitter.com/focpuae" class="text-white hover:text-pink-300"><i class="fab fa-twitter"></i></a>
40
+ <a href="https://instagram.com/focpuae" class="text-white hover:text-pink-300"><i class="fab fa-instagram"></i></a>
41
+ <a href="https://www.youtube.com/user/focpuae" class="text-white hover:text-pink-300"><i class="fab fa-youtube"></i></a>
42
+ </div>
43
+ <div class="flex items-center space-x-6 space-x-reverse">
44
+ <a href="tel:+97165065542" class="text-white hover:text-pink-300 flex items-center">
45
+ <i class="fas fa-phone-alt mr-2"></i> +971 6 506 5542
46
+ </a>
47
+ <div class="flex items-center">
48
+ <img src="https://www.focp.ae/wp-content/themes/twentytwenty-child/assets/images/emirates-logo.png" alt="UAE Flag" class="h-6 mr-2">
49
+ </div>
50
+ <div class="flex space-x-2 space-x-reverse">
51
+ <a href="https://www.focp.ae/ar/" class="text-white font-bold">AR</a>
52
+ <span class="text-white">|</span>
53
+ <a href="https://www.focp.ae/" class="text-white">EN</a>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </div>
58
+
59
+ <!-- Main Navigation -->
60
+ <nav class="bg-white shadow-md py-4">
61
+ <div class="container mx-auto flex justify-between items-center px-4">
62
+ <div class="flex items-center">
63
+ <a href="https://www.focp.ae/ar/">
64
+ <img src="https://www.focp.ae/wp-content/uploads/2021/11/logo-ar-main-color.svg" alt="FOCP Logo" class="h-16">
65
+ </a>
66
+ </div>
67
+
68
+ <div class="hidden md:flex space-x-6 space-x-reverse">
69
+ <div class="dropdown relative">
70
+ <button class="text-gray-800 hover:text-pink-700 font-medium flex items-center">
71
+ نبذة عن الجمعية <i class="fas fa-chevron-down mr-1 text-xs"></i>
72
+ </button>
73
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-48 z-10">
74
+ <a href="https://www.focp.ae/ar/about/" class="block px-4 py-2 hover:bg-pink-100">نبذة عن الجمعية</a>
75
+ <a href="https://www.focp.ae/ar/our-board/" class="block px-4 py-2 hover:bg-pink-100">مجلس الإدارة</a>
76
+ <a href="https://www.focp.ae/ar/our-team/" class="block px-4 py-2 hover:bg-pink-100">فريقنا</a>
77
+ <a href="https://www.focp.ae/ar/our-offices/" class="block px-4 py-2 hover:bg-pink-100">مكتبنا</a>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="dropdown relative">
82
+ <button class="text-gray-800 hover:text-pink-700 font-medium flex items-center">
83
+ برامج المرضى المستفيدين <i class="fas fa-chevron-down mr-1 text-xs"></i>
84
+ </button>
85
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-64 z-10">
86
+ <a href="https://www.focp.ae/ar/program-category/moral-support-programs/" class="block px-4 py-2 hover:bg-pink-100">برامج المرضى المستفيدين</a>
87
+ <a href="https://www.focp.ae/ar/our-programs/womens-health/" class="block px-4 py-2 hover:bg-pink-100">القافلة الوردية</a>
88
+ <a href="https://www.focp.ae/ar/our-programs/mens-health/" class="block px-4 py-2 hover:bg-pink-100">مبادرة شنب</a>
89
+ <a href="https://www.focp.ae/ar/our-programs/child-health/" class="block px-4 py-2 hover:bg-pink-100">أنا</a>
90
+ </div>
91
+ </div>
92
+
93
+ <div class="dropdown relative">
94
+ <button class="text-gray-800 hover:text-pink-700 font-medium flex items-center">
95
+ مبادرات توعوية <i class="fas fa-chevron-down mr-1 text-xs"></i>
96
+ </button>
97
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-64 z-10">
98
+ <a href="https://www.focp.ae/ar/program-category/community-engagement/" class="block px-4 py-2 hover:bg-pink-100">مبادرات توعوية</a>
99
+ <a href="https://www.focp.ae/ar/our-programs/skin-health/" class="block px-4 py-2 hover:bg-pink-100">مبادرة حديث الشامة</a>
100
+ <a href="https://www.focp.ae/ar/our-programs/lung-cancer/" class="block px-4 py-2 hover:bg-pink-100">سرطان الرئة</a>
101
+ <a href="https://www.focp.ae/ar/our-programs/relay-for-life/" class="block px-4 py-2 hover:bg-pink-100">مسيرة لنحيا الرياضية</a>
102
+ </div>
103
+ </div>
104
+
105
+ <a href="https://www.focp.ae/ar/shop/" class="text-gray-800 hover:text-pink-700 font-medium">تسوق</a>
106
+ <a href="https://www.focp.ae/ar/donate/" class="text-gray-800 hover:text-pink-700 font-medium">التبرع</a>
107
+ <a href="https://www.focp.ae/ar/beneficiary-form/" class="text-gray-800 hover:text-pink-700 font-medium">شؤون المرضى</a>
108
+ </div>
109
+
110
+ <button class="md:hidden text-gray-800">
111
+ <i class="fas fa-bars text-2xl"></i>
112
+ </button>
113
+ </div>
114
+ </nav>
115
+
116
+ <!-- Hero Section -->
117
+ <section class="hero-section text-white py-32 px-4">
118
+ <div class="container mx-auto text-center">
119
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">نــــحن معــكم دومــاً</h1>
120
+ <p class="text-xl md:text-2xl mb-8">إالهام الأمل و التعاطف اللإنساني ساهم في التبرع الآن</p>
121
+ <div class="flex justify-center space-x-4 space-x-reverse">
122
+ <a href="https://www.focp.ae/ar/donate/" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full">تبرع الآن</a>
123
+ <a href="https://www.focp.ae/zakat/ar/" class="bg-white hover:bg-gray-100 text-pink-700 font-bold py-3 px-8 rounded-full">تبرع بزكاة المال</a>
124
+ </div>
125
+ </div>
126
+ </section>
127
+
128
+ <!-- Pink Strip -->
129
+ <div class="pink-strip w-full"></div>
130
+
131
+ <!-- Three Pillars Section -->
132
+ <section class="py-16 bg-white">
133
+ <div class="container mx-auto px-4">
134
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">الركائز الثلاث</h2>
135
+
136
+ <div class="grid md:grid-cols-3 gap-8">
137
+ <div class="bg-gray-50 p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
138
+ <img src="https://www.focp.ae/wp-content/uploads/2020/10/people-1.png" alt="Support Icon" class="h-20 mx-auto mb-6">
139
+ <h3 class="text-xl font-bold mb-4 text-pink-700">تقديم الدعم المادي لمريض السرطان</h3>
140
+ <p class="text-gray-600 mb-4">نقدم الدعم المادي والمعنوي لمرضى السرطان وعائلاتهم لتخفيف العبء المالي والنفسي</p>
141
+ <a href="https://focp.ae/ar/patient-access" class="text-pink-600 font-medium hover:text-pink-800">المزيد</a>
142
+ </div>
143
+
144
+ <div class="bg-gray-50 p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
145
+ <img src="https://www.focp.ae/wp-content/uploads/2020/10/loudspaker-1.png" alt="Awareness Icon" class="h-20 mx-auto mb-6">
146
+ <h3 class="text-xl font-bold mb-4 text-pink-700">التوعية المجتمعية بالسرطان</h3>
147
+ <p class="text-gray-600 mb-4">برامج توعوية متنوعة لنشر الوعي حول الوقاية من السرطان وأهمية الكشف المبكر</p>
148
+ <a href="https://focp.ae/ar/program-category/community-engagement" class="text-pink-600 font-medium hover:text-pink-800">المزيد</a>
149
+ </div>
150
+
151
+ <div class="bg-gray-50 p-8 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
152
+ <img src="https://www.focp.ae/wp-content/uploads/2020/10/advocacy-2.png" alt="Advocacy Icon" class="h-20 mx-auto mb-6">
153
+ <h3 class="text-xl font-bold mb-4 text-pink-700">المناصرة (محلياً وعالمياً)</h3>
154
+ <p class="text-gray-600 mb-4">نعمل على التأثير في السياسات الصحية المحلية والعالمية لتحسين حياة مرضى السرطان</p>
155
+ <a href="https://focp.ae/ar/program-category/advocacy" class="text-pink-600 font-medium hover:text-pink-800">المزيد</a>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </section>
160
+
161
+ <!-- Testimonials Section -->
162
+ <section class="py-16 bg-gray-100">
163
+ <div class="container mx-auto px-4">
164
+ <div class="flex justify-between items-center mb-12">
165
+ <h2 class="text-3xl font-bold text-gray-800">قصص ملهمة</h2>
166
+ <a href="https://focp.ae/ar/inspirational-stories" class="text-pink-600 font-medium hover:text-pink-800">شاهد كل القصص</a>
167
+ </div>
168
+
169
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
170
+ <div class="testimonial-card bg-white rounded-lg overflow-hidden shadow-md">
171
+ <img src="https://www.focp.ae/wp-content/uploads/2020/07/Testmony2.jpg" alt="Testimony" class="w-full h-48 object-cover">
172
+ <div class="p-4">
173
+ <h3 class="font-bold mb-2">شهادة رقم 8</h3>
174
+ <a href="https://youtu.be/SjF7smpaefM" class="text-pink-600 text-sm hover:text-pink-800">شاهد الفيديو</a>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="testimonial-card bg-white rounded-lg overflow-hidden shadow-md">
179
+ <img src="https://www.focp.ae/wp-content/uploads/2020/07/283.jpg" alt="Testimony" class="w-full h-48 object-cover">
180
+ <div class="p-4">
181
+ <h3 class="font-bold mb-2">شهادة رقم 5</h3>
182
+ <a href="https://youtu.be/fYvm4Tk1E6E" class="text-pink-600 text-sm hover:text-pink-800">شاهد الفيديو</a>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="testimonial-card bg-white rounded-lg overflow-hidden shadow-md">
187
+ <img src="https://www.focp.ae/wp-content/uploads/2022/06/Brain-Cancer-1.jpg" alt="Testimony" class="w-full h-48 object-cover">
188
+ <div class="p-4">
189
+ <h3 class="font-bold mb-2">شهادة رقم 10</h3>
190
+ <a href="https://youtu.be/evacWaBMFro" class="text-pink-600 text-sm hover:text-pink-800">شاهد الفيديو</a>
191
+ </div>
192
+ </div>
193
+
194
+ <div class="testimonial-card bg-white rounded-lg overflow-hidden shadow-md">
195
+ <img src="https://www.focp.ae/wp-content/uploads/2022/06/wig1.jpg" alt="Testimony" class="w-full h-48 object-cover">
196
+ <div class="p-4">
197
+ <h3 class="font-bold mb-2">شهادة رقم 11</h3>
198
+ <a href="https://youtu.be/1w3BIqRzstg" class="text-pink-600 text-sm hover:text-pink-800">شاهد الفيديو</a>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </section>
204
+
205
+ <!-- Patron Section -->
206
+ <section class="py-16 bg-white">
207
+ <div class="container mx-auto px-4">
208
+ <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">الراعي الرسمي</h2>
209
+ <div class="max-w-4xl mx-auto text-center mb-12">
210
+ <p class="text-xl text-gray-700 mb-6">
211
+ لم يعد مرض السرطان مجرد مسألة شخصية. إن النسب المتزايدة للإصابة بالسرطان تجعله قضية عامة تتطلب مسؤولية مشتركة بين الجميع.
212
+ </p>
213
+ <p class="text-lg font-bold text-pink-700">
214
+ سمو الشيخة جواهر بنت محمد القاسمي
215
+ </p>
216
+ <p class="text-gray-600">
217
+ قرينة صاحب السمو حاكم الشارقة، الإمارات العربية المتحدة<br>
218
+ الرئيس المؤسس لجمعية أصدقاء مرضى السرطان<br>
219
+ سفيرة الاتحاد الدولي لمكافحة السرطان للإعلان العالمي للسرطان
220
+ </p>
221
+ </div>
222
+
223
+ <div class="flex justify-center">
224
+ <a href="https://focp.ae/ar/about/" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full">نبذة عنا</a>
225
+ </div>
226
+ </div>
227
+ </section>
228
+
229
+ <!-- Community Awareness Section -->
230
+ <section class="py-16 bg-gray-100">
231
+ <div class="container mx-auto px-4">
232
+ <div class="flex flex-col md:flex-row items-center">
233
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
234
+ <h2 class="text-3xl font-bold mb-4 text-gray-800">الوعي المجتمعي</h2>
235
+ <p class="text-gray-700 mb-6">
236
+ "كشف" هي مبادرة من أصدقاء مرضى السرطان للكشف المبكر عن السرطان. وكما يعني اسم المبادرة باللغة العربية، فهي تهدف إلى نشر الوعي والمساعدة في الترويج للكشف المبكر عن السرطان وأهميته في زيادة فرص الشفاء.
237
+ </p>
238
+ <div class="flex space-x-4 space-x-reverse">
239
+ <a href="https://focp.ae/ar/program-category/community-engagement" class="bg-white hover:bg-gray-200 text-pink-700 font-bold py-2 px-6 rounded-full">شاهد جميع البرامج</a>
240
+ <a href="https://focp.ae/ar/donate/" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-2 px-6 rounded-full">تبرع الآن</a>
241
+ </div>
242
+ </div>
243
+ <div class="md:w-1/2">
244
+ <img src="https://www.focp.ae/wp-content/uploads/2020/07/Community-enagement-profile-.jpg" alt="Community Awareness" class="rounded-lg shadow-md w-full">
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </section>
249
+
250
+ <!-- Partners Section -->
251
+ <section class="py-16 bg-white">
252
+ <div class="container mx-auto px-4">
253
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">شركاؤنا</h2>
254
+
255
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
256
+ <div class="bg-white p-4 flex items-center justify-center border border-gray-200 rounded-lg">
257
+ <img src="https://www.focp.ae/wp-content/uploads/2020/07/slider-4.jpg" alt="Partner" class="h-16 object-contain">
258
+ </div>
259
+ <div class="bg-white p-4 flex items-center justify-center border border-gray-200 rounded-lg">
260
+ <img src="https://www.focp.ae/wp-content/uploads/2020/07/slider-5.jpg" alt="Partner" class="h-16 object-contain">
261
+ </div>
262
+ <div class="bg-white p-4 flex items-center justify-center border border-gray-200 rounded-lg">
263
+ <img src="https://www.focp.ae/wp-content/uploads/2020/07/slider-3.jpg" alt="Partner" class="h-16 object-contain">
264
+ </div>
265
+ <div class="bg-white p-4 flex items-center justify-center border border-gray-200 rounded-lg">
266
+ <img src="https://www.focp.ae/wp-content/uploads/2020/07/slider-7.jpg" alt="Partner" class="h-16 object-contain">
267
+ </div>
268
+ <div class="bg-white p-4 flex items-center justify-center border border-gray-200 rounded-lg">
269
+ <img src="https://www.focp.ae/wp-content/uploads/2020/07/slider-6.jpg" alt="Partner" class="h-16 object-contain">
270
+ </div>
271
+ <div class="bg-white p-4 flex items-center justify-center border border-gray-200 rounded-lg">
272
+ <img src="https://www.focp.ae/wp-content/uploads/2020/07/slider-2.jpg" alt="Partner" class="h-16 object-contain">
273
+ </div>
274
+ <div class="bg-white p-4 flex items-center justify-center border border-gray-200 rounded-lg">
275
+ <img src="https://www.focp.ae/wp-content/uploads/2020/07/slider-1.jpg" alt="Partner" class="h-16 object-contain">
276
+ </div>
277
+ <div class="bg-white p-4 flex items-center justify-center border border-gray-200 rounded-lg">
278
+ <img src="https://www.focp.ae/wp-content/uploads/2020/07/awr-logo.png" alt="Partner" class="h-16 object-contain">
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </section>
283
+
284
+ <!-- Patient Communication Section -->
285
+ <section class="py-16 bg-pink-700 text-white">
286
+ <div class="container mx-auto px-4">
287
+ <div class="flex flex-col md:flex-row items-center">
288
+ <div class="md:w-1/2 mb-8 md:mb-0">
289
+ <img src="https://www.focp.ae/wp-content/uploads/2020/07/benefits-img.jpg" alt="Patient Communication" class="rounded-lg shadow-md w-full">
290
+ </div>
291
+ <div class="md:w-1/2 md:pr-8">
292
+ <h2 class="text-3xl font-bold mb-4">ال��واصل مع المرضى</h2>
293
+ <p class="mb-6">
294
+ من المعروف أنَّ لتبني عقلية إيجابية أثرٌ مفيد على نتائج المرحلة العلاجية. ومن الحقائق الراسخة أن الحالة النفسية للمريض وتعزيز التوقعات المتفائلة وتقدير الذات القوي لديه هي من العوامل المهمة في عملية الشفاء من السرطان أو من أي مرض آخر.
295
+ </p>
296
+ <div class="flex space-x-4 space-x-reverse">
297
+ <a href="https://focp.ae/ar/patient-access" class="bg-white hover:bg-gray-200 text-pink-700 font-bold py-2 px-6 rounded-full">شاهد التفاصيل</a>
298
+ <a href="https://focp.ae/ar/donate/" class="bg-pink-800 hover:bg-pink-900 text-white font-bold py-2 px-6 rounded-full">تبرع الآن</a>
299
+ </div>
300
+
301
+ <div class="mt-8 grid grid-cols-2 gap-4">
302
+ <a href="https://focp.ae/ar/program-category/moral-support-programs" class="text-white hover:text-pink-200">برامج الدعم المعنوي</a>
303
+ <a href="https://focp.ae/ar/beneficiary-form/" class="text-white hover:text-pink-200">إستمارة المستفيد</a>
304
+ <a href="https://www.focp.ae/zakat/ar/" class="text-white hover:text-pink-200">الزكاة</a>
305
+ <a href="https://focp.ae/ar/inspirational-stories" class="text-white hover:text-pink-200">الشهادات – التوصيات</a>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </section>
311
+
312
+ <!-- Instagram Feed Section -->
313
+ <section class="py-16 bg-white">
314
+ <div class="container mx-auto px-4">
315
+ <div class="flex justify-between items-center mb-8">
316
+ <h2 class="text-3xl font-bold text-gray-800">انستغرام</h2>
317
+ <a href="https://instagram.com/focpuae" class="text-pink-600 font-medium hover:text-pink-800">تابعنا</a>
318
+ </div>
319
+
320
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
321
+ <a href="https://www.instagram.com/p/DAL2MRsyklZ/" class="block overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-shadow">
322
+ <img src="https://www.focp.ae/wp-content/uploads/sb-instagram-feed-images/460969782_18461484190031274_1698792705730303640_nlow.webp" alt="Instagram Post" class="w-full h-64 object-cover">
323
+ </a>
324
+ <a href="https://www.instagram.com/reel/C_yT6C0h3_m/" class="block overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-shadow">
325
+ <img src="https://www.focp.ae/wp-content/uploads/sb-instagram-feed-images/459309809_537971635422590_302481806154724085_nlow.webp" alt="Instagram Post" class="w-full h-64 object-cover">
326
+ </a>
327
+ <a href="https://www.instagram.com/reel/C_de_U8S7yb/" class="block overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-shadow">
328
+ <img src="https://www.focp.ae/wp-content/uploads/sb-instagram-feed-images/458315121_1178984003392080_6742409239759541379_nlow.webp" alt="Instagram Post" class="w-full h-64 object-cover">
329
+ </a>
330
+ <a href="https://www.instagram.com/reel/C_NwL6ByZwp/" class="block overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-shadow">
331
+ <img src="https://www.focp.ae/wp-content/uploads/sb-instagram-feed-images/457147971_431330793284228_166410437779053340_nlow.webp" alt="Instagram Post" class="w-full h-64 object-cover">
332
+ </a>
333
+ </div>
334
+ </div>
335
+ </section>
336
+
337
+ <!-- Newsletter Section -->
338
+ <section class="py-16 bg-gray-100">
339
+ <div class="container mx-auto px-4">
340
+ <div class="bg-white rounded-lg shadow-md p-8 max-w-4xl mx-auto">
341
+ <div class="flex flex-col md:flex-row items-center">
342
+ <div class="md:w-1/2 mb-6 md:mb-0">
343
+ <img src="https://www.focp.ae/wp-content/themes/twentytwenty-child/assets/images/pop-pic-ar.jpeg" alt="Newsletter" class="rounded-lg w-full">
344
+ </div>
345
+ <div class="md:w-1/2 md:pr-8">
346
+ <h3 class="text-xl font-bold mb-4 text-center md:text-right">سجل في قائمة المراسلات الخاصة بنا</h3>
347
+ <p class="text-gray-600 mb-6 text-center md:text-right">تلقى الأخبار العامة، التحديثات والمعلومات</p>
348
+ <form class="space-y-4">
349
+ <input type="text" placeholder="الاسم الكامل" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500">
350
+ <input type="email" placeholder="البريد الإلكتروني" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500">
351
+ <button type="submit" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded-lg">اشتراك</button>
352
+ </form>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </section>
358
+
359
+ <!-- Footer -->
360
+ <footer class="bg-gray-800 text-white pt-12 pb-6">
361
+ <div class="container mx-auto px-4">
362
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
363
+ <div>
364
+ <h3 class="text-xl font-bold mb-4">روابط سريعة</h3>
365
+ <ul class="space-y-2">
366
+ <li><a href="https://www.focp.ae/ar/about/" class="hover:text-pink-400">نبذة عن الجمعية</a></li>
367
+ <li><a href="https://www.focp.ae/ar/program-category/awareness-programs-ar/" class="hover:text-pink-400">برامج التوعية</a></li>
368
+ <li><a href="https://www.focp.ae/ar/program-category/moral-support-programs/" class="hover:text-pink-400">برامج المرضى المستفيدين</a></li>
369
+ </ul>
370
+ </div>
371
+
372
+ <div>
373
+ <h3 class="text-xl font-bold mb-4">المزيد</h3>
374
+ <ul class="space-y-2">
375
+ <li><a href="https://ncdalliance.org/global-ncd-alliance-forum-2017" class="hover:text-pink-400">إتحاد الأمراض غير المعدية</a></li>
376
+ <li><a href="https://www.focp.ae/ar/resource-centre/" class="hover:text-pink-400">Resource Centre</a></li>
377
+ <li><a href="https://www.focp.ae/ar/volunteer-registration-form/" class="hover:text-pink-400">استمارة تسجيل المتطوعين</a></li>
378
+ </ul>
379
+ </div>
380
+
381
+ <div>
382
+ <h3 class="text-xl font-bold mb-4">روابط مفيدة</h3>
383
+ <ul class="space-y-2">
384
+ <li><a href="https://www.focp.ae/ar/news/" class="hover:text-pink-400">الأخبار و العلاقات العامة</a></li>
385
+ <li><a href="https://www.focp.ae/ar/donate/" class="hover:text-pink-400">تبرع الآن</a></li>
386
+ <li><a href="https://www.focp.ae/ar/contact-us/" class="hover:text-pink-400">تواصل معنا</a></li>
387
+ </ul>
388
+ </div>
389
+
390
+ <div>
391
+ <h3 class="text-xl font-bold mb-4">إتصل</h3>
392
+ <div class="space-y-4">
393
+ <div>
394
+ <h4 class="font-medium mb-1">الهاتف</h4>
395
+ <a href="tel:+97165065542" class="hover:text-pink-400">+971 6 506 5542</a>
396
+ </div>
397
+ <div>
398
+ <h4 class="font-medium mb-1">البريد الإلكتروني</h4>
399
+ <a href="mailto:info@focp.ae" class="hover:text-pink-400">info@focp.ae</a>
400
+ </div>
401
+ <div>
402
+ <h4 class="font-medium mb-2">تابعنا</h4>
403
+ <div class="flex space-x-4 space-x-reverse">
404
+ <a href="https://www.facebook.com/FOCPUAE/" class="text-white hover:text-pink-400"><i class="fab fa-facebook-f"></i></a>
405
+ <a href="https://instagram.com/focpuae" class="text-white hover:text-pink-400"><i class="fab fa-instagram"></i></a>
406
+ <a href="https://twitter.com/focpuae" class="text-white hover:text-pink-400"><i class="fab fa-twitter"></i></a>
407
+ <a href="https://www.linkedin.com/company/friends-of-cancer-patients" class="text-white hover:text-pink-400"><i class="fab fa-linkedin-in"></i></a>
408
+ <a href="https://www.youtube.com/user/focpuae" class="text-white hover:text-pink-400"><i class="fab fa-youtube"></i></a>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="border-t border-gray-700 pt-6">
416
+ <div class="flex flex-col md:flex-row justify-between items-center">
417
+ <div class="mb-4 md:mb-0">
418
+ <img src="https://www.focp.ae/wp-content/uploads/2021/11/logo-ar-main-white.svg" alt="FOCP Logo" class="h-10">
419
+ </div>
420
+
421
+ <div class="flex flex-wrap justify-center space-x-4 space-x-reverse mb-4 md:mb-0">
422
+ <a href="https://www.focp.ae/ar/terms-and-conditions/" class="text-sm hover:text-pink-400">الشروط والأحكام</a>
423
+ <a href="https://www.focp.ae/ar/privacy-policy/" class="text-sm hover:text-pink-400">سياسة الخصوصية</a>
424
+ <a href="https://www.focp.ae/ar/cancellation-policy/" class="text-sm hover:text-pink-400">سياسة الإلغاء</a>
425
+ <a href="https://www.focp.ae/ar/refund-policy/" class="text-sm hover:text-pink-400">سياسة استرجاع المدفوعات</a>
426
+ </div>
427
+
428
+ <div class="flex space-x-4 space-x-reverse">
429
+ <img src="https://www.focp.ae/wp-content/themes/twentytwenty-child/assets/images/visa.png" alt="Visa" class="h-8">
430
+ <img src="https://www.focp.ae/wp-content/themes/twentytwenty-child/assets/images/telr.png" alt="Telr" class="h-8">
431
+ </div>
432
+ </div>
433
+
434
+ <div class="text-center mt-6 text-sm text-gray-400">
435
+ © 2025 جمعية أصدقاء مرضى السرطان - الإمارات العربية المتحدة
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </footer>
440
+
441
+ <script>
442
+ // Mobile menu toggle functionality would go here
443
+ document.addEventListener('DOMContentLoaded', function() {
444
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
445
+ // Add click handler for mobile menu
446
+ });
447
+ </script>
448
+ <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=Aliosx997/vswo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
449
+ </html>