feat: add styles for footer credit, page content (#4)

* refactor: fix heading margins
octoml · Feb 24, 2024 · 1115fa3 · 1115fa3
1 parent ec531d3
commit 1115fa3
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 109 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,93 +11,96 @@ export default function Home() {
         current="January 25, 2023"
         nextText="Jan 26, 2023"
       />
-      <CardGrid
-        heading={
-          <h1>
-            10 Most <br />
-            <span>Popular</span> Models
-          </h1>
-        }
-        cards={[
-          {
-            icon: "/models/mistral.webp",
-            modelAuthor: "stabilityai",
-            modelName: "japanese-stablelm-instruct-alpha-7b",
-            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
-          },
-          {
-            icon: "/models/mistral.webp",
-            modelAuthor: "mistralai",
-            modelName: "Mistral-7B-v0.1",
-            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
-          },
-          {
-            icon: "/models/mistral.webp",
-            modelAuthor: "mistralai",
-            modelName: "Mistral-7B-v0.1",
-            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
-          },
-          {
-            icon: "/models/mistral.webp",
-            modelAuthor: "mistralai",
-            modelName: "Mistral-7B-v0.1",
-            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
-          },
-          {
-            icon: "/models/mistral.webp",
-            modelAuthor: "mistralai",
-            modelName: "Mistral-7B-v0.1",
-            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
-          },
-          {
-            icon: "/models/mistral.webp",
-            modelAuthor: "mistralai",
-            modelName: "Mistral-7B-v0.1",
-            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
-          },
-          {
-            icon: "/models/mistral.webp",
-            modelAuthor: "mistralai",
-            modelName: "Mistral-7B-v0.1",
-            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
-          },
-          {
-            icon: "/models/mistral.webp",
-            modelAuthor: "mistralai",
-            modelName: "Mistral-7B-v0.1",
-            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
-          },
-          {
-            icon: "/models/mistral.webp",
-            modelAuthor: "mistralai",
-            modelName: "Mistral-7B-v0.1",
-            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
-          },
-          {
-            icon: "/models/mistral.webp",
-            modelAuthor: "mistralai",
-            modelName: "Mistral-7B-v0.1",
-            externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
-          },
-        ]}
-      />
-      <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 className="page-content">
+        <CardGrid
+          heading={
+            <h1>
+              10 Most <br />
+              <span>Popular</span> Models
+            </h1>
+          }
+          cards={[
+            {
+              icon: "/models/mistral.webp",
+              modelAuthor: "stabilityai",
+              modelName: "japanese-stablelm-instruct-alpha-7b",
+              externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+            },
+            {
+              icon: "/models/mistral.webp",
+              modelAuthor: "mistralai",
+              modelName: "Mistral-7B-v0.1",
+              externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+            },
+            {
+              icon: "/models/mistral.webp",
+              modelAuthor: "mistralai",
+              modelName: "Mistral-7B-v0.1",
+              externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+            },
+            {
+              icon: "/models/mistral.webp",
+              modelAuthor: "mistralai",
+              modelName: "Mistral-7B-v0.1",
+              externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+            },
+            {
+              icon: "/models/mistral.webp",
+              modelAuthor: "mistralai",
+              modelName: "Mistral-7B-v0.1",
+              externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+            },
+            {
+              icon: "/models/mistral.webp",
+              modelAuthor: "mistralai",
+              modelName: "Mistral-7B-v0.1",
+              externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+            },
+            {
+              icon: "/models/mistral.webp",
+              modelAuthor: "mistralai",
+              modelName: "Mistral-7B-v0.1",
+              externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+            },
+            {
+              icon: "/models/mistral.webp",
+              modelAuthor: "mistralai",
+              modelName: "Mistral-7B-v0.1",
+              externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+            },
+            {
+              icon: "/models/mistral.webp",
+              modelAuthor: "mistralai",
+              modelName: "Mistral-7B-v0.1",
+              externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+            },
+            {
+              icon: "/models/mistral.webp",
+              modelAuthor: "mistralai",
+              modelName: "Mistral-7B-v0.1",
+              externalLink: "https://huggingface.co/mistralai/Mistral-7B-v0.1",
+            },
+          ]}
+        />
+        <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>
   );
 }
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,43 +1,34 @@
-import Image from "next/image";
-
 const Footer = () => {
   return (
     <footer>
       <div className="container m-auto">
+        <p className="credit">
+          Data sourced from{" "}
+          <a href="https://huggingface.co/" target="_blank">
+            HuggingFace
+          </a>
+        </p>
         <nav>
           <ul>
-            <li className="with-icon">
+            <li>
               <a
-                href="https://github.com/octoml/octoai-apps/tree/main/examples/smartflakes/nextjs"
+                href="https://octo.ai/?utm_source=llmtimecapsule"
                 target="_blank"
               >
-                <Image
-                  src="/icons/github.svg"
-                  alt="Github Icon"
-                  width="18"
-                  height="18"
-                />
-                View on Github
-              </a>
-            </li>
-          </ul>
-          <ul>
-            <li>
-              <a href="https://octo.ai/?utm_source=smartflakes" target="_blank">
                 Powered by OctoAI
               </a>
             </li>
             <li>
               <a
-                href="https://octo.ai/legals/privacy-policy/?utm_source=smartflakes"
+                href="https://octo.ai/legals/privacy-policy/?utm_source=llmtimecapsule"
                 target="_blank"
               >
                 Privacy Policy
               </a>
             </li>
             <li>
               <a
-                href="https://octo.ai/legals/terms-of-use/?utm_source=smartflakes"
+                href="https://octo.ai/legals/terms-of-use/?utm_source=llmtimecapsule"
                 target="_blank"
               >
                 Terms of Use

diff --git a/src/styles/components/card-grid.css b/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;
+    @apply text-lg text-center mb-8 sm:text-[2.75rem] sm:mb-11 transition-font-size  md:mb-12 mt-2;
 
     br {
       @apply xs:hidden;

diff --git a/src/styles/components/footer.css b/src/styles/components/footer.css
@@ -3,6 +3,12 @@ footer {
   .container {
     @apply m-auto;
   }
+  .credit {
+    @apply mb-4;
+    a {
+      @apply text-gray-600 hover:underline dark:text-gray-400;
+    }
+  }
   nav,
   nav ul {
     @apply flex flex-col;

diff --git a/src/styles/components/switchback.css b/src/styles/components/switchback.css
@@ -1,5 +1,5 @@
 .switchback {
-  @apply flex flex-col gap-3 mt-8 m-auto max-w-lg md:flex-row md:gap-6 md:max-w-screen-lg md:px-6;
+  @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;
   }

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -68,7 +68,10 @@ main.container {
     }
   }
   &.wide {
-    @apply max-w-[1328px] px-8 xl:px-16;
+    @apply max-w-[1328px] px-8 xl:px-16 flex-grow;
+  }
+  .page-content {
+    @apply my-auto;
   }
 }