89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
|
|
import {
|
|
slideInLeftSubtle,
|
|
fadeIn,
|
|
staggerContainer,
|
|
} 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 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;
|
|
|
|
export function BusinessHero() {
|
|
return (
|
|
<section className="w-full flex flex-col select-none bg-white">
|
|
<div className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC]">
|
|
<Image
|
|
src="/images/business1.webp"
|
|
alt=""
|
|
fill
|
|
sizes="100vw"
|
|
className="absolute inset-0 z-0 h-full w-full object-cover object-[62%_center] md:object-[58%_center] xl:object-center"
|
|
priority
|
|
fetchPriority="high"
|
|
aria-hidden="true"
|
|
/>
|
|
<div className="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />
|
|
|
|
<div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-20 lg:px-16 lg:py-24 xl:px-8 max-w-[1600px] mx-auto">
|
|
|
|
{/* Left Column: animated with unique stagger */}
|
|
<motion.div
|
|
className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-10 md:px-14 md:py-12"
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
<motion.span
|
|
variants={badgeVariant}
|
|
className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white text-[#6330D6] shadow-md 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-extrabold text-white leading-[1.1] tracking-tight [text-shadow:0_4px_32px_rgba(0,0,0,0.5)]"
|
|
>
|
|
Grow Your Local Business,
|
|
<br />
|
|
<span className="text-[#A855F7]">Neighbourhood by Neighbourhood.</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
variants={descVariant}
|
|
className="max-w-[780px] text-lg sm:text-xl md:text-xl text-white/95 font-medium mt-6 leading-[1.6] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
|
|
>
|
|
Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
|
|
</motion.p>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
|
<div className="px-6 sm:px-10 max-w-[1600px] mx-auto">
|
|
<FeatureStatsRow items={HERO_BENEFITS} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|