refactor: reposition BentoReviews section below ClickableGallery

src/app/(main)/page.tsx

@@ -21,15 +21,12 @@ export default function Home() {
       <section id="home-hero">
         <HomeHero />
       </section>
-      <section id="technologies">
-        <StackSectionPreview />
-      </section>
-      <section id="bento-reviews">
-        <BentoReviews />
-      </section>
       <section id="network">
         <WorldMap />
       </section>
+      <section id="technologies">
+        <StackSectionPreview />
+      </section>
       <section id="deploy">
         <Steps />
       </section>
@@ -39,6 +36,9 @@ export default function Home() {
       <section id="clickable-gallery">
         <ClickableGallery />
       </section>
+      <section id="bento-reviews">
+        <BentoReviews />
+      </section>
       <section id="call-to-action">
         <CallToAction />
       </section>

src/components/BentoReviews.tsx

@@ -92,7 +92,7 @@ export function BentoReviews() {
 
   return (
     <div>
-      <div className="relative isolate pt-24 pb-12 bg-black text-center w-full lg:px-0 px-4">
+      <div className="relative isolate py-24 bg-black text-center w-full lg:px-0 px-4">
         <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
           <div className="mx-auto max-w-5xl ">
             <H2 className="text-center">Augmented Intelligence Fabric</H2>

src/components/Companies.tsx

@@ -40,7 +40,7 @@ const row2 = logos.slice(6);
 
 export function Companies() {
   return (
-    <div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased  py-4 -top-20">
+    <div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased  py-4 mb-12">
       <div className="relative z-10 mx-auto w-full max-w-6xl p-4">
 
         {/* Heading */}

src/components/Steps.tsx

@@ -30,7 +30,7 @@ export function Steps() {
   const isInView = useInView(ref, { once: true });
 
   return (
-    <section id="benefits" ref={ref} className="relative pt-16 pb-4 px-4 lg:px-12 -top-20 text-white">
+    <section id="benefits" ref={ref} className="relative pt-12 pb-4 px-4 lg:px-12  text-white">
       <div className="relative px-6 lg:px-12">
         <motion.div
           initial={{ opacity: 0, y: 20 }}