Revert "Better grid on landing page -- missing testimonial"

replayio · Apr 9, 2024 · a053133 · a053133
1 parent 83b3838
commit a053133
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 53 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -24,7 +24,10 @@ export default function Home() {
         return (
           <>
             <main>
-              <div>
+              <div
+                className="bg-cover bg-center bg-no-repeat"
+                style={{ backgroundImage: 'url(/images/hyperspace.svg)' }}
+              >
                 <Header />
                 <Hero {...landingPage} />
               </div>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -103,6 +103,7 @@ 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
@@ -16,62 +16,56 @@ import Cal from './hero/Cal'
 
 export function Hero({ hero }: LandingPageFragment) {
   return (
-    <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="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="mt-10 flex justify-start gap-x-6">
-            <BaseHubButton {...hero.getStartedLink} />
-            <Cal link={hero.contactUsLink} />
-          </div>
+        <div className="mb-32 mt-10 flex justify-center gap-x-6">
+          <BaseHubButton {...hero.getStartedLink} />
+          <Cal link={hero.contactUsLink} />
         </div>
-        <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 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>
       </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>
   )
 }