content order changes
This commit is contained in:
@@ -13,11 +13,134 @@ const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
|
||||
// power4.out approximation, matches HeroLogo's entrance ease
|
||||
const EASE_LOGO = [0.16, 1, 0.3, 1] as [number, number, number, number];
|
||||
|
||||
// 1. Verified Store SVG
|
||||
function VerifiedStoreSVG({ reduce = false }: { reduce?: boolean }) {
|
||||
return (
|
||||
<div className="relative flex items-center justify-center">
|
||||
<motion.div
|
||||
className="absolute h-10 w-10 rounded-full bg-[#6D28D9]/15 blur-md pointer-events-none"
|
||||
animate={reduce ? {} : { scale: [0.9, 1.25, 0.9], opacity: [0.25, 0.6, 0.25] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" className="relative z-10 w-8 h-8 md:w-9 md:h-9">
|
||||
<motion.path
|
||||
d="M 8 16 L 36 16 L 33 8 L 11 8 Z"
|
||||
fill="#A855F7"
|
||||
animate={reduce ? {} : { y: [0, -2, 0] }}
|
||||
transition={{ duration: 2.8, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<rect x="10" y="16" width="24" height="20" rx="2" fill="#6D28D9" />
|
||||
<rect x="18" y="24" width="8" height="12" rx="1.5" fill="#E4D1FF" />
|
||||
<motion.circle cx="32" cy="28" r="5" fill="#10B981"
|
||||
animate={reduce ? {} : { scale: [0.85, 1.15, 0.85] }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<path d="M 29.5 28 L 31.5 30 L 34.5 26.5" stroke="#FFFFFF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 2. Neighborhood Pin SVG
|
||||
function NeighborhoodPinSVG({ reduce = false }: { reduce?: boolean }) {
|
||||
return (
|
||||
<div className="relative flex items-center justify-center">
|
||||
<motion.div
|
||||
className="absolute h-10 w-10 rounded-full bg-[#6D28D9]/15 blur-md pointer-events-none"
|
||||
animate={reduce ? {} : { scale: [0.9, 1.25, 0.9], opacity: [0.25, 0.6, 0.25] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" className="relative z-10 w-8 h-8 md:w-9 md:h-9">
|
||||
<motion.circle cx="22" cy="30" r="11" stroke="#A855F7" strokeWidth="1.5" strokeDasharray="3 3"
|
||||
animate={reduce ? {} : { scale: [0.8, 1.3, 0.8], opacity: [0.3, 0.8, 0.3] }}
|
||||
transition={{ duration: 2.8, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<motion.path
|
||||
d="M 22 6 C 15 6 9 12 9 19 C 9 28 22 38 22 38 C 22 38 35 28 35 19 C 35 12 29 6 22 6 Z"
|
||||
fill="#6D28D9"
|
||||
animate={reduce ? {} : { y: [0, -3, 0] }}
|
||||
transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<circle cx="22" cy="18" r="4" fill="#FFFFFF" />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 3. Happy Customers SVG
|
||||
function HappyCustomerSVG({ reduce = false }: { reduce?: boolean }) {
|
||||
return (
|
||||
<div className="relative flex items-center justify-center">
|
||||
<motion.div
|
||||
className="absolute h-10 w-10 rounded-full bg-[#EC4899]/15 blur-md pointer-events-none"
|
||||
animate={reduce ? {} : { scale: [0.9, 1.25, 0.9], opacity: [0.25, 0.6, 0.25] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" className="relative z-10 w-8 h-8 md:w-9 md:h-9">
|
||||
<motion.circle cx="22" cy="22" r="16" fill="#F472B6"
|
||||
animate={reduce ? {} : { scale: [1, 1.06, 1] }}
|
||||
transition={{ duration: 2.6, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<circle cx="16" cy="18" r="2.5" fill="#FFFFFF" />
|
||||
<circle cx="28" cy="18" r="2.5" fill="#FFFFFF" />
|
||||
<motion.path d="M 15 26 C 18 31 26 31 29 26" stroke="#FFFFFF" strokeWidth="2.5" strokeLinecap="round"
|
||||
animate={reduce ? {} : { opacity: [0.8, 1, 0.8] }}
|
||||
transition={{ duration: 2.4, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 4. Trusted Star SVG
|
||||
function TrustedStarSVG({ reduce = false }: { reduce?: boolean }) {
|
||||
return (
|
||||
<div className="relative flex items-center justify-center">
|
||||
<motion.div
|
||||
className="absolute h-10 w-10 rounded-full bg-[#F59E0B]/20 blur-md pointer-events-none"
|
||||
animate={reduce ? {} : { scale: [0.9, 1.25, 0.9], opacity: [0.25, 0.6, 0.25] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" className="relative z-10 w-8 h-8 md:w-9 md:h-9">
|
||||
<motion.path
|
||||
d="M 22 4 L 27.5 15.5 L 40 17 L 31 26 L 33.5 38 L 22 32 L 10.5 38 L 13 26 L 4 17 L 16.5 15.5 Z"
|
||||
fill="#F59E0B"
|
||||
stroke="#FDE047"
|
||||
strokeWidth="1.5"
|
||||
style={{ transformOrigin: "22px 22px" }}
|
||||
animate={reduce ? {} : { scale: [1, 1.1, 1], rotate: [0, 4, 0, -4, 0] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const PROOF_ITEMS = [
|
||||
{ label: "Verified", text: "Local Stores", icon: "store" },
|
||||
{ label: "Neighborhood", text: "Coverage", icon: "location_on" },
|
||||
{ label: "Growing", text: "Happy Customers", icon: "mood" },
|
||||
{ label: "Trusted", text: "Local Platform", icon: "star" },
|
||||
{
|
||||
label: "Verified",
|
||||
text: "Local Stores",
|
||||
dotColor: "bg-[#6D28D9]",
|
||||
renderSVG: (reduce: boolean) => <VerifiedStoreSVG reduce={reduce} />,
|
||||
},
|
||||
{
|
||||
label: "Neighborhood",
|
||||
text: "Coverage",
|
||||
dotColor: "bg-[#A855F7]",
|
||||
renderSVG: (reduce: boolean) => <NeighborhoodPinSVG reduce={reduce} />,
|
||||
},
|
||||
{
|
||||
label: "Growing",
|
||||
text: "Happy Customers",
|
||||
dotColor: "bg-[#EC4899]",
|
||||
renderSVG: (reduce: boolean) => <HappyCustomerSVG reduce={reduce} />,
|
||||
},
|
||||
{
|
||||
label: "Trusted",
|
||||
text: "Local Platform",
|
||||
dotColor: "bg-[#F59E0B]",
|
||||
renderSVG: (reduce: boolean) => <TrustedStarSVG reduce={reduce} />,
|
||||
},
|
||||
];
|
||||
|
||||
// Shared cascade timing: logo settles at ~1.2s, then badge → heading → description
|
||||
@@ -182,7 +305,7 @@ export function Hero() {
|
||||
className="flex items-center gap-2 rounded-xl bg-[#6330D6] px-7 py-3.5 text-sm font-black text-white shadow-lg transition-all duration-200 hover:bg-[#5225b8] hover:shadow-xl active:scale-95 sm:px-8"
|
||||
>
|
||||
<MaterialIcon icon="auto_awesome" size={18} />
|
||||
<span>Explore AI Commerce</span>
|
||||
<span>Discover Nearby Stores</span>
|
||||
</Link>
|
||||
</MagneticButton>
|
||||
<MagneticButton>
|
||||
@@ -204,24 +327,60 @@ export function Hero() {
|
||||
<div className="border-t border-[#EEE7F4]/80 bg-white">
|
||||
<div className="px-6 sm:px-10 max-w-[1600px] mx-auto py-6 md:py-8 lg:py-10">
|
||||
<motion.div
|
||||
className="bg-white rounded-[32px] border border-[#E9D8FD] shadow-[0_10px_35px_rgba(124,58,237,0.08),0_2px_8px_rgba(124,58,237,0.05)] px-6 py-6 md:px-8 md:py-7 lg:px-12 lg:py-8"
|
||||
className="bg-white rounded-[32px] border border-[#E9D8FD] shadow-[0_10px_35px_rgba(124,58,237,0.08),0_2px_8px_rgba(124,58,237,0.05)] px-6 py-6 md:px-8 md:py-7 lg:px-12 lg:py-8 relative overflow-hidden group"
|
||||
variants={statStagger}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewport}
|
||||
>
|
||||
<div className="flex flex-col gap-6 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-6 lg:flex lg:flex-row lg:items-center lg:justify-between lg:gap-0">
|
||||
{/* Floating Particle Glow Dots on Hover */}
|
||||
<div aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden z-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100">
|
||||
<motion.span
|
||||
className="absolute h-1.5 w-1.5 rounded-full bg-[#6D28D9] shadow-[0_0_8px_#6D28D9]"
|
||||
style={{ left: "12%", top: "35%" }}
|
||||
animate={shouldReduce ? {} : { y: [0, -10, 0], opacity: [0.3, 0.9, 0.3] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<motion.span
|
||||
className="absolute h-1.5 w-1.5 rounded-full bg-[#A855F7] shadow-[0_0_8px_#A855F7]"
|
||||
style={{ left: "38%", top: "60%" }}
|
||||
animate={shouldReduce ? {} : { y: [0, -12, 0], opacity: [0.3, 0.9, 0.3] }}
|
||||
transition={{ duration: 4.8, delay: 0.8, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<motion.span
|
||||
className="absolute h-1.5 w-1.5 rounded-full bg-[#EC4899] shadow-[0_0_8px_#EC4899]"
|
||||
style={{ left: "62%", top: "25%" }}
|
||||
animate={shouldReduce ? {} : { y: [0, -10, 0], opacity: [0.3, 0.9, 0.3] }}
|
||||
transition={{ duration: 4.2, delay: 1.2, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<motion.span
|
||||
className="absolute h-1.5 w-1.5 rounded-full bg-[#F59E0B] shadow-[0_0_8px_#F59E0B]"
|
||||
style={{ left: "85%", top: "55%" }}
|
||||
animate={shouldReduce ? {} : { y: [0, -12, 0], opacity: [0.3, 0.9, 0.3] }}
|
||||
transition={{ duration: 5, delay: 0.4, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex flex-col gap-6 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-6 lg:flex lg:flex-row lg:items-center lg:justify-between lg:gap-0">
|
||||
{PROOF_ITEMS.map((item, idx) => (
|
||||
<Fragment key={item.label}>
|
||||
<motion.div
|
||||
variants={statItem}
|
||||
className="flex items-center gap-[18px] group cursor-default transition-transform duration-[250ms] hover:-translate-y-1 lg:flex-1 lg:py-2"
|
||||
className="relative flex items-center gap-[18px] group/item cursor-default transition-transform duration-[250ms] hover:-translate-y-1 lg:flex-1 lg:py-2"
|
||||
>
|
||||
<div className="w-16 h-16 rounded-full bg-[#F5EDFF] text-[#6D28D9] flex items-center justify-center shrink-0 transition-colors duration-[250ms] group-hover:bg-[#E4D1FF]">
|
||||
<MaterialIcon icon={item.icon} size={28} />
|
||||
{/* Corner Hover Glowing Dot on Item */}
|
||||
<div className="absolute -top-1 right-2 z-20 flex items-center gap-2 opacity-0 transition-opacity duration-300 group-hover/item:opacity-100">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className={`absolute inline-flex h-full w-full animate-ping rounded-full ${item.dotColor} opacity-75`} />
|
||||
<span className={`relative inline-flex h-2 w-2 rounded-full ${item.dotColor} shadow-[0_0_6px_currentColor]`} />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="w-16 h-16 rounded-full bg-[#F5EDFF] text-[#6D28D9] flex items-center justify-center shrink-0 transition-all duration-[250ms] group-hover/item:bg-[#E4D1FF] group-hover/item:scale-110">
|
||||
{item.renderSVG(!!shouldReduce)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl lg:text-[28px] font-black text-[#17051F] leading-none tracking-tight transition-colors duration-[250ms] group-hover:text-[#6D28D9]">
|
||||
<div className="text-2xl lg:text-[28px] font-black text-[#17051F] leading-none tracking-tight transition-colors duration-[250ms] group-hover/item:text-[#6D28D9]">
|
||||
{item.label}
|
||||
</div>
|
||||
<div className="text-sm lg:text-[15px] font-medium text-[#6B7280] mt-1.5">
|
||||
|
||||
Reference in New Issue
Block a user