Hugging Face's logo

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

App Files Community
berkemert commited on
Commit
4422b66
·
verified ·
1 Parent(s): ac456c3

HOW IT WORKS ,WHY CHOOSE US, SHIPPING RATES, SHOP WITH US ,Sign Up bunları ekle

Browse files
Files changed (5) hide show
  1. components/nav.js +8 -8
  2. how-it-works.html +118 -0
  3. shipping-rates.html +124 -0
  4. shop-with-us.html +115 -0
  5. why-choose-us.html +127 -0
components/nav.js CHANGED
@@ -222,10 +222,10 @@ class CustomNav extends HTMLElement {
222
 
223
  <!-- Desktop Navigation -->
224
  <div class="nav-menu">
225
- <a href="#services" class="nav-item">HOW IT WORKS</a>
226
- <a href="#services" class="nav-item">WHY CHOOSE US</a>
227
- <a href="#services" class="nav-item">SHIPPING RATES</a>
228
- <a href="#services" class="nav-item">SHOP WITH US</a>
229
  <a href="orders.html" class="nav-item">MY ORDERS</a>
230
  <a href="signup.html" class="btn-signup">SIGN UP</a>
231
  </div>
@@ -239,10 +239,10 @@ class CustomNav extends HTMLElement {
239
 
240
  <!-- Mobile Navigation -->
241
  <div class="mobile-menu">
242
- <a href="#services" class="mobile-nav-item">HOW IT WORKS</a>
243
- <a href="#services" class="mobile-nav-item">WHY CHOOSE US</a>
244
- <a href="#services" class="mobile-nav-item">SHIPPING RATES</a>
245
- <a href="#services" class="mobile-nav-item">SHOP WITH US</a>
246
  <a href="orders.html" class="mobile-nav-item">MY ORDERS</a>
247
  <a href="signup.html" class="mobile-btn-signup">SIGN UP</a>
248
  </div>
 
222
 
223
  <!-- Desktop Navigation -->
224
  <div class="nav-menu">
225
+ <a href="how-it-works.html" class="nav-item">HOW IT WORKS</a>
226
+ <a href="why-choose-us.html" class="nav-item">WHY CHOOSE US</a>
227
+ <a href="shipping-rates.html" class="nav-item">SHIPPING RATES</a>
228
+ <a href="shop-with-us.html" class="nav-item">SHOP WITH US</a>
229
  <a href="orders.html" class="nav-item">MY ORDERS</a>
230
  <a href="signup.html" class="btn-signup">SIGN UP</a>
231
  </div>
 
239
 
240
  <!-- Mobile Navigation -->
241
  <div class="mobile-menu">
242
+ <a href="how-it-works.html" class="mobile-nav-item">HOW IT WORKS</a>
243
+ <a href="why-choose-us.html" class="mobile-nav-item">WHY CHOOSE US</a>
244
+ <a href="shipping-rates.html" class="mobile-nav-item">SHIPPING RATES</a>
245
+ <a href="shop-with-us.html" class="mobile-nav-item">SHOP WITH US</a>
246
  <a href="orders.html" class="mobile-nav-item">MY ORDERS</a>
247
  <a href="signup.html" class="mobile-btn-signup">SIGN UP</a>
248
  </div>
how-it-works.html ADDED
@@ -0,0 +1,118 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>How It Works - 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>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#002366',
17
+ secondary: '#D4AF37',
18
+ }
19
+ }
20
+ }
21
+ }
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">How Our Service Works</h1>
30
+
31
+ <div class="grid md:grid-cols-2 gap-12 items-center mb-20">
32
+ <div>
33
+ <h2 class="text-3xl font-bold text-primary mb-6">Simple 4-Step Process</h2>
34
+ <p class="text-lg text-gray-700 mb-6">We've designed our service to be as straightforward as possible. Here's how you can shop globally and receive your items in Qatar with ease.</p>
35
+ <div class="space-y-6">
36
+ <div class="flex items-start">
37
+ <div class="bg-primary/10 text-primary rounded-full w-12 h-12 flex items-center justify-center mr-4">
38
+ <span class="font-bold text-xl">1</span>
39
+ </div>
40
+ <div>
41
+ <h3 class="text-xl font-bold text-primary mb-2">Shop Anywhere</h3>
42
+ <p class="text-gray-600">Purchase from any international website and use our global addresses as your shipping destination.</p>
43
+ </div>
44
+ </div>
45
+ <div class="flex items-start">
46
+ <div class="bg-primary/10 text-primary rounded-full w-12 h-12 flex items-center justify-center mr-4">
47
+ <span class="font-bold text-xl">2</span>
48
+ </div>
49
+ <div>
50
+ <h3 class="text-xl font-bold text-primary mb-2">We Receive & Store</h3>
51
+ <p class="text-gray-600">We'll receive your packages at our secure warehouses and notify you immediately.</p>
52
+ </div>
53
+ </div>
54
+ <div class="flex items-start">
55
+ <div class="bg-primary/10 text-primary rounded-full w-12 h-12 flex items-center justify-center mr-4">
56
+ <span class="font-bold text-xl">3</span>
57
+ </div>
58
+ <div>
59
+ <h3 class="text-xl font-bold text-primary mb-2">Combine & Ship</h3>
60
+ <p class="text-gray-600">Save money by consolidating multiple packages into one shipment when you're ready.</p>
61
+ </div>
62
+ </div>
63
+ <div class="flex items-start">
64
+ <div class="bg-primary/10 text-primary rounded-full w-12 h-12 flex items-center justify-center mr-4">
65
+ <span class="font-bold text-xl">4</span>
66
+ </div>
67
+ <div>
68
+ <h3 class="text-xl font-bold text-primary mb-2">Fast Delivery</h3>
69
+ <p class="text-gray-600">Get your consolidated package delivered to your doorstep in Qatar within 3-5 business days.</p>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ <div>
75
+ <img src="http://static.photos/logistics/1024x576/10" alt="Shipping process" class="rounded-xl shadow-lg w-full">
76
+ </div>
77
+ </div>
78
+
79
+ <div class="bg-primary text-white rounded-xl p-10 mb-20">
80
+ <div class="max-w-4xl mx-auto text-center">
81
+ <h2 class="text-3xl font-bold mb-6">Our Global Shipping Network</h2>
82
+ <p class="text-xl mb-8">We have warehouses strategically located in key shopping destinations worldwide to ensure the fastest and most cost-effective shipping to Qatar.</p>
83
+ <div class="grid md:grid-cols-3 gap-8">
84
+ <div class="bg-white/10 p-6 rounded-lg">
85
+ <i data-feather="map-pin" class="w-10 h-10 mx-auto mb-4 text-secondary"></i>
86
+ <h3 class="text-xl font-bold mb-2">USA</h3>
87
+ <p class="text-gray-300">Miami, Florida warehouse</p>
88
+ </div>
89
+ <div class="bg-white/10 p-6 rounded-lg">
90
+ <i data-feather="map-pin" class="w-10 h-10 mx-auto mb-4 text-secondary"></i>
91
+ <h3 class="text-xl font-bold mb-2">UK</h3>
92
+ <p class="text-gray-300">London warehouse</p>
93
+ </div>
94
+ <div class="bg-white/10 p-6 rounded-lg">
95
+ <i data-feather="map-pin" class="w-10 h-10 mx-auto mb-4 text-secondary"></i>
96
+ <h3 class="text-xl font-bold mb-2">UAE</h3>
97
+ <p class="text-gray-300">Dubai warehouse</p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <div class="text-center">
104
+ <h2 class="text-3xl font-bold text-primary mb-6">Ready to Get Started?</h2>
105
+ <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</a>
106
+ </div>
107
+ </div>
108
+ </section>
109
+
110
+ <custom-footer></custom-footer>
111
+ <script src="components/nav.js"></script>
112
+ <script src="components/footer.js"></script>
113
+ <script src="script.js"></script>
114
+ <script>
115
+ feather.replace();
116
+ </script>
117
+ </body>
118
+ </html>
shipping-rates.html ADDED
@@ -0,0 +1,124 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Shipping Rates - 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>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#002366',
17
+ secondary: '#D4AF37',
18
+ }
19
+ }
20
+ }
21
+ }
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">Shipping Rates & Delivery Times</h1>
30
+
31
+ <div class="max-w-4xl mx-auto mb-16">
32
+ <h2 class="text-2xl font-bold text-primary mb-6">Transparent Pricing Structure</h2>
33
+ <p class="text-lg text-gray-700 mb-8">We believe in simple, straightforward pricing with no hidden fees. Below are our standard shipping rates from our main warehouses to Qatar.</p>
34
+
35
+ <div class="overflow-x-auto">
36
+ <table class="min-w-full bg-white rounded-lg overflow-hidden">
37
+ <thead class="bg-primary text-white">
38
+ <tr>
39
+ <th class="py-3 px-4 text-left">Origin</th>
40
+ <th class="py-3 px-4 text-left">Weight (kg)</th>
41
+ <th class="py-3 px-4 text-left">Price (QAR)</th>
42
+ <th class="py-3 px-4 text-left">Delivery Time</th>
43
+ </tr>
44
+ </thead>
45
+ <tbody class="divide-y divide-gray-200">
46
+ <tr class="hover:bg-gray-50">
47
+ <td class="py-3 px-4">USA</td>
48
+ <td class="py-3 px-4">0-2</td>
49
+ <td class="py-3 px-4">25</td>
50
+ <td class="py-3 px-4">5-7 days</td>
51
+ </tr>
52
+ <tr class="hover:bg-gray-50">
53
+ <td class="py-3 px-4">USA</td>
54
+ <td class="py-3 px-4">2-5</td>
55
+ <td class="py-3 px-4">50</td>
56
+ <td class="py-3 px-4">5-7 days</td>
57
+ </tr>
58
+ <tr class="hover:bg-gray-50">
59
+ <td class="py-3 px-4">UK</td>
60
+ <td class="py-3 px-4">0-2</td>
61
+ <td class="py-3 px-4">20</td>
62
+ <td class="py-3 px-4">4-6 days</td>
63
+ </tr>
64
+ <tr class="hover:bg-gray-50">
65
+ <td class="py-3 px-4">UK</td>
66
+ <td class="py-3 px-4">2-5</td>
67
+ <td class="py-3 px-4">40</td>
68
+ <td class="py-3 px-4">4-6 days</td>
69
+ </tr>
70
+ <tr class="hover:bg-gray-50">
71
+ <td class="py-3 px-4">UAE</td>
72
+ <td class="py-3 px-4">0-2</td>
73
+ <td class="py-3 px-4">15</td>
74
+ <td class="py-3 px-4">3-5 days</td>
75
+ </tr>
76
+ <tr class="hover:bg-gray-50">
77
+ <td class="py-3 px-4">UAE</td>
78
+ <td class="py-3 px-4">2-5</td>
79
+ <td class="py-3 px-4">30</td>
80
+ <td class="py-3 px-4">3-5 days</td>
81
+ </tr>
82
+ </tbody>
83
+ </table>
84
+ </div>
85
+ <p class="text-sm text-gray-500 mt-4">* Prices are per consolidated package. Additional services like repackaging, insurance, or expedited shipping may incur extra charges.</p>
86
+ </div>
87
+
88
+ <div class="bg-primary text-white rounded-xl p-10 mb-16">
89
+ <div class="max-w-2xl mx-auto text-center">
90
+ <h2 class="text-3xl font-bold mb-6">Calculate Your Shipping Cost</h2>
91
+ <p class="text-xl mb-8">Use our shipping calculator to estimate your exact shipping costs based on package weight and origin.</p>
92
+ <a href="#" class="inline-block bg-secondary hover:bg-secondary/90 text-primary font-bold py-3 px-8 rounded-full transition duration-300">Shipping Calculator</a>
93
+ </div>
94
+ </div>
95
+
96
+ <div class="max-w-4xl mx-auto">
97
+ <h2 class="text-2xl font-bold text-primary mb-6">Frequently Asked Questions</h2>
98
+ <div class="space-y-6">
99
+ <div class="border-b border-gray-200 pb-6">
100
+ <h3 class="text-xl font-bold text-primary mb-3">How does consolidation save me money?</h3>
101
+ <p class="text-gray-700">By combining multiple packages into one shipment, you pay shipping fees only once rather than for each individual package. We also remove excess packaging to reduce weight and volume.</p>
102
+ </div>
103
+ <div class="border-b border-gray-200 pb-6">
104
+ <h3 class="text-xl font-bold text-primary mb-3">Are there any hidden fees?</h3>
105
+ <p class="text-gray-700">No, we believe in transparent pricing. The only additional fees would be for optional services like expedited shipping, special packaging, or insurance over the standard coverage.</p>
106
+ </div>
107
+ <div class="border-b border-gray-200 pb-6">
108
+ <h3 class="text-xl font-bold text-primary mb-3">What happens if my package exceeds the weight limit?</h3>
109
+ <p class="text-gray-700">For packages over 5kg, we charge 10 QAR per additional kg. Our system will automatically calculate this during the checkout process.</p>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </section>
115
+
116
+ <custom-footer></custom-footer>
117
+ <script src="components/nav.js"></script>
118
+ <script src="components/footer.js"></script>
119
+ <script src="script.js"></script>
120
+ <script>
121
+ feather.replace();
122
+ </script>
123
+ </body>
124
+ </html>
shop-with-us.html ADDED
@@ -0,0 +1,115 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Shop With 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>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#002366',
17
+ secondary: '#D4AF37',
18
+ }
19
+ }
20
+ }
21
+ }
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">Shop With Us - Global Stores</h1>
30
+
31
+ <div class="max-w-4xl mx-auto mb-16">
32
+ <h2 class="text-2xl font-bold text-primary mb-6">Popular Stores We Work With</h2>
33
+ <p class="text-lg text-gray-700 mb-8">Shop from these popular international retailers and ship to our warehouses for consolidation and delivery to Qatar.</p>
34
+
35
+ <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-6">
36
+ <a href="#" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 border border-gray-100 flex flex-col items-center">
37
+ <img src="http://static.photos/retail/200x200/1" alt="Amazon" class="h-16 w-16 object-contain mb-4">
38
+ <h3 class="text-lg font-bold text-center text-primary">Amazon</h3>
39
+ <p class="text-sm text-gray-500 mt-1 text-center">USA, UK, UAE</p>
40
+ </a>
41
+ <a href="#" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 border border-gray-100 flex flex-col items-center">
42
+ <img src="http://static.photos/retail/200x200/2" alt="eBay" class="h-16 w-16 object-contain mb-4">
43
+ <h3 class="text-lg font-bold text-center text-primary">eBay</h3>
44
+ <p class="text-sm text-gray-500 mt-1 text-center">Global</p>
45
+ </a>
46
+ <a href="#" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 border border-gray-100 flex flex-col items-center">
47
+ <img src="http://static.photos/retail/200x200/3" alt="ASOS" class="h-16 w-16 object-contain mb-4">
48
+ <h3 class="text-lg font-bold text-center text-primary">ASOS</h3>
49
+ <p class="text-sm text-gray-500 mt-1 text-center">UK</p>
50
+ </a>
51
+ <a href="#" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 border border-gray-100 flex flex-col items-center">
52
+ <img src="http://static.photos/retail/200x200/4" alt="Best Buy" class="h-16 w-16 object-contain mb-4">
53
+ <h3 class="text-lg font-bold text-center text-primary">Best Buy</h3>
54
+ <p class="text-sm text-gray-500 mt-1 text-center">USA</p>
55
+ </a>
56
+ <a href="#" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 border border-gray-100 flex flex-col items-center">
57
+ <img src="http://static.photos/retail/200x200/5" alt="Harrods" class="h-16 w-16 object-contain mb-4">
58
+ <h3 class="text-lg font-bold text-center text-primary">Harrods</h3>
59
+ <p class="text-sm text-gray-500 mt-1 text-center">UK</p>
60
+ </a>
61
+ <a href="#" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 border border-gray-100 flex flex-col items-center">
62
+ <img src="http://static.photos/retail/200x200/6" alt="Noon" class="h-16 w-16 object-contain mb-4">
63
+ <h3 class="text-lg font-bold text-center text-primary">Noon</h3>
64
+ <p class="text-sm text-gray-500 mt-1 text-center">UAE</p>
65
+ </a>
66
+ </div>
67
+ </div>
68
+
69
+ <div class="grid md:grid-cols-2 gap-12 items-center mb-16">
70
+ <div>
71
+ <h2 class="text-3xl font-bold text-primary mb-6">Personal Shopper Service</h2>
72
+ <p class="text-lg text-gray-700 mb-6">Don't have time to shop? Our personal shoppers can purchase items on your behalf from stores that don't accept international cards or require local addresses.</p>
73
+ <ul class="space-y-4 mb-8">
74
+ <li class="flex items-start">
75
+ <i data-feather="check" class="text-secondary mr-2"></i>
76
+ <span>We'll handle the entire purchasing process</span>
77
+ </li>
78
+ <li class="flex items-start">
79
+ <i data-feather="check" class="text-secondary mr-2"></i>
80
+ <span>No international payment issues</span>
81
+ </li>
82
+ <li class="flex items-start">
83
+ <i data-feather="check" class="text-secondary mr-2"></i>
84
+ <span>Special access to exclusive items</span>
85
+ </li>
86
+ </ul>
87
+ <a href="#" class="inline-block bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full transition duration-300">Learn About Personal Shopping</a>
88
+ </div>
89
+ <div>
90
+ <img src="http://static.photos/shopping/1024x576/10" alt="Personal shopper" class="rounded-xl shadow-lg w-full">
91
+ </div>
92
+ </div>
93
+
94
+ <div class="bg-primary text-white rounded-xl p-10">
95
+ <div class="max-w-4xl mx-auto text-center">
96
+ <h2 class="text-3xl font-bold mb-6">Ready to Start Shopping?</h2>
97
+ <p class="text-xl mb-8">Get your exclusive international shopping addresses after signing up.</p>
98
+ <div class="flex flex-wrap justify-center gap-4">
99
+ <a href="signup.html" class="bg-secondary hover:bg-secondary/90 text-primary font-bold py-3 px-8 rounded-full transition duration-300">Sign Up Now</a>
100
+ <a href="how-it-works.html" class="border-2 border-white hover:bg-white/10 text-white font-bold py-3 px-8 rounded-full transition duration-300">How It Works</a>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </section>
106
+
107
+ <custom-footer></custom-footer>
108
+ <script src="components/nav.js"></script>
109
+ <script src="components/footer.js"></script>
110
+ <script src="script.js"></script>
111
+ <script>
112
+ feather.replace();
113
+ </script>
114
+ </body>
115
+ </html>
why-choose-us.html ADDED
@@ -0,0 +1,127 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>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>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#002366',
17
+ secondary: '#D4AF37',
18
+ }
19
+ }
20
+ }
21
+ }
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>
123
+ <script>
124
+ feather.replace();
125
+ </script>
126
+ </body>
127
+ </html>