From 55f59e8e15baba7778d0c1ae7cf41808a8a78696 Mon Sep 17 00:00:00 2001
From: k4rth1k-h3gd3 <karthik.khegde@gmail.com>
Date: Sun, 1 Feb 2026 10:25:46 +0530
Subject: [PATCH 1/3] Added Light theme toggle to the wesbite and some UI
 polish

---
 src/app/globals.css                     |  61 +++++++++++--
 src/app/layout.tsx                      |   2 +-
 src/components/home/FeaturesSection.tsx | 108 ++++++++++++++----------
 src/components/home/HeroSection.tsx     |  33 +++++---
 src/components/layout/Footer.tsx        |  48 +++++++----
 src/components/layout/Navbar.tsx        |  26 +++++-
 src/hooks/useTheme.ts                   |  41 +++++++++
 7 files changed, 234 insertions(+), 85 deletions(-)
 create mode 100644 src/hooks/useTheme.ts

diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41e..884117a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -12,15 +12,64 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
 }
 
-body {
+/* LIGHT MODE BACKGROUND */
+
+/* Light mode background change */
+html:not(.dark) {
+  --hero-bg: linear-gradient(
+    135deg,
+    #f7f9ff 0%,
+    #eef2ff 45%,
+    #ffffff 100%
+  );
+}
+
+/* Dark mode - Orginal */
+html.dark {
+  --hero-bg:
+    radial-gradient(
+      1200px circle at 20% 20%,
+      rgba(88, 101, 242, 0.35),
+      transparent 60%
+    ),
+    radial-gradient(
+      1000px circle at 80% 30%,
+      rgba(168, 85, 247, 0.35),
+      transparent 60%
+    ),
+    linear-gradient(
+      180deg,
+      #020617 0%,
+      #020617 100%
+    );
+}
+
+html {
   background: var(--background);
   color: var(--foreground);
+}
+
+body {
+  background: transparent;
+  color: inherit;
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Override hardcoded text colors */
+body *:not(.gradient-text) {
+  color: inherit;
+}
+
+/* Makes the sections to use theme background colors */
+section,
+main,
+article,
+header
+{
+  background-color: transparent;
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6b40957..1093920 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -52,7 +52,7 @@ export const viewport: Viewport = {
     { media: '(prefers-color-scheme: light)', color: '#1f2937' },
     { media: '(prefers-color-scheme: dark)', color: '#111827' },
   ],
-  colorScheme: 'dark',
+  colorScheme: 'light dark',
 };
 
 export default function RootLayout({
diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx
index 5dd6d5e..0feded1 100644
--- a/src/components/home/FeaturesSection.tsx
+++ b/src/components/home/FeaturesSection.tsx
@@ -103,7 +103,6 @@ const FeaturesSection = () => {
     }
   ];
 
-
   const startAutoScroll = useCallback(() => {
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
@@ -140,28 +139,31 @@ const FeaturesSection = () => {
   };
 
   return (
-    <section ref={sectionRef} className="py-32 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 relative overflow-hidden">
+    <section ref={sectionRef} className="py-32 relative overflow-hidden 
+    text-[var(--foreground)]" style={{ backgroundColor: 'var(--background)' }}
+    >
       {/* Background effects */}
-      <div className="absolute inset-0">
-        <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl" />
-        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl" />
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/5 dark:bg-blue-500/20 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/5 dark:bg-purple-500/20 rounded-full blur-3xl" />
       </div>
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div className="text-center mb-20">
-          <div className="inline-flex items-center space-x-3 bg-gradient-to-r from-blue-500/10 to-purple-500/10 border border-blue-500/20 rounded-full px-8 py-4 mb-8 backdrop-blur-sm">
-            <FiGithub className="text-blue-400" size={24} />
-            <span className="text-blue-300 font-semibold text-lg">Open Source</span>
+          <div className="inline-flex items-center space-x-3 bg-[color:rgba(255,255,255,0.75)] dark:bg-gray-900/20 rounded-full px-8 py-4 mb-8 backdrop-blur-2xl border dark:border-white/100 border-black/100 ease-out dark:hover:shadow-[0_0_24px_rgba(255,255,255,0.3)] hover:shadow-[0_12px_24px_rgba(0,0,0,0.6)] hover:-translate-y-0.5 transition-all duration-300">
+            <FiGithub className="text-blue-600 dark:text-blue-400" size={24} />
+            <span className="text-blue-600 dark:text-blue-300 font-semibold text-lg">
+            Open Source</span>
             <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
           </div>
 
           <h2 className="text-6xl md:text-7xl font-bold mb-8 leading-tight">
-            <span className="text-white">The Future of </span>
+            <span className="text-[var(--foreground)]">The Future of </span>
             <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
               Social Browsing
             </span>
           </h2>
-          <p className="text-2xl text-gray-300 max-w-4xl mx-auto leading-relaxed mb-8">
+          <p className="text-2xl text-[color:rgba(0,0,0,0.7)] dark:text-gray-300 max-w-4xl mx-auto leading-relaxed mb-8">
             BrowsePing is an{' '}
             <span className="text-transparent bg-gradient-to-r from-green-400 to-emerald-400 bg-clip-text font-bold">
               open-source
@@ -173,15 +175,15 @@ const FeaturesSection = () => {
           </p>
 
           {/* Open Source Badge */}
-          <div className="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-4 bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl px-4 py-3 mb-12 text-sm sm:text-base">
+          <div className="flex flex-col sm:flex-row items-center justify-center w-[900px] mx-auto space-y-2 sm:space-y-0 sm:space-x-4 bg-[color:rgba(0,0,0,0.04)] dark:bg-gray-900/20 backdrop-blur-sm border border-[color:rgba(0,0,0,0.08)] dark:border-gray-700/50 rounded-2xl px-4 py-3 mb-12 text-sm sm:text-base">
             <div className="flex items-center space-x-2">
               <FiCode className="text-green-400" size={18} />
-              <span className="text-gray-300">Community-driven development</span>
+              <span className="text-[color:rgba(0,0,0,0.65)] dark:text-gray-300">Community-driven development</span>
             </div>
-            <div className="hidden sm:block w-1 h-1 bg-gray-500 rounded-full"></div>
-            <span className="text-gray-300">Transparent & extensible</span>
-            <div className="hidden sm:block w-1 h-1 bg-gray-500 rounded-full"></div>
-            <span className="text-gray-300">MIT Licensed</span>
+            <div className="hidden sm:block w-1 h-1 bg-gray-400 dark:bg-gray-500 rounded-full"></div>
+            <span className="text-[color:rgba(0,0,0,0.65)] dark:text-gray-300">Transparent & extensible</span>
+            <div className="hidden sm:block w-1 h-1 bg-gray-400 dark:bg-gray-500 rounded-full"></div>
+            <span className="text-[color:rgba(0,0,0,0.65)] dark:text-gray-300">MIT Licensed</span>
           </div>
         </div>
 
@@ -194,16 +196,23 @@ 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-[color:rgba(0,0,0,0.06)] dark:bg-gray-800/70
+                  hover:bg-[color:rgba(0,0,0,0.1)] dark:hover:bg-gray-700/70
+                  border border-[color:rgba(0,0,0,0.12)] dark:border-gray-600/50 rounded-2xl transition-all duration-300 group hover:scale-110 shadow-xl backdrop-blur-xl z-30"
                 >
-                  <FiChevronLeft className="text-gray-300 group-hover:text-white transition-colors" size={24} />
+                  <FiChevronLeft className="text-[color:rgba(0,0,0,0.65)] dark:text-gray-300 group-hover:text-black dark:group-hover:text-white transition-colors" size={24} />
                 </button>
 
                 {/* 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"
+                      className="w-64 h-80 bg-[color:rgba(0,0,0,0.04)] dark:bg-gray-800/30
+                      backdrop-blur-xl
+                      border border-[color:rgba(0,0,0,0.08)] dark:border-gray-700/40
+                      rounded-2xl p-6 cursor-pointer
+                      hover:scale-105 transition-all duration-500
+                      opacity-60 hover:opacity-80"
                       onClick={prevSlide}
                     >
                       <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`}>
@@ -211,10 +220,10 @@ const FeaturesSection = () => {
                           {features[(currentIndex - 1 + features.length) % features.length].icon}
                         </div>
                       </div>
-                      <h4 className="text-lg font-bold text-white mb-2">
+                      <h4 className="text-lg font-bold text-[var(--foreground)] 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-[color:rgba(0,0,0,0.55)] dark:text-gray-400 line-clamp-3">
                         {features[(currentIndex - 1 + features.length) % features.length].description}
                       </p>
                     </div>
@@ -224,12 +233,13 @@ const FeaturesSection = () => {
 
               {/* Center Card */}
               <div className="relative z-20 w-full max-w-2xl mx-auto px-4 flex items-center justify-center">
-                <div className="bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-2xl border border-gray-600/50 rounded-3xl p-4 sm:p-6 lg:p-8 shadow-2xl transform transition-all duration-700 w-full my-4 md:my-0">
+                <div className="bg-[color:rgba(255,255,255,0.7)] dark:bg-gradient-to-br dark:from-gray-800/60 dark:to-gray-900/60 backdrop-blur-2xl 
+                border border-[color:rgba(0,0,0,0.12)] dark:border-gray-600/50 rounded-3xl p-4 sm:p-6 lg:p-8 shadow-2xl transform transition-all duration-700 w-full my-4 md:my-0">
                   {/* Current feature content */}
                   <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-[color:rgba(0,0,0,0.55)] dark:text-gray-400 uppercase tracking-wider">
                         {features[currentIndex].category}
                       </span>
                     </div>
@@ -241,20 +251,20 @@ const FeaturesSection = () => {
                       <div className={`absolute inset-0 rounded-3xl bg-gradient-to-br ${features[currentIndex].gradient} blur-xl opacity-60 animate-pulse`} />
                     </div>
 
-                    <h3 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2 sm:mb-3">
+                    <h3 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-[var(--foreground)] mb-2 sm:mb-3">
                       {features[currentIndex].title}
                     </h3>
 
-                    <p className="text-base sm:text-lg text-gray-300 leading-relaxed mb-4 sm:mb-6 max-w-lg mx-auto px-2 sm:px-0">
+                    <p className="text-base sm:text-lg text-[color:rgba(0,0,0,0.65)] dark:text-gray-300 leading-relaxed mb-4 sm:mb-6 max-w-lg mx-auto px-2 sm:px-0">
                       {features[currentIndex].detailedDescription}
                     </p>
 
                     {/* Benefits */}
                     <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-3 mb-4 sm:mb-6">
                       {features[currentIndex].benefits.map((benefit, idx) => (
-                        <div key={idx} className="flex items-center justify-center space-x-2 bg-gray-700/30 rounded-xl px-2 sm:px-3 py-1.5 sm:py-2">
+                        <div key={idx} className="flex items-center justify-center space-x-2 bg-[color:rgba(0,0,0,0.05)] dark:bg-gray-700/30 rounded-xl px-2 sm:px-3 py-1.5 sm:py-2">
                           <div className={`w-2 h-2 rounded-full bg-gradient-to-r ${features[currentIndex].gradient}`}></div>
-                          <span className="text-xs sm:text-sm text-gray-300 font-medium">{benefit}</span>
+                          <span className="text-xs sm:text-sm text-[color:rgba(0,0,0,0.65)] dark:text-gray-300 font-medium">{benefit}</span>
                         </div>
                       ))}
                     </div>
@@ -277,7 +287,9 @@ const FeaturesSection = () => {
                 <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"
+                      className="w-64 h-80 
+                      bg-[color:rgba(0,0,0,0.04)] dark:bg-gray-800/30 backdrop-blur-xl border border-[color:rgba(0,0,0,0.08)] dark:border-gray-700/40
+                      rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80"
                       onClick={nextSlide}
                     >
                       <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`}>
@@ -285,10 +297,10 @@ const FeaturesSection = () => {
                           {features[(currentIndex + 1) % features.length].icon}
                         </div>
                       </div>
-                      <h4 className="text-lg font-bold text-white mb-2">
+                      <h4 className="text-lg font-bold text-[var(--foreground)] mb-2">
                         {features[(currentIndex + 1) % features.length].title}
                       </h4>
-                      <p className="text-sm text-gray-400 line-clamp-3">
+                      <p className="text-sm text-[color:rgba(0,0,0,0.55)] dark:text-gray-400 line-clamp-3">
                         {features[(currentIndex + 1) % features.length].description}
                       </p>
                     </div>
@@ -297,17 +309,23 @@ const FeaturesSection = () => {
 
                 <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-[color:rgba(0,0,0,0.06)] dark:bg-gray-800/70
+                    hover:bg-[color:rgba(0,0,0,0.1)] dark:hover:bg-gray-700/70
+                    border border-[color:rgba(0,0,0,0.12)] dark:border-gray-600/50
+                    rounded-2xl transition-all duration-300
+                    group hover:scale-110 shadow-xl backdrop-blur-xl z-30"
                 >
-                  <FiChevronRight className="text-gray-300 group-hover:text-white transition-colors" size={24} />
+                  <FiChevronRight className="text-[color:rgba(0,0,0,0.65)] dark:text-gray-300 group-hover:text-black dark:group-hover:text-white transition-colors" size={24} />
                 </button>
               </div>
             </div>
 
             {/* Background decoration */}
             <div className="absolute inset-0 pointer-events-none">
-              <div className={`absolute top-0 left-1/4 w-96 h-96 bg-gradient-to-br ${features[currentIndex].gradient} opacity-10 rounded-full blur-3xl transition-all duration-1000`} />
-              <div className={`absolute bottom-0 right-1/4 w-80 h-80 bg-gradient-to-br ${features[currentIndex].gradient} opacity-5 rounded-full blur-2xl transition-all duration-1000`} />
+              <div className={`absolute top-0 left-1/4 w-96 h-96 bg-gradient-to-br 
+              ${features[currentIndex].gradient} opacity-[0.025] dark:opacity-10 rounded-full blur-3xl transition-all duration-1000`} />
+              <div className={`absolute bottom-0 right-1/4 w-80 h-80 bg-gradient-to-br ${features[currentIndex].gradient} opacity-[0.015] dark:opacity-5 rounded-full blur-2xl transition-all duration-1000`} />
             </div>
           </div>
 
@@ -319,7 +337,7 @@ const FeaturesSection = () => {
                 onClick={() => goToSlide(index)}
                 className={`w-3 h-3 rounded-full transition-all duration-300 ${index === currentIndex
                     ? `bg-gradient-to-r ${features[currentIndex].gradient} scale-125`
-                    : 'bg-gray-600 hover:bg-gray-500'
+                    : 'bg-[color:rgba(0,0,0,0.25)] hover:bg-[color:rgba(0,0,0,0.4)]   dark:bg-gray-600 dark:hover:bg-gray-500'
                   }`}
               />
             ))}
@@ -329,12 +347,12 @@ const FeaturesSection = () => {
         {/* Product Hunt Badge Section */}
         <div className="text-center mt-16 mb-16">
           <div className="mb-6">
-            <h3 className="text-2xl md:text-3xl font-bold text-white mb-4">
+            <h3 className="text-2xl md:text-3xl font-bold text-[var(--foreground)] mb-4">
               <span className="bg-gradient-to-r from-orange-400 to-pink-400 bg-clip-text text-transparent">
                 Featured on Product Hunt
               </span>
             </h3>
-            <p className="text-gray-300 text-lg max-w-2xl mx-auto">
+            <p className="text-[color:rgba(0,0,0,0.65)] dark:text-gray-300 text-lg max-w-2xl mx-auto">
               Show your support and help us reach more users by upvoting BrowsePing on Product Hunt!
             </p>
           </div>
@@ -347,11 +365,11 @@ const FeaturesSection = () => {
               className="inline-block hover:scale-105 transition-transform duration-300 group"
             >
               <Image
-                src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748"
+                src= "https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark"
                 alt="BrowsePing - Socialize your presence and make browsing insightful. | Product Hunt"
                 width={250}
                 height={54}
-                className="rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 border border-gray-700/50 hover:border-orange-500/50"
+                className="rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
               />
             </a>
           </div>
@@ -361,11 +379,13 @@ const FeaturesSection = () => {
         <div className="text-center mt-16">
           <div className="relative max-w-5xl mx-auto">
             <div className="absolute inset-0">
-              <div className="absolute top-0 left-1/4 w-96 h-96 bg-gradient-to-r from-green-500/20 to-emerald-500/20 rounded-full blur-3xl"></div>
-              <div className="absolute bottom-0 right-1/4 w-80 h-80 bg-gradient-to-r from-blue-500/15 to-cyan-500/15 rounded-full blur-2xl"></div>
+              <div className="absolute top-0 left-1/4 w-96 h-96 bg-gradient-to-r from-green-500/10 dark:from-green-500/20 to-emerald-500/10 dark:to-emerald-500/20 rounded-full blur-3xl"></div>
+              <div className="absolute bottom-0 right-1/4 w-80 h-80 bg-gradient-to-r from-blue-500/8 dark:from-blue-500/15 to-cyan-500/8 dark:to-cyan-500/15 rounded-full blur-2xl"></div>
             </div>
 
-            <div className="relative bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-2xl border border-green-500/30 rounded-3xl p-6 lg:p-8 xl:p-10 shadow-2xl">
+            <div className="relative bg-[color:rgba(255,255,255,0.75)] 
+            dark:bg-gradient-to-br dark:from-gray-800/60 dark:to-gray-900/60
+            backdrop-blur-2xl border border-[color:rgba(0,0,0,0.12)] dark:border-green-500/30 rounded-3xl p-6 lg:p-8 xl:p-10 shadow-2xl">
               <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-6 lg:space-y-0">
                 {/* Content section */}
                 <div className="text-center lg:text-left flex-1">
@@ -373,7 +393,7 @@ const FeaturesSection = () => {
                     <div className="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl">
                       <FiGithub className="text-white" size={24} />
                     </div>
-                    <h3 className="text-2xl sm:text-3xl font-bold text-white">
+                    <h3 className="text-2xl sm:text-3xl font-bold text-[var(--foreground)]">
                       <span className="bg-gradient-to-r from-green-400 to-emerald-400 bg-clip-text text-transparent">
                         Open Source
                       </span>
@@ -381,7 +401,7 @@ const FeaturesSection = () => {
                     </h3>
                   </div>
 
-                  <p className="text-base lg:text-lg text-gray-300 leading-relaxed max-w-2xl mx-auto lg:mx-0">
+                  <p className="text-base lg:text-lg text-[color:rgba(0,0,0,0.65)] dark:text-gray-300 leading-relaxed max-w-2xl mx-auto lg:mx-0">
                     Join developers building the future of social browsing. Contribute and help shape the project.
                   </p>
                 </div>
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 40730d6..349b1ef 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -33,17 +33,22 @@ const HeroSection = () => {
   }, []);
 
   return (
-    <section
-      ref={heroRef}
-      className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900/20 to-purple-900/20 relative overflow-hidden flex items-center pt-20"
-    >
-      {/* Animated gradient background */}
-      <div
-        className="absolute inset-0 opacity-30"
-        style={{
-          background: `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, rgba(59, 130, 246, 0.3) 0%, transparent 50%)`
-        }}
-      />
+  <section
+    ref={heroRef}
+    className="min-h-screen relative overflow-hidden flex items-center pt-20 text-[var(--foreground)]"
+    style={{ background: 'var(--hero-bg)' }}
+  >
+    {/* Animated gradient background */}
+    <div
+      className="absolute inset-0 opacity-20 dark:opacity-30"
+      style={{
+        background: `radial-gradient(
+          circle at ${mousePosition.x}% ${mousePosition.y}%,
+          rgba(59, 130, 246, 0.3) 0%,
+          transparent 50%
+        )`
+      }}
+    />
 
       {/* Grid pattern overlay */}
       <div className="absolute inset-0 opacity-40" style={{
@@ -59,7 +64,7 @@ const HeroSection = () => {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div className="text-center">
           {/* Badge */}
-          <div className={`inline-flex items-center space-x-3 bg-gradient-to-r from-green-500/10 via-blue-500/10 to-purple-500/10 border border-green-500/20 rounded-full px-6 py-3 mb-8 backdrop-blur-sm transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
+          <div className={`inline-flex items-center space-x-3 bg-gradient-to-r from-green-500/10 via-blue-500/10 to-purple-500/10 bg-gray-900/20 rounded-full px-6 py-3 mb-8 backdrop-blur-sm border dark:border-black/100 ease-out hover:shadow-[0_0_24px_rgba(255,255,255,0.3)] dark:hover:shadow-[0_0_24px_rgba(255,255,255,0.3)] hover:-translate-y-0.4 transition-all duration-300 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
             }`}>
             <FiGithub className="text-green-400" size={18} aria-hidden="true" />
             <span className="text-green-300 text-sm font-semibold">Open Source</span>
@@ -157,11 +162,11 @@ const HeroSection = () => {
               className="inline-block hover:scale-105 transition-transform duration-300 group"
             >
               <Image
-                src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748"
+                src= "https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark"
                 alt="BrowsePing - Socialize your presence and make browsing insightful. | Product Hunt"
                 width={250}
                 height={54}
-                className="rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 border border-gray-700/50 hover:border-gray-600/50"
+                className="rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
               />
             </a>
           </div>
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 43cf909..8ff049a 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -7,11 +7,21 @@ const Footer = () => {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-gray-950 text-white relative overflow-hidden">
+    <footer
+      className="relative overflow-hidden border-t"
+      style={{ background: "var(--background)", color: "var(--foreground)",
+      borderColor: "color-mix(in srgb, var(--foreground) 10%, transparent)"
+      }}  
+    >
+    <div className="w-full h-px"
+      style={{ background: "linear-gradient(to right, transparent, color-mix(in srgb, var(--foreground) 20%, transparent), transparent)"
+      }}
+    />
+
       {/* Background effects */}
-      <div className="absolute inset-0">
-        <div className="absolute top-0 left-0 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl" />
-        <div className="absolute bottom-0 right-0 w-96 h-96 bg-purple-500/5 rounded-full blur-3xl" />
+      <div className="absolute inset-0 pointer-events-none hidden dark:block">
+        <div className="absolute top-0 left-0 w-96 h-96 bg-blue-500/5 dark:bg-blue-500/20 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 right-0 w-96 h-96 bg-purple-500/5 dark:bg-purple-500/20 rounded-full blur-3xl" />
       </div>
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 relative z-10">
@@ -20,16 +30,16 @@ const Footer = () => {
           <div className="col-span-1 md:col-span-2">
             <div className="flex items-center space-x-3 mb-6">
               <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-xl">
-                <span className="text-white text-2xl font-bold">BP</span>
+                <span className="text-2xl font-bold">BP</span>
               </div>
               <div>
                 <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 opacity-70">Socialize Your Browsing</div>
               </div>
             </div>
-            <p className="text-gray-300 mb-6 max-w-md leading-relaxed text-lg">
+            <p className="opacity-80 mb-6 max-w-md leading-relaxed text-lg">
               Transform your solitary browsing into a vibrant social experience. Connect with friends,
               share your digital presence, and discover what&apos;s capturing everyone&apos;s attention across the web.
             </p>
@@ -43,7 +53,7 @@ const Footer = () => {
                 className="inline-block hover:scale-105 transition-transform duration-300"
               >
                 <Image
-                  src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark&t=1761421790748"
+                  src= "https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1030190&theme=dark"
                   alt="BrowsePing - Socialize your presence and make browsing insightful. | Product Hunt"
                   width={250}
                   height={54}
@@ -62,7 +72,8 @@ 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 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 bg-black/5 dark:bg-gray-800/60 hover:bg-black/10 dark:hover:bg-gray-700/60
+                  border border-black/10 dark:border-gray-700 text-black/70 dark:text-gray-300 hover:text-black dark:hover:text-white"
                   aria-label={social.label}
                 >
                   <social.icon size={20} className="group-hover:animate-pulse" aria-hidden="true" />
@@ -73,7 +84,8 @@ const Footer = () => {
 
           {/* Quick Links */}
           <div>
-            <h3 className="font-bold text-xl mb-6 text-white">Quick Links</h3>
+            <h3 className="font-bold text-xl mb-6 text-[var(--foreground)]">
+            Quick Links</h3>
             <ul className="space-y-4">
               {[
                 { href: '/download', label: 'Download' },
@@ -84,7 +96,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="opacity-80 hover:opacity-100 hover:text-blue-500 transition-colors duration-200 flex items-center space-x-2 group"
                   >
                     <span className="w-0 h-0.5 bg-blue-400 group-hover:w-4 transition-all duration-300"></span>
                     <span>{link.label}</span>
@@ -96,7 +108,8 @@ const Footer = () => {
 
           {/* Support */}
           <div>
-            <h3 className="font-bold text-xl mb-6 text-white">Support</h3>
+            <h3 className="font-bold text-xl mb-6 text-[var(--foreground)]">
+            Support</h3>
             <ul className="space-y-4">
               {[
                 { href: '/help', label: 'Help Center' },
@@ -106,9 +119,9 @@ 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="opacity-80 hover:opacity-100 hover:text-blue-500 transition-colors duration-200 flex items-center space-x-2 group"
                   >
-                    <span className="w-0 h-0.5 bg-blue-400 group-hover:w-4 transition-all duration-300"></span>
+                    <span className="w-0 h-0.5 bg-blue-500 group-hover:w-4 transition-all duration-300"></span>
                     <span>{link.label}</span>
                   </Link>
                 </li>
@@ -117,11 +130,12 @@ const Footer = () => {
           </div>
         </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="border-t border-[color:rgba(0,0,0,0.1)] dark:border-gray-800
+        mt-16 pt-8 flex flex-col md:flex-row justify-between items-center">
+          <div className="opacity-60 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 opacity-60 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/Navbar.tsx b/src/components/layout/Navbar.tsx
index 9515f4d..64dd960 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { FiSun, FiMoon } from 'react-icons/fi';
+import { useTheme } from '@/hooks/useTheme';
 import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { FiMenu, FiX, FiDownload, FiBarChart, FiShield, FiGithub } from 'react-icons/fi';
@@ -10,6 +12,8 @@ const Navbar = () => {
   const [scrolled, setScrolled] = useState(false);
   const currentpath = usePathname();
 
+  const { isDark, toggleTheme } = useTheme();
+
   useEffect(() => {
     const handleScroll = () => {
       setScrolled(window.scrollY > 50);
@@ -28,19 +32,28 @@ const Navbar = () => {
   ];
 
   return (
+<<<<<<< HEAD
     <nav className={`fixed top-0 w-full z-40 transition-all duration-300 ${scrolled
         ? 'bg-gray-900/95 backdrop-blur-lg border-b border-gray-800'
         : 'bg-transparent'
       }`}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+=======
+    <nav className={`fixed top-0 w-full z-40 transition-all duration-300 ${
+      scrolled 
+        ? 'bg-[var(--background)]/95 backdrop-blur-lg border-b border-black/10 dark:border-white/10' 
+        : 'bg-transparent'
+    }`}>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-[var(--foreground)]">
+>>>>>>> 889ec75 (Added Light theme toggle to the wesbite and some UI polish)
         <div className="flex justify-between items-center h-16">
           {/* Logo */}
           <Link href="/" className="flex items-center space-x-3 group">
-            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-xl group-hover:scale-105 transition-all duration-300">
+            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg transition-all duration-300 ease-out group-hover:-rotate-[12deg] group-hover:scale-110 group-hover:shadow-xl">
               <span className="text-white text-xl font-bold">BP</span>
             </div>
             <div>
-              <span className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+              <span className="gradient-text text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
                 BrowsePing
               </span>
               <div className="text-xs text-gray-400 -mt-1">Socialize Your Browsing</div>
@@ -65,11 +78,18 @@ const Navbar = () => {
 
           {/* Action Buttons - Desktop */}
           <div className="hidden md:flex items-center space-x-4">
+              <button
+                onClick={toggleTheme}
+                aria-label="Toggle theme"
+                className="p-3 rounded-xl text-gray-300 hover:text-yellow-400 transition-all duration-200 hover:rotate-[20deg] hover:scale-125"
+              >
+              {isDark ? <FiSun size={22} /> : <FiMoon size={22} />}
+              </button>
             <a
               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 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30 group"
             >
               <FiGithub size={16} className="group-hover:scale-110 transition-transform duration-300" aria-hidden="true" />
               <span>Contribute</span>
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
new file mode 100644
index 0000000..b0cda43
--- /dev/null
+++ b/src/hooks/useTheme.ts
@@ -0,0 +1,41 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+const THEME_KEY = 'browseping-theme';
+
+export function useTheme() {
+  const [isDark, setIsDark] = useState<boolean>(false);
+
+  // Load saved theme on mount
+  useEffect(() => {
+    const storedTheme = localStorage.getItem(THEME_KEY);
+
+    if (storedTheme === 'dark') {
+      setIsDark(true);
+      document.documentElement.classList.add('dark');
+    } else if (storedTheme === 'light') {
+      setIsDark(false);
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+
+  // Update DOM + storage when toggled
+  const toggleTheme = () => {
+    setIsDark(prev => {
+      const next = !prev;
+
+      if (next) {
+        document.documentElement.classList.add('dark');
+        localStorage.setItem(THEME_KEY, 'dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+        localStorage.setItem(THEME_KEY, 'light');
+      }
+
+      return next;
+    });
+  };
+
+  return { isDark, toggleTheme };
+}
\ No newline at end of file

From 065d9162a314cfae1aa1a9ee659a17f672a2a00f Mon Sep 17 00:00:00 2001
From: k4rth1k-h3gd3 <karthik.khegde@gmail.com>
Date: Wed, 4 Feb 2026 14:31:06 +0530
Subject: [PATCH 2/3] Fix UI theming conflicts and restore visual consistency
 across components

---
 src/app/globals.css                     |   8 +-
 src/components/home/FeaturesSection.tsx | 105 ++++++++++++++++--------
 src/components/home/HeroSection.tsx     |  60 ++++++++++----
 src/components/layout/Footer.tsx        |  17 ++--
 src/components/layout/Layout.tsx        |   2 +-
 src/components/layout/Navbar.tsx        |  55 +++++++++++--
 src/hooks/useTheme.ts                   |  21 ++---
 7 files changed, 193 insertions(+), 75 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 884117a..8c2e814 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,6 +3,8 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --foreground-rgb: 23, 23, 23;
+  --background-rgb: 255, 255, 255;
 }
 
 @theme inline {
@@ -15,6 +17,8 @@
 .dark {
   --background: #0a0a0a;
   --foreground: #ededed;
+  --foreground-rgb: 237, 237, 237;
+  --background-rgb: 10, 10, 10;
 }
 
 /* LIGHT MODE BACKGROUND */
@@ -61,8 +65,8 @@ body {
 }
 
 /* Override hardcoded text colors */
-body *:not(.gradient-text) {
-  color: inherit;
+.theme-root {
+  color: var(--foreground);
 }
 
 /* Makes the sections to use theme background colors */
diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx
index 0feded1..a4bd28f 100644
--- a/src/components/home/FeaturesSection.tsx
+++ b/src/components/home/FeaturesSection.tsx
@@ -7,6 +7,7 @@ import { FaTrophy } from 'react-icons/fa';
 
 const FeaturesSection = () => {
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
   const sectionRef = useRef<HTMLDivElement>(null);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -123,6 +124,27 @@ const FeaturesSection = () => {
     };
   }, [startAutoScroll]);
 
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => {
+      if (sectionRef.current) {
+        observer.unobserve(sectionRef.current);
+      }
+    };
+  }, []);
+
   const nextSlide = () => {
     setCurrentIndex((prev) => (prev + 1) % features.length);
     startAutoScroll();
@@ -150,20 +172,37 @@ const FeaturesSection = () => {
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div className="text-center mb-20">
-          <div className="inline-flex items-center space-x-3 bg-[color:rgba(255,255,255,0.75)] dark:bg-gray-900/20 rounded-full px-8 py-4 mb-8 backdrop-blur-2xl border dark:border-white/100 border-black/100 ease-out dark:hover:shadow-[0_0_24px_rgba(255,255,255,0.3)] hover:shadow-[0_12px_24px_rgba(0,0,0,0.6)] hover:-translate-y-0.5 transition-all duration-300">
-            <FiGithub className="text-blue-600 dark:text-blue-400" size={24} />
-            <span className="text-blue-600 dark:text-blue-300 font-semibold text-lg">
-            Open Source</span>
-            <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+          <div
+            className={`inline-flex items-center space-x-3
+              bg-gradient-to-r from-blue-500/25 via-purple-500/20 to-cyan-500/26
+              rounded-full px-6 py-3
+              backdrop-blur-sm hover:backdrop-blur-md
+              border border-black/70
+              hover:drop-shadow-[0_8px_16px_rgba(0,0,0,0.35)]
+              hover:drop-shadow-[0_20px_40px_rgba(0,0,0,0.45)]
+              hover:drop-shadow-[0_0_18px_rgba(0,0,0,0.25)]
+              hover:-translate-y-0.5
+              transition-all duration-300 ease-out
+              ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}
+            `}
+          >
+            <FiGithub className="text-blue-600" size={24} />
+            <span className="text-blue-500 font-semibold text-lg">
+              Open Source
+            </span>
+            <div className="w-2 h-2 bg-green-600 rounded-full animate-pulse" />
           </div>
+        </div>
 
+          <div className="text-center max-w-5xl mx-auto">
           <h2 className="text-6xl md:text-7xl font-bold mb-8 leading-tight">
             <span className="text-[var(--foreground)]">The Future of </span>
-            <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
+            <span className="bg-gradient-to-r from-blue-300 via-purple-500 to-cyan-500 bg-clip-text text-transparent">
               Social Browsing
             </span>
           </h2>
-          <p className="text-2xl text-[color:rgba(0,0,0,0.7)] dark:text-gray-300 max-w-4xl mx-auto leading-relaxed mb-8">
+
+          <p className="text-2xl leading-relaxed mb-8" style={{ color: 'var(--foreground)', opacity: 0.9 }}>
             BrowsePing is an{' '}
             <span className="text-transparent bg-gradient-to-r from-green-400 to-emerald-400 bg-clip-text font-bold">
               open-source
@@ -173,17 +212,19 @@ const FeaturesSection = () => {
               vibrant social experience
             </span>
           </p>
+          </div>
 
           {/* Open Source Badge */}
-          <div className="flex flex-col sm:flex-row items-center justify-center w-[900px] mx-auto space-y-2 sm:space-y-0 sm:space-x-4 bg-[color:rgba(0,0,0,0.04)] dark:bg-gray-900/20 backdrop-blur-sm border border-[color:rgba(0,0,0,0.08)] dark:border-gray-700/50 rounded-2xl px-4 py-3 mb-12 text-sm sm:text-base">
+          <div className="flex flex-col sm:flex-row items-center justify-center max-w-4xl mx-auto space-y-2 sm:space-y-0 sm:space-x-4 backdrop-blur-sm border rounded-2xl px-4 py-3 mb-12 text-sm sm:text-base" style={{ backgroundColor: 'rgba(var(--foreground-rgb), 0.08)', borderColor: 'rgba(var(--foreground-rgb), 0.3)' }}>
             <div className="flex items-center space-x-2">
               <FiCode className="text-green-400" size={18} />
-              <span className="text-[color:rgba(0,0,0,0.65)] dark:text-gray-300">Community-driven development</span>
+              <span className="text-[var(--foreground)]">Community-driven development</span>
             </div>
-            <div className="hidden sm:block w-1 h-1 bg-gray-400 dark:bg-gray-500 rounded-full"></div>
-            <span className="text-[color:rgba(0,0,0,0.65)] dark:text-gray-300">Transparent & extensible</span>
-            <div className="hidden sm:block w-1 h-1 bg-gray-400 dark:bg-gray-500 rounded-full"></div>
-            <span className="text-[color:rgba(0,0,0,0.65)] dark:text-gray-300">MIT Licensed</span>
+            <div className="hidden sm:block w-1 h-1 bg-[var(--foreground)]/40 rounded-full"></div>
+            <span className="text-[var(--foreground)]">Transparent & extensible
+            </span>
+            <div className="hidden sm:block w-1 h-1 bg-[var(--foreground)]/40 rounded-full"></div>
+            <span className="text-[var(--foreground)]">MIT Licensed</span>
           </div>
         </div>
 
@@ -196,9 +237,7 @@ 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-[color:rgba(0,0,0,0.06)] dark:bg-gray-800/70
-                  hover:bg-[color:rgba(0,0,0,0.1)] dark:hover:bg-gray-700/70
-                  border border-[color:rgba(0,0,0,0.12)] dark: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 dark:bg-gray-800/70 dark:hover:bg-gray-700/70 dark:border-gray-600/50 rounded-2xl transition-all duration-300 group hover:scale-110 shadow-xl backdrop-blur-xl z-30"
                 >
                   <FiChevronLeft className="text-[color:rgba(0,0,0,0.65)] dark:text-gray-300 group-hover:text-black dark:group-hover:text-white transition-colors" size={24} />
                 </button>
@@ -212,7 +251,7 @@ const FeaturesSection = () => {
                       border border-[color:rgba(0,0,0,0.08)] dark:border-gray-700/40
                       rounded-2xl p-6 cursor-pointer
                       hover:scale-105 transition-all duration-500
-                      opacity-60 hover:opacity-80"
+                      opacity-75 hover:opacity-90"
                       onClick={prevSlide}
                     >
                       <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`}>
@@ -223,7 +262,7 @@ const FeaturesSection = () => {
                       <h4 className="text-lg font-bold text-[var(--foreground)] mb-2">
                         {features[(currentIndex - 1 + features.length) % features.length].title}
                       </h4>
-                      <p className="text-sm text-[color:rgba(0,0,0,0.55)] dark:text-gray-400 line-clamp-3">
+                      <p className="text-sm text-[color:rgba(var(--foreground-rgb),0.8)] line-clamp-3">
                         {features[(currentIndex - 1 + features.length) % features.length].description}
                       </p>
                     </div>
@@ -233,13 +272,12 @@ const FeaturesSection = () => {
 
               {/* Center Card */}
               <div className="relative z-20 w-full max-w-2xl mx-auto px-4 flex items-center justify-center">
-                <div className="bg-[color:rgba(255,255,255,0.7)] dark:bg-gradient-to-br dark:from-gray-800/60 dark:to-gray-900/60 backdrop-blur-2xl 
-                border border-[color:rgba(0,0,0,0.12)] dark:border-gray-600/50 rounded-3xl p-4 sm:p-6 lg:p-8 shadow-2xl transform transition-all duration-700 w-full my-4 md:my-0">
+                <div className=" bg-gradient-to-br from-gray-600/25 to-gray-900/50 backdrop-blur-2xl border-gray-600/50 rounded-3xl p-4 sm:p-6 lg:p-8 shadow-2xl transform transition-all duration-700 w-full my-4 md:my-0">
                   {/* Current feature content */}
                   <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-[color:rgba(0,0,0,0.55)] dark:text-gray-400 uppercase tracking-wider">
+                      <span className="text-xs sm:text-sm font-semibold text-[var(--foreground)] uppercase tracking-wider">
                         {features[currentIndex].category}
                       </span>
                     </div>
@@ -255,7 +293,7 @@ const FeaturesSection = () => {
                       {features[currentIndex].title}
                     </h3>
 
-                    <p className="text-base sm:text-lg text-[color:rgba(0,0,0,0.65)] dark:text-gray-300 leading-relaxed mb-4 sm:mb-6 max-w-lg mx-auto px-2 sm:px-0">
+                    <p className="text-base sm:text-lg text-[var(--foreground)]/80 leading-relaxed mb-4 sm:mb-6 max-w-lg mx-auto px-2 sm:px-0">
                       {features[currentIndex].detailedDescription}
                     </p>
 
@@ -264,7 +302,7 @@ const FeaturesSection = () => {
                       {features[currentIndex].benefits.map((benefit, idx) => (
                         <div key={idx} className="flex items-center justify-center space-x-2 bg-[color:rgba(0,0,0,0.05)] dark:bg-gray-700/30 rounded-xl px-2 sm:px-3 py-1.5 sm:py-2">
                           <div className={`w-2 h-2 rounded-full bg-gradient-to-r ${features[currentIndex].gradient}`}></div>
-                          <span className="text-xs sm:text-sm text-[color:rgba(0,0,0,0.65)] dark:text-gray-300 font-medium">{benefit}</span>
+                          <span className="text-xs sm:text-sm text-[var(--foreground)]/80 font-medium">{benefit}</span>
                         </div>
                       ))}
                     </div>
@@ -289,7 +327,7 @@ const FeaturesSection = () => {
                     <div
                       className="w-64 h-80 
                       bg-[color:rgba(0,0,0,0.04)] dark:bg-gray-800/30 backdrop-blur-xl border border-[color:rgba(0,0,0,0.08)] dark:border-gray-700/40
-                      rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-60 hover:opacity-80"
+                      rounded-2xl p-6 cursor-pointer hover:scale-105 transition-all duration-500 opacity-75 hover:opacity-90"
                       onClick={nextSlide}
                     >
                       <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`}>
@@ -300,7 +338,7 @@ const FeaturesSection = () => {
                       <h4 className="text-lg font-bold text-[var(--foreground)] mb-2">
                         {features[(currentIndex + 1) % features.length].title}
                       </h4>
-                      <p className="text-sm text-[color:rgba(0,0,0,0.55)] dark:text-gray-400 line-clamp-3">
+                      <p className="text-sm text-[color:rgba(var(--foreground-rgb),0.8)] line-clamp-3">
                         {features[(currentIndex + 1) % features.length].description}
                       </p>
                     </div>
@@ -348,11 +386,11 @@ const FeaturesSection = () => {
         <div className="text-center mt-16 mb-16">
           <div className="mb-6">
             <h3 className="text-2xl md:text-3xl font-bold text-[var(--foreground)] mb-4">
-              <span className="bg-gradient-to-r from-orange-400 to-pink-400 bg-clip-text text-transparent">
+              <span className="bg-gradient-to-r from-orange-400 to-pink-500 bg-clip-text text-transparent">
                 Featured on Product Hunt
               </span>
             </h3>
-            <p className="text-[color:rgba(0,0,0,0.65)] dark:text-gray-300 text-lg max-w-2xl mx-auto">
+            <p className="text-[var(--foreground)]/80 text-lg max-w-2xl mx-auto">
               Show your support and help us reach more users by upvoting BrowsePing on Product Hunt!
             </p>
           </div>
@@ -383,9 +421,9 @@ const FeaturesSection = () => {
               <div className="absolute bottom-0 right-1/4 w-80 h-80 bg-gradient-to-r from-blue-500/8 dark:from-blue-500/15 to-cyan-500/8 dark:to-cyan-500/15 rounded-full blur-2xl"></div>
             </div>
 
-            <div className="relative bg-[color:rgba(255,255,255,0.75)] 
-            dark:bg-gradient-to-br dark:from-gray-800/60 dark:to-gray-900/60
-            backdrop-blur-2xl border border-[color:rgba(0,0,0,0.12)] dark:border-green-500/30 rounded-3xl p-6 lg:p-8 xl:p-10 shadow-2xl">
+            <div className="relative backdrop-blur-2xl rounded-3xl p-6 lg:p-8 xl:p-10 shadow-2xl border"
+            style={{ backgroundColor: 'rgba(var(--foreground-rgb), 0.08)',borderColor: 'rgba(var(--foreground-rgb), 0.3)',
+            }} >
               <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-6 lg:space-y-0">
                 {/* Content section */}
                 <div className="text-center lg:text-left flex-1">
@@ -394,14 +432,14 @@ const FeaturesSection = () => {
                       <FiGithub className="text-white" size={24} />
                     </div>
                     <h3 className="text-2xl sm:text-3xl font-bold text-[var(--foreground)]">
-                      <span className="bg-gradient-to-r from-green-400 to-emerald-400 bg-clip-text text-transparent">
+                      <span className="bg-gradient-to-r from-green-700 via-teal-800 to-indigo-600 bg-clip-text text-transparent">
                         Open Source
                       </span>
-                      {' '}Community
+                      <span className="bg-gradient-to-r from-indigo-600 to-purple-400 bg-clip-text text-transparent ml-2">Community</span>
                     </h3>
                   </div>
 
-                  <p className="text-base lg:text-lg text-[color:rgba(0,0,0,0.65)] dark:text-gray-300 leading-relaxed max-w-2xl mx-auto lg:mx-0">
+                  <p className="lg:text-lg text-[var(--foreground)]/80 leading-relaxed max-w-2xl mx-auto lg:mx-0">
                     Join developers building the future of social browsing. Contribute and help shape the project.
                   </p>
                 </div>
@@ -422,7 +460,6 @@ const FeaturesSection = () => {
             </div>
           </div>
         </div>
-      </div>
     </section>
   );
 };
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 349b1ef..9f17794 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -64,18 +64,43 @@ const HeroSection = () => {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div className="text-center">
           {/* Badge */}
+<<<<<<< HEAD
           <div className={`inline-flex items-center space-x-3 bg-gradient-to-r from-green-500/10 via-blue-500/10 to-purple-500/10 bg-gray-900/20 rounded-full px-6 py-3 mb-8 backdrop-blur-sm border dark:border-black/100 ease-out hover:shadow-[0_0_24px_rgba(255,255,255,0.3)] dark:hover:shadow-[0_0_24px_rgba(255,255,255,0.3)] hover:-translate-y-0.4 transition-all duration-300 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
             }`}>
             <FiGithub className="text-green-400" size={18} aria-hidden="true" />
             <span className="text-green-300 text-sm font-semibold">Open Source</span>
             <div className="w-1 h-1 bg-green-400 rounded-full"></div>
             <span className="text-blue-300 text-sm font-medium">Browser Extension</span>
+=======
+          <div
+              className={`inline-flex items-center space-x-3
+                bg-gradient-to-r from-blue-700/22 via-purple-600/25 to-cyan-500/30
+                rounded-full px-6 py-3 mb-8
+                backdrop-blur-sm hover:backdrop-blur-md
+                border border-black/70
+                hover:drop-shadow-[0_8px_16px_rgba(0,0,0,0.35)]
+                hover:drop-shadow-[0_20px_40px_rgba(0,0,0,0.45)]
+                hover:drop-shadow-[0_0_18px_rgba(0,0,0,0.25)]
+                hover:-translate-y-0.5
+                transition-all duration-300 ease-out
+                ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}
+              `}
+            >
+            <FiGithub className="text-green-600" size={18} />
+            <span className="text-green-600 text-sm font-semibold">Open Source</span>
+            <div className="w-1 h-1 bg-green-600 rounded-full"></div>
+            <span className="text-yellow-600 text-sm font-medium">Browser Extension</span>
+>>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
           </div>
 
           {/* Main Heading */}
           <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold mb-8 leading-tight">
-            <span className={`block bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent transition-all duration-1000 delay-300 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
-              }`}>
+            <span
+              className={`block text-[var(--foreground)]
+                transition-all duration-1000 delay-300
+                ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}
+              `}
+            >
               Socialize
             </span>
             <span className={`block bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent transition-all duration-1000 delay-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
@@ -85,8 +110,8 @@ const HeroSection = () => {
           </h1>
 
           {/* Subtitle */}
-          <p className={`text-xl md:text-2xl text-gray-300 mb-12 max-w-4xl mx-auto leading-relaxed transition-all duration-1000 delay-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
-            }`}>
+          <p className={`text-xl md:text-2xl mb-12 max-w-4xl mx-auto leading-relaxed transition-all duration-1000 delay-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}
+            `} style={{ color: 'rgba(var(--foreground-rgb), 0.8)' }}>
             The{' '}
             <span className="text-transparent bg-gradient-to-r from-green-400 to-emerald-400 bg-clip-text font-bold">
               open-source
@@ -99,19 +124,26 @@ const HeroSection = () => {
           </p>
 
           {/* Key Features */}
-          <div className={`flex flex-wrap justify-center items-center gap-8 mb-12 transition-all duration-1000 delay-900 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
+          <div className={`flex flex-wrap justify-center items-center gap-8 mb-12 allow-colors transition-all duration-1000 delay-900 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
             }`}>
             {[
-              { icon: FiGithub, text: 'Open Source', color: 'text-green-400' },
-              { icon: FiUsers, text: 'Social Presence', color: 'text-blue-400' },
-              { icon: FiBarChart, text: 'Analytics', color: 'text-cyan-400' },
-              { icon: FiShield, text: 'Privacy First', color: 'text-purple-400' }
+              { icon: FiGithub, text: 'Open Source', color: 'text-green-500' },
+              { icon: FiUsers, text: 'Social Presence', color: 'text-blue-600' },
+              { icon: FiBarChart, text: 'Analytics', color: 'text-cyan-600' },
+              { icon: FiShield, text: 'Privacy First', color: 'text-purple-500' }
             ].map((feature, index) => (
+<<<<<<< HEAD
               <div key={index} className="flex items-center space-x-2 group cursor-pointer">
                 <div className="p-2 rounded-lg bg-gray-800/50 group-hover:bg-gray-700/50 transition-colors">
                   <feature.icon className={`${feature.color} group-hover:scale-110 transition-transform`} size={20} aria-hidden="true" />
+=======
+              <div key={index} className="flex items-center space-x-2 group cursor-pointer transition-transform duration-200
+              hover:scale-[1.1]">
+                <div className="p-2 rounded-lg bg-[color:color-mix(in srgb, var(--foreground) 12%, transparent)] group-hover:bg-[color:color-mix(in srgb, var(--foreground) 18%, transparent)] transition-colors">
+                  <feature.icon className={`${feature.color} group-hover:scale-110 transition-transform`} size={20} />
+>>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
                 </div>
-                <span className="text-gray-300 group-hover:text-white transition-colors">{feature.text}</span>
+                <span className="transition-colors" style={{ color: 'rgba(var(--foreground-rgb), 0.8)' }}>{feature.text}</span>
               </div>
             ))}
           </div>
@@ -145,7 +177,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-900 px-8 py-4 rounded-2xl font-semibold text-lg hover:scale-105 transition-all duration-300 flex items-center space-x-3 group backdrop-blur-sm bg-gray-600/40 hover:bg-gray-700/50" style={{ color: 'rgba(var(--foreground-rgb), 0.8)' }}
             >
               <FiDownload size={20} className="group-hover:rotate-12 transition-transform" aria-hidden="true" />
               <span>All Download Options</span>
@@ -174,7 +206,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-[var(--foreground)] 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
@@ -182,10 +214,10 @@ const HeroSection = () => {
                   className="flex flex-col items-center space-y-2 group cursor-pointer"
                   style={{ animationDelay: `${index * 0.1}s` }}
                 >
-                  <div className="text-4xl group-hover:scale-125 group-hover:animate-pulse transition-all duration-300">
+                  <div className="text-4xl group-hover:scale-135 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 group-hover:text-[var(--foreground)] transition-colors" style={{ color: 'rgba(var(--foreground-rgb), 0.7)' }}>
                     {browser.name}
                   </span>
                 </div>
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 8ff049a..203f4a1 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -28,18 +28,19 @@ const Footer = () => {
         <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
           {/* Brand */}
           <div className="col-span-1 md:col-span-2">
-            <div className="flex items-center space-x-3 mb-6">
-              <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-xl">
+            <div className="flex items-center space-x-3 mb-6 group">
+              <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-xl transition-all duration-300 ease-out group-hover:-rotate-[12deg] group-hover:scale-110 group-hover:shadow-2xl"
+            >
                 <span className="text-2xl font-bold">BP</span>
               </div>
               <div>
                 <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 opacity-70">Socialize Your Browsing</div>
+                <div className="text-sm opacity-80">Socialize Your Browsing</div>
               </div>
             </div>
-            <p className="opacity-80 mb-6 max-w-md leading-relaxed text-lg">
+            <p className="opacity-90 mb-6 max-w-md leading-relaxed text-lg">
               Transform your solitary browsing into a vibrant social experience. Connect with friends,
               share your digital presence, and discover what&apos;s capturing everyone&apos;s attention across the web.
             </p>
@@ -72,8 +73,8 @@ const Footer = () => {
                 <a
                   key={social.label}
                   href={social.href}
-                  className="w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 bg-black/5 dark:bg-gray-800/60 hover:bg-black/10 dark:hover:bg-gray-700/60
-                  border border-black/10 dark:border-gray-700 text-black/70 dark:text-gray-300 hover:text-black dark:hover:text-white"
+                  className="w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 bg-black/5 dark:bg-gray-600/40 hover:bg-black/10 dark:hover:bg-gray-700/60
+                  border border-black/10 dark:border-gray-700 text-[color:rgba(var(--foreground-rgb),0.9)]"
                   aria-label={social.label}
                 >
                   <social.icon size={20} className="group-hover:animate-pulse" aria-hidden="true" />
@@ -132,10 +133,10 @@ const Footer = () => {
 
         <div className="border-t border-[color:rgba(0,0,0,0.1)] dark:border-gray-800
         mt-16 pt-8 flex flex-col md:flex-row justify-between items-center">
-          <div className="opacity-60 text-sm">
+          <div className="opacity-80 text-sm">
             © {currentYear} BrowsePing. All rights reserved.
           </div>
-          <div className="flex items-center space-x-2 opacity-60 text-sm mt-4 md:mt-0">
+          <div className="flex items-center space-x-2 opacity-80 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..9a4150f 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -10,7 +10,7 @@ interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
-    <div className="min-h-screen flex flex-col bg-gray-900 relative">
+    <div className="min-h-screen flex flex-col bg-[var(--background)] relative theme-root">
       <MouseFollower />
       <AnimatedBackground />
       <Navbar />
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 64dd960..fd60cc8 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -41,25 +41,30 @@ const Navbar = () => {
 =======
     <nav className={`fixed top-0 w-full z-40 transition-all duration-300 ${
       scrolled 
-        ? 'bg-[var(--background)]/95 backdrop-blur-lg border-b border-black/10 dark:border-white/10' 
+        ? 'bg-white/90 dark:bg-gray-900/80 backdrop-blur-lg border-b border-black/10 dark:border-white/10' 
         : 'bg-transparent'
     }`}>
+<<<<<<< HEAD
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-[var(--foreground)]">
 >>>>>>> 889ec75 (Added Light theme toggle to the wesbite and some UI polish)
+=======
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+>>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
         <div className="flex justify-between items-center h-16">
           {/* Logo */}
           <Link href="/" className="flex items-center space-x-3 group">
             <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg transition-all duration-300 ease-out group-hover:-rotate-[12deg] group-hover:scale-110 group-hover:shadow-xl">
-              <span className="text-white text-xl font-bold">BP</span>
+              <span className="text-[var(--foreground)] text-xl font-bold">BP</span>
             </div>
             <div>
               <span className="gradient-text text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
                 BrowsePing
               </span>
-              <div className="text-xs text-gray-400 -mt-1">Socialize Your Browsing</div>
+              <div className="text-xs -mt-1">Socialize Your Browsing</div>
             </div>
           </Link>
 
+<<<<<<< HEAD
           {/* Desktop Navigation */}
           <div className="hidden md:flex items-center space-x-8">
             {navItems.map((item) => (
@@ -75,13 +80,36 @@ const Navbar = () => {
               </Link>
             ))}
           </div>
+=======
+        {/* Desktop Navigation */}
+        <div className="hidden md:flex items-center space-x-8">
+          {navItems.map((item) => {
+              const isActive = currentpath === item.href;
+              const isHome = item.href === '/';
+              const isHomeActive = isHome && currentpath === '/';
+
+            return (  
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`nav-link flex items-center space-x-1 transition-all duration-200 font-medium relative group 
+          ${isHomeActive ? 'text-yellow-600' : isActive }`}
+            >
+              {item.icon}
+              <span>{item.label}</span>
+              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-400 to-purple-400 group-hover:w-full transition-all duration-300"></span>
+            </Link>
+            );
+          })}
+        </div>
+>>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
 
           {/* Action Buttons - Desktop */}
           <div className="hidden md:flex items-center space-x-4">
               <button
                 onClick={toggleTheme}
                 aria-label="Toggle theme"
-                className="p-3 rounded-xl text-gray-300 hover:text-yellow-400 transition-all duration-200 hover:rotate-[20deg] hover:scale-125"
+                className="p-3 rounded-xl transition-all duration-200 hover:rotate-[20deg] hover:scale-125" style={{ color: 'rgba(var(--foreground-rgb), 0.7)' }}
               >
               {isDark ? <FiSun size={22} /> : <FiMoon size={22} />}
               </button>
@@ -89,10 +117,15 @@ 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 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30 group"
+              className="flex items-center space-x-2 px-4 py-2 text-[var(--foreground)]/90 hover:text-blue-400 border border-gray-600 hover:border-blue-400 rounded-xl transition-all duration-300 font-medium hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30 group"
             >
+<<<<<<< HEAD
               <FiGithub size={16} className="group-hover:scale-110 transition-transform duration-300" aria-hidden="true" />
               <span>Contribute</span>
+=======
+              <FiGithub size={16} className="group-hover:scale-110 transition-transform duration-300" />
+              <span className="font-bold">Contribute</span>
+>>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
             </a>
             <Link
               href="/download"
@@ -108,9 +141,13 @@ const Navbar = () => {
           <div className="md:hidden">
             <button
               onClick={() => setIsMenuOpen(!isMenuOpen)}
+<<<<<<< HEAD
               className="text-gray-300 hover:text-blue-400 transition-colors p-2"
               aria-label={isMenuOpen ? "Close menu" : "Open menu"}
               aria-expanded={isMenuOpen}
+=======
+              className="text-[var(--foreground)]/70 hover:text-blue-400 transition-colors p-2"
+>>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
             >
               {isMenuOpen ? <FiX size={24} aria-hidden="true" /> : <FiMenu size={24} aria-hidden="true" />}
             </button>
@@ -125,8 +162,14 @@ const Navbar = () => {
                 <Link
                   key={item.href}
                   href={item.href}
+<<<<<<< HEAD
                   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 ${
+                    currentpath === item.href ? 'text-yellow-400' : 'text-[var(--foreground)]/70 hover:text-blue-400 hover:bg-gray-800/50'
+                  }`}
+>>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
                   onClick={() => setIsMenuOpen(false)}
                 >
                   {item.icon}
@@ -137,7 +180,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-[var(--foreground)]/70 hover:text-blue-400 hover:bg-gray-800/50 rounded-md transition-colors border border-gray-600 mt-2"
                 onClick={() => setIsMenuOpen(false)}
               >
                 <FiGithub size={16} aria-hidden="true" />
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index b0cda43..6626677 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -9,16 +9,17 @@ export function useTheme() {
 
   // Load saved theme on mount
   useEffect(() => {
-    const storedTheme = localStorage.getItem(THEME_KEY);
-
-    if (storedTheme === 'dark') {
-      setIsDark(true);
-      document.documentElement.classList.add('dark');
-    } else if (storedTheme === 'light') {
-      setIsDark(false);
-      document.documentElement.classList.remove('dark');
-    }
-  }, []);
+  const storedTheme = localStorage.getItem(THEME_KEY);
+
+  if (storedTheme === 'dark') {
+    setIsDark(true);
+    document.documentElement.classList.add('dark');
+  } else {
+    // DEFAULT = LIGHT
+    setIsDark(false);
+    document.documentElement.classList.remove('dark');
+  }
+}, []);
 
   // Update DOM + storage when toggled
   const toggleTheme = () => {

From 025cd4ea705db8a54b67056b1569a3e9cb1206a9 Mon Sep 17 00:00:00 2001
From: k4rth1k-h3gd3 <karthik.khegde@gmail.com>
Date: Sat, 14 Feb 2026 15:08:02 +0530
Subject: [PATCH 3/3] Resolve rebase conflicts and refine UI adjustments

---
 src/components/home/HeroSection.tsx | 83 ++++++++++++-----------------
 src/components/layout/Navbar.tsx    | 51 +-----------------
 2 files changed, 35 insertions(+), 99 deletions(-)

diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 9f17794..f9294a4 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -63,35 +63,26 @@ const HeroSection = () => {
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div className="text-center">
-          {/* Badge */}
-<<<<<<< HEAD
-          <div className={`inline-flex items-center space-x-3 bg-gradient-to-r from-green-500/10 via-blue-500/10 to-purple-500/10 bg-gray-900/20 rounded-full px-6 py-3 mb-8 backdrop-blur-sm border dark:border-black/100 ease-out hover:shadow-[0_0_24px_rgba(255,255,255,0.3)] dark:hover:shadow-[0_0_24px_rgba(255,255,255,0.3)] hover:-translate-y-0.4 transition-all duration-300 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
-            }`}>
-            <FiGithub className="text-green-400" size={18} aria-hidden="true" />
-            <span className="text-green-300 text-sm font-semibold">Open Source</span>
-            <div className="w-1 h-1 bg-green-400 rounded-full"></div>
-            <span className="text-blue-300 text-sm font-medium">Browser Extension</span>
-=======
-          <div
-              className={`inline-flex items-center space-x-3
-                bg-gradient-to-r from-blue-700/22 via-purple-600/25 to-cyan-500/30
-                rounded-full px-6 py-3 mb-8
-                backdrop-blur-sm hover:backdrop-blur-md
-                border border-black/70
-                hover:drop-shadow-[0_8px_16px_rgba(0,0,0,0.35)]
-                hover:drop-shadow-[0_20px_40px_rgba(0,0,0,0.45)]
-                hover:drop-shadow-[0_0_18px_rgba(0,0,0,0.25)]
-                hover:-translate-y-0.5
-                transition-all duration-300 ease-out
-                ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}
-              `}
-            >
-            <FiGithub className="text-green-600" size={18} />
-            <span className="text-green-600 text-sm font-semibold">Open Source</span>
-            <div className="w-1 h-1 bg-green-600 rounded-full"></div>
-            <span className="text-yellow-600 text-sm font-medium">Browser Extension</span>
->>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
-          </div>
+{/* Badge */}
+<div
+    className={`inline-flex items-center space-x-3
+      bg-gradient-to-r from-blue-700/22 via-purple-600/25 to-cyan-500/30
+      rounded-full px-6 py-3 mb-8
+      backdrop-blur-sm hover:backdrop-blur-md
+      border border-black/70
+      hover:drop-shadow-[0_8px_16px_rgba(0,0,0,0.35)]
+      hover:drop-shadow-[0_20px_40px_rgba(0,0,0,0.45)]
+      hover:drop-shadow-[0_0_18px_rgba(0,0,0,0.25)]
+      hover:-translate-y-0.5
+      transition-all duration-300 ease-out
+      ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}
+    `}
+  >
+  <FiGithub className="text-green-600" size={18} />
+  <span className="text-green-600 text-sm font-semibold">Open Source</span>
+  <div className="w-1 h-1 bg-green-600 rounded-full"></div>
+  <span className="text-yellow-600 text-sm font-medium">Browser Extension</span>
+</div>
 
           {/* Main Heading */}
           <h1 className="text-6xl md:text-7xl lg:text-8xl font-bold mb-8 leading-tight">
@@ -126,26 +117,20 @@ const HeroSection = () => {
           {/* Key Features */}
           <div className={`flex flex-wrap justify-center items-center gap-8 mb-12 allow-colors transition-all duration-1000 delay-900 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
             }`}>
-            {[
-              { icon: FiGithub, text: 'Open Source', color: 'text-green-500' },
-              { icon: FiUsers, text: 'Social Presence', color: 'text-blue-600' },
-              { icon: FiBarChart, text: 'Analytics', color: 'text-cyan-600' },
-              { icon: FiShield, text: 'Privacy First', color: 'text-purple-500' }
-            ].map((feature, index) => (
-<<<<<<< HEAD
-              <div key={index} className="flex items-center space-x-2 group cursor-pointer">
-                <div className="p-2 rounded-lg bg-gray-800/50 group-hover:bg-gray-700/50 transition-colors">
-                  <feature.icon className={`${feature.color} group-hover:scale-110 transition-transform`} size={20} aria-hidden="true" />
-=======
-              <div key={index} className="flex items-center space-x-2 group cursor-pointer transition-transform duration-200
-              hover:scale-[1.1]">
-                <div className="p-2 rounded-lg bg-[color:color-mix(in srgb, var(--foreground) 12%, transparent)] group-hover:bg-[color:color-mix(in srgb, var(--foreground) 18%, transparent)] transition-colors">
-                  <feature.icon className={`${feature.color} group-hover:scale-110 transition-transform`} size={20} />
->>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
-                </div>
-                <span className="transition-colors" style={{ color: 'rgba(var(--foreground-rgb), 0.8)' }}>{feature.text}</span>
-              </div>
-            ))}
+{[
+  { icon: FiGithub, text: 'Open Source', color: 'text-green-500' },
+  { icon: FiUsers, text: 'Social Presence', color: 'text-blue-600' },
+  { icon: FiBarChart, text: 'Analytics', color: 'text-cyan-600' },
+  { icon: FiShield, text: 'Privacy First', color: 'text-purple-500' }
+].map((feature, index) => (
+  <div key={index} className="flex items-center space-x-2 group cursor-pointer transition-transform duration-200
+  hover:scale-[1.1]">
+    <div className="p-2 rounded-lg bg-[color:color-mix(in srgb, var(--foreground) 12%, transparent)] group-hover:bg-[color:color-mix(in srgb, var(--foreground) 18%, transparent)] transition-colors">
+      <feature.icon className={`${feature.color} group-hover:scale-110 transition-transform`} size={20} />
+    </div>
+    <span className="transition-colors" style={{ color: 'rgba(var(--foreground-rgb), 0.8)' }}>{feature.text}</span>
+  </div>
+))}
           </div>
 
           {/* CTA Buttons with browser detection */}
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index fd60cc8..33dde07 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -32,24 +32,13 @@ const Navbar = () => {
   ];
 
   return (
-<<<<<<< HEAD
-    <nav className={`fixed top-0 w-full z-40 transition-all duration-300 ${scrolled
-        ? 'bg-gray-900/95 backdrop-blur-lg border-b border-gray-800'
-        : 'bg-transparent'
-      }`}>
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-=======
     <nav className={`fixed top-0 w-full z-40 transition-all duration-300 ${
       scrolled 
         ? 'bg-white/90 dark:bg-gray-900/80 backdrop-blur-lg border-b border-black/10 dark:border-white/10' 
         : 'bg-transparent'
     }`}>
-<<<<<<< HEAD
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-[var(--foreground)]">
->>>>>>> 889ec75 (Added Light theme toggle to the wesbite and some UI polish)
-=======
+
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
->>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
         <div className="flex justify-between items-center h-16">
           {/* Logo */}
           <Link href="/" className="flex items-center space-x-3 group">
@@ -64,7 +53,6 @@ const Navbar = () => {
             </div>
           </Link>
 
-<<<<<<< HEAD
           {/* Desktop Navigation */}
           <div className="hidden md:flex items-center space-x-8">
             {navItems.map((item) => (
@@ -80,29 +68,6 @@ const Navbar = () => {
               </Link>
             ))}
           </div>
-=======
-        {/* Desktop Navigation */}
-        <div className="hidden md:flex items-center space-x-8">
-          {navItems.map((item) => {
-              const isActive = currentpath === item.href;
-              const isHome = item.href === '/';
-              const isHomeActive = isHome && currentpath === '/';
-
-            return (  
-            <Link
-              key={item.href}
-              href={item.href}
-              className={`nav-link flex items-center space-x-1 transition-all duration-200 font-medium relative group 
-          ${isHomeActive ? 'text-yellow-600' : isActive }`}
-            >
-              {item.icon}
-              <span>{item.label}</span>
-              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-400 to-purple-400 group-hover:w-full transition-all duration-300"></span>
-            </Link>
-            );
-          })}
-        </div>
->>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
 
           {/* Action Buttons - Desktop */}
           <div className="hidden md:flex items-center space-x-4">
@@ -119,13 +84,8 @@ const Navbar = () => {
               rel="noopener noreferrer"
               className="flex items-center space-x-2 px-4 py-2 text-[var(--foreground)]/90 hover:text-blue-400 border border-gray-600 hover:border-blue-400 rounded-xl transition-all duration-300 font-medium hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30 group"
             >
-<<<<<<< HEAD
               <FiGithub size={16} className="group-hover:scale-110 transition-transform duration-300" aria-hidden="true" />
               <span>Contribute</span>
-=======
-              <FiGithub size={16} className="group-hover:scale-110 transition-transform duration-300" />
-              <span className="font-bold">Contribute</span>
->>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
             </a>
             <Link
               href="/download"
@@ -141,13 +101,9 @@ const Navbar = () => {
           <div className="md:hidden">
             <button
               onClick={() => setIsMenuOpen(!isMenuOpen)}
-<<<<<<< HEAD
               className="text-gray-300 hover:text-blue-400 transition-colors p-2"
               aria-label={isMenuOpen ? "Close menu" : "Open menu"}
               aria-expanded={isMenuOpen}
-=======
-              className="text-[var(--foreground)]/70 hover:text-blue-400 transition-colors p-2"
->>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
             >
               {isMenuOpen ? <FiX size={24} aria-hidden="true" /> : <FiMenu size={24} aria-hidden="true" />}
             </button>
@@ -162,14 +118,9 @@ const Navbar = () => {
                 <Link
                   key={item.href}
                   href={item.href}
-<<<<<<< HEAD
-                  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 ${
                     currentpath === item.href ? 'text-yellow-400' : 'text-[var(--foreground)]/70 hover:text-blue-400 hover:bg-gray-800/50'
                   }`}
->>>>>>> 1516597 (Fix UI theming conflicts and restore visual consistency across components)
                   onClick={() => setIsMenuOpen(false)}
                 >
                   {item.icon}