update image in hero section

src/app/people/page.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 const ROTATOR_SLIDES = [
@@ -16,63 +17,81 @@ const OFFERINGS = [
     tag: "Join the #1 Neighbourhood App",
     descr: "Enjoy the comfort of elegant living. Nearle is India's first hyper-local managed platform bringing all amenities and requirements directly to your fingertips.",
     icon: "local_florist",
-    color: "from-purple-500/10 to-indigo-500/10 text-primary border-purple-100"
+    color: "from-purple-500/10 to-indigo-500/10 text-primary border-purple-100",
+    image: "/nearle people.png",
+    isWide: false
   },
   {
     title: "Awareness at a Touch",
     tag: "Hot Deals",
     descr: "Pick hot deals within your neighbourhood. Stay updated on localized sales, discounts, and flash promotions happening today.",
     icon: "local_activity",
-    color: "from-amber-500/10 to-orange-500/10 text-amber-700 border-amber-100"
+    color: "from-amber-500/10 to-orange-500/10 text-amber-700 border-amber-100",
+    image: "/images/app-mockup.png",
+    isWide: false
   },
   {
     title: "Best of Both Worlds",
     tag: "Convenience & Speed",
     descr: "Enjoy the ease of the World Wide Web, fulfilled entirely by trusted local businesses. Avoid traffic lights, parking hassles, and pollution.",
     icon: "travel_explore",
-    color: "from-green-500/10 to-emerald-500/10 text-secondary border-green-100"
+    color: "from-green-500/10 to-emerald-500/10 text-secondary border-green-100",
+    image: "/images/slider-courier-mask.png",
+    isWide: false
   },
   {
     title: "Lifestyle Shopping",
     tag: "Exclusive Privileges",
     descr: "Enjoy safe, convenient shopping with custom pricing, resident promotions, and bulk order discounts negotiated for your community.",
     icon: "shopping_bag",
-    color: "from-rose-500/10 to-pink-500/10 text-rose-700 border-rose-100"
+    color: "from-rose-500/10 to-pink-500/10 text-rose-700 border-rose-100",
+    image: "/images/cat-pet-essentials.png",
+    isWide: false
   },
   {
     title: "Just a Click away",
     tag: "Instant Delivery",
     descr: "Order everything you need in your neighborhood with a single tap. A fast, organized last-mile delivery network ensures prompt fulfillment.",
     icon: "touch_app",
-    color: "from-sky-500/10 to-blue-500/10 text-sky-700 border-sky-100"
+    color: "from-sky-500/10 to-blue-500/10 text-sky-700 border-sky-100",
+    image: "/about.png",
+    isWide: true
   },
   {
     title: "Amazingly Fresh",
     tag: "Daily Essentials",
     descr: "Get your fresh fruits, farm-fresh vegetables, dairy, and grocery items delivered instantly from verified local green grocers.",
     icon: "eco",
-    color: "from-emerald-500/10 to-teal-500/10 text-emerald-700 border-emerald-100"
+    color: "from-emerald-500/10 to-teal-500/10 text-emerald-700 border-emerald-100",
+    image: "/images/cat-daily-essentials.png",
+    isWide: false
   },
   {
     title: "Restaurants & Takeaways",
     tag: "Hot Food Nearby",
     descr: "Choose from the best local restaurants and neighborhood eateries close to your home. Hot food delivered with relevance and speed.",
     icon: "restaurant",
-    color: "from-orange-500/10 to-red-500/10 text-orange-700 border-orange-100"
+    color: "from-orange-500/10 to-red-500/10 text-orange-700 border-orange-100",
+    image: "/images/cat-hot-food.png",
+    isWide: false
   },
   {
     title: "Never Before Experience",
     tag: "Custom Services",
     descr: "Access custom-tailored local neighborhood services designed to integrate convenience directly into residential society living.",
     icon: "stars",
-    color: "from-violet-500/10 to-purple-500/10 text-violet-700 border-violet-100"
+    color: "from-violet-500/10 to-purple-500/10 text-violet-700 border-violet-100",
+    image: "/images/cat-health-wellness.png",
+    isWide: false
   },
   {
     title: "Home Services @ Ease",
     tag: "Unified Local Partner",
     descr: "Book certified local service providers at your convenience. From handymen to laundry, pet care to pharmacy delivery, all in one place.",
     icon: "construction",
-    color: "from-cyan-500/10 to-blue-500/10 text-cyan-700 border-cyan-100"
+    color: "from-cyan-500/10 to-blue-500/10 text-cyan-700 border-cyan-100",
+    image: "/images/cat-home-services.png",
+    isWide: false
   }
 ];
 
@@ -97,11 +116,20 @@ export default function PeoplePage() {
     <div className="relative min-h-screen bg-background">
       
       {/* ─── Hero Section ─── */}
-      <section className="relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 text-center">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,rgba(108,14,128,0.25),transparent_40%)]" />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(203,157,248,0.15),transparent_45%)]" />
+      <section className="hero-section relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 text-center">
+        {/* Background Image with Overlay */}
+        <div className="hero-background select-none pointer-events-none">
+          <Image
+            src="/nearle people.png"
+            alt="Nearle People Background"
+            fill
+            sizes="100vw"
+            className="object-cover object-right"
+            priority
+          />
+        </div>
 
-        <div className="relative z-10 mx-auto max-w-container-max">
+        <div className="hero-content relative z-10 mx-auto max-w-container-max">
           <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
             Nearle for People
           </p>
@@ -109,30 +137,15 @@ export default function PeoplePage() {
           <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
             <span>Redefining Local Living.</span>
             <br />
-            <span className="relative inline-block text-brand-accent min-h-[1.2em] transition-all duration-500">
+            <span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
               {ROTATOR_SLIDES[slideIndex]}
             </span>
           </h1>
-
-          <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
-            India&apos;s first hyper-local managed Neighbourhood Living Platform. Connect to verified stores and daily amenities around you instantly.
-          </p>
-
-          {/* Quick Action */}
-          <div className="mt-10">
-            <a
-              href="#download-section"
-              className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-xl transition-all duration-300 active:scale-95 inline-flex items-center gap-2"
-            >
-              <MaterialIcon icon="download" size={18} />
-              <span>Get the App Now</span>
-            </a>
-          </div>
         </div>
       </section>
 
       {/* ─── 9 Core Offerings Bento Grid ─── */}
-      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
+      <section className="experience-section mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
         <div className="text-center mb-16">
           <span className="text-label-sm font-black text-primary uppercase tracking-widest">
             What we offer
@@ -145,27 +158,28 @@ export default function PeoplePage() {
           </p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="experience-grid">
           {OFFERINGS.map((offering) => (
-            <div
+            <article
               key={offering.title}
-              className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col hover:border-primary/25 transition-all"
+              className="experience-card"
             >
-              <div className="flex items-center justify-between mb-6">
-                <span className="text-[10px] font-black uppercase tracking-wider text-secondary-container bg-secondary/15 text-secondary px-3 py-1 rounded-full">
-                  {offering.tag}
-                </span>
-                <div className={`w-11 h-11 rounded-xl bg-gradient-to-br ${offering.color} flex items-center justify-center`}>
-                  <MaterialIcon icon={offering.icon} size={22} />
+              <Image
+                src={offering.image}
+                alt={offering.title}
+                fill
+                sizes="(max-width: 1023px) 100vw, 33vw"
+                className="experience-card__image"
+              />
+              <div className="experience-card__overlay" />
+              <div className="experience-card__content">
+                <div className="experience-card__icon">
+                  <MaterialIcon icon={offering.icon} size={22} className="text-white" />
                 </div>
+                <h3>{offering.title}</h3>
+                <p>{offering.descr}</p>
               </div>
-              <h3 className="font-display text-lg font-black text-brand-dark mb-3">
-                {offering.title}
-              </h3>
-              <p className="text-body-sm text-on-surface-variant leading-relaxed">
-                {offering.descr}
-              </p>
-            </div>
+            </article>
           ))}
         </div>
       </section>