Hugging Face's logo

Spaces:
Kenmus
/
kenmusimport
Running

App Files Community
Kenmus commited on
Commit
fe31b99
·
verified ·
1 Parent(s): 46425b8

can you integrate all product categories in Alibaba - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1230 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kenmusimport
3
- emoji: 🏢
4
  colorFrom: yellow
5
- colorTo: blue
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: kenmusimport
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: pink
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,1230 @@
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
+ Here's a complete mobile-friendly client portal for your China-to-Ghana pre-order shopping platform. I've used HTML, CSS, JavaScript, and TailwindCSS to create a responsive design with all the requested features:
2
+
3
+ ```html
4
+ <!DOCTYPE html>
5
+ <html lang="en">
6
+ <head>
7
+ <meta charset="UTF-8">
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+ <title>China-Ghana Pre-Order Portal</title>
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
12
+ <style>
13
+ body {
14
+ font-family: 'Montserrat', 'Poppins', sans-serif;
15
+ line-height: 1.6;
16
+ }
17
+ h1, h2, h3, h4, h5, h6 {
18
+ font-family: 'Poppins', sans-serif;
19
+ font-weight: 600;
20
+ letter-spacing: -0.5px;
21
+ }
22
+ .product-card {
23
+ transition: all 0.3s ease;
24
+ border-radius: 12px;
25
+ overflow: hidden;
26
+ }
27
+ .product-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
30
+ }
31
+ button, [type='button'], [type='submit'] {
32
+ transition: all 0.3s ease;
33
+ }
34
+ </style>
35
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
36
+ <style>
37
+ /* Custom CSS for elements that need more specific styling */
38
+ .product-card {
39
+ transition: all 0.3s ease;
40
+ }
41
+ .product-card:hover {
42
+ transform: translateY(-5px);
43
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
44
+ }
45
+ .status-badge {
46
+ font-size: 0.75rem;
47
+ padding: 0.25rem 0.5rem;
48
+ border-radius: 1rem;
49
+ }
50
+ .status-requested { background-color: #F59E0B; color: white; }
51
+ .status-sourced { background-color: #3B82F6; color: white; }
52
+ .status-paid { background-color: #10B981; color: white; }
53
+ .status-shipped { background-color: #8B5CF6; color: white; }
54
+ .status-in-ghana { background-color: #EC4899; color: white; }
55
+ .status-ready { background-color: #1E40AF; color: white; }
56
+ .chat-bubble-user {
57
+ background-color: #3B82F6;
58
+ color: white;
59
+ border-radius: 1rem 1rem 0 1rem;
60
+ }
61
+ .chat-bubble-admin {
62
+ background-color: #E5E7EB;
63
+ color: #1F2937;
64
+ border-radius: 1rem 1rem 1rem 0;
65
+ }
66
+ #imagePreview {
67
+ max-width: 100%;
68
+ max-height: 200px;
69
+ display: none;
70
+ margin-top: 1rem;
71
+ border-radius: 0.5rem;
72
+ }
73
+ .drawer {
74
+ transition: transform 0.3s ease-in-out;
75
+ transform: translateX(100%);
76
+ }
77
+ .drawer.open {
78
+ transform: translateX(0);
79
+ }
80
+ .overlay {
81
+ display: none;
82
+ position: fixed;
83
+ top: 0;
84
+ left: 0;
85
+ right: 0;
86
+ bottom: 0;
87
+ background-color: rgba(0,0,0,0.5);
88
+ z-index: 40;
89
+ }
90
+ .overlay.active {
91
+ display: block;
92
+ }
93
+ </style>
94
+ </head>
95
+ <body class="bg-blue-50 font-sans">
96
+ <!-- Navigation -->
97
+ <nav class="bg-blue-600 text-white shadow-md sticky top-0 z-30">
98
+ <div class="max-w-6xl mx-auto px-4">
99
+ <div class="flex justify-between items-center h-16">
100
+ <div class="flex items-center">
101
+ <a href="#" class="text-xl font-bold text-white">Chinamart GH</a>
102
+ </div>
103
+ <div class="hidden md:flex items-center space-x-4">
104
+ <a href="#home" class="px-3 py-2 text-white hover:text-green-200">Home</a>
105
+ <div class="relative group">
106
+ <button class="px-3 py-2 text-white hover:text-green-200 flex items-center">
107
+ Categories <i class="fas fa-chevron-down ml-1 text-xs"></i>
108
+ </button>
109
+ <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden group-hover:block">
110
+ <a href="#electronics" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">Electronics</a>
111
+ <a href="#apparel" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">Apparel</a>
112
+ <a href="#home-garden" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">Home & Garden</a>
113
+ <a href="#beauty" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">Beauty & Personal Care</a>
114
+ <a href="#sports" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">Sports & Outdoors</a>
115
+ <a href="#machinery" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">Machinery</a>
116
+ </div>
117
+ </div>
118
+ <a href="#pre-orders" class="px-3 py-2 text-white hover:text-green-200">Pre-Orders</a>
119
+ <a href="#buy-for-me" class="px-3 py-2 text-white hover:text-green-200">Buy For Me</a>
120
+ <a href="#tracking" class="px-3 py-2 text-white hover:text-green-200">Track Order</a>
121
+ <button id="loginBtn" class="px-4 py-2 bg-white text-green-700 rounded-md hover:bg-green-100">Login</button>
122
+ </div>
123
+ <div class="md:hidden flex items-center">
124
+ <button id="mobileMenuBtn" class="text-gray-700 focus:outline-none">
125
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
126
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
127
+ </svg>
128
+ </button>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </nav>
133
+
134
+ <!-- Mobile Menu Drawer -->
135
+ <div class="overlay" id="overlay"></div>
136
+ <div class="drawer fixed top-0 right-0 w-64 h-full bg-white shadow-lg z-50 p-4" id="mobileDrawer">
137
+ <div class="flex justify-between items-center mb-6">
138
+ <h2 class="text-xl font-bold">Menu</h2>
139
+ <button id="closeDrawerBtn" class="text-gray-500 hover:text-gray-700">
140
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
141
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
142
+ </svg>
143
+ </button>
144
+ </div>
145
+ <div class="flex flex-col space-y-4">
146
+ <a href="#home" class="px-3 py-2 text-gray-700 hover:text-blue-600">Home</a>
147
+ <div class="pl-3">
148
+ <button class="flex items-center justify-between w-full py-2 text-gray-700 hover:text-blue-600">
149
+ <span>Categories</span>
150
+ <i class="fas fa-chevron-down text-xs"></i>
151
+ </button>
152
+ <div class="pl-4 mt-2 space-y-2 hidden" id="mobileCategories">
153
+ <a href="#electronics" class="block py-1 text-gray-700 hover:text-blue-600">Electronics</a>
154
+ <a href="#apparel" class="block py-1 text-gray-700 hover:text-blue-600">Apparel</a>
155
+ <a href="#home-garden" class="block py-1 text-gray-700 hover:text-blue-600">Home & Garden</a>
156
+ <a href="#beauty" class="block py-1 text-gray-700 hover:text-blue-600">Beauty</a>
157
+ <a href="#sports" class="block py-1 text-gray-700 hover:text-blue-600">Sports</a>
158
+ <a href="#machinery" class="block py-1 text-gray-700 hover:text-blue-600">Machinery</a>
159
+ </div>
160
+ </div>
161
+ <a href="#pre-orders" class="px-3 py-2 text-gray-700 hover:text-blue-600">Pre-Orders</a>
162
+ <a href="#buy-for-me" class="px-3 py-2 text-gray-700 hover:text-blue-600">Buy For Me</a>
163
+ <a href="#tracking" class="px-3 py-2 text-gray-700 hover:text-blue-600">Track Order</a>
164
+ <button id="mobileLoginBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Login</button>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- WhatsApp Floating Button -->
169
+ <a href="https://wa.me/233550273901" class="fixed bottom-6 right-6 bg-red-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-red-700 z-20">
170
+ <i class="fab fa-whatsapp text-2xl"></i>
171
+ </a>
172
+
173
+ <!-- Main Content -->
174
+ <main>
175
+ <!-- Hero Section -->
176
+ <section id="home" class="py-12 bg-gradient-to-r from-blue-500 to-blue-700 text-white">
177
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
178
+ <div class="md:flex items-center justify-between">
179
+ <div class="md:w-1/2 mb-8 md:mb-0">
180
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Your Reliable Link to the Chinese Market</h1>
181
+ <p class="text-xl mb-6">Pre-order popular Chinese products with guaranteed delivery to Ghana. We handle sourcing, shipping, and customs for you.</p>
182
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
183
+ <a href="#pre-orders" class="px-6 py-3 bg-white text-blue-600 font-bold rounded-md hover:bg-gray-100 text-center">Browse Pre-Orders</a>
184
+ <a href="#buy-for-me" class="px-6 py-3 border-2 border-white text-white font-bold rounded-md hover:bg-white hover:text-blue-600 text-center">Start Your Order</a>
185
+ </div>
186
+ </div>
187
+ <div class="md:w-1/2 flex justify-center">
188
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Shipping packages" class="rounded-lg shadow-xl w-full max-w-md">
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </section>
193
+
194
+ <!-- How It Works -->
195
+ <section class="py-12 bg-white">
196
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
197
+ <h2 class="text-3xl font-bold text-center mb-12">How It Works</h2>
198
+ <div class="grid md:grid-cols-3 gap-8">
199
+ <div class="text-center p-6 rounded-lg bg-gray-50">
200
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
201
+ <i class="fas fa-search text-blue-600 text-xl"></i>
202
+ </div>
203
+ <h3 class="text-xl font-semibold mb-2">1. Browse or Request</h3>
204
+ <p class="text-gray-600">Choose from our pre-order listings or submit a custom request for any product from China.</p>
205
+ </div>
206
+ <div class="text-center p-6 rounded-lg bg-gray-50">
207
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
208
+ <i class="fas fa-shipping-fast text-blue-600 text-xl"></i>
209
+ </div>
210
+ <h3 class="text-xl font-semibold mb-2">2. We Handle Shipping</h3>
211
+ <p class="text-gray-600">We source, purchase, and ship your items directly from China to Ghana with no hidden fees.</p>
212
+ </div>
213
+ <div class="text-center p-6 rounded-lg bg-gray-50">
214
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
215
+ <i class="fas fa-box-open text-blue-600 text-xl"></i>
216
+ </div>
217
+ <h3 class="text-xl font-semibold mb-2">3. Receive Your Order</h3>
218
+ <p class="text-gray-600">Pick up your order at our Accra office or arrange for local delivery when it arrives.</p>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </section>
223
+
224
+ <!-- Alibaba Categories -->
225
+ <section class="py-12 bg-white">
226
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
227
+ <h2 class="text-3xl font-bold text-center mb-8">Shop by Alibaba Categories</h2>
228
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
229
+ <a href="#electronics" class="category-card bg-gray-50 rounded-lg p-6 text-center hover:shadow-md transition-all">
230
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
231
+ <i class="fas fa-laptop text-blue-600 text-xl"></i>
232
+ </div>
233
+ <h3 class="font-medium">Electronics</h3>
234
+ </a>
235
+ <a href="#apparel" class="category-card bg-gray-50 rounded-lg p-6 text-center hover:shadow-md transition-all">
236
+ <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
237
+ <i class="fas fa-tshirt text-red-600 text-xl"></i>
238
+ </div>
239
+ <h3 class="font-medium">Apparel</h3>
240
+ </a>
241
+ <a href="#home-garden" class="category-card bg-gray-50 rounded-lg p-6 text-center hover:shadow-md transition-all">
242
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
243
+ <i class="fas fa-home text-green-600 text-xl"></i>
244
+ </div>
245
+ <h3 class="font-medium">Home & Garden</h3>
246
+ </a>
247
+ <a href="#beauty" class="category-card bg-gray-50 rounded-lg p-6 text-center hover:shadow-md transition-all">
248
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
249
+ <i class="fas fa-spa text-purple-600 text-xl"></i>
250
+ </div>
251
+ <h3 class="font-medium">Beauty</h3>
252
+ </a>
253
+ <a href="#sports" class="category-card bg-gray-50 rounded-lg p-6 text-center hover:shadow-md transition-all">
254
+ <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
255
+ <i class="fas fa-running text-yellow-600 text-xl"></i>
256
+ </div>
257
+ <h3 class="font-medium">Sports</h3>
258
+ </a>
259
+ <a href="#machinery" class="category-card bg-gray-50 rounded-lg p-6 text-center hover:shadow-md transition-all">
260
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
261
+ <i class="fas fa-cogs text-indigo-600 text-xl"></i>
262
+ </div>
263
+ <h3 class="font-medium">Machinery</h3>
264
+ </a>
265
+ </div>
266
+ </div>
267
+ </section>
268
+
269
+ <!-- Available Goods -->
270
+ <section id="pre-orders" class="py-12 bg-gradient-to-r from-blue-100 to-purple-100">
271
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
272
+ <div class="text-center mb-12">
273
+ <h2 class="text-4xl font-bold text-blue-800 mb-2">Available in Ghana</h2>
274
+ <p class="text-lg text-blue-600">Ready for immediate pickup/delivery in Ghana</p>
275
+ </div>
276
+ <div class="flex justify-end mb-8">
277
+ <div class="relative">
278
+ <select class="block appearance-none bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded leading-tight focus:outline-none focus:border-blue-500">
279
+ <option>Sort by: Popular</option>
280
+ <option>Sort by: Newest</option>
281
+ <option>Sort by: Price Low-High</option>
282
+ <option>Sort by: Price High-Low</option>
283
+ </select>
284
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
285
+ <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
291
+ <!-- Product Card 1 -->
292
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
293
+ <div class="relative pb-2/3 h-48 overflow-hidden">
294
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Smart Watch">
295
+ </div>
296
+ <div class="p-4">
297
+ <h3 class="font-bold text-lg mb-1">Smart Watch GT3 Pro</h3>
298
+ <p class="text-gray-600 text-sm mb-2">Bluetooth fitness tracker with heart rate monitor and 14-day battery life</p>
299
+ <div class="flex justify-between items-center mb-2">
300
+ <span class="font-bold text-blue-600">₵450.00</span>
301
+ <span class="text-sm text-gray-500">Est. delivery: 3-4 weeks</span>
302
+ </div>
303
+ <div class="text-sm text-gray-500 mb-3">Shipping: ₵50 (included in price)</div>
304
+ <button class="w-full py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-md hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg">Order Now</button>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Product Card 2 -->
309
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
310
+ <div class="relative pb-2/3 h-48 overflow-hidden">
311
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1546054454-aa26e2b734c7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Wireless Earbuds">
312
+ </div>
313
+ <div class="p-4">
314
+ <h3 class="font-bold text-lg mb-1">Wireless Earbuds TWS</h3>
315
+ <p class="text-gray-600 text-sm mb-2">Bluetooth 5.0 with 20hrs playtime, touch control, and IPX5 waterproof</p>
316
+ <div class="flex justify-between items-center mb-2">
317
+ <span class="font-bold text-blue-600">₵280.00</span>
318
+ <span class="text-sm text-gray-500">Est. delivery: 2-3 weeks</span>
319
+ </div>
320
+ <div class="text-sm text-gray-500 mb-3">Shipping: ₵40 (included in price)</div>
321
+ <button class="w-full py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-md hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg">Order Now</button>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Product Card 3 -->
326
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
327
+ <div class="relative pb-2/3 h-48 overflow-hidden">
328
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Power Bank">
329
+ </div>
330
+ <div class="p-4">
331
+ <h3 class="font-bold text-lg mb-1">20000mAh Power Bank</h3>
332
+ <p class="text-gray-600 text-sm mb-2">Dual USB ports, fast charging, LED display, compatible with all devices</p>
333
+ <div class="flex justify-between items-center mb-2">
334
+ <span class="font-bold text-blue-600">₵320.00</span>
335
+ <span class="text-sm text-gray-500">Est. delivery: 3 weeks</span>
336
+ </div>
337
+ <div class="text-sm text-gray-500 mb-3">Shipping: ₵45 (included in price)</div>
338
+ <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Pre-Order Now</button>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Product Card 4 -->
343
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
344
+ <div class="relative pb-2/3 h-48 overflow-hidden">
345
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1593784991095-a205069470b6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Hair Dryer">
346
+ </div>
347
+ <div class="p-4">
348
+ <h3 class="font-bold text-lg mb-1">Ionic Hair Dryer</h3>
349
+ <p class="text-gray-600 text-sm mb-2">2000W professional hair dryer with 3 heat settings and cool shot</p>
350
+ <div class="flex justify-between items-center mb-2">
351
+ <span class="font-bold text-blue-600">₵380.00</span>
352
+ <span class="text-sm text-gray-500">Est. delivery: 4 weeks</span>
353
+ </div>
354
+ <div class="text-sm text-gray-500 mb-3">Shipping: ₵60 (included in price)</div>
355
+ <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Pre-Order Now</button>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Product Card 5 -->
360
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
361
+ <div class="relative pb-2/3 h-48 overflow-hidden">
362
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1520390138845-fd2d229dd553?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Electric Scooter">
363
+ </div>
364
+ <div class="p-4">
365
+ <h3 class="font-bold text-lg mb-1">Electric Scooter X5</h3>
366
+ <p class="text-gray-600 text-sm mb-2">25km range, 25km/h max speed, foldable design, LED display</p>
367
+ <div class="flex justify-between items-center mb-2">
368
+ <span class="font-bold text-blue-600">₵2,450.00</span>
369
+ <span class="text-sm text-gray-500">Est. delivery: 5-6 weeks</span>
370
+ </div>
371
+ <div class="text-sm text-gray-500 mb-3">Shipping: ₵350 (included in price)</div>
372
+ <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Pre-Order Now</button>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Product Card 6 -->
377
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
378
+ <div class="relative pb-2/3 h-48 overflow-hidden">
379
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1546868871-7041f2d55e0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Smartphone">
380
+ </div>
381
+ <div class="p-4">
382
+ <h3 class="font-bold text-lg mb-1">Xiaomi Redmi Note 11</h3>
383
+ <p class="text-gray-600 text-sm mb-2">6.43" AMOLED, 128GB+6GB, 50MP quad camera, 5000mAh battery</p>
384
+ <div class="flex justify-between items-center mb-2">
385
+ <span class="font-bold text-blue-600">₵1,850.00</span>
386
+ <span class="text-sm text-gray-500">Est. delivery: 4 weeks</span>
387
+ </div>
388
+ <div class="text-sm text-gray-500 mb-3">Shipping: ₵120 (included in price)</div>
389
+ <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Pre-Order Now</button>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="text-center mb-12 mt-16">
395
+ <h2 class="text-4xl font-bold text-blue-800 mb-2">Pre-Order from China</h2>
396
+ <p class="text-lg text-blue-600">Items we'll source and ship from China to Ghana</p>
397
+ </div>
398
+
399
+ <!-- You would duplicate the product grid here for pre-order items -->
400
+
401
+ <div class="mt-8 text-center">
402
+ <button class="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-md hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg font-bold">Load More Products</button>
403
+ </div>
404
+ </div>
405
+ </section>
406
+
407
+ <!-- Buy For Me Section -->
408
+ <section id="buy-for-me" class="py-12 bg-white">
409
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
410
+ <h2 class="text-3xl font-bold text-center mb-8">Buy For Me Service</h2>
411
+ <p class="text-center text-gray-600 mb-8">Can't find what you're looking for? Submit a request and we'll source it for you from China!</p>
412
+
413
+ <div class="bg-gray-50 rounded-lg shadow-md p-6">
414
+ <form id="buyForMeForm">
415
+ <div class="mb-6">
416
+ <label class="block text-gray-700 font-medium mb-2" for="productImage">Product Image</label>
417
+ <div class="border-2 border-dashed border-gray-300 rounded-md p-4 text-center">
418
+ <input type="file" id="productImage" accept="image/*" class="hidden" />
419
+ <label for="productImage" class="cursor-pointer">
420
+ <i class="fas fa-cloud-upload-alt text-3xl text-blue-500 mb-2"></i>
421
+ <p class="text-gray-600">Click to upload product image</p>
422
+ <p class="text-sm text-gray-500 mt-1">JPEG, PNG up to 2MB</p>
423
+ </label>
424
+ <img id="imagePreview" class="mx-auto" />
425
+ </div>
426
+ </div>
427
+
428
+ <div class="mb-6">
429
+ <label class="block text-gray-700 font-medium mb-2" for="productDescription">Product Description</label>
430
+ <textarea id="productDescription" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Describe the product including brand, model, color, size, specifications, etc." required></textarea>
431
+ </div>
432
+
433
+ <div class="mb-6">
434
+ <label class="block text-gray-700 font-medium mb-2" for="productUrl">Product URL (Optional)</label>
435
+ <input type="url" id="productUrl" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="e.g. https://www.alibaba.com/product-detail/...">
436
+ </div>
437
+
438
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
439
+ <div>
440
+ <label class="block text-gray-700 font-medium mb-2" for="quantity">Quantity</label>
441
+ <input type="number" id="quantity" min="1" value="1" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
442
+ </div>
443
+ <div>
444
+ <label class="block text-gray-700 font-medium mb-2" for="budget">Your Budget (GHS)</label>
445
+ <input type="number" id="budget" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Approximate amount you're willing to pay">
446
+ </div>
447
+ </div>
448
+
449
+ <div class="mb-6">
450
+ <label class="block text-gray-700 font-medium mb-2">Contact Information</label>
451
+ <div class="grid md:grid-cols-2 gap-6">
452
+ <div>
453
+ <label class="block text-gray-600 text-sm mb-1" for="fullName">Full Name</label>
454
+ <input type="text" id="fullName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
455
+ </div>
456
+ <div>
457
+ <label class="block text-gray-600 text-sm mb-1" for="email">Email</label>
458
+ <input type="email" id="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
459
+ </div>
460
+ <div>
461
+ <label class="block text-gray-600 text-sm mb-1" for="phone">Phone Number</label>
462
+ <input type="tel" id="phone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
463
+ </div>
464
+ <div>
465
+ <label class="block text-gray-600 text-sm mb-1" for="location">Location in Ghana</label>
466
+ <input type="text" id="location" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="City/Region" required>
467
+ </div>
468
+ </div>
469
+ </div>
470
+
471
+ <div class="mb-6">
472
+ <label class="flex items-center">
473
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600" required>
474
+ <span class="ml-2 text-gray-700">I agree to the <a href="#" class="text-blue-600 hover:underline">Terms of Service</a> and understand that this is a sourcing request, not a guaranteed order.</span>
475
+ </label>
476
+ </div>
477
+
478
+ <div class="text-center">
479
+ <button type="submit" class="px-8 py-3 bg-blue-600 text-white font-bold rounded-md hover:bg-blue-700">Submit Request</button>
480
+ </div>
481
+ </form>
482
+ </div>
483
+ </div>
484
+ </section>
485
+
486
+ <!-- Order Tracking -->
487
+ <section id="tracking" class="py-12 bg-gray-50">
488
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
489
+ <h2 class="text-3xl font-bold text-center mb-8">Track Your Order</h2>
490
+
491
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8">
492
+ <div class="text-center mb-6">
493
+ <h3 class="text-xl font-semibold mb-2">Check Order Status</h3>
494
+ <p class="text-gray-600">Enter your order ID and email to view your order status</p>
495
+ </div>
496
+
497
+ <form id="trackOrderForm" class="max-w-md mx-auto">
498
+ <div class="mb-4">
499
+ <label class="block text-gray-700 text-sm font-medium mb-1" for="orderId">Order ID</label>
500
+ <input type="text" id="orderId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="e.g. CG-123456" required>
501
+ </div>
502
+ <div class="mb-6">
503
+ <label class="block text-gray-700 text-sm font-medium mb-1" for="trackingEmail">Email</label>
504
+ <input type="email" id="trackingEmail" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Your registered email" required>
505
+ </div>
506
+ <div class="text-center">
507
+ <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Track Order</button>
508
+ </div>
509
+ </form>
510
+ </div>
511
+
512
+ <!-- Order Status Display (hidden by default) -->
513
+ <div id="orderStatusDisplay" class="bg-white rounded-lg shadow-md p-6 hidden">
514
+ <div class="flex justify-between items-center mb-6">
515
+ <div>
516
+ <h3 class="text-xl font-semibold">Order #CG-123456</h3>
517
+ <p class="text-gray-600">Submitted on: 15 June 2023</p>
518
+ </div>
519
+ <span id="currentStatus" class="status-badge status-requested">Requested</span>
520
+ </div>
521
+
522
+ <div class="mb-6">
523
+ <h4 class="font-medium mb-2">Product Details</h4>
524
+ <div class="flex items-start">
525
+ <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" alt="Product" class="w-16 h-16 object-cover rounded mr-4">
526
+ <div>
527
+ <p class="font-medium">Smart Watch GT3 Pro</p>
528
+ <p class="text-sm text-gray-600">Black, with extra strap</p>
529
+ <p class="text-sm">Quantity: 1</p>
530
+ </div>
531
+ </div>
532
+ </div>
533
+
534
+ <div class="mb-6">
535
+ <h4 class="font-medium mb-4">Order Status Timeline</h4>
536
+ <div class="relative">
537
+ <!-- Timeline -->
538
+ <div class="absolute left-4 h-full w-0.5 bg-gray-200 top-0"></div>
539
+
540
+ <!-- Timeline Step 1 -->
541
+ <div class="relative pl-10 pb-6">
542
+ <div class="flex items-center">
543
+ <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
544
+ <i class="fas fa-check"></i>
545
+ </div>
546
+ <div class="ml-3">
547
+ <p class="font-medium">Request Submitted</p>
548
+ <p class="text-sm text-gray-500">15 June 2023</p>
549
+ </div>
550
+ </div>
551
+ </div>
552
+
553
+ <!-- Timeline Step 2 -->
554
+ <div class="relative pl-10 pb-6">
555
+ <div class="flex items-center">
556
+ <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
557
+ <i class="fas fa-check"></i>
558
+ </div>
559
+ <div class="ml-3">
560
+ <p class="font-medium">Product Sourced</p>
561
+ <p class="text-sm text-gray-500">18 June 2023</p>
562
+ </div>
563
+ </div>
564
+ </div>
565
+
566
+ <!-- Timeline Step 3 -->
567
+ <div class="relative pl-10 pb-6">
568
+ <div class="flex items-center">
569
+ <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
570
+ <i class="fas fa-shopping-cart"></i>
571
+ </div>
572
+ <div class="ml-3">
573
+ <p class="font-medium">Awaiting Payment</p>
574
+ <p class="text-sm text-gray-500">Waiting for your payment</p>
575
+ </div>
576
+ </div>
577
+ </div>
578
+
579
+ <!-- Timeline Step 4 -->
580
+ <div class="relative pl-10 pb-6">
581
+ <div class="flex items-center">
582
+ <div class="flex-shrink-0 w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
583
+ <i class="fas fa-shipping-fast"></i>
584
+ </div>
585
+ <div class="ml-3">
586
+ <p class="font-medium text-gray-400">Shipping</p>
587
+ <p class="text-sm text-gray-400">Not yet shipped</p>
588
+ </div>
589
+ </div>
590
+ </div>
591
+
592
+ <!-- Timeline Step 5 -->
593
+ <div class="relative pl-10 pb-6">
594
+ <div class="flex items-center">
595
+ <div class="flex-shrink-0 w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
596
+ <i class="fas fa-map-marker-alt"></i>
597
+ </div>
598
+ <div class="ml-3">
599
+ <p class="font-medium text-gray-400">Arrived in Ghana</p>
600
+ <p class="text-sm text-gray-400">Not yet arrived</p>
601
+ </div>
602
+ </div>
603
+ </div>
604
+
605
+ <!-- Timeline Step 6 -->
606
+ <div class="relative pl-10">
607
+ <div class="flex items-center">
608
+ <div class="flex-shrink-0 w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
609
+ <i class="fas fa-box-open"></i>
610
+ </div>
611
+ <div class="ml-3">
612
+ <p class="font-medium text-gray-400">Ready for Pickup</p>
613
+ <p class="text-sm text-gray-400">Not yet ready</p>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </div>
619
+
620
+ <div class="border-t pt-4">
621
+ <h4 class="font-medium mb-3">Order Messages</h4>
622
+
623
+ <div class="space-y-3 mb-4">
624
+ <!-- Admin Message -->
625
+ <div class="flex">
626
+ <div class="flex-shrink-0 mr-3">
627
+ <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center">
628
+ <i class="fas fa-user-tie text-gray-600"></i>
629
+ </div>
630
+ </div>
631
+ <div>
632
+ <div class="chat-bubble-admin p-3 max-w-xs">
633
+ <p>We've found your requested watch. Please make payment of ₵450 to confirm your order.</p>
634
+ </div>
635
+ <p class="text-xs text-gray-500 mt-1">Admin - 18 June, 2:15 PM</p>
636
+ </div>
637
+ </div>
638
+
639
+ <!-- User Message -->
640
+ <div class="flex justify-end">
641
+ <div>
642
+ <div class="chat-bubble-user p-3 max-w-xs">
643
+ <p>Thanks! I'll make the payment by tomorrow.</p>
644
+ </div>
645
+ <p class="text-xs text-gray-500 mt-1 text-right">You - 18 June, 4:30 PM</p>
646
+ </div>
647
+ <div class="flex-shrink-0 ml-3">
648
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
649
+ <i class="fas fa-user text-blue-600"></i>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ </div>
654
+
655
+ <div class="flex">
656
+ <input type="text" placeholder="Type your message..." class="flex-grow px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500">
657
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700">
658
+ <i class="fas fa-paper-plane"></i>
659
+ </button>
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </section>
665
+
666
+ <!-- FAQ Section -->
667
+ <section class="py-12 bg-white">
668
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
669
+ <h2 class="text-3xl font-bold text-center mb-8">Frequently Asked Questions</h2>
670
+
671
+ <div class="space-y-4">
672
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
673
+ <button class="faq-toggle w-full px-4 py-3 text-left font-medium bg-gray-50 hover:bg-gray-100 flex justify-between items-center">
674
+ <span>How long does shipping take from China to Ghana?</span>
675
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
676
+ </button>
677
+ <div class="faq-content px-4 py-3 hidden">
678
+ <p class="text-gray-600">Shipping times vary depending on the product and shipping method. Typically, air shipping takes 2-4 weeks while sea shipping takes 4-8 weeks. Our pre-order listings show estimated delivery times for each product.</p>
679
+ </div>
680
+ </div>
681
+
682
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
683
+ <button class="faq-toggle w-full px-4 py-3 text-left font-medium bg-gray-50 hover:bg-gray-100 flex justify-between items-center">
684
+ <span>What payment methods do you accept?</span>
685
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
686
+ </button>
687
+ <div class="faq-content px-4 py-3 hidden">
688
+ <p class="text-gray-600">We accept mobile money (MTN, Vodafone, AirtelTigo), bank transfers, and cash payments. For international customers, we also accept PayPal. Payment details will be provided after you place your order.</p>
689
+ </div>
690
+ </div>
691
+
692
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
693
+ <button class="faq-toggle w-full px-4 py-3 text-left font-medium bg-gray-50 hover:bg-gray-100 flex justify-between items-center">
694
+ <span>Can I cancel my order after placing it?</span>
695
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
696
+ </button>
697
+ <div class="faq-content px-4 py-3 hidden">
698
+ <p class="text-gray-600">You can cancel your order within 24 hours of placing it at no charge. After 24 hours but before payment is made, a small processing fee may apply. Once payment is confirmed and we've begun sourcing your item, cancellations may not be possible.</p>
699
+ </div>
700
+ </div>
701
+
702
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
703
+ <button class="faq-toggle w-full px-4 py-3 text-left font-medium bg-gray-50 hover:bg-gray-100 flex justify-between items-center">
704
+ <span>Where can I pick up my order in Ghana?</span>
705
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
706
+ </button>
707
+ <div class="faq-content px-4 py-3 hidden">
708
+ <p class="text-gray-600">Our main pickup location is in Accra (Osu). We can also arrange delivery within Accra for an additional fee. For customers outside Accra, we can ship via courier services (cost will be calculated based on your location).</p>
709
+ </div>
710
+ </div>
711
+
712
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
713
+ <button class="faq-toggle w-full px-4 py-3 text-left font-medium bg-gray-50 hover:bg-gray-100 flex justify-between items-center">
714
+ <span>What if the product I receive is damaged or wrong?</span>
715
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
716
+ </button>
717
+ <div class="faq-content px-4 py-3 hidden">
718
+ <p class="text-gray-600">We carefully inspect all products before shipping to Ghana. However, if you receive a damaged or incorrect item, please contact us immediately with photos of the issue. We'll work to resolve the problem, which may include replacement, refund, or partial compensation depending on the situation.</p>
719
+ </div>
720
+ </div>
721
+ </div>
722
+ </div>
723
+ </section>
724
+
725
+ <!-- Contact Section -->
726
+ <section class="py-12 bg-green-600 text-white">
727
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
728
+ <h2 class="text-3xl font-bold text-center mb-8">Contact Us</h2>
729
+
730
+ <div class="grid md:grid-cols-2 gap-8">
731
+ <div>
732
+ <h3 class="text-xl font-semibold mb-4">Get in Touch</h3>
733
+ <p class="mb-6">Have questions or need assistance? Reach out to our team through any of these channels:</p>
734
+
735
+ <div class="space-y-4">
736
+ <div class="flex items-start">
737
+ <div class="flex-shrink-0 bg-blue-500 rounded-full p-2 mr-3">
738
+ <i class="fab fa-whatsapp text-xl"></i>
739
+ </div>
740
+ <div>
741
+ <p class="font-medium">WhatsApp</p>
742
+ <p>+233 55 027 3901</p>
743
+ </div>
744
+ </div>
745
+
746
+ <div class="flex items-start">
747
+ <div class="flex-shrink-0 bg-blue-500 rounded-full p-2 mr-3">
748
+ <i class="fas fa-envelope text-xl"></i>
749
+ </div>
750
+ <div>
751
+ <p class="font-medium">Email</p>
752
+ <p>support@chinaghanashop.com</p>
753
+ </div>
754
+ </div>
755
+
756
+ <div class="flex items-start">
757
+ <div class="flex-shrink-0 bg-blue-500 rounded-full p-2 mr-3">
758
+ <i class="fas fa-map-marker-alt text-xl"></i>
759
+ </div>
760
+ <div>
761
+ <p class="font-medium">Office Location</p>
762
+ <p>Osu, Accra, Ghana</p>
763
+ <p class="text-sm opacity-80">(By appointment only)</p>
764
+ </div>
765
+ </div>
766
+ </div>
767
+ </div>
768
+
769
+ <div>
770
+ <h3 class="text-xl font-semibold mb-4">Send Us a Message</h3>
771
+ <form class="space-y-4">
772
+ <div>
773
+ <label class="block mb-1" for="contactName">Your Name</label>
774
+ <input type="text" id="contactName" class="w-full px-3 py-2 bg-green-600 border border-green-500 rounded-md focus:outline-none focus:ring-2 focus:ring-white placeholder-green-200" placeholder="Enter your name">
775
+ </div>
776
+ <div>
777
+ <label class="block mb-1" for="contactEmail">Email</label>
778
+ <input type="email" id="contactEmail" class="w-full px-3 py-2 bg-blue-500 border border-blue-400 rounded-md focus:outline-none focus:ring-2 focus:ring-white placeholder-blue-200" placeholder="Enter your email">
779
+ </div>
780
+ <div>
781
+ <label class="block mb-1" for="contactMessage">Message</label>
782
+ <textarea id="contactMessage" rows="4" class="w-full px-3 py-2 bg-blue-500 border border-blue-400 rounded-md focus:outline-none focus:ring-2 focus:ring-white placeholder-blue-200" placeholder="Type your message here"></textarea>
783
+ </div>
784
+ <div>
785
+ <button type="submit" class="px-6 py-2 bg-white text-blue-600 font-medium rounded-md hover:bg-gray-100">Send Message</button>
786
+ </div>
787
+ </form>
788
+ </div>
789
+ </div>
790
+ </div>
791
+ </section>
792
+ </main>
793
+
794
+ <!-- Footer -->
795
+ <footer class="bg-blue-700 text-white py-8">
796
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
797
+ <div class="grid md:grid-cols-4 gap-8">
798
+ <div>
799
+ <h3 class="text-lg font-semibold mb-4">Chinamart GH</h3>
800
+ <p class="text-gray-400">Your Reliable Link to the Chinese Market</p>
801
+ </div>
802
+ <div>
803
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
804
+ <ul class="space-y-2">
805
+ <li><a href="#home" class="text-gray-400 hover:text-white">Home</a></li>
806
+ <li><a href="#pre-orders" class="text-gray-400 hover:text-white">Pre-Orders</a></li>
807
+ <li><a href="#buy-for-me" class="text-gray-400 hover:text-white">Buy For Me</a></li>
808
+ <li><a href="#tracking" class="text-gray-400 hover:text-white">Track Order</a></li>
809
+ </ul>
810
+ </div>
811
+ <div>
812
+ <h4 class="text-lg font-semibold mb-4">Support</h4>
813
+ <ul class="space-y-2">
814
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
815
+ <li><a href="#" class="text-gray-400 hover:text-white">Shipping Policy</a></li>
816
+ <li><a href="#" class="text-gray-400 hover:text-white">Returns & Refunds</a></li>
817
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
818
+ </ul>
819
+ </div>
820
+ <div>
821
+ <h4 class="text-lg font-semibold mb-4">Connect With Us</h4>
822
+ <div class="flex space-x-4">
823
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
824
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
825
+ <a href="https://wa.me/233550273901" class="text-gray-400 hover:text-white"><i class="fab fa-whatsapp"></i></a>
826
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
827
+ </div>
828
+ <div class="mt-4">
829
+ <p class="text-gray-400">Subscribe to our newsletter</p>
830
+ <div class="flex mt-2">
831
+ <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-700 text-white rounded-l-md focus:outline-none w-full">
832
+ <button class="px-4 py-2 bg-blue-600 rounded-r-md hover:bg-blue-700">
833
+ <i class="fas fa-paper-plane"></i>
834
+ </button>
835
+ </div>
836
+ </div>
837
+ </div>
838
+ </div>
839
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
840
+ <p>&copy; 2023 ChinaGhanaExpress. All rights reserved.</p>
841
+ </div>
842
+ </div>
843
+ </footer>
844
+
845
+ <!-- Login Modal -->
846
+ <div id="loginModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
847
+ <div class="absolute inset-0 bg-black opacity-50"></div>
848
+ <div class="bg-white rounded-lg shadow-xl z-50 w-full max-w-md mx-4">
849
+ <div class="p-6">
850
+ <div class="flex justify-between items-center mb-4">
851
+ <h3 class="text-2xl font-bold">Login to Your Account</h3>
852
+ <button id="closeLoginModal" class="text-gray-500 hover:text-gray-700">
853
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
854
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
855
+ </svg>
856
+ </button>
857
+ </div>
858
+
859
+ <form id="loginForm" class="space-y-4">
860
+ <div>
861
+ <label class="block text-gray-700 mb-1" for="loginEmail">Email</label>
862
+ <input type="email" id="loginEmail" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
863
+ </div>
864
+ <div>
865
+ <label class="block text-gray-700 mb-1" for="loginPassword">Password</label>
866
+ <input type="password" id="loginPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
867
+ </div>
868
+ <div class="flex items-center justify-between">
869
+ <div class="flex items-center">
870
+ <input type="checkbox" id="rememberMe" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
871
+ <label for="rememberMe" class="ml-2 block text-sm text-gray-700">Remember me</label>
872
+ </div>
873
+ <a href="#" class="text-sm text-blue-600 hover:underline">Forgot password?</a>
874
+ </div>
875
+ <div>
876
+ <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Login</button>
877
+ </div>
878
+ </form>
879
+
880
+ <div class="mt-4 text-center">
881
+ <p class="text-gray-600">Don't have an account? <a href="#" id="showSignup" class="text-blue-600 hover:underline">Sign up</a></p>
882
+ </div>
883
+
884
+ <div class="mt-6">
885
+ <div class="relative">
886
+ <div class="absolute inset-0 flex items-center">
887
+ <div class="w-full border-t border-gray-300"></div>
888
+ </div>
889
+ <div class="relative flex justify-center text-sm">
890
+ <span class="px-2 bg-white text-gray-500">Or continue with</span>
891
+ </div>
892
+ </div>
893
+
894
+ <div class="mt-6 grid grid-cols-2 gap-3">
895
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
896
+ <i class="fab fa-google text-red-500 mr-2"></i> Google
897
+ </button>
898
+ <button type="button" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
899
+ <i class="fab fa-facebook-f text-blue-600 mr-2"></i> Facebook
900
+ </button>
901
+ </div>
902
+ </div>
903
+ </div>
904
+ </div>
905
+ </div>
906
+
907
+ <!-- Signup Modal -->
908
+ <div id="signupModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
909
+ <div class="absolute inset-0 bg-black opacity-50"></div>
910
+ <div class="bg-white rounded-lg shadow-xl z-50 w-full max-w-md mx-4">
911
+ <div class="p-6">
912
+ <div class="flex justify-between items-center mb-4">
913
+ <h3 class="text-2xl font-bold">Create Your Account</h3>
914
+ <button id="closeSignupModal" class="text-gray-500 hover:text-gray-700">
915
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
916
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
917
+ </svg>
918
+ </button>
919
+ </div>
920
+
921
+ <form id="signupForm" class="space-y-4">
922
+ <div class="grid grid-cols-2 gap-4">
923
+ <div>
924
+ <label class="block text-gray-700 mb-1" for="signupFirstName">First Name</label>
925
+ <input type="text" id="signupFirstName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
926
+ </div>
927
+ <div>
928
+ <label class="block text-gray-700 mb-1" for="signupLastName">Last Name</label>
929
+ <input type="text" id="signupLastName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
930
+ </div>
931
+ </div>
932
+ <div>
933
+ <label class="block text-gray-700 mb-1" for="signupEmail">Email</label>
934
+ <input type="email" id="signupEmail" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
935
+ </div>
936
+ <div>
937
+ <label class="block text-gray-700 mb-1" for="signupPhone">Phone Number</label>
938
+ <input type="tel" id="signupPhone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
939
+ </div>
940
+ <div>
941
+ <label class="block text-gray-700 mb-1" for="signupPassword">Password</label>
942
+ <input type="password" id="signupPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
943
+ </div>
944
+ <div>
945
+ <label class="block text-gray-700 mb-1" for="signupConfirmPassword">Confirm Password</label>
946
+ <input type="password" id="signupConfirmPassword" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
947
+ </div>
948
+ <div class="flex items-center">
949
+ <input type="checkbox" id="agreeTerms" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" required>
950
+ <label for="agreeTerms" class="ml-2 block text-sm text-gray-700">I agree to the <a href="#" class="text-blue-600 hover:underline">Terms of Service</a> and <a href="#" class="text-blue-600 hover:underline">Privacy Policy</a></label>
951
+ </div>
952
+ <div>
953
+ <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Create Account</button>
954
+ </div>
955
+ </form>
956
+
957
+ <div class="mt-4 text-center">
958
+ <p class="text-gray-600">Already have an account? <a href="#" id="showLogin" class="text-blue-600 hover:underline">Login</a></p>
959
+ </div>
960
+ </div>
961
+ </div>
962
+ </div>
963
+
964
+ <!-- Admin Dashboard (hidden by default) -->
965
+ <div id="adminDashboard" class="fixed inset-0 z-50 hidden">
966
+ <div class="absolute inset-0 bg-black opacity-50"></div>
967
+ <div class="absolute inset-0 flex">
968
+ <!-- Sidebar -->
969
+ <div class="w-64 bg-gray-800 text-white">
970
+ <div class="p-4 border-b border-gray-700">
971
+ <h3 class="text-xl font-bold">Admin Dashboard</h3>
972
+ </div>
973
+ <nav class="p-4">
974
+ <ul class="space-y-2">
975
+ <li>
976
+ <a href="#" class="admin-nav-item active flex items-center p-2 rounded hover:bg-gray-700">
977
+ <i class="fas fa-tachometer-alt mr-3"></i> Dashboard
978
+ </a>
979
+ </li>
980
+ <li>
981
+ <a href="#" class="admin-nav-item flex items-center p-2 rounded hover:bg-gray-700">
982
+ <i class="fas fa-box-open mr-3"></i> Products
983
+ </a>
984
+ </li>
985
+ <li>
986
+ <a href="#" class="admin-nav-item flex items-center p-2 rounded hover:bg-gray-700">
987
+ <i class="fas fa-shopping-cart mr-3"></i> Orders
988
+ </a>
989
+ </li>
990
+ <li>
991
+ <a href="#" class="admin-nav-item flex items-center p-2 rounded hover:bg-gray-700">
992
+ <i class="fas fa-user-tag mr-3"></i> Buy For Me Requests
993
+ </a>
994
+ </li>
995
+ <li>
996
+ <a href="#" class="admin-nav-item flex items-center p-2 rounded hover:bg-gray-700">
997
+ <i class="fas fa-users mr-3"></i> Customers
998
+ </a>
999
+ </li>
1000
+ <li>
1001
+ <a href="#" class="admin-nav-item flex items-center p-2 rounded hover:bg-gray-700">
1002
+ <i class="fas fa-chart-line mr-3"></i> Reports
1003
+ </a>
1004
+ </li>
1005
+ <li>
1006
+ <a href="#" class="admin-nav-item flex items-center p-2 rounded hover:bg-gray-700">
1007
+ <i class="fas fa-cog mr-3"></i> Settings
1008
+ </a>
1009
+ </li>
1010
+ </ul>
1011
+ </nav>
1012
+ </div>
1013
+
1014
+ <!-- Main Content -->
1015
+ <div class="flex-1 bg-gray-100 overflow-auto">
1016
+ <!-- Header -->
1017
+ <header class="bg-white shadow-sm p-4 flex justify-between items-center">
1018
+ <h2 class="text-xl font-semibold">Dashboard Overview</h2>
1019
+ <div class="flex items-center space-x-4">
1020
+ <div class="relative">
1021
+ <button class="p-1 rounded-full hover:bg-gray-200">
1022
+ <i class="fas fa-bell text-gray-600"></i>
1023
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
1024
+ </button>
1025
+ </div>
1026
+ <div class="flex items-center">
1027
+ <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" alt="Admin" class="w-8 h-8 rounded-full mr-2">
1028
+ <span class="font-medium">Admin</span>
1029
+ </div>
1030
+ <button id="logoutAdmin" class="p-1 rounded-full hover:bg-gray-200">
1031
+ <i class="fas fa-sign-out-alt text-gray-600"></i>
1032
+ </button>
1033
+ </div>
1034
+ </header>
1035
+
1036
+ <!-- Dashboard Content -->
1037
+ <div class="p-6">
1038
+ <div class="grid md:grid-cols-3 gap-6 mb-6">
1039
+ <div class="bg-white p-6 rounded-lg shadow">
1040
+ <div class="flex items-center justify-between">
1041
+ <div>
1042
+ <p class="text-gray-500">Total Orders</p>
1043
+ <p class="text-2xl font-bold">124</p>
1044
+ </div>
1045
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
1046
+ <i class="fas fa-shopping-cart text-xl"></i>
1047
+ </div>
1048
+ </div>
1049
+ <div class="mt-4 pt-2 border-t">
1050
+ <p class="text-sm text-green-600"><i class="fas fa-arrow-up mr-1"></i> 12% from last month</p>
1051
+ </div>
1052
+ </div>
1053
+
1054
+ <div class="bg-white p-6 rounded-lg shadow">
1055
+ <div class="flex items-center justify-between">
1056
+ <div>
1057
+ <p class="text-gray-500">Pending Requests</p>
1058
+ <p class="text-2xl font-bold">18</p>
1059
+ </div>
1060
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
1061
+ <i class="fas fa-user-tag text-xl"></i>
1062
+ </div>
1063
+ </div>
1064
+ <div class="mt-4 pt-2 border-t">
1065
+ <p class="text-sm text-red-600"><i class="fas fa-arrow-down mr-1"></i> 5% from last month</p>
1066
+ </div>
1067
+ </div>
1068
+
1069
+ <div class="bg-white p-6 rounded-lg shadow">
1070
+ <div class="flex items-center justify-between">
1071
+ <div>
1072
+ <p class="text-gray-500">Revenue</p>
1073
+ <p class="text-2xl font-bold">₵24,560</p>
1074
+ </div>
1075
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
1076
+ <i class="fas fa-money-bill-wave text-xl"></i>
1077
+ </div>
1078
+ </div>
1079
+ <div class="mt-4 pt-2 border-t">
1080
+ <p class="text-sm text-green-600"><i class="fas fa-arrow-up mr-1"></i> 23% from last month</p>
1081
+ </div>
1082
+ </div>
1083
+ </div>
1084
+
1085
+ <div class="bg-white p-6 rounded-lg shadow mb-6">
1086
+ <h3 class="text-lg font-semibold mb-4">Recent Orders</h3>
1087
+ <div class="overflow-x-auto">
1088
+ <table class="min-w-full divide-y divide-gray-200">
1089
+ <thead class="bg-gray-50">
1090
+ <tr>
1091
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
1092
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
1093
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
1094
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
1095
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
1096
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
1097
+ </tr>
1098
+ </thead>
1099
+ <tbody class="bg-white divide-y divide-gray-200">
1100
+ <tr>
1101
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CG-789012</td>
1102
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Kwame Mensah</td>
1103
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Smart Watch GT3 Pro</td>
1104
+ <td class="px-6 py-4 whitespace-nowrap">
1105
+ <span class="status-badge status-paid">Paid</span>
1106
+ </td>
1107
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₵450.00</td>
1108
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1109
+ <button class="text-blue-600 hover:text-blue-900">View</button>
1110
+ </td>
1111
+ </tr>
1112
+ <tr>
1113
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CG-789011</td>
1114
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Ama Serwaa</td>
1115
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Wireless Earbuds TWS</td>
1116
+ <td class="px-6 py-4 whitespace-nowrap">
1117
+ <span class="status-badge status-shipped">Shipped</span>
1118
+ </td>
1119
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₵280.00</td>
1120
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1121
+ <button class="text-blue-600 hover:text-blue-900">View</button>
1122
+ </td>
1123
+ </tr>
1124
+ <tr>
1125
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CG-789010</td>
1126
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yaw Boateng</td>
1127
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Electric Scooter X5</td>
1128
+ <td class="px-6 py-4 whitespace-nowrap">
1129
+ <span class="status-badge status-in-ghana">In Ghana</span>
1130
+ </td>
1131
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₵2,450.00</td>
1132
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1133
+ <button class="text-blue-600 hover:text-blue-900">View</button>
1134
+ </td>
1135
+ </tr>
1136
+ <tr>
1137
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">CG-789009</td>
1138
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Esi Nyarko</td>
1139
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Custom Dress (Buy For Me)</td>
1140
+ <td class="px-6 py-4 whitespace-nowrap">
1141
+ <span class="status-badge status-requested">Requested</span>
1142
+ </td>
1143
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₵320.00</td>
1144
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1145
+ <button class="text-blue-600 hover:text-blue-900">View</button>
1146
+ </td>
1147
+ </tr>
1148
+ </tbody>
1149
+ </table>
1150
+ </div>
1151
+ </div>
1152
+
1153
+ <div class="grid md:grid-cols-2 gap-6">
1154
+ <div class="bg-white p-6 rounded-lg shadow">
1155
+ <h3 class="text-lg font-semibold mb-4">Recent Buy For Me Requests</h3>
1156
+ <div class="space-y-4">
1157
+ <div class="border-b pb-4">
1158
+ <div class="flex justify-between items-start">
1159
+ <div>
1160
+ <p class="font-medium">Custom Wedding Dress</p>
1161
+ <p class="text-sm text-gray-500">Requested by: Esi Nyarko</p>
1162
+ </div>
1163
+ <span class="status-badge status-requested">New</span>
1164
+ </div>
1165
+ <p class="text-sm mt-2 text-gray-600">Red lace wedding dress with long train, size 12, similar to attached image...</p>
1166
+ <div class="mt-2 flex justify-end">
1167
+ <button class="text-sm text-blue-600 hover:text-blue-900">View Details</button>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="border-b pb-4">
1172
+ <div class="flex justify-between items-start">
1173
+ <div>
1174
+ <p class="font-medium">Industrial Sewing Machine</p>
1175
+ <p class="text-sm text-gray-500">Requested by: Kofi Asante</p>
1176
+ </div>
1177
+ <span class="status-badge status-sourced">Sourced</span>
1178
+ </div>
1179
+ <p class="text-sm mt-2 text-gray-600">Juki DDL-8700 Industrial Straight Stitch Sewing Machine, 220V...</p>
1180
+ <div class="mt-2 flex justify-end">
1181
+ <button class="text-sm text-blue-600 hover:text-blue-900">View Details</button>
1182
+ </div>
1183
+ </div>
1184
+ </div>
1185
+ <div class="mt-4 text-center">
1186
+ <button class="text-sm text-blue-600 hover:text-blue-900">View All Requests</button>
1187
+ </div>
1188
+ </div>
1189
+
1190
+ <div class="bg-white p-6 rounded-lg shadow">
1191
+ <h3 class="text-lg font-semibold mb-4">Quick Actions</h3>
1192
+ <div class="grid grid-cols-2 gap-4">
1193
+ <button class="p-4 border rounded-lg hover:bg-gray-50 text-center">
1194
+ <div class="mx-auto w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mb-2">
1195
+ <i class="fas fa-plus text-blue-600"></i>
1196
+ </div>
1197
+ <p class="text-sm font-medium">Add Product</p>
1198
+ </button>
1199
+ <button class="p-4 border rounded-lg hover:bg-gray-50 text-center">
1200
+ <div class="mx-auto w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mb-2">
1201
+ <i class="fas fa-truck text-green-600"></i>
1202
+ </div>
1203
+ <p class="text-sm font-medium">Update Shipping</p>
1204
+ </button>
1205
+ <button class="p-4 border rounded-lg hover:bg-gray-50 text-center">
1206
+ <div class="mx-auto w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mb-2">
1207
+ <i class="fas fa-envelope text-yellow-600"></i>
1208
+ </div>
1209
+ <p class="text-sm font-medium">Send Notification</p>
1210
+ </button>
1211
+ <button class="p-4 border rounded-lg hover:bg-gray-50 text-center">
1212
+ <div class="mx-auto w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mb-2">
1213
+ <i class="fas fa-chart-pie text-purple-600"></i>
1214
+ </div>
1215
+ <p class="text-sm font-medium">View Reports</p>
1216
+ </button>
1217
+ </div>
1218
+ </div>
1219
+ </div>
1220
+ </div>
1221
+ </div>
1222
+ </div>
1223
+ </div>
1224
+
1225
+ <script>
1226
+ // Mobile menu toggle
1227
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
1228
+ const mobileDrawer = document.getElementById('mobileDrawer');
1229
+ const closeDrawerBtn = document.getElementById('closeDrawerBtn');
1230
+ const overlay