update content

src/components/home/WhyNearle.tsx

@@ -0,0 +1,69 @@
+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 everyday essentials from nearby shops.",
+    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.",
+    icon: "history",
+    color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
+  },
+  {
+    title: "Support Local Business",
+    desc: "Every order helps nearby businesses grow digitally.",
+    icon: "favorite",
+    color: "bg-rose-500/5 text-rose-700 border-rose-100",
+  },
+];
+
+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">
+      <div className="max-w-container-max mx-auto">
+        {/* Header Section */}
+        <div className="text-center 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">
+            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">
+            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">
+          {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"
+            >
+              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${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>
+  );
+}