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

how to works image fix

Browse Source
This commit is contained in:
Aravind
2026-07-02 10:43:29 +05:30
parent f37e2392f3
commit 08a44524fd
3 changed files with 179 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/home/BusinessSection.tsx
View File

@@ -64,6 +64,73 @@ const BENEFITS = [
},
];
function LocalDiscoveryVisual() {
return (
<div className="relative h-[260px] w-full overflow-hidden bg-[#FAF8FC] sm:h-[300px]">
{/* Map Background (SVG) */}
<svg className="absolute inset-0 h-full w-full opacity-[0.85]" viewBox="0 0 400 300" fill="none" preserveAspectRatio="xMidYMid slice">
<path d="M-20 50C30 40 100 45 150 70C220 105 280 95 380 60" stroke="#E6DFF0" strokeWidth="8" strokeLinecap="round" />
<path d="M-10 220C50 190 120 200 180 230C250 260 310 255 400 220" stroke="#DDF0E3" strokeWidth="12" strokeLinecap="round" />
<path d="M50 -20L80 320" stroke="#EBE4F2" strokeWidth="6" strokeLinecap="round" />
<path d="M180 -20L150 320" stroke="#E5DEEF" strokeWidth="6" strokeLinecap="round" />
<path d="M300 -20L270 320" stroke="#EBE4F2" strokeWidth="6" strokeLinecap="round" />
<path d="M-20 100H420" stroke="#E8E1F0" strokeWidth="6" strokeLinecap="round" />
<path d="M-20 180H420" stroke="#E2DAEC" strokeWidth="6" strokeLinecap="round" />
</svg>
{/* Halos around main pin */}
<div className="absolute left-[35%] top-[45%] h-44 w-44 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/10 blur-xl" />
<div className="absolute left-[35%] top-[45%] h-28 w-28 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/20 animate-pulse blur-md" />
{/* Main Pin */}
<div className="absolute left-[35%] top-[45%] z-20 -translate-x-1/2 -translate-y-1/2 drop-shadow-xl transition-transform hover:scale-110">
<div className="relative h-11 w-11 -rotate-45 rounded-[50%_50%_50%_10%] bg-primary">
<div className="absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-inner" />
</div>
</div>
{/* Other Pins */}
{[
["left-[15%] top-[25%]", "bg-primary", "scale-75"],
["left-[50%] top-[15%]", "bg-primary", "scale-[0.65]"],
["left-[22%] top-[68%]", "bg-primary", "scale-[0.70]"],
].map(([pos, color, scale], i) => (
<div key={i} className={`absolute ${pos} ${scale} z-10 drop-shadow-md`}>
<div className={`relative h-11 w-11 -rotate-45 rounded-[50%_50%_50%_10%] ${color}`}>
<div className="absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
</div>
</div>
))}
{/* Store Card (Right Side) */}
<div className="absolute bottom-4 right-4 z-30 w-[200px] overflow-hidden rounded-[1.25rem] bg-white shadow-[0_12px_32px_rgba(22,0,29,0.12)] border border-primary/10 sm:bottom-6 sm:right-6 sm:w-[240px]">
<div className="relative h-[90px] w-full bg-brand-accent-light sm:h-[110px]">
<Image src="/images/nearle-merchant/success-owner.webp" alt="Owner" fill className="object-cover" />
</div>
<div className="p-3.5 sm:p-4">
<h4 className="truncate text-[13px] font-black text-brand-dark sm:text-[15px]">Kumar Provision Store</h4>
<p className="mt-0.5 truncate text-[10px] font-medium text-on-surface-variant sm:text-[11px]">Gandhi Nagar, West Delhi</p>
<div className="mt-2.5 flex gap-1.5">
<span className="rounded-full bg-brand-accent/10 px-2.5 py-1 text-[9px] font-black text-primary sm:text-[10px]">Groceries</span>
<span className="rounded-full bg-brand-accent/10 px-2.5 py-1 text-[9px] font-black text-primary sm:text-[10px]">Essentials</span>
</div>
<div className="mt-3 flex items-center gap-1.5 text-[10px] font-bold sm:text-[11px]">
<span className="text-[#006D37]">Open</span>
<span className="text-on-surface-variant/40">•</span>
<span className="text-on-surface-variant">Closes 10:00 PM</span>
</div>
<button className="mt-3.5 w-full rounded-xl bg-primary py-2 text-[11px] font-black text-white transition-colors hover:bg-primary-container sm:py-2.5 sm:text-xs">
View Store
</button>
</div>
</div>
</div>
);
}
export function BusinessSection() {
return (
<section className="section bg-white w-full overflow-hidden">
@@ -181,14 +248,18 @@ export function BusinessSection() {
</div>
</div>
<div className="mt-auto w-full overflow-hidden">
<Image
src={feature.visual}
alt={feature.alt}
width={900}
height={560}
sizes="(max-width: 767px) 90vw, (max-width: 1279px) 45vw, 30vw"
className="block h-auto w-full object-cover"
/>
{feature.title === "Local Discovery" ? (
<LocalDiscoveryVisual />
) : (
<Image
src={feature.visual}
alt={feature.alt}
width={900}
height={560}
sizes="(max-width: 767px) 90vw, (max-width: 1279px) 45vw, 30vw"
className="block h-auto w-full object-cover"
/>
)}
</div>
</motion.article>
))}