From 3b923a0420ac1ce59c7be39e7cac7b2c103b5b5c Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 19 Mar 2024 11:07:21 +0000 Subject: [PATCH] design version v1.4 --- app/[lang]/about/page.tsx | 57 +++++++++++++++++--------- app/[lang]/page.tsx | 23 ++++++----- app/[lang]/projects/page.tsx | 20 +++------ app/i18n/locales/en/common.json | 3 +- app/i18n/locales/en/projects-page.json | 3 +- components/page-header.tsx | 56 +++++++++++++++++++++++++ public/images/lens.svg | 9 ++++ 7 files changed, 125 insertions(+), 46 deletions(-) create mode 100644 components/page-header.tsx create mode 100644 public/images/lens.svg diff --git a/app/[lang]/about/page.tsx b/app/[lang]/about/page.tsx index dd2457c..07b4773 100644 --- a/app/[lang]/about/page.tsx +++ b/app/[lang]/about/page.tsx @@ -1,9 +1,14 @@ import React from "react" import Image from "next/image" +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 { Icons } from "@/components/icons" +import { PageHeader } from "@/components/page-header" import { useTranslation } from "@/app/i18n" const PrincipleImageSizes: Record = { @@ -27,6 +32,7 @@ const PrincipleImageSizes: Record = { export default async function AboutPage({ params: { lang } }: any) { const { t } = await useTranslation(lang, "about-page") + const { t: common } = await useTranslation(lang, "common") const principles: any[] = t("principles", { @@ -35,25 +41,38 @@ export default async function AboutPage({ params: { lang } }: any) { return (
-
- -
-
- - - {t("description")} - -
- pse logo -
- -
+ + } + actions={ + + + + } + />
{t("our-principles-title")}
diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx index f33b832..07d0bda 100644 --- a/app/[lang]/page.tsx +++ b/app/[lang]/page.tsx @@ -10,6 +10,7 @@ import { AppContent } from "@/components/ui/app-content" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Icons } from "@/components/icons" +import { PageHeader } from "@/components/page-header" import { NewsSection } from "@/components/sections/NewsSection" import { WhatWeDo } from "@/components/sections/WhatWeDo" @@ -21,8 +22,8 @@ export default function IndexPage({ params: { lang } }: any) { return (
- -
+ -
- {t("headerSubtitle")} -
+ } + subtitle={t("headerSubtitle")} + image={ +
+ pselogo +
+ } + actions={ -
-
- pselogo -
- + } + /> diff --git a/app/[lang]/projects/page.tsx b/app/[lang]/projects/page.tsx index 619bc48..2856e31 100644 --- a/app/[lang]/projects/page.tsx +++ b/app/[lang]/projects/page.tsx @@ -1,5 +1,7 @@ import { Metadata } from "next" +import Image from "next/image" +import { PageHeader } from "@/components/page-header" import ProjectFiltersBar from "@/components/project/project-filters-bar" import { ProjectList } from "@/components/project/project-list" import { ProjectResultBar } from "@/components/project/project-result-bar" @@ -16,21 +18,9 @@ export default async function ProjectsPage({ params: { lang } }: any) { return ( <> -
-
-
-
-

-

-

- {t("subtitle")} -

-
-
- -
-
-
+ + +
diff --git a/app/i18n/locales/en/common.json b/app/i18n/locales/en/common.json index 55f6681..4517720 100644 --- a/app/i18n/locales/en/common.json +++ b/app/i18n/locales/en/common.json @@ -69,5 +69,6 @@ "filters": "Filters", "whatDoYouWantDoToday": "What do you want to do today?", "showingProjects": "Showing {{count}} projects", - "showingProjectsWith": "Showing {{count}} projects with:" + "showingProjectsWith": "Showing {{count}} projects with:", + "connectWithUsOnPlatform": "Connect with us on {{platform}}" } \ No newline at end of file diff --git a/app/i18n/locales/en/projects-page.json b/app/i18n/locales/en/projects-page.json index 17bf41e..34b5a7c 100644 --- a/app/i18n/locales/en/projects-page.json +++ b/app/i18n/locales/en/projects-page.json @@ -1,3 +1,4 @@ { + "title": "Explore the library", "subtitle": "PSE is home to many projects, from cryptography research to developer tools, protocols and proof-of-concept applications." -} +} \ No newline at end of file diff --git a/components/page-header.tsx b/components/page-header.tsx new file mode 100644 index 0000000..5facb41 --- /dev/null +++ b/components/page-header.tsx @@ -0,0 +1,56 @@ +import { ReactNode } from "react" +import { t } from "i18next" + +import { cn } from "@/lib/utils" + +import { AppContent } from "./ui/app-content" +import { Label } from "./ui/label" + +type PageHeaderProps = { + title: ReactNode + subtitle?: string + actions?: ReactNode + children?: ReactNode + image?: ReactNode + contentWidth?: number +} + +const PageHeader = ({ + title, + subtitle, + actions, + children, + image, + contentWidth = 600, +}: PageHeaderProps) => { + return ( +
+ +
+
+
+ + {subtitle && ( +
+ {subtitle} +
+ )} +
+ {actions} +
+ {image} +
+ {children && ( +
+
+ {children} +
+ )} + +
+ ) +} + +PageHeader.displayName = "PageHeader" + +export { PageHeader } diff --git a/public/images/lens.svg b/public/images/lens.svg new file mode 100644 index 0000000..7530104 --- /dev/null +++ b/public/images/lens.svg @@ -0,0 +1,9 @@ + + + + + + + + +