Implement new bg client section

BuidlGuidl · Dec 31, 2024 · 8dccad4 · 8dccad4
1 parent ae6226c
commit 8dccad4
Showing 1 changed file with 24 additions and 36 deletions.
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -322,46 +322,34 @@ const Home: NextPage<{
         </div>
       </div>
 
-      {/* Nodes section */}
-      <div className="bg-[#EBEBEB] relative px-[13px]">
-        <div className="w-full border-t border-black absolute lg:top-16 top-14 left-0"></div>
-        <div className="h-full border-l border-black absolute top-0 lg:left-[76px] left-[58px]"></div>
-        <div className="w-full border-t border-black absolute lg:bottom-16 bottom-14 left-0"></div>
-        <div className="h-full border-l border-black absolute top-0 lg:right-[76px] right-[58px]"></div>
-        <div className="flex flex-col flex-grow lg:flex-row px-10 py-14 lg:py-16 lg:px-14 text-black">
-          {/* First column */}
-          <div className="flex flex-col flex-wrap">
-            <div className="flex items-start p-7 w-full lg:border-t lg:border-l lg:border-r-0 lg:border-b-0 border border-black">
-              <Image
-                src="/assets/client-logo.svg"
-                alt="client logo"
-                className="lg:w-[250px]"
-                width={200}
-                height={200}
-              />
+      {/* BG Client */}
+      <div className="bg-base-300">
+        <div className="mx-auto lg:max-w-7xl">
+          <div className="container max-w-[90%] lg:max-w-7xl m-auto py-12 lg:py-12 xl:pl-24 lg:pl-16 flex flex-col-reverse lg:flex-row items-center gap-5 lg:gap-0">
+            <div className="space-y-8 md:max-w-[70%] lg:max-w-[35%] flex flex-col items-center lg:items-start text-center lg:text-left">
+              <Image src="/assets/bg-client-logo.svg" alt="BG Client logo" width={200} height={200} />
+              <p className="m-0 lg:pr-8 mb-3 lg:text-2xl">
+                A one line command to deploy and monitor an Ethereum Node, funded and maintained by BuidlGuidl members.
+              </p>
+              <TrackedLink
+                id="BG-Nodes"
+                href="https://client.buidlguidl.com"
+                className="btn btn-primary btn-md px-8 mt-8 bg-[#FF66F9] border-[#FF66F9] hover:opacity-100"
+              >
+                Go to site
+              </TrackedLink>
             </div>
-            <div className="md:flex flex-row flex-grow lg:border-y lg:border-l lg:border-r-0 border-x border-black">
-              <div className="flex flex-col justify-between items-start bg-[#FF66F9] p-7 pt-4">
-                <p className="lg:text-base text-sm font-mono pb-4">
-                  Run a full Ethereum node with a single command! Opt in to our distributed RPC to power BG apps too!
-                </p>
-                <TrackedLink
-                  id="BG-Nodes"
-                  href="https://client.buidlguidl.com"
-                  className="btn btn-md text-xs lg:text-base px-8 hover:opacity-100 font-mono bg-white text-black border-black rounded-none hover:bg-[#4AF361] hover:border-black"
-                >
-                  Run a BG client
-                </TrackedLink>
-              </div>
-              <div className="hidden sm:flex flex-col items-center bg-[#4AF361] p-3 min-w-[200px] md:border-l border-t md:border-t-0 border-black">
-                <Image src="/assets/satellite.png" alt="satellite" width={200} height={200} />
+            <div className="flex flex-col items-center lg:pl-16 xl:pl-12 2xl:pl-24 lg:-mr-12 xl:-mr-16 2xl:-mr-24">
+              <div className="max-w-md lg:max-w-md xl:max-w-2xl 2xl:max-w-2xl">
+                <Image
+                  src="/assets/bg-client-monitor.png"
+                  alt="BG Client running on a computer"
+                  width={800}
+                  height={800}
+                />
               </div>
             </div>
           </div>
-          {/* Second column */}
-          <div className="flex flex-col items-center p-6 md:min-w-[400px] border border-black bg-[#4AF361] sm:bg-transparent">
-            <Image src="/assets/screenshot.png" alt="screenshot" width={700} height={700} />
-          </div>
         </div>
       </div>