Merge pull request #159 from privacy-scaling-explorations/design-v1/5

update to design v1.5
privacy-scaling-explorations · Mar 29, 2024 · 850b1be · 850b1be
2 parents ee12414 + ad51e5a
commit 850b1be
Show file tree

Hide file tree

Showing 15 changed files with 498 additions and 555 deletions.
diff --git a/app/[lang]/about/page.tsx b/app/[lang]/about/page.tsx
@@ -7,6 +7,7 @@ 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 { Divider } from "@/components/divider"
 import { Icons } from "@/components/icons"
 import { PageHeader } from "@/components/page-header"
 import { useTranslation } from "@/app/i18n"
@@ -21,7 +22,7 @@ export default async function AboutPage({ params: { lang } }: any) {
     }) ?? []
 
   return (
-    <div className="bg-white">
+    <Divider.Section className="bg-white">
       <PageHeader
         title={t("title")}
         subtitle={t("description")}
@@ -55,32 +56,34 @@ export default async function AboutPage({ params: { lang } }: any) {
         }
       />
 
-      <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={[
-            ...principles?.map((principle: any, index: number) => {
-              return {
-                label: principle?.title,
-                value: index.toString(),
-                children: (
-                  <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>
-                      }
-                    )}
-                  </span>
-                ),
-              }
-            }),
-          ]}
-        />
-      </AppContent>
+      <div className="flex justify-center">
+        <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={[
+              ...principles?.map((principle: any, index: number) => {
+                return {
+                  label: principle?.title,
+                  value: index.toString(),
+                  children: (
+                    <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>
+                        }
+                      )}
+                    </span>
+                  ),
+                }
+              }),
+            ]}
+          />
+        </AppContent>
+      </div>
 
       <Banner title={t("banner.title")} subtitle={t("banner.subtitle")}>
         <Link
@@ -100,6 +103,6 @@ export default async function AboutPage({ params: { lang } }: any) {
           </Button>
         </Link>
       </Banner>
-    </div>
+    </Divider.Section>
   )
 }
diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx
@@ -4,11 +4,13 @@ import Image from "next/image"
 import Link from "next/link"
 import PSELogo from "@/public/icons/archstar.webp"
 import { motion } from "framer-motion"
+import { Divide } from "lucide-react"
 
 import { siteConfig } from "@/config/site"
 import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
 import { Banner } from "@/components/banner"
+import { Divider } from "@/components/divider"
 import { Icons } from "@/components/icons"
 import { PageHeader } from "@/components/page-header"
 import { ConnectWithUs } from "@/components/sections/ConnectWithUs"
@@ -23,40 +25,44 @@ export default function IndexPage({ params: { lang } }: any) {
 
   return (
     <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>
-        }
-        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">
-                  {common("exploreProjectLibrary")}
-                </span>
-                <Icons.arrowRight
-                  fill="white"
-                  className="h-5 duration-200 ease-in-out group-hover:translate-x-2"
-                />
-              </div>
-            </Button>
-          </Link>
-        }
-      />
+      <Divider.Section>
+        <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>
+          }
+          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">
+                    {common("exploreProjectLibrary")}
+                  </span>
+                  <Icons.arrowRight
+                    fill="white"
+                    className="h-5 duration-200 ease-in-out group-hover:translate-x-2"
+                  />
+                </div>
+              </Button>
+            </Link>
+          }
+        />
 
-      <div className="flex flex-col">
         <NewsSection lang={lang} />
 
         <WhatWeDo lang={lang} />
@@ -84,7 +90,7 @@ export default function IndexPage({ params: { lang } }: any) {
             </Button>
           </Link>
         </Banner>
-      </div>
+      </Divider.Section>
     </section>
   )
 }