add new footer

app/[lang]/about/page.tsx

@@ -68,7 +68,7 @@ export default async function AboutPage({ params: { lang } }: any) {
         <AppContent>
           <div className="mx-auto grid grid-cols-1 gap-16 py-10 lg:grid-cols-[1fr_300px] lg:gap-2 lg:py-20">
             <div className="flex flex-col gap-8 lg:w-4/5">
-              <h6 className="break-words font-display text-4xl font-bold text-tuatara-950 md:py-4 md:text-5xl">
+              <h6 className="break-words font-display text-4xl font-bold text-tuatara-950 md:text-5xl">
                 {t("title")}
               </h6>
               <span className="font-sans text-base font-normal leading-[27px] text-tuatara-950">

app/[lang]/page.tsx

@@ -36,10 +36,7 @@ export default function IndexPage() {
           <h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[20px]">
             {t("headerSubtitle")}
           </h6>
-          <Link
-            href={`/${lang}/projects`}
-            className="group flex items-center gap-2"
-          >
+          <Link href={`/projects`} className="group flex items-center gap-2">
             <Button className="w-full sm:w-auto">
               <div className="flex items-center gap-1">
                 <span className="text-base font-medium uppercase">

components/icons.tsx

@@ -13,7 +13,21 @@ export type Icon = LucideIcon
 export const Icons = {
   sun: SunMedium,
   moon: Moon,
-  twitter: Twitter,
+  twitter: (props: LucideProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M16.6587 4.18939C16.1179 4.42859 15.5444 4.58568 14.9572 4.65547C15.5762 4.28532 16.0394 3.70277 16.2606 3.01639C15.6797 3.36205 15.043 3.6043 14.3792 3.73535C13.9334 3.25834 13.3425 2.94199 12.6983 2.83547C12.0542 2.72895 11.3929 2.83823 10.8172 3.14633C10.2416 3.45443 9.78385 3.94408 9.5152 4.53916C9.24655 5.13423 9.18202 5.8014 9.33166 6.43693C8.15378 6.37789 7.00148 6.0718 5.94957 5.53852C4.89767 5.00525 3.96967 4.25671 3.22583 3.34151C2.96253 3.79375 2.82417 4.30784 2.82491 4.83114C2.82491 5.85822 3.34766 6.7656 4.14241 7.29685C3.67208 7.28204 3.21211 7.15502 2.80083 6.92639V6.96322C2.80097 7.64726 3.03767 8.3102 3.4708 8.83964C3.90393 9.36908 4.50684 9.73243 5.17729 9.8681C4.74068 9.98641 4.28288 10.0039 3.83854 9.9191C4.02757 10.5079 4.396 11.0228 4.89225 11.3918C5.38849 11.7608 5.98771 11.9653 6.60599 11.9768C5.9915 12.4594 5.28791 12.8162 4.53545 13.0267C3.78299 13.2372 2.99642 13.2973 2.2207 13.2036C3.57482 14.0745 5.15115 14.5368 6.76112 14.5353C12.2103 14.5353 15.1903 10.0211 15.1903 6.10614C15.1903 5.97864 15.1867 5.84972 15.1811 5.72364C15.7611 5.30442 16.2617 4.78511 16.6594 4.1901L16.6587 4.18939Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   close: X,
   check: Check,
   logo: (props: LucideProps) => (
@@ -376,4 +390,48 @@ export const Icons = {
       />
     </svg>
   ),
+  jobs: (props: LucideProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        d="M8.16406 8.71436C8.16406 8.93881 7.98227 9.12061 7.75781 9.12061H5.32031C5.09586 9.12061 4.91406 8.93881 4.91406 8.71436V7.49561H0.0390625V11.1519C0.0390625 11.8019 0.607812 12.3706 1.25781 12.3706H11.8203C12.4703 12.3706 13.0391 11.8019 13.0391 11.1519V7.49561H8.16406V8.71436ZM11.8203 3.43311H9.78906V2.21436C9.78906 1.56436 9.22031 0.995605 8.57031 0.995605H4.50781C3.85781 0.995605 3.28906 1.56436 3.28906 2.21436V3.43311H1.25781C0.607812 3.43311 0.0390625 4.00186 0.0390625 4.65186V6.68311H13.0391V4.65186C13.0391 4.00186 12.4703 3.43311 11.8203 3.43311ZM8.16406 3.43311H4.91406V2.62061H8.16406V3.43311Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  mirror: (props: LucideProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="16"
+      viewBox="0 0 16 12"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        d="M0.960938 5.48092C0.960938 2.49306 3.38308 0.0709229 6.37094 0.0709229C9.3588 0.0709229 11.7809 2.49306 11.7809 5.48093V13.0215C11.7809 13.1727 11.6583 13.2954 11.5071 13.2954H1.23482C1.08356 13.2954 0.960938 13.1727 0.960938 13.0215V5.48092Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  youtube: (props: LucideProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="currentColor"
+    >
+      <path
+        d="M0.960938 9.93311V3.43311C0.960938 3.00213 1.13214 2.5888 1.43689 2.28406C1.74164 1.97931 2.15496 1.80811 2.58594 1.80811H12.3359C12.7669 1.80811 13.1802 1.97931 13.485 2.28406C13.7897 2.5888 13.9609 3.00213 13.9609 3.43311V9.93311C13.9609 10.3641 13.7897 10.7774 13.485 11.0822C13.1802 11.3869 12.7669 11.5581 12.3359 11.5581H2.58594C2.15496 11.5581 1.74164 11.3869 1.43689 11.0822C1.13214 10.7774 0.960938 10.3641 0.960938 9.93311ZM6.47781 4.32117C6.41707 4.27792 6.34559 4.25222 6.27121 4.24689C6.19683 4.24157 6.12242 4.25681 6.05613 4.29097C5.98984 4.32512 5.93423 4.37686 5.89539 4.44051C5.85655 4.50417 5.83598 4.57729 5.83594 4.65186V8.71436C5.83598 8.78893 5.85655 8.86204 5.89539 8.9257C5.93423 8.98936 5.98984 9.04109 6.05613 9.07524C6.12242 9.1094 6.19683 9.12464 6.27121 9.11932C6.34559 9.11399 6.41707 9.08829 6.47781 9.04504L9.32156 7.01379C9.37422 6.97621 9.41715 6.9266 9.44677 6.86908C9.47638 6.81156 9.49184 6.7478 9.49184 6.68311C9.49184 6.61841 9.47638 6.55465 9.44677 6.49713C9.41715 6.43961 9.37422 6.39 9.32156 6.35242L6.47781 4.32117Z"
+        fill="#currentColor"
+      />
+    </svg>
+  ),
 }

components/site-footer.tsx

@@ -5,28 +5,31 @@ import Link from "next/link"
 import PSELogo from "@/public/logos/pse-logo-circle.svg"
 
 import { LangProps } from "@/types/common"
+import { NavItem } from "@/types/nav"
 import { siteConfig } from "@/config/site"
-import {
-  Discord,
-  Github,
-  Mirror,
-  Twitter,
-} from "@/components/svgs/social-medias"
+import { useAppSettings } from "@/hooks/useAppSettings"
 import { useTranslation } from "@/app/i18n/client"
 
 import { Icons } from "./icons"
+import { AppContent } from "./ui/app-content"
 
 const SocialMedia = ({ label }: { label: string }) => {
   return (
-    <span className="mt-[0.9px] hidden font-sans text-sm font-normal uppercase leading-[21px] text-white md:block">
+    <span className="mt-[0.9px] font-sans text-sm font-normal uppercase leading-[21px] text-white md:block">
       {label}
     </span>
   )
 }
 
+const LinksWrapper = ({ children }: { children: React.ReactNode }) => {
+  return <div className="flex flex-col gap-4">{children}</div>
+}
+
 export function SiteFooter({ lang }: LangProps["params"]) {
   const { t } = useTranslation(lang, "common")
 
+  const { MAIN_NAV } = useAppSettings(lang)
+
   return (
     <footer className="flex flex-col">
       <div className="flex flex-col divide-y divide-tuatara-200 px-8">
@@ -36,98 +39,104 @@ export function SiteFooter({ lang }: LangProps["params"]) {
             {t("footer.description")}
           </h1>
         </div>
-        <div className="flex w-full flex-col items-center gap-5 py-8 text-base font-medium md:flex-row md:justify-center">
-          <Link href={`/${lang}`} className="link px-[10px] uppercase">
-            {t("menu.home")}
-          </Link>
-          <Link href={`/${lang}/projects`} className="link px-[10px] uppercase">
-            {t("menu.projectLibrary")}
-          </Link>
-          <Link href={`/${lang}/about`} className="link px-[10px] uppercase">
-            {t("menu.about")}
-          </Link>
-          <Link
-            href={`/${lang}/resources`}
-            className="link px-[10px] uppercase"
-          >
-            {t("menu.resources")}
-          </Link>
-          <Link
-            href={siteConfig.links.jobs}
-            target="_blank"
-            rel="noreferrer"
-            className="link flex items-center gap-5 px-[10px] uppercase"
-          >
-            {t("menu.jobs")}
-            <Icons.externalUrl />
-          </Link>
-        </div>
       </div>
-      <div className="flex w-full flex-col items-center justify-center gap-2 bg-[#171C1B] py-[40px] text-sm">
-        <div className="flex gap-5">
-          <Link
-            href={siteConfig.links.twitter}
-            className=" flex h-[21px] items-start gap-2"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Twitter color="white" />
-            <SocialMedia label="Twitter" />
-          </Link>
+      <div className="bg-tuatara-950 py-8 text-left text-[14px] uppercase text-white">
+        <AppContent className="grid grid-cols-1 justify-between gap-8 bg-tuatara-950 py-2 text-white md:grid-cols-4 lg:px-40">
+          <LinksWrapper>
+            {MAIN_NAV.map(({ title, href }: NavItem, indexKey) => (
+              <Link key={indexKey} href={href}>
+                {title}
+              </Link>
+            ))}
+          </LinksWrapper>
+          <LinksWrapper>
+            <Link
+              href={siteConfig.links.jobs}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-2"
+            >
+              <Icons.jobs fill="white" />
+              {t("menu.jobs")}
+              <Icons.externalUrl className="w-5" />
+            </Link>
+            <Link
+              href={siteConfig.links.discord}
+              className="flex items-start gap-2"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <Icons.discord className="w-4" />
+              <SocialMedia label="Discord" />
+              <Icons.externalUrl className="w-5" />
+            </Link>
+            <Link
+              href={siteConfig.links.github}
+              className="flex items-start gap-2"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <Icons.gitHub className="w-4" color="white" />
+              <SocialMedia label="Github" />
+              <Icons.externalUrl className="w-5" />
+            </Link>
+          </LinksWrapper>
+          <LinksWrapper>
+            <Link
+              href={siteConfig.links.twitter}
+              className="flex items-center gap-2"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div className="w-4">
+                <Icons.twitter className="w-full" color="white" />
+              </div>
+              <SocialMedia label="Twitter" />
+              <Icons.externalUrl className="w-5" />
+            </Link>
+            <Link
+              href={siteConfig.links.articles}
+              className="flex items-center gap-2"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div className="w-4">
+                <Icons.mirror className="w-full" color="white" />
+              </div>
 
-          <Link
-            href={siteConfig.links.discord}
-            className="flex h-[21px] items-start gap-2"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Discord color="white" />
-            <SocialMedia label="Discord" />
-          </Link>
-          <Link
-            href={siteConfig.links.github}
-            className="flex h-[21px] items-start gap-2"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Github color="white" />
-            <SocialMedia label="Github" />
-          </Link>
-          <Link
-            href={siteConfig.links.articles}
-            className="flex h-[21px] items-start gap-2"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Mirror color="white" />
-            <SocialMedia label="Mirror" />
-          </Link>
-        </div>
-        <div className="flex gap-5 py-2 text-white">
-          <Link
-            href={siteConfig.links.privacyPolicy}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <span className="font-sans font-normal leading-[21px]">
-              {t("footer.privacyPolicy")}
-            </span>
-          </Link>
-          <Link
-            href={siteConfig.links.termOfUse}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <span className="font-sans font-normal leading-[21px]">
-              {t("footer.termsOfUse")}
-            </span>
-          </Link>
-        </div>
-        <span className="py-2 font-sans font-normal text-white opacity-50 ">
-          {t("lastUpdatedAt", {
-            date: "January 16, 2024",
-          })}
-        </span>
+              <SocialMedia label="Mirror" />
+              <Icons.externalUrl className="w-5" />
+            </Link>
+            <Link
+              href={siteConfig.links.youtube}
+              className="flex items-center gap-2"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div className="w-4">
+                <Icons.youtube className="w-full" color="white" />
+              </div>
+              <SocialMedia label="Youtube" />
+              <Icons.externalUrl className="w-5" />
+            </Link>
+          </LinksWrapper>
+          <LinksWrapper>
+            <Link
+              href={siteConfig.links.privacyPolicy}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <span>{t("footer.privacyPolicy")}</span>
+            </Link>
+            <Link
+              href={siteConfig.links.termOfUse}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <span>{t("footer.termsOfUse")}</span>
+            </Link>
+          </LinksWrapper>
+        </AppContent>
       </div>
     </footer>
   )

components/site-header.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useAppSettings } from "@/hooks/useAppSettings"
 import { MainNav, MainNavProps } from "@/components/main-nav"
 import { useTranslation } from "@/app/i18n/client"
 import { LocaleTypes } from "@/app/i18n/settings"
@@ -13,24 +14,7 @@ type SiteHeaderProps = {
 
 export function SiteHeader({ lang }: SiteHeaderProps) {
   const { t: i18n } = useTranslation(lang, "common")
-  const MAIN_NAV: MainNavProps["items"] = [
-    {
-      title: i18n("menu.home"),
-      href: "/",
-    },
-    {
-      title: i18n("menu.projectLibrary"),
-      href: "/projects",
-    },
-    {
-      title: i18n("menu.about"),
-      href: "/about",
-    },
-    {
-      title: i18n("menu.resources"),
-      href: "/resources",
-    },
-  ]
+  const { MAIN_NAV } = useAppSettings(lang)
 
   return (
     <header className="sticky top-0 z-40 w-full bg-white px-6 shadow-sm xl:px-20">

config/site.ts

@@ -10,6 +10,7 @@ export const siteConfig = {
     docs: "https://ui.shadcn.com",
     discord: "https://discord.com/invite/sF5CT5rzrR",
     articles: "https://mirror.xyz/privacy-scaling-explorations.eth",
+    youtube: "https://www.youtube.com/@privacyscalingexplorations",
     jobs: "https://jobs.lever.co/ethereumfoundation/?department=Ethereum%20Foundation&team=Privacy%20and%20Scaling%20Explorations",
     termOfUse: "https://ethereum.org/en/terms-of-use/",
     privacyPolicy: "https://ethereum.org/en/privacy-policy/",

hooks/useAppSettings.ts

@@ -0,0 +1,29 @@
+import { MainNavProps } from "@/components/main-nav"
+import { useTranslation } from "@/app/i18n/client"
+import { LocaleTypes } from "@/app/i18n/settings"
+
+export function useAppSettings(lang: LocaleTypes) {
+  const { t } = useTranslation(lang, "common")
+  const MAIN_NAV: MainNavProps["items"] = [
+    {
+      title: t("menu.home"),
+      href: "/",
+    },
+    {
+      title: t("menu.projectLibrary"),
+      href: "/projects",
+    },
+    {
+      title: t("menu.about"),
+      href: "/about",
+    },
+    {
+      title: t("menu.resources"),
+      href: "/resources",
+    },
+  ]
+
+  return {
+    MAIN_NAV,
+  }
+}