From 727f6e4853f797a1e880e0e53be2fe9cd40874d8 Mon Sep 17 00:00:00 2001
From: Jon Bell <github@lot23.com>
Date: Tue, 9 Apr 2024 15:56:21 +1200
Subject: [PATCH] Better hero layout

---
 src/app/page.tsx                 |  5 +-
 src/components/Header.tsx        |  1 -
 src/components/sections/Hero.tsx | 98 +++++++++++++++++---------------
 3 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f1f37bb8..7a289ed0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -24,10 +24,7 @@ export default function Home() {
         return (
           <>
             <main>
-              <div
-                className="bg-cover bg-center bg-no-repeat"
-                style={{ backgroundImage: 'url(/images/hyperspace.svg)' }}
-              >
+              <div>
                 <Header />
                 <Hero {...landingPage} />
               </div>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 86027f2a..e3544b64 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -103,7 +103,6 @@ export function Header({ variant }: { variant?: 'dark' | 'light' }) {
             <Link href="/" aria-label="Home">
               <Logo
                 className={classNames(variant === 'dark' ? 'fill-slate-100' : 'fill-slate-800')}
-                style={{ height: '20px' }}
               />
             </Link>
             <div className="hidden md:flex md:gap-x-6">
diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
index be06aa8e..a84d68ec 100644
--- a/src/components/sections/Hero.tsx
+++ b/src/components/sections/Hero.tsx
@@ -16,56 +16,62 @@ import Cal from './hero/Cal'
 
 export function Hero({ hero }: LandingPageFragment) {
   return (
-    <div className="relative overflow-hidden ">
-      <Container className="relative z-10 max-w-4xl pt-20 text-center lg:pt-20">
-        <h1 className="mx-auto max-w-4xl font-display text-3xl font-bold tracking-tight text-slate-900 sm:text-5xl">
-          Move fast{' '}
-          <span className="relative whitespace-nowrap">
-            <span className={`${styles.colorPrimaryAccent} relative`}>without</span>
-          </span>{' '}
-          breaking things.
-        </h1>
-        <div className="mx-auto mt-4 max-w-3xl rounded-lg bg-white/75 p-2 text-lg tracking-tight text-slate-700">
-          <RichText>{hero.subtitle.json.content}</RichText>
-        </div>
+    <div className="relative overflow-hidden">
+      <Container
+        className="relative z-10 flex max-w-7xl items-center"
+        style={{ height: 'calc(100vh - 300px)' }}
+      >
+        <div className="flex-1 text-left">
+          <h1 className=" font-display text-3xl font-bold tracking-tight text-slate-900 sm:text-5xl">
+            Move fast{' '}
+            <span className="relative whitespace-nowrap">
+              <span className={`${styles.colorPrimaryAccent} relative`}>without</span>
+            </span>{' '}
+            breaking things.
+          </h1>
+          <div className="mt-4 max-w-3xl rounded-lg bg-white/75 p-2 text-lg tracking-tight text-slate-700">
+            <RichText>{hero.subtitle.json.content}</RichText>
+          </div>
 
-        <div className="mb-32 mt-10 flex justify-center gap-x-6">
-          <BaseHubButton {...hero.getStartedLink} />
-          <Cal link={hero.contactUsLink} />
+          <div className="mt-10 flex justify-start gap-x-6">
+            <BaseHubButton {...hero.getStartedLink} />
+            <Cal link={hero.contactUsLink} />
+          </div>
         </div>
-
-        <div className="mb-12 mt-12 w-full rounded-lg border border-slate-300/10  bg-white/75 px-4 py-2">
-          <p className="hidden font-display text-base text-slate-900">{hero.logosTitle}</p>
-
-          <ul role="list" className="flex flex-wrap items-center justify-center gap-x-8 saturate-0">
-            {[
-              [
-                { name: 'WeightsBiases', logo: logoWeightsAndBiases },
-                { name: 'Vercel', logo: logoVercel },
-                { name: 'Metabase', logo: logoMetabase },
-                { name: 'Glide', logo: logoGlide },
-                { name: 'Code Sandbox', logo: logoCodeSandbox },
-                { name: 'React', logo: logoReact },
-                { name: 'Apollo GraphQL', logo: logoApolloGraphql }
-              ]
-            ].map((group, groupIndex) => (
-              <li key={groupIndex}>
-                <ul
-                  role="list"
-                  className="flex flex-col items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
-                >
-                  {group.map((company) => (
-                    <li key={company.name} className="mb-1">
-                      <Image src={company.logo} alt={company.name} unoptimized />
-                    </li>
-                  ))}
-                </ul>
-              </li>
-            ))}
-          </ul>
-          {/* <Carousel testimonials={hero.testimonials.items} /> */}
+        <div className="flex-none rounded-md bg-blue-100 p-4">
+          <div className="h-32 bg-white p-2">Here is where a testimonial can go.</div>
         </div>
       </Container>
+      <div className="my-12 w-full rounded-lg px-4 py-0">
+        <p className="hidden font-display text-base text-slate-900">{hero.logosTitle}</p>
+        <ul role="list" className="flex flex-wrap items-center justify-center gap-x-8">
+          {[
+            [
+              { name: 'WeightsBiases', logo: logoWeightsAndBiases },
+              { name: 'Vercel', logo: logoVercel },
+              { name: 'Metabase', logo: logoMetabase },
+              { name: 'Glide', logo: logoGlide },
+              { name: 'Code Sandbox', logo: logoCodeSandbox },
+              { name: 'React', logo: logoReact },
+              { name: 'Apollo GraphQL', logo: logoApolloGraphql }
+            ]
+          ].map((group, groupIndex) => (
+            <li key={groupIndex}>
+              <ul
+                role="list"
+                className="flex items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
+              >
+                {group.map((company) => (
+                  <li key={company.name} className="mb-1">
+                    <Image src={company.logo} alt={company.name} unoptimized />
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </div>
+      {/* <Carousel testimonials={hero.testimonials.items} /> */}
     </div>
   )
 }