Hugging Face's logo

Spaces:
patoconnect
/
consignment-page
Running

App Files Community
patoconnect commited on
Commit
1366041
·
verified ·
1 Parent(s): f1fda87

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1240 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Consignment Page
3
- emoji: 👁
4
- colorFrom: yellow
5
- colorTo: green
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: consignment-page
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: red
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,1240 @@
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
+ <!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>GSE Courier Delivery Service | Reliable Shipping Solutions</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS */
11
+ .hero-gradient {
12
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
13
+ }
14
+ .tracking-input:focus {
15
+ outline: none;
16
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
17
+ }
18
+ .service-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
21
+ }
22
+ .status-pending {
23
+ background-color: #f59e0b;
24
+ }
25
+ .status-in-transit {
26
+ background-color: #3b82f6;
27
+ }
28
+ .status-delivered {
29
+ background-color: #10b981;
30
+ }
31
+ .status-failed {
32
+ background-color: #ef4444;
33
+ }
34
+ .nav-link:hover::after {
35
+ content: '';
36
+ display: block;
37
+ width: 100%;
38
+ height: 2px;
39
+ background-color: #3b82f6;
40
+ margin-top: 2px;
41
+ }
42
+ .animate-pulse {
43
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
44
+ }
45
+ @keyframes pulse {
46
+ 0%, 100% {
47
+ opacity: 1;
48
+ }
49
+ 50% {
50
+ opacity: 0.5;
51
+ }
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="font-sans antialiased text-gray-800">
56
+ <!-- Header/Navigation -->
57
+ <header class="bg-white shadow-sm sticky top-0 z-50">
58
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
59
+ <div class="flex items-center">
60
+ <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">
61
+ GSE
62
+ </div>
63
+ <h1 class="text-xl font-bold text-blue-800">GSE COURIER DELIVERY SERVICE</h1>
64
+ </div>
65
+
66
+ <nav class="hidden md:flex space-x-8">
67
+ <a href="#home" class="nav-link text-blue-800 font-medium">Home</a>
68
+ <a href="#services" class="nav-link text-gray-600 hover:text-blue-800 font-medium">Services</a>
69
+ <a href="#track" class="nav-link text-gray-600 hover:text-blue-800 font-medium">Track Shipment</a>
70
+ <a href="#about" class="nav-link text-gray-600 hover:text-blue-800 font-medium">About Us</a>
71
+ <a href="#contact" class="nav-link text-gray-600 hover:text-blue-800 font-medium">Contact</a>
72
+ </nav>
73
+
74
+ <div class="hidden md:block">
75
+ <a href="#request" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition duration-300">
76
+ Request Pickup
77
+ </a>
78
+ </div>
79
+
80
+ <button class="md:hidden text-gray-600 focus:outline-none">
81
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
82
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
83
+ </svg>
84
+ </button>
85
+ </div>
86
+ </header>
87
+
88
+ <!-- Mobile Menu (hidden by default) -->
89
+ <div class="md:hidden hidden bg-white shadow-lg absolute w-full z-40" id="mobileMenu">
90
+ <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
91
+ <a href="#home" class="text-blue-800 font-medium py-2 border-b border-gray-100">Home</a>
92
+ <a href="#services" class="text-gray-600 hover:text-blue-800 font-medium py-2 border-b border-gray-100">Services</a>
93
+ <a href="#track" class="text-gray-600 hover:text-blue-800 font-medium py-2 border-b border-gray-100">Track Shipment</a>
94
+ <a href="#about" class="text-gray-600 hover:text-blue-800 font-medium py-2 border-b border-gray-100">About Us</a>
95
+ <a href="#contact" class="text-gray-600 hover:text-blue-800 font-medium py-2 border-b border-gray-100">Contact</a>
96
+ <a href="#request" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium text-center transition duration-300 my-2">
97
+ Request Pickup
98
+ </a>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Hero Section -->
103
+ <section id="home" class="hero-gradient text-white py-16 md:py-24">
104
+ <div class="container mx-auto px-4">
105
+ <div class="flex flex-col md:flex-row items-center">
106
+ <div class="md:w-1/2 mb-10 md:mb-0">
107
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Fast & Reliable Courier Services</h1>
108
+ <p class="text-xl mb-8 text-blue-100">Delivering your packages with care and precision across the region. Trust GSE for all your shipping needs.</p>
109
+
110
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
111
+ <a href="#request" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-md font-bold text-center transition duration-300">
112
+ Request Pickup <i class="fas fa-arrow-right ml-2"></i>
113
+ </a>
114
+ <a href="#services" class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-md font-bold text-center transition duration-300">
115
+ Our Services
116
+ </a>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="md:w-1/2 flex justify-center">
121
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
122
+ alt="Courier Delivery"
123
+ class="rounded-lg shadow-2xl max-w-full h-auto">
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </section>
128
+
129
+ <!-- Tracking Section -->
130
+ <section id="track" class="py-12 bg-gray-50">
131
+ <div class="container mx-auto px-4">
132
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 md:p-8">
133
+ <h2 class="text-2xl md:text-3xl font-bold text-center mb-6 text-blue-800">Track Your Shipment</h2>
134
+
135
+ <div class="flex flex-col md:flex-row items-center">
136
+ <div class="w-full md:w-3/4 mb-4 md:mb-0 md:mr-4">
137
+ <div class="relative">
138
+ <input type="text"
139
+ id="trackingNumber"
140
+ placeholder="Enter your tracking number"
141
+ class="w-full px-4 py-3 border border-gray-300 rounded-md tracking-input focus:border-blue-500 transition duration-300">
142
+ <button class="absolute right-2 top-2 text-gray-400 hover:text-gray-600">
143
+ <i class="fas fa-search"></i>
144
+ </button>
145
+ </div>
146
+ </div>
147
+ <button id="trackButton" class="w-full md:w-1/4 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
148
+ Track Now
149
+ </button>
150
+ </div>
151
+
152
+ <!-- Tracking Results (hidden by default) -->
153
+ <div id="trackingResults" class="mt-8 hidden">
154
+ <div class="bg-gray-50 p-6 rounded-lg">
155
+ <div class="flex justify-between items-center mb-4">
156
+ <h3 class="text-lg font-semibold">Shipment #GS123456789</h3>
157
+ <span class="px-3 py-1 rounded-full text-white font-medium status-in-transit">In Transit</span>
158
+ </div>
159
+
160
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
161
+ <div>
162
+ <h4 class="font-medium text-gray-500 mb-2">Sender Information</h4>
163
+ <p class="font-semibold">John Smith</p>
164
+ <p>123 Business Ave, Suite 45</p>
165
+ <p>New York, NY 10001</p>
166
+ <p>Phone: (555) 123-4567</p>
167
+ </div>
168
+
169
+ <div>
170
+ <h4 class="font-medium text-gray-500 mb-2">Recipient Information</h4>
171
+ <p class="font-semibold">Sarah Johnson</p>
172
+ <p>456 Commerce St, Apt 3B</p>
173
+ <p>Boston, MA 02108</p>
174
+ <p>Phone: (555) 987-6543</p>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="mb-6">
179
+ <h4 class="font-medium text-gray-500 mb-2">Package Details</h4>
180
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
181
+ <div>
182
+ <p class="text-sm text-gray-500">Weight</p>
183
+ <p class="font-semibold">5.2 kg</p>
184
+ </div>
185
+ <div>
186
+ <p class="text-sm text-gray-500">Dimensions</p>
187
+ <p class="font-semibold">30x20x15 cm</p>
188
+ </div>
189
+ <div>
190
+ <p class="text-sm text-gray-500">Service</p>
191
+ <p class="font-semibold">Next-Day Delivery</p>
192
+ </div>
193
+ <div>
194
+ <p class="text-sm text-gray-500">Est. Delivery</p>
195
+ <p class="font-semibold">June 15, 2023</p>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <h4 class="font-medium text-gray-500 mb-4">Shipment Progress</h4>
201
+ <div class="relative">
202
+ <!-- Timeline -->
203
+ <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-blue-200"></div>
204
+
205
+ <!-- Timeline Items -->
206
+ <div class="relative mb-8 pl-10">
207
+ <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
208
+ <i class="fas fa-check"></i>
209
+ </div>
210
+ <div class="bg-white p-4 rounded-lg shadow-sm">
211
+ <p class="font-semibold">Shipment Created</p>
212
+ <p class="text-sm text-gray-500">June 12, 2023 - 10:15 AM</p>
213
+ <p class="text-sm mt-1">Your shipment has been registered in our system.</p>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="relative mb-8 pl-10">
218
+ <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
219
+ <i class="fas fa-check"></i>
220
+ </div>
221
+ <div class="bg-white p-4 rounded-lg shadow-sm">
222
+ <p class="font-semibold">Picked Up</p>
223
+ <p class="text-sm text-gray-500">June 12, 2023 - 2:30 PM</p>
224
+ <p class="text-sm mt-1">Your package has been collected by our courier.</p>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="relative mb-8 pl-10">
229
+ <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
230
+ <i class="fas fa-truck"></i>
231
+ </div>
232
+ <div class="bg-white p-4 rounded-lg shadow-sm">
233
+ <p class="font-semibold">In Transit</p>
234
+ <p class="text-sm text-gray-500">June 13, 2023 - 9:45 AM</p>
235
+ <p class="text-sm mt-1">Your package is on its way to the destination city.</p>
236
+ </div>
237
+ </div>
238
+
239
+ <div class="relative pl-10">
240
+ <div class="absolute left-0 top-0 w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
241
+ <i class="fas fa-truck-loading"></i>
242
+ </div>
243
+ <div class="bg-gray-50 p-4 rounded-lg">
244
+ <p class="font-semibold">Out for Delivery</p>
245
+ <p class="text-sm text-gray-500">Estimated: June 15, 2023</p>
246
+ <p class="text-sm mt-1">Your package will be delivered today.</p>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </section>
255
+
256
+ <!-- Services Section -->
257
+ <section id="services" class="py-16 bg-white">
258
+ <div class="container mx-auto px-4">
259
+ <div class="text-center mb-12">
260
+ <h2 class="text-3xl font-bold text-blue-800 mb-4">Our Services</h2>
261
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">We offer a comprehensive range of courier services tailored to meet your business and personal shipping needs.</p>
262
+ </div>
263
+
264
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
265
+ <!-- Service Card 1 -->
266
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
267
+ <div class="h-48 bg-blue-100 flex items-center justify-center">
268
+ <i class="fas fa-bolt text-blue-600 text-6xl"></i>
269
+ </div>
270
+ <div class="p-6">
271
+ <h3 class="text-xl font-bold mb-3 text-blue-800">Same-Day Delivery</h3>
272
+ <p class="text-gray-600 mb-4">Get your packages delivered within the same day for urgent shipments within the metropolitan area.</p>
273
+ <ul class="space-y-2 mb-4">
274
+ <li class="flex items-center">
275
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
276
+ <span>Guanteed delivery by 9 PM</span>
277
+ </li>
278
+ <li class="flex items-center">
279
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
280
+ <span>Real-time tracking</span>
281
+ </li>
282
+ <li class="flex items-center">
283
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
284
+ <span>Signature confirmation</span>
285
+ </li>
286
+ </ul>
287
+ <a href="#request" class="text-blue-600 font-medium inline-flex items-center">
288
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
289
+ </a>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- Service Card 2 -->
294
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
295
+ <div class="h-48 bg-green-100 flex items-center justify-center">
296
+ <i class="fas fa-clock text-green-600 text-6xl"></i>
297
+ </div>
298
+ <div class="p-6">
299
+ <h3 class="text-xl font-bold mb-3 text-blue-800">Next-Day Delivery</h3>
300
+ <p class="text-gray-600 mb-4">Reliable next-day delivery service for time-sensitive shipments across our regional network.</p>
301
+ <ul class="space-y-2 mb-4">
302
+ <li class="flex items-center">
303
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
304
+ <span>Delivery by 5 PM next business day</span>
305
+ </li>
306
+ <li class="flex items-center">
307
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
308
+ <span>Coverage across 50+ cities</span>
309
+ </li>
310
+ <li class="flex items-center">
311
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
312
+ <span>Free first-attempt delivery</span>
313
+ </li>
314
+ </ul>
315
+ <a href="#request" class="text-blue-600 font-medium inline-flex items-center">
316
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
317
+ </a>
318
+ </div>
319
+ </div>
320
+
321
+ <!-- Service Card 3 -->
322
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
323
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
324
+ <i class="fas fa-boxes text-purple-600 text-6xl"></i>
325
+ </div>
326
+ <div class="p-6">
327
+ <h3 class="text-xl font-bold mb-3 text-blue-800">Bulk Consignment</h3>
328
+ <p class="text-gray-600 mb-4">Specialized service for businesses requiring regular bulk shipments with customized solutions.</p>
329
+ <ul class="space-y-2 mb-4">
330
+ <li class="flex items-center">
331
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
332
+ <span>Dedicated account manager</span>
333
+ </li>
334
+ <li class="flex items-center">
335
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
336
+ <span>Volume discounts available</span>
337
+ </li>
338
+ <li class="flex items-center">
339
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
340
+ <span>Scheduled pickups</span>
341
+ </li>
342
+ </ul>
343
+ <a href="#request" class="text-blue-600 font-medium inline-flex items-center">
344
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
345
+ </a>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Service Card 4 -->
350
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
351
+ <div class="h-48 bg-yellow-100 flex items-center justify-center">
352
+ <i class="fas fa-temperature-low text-yellow-600 text-6xl"></i>
353
+ </div>
354
+ <div class="p-6">
355
+ <h3 class="text-xl font-bold mb-3 text-blue-800">Temperature-Controlled</h3>
356
+ <p class="text-gray-600 mb-4">Specialized service for perishable goods, pharmaceuticals, and other temperature-sensitive items.</p>
357
+ <ul class="space-y-2 mb-4">
358
+ <li class="flex items-center">
359
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
360
+ <span>Refrigerated and frozen options</span>
361
+ </li>
362
+ <li class="flex items-center">
363
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
364
+ <span>24/7 temperature monitoring</span>
365
+ </li>
366
+ <li class="flex items-center">
367
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
368
+ <span>Compliance with industry standards</span>
369
+ </li>
370
+ </ul>
371
+ <a href="#request" class="text-blue-600 font-medium inline-flex items-center">
372
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
373
+ </a>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- Service Card 5 -->
378
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
379
+ <div class="h-48 bg-red-100 flex items-center justify-center">
380
+ <i class="fas fa-gem text-red-600 text-6xl"></i>
381
+ </div>
382
+ <div class="p-6">
383
+ <h3 class="text-xl font-bold mb-3 text-blue-800">High-Value Shipments</h3>
384
+ <p class="text-gray-600 mb-4">Secure transportation for valuable items with enhanced security measures and insurance options.</p>
385
+ <ul class="space-y-2 mb-4">
386
+ <li class="flex items-center">
387
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
388
+ <span>Discreet packaging available</span>
389
+ </li>
390
+ <li class="flex items-center">
391
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
392
+ <span>Armed escorts upon request</span>
393
+ </li>
394
+ <li class="flex items-center">
395
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
396
+ <span>Full insurance coverage</span>
397
+ </li>
398
+ </ul>
399
+ <a href="#request" class="text-blue-600 font-medium inline-flex items-center">
400
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
401
+ </a>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- Service Card 6 -->
406
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
407
+ <div class="h-48 bg-indigo-100 flex items-center justify-center">
408
+ <i class="fas fa-globe-americas text-indigo-600 text-6xl"></i>
409
+ </div>
410
+ <div class="p-6">
411
+ <h3 class="text-xl font-bold mb-3 text-blue-800">International Shipping</h3>
412
+ <p class="text-gray-600 mb-4">Comprehensive international shipping solutions with customs clearance and documentation assistance.</p>
413
+ <ul class="space-y-2 mb-4">
414
+ <li class="flex items-center">
415
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
416
+ <span>Door-to-door service</span>
417
+ </li>
418
+ <li class="flex items-center">
419
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
420
+ <span>Customs documentation handled</span>
421
+ </li>
422
+ <li class="flex items-center">
423
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
424
+ <span>Competitive international rates</span>
425
+ </li>
426
+ </ul>
427
+ <a href="#request" class="text-blue-600 font-medium inline-flex items-center">
428
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
429
+ </a>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </section>
435
+
436
+ <!-- Request Pickup Section -->
437
+ <section id="request" class="py-16 bg-gray-50">
438
+ <div class="container mx-auto px-4">
439
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
440
+ <div class="md:flex">
441
+ <div class="md:w-1/2 bg-blue-600 text-white p-8 md:p-12">
442
+ <h2 class="text-2xl font-bold mb-4">Request a Pickup</h2>
443
+ <p class="mb-6">Fill out the form to schedule a pickup for your shipment. Our courier will collect your package at your preferred time.</p>
444
+
445
+ <div class="space-y-4">
446
+ <div class="flex items-start">
447
+ <div class="flex-shrink-0 bg-blue-500 rounded-full p-2">
448
+ <i class="fas fa-phone-alt text-white"></i>
449
+ </div>
450
+ <div class="ml-3">
451
+ <p class="text-sm font-medium text-blue-100">Need immediate assistance?</p>
452
+ <p class="text-lg font-semibold">(555) 123-4567</p>
453
+ </div>
454
+ </div>
455
+
456
+ <div class="flex items-start">
457
+ <div class="flex-shrink-0 bg-blue-500 rounded-full p-2">
458
+ <i class="fas fa-clock text-white"></i>
459
+ </div>
460
+ <div class="ml-3">
461
+ <p class="text-sm font-medium text-blue-100">Operating Hours</p>
462
+ <p class="text-lg font-semibold">Mon-Fri: 8AM - 8PM</p>
463
+ <p class="text-lg font-semibold">Sat: 9AM - 5PM</p>
464
+ </div>
465
+ </div>
466
+
467
+ <div class="flex items-start">
468
+ <div class="flex-shrink-0 bg-blue-500 rounded-full p-2">
469
+ <i class="fas fa-map-marker-alt text-white"></i>
470
+ </div>
471
+ <div class="ml-3">
472
+ <p class="text-sm font-medium text-blue-100">Service Area</p>
473
+ <p class="text-lg font-semibold">50+ cities across the region</p>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+
479
+ <div class="md:w-1/2 p-8 md:p-12">
480
+ <h3 class="text-xl font-bold mb-6 text-blue-800">Pickup Request Form</h3>
481
+ <form id="pickupForm">
482
+ <div class="mb-4">
483
+ <label for="serviceType" class="block text-sm font-medium text-gray-700 mb-1">Service Type</label>
484
+ <select id="serviceType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
485
+ <option value="">Select a service</option>
486
+ <option value="same-day">Same-Day Delivery</option>
487
+ <option value="next-day">Next-Day Delivery</option>
488
+ <option value="bulk">Bulk Consignment</option>
489
+ <option value="temperature">Temperature-Controlled</option>
490
+ <option value="high-value">High-Value Shipment</option>
491
+ <option value="international">International Shipping</option>
492
+ </select>
493
+ </div>
494
+
495
+ <div class="mb-4">
496
+ <label for="pickupDate" class="block text-sm font-medium text-gray-700 mb-1">Preferred Pickup Date</label>
497
+ <input type="date" id="pickupDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
498
+ </div>
499
+
500
+ <div class="mb-4">
501
+ <label for="pickupTime" class="block text-sm font-medium text-gray-700 mb-1">Preferred Pickup Time</label>
502
+ <select id="pickupTime" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
503
+ <option value="morning">Morning (8AM - 12PM)</option>
504
+ <option value="afternoon">Afternoon (12PM - 5PM)</option>
505
+ <option value="evening">Evening (5PM - 8PM)</option>
506
+ </select>
507
+ </div>
508
+
509
+ <div class="mb-4">
510
+ <label for="senderName" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
511
+ <input type="text" id="senderName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="John Smith">
512
+ </div>
513
+
514
+ <div class="mb-4">
515
+ <label for="senderPhone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
516
+ <input type="tel" id="senderPhone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="(555) 123-4567">
517
+ </div>
518
+
519
+ <div class="mb-4">
520
+ <label for="senderAddress" class="block text-sm font-medium text-gray-700 mb-1">Pickup Address</label>
521
+ <textarea id="senderAddress" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="123 Business Ave, Suite 45"></textarea>
522
+ </div>
523
+
524
+ <div class="mb-6">
525
+ <label for="specialInstructions" class="block text-sm font-medium text-gray-700 mb-1">Special Instructions</label>
526
+ <textarea id="specialInstructions" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="Any specific instructions for our courier"></textarea>
527
+ </div>
528
+
529
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
530
+ Submit Request
531
+ </button>
532
+ </form>
533
+ </div>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </section>
538
+
539
+ <!-- About Us Section -->
540
+ <section id="about" class="py-16 bg-white">
541
+ <div class="container mx-auto px-4">
542
+ <div class="flex flex-col md:flex-row items-center">
543
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
544
+ <h2 class="text-3xl font-bold text-blue-800 mb-6">About GSE Courier Delivery Service</h2>
545
+ <p class="text-gray-600 mb-6 text-lg">Founded in 2010, GSE Courier Delivery Service has grown from a local delivery provider to a regional leader in logistics solutions. Our commitment to reliability, speed, and customer service has earned us a reputation as a trusted partner for businesses and individuals alike.</p>
546
+
547
+ <div class="space-y-4">
548
+ <div class="flex items-start">
549
+ <div class="flex-shrink-0 bg-blue-100 rounded-full p-2">
550
+ <i class="fas fa-bullseye text-blue-600"></i>
551
+ </div>
552
+ <div class="ml-3">
553
+ <h3 class="text-lg font-semibold text-gray-800">Our Mission</h3>
554
+ <p class="text-gray-600">To provide exceptional courier services that connect businesses and individuals through reliable, efficient, and secure delivery solutions.</p>
555
+ </div>
556
+ </div>
557
+
558
+ <div class="flex items-start">
559
+ <div class="flex-shrink-0 bg-blue-100 rounded-full p-2">
560
+ <i class="fas fa-eye text-blue-600"></i>
561
+ </div>
562
+ <div class="ml-3">
563
+ <h3 class="text-lg font-semibold text-gray-800">Our Vision</h3>
564
+ <p class="text-gray-600">To be the preferred logistics partner in our region by continuously innovating and exceeding customer expectations.</p>
565
+ </div>
566
+ </div>
567
+
568
+ <div class="flex items-start">
569
+ <div class="flex-shrink-0 bg-blue-100 rounded-full p-2">
570
+ <i class="fas fa-heart text-blue-600"></i>
571
+ </div>
572
+ <div class="ml-3">
573
+ <h3 class="text-lg font-semibold text-gray-800">Our Values</h3>
574
+ <p class="text-gray-600">Reliability, Integrity, Customer Focus, Innovation, and Teamwork form the foundation of everything we do.</p>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <div class="md:w-1/2">
581
+ <div class="bg-gray-50 p-8 rounded-xl">
582
+ <h3 class="text-xl font-bold mb-6 text-blue-800">Why Choose GSE?</h3>
583
+
584
+ <div class="space-y-6">
585
+ <div class="flex">
586
+ <div class="flex-shrink-0">
587
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white">
588
+ <i class="fas fa-shield-alt"></i>
589
+ </div>
590
+ </div>
591
+ <div class="ml-4">
592
+ <h4 class="text-lg font-medium text-gray-900">Secure Handling</h4>
593
+ <p class="mt-2 text-gray-600">All shipments are handled with care and tracked throughout the delivery process.</p>
594
+ </div>
595
+ </div>
596
+
597
+ <div class="flex">
598
+ <div class="flex-shrink-0">
599
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white">
600
+ <i class="fas fa-tachometer-alt"></i>
601
+ </div>
602
+ </div>
603
+ <div class="ml-4">
604
+ <h4 class="text-lg font-medium text-gray-900">Fast Delivery</h4>
605
+ <p class="mt-2 text-gray-600">Our optimized routes and dedicated team ensure your packages arrive on time, every time.</p>
606
+ </div>
607
+ </div>
608
+
609
+ <div class="flex">
610
+ <div class="flex-shrink-0">
611
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white">
612
+ <i class="fas fa-headset"></i>
613
+ </div>
614
+ </div>
615
+ <div class="ml-4">
616
+ <h4 class="text-lg font-medium text-gray-900">24/7 Support</h4>
617
+ <p class="mt-2 text-gray-600">Our customer service team is available around the clock to assist with any inquiries.</p>
618
+ </div>
619
+ </div>
620
+
621
+ <div class="flex">
622
+ <div class="flex-shrink-0">
623
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white">
624
+ <i class="fas fa-map-marked-alt"></i>
625
+ </div>
626
+ </div>
627
+ <div class="ml-4">
628
+ <h4 class="text-lg font-medium text-gray-900">Wide Coverage</h4>
629
+ <p class="mt-2 text-gray-600">We serve over 50 cities across the region with plans for continuous expansion.</p>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </section>
638
+
639
+ <!-- Stats Section -->
640
+ <section class="py-16 bg-blue-600 text-white">
641
+ <div class="container mx-auto px-4">
642
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
643
+ <div>
644
+ <div class="text-4xl md:text-5xl font-bold mb-2">13+</div>
645
+ <div class="text-sm md:text-base font-medium uppercase tracking-wider">Years in Business</div>
646
+ </div>
647
+ <div>
648
+ <div class="text-4xl md:text-5xl font-bold mb-2">50+</div>
649
+ <div class="text-sm md:text-base font-medium uppercase tracking-wider">Cities Served</div>
650
+ </div>
651
+ <div>
652
+ <div class="text-4xl md:text-5xl font-bold mb-2">250K+</div>
653
+ <div class="text-sm md:text-base font-medium uppercase tracking-wider">Deliveries Made</div>
654
+ </div>
655
+ <div>
656
+ <div class="text-4xl md:text-5xl font-bold mb-2">98%</div>
657
+ <div class="text-sm md:text-base font-medium uppercase tracking-wider">On-Time Rate</div>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </section>
662
+
663
+ <!-- Testimonials Section -->
664
+ <section class="py-16 bg-gray-50">
665
+ <div class="container mx-auto px-4">
666
+ <div class="text-center mb-12">
667
+ <h2 class="text-3xl font-bold text-blue-800 mb-4">What Our Clients Say</h2>
668
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Don't just take our word for it - hear from some of our satisfied customers.</p>
669
+ </div>
670
+
671
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
672
+ <!-- Testimonial 1 -->
673
+ <div class="bg-white p-8 rounded-xl shadow-md">
674
+ <div class="flex items-center mb-4">
675
+ <div class="flex-shrink-0">
676
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson">
677
+ </div>
678
+ <div class="ml-4">
679
+ <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4>
680
+ <p class="text-gray-500">ABC Corporation</p>
681
+ </div>
682
+ </div>
683
+ <div class="text-gray-600">
684
+ <p>"We've been using GSE for our urgent document deliveries for over 3 years. Their same-day service is incredibly reliable and has never let us down. The tracking system gives us peace of mind knowing exactly where our important packages are at all times."</p>
685
+ </div>
686
+ <div class="mt-4 flex">
687
+ <i class="fas fa-star text-yellow-400"></i>
688
+ <i class="fas fa-star text-yellow-400"></i>
689
+ <i class="fas fa-star text-yellow-400"></i>
690
+ <i class="fas fa-star text-yellow-400"></i>
691
+ <i class="fas fa-star text-yellow-400"></i>
692
+ </div>
693
+ </div>
694
+
695
+ <!-- Testimonial 2 -->
696
+ <div class="bg-white p-8 rounded-xl shadow-md">
697
+ <div class="flex items-center mb-4">
698
+ <div class="flex-shrink-0">
699
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
700
+ </div>
701
+ <div class="ml-4">
702
+ <h4 class="text-lg font-medium text-gray-900">Michael Chen</h4>
703
+ <p class="text-gray-500">Fresh Foods Co.</p>
704
+ </div>
705
+ </div>
706
+ <div class="text-gray-600">
707
+ <p>"As a perishable goods supplier, we need a courier that understands temperature control. GSE's refrigerated service has been a game-changer for our business. Their drivers are professional and their equipment is top-notch. Our product arrives in perfect condition every time."</p>
708
+ </div>
709
+ <div class="mt-4 flex">
710
+ <i class="fas fa-star text-yellow-400"></i>
711
+ <i class="fas fa-star text-yellow-400"></i>
712
+ <i class="fas fa-star text-yellow-400"></i>
713
+ <i class="fas fa-star text-yellow-400"></i>
714
+ <i class="fas fa-star text-yellow-400"></i>
715
+ </div>
716
+ </div>
717
+
718
+ <!-- Testimonial 3 -->
719
+ <div class="bg-white p-8 rounded-xl shadow-md">
720
+ <div class="flex items-center mb-4">
721
+ <div class="flex-shrink-0">
722
+ <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Lisa Rodriguez">
723
+ </div>
724
+ <div class="ml-4">
725
+ <h4 class="text-lg font-medium text-gray-900">Lisa Rodriguez</h4>
726
+ <p class="text-gray-500">Jewelry Designs</p>
727
+ </div>
728
+ </div>
729
+ <div class="text-gray-600">
730
+ <p>"Shipping high-value jewelry items was always stressful until we found GSE. Their high-value shipment service with armed escorts gives us complete confidence. The insurance options are comprehensive and their customer service team is always available to answer questions."</p>
731
+ </div>
732
+ <div class="mt-4 flex">
733
+ <i class="fas fa-star text-yellow-400"></i>
734
+ <i class="fas fa-star text-yellow-400"></i>
735
+ <i class="fas fa-star text-yellow-400"></i>
736
+ <i class="fas fa-star text-yellow-400"></i>
737
+ <i class="fas fa-star text-yellow-400"></i>
738
+ </div>
739
+ </div>
740
+ </div>
741
+ </div>
742
+ </section>
743
+
744
+ <!-- Contact Section -->
745
+ <section id="contact" class="py-16 bg-white">
746
+ <div class="container mx-auto px-4">
747
+ <div class="max-w-4xl mx-auto">
748
+ <h2 class="text-3xl font-bold text-center text-blue-800 mb-12">Contact Us</h2>
749
+
750
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
751
+ <div>
752
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Get in Touch</h3>
753
+ <p class="text-gray-600 mb-6">Have questions about our services or need assistance with an existing shipment? Our team is here to help.</p>
754
+
755
+ <div class="space-y-4">
756
+ <div class="flex items-start">
757
+ <div class="flex-shrink-0 bg-blue-100 rounded-full p-2">
758
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
759
+ </div>
760
+ <div class="ml-3">
761
+ <p class="text-sm font-medium text-gray-500">Headquarters</p>
762
+ <p class="text-base font-semibold text-gray-900">123 Logistics Plaza, Suite 500</p>
763
+ <p class="text-base font-semibold text-gray-900">New York, NY 10001</p>
764
+ </div>
765
+ </div>
766
+
767
+ <div class="flex items-start">
768
+ <div class="flex-shrink-0 bg-blue-100 rounded-full p-2">
769
+ <i class="fas fa-phone-alt text-blue-600"></i>
770
+ </div>
771
+ <div class="ml-3">
772
+ <p class="text-sm font-medium text-gray-500">Phone</p>
773
+ <p class="text-base font-semibold text-gray-900">(555) 123-4567</p>
774
+ <p class="text-sm text-gray-500">24/7 Customer Support</p>
775
+ </div>
776
+ </div>
777
+
778
+ <div class="flex items-start">
779
+ <div class="flex-shrink-0 bg-blue-100 rounded-full p-2">
780
+ <i class="fas fa-envelope text-blue-600"></i>
781
+ </div>
782
+ <div class="ml-3">
783
+ <p class="text-sm font-medium text-gray-500">Email</p>
784
+ <p class="text-base font-semibold text-gray-900">info@gsecourier.com</p>
785
+ <p class="text-sm text-gray-500">Response within 2 hours</p>
786
+ </div>
787
+ </div>
788
+
789
+ <div class="flex items-start">
790
+ <div class="flex-shrink-0 bg-blue-100 rounded-full p-2">
791
+ <i class="fas fa-clock text-blue-600"></i>
792
+ </div>
793
+ <div class="ml-3">
794
+ <p class="text-sm font-medium text-gray-500">Operating Hours</p>
795
+ <p class="text-base font-semibold text-gray-900">Monday - Friday: 8AM - 8PM</p>
796
+ <p class="text-base font-semibold text-gray-900">Saturday: 9AM - 5PM</p>
797
+ <p class="text-base font-semibold text-gray-900">Sunday: Closed</p>
798
+ </div>
799
+ </div>
800
+ </div>
801
+ </div>
802
+
803
+ <div>
804
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Send Us a Message</h3>
805
+ <form id="contactForm">
806
+ <div class="mb-4">
807
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
808
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="John Smith">
809
+ </div>
810
+
811
+ <div class="mb-4">
812
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
813
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="john@example.com">
814
+ </div>
815
+
816
+ <div class="mb-4">
817
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
818
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="How can we help?">
819
+ </div>
820
+
821
+ <div class="mb-4">
822
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
823
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="Your message here..."></textarea>
824
+ </div>
825
+
826
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
827
+ Send Message
828
+ </button>
829
+ </form>
830
+ </div>
831
+ </div>
832
+
833
+ <div class="mt-12 bg-gray-50 p-6 rounded-xl">
834
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Service Area Map</h3>
835
+ <div class="h-64 bg-gray-200 rounded-lg flex items-center justify-center">
836
+ <i class="fas fa-map-marked-alt text-4xl text-gray-400"></i>
837
+ </div>
838
+ <p class="mt-4 text-gray-600 text-center">We currently serve over 50 cities across the region with plans for continuous expansion.</p>
839
+ </div>
840
+ </div>
841
+ </div>
842
+ </section>
843
+
844
+ <!-- Admin Panel (Hidden by default) -->
845
+ <div id="adminPanel" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 z-50 overflow-y-auto">
846
+ <div class="flex items-center justify-center min-h-screen">
847
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-6xl max-h-screen overflow-y-auto">
848
+ <!-- Admin Header -->
849
+ <div class="bg-blue-800 text-white px-6 py-4 rounded-t-lg flex justify-between items-center">
850
+ <h2 class="text-xl font-bold">GSE Courier Admin Panel</h2>
851
+ <button id="closeAdminPanel" class="text-white hover:text-gray-200">
852
+ <i class="fas fa-times"></i>
853
+ </button>
854
+ </div>
855
+
856
+ <!-- Admin Content -->
857
+ <div class="p-6">
858
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
859
+ <!-- Admin Stats -->
860
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
861
+ <div class="text-blue-800 font-medium mb-1">Today's Shipments</div>
862
+ <div class="text-3xl font-bold text-blue-600">24</div>
863
+ <div class="text-sm text-blue-500">+3 from yesterday</div>
864
+ </div>
865
+
866
+ <div class="bg-green-50 p-4 rounded-lg border border-green-100">
867
+ <div class="text-green-800 font-medium mb-1">Pending Pickups</div>
868
+ <div class="text-3xl font-bold text-green-600">8</div>
869
+ <div class="text-sm text-green-500">2 awaiting confirmation</div>
870
+ </div>
871
+
872
+ <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
873
+ <div class="text-yellow-800 font-medium mb-1">In Transit</div>
874
+ <div class="text-3xl font-bold text-yellow-600">15</div>
875
+ <div class="text-sm text-yellow-500">3 delayed shipments</div>
876
+ </div>
877
+
878
+ <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
879
+ <div class="text-purple-800 font-medium mb-1">Revenue Today</div>
880
+ <div class="text-3xl font-bold text-purple-600">$1,245</div>
881
+ <div class="text-sm text-purple-500">Monthly: $28,760</div>
882
+ </div>
883
+ </div>
884
+
885
+ <!-- Admin Tabs -->
886
+ <div class="border-b border-gray-200 mb-6">
887
+ <div class="flex space-x-8">
888
+ <button class="admin-tab active px-1 py-3 text-sm font-medium text-blue-600 border-b-2 border-blue-600">
889
+ Shipments
890
+ </button>
891
+ <button class="admin-tab px-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-700">
892
+ Pickup Requests
893
+ </button>
894
+ <button class="admin-tab px-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-700">
895
+ Customers
896
+ </button>
897
+ <button class="admin-tab px-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-700">
898
+ Content
899
+ </button>
900
+ <button class="admin-tab px-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-700">
901
+ Settings
902
+ </button>
903
+ </div>
904
+ </div>
905
+
906
+ <!-- Shipments Tab Content -->
907
+ <div id="shipmentsTab" class="admin-tab-content">
908
+ <div class="flex justify-between items-center mb-6">
909
+ <h3 class="text-lg font-medium text-gray-900">Manage Shipments</h3>
910
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
911
+ <i class="fas fa-plus mr-2"></i> New Shipment
912
+ </button>
913
+ </div>
914
+
915
+ <!-- Search and Filters -->
916
+ <div class="mb-6">
917
+ <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
918
+ <div class="flex-1">
919
+ <div class="relative">
920
+ <input type="text" placeholder="Search shipments..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
921
+ <div class="absolute left-3 top-2.5 text-gray-400">
922
+ <i class="fas fa-search"></i>
923
+ </div>
924
+ </div>
925
+ </div>
926
+ <div class="flex space-x-4">
927
+ <select class="border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
928
+ <option>All Status</option>
929
+ <option>Pending</option>
930
+ <option>Picked Up</option>
931
+ <option>In Transit</option>
932
+ <option>Out for Delivery</option>
933
+ <option>Delivered</option>
934
+ <option>Failed</option>
935
+ </select>
936
+ <select class="border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
937
+ <option>Today</option>
938
+ <option>Last 7 Days</option>
939
+ <option>This Month</option>
940
+ <option>Custom Range</option>
941
+ </select>
942
+ </div>
943
+ </div>
944
+ </div>
945
+
946
+ <!-- Shipments Table -->
947
+ <div class="overflow-x-auto">
948
+ <table class="min-w-full divide-y divide-gray-200">
949
+ <thead class="bg-gray-50">
950
+ <tr>
951
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
952
+ Tracking #
953
+ </th>
954
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
955
+ Sender
956
+ </th>
957
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
958
+ Recipient
959
+ </th>
960
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
961
+ Status
962
+ </th>
963
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
964
+ Created
965
+ </th>
966
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
967
+ Actions
968
+ </th>
969
+ </tr>
970
+ </thead>
971
+ <tbody class="bg-white divide-y divide-gray-200">
972
+ <tr>
973
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">
974
+ GS987654321
975
+ </td>
976
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
977
+ Tech Solutions Inc.
978
+ </td>
979
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
980
+ Global Enterprises
981
+ </td>
982
+ <td class="px-6 py-4 whitespace-nowrap">
983
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
984
+ Delivered
985
+ </span>
986
+ </td>
987
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
988
+ Jun 14, 2023
989
+ </td>
990
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
991
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
992
+ <a href="#" class="text-gray-600 hover:text-gray-900">Print</a>
993
+ </td>
994
+ </tr>
995
+ <tr>
996
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">
997
+ GS123456789
998
+ </td>
999
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1000
+ Sarah Johnson
1001
+ </td>
1002
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1003
+ Michael Brown
1004
+ </td>
1005
+ <td class="px-6 py-4 whitespace-nowrap">
1006
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
1007
+ In Transit
1008
+ </span>
1009
+ </td>
1010
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1011
+ Jun 15, 2023
1012
+ </td>
1013
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
1014
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
1015
+ <a href="#" class="text-gray-600 hover:text-gray-900">Update</a>
1016
+ </td>
1017
+ </tr>
1018
+ <tr>
1019
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">
1020
+ GS456789123
1021
+ </td>
1022
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1023
+ Fresh Foods Co.
1024
+ </td>
1025
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1026
+ Downtown Market
1027
+ </td>
1028
+ <td class="px-6 py-4 whitespace-nowrap">
1029
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
1030
+ Out for Delivery
1031
+ </span>
1032
+ </td>
1033
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1034
+ Jun 16, 2023
1035
+ </td>
1036
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
1037
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
1038
+ <a href="#" class="text-gray-600 hover:text-gray-900">Update</a>
1039
+ </td>
1040
+ </tr>
1041
+ <tr>
1042
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">
1043
+ GS789123456
1044
+ </td>
1045
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1046
+ Jewelry Designs
1047
+ </td>
1048
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1049
+ Luxury Retail Inc.
1050
+ </td>
1051
+ <td class="px-6 py-4 whitespace-nowrap">
1052
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
1053
+ Failed Delivery
1054
+ </span>
1055
+ </td>
1056
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1057
+ Jun 16, 2023
1058
+ </td>
1059
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
1060
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
1061
+ <a href="#" class="text-gray-600 hover:text-gray-900">Reschedule</a>
1062
+ </td>
1063
+ </tr>
1064
+ <tr>
1065
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">
1066
+ GS321654987
1067
+ </td>
1068
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1069
+ Medical Supplies Ltd.
1070
+ </td>
1071
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1072
+ City Hospital
1073
+ </td>
1074
+ <td class="px-6 py-4 whitespace-nowrap">
1075
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
1076
+ Scheduled
1077
+ </span>
1078
+ </td>
1079
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1080
+ Jun 17, 2023
1081
+ </td>
1082
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
1083
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
1084
+ <a href="#" class="text-gray-600 hover:text-gray-900">Cancel</a>
1085
+ </td>
1086
+ </tr>
1087
+ </tbody>
1088
+ </table>
1089
+ </div>
1090
+
1091
+ <!-- Pagination -->
1092
+ <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 mt-6">
1093
+ <div class="flex-1 flex justify-between sm:hidden">
1094
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
1095
+ Previous
1096
+ </a>
1097
+ <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
1098
+ Next
1099
+ </a>
1100
+ </div>
1101
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
1102
+ <div>
1103
+ <p class="text-sm text-gray-700">
1104
+ Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> results
1105
+ </p>
1106
+ </div>
1107
+ <div>
1108
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
1109
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
1110
+ <span class="sr-only">Previous</span>
1111
+ <i class="fas fa-chevron-left"></i>
1112
+ </a>
1113
+ <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
1114
+ 1
1115
+ </a>
1116
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
1117
+ 2
1118
+ </a>
1119
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
1120
+ 3
1121
+ </a>
1122
+ <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
1123
+ ...
1124
+ </span>
1125
+ <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
1126
+ 8
1127
+ </a>
1128
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
1129
+ <span class="sr-only">Next</span>
1130
+ <i class="fas fa-chevron-right"></i>
1131
+ </a>
1132
+ </nav>
1133
+ </div>
1134
+ </div>
1135
+ </div>
1136
+ </div>
1137
+
1138
+ <!-- New Shipment Form (Hidden by default) -->
1139
+ <div id="newShipmentForm" class="hidden bg-gray-50 p-6 rounded-lg mt-6">
1140
+ <h3 class="text-lg font-medium text-gray-900 mb-6">Create New Shipment</h3>
1141
+
1142
+ <form>
1143
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1144
+ <!-- Sender Information -->
1145
+ <div class="bg-white p-4 rounded-lg shadow-sm">
1146
+ <h4 class="font-medium text-gray-700 mb-4">Sender Information</h4>
1147
+
1148
+ <div class="mb-4">
1149
+ <label for="senderNameAdmin" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
1150
+ <input type="text" id="senderNameAdmin" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="John Smith">
1151
+ </div>
1152
+
1153
+ <div class="mb-4">
1154
+ <label for="senderCompany" class="block text-sm font-medium text-gray-700 mb-1">Company (Optional)</label>
1155
+ <input type="text" id="senderCompany" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="ABC Corporation">
1156
+ </div>
1157
+
1158
+ <div class="mb-4">
1159
+ <label for="senderPhoneAdmin" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
1160
+ <input type="tel" id="senderPhoneAdmin" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="(555) 123-4567">
1161
+ </div>
1162
+
1163
+ <div class="mb-4">
1164
+ <label for="senderEmail" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
1165
+ <input type="email" id="senderEmail" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="john@example.com">
1166
+ </div>
1167
+
1168
+ <div>
1169
+ <label for="senderAddressAdmin" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
1170
+ <textarea id="senderAddressAdmin" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="123 Business Ave, Suite 45"></textarea>
1171
+ </div>
1172
+ </div>
1173
+
1174
+ <!-- Recipient Information -->
1175
+ <div class="bg-white p-4 rounded-lg shadow-sm">
1176
+ <h4 class="font-medium text-gray-700 mb-4">Recipient Information</h4>
1177
+
1178
+ <div class="mb-4">
1179
+ <label for="recipientName" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
1180
+ <input type="text" id="recipientName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="Sarah Johnson">
1181
+ </div>
1182
+
1183
+ <div class="mb-4">
1184
+ <label for="recipientCompany" class="block text-sm font-medium text-gray-700 mb-1">Company (Optional)</label>
1185
+ <input type="text" id="recipientCompany" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="XYZ Enterprises">
1186
+ </div>
1187
+
1188
+ <div class="mb-4">
1189
+ <label for="recipientPhone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
1190
+ <input type="tel" id="recipientPhone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="(555) 987-6543">
1191
+ </div>
1192
+
1193
+ <div class="mb-4">
1194
+ <label for="recipientEmail" class="block text-sm font-medium text-gray-700 mb-1">Email (Optional)</label>
1195
+ <input type="email" id="recipientEmail" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="sarah@example.com">
1196
+ </div>
1197
+
1198
+ <div>
1199
+ <label for="recipientAddress" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
1200
+ <textarea id="recipientAddress" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="456 Commerce St, Apt 3B"></textarea>
1201
+ </div>
1202
+ </div>
1203
+
1204
+ <!-- Package Details -->
1205
+ <div class="bg-white p-4 rounded-lg shadow-sm md:col-span-2">
1206
+ <h4 class="font-medium text-gray-700 mb-4">Package Details</h4>
1207
+
1208
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
1209
+ <div>
1210
+ <label for="packageType" class="block text-sm font-medium text-gray-700 mb-1">Type</label>
1211
+ <select id="packageType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
1212
+ <option>Document</option>
1213
+ <option>Parcel</option>
1214
+ <option>Pallet</option>
1215
+ <option>Envelope</option>
1216
+ <option>Tube</option>
1217
+ </select>
1218
+ </div>
1219
+
1220
+ <div>
1221
+ <label for="packageWeight" class="block text-sm font-medium text-gray-700 mb-1">Weight (kg)</label>
1222
+ <input type="number" id="packageWeight" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="2.5">
1223
+ </div>
1224
+
1225
+ <div>
1226
+ <label for="packageLength" class="block text-sm font-medium text-gray-700 mb-1">Length (cm)</label>
1227
+ <input type="number" id="packageLength" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="30">
1228
+ </div>
1229
+
1230
+ <div>
1231
+ <label for="packageWidth" class="block text-sm font-medium text-gray-700 mb-1">Width (cm)</label>
1232
+ <input type="number" id="packageWidth" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="20">
1233
+ </div>
1234
+ </div>
1235
+
1236
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
1237
+ <div>
1238
+ <label for="packageHeight" class="block text-sm font-medium text-gray-700 mb-1">Height (cm)</label>
1239
+ <
1240
+ </html>