Hugging Face's logo

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

App Files Community
berkemert commited on
Commit
7fb31ee
·
verified ·
1 Parent(s): 44a54bf

Promote version 139d6bf to main

Browse files

Promoted commit 139d6bfef075823207828b66ef943934b0c13475 to main branch

Files changed (7) hide show
  1. components/footer.js +53 -74
  2. components/nav.js +16 -66
  3. index.html +264 -79
  4. login.html +2 -2
  5. script.js +15 -97
  6. signup.html +2 -2
  7. style.css +0 -28
components/footer.js CHANGED
@@ -3,89 +3,68 @@ class CustomFooter extends HTMLElement {
3
  this.attachShadow({ mode: 'open' });
4
  this.shadowRoot.innerHTML = `
5
  <style>
6
- :host {
7
- display: block;
8
- font-family: 'Poppins', sans-serif;
9
- }
10
-
11
- .footer-container {
12
- background: linear-gradient(135deg, #002366 0%, #001a4d 100%);
13
- }
14
-
15
- .footer-link {
16
- position: relative;
17
- transition: all 0.3s ease;
18
- display: inline-block;
19
- }
20
-
21
  .footer-link:hover {
22
  color: #D4AF37;
23
- transform: translateX(5px);
24
- }
25
-
26
- .footer-link:before {
27
- content: '';
28
- position: absolute;
29
- width: 0;
30
- height: 2px;
31
- bottom: -2px;
32
- left: 0;
33
- background-color: #D4AF37;
34
- transition: width 0.3s ease;
35
- }
36
-
37
- .footer-link:hover:before {
38
- width: 100%;
39
- }
40
-
41
- .social-icon {
42
- transition: all 0.3s ease;
43
- width: 20px;
44
- height: 20px;
45
- }
46
-
47
- .social-icon:hover {
48
- transform: translateY(-3px) scale(1.1);
49
- }
50
-
51
- .footer-divider {
52
- border-color: rgba(255,255,255,0.15);
53
- }
54
-
55
- .footer-heading {
56
- position: relative;
57
- padding-bottom: 12px;
58
- margin-bottom: 20px;
59
- }
60
-
61
- .footer-heading:after {
62
- content: '';
63
- position: absolute;
64
- width: 50px;
65
- height: 2px;
66
- bottom: 0;
67
- left: 0;
68
- background: #D4AF37;
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>
81
- // Replace feather icons
82
- document.addEventListener('DOMContentLoaded', function() {
83
- if (window.feather) {
84
- feather.replace();
85
- }
86
- });
87
  </script>
88
- </footer>
89
  `;
90
  }
91
  }
 
3
  this.attachShadow({ mode: 'open' });
4
  this.shadowRoot.innerHTML = `
5
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  .footer-link:hover {
7
  color: #D4AF37;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  }
9
  </style>
10
+ <footer class="bg-primary text-white pt-16 pb-8">
11
  <div class="container mx-auto px-6">
12
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
13
+ <div>
14
+ <h3 class="text-xl font-bold mb-6">BavulumKatar'da</h3>
15
+ <p class="text-white/80 mb-4">Your trusted partner for global shopping and delivery in Qatar.</p>
16
+ <div class="flex space-x-4">
17
+ <a href="#" class="text-white/80 hover:text-secondary transition duration-300">
18
+ <i data-feather="facebook" class="w-5 h-5"></i>
19
+ </a>
20
+ <a href="#" class="text-white/80 hover:text-secondary transition duration-300">
21
+ <i data-feather="twitter" class="w-5 h-5"></i>
22
+ </a>
23
+ <a href="#" class="text-white/80 hover:text-secondary transition duration-300">
24
+ <i data-feather="instagram" class="w-5 h-5"></i>
25
+ </a>
26
+ <a href="#" class="text-white/80 hover:text-secondary transition duration-300">
27
+ <i data-feather="linkedin" class="w-5 h-5"></i>
28
+ </a>
29
+ </div>
30
+ </div>
31
+ <div>
32
+ <h4 class="text-lg font-semibold mb-6">Services</h4>
33
+ <ul class="space-y-3">
34
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Package Forwarding</a></li>
35
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Consolidation</a></li>
36
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Warehouse Storage</a></li>
37
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Personal Shopper</a></li>
38
+ </ul>
39
+ </div>
40
+ <div>
41
+ <h4 class="text-lg font-semibold mb-6">Company</h4>
42
+ <ul class="space-y-3">
43
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">About Us</a></li>
44
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Contact</a></li>
45
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Careers</a></li>
46
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Blog</a></li>
47
+ </ul>
48
+ </div>
49
+ <div>
50
+ <h4 class="text-lg font-semibold mb-6">Support</h4>
51
+ <ul class="space-y-3">
52
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Help Center</a></li>
53
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Shipping Info</a></li>
54
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Returns</a></li>
55
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Privacy Policy</a></li>
56
+ <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Terms of Service</a></li>
57
+ </ul>
58
+ </div>
59
+ </div>
60
+ <div class="border-t border-white/20 mt-12 pt-8 text-center text-white/80">
61
+ <p>&copy; ${new Date().getFullYear()} BavulumKatar'da. All rights reserved.</p>
62
  </div>
63
  </div>
 
 
 
64
  <script>
65
+ feather.replace();
 
 
 
 
 
66
  </script>
67
+ </footer>
68
  `;
69
  }
70
  }
components/nav.js CHANGED
@@ -10,35 +10,7 @@ class CustomNav extends HTMLElement {
10
  display: block;
11
  font-family: 'Poppins', sans-serif;
12
  }
13
- .top-banner {
14
- background: #002366;
15
- color: white;
16
- padding: 0.5rem 0;
17
- text-align: center;
18
- font-size: 0.9rem;
19
- display: flex;
20
- justify-content: center;
21
- gap: 1.5rem;
22
- }
23
-
24
- .top-banner a {
25
- color: white;
26
- text-decoration: none;
27
- transition: color 0.3s ease;
28
- display: flex;
29
- align-items: center;
30
- gap: 0.3rem;
31
- }
32
-
33
- .top-banner a:hover {
34
- color: #D4AF37;
35
- }
36
-
37
- .top-banner i {
38
- width: 16px;
39
- height: 16px;
40
- }
41
-
42
  nav {
43
  background: white;
44
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
@@ -46,7 +18,8 @@ class CustomNav extends HTMLElement {
46
  top: 0;
47
  z-index: 1000;
48
  }
49
- .container {
 
50
  max-width: 1200px;
51
  margin: 0 auto;
52
  padding: 0 2rem;
@@ -190,30 +163,9 @@ class CustomNav extends HTMLElement {
190
  }
191
  }
192
  </style>
193
- <div class="top-banner">
194
- <a href="#services">
195
- <i data-feather="info"></i>
196
- HOW IT WORKS
197
- </a>
198
- <a href="#services">
199
- <i data-feather="star"></i>
200
- WHY CHOOSE US
201
- </a>
202
- <a href="#services">
203
- <i data-feather="dollar-sign"></i>
204
- SHIPPING RATES
205
- </a>
206
- <a href="#services">
207
- <i data-feather="shopping-bag"></i>
208
- SHOP WITH US
209
- </a>
210
- <a href="signup.html">
211
- <i data-feather="user-plus"></i>
212
- SIGN UP
213
- </a>
214
- </div>
215
  <nav>
216
- <div class="container">
217
  <div class="nav-container">
218
  <a href="index.html" class="logo-container">
219
  <i data-feather="globe" class="logo-icon"></i>
@@ -222,13 +174,12 @@ class CustomNav extends HTMLElement {
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>
232
 
233
  <!-- Mobile menu button -->
234
  <button class="mobile-menu-btn">
@@ -239,13 +190,12 @@ class CustomNav extends HTMLElement {
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>
249
  </nav>
250
  <script>
251
  <script>
 
10
  display: block;
11
  font-family: 'Poppins', sans-serif;
12
  }
13
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  nav {
15
  background: white;
16
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
 
18
  top: 0;
19
  z-index: 1000;
20
  }
21
+
22
+ .container {
23
  max-width: 1200px;
24
  margin: 0 auto;
25
  padding: 0 2rem;
 
163
  }
164
  }
165
  </style>
166
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  <nav>
168
+ <div class="container">
169
  <div class="nav-container">
170
  <a href="index.html" class="logo-container">
171
  <i data-feather="globe" class="logo-icon"></i>
 
174
 
175
  <!-- Desktop Navigation -->
176
  <div class="nav-menu">
177
+ <a href="#how-it-works" class="nav-item">HOW IT WORKS</a>
178
+ <a href="#why-choose-us" class="nav-item">WHY CHOOSE US</a>
179
+ <a href="#shipping-rates" class="nav-item">SHIPPING RATES</a>
180
+ <a href="#shop-with-us" class="nav-item">SHOP WITH US</a>
181
+ <a href="signup.html" class="btn-signup">SIGN UP</a>
182
+ </div>
 
183
 
184
  <!-- Mobile menu button -->
185
  <button class="mobile-menu-btn">
 
190
 
191
  <!-- Mobile Navigation -->
192
  <div class="mobile-menu">
193
+ <a href="#how-it-works" class="mobile-nav-item">HOW IT WORKS</a>
194
+ <a href="#why-choose-us" class="mobile-nav-item">WHY CHOOSE US</a>
195
+ <a href="#shipping-rates" class="mobile-nav-item">SHIPPING RATES</a>
196
+ <a href="#shop-with-us" class="mobile-nav-item">SHOP WITH US</a>
 
197
  <a href="signup.html" class="mobile-btn-signup">SIGN UP</a>
198
+ </div>
199
  </nav>
200
  <script>
201
  <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>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,106 +22,291 @@
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>
 
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
  </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>
307
  <script>
308
  feather.replace();
309
  </script>
310
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
311
  </body>
312
  </html>
login.html CHANGED
@@ -35,8 +35,8 @@
35
  <h1 class="text-2xl font-bold">Welcome Back</h1>
36
  <p class="text-white/80">Access your global shopping account</p>
37
  </div>
38
- <form id="login-form" class="p-6">
39
- <div class="mb-4">
40
  <label for="email" class="block text-gray-700 text-sm font-medium mb-1">Email Address</label>
41
  <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary" required>
42
  </div>
 
35
  <h1 class="text-2xl font-bold">Welcome Back</h1>
36
  <p class="text-white/80">Access your global shopping account</p>
37
  </div>
38
+ <form class="p-6">
39
+ <div class="mb-4">
40
  <label for="email" class="block text-gray-700 text-sm font-medium mb-1">Email Address</label>
41
  <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary" required>
42
  </div>
script.js CHANGED
@@ -1,4 +1,3 @@
1
-
2
  // Main JavaScript for BavulumKatar'da
3
  document.addEventListener('DOMContentLoaded', function() {
4
  // Initialize animations
@@ -8,16 +7,11 @@ document.addEventListener('DOMContentLoaded', function() {
8
  element.style.animationDelay = `${index * 0.1}s`;
9
  });
10
 
11
- // Form validation and submission for signup
12
  const signupForm = document.getElementById('signup-form');
13
  if (signupForm) {
14
- signupForm.addEventListener('submit', async function(e) {
15
  e.preventDefault();
16
-
17
- const firstName = document.getElementById('firstName').value;
18
- const lastName = document.getElementById('lastName').value;
19
- const email = document.getElementById('email').value;
20
- const phone = document.getElementById('phone').value;
21
  const password = document.getElementById('password').value;
22
  const confirmPassword = document.getElementById('confirmPassword').value;
23
 
@@ -31,104 +25,28 @@ document.addEventListener('DOMContentLoaded', function() {
31
  return;
32
  }
33
 
34
- try {
35
- const response = await fetch('http://localhost:5000/api/register', {
36
- method: 'POST',
37
- headers: {
38
- 'Content-Type': 'application/json'
39
- },
40
- body: JSON.stringify({
41
- firstName,
42
- lastName,
43
- email,
44
- phone,
45
- password
46
- })
47
- });
48
-
49
- const data = await response.json();
50
-
51
- if (!response.ok) {
52
- throw new Error(data.message || 'Registration failed');
53
- }
54
- // Show success message and redirect to login
55
- alert('Registration successful! Please log in.');
56
- window.location.href = 'login.html';
57
- } catch (err) {
58
- alert(err.message || 'Registration failed. Please try again.');
59
- console.error(err);
60
- }
61
  });
62
  }
63
 
64
- // Form validation and submission for login
65
  const loginForm = document.getElementById('login-form');
66
  if (loginForm) {
67
- loginForm.addEventListener('submit', async function(e) {
68
  e.preventDefault();
69
-
70
  const email = document.getElementById('email').value;
71
  const password = document.getElementById('password').value;
72
 
73
- try {
74
- const response = await fetch('http://localhost:5000/api/login', {
75
- method: 'POST',
76
- headers: {
77
- 'Content-Type': 'application/json'
78
- },
79
- body: JSON.stringify({ email, password })
80
- });
81
-
82
- const data = await response.json();
83
-
84
- if (!response.ok) {
85
- throw new Error(data.message || 'Login failed');
86
- }
87
-
88
- // Save token and redirect
89
- localStorage.setItem('token', data.token);
90
- window.location.href = 'orders.html';
91
- } catch (err) {
92
- alert(err.message || 'Login failed. Please try again.');
93
- console.error(err);
94
  }
 
 
 
 
95
  });
96
  }
97
-
98
- // Check authentication on protected pages
99
- if (window.location.pathname.includes('orders.html')) {
100
- const token = localStorage.getItem('token');
101
- if (!token) {
102
- window.location.href = 'login.html';
103
- return;
104
- }
105
-
106
- // Fetch user data or orders here
107
- feather.replace();
108
- }
109
- });
110
-
111
- // Helper function for authenticated requests
112
- async function authFetch(url, options = {}) {
113
- const token = localStorage.getItem('token');
114
-
115
- if (!token) {
116
- window.location.href = 'login.html';
117
- return;
118
- }
119
-
120
- options.headers = {
121
- ...options.headers,
122
- 'x-auth-token': token
123
- };
124
-
125
- const response = await fetch(url, options);
126
-
127
- if (response.status === 401) {
128
- localStorage.removeItem('token');
129
- window.location.href = 'login.html';
130
- return;
131
- }
132
-
133
- return response;
134
- }
 
 
1
  // Main JavaScript for BavulumKatar'da
2
  document.addEventListener('DOMContentLoaded', function() {
3
  // Initialize animations
 
7
  element.style.animationDelay = `${index * 0.1}s`;
8
  });
9
 
10
+ // Form validation for signup
11
  const signupForm = document.getElementById('signup-form');
12
  if (signupForm) {
13
+ signupForm.addEventListener('submit', function(e) {
14
  e.preventDefault();
 
 
 
 
 
15
  const password = document.getElementById('password').value;
16
  const confirmPassword = document.getElementById('confirmPassword').value;
17
 
 
25
  return;
26
  }
27
 
28
+ // Form is valid, proceed with submission
29
+ alert('Account created successfully! Redirecting...');
30
+ window.location.href = 'dashboard.html'; // This would be replaced with actual form submission
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  });
32
  }
33
 
34
+ // Form validation for login
35
  const loginForm = document.getElementById('login-form');
36
  if (loginForm) {
37
+ loginForm.addEventListener('submit', function(e) {
38
  e.preventDefault();
 
39
  const email = document.getElementById('email').value;
40
  const password = document.getElementById('password').value;
41
 
42
+ if (!email || !password) {
43
+ alert('Please fill in all fields!');
44
+ return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  }
46
+
47
+ // Form is valid, proceed with submission
48
+ alert('Login successful! Redirecting...');
49
+ window.location.href = 'dashboard.html'; // This would be replaced with actual form submission
50
  });
51
  }
52
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
signup.html CHANGED
@@ -35,8 +35,8 @@
35
  <h1 class="text-2xl font-bold">Create Your Account</h1>
36
  <p class="text-white/80">Join our global shopping community</p>
37
  </div>
38
- <form id="signup-form" class="p-6">
39
- <div class="grid grid-cols-2 gap-4 mb-4">
40
  <div>
41
  <label for="firstName" class="block text-gray-700 text-sm font-medium mb-1">First Name</label>
42
  <input type="text" id="firstName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary" required>
 
35
  <h1 class="text-2xl font-bold">Create Your Account</h1>
36
  <p class="text-white/80">Join our global shopping community</p>
37
  </div>
38
+ <form class="p-6">
39
+ <div class="grid grid-cols-2 gap-4 mb-4">
40
  <div>
41
  <label for="firstName" class="block text-gray-700 text-sm font-medium mb-1">First Name</label>
42
  <input type="text" id="firstName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary" required>
style.css CHANGED
@@ -1,4 +1,3 @@
1
-
2
  /* Custom CSS for BavulumKatar'da */
3
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
4
 
@@ -7,33 +6,6 @@ body {
7
  line-height: 1.6;
8
  }
9
 
10
- /* Horizontal layout for store cards */
11
- .shop-with-us .grid {
12
- display: flex;
13
- flex-wrap: wrap;
14
- justify-content: center;
15
- gap: 1.5rem;
16
- }
17
-
18
- .shop-with-us .grid > * {
19
- flex: 1 1 200px;
20
- max-width: 250px;
21
- }
22
-
23
- @media (max-width: 768px) {
24
- .shop-with-us .grid {
25
- flex-direction: row;
26
- overflow-x: auto;
27
- padding-bottom: 1rem;
28
- -webkit-overflow-scrolling: touch;
29
- scroll-snap-type: x mandatory;
30
- }
31
-
32
- .shop-with-us .grid > * {
33
- flex: 0 0 80%;
34
- scroll-snap-align: start;
35
- }
36
- }
37
  /* Custom animations */
38
  @keyframes fadeIn {
39
  from { opacity: 0; transform: translateY(20px); }
 
 
1
  /* Custom CSS for BavulumKatar'da */
2
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
3
 
 
6
  line-height: 1.6;
7
  }
8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  /* Custom animations */
10
  @keyframes fadeIn {
11
  from { opacity: 0; transform: translateY(20px); }