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

update layout

Browse Source
This commit is contained in:
Aravind
2026-06-23 19:50:35 +05:30
parent 8ffc7809ce
commit 230be11899
14 changed files with 841 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,31 +7,31 @@ const BENEFITS = [
title: "Digital Catalogue",
desc: "Showcase your products online easily to nearby customers.",
icon: "menu_book",
style: "bg-primary text-white",
iconColor: "bg-primary/5 text-primary",
},
{
title: "QR Ordering",
desc: "Enable existing customers to scan and place orders directly at your counter.",
icon: "qr_code",
style: "bg-brand-accent text-brand-dark",
iconColor: "bg-secondary/5 text-secondary",
},
{
title: "Local Discovery",
desc: "Get discovered by residents in your neighbourhood searching for your products.",
icon: "explore",
style: "bg-white border border-outline-variant/20 text-primary",
iconColor: "bg-[#de96f9]/10 text-primary",
},
{
title: "Delivery Support",
desc: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.",
icon: "local_shipping",
style: "bg-[#de96f9]/20 text-primary border border-primary/10",
iconColor: "bg-rose-500/5 text-rose-600",
},
];
export function BusinessSection() {
return (
<section className="py-20 px-6 md:px-12 lg:px-20 xl:px-24 bg-background border-t border-outline-variant/10">
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 lg:py-16 px-6 md:px-12 lg:px-20 xl:px-24">
<div className="max-w-container-max mx-auto">
{/* Merchant Section Grid */}
@@ -42,7 +42,7 @@ export function BusinessSection() {
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
Merchant Partnerships
</span>
<h2 className="text-display text-brand-dark mt-6 mb-6 leading-tight">
<h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-6 mb-6 leading-tight tracking-tight">
Bring Your Store Online with Nearle.
</h2>
<p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
@@ -80,32 +80,27 @@ export function BusinessSection() {
</div>
</div>
{/* Right Column: Benefit Cards Bento Grid (5 cols) */}
<div className="lg:col-span-5 grid grid-cols-2 gap-6">
{BENEFITS.map((benefit, idx) => (
<div
key={benefit.title}
className={`p-8 rounded-[2.5rem] flex flex-col justify-between h-full min-h-[240px] hover:-translate-y-2 hover:shadow-xl transition-all duration-300 ${benefit.style} ${idx % 2 === 1 ? "translate-y-6 md:translate-y-8" : ""}`}
>
<div className={`w-12 h-12 rounded-full flex items-center justify-center shrink-0 ${benefit.style.includes("primary") && !benefit.style.includes("de96f9") ? "bg-white/20" : "bg-primary/5 text-primary"}`}>
<MaterialIcon icon={benefit.icon} size={24} />
</div>
<div>
<h3 className="text-xl md:text-2xl font-black tracking-tight leading-tight mb-2">
{benefit.title}
</h3>
<p className="text-sm md:text-base opacity-90 leading-relaxed">
{benefit.desc}
</p>
{/* Right Column: Benefit Grid Cardless (5 cols) */}
<div className="lg:col-span-5 grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-10">
{BENEFITS.map((benefit) => (
<div key={benefit.title} className="flex flex-col items-start group">
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center mb-4 transition-transform duration-300 group-hover:-translate-y-0.5 shadow-sm ${benefit.iconColor}`}>
<MaterialIcon icon={benefit.icon} size={28} />
</div>
<h3 className="text-xl md:text-2xl font-black tracking-tight text-brand-dark mb-2">
{benefit.title}
</h3>
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
{benefit.desc}
</p>
</div>
))}
</div>
</div>
{/* CURVED PROMO BANNER */}
<div className="mt-32 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
{/* CURVED PROMO BANNER (Bottom CTA Block) */}
<div className="mt-16 md:mt-20 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
{/* Decorative background vectors */}
<div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
<div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />
@@ -115,7 +110,7 @@ export function BusinessSection() {
<span className="text-xs font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
Piping Hot & Fresh
</span>
<h3 className="text-display mt-6 mb-4 leading-[1.1] font-black">
<h3 className="text-4xl md:text-5xl lg:text-[54px] mt-6 mb-4 leading-[1.1] font-display font-black tracking-tight">
Everything Nearby, <br />From Stores You Trust.
</h3>
<p className="text-body-lg text-brand-dark/80 mb-8 max-w-md font-semibold leading-relaxed">
@@ -150,3 +145,5 @@ export function BusinessSection() {
</section>
);
}