Add shorter one liner (#12)

* Added the shorter one liner, adjusted sections so they correctly move down under large breakpoint, made large breakpoint width == 1145 px so that one liner text doesn't ever wrap to 2 lines * Made Useful links open in new tab * Reverted back to opening links in same tab (can't figure out how to disable the blue loading bar. hate it)
BuidlGuidl · Oct 31, 2024 · af18854 · af18854
1 parent 41b5d05
commit af18854
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -35,16 +35,14 @@ const Home: NextPage = () => {
   return (
     <div className="container mx-auto">
       {/* First row */}
-      <div className="flex flex-row flex-wrap lg:flex-nowrap lg:border-x-[1px] lg:border-y-[1px] border-black">
+      <div className="flex flex-col lg:flex-row lg:border-x-[1px] lg:border-y-[1px] border-black">
         {/* Introduction section */}
-        <section className="bg-[#df57c4] p-6 lg:p-10 lg:w-[45vw] border-x-[1px] border-y-[1px] border-black lg:border-none overflow-auto">
+        <section className="bg-[#df57c4] p-6 lg:p-10 w-full lg:w-[45vw] border-x-[1px] border-y-[1px] border-black lg:border-none overflow-auto">
           <div className="flex flex-col">
             <p className="mt-0">Run an Ethereum node with a single command:</p>
             <p className="mt-0">Mac/linux</p>
             <div className="bg-black p-2 lg:p-4 text-white text-sm overflow-auto">
-              <p className="m-2">
-                /bin/bash -c &quot;$(curl -fsSL https://client.buidlguidl.com/runBuidlGuidlClient.sh)&quot;
-              </p>
+              <p className="m-2">/bin/bash -c &quot;$(curl -fsSL https://bgclient.io)&quot;</p>
             </div>
             <p> or run the client from the repo:</p>
             <div className="bg-black p-2 lg:p-4 text-white text-sm overflow-auto">
@@ -56,15 +54,18 @@ const Home: NextPage = () => {
           </div>
         </section>
 
-        {/* Screenshot section */}
-        <section className="bg-[#DDDDDD] flex-1 p-6 flex justify-center border-x-[1px] border-b-[1px] border-black lg:border-b-0">
-          <Image src="/screenshot-2.png" alt="screenshot" className="object-contain" width={972} height={875} />
-        </section>
+        {/* Second row for mobile - flex row to make sections share the row */}
+        <div className="flex flex-row flex-1">
+          {/* Screenshot section */}
+          <section className="bg-[#DDDDDD] w-7/12 lg:flex-1 p-6 flex justify-center border-x-[1px] border-b-[1px] border-black lg:border-b-0">
+            <Image src="/screenshot-2.png" alt="screenshot" className="object-contain" width={972} height={875} />
+          </section>
 
-        {/* Satellite section */}
-        <section className="bg-[#20F658] p-6 w-[40vw] lg:flex-1 flex justify-center border-r-[1px] border-b-[1px] border-black lg:border-r-0 lg:border-b-0">
-          <Image src="/satellite-10fps.gif" alt="satellite" className="object-contain" width={436} height={535} />
-        </section>
+          {/* Satellite section */}
+          <section className="bg-[#20F658] p-6 w-5/12 lg:flex-1 flex justify-center border-r-[1px] border-b-[1px] border-black lg:border-r-0 lg:border-l-0 lg:border-b-0">
+            <Image src="/satellite-10fps.gif" alt="satellite" className="object-contain" width={436} height={535} />
+          </section>
+        </div>
       </div>
 
       {/* Second row */}

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -84,6 +84,9 @@ module.exports = {
         "pulse-fast": "pulse 1.5s cubic-bezier(.57,.21,.69,1.25) infinite",
         "animate-ping": "ping 1s ease-in-out infinite",
       },
+      screens: {
+        lg: "1145px",
+      },
     },
   },
 };