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

22
src/components/home/WhyNearle.tsx
View File

@@ -9,19 +9,19 @@ const CARDS = [
},
{
title: "Better Local Value",
desc: "Discover local offers and everyday essentials from nearby shops.",
desc: "Discover local offers and daily savings nearby.",
icon: "local_offer",
color: "bg-secondary/5 text-secondary border-secondary/10",
},
{
title: "Easy Reordering",
desc: "Save your favourite stores and reorder quickly when you need something.",
desc: "Save your favourite stores for quick reordering.",
icon: "history",
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
},
{
title: "Support Local Business",
desc: "Every order helps nearby businesses grow digitally.",
desc: "Every order directly supports nearby shopkeepers.",
icon: "favorite",
color: "bg-rose-500/5 text-rose-700 border-rose-100",
},
@@ -29,29 +29,29 @@ const CARDS = [
export function WhyNearle() {
return (
<section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 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-14 px-6 md:px-12 lg:px-20 xl:px-24">
<div className="max-w-container-max mx-auto">
{/* Header Section */}
<div className="text-center mb-10">
<div className="text-center mb-8 md:mb-10">
<span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full">
Our Philosophy
</span>
<h2 className="text-display text-brand-dark mt-3 leading-tight">
<h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-3 leading-tight tracking-tight">
Why Nearle <span className="text-primary font-normal">Feels Different</span>
</h2>
<p className="text-body-lg text-on-surface-variant mt-2 max-w-xl mx-auto">
<p className="text-body-lg text-on-surface-variant mt-2.5 max-w-xl mx-auto leading-relaxed">
Nearle brings the convenience of an app to the stores you already know and trust.
</p>
</div>
{/* Cards Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
{CARDS.map((card) => (
<div
key={card.title}
className="premium-card bg-white rounded-3xl p-10 border border-outline-variant/15 shadow-lg flex flex-col h-full hover:scale-[1.02] transition-transform duration-300"
className="premium-card bg-white rounded-3xl p-10 lg:p-12 min-h-[300px] lg:min-h-[340px] border border-outline-variant/15 shadow-lg flex flex-col h-full hover:scale-[1.02] transition-transform duration-300"
>
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${card.color}`}>
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-8 shrink-0 ${card.color}`}>
<MaterialIcon icon={card.icon} size={28} />
</div>
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
@@ -67,3 +67,5 @@ export function WhyNearle() {
</section>
);
}