From 3f624534c43b70e56d1ec7932b02743be696632e Mon Sep 17 00:00:00 2001
From: MadhuTiwari-345 <mm003004005@gmail.com>
Date: Wed, 4 Feb 2026 22:08:34 +0530
Subject: [PATCH 1/5] style(a11y): improve WCAG accessibility across the
 website

---
 src/app/layout.tsx                            |  2 +-
 src/app/not-found.tsx                         |  2 +-
 src/components/about/AboutValues.tsx          |  4 +--
 src/components/contact/ContactUs.tsx          | 12 +++----
 src/components/download/InstallationGuide.tsx |  2 +-
 src/components/download/PlatformsList.tsx     |  4 +--
 src/components/download/ZipDownload.tsx       | 21 ++++++------
 src/components/home/FeaturesSection.tsx       | 34 +++++++++++--------
 src/components/home/HeroSection.tsx           | 11 +++---
 src/components/layout/Footer.tsx              | 11 +++---
 src/components/layout/Layout.tsx              |  8 +++--
 src/components/layout/Navbar.tsx              | 16 ++++-----
 .../leaderboard/PublicLeaderboard.tsx         |  6 ++--
 src/components/privacy/PrivacyPolicy.tsx      | 12 +++----
 src/components/terms/TermsOfService.tsx       |  4 +--
 src/components/ui/BackToTop.tsx               |  2 +-
 16 files changed, 82 insertions(+), 69 deletions(-)
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6b40957..fa84ee7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -62,7 +62,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={inter.className} suppressHydrationWarning={true}>
         {children}
         <BackToTop />
       </body>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 5c9031a..6d14619 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -14,7 +14,7 @@ export default function NotFound() {
           <h2 className="text-3xl md:text-4xl font-bold text-gray-200 mb-4">
             Oops! Page Not Found
           </h2>
-          <p className="text-lg text-gray-400 mb-8">
+          <p className="text-lg text-gray-300 mb-8">
             The page you&apos;re looking for doesn&apos;t exist or has been moved.
           </p>
 
diff --git a/src/components/about/AboutValues.tsx b/src/components/about/AboutValues.tsx
index b5dc7e0..9dc0049 100644
--- a/src/components/about/AboutValues.tsx
+++ b/src/components/about/AboutValues.tsx
@@ -30,7 +30,7 @@ const AboutValues = () => {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-16">
           <h2 className="text-4xl font-bold text-white mb-4">Our Core Values</h2>
-          <p className="text-gray-400 max-w-2xl mx-auto">
+          <p className="text-gray-300 max-w-2xl mx-auto">
             The principles that guide everything we do at BrowsePing.
           </p>
         </div>
@@ -43,7 +43,7 @@ const AboutValues = () => {
               </div>
               <div>
                 <h3 className="text-xl font-bold text-white mb-2">{value.title}</h3>
-                <p className="text-gray-400 leading-relaxed">
+                <p className="text-gray-300 leading-relaxed">
                   {value.description}
                 </p>
               </div>
diff --git a/src/components/contact/ContactUs.tsx b/src/components/contact/ContactUs.tsx
index f4184e4..cf85ed3 100644
--- a/src/components/contact/ContactUs.tsx
+++ b/src/components/contact/ContactUs.tsx
@@ -36,7 +36,7 @@ const ContactUs = () => {
               </div>
               <div>
                 <h3 className="text-xl font-bold text-white">General Inquiries</h3>
-                <p className="text-gray-400">Questions, feedback, and support</p>
+                <p className="text-gray-300">Questions, feedback, and support</p>
               </div>
             </div>
 
@@ -58,11 +58,11 @@ const ContactUs = () => {
           <div className="bg-gray-800/30 backdrop-blur-sm border border-gray-700 rounded-2xl p-8">
             <div className="flex items-center space-x-3 mb-6">
               <div className="w-12 h-12 bg-gray-500/20 rounded-xl flex items-center justify-center">
-                <FiGithub className="text-gray-400" size={24} aria-hidden="true" />
+                <FiGithub className="text-gray-300" size={24} aria-hidden="true" />
               </div>
               <div>
                 <h3 className="text-xl font-bold text-white">Development & Open Source</h3>
-                <p className="text-gray-400">Contributing to the project</p>
+                <p className="text-gray-300">Contributing to the project</p>
               </div>
             </div>
 
@@ -115,7 +115,7 @@ const ContactUs = () => {
 
                 <div className="mb-6">
                   <h3 className="text-2xl font-bold text-white mb-2">Akash Kumar</h3>
-                  <p className="text-gray-400 font-medium">Main Developer</p>
+                  <p className="text-gray-300 font-medium">Main Developer</p>
                 </div>
               </div>
 
@@ -154,11 +154,11 @@ const ContactUs = () => {
                     <div className="absolute inset-0 bg-gradient-to-r from-transparent via-gray-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                     <div className="relative flex items-center space-x-3">
                       <div className="w-10 h-10 bg-gray-500/20 group-hover:bg-gray-500/30 rounded-lg flex items-center justify-center transition-colors">
-                        <FiGithub className="text-gray-400" size={20} aria-hidden="true" />
+                        <FiGithub className="text-gray-300" size={20} aria-hidden="true" />
                       </div>
                       <div className="min-w-0">
                         <p className="text-white font-semibold group-hover:text-gray-100 transition-colors">GitHub</p>
-                        <p className="text-gray-400 text-sm font-medium">@akash-kumar-dev</p>
+                        <p className="text-gray-300 text-sm font-medium">@akash-kumar-dev</p>
                       </div>
                     </div>
                   </a>
diff --git a/src/components/download/InstallationGuide.tsx b/src/components/download/InstallationGuide.tsx
index bd8932a..9fa69e0 100644
--- a/src/components/download/InstallationGuide.tsx
+++ b/src/components/download/InstallationGuide.tsx
@@ -183,7 +183,7 @@ const InstallationGuide = () => {
                   <step.icon className="text-purple-400" size={24} aria-hidden="true" />
                 </div>
                 <h4 className="text-lg font-semibold text-white mb-2">{step.title}</h4>
-                <p className="text-gray-400">{step.description}</p>
+                <p className="text-gray-300">{step.description}</p>
               </div>
             ))}
           </div>
diff --git a/src/components/download/PlatformsList.tsx b/src/components/download/PlatformsList.tsx
index 4540065..7f346a1 100644
--- a/src/components/download/PlatformsList.tsx
+++ b/src/components/download/PlatformsList.tsx
@@ -119,7 +119,7 @@ const PlatformsList = () => {
                     href={detectedPlatform.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className={`inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r ${detectedPlatform.color} hover:brightness-110 transition-all text-white font-medium shadow-lg hover:shadow-xl hover:scale-105 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-gray-900 focus:outline-none`}
+                    className={`inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r ${detectedPlatform.color} hover:brightness-110 transition-all text-white font-medium shadow-lg hover:shadow-xl hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900`}
                   >
                     <FiDownload size={18} />
                     <span>Download for {detectedPlatform.name}</span>
@@ -143,7 +143,7 @@ const PlatformsList = () => {
                 href={platform.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                className={`block h-[300px] p-6 rounded-2xl bg-gradient-to-br ${platform.color} ${platform.hover} transition-all duration-300 transform hover:scale-105 hover:shadow-2xl`}
+                className={`block h-[300px] p-6 rounded-2xl bg-gradient-to-br ${platform.color} ${platform.hover} transition-all duration-300 transform hover:scale-105 hover:shadow-2xl focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900`}
               >
                 <div className="text-center flex flex-col justify-between h-full">
                   <div className="mb-4">
diff --git a/src/components/download/ZipDownload.tsx b/src/components/download/ZipDownload.tsx
index 5c96831..4103323 100644
--- a/src/components/download/ZipDownload.tsx
+++ b/src/components/download/ZipDownload.tsx
@@ -1,12 +1,13 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { FiDownload, FiArchive, FiFolder, FiCode, FiCheckCircle } from 'react-icons/fi';
 
 const ZipDownload = () => {
   const [isVisible, setIsVisible] = useState(false);
   const [downloadProgress, setDownloadProgress] = useState(0);
   const [isDownloading, setIsDownloading] = useState(false);
+  const progressBarRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -97,7 +98,7 @@ const ZipDownload = () => {
                   </div>
                   <div>
                     <h3 className="text-lg font-semibold text-white mb-1">{feature.title}</h3>
-                    <p className="text-gray-400">{feature.description}</p>
+                    <p className="text-gray-300">{feature.description}</p>
                   </div>
                 </div>
               ))}
@@ -119,13 +120,13 @@ const ZipDownload = () => {
                 {/* Download progress */}
                 {isDownloading && (
                   <div className="mb-6">
-                    <div className="w-full bg-gray-700 rounded-full h-2 mb-2">
-                      <div
-                        className="bg-gradient-to-r from-green-400 to-blue-400 h-2 rounded-full transition-all duration-300"
-                        style={{ width: `${downloadProgress}%` }}
-                      ></div>
-                    </div>
-                    <p className="text-sm text-gray-400">Downloading... {downloadProgress}%</p>
+                  <div className="w-full bg-gray-700 rounded-full h-2 mb-2">
+                    <div
+                      ref={progressBarRef}
+                      className={`bg-gradient-to-r from-green-400 to-blue-400 h-2 rounded-full transition-all duration-300`}
+                    />
+                  </div>
+                    <p className="text-sm text-gray-300">Downloading... {downloadProgress}%</p>
                   </div>
                 )}
 
@@ -140,7 +141,7 @@ const ZipDownload = () => {
                   </span>
                 </button>
 
-                <p className="text-sm text-gray-400 mt-4">
+                <p className="text-sm text-gray-300 mt-4">
                   Size: ~2.5 MB • Compatible with all browsers
                 </p>
               </div>
diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx
index 5dd6d5e..57f3c31 100644
--- a/src/components/home/FeaturesSection.tsx
+++ b/src/components/home/FeaturesSection.tsx
@@ -194,7 +194,8 @@ const FeaturesSection = () => {
               <div className="hidden md:flex items-center space-x-4">
                 <button
                   onClick={prevSlide}
-                  className="flex items-center justify-center w-16 h-16 bg-gray-800/70 hover:bg-gray-700/70 border border-gray-600/50 rounded-2xl transition-all duration-300 group hover:scale-110 shadow-xl backdrop-blur-xl z-30"
+                  className="flex items-center justify-center w-16 h-16 bg-gray-800/70 hover:bg-gray-700/70 border border-gray-600/50 rounded-2xl transition-all duration-300 group hover:scale-110 shadow-xl backdrop-blur-xl z-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
+                  aria-label="Previous feature"
                 >
                   <FiChevronLeft className="text-gray-300 group-hover:text-white transition-colors" size={24} />
                 </button>
@@ -202,9 +203,10 @@ const FeaturesSection = () => {
                 {/* Card */}
                 <div className="hidden lg:block">
                   {features[(currentIndex - 1 + features.length) % features.length] && (
-                    <div
-                      className="w-64 h-80 bg-gray-800/30 backdrop-blur-xl border border-gray-700/40 rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80"
+                    <button
+                      className="w-64 h-80 bg-gray-800/30 backdrop-blur-xl border border-gray-700/40 rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
                       onClick={prevSlide}
+                      aria-label={`View ${features[(currentIndex - 1 + features.length) % features.length].title} feature`}
                     >
                       <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${features[(currentIndex - 1 + features.length) % features.length].gradient} flex items-center justify-center mb-4`}>
                         <div className="text-white scale-75">
@@ -214,10 +216,10 @@ const FeaturesSection = () => {
                       <h4 className="text-lg font-bold text-white mb-2">
                         {features[(currentIndex - 1 + features.length) % features.length].title}
                       </h4>
-                      <p className="text-sm text-gray-400 line-clamp-3">
+                      <p className="text-sm text-gray-300 line-clamp-3">
                         {features[(currentIndex - 1 + features.length) % features.length].description}
                       </p>
-                    </div>
+                    </button>
                   )}
                 </div>
               </div>
@@ -229,7 +231,7 @@ const FeaturesSection = () => {
                   <div className="text-center mb-4 sm:mb-6">
                     <div className="inline-flex items-center space-x-2 mb-2 sm:mb-3">
                       <div className={`w-2 h-2 rounded-full bg-gradient-to-r ${features[currentIndex].gradient}`}></div>
-                      <span className="text-xs sm:text-sm font-semibold text-gray-400 uppercase tracking-wider">
+                      <span className="text-xs sm:text-sm font-semibold text-gray-300 uppercase tracking-wider">
                         {features[currentIndex].category}
                       </span>
                     </div>
@@ -260,9 +262,9 @@ const FeaturesSection = () => {
                     </div>
 
                     {/* Action Button */}
-                    <button className={`inline-flex items-center space-x-3 bg-gradient-to-r ${features[currentIndex].gradient} hover:shadow-xl text-white px-4 sm:px-6 py-2.5 sm:py-3 rounded-2xl font-semibold transition-all duration-300 hover:scale-105 group text-sm sm:text-base`}>
+                    <button className={`inline-flex items-center space-x-3 bg-gradient-to-r ${features[currentIndex].gradient} hover:shadow-xl text-white px-4 sm:px-6 py-2.5 sm:py-3 rounded-2xl font-semibold transition-all duration-300 hover:scale-105 group text-sm sm:text-base focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900`}>
                       <span>Explore Feature</span>
-                      <FiZap className="group-hover:scale-110 transition-transform duration-300" size={16} />
+                      <FiZap className="group-hover:scale-110 transition-transform duration-300" size={16} aria-hidden="true" />
                     </button>
                   </div>
 
@@ -276,9 +278,10 @@ const FeaturesSection = () => {
                 {/* Side Card */}
                 <div className="hidden lg:block">
                   {features[(currentIndex + 1) % features.length] && (
-                    <div
-                      className="w-64 h-80 bg-gray-800/30 backdrop-blur-xl border border-gray-700/40 rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80"
+                    <button
+                      className="w-64 h-80 bg-gray-800/30 backdrop-blur-xl border border-gray-700/40 rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
                       onClick={nextSlide}
+                      aria-label={`View ${features[(currentIndex + 1) % features.length].title} feature`}
                     >
                       <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${features[(currentIndex + 1) % features.length].gradient} flex items-center justify-center mb-4`}>
                         <div className="text-white scale-75">
@@ -288,16 +291,17 @@ const FeaturesSection = () => {
                       <h4 className="text-lg font-bold text-white mb-2">
                         {features[(currentIndex + 1) % features.length].title}
                       </h4>
-                      <p className="text-sm text-gray-400 line-clamp-3">
+                      <p className="text-sm text-gray-300 line-clamp-3">
                         {features[(currentIndex + 1) % features.length].description}
                       </p>
-                    </div>
+                    </button>
                   )}
                 </div>
 
                 <button
                   onClick={nextSlide}
-                  className="flex items-center justify-center w-16 h-16 bg-gray-800/70 hover:bg-gray-700/70 border border-gray-600/50 rounded-2xl transition-all duration-300 group hover:scale-110 shadow-xl backdrop-blur-xl z-30"
+                  className="flex items-center justify-center w-16 h-16 bg-gray-800/70 hover:bg-gray-700/70 border border-gray-600/50 rounded-2xl transition-all duration-300 group hover:scale-110 shadow-xl backdrop-blur-xl z-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
+                  aria-label="Next feature"
                 >
                   <FiChevronRight className="text-gray-300 group-hover:text-white transition-colors" size={24} />
                 </button>
@@ -317,10 +321,11 @@ const FeaturesSection = () => {
               <button
                 key={index}
                 onClick={() => goToSlide(index)}
-                className={`w-3 h-3 rounded-full transition-all duration-300 ${index === currentIndex
+                className={`w-3 h-3 rounded-full transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900 ${index === currentIndex
                     ? `bg-gradient-to-r ${features[currentIndex].gradient} scale-125`
                     : 'bg-gray-600 hover:bg-gray-500'
                   }`}
+                aria-label={`Go to ${features[index].title} feature`}
               />
             ))}
           </div>
@@ -345,6 +350,7 @@ const FeaturesSection = () => {
               target="_blank"
               rel="noopener noreferrer"
               className="inline-block hover:scale-105 transition-transform duration-300 group"
+              aria-label="View BrowsePing on Product Hunt"
             >
               <Image
                 src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748"
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 40730d6..e38f9d6 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -119,7 +119,7 @@ const HeroSection = () => {
                 href={detectedBrowser.downloadUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className={`bg-gradient-to-r ${detectedBrowser.color} text-white px-8 py-4 rounded-2xl font-semibold text-lg hover:scale-105 transition-all duration-300 shadow-2xl hover:shadow-3xl flex items-center space-x-3 group relative overflow-hidden`}
+                className={`bg-gradient-to-r ${detectedBrowser.color} text-white px-8 py-4 rounded-2xl font-semibold text-lg hover:scale-105 transition-all duration-300 shadow-2xl hover:shadow-3xl flex items-center space-x-3 group relative overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900`}
               >
                 <div className="absolute inset-0 bg-white/20 transform translate-x-[-100%] skew-x-12 group-hover:translate-x-[100%] transition-transform duration-700" />
                 <FiDownload size={20} className="group-hover:animate-bounce" aria-hidden="true" />
@@ -129,7 +129,7 @@ const HeroSection = () => {
             ) : (
               <Link
                 href="/download"
-                className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-4 rounded-2xl font-semibold text-lg hover:scale-105 transition-all duration-300 shadow-2xl hover:shadow-3xl flex items-center space-x-3 group relative overflow-hidden"
+                className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-4 rounded-2xl font-semibold text-lg hover:scale-105 transition-all duration-300 shadow-2xl hover:shadow-3xl flex items-center space-x-3 group relative overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
               >
                 <div className="absolute inset-0 bg-white/20 transform translate-x-[-100%] skew-x-12 group-hover:translate-x-[100%] transition-transform duration-700" />
                 <FiDownload size={20} className="group-hover:animate-bounce" aria-hidden="true" />
@@ -140,7 +140,7 @@ const HeroSection = () => {
 
             <Link
               href="/download"
-              className="border-2 border-gray-600 text-gray-300 px-8 py-4 rounded-2xl font-semibold text-lg hover:border-blue-500 hover:text-blue-400 hover:scale-105 transition-all duration-300 flex items-center space-x-3 group backdrop-blur-sm bg-gray-900/20"
+              className="border-2 border-gray-600 text-gray-300 px-8 py-4 rounded-2xl font-semibold text-lg hover:border-blue-500 hover:text-blue-400 hover:scale-105 transition-all duration-300 flex items-center space-x-3 group backdrop-blur-sm bg-gray-900/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
             >
               <FiDownload size={20} className="group-hover:rotate-12 transition-transform" aria-hidden="true" />
               <span>All Download Options</span>
@@ -155,6 +155,7 @@ const HeroSection = () => {
               target="_blank"
               rel="noopener noreferrer"
               className="inline-block hover:scale-105 transition-transform duration-300 group"
+              title="BrowsePing on Product Hunt"
             >
               <Image
                 src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748"
@@ -169,7 +170,7 @@ const HeroSection = () => {
           {/* Browser Support */}
           <div className={`transition-all duration-1000 delay-1300 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
             }`}>
-            <p className="text-gray-400 mb-6 text-lg">Available for all major browsers</p>
+            <p className="text-gray-300 mb-6 text-lg">Available for all major browsers</p>
             <div className="flex justify-center items-center space-x-12">
               {allBrowsers.map((browser, index) => (
                 <div
@@ -180,7 +181,7 @@ const HeroSection = () => {
                   <div className="text-4xl group-hover:scale-125 group-hover:animate-pulse transition-all duration-300">
                     {browser.icon}
                   </div>
-                  <span className="text-sm text-gray-400 group-hover:text-white transition-colors">
+                  <span className="text-sm text-gray-300 group-hover:text-white transition-colors">
                     {browser.name}
                   </span>
                 </div>
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 43cf909..38fef2e 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -26,7 +26,7 @@ const Footer = () => {
                 <span className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                   BrowsePing
                 </span>
-                <div className="text-sm text-gray-400">Socialize Your Browsing</div>
+                <div className="text-sm text-gray-300">Socialize Your Browsing</div>
               </div>
             </div>
             <p className="text-gray-300 mb-6 max-w-md leading-relaxed text-lg">
@@ -41,6 +41,7 @@ const Footer = () => {
                 target="_blank"
                 rel="noopener noreferrer"
                 className="inline-block hover:scale-105 transition-transform duration-300"
+                title="BrowsePing on Product Hunt"
               >
                 <Image
                   src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748"
@@ -62,7 +63,7 @@ const Footer = () => {
                 <a
                   key={social.label}
                   href={social.href}
-                  className="w-12 h-12 bg-gray-800/50 rounded-xl flex items-center justify-center text-gray-400 hover:text-white hover:bg-gray-700/50 transition-all duration-300 hover:scale-110 group border border-gray-800 hover:border-gray-600"
+                  className="w-12 h-12 bg-gray-800/50 rounded-xl flex items-center justify-center text-gray-300 hover:text-white hover:bg-gray-700/50 transition-all duration-300 hover:scale-110 group border border-gray-800 hover:border-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-950"
                   aria-label={social.label}
                 >
                   <social.icon size={20} className="group-hover:animate-pulse" aria-hidden="true" />
@@ -84,7 +85,7 @@ const Footer = () => {
                 <li key={link.href}>
                   <Link
                     href={link.href}
-                    className="text-gray-300 hover:text-blue-400 transition-colors duration-200 flex items-center space-x-2 group"
+                    className="text-gray-300 hover:text-blue-400 transition-colors duration-200 flex items-center space-x-2 group focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-950 rounded-md px-2 py-1"
                   >
                     <span className="w-0 h-0.5 bg-blue-400 group-hover:w-4 transition-all duration-300"></span>
                     <span>{link.label}</span>
@@ -118,10 +119,10 @@ const Footer = () => {
         </div>
 
         <div className="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center">
-          <div className="text-gray-400 text-sm">
+          <div className="text-gray-300 text-sm">
             © {currentYear} BrowsePing. All rights reserved.
           </div>
-          <div className="flex items-center space-x-2 text-gray-400 text-sm mt-4 md:mt-0">
+          <div className="flex items-center space-x-2 text-gray-300 text-sm mt-4 md:mt-0">
             <span>Made with</span>
             <FiHeart size={16} className="text-red-500 animate-pulse" aria-hidden="true" />
             <span>for better browsing</span>
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index d5de56e..aeb5062 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -13,11 +13,15 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
     <div className="min-h-screen flex flex-col bg-gray-900 relative">
       <MouseFollower />
       <AnimatedBackground />
-      <Navbar />
+      <header>
+        <Navbar />
+      </header>
       <main className="flex-grow relative z-10">
         {children}
       </main>
-      <Footer />
+      <footer>
+        <Footer />
+      </footer>
     </div>
   );
 };
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 9515f4d..28b5c7e 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -43,7 +43,7 @@ const Navbar = () => {
               <span className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                 BrowsePing
               </span>
-              <div className="text-xs text-gray-400 -mt-1">Socialize Your Browsing</div>
+              <div className="text-xs text-gray-300 -mt-1">Socialize Your Browsing</div>
             </div>
           </Link>
 
@@ -53,7 +53,7 @@ const Navbar = () => {
               <Link
                 key={item.href}
                 href={item.href}
-                className={`flex items-center space-x-1 transition-all duration-200 font-medium relative group ${currentpath === item.href ? 'text-yellow-400' : 'text-gray-300 hover:text-blue-400'
+                className={`flex items-center space-x-1 transition-all duration-200 font-medium relative group focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900 rounded-md px-2 py-1 ${currentpath === item.href ? 'text-yellow-400' : 'text-gray-300 hover:text-blue-400'
                   }`}
               >
                 {item.icon}
@@ -69,14 +69,14 @@ const Navbar = () => {
               href="https://github.com/browseping"
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center space-x-2 px-4 py-2 text-gray-300 hover:text-blue-400 border border-gray-600 hover:border-blue-400 rounded-xl transition-all duration-300 font-medium group"
+              className="flex items-center space-x-2 px-4 py-2 text-gray-300 hover:text-blue-400 border border-gray-600 hover:border-blue-400 rounded-xl transition-all duration-300 font-medium group focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
             >
               <FiGithub size={16} className="group-hover:scale-110 transition-transform duration-300" aria-hidden="true" />
               <span>Contribute</span>
             </a>
             <Link
               href="/download"
-              className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-2 rounded-xl font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 flex items-center space-x-2 relative overflow-hidden group"
+              className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-2 rounded-xl font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 flex items-center space-x-2 relative overflow-hidden group focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
             >
               <div className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-500 opacity-0 transition-opacity duration-300"></div>
               <FiDownload size={16} className="relative z-10" aria-hidden="true" />
@@ -88,7 +88,7 @@ const Navbar = () => {
           <div className="md:hidden">
             <button
               onClick={() => setIsMenuOpen(!isMenuOpen)}
-              className="text-gray-300 hover:text-blue-400 transition-colors p-2"
+              className="text-gray-300 hover:text-blue-400 transition-colors p-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900 rounded-md"
               aria-label={isMenuOpen ? "Close menu" : "Open menu"}
               aria-expanded={isMenuOpen}
             >
@@ -105,7 +105,7 @@ const Navbar = () => {
                 <Link
                   key={item.href}
                   href={item.href}
-                  className={`flex items-center space-x-2 px-3 py-2 rounded-md transition-colors ${currentpath === item.href ? 'text-yellow-400' : 'text-gray-300 hover:text-blue-400 hover:bg-gray-800/50'
+                  className={`flex items-center space-x-2 px-3 py-2 rounded-md transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900 ${currentpath === item.href ? 'text-yellow-400' : 'text-gray-300 hover:text-blue-400 hover:bg-gray-800/50'
                     }`}
                   onClick={() => setIsMenuOpen(false)}
                 >
@@ -117,7 +117,7 @@ const Navbar = () => {
                 href="https://github.com/browseping"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="flex items-center space-x-2 px-3 py-2 text-gray-300 hover:text-blue-400 hover:bg-gray-800/50 rounded-md transition-colors border border-gray-600 mt-2"
+                className="flex items-center space-x-2 px-3 py-2 text-gray-300 hover:text-blue-400 hover:bg-gray-800/50 rounded-md transition-colors border border-gray-600 mt-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
                 onClick={() => setIsMenuOpen(false)}
               >
                 <FiGithub size={16} aria-hidden="true" />
@@ -125,7 +125,7 @@ const Navbar = () => {
               </a>
               <Link
                 href="/download"
-                className="flex items-center space-x-2 px-3 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-md font-semibold mt-4"
+                className="flex items-center space-x-2 px-3 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-md font-semibold mt-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
                 onClick={() => setIsMenuOpen(false)}
               >
                 <FiDownload size={16} aria-hidden="true" />
diff --git a/src/components/leaderboard/PublicLeaderboard.tsx b/src/components/leaderboard/PublicLeaderboard.tsx
index 67f4d15..6a2a41a 100644
--- a/src/components/leaderboard/PublicLeaderboard.tsx
+++ b/src/components/leaderboard/PublicLeaderboard.tsx
@@ -148,7 +148,7 @@ const PublicLeaderboard = () => {
               <FiUser className="text-blue-400" size={24} aria-hidden="true" />
             </div>
             <h3 className="text-xl font-bold text-blue-400 mb-2">Server Unreachable</h3>
-            <p className="text-gray-400">
+            <p className="text-gray-300">
               Unable to load leaderboard data at the moment.
             </p>
           </div>
@@ -170,7 +170,7 @@ const PublicLeaderboard = () => {
                 <div className="min-w-[600px]">
                   {/* Header */}
                   <div className="bg-gray-800/50 px-6 py-4 border-b border-gray-700">
-                    <div className="grid grid-cols-10 gap-4 text-gray-400 text-sm font-medium">
+                    <div className="grid grid-cols-10 gap-4 text-gray-300 text-sm font-medium">
                       <div className="col-span-1">Rank</div>
                       <div className="col-span-5">User</div>
                       <div className="col-span-2">Monthly Time</div>
@@ -231,7 +231,7 @@ const PublicLeaderboard = () => {
               {/* Footer */}
               {data.totalUsers > 0 && (
                 <div className="bg-gray-800/30 px-6 py-4 border-t border-gray-700">
-                  <p className="text-gray-400 text-center">
+                  <p className="text-gray-300 text-center">
                     Showing top {data.leaderboard.length} of {data.totalUsers} active users
                   </p>
                 </div>
diff --git a/src/components/privacy/PrivacyPolicy.tsx b/src/components/privacy/PrivacyPolicy.tsx
index 4d39a5c..3dbadd5 100644
--- a/src/components/privacy/PrivacyPolicy.tsx
+++ b/src/components/privacy/PrivacyPolicy.tsx
@@ -23,7 +23,7 @@ const PrivacyPolicy = () => {
             This policy explains how we collect, use, and protect your information.
           </p>
 
-          <div className="mt-6 text-sm text-gray-400">
+          <div className="mt-6 text-sm text-gray-300">
             <p>Last updated: October 2025</p>
           </div>
         </div>
@@ -83,7 +83,7 @@ const PrivacyPolicy = () => {
                   <li>• Active tab information when you choose to share</li>
                   <li>• Online presence status</li>
                 </ul>
-                <p className="text-sm text-gray-400 mt-2">
+                <p className="text-sm text-gray-300 mt-2">
                   <strong>Note:</strong> All browsing data sharing is completely optional and controlled by your privacy settings.
                 </p>
               </div>
@@ -205,19 +205,19 @@ const PrivacyPolicy = () => {
               </p>
               <div className="space-y-3">
                 <div className="flex items-start space-x-3">
-                  <div className="w-2 h-2 bg-gray-400 rounded-full mt-2"></div>
+                  <div className="w-2 h-2 bg-gray-300 rounded-full mt-2"></div>
                   <span><strong>Full Transparency:</strong> All source code is publicly available on GitHub for review and audit</span>
                 </div>
                 <div className="flex items-start space-x-3">
-                  <div className="w-2 h-2 bg-gray-400 rounded-full mt-2"></div>
+                  <div className="w-2 h-2 bg-gray-300 rounded-full mt-2"></div>
                   <span><strong>Community Driven:</strong> Development is transparent and community contributions are welcome</span>
                 </div>
                 <div className="flex items-start space-x-3">
-                  <div className="w-2 h-2 bg-gray-400 rounded-full mt-2"></div>
+                  <div className="w-2 h-2 bg-gray-300 rounded-full mt-2"></div>
                   <span><strong>No Hidden Code:</strong> There are no proprietary or closed-source components that could compromise your privacy</span>
                 </div>
                 <div className="flex items-start space-x-3">
-                  <div className="w-2 h-2 bg-gray-400 rounded-full mt-2"></div>
+                  <div className="w-2 h-2 bg-gray-300 rounded-full mt-2"></div>
                   <span><strong>Self-Hostable:</strong> You can run your own instance if you prefer complete control</span>
                 </div>
               </div>
diff --git a/src/components/terms/TermsOfService.tsx b/src/components/terms/TermsOfService.tsx
index eb9b0d9..35cebbf 100644
--- a/src/components/terms/TermsOfService.tsx
+++ b/src/components/terms/TermsOfService.tsx
@@ -23,7 +23,7 @@ const TermsOfService = () => {
             By using our service, you agree to these terms.
           </p>
 
-          <div className="mt-6 text-sm text-gray-400">
+          <div className="mt-6 text-sm text-gray-300">
             <p>Last updated: October 2025</p>
           </div>
         </div>
@@ -206,7 +206,7 @@ const TermsOfService = () => {
           {/* Open Source License */}
           <div id="section-6" className="bg-gray-800/30 backdrop-blur-sm border border-gray-700 rounded-2xl p-8">
             <h2 className="text-2xl font-bold text-white mb-6 flex items-center space-x-3">
-              <FiGithub className="text-gray-400" size={24} />
+              <FiGithub className="text-gray-300" size={24} />
               <span>6. Open Source License</span>
             </h2>
             <div className="space-y-4 text-gray-300">
diff --git a/src/components/ui/BackToTop.tsx b/src/components/ui/BackToTop.tsx
index a7c8ee9..333d0d1 100644
--- a/src/components/ui/BackToTop.tsx
+++ b/src/components/ui/BackToTop.tsx
@@ -27,7 +27,7 @@ export default function BackToTop() {
     <button
       onClick={scrollToTop}
       aria-label="Back to top"
-      className="fixed bottom-6 right-6 z-50 rounded-full px-4 py-2 shadow-lg transition hover:scale-105"
+      className="fixed bottom-6 right-6 z-50 rounded-full px-4 py-2 shadow-lg transition hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
       style={{
         backgroundColor: "var(--foreground)",
         color: "var(--background)",

From 20645a21649b18788c687913be845124eff7bf50 Mon Sep 17 00:00:00 2001
From: MadhuTiwari-345 <mm003004005@gmail.com>
Date: Mon, 9 Feb 2026 00:14:07 +0530
Subject: [PATCH 2/5] fix(a11y): address Copilot feedback and restore download
 progress bar

---
 src/app/globals.css                     | 91 +++++++++++++++++++++++--
 src/app/layout.tsx                      | 12 +++-
 src/components/download/ZipDownload.tsx | 20 +++---
 src/components/home/FeaturesSection.tsx | 10 ++-
 src/components/layout/Layout.tsx        |  4 +-
 src/components/terms/TermsOfService.tsx |  2 +-
 6 files changed, 116 insertions(+), 23 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41e..4d0bb81 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,24 +3,105 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --muted: #f5f5f5;
+  --muted-foreground: #a3a3a3;
+  --popover: #ffffff;
+  --popover-foreground: #171717;
+  --card: #ffffff;
+  --card-foreground: #171717;
+  --border: #e5e5e5;
+  --input: #e5e5e5;
+  --primary: #171717;
+  --primary-foreground: #ffffff;
+  --secondary: #f5f5f5;
+  --secondary-foreground: #171717;
+  --accent: #f5f5f5;
+  --accent-foreground: #171717;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --ring: #d4d4d8;
+  --radius: 0.5rem;
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+  --muted: #262626;
+  --muted-foreground: #a3a3a3;
+  --popover: #0a0a0a;
+  --popover-foreground: #ededed;
+  --card: #0a0a0a;
+  --card-foreground: #ededed;
+  --border: #262626;
+  --input: #262626;
+  --primary: #ededed;
+  --primary-foreground: #0a0a0a;
+  --secondary: #262626;
+  --secondary-foreground: #ededed;
+  --accent: #262626;
+  --accent-foreground: #ededed;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --ring: #d4d4d8;
+  --radius: 0.5rem;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
+    --muted: #262626;
+    --muted-foreground: #a3a3a3;
+    --popover: #0a0a0a;
+    --popover-foreground: #ededed;
+    --card: #0a0a0a;
+    --card-foreground: #ededed;
+    --border: #262626;
+    --input: #262626;
+    --primary: #ededed;
+    --primary-foreground: #0a0a0a;
+    --secondary: #262626;
+    --secondary-foreground: #ededed;
+    --accent: #262626;
+    --accent-foreground: #ededed;
+    --destructive: #ef4444;
+    --destructive-foreground: #ffffff;
+    --ring: #d4d4d8;
+    --radius: 0.5rem;
   }
 }
 
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-ring: var(--ring);
+  --border-radius: var(--radius);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.progress-bar {
+  width: var(--progress-width, 0%);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fa84ee7..205b207 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import BackToTop from "@/components/ui/BackToTop";
 import type { Metadata, Viewport } from "next";
 import React from "react";
 import { Inter } from "next/font/google";
+import { ThemeProvider } from "@/hooks/useTheme";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -62,9 +63,14 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className} suppressHydrationWarning={true}>
-        {children}
-        <BackToTop />
+      <body className={inter.className}>
+        <ThemeProvider
+          defaultTheme="system"
+          storageKey="browseping-theme"
+        >
+          {children}
+          <BackToTop />
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/src/components/download/ZipDownload.tsx b/src/components/download/ZipDownload.tsx
index 4103323..c35c0db 100644
--- a/src/components/download/ZipDownload.tsx
+++ b/src/components/download/ZipDownload.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FiDownload, FiArchive, FiFolder, FiCode, FiCheckCircle } from 'react-icons/fi';
 
 const ZipDownload = () => {
   const [isVisible, setIsVisible] = useState(false);
   const [downloadProgress, setDownloadProgress] = useState(0);
   const [isDownloading, setIsDownloading] = useState(false);
-  const progressBarRef = useRef<HTMLDivElement>(null);
+
 
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -25,6 +25,8 @@ const ZipDownload = () => {
     return () => observer.disconnect();
   }, []);
 
+
+
   const handleDownload = () => {
     setIsDownloading(true);
     setDownloadProgress(0);
@@ -120,12 +122,14 @@ const ZipDownload = () => {
                 {/* Download progress */}
                 {isDownloading && (
                   <div className="mb-6">
-                  <div className="w-full bg-gray-700 rounded-full h-2 mb-2">
-                    <div
-                      ref={progressBarRef}
-                      className={`bg-gradient-to-r from-green-400 to-blue-400 h-2 rounded-full transition-all duration-300`}
-                    />
-                  </div>
+                    <div className="w-full bg-gray-700 rounded-full h-2 mb-2 overflow-hidden">
+                      <progress
+                        className="w-full h-2 bg-gradient-to-r from-green-400 to-blue-400 rounded-full transition-all duration-300"
+                        value={downloadProgress}
+                        max="100"
+                        aria-label="Download progress"
+                      />
+                    </div>
                     <p className="text-sm text-gray-300">Downloading... {downloadProgress}%</p>
                   </div>
                 )}
diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx
index 57f3c31..2336c20 100644
--- a/src/components/home/FeaturesSection.tsx
+++ b/src/components/home/FeaturesSection.tsx
@@ -193,17 +193,19 @@ const FeaturesSection = () => {
               {/* Navigation Button */}
               <div className="hidden md:flex items-center space-x-4">
                 <button
+                  type="button"
                   onClick={prevSlide}
                   className="flex items-center justify-center w-16 h-16 bg-gray-800/70 hover:bg-gray-700/70 border border-gray-600/50 rounded-2xl transition-all duration-300 group hover:scale-110 shadow-xl backdrop-blur-xl z-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
                   aria-label="Previous feature"
                 >
-                  <FiChevronLeft className="text-gray-300 group-hover:text-white transition-colors" size={24} />
+                  <FiChevronLeft className="text-gray-300 group-hover:text-white transition-colors" size={24} aria-hidden="true" />
                 </button>
 
                 {/* Card */}
                 <div className="hidden lg:block">
                   {features[(currentIndex - 1 + features.length) % features.length] && (
                     <button
+                      type="button"
                       className="w-64 h-80 bg-gray-800/30 backdrop-blur-xl border border-gray-700/40 rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
                       onClick={prevSlide}
                       aria-label={`View ${features[(currentIndex - 1 + features.length) % features.length].title} feature`}
@@ -279,6 +281,7 @@ const FeaturesSection = () => {
                 <div className="hidden lg:block">
                   {features[(currentIndex + 1) % features.length] && (
                     <button
+                      type="button"
                       className="w-64 h-80 bg-gray-800/30 backdrop-blur-xl border border-gray-700/40 rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
                       onClick={nextSlide}
                       aria-label={`View ${features[(currentIndex + 1) % features.length].title} feature`}
@@ -299,11 +302,12 @@ const FeaturesSection = () => {
                 </div>
 
                 <button
+                  type="button"
                   onClick={nextSlide}
                   className="flex items-center justify-center w-16 h-16 bg-gray-800/70 hover:bg-gray-700/70 border border-gray-600/50 rounded-2xl transition-all duration-300 group hover:scale-110 shadow-xl backdrop-blur-xl z-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900"
                   aria-label="Next feature"
                 >
-                  <FiChevronRight className="text-gray-300 group-hover:text-white transition-colors" size={24} />
+                  <FiChevronRight className="text-gray-300 group-hover:text-white transition-colors" size={24} aria-hidden="true" />
                 </button>
               </div>
             </div>
@@ -400,7 +404,7 @@ const FeaturesSection = () => {
                     rel="noopener noreferrer"
                     className="inline-flex items-center space-x-3 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white px-6 py-3 rounded-xl font-semibold transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 group w-full sm:w-auto justify-center"
                   >
-                    <FiGithub size={20} className="group-hover:scale-110 transition-transform duration-300" />
+                      <FiGithub size={20} className="group-hover:scale-110 transition-transform duration-300" aria-hidden="true" />
                     <span>Start Contributing</span>
                   </a>
                 </div>
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index aeb5062..5291420 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -19,9 +19,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       <main className="flex-grow relative z-10">
         {children}
       </main>
-      <footer>
-        <Footer />
-      </footer>
+      <Footer />
     </div>
   );
 };
diff --git a/src/components/terms/TermsOfService.tsx b/src/components/terms/TermsOfService.tsx
index 35cebbf..1c39606 100644
--- a/src/components/terms/TermsOfService.tsx
+++ b/src/components/terms/TermsOfService.tsx
@@ -206,7 +206,7 @@ const TermsOfService = () => {
           {/* Open Source License */}
           <div id="section-6" className="bg-gray-800/30 backdrop-blur-sm border border-gray-700 rounded-2xl p-8">
             <h2 className="text-2xl font-bold text-white mb-6 flex items-center space-x-3">
-              <FiGithub className="text-gray-300" size={24} />
+              <FiGithub className="text-gray-300" size={24} aria-hidden="true" />
               <span>6. Open Source License</span>
             </h2>
             <div className="space-y-4 text-gray-300">

From 4c21a8c26b22fdb70fa5e746c76724d73ee8e3cd Mon Sep 17 00:00:00 2001
From: MadhuTiwari-345 <mm003004005@gmail.com>
Date: Mon, 9 Feb 2026 01:02:56 +0530
Subject: [PATCH 3/5] fix(a11y): remove leftover theme hook import from layout

---
 src/app/layout.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 205b207..6b40957 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,6 @@ import BackToTop from "@/components/ui/BackToTop";
 import type { Metadata, Viewport } from "next";
 import React from "react";
 import { Inter } from "next/font/google";
-import { ThemeProvider } from "@/hooks/useTheme";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -64,13 +63,8 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <ThemeProvider
-          defaultTheme="system"
-          storageKey="browseping-theme"
-        >
-          {children}
-          <BackToTop />
-        </ThemeProvider>
+        {children}
+        <BackToTop />
       </body>
     </html>
   );

From 5943f24982deda4bf03d987369aeef9bf15ce665 Mon Sep 17 00:00:00 2001
From: Akash Kumar <154402631+akash-kumar-dev@users.noreply.github.com>
Date: Mon, 9 Feb 2026 01:25:51 +0530
Subject: [PATCH 4/5] revert changes of global.css

---
 src/app/globals.css | 91 +++------------------------------------------
 1 file changed, 5 insertions(+), 86 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 4d0bb81..a2dc41e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,105 +3,24 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-  --muted: #f5f5f5;
-  --muted-foreground: #a3a3a3;
-  --popover: #ffffff;
-  --popover-foreground: #171717;
-  --card: #ffffff;
-  --card-foreground: #171717;
-  --border: #e5e5e5;
-  --input: #e5e5e5;
-  --primary: #171717;
-  --primary-foreground: #ffffff;
-  --secondary: #f5f5f5;
-  --secondary-foreground: #171717;
-  --accent: #f5f5f5;
-  --accent-foreground: #171717;
-  --destructive: #ef4444;
-  --destructive-foreground: #ffffff;
-  --ring: #d4d4d8;
-  --radius: 0.5rem;
 }
 
-.dark {
-  --background: #0a0a0a;
-  --foreground: #ededed;
-  --muted: #262626;
-  --muted-foreground: #a3a3a3;
-  --popover: #0a0a0a;
-  --popover-foreground: #ededed;
-  --card: #0a0a0a;
-  --card-foreground: #ededed;
-  --border: #262626;
-  --input: #262626;
-  --primary: #ededed;
-  --primary-foreground: #0a0a0a;
-  --secondary: #262626;
-  --secondary-foreground: #ededed;
-  --accent: #262626;
-  --accent-foreground: #ededed;
-  --destructive: #ef4444;
-  --destructive-foreground: #ffffff;
-  --ring: #d4d4d8;
-  --radius: 0.5rem;
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
-    --muted: #262626;
-    --muted-foreground: #a3a3a3;
-    --popover: #0a0a0a;
-    --popover-foreground: #ededed;
-    --card: #0a0a0a;
-    --card-foreground: #ededed;
-    --border: #262626;
-    --input: #262626;
-    --primary: #ededed;
-    --primary-foreground: #0a0a0a;
-    --secondary: #262626;
-    --secondary-foreground: #ededed;
-    --accent: #262626;
-    --accent-foreground: #ededed;
-    --destructive: #ef4444;
-    --destructive-foreground: #ffffff;
-    --ring: #d4d4d8;
-    --radius: 0.5rem;
   }
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-ring: var(--ring);
-  --border-radius: var(--radius);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
 body {
   background: var(--background);
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
-
-.progress-bar {
-  width: var(--progress-width, 0%);
-}

From c1081d989473b0a38df217c10416669f78d12f60 Mon Sep 17 00:00:00 2001
From: Akash Kumar <154402631+akash-kumar-dev@users.noreply.github.com>
Date: Mon, 9 Feb 2026 01:37:35 +0530
Subject: [PATCH 5/5] revert changes from download progress bar

---
 src/components/download/ZipDownload.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/download/ZipDownload.tsx b/src/components/download/ZipDownload.tsx
index c35c0db..afa001f 100644
--- a/src/components/download/ZipDownload.tsx
+++ b/src/components/download/ZipDownload.tsx
@@ -123,12 +123,10 @@ const ZipDownload = () => {
                 {isDownloading && (
                   <div className="mb-6">
                     <div className="w-full bg-gray-700 rounded-full h-2 mb-2 overflow-hidden">
-                      <progress
-                        className="w-full h-2 bg-gradient-to-r from-green-400 to-blue-400 rounded-full transition-all duration-300"
-                        value={downloadProgress}
-                        max="100"
-                        aria-label="Download progress"
-                      />
+                      <div
+                        className="bg-gradient-to-r from-green-400 to-blue-400 h-2 rounded-full transition-all duration-300"
+                        style={{ width: `${downloadProgress}%` }}
+                      ></div>
                     </div>
                     <p className="text-sm text-gray-300">Downloading... {downloadProgress}%</p>
                   </div>
@@ -157,4 +155,4 @@ const ZipDownload = () => {
   );
 };
 
-export default ZipDownload;
\ No newline at end of file
+export default ZipDownload;
