Giedo-Group20 commited on
Commit
83664b2
·
verified ·
1 Parent(s): 712f1c9

انشئ Giedo Group يقوم بإدارة 3شركات في مصر يعمل علي اضافه 1GIEDO Digital Mall اكبر مول الكتروني في مصر يعمل علي اضافه التجار والبايعين الي المول الالكتروني الذين يريدون بيع منتجات لهم واضافه هذا صفحه خاصه لكل تاجر له صفحه داش بورد خاصه له يعرض 2 Giedo Digital Marketing اكبر شركه دعاية واعلان وتسويق وتجارة الكترونيه وبها اعلانات مبوبة وجميع خدمات سوشيال ميديا ودعاية عاليه الجوده واريد ان تربط كل هذا بإدارة صفحه داش بورد خاصه لي تقوم بإدارة الإدارة

Browse files
dashboard.html ADDED
@@ -0,0 +1,433 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Giedo Group Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ .gradient-text {
12
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
13
+ -webkit-background-clip: text;
14
+ background-clip: text;
15
+ color: transparent;
16
+ }
17
+ .sidebar {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .sidebar.collapsed {
21
+ width: 80px;
22
+ }
23
+ .sidebar.collapsed .nav-text {
24
+ display: none;
25
+ }
26
+ .card-hover {
27
+ transition: all 0.3s ease;
28
+ }
29
+ .card-hover:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="min-h-screen bg-gray-100 text-gray-900 overflow-hidden">
36
+ <div class="flex h-screen">
37
+ <!-- Sidebar -->
38
+ <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col">
39
+ <div class="p-4 flex items-center justify-between border-b border-gray-800">
40
+ <a href="#" class="text-xl font-bold gradient-text">Giedo Dashboard</a>
41
+ <button id="toggleSidebar" class="text-gray-400 hover:text-white">
42
+ <i data-feather="chevron-left"></i>
43
+ </button>
44
+ </div>
45
+ <nav class="flex-1 overflow-y-auto p-4">
46
+ <div class="space-y-2">
47
+ <div class="text-xs uppercase text-gray-500 mb-2">Main</div>
48
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-purple-300">
49
+ <i data-feather="home"></i>
50
+ <span class="nav-text">Dashboard</span>
51
+ </a>
52
+ <div class="text-xs uppercase text-gray-500 mb-2 mt-4">Digital Mall</div>
53
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
54
+ <i data-feather="shopping-bag"></i>
55
+ <span class="nav-text">Products</span>
56
+ </a>
57
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
58
+ <i data-feather="dollar-sign"></i>
59
+ <span class="nav-text">Sales</span>
60
+ </a>
61
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
62
+ <i data-feather="users"></i>
63
+ <span class="nav-text">Customers</span>
64
+ </a>
65
+ <div class="text-xs uppercase text-gray-500 mb-2 mt-4">Digital Marketing</div>
66
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
67
+ <i data-feather="bar-chart-2"></i>
68
+ <span class="nav-text">Campaigns</span>
69
+ </a>
70
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
71
+ <i data-feather="trending-up"></i>
72
+ <span class="nav-text">Analytics</span>
73
+ </a>
74
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
75
+ <i data-feather="edit"></i>
76
+ <span class="nav-text">Content</span>
77
+ </a>
78
+ <div class="text-xs uppercase text-gray-500 mb-2 mt-4">Administration</div>
79
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
80
+ <i data-feather="settings"></i>
81
+ <span class="nav-text">Settings</span>
82
+ </a>
83
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
84
+ <i data-feather="user"></i>
85
+ <span class="nav-text">Account</span>
86
+ </a>
87
+ </div>
88
+ </nav>
89
+ <div class="p-4 border-t border-gray-800">
90
+ <div class="flex items-center space-x-3">
91
+ <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center">
92
+ <i data-feather="user" class="w-5 h-5"></i>
93
+ </div>
94
+ <div class="nav-text">
95
+ <div class="font-medium">Admin User</div>
96
+ <div class="text-xs text-gray-400">Super Admin</div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Main Content -->
103
+ <div class="flex-1 flex flex-col overflow-hidden">
104
+ <!-- Topbar -->
105
+ <header class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
106
+ <h1 class="text-2xl font-bold gradient-text">Management Dashboard</h1>
107
+ <div class="flex items-center space-x-4">
108
+ <div class="relative">
109
+ <i data-feather="bell" class="text-gray-600 hover:text-purple-600 cursor-pointer"></i>
110
+ <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
111
+ </div>
112
+ <button class="flex items-center space-x-2 bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg">
113
+ <span class="text-sm font-medium">Quick Actions</span>
114
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
115
+ </button>
116
+ </div>
117
+ </header>
118
+
119
+ <!-- Content -->
120
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
121
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
122
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
123
+ <div class="flex items-center justify-between mb-4">
124
+ <h3 class="text-gray-500 font-medium">Total Revenue</h3>
125
+ <i data-feather="dollar-sign" class="text-purple-500"></i>
126
+ </div>
127
+ <div class="text-3xl font-bold mb-2">EGP 254,870</div>
128
+ <div class="text-sm text-green-500 flex items-center">
129
+ <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
130
+ <span>12% from last month</span>
131
+ </div>
132
+ </div>
133
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
134
+ <div class="flex items-center justify-between mb-4">
135
+ <h3 class="text-gray-500 font-medium">Digital Mall Orders</h3>
136
+ <i data-feather="shopping-bag" class="text-blue-500"></i>
137
+ </div>
138
+ <div class="text-3xl font-bold mb-2">1,248</div>
139
+ <div class="text-sm text-green-500 flex items-center">
140
+ <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
141
+ <span>8% from last month</span>
142
+ </div>
143
+ </div>
144
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
145
+ <div class="flex items-center justify-between mb-4">
146
+ <h3 class="text-gray-500 font-medium">Marketing Campaigns</h3>
147
+ <i data-feather="bar-chart-2" class="text-yellow-500"></i>
148
+ </div>
149
+ <div class="text-3xl font-bold mb-2">27</div>
150
+ <div class="text-sm text-red-500 flex items-center">
151
+ <i data-feather="trending-down" class="w-4 h-4 mr-1"></i>
152
+ <span>3 inactive</span>
153
+ </div>
154
+ </div>
155
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
156
+ <div class="flex items-center justify-between mb-4">
157
+ <h3 class="text-gray-500 font-medium">Active Merchants</h3>
158
+ <i data-feather="users" class="text-green-500"></i>
159
+ </div>
160
+ <div class="text-3xl font-bold mb-2">5,421</div>
161
+ <div class="text-sm text-green-500 flex items-center">
162
+ <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
163
+ <span>156 new this month</span>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
169
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
170
+ <div class="flex items-center justify-between mb-6">
171
+ <h3 class="text-lg font-semibold">Revenue Overview</h3>
172
+ <div class="flex space-x-2">
173
+ <button class="px-3 py-1 text-xs bg-purple-100 text-purple-600 rounded-full">Monthly</button>
174
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Yearly</button>
175
+ </div>
176
+ </div>
177
+ <div class="h-64">
178
+ <canvas id="revenueChart"></canvas>
179
+ </div>
180
+ </div>
181
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
182
+ <div class="flex items-center justify-between mb-6">
183
+ <h3 class="text-lg font-semibold">Top Performing Products</h3>
184
+ <button class="text-sm text-purple-600 hover:text-purple-800">View All</button>
185
+ </div>
186
+ <div class="space-y-4">
187
+ <div class="flex items-center">
188
+ <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
189
+ <i data-feather="smartphone" class="text-blue-500"></i>
190
+ </div>
191
+ <div class="flex-1">
192
+ <div class="font-medium">Smartphone X</div>
193
+ <div class="text-sm text-gray-500">Electronics</div>
194
+ </div>
195
+ <div class="text-right">
196
+ <div class="font-medium">EGP 1,248</div>
197
+ <div class="text-sm text-green-500">+24%</div>
198
+ </div>
199
+ </div>
200
+ <div class="flex items-center">
201
+ <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
202
+ <i data-feather="watch" class="text-purple-500"></i>
203
+ </div>
204
+ <div class="flex-1">
205
+ <div class="font-medium">Premium Watch</div>
206
+ <div class="text-sm text-gray-500">Accessories</div>
207
+ </div>
208
+ <div class="text-right">
209
+ <div class="font-medium">EGP 899</div>
210
+ <div class="text-sm text-green-500">+18%</div>
211
+ </div>
212
+ </div>
213
+ <div class="flex items-center">
214
+ <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
215
+ <i data-feather="shirt" class="text-yellow-500"></i>
216
+ </div>
217
+ <div class="flex-1">
218
+ <div class="font-medium">Cotton T-Shirt</div>
219
+ <div class="text-sm text-gray-500">Fashion</div>
220
+ </div>
221
+ <div class="text-right">
222
+ <div class="font-medium">EGP 199</div>
223
+ <div class="text-sm text-red-500">-5%</div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover mb-8">
231
+ <div class="p-6">
232
+ <div class="flex items-center justify-between mb-6">
233
+ <h3 class="text-lg font-semibold">Recent Orders</h3>
234
+ <button class="text-sm text-purple-600 hover:text-purple-800">View All Orders</button>
235
+ </div>
236
+ <div class="overflow-x-auto">
237
+ <table class="min-w-full divide-y divide-gray-200">
238
+ <thead class="bg-gray-50">
239
+ <tr>
240
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
241
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
242
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
243
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
244
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
245
+ </tr>
246
+ </thead>
247
+ <tbody class="bg-white divide-y divide-gray-200">
248
+ <tr>
249
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2810</td>
250
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Ahmed Mohamed</td>
251
+ <td class="px-6 py-4 whitespace-nowrap">
252
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Delivered</span>
253
+ </td>
254
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 15, 2023</td>
255
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 1,499</td>
256
+ </tr>
257
+ <tr>
258
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2809</td>
259
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Nourhan Ali</td>
260
+ <td class="px-6 py-4 whitespace-nowrap">
261
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Processing</span>
262
+ </td>
263
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 15, 2023</td>
264
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 2,999</td>
265
+ </tr>
266
+ <tr>
267
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-2808</td>
268
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mahmoud Hassan</td>
269
+ <td class="px-6 py-4 whitespace-nowrap">
270
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Shipped</span>
271
+ </td>
272
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 14, 2023</td>
273
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">EGP 899</td>
274
+ </tr>
275
+ </tbody>
276
+ </table>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
282
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
283
+ <div class="flex items-center justify-between mb-6">
284
+ <h3 class="text-lg font-semibold">Marketing Campaigns</h3>
285
+ <button class="text-sm text-purple-600 hover:text-purple-800">Create New</button>
286
+ </div>
287
+ <div class="space-y-4">
288
+ <div class="flex items-center p-3 bg-gray-50 rounded-lg">
289
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
290
+ <i data-feather="instagram" class="text-purple-500"></i>
291
+ </div>
292
+ <div class="flex-1">
293
+ <div class="font-medium">Summer Sale</div>
294
+ <div class="text-sm text-gray-500">Instagram & Facebook</div>
295
+ </div>
296
+ <div class="text-right">
297
+ <div class="text-sm text-gray-500">Active</div>
298
+ <div class="text-xs text-gray-400">Ends Jun 30</div>
299
+ </div>
300
+ </div>
301
+ <div class="flex items-center p-3 bg-gray-50 rounded-lg">
302
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
303
+ <i data-feather="mail" class="text-blue-500"></i>
304
+ </div>
305
+ <div class="flex-1">
306
+ <div class="font-medium">Email Newsletter</div>
307
+ <div class="text-sm text-gray-500">Monthly Digest</div>
308
+ </div>
309
+ <div class="text-right">
310
+ <div class="text-sm text-gray-500">Scheduled</div>
311
+ <div class="text-xs text-gray-400">Jun 1</div>
312
+ </div>
313
+ </div>
314
+ <div class="flex items-center p-3 bg-gray-50 rounded-lg">
315
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
316
+ <i data-feather="search" class="text-green-500"></i>
317
+ </div>
318
+ <div class="flex-1">
319
+ <div class="font-medium">SEO Optimization</div>
320
+ <div class="text-sm text-gray-500">Ongoing</div>
321
+ </div>
322
+ <div class="text-right">
323
+ <div class="text-sm text-gray-500">Active</div>
324
+ <div class="text-xs text-gray-400">Continuous</div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
330
+ <div class="flex items-center justify-between mb-6">
331
+ <h3 class="text-lg font-semibold">Recent Activities</h3>
332
+ <button class="text-sm text-purple-600 hover:text-purple-800">View All</button>
333
+ </div>
334
+ <div class="space-y-4">
335
+ <div class="flex">
336
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-4">
337
+ <i data-feather="user-plus" class="text-purple-500 w-5 h-5"></i>
338
+ </div>
339
+ <div>
340
+ <div class="font-medium">New merchant registered</div>
341
+ <div class="text-sm text-gray-500">Electronics Store at 10:45 AM</div>
342
+ </div>
343
+ </div>
344
+ <div class="flex">
345
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
346
+ <i data-feather="shopping-cart" class="text-blue-500 w-5 h-5"></i>
347
+ </div>
348
+ <div>
349
+ <div class="font-medium">New order placed</div>
350
+ <div class="text-sm text-gray-500">#ORD-2811 at 9:30 AM</div>
351
+ </div>
352
+ </div>
353
+ <div class="flex">
354
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4">
355
+ <i data-feather="dollar-sign" class="text-green-500 w-5 h-5"></i>
356
+ </div>
357
+ <div>
358
+ <div class="font-medium">Payment received</div>
359
+ <div class="text-sm text-gray-500">EGP 1,499 at 8:15 AM</div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </main>
366
+ </div>
367
+ </div>
368
+
369
+ <script>
370
+ feather.replace();
371
+
372
+ // Toggle sidebar
373
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
374
+ document.querySelector('.sidebar').classList.toggle('collapsed');
375
+ const icon = this.querySelector('i');
376
+ if (document.querySelector('.sidebar').classList.contains('collapsed')) {
377
+ feather.replace();
378
+ icon.setAttribute('data-feather', 'chevron-right');
379
+ } else {
380
+ feather.replace();
381
+ icon.setAttribute('data-feather', 'chevron-left');
382
+ }
383
+ feather.replace();
384
+ });
385
+
386
+ // Revenue chart
387
+ const revenueCtx = document.getElementById('revenueChart').getContext('2d');
388
+ const revenueChart = new Chart(revenueCtx, {
389
+ type: 'line',
390
+ data: {
391
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
392
+ datasets: [{
393
+ label: 'Digital Mall',
394
+ data: [12000, 19000, 15000, 22000, 25000, 28000],
395
+ borderColor: '#8b5cf6',
396
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
397
+ tension: 0.3,
398
+ fill: true
399
+ }, {
400
+ label: 'Marketing Services',
401
+ data: [8000, 12000, 10000, 15000, 18000, 21000],
402
+ borderColor: '#3b82f6',
403
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
404
+ tension: 0.3,
405
+ fill: true
406
+ }]
407
+ },
408
+ options: {
409
+ responsive: true,
410
+ plugins: {
411
+ legend: {
412
+ position: 'top',
413
+ },
414
+ tooltip: {
415
+ mode: 'index',
416
+ intersect: false,
417
+ }
418
+ },
419
+ scales: {
420
+ y: {
421
+ beginAtZero: true,
422
+ ticks: {
423
+ callback: function(value) {
424
+ return 'EGP ' + value.toLocaleString();
425
+ }
426
+ }
427
+ }
428
+ }
429
+ }
430
+ });
431
+ </script>
432
+ </body>
433
+ </html>
giedo-digital-mall.html ADDED
@@ -0,0 +1,117 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GIEDO Digital Mall</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ .gradient-text {
11
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
12
+ -webkit-background-clip: text;
13
+ background-clip: text;
14
+ color: transparent;
15
+ }
16
+ .card-hover {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .card-hover:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white overflow-x-hidden">
26
+ <header class="relative z-10">
27
+ <nav class="container mx-auto px-6 py-6 flex justify-between items-center">
28
+ <a href="index.html" class="text-2xl font-bold gradient-text">Giedo Group</a>
29
+ <div class="hidden md:flex space-x-8">
30
+ <a href="index.html" class="hover:text-purple-300 transition-colors">Home</a>
31
+ <a href="giedo-digital-mall.html" class="text-purple-300 transition-colors">Digital Mall</a>
32
+ <a href="giedo-digital-marketing.html" class="hover:text-purple-300 transition-colors">Digital Marketing</a>
33
+ <a href="dashboard.html" class="hover:text-purple-300 transition-colors">Dashboard</a>
34
+ </div>
35
+ <button class="md:hidden">
36
+ <i data-feather="menu"></i>
37
+ </button>
38
+ </nav>
39
+ </header>
40
+
41
+ <main class="relative z-10 container mx-auto px-6 py-12">
42
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12">
43
+ <div>
44
+ <h1 class="text-4xl font-bold mb-2 gradient-text">GIEDO Digital Mall</h1>
45
+ <p class="text-xl text-gray-300">Egypt's largest digital marketplace connecting buyers and sellers</p>
46
+ </div>
47
+ <a href="merchant-signup.html" class="mt-4 md:mt-0 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full font-semibold hover:opacity-90 transition-opacity text-center">
48
+ Become a Merchant
49
+ </a>
50
+ </div>
51
+
52
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
53
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 text-center card-hover">
54
+ <i data-feather="users" class="w-10 h-10 mx-auto text-purple-400 mb-4"></i>
55
+ <h3 class="text-xl font-bold mb-2">5000+</h3>
56
+ <p class="text-gray-400">Active Merchants</p>
57
+ </div>
58
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 text-center card-hover">
59
+ <i data-feather="shopping-bag" class="w-10 h-10 mx-auto text-blue-400 mb-4"></i>
60
+ <h3 class="text-xl font-bold mb-2">100K+</h3>
61
+ <p class="text-gray-400">Products Available</p>
62
+ </div>
63
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 text-center card-hover">
64
+ <i data-feather="globe" class="w-10 h-10 mx-auto text-green-400 mb-4"></i>
65
+ <h3 class="text-xl font-bold mb-2">27</h3>
66
+ <p class="text-gray-400">Governorates Covered</p>
67
+ </div>
68
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 text-center card-hover">
69
+ <i data-feather="truck" class="w-10 h-10 mx-auto text-yellow-400 mb-4"></i>
70
+ <h3 class="text-xl font-bold mb-2">Same Day</h3>
71
+ <p class="text-gray-400">Delivery Available</p>
72
+ </div>
73
+ </div>
74
+
75
+ <h2 class="text-3xl font-bold mb-8 gradient-text">Merchant Dashboard Features</h2>
76
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
77
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 card-hover">
78
+ <i data-feather="package" class="w-8 h-8 text-purple-400 mb-4"></i>
79
+ <h3 class="text-xl font-bold mb-3">Product Management</h3>
80
+ <p class="text-gray-400">Easily add, edit and manage your product catalog with images, descriptions and pricing.</p>
81
+ </div>
82
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 card-hover">
83
+ <i data-feather="bar-chart-2" class="w-8 h-8 text-blue-400 mb-4"></i>
84
+ <h3 class="text-xl font-bold mb-3">Sales Analytics</h3>
85
+ <p class="text-gray-400">Track your sales performance, customer behavior and revenue trends.</p>
86
+ </div>
87
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 card-hover">
88
+ <i data-feather="credit-card" class="w-8 h-8 text-green-400 mb-4"></i>
89
+ <h3 class="text-xl font-bold mb-3">Payment Processing</h3>
90
+ <p class="text-gray-400">Secure payment gateway with multiple payment options and withdrawal management.</p>
91
+ </div>
92
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 card-hover">
93
+ <i data-feather="message-circle" class="w-8 h-8 text-yellow-400 mb-4"></i>
94
+ <h3 class="text-xl font-bold mb-3">Customer Support</h3>
95
+ <p class="text-gray-400">Integrated messaging system to communicate with your customers directly.</p>
96
+ </div>
97
+ </div>
98
+
99
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-8 mb-12">
100
+ <h2 class="text-3xl font-bold mb-4 gradient-text">Join Egypt's Largest Digital Mall</h2>
101
+ <p class="text-xl text-gray-300 mb-6">Expand your business reach with thousands of daily shoppers</p>
102
+ <div class="flex flex-col sm:flex-row gap-4">
103
+ <a href="merchant-signup.html" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full font-semibold hover:opacity-90 transition-opacity text-center">
104
+ Register as Merchant
105
+ </a>
106
+ <a href="dashboard.html" class="px-6 py-3 border border-gray-600 rounded-full font-semibold hover:bg-gray-800 transition-colors text-center">
107
+ Merchant Login
108
+ </a>
109
+ </div>
110
+ </div>
111
+ </main>
112
+
113
+ <script>
114
+ feather.replace();
115
+ </script>
116
+ </body>
117
+ </html>
giedo-digital-marketing.html ADDED
@@ -0,0 +1,151 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Giedo Digital Marketing</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ .gradient-text {
11
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
12
+ -webkit-background-clip: text;
13
+ background-clip: text;
14
+ color: transparent;
15
+ }
16
+ .card-hover {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .card-hover:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white overflow-x-hidden">
26
+ <header class="relative z-10">
27
+ <nav class="container mx-auto px-6 py-6 flex justify-between items-center">
28
+ <a href="index.html" class="text-2xl font-bold gradient-text">Giedo Group</a>
29
+ <div class="hidden md:flex space-x-8">
30
+ <a href="index.html" class="hover:text-purple-300 transition-colors">Home</a>
31
+ <a href="giedo-digital-mall.html" class="hover:text-purple-300 transition-colors">Digital Mall</a>
32
+ <a href="giedo-digital-marketing.html" class="text-purple-300 transition-colors">Digital Marketing</a>
33
+ <a href="dashboard.html" class="hover:text-purple-300 transition-colors">Dashboard</a>
34
+ </div>
35
+ <button class="md:hidden">
36
+ <i data-feather="menu"></i>
37
+ </button>
38
+ </nav>
39
+ </header>
40
+
41
+ <main class="relative z-10 container mx-auto px-6 py-12">
42
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12">
43
+ <div>
44
+ <h1 class="text-4xl font-bold mb-2 gradient-text">Giedo Digital Marketing</h1>
45
+ <p class="text-xl text-gray-300">Comprehensive digital solutions for your business growth</p>
46
+ </div>
47
+ <a href="dashboard.html" class="mt-4 md:mt-0 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full font-semibold hover:opacity-90 transition-opacity text-center">
48
+ Access Dashboard
49
+ </a>
50
+ </div>
51
+
52
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
53
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 card-hover">
54
+ <i data-feather="trending-up" class="w-8 h-8 text-purple-400 mb-4"></i>
55
+ <h3 class="text-xl font-bold mb-3">Social Media Marketing</h3>
56
+ <p class="text-gray-400 mb-4">Strategic campaigns across Facebook, Instagram, Twitter, LinkedIn and TikTok.</p>
57
+ <ul class="space-y-2 text-gray-300">
58
+ <li class="flex items-start">
59
+ <i data-feather="check" class="w-4 h-4 mr-2 text-green-400 mt-0.5"></i>
60
+ <span>Content Creation</span>
61
+ </li>
62
+ <li class="flex items-start">
63
+ <i data-feather="check" class="w-4 h-4 mr-2 text-green-400 mt-0.5"></i>
64
+ <span>Influencer Partnerships</span>
65
+ </li>
66
+ <li class="flex items-start">
67
+ <i data-feather="check" class="w-4 h-4 mr-2 text-green-400 mt-0.5"></i>
68
+ <span>Community Management</span>
69
+ </li>
70
+ </ul>
71
+ </div>
72
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 card-hover">
73
+ <i data-feather="search" class="w-8 h-8 text-blue-400 mb-4"></i>
74
+ <h3 class="text-xl font-bold mb-3">SEO & Content Marketing</h3>
75
+ <p class="text-gray-400 mb-4">Improve your search rankings with our expert optimization services.</p>
76
+ <ul class="space-y-2 text-gray-300">
77
+ <li class="flex items-start">
78
+ <i data-feather="check" class="w-4 h-4 mr-2 text-green-400 mt-0.5"></i>
79
+ <span>Keyword Research</span>
80
+ </li>
81
+ <li class="flex items-start">
82
+ <i data-feather="check" class="w-4 h-4 mr-2 text-green-400 mt-0.5"></i>
83
+ <span>Content Strategy</span>
84
+ </li>
85
+ <li class="flex items-start">
86
+ <i data-feather="check" class="w-4 h-4 mr-2 text-green-400 mt-0.5"></i>
87
+ <span>Link Building</span>
88
+ </li>
89
+ </ul>
90
+ </div>
91
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 card-hover">
92
+ <i data-feather="dollar-sign" class="w-8 h-8 text-yellow-400 mb-4"></i>
93
+ <h3 class="text-xl font-bold mb-3">Paid Advertising</h3>
94
+ <p class="text-gray-400 mb-4">Maximize ROI with targeted ad campaigns across all platforms.</p>
95
+ <ul class="space-y-2 text-gray-300">
96
+ <li class="flex items-start">
97
+ <i data-feather="check" class="w-4 h-4 mr-2 text-green-400 mt-0.5"></i>
98
+ <span>Facebook/Instagram Ads</span>
99
+ </li>
100
+ <li class="flex items-start">
101
+ <i data-feather="check" class="w-4 h-4 mr-2 text-green-400 mt=0.5"></i>
102
+ <span>Google Ads</span>
103
+ </li>
104
+ <li class="flex items-start">
105
+ <i data-feather="check" class="w-4 h-4 mr-2 text-green-400 mt=0.5"></i>
106
+ <span>Programmatic Advertising</span>
107
+ </li>
108
+ </ul>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-8 mb-12">
113
+ <div class="flex flex-col md:flex-row items-center gap-8">
114
+ <div class="md:w-1/2">
115
+ <h2 class="text-3xl font-bold mb-4 gradient-text">Classified Ads Platform</h2>
116
+ <p class="text-xl text-gray-300 mb-6">Reach thousands of potential customers with our premium classified ads service.</p>
117
+ <ul class="space-y-4 text-gray-300">
118
+ <li class="flex items-start">
119
+ <i data-feather="check-circle" class="w-5 h-5 text-green-400 mr-3 mt-0.5"></i>
120
+ <span>Featured Listings</span>
121
+ </li>
122
+ <li class="flex items-start">
123
+ <i data-feather="check-circle" class="w-5 h-5 text-green-400 mr-3 mt-0.5"></i>
124
+ <span>Category-Based Organization</span>
125
+ </li>
126
+ <li class="flex items-start">
127
+ <i data-feather="check-circle" class="w-5 h-5 text-green-400 mr-3 mt=0.5"></i>
128
+ <span>Premium Placement Options</span>
129
+ </li>
130
+ </ul>
131
+ </div>
132
+ <div class="md:w-1/2">
133
+ <img src="http://static.photos/technology/640x360/123" alt="Classified Ads" class="rounded-xl w-full">
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <div class="text-center">
139
+ <h2 class="text-3xl font-bold mb-4 gradient-text">Ready to Grow Your Business?</h2>
140
+ <p class="text-xl text-gray-300 mb-8">Our digital marketing experts are ready to help you achieve your goals</p>
141
+ <a href="dashboard.html" class="px-8 py-3 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full font-semibold hover:opacity-90 transition-opacity text-center inline-block">
142
+ Get Started Today
143
+ </a>
144
+ </div>
145
+ </main>
146
+
147
+ <script>
148
+ feather.replace();
149
+ </script>
150
+ </body>
151
+ </html>
giedo-group.html ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Giedo Group</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ .gradient-text {
11
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
12
+ -webkit-background-clip: text;
13
+ background-clip: text;
14
+ color: transparent;
15
+ }
16
+ .card-hover {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .card-hover:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white overflow-x-hidden">
26
+ <header class="relative z-10">
27
+ <nav class="container mx-auto px-6 py-6 flex justify-between items-center">
28
+ <a href="index.html" class="text-2xl font-bold gradient-text">Giedo Group</a>
29
+ <div class="hidden md:flex space-x-8">
30
+ <a href="index.html" class="hover:text-purple-300 transition-colors">Home</a>
31
+ <a href="giedo-digital-mall.html" class="hover:text-purple-300 transition-colors">Digital Mall</a>
32
+ <a href="giedo-digital-marketing.html" class="hover:text-purple-300 transition-colors">Digital Marketing</a>
33
+ <a href="dashboard.html" class="hover:text-purple-300 transition-colors">Dashboard</a>
34
+ </div>
35
+ <button class="md:hidden">
36
+ <i data-feather="menu"></i>
37
+ </button>
38
+ </nav>
39
+ </header>
40
+
41
+ <main class="relative z-10 container mx-auto px-6 py-12">
42
+ <h1 class="text-4xl font-bold mb-8 gradient-text">Giedo Group</h1>
43
+
44
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
45
+ <!-- Giedo Digital Mall -->
46
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 card-hover">
47
+ <div class="flex items-center justify-between mb-4">
48
+ <h3 class="text-xl font-bold">GIEDO Digital Mall</h3>
49
+ <span class="text-xs bg-purple-600/20 text-purple-300 px-2 py-1 rounded">Featured</span>
50
+ </div>
51
+ <p class="text-gray-300 mb-4">Egypt's largest digital mall connecting sellers with customers nationwide.</p>
52
+ <a href="giedo-digital-mall.html" class="text-sm text-purple-300 hover:text-purple-200 transition-colors">Explore →</a>
53
+ </div>
54
+
55
+ <!-- Giedo Digital Marketing -->
56
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 card-hover">
57
+ <div class="flex items-center justify-between mb-4">
58
+ <h3 class="text-xl font-bold">Giedo Digital Marketing</h3>
59
+ <span class="text-xs bg-blue-600/20 text-blue-300 px-2 py-1 rounded">Premium</span>
60
+ </div>
61
+ <p class="text-gray-300 mb-4">Full-service digital marketing, advertising and social media solutions.</p>
62
+ <a href="giedo-digital-marketing.html" class="text-sm text-blue-300 hover:text-blue-200 transition-colors">Learn More →</a>
63
+ </div>
64
+
65
+ <!-- Dashboard -->
66
+ <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 card-hover">
67
+ <div class="flex items-center justify-between mb-4">
68
+ <h3 class="text-xl font-bold">Management Dashboard</h3>
69
+ <i data-feather="lock" class="text-green-400"></i>
70
+ </div>
71
+ <p class="text-gray-300 mb-4">Centralized management portal for all Giedo Group operations.</p>
72
+ <a href="dashboard.html" class="text-sm text-green-300 hover:text-green-200 transition-colors">Access Dashboard →</a>
73
+ </div>
74
+ </div>
75
+ </main>
76
+
77
+ <script>
78
+ feather.replace();
79
+ </script>
80
+ </body>
81
+ </html>