all hero section add image

src/components/heroes/PeopleHero.tsx

@@ -1,15 +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 {
   scaleInSpring,
   fadeUpStrong,
   fadeUp,
-  slideInLeftSubtle,
-  fadeIn,
   staggerFast,
 } from "@/lib/animations";
 
@@ -20,28 +17,29 @@ const HERO_STATS = [
   { title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" },
 ];
 
-const COLLAGE_CARDS = [
-  { text: "Discover Nearby", icon: "explore" },
-  { text: "Save Favourites", icon: "favorite" },
-  { text: "Order Anytime", icon: "shopping_bag" },
-];
-
-// Choreography: badge bounces in (spring) → h1 strong fade-up → p subtle up → CTAs slide from left
-// Fast stagger (0.07) gives a snappy, energetic feel — phone/fast/mobile-first vibe
 const badgeVariant = scaleInSpring;
 const titleVariant = fadeUpStrong;
 const descVariant = fadeUp;
-const ctaVariant = slideInLeftSubtle;
 
 export function PeopleHero() {
   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/people1.png"
+          alt=""
+          fill
+          sizes="100vw"
+          className="absolute inset-0 z-0 h-full w-full object-cover object-[68%_center] md:object-[62%_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] max-w-[1600px] mx-auto">
 
-          {/* Left Column: snappy fast-stagger sequence */}
           <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={staggerFast}
             initial="hidden"
             animate="visible"
@@ -64,51 +62,16 @@ export function PeopleHero() {
 
             <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)]"
             >
               Discover verified local stores, save your favorite merchants, and order everyday items with superfast local fulfillment.
             </motion.p>
-
-            <motion.div
-              variants={ctaVariant}
-              className="hidden md:flex md:flex-row md:gap-3.5 mt-8"
-            >
-              <a
-                href="#download-section"
-                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]"
-              >
-                Get the App
-              </a>
-              <Link
-                href="/"
-                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 Stores
-              </Link>
-            </motion.div>
-          </motion.div>
-
-          {/* Right Column: subtle fade — HeroVisualCollage's internal animations handle phone, images, badges individually */}
-          <motion.div
-            className="w-full"
-            variants={fadeIn}
-            initial="hidden"
-            animate="visible"
-            transition={{ delay: 0.15 }}
-          >
-            <HeroVisualCollage
-              centerImage="/images/app-mockup.png"
-              leftImage="/images/cat-hot-food.png"
-              rightImage="/images/cat-health-wellness.png"
-              glassCards={COLLAGE_CARDS}
-              isPhoneCenter={true}
-            />
           </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_STATS} />
         </div>
       </div>