all hero section add image

src/components/heroes/BusinessHero.tsx

@@ -1,16 +1,12 @@
 "use client";
 
-import Link from "next/link";
+import Image from "next/image";
 import { motion } from "framer-motion";
-import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
 import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
 import {
   slideInLeftSubtle,
-  fadeUp,
   fadeIn,
-  scaleIn,
   staggerContainer,
-  viewport,
 } from "@/lib/animations";
 
 const HERO_BENEFITS = [
@@ -20,13 +16,6 @@ const HERO_BENEFITS = [
   { title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" },
 ];
 
-const COLLAGE_CARDS = [
-  { text: "Nearby Customers", icon: "people" },
-  { text: "Orders & Offers", icon: "local_offer" },
-  { text: "Local Delivery Support", icon: "local_shipping" },
-];
-
-// Choreography: badge slides left → title fades up → description fades in (opacity only) → CTAs scale in
 const badgeVariant = slideInLeftSubtle;
 const titleVariant = {
   hidden: { opacity: 0, y: 28 },
@@ -37,17 +26,27 @@ const titleVariant = {
   },
 };
 const descVariant = fadeIn;
-const ctaVariant = scaleIn;
 
 export function BusinessHero() {
   return (
-    <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
-      <div className="border-b border-[#6330D6]/10">
-        <div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 max-w-[1600px] mx-auto">
+    <section className="w-full flex flex-col select-none bg-white">
+      <div className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC]">
+        <Image
+          src="/images/business1.png"
+          alt=""
+          fill
+          sizes="100vw"
+          className="absolute inset-0 z-0 h-full w-full object-cover object-[62%_center] md:object-[58%_center] xl:object-center"
+          priority
+          aria-hidden="true"
+        />
+        <div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(250,248,252,0.85)_0%,rgba(250,248,252,0.68)_28%,rgba(250,248,252,0.38)_58%,rgba(250,248,252,0.10)_100%)] md:bg-[radial-gradient(ellipse_72%_88%_at_50%_42%,rgba(250,248,252,0.72)_0%,rgba(250,248,252,0.50)_38%,rgba(250,248,252,0.18)_65%,rgba(250,248,252,0.04)_100%)]" />
+
+        <div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:min-h-[580px] sm:px-8 sm:pt-24 md:min-h-[610px] md:px-12 md:py-20 lg:min-h-[650px] lg:px-16 lg:py-24 xl:min-h-[680px] xl:px-8 max-w-[1600px] mx-auto">
 
           {/* Left Column: animated with unique stagger */}
           <motion.div
-            className="flex flex-col text-left max-w-xl"
+            className="flex flex-col items-center text-center w-full max-w-[780px] relative z-20"
             variants={staggerContainer}
             initial="hidden"
             animate="visible"
@@ -70,51 +69,16 @@ export function BusinessHero() {
 
             <motion.p
               variants={descVariant}
-              className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed"
+              className="text-sm md:text-base text-[#16001D] font-bold mt-6 leading-relaxed [text-shadow:0_1px_2px_rgba(255,255,255,0.55)]"
             >
               Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
             </motion.p>
-
-            <motion.div
-              variants={ctaVariant}
-              className="hidden md:flex md:flex-row md:gap-3.5 mt-8"
-            >
-              <Link
-                href="/contact"
-                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
-              >
-                List Your Store
-              </Link>
-              <Link
-                href="/contact"
-                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
-              >
-                Explore Solutions
-              </Link>
-            </motion.div>
-          </motion.div>
-
-          {/* Right Column: subtle fade-in — HeroVisualCollage internal animations choreograph each element */}
-          <motion.div
-            className="w-full"
-            variants={fadeIn}
-            initial="hidden"
-            animate="visible"
-            transition={{ delay: 0.2 }}
-          >
-            <HeroVisualCollage
-              centerImage="/nearlenewlogo.png"
-              leftImage="/images/cat-daily-essentials.png"
-              rightImage="/Nearle Business.png"
-              glassCards={COLLAGE_CARDS}
-              isPhoneCenter={false}
-            />
           </motion.div>
         </div>
       </div>
 
       <div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
-        <div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
+        <div className="px-6 sm:px-10 max-w-[1600px] mx-auto">
           <FeatureStatsRow items={HERO_BENEFITS} />
         </div>
       </div>