fix home page hero section
This commit is contained in:
@@ -53,20 +53,9 @@ const secondaryCtaVariant = {
|
||||
visible: { opacity: 1, x: 0, transition: { duration: 0.4, ease: EASE } },
|
||||
};
|
||||
|
||||
// Right column: each element enters independently
|
||||
const imgFromLeft = {
|
||||
hidden: { opacity: 0, x: -36 },
|
||||
visible: { opacity: 1, x: 0, transition: { duration: 0.65, ease: EASE } },
|
||||
};
|
||||
|
||||
const centerCardReveal = {
|
||||
hidden: { opacity: 0, scale: 0.86, y: 24 },
|
||||
visible: { opacity: 1, scale: 1, y: 0, transition: { duration: 0.75, ease: EASE } },
|
||||
};
|
||||
|
||||
const imgFromRight = {
|
||||
hidden: { opacity: 0, x: 36 },
|
||||
visible: { opacity: 1, x: 0, transition: { duration: 0.65, ease: EASE } },
|
||||
const logoReveal = {
|
||||
hidden: { opacity: 0, scale: 0.88, y: 20 },
|
||||
visible: { opacity: 1, scale: 1, y: 0, transition: { duration: 0.75, ease: EASE, delay: 0.15 } },
|
||||
};
|
||||
|
||||
const statStagger = {
|
||||
@@ -93,16 +82,6 @@ export function Hero() {
|
||||
transition={{ duration: 14, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
|
||||
{/* 2. Purple solid circle (center-right around collage) */}
|
||||
<div className="hidden lg:block absolute right-[22%] top-[38%] w-[84px] h-[84px] rounded-full bg-[#6D28D9] z-0 shadow-[0_8px_32px_rgba(109,40,217,0.3)] pointer-events-none motion-safe:animate-pulse" />
|
||||
|
||||
{/* 3. Striped purple circle (lower-middle collage area) */}
|
||||
<div
|
||||
className="hidden lg:block absolute left-[45%] bottom-[15%] w-[100px] h-[100px] rounded-full opacity-80 z-0 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: 'repeating-linear-gradient(45deg, rgba(109, 40, 217, 0.2) 0px, rgba(109, 40, 217, 0.2) 2px, transparent 2px, transparent 8px)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 4. Dotted pattern (between left text and right collage) */}
|
||||
<div className="hidden lg:block absolute left-[41%] top-[25%] w-48 h-48 opacity-[0.35] z-0 pointer-events-none">
|
||||
@@ -191,133 +170,42 @@ export function Hero() {
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* RIGHT COLUMN: Individual image + center card animations */}
|
||||
<div className="w-full z-20">
|
||||
|
||||
{/* DESKTOP LAYOUT (lg and above) */}
|
||||
<div className="hidden lg:block relative h-[500px] lg:h-[560px] w-full">
|
||||
|
||||
{/* Left image: slides in from left */}
|
||||
{/* RIGHT COLUMN: Nearle brand logo composition */}
|
||||
<div className="w-full z-20 flex items-center justify-center py-4 lg:py-0">
|
||||
<motion.div
|
||||
className="absolute left-[10%] top-[20%] w-[170px] h-[360px] rounded-[1.5rem] overflow-hidden shadow-lg border-2 border-white z-10"
|
||||
variants={imgFromLeft}
|
||||
className="relative flex items-center justify-center"
|
||||
variants={logoReveal}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ delay: 0.3 }}
|
||||
whileHover={{ scale: 1.02, transition: { duration: 0.25, ease: EASE } }}
|
||||
>
|
||||
<Image
|
||||
src="/images/cat-daily-essentials.png"
|
||||
alt="Local grocery products"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="170px"
|
||||
{/* Atmospheric glow — elliptical, not circular, fades naturally */}
|
||||
<div
|
||||
className="absolute pointer-events-none"
|
||||
style={{
|
||||
width: '160%',
|
||||
height: '160%',
|
||||
top: '-30%',
|
||||
left: '-30%',
|
||||
background: 'radial-gradient(ellipse 60% 50% at 50% 53%, rgba(109,40,217,0.15) 0%, rgba(109,40,217,0.05) 48%, transparent 75%)',
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Center card: scales up from below, then gently bobs */}
|
||||
{/* Logo with slow float and grounding shadow */}
|
||||
<motion.div
|
||||
className="absolute left-[38%] top-[8%] z-20"
|
||||
variants={centerCardReveal}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ delay: 0.15 }}
|
||||
>
|
||||
<motion.div
|
||||
animate={!reducedMotion ? { y: [0, -10, 0] } : {}}
|
||||
transition={{ delay: 0.9, duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
||||
whileHover={{ scale: 1.02, transition: { duration: 0.25, ease: EASE } }}
|
||||
>
|
||||
<div className="relative w-[180px] sm:w-[220px] h-[280px] sm:h-[340px] rounded-[24px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_40px_rgba(99,48,214,0.1)] bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-6">
|
||||
<Image
|
||||
src="/nearlenewlogo.png"
|
||||
alt="Central logo panel"
|
||||
width={160}
|
||||
height={160}
|
||||
className="object-contain max-h-[140px] w-auto motion-safe:animate-[pulse_6s_infinite]"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right image: slides in from right */}
|
||||
<motion.div
|
||||
className="absolute right-[2%] top-[18%] w-[180px] h-[390px] rounded-[1.5rem] overflow-hidden shadow-lg border-2 border-white z-10"
|
||||
variants={imgFromRight}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ delay: 0.42 }}
|
||||
whileHover={{ scale: 1.02, transition: { duration: 0.25, ease: EASE } }}
|
||||
>
|
||||
<Image
|
||||
src="/nearle people.png"
|
||||
alt="Local customer shopping"
|
||||
fill
|
||||
priority
|
||||
className="object-cover"
|
||||
sizes="180px"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* MOBILE/TABLET COLLAGE (below lg) */}
|
||||
<div className="lg:hidden flex items-center justify-center gap-2 mt-2 w-full relative h-[280px]">
|
||||
<motion.div
|
||||
className="relative w-[95px] h-[200px] rounded-2xl overflow-hidden border border-white shadow-md z-10"
|
||||
variants={imgFromLeft}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ delay: 0.28 }}
|
||||
>
|
||||
<Image
|
||||
src="/images/cat-daily-essentials.png"
|
||||
alt="Grocery products"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="95px"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="relative w-[115px] h-[240px] rounded-2xl border-4 border-white shadow-lg bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-3 -mx-5 z-20"
|
||||
variants={centerCardReveal}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ delay: 0.15 }}
|
||||
>
|
||||
<motion.div
|
||||
animate={!reducedMotion ? { y: [0, -6, 0] } : {}}
|
||||
transition={{ delay: 0.85, duration: 3.5, repeat: Infinity, ease: "easeInOut" }}
|
||||
animate={!reducedMotion ? { y: [0, -16, 0] } : {}}
|
||||
transition={{ duration: 11, repeat: Infinity, ease: "easeInOut", delay: 0.8 }}
|
||||
>
|
||||
<Image
|
||||
src="/nearlenewlogo.png"
|
||||
alt="Central logo panel"
|
||||
width={100}
|
||||
height={100}
|
||||
className="object-contain max-h-[90px] w-auto motion-safe:animate-[pulse_6s_infinite]"
|
||||
alt="Nearle – Your Neighbourhood Commerce Platform"
|
||||
width={480}
|
||||
height={480}
|
||||
className="relative z-10 w-[200px] sm:w-[260px] lg:w-[400px] xl:w-[460px] h-auto object-contain select-none"
|
||||
style={{ filter: 'drop-shadow(0 28px 52px rgba(109,40,217,0.22)) drop-shadow(0 4px 10px rgba(22,0,29,0.06))' }}
|
||||
priority
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="relative w-[105px] h-[220px] rounded-2xl overflow-hidden border border-white shadow-md z-10"
|
||||
variants={imgFromRight}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{ delay: 0.36 }}
|
||||
>
|
||||
<Image
|
||||
src="/nearle people.png"
|
||||
alt="Customer"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="105px"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user