From 5e3b37288d96277a6eacb7d6464760b63f72874a Mon Sep 17 00:00:00 2001
From: Biswa Kalyan Bhuyan <biswa@surgot.in>
Date: Wed, 28 May 2025 19:44:26 +0530
Subject: 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
---
 frontend/src/app/page.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

(limited to 'frontend/src/app/page.tsx')

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 7a9bea6..7d6b7a2 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -93,10 +93,10 @@ export default function Home() {
         <HeroSection />
         
         {/* Featured Products Section */}
-        <section className="py-16 bg-white">
+        <section className="py-16 bg-white dark:bg-neutral-950">
           <div className="container mx-auto px-4">
             <div className="text-center mb-12">
-              <h2 className="text-3xl font-bold mb-4">Featured Products</h2>
+              <h2 className="text-3xl font-bold mb-4 text-foreground">Featured Products</h2>
               <p className="text-muted-foreground max-w-2xl mx-auto">
                 Discover our handpicked selection of trending items that our customers love most.
               </p>
@@ -117,7 +117,7 @@ export default function Home() {
         </section>
 
         {/* Categories Section */}
-        <section className="py-16 bg-neutral-50">
+        <section className="py-16 bg-neutral-50 dark:bg-neutral-900">
           <div className="container mx-auto px-4">
             <div className="text-center mb-12">
               <h2 className="text-3xl font-bold mb-4">Shop by Category</h2>
@@ -130,17 +130,15 @@ export default function Home() {
               {[
                 { name: "Women", image: "/api/placeholder/600/400", count: "2,345+ items" },
                 { name: "Men", image: "/api/placeholder/600/400", count: "1,892+ items" },
-                { name: "Kids", image: "/api/placeholder/600/400", count: "756+ items" },
+                { name: "Kids", image: "/api/placeholder/600/400", count: "956+ items" },
               ].map((category) => (
-                <div
-                  key={category.name}
-                  className="relative group cursor-pointer overflow-hidden rounded-lg bg-gradient-to-br from-neutral-200 to-neutral-300 aspect-[4/3]"
-                >
-                  <div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-colors" />
-                  <div className="absolute inset-0 flex flex-col justify-end p-6 text-white">
+                <div key={category.name} className="group relative overflow-hidden rounded-2xl bg-neutral-100 dark:bg-neutral-800 aspect-[4/3]">
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+                  <div className="absolute bottom-6 left-6 text-white">
                     <h3 className="text-2xl font-bold mb-1">{category.name}</h3>
-                    <p className="text-sm opacity-90">{category.count}</p>
+                    <p className="text-neutral-200">{category.count}</p>
                   </div>
+                  <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                 </div>
               ))}
             </div>
-- 
cgit v1.2.3-59-g8ed1b