From 1d8ff21bfc04a9eb258b4cb8f379ac130774395c Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 29 Jul 2025 15:12:25 +0200 Subject: [PATCH] homepage/about v1.3 --- app/(pages)/about/page.tsx | 182 ++++++++-------- app/(pages)/page.tsx | 39 +++- app/labels.ts | 58 ++--- components/banner.tsx | 2 +- components/sections/HomepageVideoFeed.tsx | 2 +- components/sections/WhatWeDo.tsx | 75 +++---- components/site-footer.tsx | 251 ++++++++++------------ components/ui/button.tsx | 12 +- hooks/useAppSettings.ts | 27 --- public/logos/pse-badge-blue.svg | 33 --- tailwind.config.js | 1 + 11 files changed, 311 insertions(+), 371 deletions(-) delete mode 100644 public/logos/pse-badge-blue.svg diff --git a/app/(pages)/about/page.tsx b/app/(pages)/about/page.tsx index 100e804..07b4b79 100644 --- a/app/(pages)/about/page.tsx +++ b/app/(pages)/about/page.tsx @@ -1,15 +1,7 @@ import Link from "next/link" -import { siteConfig } from "@/config/site" -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 { Divider } from "@/components/divider" -import { Icons } from "@/components/icons" -import { LABELS } from "@/app/labels" -import { interpolate } from "@/lib/utils" + import { Metadata } from "next" export const metadata: Metadata = { @@ -18,89 +10,107 @@ export const metadata: Metadata = { } export default async function AboutPage() { - const principles = LABELS.ABOUT_PAGE.PRINCIPLES + const OurWorkItems = [ + { + label: "Incubation", + description: + "We research and build open source public goods like protocols, primitives, and products.", + }, + { + label: "Education", + description: + "We create resources to help Ethereum devs and users make informed choices about privacy.", + }, + { + label: "Coordination", + description: + "We push for better privacy standards by aligning efforts across the ecosystem and guiding policy conversations.", + }, + ] return (
- - -
- {LABELS.ABOUT_PAGE.DESCRIPTION} -
- - - + +
+

+ Our Mission +

+ + As Privacy Stewards of Ethereum (PSE), our mission is to deliver + privacy to the Ethereum ecosystems.

+ But building{" "} + + “an open society in the electronic age” + + { + "requires privacy that is usable, scalable, and secure. We are a team of applied cryptographers, mathematicians, developers, designers, and coordinators working to embed programmable cryptography into Ethereum's application layer and make privacy accessible to developers." + }{" "} +

+ Privacy is a cornerstone of freedom and an{" "} + + important guarantor for decentralization. + + We envision a future where digital infrastructure respects privacy + by default, and permissions are purpose-specific, informed, + uncoerced, and revocable.We envision a future where digital + infrastructure respects privacy by default, and permissions are + purpose-specific, informed, uncoerced, and revocable. +

+ {`Programmable cryptography unlocks transformative capabilities for + digital voting, identity, transactions, and other systems of + coordination. But the road to privacy isn't only technical. It + requires shifts in user behavior, developer priorities, regulatory + thinking, and cultural norms. This is a collective challenge, and we + invite you to help us shape a more private and free digital future.`} + +
+ +
+

+ Our Work +

+
+ {OurWorkItems?.map((item, index) => ( +
+
+
+ {item.label} +
+

+ {item.description} +

+
+
+ ))} +
+
+ +
+

+ Our History +

+ + We began in 2018 as Applied ZKP, a team supported by the Ethereum + Foundation to push zero-knowledge proofs from theory to practice. + In 2021, we became Privacy & Scaling Explorations (PSE), expanding + our scope to programmable cryptography and tools across the stack. + In 2025, we refined our mission as Privacy Stewards for Ethereum, + shifting our focus toward ecosystem impact. + +
- -
- - - { - return { - label: principle.TITLE, - value: index.toString(), - children: ( - - {principle.DESCRIPTION.map( - (description: string, index: number) => { - return

{description}

- } - )} - - ), - } - }), - ]} - /> - -
- - - - - - -
) } diff --git a/app/(pages)/page.tsx b/app/(pages)/page.tsx index 81b8111..29892e1 100644 --- a/app/(pages)/page.tsx +++ b/app/(pages)/page.tsx @@ -7,6 +7,10 @@ import { BlogRecentArticles } from "@/components/blog/blog-recent-articles" import { HomepageHeader } from "@/components/sections/HomepageHeader" import { HomepageBanner } from "@/components/sections/HomepageBanner" import { Suspense } from "react" +import { Button } from "@/components/ui/button" +import { LABELS } from "../labels" +import { Icons } from "@/components/icons" +import Link from "next/link" function BlogSection() { return ( @@ -25,18 +29,37 @@ function BlogSection() { export default function IndexPage() { return ( -
- - +
+ - +
+
+ + {LABELS.HOMEPAGE.MISSION} + + + + +
+
- + - + - - + + +
) } diff --git a/app/labels.ts b/app/labels.ts index ee931d8..0b3b324 100644 --- a/app/labels.ts +++ b/app/labels.ts @@ -1,44 +1,12 @@ export const LABELS = { ABOUT_PAGE: { - 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.", - ], - }, - { - 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.", - ], - }, - { - 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.", - ], - }, - { - 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.", - ], - }, - ], }, BLOG_PAGE: { TITLE: "Blog", @@ -172,9 +140,12 @@ export const LABELS = { MORE_POSTS: "More posts", }, HOMEPAGE: { - HEADER_TITLE: "Privacy + Scaling Explorations", + MISSION: + "We believe Ethereum is the foundation of a freer digital world, but we will not reach its full potential without privacy. We’re building cryptographic tools, co-creating standards, and coordinating throughout the ecosystem to make privacy practical for Ethereum.", + MISSION_BUTTON: "LEARN MORE ABOUT US", + HEADER_TITLE: "Privacy Stewards of Ethereum", HEADER_SUBTITLE: - "PSE is a research and development lab with a mission of making cryptography useful for human collaboration. We build open source tooling with things like zero-knowledge proofs, multiparty computation, homomorphic encryption, Ethereum, and more.", + "PSE is a research and development lab delivering privacy to the Ethereum ecosystem", WHO_WE_ARE: "Who we are", WHO_WE_ARE_DESCRIPTION: "PSE is a research lab building free tools that expand the world of cryptography.", @@ -329,20 +300,17 @@ export const LABELS = { WHAT_WE_DO: "What we do", WHAT_WE_DO_DESCRIPTION: "PSE is a multidisciplinary team creating open source privacy and scaling tools for the next generation's internet.", - PRIVACY: { - TITLE: "Privacy", + BUILD: { + TITLE: "Build", DESCRIPTION: - "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.", + "We develop open source tools for things like data provenance, private identity, voting, and more to make privacy a core feature of Ethereum's application layer.", + ACTION: "See our projects", }, - SCALING: { - TITLE: "Scaling", + RESEARCH: { + TITLE: "Research", DESCRIPTION: - "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: { - TITLE: "Explorations", - DESCRIPTION: - "We are mapping the emerging zero knowledge ecosystem through collective experimentation. We collaborate, share what we learn, and welcome contributions from around the world.", + "We benchmark primitives, systematize knowledge, and explore new ideas with the potential to transform the capabilities and impact of programmable cryptography.", + ACTION: "See our research", }, }, CORE_PROGRAM_FAQ: [ diff --git a/components/banner.tsx b/components/banner.tsx index 6d660d4..06789ef 100644 --- a/components/banner.tsx +++ b/components/banner.tsx @@ -22,7 +22,7 @@ const Banner = ({ title, subtitle, children }: BannerProps) => { title )} {subtitle && ( - + {subtitle} )} diff --git a/components/sections/HomepageVideoFeed.tsx b/components/sections/HomepageVideoFeed.tsx index 682a793..503737b 100644 --- a/components/sections/HomepageVideoFeed.tsx +++ b/components/sections/HomepageVideoFeed.tsx @@ -70,7 +70,7 @@ export const HomepageVideoFeed = () => { const { data: videos = [], isLoading, isError } = useYoutube() return ( -
+

diff --git a/components/sections/WhatWeDo.tsx b/components/sections/WhatWeDo.tsx index 6a08ce5..3e17f8f 100644 --- a/components/sections/WhatWeDo.tsx +++ b/components/sections/WhatWeDo.tsx @@ -4,58 +4,61 @@ import { LABELS } from "@/app/labels" import { Icons } from "../icons" import { AppContent } from "../ui/app-content" +import { Button } from "../ui/button" +import Link from "next/link" -type WhatWeDoContent = { title: string; description: string; icon: any } +type WhatWeDoContent = { + title: string + description: string + icon: any + action?: string + link: string +} export const WhatWeDo = () => { const content: WhatWeDoContent[] = [ { - title: LABELS.WHAT_WE_DO_SECTION.PRIVACY.TITLE, - description: LABELS.WHAT_WE_DO_SECTION.PRIVACY.DESCRIPTION, + title: LABELS.WHAT_WE_DO_SECTION.BUILD.TITLE, + description: LABELS.WHAT_WE_DO_SECTION.BUILD.DESCRIPTION, + action: LABELS.WHAT_WE_DO_SECTION.BUILD.ACTION, + link: "/projects", icon: Icons.privacy, }, { - title: LABELS.WHAT_WE_DO_SECTION.SCALING.TITLE, - description: LABELS.WHAT_WE_DO_SECTION.SCALING.DESCRIPTION, + title: LABELS.WHAT_WE_DO_SECTION.RESEARCH.TITLE, + description: LABELS.WHAT_WE_DO_SECTION.RESEARCH.DESCRIPTION, + action: LABELS.WHAT_WE_DO_SECTION.RESEARCH.ACTION, + link: "/research", icon: Icons.scaling, }, - { - title: LABELS.WHAT_WE_DO_SECTION.EXPLORATIONS.TITLE, - description: LABELS.WHAT_WE_DO_SECTION.EXPLORATIONS.DESCRIPTION, - icon: Icons.explorations, - }, ] return ( -
- -
-
-
- {LABELS.WHAT_WE_DO_SECTION.WHAT_WE_DO} -
-

- {LABELS.WHAT_WE_DO_SECTION.WHAT_WE_DO_DESCRIPTION} -

-
-
+
+ +
+
+ {LABELS.WHAT_WE_DO_SECTION.WHAT_WE_DO} +
+
{content.map((item, index) => ( -
-
-
- -
-
+
+
+
{item.title}
-
-

- {item.description} -

-
+

+ {item.description} +

+ + {item.action && ( + + + + )} +
))}
diff --git a/components/site-footer.tsx b/components/site-footer.tsx index 0e3ecce..7a79c94 100644 --- a/components/site-footer.tsx +++ b/components/site-footer.tsx @@ -50,139 +50,124 @@ export function SiteFooter() { return (
- -
- logo PSE - - {LABELS.COMMON.FOOTER.DESCRIPTION} - -
-
-
{/* spacer */}
- - {MAIN_NAV.map( - ( - { title, href, external = false, onlyHeader }: NavItem, - indexKey - ) => - !onlyHeader && ( - - - - ) - )} - - - - } - /> - - - } - /> - - - - -
- } - /> - - - - -
- } - /> - - - - -
- } - /> - - - - - - - - - - - - - - - - -

+ + + {MAIN_NAV.map( + ( + { title, href, external = false, onlyHeader }: NavItem, + indexKey + ) => + !onlyHeader && ( + + + + ) + )} + + + + } + /> + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + } + /> + + + + + + + + + + + + + + + + diff --git a/components/ui/button.tsx b/components/ui/button.tsx index d7e0177..320f407 100644 --- a/components/ui/button.tsx +++ b/components/ui/button.tsx @@ -25,6 +25,8 @@ const buttonVariants = cva( blue: "bg-anakiwa-950 text-white", search: "bg-[#F6F7F7] hover:bg-[#E9ECEF] text-gray-500 border border-gray-200 rounded-md", + transparent: + "bg-transparent text-white border text-anakiwa-400 border-anakiwa-400 border", }, size: { default: "h-10 py-2 px-4 text-lg", @@ -35,7 +37,15 @@ const buttonVariants = cva( }, compoundVariants: [ { - variant: ["default", "orange", "black", "white", "blue", "search"], + variant: [ + "default", + "orange", + "black", + "white", + "blue", + "search", + "transparent", + ], className: "dark:bg-transparent dark:border dark:border-anakiwa-400 dark:text-anakiwa-400 dark:hover:bg-anakiwa-400/20 dark:hover:text-anakiwa-400", }, diff --git a/hooks/useAppSettings.ts b/hooks/useAppSettings.ts index 2e73f01..45e78e4 100644 --- a/hooks/useAppSettings.ts +++ b/hooks/useAppSettings.ts @@ -19,33 +19,6 @@ export function useAppSettings() { title: LABELS.COMMON.MENU.BLOG, href: "/blog", }, - /* - { - title: LABELS.COMMON.MENU.HOME, - href: "/", - onlyMobile: true, - }, - - { - title: "Devcon 7", - href: "/devcon-7", - onlyFooter: true, - }, - */ - /* - { - title: LABELS.COMMON.MENU.PROGRAMS, - href: "/programs", - onlyFooter: true, - }, - */ - - /* - { - title: LABELS.COMMON.MENU.RESOURCES, - href: "/resources", - }, - */ ] return { diff --git a/public/logos/pse-badge-blue.svg b/public/logos/pse-badge-blue.svg deleted file mode 100644 index 473e4c9..0000000 --- a/public/logos/pse-badge-blue.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/tailwind.config.js b/tailwind.config.js index e2bf0ba..4dc5c11 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -53,6 +53,7 @@ module.exports = { 900: "#184F62", 800: "#175E75", 950: "#103241", + 975: "#081519", }, tuatara: { 100: "#E5E6E8",