updat d2c page and scroll fix

src/components/businesses/BusinessFeaturesGrid.tsx

@@ -353,7 +353,7 @@ const FEATURES = [
   },
   {
     title: "Reach Right Audience",
-    descr: "We target your ideal customers — people in your neighborhood search for what you offer.",
+    descr: "We target your ideal customers: people in your neighborhood who are already searching for what you offer.",
     Illus: AudienceSVG,
   },
   {

src/components/heroes/BrandsHero.tsx

@@ -87,7 +87,7 @@ export function BrandsHero() {
               animate="visible"
               className="max-w-[650px] text-lg md:text-xl text-white/95 font-medium mt-6 leading-[1.6] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
             >
-              Help your D2C brand reach nearby customers, increase repeat purchases, and build a loyal local community—all from one powerful platform.
+              Help your D2C brand reach nearby customers, increase repeat purchases, and build a loyal local community, all from one powerful platform.
             </motion.p>
 
 

src/components/home/BusinessSection.tsx

@@ -174,7 +174,7 @@ export function BusinessSection() {
               </h2>
 
              <p className="max-w-md text-base text-on-surface-variant leading-relaxed">
-                Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
+                Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales, while staying in control of your business.
               </p>
 
               <div className="mt-5 space-y-3">

src/components/ui/CTABanner.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import { motion } from "framer-motion";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
@@ -31,9 +32,10 @@ type CTABannerProps = {
   primary: { href: string; icon: string; label: string };
   secondary: { href: string; icon: string; label: string };
   decorations?: string[];
+  backgroundImage?: string;
 };
 
-export function CTABanner({ badge, heading, body, primary, secondary, decorations }: CTABannerProps) {
+export function CTABanner({ badge, heading, body, primary, secondary, decorations, backgroundImage }: CTABannerProps) {
   return (
     <section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
       <motion.div
@@ -44,6 +46,27 @@ export function CTABanner({ badge, heading, body, primary, secondary, decoration
         viewport={VP}
       >
         <div className="px-6 py-12 md:px-10 md:py-14 lg:px-14 xl:py-12 text-center relative">
+          {backgroundImage && (
+            <Image
+              src={backgroundImage}
+              alt=""
+              fill
+              priority={false}
+              className="object-cover absolute inset-0 z-0"
+              aria-hidden="true"
+            />
+          )}
+
+          {backgroundImage && (
+            <div
+              className="absolute inset-0 z-[1]"
+              style={{
+                background:
+                  "linear-gradient(135deg, rgba(26,3,34,0.72), rgba(43,0,64,0.62), rgba(10,0,13,0.72))",
+              }}
+            />
+          )}
+
           {decorations?.map((grad, i) => (
             <motion.div
               key={i}

src/components/ui/FeatureStatsRow.tsx

@@ -49,7 +49,7 @@ export function FeatureStatsRow({ items, className = "" }: FeatureStatsRowProps)
               </motion.div>
               {index < items.length - 1 && (
                 <div
-                  className="hidden lg:block w-px h-[72px] bg-[#E9D8FD] shrink-0 self-center"
+                  className="hidden lg:block w-px h-[72px] bg-[#E9D8FD] shrink-0 self-center lg:mx-4 xl:mx-8"
                   aria-hidden="true"
                 />
               )}