Finished the first release for the website

app/layout.tsx

@@ -4,6 +4,7 @@ import { Metadata } from "next"
 import { siteConfig } from "@/config/site"
 import { fontDisplay, fontSans } from "@/lib/fonts"
 import { cn } from "@/lib/utils"
+import { SiteFooter } from "@/components/site-footer"
 import { SiteHeader } from "@/components/site-header"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
 import { ThemeProvider } from "@/components/theme-provider"
@@ -45,6 +46,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
             <div className="relative flex min-h-screen flex-col">
               <SiteHeader />
               <div className="flex-1">{children}</div>
+              <SiteFooter />
             </div>
             <TailwindIndicator />
           </ThemeProvider>

app/page.tsx

@@ -1,38 +1,284 @@
-import Link from "next/link"
+import NextImage from "next/image"
+import NextLink from "next/link"
+import ArrowUpVector from "@/public/arrow-vector.png"
+import ArrowRightVector from "@/public/arrowright-vector.png"
+import PSELogoCircle from "@/public/pse-logo-circle.png"
+import PSEIcon1 from "@/public/pseicon-1.png"
+import PSEIcon2 from "@/public/pseicon-2.png"
+import PSEIcon3 from "@/public/pseicon-3.png"
+import PSELogo from "@/public/pselogo-homepage.png"
 
 import { siteConfig } from "@/config/site"
-import { buttonVariants } from "@/components/ui/button"
 
 export default function IndexPage() {
   return (
-    <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
-      <div className="flex max-w-[980px] flex-col items-start gap-2">
-        <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
-          Our new website <br className="hidden sm:inline" />
-          built with Radix UI and Tailwind CSS.
-        </h1>
-        <p className="max-w-[700px] text-lg text-muted-foreground">
-          Accessible and customizable components that you can copy and paste
-          into your apps. Free. Open Source. And Next.js 13 Ready.
-        </p>
+    <section className="flex flex-col">
+      <div className="flex w-full flex-col gap-5 bg-[#D0F2FF] px-[32px] py-5 md:flex-row md:px-20">
+        <div className="flex w-full flex-col justify-center gap-5">
+          <h1 className="text-xl uppercase text-[#E3533A]">
+            Privacy + Scaling Explorations
+          </h1>
+          <h1 className="text-4xl font-[700] md:text-7xl">
+            Programmable cryptography for people like you
+          </h1>
+          <NextLink href={"/projects"} className="flex items-center gap-2">
+            <h1 className="border-b-2 border-[#E3533A] text-base uppercase">
+              Explore The Project Library
+            </h1>
+            <NextImage
+              src={ArrowRightVector}
+              alt="arrowvector"
+              height={16}
+              width={16}
+            />
+          </NextLink>
+        </div>
+        <div className="m-auto flex h-[364px] w-[280px] items-center justify-center md:h-full md:w-full">
+          <NextImage
+            src={PSELogo}
+            alt="pselogo"
+            style={{ objectFit: "fill" }}
+          />
+        </div>
       </div>
-      <div className="flex gap-4">
-        <Link
-          href={siteConfig.links.docs}
-          target="_blank"
-          rel="noreferrer"
-          className={buttonVariants()}
+
+      <div className="flex flex-col">
+        <div className="flex flex-col justify-between gap-5 border border-black px-[32px] py-5 md:flex-row md:gap-0 lg:px-20">
+          <div className="flex flex-col items-start justify-center gap-2 lg:flex-row lg:items-center">
+            <div className="flex w-[280px] items-center justify-start gap-2">
+              <NextImage src={PSEIcon1} alt="pseicon1" height={16} width={16} />
+              <h1 className="text-base font-[700] uppercase tracking-[5px] text-[#E3533A]">
+                Learn and Share
+              </h1>
+            </div>
+            <h1 className="text-xl font-[500]">
+              Sangria: a Folding Scheme for PLONK
+            </h1>
+          </div>
+          <NextLink
+            href={"https://www.youtube.com/watch?v=MounVPj6tjg"}
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center justify-start gap-5 md:justify-center"
+          >
+            <h1 className="border-b-2 border-[#E3533A] text-base font-[500] uppercase">
+              Watch
+            </h1>
+            <NextImage
+              src={ArrowUpVector}
+              alt="arrowup"
+              height={12}
+              width={12}
+            />
+          </NextLink>
+        </div>
+        <div className="flex flex-col justify-between gap-5 border-x border-b border-black px-[32px] py-5  md:flex-row md:gap-0 lg:px-20">
+          <div className="flex flex-col items-start justify-center gap-2 lg:flex-row lg:items-center">
+            <div className="flex w-[280px] items-center justify-start gap-2">
+              <NextImage src={PSEIcon1} alt="pseicon1" height={16} width={16} />
+              <h1 className="text-base font-[700] uppercase tracking-[5px] text-[#E3533A]">
+                Learn and Share
+              </h1>
+            </div>
+            <h1 className="text-xl font-[500]">
+              Folding Circom Circuit: A ZKML Case Study - Dr. Cathie So
+            </h1>
+          </div>
+          <NextLink
+            href={
+              "https://discord.com/invite/kuUkQNtS?event=1113461922847789176"
+            }
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center justify-start gap-5 md:justify-center"
+          >
+            <h1 className="border-b-2 border-[#E3533A] text-base font-[500] uppercase">
+              Atttend
+            </h1>
+            <NextImage
+              src={ArrowUpVector}
+              alt="arrowup"
+              height={12}
+              width={12}
+            />
+          </NextLink>
+        </div>
+        <div
+          className="flex flex-col justify-between gap-5
+border-x border-b border-black px-[32px] py-5 md:flex-row md:gap-0 lg:px-20"
         >
-          Documentation
-        </Link>
-        <Link
-          target="_blank"
-          rel="noreferrer"
-          href={siteConfig.links.github}
-          className={buttonVariants({ variant: "outline" })}
+          <div className="flex flex-col items-start justify-center gap-2 lg:flex-row lg:items-center">
+            <div className="flex w-[280px] items-center justify-start gap-2">
+              <NextImage src={PSEIcon2} alt="pseicon1" height={16} width={10} />
+              <h1 className="text-base font-[700] uppercase tracking-[5px] text-[#E3533A]">
+                Event
+              </h1>
+            </div>
+            <h1 className="text-xl font-[500]">PSE @ETHCC</h1>
+          </div>
+          <NextLink
+            href={"https://www.ethcc.io/"}
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center justify-start gap-5 md:justify-center"
+          >
+            <h1 className="border-b-2 border-[#E3533A] text-base font-[500] uppercase">
+              Attend
+            </h1>
+            <NextImage
+              src={ArrowUpVector}
+              alt="arrowup"
+              height={12}
+              width={12}
+            />
+          </NextLink>
+        </div>
+        <div
+          className="flex flex-col justify-between gap-5
+border-x border-b border-black px-[32px] py-5 md:flex-row md:gap-0 lg:px-20"
         >
-          GitHub
-        </Link>
+          <div className="flex flex-col items-start justify-center gap-2 lg:flex-row lg:items-center">
+            <div className="flex w-[280px] items-center justify-start gap-2">
+              <NextImage src={PSEIcon3} alt="pseicon1" height={16} width={16} />
+              <h1 className="text-base font-[700] uppercase tracking-[5px] text-[#E3533A]">
+                Blog Post
+              </h1>
+            </div>
+            <h1 className="text-xl font-[500]">
+              zkEVM Community Edition Part 3: Logic and Structure
+            </h1>
+          </div>
+          <NextLink
+            href={
+              "https://mirror.xyz/privacy-scaling-explorations.eth/shl8eMBiObd6_AUBikXZrjKD4fibI6xUZd7d9Yv5ezE"
+            }
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center justify-start gap-5 md:justify-center"
+          >
+            <h1 className="border-b-2 border-[#E3533A] text-base font-[500] uppercase">
+              read
+            </h1>
+            <NextImage
+              src={ArrowUpVector}
+              alt="arrowup"
+              height={12}
+              width={12}
+            />
+          </NextLink>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-40 bg-radial-gradient px-[32px] py-40 lg:px-20">
+        <div className="flex flex-col gap-10 text-center lg:flex-row">
+          <div className="flex w-full items-start justify-start lg:w-[500px] lg:justify-center">
+            <h1 className="text-xl font-[700] uppercase text-[#E3533A]">
+              Who We Are
+            </h1>
+          </div>
+          <div className="flex  w-full text-start lg:w-[600px]">
+            <h1 className="text-3xl font-[700] text-black">
+              PSE is a research lab building free tools that expand the world of
+              cryptography.
+            </h1>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-10 text-center lg:flex-row">
+          <div className="flex w-full items-start justify-start lg:w-[500px] lg:justify-center">
+            <h1 className="text-xl font-[700] uppercase text-[#E3533A]">
+              What We Do
+            </h1>
+          </div>
+          <div className="flex w-full items-start md:hidden lg:hidden">
+            <NextImage
+              src={PSELogoCircle}
+              alt="pselogocircle"
+              style={{ objectFit: "contain" }}
+              width={252}
+              height={252}
+            />
+          </div>
+          <div className="flex w-full flex-row gap-10 lg:w-[420px]">
+            <div className="flex flex-col gap-[200px] text-start">
+              <div className="flex flex-col">
+                <h1 className="text-xl font-[700] text-black">Privacy</h1>
+                <p className="text-lg">
+                  We believe privacy is a social good that should be accessible
+                  to everyone. That’s why we’re creating open source tools that
+                  help people choose what, how, when, and where they share.
+                </p>
+              </div>
+              <div className="flex flex-col">
+                <h1 className="text-xl font-[700] text-black">Scaling</h1>
+                <p className="text-lg">
+                  Our infrastructure helps communities grow by making Ethereum
+                  more efficient and accessible. From account abstraction and
+                  reducing transaction costs, to rollups and zkEVM, we are
+                  building towards an interoperable future.
+                </p>
+              </div>
+              <div className="flex flex-col">
+                <h1 className="text-xl font-[700] text-black">Explorations</h1>
+                <p className="text-lg">
+                  We are mapping the emerging zero knowledge ecosystem through
+                  collective experimentation. We collaborate, share what we
+                  learn, and welcome contributions from around the world.
+                </p>
+              </div>
+            </div>
+            <div className="hidden w-full items-start md:flex lg:hidden">
+              <NextImage
+                src={PSELogoCircle}
+                alt="pselogocircle"
+                style={{ objectFit: "contain" }}
+                width={252}
+                height={252}
+              />
+            </div>
+          </div>
+          <div className="hidden items-start lg:flex">
+            <NextImage
+              src={PSELogoCircle}
+              alt="pselogocircle"
+              width={252}
+              height={252}
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-10 text-center lg:flex-row">
+          <div className="flex w-full items-start  justify-start lg:w-[500px] lg:justify-center">
+            <h1 className="text-xl font-[700] uppercase text-[#E3533A]">
+              How To Plug In
+            </h1>
+          </div>
+          <div className="flex w-full flex-col gap-10 text-start lg:w-[420px]">
+            <h1 className="text-lg text-black">
+              PSE is a growing team of developers, researchers, designers,
+              communicators, artists, and organizers. There are so many ways to
+              get involved- you can try out our apps, build with our tools,
+              contribute to projects, or join our team. We’d love to hear from
+              you!
+            </h1>
+            <NextLink
+              href={siteConfig.links.discord}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-2"
+            >
+              <h1 className="border-b-2 border-[#E3533A] text-base font-[500] uppercase">
+                Say Hi On Discord
+              </h1>
+              <NextImage
+                src={ArrowUpVector}
+                alt="arrowvector"
+                height={16}
+                width={16}
+              />
+            </NextLink>
+          </div>
+        </div>
       </div>
     </section>
   )

app/projects/[id]/page.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import NextImage from "next/image"
+import { usePathname } from "next/navigation"
+import GithubVector from "@/public/githubblack-vector.png"
+import GlobalVector from "@/public/globeblack-vector.png"
+import SkyNoMoonBg from "@/public/skynomoon.png"
+import TwitterVector from "@/public/twitterblack-vector.png"
+
+import { projects } from "@/config/projects"
+import Breadcrumbs from "@/components/breadcrumbs"
+
+export default function ProjectDetailPage() {
+  const router = usePathname()
+
+  const breadcrumbs = router
+    .split("/")
+    .slice(1)
+    .map((part) => {
+      const id = Number(part)
+
+      if (!isNaN(id)) {
+        const project = projects.find((project) => project.id === id)
+
+        return project ? project.name : part
+      } else {
+        return part
+      }
+    })
+
+  return (
+    <section className="flex flex-col items-center">
+      <div className="relative flex h-auto w-full justify-center overflow-hidden md:h-[400px]">
+        <div className="absolute inset-0 z-[10] flex">
+          <div className="aspect-w-2 aspect-h-1">
+            <NextImage
+              src={SkyNoMoonBg}
+              alt="bg"
+              style={{ objectFit: "cover" }}
+              fill={true}
+            />
+          </div>
+        </div>
+        <div className="z-[11] flex w-full flex-col justify-center gap-5 p-[24px] md:w-[664px] md:p-0">
+          <Breadcrumbs path={breadcrumbs} />
+          <h1 className="text-2xl font-[700] md:text-3xl">
+            RLN or longer project name goes here
+          </h1>
+          <div className="flex flex-wrap items-center justify-start gap-5">
+            <div className="flex items-center gap-2">
+              <NextImage src={GithubVector} alt="bg" width={20} height={20} />
+              <h1>Github</h1>
+            </div>{" "}
+            <div className="flex items-center gap-2">
+              <NextImage src={GlobalVector} alt="bg" width={20} height={20} />
+              <h1>Website</h1>
+            </div>{" "}
+            <div className="flex items-center gap-2">
+              <NextImage src={TwitterVector} alt="bg" width={20} height={20} />
+              <h1>Twitter</h1>
+            </div>
+          </div>
+          <p className="mt-5 w-full text-lg md:w-[612px]">
+            Lorem ipsum dolor sit amet consectetur. Gravida nibh amet amet
+            tristique. Ornare adipiscing sed semper sed egestas eget sed non
+            faucibus.
+          </p>
+        </div>
+      </div>
+      <div className="flex w-full flex-col items-center justify-center gap-5 bg-anakiwa px-[24px] py-10 md:px-0">
+        <div className="flex h-[464px] w-full items-center justify-center border border-black py-10 md:w-[664px]">
+          <h1>Image Ratio</h1>
+        </div>
+        <div className="flex w-full flex-col gap-5 py-10 text-base md:w-[664px] md:text-lg">
+          <h1>
+            {`RLN is a protocol that allows one user to punish another user who is
+            abusing the rate limit in an anonymous system. Users can withdraw
+            the offender's stake or reveal their secrets, helping to maintain
+            system integrity via deterrence. RLN is built using the Semaphore
+            protocol.`}
+          </h1>
+          <h1>
+            {`This project is aimed at developers looking to stop spam while
+            preserving anonymity within a system. If you're working on
+            communication systems such as chat apps, client-server
+            communications, or peer-to-peer communications, RLN can help you
+            maintain privacy and anonymity while preventing abuse in the form of
+            spam and denial of service attacks. This ensures a safer and more
+            enjoyable user experience for your application's users.`}
+          </h1>
+        </div>
+      </div>
+    </section>
+  )
+}

app/projects/page.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import NextImage from "next/image"
+import { useRouter } from "next/navigation"
+import GithubVector from "@/public/github-vector.png"
+import GlobalVector from "@/public/globe-vector.png"
+import SkyNoMoonBg from "@/public/skynomoon.png"
+
+import { projects } from "@/config/projects"
+
+export default function ProjectsPage() {
+  const router = useRouter()
+
+  return (
+    <section className="flex flex-col items-center">
+      <div className="relative flex h-[350px] w-full overflow-hidden md:h-[300px]">
+        <div className="absolute inset-0 z-[10] flex">
+          <div className="aspect-w-2 aspect-h-1">
+            <NextImage
+              src={SkyNoMoonBg}
+              alt="bg"
+              style={{ objectFit: "cover" }}
+              fill={true}
+            />
+          </div>
+        </div>
+        <div className="z-[11] flex w-full flex-col justify-end gap-5 p-[24px] md:p-[32px] lg:p-[64px]">
+          <h1 className="text-4xl font-[700] md:text-5xl md:font-[400]">
+            Explore the project library
+          </h1>
+          <p className="w-full text-lg md:w-[612px] md:text-xl">
+            PSE is home to many projects, from cryptography research to
+            developer tools, protocols and proof-of-concept applications.
+          </p>
+        </div>
+      </div>
+      <div className="flex w-full flex-col gap-5 bg-anakiwa p-[24px] md:p-[32px] lg:p-[64px]">
+        <h1>Showing 24 projects</h1>
+        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
+          {projects.map((item, index) => {
+            return (
+              <div
+                key={index}
+                onClick={() => router.push(`/projects/${item.id}`)}
+                className="flex w-full cursor-pointer flex-col"
+              >
+                <div className="h-[163px] w-full rounded-t-lg bg-[#A3DFF0]" />
+                <div className="flex flex-col gap-5 rounded-b-lg border-x border-b border-[#ccc] p-5">
+                  <h1 className="text-2xl font-bold text-black">{item.name}</h1>
+                  <p className="text-base text-black">{item.description}</p>
+                  <div className="flex items-center justify-start gap-2">
+                    <NextImage
+                      src={GithubVector}
+                      alt="githubVector"
+                      className="cursor-pointer"
+                      width={16}
+                      height={16}
+                    />
+                    <NextImage
+                      src={GlobalVector}
+                      className="cursor-pointer"
+                      alt="globalVector"
+                      width={16}
+                      height={16}
+                    />
+                  </div>
+                  <p className="text-xs text-black">updated 2 weeks ago</p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}

components/breadcrumbs.tsx

@@ -0,0 +1,30 @@
+import NextLink from "next/link"
+
+interface Props {
+  path: string[]
+}
+
+const Breadcrumbs = ({ path }: Props) => {
+  return (
+    <div className="flex text-[#4A5754]">
+      {path.map((item, index) => {
+        const isLastItem = index === path.length - 1
+        if (isLastItem) {
+          return (
+            <p key={index} className="cursor-pointer font-bold capitalize">
+              {item}
+            </p>
+          )
+        }
+        return (
+          <NextLink key={index} href={`/${item}`} className={`capitalize`}>
+            {item === "projects" ? "All Projects" : item}
+            <span className="mx-2">/</span>
+          </NextLink>
+        )
+      })}
+    </div>
+  )
+}
+
+export default Breadcrumbs

components/main-nav.tsx

@@ -1,41 +1,41 @@
-import * as React from "react"
+"use client"
+
+import NextImage from "next/image"
 import Link from "next/link"
+import { usePathname } from "next/navigation"
+import PSELogo from "@/public/pselogo-header.png"
 
 import { NavItem } from "@/types/nav"
-import { siteConfig } from "@/config/site"
-import { cn } from "@/lib/utils"
-import { Icons } from "@/components/icons"
 
 interface MainNavProps {
-  items?: NavItem[]
+  items: NavItem[]
 }
 
 export function MainNav({ items }: MainNavProps) {
+  const router = usePathname()
+
   return (
     <div className="flex gap-6 md:gap-10">
       <Link href="/" className="flex items-center space-x-2">
-        <Icons.logo className="h-6 w-6" />
-        <span className="inline-block font-bold">{siteConfig.name}</span>
+        <NextImage src={PSELogo} alt="logo" width={32} height={32} />
       </Link>
-      {items?.length ? (
-        <nav className="flex gap-6">
-          {items?.map(
-            (item, index) =>
-              item.href && (
-                <Link
-                  key={index}
-                  href={item.href}
-                  className={cn(
-                    "flex items-center text-sm font-medium text-muted-foreground",
-                    item.disabled && "cursor-not-allowed opacity-80"
-                  )}
-                >
-                  {item.title}
-                </Link>
-              )
-          )}
-        </nav>
-      ) : null}
+      <nav className="hidden items-center gap-6 md:flex">
+        {items.map((item, index) => {
+          return (
+            <Link
+              key={index}
+              href={item.href}
+              className={`uppercase ${
+                item.disabled && "cursor-not-allowed"
+              } flex items-center border-b-4 ${
+                item.href !== router ? "border-transparent" : "border-[#E3533A]"
+              } text-base font-medium opacity-80`}
+            >
+              {item.title}
+            </Link>
+          )
+        })}
+      </nav>
     </div>
   )
 }

components/site-footer.tsx

@@ -0,0 +1,82 @@
+import NextImage from "next/image"
+import NextLink from "next/link"
+import ArrowVector from "@/public/arrow-vector.png"
+import DiscordLogo from "@/public/discord-white.png"
+import EllipseLogo from "@/public/ellipse-white.png"
+import GithubLogo from "@/public/github-white.png"
+import PSELogo from "@/public/pselogo-footer.png"
+import TwitterLogo from "@/public/twitter-white.png"
+
+import { siteConfig } from "@/config/site"
+
+export function SiteFooter() {
+  return (
+    <footer className="flex flex-col gap-5">
+      <div className="flex w-full flex-col gap-5 p-[32px]">
+        <NextImage 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>
+      </div>
+      <div className="flex w-full flex-col gap-5 px-[32px] text-base font-[500]">
+        <NextLink href={"/"} className="border-b-2 border-[#171C1B] py-5">
+          HOME
+        </NextLink>
+        <NextLink
+          href={"/projects"}
+          className="border-b-2 border-[#171C1B] py-5"
+        >
+          PROJECT LIBRARY
+        </NextLink>
+        <NextLink
+          href={siteConfig.links.jobs}
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-center gap-5 py-5"
+        >
+          JOBS
+          <NextImage src={ArrowVector} alt="logo" width={12} height={12} />
+        </NextLink>
+      </div>
+      <div className="flex w-full flex-col items-center justify-center gap-5 bg-[#171C1B] py-[40px] text-sm">
+        <div className="flex gap-5">
+          <NextLink
+            href={siteConfig.links.twitter}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <NextImage src={TwitterLogo} alt="logo" width={24} height={24} />
+          </NextLink>
+
+          <NextLink
+            href={siteConfig.links.discord}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <NextImage src={DiscordLogo} alt="logo" width={24} height={24} />
+          </NextLink>
+          <NextLink
+            href={siteConfig.links.github}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <NextImage src={GithubLogo} alt="logo" width={24} height={24} />
+          </NextLink>
+          <NextLink
+            href={siteConfig.links.articles}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <NextImage src={EllipseLogo} alt="logo" width={24} height={24} />
+          </NextLink>
+        </div>
+        <div className="flex gap-5 text-white">
+          <h1>Privacy Policy</h1>
+          <h1>Terms of use</h1>
+        </div>
+        <h1 className="text-gray-400">Last updated June 8, 2023</h1>
+      </div>
+    </footer>
+  )
+}

components/site-header-mobile.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import { useState } from "react"
+import NextImage from "next/image"
+import NextLink from "next/link"
+import ArrowVector from "@/public/arrow-white-vector.png"
+import CloseVector from "@/public/close-vector.png"
+import DiscordLogo from "@/public/discord-white.png"
+import EllipseLogo from "@/public/ellipse.png"
+import GithubLogo from "@/public/github-white.png"
+import HeaderVector from "@/public/headermobile-vector-.png"
+import TwitterLogo from "@/public/twitter-white.png"
+
+import { siteConfig } from "@/config/site"
+
+export function SiteHeaderMobile() {
+  const [header, setHeader] = useState(false)
+
+  return (
+    <div className="flex items-center md:hidden">
+      <NextImage
+        src={HeaderVector}
+        alt="logo"
+        className="cursor-pointer"
+        onClick={() => setHeader(true)}
+        width={18}
+        height={16}
+      />
+      {header && (
+        <div
+          className="z-5 fixed inset-0 flex justify-end bg-black opacity-50"
+          onClick={() => setHeader(false)}
+        ></div>
+      )}
+      {header && (
+        <div className="fixed inset-y-0 right-0 z-10 flex w-[257px] flex-col bg-black text-white">
+          <div className="flex justify-end p-[37px]">
+            <NextImage
+              src={CloseVector}
+              alt="closeVector"
+              className="cursor-pointer"
+              onClick={() => setHeader(false)}
+              width={15}
+              height={15}
+            />
+          </div>
+          <div className="flex w-full flex-col gap-5 px-[16px] text-base font-[500]">
+            <NextLink
+              href={"/"}
+              onClick={() => setHeader(false)}
+              className="border-y-2 border-white p-[16px]"
+            >
+              HOME
+            </NextLink>
+            <NextLink
+              onClick={() => setHeader(false)}
+              href={"/projects"}
+              className="border-b-2 border-white p-[16px] pt-0"
+            >
+              PROJECT LIBRARY
+            </NextLink>
+            <NextLink
+              href={siteConfig.links.jobs}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-5 border-b-2 border-white p-[16px] pt-0"
+            >
+              JOBS
+              <NextImage src={ArrowVector} alt="logo" width={12} height={12} />
+            </NextLink>
+          </div>
+          <div className="flex h-full w-full flex-col items-center justify-end gap-5 py-[40px] text-sm">
+            <div className="flex gap-5">
+              <NextLink
+                href={siteConfig.links.twitter}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <NextImage
+                  src={TwitterLogo}
+                  alt="logo"
+                  width={24}
+                  height={24}
+                />
+              </NextLink>
+
+              <NextLink
+                href={siteConfig.links.discord}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <NextImage
+                  src={DiscordLogo}
+                  alt="logo"
+                  width={24}
+                  height={24}
+                />
+              </NextLink>
+              <NextLink
+                href={siteConfig.links.github}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <NextImage src={GithubLogo} alt="logo" width={24} height={24} />
+              </NextLink>
+              <NextLink
+                href={siteConfig.links.articles}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <NextImage
+                  src={EllipseLogo}
+                  alt="logo"
+                  width={24}
+                  height={24}
+                />
+              </NextLink>
+            </div>
+            <div className="flex gap-5 text-white">
+              <h1>Privacy Policy</h1>
+              <h1>Terms of use</h1>
+            </div>
+            <h1 className="text-gray-400">Last updated June 8, 2023</h1>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

components/site-header.tsx

@@ -1,49 +1,51 @@
+import NextImage from "next/image"
 import Link from "next/link"
+import DiscordLogo from "@/public/discord.png"
+import EllipseLogo from "@/public/ellipse.png"
+import GithubLogo from "@/public/github.png"
+import TwitterLogo from "@/public/twitter.png"
 
 import { siteConfig } from "@/config/site"
-import { buttonVariants } from "@/components/ui/button"
-import { Icons } from "@/components/icons"
 import { MainNav } from "@/components/main-nav"
-import { ThemeToggle } from "@/components/theme-toggle"
+
+import { SiteHeaderMobile } from "./site-header-mobile"
 
 export function SiteHeader() {
   return (
-    <header className="sticky top-0 z-40 w-full border-b bg-background">
-      <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
+    <header className="sticky top-0 z-40 w-full border-b bg-background px-[32px]">
+      <div className="flex h-16  justify-between space-x-4 sm:space-x-0">
         <MainNav items={siteConfig.mainNav} />
-        <div className="flex flex-1 items-center justify-end space-x-4">
-          <nav className="flex items-center space-x-1">
-            <Link
-              href={siteConfig.links.github}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div
-                className={buttonVariants({
-                  size: "sm",
-                  variant: "ghost",
-                })}
-              >
-                <Icons.gitHub className="h-5 w-5" />
-                <span className="sr-only">GitHub</span>
-              </div>
-            </Link>
+        <SiteHeaderMobile />
+        <div className="hidden flex-1 items-center justify-end space-x-4 md:flex">
+          <nav className="flex items-center gap-5 space-x-1">
             <Link
               href={siteConfig.links.twitter}
               target="_blank"
               rel="noreferrer"
             >
-              <div
-                className={buttonVariants({
-                  size: "sm",
-                  variant: "ghost",
-                })}
-              >
-                <Icons.twitter className="h-5 w-5 fill-current" />
-                <span className="sr-only">Twitter</span>
-              </div>
+              <NextImage src={TwitterLogo} alt="logo" width={24} height={24} />
+            </Link>
+            <Link
+              href={siteConfig.links.discord}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <NextImage src={DiscordLogo} alt="logo" width={24} height={24} />
+            </Link>
+            <Link
+              href={siteConfig.links.github}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <NextImage src={GithubLogo} alt="logo" width={24} height={24} />
+            </Link>
+            <Link
+              href={siteConfig.links.articles}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <NextImage src={EllipseLogo} alt="logo" width={24} height={24} />
             </Link>
-            <ThemeToggle />
           </nav>
         </div>
       </div>

config/projects.ts

@@ -0,0 +1,104 @@
+export const projects = [
+  {
+    id: 1,
+    name: "Semaphore 1",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 2,
+    name: "Semaphore 2",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 3,
+    name: "Semaphore 3",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 4,
+    name: "Semaphore 4",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 5,
+    name: "Semaphore 5",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 6,
+    name: "Semaphore 6",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 7,
+    name: "Semaphore 7",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 8,
+    name: "Semaphore 8",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 9,
+    name: "Semaphore 9",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 10,
+    name: "Semaphore 10",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 11,
+    name: "Semaphore 11",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 12,
+    name: "Semaphore 12",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 13,
+    name: "Semaphore 13",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 14,
+    name: "Semaphore 14",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 15,
+    name: "Semaphore 15",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 16,
+    name: "Semaphore 16",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+  {
+    id: 17,
+    name: "Semaphore 17",
+    description:
+      "Lorem ipsum dolor sit amet consectetur. Lacus dolor vestibulum turpis magna suscipit. Sodales est pharetra ut urna....",
+  },
+]

config/site.ts

@@ -9,10 +9,17 @@ export const siteConfig = {
       title: "Home",
       href: "/",
     },
+    {
+      title: "Project Library",
+      href: "/projects",
+    },
   ],
   links: {
     twitter: "https://twitter.com/privacyscaling",
     github: "https://github.com/privacy-scaling-explorations",
     docs: "https://ui.shadcn.com",
+    discord: "https://discord.com/invite/sF5CT5rzrR",
+    articles: "https://mirror.xyz/privacy-scaling-explorations.eth",
+    jobs: "https://jobs.lever.co/ethereumfoundation/?department=Ethereum%20Foundation&team=Privacy%20and%20Scaling%20Explorations",
   },
 }

tailwind.config.js

@@ -13,7 +13,13 @@ module.exports = {
       },
     },
     extend: {
+      backgroundImage: {
+        "radial-gradient":
+          "radial-gradient(114.29% 42.52% at 103.66% 58.94%, #D0F8F1 0%, #D1F3FF 18.23%, #ECF8FF 51.28%, #E1FFFA 80.21%, #D0F2FF 93.23%)",
+      },
       colors: {
+        corduroy: "#4A5754",
+        anakiwa: "#F2FAFD",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",

types/nav.ts

@@ -1,6 +1,6 @@
 export interface NavItem {
   title: string
-  href?: string
+  href: string
   disabled?: boolean
   external?: boolean
 }