update business section

src/components/about/FloatingDelivery.tsx

@@ -13,11 +13,11 @@ export function FloatingDelivery() {
       transition={{ duration: 6, ease: "easeInOut", repeat: Infinity }}
     >
       <Image
-        src="/images/illustrations/delivery-doorstep.webp"
-        alt=""
+        src="/images/illustrations/heading-store.webp"
+        alt="Nearle Local Merchant Store"
         width={220}
         height={220}
-        className="w-full h-auto object-contain opacity-80"
+        className="w-full h-auto object-contain opacity-90 rounded-2xl"
         aria-hidden="true"
       />
     </motion.div>

src/components/home/BusinessSection.tsx

@@ -9,7 +9,7 @@ import { fadeUp, fadeIn, scaleIn, staggerContainer, viewport } from "@/lib/anima
 const FEATURES = [
   {
     title: "Digital Catalogue",
-    desc: "Turn your shelves into an online catalogue in minutes — no manual data entry.",
+    desc: "Turn your store shelves into a digital catalogue in minutes with auto-listing and instant pricing updates.",
     icon: "menu_book",
     visual: "/images/stores/catalogue-ui.webp",
     alt: "Clean grocery catalogue interface preview",
@@ -17,7 +17,7 @@ const FEATURES = [
   },
   {
     title: "QR Ordering",
-    desc: "Let customers scan, browse, and place orders directly from your store.",
+    desc: "Let customers scan, browse, and place instant pickup or delivery orders directly from your store counter.",
     icon: "qr_code",
     visual: "/images/stores/qr-stand.webp",
     alt: "QR ordering stand on a local grocery store counter",
@@ -25,7 +25,7 @@ const FEATURES = [
   },
   {
     title: "Local Discovery",
-    desc: "Get discovered by nearby customers searching for products you sell.",
+    desc: "Get discovered by nearby neighborhood shoppers actively searching for products and daily essentials you sell.",
     icon: "location_on",
     visual: "/images/stores/local-map.webp",
     alt: "Local discovery map with purple pins and a store listing",
@@ -33,10 +33,10 @@ const FEATURES = [
   },
   {
     title: "Delivery Support",
-    desc: "Deliver orders easily with your own staff or trusted local delivery partners.",
+    desc: "Deliver orders easily with your own staff or trusted local delivery partners. Flexible radius setup, instant dispatch, and real-time tracking.",
     icon: "local_shipping",
-    visual: "/images/stores/delivery-support.webp",
-    alt: "Local delivery partner handing a grocery bag to a customer",
+    visual: "/images/hero/nearle-people.webp",
+    alt: "Nearle delivery partners and community members",
     tone: "bg-rose-500/5 text-rose-600",
   },
 ];
@@ -230,9 +230,9 @@ export function BusinessSection() {
                   key={feature.title}
                   variants={fadeUp}
                   whileHover={{ y: -6, transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] } }}
-                  className="merchant-feature-card flex min-w-0 flex-col overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white shadow-[0_4px_24px_rgba(22,0,29,0.07)] hover:shadow-[0_16px_40px_rgba(22,0,29,0.12)] hover:border-primary/20 transition-[box-shadow,border-color] duration-[250ms]"
+                  className="merchant-feature-card flex min-w-0 flex-col overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white p-3.5 sm:p-4 shadow-[0_4px_24px_rgba(22,0,29,0.07)] hover:shadow-[0_16px_40px_rgba(22,0,29,0.12)] hover:border-primary/20 transition-[box-shadow,border-color] duration-[250ms]"
                 >
-                  <div className="p-5">
+                  <div className="p-2 sm:p-3 pb-3 sm:pb-4">
                     <div className="flex items-start gap-3">
                       <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ${feature.tone}`}>
                         <MaterialIcon icon={feature.icon} size={22} />
@@ -247,17 +247,16 @@ export function BusinessSection() {
                       </div>
                     </div>
                   </div>
-                  <div className="mt-auto w-full overflow-hidden">
+                  <div className="mt-auto relative w-full min-h-[220px] sm:min-h-[260px] flex-1 overflow-hidden rounded-[1.25rem] border border-primary/10 bg-[#FAF8FC]">
                     {feature.title === "Local Discovery" ? (
                       <LocalDiscoveryVisual />
                     ) : (
                       <Image
                         src={feature.visual}
                         alt={feature.alt}
-                        width={900}
-                        height={560}
+                        fill
                         sizes="(max-width: 767px) 90vw, (max-width: 1279px) 45vw, 30vw"
-                        className="block h-auto w-full object-cover"
+                        className="object-cover object-top rounded-[1.25rem]"
                       />
                     )}
                   </div>