update content

src/components/home/BusinessSection.tsx

@@ -1,51 +1,37 @@
 import Image from "next/image";
+import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
-const FEATURES = [
+const BENEFITS = [
   {
-    title: "Direct Customer Relationship",
-    desc: "Build long-term direct ties with nearby families. Own your neighborhood presence.",
-  },
-  {
-    title: "Managed Instant Delivery Fleet",
-    desc: "We supply professional, verified moped couriers. Focus on your business, not hiring drivers.",
-  },
-  {
-    title: "Neighborhood Demand Trends",
-    desc: "Use Nearle's analytic insights to track demand, optimize your stock, and launch promos.",
-  },
-];
-
-const STATS = [
-  {
-    value: "40%+",
-    label: "Average Revenue Rise",
-    icon: "trending_up",
+    title: "Digital Catalogue",
+    desc: "Showcase your products online easily to nearby customers.",
+    icon: "menu_book",
     style: "bg-primary text-white",
   },
   {
-    value: "12k+",
-    label: "Daily Neighborhood Orders",
-    icon: "shopping_bag",
+    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",
   },
   {
-    value: "5k+",
-    label: "Verified Retail Partners",
-    icon: "storefront",
-    style: "bg-[#faf8f5] border border-outline-variant/20 text-primary",
+    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",
   },
   {
-    value: "24/7",
-    label: "Partner Helpdesk Support",
-    icon: "support_agent",
+    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",
   },
 ];
 
 export function BusinessSection() {
   return (
-    <section className="py-28 px-6 md:px-12 lg:px-20 xl:px-24 bg-background">
+    <section className="py-20 px-6 md:px-12 lg:px-20 xl:px-24 bg-background border-t border-outline-variant/10">
       <div className="max-w-container-max mx-auto">
         
         {/* Merchant Section Grid */}
@@ -53,59 +39,63 @@ export function BusinessSection() {
           
           {/* Left Column: Feature copywriting (7 cols) */}
           <div className="lg:col-span-7">
-            <span className="text-label-sm text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
+            <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">
-              Grow your local brand in the <span className="text-secondary">Neighborhood.</span>
+              Bring Your Store Online with Nearle.
             </h2>
-            <p className="text-body-lg text-on-surface-variant mb-12 max-w-xl leading-relaxed">
-              Unlock delivery, loyalty programs, and localized promotions. Join over 5,000 neighborhood partners who are digitizing their community sales channels.
+            <p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
+              Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
             </p>
 
-            <div className="space-y-8 mb-12">
-              {FEATURES.map((feat) => (
-                <div key={feat.title} className="flex gap-4 group">
-                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-secondary/10 border border-secondary/20 flex items-center justify-center group-hover:bg-secondary group-hover:text-white transition-all duration-300">
-                    <MaterialIcon
-                      icon="check"
-                      size={18}
-                      className="text-secondary group-hover:text-white transition-colors"
-                    />
-                  </div>
-                  <div>
-                    <h4 className="text-headline-md font-black text-brand-dark group-hover:text-primary transition-colors">
-                      {feat.title}
-                    </h4>
-                    <p className="text-body-md text-on-surface-variant mt-1.5 leading-relaxed">
-                      {feat.desc}
-                    </p>
-                  </div>
+            <div className="space-y-4 mb-10 text-sm md:text-base">
+              <div className="flex items-center gap-3">
+                <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
+                  <MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
                 </div>
-              ))}
+                <span className="font-bold text-brand-dark">Stay in control of your pricing and orders</span>
+              </div>
+              <div className="flex items-center gap-3">
+                <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
+                  <MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
+                </div>
+                <span className="font-bold text-brand-dark">Build direct relationships with local families</span>
+              </div>
             </div>
 
-            <button className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 rounded-full text-label-md hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200 cursor-pointer">
-              Register as Merchant Partner
-            </button>
+            <div className="flex flex-wrap gap-4 mt-8">
+              <Link
+                href="/businesses"
+                className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
+              >
+                Partner With Nearle
+              </Link>
+              <Link
+                href="/contact"
+                className="bg-white hover:bg-surface-container-high text-brand-dark border border-outline-variant/30 font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-md transition-all duration-300 active:scale-95 flex items-center gap-2"
+              >
+                Talk to Our Team
+              </Link>
+            </div>
           </div>
 
-          {/* Right Column: Premium Bento Stats Grid (5 cols) */}
+          {/* Right Column: Benefit Cards Bento Grid (5 cols) */}
           <div className="lg:col-span-5 grid grid-cols-2 gap-6">
-            {STATS.map((stat, idx) => (
+            {BENEFITS.map((benefit, idx) => (
               <div
-                key={stat.value}
-                className={`p-6 rounded-[2rem] flex flex-col justify-between aspect-square hover:-translate-y-2 hover:shadow-xl transition-all duration-300 ${stat.style} ${idx % 2 === 1 ? "translate-y-6 md:translate-y-8" : ""}`}
+                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-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
-                  <MaterialIcon icon={stat.icon} size={22} />
+                <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>
-                  <p className="text-4xl font-display font-black tracking-tight">
-                    {stat.value}
-                  </p>
-                  <p className="text-label-sm font-semibold mt-1 opacity-90 leading-tight">
-                    {stat.label}
+                  <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>
                 </div>
               </div>
@@ -114,7 +104,7 @@ export function BusinessSection() {
 
         </div>
 
-        {/* CURVED PROMO BANNER: Inspired by GoMoto Hottest Pizza Banner */}
+        {/* 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">
           {/* Decorative background vectors */}
           <div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
@@ -122,21 +112,21 @@ export function BusinessSection() {
 
           {/* Left copy column */}
           <div className="md:w-3/5 z-10 text-brand-dark">
-            <span className="text-[10px] font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
+            <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">
-              Always the Hottest Meals <br />& Freshest Groceries.
+              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">
-              Our advanced insulation packs guarantee your hot food stays steaming, and frozen goods stay completely frozen until handed to you.
+              Groceries, medicines, food, and everyday essentials — all from your neighbourhood.
             </p>
-            <a
-              href="#"
-              className="bg-brand-dark hover:bg-brand-dark/90 text-white font-black px-8 py-3.5 rounded-full text-label-md hover:shadow-2xl transition-all hover:-translate-y-0.5 active:translate-y-0 active:scale-95 duration-200 inline-block shadow-md"
+            <Link
+              href="/people"
+              className="bg-brand-dark hover:bg-brand-dark/90 text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-2xl transition-all hover:-translate-y-0.5 active:translate-y-0 active:scale-95 duration-200 inline-block shadow-md text-center"
             >
-              Order Meals Now
-            </a>
+              Explore Stores Now
+            </Link>
           </div>
 
           {/* Right visual column */}