hero section content
This commit is contained in:
@@ -26,163 +26,144 @@ const QUICK_LINKS = [
|
||||
|
||||
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">
|
||||
<>
|
||||
<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="/nearlenewlogo.png"
|
||||
alt="Nearle delivery"
|
||||
src="/images/slider-glob.png"
|
||||
alt="Subtle Background"
|
||||
fill
|
||||
sizes="(max-width: 768px) 95vw, 48vw"
|
||||
className="object-contain object-bottom drop-shadow-2xl"
|
||||
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 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-md text-brand-accent font-black tracking-widest uppercase mb-5 bg-brand-accent/10 px-5 py-2 rounded-full border border-brand-accent/20">
|
||||
Express Services
|
||||
</span>
|
||||
|
||||
<h1 className="text-5xl lg:text-[92px] lg:leading-[0.95] font-display font-black tracking-tight mb-8">
|
||||
Express
|
||||
<br />
|
||||
<span className="text-brand-accent drop-shadow-md">
|
||||
Neighborhood
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-body-lg md:text-[22px] md:leading-9 text-white/80 mb-12 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>
|
||||
|
||||
{/* Mobile/Tablet Only Nearle Bag Logo */}
|
||||
<div className="hero-mobile-logo block lg:hidden mt-8 select-none pointer-events-none">
|
||||
<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 */}
|
||||
<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 drop-shadow-2xl"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overlapping Quick Category Links (Anchored at the bottom edge) */}
|
||||
<div className="hero-cards">
|
||||
{/* Overlapping Quick Category Links (Moved outside of .hero for correct overflow behavior) */}
|
||||
<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
|
||||
@@ -215,6 +196,6 @@ export function Hero() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user