221 lines
8.2 KiB
TypeScript
221 lines
8.2 KiB
TypeScript
import Image from "next/image";
|
|
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
|
|
|
const QUICK_LINKS = [
|
|
{
|
|
name: "Hot Meals",
|
|
icon: "fastfood",
|
|
label: "Quick & tasty",
|
|
},
|
|
{
|
|
name: "Daily Groceries",
|
|
icon: "shopping_basket",
|
|
label: "Fresh & On-Time",
|
|
},
|
|
{
|
|
name: "Health & Care",
|
|
icon: "medical_services",
|
|
label: "Essential & Trusted",
|
|
},
|
|
{
|
|
name: "More Services",
|
|
icon: "grid_view",
|
|
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 (Minimal, barely visible) */}
|
|
<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>
|
|
|
|
{/* Minimal Route Animation (2-3 thin lines only, very subtle) */}
|
|
<svg
|
|
className="absolute inset-0 w-full h-full pointer-events-none"
|
|
viewBox="0 0 1000 800"
|
|
preserveAspectRatio="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<defs>
|
|
<filter
|
|
id="heroRouteGlow"
|
|
x="-50%"
|
|
y="-50%"
|
|
width="200%"
|
|
height="200%"
|
|
>
|
|
<feGaussianBlur stdDeviation="3" result="blur" />
|
|
<feMerge>
|
|
<feMergeNode in="blur" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
{/* Minimal glow nodes - only 2 small ones at top */}
|
|
<circle
|
|
cx="140"
|
|
cy="100"
|
|
r="5"
|
|
className="fill-[#bd34fe] opacity-20 animate-pulse"
|
|
filter="url(#heroRouteGlow)"
|
|
/>
|
|
<circle cx="140" cy="100" r="1.5" className="fill-white" />
|
|
|
|
<circle
|
|
cx="300"
|
|
cy="80"
|
|
r="5"
|
|
className="fill-[#bd34fe] opacity-20 animate-pulse"
|
|
filter="url(#heroRouteGlow)"
|
|
/>
|
|
<circle cx="300" cy="80" r="1.5" className="fill-white" />
|
|
|
|
{/* Only 2 very thin route lines at top - staying clear of text area */}
|
|
<path
|
|
d="M140,100 Q220,85 300,80"
|
|
fill="none"
|
|
stroke="#c02cff"
|
|
strokeWidth="1"
|
|
strokeDasharray="4,4"
|
|
className="animate-route opacity-15"
|
|
filter="url(#heroRouteGlow)"
|
|
/>
|
|
<path
|
|
d="M300,80 Q370,110 420,140"
|
|
fill="none"
|
|
stroke="#c02cff"
|
|
strokeWidth="1"
|
|
strokeDasharray="4,4"
|
|
className="animate-route opacity-12"
|
|
filter="url(#heroRouteGlow)"
|
|
/>
|
|
</svg>
|
|
|
|
{/* Soft purple radial glow behind the bike near the diagonal edge (clipped) */}
|
|
<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-label-sm text-brand-accent font-black tracking-widest uppercase mb-4 bg-brand-accent/10 px-4 py-1.5 rounded-full border border-brand-accent/20">
|
|
Express Services
|
|
</span>
|
|
|
|
<h1 className="text-5xl lg:text-[82px] font-display font-black leading-[0.98] tracking-tight mb-7">
|
|
Express
|
|
<br />
|
|
<span className="text-brand-accent drop-shadow-md">
|
|
Neighborhood
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-body-lg md:text-[20px] md:leading-8 text-white/80 mb-11 leading-relaxed max-w-2xl">
|
|
Get groceries, hot meals, daily essentials, and local professional
|
|
services delivered from trusted partners within{" "}
|
|
<span className="text-brand-accent font-bold">25-30 minutes</span>.
|
|
</p>
|
|
|
|
{/* Search Input Bar */}
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center bg-white p-2 rounded-full shadow-2xl border border-white/10 focus-within:ring-4 focus-within:ring-brand-accent/30 transition-all duration-300 max-w-[620px]">
|
|
<MaterialIcon
|
|
icon="location_on"
|
|
size={22}
|
|
className="ml-4 text-brand-accent animate-pulse-subtle"
|
|
/>
|
|
<input
|
|
type="text"
|
|
placeholder="Enter your neighbourhood or delivery location..."
|
|
className="w-full border-none focus:ring-0 focus:outline-none text-body-md text-on-surface font-semibold placeholder-on-surface-variant/50 px-3 py-2 bg-transparent"
|
|
/>
|
|
<button className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-6 py-3 rounded-full text-label-sm hover:shadow-lg transition-all active:scale-95 duration-200 whitespace-nowrap cursor-pointer">
|
|
Find Shops
|
|
</button>
|
|
</div>
|
|
|
|
{/* Popular tags below */}
|
|
<div className="flex gap-3 items-center flex-wrap px-4 mt-2">
|
|
<span className="text-label-sm text-white/40 uppercase tracking-widest font-black text-[10px]">
|
|
Popular:
|
|
</span>
|
|
{["Fresh Produce", "African Bakery", "Pet Care"].map((tag) => (
|
|
<a
|
|
key={tag}
|
|
href="#"
|
|
className="text-label-sm text-brand-accent-light hover:text-brand-accent transition-colors font-bold"
|
|
>
|
|
{tag}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Dominant delivery image (Overlapping) */}
|
|
<div className="hero-visual-layer select-none pointer-events-none">
|
|
<div className="hero-visual-panel" />
|
|
<div className="hero-visual-image">
|
|
<Image
|
|
src="/nearlenewlogo.png"
|
|
alt="Nearle delivery"
|
|
fill
|
|
sizes="(max-width: 768px) 95vw, 48vw"
|
|
className="object-contain object-bottom drop-shadow-2xl"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Overlapping Quick Category Links (Anchored at the bottom edge) */}
|
|
<div className="hero-cards">
|
|
<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-label-md font-extrabold text-brand-dark group-hover:text-primary transition-colors">
|
|
{item.name}
|
|
</h3>
|
|
<p className="text-[11px] 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>
|
|
</div>
|
|
);
|
|
}
|