design version v1.4

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<string, { width: number; height: number }> = {
@@ -27,6 +32,7 @@ const PrincipleImageSizes: Record<string, { width: number; height: number }> = {
 
 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 (
     <div className="bg-anakiwa-50">
-      <div className="bg-second-gradient">
-        <AppContent className="flex gap-[56px]">
-          <div className="grid w-full grid-cols-1 gap-16 py-10 lg:grid-cols-[1fr_1fr] lg:gap-2 lg:py-20">
-            <div className="flex w-full flex-col gap-8 lg:max-w-[650px]">
-              <Label.PageTitle label={t("title")} />
-              <span className="font-sans text-base font-normal leading-[27px] text-tuatara-950">
-                {t("description")}
-              </span>
-            </div>
-            <Image
-              width={280}
-              height={280}
-              className="mx-auto h-[210px] w-[210px] lg:ml-auto lg:h-[320px] lg:w-[320px]"
-              src="/logos/pse-logo-bg.svg"
-              alt="pse logo"
-            />
-          </div>
-        </AppContent>
-      </div>
+      <PageHeader
+        title={t("title")}
+        subtitle={t("description")}
+        image={
+          <Image
+            width={280}
+            height={280}
+            className="mx-auto h-[210px] w-[210px] lg:ml-auto lg:h-[320px] lg:w-[320px]"
+            src="/logos/pse-logo-bg.svg"
+            alt="pse logo"
+          />
+        }
+        actions={
+          <Link
+            href={siteConfig.links.discord}
+            target="_blank"
+            rel="noreferrer"
+            passHref
+          >
+            <Button>
+              <div className="flex items-center gap-2">
+                <span className="text-[14px] uppercase">
+                  {common("connectWithUsOnPlatform", {
+                    platform: "Discord",
+                  })}
+                </span>
+                <Icons.arrowRight fill="white" className="h-5" />
+              </div>
+            </Button>
+          </Link>
+        }
+      />
 
       <AppContent className="flex flex-col gap-4 py-16 md:py-24">
         <h6 className="font-display text-4xl">{t("our-principles-title")}</h6>

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 (
     <section className="flex flex-col bg-main-gradient">
-      <AppContent className="flex w-full flex-col justify-between gap-5 p-7 md:flex-row">
-        <div className="flex w-full flex-col justify-center gap-8 md:max-w-[700px] lg:gap-14">
+      <PageHeader
+        title={
           <motion.h1
             initial={{ y: 16, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
@@ -30,9 +31,14 @@ export default function IndexPage({ params: { lang } }: any) {
           >
             <Label.PageTitle label={t("headerTitle")} />
           </motion.h1>
-          <h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[20px]">
-            {t("headerSubtitle")}
-          </h6>
+        }
+        subtitle={t("headerSubtitle")}
+        image={
+          <div className="m-auto flex h-[320px] w-full max-w-[280px] items-center justify-center md:m-0 md:h-full md:w-full lg:max-w-[380px]">
+            <Image src={PSELogo} alt="pselogo" style={{ objectFit: "cover" }} />
+          </div>
+        }
+        actions={
           <Link href={`/projects`} className="group flex items-center gap-2">
             <Button className="w-full sm:w-auto">
               <div className="flex items-center gap-1">
@@ -46,11 +52,8 @@ export default function IndexPage({ params: { lang } }: any) {
               </div>
             </Button>
           </Link>
-        </div>
-        <div className="m-auto flex h-[320px] w-full max-w-[280px] items-center justify-center md:m-0 md:h-full md:w-full lg:max-w-[380px]">
-          <Image src={PSELogo} alt="pselogo" style={{ objectFit: "cover" }} />
-        </div>
-      </AppContent>
+        }
+      />
 
       <NewsSection lang={lang} />
 

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 (
     <>
-      <div className="bg-anakiwa-200">
-        <div className="container mx-auto py-10 lg:py-20">
-          <div className="flex flex-col justify-between gap-10">
-            <div>
-              <h1 className="font-display text-4xl font-bold text-tuatara-950 md:text-5xl"></h1>
-              <p className="p-2"></p>
-              <p className="w-full text-lg md:w-[612px] md:text-xl">
-                {t("subtitle")}
-              </p>
-            </div>
-            <div className="h-[1px] w-20 bg-anakiwa-500"></div>
-            <ProjectFiltersBar lang={lang} />
-          </div>
-        </div>
-      </div>
+      <PageHeader title={t("title")} subtitle={t("subtitle")}>
+        <ProjectFiltersBar lang={lang} />
+      </PageHeader>
 
       <div className="w-full bg-anakiwa-100 pb-28">
         <div className="container">

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}}"
 }

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."
-}
+}

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 (
+    <div className="bg-second-gradient">
+      <AppContent className="flex w-full flex-col gap-14 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">
+              <Label.PageTitle label={title} />
+              {subtitle && (
+                <h6 className="font-sans text-base font-normal text-tuatara-950 md:text-[18px] md:leading-[27px]">
+                  {subtitle}
+                </h6>
+              )}
+            </div>
+            {actions}
+          </div>
+          {image}
+        </div>
+        {children && (
+          <div className="flex flex-col gap-10">
+            <div className="h-[1px] w-20 bg-anakiwa-500"></div>
+            {children}
+          </div>
+        )}
+      </AppContent>
+    </div>
+  )
+}
+
+PageHeader.displayName = "PageHeader"
+
+export { PageHeader }