From f7351e4f27c71abb923a1cc893a96b9c5a3d871e Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 19 Mar 2024 14:35:22 +0000 Subject: [PATCH] resources page --- app/[lang]/about/page.tsx | 50 ++++++++++-------- app/[lang]/page.tsx | 56 ++++++++++---------- app/[lang]/resources/page.tsx | 72 ++++++++++++++------------ app/i18n/locales/en/about-page.json | 18 +++++-- app/i18n/locales/en/common.json | 4 +- app/i18n/locales/en/homepage.json | 4 +- app/i18n/locales/zh-TW/about-page.json | 2 +- components/banner.tsx | 35 +++++++++++++ components/page-header.tsx | 3 +- components/sections/WhatWeDo.tsx | 66 +++++++++++------------ components/site-footer.tsx | 8 --- components/ui/accordion.tsx | 2 +- components/ui/label.tsx | 17 ++++++ tailwind.config.js | 12 +++-- 14 files changed, 207 insertions(+), 142 deletions(-) create mode 100644 components/banner.tsx diff --git a/app/[lang]/about/page.tsx b/app/[lang]/about/page.tsx index 07b4773..e023363 100644 --- a/app/[lang]/about/page.tsx +++ b/app/[lang]/about/page.tsx @@ -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 = { - "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 ( -
+
- -
{t("our-principles-title")}
+ + + {principle.description?.map( (description: string, index: number) => { return

{description}

@@ -97,6 +82,25 @@ export default async function AboutPage({ params: { lang } }: any) { ]} /> + + + + + +
) } diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx index 07d0bda..a21471f 100644 --- a/app/[lang]/page.tsx +++ b/app/[lang]/page.tsx @@ -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 ( -
+
- {ct("exploreProjectLibrary")} + {common("exploreProjectLibrary")} -
+
-
- -
-
- {t("howToPlugIn")} -
-

{t("howToPlugInDescription")}

-
- - - - -
+ + + + +
) diff --git a/app/[lang]/resources/page.tsx b/app/[lang]/resources/page.tsx index b0eed65..bcfd996 100644 --- a/app/[lang]/resources/page.tsx +++ b/app/[lang]/resources/page.tsx @@ -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" > -
+
- {label} + + {label} +
- +
-

{description}

+

{description}

) } @@ -74,15 +73,12 @@ const ResourceCard = ({ id, title, children }: ResourceCardProps) => {
-

- {title} -

-
{children}
+ +
+ {children} +
) } @@ -199,7 +195,7 @@ export default function ResourcePage({ params: { lang } }: LangProps) { } /> - +
-
- + {t("addResourceQuestion")} - - - - -
+ } + > + + + + ) } diff --git a/app/i18n/locales/en/about-page.json b/app/i18n/locales/en/about-page.json index 3cc7d84..6f32847 100644 --- a/app/i18n/locales/en/about-page.json +++ b/app/i18n/locales/en/about-page.json @@ -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." ] } ] -} \ No newline at end of file +} diff --git a/app/i18n/locales/en/common.json b/app/i18n/locales/en/common.json index 152dd15..aee2da9 100644 --- a/app/i18n/locales/en/common.json +++ b/app/i18n/locales/en/common.json @@ -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!" } \ No newline at end of file diff --git a/app/i18n/locales/en/homepage.json b/app/i18n/locales/en/homepage.json index 8ffcd23..2a339ac 100644 --- a/app/i18n/locales/en/homepage.json +++ b/app/i18n/locales/en/homepage.json @@ -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" -} \ No newline at end of file + "joinOurDiscord": "Join our discord" +} diff --git a/app/i18n/locales/zh-TW/about-page.json b/app/i18n/locales/zh-TW/about-page.json index 58313ce..7981480 100644 --- a/app/i18n/locales/zh-TW/about-page.json +++ b/app/i18n/locales/zh-TW/about-page.json @@ -7,7 +7,7 @@ "title": "01. 面向大眾的密碼學", "description": [ "密碼學無處不在：每次您連接到安全網站、使用密碼登錄或解鎖手機時，都在使用密碼學。", - "通過「可程式化」密碼學（例如零知識證明（ZKP）、多方計算（MPC）或同態加密（FHE）），我們可以對秘密訊息產生可驗證的聲明，而不必揭露訊息本身。這可以應用於身份管理、抵抗共謀、匿名通訊等眾多領域。", + "通過「可程式化」密碼學 (例如零知識證明 (ZKP)、多方計算（MPC）或同態加密（FHE）），我們可以對秘密訊息產生可驗證的聲明，而不必揭露訊息本身。這可以應用於身份管理、抵抗共謀、匿名通訊等眾多領域。", "我們正在建立一系列開源且自由供所有人使用的開發工具、研究論文和軟體原型。我們希望我們的資源能啟發人們去創造他們社群所需的新科技。" ] }, diff --git a/components/banner.tsx b/components/banner.tsx new file mode 100644 index 0000000..678a6b1 --- /dev/null +++ b/components/banner.tsx @@ -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 ( +
+
+ +
+ {typeof title === "string" ? ( +
+ {title} +
+ ) : ( + title + )} + {subtitle &&

{subtitle}

} +
+ {children} + +
+
+ ) +} + +Banner.displayName = "Banner" + +export { Banner } diff --git a/components/page-header.tsx b/components/page-header.tsx index 5facb41..4c992d8 100644 --- a/components/page-header.tsx +++ b/components/page-header.tsx @@ -21,11 +21,10 @@ const PageHeader = ({ actions, children, image, - contentWidth = 600, }: PageHeaderProps) => { return (
- +
diff --git a/components/sections/WhatWeDo.tsx b/components/sections/WhatWeDo.tsx index fb7eab8..3d0cc90 100644 --- a/components/sections/WhatWeDo.tsx +++ b/components/sections/WhatWeDo.tsx @@ -34,37 +34,39 @@ export const WhatWeDo = ({ lang }: LangProps["params"]) => { ] return ( - <> - -
-
-
- {t("whatWeDo")} -
-

- {t("whatWeDoDescription")} -

-
-
- {content.map((item, index) => ( -
-
- -
- {item.title} -
-
-

- {item.description} -

-
- ))} -
-
- - +
+
+ +
+
+
+ {t("whatWeDo")} +
+

+ {t("whatWeDoDescription")} +

+
+
+ {content.map((item, index) => ( +
+
+ +
+ {item.title} +
+
+

+ {item.description} +

+
+ ))} +
+
+ +
+
) } diff --git a/components/site-footer.tsx b/components/site-footer.tsx index b18894b..86cb2d6 100644 --- a/components/site-footer.tsx +++ b/components/site-footer.tsx @@ -32,14 +32,6 @@ export function SiteFooter({ lang }: LangProps["params"]) { return (