Hugging Face's logo

Spaces:
aniket2025
/
third-website
Running

App Files Community
third-website / index.html
aniket2025's picture
aniket2025
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
f003331 verified
raw
history blame contribute delete
45.9 kB
 <!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>