Skip to content

Commit 6746c78

Browse files
TacticalReaderTacticalReader
authored
Update FeaturedProducts.jsx
1 parent a7fec6a commit 6746c78

1 file changed

Lines changed: 79 additions & 47 deletions

File tree

‎src/components/home/FeaturedProducts.jsx‎

Lines changed: 79 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
// src/components/home/FeaturedProducts.jsx
2-
// "New Arrivals" section — uses promo-new-arrivals.webp as header bg
3-
// Products with isNew: true are shown via ProductCard
4-
51
import { Link } from 'react-router-dom';
62
import { motion } from 'framer-motion';
73
import allProducts from '../../data/allProducts';
@@ -11,66 +7,102 @@ const newArrivals = allProducts.filter((p) => p.isNew).slice(0, 8);
117

128
export default function FeaturedProducts() {
139
return (
14-
<section id="new-arrivals" className="py-16 md:py-24" aria-labelledby="new-arrivals-heading">
15-
{/* Section header with promo background image */}
16-
<div
17-
className="relative mb-12 flex flex-col items-center justify-center overflow-hidden rounded-2xl mx-4 md:mx-8 py-12"
18-
style={{ minHeight: '160px' }}
19-
>
20-
<img
21-
src={import.meta.env.BASE_URL + 'assets/images/banners/promo-new-arrivals.webp'}
22-
alt="New Arrivals"
23-
width={1200}
24-
height={400}
25-
loading="lazy"
26-
className="absolute inset-0 h-full w-full object-cover"
27-
/>
28-
<div className="absolute inset-0" style={{ background: 'rgba(0,0,0,0.48)' }} />
29-
<div className="relative z-10 text-center text-white px-4">
30-
<p className="text-xs font-semibold uppercase tracking-[0.2em] opacity-75 mb-2">✦ Just Arrived</p>
31-
<h2
32-
id="new-arrivals-heading"
33-
className="text-3xl font-extrabold md:text-4xl"
34-
style={{ fontFamily: 'var(--font-heading)' }}
10+
<section id="new-arrivals" className="py-16 md:py-32 bg-gray-50 dark:bg-zinc-950" aria-labelledby="new-arrivals-heading">
11+
{/* Enhanced Section header with modern overlay and glassmorphism */}
12+
<div className="container mx-auto px-4 mb-16">
13+
<div className="relative flex flex-col items-center justify-center overflow-hidden rounded-3xl min-h-[320px] md:min-h-[400px] shadow-2xl group">
14+
<img
15+
src={import.meta.env.BASE_URL + 'assets/images/banners/promo-new-arrivals.webp'}
16+
alt="New Arrivals Background"
17+
loading="lazy"
18+
className="absolute inset-0 h-full w-full object-cover transition-transform duration-1000 group-hover:scale-105"
19+
/>
20+
{/* Refined gradient overlay */}
21+
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/20" />
22+
23+
{/* Glassmorphic content box */}
24+
<motion.div
25+
initial={{ opacity: 0, y: 20 }}
26+
whileInView={{ opacity: 1, y: 0 }}
27+
viewport={{ once: true }}
28+
transition={{ duration: 0.6 }}
29+
className="relative z-10 text-center text-white px-8 py-10 backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl mx-4 max-w-lg shadow-xl"
3530
>
36-
New Arrivals
37-
</h2>
38-
<p className="mt-2 text-sm opacity-80 max-w-md mx-auto">
39-
Fresh styles added every week — be the first to wear them.
40-
</p>
31+
<div className="inline-flex items-center justify-center space-x-2 mb-4">
32+
<span className="flex h-2 w-2 rounded-full bg-blue-400 animate-pulse" />
33+
<p className="text-xs font-bold uppercase tracking-widest text-blue-200">Just Arrived</p>
34+
</div>
35+
<h2
36+
id="new-arrivals-heading"
37+
className="text-4xl md:text-5xl font-extrabold tracking-tight mb-4 text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300"
38+
>
39+
New Arrivals
40+
</h2>
41+
<p className="text-sm md:text-base text-gray-200 font-medium leading-relaxed">
42+
Discover the latest styles added this week. Elevate your wardrobe with our fresh curated pieces.
43+
</p>
44+
</motion.div>
4145
</div>
4246
</div>
4347

44-
<div className="container">
48+
<div className="container mx-auto px-4">
4549
{newArrivals.length === 0 ? (
46-
<p className="py-12 text-center" style={{ color: 'var(--color-text-muted)' }}>
47-
No new arrivals right now. Check back soon!
48-
</p>
50+
<div className="py-20 flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
51+
<svg className="w-16 h-16 mb-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
52+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
53+
</svg>
54+
<p className="text-lg font-medium">No new arrivals right now.</p>
55+
<p className="text-sm">Check back soon for fresh drops!</p>
56+
</div>
4957
) : (
50-
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:gap-6">
58+
<div className="grid grid-cols-2 gap-x-4 gap-y-10 sm:grid-cols-3 lg:grid-cols-4 lg:gap-x-8 lg:gap-y-12">
5159
{newArrivals.map((product, i) => (
5260
<motion.div
5361
key={product.id}
54-
initial={{ opacity: 0, y: 24 }}
62+
initial={{ opacity: 0, y: 30 }}
5563
whileInView={{ opacity: 1, y: 0 }}
56-
viewport={{ once: true, margin: '-40px' }}
57-
transition={{ delay: i * 0.07, duration: 0.4 }}
64+
viewport={{ once: true, margin: '-50px' }}
65+
transition={{
66+
delay: i * 0.1,
67+
duration: 0.5,
68+
type: 'spring',
69+
stiffness: 100
70+
}}
71+
className="group cursor-pointer"
5872
>
59-
<ProductCard product={product} />
73+
{/* Wrapper interaction for the product card */}
74+
<div className="transition-transform duration-300 ease-out group-hover:-translate-y-2">
75+
<ProductCard product={product} />
76+
</div>
6077
</motion.div>
6178
))}
6279
</div>
6380
)}
6481

65-
<div className="mt-10 text-center">
66-
<Link
67-
to="/shop"
68-
className="inline-flex items-center gap-2 rounded-full border px-8 py-3 text-sm font-semibold transition-colors hover:opacity-80"
69-
style={{ borderColor: 'var(--color-primary)', color: 'var(--color-primary)' }}
82+
{/* Modern CTA */}
83+
{newArrivals.length > 0 && (
84+
<motion.div
85+
initial={{ opacity: 0 }}
86+
whileInView={{ opacity: 1 }}
87+
viewport={{ once: true }}
88+
className="mt-16 text-center"
7089
>
71-
View All New Arrivals →
72-
</Link>
73-
</div>
90+
<Link
91+
to="/shop"
92+
className="group inline-flex items-center gap-3 rounded-full bg-zinc-900 dark:bg-white px-8 py-4 text-sm font-semibold text-white dark:text-zinc-900 shadow-md transition-all hover:bg-zinc-800 dark:hover:bg-gray-100 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-zinc-900 focus:ring-offset-2 dark:focus:ring-white dark:focus:ring-offset-zinc-900"
93+
>
94+
<span>Explore All New Arrivals</span>
95+
<svg
96+
className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1"
97+
fill="none"
98+
viewBox="0 0 24 24"
99+
stroke="currentColor"
100+
>
101+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
102+
</svg>
103+
</Link>
104+
</motion.div>
105+
)}
74106
</div>
75107
</section>
76108
);

0 commit comments

Comments
 (0)