update FE to design version v1.2

app/about/page.tsx

@@ -25,7 +25,7 @@ const PrincipleContent = ({
           alt="principle image"
         />
       </div>
-      <span className="flex flex-col gap-4 break-words font-sans text-lg leading-7">
+      <span className="flex flex-col gap-4 break-words font-sans text-lg font-normal leading-[150%]">
         {children}
       </span>
     </div>
@@ -38,7 +38,7 @@ export default function AboutPage() {
         <div className="container 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">
-              Collective experimentation of cryptography.
+              About our team
             </h6>
             <span className="font-sans text-base font-normal leading-[27px] text-tuatara-950">
               PSE is a multi-disciplinary research and development lab supported
@@ -47,19 +47,19 @@ export default function AboutPage() {
               real world applications.
             </span>
           </div>
-          <div className="mx-auto">
-            <Image
-              width={300}
-              height={300}
-              src="/logos/pse-logo-bg.svg"
-              alt="pse logo"
-            />
-          </div>
         </div>
       </div>
 
       <div className="flex flex-col gap-4 px-8 py-16 md:px-32 md:py-24">
-        <h6 className="font-display text-4xl uppercase">Pse principles</h6>
+        <div className="mx-auto pb-4">
+          <Image
+            width={280}
+            height={280}
+            src="/logos/pse-logo-bg.svg"
+            alt="pse logo"
+          />
+        </div>
+        <h6 className="font-display text-4xl">Our principles</h6>
         <Accordion
           type="multiple"
           items={[

app/not-found.tsx

@@ -24,19 +24,16 @@ export default function NotFound() {
               <div className="flex flex-col items-center justify-center gap-3 text-center">
                 <div className="flex flex-col gap-2">
                   <Image
-                    width={80}
-                    height={80}
+                    width={176}
+                    height={256}
                     src="/icons/404-search.svg"
                     alt="emotion sad"
-                    className="mx-auto h-12 w-12 text-anakiwa-400 md:h-24 md:w-24"
+                    className="mx-auto h-12 w-12 text-anakiwa-400 md:h-64 md:w-44"
                   />
-                  <span className="font-display text-5xl font-bold text-anakiwa-400 md:text-8xl">
-                    404
-                  </span>
                 </div>
                 <div className="flex flex-col gap-5">
                   <span className="font-display text-2xl font-bold text-tuatara-950 md:text-6xl">
-                    Oops! Page not found
+                    404: Page not found.
                   </span>
                   <span className="font-sans text-base font-normal md:text-lg">
                     The page you are looking for might have been removed, had

app/projects/[id]/page.tsx

@@ -97,72 +97,81 @@ export default function ProjectDetailPage({ params }: PageProps) {
   )[0]
 
   const { github, twitter, website } = currProject.links ?? {}
+  const hasSocialLinks = Object.keys(currProject?.links ?? {}).length > 0
 
   return (
     <section className="flex flex-col items-center">
-      <div className="mx-auto flex h-auto w-full justify-center bg-second-gradient md:h-[272px]">
-        <div className="flex flex-col gap-3 p-6 md:w-[700px]">
-          <div className="flex gap-2 text-sm">
-            <Link
-              href="/projects"
-              className="font-medium transition duration-100 hover:text-orange"
-            >
-              Project Library
-            </Link>
-            <p className="text-slate-500">/</p>
-            <p className="text-slate-500">{currProject.name}</p>
-          </div>
-          <p className="p-2"></p>
-          <h1 className="text-3xl font-bold md:text-4xl">{currProject.name}</h1>
-          <div className="flex flex-wrap items-center justify-start gap-5">
-            {github && (
-              <Link href={github} target="_blank" rel="noreferrer">
-                <div className="flex items-center gap-2">
-                  <Image src={GithubVector} alt="" width={16} height={16} />
-                  <p className="text-slate-600">Github</p>
-                </div>
-              </Link>
-            )}
-            {website && (
-              <Link href={website} target="_blank" rel="noreferrer">
-                <div className="flex items-center gap-2">
-                  <Image src={GlobalVector} alt="" width={16} height={16} />
-                  <p className="text-slate-600">Website</p>
-                </div>
-              </Link>
-            )}
-            {twitter && (
-              <Link href={twitter} target="_blank" rel="noreferrer">
-                <div className="flex items-center gap-2">
-                  <Image src={TwitterVector} alt="" width={16} height={16} />
-                  <p className="text-slate-600">Twitter</p>
-                </div>
+      <div className="flex w-full flex-col items-center justify-center gap-5 bg-anakiwa-100 px-6 py-16 md:px-0">
+        <div className=" w-full md:w-[700px]">
+          <div className="flex flex-col">
+            <div className="flex flex-col gap-6 text-left">
+              <Link
+                className="flex items-center gap-2 text-tuatara-950/80 hover:text-tuatara-950"
+                href="/projects"
+              >
+                <Icons.arrowLeft />
+                <span className="font-sans text-base">Project library</span>
               </Link>
+              <div className="flex flex-col gap-2">
+                <h1 className="py-2 text-3xl font-bold leading-[110%] md:text-5xl">
+                  {currProject.name}
+                </h1>
+                <p className="py-2 leading-[150%] text-slate-600">
+                  {currProject.tldr}
+                </p>
+              </div>
+            </div>
+            {hasSocialLinks && (
+              <div className="flex flex-wrap items-center justify-start gap-6 pt-4">
+                {github && (
+                  <Link href={github} target="_blank" rel="noreferrer">
+                    <div className="flex items-center gap-2">
+                      <Image src={GithubVector} alt="" width={16} height={16} />
+                      <p className="text-slate-600">Github</p>
+                    </div>
+                  </Link>
+                )}
+                {website && (
+                  <Link href={website} target="_blank" rel="noreferrer">
+                    <div className="flex items-center gap-2">
+                      <Image src={GlobalVector} alt="" width={16} height={16} />
+                      <p className="text-slate-600">Website</p>
+                    </div>
+                  </Link>
+                )}
+                {twitter && (
+                  <Link href={twitter} target="_blank" rel="noreferrer">
+                    <div className="flex items-center gap-2">
+                      <Image
+                        src={TwitterVector}
+                        alt=""
+                        width={16}
+                        height={16}
+                      />
+                      <p className="text-slate-600">Twitter</p>
+                    </div>
+                  </Link>
+                )}
+              </div>
             )}
           </div>
-          <p className="text-slate-600">{currProject.tldr}</p>
-        </div>
-      </div>
-      <div className="flex w-full flex-col items-center justify-center gap-5 bg-anakiwa-100 px-6 py-10 md:px-0">
-        <div className="w-full md:w-[700px]">
-          <div className="relative flex items-center justify-center overflow-hidden rounded-lg">
-            <Image
-              src={`/project-banners/${
-                currProject.image ? currProject.image : "fallback.webp"
-              }`}
-              alt={`${currProject.name} banner`}
-              width={1200}
-              height={630}
-              className="w-full rounded-t-lg object-cover"
-            />
-          </div>
-          <div className="mt-8">
+
+          <div className="mt-[50px] flex w-full flex-col gap-6 md:w-[700px]">
+            <div className="relative flex items-center justify-center overflow-hidden rounded-lg">
+              <Image
+                src={`/project-banners/${
+                  currProject.image ? currProject.image : "fallback.webp"
+                }`}
+                alt={`${currProject.name} banner`}
+                width={1200}
+                height={630}
+                className="w-full rounded-t-lg object-cover"
+              />
+            </div>
             <ProjectTags project={currProject} />
-          </div>
-          <div className="flex w-full flex-col gap-5 pt-10 text-base font-normal leading-relaxed">
-            <Markdown>{currProject.description}</Markdown>
-          </div>
-          <div className="py-16">
+            <div className="flex w-full flex-col gap-5 text-base font-normal leading-relaxed">
+              <Markdown>{currProject.description}</Markdown>
+            </div>
             <ProjectExtraLinks project={currProject} />
           </div>
         </div>

components/project/project-detail-tags.tsx

@@ -29,7 +29,7 @@ export function ProjectTags({ project }: { project: ProjectInterface }) {
   const { label, icon } = ThemesStatusMapping?.[project?.projectStatus] ?? {}
 
   return (
-    <div className="mt-8 flex flex-col gap-4">
+    <div className="flex flex-col gap-4">
       {Object.entries(FilterLabelMapping).map(([key, label]) => {
         const keyTags = project?.tags?.[key as ProjectFilter]
         const hasItems = keyTags && keyTags?.length > 0

components/project/project-extra-links.tsx

@@ -80,7 +80,7 @@ export default function ProjectExtraLinks({ project }: ProjectExtraLinksProps) {
   if (!hasExtraLinks) return null
 
   return (
-    <div className="flex flex-col gap-12 md:gap-16">
+    <div className="flex flex-col gap-8 py-4">
       {Object.entries(ExtraLinkLabelMapping).map(([key]) => {
         const links = extraLinks[key as ProjectExtraLinkType] ?? []
         return (

components/site-footer.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image"
 import Link from "next/link"
-import PSELogo from "@/public/logos/footer-logo.svg"
+import PSELogo from "@/public/logos/pse-logo-circle.svg"
 
 import { siteConfig } from "@/config/site"
 import {
@@ -12,84 +12,111 @@ import {
 
 import { ArrowRightUp } from "./svgs/arrows"
 
+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">
+      {label}
+    </span>
+  )
+}
 export function SiteFooter() {
   return (
-    <footer className="flex flex-col gap-5">
-      <div className="flex w-full flex-col gap-5 p-[32px]">
-        <Image src={PSELogo} alt="logo" width={94} height={41} />
-        <h1 className="text-sm">
-          Privacy + Scaling Explorations is a multidisciplinary team supported
-          by the Ethereum Foundation.
-        </h1>
+    <footer className="flex flex-col">
+      <div className="flex flex-col divide-y divide-tuatara-200 px-8">
+        <div className="flex w-full flex-col items-center gap-5 py-8">
+          <Image src={PSELogo} alt="logo" width={133} height={133} />
+          <h1 className="py-2 text-center font-sans text-sm font-normal text-tuatara-950">
+            Privacy + Scaling Explorations is a multidisciplinary team supported
+            by the Ethereum Foundation.
+          </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={"/"} className="link px-[10px]">
+            HOME
+          </Link>
+          <Link href={"/projects"} className="link px-[10px]">
+            PROJECT LIBRARY
+          </Link>
+          <Link href={"/about"} className="link px-[10px]">
+            ABOUT
+          </Link>
+          <Link href={"/resources"} className="link px-[10px]">
+            RESOURCES
+          </Link>
+          <Link
+            href={siteConfig.links.jobs}
+            target="_blank"
+            rel="noreferrer"
+            className="link flex items-center gap-5 px-[10px]"
+          >
+            JOBS
+            <ArrowRightUp color="black" />
+          </Link>
+        </div>
       </div>
-      <div className="flex w-full flex-col gap-5 px-[32px] text-base font-medium">
-        <Link href={"/"} className="border-b-2 border-[#171C1B] py-5">
-          HOME
-        </Link>
-        <Link href={"/projects"} className="border-b-2 border-[#171C1B] py-5">
-          PROJECT LIBRARY
-        </Link>
-        <Link href={"/about"} className="border-b-2 border-[#171C1B] py-5">
-          ABOUT
-        </Link>
-        <Link href={"/resources"} className="border-b-2 border-[#171C1B] py-5">
-          RESOURCES
-        </Link>
-        <Link
-          href={siteConfig.links.jobs}
-          target="_blank"
-          rel="noreferrer"
-          className="flex items-center gap-5 py-5"
-        >
-          JOBS
-          <ArrowRightUp color="black" />
-        </Link>
-      </div>
-      <div className="flex w-full flex-col items-center justify-center gap-5 bg-[#171C1B] py-[40px] text-sm">
+      <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>
 
           <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} target="_blank" rel="noreferrer">
+          <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 text-white">
+        <div className="flex gap-5 py-2 text-white">
           <Link
             href={siteConfig.links.privacyPolicy}
             target="_blank"
             rel="noreferrer"
           >
-            <h1>Privacy Policy</h1>
+            <span className="font-sans font-normal leading-[21px]">
+              Privacy Policy
+            </span>
           </Link>
           <Link
             href={siteConfig.links.termOfUse}
             target="_blank"
             rel="noreferrer"
           >
-            <h1>Terms of use</h1>
+            <span className="font-sans font-normal leading-[21px]">
+              Terms of use
+            </span>
           </Link>
         </div>
-        <h1 className="text-gray-400">Last updated June 8, 2023</h1>
+        <span className="py-2 font-sans font-normal text-white opacity-50 ">
+          Last updated June 8, 2023
+        </span>
       </div>
     </footer>
   )

styles/globals.css

@@ -6,33 +6,33 @@
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 47.4% 11.2%;
-    
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
-    
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 47.4% 11.2%;
-    
+
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    
+
     --card: 0 0% 100%;
     --card-foreground: 222.2 47.4% 11.2%;
-    
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
-    
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
 
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
-    
+
     --destructive: 0 100% 50%;
     --destructive-foreground: 210 40% 98%;
-    
+
     --ring: 215 20.2% 65.1%;
-    
+
     --radius: 0.5rem;
     --anakiwa: 196 73% 97%
   }
@@ -100,19 +100,24 @@
  */
 @layer base {
   table[data-component="table"] {
-    @apply overflow-hidden rounded-lg table-auto bg-anakiwa-100; 
+    @apply overflow-hidden rounded-lg table-auto bg-anakiwa-100;
   }
 
-  table[data-component="table"] thead > tr > th { 
+  table[data-component="table"] thead > tr > th {
     @apply px-4 py-1 text-sm font-medium text-left text-anakiwa-500;
     @apply border-b border-b-white;
   }
 
-  table[data-component="table"] tbody > tr > td { 
+  table[data-component="table"] tbody > tr > td {
     @apply px-4 py-1 text-xs font-medium text-left text-tuatara-700;
   }
 
-  table[data-component="table"] tbody > tr:not(:last-child) { 
+  table[data-component="table"] tbody > tr:not(:last-child) {
     @apply border-b border-b-white;
   }
 }
+
+
+.link {
+  @apply border-b-2 border-transparent duration-200 ease-in-out hover:border-orange;
+}