diff --git a/app/about/page.tsx b/app/about/page.tsx new file mode 100644 index 0000000..12d9217 --- /dev/null +++ b/app/about/page.tsx @@ -0,0 +1,176 @@ +import React from "react" +import Image from "next/image" + +import { Accordion } from "@/components/ui/accordion" + +interface PrincipleContentProps { + image: string + children: React.ReactNode + width?: number + height?: number +} +const PrincipleContent = ({ + image, + children, + width = 300, + height = 300, +}: PrincipleContentProps) => { + return ( +
+
+ principle image +
+ + {children} + +
+ ) +} +export default function AboutPage() { + return ( +
+
+
+
+
+ Collective experimentation of cryptography. +
+ + PSE is a multi-disciplinary research and development lab supported + by the Ethereum Foundation. We create open source infrastructure, + tools and educational resources for building cryptography into + real world applications. + +
+
+ pse logo +
+
+
+ +
+
Pse principles
+ +

+ {`Cryptography is everywhere: every time you connect to a + secure site, log in with a password or unlock your phone, + you're seeing cryptography in action.`} +

+

+ {`With “programmable” cryptography (like zero knowledge + proofs, multi-party computation or homomorphic encryption) + we can make verifiable claims about secret information + without revealing the information itself. This can be + applied to identity management, collusion resistance, + anonymous communication and so much more.`} +

+

+ {`We're building a library of dev tools, research papers, and + prototypes that are open source and free for everyone to + use. We hope our resources inspire people to innovate the + technologies that their communities need.`} +

+ + ), + }, + { + label: "02. Privacy by default", + value: "2", + children: ( + +

+ We believe that privacy is a fundamental right. We want to + be part of building an internet that divests from invasive + data practices, and instead gives people real choices about + who has access to their personal information. Permission + should be purpose specific, revocable, informed and + uncoerced. +

+

+ We make tools that help people to securely authenticate + themselves, make confidential transactions on the + blockchain, and respect and preserve user privacy. +

+ + ), + }, + { + label: "03. Scaling for communities", + value: "3", + children: ( + +

+ Zero knowledge proofs can verify computations quickly and + cheaply, helping decentralized systems like Ethereum become + more efficient. We research, design and share scaling + solutions that anyone can use to contribute to a stronger + and more practical digital public infrastructure. +

+

+ We also grow our community by supporting the next generation + of builders. We host immersive summer programs for students + and regular live lectures that anyone in the world can join + and learn from. +

+ + ), + }, + { + label: "04. Open source public goods", + value: "4", + children: ( + +

+ We are cultivating a diverse and multidisciplinary team to + explore the emerging zero knowledge ecosystem. PSE is made + up of programmers, engineers, and mathematicians working + alongside creatives and community organizers to + collaboratively discover the potential of programmable + cryptography. +

+

+ We experiment in the open and welcome contributions, + integrations, forks, or feedback on all of our projects. +

+ + ), + }, + ]} + > +
+
+ ) +} diff --git a/app/projects/page.tsx b/app/projects/page.tsx index 0cc2201..32d2b8a 100644 --- a/app/projects/page.tsx +++ b/app/projects/page.tsx @@ -10,30 +10,14 @@ export const metadata: Metadata = { "PSE is home to many projects, from cryptography research to developer tools, protocols, and proof-of-concept applications.", } -// TODO: MAKE IT RANDOM - This would prob need to be state and so metadata would get cut -// // efficient fisher-yates shuffle -// const array = [...projects] -// let currentIndex = array.length, -// randomIndex -// while (currentIndex !== 0) { -// randomIndex = Math.floor(Math.random() * currentIndex) -// currentIndex-- -// ;[array[currentIndex], array[randomIndex]] = [ -// array[randomIndex], -// array[currentIndex], -// ] -// } -// return array -// } - export default function ProjectsPage() { return (
-
+
-

+

Explore the project library

diff --git a/components/icons.tsx b/components/icons.tsx index 47e7ae8..f14dd88 100644 --- a/components/icons.tsx +++ b/components/icons.tsx @@ -158,4 +158,34 @@ export const Icons = { /> ), + plus: (props: LucideProps) => ( + + + + ), + minus: (props: LucideProps) => ( + + + + ), } diff --git a/components/site-footer.tsx b/components/site-footer.tsx index a3baebf..14834a2 100644 --- a/components/site-footer.tsx +++ b/components/site-footer.tsx @@ -29,6 +29,9 @@ export function SiteFooter() { PROJECT LIBRARY + + ABOUT + {header && (
setHeader(false)} >
)} @@ -61,6 +61,13 @@ export function SiteHeaderMobile() { > PROJECT LIBRARY + setHeader(false)} + href={"/about"} + className="border-b-2 border-white p-[16px] pt-0" + > + ABOUT + { + return ( + + {items?.map(({ label, children, value }) => ( + + + + {label} + +
+ +
+
+ +
+ + + {children} + + + ))} + + ) +} + +Accordion.displayName = "Accordion" + +export { Accordion } diff --git a/config/site.ts b/config/site.ts index cc94a1a..f326469 100644 --- a/config/site.ts +++ b/config/site.ts @@ -13,6 +13,10 @@ export const siteConfig = { title: "Project Library", href: "/projects", }, + { + title: "About", + href: "/about", + }, ], links: { twitter: "https://twitter.com/privacyscaling", diff --git a/package.json b/package.json index 6355a62..dd4d8d3 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "clean": "rm -rf .next/ out/" }, "dependencies": { + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-dropdown-menu": "^2.0.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6327498..66318bb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@radix-ui/react-accordion': + specifier: ^1.1.2 + version: 1.1.2(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-checkbox': specifier: ^1.0.4 version: 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) @@ -573,6 +576,35 @@ packages: '@babel/runtime': 7.22.3 dev: false + /@radix-ui/react-accordion@1.1.2(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@types/react': 18.2.7 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==} peerDependencies: @@ -587,7 +619,15 @@ packages: optional: true dependencies: '@babel/runtime': 7.22.3 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.7)(react@18.2.0) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.7)(react@18.2.0) '@types/react': 18.2.7 '@types/react-dom': 18.2.4 react: 18.2.0 @@ -622,6 +662,34 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@types/react': 18.2.7 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==} peerDependencies: diff --git a/public/logos/principle-1.svg b/public/logos/principle-1.svg new file mode 100644 index 0000000..db103b7 --- /dev/null +++ b/public/logos/principle-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/logos/principle-2.svg b/public/logos/principle-2.svg new file mode 100644 index 0000000..2f1ddb3 --- /dev/null +++ b/public/logos/principle-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/logos/principle-3.svg b/public/logos/principle-3.svg new file mode 100644 index 0000000..c6f4015 --- /dev/null +++ b/public/logos/principle-3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/logos/principle-4.svg b/public/logos/principle-4.svg new file mode 100644 index 0000000..8b85fc7 --- /dev/null +++ b/public/logos/principle-4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/logos/pse-logo-bg.svg b/public/logos/pse-logo-bg.svg new file mode 100644 index 0000000..0b6277f --- /dev/null +++ b/public/logos/pse-logo-bg.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tailwind.config.js b/tailwind.config.js index c5bea3d..83f6d6d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -102,12 +102,22 @@ module.exports = { from: { opacity: 0, transform: "translate(-50%, -48%) scale(0.96)" }, to: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }, }, + "slide-down": { + from: { height: 0 }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "slide-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: 0 }, + }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "overlay-show": "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)", "content-show": "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)", + "slide-down": "slide-down 0.2s ease-out", + "slide-up": "slide-up 0.2s ease-out", }, }, },