Initial commit

src/components/home/BusinessSection.tsx

@@ -0,0 +1,162 @@
+import Image from "next/image";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+const FEATURES = [
+  {
+    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",
+    style: "bg-primary text-white",
+  },
+  {
+    value: "12k+",
+    label: "Daily Neighborhood Orders",
+    icon: "shopping_bag",
+    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",
+  },
+  {
+    value: "24/7",
+    label: "Partner Helpdesk Support",
+    icon: "support_agent",
+    style: "bg-[#de96f9]/20 text-primary border border-primary/10",
+  },
+];
+
+export function BusinessSection() {
+  return (
+    <section className="py-24 px-margin-mobile md:px-margin-desktop bg-white">
+      <div className="max-w-container-max mx-auto">
+        
+        {/* Merchant Section Grid */}
+        <div className="grid lg:grid-cols-12 gap-16 items-center">
+          
+          {/* 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">
+              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>
+            </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>
+
+            <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>
+              ))}
+            </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>
+
+          {/* Right Column: Premium Bento Stats Grid (5 cols) */}
+          <div className="lg:col-span-5 grid grid-cols-2 gap-6">
+            {STATS.map((stat, 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" : ""}`}
+              >
+                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
+                  <MaterialIcon icon={stat.icon} size={22} />
+                </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}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+        </div>
+
+        {/* CURVED PROMO BANNER: Inspired by GoMoto Hottest Pizza Banner */}
+        <div className="mt-32 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-8 md:p-16 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" />
+
+          {/* 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">
+              Piping Hot & Fresh
+            </span>
+            <h3 className="text-display mt-6 mb-4 leading-[1.1] font-black">
+              Always the Hottest Meals <br />& Freshest Groceries.
+            </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.
+            </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"
+            >
+              Order Meals Now
+            </a>
+          </div>
+
+          {/* Right visual column */}
+          <div className="md:w-2/5 relative flex justify-center items-center">
+            {/* Soft background shape */}
+            <div className="absolute w-[260px] h-[260px] bg-brand-dark/10 rounded-full pointer-events-none scale-110" />
+            
+            <div className="relative w-full max-w-[280px] aspect-square rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-500">
+              <Image
+                src="/images/cat-hot-food.png"
+                alt="Hot meals from Nearle local kitchen partners"
+                width={400}
+                height={400}
+                className="w-full h-full object-cover scale-105"
+              />
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </section>
+  );
+}