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, 72 insertions, 24 deletions

diff --git a/frontend/src/components/footer.tsx b/frontend/src/components/footer.tsx
index d7c8ae7..d64167f 100644
--- a/frontend/src/components/footer.tsx
+++ b/frontend/src/components/footer.tsx
@@ -1,24 +1,38 @@
+"use client";
+
+import { useEffect } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
+import { Input } from "@/components/ui/input";
 import {
   Facebook,
   Instagram,
   Twitter,
   Youtube,
-  Mail,
   Phone,
+  Mail,
   MapPin,
-  CreditCard,
-  Shield,
   Truck,
   RefreshCw,
+  Shield,
+  CreditCard,
 } from "lucide-react";
 
 export function Footer() {
-  const currentYear = new Date().getFullYear();
+  // Preload both logo variants
+  useEffect(() => {
+    const preloadLogos = () => {
+      if (typeof window !== 'undefined') {
+        const lightLogo = new window.Image();
+        const darkLogo = new window.Image();
+        lightLogo.src = '/black-logo.png';
+        darkLogo.src = '/white-logo.png';
+      }
+    };
+    
+    preloadLogos();
+  }, []);
 
   const footerLinks = {
     shop: [
@@ -53,25 +67,25 @@ export function Footer() {
   };
 
   return (
-    <footer className="bg-neutral-50 border-t">
+    <footer className="bg-neutral-50 dark:bg-neutral-900 border-t dark:border-neutral-800">
       {/* Newsletter Section */}
-      <div className="bg-black text-white">
+      <div className="bg-black dark:bg-neutral-950 text-white">
         <div className="container mx-auto px-4 py-12">
           <div className="max-w-2xl mx-auto text-center">
             <h2 className="text-2xl font-bold mb-4">Stay in the loop</h2>
-            <p className="text-neutral-300 mb-6">
+            <p className="text-neutral-300 dark:text-neutral-400 mb-6">
               Subscribe to our newsletter and be the first to know about new arrivals, sales, and exclusive offers.
             </p>
             <div className="flex max-w-md mx-auto gap-3">
               <Input
                 placeholder="Enter your email"
-                className="bg-white text-black placeholder:text-gray-500"
+                className="bg-white dark:bg-neutral-800 text-black dark:text-white placeholder:text-gray-500 dark:placeholder:text-gray-400 border-neutral-300 dark:border-neutral-600"
               />
-              <Button variant="secondary" className="px-8">
+              <Button variant="secondary" className="px-8 bg-white dark:bg-neutral-700 text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-600">
                 Subscribe
               </Button>
             </div>
-            <p className="text-xs text-neutral-400 mt-3">
+            <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-3">
               By subscribing, you agree to our Privacy Policy and Terms of Service.
             </p>
           </div>
@@ -84,12 +98,23 @@ export function Footer() {
           {/* Brand Info */}
           <div className="lg:col-span-2">
             <Link href="/" className="flex items-center space-x-2 mb-4">
+              {/* Light theme logo - visible by default, hidden in dark mode */}
               <Image
                 src="/black-logo.png"
                 alt="blcklst"
                 width={140}
                 height={45}
-                className="h-8 w-auto"
+                className="h-8 w-auto block dark:hidden"
+                priority
+              />
+              {/* Dark theme logo - hidden by default, visible in dark mode */}
+              <Image
+                src="/white-logo.png"
+                alt="blcklst"
+                width={140}
+                height={45}
+                className="h-8 w-auto hidden dark:block"
+                priority
               />
             </Link>
             <p className="text-muted-foreground mb-6 max-w-md">
@@ -98,22 +123,22 @@ export function Footer() {
             
             {/* Contact Info */}
             <div className="space-y-3 mb-6">
-              <div className="flex items-center space-x-3 text-sm">
+              <div className="flex items-center space-x-3 text-sm text-foreground">
                 <Phone className="h-4 w-4 text-muted-foreground" />
                 <span>+1 (555) 123-4567</span>
               </div>
-              <div className="flex items-center space-x-3 text-sm">
+              <div className="flex items-center space-x-3 text-sm text-foreground">
                 <Mail className="h-4 w-4 text-muted-foreground" />
                 <span>[email protected]</span>
               </div>
-              <div className="flex items-center space-x-3 text-sm">
+              <div className="flex items-center space-x-3 text-sm text-foreground">
                 <MapPin className="h-4 w-4 text-muted-foreground" />
                 <span>123 Fashion St, New York, NY 10001</span>
               </div>
             </div>
 
             {/* Social Media */}
-            <div className="flex space-x-4">
+            <div className="flex space-x-4 mb-4">
               <Link href="#" className="text-muted-foreground hover:text-foreground">
                 <Facebook className="h-5 w-5" />
               </Link>
@@ -127,6 +152,28 @@ export function Footer() {
                 <Youtube className="h-5 w-5" />
               </Link>
             </div>
+
+            {/* Made with Love */}
+            <p className="text-xs text-muted-foreground/80 flex items-center">
+              made with ❤️ by{" "}
+              <a 
+                href="https://mavvisuals.gumroad.com" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-primary/80 hover:text-primary transition-colors mx-1 font-normal"
+              >
+                maanv
+              </a>
+              &{" "}
+              <a 
+                href="https://surgot.in" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="text-primary/80 hover:text-primary transition-colors ml-1 font-normal"
+              >
+                surgot
+              </a>
+            </p>
           </div>
 
           {/* Shop Links */}
@@ -225,19 +272,20 @@ export function Footer() {
       </div>
 
       {/* Bottom Footer */}
-      <div className="border-t bg-neutral-100">
+      <div className="border-t dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800">
         <div className="container mx-auto px-4 py-6">
-          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
-            <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6">
+          <div className="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0 lg:gap-8">
+            {/* Left: Copyright and Legal Links */}
+            <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-6 text-center sm:text-left">
               <p className="text-sm text-muted-foreground">
-                © {currentYear} blcklst. All rights reserved.
+                © {new Date().getFullYear()} blcklst. All rights reserved.
               </p>
               <div className="flex space-x-4">
                 {footerLinks.legal.map((link) => (
                   <Link
                     key={link.name}
                     href={link.href}
-                    className="text-xs text-muted-foreground hover:text-foreground"
+                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
                   >
                     {link.name}
                   </Link>
@@ -245,14 +293,14 @@ export function Footer() {
               </div>
             </div>
             
-            {/* Payment Methods */}
+            {/* Right: Payment Methods */}
             <div className="flex items-center space-x-2">
               <span className="text-xs text-muted-foreground mr-2">We accept:</span>
               <div className="flex space-x-1">
                 {["Visa", "Mastercard", "AmEx", "PayPal", "Apple Pay"].map((method) => (
                   <div
                     key={method}
-                    className="bg-white border rounded px-2 py-1 text-xs font-medium"
+                    className="bg-white dark:bg-neutral-700 border dark:border-neutral-600 rounded px-2 py-1 text-xs font-medium text-foreground"
                   >
                     {method}
                   </div>