124 lines
4.7 KiB
TypeScript
124 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { motion } from "framer-motion";
|
|
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
|
|
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
|
|
import {
|
|
slideInLeftSubtle,
|
|
fadeUp,
|
|
fadeIn,
|
|
scaleIn,
|
|
staggerContainer,
|
|
viewport,
|
|
} from "@/lib/animations";
|
|
|
|
const HERO_BENEFITS = [
|
|
{ title: "More Visibility Across Nearle", icon: "visibility", desc: "Get discovered by locals" },
|
|
{ title: "Easy Order Management", icon: "assignment", desc: "Track and fulfill cleanly" },
|
|
{ title: "Grow Repeat Customers", icon: "trending_up", desc: "Build neighborhood loyalty" },
|
|
{ title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" },
|
|
];
|
|
|
|
const COLLAGE_CARDS = [
|
|
{ text: "Nearby Customers", icon: "people" },
|
|
{ text: "Orders & Offers", icon: "local_offer" },
|
|
{ text: "Local Delivery Support", icon: "local_shipping" },
|
|
];
|
|
|
|
// Choreography: badge slides left → title fades up → description fades in (opacity only) → CTAs scale in
|
|
const badgeVariant = slideInLeftSubtle;
|
|
const titleVariant = {
|
|
hidden: { opacity: 0, y: 28 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
|
|
},
|
|
};
|
|
const descVariant = fadeIn;
|
|
const ctaVariant = scaleIn;
|
|
|
|
export function BusinessHero() {
|
|
return (
|
|
<section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
|
|
<div className="border-b border-[#6330D6]/10">
|
|
<div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 max-w-[1600px] mx-auto">
|
|
|
|
{/* Left Column: animated with unique stagger */}
|
|
<motion.div
|
|
className="flex flex-col text-left max-w-xl"
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
<motion.span
|
|
variants={badgeVariant}
|
|
className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit"
|
|
>
|
|
Nearle for Business
|
|
</motion.span>
|
|
|
|
<motion.h1
|
|
variants={titleVariant}
|
|
className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight"
|
|
>
|
|
Grow Your Local Business,
|
|
<br />
|
|
<span className="text-[#6330D6]">Neighbourhood by Neighbourhood.</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
variants={descVariant}
|
|
className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed"
|
|
>
|
|
Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
variants={ctaVariant}
|
|
className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto"
|
|
>
|
|
<Link
|
|
href="/contact"
|
|
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
|
|
>
|
|
List Your Store
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
|
|
>
|
|
Explore Solutions
|
|
</Link>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Right Column: subtle fade-in — HeroVisualCollage internal animations choreograph each element */}
|
|
<motion.div
|
|
className="w-full"
|
|
variants={fadeIn}
|
|
initial="hidden"
|
|
animate="visible"
|
|
transition={{ delay: 0.2 }}
|
|
>
|
|
<HeroVisualCollage
|
|
centerImage="/nearlenewlogo.png"
|
|
leftImage="/images/cat-daily-essentials.png"
|
|
rightImage="/Nearle Business.png"
|
|
glassCards={COLLAGE_CARDS}
|
|
isPhoneCenter={false}
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
|
<div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
|
|
<FeatureStatsRow items={HERO_BENEFITS} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|