Hugging Face's logo

Spaces:
aniket2025
/
website-designer
Running

App Files Community
aniket2025 commited on
Commit
adac4ae
·
verified ·
1 Parent(s): ddb779f

Redesign a modern, professional homepage for the West Bengal Food & Supplies Department portal. Scene 1 – Hero Banner: full-width hero showing happy family receiving PDS supplies or a grain silo backdrop, overlaid with a glassmorphic semi-transparent navigation bar featuring “Home, Ration Card, Apply, Track, FPS Locator, Contact Us”. Include a prominent search bar (“Enter Ration Card Number to check status”) with subtle animation on focus and a polite call-to-action button “Check Now.” Scene 2 – Ration Card Dashboard: clean interactive cards showing “Apply New Card”, “Correction Form”, “Download e-Ration Card”, each with icon, colored banner, hover animation revealing secondary info. Cards slide in from sides. Scene 3 – Apply/Correction Process Flow: a stepped progress UI timeline illustrating Form-5 correction: “Upload docs → OTP verification → Submit → Track status” with animated arrows, numbers, and clean font. Scene 4 – FPS Locator Map: split-section with left showing map pins dropping onto a West Bengal map and right listing nearest Fair Price Shops; map zooms and list highlights sync with hover. Scene 5 – Real-time Stats & Announcements Banner: horizontal ticker showing stats (“5 million+ beneficiaries”, “10,000+ FPS across WB”) plus latest announcements table (“Transport Allowance, Record Date…”). Scene 6 – Resources Section: grid of downloadable links—PDF guides (“How to Apply”, “Eligibility” etc.) with clean card icons and one-click download button on hover. Scene 7 – Help & Support: accordion panels for FAQ, hotline number, WhatsApp, grievance link; sections animate expand/collapse with smooth transitions. Scene 8 – Footer & Mobile: glassmorphic footer with official badges (WBGov, NIC), language toggle (English/Bengali), policy links; mobile bottom sticky nav with icons for “Home, Apply, Track, FPS Map, Support.” Use a trust-inspiring color palette: WBGov green, white background, soft blues for accents. Typography: modern sans-serif, high contrast, clear readability. UI elements with glassmorphism, soft drop shadows, micro-interactions, and responsive layout across desktop and mobile. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +885 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Website Designer
3
- emoji: 🐠
4
- colorFrom: gray
5
- colorTo: indigo
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: website-designer
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,885 @@
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>West Bengal Food & Supplies Department</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ wbgreen: '#1A5F1E',
15
+ wbblue: '#1E3A8A',
16
+ wblight: '#EFF6FF',
17
+ },
18
+ fontFamily: {
19
+ sans: ['Inter', 'sans-serif'],
20
+ },
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
27
+
28
+ body {
29
+ font-family: 'Inter', sans-serif;
30
+ scroll-behavior: smooth;
31
+ }
32
+
33
+ .glass-nav {
34
+ background: rgba(255, 255, 255, 0.8);
35
+ backdrop-filter: blur(10px);
36
+ -webkit-backdrop-filter: blur(10px);
37
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
38
+ }
39
+
40
+ .hero-bg {
41
+ background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
42
+ background-size: cover;
43
+ background-position: center;
44
+ }
45
+
46
+ .search-bar {
47
+ transition: all 0.3s ease;
48
+ }
49
+
50
+ .search-bar:focus {
51
+ box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.2);
52
+ }
53
+
54
+ .card-hover:hover {
55
+ transform: translateY(-5px);
56
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
57
+ }
58
+
59
+ .slide-in-left {
60
+ animation: slideInLeft 0.8s ease forwards;
61
+ }
62
+
63
+ .slide-in-right {
64
+ animation: slideInRight 0.8s ease forwards;
65
+ }
66
+
67
+ @keyframes slideInLeft {
68
+ from { transform: translateX(-100px); opacity: 0; }
69
+ to { transform: translateX(0); opacity: 1; }
70
+ }
71
+
72
+ @keyframes slideInRight {
73
+ from { transform: translateX(100px); opacity: 0; }
74
+ to { transform: translateX(0); opacity: 1; }
75
+ }
76
+
77
+ .progress-step {
78
+ position: relative;
79
+ }
80
+
81
+ .progress-step:not(:last-child):after {
82
+ content: '';
83
+ position: absolute;
84
+ top: 50%;
85
+ right: -50px;
86
+ width: 40px;
87
+ height: 2px;
88
+ background: #1A5F1E;
89
+ transform: translateY(-50%);
90
+ }
91
+
92
+ .progress-step.active {
93
+ background-color: #1A5F1E;
94
+ color: white;
95
+ }
96
+
97
+ .progress-step.completed {
98
+ background-color: #1A5F1E;
99
+ color: white;
100
+ }
101
+
102
+ .accordion-content {
103
+ max-height: 0;
104
+ overflow: hidden;
105
+ transition: max-height 0.3s ease;
106
+ }
107
+
108
+ .accordion-content.show {
109
+ max-height: 500px;
110
+ }
111
+
112
+ .footer-glass {
113
+ background: rgba(255, 255, 255, 0.9);
114
+ backdrop-filter: blur(10px);
115
+ -webkit-backdrop-filter: blur(10px);
116
+ }
117
+
118
+ .mobile-nav {
119
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
120
+ }
121
+
122
+ .ticker {
123
+ animation: ticker 20s linear infinite;
124
+ }
125
+
126
+ @keyframes ticker {
127
+ 0% { transform: translateX(100%); }
128
+ 100% { transform: translateX(-100%); }
129
+ }
130
+
131
+ .map-pin {
132
+ animation: dropPin 0.8s ease forwards;
133
+ opacity: 0;
134
+ }
135
+
136
+ @keyframes dropPin {
137
+ 0% { transform: translateY(-50px); opacity: 0; }
138
+ 100% { transform: translateY(0); opacity: 1; }
139
+ }
140
+
141
+ .delay-1 { animation-delay: 0.2s; }
142
+ .delay-2 { animation-delay: 0.4s; }
143
+ .delay-3 { animation-delay: 0.6s; }
144
+ .delay-4 { animation-delay: 0.8s; }
145
+ .delay-5 { animation-delay: 1s; }
146
+ </style>
147
+ </head>
148
+ <body class="bg-gray-50">
149
+ <!-- Navigation -->
150
+ <nav class="glass-nav fixed w-full z-50">
151
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
152
+ <div class="flex justify-between h-16 items-center">
153
+ <div class="flex-shrink-0 flex items-center">
154
+ <img class="h-10" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9c/Government_of_West_Bengal_Logo.svg/1200px-Government_of_West_Bengal_Logo.svg.png" alt="West Bengal Government Logo">
155
+ <span class="ml-2 text-xl font-bold text-wbgreen">Food & Supplies Department</span>
156
+ </div>
157
+ <div class="hidden md:block">
158
+ <div class="ml-10 flex items-center space-x-4">
159
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-wbgreen hover:bg-wblight">Home</a>
160
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-wblight">Ration Card</a>
161
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-wblight">Apply</a>
162
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-wblight">Track</a>
163
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-wblight">FPS Locator</a>
164
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-wblight">Contact Us</a>
165
+ <button class="ml-4 px-4 py-2 bg-wbgreen text-white text-sm font-medium rounded-md hover:bg-green-800">Login</button>
166
+ </div>
167
+ </div>
168
+ <div class="-mr-2 flex md:hidden">
169
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-wbgreen" aria-controls="mobile-menu" aria-expanded="false">
170
+ <span class="sr-only">Open main menu</span>
171
+ <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
172
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
173
+ </svg>
174
+ </button>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </nav>
179
+
180
+ <!-- Hero Banner -->
181
+ <section class="hero-bg pt-24 pb-32 md:pb-48 text-white">
182
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
183
+ <div class="md:text-center">
184
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">West Bengal Public Distribution System</h1>
185
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10">Ensuring food security for every citizen through transparent and efficient ration distribution</p>
186
+
187
+ <div class="max-w-xl mx-auto bg-white rounded-lg p-1 shadow-lg">
188
+ <div class="flex">
189
+ <input type="text" placeholder="Enter Ration Card Number to check status" class="search-bar flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800">
190
+ <button class="bg-wbgreen hover:bg-green-800 text-white px-6 py-3 rounded-r-lg font-medium transition duration-300">Check Now</button>
191
+ </div>
192
+ </div>
193
+
194
+ <div class="mt-8 flex flex-wrap justify-center gap-4">
195
+ <div class="flex items-center">
196
+ <div class="bg-wbgreen rounded-full p-2 mr-2">
197
+ <i class="fas fa-check text-white"></i>
198
+ </div>
199
+ <span>5M+ Beneficiaries</span>
200
+ </div>
201
+ <div class="flex items-center">
202
+ <div class="bg-wbgreen rounded-full p-2 mr-2">
203
+ <i class="fas fa-store text-white"></i>
204
+ </div>
205
+ <span>10,000+ FPS Shops</span>
206
+ </div>
207
+ <div class="flex items-center">
208
+ <div class="bg-wbgreen rounded-full p-2 mr-2">
209
+ <i class="fas fa-rupee-sign text-white"></i>
210
+ </div>
211
+ <span>Subsidized Rates</span>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </section>
217
+
218
+ <!-- Ration Card Dashboard -->
219
+ <section class="py-16 bg-white">
220
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
221
+ <h2 class="text-3xl font-bold text-center text-wbgreen mb-12">Ration Card Services</h2>
222
+
223
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
224
+ <!-- Card 1 -->
225
+ <div class="slide-in-left bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
226
+ <div class="bg-blue-600 p-4">
227
+ <div class="flex items-center">
228
+ <div class="bg-white p-3 rounded-full">
229
+ <i class="fas fa-file-alt text-blue-600 text-xl"></i>
230
+ </div>
231
+ <h3 class="ml-4 text-white font-semibold text-lg">Apply New Card</h3>
232
+ </div>
233
+ </div>
234
+ <div class="p-6">
235
+ <p class="text-gray-600 mb-4">Apply for a new ration card to avail subsidized food grains and essential commodities.</p>
236
+ <div class="hidden group-hover:block">
237
+ <ul class="text-sm text-gray-500 space-y-2">
238
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Online application process</li>
239
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Document verification</li>
240
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Digital ration card</li>
241
+ </ul>
242
+ </div>
243
+ <button class="mt-4 w-full bg-wbblue text-white py-2 rounded-md hover:bg-blue-800 transition duration-300">Apply Now</button>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Card 2 -->
248
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
249
+ <div class="bg-green-600 p-4">
250
+ <div class="flex items-center">
251
+ <div class="bg-white p-3 rounded-full">
252
+ <i class="fas fa-edit text-green-600 text-xl"></i>
253
+ </div>
254
+ <h3 class="ml-4 text-white font-semibold text-lg">Correction Form</h3>
255
+ </div>
256
+ </div>
257
+ <div class="p-6">
258
+ <p class="text-gray-600 mb-4">Request corrections to your existing ration card details like name, address or family members.</p>
259
+ <div class="hidden group-hover:block">
260
+ <ul class="text-sm text-gray-500 space-y-2">
261
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Form-5 submission</li>
262
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Document upload</li>
263
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Status tracking</li>
264
+ </ul>
265
+ </div>
266
+ <button class="mt-4 w-full bg-wbgreen text-white py-2 rounded-md hover:bg-green-800 transition duration-300">Request Correction</button>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Card 3 -->
271
+ <div class="slide-in-right bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
272
+ <div class="bg-purple-600 p-4">
273
+ <div class="flex items-center">
274
+ <div class="bg-white p-3 rounded-full">
275
+ <i class="fas fa-download text-purple-600 text-xl"></i>
276
+ </div>
277
+ <h3 class="ml-4 text-white font-semibold text-lg">Download e-Ration Card</h3>
278
+ </div>
279
+ </div>
280
+ <div class="p-6">
281
+ <p class="text-gray-600 mb-4">Download your digital ration card for easy access and verification at Fair Price Shops.</p>
282
+ <div class="hidden group-hover:block">
283
+ <ul class="text-sm text-gray-500 space-y-2">
284
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Secure PDF download</li>
285
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> QR code verification</li>
286
+ <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Mobile-friendly</li>
287
+ </ul>
288
+ </div>
289
+ <button class="mt-4 w-full bg-purple-700 text-white py-2 rounded-md hover:bg-purple-800 transition duration-300">Download Now</button>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </section>
295
+
296
+ <!-- Apply/Correction Process Flow -->
297
+ <section class="py-16 bg-gray-50">
298
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
299
+ <h2 class="text-3xl font-bold text-center text-wbgreen mb-12">Form-5 Correction Process</h2>
300
+
301
+ <div class="flex justify-between items-center mb-12">
302
+ <div class="progress-step w-16 h-16 rounded-full bg-white border-2 border-wbgreen flex items-center justify-center font-bold text-wbgreen active">
303
+ 1
304
+ </div>
305
+ <div class="progress-step w-16 h-16 rounded-full bg-white border-2 border-wbgreen flex items-center justify-center font-bold text-wbgreen">
306
+ 2
307
+ </div>
308
+ <div class="progress-step w-16 h-16 rounded-full bg-white border-2 border-wbgreen flex items-center justify-center font-bold text-wbgreen">
309
+ 3
310
+ </div>
311
+ <div class="progress-step w-16 h-16 rounded-full bg-white border-2 border-wbgreen flex items-center justify-center font-bold text-wbgreen">
312
+ 4
313
+ </div>
314
+ </div>
315
+
316
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
317
+ <div class="text-center">
318
+ <div class="bg-white p-6 rounded-lg shadow-sm h-full">
319
+ <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
320
+ <i class="fas fa-upload text-blue-600 text-2xl"></i>
321
+ </div>
322
+ <h3 class="font-semibold text-lg mb-2">Upload Documents</h3>
323
+ <p class="text-gray-600">Upload required documents like Aadhaar, address proof and existing ration card</p>
324
+ </div>
325
+ </div>
326
+
327
+ <div class="text-center">
328
+ <div class="bg-white p-6 rounded-lg shadow-sm h-full">
329
+ <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
330
+ <i class="fas fa-mobile-alt text-green-600 text-2xl"></i>
331
+ </div>
332
+ <h3 class="font-semibold text-lg mb-2">OTP Verification</h3>
333
+ <p class="text-gray-600">Verify your mobile number through OTP for secure authentication</p>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="text-center">
338
+ <div class="bg-white p-6 rounded-lg shadow-sm h-full">
339
+ <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
340
+ <i class="fas fa-paper-plane text-purple-600 text-2xl"></i>
341
+ </div>
342
+ <h3 class="font-semibold text-lg mb-2">Submit Application</h3>
343
+ <p class="text-gray-600">Review and submit your correction application for processing</p>
344
+ </div>
345
+ </div>
346
+
347
+ <div class="text-center">
348
+ <div class="bg-white p-6 rounded-lg shadow-sm h-full">
349
+ <div class="bg-yellow-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
350
+ <i class="fas fa-search text-yellow-600 text-2xl"></i>
351
+ </div>
352
+ <h3 class="font-semibold text-lg mb-2">Track Status</h3>
353
+ <p class="text-gray-600">Track your application status online and receive SMS updates</p>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="mt-12 text-center">
359
+ <button class="bg-wbgreen hover:bg-green-800 text-white px-8 py-3 rounded-lg font-medium transition duration-300">
360
+ Start Correction Process <i class="fas fa-arrow-right ml-2"></i>
361
+ </button>
362
+ </div>
363
+ </div>
364
+ </section>
365
+
366
+ <!-- FPS Locator Map -->
367
+ <section class="py-16 bg-white">
368
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
369
+ <h2 class="text-3xl font-bold text-center text-wbgreen mb-12">Fair Price Shop Locator</h2>
370
+
371
+ <div class="flex flex-col lg:flex-row gap-8">
372
+ <div class="lg:w-1/2 bg-gray-100 rounded-xl p-6">
373
+ <div class="relative h-full min-h-[400px]">
374
+ <!-- Map placeholder with animated pins -->
375
+ <div class="absolute inset-0 bg-blue-50 rounded-lg flex items-center justify-center">
376
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/West_Bengal_district_map.svg/1200px-West_Bengal_district_map.svg.png" alt="West Bengal Map" class="h-full w-full object-contain">
377
+
378
+ <!-- Animated map pins -->
379
+ <div class="absolute top-1/4 left-1/4 map-pin delay-1">
380
+ <div class="bg-red-500 text-white p-2 rounded-full relative">
381
+ <i class="fas fa-map-marker-alt"></i>
382
+ <div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-red-500"></div>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="absolute top-1/3 right-1/3 map-pin delay-2">
387
+ <div class="bg-red-500 text-white p-2 rounded-full relative">
388
+ <i class="fas fa-map-marker-alt"></i>
389
+ <div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-red-500"></div>
390
+ </div>
391
+ </div>
392
+
393
+ <div class="absolute bottom-1/4 left-1/3 map-pin delay-3">
394
+ <div class="bg-red-500 text-white p-2 rounded-full relative">
395
+ <i class="fas fa-map-marker-alt"></i>
396
+ <div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-red-500"></div>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="absolute top-1/2 right-1/4 map-pin delay-4">
401
+ <div class="bg-red-500 text-white p-2 rounded-full relative">
402
+ <i class="fas fa-map-marker-alt"></i>
403
+ <div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-red-500"></div>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="absolute bottom-1/3 left-1/2 map-pin delay-5">
408
+ <div class="bg-red-500 text-white p-2 rounded-full relative">
409
+ <i class="fas fa-map-marker-alt"></i>
410
+ <div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-red-500"></div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </div>
416
+
417
+ <div class="lg:w-1/2">
418
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm">
419
+ <div class="flex items-center mb-6">
420
+ <div class="bg-wbgreen p-3 rounded-full text-white mr-4">
421
+ <i class="fas fa-location-arrow"></i>
422
+ </div>
423
+ <div class="flex-grow">
424
+ <input type="text" placeholder="Enter your location or PIN code" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-wbgreen">
425
+ </div>
426
+ <button class="ml-2 bg-wbgreen text-white px-4 py-2 rounded-lg hover:bg-green-800">
427
+ <i class="fas fa-search"></i>
428
+ </button>
429
+ </div>
430
+
431
+ <div class="space-y-4 max-h-96 overflow-y-auto">
432
+ <!-- FPS List Item -->
433
+ <div class="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 cursor-pointer transition duration-200">
434
+ <div class="flex items-start">
435
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
436
+ <i class="fas fa-store text-blue-600"></i>
437
+ </div>
438
+ <div>
439
+ <h3 class="font-semibold">FPS Shop #1245</h3>
440
+ <p class="text-sm text-gray-600">123, MG Road, Kolkata - 700001</p>
441
+ <div class="flex items-center mt-2 text-sm">
442
+ <span class="text-yellow-500 mr-2"><i class="fas fa-star"></i> 4.2</span>
443
+ <span class="text-gray-500"><i class="fas fa-phone-alt mr-1"></i> 9876543210</span>
444
+ </div>
445
+ </div>
446
+ <div class="ml-auto text-sm text-wbgreen font-medium">0.5 km</div>
447
+ </div>
448
+ </div>
449
+
450
+ <!-- FPS List Item -->
451
+ <div class="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 cursor-pointer transition duration-200">
452
+ <div class="flex items-start">
453
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
454
+ <i class="fas fa-store text-blue-600"></i>
455
+ </div>
456
+ <div>
457
+ <h3 class="font-semibold">FPS Shop #9876</h3>
458
+ <p class="text-sm text-gray-600">456, Park Street, Kolkata - 700017</p>
459
+ <div class="flex items-center mt-2 text-sm">
460
+ <span class="text-yellow-500 mr-2"><i class="fas fa-star"></i> 4.5</span>
461
+ <span class="text-gray-500"><i class="fas fa-phone-alt mr-1"></i> 9876543211</span>
462
+ </div>
463
+ </div>
464
+ <div class="ml-auto text-sm text-wbgreen font-medium">1.2 km</div>
465
+ </div>
466
+ </div>
467
+
468
+ <!-- FPS List Item -->
469
+ <div class="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 cursor-pointer transition duration-200">
470
+ <div class="flex items-start">
471
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
472
+ <i class="fas fa-store text-blue-600"></i>
473
+ </div>
474
+ <div>
475
+ <h3 class="font-semibold">FPS Shop #3421</h3>
476
+ <p class="text-sm text-gray-600">789, Ballygunge, Kolkata - 700019</p>
477
+ <div class="flex items-center mt-2 text-sm">
478
+ <span class="text-yellow-500 mr-2"><i class="fas fa-star"></i> 4.0</span>
479
+ <span class="text-gray-500"><i class="fas fa-phone-alt mr-1"></i> 9876543212</span>
480
+ </div>
481
+ </div>
482
+ <div class="ml-auto text-sm text-wbgreen font-medium">2.5 km</div>
483
+ </div>
484
+ </div>
485
+
486
+ <!-- FPS List Item -->
487
+ <div class="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 cursor-pointer transition duration-200">
488
+ <div class="flex items-start">
489
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
490
+ <i class="fas fa-store text-blue-600"></i>
491
+ </div>
492
+ <div>
493
+ <h3 class="font-semibold">FPS Shop #5678</h3>
494
+ <p class="text-sm text-gray-600">321, Salt Lake, Kolkata - 700091</p>
495
+ <div class="flex items-center mt-2 text-sm">
496
+ <span class="text-yellow-500 mr-2"><i class="fas fa-star"></i> 4.3</span>
497
+ <span class="text-gray-500"><i class="fas fa-phone-alt mr-1"></i> 9876543213</span>
498
+ </div>
499
+ </div>
500
+ <div class="ml-auto text-sm text-wbgreen font-medium">3.8 km</div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </section>
509
+
510
+ <!-- Real-time Stats & Announcements Banner -->
511
+ <section class="py-12 bg-wbgreen text-white">
512
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
513
+ <div class="bg-white bg-opacity-20 rounded-xl p-6">
514
+ <div class="flex flex-col md:flex-row items-center justify-between">
515
+ <div class="w-full md:w-1/2 mb-6 md:mb-0">
516
+ <div class="flex overflow-hidden">
517
+ <div class="ticker whitespace-nowrap">
518
+ <span class="mx-8"><i class="fas fa-users mr-2"></i> 5 Million+ Beneficiaries</span>
519
+ <span class="mx-8"><i class="fas fa-store mr-2"></i> 10,000+ FPS Across WB</span>
520
+ <span class="mx-8"><i class="fas fa-wheat mr-2"></i> 1.2 Million MT Rice Distributed</span>
521
+ <span class="mx-8"><i class="fas fa-rupee-sign mr-2"></i> ₹2,500 Crore Subsidy Provided</span>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ <div class="w-full md:w-1/2">
526
+ <button class="w-full md:w-auto bg-white text-wbgreen px-6 py-2 rounded-lg font-medium hover:bg-gray-100 transition duration-300">
527
+ <i class="fas fa-bullhorn mr-2"></i> View All Announcements
528
+ </button>
529
+ </div>
530
+ </div>
531
+ </div>
532
+
533
+ <div class="mt-8 bg-white rounded-lg shadow-md overflow-hidden">
534
+ <table class="min-w-full divide-y divide-gray-200">
535
+ <thead class="bg-gray-50">
536
+ <tr>
537
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
538
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Announcement</th>
539
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
540
+ </tr>
541
+ </thead>
542
+ <tbody class="bg-white divide-y divide-gray-200">
543
+ <tr class="hover:bg-gray-50">
544
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">15/06/2023</td>
545
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Transport Allowance</td>
546
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Increased by 10% for FPS dealers</td>
547
+ </tr>
548
+ <tr class="hover:bg-gray-50">
549
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">10/06/2023</td>
550
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Record Date</td>
551
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">For new ration card applications</td>
552
+ </tr>
553
+ <tr class="hover:bg-gray-50">
554
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">05/06/2023</td>
555
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Wheat Distribution</td>
556
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Additional 2kg per beneficiary</td>
557
+ </tr>
558
+ <tr class="hover:bg-gray-50">
559
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">01/06/2023</td>
560
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">e-Ration Card</td>
561
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Now available for all districts</td>
562
+ </tr>
563
+ </tbody>
564
+ </table>
565
+ </div>
566
+ </div>
567
+ </section>
568
+
569
+ <!-- Resources Section -->
570
+ <section class="py-16 bg-gray-50">
571
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
572
+ <h2 class="text-3xl font-bold text-center text-wbgreen mb-12">Resources & Guides</h2>
573
+
574
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
575
+ <!-- Resource Card 1 -->
576
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-300">
577
+ <div class="bg-blue-600 p-4 text-center">
578
+ <i class="fas fa-file-pdf text-white text-4xl"></i>
579
+ </div>
580
+ <div class="p-6">
581
+ <h3 class="font-semibold text-lg mb-2">How to Apply</h3>
582
+ <p class="text-gray-600 text-sm mb-4">Step-by-step guide for new ration card application process</p>
583
+ <button class="w-full bg-blue-100 text-blue-700 py-2 rounded-md hover:bg-blue-200 transition duration-300 flex items-center justify-center">
584
+ <i class="fas fa-download mr-2"></i> Download PDF
585
+ </button>
586
+ </div>
587
+ </div>
588
+
589
+ <!-- Resource Card 2 -->
590
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-300">
591
+ <div class="bg-green-600 p-4 text-center">
592
+ <i class="fas fa-question-circle text-white text-4xl"></i>
593
+ </div>
594
+ <div class="p-6">
595
+ <h3 class="font-semibold text-lg mb-2">Eligibility Criteria</h3>
596
+ <p class="text-gray-600 text-sm mb-4">Detailed eligibility requirements for different card types</p>
597
+ <button class="w-full bg-green-100 text-green-700 py-2 rounded-md hover:bg-green-200 transition duration-300 flex items-center justify-center">
598
+ <i class="fas fa-download mr-2"></i> Download PDF
599
+ </button>
600
+ </div>
601
+ </div>
602
+
603
+ <!-- Resource Card 3 -->
604
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-300">
605
+ <div class="bg-purple-600 p-4 text-center">
606
+ <i class="fas fa-list-alt text-white text-4xl"></i>
607
+ </div>
608
+ <div class="p-6">
609
+ <h3 class="font-semibold text-lg mb-2">Required Documents</h3>
610
+ <p class="text-gray-600 text-sm mb-4">Complete checklist of documents needed for application</p>
611
+ <button class="w-full bg-purple-100 text-purple-700 py-2 rounded-md hover:bg-purple-200 transition duration-300 flex items-center justify-center">
612
+ <i class="fas fa-download mr-2"></i> Download PDF
613
+ </button>
614
+ </div>
615
+ </div>
616
+
617
+ <!-- Resource Card 4 -->
618
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-300">
619
+ <div class="bg-yellow-600 p-4 text-center">
620
+ <i class="fas fa-comments text-white text-4xl"></i>
621
+ </div>
622
+ <div class="p-6">
623
+ <h3 class="font-semibold text-lg mb-2">Grievance Redressal</h3>
624
+ <p class="text-gray-600 text-sm mb-4">Process for reporting issues and filing complaints</p>
625
+ <button class="w-full bg-yellow-100 text-yellow-700 py-2 rounded-md hover:bg-yellow-200 transition duration-300 flex items-center justify-center">
626
+ <i class="fas fa-download mr-2"></i> Download PDF
627
+ </button>
628
+ </div>
629
+ </div>
630
+ </div>
631
+ </div>
632
+ </section>
633
+
634
+ <!-- Help & Support -->
635
+ <section class="py-16 bg-white">
636
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
637
+ <h2 class="text-3xl font-bold text-center text-wbgreen mb-12">Help & Support</h2>
638
+
639
+ <div class="max-w-4xl mx-auto">
640
+ <!-- FAQ Accordion -->
641
+ <div class="mb-8">
642
+ <h3 class="text-xl font-semibold mb-4 text-wbgreen">Frequently Asked Questions</h3>
643
+
644
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
645
+ <!-- FAQ Item 1 -->
646
+ <div class="border-b border-gray-200">
647
+ <button class="faq-toggle w-full text-left p-4 hover:bg-gray-50 focus:outline-none">
648
+ <div class="flex items-center justify-between">
649
+ <span class="font-medium">How can I apply for a new ration card?</span>
650
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
651
+ </div>
652
+ </button>
653
+ <div class="accordion-content">
654
+ <div class="p-4 pt-0 text-gray-600">
655
+ You can apply for a new ration card through our online portal. Visit the "Apply New Card" section, fill in the required details, upload necessary documents, and submit the application. You'll receive an application number for tracking.
656
+ </div>
657
+ </div>
658
+ </div>
659
+
660
+ <!-- FAQ Item 2 -->
661
+ <div class="border-b border-gray-200">
662
+ <button class="faq-toggle w-full text-left p-4 hover:bg-gray-50 focus:outline-none">
663
+ <div class="flex items-center justify-between">
664
+ <span class="font-medium">What documents are required for ration card correction?</span>
665
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
666
+ </div>
667
+ </button>
668
+ <div class="accordion-content">
669
+ <div class="p-4 pt-0 text-gray-600">
670
+ For corrections, you need to submit Form-5 along with supporting documents like Aadhaar card, address proof, existing ration card copy, and documents supporting the correction request (e.g., marriage certificate for name change).
671
+ </div>
672
+ </div>
673
+ </div>
674
+
675
+ <!-- FAQ Item 3 -->
676
+ <div class="border-b border-gray-200">
677
+ <button class="faq-toggle w-full text-left p-4 hover:bg-gray-50 focus:outline-none">
678
+ <div class="flex items-center justify-between">
679
+ <span class="font-medium">How long does it take to process a new ration card?</span>
680
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
681
+ </div>
682
+ </button>
683
+ <div class="accordion-content">
684
+ <div class="p-4 pt-0 text-gray-600">
685
+ Typically, it takes 15-30 working days after document verification. You can track the status using your application number on our portal or through the SMS service.
686
+ </div>
687
+ </div>
688
+ </div>
689
+
690
+ <!-- FAQ Item 4 -->
691
+ <div class="border-b border-gray-200">
692
+ <button class="faq-toggle w-full text-left p-4 hover:bg-gray-50 focus:outline-none">
693
+ <div class="flex items-center justify-between">
694
+ <span class="font-medium">What should I do if my ration card is lost?</span>
695
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
696
+ </div>
697
+ </button>
698
+ <div class="accordion-content">
699
+ <div class="p-4 pt-0 text-gray-600">
700
+ You can download a duplicate e-Ration Card from our portal using your registered mobile number. If you need a physical copy, visit your local Food & Supplies office with an affidavit for lost card.
701
+ </div>
702
+ </div>
703
+ </div>
704
+ </div>
705
+ </div>
706
+
707
+ <!-- Contact Options -->
708
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
709
+ <!-- Phone Support -->
710
+ <div class="bg-blue-50 rounded-lg p-6 text-center">
711
+ <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
712
+ <i class="fas fa-phone-alt text-blue-600 text-2xl"></i>
713
+ </div>
714
+ <h3 class="font-semibold text-lg mb-2">Call Us</h3>
715
+ <p class="text-gray-600 mb-4">For immediate assistance</p>
716
+ <a href="tel:18003456789" class="text-blue-600 font-medium hover:underline">1800 345 6789</a>
717
+ </div>
718
+
719
+ <!-- WhatsApp Support -->
720
+ <div class="bg-green-50 rounded-lg p-6 text-center">
721
+ <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
722
+ <i class="fab fa-whatsapp text-green-600 text-2xl"></i>
723
+ </div>
724
+ <h3 class="font-semibold text-lg mb-2">WhatsApp</h3>
725
+ <p class="text-gray-600 mb-4">Chat with our support team</p>
726
+ <a href="https://wa.me/919876543210" class="text-green-600 font-medium hover:underline">+91 98765 43210</a>
727
+ </div>
728
+
729
+ <!-- Grievance Portal -->
730
+ <div class="bg-purple-50 rounded-lg p-6 text-center">
731
+ <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
732
+ <i class="fas fa-headset text-purple-600 text-2xl"></i>
733
+ </div>
734
+ <h3 class="font-semibold text-lg mb-2">Grievance Portal</h3>
735
+ <p class="text-gray-600 mb-4">Register your complaints</p>
736
+ <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition duration-300">
737
+ File Complaint
738
+ </button>
739
+ </div>
740
+ </div>
741
+ </div>
742
+ </div>
743
+ </section>
744
+
745
+ <!-- Footer -->
746
+ <footer class="footer-glass bg-white bg-opacity-90 border-t border-gray-200">
747
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
748
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
749
+ <!-- About -->
750
+ <div>
751
+ <h3 class="text-lg font-semibold text-wbgreen mb-4">About Department</h3>
752
+ <p class="text-gray-600 text-sm mb-4">
753
+ The West Bengal Food & Supplies Department ensures food security through Public Distribution System, maintaining buffer stocks and regulating food prices.
754
+ </p>
755
+ <div class="flex space-x-4">
756
+ <img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9c/Government_of_West_Bengal_Logo.svg/1200px-Government_of_West_Bengal_Logo.svg.png" alt="WB Gov Logo" class="h-10">
757
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/NIC_logo.svg/1200px-NIC_logo.svg.png" alt="NIC Logo" class="h-10">
758
+ </div>
759
+ </div>
760
+
761
+ <!-- Quick Links -->
762
+ <div>
763
+ <h3 class="text-lg font-semibold text-wbgreen mb-4">Quick Links</h3>
764
+ <ul class="space-y-2">
765
+ <li><a href="#" class="text-gray-600 hover:text-wbgreen transition duration-300">Home</a></li>
766
+ <li><a href="#" class="text-gray-600 hover:text-wbgreen transition duration-300">Apply for Ration Card</a></li>
767
+ <li><a href="#" class="text-gray-600 hover:text-wbgreen transition duration-300">Track Application</a></li>
768
+ <li><a href="#" class="text-gray-600 hover:text-wbgreen transition duration-300">FPS Locator</a></li>
769
+ <li><a href="#" class="text-gray-600 hover:text-wbgreen transition duration-300">e-Ration Card</a></li>
770
+ </ul>
771
+ </div>
772
+
773
+ <!-- Policies -->
774
+ <div>
775
+ <h3 class="text-lg font-semibold text-wbgreen mb-4">Policies</h3>
776
+ <ul class="space-y-2">
777
+ <li><a href="#" class="text-gray-600 hover:text-wbgreen transition duration-300">Terms of Service</a></li>
778
+ <li><a href="#" class="text-gray-600 hover:text-wbgreen transition duration-300">Privacy Policy</a></li>
779
+ <li><a href="#" class="text-gray-600 hover:text-wbgreen transition duration-300">Refund Policy</a></li>
780
+ <li><a href="#" class="text-gray-600 hover:text-wbgreen transition duration-300">Accessibility</a></li>
781
+ <li><a href="#" class="text-gray-600 hover:text-wbgreen transition duration-300">Disclaimer</a></li>
782
+ </ul>
783
+ </div>
784
+
785
+ <!-- Contact -->
786
+ <div>
787
+ <h3 class="text-lg font-semibold text-wbgreen mb-4">Contact Us</h3>
788
+ <address class="text-gray-600 text-sm not-italic">
789
+ <p class="mb-2">Food & Supplies Department</p>
790
+ <p class="mb-2">Government of West Bengal</p>
791
+ <p class="mb-2">Writers' Buildings, Kolkata - 700001</p>
792
+ <p class="mb-4">Email: <a href="mailto:foodsupplies-wb@gov.in" class="text-blue-600 hover:underline">foodsupplies-wb@gov.in</a></p>
793
+
794
+ <div class="flex items-center space-x-2 mb-4">
795
+ <span class="text-gray-600">Language:</span>
796
+ <select class="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-wbgreen">
797
+ <option>English</option>
798
+ <option>বাংলা</option>
799
+ </select>
800
+ </div>
801
+
802
+ <div class="flex space-x-4">
803
+ <a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-facebook-f"></i></a>
804
+ <a href="#" class="text-gray-600 hover:text-blue-400"><i class="fab fa-twitter"></i></a>
805
+ <a href="#" class="text-gray-600 hover:text-red-600"><i class="fab fa-youtube"></i></a>
806
+ <a href="#" class="text-gray-600 hover:text-blue-800"><i class="fab fa-linkedin-in"></i></a>
807
+ </div>
808
+ </address>
809
+ </div>
810
+ </div>
811
+
812
+ <div class="border-t border-gray-200 mt-8 pt-8 text-center text-sm text-gray-500">
813
+ <p>© 2023 Government of West Bengal, Food & Supplies Department. All rights reserved.</p>
814
+ </div>
815
+ </div>
816
+ </footer>
817
+
818
+ <!-- Mobile Bottom Navigation -->
819
+ <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white mobile-nav z-40">
820
+ <div class="flex justify-around items-center h-16">
821
+ <a href="#" class="flex flex-col items-center justify-center text-wbgreen">
822
+ <i class="fas fa-home text-lg"></i>
823
+ <span class="text-xs mt-1">Home</span>
824
+ </a>
825
+ <a href="#" class="flex flex-col items-center justify-center text-gray-600">
826
+ <i class="fas fa-file-alt text-lg"></i>
827
+ <span class="text-xs mt-1">Apply</span>
828
+ </a>
829
+ <a href="#" class="flex flex-col items-center justify-center text-gray-600">
830
+ <i class="fas fa-search text-lg"></i>
831
+ <span class="text-xs mt-1">Track</span>
832
+ </a>
833
+ <a href="#" class="flex flex-col items-center justify-center text-gray-600">
834
+ <i class="fas fa-map-marker-alt text-lg"></i>
835
+ <span class="text-xs mt-1">FPS Map</span>
836
+ </a>
837
+ <a href="#" class="flex flex-col items-center justify-center text-gray-600">
838
+ <i class="fas fa-headset text-lg"></i>
839
+ <span class="text-xs mt-1">Support</span>
840
+ </a>
841
+ </div>
842
+ </div>
843
+
844
+ <script>
845
+ // Accordion functionality
846
+ document.querySelectorAll('.faq-toggle').forEach(button => {
847
+ button.addEventListener('click', () => {
848
+ const content = button.nextElementSibling;
849
+ const icon = button.querySelector('i');
850
+
851
+ button.classList.toggle('bg-gray-50');
852
+ content.classList.toggle('show');
853
+ icon.classList.toggle('rotate-180');
854
+ });
855
+ });
856
+
857
+ // Progress steps animation
858
+ const progressSteps = document.querySelectorAll('.progress-step');
859
+
860
+ function animateProgressSteps() {
861
+ progressSteps.forEach((step, index) => {
862
+ setTimeout(() => {
863
+ step.classList.add('completed');
864
+ }, index * 500);
865
+ });
866
+ }
867
+
868
+ // Intersection Observer for animations
869
+ const observer = new IntersectionObserver((entries) => {
870
+ entries.forEach(entry => {
871
+ if (entry.isIntersecting) {
872
+ if (entry.target.classList.contains('progress-step')) {
873
+ animateProgressSteps();
874
+ }
875
+ entry.target.classList.add('animate');
876
+ }
877
+ });
878
+ }, { threshold: 0.1 });
879
+
880
+ document.querySelectorAll('.progress-step, .map-pin, .slide-in-left, .slide-in-right').forEach(el => {
881
+ observer.observe(el);
882
+ });
883
+ </script>
884
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=aniket2025/website-designer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
885
+ </html>