feat: improved UI and added dynamic theme toggle

- improved the nav bar components
- added the theme toggle button to toggle theme
- fixed the button background for the nav bar
- fixed the theme color issue to the ThemeToggle funtion
- added more vibrant colors
- fixed the theme logo render

1 files changed, 10 insertions, 10 deletions

diff --git a/frontend/src/components/hero-section.tsx b/frontend/src/components/hero-section.tsx
index 2450365..7806cbe 100644
--- a/frontend/src/components/hero-section.tsx
+++ b/frontend/src/components/hero-section.tsx
@@ -7,7 +7,7 @@ import Link from "next/link";
 
 export function HeroSection() {
   return (
-    <section className="relative overflow-hidden bg-gradient-to-br from-neutral-50 via-white to-neutral-100">
+    <section className="relative overflow-hidden bg-gradient-to-br from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-800">
       {/* Background decoration */}
       <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
       <div className="absolute top-20 right-20 w-72 h-72 bg-primary/5 rounded-full blur-3xl"></div>
@@ -89,10 +89,10 @@ export function HeroSection() {
           {/* Right side - Product showcase */}
           <div className="relative">
             {/* Main product image */}
-            <div className="relative bg-gradient-to-br from-neutral-100 to-neutral-200 rounded-2xl p-8 lg:p-12">
-              <div className="aspect-[3/4] bg-gradient-to-br from-neutral-300 to-neutral-400 rounded-xl flex items-center justify-center">
-                <div className="text-center text-neutral-600">
-                  <div className="w-16 h-16 bg-neutral-500 rounded-full mx-auto mb-4 flex items-center justify-center">
+            <div className="relative bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-neutral-800 dark:to-neutral-700 rounded-2xl p-8 lg:p-12">
+              <div className="aspect-[3/4] bg-gradient-to-br from-neutral-300 to-neutral-400 dark:from-neutral-600 dark:to-neutral-500 rounded-xl flex items-center justify-center">
+                <div className="text-center text-neutral-600 dark:text-neutral-300">
+                  <div className="w-16 h-16 bg-neutral-500 dark:bg-neutral-400 rounded-full mx-auto mb-4 flex items-center justify-center">
                     <Sparkles className="w-8 h-8 text-white" />
                   </div>
                   <p className="font-medium">Featured Product</p>
@@ -107,9 +107,9 @@ export function HeroSection() {
             </div>
 
             {/* Floating product cards */}
-            <div className="absolute -left-6 top-1/4 bg-white rounded-lg shadow-lg p-4 max-w-[200px] border">
+            <div className="absolute -left-6 top-1/4 bg-white dark:bg-neutral-800 rounded-lg shadow-lg p-4 max-w-[200px] border dark:border-neutral-700">
               <div className="flex items-center space-x-3">
-                <div className="w-12 h-12 bg-gradient-to-br from-pink-100 to-pink-200 rounded-lg"></div>
+                <div className="w-12 h-12 bg-gradient-to-br from-pink-100 to-pink-200 dark:from-pink-900 dark:to-pink-800 rounded-lg"></div>
                 <div>
                   <p className="font-medium text-sm">Summer Dress</p>
                   <p className="text-xs text-muted-foreground">$89.99</p>
@@ -121,9 +121,9 @@ export function HeroSection() {
               </div>
             </div>
 
-            <div className="absolute -right-8 bottom-1/4 bg-white rounded-lg shadow-lg p-4 max-w-[200px] border">
+            <div className="absolute -right-8 bottom-1/4 bg-white dark:bg-neutral-800 rounded-lg shadow-lg p-4 max-w-[200px] border dark:border-neutral-700">
               <div className="flex items-center space-x-3">
-                <div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg"></div>
+                <div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-800 rounded-lg"></div>
                 <div>
                   <p className="font-medium text-sm">Casual Sneakers</p>
                   <p className="text-xs text-muted-foreground">$129.99</p>
@@ -150,7 +150,7 @@ export function HeroSection() {
       {/* Bottom wave */}
       <div className="absolute bottom-0 left-0 right-0">
         <svg
-          className="w-full h-12 fill-white"
+          className="w-full h-12 fill-white dark:fill-neutral-900"
           viewBox="0 0 1200 120"
           preserveAspectRatio="none"
         >