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

add image

Browse Source
This commit is contained in:
Aravind
2026-06-25 13:56:36 +05:30
parent d3c7d93cef
commit b233992f30
32 changed files with 632 additions and 542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,15 +3,15 @@ import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const PROOF_ITEMS = [
{ label: "1000+", text: "Verified Stores", icon: "store" },
{ label: "Verified", text: "Local Stores", icon: "store" },
{ label: "2km", text: "Neighbourhood Coverage", icon: "location_on" },
{ label: "50,000+", text: "Happy Customers", icon: "mood" },
{ label: "4.7 ★", text: "Average Rating", icon: "star" },
{ label: "Growing", text: "Customer Community", icon: "mood" },
{ label: "Trusted", text: "Local Platform", icon: "star" },
];
export function Hero() {
return (
<section className="relative overflow-hidden bg-white select-none w-full">
<section className="relative overflow-hidden bg-gradient-to-b from-[#FAF8FC] to-[#FFFFFF] select-none w-full">
{/* ─── DECORATIONS (BEHIND CONTENT) ─── */}
{/* 1. Large pale lavender partial circle (top-left) */}
@@ -47,7 +47,7 @@ export function Hero() {
<div className="absolute bottom-[-100px] right-[-100px] w-[200px] h-[200px] rounded-full bg-[#7C3AED]/80 z-0 pointer-events-none" />
{/* ─── TWO-COLUMN CONTENT GRID ─── */}
<div className="relative mx-auto grid min-h-[650px] grid-cols-1 lg:grid-cols-[0.92fr_1.08fr] items-center px-8 py-16 md:px-12 lg:px-16 xl:px-20 z-10 gap-12 lg:gap-6">
<div className="page-container relative grid min-h-[650px] grid-cols-1 lg:grid-cols-[0.92fr_1.08fr] items-center py-16 md:py-20 lg:py-24 z-10 gap-12 lg:gap-6">
{/* LEFT COLUMN: Editorial Typography & Copy */}
<div className="flex flex-col text-left max-w-xl z-20 relative">
@@ -68,13 +68,13 @@ export function Hero() {
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<Link
href="/people"
className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
>
Explore Stores
</Link>
<Link
href="/people#download-section"
className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6D28D9]/5 active:scale-98"
className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6D28D9]/5 active:scale-[0.98]"
>
Get the App
</Link>
@@ -97,16 +97,18 @@ export function Hero() {
/>
</div>
{/* middle image: absolute left-[38%] top-[8%] w-[190px] h-[430px] */}
<div className="absolute left-[38%] top-[8%] w-[190px] h-[430px] rounded-[1.5rem] overflow-hidden shadow-xl border-2 border-white z-20 transition-transform duration-300 hover:scale-[1.02]">
<Image
src="/Nearle Business.png"
alt="Local merchant delivery"
fill
className="object-cover"
sizes="190px"
priority
/>
{/* middle image: central logo panel absolute left-[38%] top-[8%] */}
<div className="absolute left-[38%] top-[8%] z-20 transition-transform duration-300 hover:scale-[1.02]">
<div className="relative w-[180px] sm:w-[220px] h-[280px] sm:h-[340px] rounded-[24px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_40px_rgba(99,48,214,0.1)] bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-6">
<Image
src="/nearlenewlogo.png"
alt="Central logo panel"
width={160}
height={160}
className="object-contain max-h-[140px] w-auto animate-[pulse_6s_infinite]"
priority
/>
</div>
</div>
{/* right image: absolute right-[2%] top-[18%] w-[180px] h-[390px] */}
@@ -132,13 +134,14 @@ export function Hero() {
sizes="95px"
/>
</div>
<div className="relative w-[115px] h-[240px] rounded-2xl overflow-hidden border border-white shadow-lg -mx-5 z-20">
<div className="relative w-[115px] h-[240px] rounded-2xl border-4 border-white shadow-lg bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-3 -mx-5 z-20">
<Image
src="/Nearle Business.png"
alt="Merchant"
fill
className="object-cover"
sizes="115px"
src="/nearlenewlogo.png"
alt="Central logo panel"
width={100}
height={100}
className="object-contain max-h-[90px] w-auto animate-[pulse_6s_infinite]"
priority
/>
</div>
<div className="relative w-[105px] h-[220px] rounded-2xl overflow-hidden border border-white shadow-md z-10">
@@ -157,20 +160,28 @@ export function Hero() {
</div>
{/* ─── BOTTOM PROOF STATS ROW ─── */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 border-t border-[#EEE7F4] bg-white px-8 py-8 md:px-12 lg:px-16 z-20 relative">
{PROOF_ITEMS.map((item) => (
<div key={item.label} className="flex flex-col items-start text-left pl-2 md:pl-4">
<div className="w-8 h-8 rounded-full bg-[#6D28D9]/10 text-[#6D28D9] flex items-center justify-center mb-3">
<MaterialIcon icon={item.icon} size={16} />
<div className="border-t border-[#EEE7F4]/80 bg-white">
<div className="page-container py-8 grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4 relative z-20">
{PROOF_ITEMS.map((item, idx) => (
<div key={item.label} className="flex items-center gap-4 text-left md:justify-center relative">
{/* Subtle vertical separator for desktop, except for the first item */}
{idx > 0 && (
<div className="hidden md:block absolute left-0 top-1/2 -translate-y-1/2 w-[1px] h-10 bg-[#EEE7F4]" />
)}
<div className="w-10 h-10 rounded-full bg-[#6D28D9]/8 text-[#6D28D9] flex items-center justify-center shrink-0">
<MaterialIcon icon={item.icon} size={18} />
</div>
<div>
<div className="text-2xl md:text-3xl font-black text-[#16001D] leading-none tracking-tight">
{item.label}
</div>
<div className="text-xs text-[#6D6172] font-semibold mt-1">
{item.text}
</div>
</div>
</div>
<div className="text-2xl md:text-3xl font-black text-[#16001D] leading-none tracking-tight">
{item.label}
</div>
<div className="text-xs text-[#6D6172] font-semibold mt-1">
{item.text}
</div>
</div>
))}
))}
</div>
</div>
</section>