Nearle/nearle_web_nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update content

Browse Source
This commit is contained in:
Aravind
2026-06-23 15:05:50 +05:30
parent 9ea89c317f
commit 6cb34f5b8f
17 changed files with 554 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/components/home/Hero.tsx
View File

@@ -1,4 +1,5 @@
import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const QUICK_LINKS = [
@@ -30,7 +31,7 @@ export function Hero() {
<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) */}
{/* Subtle Background Dot Texture */}
<div className="hero-map-layer select-none">
<Image
src="/images/slider-glob.png"
@@ -42,69 +43,8 @@ export function Hero() {
/>
</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) */}
{/* 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>
@@ -112,26 +52,60 @@ export function Hero() {
<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 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-[64px] xl:text-[78px] 2xl:text-[92px] lg:leading-[0.95] font-display font-black tracking-tight mb-8">
Express
<h1 className="text-4xl sm:text-5xl lg:text-[60px] xl:text-[70px] 2xl:text-[84px] lg:leading-[1.1] font-display font-black tracking-tight mb-8">
Your Favourite
<br />
<span className="text-brand-accent drop-shadow-md">
Neighborhood
Local Stores, Now at Your Doorstep.
</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 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>
{/* Mobile/Tablet Only Nearle Bag Logo */}
<div className="hero-mobile-logo block lg:hidden mt-8 select-none pointer-events-none">
{/* CTAs */}
<div className="flex flex-wrap gap-4 mt-8">
<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 gap-2"
>
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 gap-2"
>
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 className="flex items-center gap-2">
<MaterialIcon icon="location_on" size={18} className="text-brand-accent" />
<span>Available in Coimbatore</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"
@@ -141,14 +115,30 @@ export function Hero() {
className="object-contain drop-shadow-2xl"
priority
/>
{/* Mobile Context Pins */}
<div className="absolute top-[10%] left-[-15px] bg-white/95 backdrop-blur-sm px-3 py-1.5 rounded-xl border border-outline-variant/20 shadow-md flex items-center gap-1.5 animate-float z-10">
<MaterialIcon icon="shopping_basket" size={14} className="text-secondary" />
<span className="text-xs font-black text-brand-dark">Groceries</span>
</div>
<div className="absolute top-[40%] right-[-15px] bg-white/95 backdrop-blur-sm px-3 py-1.5 rounded-xl border border-outline-variant/20 shadow-md flex items-center gap-1.5 animate-float z-10 [animation-delay:1.5s]">
<MaterialIcon icon="medical_services" size={14} className="text-primary" />
<span className="text-xs font-black text-brand-dark">Pharmacy</span>
</div>
<div className="absolute bottom-[5%] left-[5px] bg-white/95 backdrop-blur-sm px-3 py-1.5 rounded-xl border border-outline-variant/20 shadow-md flex items-center gap-1.5 animate-float z-10 [animation-delay:0.7s]">
<MaterialIcon icon="restaurant" size={14} className="text-orange-600" />
<span className="text-xs font-black text-brand-dark">Food</span>
</div>
</div>
</div>
</div>
{/* Right Column: Centered Nearle bag visual */}
<div className="hero-visual-layer select-none pointer-events-none">
{/* 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">
<div className="hero-visual-image relative">
<Image
src="/nearlenewlogo.png"
alt="Nearle delivery"
@@ -158,11 +148,25 @@ export function Hero() {
priority
/>
</div>
{/* Context Pins */}
<div className="absolute top-[20%] left-[10%] bg-white/95 backdrop-blur-sm px-3.5 py-2 rounded-2xl border border-outline-variant/20 shadow-lg flex items-center gap-1.5 animate-float z-10">
<MaterialIcon icon="shopping_basket" size={16} className="text-secondary" />
<span className="text-xs font-black text-brand-dark">Groceries</span>
</div>
<div className="absolute top-[45%] right-[5%] bg-white/95 backdrop-blur-sm px-3.5 py-2 rounded-2xl border border-outline-variant/20 shadow-lg flex items-center gap-1.5 animate-float z-10 [animation-delay:1.5s]">
<MaterialIcon icon="medical_services" size={16} className="text-primary" />
<span className="text-xs font-black text-brand-dark">Pharmacy</span>
</div>
<div className="absolute bottom-[25%] left-[15%] bg-white/95 backdrop-blur-sm px-3.5 py-2 rounded-2xl border border-outline-variant/20 shadow-lg flex items-center gap-1.5 animate-float z-10 [animation-delay:0.7s]">
<MaterialIcon icon="restaurant" size={16} className="text-orange-600" />
<span className="text-xs font-black text-brand-dark">Food</span>
</div>
</div>
</div>
</div>
{/* Overlapping Quick Category Links (Moved outside of .hero for correct overflow behavior) */}
{/* 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) => (
@@ -178,10 +182,10 @@ export function Hero() {
/>
</div>
<div className="flex-grow">
<h3 className="text-label-md font-extrabold text-brand-dark group-hover:text-primary transition-colors">
<h3 className="text-sm md:text-base 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">
<p className="text-xs text-on-surface-variant font-medium mt-0.5 leading-tight">
{item.label}
</p>
</div>