fix hero section layout in homepage

src/app/people/page.tsx

@@ -145,81 +145,80 @@ export default function PeoplePage() {
   }, []);
 
   return (
-    <div className="relative min-h-screen bg-background">
-      
-      {/* ─── Hero Section ─── */}
-      <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>
+    <main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
+      <div className="page-frame">
+        {/* ─── Hero Section ─── */}
+        <section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 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="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>
+          <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>
 
-          <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="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
-              {ROTATOR_SLIDES[slideIndex]}
+            <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="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
+                {ROTATOR_SLIDES[slideIndex]}
+              </span>
+            </h1>
+          </div>
+        </section>
+
+        {/* ─── 9 Core Offerings Bento Grid ─── */}
+        <section className="experience-section bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
+          <div className="mb-16">
+            <span className="text-label-sm font-black text-primary uppercase tracking-widest">
+              What we offer
             </span>
-          </h1>
-        </div>
-      </section>
+            <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
+              Everything You Need, Just a Click Away
+            </h2>
+            <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
+              Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
+            </p>
+          </div>
 
-      {/* ─── 9 Core Offerings Bento Grid ─── */}
-      <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
-          </span>
-          <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
-            Everything You Need, Just a Click Away
-          </h2>
-          <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
-            Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
-          </p>
-        </div>
-
-        <div className="experience-grid">
-          {OFFERINGS.map((offering) => (
-            <article
-              key={offering.title}
-              className="experience-card"
-            >
-              <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 className="experience-grid">
+            {OFFERINGS.map((offering) => (
+              <article
+                key={offering.title}
+                className="experience-card"
+              >
+                <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 text-left">
+                  <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>{offering.title}</h3>
-                <p>{offering.descr}</p>
-              </div>
-            </article>
-          ))}
-        </div>
-      </section>
+              </article>
+            ))}
+          </div>
+        </section>
 
-      {/* ─── Localized Stats Block ─── */}
-      <section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
-        <div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
-          <div className="text-center mb-12">
+        {/* ─── Localized Stats Block ─── */}
+        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
+          <div className="mb-12">
             <span className="text-label-sm font-black text-primary uppercase tracking-widest">
               Nearle Network
             </span>
@@ -247,12 +246,10 @@ export default function PeoplePage() {
               </div>
             ))}
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* ─── Ready to Download Section ─── */}
-      <section id="download-section" className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-20">
-        <div className="bg-gradient-to-br from-[#4d046a] via-[#1c0228] to-[#0d0114] rounded-[2.5rem] p-8 md:p-12 lg:p-14 relative overflow-hidden shadow-2xl border border-white/5">
+        {/* ─── Ready to Download Section ─── */}
+        <section id="download-section" className="bg-gradient-to-br from-[#4d046a] via-[#1c0228] to-[#0d0114] rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden p-8 md:p-12 lg:p-14 relative text-center">
           {/* Subtle ambient light gradient overlays */}
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(224,200,247,0.15),transparent_70%)] pointer-events-none" />
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_80%,rgba(123,248,161,0.06),transparent_50%)] pointer-events-none" />
@@ -452,8 +449,8 @@ export default function PeoplePage() {
                     className="text-secondary"
                   />
                 </div>
-                <div className="text-left">
-                  <p className="text-xs font-black text-brand-dark leading-tight">Order Confirmed</p>
+                <div className="text-left text-brand-dark">
+                  <p className="text-xs font-black leading-tight">Order Confirmed</p>
                   <p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
                 </div>
               </div>
@@ -555,8 +552,8 @@ export default function PeoplePage() {
                   className="text-secondary"
                 />
               </div>
-              <div className="text-left">
-                <p className="text-xs font-black text-brand-dark leading-tight">Order Confirmed</p>
+              <div className="text-left text-brand-dark">
+                <p className="text-xs font-black leading-tight">Order Confirmed</p>
                 <p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
               </div>
             </div>
@@ -596,8 +593,8 @@ export default function PeoplePage() {
               </div>
             </div>
           </div>
-        </div>
-      </section>
-    </div>
+        </section>
+      </div>
+    </main>
   );
 }