diff --git a/app/layout.tsx b/app/layout.tsx index 3ec4282..e9218b3 100644 --- a/app/layout.tsx +++ b/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) {
{children}
+
diff --git a/app/page.tsx b/app/page.tsx index c9a7677..2ec0b79 100644 --- a/app/page.tsx +++ b/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 ( -
-
-

- Our new website
- built with Radix UI and Tailwind CSS. -

-

- Accessible and customizable components that you can copy and paste - into your apps. Free. Open Source. And Next.js 13 Ready. -

+
+
+
+

+ Privacy + Scaling Explorations +

+

+ Programmable cryptography for people like you +

+ +

+ Explore The Project Library +

+ +
+
+
+ +
-
- +
+
+
+ +

+ Learn and Share +

+
+

+ Sangria: a Folding Scheme for PLONK +

+
+ +

+ Watch +

+ +
+
+
+
+
+ +

+ Learn and Share +

+
+

+ Folding Circom Circuit: A ZKML Case Study - Dr. Cathie So +

+
+ +

+ Atttend +

+ +
+
+
- Documentation - - +
+ +

+ Event +

+
+

PSE @ETHCC

+
+ +

+ Attend +

+ +
+
+
- GitHub - +
+
+ +

+ Blog Post +

+
+

+ zkEVM Community Edition Part 3: Logic and Structure +

+
+ +

+ read +

+ +
+
+
+ +
+
+
+

+ Who We Are +

+
+
+

+ PSE is a research lab building free tools that expand the world of + cryptography. +

+
+
+ +
+
+

+ What We Do +

+
+
+ +
+
+
+
+

Privacy

+

+ 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. +

+
+
+

Scaling

+

+ 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. +

+
+
+

Explorations

+

+ We are mapping the emerging zero knowledge ecosystem through + collective experimentation. We collaborate, share what we + learn, and welcome contributions from around the world. +

+
+
+
+ +
+
+
+ +
+
+ +
+
+

+ How To Plug In +

+
+
+

+ 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! +

+ +

+ Say Hi On Discord +

+ +
+
+
) diff --git a/app/projects/[id]/page.tsx b/app/projects/[id]/page.tsx new file mode 100644 index 0000000..85719a8 --- /dev/null +++ b/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 ( +
+
+
+
+ +
+
+
+ +

+ RLN or longer project name goes here +

+
+
+ +

Github

+
{" "} +
+ +

Website

+
{" "} +
+ +

Twitter

+
+
+

+ Lorem ipsum dolor sit amet consectetur. Gravida nibh amet amet + tristique. Ornare adipiscing sed semper sed egestas eget sed non + faucibus. +

+
+
+
+
+

Image Ratio

+
+
+

+ {`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.`} +

+

+ {`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.`} +

+
+
+
+ ) +} diff --git a/app/projects/page.tsx b/app/projects/page.tsx new file mode 100644 index 0000000..e2717fb --- /dev/null +++ b/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 ( +
+
+
+
+ +
+
+
+

+ Explore the project library +

+

+ PSE is home to many projects, from cryptography research to + developer tools, protocols and proof-of-concept applications. +

+
+
+
+

Showing 24 projects

+
+ {projects.map((item, index) => { + return ( +
router.push(`/projects/${item.id}`)} + className="flex w-full cursor-pointer flex-col" + > +
+
+

{item.name}

+

{item.description}

+
+ + +
+

updated 2 weeks ago

+
+
+ ) + })} +
+
+
+ ) +} diff --git a/components/breadcrumbs.tsx b/components/breadcrumbs.tsx new file mode 100644 index 0000000..1ad4962 --- /dev/null +++ b/components/breadcrumbs.tsx @@ -0,0 +1,30 @@ +import NextLink from "next/link" + +interface Props { + path: string[] +} + +const Breadcrumbs = ({ path }: Props) => { + return ( +
+ {path.map((item, index) => { + const isLastItem = index === path.length - 1 + if (isLastItem) { + return ( +

+ {item} +

+ ) + } + return ( + + {item === "projects" ? "All Projects" : item} + / + + ) + })} +
+ ) +} + +export default Breadcrumbs diff --git a/components/main-nav.tsx b/components/main-nav.tsx index 64e87a2..e7c575a 100644 --- a/components/main-nav.tsx +++ b/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 (
- - {siteConfig.name} + - {items?.length ? ( - - ) : null} +
) } diff --git a/components/site-footer.tsx b/components/site-footer.tsx new file mode 100644 index 0000000..5b3d8aa --- /dev/null +++ b/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 ( + + ) +} diff --git a/components/site-header-mobile.tsx b/components/site-header-mobile.tsx new file mode 100644 index 0000000..db5d283 --- /dev/null +++ b/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 ( +
+ setHeader(true)} + width={18} + height={16} + /> + {header && ( +
setHeader(false)} + >
+ )} + {header && ( +
+
+ setHeader(false)} + width={15} + height={15} + /> +
+
+ setHeader(false)} + className="border-y-2 border-white p-[16px]" + > + HOME + + setHeader(false)} + href={"/projects"} + className="border-b-2 border-white p-[16px] pt-0" + > + PROJECT LIBRARY + + + JOBS + + +
+
+
+ + + + + + + + + + + + + +
+
+

Privacy Policy

+

Terms of use

+
+

Last updated June 8, 2023

+
+
+ )} +
+ ) +} diff --git a/components/site-header.tsx b/components/site-header.tsx index c4bcffa..f6ed5a0 100644 --- a/components/site-header.tsx +++ b/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 ( -
-
+
+
-
-
diff --git a/config/projects.ts b/config/projects.ts new file mode 100644 index 0000000..82c0f59 --- /dev/null +++ b/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....", + }, +] diff --git a/config/site.ts b/config/site.ts index b9d54f1..22c6dac 100644 --- a/config/site.ts +++ b/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", }, } diff --git a/public/arrow-vector.png b/public/arrow-vector.png new file mode 100644 index 0000000..a758d69 Binary files /dev/null and b/public/arrow-vector.png differ diff --git a/public/arrow-white-vector.png b/public/arrow-white-vector.png new file mode 100644 index 0000000..804a05a Binary files /dev/null and b/public/arrow-white-vector.png differ diff --git a/public/arrowright-vector.png b/public/arrowright-vector.png new file mode 100644 index 0000000..08ef7ed Binary files /dev/null and b/public/arrowright-vector.png differ diff --git a/public/close-vector.png b/public/close-vector.png new file mode 100644 index 0000000..ec0f306 Binary files /dev/null and b/public/close-vector.png differ diff --git a/public/discord-white.png b/public/discord-white.png new file mode 100644 index 0000000..e5cc775 Binary files /dev/null and b/public/discord-white.png differ diff --git a/public/discord.png b/public/discord.png new file mode 100644 index 0000000..a4f1201 Binary files /dev/null and b/public/discord.png differ diff --git a/public/ellipse-white.png b/public/ellipse-white.png new file mode 100644 index 0000000..89e2e3a Binary files /dev/null and b/public/ellipse-white.png differ diff --git a/public/ellipse.png b/public/ellipse.png new file mode 100644 index 0000000..a2e9eff Binary files /dev/null and b/public/ellipse.png differ diff --git a/public/github-vector.png b/public/github-vector.png new file mode 100644 index 0000000..c1385e4 Binary files /dev/null and b/public/github-vector.png differ diff --git a/public/github-white.png b/public/github-white.png new file mode 100644 index 0000000..858d614 Binary files /dev/null and b/public/github-white.png differ diff --git a/public/github.png b/public/github.png new file mode 100644 index 0000000..6bfeb90 Binary files /dev/null and b/public/github.png differ diff --git a/public/githubblack-vector.png b/public/githubblack-vector.png new file mode 100644 index 0000000..c969030 Binary files /dev/null and b/public/githubblack-vector.png differ diff --git a/public/globe-vector.png b/public/globe-vector.png new file mode 100644 index 0000000..51c18ab Binary files /dev/null and b/public/globe-vector.png differ diff --git a/public/globeblack-vector.png b/public/globeblack-vector.png new file mode 100644 index 0000000..0daa9ff Binary files /dev/null and b/public/globeblack-vector.png differ diff --git a/public/headermobile-vector-.png b/public/headermobile-vector-.png new file mode 100644 index 0000000..fd7db9b Binary files /dev/null and b/public/headermobile-vector-.png differ diff --git a/public/pse-logo-circle.png b/public/pse-logo-circle.png new file mode 100644 index 0000000..e1302b0 Binary files /dev/null and b/public/pse-logo-circle.png differ diff --git a/public/pseicon-1.png b/public/pseicon-1.png new file mode 100644 index 0000000..0d54c26 Binary files /dev/null and b/public/pseicon-1.png differ diff --git a/public/pseicon-2.png b/public/pseicon-2.png new file mode 100644 index 0000000..b9b58c7 Binary files /dev/null and b/public/pseicon-2.png differ diff --git a/public/pseicon-3.png b/public/pseicon-3.png new file mode 100644 index 0000000..a0b9dad Binary files /dev/null and b/public/pseicon-3.png differ diff --git a/public/pselogo-footer.png b/public/pselogo-footer.png new file mode 100644 index 0000000..370ff3a Binary files /dev/null and b/public/pselogo-footer.png differ diff --git a/public/pselogo-header.png b/public/pselogo-header.png new file mode 100644 index 0000000..81e0dc6 Binary files /dev/null and b/public/pselogo-header.png differ diff --git a/public/pselogo-homepage.png b/public/pselogo-homepage.png new file mode 100644 index 0000000..b811477 Binary files /dev/null and b/public/pselogo-homepage.png differ diff --git a/public/skynomoon.png b/public/skynomoon.png new file mode 100644 index 0000000..8f905d8 Binary files /dev/null and b/public/skynomoon.png differ diff --git a/public/twitter-white.png b/public/twitter-white.png new file mode 100644 index 0000000..ab72bc9 Binary files /dev/null and b/public/twitter-white.png differ diff --git a/public/twitter.png b/public/twitter.png new file mode 100644 index 0000000..fbc7b78 Binary files /dev/null and b/public/twitter.png differ diff --git a/public/twitterblack-vector.png b/public/twitterblack-vector.png new file mode 100644 index 0000000..a6bc820 Binary files /dev/null and b/public/twitterblack-vector.png differ diff --git a/tailwind.config.js b/tailwind.config.js index 8ebc8cd..4c8a230 100644 --- a/tailwind.config.js +++ b/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))", diff --git a/types/nav.ts b/types/nav.ts index 0961ce8..d5a468b 100644 --- a/types/nav.ts +++ b/types/nav.ts @@ -1,6 +1,6 @@ export interface NavItem { title: string - href?: string + href: string disabled?: boolean external?: boolean }