fix: update switchback and card grid styles

Author: Chai Landau

src/app/page.tsx

@@ -12,6 +12,25 @@ export default function Home() {
         nextText="Jan 26, 2023"
       />
       <div className="page-content">
+        <Switchback
+          eyebrow="On this day"
+          leftContent={
+            <h2 className="heading">
+              <span>45,515</span> text gen
+              <br /> models existed
+            </h2>
+          }
+          rightContent={
+            <p>
+              We like to say that in AI, a week is a month and a month is a
+              year, and the "latest and greatest model" changes just as quickly.
+              We tracked the most popular text-gen models starting in January
+              2023 to highlight the rapid rate of change in the AI industry.
+              Click through time to see how quickly the state-of-the-art
+              changes.
+            </p>
+          }
+        />
         <CardGrid
           heading={
             <h1>
@@ -82,24 +101,6 @@ export default function Home() {
             },
           ]}
         />
-        <Switchback
-          leftContent={
-            <h2 className="heading">
-              <span>45,515</span> text gen
-              <br /> models existed
-            </h2>
-          }
-          rightContent={
-            <p>
-              We like to say that in AI, a week is a month and a month is a
-              year, and the "latest and greatest model" changes just as quickly.
-              We tracked the most popular text-gen models starting in January
-              2023 to highlight the rapid rate of change in the AI industry.
-              Click through time to see how quickly the state-of-the-art
-              changes.
-            </p>
-          }
-        />
       </div>
     </main>
   );

src/components/Switchback/Switchback.tsx

@@ -1,16 +1,31 @@
 import { FC, ReactElement } from "react";
 
 interface SwitchbackProps {
+  /** Optional eyebrow */
+  eyebrow?: string;
   /** Content for switback left side (top on mobile) */
   leftContent: ReactElement;
   /** Content for switback right side (bottom on mobile) */
   rightContent: ReactElement;
 }
-const Switchback: FC<SwitchbackProps> = ({ leftContent, rightContent }) => {
+const Switchback: FC<SwitchbackProps> = ({
+  eyebrow,
+  leftContent,
+  rightContent,
+}) => {
   return (
     <div className="switchback">
-      <div>{leftContent}</div>
-      <div>{rightContent}</div>
+      <div className="container">
+        <div>
+          {eyebrow && (
+            <div className="eyebrow">
+              <span>{eyebrow}</span>
+            </div>
+          )}
+          {leftContent}
+        </div>
+        <div>{rightContent}</div>
+      </div>
     </div>
   );
 };

src/styles/components/card-grid.css

@@ -1,6 +1,6 @@
 .card-grid {
   .heading {
-    @apply text-lg text-center mb-8 sm:text-[2.75rem] sm:mb-11 transition-font-size  md:mb-12 mt-2;
+    @apply text-lg sm:text-center mb-8 sm:text-[2.75rem] sm:mb-11 transition-font-size  md:mb-12 mt-2;
 
     br {
       @apply xs:hidden;

src/styles/components/switchback.css

@@ -1,15 +1,25 @@
 .switchback {
-  @apply flex flex-col gap-3 mt-8 m-auto max-w-lg md:flex-row md:gap-6 md:mt-16 md:max-w-screen-lg md:px-6;
-  & > div {
-    @apply w-full;
-  }
-  .heading {
-    @apply text-lg md:text-[40px] lg:text-xl transition-font-size;
-    br {
-      @apply min-[550px]:hidden md:block;
+  @apply mb-10 mt-1   border-b border-gray-100 pb-10 md:mt-3   md:px-6 md:pb-14 md:mb-14 lg:pb-20 lg:mb-20 dark:border-b-gray-900;
+  .container {
+    @apply m-auto flex max-w-lg flex-col gap-3  items-center  md:flex-row md:gap-6 md:max-w-screen-lg;
+    & > div {
+      @apply w-full;
+    }
+    .eyebrow {
+      @apply mb-4  flex text-body-sm uppercase tracking-wide text-gray-700 dark:text-gray-400;
+      span {
+        @apply rounded-2xl border border-gray-300 bg-gray-25 px-3 py-1 dark:border-gray-700 dark:bg-gray-900;
+      }
+    }
+
+    .heading {
+      @apply text-lg md:text-[40px] lg:text-xl transition-font-size;
+      br {
+        @apply min-[550px]:hidden md:block;
+      }
+    }
+    p {
+      @apply text-gray-700 dark:text-gray-200;
     }
-  }
-  p {
-    @apply text-gray-700 dark:text-gray-200;
   }
 }