diff options
Diffstat (limited to 'frontend/src/app/page.tsx')
| -rw-r--r-- | frontend/src/app/page.tsx | 20 |
1 files changed, 9 insertions, 11 deletions
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> |