chore: updated footer (#578)

tailcallhq · Dec 24, 2024 · 6e2bac6 · 6e2bac6
1 parent 4a2334b
commit 6e2bac6
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 52 deletions.
diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
@@ -1,43 +1,48 @@
 import React from "react"
 import Link from "@docusaurus/Link"
-import {footerLinks, socials} from "@site/src/constants"
+import {footerItems, socials} from "@site/src/constants"
 import TailcallLogo from "@site/static/icons/companies/tailcall-white.svg"
 import {useCookieConsentManager} from "./CookieConsentProvider"
 
 const Footer = (): JSX.Element => {
   const {openCookieConsentModal} = useCookieConsentManager()
   const year = new Date().getFullYear()
   return (
-    <footer
-      className="bg-tailCall-dark-700 grid-dark pt-SPACE_16 pb-SPACE_05 flex flex-col items-center 
-      justify-center gap-SPACE_10 w-full relative px-SPACE_04"
-    >
-      <TailcallLogo className="w-[120px] h-10 z-10" />
-      <div className="text-content-tiny sm:text-title-small space-x-SPACE_06 text-tailCall-light-500 z-10">
-        {footerLinks.map((footerLink: FooterLink, index: number) => {
+    <footer className="flex flex-col relative w-full relative px-4 py-8 lg:px-40 lg:pt-20 lg:pb-0 bg-tailCall-dark-700 grid-dark gap-4 lg:gap-8">
+      <div className="grid grid-cols-2 gap-8 lg:flex lg:gap-32 xl:gap-64 w-full z-10">
+        <TailcallLogo className="w-[120px] h-10 col-span-2" />
+        {footerItems.map((category: FooterItem, idx: number) => {
           return (
-            <Link
-              key={index}
-              href={footerLink.link}
-              className="text-tailCall-light-500 hover:text-tailCall-light-300 hover:no-underline"
-            >
-              {footerLink.name}
-            </Link>
+            <div className="flex flex-col gap-4 lg:gap-6" key={idx}>
+              <span className="text-content-small font-bold lg:text-title-small text-white leading-[20px] lg:leading-[26px]">
+                {category.title}
+              </span>
+              {category.items.map((footerItem: FooterLink, index: number) => {
+                return (
+                  <Link
+                    key={index}
+                    href={footerItem.link}
+                    className="text-content-small lg:text-content-medium text-tailCall-light-500 hover:text-tailCall-light-300 hover:no-underline leading-[20px] lg:leading-[26px]"
+                  >
+                    {footerItem.name}
+                  </Link>
+                )
+              })}
+            </div>
           )
         })}
       </div>
-
-      <div className="flex flex-col sm:flex-row items-center gap-y-SPACE_04 sm:justify-between w-[100%] max-w-7xl sm:mt-SPACE_10 z-10">
+      <div className="flex flex-col lg:flex-row items-center lg:justify-between w-[100%] lg:w-full z-10 py-2 lg:py-6 gap-2 lg:gap-0">
         <p
-          className="text-content-tiny text-tailCall-light-700 font-space-mono font-normal cursor-pointer mb-0 sm:mb-5 order-2 sm:order-1"
+          className="text-content-mini lg:text-content-tiny text-tailCall-light-700 font-space-mono font-normal cursor-pointer mb-0"
           onClick={openCookieConsentModal}
         >
           Cookie Settings
         </p>
-        <p className="text-content-tiny text-tailCall-light-700 font-space-mono font-normal mb-0 sm:mb-5 order-3 sm:order-2">
+        <p className="text-content-mini lg:text-content-tiny text-tailCall-light-700 font-space-mono font-normal mb-0">
           Copyright © {year} Tailcall, Inc.
         </p>
-        <div className="space-x-SPACE_04 order-1 sm:order-3">
+        <div className="space-x-SPACE_04">
           {socials.map((social) => (
             <Link href={social.href} className="cursor-pointer" key={social.id}>
               <social.image className="h-6 w-6" />

diff --git a/src/constants/index.tsx b/src/constants/index.tsx
@@ -621,21 +621,36 @@ export const reb2bScriptContent = `
 export const gtagScriptContent = `
 function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-JEP3QDWT0G",{})
 `
-export const footerLinks: FooterLink[] = [
-  {
-    name: "Documentation",
-    link: pageLinks.docs,
-  },
-  {
-    name: "Blog",
-    link: tailCallBlogUrl,
-  },
+
+export const footerItems: FooterItem[] = [
   {
-    name: "Contributors",
-    link: pageLinks.contributors,
+    title: "Developers",
+    items: [
+      {
+        name: "Docs",
+        link: pageLinks.docs,
+      },
+      {
+        name: "Releases",
+        link: pageLinks.releases,
+      },
+      {
+        name: "Learn",
+        link: pageLinks.introduction,
+      },
+    ],
   },
   {
-    name: "Privacy Policy",
-    link: pageLinks.privacyPolicy,
+    title: "Company",
+    items: [
+      {
+        name: "Blogs",
+        link: pageLinks.blog,
+      },
+      {
+        name: "Privacy Policy",
+        link: pageLinks.privacyPolicy,
+      },
+    ],
   },
 ]
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
@@ -8,4 +8,7 @@ export const pageLinks = {
   contributors: "/docs/contribution-guidelines",
   privacyPolicy: "/privacy/",
   // enterprise: "/enterprise",
+  releases: "/releases",
+  blog: "/blog",
+  about: "/about",
 }
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -157,3 +157,8 @@ type FooterLink = {
   name: string
   link: string
 }
+
+type FooterItem = {
+  title: string
+  items: FooterLink[]
+}