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 } },
|
visible: { opacity: 1, x: 0, transition: { duration: 0.4, ease: EASE } },
|
||||||
};
|
};
|
||||||
|
|
||||||
// Right column: each element enters independently
|
const logoReveal = {
|
||||||
const imgFromLeft = {
|
hidden: { opacity: 0, scale: 0.88, y: 20 },
|
||||||
hidden: { opacity: 0, x: -36 },
|
visible: { opacity: 1, scale: 1, y: 0, transition: { duration: 0.75, ease: EASE, delay: 0.15 } },
|
||||||
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 statStagger = {
|
const statStagger = {
|
||||||
@@ -93,16 +82,6 @@ export function Hero() {
|
|||||||
transition={{ duration: 14, repeat: Infinity, ease: "easeInOut" }}
|
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) */}
|
{/* 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">
|
<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>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* RIGHT COLUMN: Individual image + center card animations */}
|
{/* RIGHT COLUMN: Nearle brand logo composition */}
|
||||||
<div className="w-full z-20">
|
<div className="w-full z-20 flex items-center justify-center py-4 lg:py-0">
|
||||||
|
|
||||||
{/* DESKTOP LAYOUT (lg and above) */}
|
|
||||||
<div className="hidden lg:block relative h-[500px] lg:h-[560px] w-full">
|
|
||||||
|
|
||||||
{/* Left image: slides in from left */}
|
|
||||||
<motion.div
|
<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"
|
className="relative flex items-center justify-center"
|
||||||
variants={imgFromLeft}
|
variants={logoReveal}
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
animate="visible"
|
animate="visible"
|
||||||
transition={{ delay: 0.3 }}
|
|
||||||
whileHover={{ scale: 1.02, transition: { duration: 0.25, ease: EASE } }}
|
|
||||||
>
|
>
|
||||||
<Image
|
{/* Atmospheric glow — elliptical, not circular, fades naturally */}
|
||||||
src="/images/cat-daily-essentials.png"
|
<div
|
||||||
alt="Local grocery products"
|
className="absolute pointer-events-none"
|
||||||
fill
|
style={{
|
||||||
className="object-cover"
|
width: '160%',
|
||||||
sizes="170px"
|
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
|
<motion.div
|
||||||
className="absolute left-[38%] top-[8%] z-20"
|
animate={!reducedMotion ? { y: [0, -16, 0] } : {}}
|
||||||
variants={centerCardReveal}
|
transition={{ duration: 11, repeat: Infinity, ease: "easeInOut", delay: 0.8 }}
|
||||||
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" }}
|
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src="/nearlenewlogo.png"
|
src="/nearlenewlogo.png"
|
||||||
alt="Central logo panel"
|
alt="Nearle – Your Neighbourhood Commerce Platform"
|
||||||
width={100}
|
width={480}
|
||||||
height={100}
|
height={480}
|
||||||
className="object-contain max-h-[90px] w-auto motion-safe:animate-[pulse_6s_infinite]"
|
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
|
priority
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user