github/pse.dev
1
1
Fork 0
mirror of https://github.com/privacy-scaling-explorations/pse.dev.git synced 2026-04-23 03:01:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

resources page

Browse Source
This commit is contained in:
Kalidou Diagne
2024-03-19 14:35:22 +00:00
parent 2a1a19a736
commit f7351e4f27
14 changed files with 207 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/[lang]/about/page.tsx
View File

@@ -7,29 +7,11 @@ import { Accordion } from "@/components/ui/accordion"
import { AppContent } from "@/components/ui/app-content"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Banner } from "@/components/banner"
import { Icons } from "@/components/icons"
import { PageHeader } from "@/components/page-header"
import { useTranslation } from "@/app/i18n"
const PrincipleImageSizes: Record<string, { width: number; height: number }> = {
"principle-1": {
width: 126,
height: 114,
},
"principle-2": {
width: 176,
height: 260,
},
"principle-3": {
width: 236,
height: 260,
},
"principle-4": {
width: 238,
height: 260,
},
}
export default async function AboutPage({ params: { lang } }: any) {
const { t } = await useTranslation(lang, "about-page")
const { t: common } = await useTranslation(lang, "common")
@@ -40,7 +22,7 @@ export default async function AboutPage({ params: { lang } }: any) {
}) ?? []
return (
<div className="bg-anakiwa-50">
<div className="bg-white">
<PageHeader
title={t("title")}
subtitle={t("description")}
@@ -74,8 +56,11 @@ export default async function AboutPage({ params: { lang } }: any) {
}
/>
<AppContent className="flex flex-col gap-4 py-16 md:py-24">
<h6 className="font-display text-4xl">{t("our-principles-title")}</h6>
<AppContent className="container flex w-full max-w-[978px] flex-col gap-8 py-10 md:py-16">
<Label.Section
className="text-center"
label={t("our-principles-title")}
/>
<Accordion
type="multiple"
items={[
@@ -84,7 +69,7 @@ export default async function AboutPage({ params: { lang } }: any) {
label: principle?.title,
value: index.toString(),
children: (
<span className="flex flex-col gap-4 break-words pb-12 font-sans text-lg font-normal leading-[150%]">
<span className="flex flex-col gap-6 break-words pb-12 font-sans text-lg font-normal leading-[150%]">
{principle.description?.map(
(description: string, index: number) => {
return <p key={index}>{description}</p>
@@ -97,6 +82,25 @@ export default async function AboutPage({ params: { lang } }: any) {
]}
/>
</AppContent>
<Banner title={t("banner.title")} subtitle={t("banner.subtitle")}>
<Link
href={siteConfig.links.discord}
target="_blank"
rel="noreferrer"
passHref
>
<Button>
<div className="flex items-center gap-2">
<Icons.discord fill="white" className="h-4" />
<span className="text-[14px] uppercase">
{common("joinOurDiscord")}
</span>
<Icons.externalUrl fill="white" className="h-5" />
</div>
</Button>
</Link>
</Banner>
</div>
)
}

56
app/[lang]/page.tsx
View File

@@ -9,6 +9,7 @@ import { siteConfig } from "@/config/site"
import { AppContent } from "@/components/ui/app-content"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Banner } from "@/components/banner"
import { Icons } from "@/components/icons"
import { PageHeader } from "@/components/page-header"
import { NewsSection } from "@/components/sections/NewsSection"
@@ -18,10 +19,10 @@ import { useTranslation } from "../i18n/client"
export default function IndexPage({ params: { lang } }: any) {
const { t } = useTranslation(lang, "homepage")
const { t: ct } = useTranslation(lang, "common")
const { t: common } = useTranslation(lang, "common")
return (
<section className="flex flex-col bg-main-gradient">
<section className="flex flex-col">
<PageHeader
title={
<motion.h1
@@ -43,7 +44,7 @@ export default function IndexPage({ params: { lang } }: any) {
<Button className="w-full sm:w-auto">
<div className="flex items-center gap-1">
<span className="text-base font-medium uppercase">
{ct("exploreProjectLibrary")}
{common("exploreProjectLibrary")}
</span>
<Icons.arrowRight
fill="white"
@@ -57,35 +58,30 @@ export default function IndexPage({ params: { lang } }: any) {
<NewsSection lang={lang} />
<div className="bg-radial-gradient flex flex-col">
<div className="flex flex-col">
<WhatWeDo lang={lang} />
<section className="relative border-y border-tuatara-600 bg-[#D0F2FF] pb-16 pt-8 text-center">
<AppContent className="flex flex-col gap-6">
<div className="flex flex-col items-center text-center">
<h6 className="py-6 font-sans text-base font-bold uppercase tracking-[4px] text-tuatara-950">
{t("howToPlugIn")}
</h6>
<p className="md:max-w-2xl">{t("howToPlugInDescription")}</p>
</div>
<Link
href={siteConfig.links.discord}
target="_blank"
rel="noreferrer"
passHref
>
<Button>
<div className="flex items-center gap-2">
<Icons.discord fill="white" className="h-4" />
<span className="text-[14px] uppercase">
{t("joinOurDiscord")}
</span>
<Icons.externalUrl fill="white" className="h-5" />
</div>
</Button>
</Link>
</AppContent>
</section>
<Banner
title={common("connectWithUs")}
subtitle={common("connectWithUsDescription")}
>
<Link
href={siteConfig.links.discord}
target="_blank"
rel="noreferrer"
passHref
>
<Button>
<div className="flex items-center gap-2">
<Icons.discord fill="white" className="h-4" />
<span className="text-[14px] uppercase">
{t("joinOurDiscord")}
</span>
<Icons.externalUrl fill="white" className="h-5" />
</div>
</Button>
</Link>
</Banner>
</div>
</section>
)

72
app/[lang]/resources/page.tsx
View File

@@ -2,7 +2,6 @@
import { useCallback, useEffect, useRef, useState } from "react"
import Link from "next/link"
import { ArrowUpRight } from "lucide-react"
import { LangProps } from "@/types/common"
import { siteConfig } from "@/config/site"
@@ -10,6 +9,7 @@ import { cn } from "@/lib/utils"
import { AppContent } from "@/components/ui/app-content"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Banner } from "@/components/banner"
import { Icons } from "@/components/icons"
import { PageHeader } from "@/components/page-header"
import { useTranslation } from "@/app/i18n/client"
@@ -49,22 +49,21 @@ const ResourceItem = ({
href={url}
target="_blank"
rel="noreferrer noopener"
className="group border-b-2 border-anakiwa-300 pb-3 duration-500 hover:border-orange group-hover:transition"
className="group pb-3 duration-500 group-hover:transition"
>
<div className="flex justify-between">
<div className="flex items-center gap-1">
<div className="flex space-x-3">
<div className="h-6 w-6 text-anakiwa-500 opacity-50 transition group-hover:text-tuatara-950 group-hover:opacity-100">
<Icon />
</div>
<span className="text-lg font-medium">{label}</span>
<span className="text-lg font-medium duration-200 group-hover:text-orange">
{label}
</span>
</div>
<ArrowUpRight
size={24}
className="text-tuatara-950 opacity-0 transition duration-500 group-hover:opacity-100"
/>
<Icons.externalUrl className="text-tuatara-950 transition duration-200 group-hover:text-orange" />
</div>
<div className="p-[2px]"></div>
<p className="text-sm text-tuatara-500">{description}</p>
<p className="text-sm text-tuatara-500 ">{description}</p>
</Link>
)
}
@@ -74,15 +73,12 @@ const ResourceCard = ({ id, title, children }: ResourceCardProps) => {
<div
id={id}
data-section={id}
className="flex flex-col gap-4 rounded-lg p-6 backdrop-blur-md"
style={{
background: "rgba(255, 255, 255, 0.33",
}}
className="mx-auto flex max-w-[644px] flex-col rounded-lg"
>
<h3 className="py-4 font-display text-xl font-bold text-tuatara-700 md:text-2xl">
{title}
</h3>
<div className="mb-4 grid gap-6">{children}</div>
<Label.Section label={title} className="pb-8 text-center" />
<div className="mb-4 grid gap-6 rounded-lg border border-tuatara-300 bg-anakiwa-100 px-10 py-8">
{children}
</div>
</div>
)
}
@@ -199,7 +195,7 @@ export default function ResourcePage({ params: { lang } }: LangProps) {
</Link>
}
/>
<AppContent className="container grid grid-cols-1 gap-6 py-10 md:grid-cols-[3fr_1fr] md:pb-20 lg:grid-cols-[4fr_1fr]">
<AppContent className="grid grid-cols-1 gap-6 py-10 md:grid-cols-[3fr_1fr] md:pb-20 lg:grid-cols-[4fr_1fr]">
<div className="flex flex-col gap-6">
<article className="flex flex-col space-y-8 ">
<ResourcesContent
@@ -220,25 +216,33 @@ export default function ResourcePage({ params: { lang } }: LangProps) {
</div>
</section>
</AppContent>
<section className="relative border-t border-tuatara-600 bg-[#D0F2FF] py-32 text-center">
<AppContent className="flex flex-col gap-6">
<Banner
title={
<h3 className="py-2 font-display text-[18px] font-bold text-tuatara-950 md:text-3xl">
{t("addResourceQuestion")}
</h3>
<Link
href={siteConfig.addGithubResource}
target="_blank"
rel="noreferrer"
passHref
>
<Button>
<div className="flex items-center gap-2">
<span className="text-[14px]">{t("addSource")}</span>
</div>
</Button>
</Link>
</AppContent>
</section>
}
>
<Link
href={siteConfig.links.discord}
className="pb-6"
target="_blank"
rel="noreferrer"
passHref
>
<Button>
<div className="flex items-center gap-1">
<Icons.discord size={18} />
<span className="text-[14px] uppercase">
{common("connectWithUsOnPlatform", {
platform: "Discord",
})}
</span>
<Icons.externalUrl size={20} />
</div>
</Button>
</Link>
</Banner>
</main>
)
}

18
app/i18n/locales/en/about-page.json
View File

@@ -2,30 +2,38 @@
"title": "About our team",
"description": "PSE is an Ethereum Foundation supported research and development lab dedicated to testing use cases for cryptographic primitives. We build open source infrastructure and tools, host workshops and summer programs, and collaborate with people bringing cryptography to life.",
"our-principles-title": "Our Principles",
"banner": {
"title": "Connect with us",
"subtitle": "Join our discord to learn more about our research, connect with our community, and keep posted about jobs and grant opportunities!"
},
"principles": [
{
"title": "01. Cryptography for people",
"description": [
"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."
"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."
]
},
{
"title": "02. Prioritizing privacy",
"description": [
"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."
"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."
]
},
{
"title": "03. Scaling for communities",
"description": [
"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 programs for students and lecture series that are open to everyone interested in building with cryptography."
"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 programs for students and lecture series that are open to everyone interested in building with cryptography."
]
},
{
"title": "04. Collective exploration",
"description": [
"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."
"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."
]
}
]
}
}

4
app/i18n/locales/en/common.json
View File

@@ -72,5 +72,7 @@
"showingProjectsWith": "Showing {{count}} projects with:",
"connectWithUsOnPlatform": "Connect with us on {{platform}}",
"addResource": "Add a resource",
"notCurrentlyActive": "Not Currently Active"
"notCurrentlyActive": "Not Currently Active",
"connectWithUs": "Connect with us",
"connectWithUsDescription": "Connect with our community on Discord to try out new apps, build with our tools, and contribute to projects!"
}

4
app/i18n/locales/en/homepage.json
View File

@@ -5,5 +5,5 @@
"whoWeAreDescription": "PSE is a research lab building free tools that expand the world of cryptography.",
"howToPlugIn": "How to plug in",
"howToPlugInDescription": "Try out our apps, build with our tools, contribute to projects, or check out our job openings. We welcome contributions from around the world!",
"joinOurDiscord": "Join our community"
}
"joinOurDiscord": "Join our discord"
}

2
app/i18n/locales/zh-TW/about-page.json
View File

@@ -7,7 +7,7 @@
"title": "01. 面向大眾的密碼學",
"description": [
"密碼學無處不在：每次您連接到安全網站、使用密碼登錄或解鎖手機時，都在使用密碼學。",
"通過「可程式化」密碼學（例如零知識證明（ZKP）、多方計算（MPC）或同態加密（FHE）），我們可以對秘密訊息產生可驗證的聲明，而不必揭露訊息本身。這可以應用於身份管理、抵抗共謀、匿名通訊等眾多領域。",
"通過「可程式化」密碼學 (例如零知識證明 (ZKP)、多方計算（MPC）或同態加密（FHE）），我們可以對秘密訊息產生可驗證的聲明，而不必揭露訊息本身。這可以應用於身份管理、抵抗共謀、匿名通訊等眾多領域。",
"我們正在建立一系列開源且自由供所有人使用的開發工具、研究論文和軟體原型。我們希望我們的資源能啟發人們去創造他們社群所需的新科技。"
]
},

35
components/banner.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { ReactNode } from "react"
import { AppContent } from "./ui/app-content"
type BannerProps = {
title: ReactNode
subtitle?: string
children?: ReactNode
}
const Banner = ({ title, subtitle, children }: BannerProps) => {
return (
<section className="relative border-t border-tuatara-600 bg-anakiwa-default text-center">
<div className="bg-classic-gradient py-16">
<AppContent className="flex flex-col gap-6">
<div className="flex flex-col items-center text-center">
{typeof title === "string" ? (
<h6 className="py-4 font-sans text-base font-bold uppercase tracking-[4px] text-tuatara-950">
{title}
</h6>
) : (
title
)}
{subtitle && <p className="md:max-w-[600px]">{subtitle}</p>}
</div>
{children}
</AppContent>
</div>
</section>
)
}
Banner.displayName = "Banner"
export { Banner }

3
components/page-header.tsx
View File

@@ -21,11 +21,10 @@ const PageHeader = ({
actions,
children,
image,
contentWidth = 600,
}: PageHeaderProps) => {
return (
<div className="bg-second-gradient">
<AppContent className="flex w-full flex-col gap-14 md:py-20">
<AppContent className="flex w-full flex-col gap-14 py-12 md:py-20">
<div className="flex flex-col items-start justify-between gap-5 md:flex-row md:gap-28">
<div className="flex w-full flex-col justify-center gap-8 md:max-w-[700px] lg:gap-14">
<div className="flex flex-col gap-8">

66
components/sections/WhatWeDo.tsx
View File

@@ -34,37 +34,39 @@ export const WhatWeDo = ({ lang }: LangProps["params"]) => {
]
return (
<>
<AppContent>
<section className="flex flex-col gap-16 py-16 md:pb-24">
<div className="flex flex-col text-center">
<h6 className="py-6 font-sans text-base font-bold uppercase tracking-[4px] text-tuatara-950">
{t("whatWeDo")}
</h6>
<h3 className="font-display text-[18px] font-bold text-tuatara-950 md:text-3xl">
{t("whatWeDoDescription")}
</h3>
</div>
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
{content.map((item, index) => (
<article
className="flex flex-col gap-2 rounded-[6px] bg-white/30 px-8 py-4"
key={index}
>
<div className="flex items-center gap-2">
<item.icon />
<h6 className="font-sans text-base font-bold uppercase tracking-[4px] text-anakiwa-700">
{item.title}
</h6>
</div>
<p className="font-sans text-base text-tuatara-950">
{item.description}
</p>
</article>
))}
</div>
</section>
</AppContent>
</>
<div className="border-t border-tuatara-600 bg-anakiwa-200">
<div className="bg-classic-gradient">
<AppContent>
<section className="flex flex-col gap-16 py-16 md:pb-24">
<div className="flex flex-col text-center">
<h6 className="py-6 font-sans text-base font-bold uppercase tracking-[4px] text-tuatara-950">
{t("whatWeDo")}
</h6>
<h3 className="font-display text-[18px] font-bold text-tuatara-950 md:text-3xl">
{t("whatWeDoDescription")}
</h3>
</div>
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
{content.map((item, index) => (
<article
className="border-tuatara-300 flex flex-col gap-2 rounded-[6px] border bg-white px-8 py-4"
key={index}
>
<div className="flex items-center gap-2">
<item.icon />
<h6 className="font-sans text-base font-bold uppercase tracking-[4px] text-anakiwa-700">
{item.title}
</h6>
</div>
<p className="font-sans text-base text-tuatara-950">
{item.description}
</p>
</article>
))}
</div>
</section>
</AppContent>
</div>
</div>
)
}

8
components/site-footer.tsx
View File

@@ -32,14 +32,6 @@ export function SiteFooter({ lang }: LangProps["params"]) {
return (
<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">
{t("footer.description")}
</h1>
</div>
</div>
<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>

2
components/ui/accordion.tsx
View File

@@ -34,7 +34,7 @@ const Accordion = ({
value={value}
key={accordionIndex}
>
<RadixAccordion.Trigger className="flex w-full items-center justify-between border-t border-t-black py-6 ring-0 focus:outline-none">
<RadixAccordion.Trigger className="flex w-full items-center justify-between border-t border-t-anakiwa-300 py-6 ring-0 focus:outline-none">
<span className="block text-left font-sans text-base font-bold uppercase tracking-[3.36px] text-black md:text-xl md:tracking-[4.2px]">
{label}
</span>

17
components/ui/label.tsx
View File

@@ -1,5 +1,21 @@
import { cn } from "@/lib/utils"
interface LabelProps {
label: React.ReactNode
className?: string
}
const SectionTitle = ({ label, className = "" }: LabelProps) => {
return (
<h3
className={cn(
"font-sans text-base font-bold uppercase leading-[24px] tracking-[3.36px] text-tuatara-950",
className
)}
>
{label}
</h3>
)
}
const MainPageTitle = ({ label }: LabelProps) => {
@@ -13,6 +29,7 @@ const MainPageTitle = ({ label }: LabelProps) => {
const Label = {
displayName: "Label",
PageTitle: MainPageTitle,
Section: SectionTitle,
}
export { Label }

12
tailwind.config.js
View File

@@ -8,11 +8,13 @@ module.exports = {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
screens: {
"2xl": "1400px",
"medium": "978px",
},
translate: {
center: "translate(-50%, -50%)",
},
@@ -21,6 +23,8 @@ module.exports = {
"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%)",
"second-gradient":
"radial-gradient(56.07% 115.65% at 93.66% 158.94%, #D0F8F1 0%, #D1F3FF 18.23%, #ECF8FF 51.28%, #E1FFFA 80.21%, #D0F2FF 93.23%)",
"classic-gradient": "radial-gradient(325.52% 79.63% at 100% -0.02%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(205.45% 61.89% at 2.34% 99.98%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%)"
},
colors: {
corduroy: "#4A5754",
@@ -30,6 +34,7 @@ module.exports = {
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
anakiwa: {
default: "#D0F2FF",
50: "#F2FAFD",
100: "hsl(var(--anakiwa))",
100: "#E4F3FA",
@@ -45,6 +50,7 @@ module.exports = {
tuatara: {
100: "#E5E6E8",
200: "#CDCFD4",
300: "#AAADB6",
400: "#808590",
500: "#656A75",
600: "#565964",