footer section fix

src/app/about/page.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
@@ -16,19 +17,28 @@ const STRATEGY_CARDS = [
     title: "Our Mission",
     descr: "To make mediocre, or average stores, perform as well as the great ones. By going beyond selling a product, to establish a solid brand identity and build a relationship with their customers using Nearle.",
     icon: "target",
-    color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
+    iconClass: "bg-[#6330D6]/[0.07] text-[#6330D6] border-[#6330D6]/10",
+    image: "/images/nearle-how/how-storefront.webp",
+    imageAlt: "3D local store storefront with purple awning",
+    imgFit: "object-contain object-bottom"
   },
   {
     title: "Our Vision",
     descr: "Our vision is to make every neighbourhood more connected by helping people discover, support, and shop from the local businesses around them.",
     icon: "visibility",
-    color: "bg-secondary/5 text-secondary border-secondary/10"
+    iconClass: "bg-secondary/[0.07] text-secondary border-secondary/10",
+    image: "/images/nearle-merchant/local-map.webp",
+    imageAlt: "Nearle local neighbourhood map",
+    imgFit: "object-cover object-center"
   },
   {
     title: "Why Nearle",
     descr: "Nearle is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for consumers to take advantage of what their neighbourhood has to offer.",
     icon: "help_outline",
-    color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
+    iconClass: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20",
+    image: "/images/app-mockup.png",
+    imageAlt: "Nearle app on a smartphone",
+    imgFit: "object-contain object-bottom"
   }
 ];
 
@@ -110,7 +120,7 @@ export default function AboutPage() {
       </section>
 
       {/* ─── Intro Description Block ─── */}
-      <section id="story-section" className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
+      <section id="story-section" className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
         <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
           Our Platform
         </span>
@@ -123,29 +133,73 @@ export default function AboutPage() {
       </section>
 
       {/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
-      <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {STRATEGY_CARDS.map((card) => (
-            <div
-              key={card.title}
-              className="bg-white rounded-3xl p-8 border border-[#6330D6]/10 shadow-[0_4px_20px_rgba(99,48,214,0.02)] flex flex-col text-left group hover:scale-[1.01] transition-transform duration-200"
-            >
-              <div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 shrink-0 ${card.color}`}>
-                <MaterialIcon icon={card.icon} size={22} />
+      <section
+        className="bg-[#FAF7FD] border-b border-[#6330D6]/10"
+        style={{ paddingTop: "clamp(40px, 4.5vw, 64px)", paddingBottom: "clamp(40px, 4.5vw, 64px)" }}
+      >
+        <div
+          className="mx-auto w-[calc(100%-48px)] md:w-[calc(100%-64px)] xl:w-[calc(100%-96px)]"
+          style={{ maxWidth: 1800 }}
+        >
+          <div
+            className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3"
+            style={{ gap: "clamp(24px, 2.5vw, 36px)" }}
+          >
+            {STRATEGY_CARDS.map((card) => (
+              <div
+                key={card.title}
+                className="bg-white border border-[#6330D6]/[0.10] shadow-[0_4px_28px_rgba(99,48,214,0.07)] flex flex-col overflow-hidden min-h-[480px] md:min-h-[520px] xl:min-h-[540px] 2xl:min-h-[560px]"
+                style={{ borderRadius: 32 }}
+              >
+                {/* Content: icon, heading, description */}
+                <div
+                  className="flex-none"
+                  style={{ padding: "clamp(28px, 2.8vw, 44px)", paddingBottom: 0 }}
+                >
+                  <div
+                    className={`flex items-center justify-center rounded-full border shrink-0 ${card.iconClass}`}
+                    style={{ width: 72, height: 72 }}
+                  >
+                    <MaterialIcon icon={card.icon} size={28} />
+                  </div>
+                  <h3
+                    className="font-display font-black text-[#16001D]"
+                    style={{ fontSize: "clamp(22px, 1.8vw, 30px)", marginTop: 24, marginBottom: 14, lineHeight: 1.2 }}
+                  >
+                    {card.title}
+                  </h3>
+                  <p
+                    className="text-[#5E5866]"
+                    style={{ fontSize: "clamp(15px, 1.1vw, 18px)", lineHeight: 1.65 }}
+                  >
+                    {card.descr}
+                  </p>
+                </div>
+                {/* Image: inner rounded container with consistent spacing on all sides */}
+                <div
+                  className="flex-1 relative overflow-hidden bg-[#F4ECFA]/40"
+                  style={{
+                    margin: "clamp(20px, 2vw, 32px) clamp(24px, 2.2vw, 36px) clamp(20px, 2vw, 28px)",
+                    borderRadius: 24,
+                    minHeight: 200
+                  }}
+                >
+                  <Image
+                    src={card.image}
+                    alt={card.imageAlt}
+                    fill
+                    sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
+                    className={card.imgFit}
+                  />
+                </div>
               </div>
-              <h3 className="font-display text-lg font-black text-[#16001D] mb-3">
-                {card.title}
-              </h3>
-              <p className="text-xs md:text-sm text-[#5E5866] leading-relaxed">
-                {card.descr}
-              </p>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </section>
 
       {/* ─── Global Stats counters ─── */}
-      <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
+      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           {LOCAL_COUNTERS.map((c) => (
             <div key={c.label} className="flex flex-col items-center text-center">
@@ -162,7 +216,7 @@ export default function AboutPage() {
       </section>
 
       {/* ─── Brand Building Banner ─── */}
-      <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD]">
+      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
         <div className="max-w-4xl mx-auto">
           <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
             Don&apos;t miss the opportunity