Skip to content

Commit

Permalink
Merge pull request #152 from privacy-scaling-explorations/design-alig…
Browse files Browse the repository at this point in the history 
…nments-and-fixs

design version v1.4
  • Loading branch information
@ChialiT
ChialiT authored Mar 21, 2024
2 parents 92b6b90 + f2e53fc commit fa5d6ea
Show file tree
Hide file tree
Showing 45 changed files with 824 additions and 479 deletions.
107 changes: 65 additions & 42 deletions app/[lang]/about/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,66 @@
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 { 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")

const principles: any[] =
t("principles", {
returnObjects: true,
}) ?? []

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>
<div className="bg-white">
<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>
<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={[
Expand All @@ -65,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>
Expand All @@ -78,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>
)
}
81 changes: 40 additions & 41 deletions app/[lang]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,35 +9,42 @@ 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"
import { WhatWeDo } from "@/components/sections/WhatWeDo"

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">
<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">
<section className="flex flex-col">
<PageHeader
title={
<motion.h1
initial={{ y: 16, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.8, cubicBezier: "easeOut" }}
>
<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">
<span className="text-base font-medium uppercase">
{ct("exploreProjectLibrary")}
{common("exploreProjectLibrary")}
</span>
<Icons.arrowRight
fill="white"
Expand All @@ -46,43 +53,35 @@ 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} />
<div className="flex flex-col">
<NewsSection lang={lang} />

<div className="bg-radial-gradient 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>
)
Expand Down
11 changes: 6 additions & 5 deletions app/[lang]/projects/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ export default async function ProjectDetailPage({ params }: PageProps) {
const hasSocialLinks = Object.keys(currProject?.links ?? {}).length > 0

return (
<section className="flex flex-col items-center">
<div className="flex w-full flex-col items-center justify-center gap-5 bg-anakiwa-100 px-6 py-16 md:px-0">
<div className=" w-full md:w-[700px]">
<section className="flex flex-col items-center bg-project-page-gradient">
<div className="flex w-full flex-col items-center justify-center gap-5 px-6 py-8 md:px-0 md:py-16">
<div className=" w-full md:max-w-[644px]">
<div className="flex flex-col">
<div className="flex flex-col gap-6 text-left">
<Link
Expand Down Expand Up @@ -119,9 +119,10 @@ export default async function ProjectDetailPage({ params }: PageProps) {
)}
</div>
)}
<div className="mt-10 hidden h-[1px] w-full bg-anakiwa-300 md:block"></div>
</div>

<div className="mt-[50px] flex w-full flex-col gap-6 md:w-[700px]">
<div className="mt-6 flex w-full flex-col gap-6 md:mt-[50px]">
<div className="relative flex items-center justify-center overflow-hidden rounded-lg">
<Image
src={`/project-banners/${
Expand All @@ -133,7 +134,7 @@ export default async function ProjectDetailPage({ params }: PageProps) {
className="w-full rounded-t-lg object-cover"
/>
{!currProject?.image && (
<span className="w-full px-5 text-3xl text-center font-bold text-black absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
<span className="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 px-5 text-center text-3xl font-bold text-black">
{currProject?.imageAlt || currProject?.name}
</span>
)}
Expand Down
38 changes: 21 additions & 17 deletions app/[lang]/projects/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -16,25 +18,27 @@ 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} />
<PageHeader
title={t("title")}
subtitle={t("subtitle")}
image={
<div className="mx-auto lg:absolute lg:right-36">
<Image
width={280}
height={280}
className="mx-auto w-[160px] md:w-[180px] lg:ml-auto lg:w-[200px] xl:w-[260px]"
src="/icons/lens.webp"
alt="lens icon"
/>
</div>
</div>
</div>
}
>
<ProjectFiltersBar lang={lang} />
</PageHeader>

<div className="w-full bg-anakiwa-100 pb-28">
<div className="container">
<div className="py-8">
<div className="w-full bg-white pb-28">
<div className="container flex flex-col gap-14 py-8">
<div>
<ProjectResultBar lang={lang} />
</div>
<ProjectList lang={lang} />
Expand Down
Loading

0 comments on commit fa5d6ea

Please sign in to comment.