Spaces:

aniket2025
/

third-website

Running

App Files Files Community

aniket2025 commited on Jul 1

Commit

f003331

verified ·

1 Parent(s): c2b12d9

Redesign a modern, professional portal homepage for the Official Website of West Bengal. Scene 1 – Hero Banner: full-width hero showcasing a vibrant collage of WB heritage (Victoria Memorial, Howrah Bridge), overlaid with a glassmorphic nav bar featuring links: “Home • About WB • Services • Schemes • Departments • Contact Us”. Include a central search bar (“Search government services, departments…”) with focus animation and a “Go” button. Scene 2 – Quick Services Dashboard: a grid of interactive icons/cards for popular services (“Ration Card”, “Apply for Permit”, “Health Schemes”, “E-district Services”), hover reveals brief desc and “Apply Now” action, cards slide/appear sequentially. Scene 3 – Interactive Map & Department Directory: split-screen with a stylized map of WB showing clickable pins for divisional offices and a searchable department list on the right, list highlights correspond on hover. Scene 4 – News & Announcements Ticker: a horizontal marquee banner displaying live government alerts (“Flood warning, Scholarship deadlines, Covid updates”), plus a secondary carousel below for featured news with images and “Read More”. Scene 5 – Stats & Impact Counters: a row of animated counters on scroll (“1500+ services”, “500+ dept offices”, “10 million+ users”), with iconography and counting animation. Scene 6 – Resources & Downloads Section: card grid linking to PDFs (“Forms, Reports, Budget Documents”) with icons and hover download animation. Scene 7 – Citizen Feedback & Helpline: testimonial-style card showing citizen feedback and a live helpline/WhatsApp chatbot widget; smooth fade on scroll. Scene 8 – Footer & Mobile Nav: desktop footer uses glassmorphism with government badges (India.gov.in, NIC, Logo), language toggle (English/Bengali), quick links and social icons; mobile view shows sticky bottom nav icons (“Home, Services, Feedback, Profile, More”). Use a trustworthy and culturally resonant palette: white, deep Bengal saffron, green-blue accents; modern sans‑serif typography. Include glassmorphic cards, subtle drop shadows, soft transitions, responsive micro‑interactions, and ensure accessibility (WCAG contrast, tap‑friendly spacing). - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +805 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Third Website
-emoji: 🐠
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: third-website
+emoji: 🐳
+colorFrom: red
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,805 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Official Portal of West Bengal Government</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        :root {
+            --primary: #FF9933;
+            --secondary: #138808;
+            --accent: #0066B3;
+            --dark: #1E293B;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #F8FAFC;
+            color: #1E293B;
+        }
+        .glass-nav {
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .hero-overlay {
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
+        }
+        .service-card:hover .service-overlay {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .service-overlay {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.3s ease;
+        }
+        .map-pin {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background-color: var(--primary);
+            border-radius: 50% 50% 50% 0;
+            transform: rotate(-45deg);
+            cursor: pointer;
+        }
+        .map-pin::after {
+            content: '';
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: white;
+            border-radius: 50%;
+            top: 5px;
+            left: 5px;
+        }
+        .map-pin:hover {
+            transform: rotate(-45deg) scale(1.2);
+        }
+        .news-ticker {
+            animation: ticker 30s linear infinite;
+        }
+        @keyframes ticker {
+            0% { transform: translateX(100%); }
+            100% { transform: translateX(-100%); }
+        }
+        .counter {
+            transition: all 0.5s ease;
+        }
+        .download-card:hover .download-icon {
+            transform: translateY(-5px);
+        }
+        .download-icon {
+            transition: all 0.3s ease;
+        }
+        .feedback-card {
+            background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%);
+        }
+        .mobile-nav {
+            background: rgba(255, 255, 255, 0.95);
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+        }
+        .department-item:hover {
+            background-color: rgba(19, 136, 8, 0.1);
+            border-left: 4px solid var(--secondary);
+        }
+        .search-bar:focus {
+            box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.3);
+        }
+        @media (max-width: 768px) {
+            .hero-title {
+                font-size: 2rem;
+            }
+            .news-ticker {
+                animation: ticker 20s linear infinite;
+            }
+        }
+    </style>
+</head>
+<body class="overflow-x-hidden">
+    <!-- Scene 1: Hero Banner -->
+    <section class="relative h-screen w-full overflow-hidden">
+        <!-- Hero Image Collage -->
+        <div class="absolute inset-0">
+            <div class="grid grid-cols-3 grid-rows-2 h-full w-full">
+                <div class="bg-[url('https://images.unsplash.com/photo-1582972236019-ea6a5d5e32e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center"></div>
+                <div class="bg-[url('https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1889&q=80')] bg-cover bg-center"></div>
+                <div class="bg-[url('https://images.unsplash.com/photo-1587474260584-136574528ed5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center"></div>
+                <div class="bg-[url('https://images.unsplash.com/photo-1600712242805-8f5a837ab6e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center"></div>
+                <div class="bg-[url('https://images.unsplash.com/photo-1602216056096-3b40cc0c9944?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80')] bg-cover bg-center"></div>
+                <div class="bg-[url('https://images.unsplash.com/photo-1600711725408-2052d4433ac4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center"></div>
+            </div>
+            <div class="absolute inset-0 hero-overlay"></div>
+        </div>
+        <!-- Glassmorphic Navigation -->
+        <nav class="glass-nav fixed top-0 left-0 right-0 z-50 py-4 px-6 flex justify-between items-center">
+            <div class="flex items-center">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Emblem_of_West_Bengal.svg/1200px-Emblem_of_West_Bengal.svg.png" alt="West Bengal Government Logo" class="h-12 mr-4">
+                <h1 class="text-xl font-bold text-gray-800 hidden md:block">Government of West Bengal</h1>
+            </div>
+            <div class="hidden md:flex space-x-6">
+                <a href="#" class="text-gray-800 hover:text-[#FF9933] font-medium">Home</a>
+                <a href="#" class="text-gray-800 hover:text-[#FF9933] font-medium">About WB</a>
+                <a href="#" class="text-gray-800 hover:text-[#FF9933] font-medium">Services</a>
+                <a href="#" class="text-gray-800 hover:text-[#FF9933] font-medium">Schemes</a>
+                <a href="#" class="text-gray-800 hover:text-[#FF9933] font-medium">Departments</a>
+                <a href="#" class="text-gray-800 hover:text-[#FF9933] font-medium">Contact Us</a>
+            </div>
+            <button class="md:hidden text-gray-800">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+        </nav>
+        <!-- Hero Content -->
+        <div class="relative h-full flex flex-col justify-center items-center text-center px-4 z-10">
+            <div class="max-w-4xl mx-auto">
+                <h1 class="hero-title text-5xl md:text-6xl font-bold text-white mb-6 drop-shadow-lg">Welcome to West Bengal</h1>
+                <p class="text-xl text-white mb-8 drop-shadow-md">Gateway to Eastern India's Rich Heritage & Progress</p>
+                <div class="relative max-w-2xl mx-auto">
+                    <input type="text" placeholder="Search government services, departments..."
+                           class="search-bar w-full py-4 px-6 rounded-full bg-white bg-opacity-90 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#0066B3] transition-all duration-300">
+                    <button class="absolute right-2 top-2 bg-[#FF9933] text-white py-2 px-6 rounded-full hover:bg-opacity-90 transition-all">
+                        Go
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Scene 2: Quick Services Dashboard -->
+    <section class="py-16 px-4 bg-gray-50">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Citizen Services</h2>
+            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Access essential government services with just a few clicks</p>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <!-- Service Card 1 -->
+                <div class="service-card relative bg-white rounded-xl shadow-md overflow-hidden h-48 cursor-pointer transition-all duration-300 hover:shadow-lg">
+                    <div class="absolute inset-0 bg-[#138808] opacity-10"></div>
+                    <div class="h-full flex flex-col items-center justify-center p-6">
+                        <div class="bg-[#138808] bg-opacity-10 p-4 rounded-full mb-4">
+                            <i class="fas fa-id-card text-3xl text-[#138808]"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold text-center text-gray-800">Ration Card</h3>
+                    </div>
+                    <div class="service-overlay absolute inset-0 bg-[#138808] bg-opacity-90 flex flex-col items-center justify-center p-6 text-white">
+                        <h3 class="text-xl font-semibold mb-2">Ration Card</h3>
+                        <p class="text-sm text-center mb-4">Apply for new ration card or update existing one</p>
+                        <button class="bg-white text-[#138808] py-2 px-6 rounded-full font-medium hover:bg-opacity-90 transition-all">
+                            Apply Now
+                        </button>
+                    </div>
+                </div>
+                <!-- Service Card 2 -->
+                <div class="service-card relative bg-white rounded-xl shadow-md overflow-hidden h-48 cursor-pointer transition-all duration-300 hover:shadow-lg">
+                    <div class="absolute inset-0 bg-[#0066B3] opacity-10"></div>
+                    <div class="h-full flex flex-col items-center justify-center p-6">
+                        <div class="bg-[#0066B3] bg-opacity-10 p-4 rounded-full mb-4">
+                            <i class="fas fa-file-alt text-3xl text-[#0066B3]"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold text-center text-gray-800">Apply for Permit</h3>
+                    </div>
+                    <div class="service-overlay absolute inset-0 bg-[#0066B3] bg-opacity-90 flex flex-col items-center justify-center p-6 text-white">
+                        <h3 class="text-xl font-semibold mb-2">Apply for Permit</h3>
+                        <p class="text-sm text-center mb-4">Apply for various government permits and licenses</p>
+                        <button class="bg-white text-[#0066B3] py-2 px-6 rounded-full font-medium hover:bg-opacity-90 transition-all">
+                            Apply Now
+                        </button>
+                    </div>
+                </div>
+                <!-- Service Card 3 -->
+                <div class="service-card relative bg-white rounded-xl shadow-md overflow-hidden h-48 cursor-pointer transition-all duration-300 hover:shadow-lg">
+                    <div class="absolute inset-0 bg-[#FF9933] opacity-10"></div>
+                    <div class="h-full flex flex-col items-center justify-center p-6">
+                        <div class="bg-[#FF9933] bg-opacity-10 p-4 rounded-full mb-4">
+                            <i class="fas fa-heartbeat text-3xl text-[#FF9933]"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold text-center text-gray-800">Health Schemes</h3>
+                    </div>
+                    <div class="service-overlay absolute inset-0 bg-[#FF9933] bg-opacity-90 flex flex-col items-center justify-center p-6 text-white">
+                        <h3 class="text-xl font-semibold mb-2">Health Schemes</h3>
+                        <p class="text-sm text-center mb-4">Access various health insurance and welfare schemes</p>
+                        <button class="bg-white text-[#FF9933] py-2 px-6 rounded-full font-medium hover:bg-opacity-90 transition-all">
+                            Apply Now
+                        </button>
+                    </div>
+                </div>
+                <!-- Service Card 4 -->
+                <div class="service-card relative bg-white rounded-xl shadow-md overflow-hidden h-48 cursor-pointer transition-all duration-300 hover:shadow-lg">
+                    <div class="absolute inset-0 bg-[#6B46C1] opacity-10"></div>
+                    <div class="h-full flex flex-col items-center justify-center p-6">
+                        <div class="bg-[#6B46C1] bg-opacity-10 p-4 rounded-full mb-4">
+                            <i class="fas fa-laptop text-3xl text-[#6B46C1]"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold text-center text-gray-800">E-district Services</h3>
+                    </div>
+                    <div class="service-overlay absolute inset-0 bg-[#6B46C1] bg-opacity-90 flex flex-col items-center justify-center p-6 text-white">
+                        <h3 class="text-xl font-semibold mb-2">E-district Services</h3>
+                        <p class="text-sm text-center mb-4">Access all district-level services online</p>
+                        <button class="bg-white text-[#6B46C1] py-2 px-6 rounded-full font-medium hover:bg-opacity-90 transition-all">
+                            Apply Now
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <button class="bg-[#0066B3] text-white py-3 px-8 rounded-full font-medium hover:bg-opacity-90 transition-all inline-flex items-center">
+                    View All Services <i class="fas fa-arrow-right ml-2"></i>
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Scene 3: Interactive Map & Department Directory -->
+    <section class="py-16 px-4 bg-white">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Explore West Bengal</h2>
+            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Find government offices and departments across the state</p>
+            <div class="flex flex-col lg:flex-row gap-8">
+                <!-- Map Section -->
+                <div class="lg:w-1/2 relative bg-gray-100 rounded-xl overflow-hidden h-96">
+                    <div class="absolute inset-0 bg-[url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/West_Bengal_district_map.svg/1200px-West_Bengal_district_map.svg.png')] bg-contain bg-center bg-no-repeat"></div>
+                    <!-- Map Pins -->
+                    <div class="map-pin" style="top: 30%; left: 45%;" data-department="kolkata"></div>
+                    <div class="map-pin" style="top: 40%; left: 35%;" data-department="bardhaman"></div>
+                    <div class="map-pin" style="top: 50%; left: 25%;" data-department="medinipur"></div>
+                    <div class="map-pin" style="top: 60%; left: 55%;" data-department="siliguri"></div>
+                    <div class="map-pin" style="top: 70%; left: 40%;" data-department="durgapur"></div>
+                    <div class="absolute bottom-4 left-4 right-4 glass-card p-4 rounded-lg">
+                        <h3 class="font-medium text-gray-800 mb-2">Click on pins to view offices</h3>
+                        <div class="flex items-center text-sm text-gray-600">
+                            <i class="fas fa-info-circle mr-2"></i>
+                            <span>Offices are color-coded by department type</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Department Directory -->
+                <div class="lg:w-1/2">
+                    <div class="glass-card rounded-xl p-6 h-96 overflow-y-auto">
+                        <div class="flex items-center mb-6">
+                            <div class="relative flex-grow">
+                                <input type="text" placeholder="Search departments..." class="w-full py-2 px-4 pl-10 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#0066B3] focus:border-transparent">
+                                <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+                            </div>
+                        </div>
+                        <div class="space-y-2">
+                            <div class="department-item p-3 rounded-lg transition-all cursor-pointer" data-department="kolkata">
+                                <h3 class="font-medium text-gray-800">Kolkata Municipal Corporation</h3>
+                                <p class="text-sm text-gray-600">Urban Development, Municipal Services</p>
+                            </div>
+                            <div class="department-item p-3 rounded-lg transition-all cursor-pointer" data-department="bardhaman">
+                                <h3 class="font-medium text-gray-800">Bardhaman District Office</h3>
+                                <p class="text-sm text-gray-600">Agriculture, Rural Development</p>
+                            </div>
+                            <div class="department-item p-3 rounded-lg transition-all cursor-pointer" data-department="medinipur">
+                                <h3 class="font-medium text-gray-800">Medinipur Health Directorate</h3>
+                                <p class="text-sm text-gray-600">Public Health, Medical Services</p>
+                            </div>
+                            <div class="department-item p-3 rounded-lg transition-all cursor-pointer" data-department="siliguri">
+                                <h3 class="font-medium text-gray-800">Siliguri Transport Office</h3>
+                                <p class="text-sm text-gray-600">Transportation, Vehicle Registration</p>
+                            </div>
+                            <div class="department-item p-3 rounded-lg transition-all cursor-pointer" data-department="durgapur">
+                                <h3 class="font-medium text-gray-800">Durgapur Industrial Office</h3>
+                                <p class="text-sm text-gray-600">Industry, Commerce, Employment</p>
+                            </div>
+                            <div class="department-item p-3 rounded-lg transition-all cursor-pointer">
+                                <h3 class="font-medium text-gray-800">Education Department</h3>
+                                <p class="text-sm text-gray-600">Schools, Colleges, Scholarships</p>
+                            </div>
+                            <div class="department-item p-3 rounded-lg transition-all cursor-pointer">
+                                <h3 class="font-medium text-gray-800">Police Headquarters</h3>
+                                <p class="text-sm text-gray-600">Law & Order, Public Safety</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Scene 4: News & Announcements Ticker -->
+    <section class="py-8 bg-[#FF9933] text-white">
+        <div class="max-w-7xl mx-auto px-4">
+            <div class="flex items-center mb-2">
+                <div class="bg-white text-[#FF9933] py-1 px-3 rounded-full font-bold mr-4 whitespace-nowrap">
+                    <i class="fas fa-bullhorn mr-2"></i> ALERTS
+                </div>
+                <div class="overflow-hidden w-full">
+                    <div class="news-ticker whitespace-nowrap">
+                        <span class="mr-8">⚠️ Flood warning issued for North Bengal districts</span>
+                        <span class="mr-8">📢 Last date for Swasthya Sathi registration extended to 30th June</span>
+                        <span class="mr-8">🎓 Scholarship applications open for SC/ST students</span>
+                        <span class="mr-8">🏗️ Tender notice for construction of new hospital in Asansol</span>
+                        <span class="mr-8">🚧 Traffic diversion on NH-16 from 15th to 20th June</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="py-12 px-4 bg-gray-50">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">News & Updates</h2>
+            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Stay informed with the latest from the West Bengal Government</p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <!-- News Card 1 -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg">
+                    <div class="h-48 bg-[url('https://images.unsplash.com/photo-1584036561566-baf8f5f1b144?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80')] bg-cover bg-center"></div>
+                    <div class="p-6">
+                        <div class="text-sm text-[#0066B3] font-medium mb-2">June 10, 2023</div>
+                        <h3 class="text-xl font-bold text-gray-800 mb-3">New Industrial Policy to Boost Employment</h3>
+                        <p class="text-gray-600 mb-4">The state government announces a new industrial policy aimed at creating 50,000 jobs in the next two years...</p>
+                        <a href="#" class="text-[#FF9933] font-medium inline-flex items-center">
+                            Read More <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- News Card 2 -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg">
+                    <div class="h-48 bg-[url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center"></div>
+                    <div class="p-6">
+                        <div class="text-sm text-[#0066B3] font-medium mb-2">June 8, 2023</div>
+                        <h3 class="text-xl font-bold text-gray-800 mb-3">Health Camps in Rural Areas</h3>
+                        <p class="text-gray-600 mb-4">Free health check-up camps to be organized across 100 villages in West Bengal under the Swasthya Sathi scheme...</p>
+                        <a href="#" class="text-[#FF9933] font-medium inline-flex items-center">
+                            Read More <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- News Card 3 -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg">
+                    <div class="h-48 bg-[url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center"></div>
+                    <div class="p-6">
+                        <div class="text-sm text-[#0066B3] font-medium mb-2">June 5, 2023</div>
+                        <h3 class="text-xl font-bold text-gray-800 mb-3">Digital Education Initiative</h3>
+                        <p class="text-gray-600 mb-4">Government schools to receive smart classrooms and digital learning tools as part of new education initiative...</p>
+                        <a href="#" class="text-[#FF9933] font-medium inline-flex items-center">
+                            Read More <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <button class="border-2 border-[#0066B3] text-[#0066B3] py-2 px-8 rounded-full font-medium hover:bg-[#0066B3] hover:text-white transition-all inline-flex items-center">
+                    View All News <i class="fas fa-arrow-right ml-2"></i>
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Scene 5: Stats & Impact Counters -->
+    <section class="py-16 px-4 bg-[#0066B3] text-white">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-12">West Bengal in Numbers</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                <div class="text-center">
+                    <div class="counter text-5xl font-bold mb-2" data-target="1500">0</div>
+                    <div class="text-lg">Government Services</div>
+                </div>
+                <div class="text-center">
+                    <div class="counter text-5xl font-bold mb-2" data-target="500">0</div>
+                    <div class="text-lg">Department Offices</div>
+                </div>
+                <div class="text-center">
+                    <div class="counter text-5xl font-bold mb-2" data-target="10">0</div>
+                    <div class="text-lg">Million+ Users</div>
+                </div>
+                <div class="text-center">
+                    <div class="counter text-5xl font-bold mb-2" data-target="23">0</div>
+                    <div class="text-lg">Districts Covered</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Scene 6: Resources & Downloads Section -->
+    <section class="py-16 px-4 bg-white">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Resources & Downloads</h2>
+            <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Access important government documents, forms and reports</p>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                <!-- Download Card 1 -->
+                <div class="download-card bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg">
+                    <div class="p-6">
+                        <div class="download-icon bg-[#138808] bg-opacity-10 p-4 rounded-full mb-4 inline-block">
+                            <i class="fas fa-file-pdf text-3xl text-[#138808]"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold text-gray-800 mb-2">Application Forms</h3>
+                        <p class="text-sm text-gray-600 mb-4">All government application forms in one place</p>
+                        <button class="w-full bg-gray-100 text-gray-800 py-2 px-4 rounded-lg font-medium hover:bg-gray-200 transition-all inline-flex items-center justify-center">
+                            <i class="fas fa-download mr-2"></i> Download
+                        </button>
+                    </div>
+                </div>
+                <!-- Download Card 2 -->
+                <div class="download-card bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg">
+                    <div class="p-6">
+                        <div class="download-icon bg-[#0066B3] bg-opacity-10 p-4 rounded-full mb-4 inline-block">
+                            <i class="fas fa-chart-bar text-3xl text-[#0066B3]"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold text-gray-800 mb-2">Annual Reports</h3>
+                        <p class="text-sm text-gray-600 mb-4">Department-wise annual performance reports</p>
+                        <button class="w-full bg-gray-100 text-gray-800 py-2 px-4 rounded-lg font-medium hover:bg-gray-200 transition-all inline-flex items-center justify-center">
+                            <i class="fas fa-download mr-2"></i> Download
+                        </button>
+                    </div>
+                </div>
+                <!-- Download Card 3 -->
+                <div class="download-card bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg">
+                    <div class="p-6">
+                        <div class="download-icon bg-[#FF9933] bg-opacity-10 p-4 rounded-full mb-4 inline-block">
+                            <i class="fas fa-file-invoice-dollar text-3xl text-[#FF9933]"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold text-gray-800 mb-2">Budget Documents</h3>
+                        <p class="text-sm text-gray-600 mb-4">State budget and financial statements</p>
+                        <button class="w-full bg-gray-100 text-gray-800 py-2 px-4 rounded-lg font-medium hover:bg-gray-200 transition-all inline-flex items-center justify-center">
+                            <i class="fas fa-download mr-2"></i> Download
+                        </button>
+                    </div>
+                </div>
+                <!-- Download Card 4 -->
+                <div class="download-card bg-white rounded-xl shadow-md overflow-hidden transition-all hover:shadow-lg">
+                    <div class="p-6">
+                        <div class="download-icon bg-[#6B46C1] bg-opacity-10 p-4 rounded-full mb-4 inline-block">
+                            <i class="fas fa-book text-3xl text-[#6B46C1]"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold text-gray-800 mb-2">Policy Documents</h3>
+                        <p class="text-sm text-gray-600 mb-4">Government policies and guidelines</p>
+                        <button class="w-full bg-gray-100 text-gray-800 py-2 px-4 rounded-lg font-medium hover:bg-gray-200 transition-all inline-flex items-center justify-center">
+                            <i class="fas fa-download mr-2"></i> Download
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Scene 7: Citizen Feedback & Helpline -->
+    <section class="py-16 px-4 bg-gray-100">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                <!-- Feedback Section -->
+                <div class="feedback-card rounded-xl p-8 shadow-md">
+                    <h2 class="text-3xl font-bold mb-6 text-gray-800">Citizen Feedback</h2>
+                    <div class="mb-8">
+                        <div class="flex items-start mb-6">
+                            <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="User" class="h-12 w-12 rounded-full mr-4">
+                            <div>
+                                <div class="flex items-center mb-1">
+                                    <h4 class="font-medium text-gray-800 mr-2">Priya Banerjee</h4>
+                                    <div class="flex text-[#FF9933]">
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                    </div>
+                                </div>
+                                <p class="text-gray-600">"The online ration card application was processed in just 3 days. Very efficient service!"</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="h-12 w-12 rounded-full mr-4">
+                            <div>
+                                <div class="flex items-center mb-1">
+                                    <h4 class="font-medium text-gray-800 mr-2">Sourav Das</h4>
+                                    <div class="flex text-[#FF9933]">
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="far fa-star"></i>
+                                    </div>
+                                </div>
+                                <p class="text-gray-600">"Good initiative but the website could be faster. The services are very useful though."</p>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="w-full bg-[#0066B3] text-white py-3 rounded-full font-medium hover:bg-opacity-90 transition-all">
+                        Share Your Feedback
+                    </button>
+                </div>
+                <!-- Helpline Section -->
+                <div class="bg-white rounded-xl p-8 shadow-md">
+                    <h2 class="text-3xl font-bold mb-6 text-gray-800">Need Help?</h2>
+                    <div class="space-y-6">
+                        <div class="flex items-start">
+                            <div class="bg-[#138808] bg-opacity-10 p-3 rounded-full mr-4">
+                                <i class="fas fa-phone-alt text-xl text-[#138808]"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-medium text-gray-800 mb-1">24x7 Helpline</h3>
+                                <p class="text-gray-600">Call our toll-free number for any assistance</p>
+                                <a href="tel:18003456789" class="text-[#0066B3] font-medium">1800 345 6789</a>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-[#FF9933] bg-opacity-10 p-3 rounded-full mr-4">
+                                <i class="fab fa-whatsapp text-xl text-[#138808]"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-medium text-gray-800 mb-1">WhatsApp Support</h3>
+                                <p class="text-gray-600">Chat with our support team on WhatsApp</p>
+                                <a href="https://wa.me/919876543210" class="text-[#0066B3] font-medium">+91 98765 43210</a>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-[#0066B3] bg-opacity-10 p-3 rounded-full mr-4">
+                                <i class="fas fa-envelope text-xl text-[#0066B3]"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-medium text-gray-800 mb-1">Email Support</h3>
+                                <p class="text-gray-600">Write to us for any queries or complaints</p>
+                                <a href="mailto:[email protected]" class="text-[#0066B3] font-medium">[email protected]</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Scene 8: Footer & Mobile Nav -->
+    <footer class="bg-gray-900 text-white pt-12 pb-6 px-4">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+                <div>
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Emblem_of_West_Bengal.svg/1200px-Emblem_of_West_Bengal.svg.png" alt="West Bengal Government Logo" class="h-16 mb-4">
+                    <p class="text-gray-400 mb-4">The Official Portal of Government of West Bengal</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Chief Minister's Office</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Cabinet Ministers</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Tenders</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">RTI</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Election Commission</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Departments</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Health & Family Welfare</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Education</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Finance</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Agriculture</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Transport</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Government</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Constitution of India</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">India.gov.in</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">National Portal</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">NIC</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Digital India</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center space-x-4 mb-4 md:mb-0">
+                    <span class="text-gray-400">© 2023 Government of West Bengal</span>
+                    <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
+                    <a href="#" class="text-gray-400 hover:text-white">Terms of Use</a>
+                </div>
+                <div class="flex items-center">
+                    <span class="text-gray-400 mr-2">Language:</span>
+                    <select class="bg-gray-800 text-white px-3 py-1 rounded">
+                        <option>English</option>
+                        <option>বাংলা</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- Mobile Navigation -->
+    <div class="md:hidden fixed bottom-0 left-0 right-0 mobile-nav z-50">
+        <div class="flex justify-around items-center py-3">
+            <a href="#" class="flex flex-col items-center text-[#0066B3]">
+                <i class="fas fa-home text-xl mb-1"></i>
+                <span class="text-xs">Home</span>
+            </a>
+            <a href="#" class="flex flex-col items-center text-gray-600">
+                <i class="fas fa-bolt text-xl mb-1"></i>
+                <span class="text-xs">Services</span>
+            </a>
+            <a href="#" class="flex flex-col items-center text-gray-600">
+                <i class="fas fa-comment-alt text-xl mb-1"></i>
+                <span class="text-xs">Feedback</span>
+            </a>
+            <a href="#" class="flex flex-col items-center text-gray-600">
+                <i class="fas fa-user text-xl mb-1"></i>
+                <span class="text-xs">Profile</span>
+            </a>
+            <a href="#" class="flex flex-col items-center text-gray-600">
+                <i class="fas fa-ellipsis-h text-xl mb-1"></i>
+                <span class="text-xs">More</span>
+            </a>
+        </div>
+    </div>
+    <script>
+        // Counter Animation
+        document.addEventListener('DOMContentLoaded', function() {
+            const counters = document.querySelectorAll('.counter');
+            const speed = 200;
+            function animateCounters() {
+                counters.forEach(counter => {
+                    const target = +counter.getAttribute('data-target');
+                    const count = +counter.innerText;
+                    const increment = target / speed;
+                    if(count < target) {
+                        counter.innerText = Math.ceil(count + increment);
+                        setTimeout(animateCounters, 1);
+                    } else {
+                        counter.innerText = target + (counter.getAttribute('data-target') === '10' ? 'M' : '+');
+                    }
+                });
+            }
+            // GSAP Scroll Trigger for counter animation
+            gsap.registerPlugin(ScrollTrigger);
+            gsap.to(".counter", {
+                scrollTrigger: {
+                    trigger: ".counter",
+                    start: "top 80%",
+                    onEnter: animateCounters,
+                    once: true
+                }
+            });
+            // Map and Department interaction
+            const mapPins = document.querySelectorAll('.map-pin');
+            const departmentItems = document.querySelectorAll('.department-item');
+            mapPins.forEach(pin => {
+                pin.addEventListener('click', function() {
+                    const department = this.getAttribute('data-department');
+                    highlightDepartment(department);
+                });
+            });
+            departmentItems.forEach(item => {
+                item.addEventListener('click', function() {
+                    const department = this.getAttribute('data-department');
+                    if(department) {
+                        highlightDepartment(department);
+                    }
+                });
+            });
+            function highlightDepartment(department) {
+                // Reset all highlights
+                departmentItems.forEach(item => {
+                    item.classList.remove('bg-[#138808]', 'bg-opacity-10', 'border-l-4', 'border-[#138808]');
+                });
+                // Highlight the selected department
+                const selectedItem = document.querySelector(`.department-item[data-department="${department}"]`);
+                if(selectedItem) {
+                    selectedItem.classList.add('bg-[#138808]', 'bg-opacity-10', 'border-l-4', 'border-[#138808]');
+                }
+            }
+            // Service card animations
+            gsap.from(".service-card", {
+                scrollTrigger: {
+                    trigger: ".service-card",
+                    start: "top 90%",
+                    toggleActions: "play none none none"
+                },
+                y: 50,
+                opacity: 0,
+                duration: 0.8,
+                stagger: 0.2
+            });
+            // Feedback section animation
+            gsap.from(".feedback-card", {
+                scrollTrigger: {
+                    trigger: ".feedback-card",
+                    start: "top 80%",
+                    toggleActions: "play none none none"
+                },
+                x: -100,
+                opacity: 0,
+                duration: 0.8
+            });
+            gsap.from(".feedback-card + div", {
+                scrollTrigger: {
+                    trigger: ".feedback-card + div",
+                    start: "top 80%",
+                    toggleActions: "play none none none"
+                },
+                x: 100,
+                opacity: 0,
+                duration: 0.8
+            });
+        });
+    </script>
+<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/third-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>