fix hero section layout in homepage

src/app/businesses/page.tsx

@@ -88,42 +88,41 @@ export default function BusinessesPage() {
   }, []);
 
   return (
-    <div className="relative min-h-screen bg-background">
-      {/* ─── Hero Section with Animated Rotator ─── */}
-      <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="absolute inset-0 z-0 select-none pointer-events-none">
-          <Image
-            src="/Nearle Business.png"
-            alt="Nearle Business Background"
-            fill
-            sizes="100vw"
-            className="object-cover"
-            priority
-          />
-          <div className="absolute inset-0 bg-[#120217]/50" />
-        </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 with Animated Rotator ─── */}
+        <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="absolute inset-0 z-0 select-none pointer-events-none">
+            <Image
+              src="/Nearle Business.png"
+              alt="Nearle Business Background"
+              fill
+              sizes="100vw"
+              className="object-cover"
+              priority
+            />
+            <div className="absolute inset-0 bg-[#120217]/50" />
+          </div>
 
-        <div className="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 Business
-          </p>
+          <div className="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 Business
+            </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>Power your business.</span>
-            <br />
-            <span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
-              {ROTATOR_WORDS[wordIndex]}
-            </span>
-          </h1>
+            <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>Power your business.</span>
+              <br />
+              <span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
+                {ROTATOR_WORDS[wordIndex]}
+              </span>
+            </h1>
+          </div>
+        </section>
 
-        </div>
-      </section>
-
-      {/* ─── Intro Highlight Banner ─── */}
-      <section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
-        <div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl flex flex-col lg:flex-row justify-between items-center gap-8">
-          <div className="max-w-2xl">
+        {/* ─── Intro Highlight Banner ─── */}
+        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-8 md:p-12 flex flex-col lg:flex-row justify-between items-center gap-8">
+          <div className="max-w-2xl text-left">
             <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
               Together, we grow
             </span>
@@ -143,53 +142,50 @@ export default function BusinessesPage() {
               <span>Talk to an Expert</span>
             </Link>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* ─── Timeline / Core Process Steps ─── */}
-      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
-        <div className="text-center mb-16">
-          <span className="text-label-sm font-black text-primary uppercase tracking-widest">
-            How it works
-          </span>
-          <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
-            Build Your Neighborhood Brand
-          </h2>
-          <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
-            Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
-          </p>
-        </div>
+        {/* ─── Timeline / Core Process Steps ─── */}
+        <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">
+          <div className="text-center mb-16">
+            <span className="text-label-sm font-black text-primary uppercase tracking-widest">
+              How it works
+            </span>
+            <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
+              Build Your Neighborhood Brand
+            </h2>
+            <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
+              Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
+            </p>
+          </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {PROCESS_STEPS.map((ps) => (
-            <div
-              key={ps.step}
-              className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col relative overflow-hidden"
-            >
-              <div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
-                {ps.step}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {PROCESS_STEPS.map((ps) => (
+              <div
+                key={ps.step}
+                className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col relative overflow-hidden"
+              >
+                <div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
+                  {ps.step}
+                </div>
+                <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}>
+                  <MaterialIcon icon={ps.icon} size={28} />
+                </div>
+                <h3 className="font-display text-xl font-black text-brand-dark mb-3 text-left">
+                  {ps.title}
+                </h3>
+                <p className="text-body-sm text-on-surface-variant leading-relaxed text-left">
+                  {ps.descr}
+                </p>
               </div>
-              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}>
-                <MaterialIcon icon={ps.icon} size={28} />
-              </div>
-              <h3 className="font-display text-xl font-black text-brand-dark mb-3">
-                {ps.title}
-              </h3>
-              <p className="text-body-sm text-on-surface-variant leading-relaxed">
-                {ps.descr}
-              </p>
-            </div>
-          ))}
-        </div>
-      </section>
+            ))}
+          </div>
+        </section>
 
-      {/* ─── Grid Stats & Value Prop ─── */}
-      <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">
+        {/* ─── Grid Stats & Value Prop ─── */}
+        <section className="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">
           <div className="grid lg:grid-cols-12 gap-16 items-center">
-            
             {/* Left side: features block (7 cols) */}
-            <div className="lg:col-span-7">
+            <div className="lg:col-span-7 text-left">
               <span className="text-label-sm font-black text-primary uppercase tracking-widest">
                 Our features
               </span>
@@ -220,7 +216,7 @@ export default function BusinessesPage() {
             </div>
 
             {/* Right side: stats quadrant (5 cols) */}
-            <div className="lg:col-span-5 grid grid-cols-2 gap-6">
+            <div className="lg:col-span-5 grid grid-cols-2 gap-6 text-left">
               {STATS.map((stat, i) => (
                 <div
                   key={stat.label}
@@ -246,14 +242,11 @@ export default function BusinessesPage() {
                 </div>
               ))}
             </div>
-
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* ─── Join/Download Call to Action ─── */}
-      <section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24 text-center">
-        <div className="bg-primary rounded-[2.5rem] p-12 md:p-20 relative overflow-hidden shadow-2xl">
+        {/* ─── Join/Download Call to Action ─── */}
+        <section className="bg-primary 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-12 md:p-20 relative text-center">
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(203,157,248,0.18),transparent_50%)] animate-pulse-subtle" />
           <div className="relative z-10 max-w-2xl mx-auto text-on-primary">
             <h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
@@ -281,8 +274,8 @@ export default function BusinessesPage() {
               </Link>
             </div>
           </div>
-        </div>
-      </section>
-    </div>
+        </section>
+      </div>
+    </main>
   );
 }