diff options
Diffstat (limited to 'frontend/src/components/hero-section.tsx')
| -rw-r--r-- | frontend/src/components/hero-section.tsx | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/frontend/src/components/hero-section.tsx b/frontend/src/components/hero-section.tsx new file mode 100644 index 0000000..2450365 --- /dev/null +++ b/frontend/src/components/hero-section.tsx @@ -0,0 +1,163 @@ +"use client"; + +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { ArrowRight, Star, Sparkles } from "lucide-react"; +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"> + {/* 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> + <div className="absolute bottom-20 left-20 w-96 h-96 bg-secondary/5 rounded-full blur-3xl"></div> + + <div className="container mx-auto px-4 py-20 lg:py-32"> + <div className="grid lg:grid-cols-2 gap-12 items-center"> + {/* Left side - Content */} + <div className="space-y-8"> + {/* Badge */} + <div className="flex items-center space-x-2"> + <Badge variant="secondary" className="px-3 py-1 text-sm font-medium"> + <Sparkles className="w-3 h-3 mr-1" /> + New Winter Collection + </Badge> + <Badge variant="outline" className="px-3 py-1 text-sm"> + Limited Time + </Badge> + </div> + + {/* Main heading */} + <div className="space-y-4"> + <h1 className="text-4xl lg:text-6xl font-bold leading-tight"> + Curated + <span className="block text-primary">Exclusives</span> + </h1> + <p className="text-lg lg:text-xl text-muted-foreground max-w-lg"> + not everyone gets blcklsted. Discover carefully curated fashion pieces that define modern elegance and exclusivity. + </p> + </div> + + {/* Features */} + <div className="flex flex-wrap gap-6 text-sm"> + <div className="flex items-center space-x-2"> + <div className="w-2 h-2 bg-green-500 rounded-full"></div> + <span>Free shipping worldwide</span> + </div> + <div className="flex items-center space-x-2"> + <div className="w-2 h-2 bg-blue-500 rounded-full"></div> + <span>30-day easy returns</span> + </div> + <div className="flex items-center space-x-2"> + <div className="w-2 h-2 bg-purple-500 rounded-full"></div> + <span>Sustainable materials</span> + </div> + </div> + + {/* CTA Buttons */} + <div className="flex flex-col sm:flex-row gap-4"> + <Button asChild size="lg" className="text-base px-8"> + <Link href="/shop"> + Shop Now + <ArrowRight className="ml-2 h-4 w-4" /> + </Link> + </Button> + <Button variant="outline" size="lg" className="text-base px-8" asChild> + <Link href="/collections"> + View Collections + </Link> + </Button> + </div> + + {/* Social proof */} + <div className="flex items-center space-x-6 pt-4"> + <div className="flex items-center space-x-1"> + <div className="flex"> + {[1, 2, 3, 4, 5].map((star) => ( + <Star key={star} className="w-4 h-4 fill-yellow-400 text-yellow-400" /> + ))} + </div> + <span className="text-sm font-medium">4.9/5</span> + </div> + <div className="text-sm text-muted-foreground"> + Trusted by <span className="font-semibold text-foreground">50,000+</span> customers + </div> + </div> + </div> + + {/* 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"> + <Sparkles className="w-8 h-8 text-white" /> + </div> + <p className="font-medium">Featured Product</p> + <p className="text-sm">Premium Winter Coat</p> + </div> + </div> + + {/* Price tag */} + <div className="absolute -top-4 -right-4 bg-red-500 text-white px-4 py-2 rounded-full shadow-lg"> + <span className="text-sm font-bold">50% OFF</span> + </div> + </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="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> + <p className="font-medium text-sm">Summer Dress</p> + <p className="text-xs text-muted-foreground">$89.99</p> + <div className="flex items-center space-x-1 mt-1"> + <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" /> + <span className="text-xs">4.8</span> + </div> + </div> + </div> + </div> + + <div className="absolute -right-8 bottom-1/4 bg-white rounded-lg shadow-lg p-4 max-w-[200px] border"> + <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> + <p className="font-medium text-sm">Casual Sneakers</p> + <p className="text-xs text-muted-foreground">$129.99</p> + <div className="flex items-center space-x-1 mt-1"> + <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" /> + <span className="text-xs">4.9</span> + </div> + </div> + </div> + </div> + + {/* Stats bubble */} + <div className="absolute top-8 -left-4 bg-primary text-primary-foreground rounded-3xl px-6 py-3 shadow-lg"> + <div className="text-center"> + <p className="text-xs font-medium">This Week</p> + <p className="text-lg font-bold">2.5K+</p> + <p className="text-xs">Orders</p> + </div> + </div> + </div> + </div> + </div> + + {/* Bottom wave */} + <div className="absolute bottom-0 left-0 right-0"> + <svg + className="w-full h-12 fill-white" + viewBox="0 0 1200 120" + preserveAspectRatio="none" + > + <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" + /> + </svg> + </div> + </section> + ); +}
\ No newline at end of file |