refactor: reposition BentoReviews section below ClickableGallery

src/app/(main)/page.tsx

@@ -21,14 +21,11 @@ export default function Home() {
       <section id="home-hero">
         <HomeHero />
       </section>
-      <section id="technologies">
-        <StackSectionPreview />
-      </section>
       <section id="network">
         <WorldMap />
       </section>
-      <section id="bento-reviews">
+      <section id="technologies">
-        <BentoReviews />
+        <StackSectionPreview />
       </section>
       <section id="deploy">
         <Steps />
@@ -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/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/HomeHero.tsx

@@ -5,7 +5,7 @@ import { motion } from 'framer-motion'
 import { TypeAnimation } from 'react-type-animation'
 import { Dialog, DialogPanel } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
-import { H1, PL } from '@/components/Texts'
+import { H1, H2, PL } from '@/components/Texts'
 
 const navigation = [
   { name: 'Product', href: '#' },
@@ -34,7 +34,7 @@ export function HomeHero() {
       <div className="relative px-6 lg:px-8">
         <div className="relative  mx-auto flex h-screen max-w-8xl items-center justify-center">
           <div className="text-center">
-            <div className="max-w-5xl">
+            <div className="max-w-6xl">
               <H1 color="light">
                 <TypeAnimation
                   sequence={[

src/components/StackSection.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { StackedCubes } from "@/components/ui/StackedCubes";
-import { H2, P } from '@/components/Texts';
+import { H1, H2, P } from '@/components/Texts';
 import { FadeIn } from "./FadeIn";
 
 export function StackSectionPreview() {