72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
|
|
|
const CARDS = [
|
|
{
|
|
title: "Shops You Know",
|
|
desc: "Order from familiar neighbourhood stores near you.",
|
|
icon: "store",
|
|
color: "bg-primary/5 text-primary border-primary/10",
|
|
},
|
|
{
|
|
title: "Better Local Value",
|
|
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 for quick reordering.",
|
|
icon: "history",
|
|
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
|
|
},
|
|
{
|
|
title: "Support Local Business",
|
|
desc: "Every order directly supports nearby shopkeepers.",
|
|
icon: "favorite",
|
|
color: "bg-rose-500/5 text-rose-700 border-rose-100",
|
|
},
|
|
];
|
|
|
|
export function WhyNearle() {
|
|
return (
|
|
<section className="px-6 py-12 md:py-16">
|
|
<div className="w-full">
|
|
{/* Header Section */}
|
|
<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-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.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-6 lg:gap-8">
|
|
{CARDS.map((card) => (
|
|
<div
|
|
key={card.title}
|
|
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-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">
|
|
{card.title}
|
|
</h3>
|
|
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed flex-grow">
|
|
{card.desc}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
|