Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

design version v1.4 #152

Merged
merged 16 commits into from
Mar 21, 2024
Merged

design version v1.4 #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3b923a0
design version v1.4
kalidiagne Mar 19, 2024
2a1a19a
project pages updates
kalidiagne Mar 19, 2024
f7351e4
resources page
kalidiagne Mar 19, 2024
c170a31
projects page fixs
kalidiagne Mar 19, 2024
eda03ae
add project details page
kalidiagne Mar 19, 2024
7e11d89
fix padding
kalidiagne Mar 19, 2024
0a36914
hidden bar on mobile
kalidiagne Mar 19, 2024
d473d86
fix mobile tags
kalidiagne Mar 19, 2024
8436b07
header add current open page
kalidiagne Mar 19, 2024
fc39b39
page header gradient
kalidiagne Mar 19, 2024
5f8e7a1
fix copy
kalidiagne Mar 19, 2024
ea5782c
max with homepage
kalidiagne Mar 19, 2024
3acb3b9
fixs mobile
kalidiagne Mar 20, 2024
49277e0
footer new design
kalidiagne Mar 20, 2024
924e606
fix type errors
kalidiagne Mar 20, 2024
f2e53fc
add illustration for projects page
kalidiagne Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 65 additions & 42 deletions app/[lang]/about/page.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading