1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
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>
);
}
|
