Hugging Face's logo

Spaces:
berkemert
/
global-shopper-express-qatar-edition
Running

App Files Community
berkemert commited on
Commit
c1360ca
·
verified ·
1 Parent(s): 5a134a2

BavulumKatar'da

Browse files

Your trusted partner for global shopping and delivery in Qatar.

Services
Package Forwarding
Consolidation
Warehouse Storage
Personal Shopper
Company
About Us
Contact
Careers
Blog
Support
Help Center
Shipping Info
Returns
Privacy Policy
Terms of Service
© 2025 BavulumKatar'da. All rights reserved. bunları sil

Files changed (2) hide show
  1. components/footer.js +4 -64
  2. index.html +79 -263
components/footer.js CHANGED
@@ -69,72 +69,12 @@ class CustomFooter extends HTMLElement {
69
  }
70
  </style>
71
  <footer class="footer-container text-white pt-16 pb-8">
72
- <div class="container mx-auto px-6">
73
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 px-6">
74
- <div>
75
- <h3 class="text-xl font-bold mb-6 footer-heading">BavulumKatar'da</h3>
76
- <p class="text-white/80 mb-6 leading-relaxed">Your trusted partner for global shopping and delivery in Qatar.</p>
77
- <div class="flex space-x-4">
78
- <a href="#" class="text-white/80 hover:text-secondary">
79
- <i data-feather="facebook" class="social-icon"></i>
80
- </a>
81
- <a href="#" class="text-white/80 hover:text-secondary">
82
- <i data-feather="twitter" class="social-icon"></i>
83
- </a>
84
- <a href="#" class="text-white/80 hover:text-secondary">
85
- <i data-feather="instagram" class="social-icon"></i>
86
- </a>
87
- <a href="#" class="text-white/80 hover:text-secondary">
88
- <i data-feather="linkedin" class="social-icon"></i>
89
- </a>
90
- <a href="#" class="text-white/80 hover:text-secondary">
91
- <i data-feather="youtube" class="social-icon"></i>
92
- </a>
93
- </div>
94
- </div>
95
- <div>
96
- <h4 class="text-lg font-semibold mb-6 footer-heading">Services</h4>
97
- <ul class="space-y-4">
98
- <li><a href="#" class="footer-link text-white/80">Package Forwarding</a></li>
99
- <li><a href="#" class="footer-link text-white/80">Consolidation</a></li>
100
- <li><a href="#" class="footer-link text-white/80">Warehouse Storage</a></li>
101
- <li><a href="#" class="footer-link text-white/80">Personal Shopper</a></li>
102
- </ul>
103
- </div>
104
-
105
- <div>
106
- <h4 class="text-lg font-semibold mb-6 footer-heading">Company</h4>
107
- <ul class="space-y-4">
108
- <li><a href="#" class="footer-link text-white/80">About Us</a></li>
109
- <li><a href="#" class="footer-link text-white/80">Contact</a></li>
110
- <li><a href="#" class="footer-link text-white/80">Careers</a></li>
111
- <li><a href="#" class="footer-link text-white/80">Blog</a></li>
112
- </ul>
113
- </div>
114
-
115
- <div>
116
- <h4 class="text-lg font-semibold mb-6 footer-heading">Support</h4>
117
- <ul class="space-y-4">
118
- <li><a href="#" class="footer-link text-white/80">Help Center</a></li>
119
- <li><a href="#" class="footer-link text-white/80">Shipping Info</a></li>
120
- <li><a href="#" class="footer-link text-white/80">Returns</a></li>
121
- <li><a href="#" class="footer-link text-white/80">Privacy Policy</a></li>
122
- <li><a href="#" class="footer-link text-white/80">Terms of Service</a></li>
123
- </ul>
124
- </div>
125
- </div>
126
- <div class="footer-divider border-t mt-12 pt-8 text-center text-white/60">
127
  <p class="text-sm">&copy; ${new Date().getFullYear()} BavulumKatar'da. All rights reserved.</p>
128
- <div class="mt-2 flex justify-center space-x-4">
129
- <a href="#" class="text-xs text-white/60 hover:text-white">Privacy Policy</a>
130
- <span class="text-white/40">|</span>
131
- <a href="#" class="text-xs text-white/60 hover:text-white">Terms of Service</a>
132
- <span class="text-white/40">|</span>
133
- <a href="#" class="text-xs text-white/60 hover:text-white">Sitemap</a>
134
- </div>
135
- </div>
136
  </div>
137
- <script>
138
  feather.replace();
139
  </script>
140
  <script>
 
69
  }
70
  </style>
71
  <footer class="footer-container text-white pt-16 pb-8">
72
+ <div class="container mx-auto px-6">
73
+ <div class="text-center">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  <p class="text-sm">&copy; ${new Date().getFullYear()} BavulumKatar'da. All rights reserved.</p>
75
+ </div>
 
 
 
 
 
 
 
76
  </div>
77
+ <script>
78
  feather.replace();
79
  </script>
80
  <script>
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>BavulumKatar'da - Shop Globally, Receive in Qatar</title>
7
  <link rel="stylesheet" href="style.css">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -22,285 +22,101 @@
22
  </script>
23
  </head>
24
  <body class="font-sans bg-white">
25
- <!-- Navigation Component -->
26
  <custom-nav></custom-nav>
27
 
28
- <!-- Hero Section -->
29
- <section class="relative h-screen flex items-center justify-center bg-primary text-white overflow-hidden">
30
- <div class="absolute inset-0 bg-black/30 z-10"></div>
31
- <img src="http://static.photos/cityscape/1200x630/10" alt="Qatar skyline" class="absolute w-full h-full object-cover">
32
- <div class="container mx-auto px-6 relative z-20 text-center">
33
- <h1 class="text-4xl md:text-6xl font-bold mb-6">Shop From the World, Receive in Qatar with One Bag!</h1>
34
- <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Your global shopping concierge service based in Qatar</p>
35
- <div class="flex flex-wrap justify-center gap-4">
36
- <a href="signup.html" class="bg-secondary hover:bg-yellow-600 text-primary font-bold py-3 px-8 rounded-full transition duration-300">Get Started</a>
37
- <a href="#services" class="border-2 border-white hover:bg-white/10 text-white font-bold py-3 px-8 rounded-full transition duration-300">Our Services</a>
38
- </div>
39
- </div>
40
- </section>
41
-
42
- <!-- Intro Section -->
43
- <section class="py-20 bg-gray-50">
44
- <div class="container mx-auto px-6">
45
- <div class="max-w-4xl mx-auto text-center">
46
- <h2 class="text-3xl md:text-4xl font-bold text-primary mb-6">The World Is Your Store — We Deliver for You</h2>
47
- <p class="text-lg text-gray-700 leading-relaxed">
48
- We simplify global shopping for people living in Qatar. Ship your orders to our warehouse, store them safely,
49
- combine them, and receive everything in one single delivery. Enjoy the freedom to shop worldwide with the
50
- convenience of local delivery.
51
- </p>
52
- </div>
53
- </div>
54
- </section>
55
-
56
- <!-- How It Works -->
57
- <section id="services" class="py-20">
58
- <div class="container mx-auto px-6">
59
- <h2 class="text-3xl font-bold text-center text-primary mb-16">How It Works</h2>
60
- <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
61
- <!-- Step 1 -->
62
- <div class="bg-white p-8 rounded-xl shadow-lg text-center hover:transform hover:scale-105 transition duration-300">
63
- <div class="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
64
- <i data-feather="shopping-cart" class="text-primary w-8 h-8"></i>
65
- </div>
66
- <h3 class="text-xl font-bold text-primary mb-3">1. Place Your Orders</h3>
67
- <p class="text-gray-600">Shop from any website worldwide and send your items to our warehouse.</p>
68
- </div>
69
-
70
- <!-- Step 2 -->
71
- <div class="bg-white p-8 rounded-xl shadow-lg text-center hover:transform hover:scale-105 transition duration-300">
72
- <div class="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
73
- <i data-feather="shield" class="text-primary w-8 h-8"></i>
74
- </div>
75
- <h3 class="text-xl font-bold text-primary mb-3">2. Store Safely</h3>
76
- <p class="text-gray-600">We keep your packages secure until you're ready.</p>
77
- </div>
78
-
79
- <!-- Step 3 -->
80
- <div class="bg-white p-8 rounded-xl shadow-lg text-center hover:transform hover:scale-105 transition duration-300">
81
- <div class="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
82
- <i data-feather="package" class="text-primary w-8 h-8"></i>
83
- </div>
84
- <h3 class="text-xl font-bold text-primary mb-3">3. Combine Shipment</h3>
85
- <p class="text-gray-600">Save money by grouping all items into one package.</p>
86
- </div>
87
-
88
- <!-- Step 4 -->
89
- <div class="bg-white p-8 rounded-xl shadow-lg text-center hover:transform hover:scale-105 transition duration-300">
90
- <div class="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
91
- <i data-feather="truck" class="text-primary w-8 h-8"></i>
92
- </div>
93
- <h3 class="text-xl font-bold text-primary mb-3">4. Receive in Qatar</h3>
94
- <p class="text-gray-600">Faster, easier, and more affordable delivery.</p>
95
- </div>
96
- </div>
97
- </div>
98
- </section>
99
-
100
- <!-- Features Section -->
101
- <section class="py-20 bg-primary text-white">
102
- <div class="container mx-auto px-6">
103
- <h2 class="text-3xl font-bold text-center mb-16">Why Choose Our Service?</h2>
104
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
105
- <div class="flex items-start">
106
- <div class="bg-secondary/20 p-3 rounded-lg mr-4">
107
- <i data-feather="dollar-sign" class="text-secondary w-6 h-6"></i>
108
- </div>
109
- <div>
110
- <h3 class="text-xl font-bold mb-2">Cost Savings</h3>
111
- <p class="text-gray-300">Up to 70% savings on international shipping by combining packages</p>
112
- </div>
113
- </div>
114
- <div class="flex items-start">
115
- <div class="bg-secondary/20 p-3 rounded-lg mr-4">
116
- <i data-feather="lock" class="text-secondary w-6 h-6"></i>
117
- </div>
118
- <div>
119
- <h3 class="text-xl font-bold mb-2">Secure Storage</h3>
120
- <p class="text-gray-300">24/7 monitored warehouse with climate control</p>
121
- </div>
122
- </div>
123
- <div class="flex items-start">
124
- <div class="bg-secondary/20 p-3 rounded-lg mr-4">
125
- <i data-feather="clock" class="text-secondary w-6 h-6"></i>
126
- </div>
127
- <div>
128
- <h3 class="text-xl font-bold mb-2">Flexible Timing</h3>
129
- <p class="text-gray-300">Store items for up to 60 days while you shop more</p>
130
- </div>
131
- </div>
132
- <div class="flex items-start">
133
- <div class="bg-secondary/20 p-3 rounded-lg mr-4">
134
- <i data-feather="map" class="text-secondary w-6 h-6"></i>
135
- </div>
136
- <div>
137
- <h3 class="text-xl font-bold mb-2">Real-time Tracking</h3>
138
- <p class="text-gray-300">Monitor your packages every step of the way</p>
139
- </div>
140
- </div>
141
- <div class="flex items-start">
142
- <div class="bg-secondary/20 p-3 rounded-lg mr-4">
143
- <i data-feather="globe" class="text-secondary w-6 h-6"></i>
144
- </div>
145
- <div>
146
- <h3 class="text-xl font-bold mb-2">Global Reach</h3>
147
- <p class="text-gray-300">Shop from any country with our international addresses</p>
148
- </div>
149
- </div>
150
- <div class="flex items-start">
151
- <div class="bg-secondary/20 p-3 rounded-lg mr-4">
152
- <i data-feather="headphones" class="text-secondary w-6 h-6"></i>
153
- </div>
154
- <div>
155
- <h3 class="text-xl font-bold mb-2">Dedicated Support</h3>
156
- <p class="text-gray-300">Qatar-based customer service team</p>
157
- </div>
158
- </div>
159
- </div>
160
- </div>
161
- </section>
162
-
163
- <!-- Pricing Section -->
164
- <section class="py-20 bg-gray-50">
165
  <div class="container mx-auto px-6">
166
- <h2 class="text-3xl font-bold text-center text-primary mb-4">Simple, Transparent Pricing</h2>
167
- <p class="text-center text-gray-600 mb-12">No hidden fees, no surprises</p>
168
 
169
- <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
170
- <!-- Basic Plan -->
171
- <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 hover:border-secondary transition duration-300">
172
- <div class="bg-primary text-white p-6">
173
- <h3 class="text-xl font-bold">Basic</h3>
174
- <p class="text-gray-200">For occasional shoppers</p>
175
- </div>
176
- <div class="p-6">
177
- <div class="text-4xl font-bold text-primary mb-4">25 QAR<span class="text-sm font-normal text-gray-500">/package</span></div>
178
- <ul class="space-y-3 mb-8">
179
- <li class="flex items-center">
180
- <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
181
- <span>Up to 2kg per package</span>
182
- </li>
183
- <li class="flex items-center">
184
- <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
185
- <span>15 days free storage</span>
186
- </li>
187
- <li class="flex items-center">
188
- <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
189
- <span>Basic tracking</span>
190
- </li>
191
- </ul>
192
- <a href="signup.html" class="block w-full bg-primary hover:bg-primary/90 text-white text-center py-3 rounded-lg font-medium transition duration-300">Get Started</a>
193
- </div>
194
- </div>
195
-
196
- <!-- Popular Plan -->
197
- <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-secondary transform scale-105 z-10">
198
- <div class="bg-secondary text-primary p-6">
199
- <h3 class="text-xl font-bold">Premium</h3>
200
- <p class="text-primary/80">Most popular choice</p>
201
- </div>
202
- <div class="p-6">
203
- <div class="text-4xl font-bold text-primary mb-4">50 QAR<span class="text-sm font-normal text-gray-500">/package</span></div>
204
- <ul class="space-y-3 mb-8">
205
- <li class="flex items-center">
206
- <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
207
- <span>Up to 5kg per package</span>
208
- </li>
209
- <li class="flex items-center">
210
- <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
211
- <span>30 days free storage</span>
212
- </li>
213
- <li class="flex items-center">
214
- <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
215
- <span>Advanced tracking</span>
216
- </li>
217
- <li class="flex items-center">
218
- <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
219
- <span>Priority customer support</span>
220
- </li>
221
- </ul>
222
- <a href="signup.html" class="block w-full bg-secondary hover:bg-secondary/90 text-primary text-center py-3 rounded-lg font-medium transition duration-300">Get Started</a>
223
- </div>
224
  </div>
225
-
226
- <!-- Business Plan -->
227
- <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 hover:border-secondary transition duration-300">
228
- <div class="bg-primary text-white p-6">
229
- <h3 class="text-xl font-bold">Business</h3>
230
- <p class="text-gray-200">For frequent shoppers</p>
231
- </div>
232
- <div class="p-6">
233
- <div class="text-4xl font-bold text-primary mb-4">100 QAR<span class="text-sm font-normal text-gray-500">/package</span></div>
234
- <ul class="space-y-3 mb-8">
235
- <li class="flex items-center">
236
- <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
237
- <span>Up to 10kg per package</span>
238
- </li>
239
- <li class="flex items-center">
240
- <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
241
- <span>60 days free storage</span>
242
- </li>
243
- <li class="flex items-center">
244
- <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
245
- <span>Premium tracking</span>
246
- </li>
247
- <li class="flex items-center">
248
- <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
249
- <span>24/7 VIP support</span>
250
- </li>
251
- <li class="flex items-center">
252
- <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
253
- <span>Discounts on bulk shipments</span>
254
- </li>
255
- </ul>
256
- <a href="signup.html" class="block w-full bg-primary hover:bg-primary/90 text-white text-center py-3 rounded-lg font-medium transition duration-300">Get Started</a>
257
  </div>
258
  </div>
259
  </div>
260
- </div>
261
- </section>
262
 
263
- <!-- Trust Section -->
264
- <section class="py-20">
265
- <div class="container mx-auto px-6">
266
- <div class="max-w-4xl mx-auto text-center">
267
- <h2 class="text-3xl font-bold text-primary mb-6">Why Trust BavulumKatar'da?</h2>
268
- <p class="text-lg text-gray-700 leading-relaxed mb-10">
269
- With years of experience in logistics and international shipping, we've perfected the art of making global
270
- shopping accessible to residents of Qatar. Our secure facilities, transparent pricing, and dedicated customer
271
- service team ensure you get the best possible experience.
272
- </p>
273
- <div class="flex flex-wrap justify-center gap-6">
274
- <div class="flex items-center bg-gray-100 rounded-full px-6 py-3">
275
- <i data-feather="award" class="text-secondary mr-2 w-5 h-5"></i>
276
- <span>Trusted by 10,000+ customers</span>
277
- </div>
278
- <div class="flex items-center bg-gray-100 rounded-full px-6 py-3">
279
- <i data-feather="clock" class="text-secondary mr-2 w-5 h-5"></i>
280
- <span>Quick 3-5 day delivery</span>
281
- </div>
282
- <div class="flex items-center bg-gray-100 rounded-full px-6 py-3">
283
- <i data-feather="shield" class="text-secondary mr-2 w-5 h-5"></i>
284
- <span>100% secure transactions</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
285
  </div>
286
  </div>
287
  </div>
288
- </div>
289
- </section>
290
 
291
- <!-- CTA Section -->
292
- <section class="py-16 bg-primary text-white">
293
- <div class="container mx-auto px-6 text-center">
294
- <h2 class="text-3xl font-bold mb-6">Ready to Start Shopping Globally?</h2>
295
- <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of happy customers who enjoy hassle-free international shopping</p>
296
- <a href="signup.html" class="inline-block bg-secondary hover:bg-secondary/90 text-primary font-bold py-3 px-8 rounded-full transition duration-300">Sign Up Now - It's Free</a>
297
  </div>
298
  </section>
299
 
300
- <!-- Footer Component -->
301
  <custom-footer></custom-footer>
302
-
303
- <!-- Components -->
304
  <script src="components/nav.js"></script>
305
  <script src="components/footer.js"></script>
306
  <script src="script.js"></script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Why Choose Us - BavulumKatar'da</title>
7
  <link rel="stylesheet" href="style.css">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
22
  </script>
23
  </head>
24
  <body class="font-sans bg-white">
 
25
  <custom-nav></custom-nav>
26
 
27
+ <section class="py-20">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  <div class="container mx-auto px-6">
29
+ <h1 class="text-4xl font-bold text-center text-primary mb-12">Why Choose BavulumKatar'da?</h1>
 
30
 
31
+ <div class="grid md:grid-cols-2 gap-12 items-center mb-20">
32
+ <div>
33
+ <img src="http://static.photos/warehouse/1024x576/10" alt="Our warehouse" class="rounded-xl shadow-lg w-full">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  </div>
35
+ <div>
36
+ <h2 class="text-3xl font-bold text-primary mb-6">The Best Global Shopping Experience</h2>
37
+ <p class="text-lg text-gray-700 mb-6">We're not just another shipping service - we're your personal shopping concierge dedicated to making international shopping easy and affordable for residents of Qatar.</p>
38
+ <div class="space-y-6">
39
+ <div class="flex items-start">
40
+ <div class="bg-primary/10 text-primary rounded-lg p-3 mr-4">
41
+ <i data-feather="award" class="w-6 h-6"></i>
42
+ </div>
43
+ <div>
44
+ <h3 class="text-xl font-bold text-primary mb-2">Trusted by Thousands</h3>
45
+ <p class="text-gray-600">Over 10,000 satisfied customers in Qatar rely on our service.</p>
46
+ </div>
47
+ </div>
48
+ <div class="flex items-start">
49
+ <div class="bg-primary/10 text-primary rounded-lg p-3 mr-4">
50
+ <i data-feather="dollar-sign" class="w-6 h-6"></i>
51
+ </div>
52
+ <div>
53
+ <h3 class="text-xl font-bold text-primary mb-2">Save Up to 70%</h3>
54
+ <p class="text-gray-600">Our consolidation service reduces shipping costs dramatically.</p>
55
+ </div>
56
+ </div>
57
+ <div class="flex items-start">
58
+ <div class="bg-primary/10 text-primary rounded-lg p-3 mr-4">
59
+ <i data-feather="shield" class="w-6 h-6"></i>
60
+ </div>
61
+ <div>
62
+ <h3 class="text-xl font-bold text-primary mb-2">100% Secure</h3>
63
+ <p class="text-gray-600">Climate-controlled warehouses with 24/7 security monitoring.</p>
64
+ </div>
65
+ </div>
 
66
  </div>
67
  </div>
68
  </div>
 
 
69
 
70
+ <div class="bg-gray-50 rounded-xl p-10 mb-20">
71
+ <div class="max-w-4xl mx-auto">
72
+ <h2 class="text-3xl font-bold text-center text-primary mb-12">Customer Testimonials</h2>
73
+ <div class="grid md:grid-cols-2 gap-8">
74
+ <div class="bg-white p-8 rounded-lg shadow-md">
75
+ <div class="flex items-center mb-4">
76
+ <img src="http://static.photos/people/200x200/1" alt="Customer" class="w-12 h-12 rounded-full mr-4">
77
+ <div>
78
+ <h4 class="font-bold">Ahmed Al-Thani</h4>
79
+ <p class="text-gray-500 text-sm">Doha, Qatar</p>
80
+ </div>
81
+ </div>
82
+ <p class="text-gray-700">"I've saved thousands of riyals using BavulumKatar'da. Their consolidation service is a game-changer for shopping from the US!"</p>
83
+ <div class="flex mt-4">
84
+ <i data-feather="star" class="w-4 h-4 text-secondary"></i>
85
+ <i data-feather="star" class="w-4 h-4 text-secondary"></i>
86
+ <i data-feather="star" class="w-4 h-4 text-secondary"></i>
87
+ <i data-feather="star" class="w-4 h-4 text-secondary"></i>
88
+ <i data-feather="star" class="w-4 h-4 text-secondary"></i>
89
+ </div>
90
+ </div>
91
+ <div class="bg-white p-8 rounded-lg shadow-md">
92
+ <div class="flex items-center mb-4">
93
+ <img src="http://static.photos/people/200x200/2" alt="Customer" class="w-12 h-12 rounded-full mr-4">
94
+ <div>
95
+ <h4 class="font-bold">Sarah Mohammed</h4>
96
+ <p class="text-gray-500 text-sm">Al Wakrah, Qatar</p>
97
+ </div>
98
+ </div>
99
+ <p class="text-gray-700">"The customer service is exceptional. They helped me track down a missing package and handled everything professionally."</p>
100
+ <div class="flex mt-4">
101
+ <i data-feather="star" class="w-4 h-4 text-secondary"></i>
102
+ <i data-feather="star" class="w-4 h-4 text-secondary"></i>
103
+ <i data-feather="star" class="w-4 h-4 text-secondary"></i>
104
+ <i data-feather="star" class="w-4 h-4 text-secondary"></i>
105
+ <i data-feather="star" class="w-4 h-4 text-secondary"></i>
106
+ </div>
107
+ </div>
108
  </div>
109
  </div>
110
  </div>
 
 
111
 
112
+ <div class="text-center">
113
+ <h2 class="text-3xl font-bold text-primary mb-6">Experience the Difference Today</h2>
114
+ <a href="signup.html" class="inline-block bg-secondary hover:bg-secondary/90 text-primary font-bold py-3 px-8 rounded-full transition duration-300">Join Now</a>
115
+ </div>
 
 
116
  </div>
117
  </section>
118
 
 
119
  <custom-footer></custom-footer>
 
 
120
  <script src="components/nav.js"></script>
121
  <script src="components/footer.js"></script>
122
  <script src="script.js"></script>