diff options
Diffstat (limited to 'frontend/src/components/hero-section.tsx')
| -rw-r--r-- | frontend/src/components/hero-section.tsx | 20 |
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" > |