180 lines
7.1 KiB
TypeScript
180 lines
7.1 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
|
|
|
const QUICK_LINKS = [
|
|
{
|
|
name: "Daily Groceries",
|
|
icon: "shopping_basket",
|
|
label: "Fresh & On-Time",
|
|
},
|
|
|
|
{
|
|
name: "Hot Meals",
|
|
icon: "fastfood",
|
|
label: "Quick & tasty",
|
|
},
|
|
{
|
|
name: "wellness ",
|
|
icon: "medical_services",
|
|
label: "Essential & Trusted",
|
|
},
|
|
{
|
|
name: "More Services",
|
|
icon: "store",
|
|
label: "Explore More",
|
|
},
|
|
];
|
|
|
|
export function Hero() {
|
|
return (
|
|
<>
|
|
<div className="hero">
|
|
{/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
|
|
<div className="hero-dark-panel select-none pointer-events-none">
|
|
{/* Subtle Background Dot Texture */}
|
|
<div className="hero-map-layer select-none">
|
|
<Image
|
|
src="/images/slider-glob.png"
|
|
alt="Subtle Background"
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 40vw"
|
|
className="object-contain object-left-top"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
|
|
{/* Soft purple radial glow */}
|
|
<div className="absolute right-0 top-1/4 z-0 h-[60%] w-[45%] rounded-full bg-primary/45 blur-[120px] opacity-50 pointer-events-none" />
|
|
</div>
|
|
|
|
{/* ─── Main Content Wrapper ─── */}
|
|
<div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start">
|
|
{/* Left Column: Text & Search Content */}
|
|
<div className="hero-content text-white select-none">
|
|
<span className="inline-block text-xs font-black tracking-widest uppercase mb-5 bg-brand-accent/15 px-4 py-1.5 rounded-full border border-brand-accent/20 text-brand-accent">
|
|
Neighbourhood commerce, made simple
|
|
</span>
|
|
|
|
<h1 className="text-4xl sm:text-5xl lg:text-[52px] xl:text-[62px] 2xl:text-[74px] lg:leading-[1.15] font-display font-black tracking-tight mb-8">
|
|
Your Favourite Local Stores,
|
|
<br />
|
|
<span className="text-brand-accent drop-shadow-md">
|
|
Now at Your Doorstep.
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-body-lg md:text-[20px] md:leading-8 text-white/90 mb-10 leading-relaxed max-w-2xl">
|
|
Order groceries, medicines, food and everyday essentials from trusted stores near you — all in one convenient app.
|
|
</p>
|
|
|
|
{/* CTAs */}
|
|
<div className="flex flex-col md:flex-row md:flex-wrap gap-4 mt-8 w-full md:w-auto">
|
|
<Link
|
|
href="/people"
|
|
className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-8 py-4 rounded-xl text-sm md:text-base hover:shadow-xl transition-all duration-300 active:scale-95 flex items-center justify-center gap-2 w-full md:w-auto min-h-[48px] whitespace-nowrap"
|
|
>
|
|
Explore Nearby Stores
|
|
</Link>
|
|
<Link
|
|
href="/businesses"
|
|
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-4 rounded-xl text-sm md:text-base transition-all duration-300 active:scale-95 flex items-center justify-center gap-2 w-full md:w-auto min-h-[48px] whitespace-nowrap"
|
|
>
|
|
List Your Store
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Trust points */}
|
|
<div className="flex flex-wrap gap-x-8 gap-y-3 mt-12 text-sm md:text-base text-white/90">
|
|
<div className="flex items-center gap-2">
|
|
<MaterialIcon icon="store" size={18} className="text-brand-accent" />
|
|
<span>Real local shops</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<MaterialIcon icon="sell" size={18} className="text-brand-accent" />
|
|
<span>Fair local prices</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<MaterialIcon icon="local_shipping" size={18} className="text-brand-accent" />
|
|
<span>Neighbourhood delivery</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Mobile/Tablet Only Nearle Bag Logo with context pins */}
|
|
<div className="hero-mobile-logo block lg:hidden mt-8 select-none pointer-events-none relative">
|
|
<div className="relative w-[280px] h-[230px] mx-auto">
|
|
<Image
|
|
src="/nearlenewlogo.png"
|
|
alt="Nearle delivery"
|
|
fill
|
|
sizes="(max-width: 1023px) 280px, 0px"
|
|
className="object-contain drop-shadow-2xl"
|
|
priority
|
|
/>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Centered Nearle bag visual with local commerce context pins and route line */}
|
|
<div className="hero-visual-layer select-none pointer-events-none relative">
|
|
<div className="hero-visual-panel" />
|
|
|
|
|
|
<div className="hero-visual-image relative">
|
|
<Image
|
|
src="/nearlenewlogo.png"
|
|
alt="Nearle delivery"
|
|
fill
|
|
sizes="(max-width: 768px) 95vw, 48vw"
|
|
className="object-contain drop-shadow-2xl"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Overlapping Quick Category Links */}
|
|
<div className="service-cards-wrapper max-w-container-max mx-auto">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{QUICK_LINKS.map((item) => (
|
|
<div
|
|
key={item.name}
|
|
className="flex items-center gap-4 bg-white p-5 rounded-2xl border border-outline-variant/15 shadow-xl hover:shadow-2xl premium-card cursor-pointer group"
|
|
>
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-brand-accent/10 flex items-center justify-center group-hover:bg-brand-accent/20 transition-colors">
|
|
<MaterialIcon
|
|
icon={item.icon}
|
|
size={24}
|
|
className="text-brand-accent"
|
|
/>
|
|
</div>
|
|
<div className="flex-grow">
|
|
<h3 className="text-sm md:text-base font-extrabold text-brand-dark group-hover:text-primary transition-colors">
|
|
{item.name}
|
|
</h3>
|
|
<p className="text-xs text-on-surface-variant font-medium mt-0.5 leading-tight">
|
|
{item.label}
|
|
</p>
|
|
</div>
|
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-surface-container flex items-center justify-center opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-300">
|
|
<MaterialIcon
|
|
icon="arrow_forward"
|
|
size={16}
|
|
className="text-primary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|