Merge branch 'dev'

# Conflicts: # .github/workflows/build_deploy_master.yml # package-lock.json # src/components/Hero.tsx # src/components/How.tsx # src/components/Navbar.tsx # src/config.json
2026-01-07 22:13:56 -05:00 · 2024-06-17 11:43:38 +02:00
parent 2235d49787 4431abbd6d
commit 54dedc0d95
109 changed files with 6711 additions and 17680 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
--- a/.github/workflows/build_deploy_master.yml
+++ b/.github/workflows/build_deploy_master.yml
@@ -2,30 +2,26 @@ name: Build & Deploy to Pages

 on:
  push:
-    branches: [ master ]
+    branches: [master]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

-
 jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout 🛒
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4

-      - name: Install and Build
-        run: |
-          npm ci
-          npm run prerender
+      - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
+        uses: ./.github/workflows/setup-node

-      - name: Deploy to gh-pages branch
-        uses: JamesIves/github-pages-deploy-action@v4.4.3
+      - name: Setup Pages ⚙️
+        uses: actions/configure-pages@v4
        with:
-          branch: gh-pages
-          folder: build
+          static_site_generator: next

      # - name: Push to Web3.storage
      #   uses: web3-storage/add-to-web3@v2
@@ -36,3 +32,15 @@ jobs:

      # - run: echo ${{ steps.web3.outputs.cid }}
      # - run: echo ${{ steps.web3.outputs.url }}
+
+      - name: Build with Next.js 🏗️
+        run: npx next build
+
+      - name: Upload artifact 📡
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: out
+
+      - name: Publish to GitHub Pages 🚀
+        uses: actions/deploy-pages@v4
+
--- a/.github/workflows/build_dev.yml
+++ b/.github/workflows/build_dev.yml
@@ -2,14 +2,13 @@ name: Build Dev

 on:
  push:
-    branches: [ dev ]
+    branches: [dev]
  pull_request:
-    branches: [ dev ]
+    branches: [dev]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

-
 jobs:
  build-and-deploy-dev:
    permissions:
@@ -20,15 +19,16 @@ jobs:

    steps:
      - name: Checkout 🛒
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4

-      - name: Install and Build
-        run: |
-          npm ci
-          npm run prerender
+      - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧
+        uses: ./.github/workflows/setup-node

-      - name: Deploy to gh-pages-dev branch
-        uses: JamesIves/github-pages-deploy-action@v4.4.3
+      - name: Setup Pages ⚙️
+        uses: actions/configure-pages@v4
        with:
-          branch: gh-pages-dev
-          folder: build
+          static_site_generator: next
+
+      - name: Build with Next.js 🏗️
+        run: npx next build
+
--- a/.github/workflows/setup-node/action.yml
+++ b/.github/workflows/setup-node/action.yml
@@ -0,0 +1,21 @@
+name: setup-node
+description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧"
+runs:
+  using: "composite"
+  steps:
+    - name: Setup Node.js ⚙️
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+
+    - name: Cache dependencies ⚡
+      id: cache_dependencies
+      uses: actions/cache@v3
+      with:
+        path: node_modules
+        key: node-modules-${{ hashFiles('package-lock.json') }}
+
+    - name: Install dependencies 🔧
+      shell: bash
+      if: steps.cache_dependencies.outputs.cache-hit != 'true'
+      run: npm ci
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz

 # testing
 /coverage
@@ -20,6 +21,25 @@ build-*
 .env.test.local
 .env.production.local

+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# next.js
+/.next/
+/out/
+
+# misc
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/README.md
+++ b/README.md
@@ -7,56 +7,12 @@ This is the React re-write of the PSE website, formally just a landing page.

 `npm install`

-`npm run start` serves a development server at [http://localhost:8081](http://localhost:8081)
+`npm run dev` serves a development server at [http://localhost:8080](http://localhost:8080)

-The components live under `/src/components`.
+The app live under `/app`.

 ## How to contribute

-### Add / Change a Project Entry
-
-All the projects are stored in the `projects.json` file in `/src/data/`
-
-Here is an example of a project's entry:
-
-``` json
-{
-    "name": "TLS Notary",
-    "short_name": "TLSN",
-    "description": "Black Magic",
-    "long_description": "Black Magic",
-    "image": "tlsn.png",
-    "links": [
-      {
-        "github": "https://github.com/tlsnotary/tlsn"
-      },
-      {
-        "discord": "https://discord.gg/EjpvcEaqkh"
-      }
-    ]
-  }
-```
-
-Which results in this project card:
-
-![TLSN_Example](TLSN_Example.png)
-
-#### Name / Short Name
-
-`name` is the name of the project, and `short_name` is the name that will be used for a placeholder image if an image isn't included or can't be found.
-
-#### Description / Long Description
-
-`description` is the description of the project in roughly the size of a tweet (so it fits on the project card), and `long_description` is the description that will be used for the project's page/pop out card (in the works now).
-
-#### Project Logos / Images
-
-Project logos/images are stored in `/src/images` and the file name needs to be listed in the project's entry in `projects.json` as `"image": "filename.png"`.
-
-#### Links
-
-Links can be `website`, `github`, `discord`, `twitter`, or `telegram`. If you want more options like that added (like Reddit for example), please create an [issue](https://github.com/AtHeartEngineering/pse_landingpage/issues/new).
-
 ### Have an idea?

 Create an [issue](https://github.com/AtHeartEngineering/pse_landingpage/issues/new) and tell us the idea!
--- a/TLSN_Example.png
+++ b/TLSN_Example.png
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -0,0 +1,55 @@
+import { AppContainer } from "../../components/AppContainer";
+import { Section } from "../../components/Section";
+import { Button } from "../../components/ui/Button";
+import React from "react";
+import { LINKS } from "../settings";
+import { Banner } from "../../components/ui/Banner";
+import { LABELS } from "../../content";
+import { AppLink } from "@/components/AppLink";
+
+export default function AboutPage() {
+  return (
+    <main>
+      <AppContainer className="flex flex-col gap-12 md:gap-20 pt-20 pb-16" size="small">
+        <Section
+          title={
+            <h2 className="text-primary font-semibold font-inter text-center text-[32px]">
+              {LABELS.ABOUT.WHO_WE_ARE.TITLE}
+            </h2>
+          }
+          description={LABELS.ABOUT.WHO_WE_ARE.DESCRIPTION}
+        >
+          <div className="mx-auto">
+            <AppLink href="" external showExternalIcon>
+              <Button variant="transparent">{LABELS.COMMON.VIEW_DOCUMENTATION}</Button>
+            </AppLink>
+          </div>
+        </Section>
+
+        <Section
+          title={
+            <h2 className="text-primary font-semibold font-inter text-center text-[32px]">
+              {LABELS.ABOUT.GET_INVOLVED.TITLE}
+            </h2>
+          }
+          description={LABELS.ABOUT.GET_INVOLVED.DESCRIPTION}
+        >
+          <div className="mx-auto">
+            <AppLink href={LINKS.GITHUB} external showExternalIcon>
+              <Button variant="transparent">{LABELS.COMMON.CHECKOUT_GITHUB}</Button>
+            </AppLink>
+          </div>
+        </Section>
+      </AppContainer>
+      <Banner
+        title={LABELS.COMMON.CONNECT_WITH_US.TITLE}
+        description={LABELS.COMMON.CONNECT_WITH_US.DESCRIPTION}
+        actions={
+          <AppLink href={LINKS.DISCORD} external>
+            <Button variant="primary">{LABELS.COMMON.JOIN_DISCORD}</Button>
+          </AppLink>
+        }
+      />
+    </main>
+  );
+}
--- a/app/faq/page.tsx
+++ b/app/faq/page.tsx
@@ -0,0 +1,48 @@
+import { AppMarkdown } from "@/components/AppMarkdown";
+import { AppContainer } from "../../components/AppContainer";
+import { Section } from "../../components/Section";
+import { Accordion } from "../../components/ui/Accordion";
+import { LABELS } from "../../content";
+import { FAQS } from "../../content/faq";
+import React from "react";
+
+export default function FAQPage() {
+  return (
+    <main>
+      <AppContainer size="small" className="flex flex-col py-16 md:py-[120px]">
+        <Section
+          title={
+            <h2 className="text-primary text-center font-bold font-inter text-[32px] md:text-[56px]">
+              {LABELS.COMMON.FAQ}
+            </h2>
+          }
+        >
+          <div className="flex flex-col gap-6">
+            {FAQS.map(({ answer, question }, index) => {
+              return (
+                <Accordion label={question} key={index}>
+                  <AppMarkdown
+                    customComponents={{
+                      p: ({ ...props }) => (
+                        <p
+                          className="block overflow-hidden pt-4 text-primary text-sm leading-5 font-sans font-normal"
+                          {...props}
+                        />
+                      ),
+                      strong: ({ ...props }) => <span className="font-bold" {...props} />,
+                      a: ({ ...props }) => (
+                        <a className="font-semibold underline" target="_blank" rel="noopener noreferrer" {...props} />
+                      ),
+                    }}
+                  >
+                    {answer}
+                  </AppMarkdown>
+                </Accordion>
+              );
+            })}
+          </div>
+        </Section>
+      </AppContainer>
+    </main>
+  );
+}
--- a/app/favicon.ico
+++ b/app/favicon.ico
--- a/app/globals.css
+++ b/app/globals.css
@@ -0,0 +1,44 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@keyframes appear {
+  from { opacity: 0; scale: 0.8; }
+  to { opacity: 1; scale: 1; }
+}
+
+
+.shadow-card {
+  box-shadow: 5px 39px 28px 0px rgba(0, 0, 0, 0.06);
+}
+
+.appear {
+  animation: appear linear both;
+  animation-timeline: view();
+  animation-range: entry 25% cover 45%;
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import { Inter, DM_Sans } from "next/font/google";
+import "./globals.css";
+import { AppFooter } from "../components/AppFooter";
+import { AppHeader } from "../components/AppHeader";
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
+const sans = DM_Sans({ subsets: ["latin"], variable: "--font-sans", display: "swap" });
+
+export const metadata: Metadata = {
+  title: "TLSNotary",
+  description: "Proof of data authenticity",
+  openGraph: {
+    images: [
+      {
+        url: "/images/og-image.png",
+        width: 1200,
+        height: 800,
+      },
+    ],
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${inter.className} ${inter.variable} ${sans.variable} font-inter`}>
+        <AppHeader />
+        {children}
+        <AppFooter />
+      </body>
+    </html>
+  );
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -0,0 +1,130 @@
+import { AppLink } from "@/components/AppLink";
+import { AppContainer } from "../components/AppContainer";
+import { Banner, BannerTitle, BannerWrapper } from "../components/ui/Banner";
+import { Button } from "../components/ui/Button";
+import { Label } from "../components/ui/Label";
+import { LABELS } from "../content";
+import { LINKS } from "./settings";
+import { Icons } from "@/components/Icons";
+import { Section } from "@/components/Section";
+import Image from "next/image";
+import { classed } from "@tw-classed/react";
+
+interface ComparisonTableProps {
+  title: string;
+  tls: boolean;
+  tlsNotary: boolean;
+}
+
+const TableWrapper = classed.div("grid grid-cols-4 ");
+const TableTitle = classed.h4("font-semibold text-[15px] text-inter text-brown-50 uppercase");
+const TableContent = classed.div("p-4");
+
+const ComparisonTable = ({ title, tls, tlsNotary }: ComparisonTableProps) => {
+  return (
+    <TableWrapper>
+      <TableContent className=" col-span-2">
+        <span className="text-primary font-semibold text-lg text-inter">{title}</span>
+      </TableContent>
+      <TableContent className="m-auto">{tls ? <Icons.Check /> : <Icons.X />}</TableContent>
+      <TableContent className="m-auto">{tlsNotary ? <Icons.Check /> : <Icons.X />}</TableContent>
+    </TableWrapper>
+  );
+};
+
+export default function Home() {
+  return (
+    <main>
+      <AppContainer className="flex flex-col">
+        <div className="flex flex-col gap-8 md:gap-12 lg:gap-16 py-16 ">
+          <div className="flex flex-col gap-10">
+            <div className="flex flex-col gap-2 w-full lg:w-3/4">
+              <Label.Subtitle className=" ">{LABELS.HOMEPAGE.SUBTITLE}</Label.Subtitle>
+              <Label.Title>{LABELS.HOMEPAGE.TITLE}</Label.Title>
+            </div>
+            <span className="w-full lg:w-3/4 text-primary text-base font-inter md:text-xl font-medium">
+              {LABELS.HOMEPAGE.DESCRIPTION}
+            </span>
+          </div>
+
+          <AppLink href={LINKS.DOCUMENTATION} external>
+            <Button className="w-full md:w-auto">{LABELS.COMMON.CHECKOUT_DOCS}</Button>
+          </AppLink>
+        </div>
+        <Icons.DividerHomepage className="hidden md:flex mx-auto w-full" />
+      </AppContainer>
+
+      <AppContainer className="py-16 md:py-[120px] w-full lg:!max-w-[960px]">
+        <Section
+          title={
+            <h3 className="text-primary text-3xl text-center font-bold md:text-5xl  md:leading-[49px]">
+              {LABELS.HOMEPAGE.WHY_USE_TLSNOTARY.TITLE}
+            </h3>
+          }
+          description={LABELS.HOMEPAGE.WHY_USE_TLSNOTARY.DESCRIPTION}
+        >
+          <div className="relative w-full h-[200px] py-16">
+            <Image src="/images/infographic.svg" alt="infographic" fill />
+          </div>
+        </Section>
+      </AppContainer>
+
+      <AppContainer className="pb-16 md:pb-[120px]">
+        <div className="!max-w-[640px] mx-auto">
+          <TableWrapper className="px-8">
+            <div className=" col-span-2"></div>
+            <TableContent className="text-center">
+              <span className="text-primary font-bold py-4 font-inter text-xs md:text-2xl">TLS</span>
+            </TableContent>
+            <TableContent className="text-center">
+              <span className="text-primary font-bold py-4 font-inter text-xs md:text-2xl">TLSNotary</span>
+            </TableContent>
+          </TableWrapper>
+          <div className=" p-8 border border-gray-100 bg-gray rounded-xl">
+            <TableContent>
+              <TableTitle>{LABELS.COMMON.SERVER_AUTHENTICATION}</TableTitle>
+            </TableContent>
+            <ComparisonTable title="Data Origin" tls tlsNotary />
+            <ComparisonTable title="Data Integrity" tls tlsNotary />
+
+            <TableContent>
+              <TableTitle>{LABELS.COMMON.DATA_PORTABILITY}</TableTitle>
+            </TableContent>
+            <ComparisonTable title="Trustless" tls={false} tlsNotary />
+            <ComparisonTable title="Privacy Preserving" tls={false} tlsNotary />
+          </div>
+        </div>
+      </AppContainer>
+
+      <BannerWrapper color="gray">
+        <AppContainer className="flex flex-col gap-8">
+          <BannerTitle className="text-center" variant="primary">
+            {LABELS.COMMON.LEARN_THE_BASICS}
+          </BannerTitle>
+
+          <div className="mx-auto">
+            <iframe
+              className="w-full min-w-[360px] md:min-h-[320px] md:min-w-[560px]"
+              src="https://www.youtube.com/embed/bNGSdlvIPfI?si=xJSG43Go-JQGy_hs"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              // @ts-ignore
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+            />
+          </div>
+        </AppContainer>
+      </BannerWrapper>
+
+      <Banner
+        title={LABELS.HOMEPAGE.BUILD_WITH_US.TITLE}
+        description={LABELS.HOMEPAGE.BUILD_WITH_US.DESCRIPTION}
+        actions={
+          <AppLink href={LINKS.DISCORD} external>
+            <Button variant="primary">{LABELS.COMMON.JOIN_DISCORD}</Button>
+          </AppLink>
+        }
+      />
+    </main>
+  );
+}
--- a/app/settings.tsx
+++ b/app/settings.tsx
@@ -0,0 +1,88 @@
+import { Icons } from "../components/Icons";
+import { ReactNode } from "react";
+
+type NavItem = {
+  label: string;
+  href: string;
+  icon?: ReactNode;
+  external?: boolean;
+};
+
+// list of links used in the app
+export const LINKS = {
+  DISCORD: "https://discord.gg/9XwESXtcN7",
+  GITHUB: "https://github.com/tlsnotary/tlsn",
+  TWITTER: "https://twitter.com/tlsnotary",
+  DOCUMENTATION: "https://docs.tlsnotary.org/",
+  BLOG: "#",
+};
+
+// app header navigation
+export const NAVIGATION: NavItem[] = [
+  {
+    label: "About",
+    href: "/about",
+  },
+  {
+    label: "Use Cases",
+    href: "/use-cases",
+  },
+  {
+    label: "FAQ",
+    href: "/faq",
+  },
+  {
+    label: "Documentation",
+    href: LINKS.DOCUMENTATION,
+    external: true,
+  },
+  {
+    label: "API",
+    href: "https://tlsnotary.github.io/tlsn/",
+    external: true,
+  },
+];
+
+// app footer navigation
+export const SOCIALS_FOOTER: NavItem[] = [
+  {
+    label: "Discord",
+    href: LINKS.DISCORD,
+    external: true,
+    icon: <Icons.Discord />,
+  },
+  {
+    label: "GitHub",
+    href: LINKS.GITHUB,
+    external: true,
+    icon: <Icons.Github />,
+  },
+  {
+    label: "Twitter",
+    href: LINKS.TWITTER,
+    external: true,
+    icon: <Icons.Twitter />,
+  },
+];
+
+// app header socials
+export const SOCIALS_HEADER: NavItem[] = [
+  {
+    label: "Discord",
+    href: LINKS.DISCORD,
+    external: true,
+    icon: <Icons.DiscordCircle />,
+  },
+  {
+    label: "GitHub",
+    href: LINKS.GITHUB,
+    external: true,
+    icon: <Icons.GithubCircle />,
+  },
+  {
+    label: "Twitter",
+    href: LINKS.TWITTER,
+    external: true,
+    icon: <Icons.TwitterCircle />,
+  },
+];
--- a/app/use-cases/page.tsx
+++ b/app/use-cases/page.tsx
@@ -0,0 +1,88 @@
+import { AppLink } from "@/components/AppLink";
+import { Banner } from "@/components/ui/Banner";
+import { Button } from "@/components/ui/Button";
+import { LABELS } from "@/content";
+import React from "react";
+import { LINKS } from "../settings";
+import { AppContainer } from "@/components/AppContainer";
+import { Section } from "@/components/Section";
+import { ProjectList, WebsiteType } from "@/content/projects";
+import { Card } from "@/components/ui/Card";
+import { Icons } from "@/components/Icons";
+
+const IconMapping: Record<WebsiteType, React.ReactNode> = {
+  twitter: <Icons.Twitter className="text-white hover:text-brown-50 duration-200" />,
+  github: <Icons.Github className="text-white hover:text-brown-50 duration-200" />,
+  website: <Icons.Website className="text-white hover:text-brown-50 duration-200" />,
+};
+
+export default function UseCases() {
+  return (
+    <div className="flex flex-col">
+      <div className=" py-16">
+        <AppContainer className="flex flex-col gap-16 !max-w-[800px]">
+          <Section
+            title={
+              <h2 className=" text-primary font-semibold text-[32px] text-center">
+                {LABELS.USE_CASES.USE_CASES.TITLE}
+              </h2>
+            }
+            description={LABELS.USE_CASES.USE_CASES.DESCRIPTION}
+          ></Section>
+
+          <Section
+            title={
+              <h2 className=" text-primary font-semibold text-[32px] text-center">
+                {LABELS.USE_CASES.BUILD_WITH_TLSNOTARY}
+              </h2>
+            }
+          >
+            <div className="grid grid-cols-1  gap-5 md:grid-cols-2">
+              {ProjectList.map((project) => {
+                return (
+                  <Card.Base key={project.title}>
+                    <div className="flex flex-col gap-3">
+                      <h5 className=" text-white font-inter font-semibold text-[28px] leading-[28px]">
+                        {project.title}
+                      </h5>
+                      <div className=" min-h-[100px]">
+                        <span className="text-white text-sm font-normal font-inter line-clamp-5">{project.tldr}</span>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 mt-5">
+                      {Object.keys(project?.links ?? []).map((website, index) => {
+                        // @ts-ignore
+                        const url: string | undefined = project.links?.[website] ?? undefined;
+
+                        const icon: any = IconMapping[website as WebsiteType];
+
+                        if (!url) return null;
+                        if (!icon) return null;
+
+                        return (
+                          <AppLink key={index} href={url} external>
+                            {icon}
+                          </AppLink>
+                        );
+                      })}
+                    </div>
+                  </Card.Base>
+                );
+              })}
+            </div>
+          </Section>
+        </AppContainer>
+      </div>
+      <Banner
+        title={LABELS.USE_CASES.BANNER.TITLE}
+        description={LABELS.USE_CASES.BANNER.DESCRIPTION}
+        descriptionClass="text-center"
+        actions={
+          <AppLink href={LINKS.DISCORD} external>
+            <Button variant="primary">{LABELS.COMMON.JOIN_DISCORD}</Button>
+          </AppLink>
+        }
+      />
+    </div>
+  );
+}
--- a/components/AppContainer.tsx
+++ b/components/AppContainer.tsx
@@ -0,0 +1,13 @@
+import { classed } from "@tw-classed/react";
+
+export const AppContainer = classed.div("px-6 mx-auto w-full", {
+  variants: {
+    size: {
+      small: "max-w-[700px] md:px-0",
+      medium: "max-w-screen-2xl md:px-16",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
--- a/components/AppFooter.tsx
+++ b/components/AppFooter.tsx
@@ -0,0 +1,82 @@
+import { AppContainer } from "./AppContainer";
+import { Icons } from "./Icons";
+import { classed } from "@tw-classed/react";
+import { NAVIGATION, SOCIALS_FOOTER } from "../app/settings";
+import Link from "next/link";
+import { LABELS } from "../content";
+
+const NavLabel = classed.span("flex gap-2 items-center font-sans text-white-100 text-sm duration-300", {
+  variants: {
+    hover: {
+      true: "hover:text-gold",
+    },
+  },
+});
+
+export const AppFooter = () => {
+  return (
+    <div className="bg-primary">
+      <AppContainer className="py-8 flex gap-10 md:gap-0 flex-col md:flex-row justify-between">
+        <div className="flex flex-col md:flex-row items-center gap-[34px] my-auto">
+          <Link href="/">
+            <Icons.Logo className="text-gray" />
+          </Link>
+          <NavLabel className="text-center md:text-left md:max-w-[250px]">{LABELS.COMMON.FOOTER.TITLE}</NavLabel>
+        </div>
+        <div className="flex flex-col md:flex-row gap-10 md:gap-[100px]">
+          <div className="flex flex-col gap-6">
+            {NAVIGATION.map(({ label, href, external }, index) => {
+              if (external) return null;
+              return (
+                <Link
+                  className="flex md:block uppercase"
+                  key={index}
+                  href={href}
+                  target={external ? "_blank" : undefined}
+                >
+                  <NavLabel className="mx-auto" hover>
+                    {label}
+                  </NavLabel>
+                </Link>
+              );
+            })}
+          </div>
+          <div className="flex flex-col gap-6">
+            {NAVIGATION.map(({ label, href, external }, index) => {
+              if (!external) return null;
+              return (
+                <Link
+                  className="flex md:block uppercase group"
+                  key={index}
+                  href={href}
+                  target={external ? "_blank" : undefined}
+                >
+                  <NavLabel className="mx-auto" hover>
+                    {label}
+                  </NavLabel>
+                </Link>
+              );
+            })}
+          </div>
+          <div className="flex flex-col gap-6">
+            {SOCIALS_FOOTER.map(({ label, href, external, icon }, index) => {
+              return (
+                <Link
+                  className="flex md:block uppercase"
+                  key={index}
+                  href={href}
+                  target={external ? "_blank" : undefined}
+                >
+                  <NavLabel className="mx-auto" hover>
+                    {icon}
+                    {label}
+                  </NavLabel>
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+      </AppContainer>
+    </div>
+  );
+};
--- a/components/AppHeader.tsx
+++ b/components/AppHeader.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import Link from "next/link";
+import { AppContainer } from "./AppContainer";
+import { Icons } from "./Icons";
+import { NAVIGATION, SOCIALS_HEADER } from "../app/settings";
+import { classed } from "@tw-classed/react";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { cn } from "../shared/utils";
+import { LABELS } from "../content";
+
+const NavLabel = classed.span(
+  "relative overflow-hidden text-base md:text-lg text-primary font-semibold group-hover:text-brown-50 hover:text-gold duration-300 after:content-[''] after:h-1 after:w-full after:bottom-0 after:left-0 after:absolute p-2 duration-200",
+  {
+    variants: {
+      active: {
+        false: "after:bg-transparent",
+        true: "after:bg-brown-50",
+      },
+    },
+  }
+);
+
+const AppMobileNav = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="relative flex items-center lg:hidden">
+      <AppContainer className="flex w-full justify-between items-center py-4">
+        <Link href="/" type="button" aria-label="logo">
+          <Icons.Logo className="text-primary" size={48} />
+        </Link>
+        <button type="button" aria-label="burgher menu" onClick={() => setIsOpen(true)}>
+          <Icons.Burgher className="text-primary dark:text-white" />
+        </button>
+      </AppContainer>
+      {isOpen && (
+        <div
+          className="z-20 absolute inset-0 flex justify-end h-screen bg-black opacity-50"
+          onClick={() => setIsOpen(false)}
+        ></div>
+      )}
+      <div
+        className={cn(
+          "fixed h-screen overflow-hidden duration-200 inset-y-0 right-0 z-30 flex flex-col bg-white dark:bg-gray-1000 text-white",
+          {
+            "w-full": isOpen,
+            "w-0": !isOpen,
+          }
+        )}
+      >
+        <div className="flex justify-end p-6">
+          <button type="button" onClick={() => setIsOpen(false)} aria-label="toggle menu">
+            <Icons.Close className="text-primary dark:text-white" />
+          </button>
+        </div>
+        <div className="flex w-full flex-col px-[16px] text-base font-medium">
+          {NAVIGATION.map((item, index) => {
+            return (
+              <Link
+                key={index}
+                href={`${item.href}`}
+                onClick={() => setIsOpen(false)}
+                className="flex items-center py-3 gap-3"
+              >
+                <span className="capitalize text-primary text-lg dark:text-white duration-200 font-semibold hover:text-gray-900">
+                  {item.label}
+                </span>
+                {item.external && <Icons.ExternalLink className="text-primary" />}
+              </Link>
+            );
+          })}
+        </div>
+        <div className="flex h-full w-full flex-col items-center justify-end gap-5 py-[40px] text-sm">
+          <div className="flex gap-5">
+            {SOCIALS_HEADER.map(({ href, external, icon }, index) => {
+              return (
+                <Link
+                  className="text-primary hover:text-gold duration-300"
+                  key={index}
+                  href={href}
+                  target={external ? "_blank" : undefined}
+                >
+                  {icon}
+                </Link>
+              );
+            })}
+          </div>
+          <span className="text-center font-sans text-primary text-sm px-8">{LABELS.COMMON.FOOTER.TITLE}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const AppDesktopNav = () => {
+  const pathname = usePathname();
+
+  return (
+    <AppContainer className="hidden lg:py-[25px] lg:grid items-center grid-cols-[200px_1fr_200px]">
+      <Link href="/">
+        <Icons.Logo className="text-primary" />
+      </Link>
+      <div className="mx-auto flex items-center gap-16">
+        {NAVIGATION.map(({ label, href, external }, index) => {
+          const pathParts = href.split("/").filter(Boolean);
+          const isHome = pathname === "/" && href === "/";
+
+          // is home or the first part of the path matches the first part of the href
+          const isActive = isHome || (pathname !== null && pathParts[0] === pathname.split("/")[1]);
+
+          return (
+            <Link className="flex items-center group" key={index} href={href} target={external ? "_blank" : undefined}>
+              <NavLabel active={isActive}>{label}</NavLabel>
+              {external && <Icons.ExternalLink className="text-primary group-hover:text-brown-50 duration-200" />}
+            </Link>
+          );
+        })}
+      </div>
+      <div className="ml-auto">
+        <div className="flex gap-4">
+          {SOCIALS_HEADER.map(({ href, external, icon }, index) => {
+            return (
+              <Link
+                className="text-primary hover:text-gold duration-300"
+                key={index}
+                href={href}
+                target={external ? "_blank" : undefined}
+              >
+                {icon}
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </AppContainer>
+  );
+};
+
+export const AppHeader = () => {
+  return (
+    <header className="sticky right-0 left-0 top-0 bg-gray backdrop-blur-xl z-10">
+      <AppDesktopNav />
+      <AppMobileNav />
+    </header>
+  );
+};
--- a/components/AppLink.tsx
+++ b/components/AppLink.tsx
@@ -0,0 +1,35 @@
+import Link from "next/link";
+import React from "react";
+import { Icons } from "./Icons";
+import { cn } from "@/shared/utils";
+
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: React.ReactNode;
+  href: string;
+  external?: boolean;
+  showExternalIcon?: boolean;
+}
+
+/**
+ * This component easily manages internal and external links and adds the necessary attributes.
+ *
+ * @param {string} href - The URL of the link.
+ * @param {React.ReactNode} children - The content of the link.
+ * @param {boolean} external - If the link is external, in this case it will open in a new tab and also add rel="noreferrer noopener nofollow".
+ */
+export const AppLink = ({ href, children, external, className, showExternalIcon = false, ...props }: LinkProps) => {
+  return (
+    <Link
+      href={href}
+      target={external ? "_blank" : undefined}
+      rel={external ? "noreferrer noopener nofollow" : undefined}
+      className={cn(className, "flex items-center group")}
+      {...props}
+    >
+      {children}
+      {showExternalIcon && external && (
+        <Icons.ExternalLink className="text-brown-50 group-hover:text-brown-70 duration-300" />
+      )}
+    </Link>
+  );
+};
--- a/components/AppMarkdown.tsx
+++ b/components/AppMarkdown.tsx
@@ -0,0 +1,65 @@
+import ReactMarkdown, { Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import { Label } from "./ui/Label";
+import { createElement } from "react";
+
+export const createMarkdownElement = (tag: keyof JSX.IntrinsicElements, props: any) =>
+  createElement(tag, {
+    ...props,
+  });
+
+// Styling for HTML attributes for markdown component
+const REACT_MARKDOWN_CONFIG: Components = {
+  img: ({ node, className, ...props }) =>
+    createMarkdownElement("img", {
+      className: `${className} py-10`,
+      ...props,
+    }),
+  a: ({ node, ...props }) =>
+    createMarkdownElement("a", {
+      className: "text-orange",
+      target: "_blank",
+      ...props,
+    }),
+  u: ({ node, ...props }) =>
+    createMarkdownElement("span", {
+      className: "underline",
+      ...props,
+    }),
+  ins: ({ node, ...props }) =>
+    createMarkdownElement("span", {
+      className: "underline",
+      ...props,
+    }),
+  strong: ({ node, ...props }) =>
+    createMarkdownElement("span", {
+      className: "font-bold",
+      ...props,
+    }),
+  b: ({ node, ...props }) =>
+    createMarkdownElement("b", {
+      className: "font-bold",
+      ...props,
+    }),
+  span: ({ ...props }: any) => <Label.Paragraph {...props} />,
+  p: ({ ...props }: any) => <Label.Paragraph {...props} />,
+};
+
+interface MarkdownProps {
+  children: string;
+  customComponents?: Components;
+}
+
+export const AppMarkdown = ({ children, customComponents, ...props }: MarkdownProps) => {
+  return (
+    <ReactMarkdown
+      skipHtml={false}
+      components={{ ...REACT_MARKDOWN_CONFIG, ...customComponents }}
+      remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeRaw]}
+    >
+      {children}
+    </ReactMarkdown>
+  );
+};
--- a/components/Icons.tsx
+++ b/components/Icons.tsx
@@ -0,0 +1,179 @@
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+export const Icons: Record<string, any> = {
+  ExternalLink: (props: IconProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props?.size || 20}
+      height={props?.size || 21}
+      viewBox="0 0 20 21"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.06704 17.2267C3.25735 17.4169 3.53223 17.5331 3.81769 17.5331L3.80606 17.5204C4.08094 17.5204 4.35583 17.4042 4.5567 17.214L4.55776 17.2151L13.3348 8.44422V15.4201C13.3348 16.0011 13.7999 16.4766 14.392 16.4766C14.9735 16.4766 15.4492 16.0011 15.4492 15.4201V5.9115C15.4492 5.66553 15.367 5.44146 15.2291 5.26361C15.1993 5.22394 15.1664 5.18588 15.1302 5.14977C14.8641 4.88451 14.5017 4.78617 14.1669 4.855H4.87679C4.28473 4.855 3.81954 5.31986 3.81954 5.9115C3.81954 6.49258 4.28473 6.96801 4.87679 6.96801H11.8105L3.05647 15.7159V15.7265C2.64414 16.1385 2.64414 16.8147 3.06704 17.2267Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  Logo: (props: IconProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props?.size || "88"}
+      height={props?.size || "89"}
+      viewBox="0 0 88 89"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M25.5484 1.20899C25.5484 0.67436 26.1196 0.332624 26.5923 0.58442L33.6891 4.36446C33.9202 4.48756 34.0645 4.72766 34.0645 4.98902V9.94049H37.6129C38.0048 9.94049 38.3226 10.2575 38.3226 10.6485V21.9766L36.1936 20.5606V12.0645H34.0645V81.4919C34.0645 81.6134 34.0332 81.7328 33.9735 81.8388L30.4251 88.1388C30.1539 88.6204 29.459 88.6204 29.1878 88.1388L25.6394 81.8388C25.5797 81.7328 25.5484 81.6134 25.5484 81.4919V1.20899Z"
+        fill="currentColor"
+      />
+      <path d="M21.2903 26.2246V77.2012H12.7742V34.7207H0V26.2246H21.2903Z" fill="currentColor" />
+      <path d="M63.871 77.2012H72.3871V34.7207H76.6452V77.2012H85.1613V26.2246H63.871V77.2012Z" fill="currentColor" />
+      <path
+        d="M38.3226 26.2246H59.6129V34.7207H46.8387V47.4649H59.6129V77.2012H38.3226V68.7051H51.0968V55.9609H38.3226V26.2246Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  Close: (props: IconProps) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        id="Vector"
+        d="M12.0007 10.586L16.9507 5.63599L18.3647 7.04999L13.4147 12L18.3647 16.95L16.9507 18.364L12.0007 13.414L7.05072 18.364L5.63672 16.95L10.5867 12L5.63672 7.04999L7.05072 5.63599L12.0007 10.586Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  Burgher: (props: IconProps) => (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path id="Vector" d="M18 18V20H6V18H18ZM21 11V13H3V11H21ZM18 4V6H6V4H18Z" fill="currentColor" />
+    </svg>
+  ),
+  Discord: (props: IconProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props?.size || "15"}
+      height={props?.size || "13"}
+      viewBox="0 0 15 13"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M12.7105 1.75655C11.7595 1.32021 10.7398 0.998736 9.67358 0.814615C9.65416 0.811062 9.63476 0.819942 9.62476 0.837703C9.49361 1.07096 9.34834 1.37527 9.24661 1.61445C8.09983 1.44276 6.95893 1.44276 5.83567 1.61445C5.73392 1.36995 5.58337 1.07096 5.45164 0.837703C5.44163 0.820535 5.42224 0.811654 5.40282 0.814615C4.3372 0.998148 3.31745 1.31962 2.36591 1.75655C2.35767 1.7601 2.35061 1.76602 2.34592 1.77371C0.41167 4.66345 -0.118203 7.48215 0.141735 10.2659C0.142911 10.2795 0.150556 10.2926 0.161142 10.3008C1.43731 11.238 2.67349 11.807 3.88672 12.1841C3.90613 12.19 3.92671 12.1829 3.93906 12.1669C4.22605 11.775 4.48188 11.3618 4.70122 10.9272C4.71417 10.9018 4.70181 10.8716 4.67535 10.8615C4.26957 10.7076 3.88319 10.5199 3.51151 10.3068C3.48211 10.2896 3.47976 10.2475 3.5068 10.2274C3.58502 10.1688 3.66325 10.1078 3.73794 10.0462C3.75145 10.035 3.77028 10.0326 3.78616 10.0397C6.22792 11.1546 8.87141 11.1546 11.2843 10.0397C11.3002 10.032 11.3191 10.0344 11.3332 10.0457C11.4079 10.1072 11.4861 10.1688 11.5649 10.2274C11.5919 10.2475 11.5902 10.2896 11.5608 10.3068C11.1891 10.524 10.8027 10.7076 10.3963 10.8609C10.3699 10.871 10.3581 10.9018 10.3711 10.9272C10.5951 11.3612 10.8509 11.7744 11.1326 12.1663C11.1444 12.1829 11.1656 12.19 11.185 12.1841C12.4041 11.807 13.6403 11.238 14.9164 10.3008C14.9276 10.2926 14.9347 10.2801 14.9358 10.2665C15.2469 7.04817 14.4148 4.25258 12.7299 1.7743C12.7258 1.76602 12.7187 1.7601 12.7105 1.75655ZM5.06586 8.57089C4.33072 8.57089 3.72499 7.89598 3.72499 7.06712C3.72499 6.23826 4.31898 5.56335 5.06586 5.56335C5.8186 5.56335 6.41847 6.24419 6.4067 7.06712C6.4067 7.89598 5.81272 8.57089 5.06586 8.57089ZM10.0235 8.57089C9.28837 8.57089 8.68263 7.89598 8.68263 7.06712C8.68263 6.23826 9.2766 5.56335 10.0235 5.56335C10.7762 5.56335 11.3761 6.24419 11.3643 7.06712C11.3643 7.89598 10.7762 8.57089 10.0235 8.57089Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  Github: (props: IconProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props?.size || "18"}
+      height={props?.size || "17"}
+      viewBox="0 0 18 17"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M8.58004 1.41669C4.6665 1.41669 1.49671 4.58648 1.49671 8.50002C1.4959 9.98701 1.96336 11.4365 2.83277 12.6428C3.70218 13.8492 4.92939 14.7511 6.34029 15.2207C6.69446 15.2823 6.82691 15.0698 6.82691 14.8835C6.82691 14.7156 6.81771 14.1582 6.81771 13.5646C5.03837 13.8926 4.57796 13.1311 4.43629 12.7323C4.35625 12.5283 4.01129 11.9 3.71025 11.7314C3.46233 11.599 3.10816 11.271 3.70104 11.2625C4.25921 11.2533 4.65729 11.7761 4.79046 11.9886C5.42796 13.0596 6.44654 12.7585 6.85312 12.5729C6.91546 12.1125 7.10104 11.803 7.30504 11.6259C5.729 11.4488 4.08212 10.8375 4.08212 8.12815C4.08212 7.35748 4.35625 6.72069 4.80816 6.22414C4.73733 6.04706 4.48941 5.32102 4.879 4.34706C4.879 4.34706 5.47187 4.16148 6.82691 5.07381C7.40354 4.91377 7.99932 4.83322 8.59775 4.8344C9.19983 4.8344 9.80191 4.91373 10.3686 5.0731C11.7229 4.15227 12.3165 4.34777 12.3165 4.34777C12.7061 5.32173 12.4582 6.04777 12.3873 6.22485C12.8385 6.72069 13.1134 7.34898 13.1134 8.12815C13.1134 10.8467 11.458 11.4488 9.88196 11.6259C10.1384 11.8469 10.3601 12.2719 10.3601 12.9363C10.3601 13.8834 10.3509 14.6448 10.3509 14.8842C10.3509 15.0698 10.484 15.2908 10.8382 15.22C12.2443 14.7453 13.4661 13.8416 14.3316 12.6361C15.1972 11.4306 15.663 9.98406 15.6634 8.50002C15.6634 4.58648 12.4936 1.41669 8.58004 1.41669Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  Twitter: (props: IconProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props?.size || "18"}
+      height={props?.size || "17"}
+      viewBox="0 0 18 17"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M15.7782 4.00634C15.2374 4.24554 14.6639 4.40264 14.0768 4.47243C14.6957 4.10227 15.1589 3.51973 15.3801 2.83334C14.7993 3.17901 14.1625 3.42126 13.4988 3.5523C13.0529 3.07529 12.462 2.75894 11.8178 2.65242C11.1737 2.54591 10.5124 2.65519 9.93673 2.96329C9.36109 3.27139 8.90336 3.76104 8.63471 4.35611C8.36606 4.95119 8.30153 5.61835 8.45117 6.25388C7.27329 6.19485 6.12099 5.88876 5.06908 5.35548C4.01717 4.8222 3.08918 4.07367 2.34533 3.15847C2.08204 3.6107 1.94368 4.12479 1.94442 4.64809C1.94442 5.67518 2.46717 6.58255 3.26192 7.1138C2.79159 7.09899 2.33162 6.97198 1.92033 6.74334V6.78018C1.92048 7.46421 2.15718 8.12715 2.59031 8.65659C3.02344 9.18603 3.62634 9.54939 4.29679 9.68505C3.86019 9.80337 3.40239 9.82081 2.95804 9.73605C3.14707 10.3248 3.51551 10.8398 4.01175 11.2088C4.508 11.5777 5.10722 11.7823 5.7255 11.7938C5.11101 12.2764 4.40742 12.6331 3.65496 12.8436C2.9025 13.0541 2.11593 13.1143 1.34021 13.0206C2.69433 13.8914 4.27065 14.3538 5.88063 14.3523C11.3298 14.3523 14.3098 9.83805 14.3098 5.92309C14.3098 5.79559 14.3063 5.66668 14.3006 5.54059C14.8806 5.12138 15.3812 4.60206 15.7789 4.00705L15.7782 4.00634Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  Website: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 18 17" fill="none" {...props}>
+      <path
+        d="M9.24984 16.9179C4.64734 16.9179 0.916504 13.1871 0.916504 8.58459C0.916504 3.98208 4.64734 0.251251 9.24984 0.251251C13.8523 0.251251 17.5832 3.98208 17.5832 8.58459C17.5832 13.1871 13.8523 16.9179 9.24984 16.9179ZM7.3415 14.9738C6.51935 13.2298 6.04306 11.3431 5.939 9.41792H2.63484C2.79699 10.7003 3.32811 11.9081 4.16364 12.8943C4.99918 13.8806 6.10318 14.603 7.3415 14.9738ZM7.60817 9.41792C7.734 11.4504 8.31484 13.3596 9.24984 15.0446C10.2101 13.315 10.771 11.3925 10.8915 9.41792H7.60817ZM15.8648 9.41792H12.5607C12.4566 11.3431 11.9803 13.2298 11.1582 14.9738C12.3965 14.603 13.5005 13.8806 14.336 12.8943C15.1716 11.9081 15.7027 10.7003 15.8648 9.41792ZM2.63484 7.75125H5.939C6.04306 5.82607 6.51935 3.93932 7.3415 2.19542C6.10318 2.56615 4.99918 3.28855 4.16364 4.27483C3.32811 5.26112 2.79699 6.46884 2.63484 7.75125ZM7.609 7.75125H10.8907C10.7705 5.77675 10.2098 3.85419 9.24984 2.12458C8.28957 3.85413 7.72863 5.77669 7.60817 7.75125H7.609ZM11.1582 2.19542C11.9803 3.93932 12.4566 5.82607 12.5607 7.75125H15.8648C15.7027 6.46884 15.1716 5.26112 14.336 4.27483C13.5005 3.28855 12.3965 2.56615 11.1582 2.19542Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  DiscordCircle: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.744 18.8C17.984 19.104 18.272 19.448 18.272 19.448C20.04 19.392 20.72 18.232 20.72 18.232C20.72 15.656 19.568 13.568 19.568 13.568C18.416 12.704 17.32 12.728 17.32 12.728L17.208 12.856C18.568 13.272 19.2 13.872 19.2 13.872C18.368 13.416 17.552 13.192 16.792 13.104C16.216 13.04 15.664 13.056 15.176 13.12C15.1341 13.12 15.0983 13.1261 15.0579 13.133L15.04 13.136C14.76 13.16 14.08 13.264 13.224 13.64C12.928 13.776 12.752 13.872 12.752 13.872C12.752 13.872 13.416 13.24 14.856 12.824L14.776 12.728C14.776 12.728 13.68 12.704 12.528 13.568C12.528 13.568 11.376 15.656 11.376 18.232C11.376 18.232 12.048 19.392 13.816 19.448C13.816 19.448 14.112 19.088 14.352 18.784C13.336 18.48 12.952 17.84 12.952 17.84C12.952 17.84 13.032 17.896 13.176 17.976C13.184 17.984 13.192 17.992 13.208 18C13.22 18.008 13.232 18.014 13.244 18.02C13.256 18.026 13.268 18.032 13.28 18.04C13.48 18.152 13.68 18.24 13.864 18.312C14.192 18.44 14.584 18.568 15.04 18.656C15.64 18.768 16.344 18.808 17.112 18.664C17.488 18.6 17.872 18.488 18.272 18.32C18.552 18.216 18.864 18.064 19.192 17.848C19.192 17.848 18.792 18.504 17.744 18.8ZM13.736 16.6C13.736 16.112 14.096 15.712 14.552 15.712C15.008 15.712 15.376 16.112 15.368 16.6C15.368 17.088 15.008 17.488 14.552 17.488C14.104 17.488 13.736 17.088 13.736 16.6ZM16.656 16.6C16.656 16.112 17.016 15.712 17.472 15.712C17.928 15.712 18.288 16.112 18.288 16.6C18.288 17.088 17.928 17.488 17.472 17.488C17.024 17.488 16.656 17.088 16.656 16.6Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0ZM9 10.648C9 9.736 9.736 9 10.64 9H21.36C22.264 9 23 9.736 23 10.648V25L21.28 23.48L20.312 22.584L19.288 21.632L19.712 23.112H10.64C9.736 23.112 9 22.376 9 21.464V10.648Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  TwitterCircle: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.532715 16.834C0.532715 8.00056 7.69367 0.8396 16.5272 0.8396C25.3606 0.8396 32.5216 8.00056 32.5216 16.834C32.5216 25.6675 25.3606 32.8285 16.5272 32.8285C7.69367 32.8285 0.532715 25.6675 0.532715 16.834ZM22.625 12.3356C23.3248 12.2356 23.9246 12.1357 24.5244 11.8358C24.1245 12.5355 23.5247 13.1353 22.825 13.5352C23.0249 18.2336 19.6261 23.3318 13.5282 23.3318C11.7288 23.3318 10.0294 22.732 8.52994 21.8323C10.2293 22.0322 12.0287 21.5324 13.2283 20.6327C11.7288 20.6327 10.5292 19.6331 10.1294 18.3335C10.6292 18.4335 11.129 18.3335 11.6289 18.2336C10.1294 17.8337 9.02976 16.4342 9.02976 14.9347C9.52959 15.1346 10.0294 15.3346 10.5292 15.3346C9.12973 14.3349 8.6299 12.4356 9.52959 10.9361C11.229 12.9354 13.6282 14.2349 16.3272 14.3349C15.8274 12.3356 17.4268 10.3363 19.5261 10.3363C20.4258 10.3363 21.3255 10.7362 21.9253 11.336C22.725 11.136 23.4248 10.9361 24.0246 10.5362C23.8246 11.336 23.3248 11.9357 22.625 12.3356Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  ArrowUp: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M12 10.828L7.04999 15.778L5.63599 14.364L12 8L18.364 14.364L16.95 15.778L12 10.828Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  GithubCircle: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16ZM8 16.1675C8 11.7639 11.5718 8.192 15.9755 8.192C20.3792 8.192 23.951 11.7639 24 16.1675C24 19.6905 21.7492 22.6752 18.5688 23.7516C18.1774 23.8006 18.0306 23.5559 18.0306 23.3602V21.1584C18.0306 20.4244 17.7859 19.9351 17.4924 19.6905C19.2538 19.4948 21.1132 18.8587 21.1132 15.7761C21.1132 14.8954 20.7706 14.1614 20.2814 13.6232C20.2852 13.6078 20.2906 13.5885 20.297 13.5655C20.3719 13.2953 20.5892 12.5111 20.1835 11.5192C20.1835 11.5192 19.4985 11.3235 17.9816 12.351C17.3456 12.2042 16.6605 12.1064 15.9755 12.1064C15.2905 12.1064 14.6055 12.1553 13.9694 12.351C12.4526 11.3235 11.7676 11.5192 11.7676 11.5192C11.3351 12.5763 11.6105 13.3975 11.6669 13.5657L11.6697 13.5743C11.1315 14.1614 10.8379 14.8464 10.8379 15.7272C10.8379 18.8097 12.6973 19.4948 14.4587 19.6905C14.263 19.8862 14.0184 20.2287 13.9694 20.7669C13.5291 20.9626 12.4037 21.3052 11.6697 20.0819C11.6697 20.0819 11.2294 19.299 10.4465 19.2501C10.4465 19.2501 9.66364 19.2501 10.3976 19.7394C10.3976 19.7394 10.9358 19.9841 11.2783 20.9137C11.2783 20.9137 11.7676 22.4795 13.9694 21.9902V23.3602C13.9694 23.5559 13.8226 23.8006 13.4312 23.7516C10.2997 22.6752 8 19.6905 8 16.1675Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  DividerHomepage: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="766" height="112" viewBox="0 0 766 112" fill="none" {...props}>
+      <path
+        d="M7.08083 111.735C2.43838 111.735 -0.529098 106.775 1.65739 102.67L34.4815 41.045C35.5504 39.0382 37.6354 37.7849 39.9049 37.7849H82.9012V6.97233C82.9012 3.56887 85.6537 0.809822 89.0492 0.809822H187.417L175.121 19.2973H101.345V37.7849H704.221C705.276 37.7849 706.313 38.057 707.233 38.5749L761.94 69.3875C766.121 71.7428 766.121 77.7771 761.94 80.1324L707.233 110.945C706.313 111.463 705.276 111.735 704.221 111.735H7.08083Z"
+        fill="#243F5F"
+      />
+    </svg>
+  ),
+  Check: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none" {...props}>
+      <path
+        d="M17.3445 8.03185C17.5557 7.83075 17.8368 7.71957 18.1284 7.72178C18.4201 7.72399 18.6994 7.8394 18.9076 8.04367C19.1158 8.24794 19.2364 8.52509 19.2441 8.81663C19.2518 9.10818 19.146 9.39131 18.9489 9.6063L12.966 17.0887C12.8631 17.1995 12.739 17.2884 12.6009 17.3502C12.4629 17.4119 12.3138 17.4451 12.1627 17.4479C12.0115 17.4507 11.8613 17.423 11.7211 17.3665C11.5808 17.3099 11.4535 17.2256 11.3466 17.1187L7.37893 13.1511C7.26844 13.0481 7.17982 12.924 7.11835 12.786C7.05689 12.6481 7.02384 12.4991 7.02117 12.3481C7.01851 12.1971 7.04628 12.0471 7.10285 11.9071C7.15941 11.7671 7.2436 11.6399 7.35039 11.5331C7.45718 11.4263 7.58438 11.3421 7.72442 11.2855C7.86445 11.229 8.01444 11.2012 8.16545 11.2039C8.31645 11.2065 8.46537 11.2396 8.60332 11.301C8.74127 11.3625 8.86542 11.4511 8.96838 11.5616L12.1083 14.7L17.316 8.06483C17.3254 8.05329 17.3354 8.04228 17.346 8.03185H17.3445Z"
+        fill="#12E700"
+      />
+    </svg>
+  ),
+  X: (props: IconProps) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none" {...props}>
+      <path
+        d="M7.86138 7.48757C7.93102 7.41775 8.01376 7.36236 8.10484 7.32456C8.19593 7.28677 8.29358 7.26731 8.39219 7.26731C8.49081 7.26731 8.58846 7.28677 8.67954 7.32456C8.77063 7.36236 8.85336 7.41775 8.92301 7.48757L12.8906 11.4567L16.8583 7.48757C16.928 7.41787 17.0107 7.36257 17.1018 7.32485C17.1929 7.28712 17.2905 7.2677 17.3891 7.2677C17.4876 7.2677 17.5853 7.28712 17.6763 7.32485C17.7674 7.36257 17.8502 7.41787 17.9199 7.48757C17.9896 7.55728 18.0449 7.64004 18.0826 7.73111C18.1203 7.82219 18.1398 7.91981 18.1398 8.01839C18.1398 8.11697 18.1203 8.21459 18.0826 8.30567C18.0449 8.39674 17.9896 8.4795 17.9199 8.54921L13.9508 12.5168L17.9199 16.4844C17.9896 16.5542 18.0449 16.6369 18.0826 16.728C18.1203 16.8191 18.1398 16.9167 18.1398 17.0153C18.1398 17.1138 18.1203 17.2115 18.0826 17.3025C18.0449 17.3936 17.9896 17.4764 17.9199 17.5461C17.8502 17.6158 17.7674 17.6711 17.6763 17.7088C17.5853 17.7465 17.4876 17.766 17.3891 17.766C17.2905 17.766 17.1929 17.7465 17.1018 17.7088C17.0107 17.6711 16.928 17.6158 16.8583 17.5461L12.8906 13.577L8.92301 17.5461C8.8533 17.6158 8.77055 17.6711 8.67947 17.7088C8.58839 17.7465 8.49077 17.766 8.39219 17.766C8.29361 17.766 8.19599 17.7465 8.10492 17.7088C8.01384 17.6711 7.93108 17.6158 7.86138 17.5461C7.79167 17.4764 7.73637 17.3936 7.69865 17.3025C7.66092 17.2115 7.64151 17.1138 7.64151 17.0153C7.64151 16.9167 7.66092 16.8191 7.69865 16.728C7.73637 16.6369 7.79167 16.5542 7.86138 16.4844L11.8305 12.5168L7.86138 8.54921C7.79156 8.47956 7.73616 8.39683 7.69836 8.30574C7.66057 8.21466 7.64111 8.11701 7.64111 8.01839C7.64111 7.91977 7.66057 7.82213 7.69836 7.73104C7.73616 7.63995 7.79156 7.55722 7.86138 7.48757Z"
+        fill="#FF0000"
+      />
+    </svg>
+  ),
+};
--- a/components/Section.tsx
+++ b/components/Section.tsx
@@ -0,0 +1,20 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { Label } from "./ui/Label";
+import { AppMarkdown } from "./AppMarkdown";
+
+interface SectionProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title: ReactNode;
+  description?: string;
+}
+
+export const Section = ({ title, description, children }: SectionProps) => {
+  return (
+    <div className="flex flex-col gap-6 md:gap-16">
+      <div className="flex flex-col gap-4 md:gap-8">
+        {typeof title === "string" ? <Label.SectionTitle className="text-center">{title}</Label.SectionTitle> : title}
+        {description && <AppMarkdown>{description}</AppMarkdown>}
+        {children && <div className="flex">{children}</div>}
+      </div>
+    </div>
+  );
+};
--- a/components/ui/Accordion.tsx
+++ b/components/ui/Accordion.tsx
@@ -0,0 +1,53 @@
+"use client";
+import { ReactNode, useState } from "react";
+import { Icons } from "../Icons";
+import { cn } from "../../shared/utils";
+
+interface AccordionProps {
+  label: string;
+  children?: ReactNode;
+}
+
+const Accordion = ({ label, children }: AccordionProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div
+      className="flex flex-col py-3 px-6 rounded-lg bg-gray border border-gray-100 hover:bg-gray-100 duration-200"
+      aria-expanded={isOpen}
+    >
+      <div
+        className="grid grid-cols-[1fr_20px] gap-1 justify-between items-center cursor-pointer"
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        <span className="font-inter leading-5 text-base text-primary font-bold">{label}</span>
+        <Icons.ArrowUp
+          className={cn("duration-200", {
+            "transform rotate-180": !isOpen,
+          })}
+        />
+      </div>
+      <div className="overflow-hidden box-border transition-all duration-300 ease-in-out">
+        <div
+          className={cn(
+            "block overflow-hidden max-h-0 duration-200 ease-in-out",
+            isOpen ? "grid-rows-[1fr] opacity-100 max-h-full" : "grid-rows-[0fr] opacity-0"
+          )}
+        >
+          {typeof children === "string" ? (
+            <p className="block overflow-hidden pt-4 text-primary text-sm leading-5 font-sans font-normal">
+              {children}
+            </p>
+          ) : (
+            children
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Accordion.displayName = "Accordion";
+export { Accordion };
--- a/components/ui/Banner.tsx
+++ b/components/ui/Banner.tsx
@@ -0,0 +1,92 @@
+import { ReactNode } from "react";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import type * as Classed from "@tw-classed/react";
+import { classed } from "@tw-classed/react";
+import { cn } from "../../shared/utils";
+import ReactMarkdown from "react-markdown";
+import { createMarkdownElement } from "../AppMarkdown";
+import { AppContainer } from "../AppContainer";
+
+export const BannerWrapper = classed.div("py-[120px] relative", {
+  variants: {
+    color: {
+      brown: "bg-brown-50",
+      gray: "bg-gray",
+    },
+  },
+  defaultVariants: {
+    color: "brown",
+  },
+});
+
+export const BannerTitle = classed.h4("text-gold", {
+  variants: {
+    titleSize: {
+      small: "text-[32px] font-semibold",
+      medium: "text-3xl md:text-4xl lg:text-5xl md:leading-[49px] font-bold",
+    },
+    variant: {
+      brown: "text-gold",
+      primary: "text-primary",
+    },
+  },
+  defaultVariants: {
+    titleSize: "medium",
+  },
+});
+
+type BannerProps = Classed.VariantProps<typeof BannerTitle> &
+  Classed.VariantProps<typeof BannerWrapper> & {
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+    children?: ReactNode;
+    descriptionClass?: string;
+  };
+
+export const Banner = ({ title, description, actions, descriptionClass, color }: BannerProps) => {
+  return (
+    <BannerWrapper color={color}>
+      <AppContainer>
+        <div className="mx-auto py-10 md:py-16 px-8 md:px-[120px] bg-white rounded-3xl w-full md:max-w-[900px]">
+          <div className={cn("flex flex-col gap-8")}>
+            <div className="flex flex-col gap-6">
+              <span className=" text-primary font-sans font-bold text-2xl text-center md:text-5xl">{title}</span>
+              {description && (
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  rehypePlugins={[rehypeRaw]}
+                  skipHtml={false}
+                  components={{
+                    strong: ({ node, ...props }) =>
+                      createMarkdownElement("span", {
+                        className: "font-medium",
+                        ...props,
+                      }),
+                    a: ({ node, ...props }) =>
+                      createMarkdownElement("a", {
+                        className: "text-primary font-medium text-lg md:text-xl md:leading-6",
+                        target: "_blank",
+                        ...props,
+                      }),
+                    span: ({ ...props }: any) => (
+                      <span className="text-primary font-normal text-lg md:text-xl md:leading-6" {...props} />
+                    ),
+                    p: ({ ...props }: any) => (
+                      <span className="text-primary font-normal text-lg md:text-xl md:leading-6" {...props} />
+                    ),
+                  }}
+                  className={cn(descriptionClass, "text-primary font-normal text-lg  md:text-xl md:leading-6")}
+                >
+                  {description}
+                </ReactMarkdown>
+              )}
+            </div>
+            <div className="mx-auto">{actions}</div>
+          </div>
+        </div>
+      </AppContainer>
+    </BannerWrapper>
+  );
+};
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -0,0 +1,45 @@
+import { classed } from "@tw-classed/react";
+import type * as Classed from "@tw-classed/react";
+import React, { forwardRef, HTMLAttributes } from "react";
+
+const ButtonComponent = classed.button(
+  "relative overflow-hidden font-medium cursor-pointer justify-center flex items-center gap-2 border rounded-[32px] inline-block disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 ease-in-out",
+  {
+    variants: {
+      variant: {
+        transparent: "border-transparent bg-transparent text-brown-50 hover:text-brown-70 !p-2",
+        primary: "bg-primary border-primary text-white hover:bg-brown-70 hover:border-brown-70 hover:text-white",
+      },
+      size: {
+        medium: "text-sm md:text-base lg:text-xl md:leading-6 py-2 md:py-[14px] px-8",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "medium",
+    },
+  }
+);
+
+type ButtonVariants = Classed.VariantProps<typeof ButtonComponent>;
+
+interface ButtonProps extends ButtonVariants, HTMLAttributes<HTMLButtonElement> {
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { children, variant, size, icon } = props;
+
+  return (
+    <ButtonComponent ref={ref} variant={variant} size={size} {...props}>
+      {icon}
+      <span className="z-[2]">{children}</span>
+    </ButtonComponent>
+  );
+});
+
+Button.displayName = "Button";
+
+export { Button };
--- a/components/ui/Card.tsx
+++ b/components/ui/Card.tsx
@@ -0,0 +1,29 @@
+import { classed } from "@tw-classed/react";
+
+const CardBase = classed.div("bg-primary border border-gray-100 rounded-[16px] overflow-hidden", {
+  variants: {
+    spacing: {
+      small: "p-8",
+      medium: "py-8 px-10 md:px-16",
+    },
+    shadow: {
+      true: "shadow-card",
+    },
+  },
+  defaultVariants: {
+    shadow: true,
+    spacing: "small",
+  },
+});
+
+const CardImage = classed.div("min-h-[155px] bg-gray-300 bg-cover bg-center");
+const CardContent = classed.div("p-4");
+
+const Card = {
+  displayName: "Card",
+  Base: CardBase,
+  Image: CardImage,
+  Content: CardContent,
+};
+
+export { Card };
--- a/components/ui/Label.tsx
+++ b/components/ui/Label.tsx
@@ -0,0 +1,21 @@
+import { classed } from "@tw-classed/react";
+
+const Title = classed.h1("text-5xl font-black leading-1 text-primary md:text-6xl lg:text-[96px] lg:leading-[101px]");
+
+const Subtitle = classed.h6("text-brown-50 font-black text-lg leading-none md:text-2xl lg:text-7xl md:leading-6");
+
+const SectionTitle = classed.h6(
+  "font-semibold font-inter text-primary text-2xl leading-[24px] md:text-[56px] md:leading-[56px]"
+);
+
+const Paragraph = classed.span("text-primary text-sm md:text-xl leading-6");
+
+const Label = {
+  displayName: "Label",
+  Title,
+  Subtitle,
+  SectionTitle,
+  Paragraph,
+};
+
+export { Label };
--- a/content/about.tsx
+++ b/content/about.tsx
@@ -0,0 +1,43 @@
+import { Icons } from "../components/Icons";
+
+/**
+Markdown supported for description
+*/
+
+export const ABOUT_CONTENT = {
+  WHO_WE_ARE: {
+    TITLE: "Who we are",
+    DESCRIPTION: `TLSNotary is an open-source protocol developed by the **Privacy and Scaling Exploration (PSE)** research lab of the Ethereum Foundation.
+    \nTLSNotary is not a new project; in fact, it has been around for **more than a decade**. In 2022, TLSNotary was rebuilt from the ground up in **Rust** incorporating state-of-the-art cryptographic protocols. This renewed version of the TLSNotary protocol offers enhanced security, privacy, and performance.
+    `,
+  },
+  HOW_IT_WORKS: {
+    TITLE: "How it works",
+    DESCRIPTION: `TLSNotary is a protocol which allows people to export data from any web application and prove facts about it to a third-party in a privacy-preserving way by leveraging secure multi-party computation (MPC) to authenticate data communicated between a Prover and a TLS-enabled web server.
+        <img class="w-full" src="/images/tlsnotary-diagram.svg" />
+      `,
+
+    STEPS: [
+      {
+        TITLE: "Step 1: Multiparty TLS Request",
+        DESCRIPTION:
+          "The Prover requests data from a Server over TLS. The verifier cooperates in secure and privacy-preserving multi-party computation (MPC). This cooperation guaranties that the Prover can not cheat and allows the Verifier to check the authenticity of the data in step 3.",
+      },
+      {
+        TITLE: "Step 2: Selective Disclosure",
+        DESCRIPTION:
+          "The Prover selectively discloses the data to the Verifier by redacting sensitive information prior to sharing it. Selective disclosure may involve simple redactions, or more advanced techniques such as a zero-knowledge proofs that can prove properties of redacted data without revealing the data itself.",
+      },
+      {
+        TITLE: "Step 3: Data Verification",
+        DESCRIPTION:
+          "The Verifier verifies that the prover did not tamper with the data and also verifiers the data origin, by inspecting the Server certificate through trusted certificate authorities (CAs). The Verifier can now make assertions about the non-redacted content of the transcript.",
+      },
+    ],
+  },
+  GET_INVOLVED: {
+    TITLE: "Get involved",
+    DESCRIPTION:
+      "An alpha version of the TLSNotary protocol is available for testing. We welcome folks to start playing around with it, including trying to break it!\n\nBoth codebases are 100% Rust and compile to WASM targets with an eye on deployment into browser environments. All our code is and always will be open source! Dual-licensed under Apache 2 and MIT, at your choice.\n\nWe've invested effort into making sure our code is modular and capable of evolving. We hope that others may find some of the components independently interesting and useful. Contributions are welcome!",
+  },
+};
--- a/content/common.tsx
+++ b/content/common.tsx
@@ -0,0 +1,20 @@
+export const COMMON_CONTENT = {
+  VIEW_DOCUMENTATION: "View Documentation",
+  FORK_REPO: "Fork github repo",
+  AND_MORE: "... and more!",
+  CHECKOUT_GITHUB: "Checkout our Github",
+  CHECKOUT_DOCS: "Checkout our documentation",
+  LEARN_THE_BASICS: "Learn the basics",
+  SERVER_AUTHENTICATION: "Server Authentication",
+  DATA_PORTABILITY: "Data Portability",
+  FAQ: "FAQ",
+  JOIN_DISCORD: "Join Our Discord",
+  CONNECT_WITH_US: {
+    TITLE: "Connect with us",
+    DESCRIPTION:
+      "Our team believes in open-source development with a strong emphasis on trustlessness. We are committed to transparency and community-driven improvements. Come find us in our public Discord to learn more and collaborate!",
+  },
+  FOOTER: {
+    TITLE: "TLSNotary is project of Privacy and Scaling Explorations, an Ethereum Foundation supported team.",
+  },
+};
--- a/content/faq.tsx
+++ b/content/faq.tsx
@@ -0,0 +1,63 @@
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+/**
+Markdown supported for answer
+*/
+export const FAQS: FAQItem[] = [
+  {
+    question: "Why is TLS not sufficient for data portability?",
+    answer:
+      "TLS indeed signs a checksum (a Message Authentication Code, MAC) to check data integrity. However, in TLS, both the Server and the User use symmetric keys for data exchange, meaning the same key is employed for both encryption and decryption. This symmetric key usage allows a User to modify the data and retroactively compute a new checksum. As a result, this checksum alone is insufficient to guarantee data authenticity to a third party.",
+  },
+  {
+    question: "How can I verify the data origin in a TLSNotary proof?",
+    answer:
+      "The proof contains the domain name and ephemeral public key of the server. A standard certificate verifier can verify whether the key is valid for the provided server name and that it chains to at least one trusted root certificate.",
+  },
+  {
+    question: "What does “privacy-centric” exactly mean for TLSNotary?",
+    answer:
+      "TLSNotary does not compromise on privacy for performance reasons. It prioritizes user privacy in all its operations. The verifier only sees the data the prover decides to share. <br /><br/> If a generic notary is used to verify the TLS session, this notary only sees encrypted data and does not know what Server the Prover communicates with. The only information the Notary can see is: the time of the TLS-session, the length of the requests and responses, the number or round trips, and which cipher suite is used.",
+  },
+  {
+    question: "What is the overhead of using TLSNotary?",
+    answer:
+      "The Multi-Party Computation (MPC) between the Prover and the Verifier requires significant bandwidth, orders of magnitude more than the Server's data size.",
+  },
+  {
+    question: "Can the server detect that a TLS session is being notarized?",
+    answer: "To the server, the TLS connection appears the same as any other connection. Only the User communicates with the Server, not the Notary or the Verifier. However, the timing patterns of TLS communication might have a different fingerprint, so through statistical analysis, specific identifying patterns might be uncovered.",
+  },
+  {
+    question: "Can TLSNotary be used for public data?",
+    answer:
+      "Yes, but for public data, a less-resource-intensive man-in-the-middle approach is more economical since the privacy features of TLSNotary are superfluous in this scenario.",
+  },
+  {
+    question: "How can I inspect and verify a TLSNotary proof?",
+    answer:
+      "The easiest way is to use the proof-of-concept [TLSNotary Explorer](https://explorer.tlsnotary.org)",
+  },
+  {
+    question: "Which TLS versions are supported?",
+    answer: "TLSNotary currently supports TLS 1.2. Support for TLS 1.3 is on the roadmap.",
+  },
+  {
+    question: "How can I use TLSNotary to verify data on-chain?",
+    answer:
+      "At the moment the most practical way to verify data on-chain is to prove the data directly to an off-chain application specific verifier. There are planned upgrades to make TLSNotary proofs directly verifiable on-chain.",
+  },
+  {
+    question: "Why can a verifier trust a TLSNotary proof?",
+    answer:
+      "A TLSNotary proof is trustworthy because of its cryptographic integrity and its inclusion of an ephemeral key, allowing verifiers to confirm the data's origin from the claimed domain. This trust also hinges on the verifier's confidence in the data source (the server) and the validity of any redactions. Additionally, if the verifier did not conduct the TLS-MPC process themselves, they must trust in the notary's neutrality, ensuring it has not been influenced or compromised by the Prover.",
+  },
+  {
+    question: "How does TLSNotary differ from other TLS portability approaches?",
+    answer:
+      "TLSNotary distinguishes itself with its dedication to open-source development and a strong emphasis on trustlessness. Developed as a public good without a business model, it fosters transparency and allows for community-driven improvements.   Unlike other solutions, TLSNotary is designed to prioritize trustlessness, thereby guaranteeing superior levels of privacy and security. It achieves this without depending on particular network assumptions or compromising on privacy or security to enhance performance. This strategy positions TLSNotary as the go-to choice for projects that place a high value on security and privacy in their TLS portability needs.",
+  },
+];
--- a/content/homepage.tsx
+++ b/content/homepage.tsx
@@ -0,0 +1,17 @@
+export const HOMEPAGE_CONTENT = {
+  TITLE: "Privacy-preserving data portability",
+  SUBTITLE: "TLSNotary",
+  DESCRIPTION:
+    " TLSNotary is an open-source protocol that can verify the authenticity of TLS data while protecting privacy. If you're looking for a way to make data portable without compromising on security, check out the protocol and integrate it into your applications!",
+  BUILD_WITH_US: {
+    TITLE: "Build with us",
+    DESCRIPTION:
+      "Interested in using TLSNotary, contributing, or just learning more about how it works? Join the conversation on our [Discord server](https://discord.gg/9XwESXtcN7), check out our [Github](https://github.com/tlsnotary/tlsn), or use our Quick Start guide to try it out!",
+  },
+  WHY_USE_TLSNOTARY: {
+    TITLE: "Why use TLSNotary?",
+    DESCRIPTION: `TLS (Transport Layer Security), also known as the "s" in "https" 🔐, can secure communication between a server and a user. But what if you want to credibly share data with others without compromising security, privacy, or control? </br> </br>TLSNotary solves this by adding a Verifier to the TLS connection using secure Multi-Party Computation (MPC). MPC provides cryptographic guarantees, allowing the Verifier to authenticate the TLS transcript without requiring external trust or revealing the complete data to anyone. TLSNotary can sign (aka notarize) data and make it portable in a privacy preserving way.
+    </br></br> With TLSNotary, users are in full control over the data they choose to share.
+    `,
+  },
+};
--- a/content/index.ts
+++ b/content/index.ts
@@ -0,0 +1,11 @@
+import { ABOUT_CONTENT } from "./about";
+import { COMMON_CONTENT } from "./common";
+import { HOMEPAGE_CONTENT } from "./homepage";
+import { USE_CASES_CONTENT } from "./useCases";
+
+export const LABELS = {
+  ABOUT: ABOUT_CONTENT,
+  HOMEPAGE: HOMEPAGE_CONTENT,
+  COMMON: COMMON_CONTENT,
+  USE_CASES: USE_CASES_CONTENT, 
+};
--- a/content/projects.tsx
+++ b/content/projects.tsx
@@ -0,0 +1,58 @@
+export type WebsiteType = "website" | "twitter" | "github";
+
+type Project = {
+  title: string;
+  tldr: string;
+  links?: Partial<Record<WebsiteType, string>>;
+};
+
+export const ProjectList: Project[] = [
+
+  {
+    title: "ZKP2P",
+    tldr: "Completely peer-to-peer leveraging everyday payment networks",
+    links: {
+      website: "https://zkp2p.xyz",
+      twitter: "https://x.com/zkp2p",
+      github: "https://github.com/zkp2p",
+    },
+  },
+  {
+    title: "OpenLayer (Jomo)",
+    tldr: "Scale web3 through optimistic verifiable computation",
+    links: {
+      website: "https://www.openlayer.tech/",
+      twitter: "https://x.com/OpenLayerHQ",
+      github: "https://github.com/0xJomo"
+    },
+  },
+  {
+    title: "Opacity Labs",
+    tldr: "The ZKP protocol for proving anything without revealing the details",
+    links: {
+      website: "https://www.opacity.network/",
+      twitter: "https://warpcast.com/~/channel/opacity"
+    },
+  },
+  {
+    title: "ZeroTrustBounty",
+    tldr: "A trustless bug bounty platform with redacted bug reports & guaranteed payments to whitehats.",
+    links: {
+      github: "https://github.com/antojoseph/ZeroTrustBounty",
+    },
+  },
+  {
+    title: "RealReturn",
+    tldr: "An open leaderboard of verified real investment returns, enabled by TLSNotary and Jomo.",
+    links: {
+      github: "https://github.com/chcharcharlie/realreturn",
+    },
+  },
+  {
+    title: "Zero Guard",
+    tldr: "A decentralized zero knowledge powered AI Red Team Network that improves diversity, safety to AI through community",
+    links: {
+      github: "https://github.com/dingchaoz/ZEROGUARD",
+    },
+  },
+];
--- a/content/useCases.tsx
+++ b/content/useCases.tsx
@@ -0,0 +1,19 @@
+export const USE_CASES_CONTENT = {
+  USE_CASES: {
+    TITLE: "Use Cases",
+    DESCRIPTION: `You can use TLSNotary for: </br></br>- <b>Identity Verification</b>: verify your name, age, or citizenship from online government services
+    </br></br>- <b>Reputation Verification</b>: verify user experience or trustworthiness on platforms like AirBnb, Uber, Strava
+    </br></br>- <b>Real World Asset Ownership Verification</b>: confirm ownership of tangible assets (e.g. vehicles, real estate)
+    </br></br>- <b>Health Information Verification</b>: verify personal health records from platforms like MyHealth, HealthVault etc
+    </br></br>- <b>Account Ownership Verification</b>: confirm control over online accounts (e.g. Google, Microsoft, Apple, Twitter)
+    </br></br>- <b>Financial Verification</b>: verify your financial standing or prove financial dealings from your bank or other service
+    </br></br>- <b>User Restriction Verification</b>: confirm if a user is barred from accessing specific applications or services
+    </br></br> <span class="text-center">...and more!</span>
+  `,
+  },
+  BUILD_WITH_TLSNOTARY: "Projects using TLSNotary",
+  BANNER: {
+    TITLE: "Share what you're building with TLSNotary.",
+    DESCRIPTION: "Are you using TLSNotary in your project? Reach out on Discord and tell us about your work!",
+  },
+};
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // basePath: "/landing-page",
+  output: 'export', // compatible with GitHub Pages
+};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -4,44 +4,22 @@
  "private": true,
  "homepage": "https://tlsnotary.github.io/landing-page",
  "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-react": "^7.17.12",
-    "@babel/preset-typescript": "^7.17.12",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.1",
-    "@types/node": "^16.11.36",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
-    "@types/react-modal": "^3.13.1",
-    "babel-loader": "^8.2.3",
-    "color-hash": "^2.0.1",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "file-loader": "^6.2.0",
-    "html-webpack-inline-source-plugin": "^0.0.10",
-    "html-webpack-plugin": "^5.5.0",
-    "jest": "^27.4.3",
-    "jest-resolve": "^27.4.2",
-    "jest-watch-typeahead": "^1.0.0",
-    "mini-css-extract-plugin": "^2.4.5",
+    "@tw-classed/react": "^1.7.0",
+    "clsx": "^2.1.0",
+    "next": "14.1.4",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
-    "react-modal": "^3.15.1",
+    "react-markdown": "^9.0.1",
    "react-router-dom": "^6.3.0",
-    "style-loader": "^3.3.1",
-    "typescript": "^4.6.4",
-    "web-vitals": "^2.1.4",
-    "webpack": "^5.64.4",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.6.0"
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "tailwind-merge": "^2.2.2"
  },
  "scripts": {
-    "start": "webpack-dev-server",
-    "build": "webpack",
-    "prerender": "npm run build && webpack --config ./webpack.prerender.js && node build-prerender",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
    "test": "jest"
  },
  "browserslist": {
@@ -57,26 +35,15 @@
    ]
  },
  "devDependencies": {
-    "@types/color-hash": "^1.0.2"
-  },
-  "jest": {
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "web.ts",
-      "ts",
-      "web.tsx",
-      "tsx",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node"
-    ]
-  },
-  "babel": {
-    "presets": [
-      ["@babel/preset-react", { "runtime": "automatic" }],
-      "@babel/preset-typescript"
-    ]
+    "@types/jest": "^27.5.1",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.4",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/public/TLSNotary.pdf
+++ b/public/TLSNotary.pdf
--- a/public/android-chrome-192x192.png
+++ b/public/android-chrome-192x192.png
--- a/public/android-chrome-512x512.png
+++ b/public/android-chrome-512x512.png
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/browserconfig.xml
+++ b/public/browserconfig.xml
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#cfc4fb</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icons/geometric-3.svg
+++ b/public/icons/geometric-3.svg
@@ -0,0 +1,4 @@
+<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M120.5 60.5C120.5 27.3629 93.6371 0.5 60.5 0.5C27.3629 0.5 0.5 27.3629 0.5 60.5C0.5 93.6371 27.3629 120.5 60.5 120.5C93.6371 120.5 120.5 93.6371 120.5 60.5Z" fill="#243F5F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M60.5 0.5V60.5H0.5C0.5 93.637 27.363 120.5 60.5 120.5V60.5H120.5C120.5 27.363 93.637 0.5 60.5 0.5Z" fill="#B59963"/>
+</svg>
--- a/public/images/banner-inverse.svg
+++ b/public/images/banner-inverse.svg
@@ -0,0 +1,3 @@
+<svg width="1440" height="528" viewBox="0 0 1440 528" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1440 132.971L0 0V132.971V528H1440V132.971Z" fill="#243F5F"/>
+</svg>
--- a/public/images/banner-mobile.svg
+++ b/public/images/banner-mobile.svg
@@ -0,0 +1,19 @@
+<svg width="983" height="417" viewBox="0 0 983 417" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 105.017L982.32 0V105.017V417H0V105.017Z" fill="#243F5F"/>
+<mask id="mask0_1166_379" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="983" height="417">
+<path d="M0 105.017L982.32 0V105.017V417H0V105.017Z" fill="#243F5F"/>
+</mask>
+<g mask="url(#mask0_1166_379)">
+<path d="M222.309 58.6457V237.993H192.418V58.6457H222.309Z" fill="#FAFBFC"/>
+<path d="M162.527 58.6457V237.993H132.635V58.6457H162.527Z" fill="#FAFBFC"/>
+<path d="M102.744 58.6457L102.744 237.993H72.8529L72.8529 58.6457H102.744Z" fill="#FAFBFC"/>
+<path d="M42.9617 237.993C42.9617 287.518 83.1101 327.667 132.635 327.667V237.993H42.9617Z" fill="#B59963"/>
+<path d="M222.309 237.993C222.309 287.518 182.161 327.667 132.635 327.667V237.993H222.309Z" fill="#A27F3C"/>
+<path d="M222.309 417.341C222.309 367.815 182.161 327.667 132.635 327.667V417.341H222.309Z" fill="#B59963"/>
+<path d="M42.9617 417.341C42.9617 367.815 83.1101 327.667 132.635 327.667V417.341H42.9617Z" fill="#A27F3C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M401.657 148.319C401.657 197.845 361.508 237.993 311.983 237.993C262.458 237.993 222.309 197.845 222.309 148.319H267.146C267.146 173.082 287.22 193.156 311.983 193.156C336.746 193.156 356.82 173.082 356.82 148.319H401.657Z" fill="#B59963"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M401.657 148.319C401.657 98.794 361.508 58.6456 311.983 58.6456C262.458 58.6456 222.309 98.794 222.309 148.319H267.146C267.146 123.557 287.22 103.482 311.983 103.482C336.746 103.482 356.82 123.557 356.82 148.319H401.657Z" fill="#A27F3C"/>
+<path d="M222.309 237.993H401.657V297.776H222.309V237.993Z" fill="#FAFBFC"/>
+<path d="M222.309 357.559H401.657V417.341H222.309V357.559Z" fill="#FAFBFC"/>
+</g>
+</svg>
--- a/public/images/banner.svg
+++ b/public/images/banner.svg
@@ -0,0 +1,19 @@
+<svg width="1441" height="612" viewBox="0 0 1441 612" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M0 154L1440.5 0V154V611.5H0V154Z" fill="#243F5F" />
+	<mask id="mask0_1166_255" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1441" height="612">
+		<path d="M0 154L1440.5 0V154V611.5H0V154Z" fill="#243F5F" />
+	</mask>
+	<g mask="url(#mask0_1166_255)">
+		<path d="M326 86V349H282.167V86H326Z" fill="#FAFBFC" />
+		<path d="M238.333 86L238.333 349H194.5V86H238.333Z" fill="#FAFBFC" />
+		<path d="M150.667 86L150.667 349H106.833L106.833 86H150.667Z" fill="#FAFBFC" />
+		<path d="M63 349C63 421.625 121.875 480.5 194.5 480.5V349H63Z" fill="#B59963" />
+		<path d="M326 349C326 421.625 267.125 480.5 194.5 480.5V349H326Z" fill="#A27F3C" />
+		<path d="M326 612C326 539.375 267.125 480.5 194.5 480.5V612H326Z" fill="#B59963" />
+		<path d="M63 612C63 539.375 121.875 480.5 194.5 480.5V612H63Z" fill="#A27F3C" />
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M589 217.5C589 290.125 530.125 349 457.5 349C384.875 349 326 290.125 326 217.5L391.75 217.5C391.75 253.813 421.187 283.25 457.5 283.25C493.813 283.25 523.25 253.813 523.25 217.5H589Z" fill="#B59963" />
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M589 217.5C589 144.875 530.125 86 457.5 86C384.875 86 326 144.875 326 217.5L391.75 217.5C391.75 181.187 421.187 151.75 457.5 151.75C493.813 151.75 523.25 181.187 523.25 217.5H589Z" fill="#A27F3C" />
+		<path d="M326 349H589V436.667H326V349Z" fill="#FAFBFC" />
+		<path d="M326 524.333H589V612H326V524.333Z" fill="#FAFBFC" />
+	</g>
+</svg>
--- a/public/images/infographic.svg
+++ b/public/images/infographic.svg
--- a/public/images/og-image.png
+++ b/public/images/og-image.png
--- a/public/images/tlsnotary-diagram.svg
+++ b/public/images/tlsnotary-diagram.svg
--- a/public/index.html
+++ b/public/index.html
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <html prefix="og: https://ogp.me/ns#">
-    <head>
-      <meta charset="utf-8" />
-      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-      <link rel="icon" href="<%= require('./favicon.ico') %>" />
-      <link rel="apple-touch-icon" sizes="180x180" href="<%= require('./apple-touch-icon.png') %>" />
-      <link rel="icon" type="image/png" sizes="32x32" href="<%= require('./favicon-32x32.png') %>" />
-      <link rel="icon" type="image/png" sizes="16x16" href="<%= require('./favicon-16x16.png') %>" />
-      <link rel="manifest" href="/manifest.json" />
-      <link rel="mask-icon" href="<%= require('./safari-pinned-tab.svg') %>" color="#cfc4fb" />
-      <meta name="msapplication-TileColor" content="#cfc4fb" />
-      <meta name="theme-color" content="#cfc4fb" />
-      <meta property="og:image" content="/src/images/pse-og.png" alt="pse logo" />
-      <link rel="canonical" href="http://tlsnotary.org" />
-
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <meta name="description" content="TLSNotary website" />
-      <title>TLSNotary</title>
-
-      <!-- Fonts -->
-      <link rel="preconnect" href="https://fonts.googleapis.com" />
-      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    </head>
-
-    <body>
-      <div id="root"></div>
-    </body>
-  </html>
-</html>
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,19 +0,0 @@
-{
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#cfc4fb",
-    "background_color": "#cfc4fb",
-    "display": "standalone"
-}
--- a/public/mstile-150x150.png
+++ b/public/mstile-150x150.png
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
--- a/public/safari-pinned-tab.svg
+++ b/public/safari-pinned-tab.svg
@@ -1,30 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M2506 4468 c-40 -36 -1136 -1878 -1136 -1910 0 -15 10 -38 23 -51 28
-31 1131 -587 1163 -587 13 0 280 128 594 285 407 204 574 292 586 310 11 16
-14 36 11 55 -8 38 -1100 1868 -1133 1898 -14 12 -38 22 -54 22 -16 0 -40 -10
-54 -22z m-36 -853 l0 -445 -377 -189 c-208 -104 -379 -188 -381 -186 -3 3
-749 1265 755 1265 1 0 3 -200 3 -445z m569 -193 c204 -343 371 -625 371 -628
-0 -2 -171 81 -380 186 l-380 190 0 447 c0 247 4 443 9 438 4 -6 175 -290 380
-633z m-569 -862 c0 -220 -2 -400 -5 -400 -3 0 -183 91 -402 202 l-396 201
-394 198 c217 109 397 198 402 198 4 1 7 -179 7 -399z m589 201 l394 -198 -204
-105 c-236 -122 -586 -298 -594 -298 -3 0 -5 180 -5 400 0 220 3 400 8 399 4
-0 184 -89 401 -198z"/>
-<path d="M1409 2267 c-22 -17 -39 -51 -39 -80 0 -16 178 -263 551 -763 303
-406 564 -751 580 -766 18 -18 40 -28 59 -28 19 0 41 10 59 28 38 35 1123
-1491 1129 1514 13 51 -32 108 -85 108 -23 0 -191 -79 -568 -267 l-535 -268
-535 268 c-541 270 -576 285 -616 254z m1061 -976 l0 -295 -345 461 c-190 254
-345 464 -345 467 0 3 155 -72 345 -166 l345 -173 0 -294z m534 177 c-191
-255 -349 -465 -350 -467 -2 -2 -4 128 -4 290 l0 294 343 172 c188 95 345 172
-350 172 4 1 -149 -207 -339 -461z"/>
-</g>
-</svg>
--- a/scripts/prerender.tsx
+++ b/scripts/prerender.tsx
@@ -1,31 +0,0 @@
-import React from 'react'
-import ReactDOMServer from 'react-dom/server'
-import { StaticRouter } from 'react-router-dom/server'
-import Home from '../src/HomePage'
-import fs from 'fs'
-import path from 'path'
-
-const template = fs.readFileSync(path.join(__dirname, '../build/index.html')).toString()
-
-const pages = [
-  { Component: Home, output: '/index.html' },
-]
-
-for (const page of pages) {
-  const { Component, output } = page
-  const app = ReactDOMServer.renderToString((
-    <StaticRouter location={'/'}>
-      <Component />
-    </StaticRouter>
-  ))
-  const html = `${template}`.replace('<div id="root"></div>', `
-  <div id="root">${app}</div>
-  `)
-  if (output.indexOf('html') !== -1) {
-    fs.writeFileSync(path.join(__dirname, `../build/${output}`), html)
-  } else {
-    // make a directory and put an index.html in that
-    fs.mkdirSync(path.join(__dirname, `../build/${output}`))
-    fs.writeFileSync(path.join(__dirname, `../build/${output}`, 'index.html'), html)
-  }
-}
--- a/shared/utils.ts
+++ b/shared/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
--- a/src/HomePage.test.tsx
+++ b/src/HomePage.test.tsx
@@ -1,9 +0,0 @@
-import 'react';
-import { render, screen } from '@testing-library/react';
-import App from './HomePage';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
--- a/src/HomePage.tsx
+++ b/src/HomePage.tsx
@@ -1,25 +0,0 @@
-import Navbar from './components/Navbar';
-import Hero from './components/Hero';
-import Roadmap from './components/Roadmap';
-import Usecases from './components/Usecases';
-import About from './components/About';
-import Footer from './components/Footer';
-import How from './components/How';
-
-function HomePage() {
-  return (
-    <>
-      <Navbar />
-      <main>
-        <Hero />
-        <Usecases />
-        <How />
-        <Roadmap />
-        <About />
-      </main>
-      <Footer />
-    </>
-  );
-}
-
-export default HomePage;
--- a/src/ProjectsPage.tsx
+++ b/src/ProjectsPage.tsx
@@ -1,17 +0,0 @@
-import Starter from './components/Hero';
-import Projects from './components/Projects';
-import Navbar from './components/Navbar';
-import Footer from './components/Footer';
-import './HomePage.css';
-
-function HomePage() {
-  return (
-    <div className="Home container-sm">
-      <Navbar />
-      <Projects />
-      <Footer />
-    </div>
-  );
-}
-
-export default HomePage;
--- a/src/Utils.tsx
+++ b/src/Utils.tsx
@@ -1,8 +0,0 @@
-export function shuffleFisherYates(array: []): [] {
-  let i = array.length;
-  while (i--) {
-    const ri = Math.floor(Math.random() * i);
-    [array[i], array[ri]] = [array[ri], array[i]];
-  }
-  return array;
-}
--- a/src/components/About.css
+++ b/src/components/About.css
@@ -1,13 +0,0 @@
-#About {
-  display: flex;
-  padding: 100px;
-  justify-content: center;
-}
-
-#About .container {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  align-items: center;
-  max-width: 600px;
-}
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -1,28 +0,0 @@
-import "./About.css";
-import ethlogo from '../images/eth-logo-blue.svg';
-import config from "../config.json";
-
-export default function About() {
-  return (
-    <div id="About">
-      <div className="container">
-        <div className="item">
-          <img src={ethlogo}></img>
-        </div>
-        <div style={{ height: "1.375rem" }} />
-        <div className="item">
-          <h3>
-            TLSNotary is a public good & open source project supported by the Ethereum Foundation under the
-            Privacy and Scaling Exploration Team.
-          </h3>
-        </div>
-        <div style={{ height: "1.375rem" }} />
-        <div className="item">
-          <a href={config.links.pse}>
-            <button className="pill-button">Learn More</button>
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/components/Discord.css
+++ b/src/components/Discord.css
@@ -1,27 +0,0 @@
-#call_to_action {
-  padding: 2rem;
-  border: 2px solid var(--black);
-  border-left: none;
-  border-right: none;
-  background-color: var(--purple);
-}
-
-/* .discord-text {
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 125%;
-} */
-
-.text-2xl {
-  font-size: 1.5rem; /* 24px */
-  line-height: 2rem; /* 32px */
-}
-
-.cta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  max-width: 500px;
-  margin: 0 auto;
-}
--- a/src/components/Discord.tsx
+++ b/src/components/Discord.tsx
@@ -1,18 +0,0 @@
-import discord from "../images/discord_round.svg";
-import "./Discord.css";
-
-// Discord call to action
-function Discord() {
-  return (
-    <div id="call_to_action">
-      <div className="cta">
-        <div className="discord-text text-2xl lg:text-3xl font-semibold">Come chat with us on Discord!</div>
-        <a href="https://discord.gg/9XwESXtcN7" target="_blank" rel="noopener noreferrer" aria-label="TLSNotary Discord link">
-          <img style={{ width: "4rem" }} src={discord} alt="" />
-        </a>
-      </div>
-    </div>
-  );
-}
-
-export default Discord;
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -1,76 +0,0 @@
-footer {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 1rem;
-  border-top: 2px solid var(--gray);
-  margin: 0rem 5em 1rem;
-  padding-block: 2.4rem;
-}
-
-#copyright {
-  display: flex;
-  justify-content: start;
-  gap: 2.5rem;
-}
-
-#copyright img {
-  max-width: 50px;
-}
-
-#footer-text {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-}
-
-#footer-text > * {
-  margin: 0;
-}
-
-#footer-title {
-  font-weight: 700;
-}
-
-#footer-links {
-  display: flex;
-  gap: 4.5rem;
-}
-
-#footer-links > * {
-  display: flex;
-  flex-direction: row;
-  gap: 0.75em;
-  align-items: center;
-  font-size: 1.125rem;
-  font-weight: 700;
-}
-
-#footer-links img {
-  max-width: 40px;
-}
-
-#footer-links .cta {
-  color: var(--brown);
-}
-
-@media screen and (max-width: 800px) {
-  footer {
-    margin: 1em 0em;
-    margin-top: 4rem;
-    padding: 1em;
-    justify-content: center;
-  }
-
-  #copyright img {
-    display: none;
-  }
-
-  #footer-links {
-    flex-direction: column;
-    margin-top: 4rem;
-  }
-  #footer-links img {
-    max-width: 3rem;
-  }
-}
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,34 +0,0 @@
-import "./Footer.css";
-import logo from '../images/tlsn-logo.svg';
-import discord from "../images/discord_round.svg";
-import config from "../config.json";
-
-function copyright() {
-  let websiteCreationYear = 2022;
-  let currentYear = new Date().getFullYear();
-  if (currentYear > websiteCreationYear) {
-    return `${websiteCreationYear} - ${currentYear}`;
-  } else {
-    return websiteCreationYear;
-  }
-}
-
-export default function Footer() {
-  return (
-    <footer>
-      <div id="copyright">
-        <img src={logo} alt="Pse Logo" />
-        <div id="footer-text">
-          <p id="footer-title">TLSNotary</p>
-          <p>Proof of data authenticity</p>
-        </div>
-      </div>
-      <div id="footer-links">
-        <a href={config.links.discord} target="_blank" rel="noopener noreferrer">
-          <span className="cta">Chat with us</span>
-          <img src={discord} alt="Discord Icon" />
-        </a>
-      </div>
-    </footer>
-  );
-}
--- a/src/components/Hero.css
+++ b/src/components/Hero.css
@@ -1,40 +0,0 @@
-#Hero {
-  max-width: 67%;
-  padding: 50px;
-}
-
-#Hero .name {
-  color: var(--brown);
-}
-
-#Hero .links {
-  display: flex;
-  align-items: center;
-}
-
-#Hero .docs-link {
-  margin-right: 10px;
-}
-
-#Hero .button-docs {
-  width: 20px;
-  margin-left: 10px;
-}
-
-#Hero .repo-link {
-  margin-inline: 10px;
-}
-
-#Hero .button-github {
-  width: 20px;
-  margin-left: 10px;
-}
-
-@media only screen and (max-width: 600px) {
-  #Hero .links {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    align-items: left;
-  }
-}
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,47 +0,0 @@
-import github from "../images/github.svg";
-import docs from "../images/docs.svg";
-import rust from "../images/rust-logo-blk.svg";
-import "./Hero.css";
-import config from "../config.json";
-
-const Hero = () => (
-  <div id="Hero">
-    <h2 className="name">TLSNotary</h2>
-    <h1>
-      Proof of data authenticity
-    </h1>
-    <div style={{ height: "1.375rem" }} />
-    <p>
-      Export data from any web application and prove facts about it without compromising on privacy.
-    </p>
-    <div style={{ height: "1.375rem" }} />
-    <div className="links">
-      <div className="docs-link">
-        <a href={config.links.docs}>
-          <button className="pill-button">
-            Documentation
-            <img className="button-docs" src={docs} alt="docs"></img>
-          </button>
-        </a>
-      </div>
-      <div className="api-docs-link">
-        <a href={config.links.api}>
-          <button className="pill-button">
-            API
-            <img className="button-docs" src={rust} alt="api docs"></img>
-          </button>
-        </a>
-      </div>
-      <div className="repo-link">
-        <a href={config.links.repo}>
-          <button className="pill-button">
-            Source
-            <img className="button-github" src={github} alt="github"></img>
-          </button>
-        </a>
-      </div>
-    </div>
-  </div>
-);
-
-export default Hero;
--- a/src/components/How.css
+++ b/src/components/How.css
@@ -1,51 +0,0 @@
-#How {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-top: 50px;
-  padding-bottom: 50px;
-}
-
-#How .body {
-  display: flex;
-  flex-direction: row;
-  gap: 2.5rem;
-  align-items: center;
-}
-
-#How .diagram {
-  padding: 30px;
-}
-
-#How .diagram-container {
-  display: flex;
-  border: 5px solid var(--brown);
-  border-radius: 30px;
-  justify-content: center;
-}
-
-#How .text-container {
-  text-align: left;
-}
-
-@media only screen and (max-width: 1440px) {
-  #How {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding-top: 50px;
-    padding-bottom: 50px;
-  }
-
-  #How .body {
-    flex-direction: column;
-    position: static;
-    max-width: 67%;
-  }
-
-  #How .diagram {
-    max-width: 80%;
-    padding: 30px;
-  }
-}
--- a/src/components/How.tsx
+++ b/src/components/How.tsx
@@ -1,44 +0,0 @@
-import "./How.css";
-// import diagram from "../images/overview-pretty.png";
-import diagram from "../images/overview-new.drawio.svg"
-
-export default function How() {
-  return (
-    <div id="How">
-      <div className="body">
-        <div className="diagram-container">
-          <img className="diagram" src={diagram}></img>
-        </div>
-        <div className="text-container">
-          <h2>How it works</h2>
-          <div style={{ height: "1.375rem" }} />
-          <p>
-            TLSNotary leverages the widely-used TLS (Transport Layer Security) protocol to securely and privately prove a transcript of communications took place with a webserver.
-          </p>
-          <br />
-          <p>
-            The core of the TLSNotary protocol involves splitting TLS session keys between two parties, the Prover and the Verifier. Through secure multi-party computation (MPC), the Prover's requests to a TLS-enabled webserver are encrypted and authenticated.
-          </p>
-          <br />
-          <p>
-            During the protocol neither the Prover nor Verifier are in possession of the full TLS session keys, they only hold respective shares of those keys. This preserves the security properties of TLS while enabling the Prover to prove the authenticity of the communication to the Verifier.
-          </p>
-          <br />
-          <p>
-            All of this is achieved while maintaining full privacy. The unencrypted communications remain hidden to the Verifier, and optionally the identity of the server can remain private as well.
-          </p>
-          <br />
-          <p>
-            Moreover, our protocol operates transparently to the webserver.
-            In fact, the webserver remains unaware that this process is taking place.
-          </p>
-          <br />
-          <p>
-            Since the validation of the TLS traffic neither reveals anything about the plaintext of the TLS session nor about the Server, it is possible to outsource the MPC-TLS verification to a general-purpose TLS verifier, which we term a <em>Notary</em>. This Notary can sign (aka <em>notarize</em>) the data, making it portable in a privacy preserving way.
-          </p>
-
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/components/Navbar.css
+++ b/src/components/Navbar.css
@@ -1,110 +0,0 @@
-#navbar {
-  border-bottom: var(--border);
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-areas: "tlsn-link anchor-links social-links";
-  font-weight: 600;
-  font-size: 1.125rem;
-  padding-block: 12px;
-}
-
-#navbar > * {
-  align-self: center;
-  justify-self: center;
-}
-
-#navbar > img {
-  width: 40px;
-  height: 40px;
-}
-
-.nav-links {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-  align-items: center;
-  gap: 3rem;
-}
-
-.nav-links a {
-  text-decoration: none;
-  color: var(--text-color);
-  font-size: 1.125rem;
-}
-
-#anchor-links {
-  grid-area: anchor-links;
-}
-
-#tlsn-link {
-  grid-area: tlsn-link;
-}
-
-#social-links {
-  grid-area: social-links;
-}
-
-#menu-link {
-  display: none;
-  grid-area: menu-link;
-}
-
-#nav-menu-mobile {
-  display: none;
-}
-
-@media screen and (max-width: 800px) {
-  #navbar {
-    grid-template-areas: "tlsn-link social-links menu-link";
-    padding-inline: 1em;
-    border-bottom: none;
-    padding-block: 16px;
-  }
-
-  .nav-links {
-    gap: 1rem;
-  }
-
-  #anchor-links {
-    display: none;
-  }
-
-  #menu-link {
-    display: block;
-    justify-self: end;
-  }
-
-  #social-links {
-    justify-self: start;
-  }
-
-  #social-links > #job-openings {
-    display: none;
-  }
-
-  #nav-menu-mobile.menu-open {
-    display: grid;
-    min-height: 33vh;
-  }
-
-  #nav-menu-mobile.menu-closed {
-    display: none;
-  }
-
-  #nav-menu-mobile {
-    grid-template-columns: 1fr;
-    padding-block: 1.5em;
-    border-bottom: var(--border);
-    margin-bottom: 1em;
-  }
-
-  #nav-menu-mobile > a {
-    font-weight: 600;
-    text-decoration: none;
-    color: var(--text-color);
-    padding: 0.75em;
-    align-self: center;
-    justify-self: start;
-    padding-left: 1em;
-  }
-}
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,44 +0,0 @@
-import { useState } from 'react';
-import logo from '../images/tlsn-logo.svg';
-import discord from '../images/discord_round.svg';
-import github from "../images/github.svg";
-import './Navbar.css'
-import config from "../config.json";
-
-function Navbar() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const toggleMenu = () => {
-    setIsOpen(!isOpen)
-  };
-
-  return (
-    <nav id="nav-menu">
-      <nav id="navbar" aria-label="Navigation for Desktop">
-        <a href="#" id="tlsn-link">
-          <img src={logo} alt="tlsn logo" />
-        </a>
-        <div id="anchor-links" className="nav-links">
-          <a href={config.links.docs}>Docs</a>
-          <a href={config.links.api}>API</a>
-          <a href="#About">About</a>
-        </div>
-        <div id="social-links" className="nav-links">
-          <a href={config.links.discord} aria-label="TLSNotary Discord link" target="_blank" rel="noopener noreferrer">
-            <img src={discord} alt="TLSNotary Discord" />
-          </a>
-          <a href={config.links.repo} aria-label="TLSNotary Github Repo">
-            <img src={github} alt="Github" />
-          </a>
-        </div>
-        <div id="menu-link" onClick={() => { toggleMenu() }}>{isOpen ? 'Close' : 'Menu'}</div>
-      </nav>
-      <nav id="nav-menu-mobile" aria-label="Navigation for Mobile" className={isOpen ? 'menu-open' : 'menu-closed'}>
-        <a href={config.links.docs}>Docs</a>
-        <a href="#About">About</a>
-      </nav>
-    </nav>
-  )
-}
-
-export default Navbar;
--- a/src/components/Roadmap.css
+++ b/src/components/Roadmap.css
@@ -1,73 +0,0 @@
-#Roadmap {
-  background-color: var(--light-brown);
-  padding: 100px;
-}
-
-#Roadmap .cards {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 2.5rem;
-}
-
-#Roadmap .border {
-  box-shadow: 2px 3px 5px var(--blue);
-}
-
-#Roadmap .card {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  align-items: flex-start;
-  border-radius: var(--border-radius);
-  background: var(--light-blue);
-  padding: 1.2rem;
-}
-
-#Roadmap .card-text {
-  color: var(--white);
-  line-height: 1.5rem;
-  font-weight: 600;
-  font-size: 1rem;
-}
-
-#Roadmap .card-title {
-  display: flex;
-}
-
-#Roadmap .card-title > div,
-#Roadmap .card-title > a > div {
-  font-weight: 700;
-  font-size: 1.5rem;
-  padding-block: 1.5rem;
-}
-
-#Roadmap .card-title > a > * {
-  display: inline-flex;
-}
-
-#Roadmap .card-body {
-  align-self: flex-start;
-  flex: 1;
-}
-
-#Roadmap .card-footer {
-  display: flex;
-  justify-content: space-between;
-  border-top: 2px solid #9ea3a7;
-  padding-top: 1rem;
-  margin-top: 2.5rem;
-  /* flex-wrap: wrap;
-      background-color: transparent;
-      padding: 1em 0em;
-      border-top: 2px solid var(--gray);
-      align-self: stretch; */
-}
-
-@media only screen and (max-width: 600px) {
-  #Roadmap .cards {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    align-items: center;
-  }
-}
--- a/src/components/Roadmap.tsx
+++ b/src/components/Roadmap.tsx
@@ -1,36 +0,0 @@
-import "./Roadmap.css";
-
-export default function Roadmap() {
-  return (
-    <div id="Roadmap">
-      <h3>
-        We're rebuilding the protocol from the ground up.
-      </h3>
-      <div style={{ height: "1.375rem" }} />
-      <p>Below are some development goals on our roadmap:</p>
-      <div style={{ height: "1.375rem" }} />
-      <div className="cards">
-        <div className="card border">
-            <div className="card-body">
-                <div className="card-text">Implement the core protocol as a series of open-source Rust libraries</div>
-            </div>
-        </div>
-        <div className="card border">
-            <div className="card-body">
-                <div className="card-text">Build and release a Notary server implementation</div>
-            </div>
-        </div>
-        <div className="card border">
-            <div className="card-body">
-                <div className="card-text">Develop a web extension for the browser</div>
-            </div>
-        </div>
-        <div className="card border">
-            <div className="card-body">
-                <div className="card-text">Create developer tools to build on top of TLSNotary</div>
-            </div>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/components/Usecases.css
+++ b/src/components/Usecases.css
@@ -1,60 +0,0 @@
-#Usecases {
-  padding-inline: 5rem;
-  padding: 4rem 3rem;
-  background-color: var(--background-blue);
-  justify-items: center;
-}
-
-#Usecases * p {
-  color: var(--white);
-  font-size: 1.125rem;
-  font-weight: 400;
-  line-height: 120%;
-}
-
-#Usecases .header {
-  color: var(--white);
-}
-
-#Usecases .body {
-  max-width: 67%;
-  margin: auto;
-}
-
-#Usecases .cards {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  gap: 2.5rem;
-}
-
-#Usecases .card {
-  border-radius: var(--border-radius);
-  background: var(--light-blue);
-  padding: 1.2rem;
-}
-
-#Usecases .card-text {
-  color: var(--white);
-  line-height: 1.5rem;
-  font-weight: 600;
-  font-size: 1rem;
-}
-.card-image {
-  display:block;
-  margin:auto;
-  width:100%;
-  height:auto;
-}
-
-#Usecases .card-body {
-  align-self: flex-start;
-}
-
-@media only screen and (max-width: 600px) {
-  #Usecases .cards {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-}
--- a/src/components/Usecases.tsx
+++ b/src/components/Usecases.tsx
@@ -1,84 +0,0 @@
-import "./Usecases.css";
-import prove from "../images/img-proveyouself.svg";
-import msg from "../images/img-bear.svg";
-import money from "../images/img-elephant-love.svg";
-import webpage from "../images/img-elephant-reading.svg";
-import block from "../images/img-block-to-app.svg";
-import account from "../images/img-bear-access.svg";
-
-
-
-export default function Usecases() {
-  return (
-    <div id="Usecases">
-        <div className="body">
-        <h2 className="header">What can TLSNotary do?</h2>
-        <div style={{ height: "1.375rem" }} />
-        <p>
-            With TLSNotary, you can create cryptographic proofs of authenticity for any data on the web, even your private data.
-            Using our protocol you can securely prove:
-        </p>
-        <div style={{ height: "1.375rem" }} />
-        <div className="cards">
-            <div className="card border">
-                <div className="card-body">
-                    <div className="card-image"><img className="card-image" src={prove} alt="verify"></img></div>             
-                    <div className="card-text">Private information about yourself.</div>
-                </div>
-            </div>
-            <div className="card border">
-                <div className="card-body">
-                    <div className="card-image"><img className="card-image" src={msg} alt="verify"></img></div>  
-                    <div className="card-text">You received a private message from someone.</div>
-                </div>
-            </div>
-            <div className="card border">
-                <div className="card-body">
-                    <div className="card-image"><img className="card-image" src={money} alt="verify"></img></div>  
-                    <div className="card-text">You received a money transfer.</div>
-                </div>
-            </div>
-            <div className="card border">
-                <div className="card-body">
-                    <div className="card-image"><img className="card-image" src={webpage} alt="verify"></img></div>  
-                    <div className="card-text">A snapshot of a webpage.</div>
-                </div>
-            </div>
-            <div className="card border">
-                <div className="card-body">
-                    <div className="card-image"><img className="card-image" src={block} alt="verify"></img></div>  
-                    <div className="card-text">You were blocked from using an app.</div>
-                </div>
-            </div>
-            <div className="card border">
-                <div className="card-body">
-                    <div className="card-image"><img className="card-image" src={account} alt="verify"></img></div>  
-                    <div className="card-text">You have access to an account.</div>
-                </div>
-            </div>
-        </div>
-        <div style={{ height: "1.375rem" }} />
-        <h3 className="header">Is it secure?</h3>
-        <div style={{ height: "1.375rem" }} />
-        <p>
-            One may assume that TLSNotary requires a “man-in-the-middle” setup where the Notary snoops on the connection with the webserver.
-            Fortunately, this is not true! Data is kept private even from the Notary.
-            <br/>
-            <br/>
-            See <a href="#How">below</a> for more details on how it works.
-        </p>
-        <div style={{ height: "1.375rem" }} />
-        <h3 className="header">What's the catch?</h3>
-        <div style={{ height: "1.375rem" }} />
-        <p>
-            TLSNotary does require a trust assumption.
-            A Verifier of a proof must trust that the Notary did not collude with the Prover to forge it.
-            This trust can be minimized by requiring multiple proofs each signed by different Notaries.
-            <br/>
-            <br/>
-            In some applications the Verifier can act as the Notary themselves, which allows for fully trustless proofs!
-        </p>
-        </div>
-    </div>
-  );
-}
--- a/src/config.json
+++ b/src/config.json
@@ -1,9 +0,0 @@
-{
-  "links": {
-    "discord": "https://discord.gg/9XwESXtcN7",
-    "repo": "https://github.com/tlsnotary/tlsn",
-    "docs": "https://docs.tlsnotary.org",
-    "api": "https://tlsnotary.github.io/tlsn/",
-    "pse": "https://pse.dev"
-  }
-}
--- a/src/images/discord.svg
+++ b/src/images/discord.svg
@@ -1,3 +0,0 @@
-<svg width="33" height="26" viewBox="0 0 33 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M27.4888 2.91418C25.4677 1.98683 23.3004 1.3036 21.0344 0.912286C20.9931 0.904734 20.9519 0.923607 20.9306 0.961355C20.6519 1.4571 20.3432 2.10384 20.127 2.61218C17.6897 2.24729 15.2649 2.24729 12.8777 2.61218C12.6614 2.09254 12.3415 1.4571 12.0615 0.961355C12.0402 0.924867 11.999 0.905993 11.9577 0.912286C9.69294 1.30235 7.52566 1.98558 5.50335 2.91418C5.48584 2.92173 5.47084 2.93432 5.46088 2.95067C1.35 9.09223 0.223856 15.0828 0.776304 20.9992C0.778803 21.0281 0.795052 21.0558 0.81755 21.0734C3.52979 23.0652 6.15706 24.2744 8.73554 25.0759C8.7768 25.0885 8.82053 25.0734 8.84679 25.0394C9.45673 24.2065 10.0004 23.3282 10.4666 22.4046C10.4941 22.3505 10.4679 22.2864 10.4116 22.265C9.54922 21.9378 8.72803 21.539 7.93811 21.086C7.87563 21.0495 7.87063 20.9601 7.92811 20.9174C8.09434 20.7928 8.26061 20.6632 8.41934 20.5323C8.44805 20.5084 8.48807 20.5034 8.52183 20.5185C13.7113 22.8878 19.3295 22.8878 24.4578 20.5185C24.4915 20.5021 24.5316 20.5072 24.5615 20.5311C24.7203 20.6619 24.8865 20.7928 25.054 20.9174C25.1115 20.9601 25.1077 21.0495 25.0452 21.086C24.2553 21.5478 23.4341 21.9378 22.5705 22.2637C22.5142 22.2851 22.4892 22.3505 22.5167 22.4046C22.9929 23.3269 23.5366 24.2052 24.1353 25.0382C24.1603 25.0734 24.2053 25.0885 24.2466 25.0759C26.8376 24.2744 29.4648 23.0652 32.177 21.0734C32.2008 21.0558 32.2158 21.0294 32.2183 21.0004C32.8795 14.1605 31.1109 8.21901 27.53 2.95192C27.5212 2.93432 27.5063 2.92173 27.4888 2.91418ZM11.2416 17.3967C9.67919 17.3967 8.39182 15.9624 8.39182 14.2008C8.39182 12.4392 9.65422 11.0048 11.2416 11.0048C12.8414 11.0048 14.1163 12.4518 14.0913 14.2008C14.0913 15.9624 12.8289 17.3967 11.2416 17.3967ZM21.778 17.3967C20.2157 17.3967 18.9283 15.9624 18.9283 14.2008C18.9283 12.4392 20.1907 11.0048 21.778 11.0048C23.3779 11.0048 24.6528 12.4518 24.6278 14.2008C24.6278 15.9624 23.3779 17.3967 21.778 17.3967Z" fill="#282A2D"/>
-</svg>
--- a/src/images/discord_round.svg
+++ b/src/images/discord_round.svg
@@ -1,4 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.18 23.5C22.48 23.88 22.84 24.31 22.84 24.31C25.05 24.24 25.9 22.79 25.9 22.79C25.9 19.57 24.46 16.96 24.46 16.96C23.02 15.88 21.65 15.91 21.65 15.91L21.51 16.07C23.21 16.59 24 17.34 24 17.34C22.96 16.77 21.94 16.49 20.99 16.38C20.27 16.3 19.58 16.32 18.97 16.4C18.9176 16.4 18.8729 16.4076 18.8224 16.4162L18.8 16.42C18.45 16.45 17.6 16.58 16.53 17.05C16.16 17.22 15.94 17.34 15.94 17.34C15.94 17.34 16.77 16.55 18.57 16.03L18.47 15.91C18.47 15.91 17.1 15.88 15.66 16.96C15.66 16.96 14.22 19.57 14.22 22.79C14.22 22.79 15.06 24.24 17.27 24.31C17.27 24.31 17.64 23.86 17.94 23.48C16.67 23.1 16.19 22.3 16.19 22.3C16.19 22.3 16.29 22.37 16.47 22.47C16.48 22.48 16.49 22.49 16.51 22.5C16.525 22.51 16.54 22.5175 16.555 22.525C16.57 22.5325 16.585 22.54 16.6 22.55C16.85 22.69 17.1 22.8 17.33 22.89C17.74 23.05 18.23 23.21 18.8 23.32C19.55 23.46 20.43 23.51 21.39 23.33C21.86 23.25 22.34 23.11 22.84 22.9C23.19 22.77 23.58 22.58 23.99 22.31C23.99 22.31 23.49 23.13 22.18 23.5ZM17.17 20.75C17.17 20.14 17.62 19.64 18.19 19.64C18.76 19.64 19.22 20.14 19.21 20.75C19.21 21.36 18.76 21.86 18.19 21.86C17.63 21.86 17.17 21.36 17.17 20.75ZM20.82 20.75C20.82 20.14 21.27 19.64 21.84 19.64C22.41 19.64 22.86 20.14 22.86 20.75C22.86 21.36 22.41 21.86 21.84 21.86C21.28 21.86 20.82 21.36 20.82 20.75Z" fill="#151616"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20C0 8.95431 8.95431 0 20 0ZM11.25 13.31C11.25 12.17 12.17 11.25 13.3 11.25H26.7C27.83 11.25 28.75 12.17 28.75 13.31V31.25L26.6 29.35L25.39 28.23L24.11 27.04L24.64 28.89H13.3C12.17 28.89 11.25 27.97 11.25 26.83V13.31Z" fill="#151616"/>
-</svg>
--- a/src/images/docs.svg
+++ b/src/images/docs.svg
@@ -1,3 +0,0 @@
-<svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.516 22H24.5V3.33329C24.5 2.62605 24.219 1.94777 23.719 1.44767C23.2189 0.947577 22.5406 0.666626 21.8333 0.666626H4.5C2.892 0.666626 0.5 1.73196 0.5 4.66663V23.3333C0.5 26.268 2.892 27.3333 4.5 27.3333H24.5V24.6666H4.516C3.9 24.6506 3.16667 24.4066 3.16667 23.3333C3.16667 22.26 3.9 22.016 4.516 22ZM7.16667 5.99996H19.1667V8.66663H7.16667V5.99996Z" fill="#282A2D"/>
-</svg>
--- a/src/images/eth-logo-blue.svg
+++ b/src/images/eth-logo-blue.svg
@@ -1,69 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="24.354912mm"
-   height="39.464851mm"
-   viewBox="0 0 24.354912 39.464851"
-   version="1.1"
-   id="svg1277"
-   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
-   sodipodi:docname="eth-logo-blue.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1279"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="2.1997092"
-     inkscape:cx="-78.192154"
-     inkscape:cy="147.06489"
-     inkscape:window-width="3774"
-     inkscape:window-height="2096"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0" />
-  <defs
-     id="defs1274" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-92.822544,-128.76757)">
-    <g
-       id="g1468"
-       transform="translate(-0.14096858,-6.5988166)">
-      <g
-         style="fill:none"
-         id="g1411"
-         transform="matrix(0.26458333,0,0,0.26458333,92.963513,135.36639)">
-        <path
-           d="m 0.0990773,74.8785 c -0.003466,0.1949 0.0107467,0.3897 0.0424617,0.5819 0.035385,0.1136 0.120311,0.1988 0.162773,0.3052 0.016884,0.0985 0.040529,0.1957 0.070768,0.291 0.042462,0.0923 0.148616,0.1277 0.198154,0.2129 0.237048,0.3938 0.549776,0.7363 0.920006,1.0078 0.12031,0.0851 0.20524,0.1845 0.32554,0.2555 0.12031,0.071 0.08493,0.0851 0.13447,0.1064 L 44.4151,98.9303 h 0.0991 c 0.4623,0.2285 0.9708,0.3474 1.4862,0.3474 0.5154,0 1.0239,-0.1189 1.4861,-0.3474 h 0.0991 L 90.0475,77.6392 c 0.1038,-0.0719 0.2031,-0.1501 0.2973,-0.2342 0.2212,-0.1388 0.4254,-0.3032 0.6086,-0.4897 0.1565,-0.1604 0.2964,-0.3364 0.4175,-0.5251 0.091,-0.1064 0.1761,-0.2178 0.2548,-0.3336 0.0495,-0.1065 0.0424,-0.2129 0.0849,-0.3123 0.0551,-0.0916 0.1047,-0.1864 0.1486,-0.2839 0.0106,-0.1275 0.0106,-0.2557 0,-0.3832 0.0502,-0.245 0.0693,-0.4954 0.0566,-0.7452 C 91.908,74.1243 91.8819,73.9177 91.838,73.7146 91.7799,73.4692 91.6944,73.2311 91.5832,73.0049 91.5529,72.8913 91.5151,72.7798 91.47,72.6713 L 49.0081,1.70095 C 48.9586,1.62288 48.8666,1.59449 48.817,1.52352 48.5072,1.05506 48.0865,0.670779 47.5926,0.404948 47.0986,0.139118 46.5468,0 45.9862,0 45.4257,0 44.8738,0.139118 44.3799,0.404948 43.886,0.670779 43.4653,1.05506 43.1554,1.52352 43.1059,1.59449 43.0139,1.62288 42.9644,1.70095 L 0.502466,72.6713 C 0.220065,73.175 0.0645848,73.7402 0.0495387,74.3178 0.0495387,74.3817 0,74.4314 0,74.4952 0.0249646,74.625 0.0580556,74.753 0.0990773,74.8785 Z M 42.4619,90.0165 11.4506,74.4669 42.4619,58.9173 Z m 7.077,-31.0992 31.0113,15.5496 -31.0113,15.5496 z m 0,-7.9345 V 16.3066 l 29.6313,49.5303 z m -7.077,0 L 12.8235,65.844 42.4619,16.3066 Z"
-           fill="#243f5f"
-           id="path1402" />
-      </g>
-      <g
-         style="fill:none"
-         id="g1422"
-         transform="matrix(0.26458333,0,0,0.26458333,92.976762,157.89791)">
-        <path
-           d="M 91.1797,1.38995 C 90.6689,0.775196 89.9659,0.351623 89.1848,0.188005 88.4037,0.0243872 87.5904,0.130333 86.8769,0.488631 L 46.0002,20.9849 5.12359,0.488631 C 4.41072,0.130439 3.59811,0.0241912 2.81749,0.187118 2.03687,0.350045 1.33401,0.772597 0.822832,1.38626 0.311658,1.99993 0.0221425,2.76874 0.00121924,3.56807 -0.019704,4.36741 0.229192,5.1504 0.707557,5.79011 L 43.1695,62.5664 c 0.0424,0.0568 0.1132,0.0781 0.1627,0.1348 0.2362,0.2797 0.5158,0.5194 0.828,0.7097 0.1118,0.087 0.2301,0.1653 0.3539,0.2342 C 44.9749,63.8784 45.484,64 46.0002,64 c 0.5163,0 1.0253,-0.1216 1.4862,-0.3549 0.1237,-0.0689 0.242,-0.1472 0.3539,-0.2342 0.3122,-0.1903 0.5918,-0.43 0.828,-0.7097 0.0495,-0.0567 0.1203,-0.078 0.1627,-0.1348 L 91.2929,5.79011 C 91.7707,5.15094 92.0194,4.36882 91.9988,3.5703 91.9783,2.77178 91.6897,2.00356 91.1797,1.38995 Z M 42.4618,27.1451 V 49.7917 L 15.364,13.5968 Z m 7.0769,22.6466 V 27.1451 L 76.6365,13.5968 Z"
-           fill="#243f5f"
-           id="path1413" />
-      </g>
-    </g>
-  </g>
-</svg>
--- a/src/images/eth.svg
+++ b/src/images/eth.svg
@@ -1,4 +0,0 @@
-<svg width="248" height="400" viewBox="0 0 248 400" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M245.471 231.919C244.096 230.269 242.203 229.132 240.101 228.693C237.998 228.253 235.808 228.538 233.887 229.5L123.841 284.523L13.7936 229.5C11.8744 228.538 9.68673 228.253 7.58517 228.69C5.48361 229.128 3.59137 230.262 2.2152 231.909C0.839037 233.557 0.0596114 235.621 0.00328241 237.767C-0.0530466 239.912 0.617023 242.014 1.90486 243.732L116.22 396.151C116.334 396.304 116.524 396.361 116.658 396.513C117.293 397.264 118.046 397.908 118.887 398.419C119.188 398.652 119.506 398.862 119.839 399.047C121.08 399.674 122.451 400 123.841 400C125.23 400 126.601 399.674 127.842 399.047C128.175 398.862 128.493 398.652 128.794 398.419C129.635 397.908 130.388 397.264 131.023 396.513C131.157 396.361 131.347 396.304 131.461 396.151L245.776 243.732C247.062 242.016 247.732 239.916 247.677 237.773C247.621 235.629 246.844 233.567 245.471 231.919ZM114.314 301.061V361.857L41.3625 264.69L114.314 301.061ZM133.367 361.857V301.061L206.319 264.69L133.367 361.857Z" fill="#fff" />
-                    <path d="M0.266733 201.016C0.257402 201.539 0.295665 202.062 0.381049 202.578C0.476311 202.883 0.704945 203.112 0.819259 203.398C0.864715 203.662 0.92837 203.923 1.00978 204.179C1.12409 204.426 1.40988 204.522 1.54325 204.75C2.18142 205.807 3.02334 206.727 4.02007 207.456C4.34396 207.684 4.57259 207.951 4.89648 208.142C5.22037 208.332 5.12511 208.37 5.25848 208.427L119.573 265.585H119.84C121.084 266.198 122.453 266.517 123.841 266.517C125.228 266.517 126.597 266.198 127.842 265.585H128.109L242.423 208.427C242.703 208.234 242.97 208.025 243.224 207.799C243.819 207.426 244.369 206.985 244.862 206.484C245.283 206.053 245.66 205.581 245.986 205.074C246.231 204.789 246.46 204.49 246.672 204.179C246.805 203.893 246.786 203.607 246.901 203.34C247.049 203.095 247.182 202.84 247.301 202.578C247.329 202.236 247.329 201.892 247.301 201.55C247.436 200.892 247.487 200.22 247.453 199.549C247.432 198.991 247.362 198.437 247.244 197.891C247.087 197.233 246.857 196.594 246.558 195.986C246.476 195.681 246.374 195.382 246.253 195.091L131.938 4.5663C131.805 4.35672 131.557 4.28051 131.424 4.08999C130.59 2.83237 129.457 1.80075 128.127 1.08711C126.798 0.373471 125.312 0 123.803 0C122.294 0 120.808 0.373471 119.478 1.08711C118.148 1.80075 117.016 2.83237 116.182 4.08999C116.048 4.28051 115.801 4.35672 115.667 4.5663L1.35273 195.091C0.592452 196.443 0.173873 197.96 0.133367 199.511C0.133367 199.682 0 199.816 0 199.987C0.0672089 200.335 0.156296 200.679 0.266733 201.016ZM114.315 241.655L30.8269 199.911L114.315 158.167V241.655ZM133.367 158.167L216.855 199.911L133.367 241.655V158.167ZM133.367 136.866V43.7762L213.14 176.743L133.367 136.866ZM114.315 136.866L34.523 176.762L114.315 43.7762V136.866Z" fill="#fff" />
-                </svg>
--- a/src/images/github.svg
+++ b/src/images/github.svg
@@ -1,3 +0,0 @@
-<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.5 0C7.66 0 0.5 7.16 0.5 16C0.5 23.08 5.08 29.06 11.44 31.18C12.24 31.32 12.54 30.84 12.54 30.42C12.54 30.04 12.52 28.78 12.52 27.44C8.5 28.18 7.46 26.46 7.14 25.56C6.96 25.1 6.18 23.68 5.5 23.3C4.94 23 4.14 22.26 5.48 22.24C6.74 22.22 7.64 23.4 7.94 23.88C9.38 26.3 11.68 25.62 12.6 25.2C12.74 24.16 13.16 23.46 13.62 23.06C10.06 22.66 6.34 21.28 6.34 15.16C6.34 13.42 6.96 11.98 7.98 10.86C7.82 10.46 7.26 8.82 8.14 6.62C8.14 6.62 9.48 6.2 12.54 8.26C13.82 7.9 15.18 7.72 16.54 7.72C17.9 7.72 19.26 7.9 20.54 8.26C23.6 6.18 24.94 6.62 24.94 6.62C25.82 8.82 25.26 10.46 25.1 10.86C26.12 11.98 26.74 13.4 26.74 15.16C26.74 21.3 23 22.66 19.44 23.06C20.02 23.56 20.52 24.52 20.52 26.02C20.52 28.16 20.5 29.88 20.5 30.42C20.5 30.84 20.8 31.34 21.6 31.18C24.7765 30.108 27.5367 28.0667 29.4921 25.3435C31.4474 22.6204 32.4994 19.3525 32.5 16C32.5 7.16 25.34 0 16.5 0Z" fill="#282A2D"/>
-</svg>
--- a/src/images/img-bear-access.svg
+++ b/src/images/img-bear-access.svg
@@ -1,17 +0,0 @@
-<svg width="300" height="180" viewBox="0 0 300 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-<ellipse cx="151.5" cy="168.443" rx="78.5" ry="7" fill="#373A3E"/>
-<ellipse cx="114.111" cy="48.358" rx="6.43874" ry="10.4451" transform="rotate(-12.7722 114.111 48.358)" fill="#20190C"/>
-<ellipse cx="83.1558" cy="53.6315" rx="6.43874" ry="10.4451" transform="rotate(-16.0347 83.1558 53.6315)" fill="#20190C"/>
-<rect x="81.6479" y="50.9521" width="30.5854" height="6.86799" transform="rotate(-7.35856 81.6479 50.9521)" fill="#20190C"/>
-<path d="M168.618 12.9213C164.268 12.349 154.119 13.9229 149.588 14.7814C147.919 11.9197 143.121 6.94042 137.283 9.91655C131.445 12.8927 130.749 19.837 131.13 22.9371C129.938 24.7972 127.153 29.5762 125.55 33.8114C123.547 39.1055 120.542 52.8415 120.542 59.1372C120.542 65.4328 120.542 66.8636 116.679 65.5759C112.816 64.2881 110.24 54.2723 107.665 48.6921C105.089 43.1118 98.7935 37.8178 95.3595 48.6921C91.9255 59.5664 97.6488 74.304 103.515 82.8889C108.208 89.7569 116.822 94.431 120.542 95.9095C119.779 96.9588 118.253 100.431 118.253 105.925V118.087C114.723 123.429 107.665 135.458 107.665 140.838C107.665 146.218 114.723 156.052 118.253 160.297C117.204 160.774 114.79 161.728 113.531 161.728C111.957 161.728 107.522 165.734 115.105 167.022C122.688 168.31 143.292 166.736 144.58 165.734C145.841 164.754 143.81 162.95 142.516 161.801L142.434 161.728C141.146 160.583 139.286 154.86 139.143 151.998C139 149.136 142.72 140.838 149.588 139.407C156.456 137.976 168.618 140.838 169.906 143.985C170.936 146.504 173.483 155.909 174.628 160.297C173.96 161.155 172.453 163.445 171.766 165.734C170.907 168.596 179.492 168.31 187.219 168.739C194.945 169.168 201.384 168.023 201.384 165.734C201.384 163.903 196.805 161.346 194.516 160.297C196.185 156.338 199.152 146.904 197.664 140.838C196.176 134.771 190.081 127.912 187.219 125.242C188.411 122.618 190.796 116.285 190.796 111.935C190.796 106.498 192.084 101.776 194.516 102.348C196.949 102.921 201.813 98.1988 201.384 95.9095C201.041 94.078 191.798 70.6315 187.219 59.1372C187.839 57.6586 189.422 53.4997 190.796 48.6921C192.17 43.8845 192.99 35.5284 193.228 31.9514C194.564 29.9959 196.433 24.9117 193.228 20.2185C190.023 15.5254 183.976 17.023 181.352 18.3585C178.92 16.7845 172.968 13.4936 168.618 12.9213Z" fill="#ECE5D8"/>
-<path d="M149.588 14.7814C154.119 13.9229 164.268 12.349 168.618 12.9213C172.968 13.4936 178.92 16.7845 181.352 18.3585C183.976 17.023 190.023 15.5254 193.228 20.2185C196.433 24.9117 194.564 29.9959 193.228 31.9514C192.99 35.5284 192.17 43.8845 190.796 48.6921C189.422 53.4997 187.839 57.6586 187.219 59.1372C191.798 70.6315 201.041 94.0781 201.384 95.9095C201.813 98.1988 196.949 102.921 194.516 102.348C192.084 101.776 190.796 106.498 190.796 111.935C190.796 116.285 188.411 122.618 187.219 125.242C190.081 127.912 196.176 134.771 197.664 140.838C199.152 146.904 196.185 156.338 194.516 160.297C196.805 161.346 201.384 163.903 201.384 165.734C201.384 168.023 194.945 169.168 187.219 168.739C179.492 168.31 170.907 168.596 171.766 165.734C172.453 163.445 173.96 161.155 174.628 160.297C173.483 155.909 170.936 146.504 169.906 143.985C168.618 140.838 156.456 137.976 149.588 139.407C142.72 140.838 139 149.136 139.143 151.998C139.286 154.86 141.146 160.583 142.434 161.728C143.722 162.872 145.868 164.733 144.58 165.734C143.292 166.736 122.688 168.31 115.105 167.022C107.522 165.734 111.957 161.728 113.531 161.728C114.79 161.728 117.204 160.774 118.253 160.297C114.723 156.052 107.665 146.218 107.665 140.838C107.665 135.458 114.723 123.429 118.253 118.087M149.588 14.7814C147.919 11.9197 143.121 6.94042 137.283 9.91655C131.445 12.8927 130.749 19.837 131.13 22.9371C129.938 24.7972 127.153 29.5762 125.55 33.8114C123.547 39.1055 120.542 52.8415 120.542 59.1372C120.542 65.4328 120.542 66.8636 116.679 65.5759C112.816 64.2881 110.24 54.2723 107.665 48.6921C105.089 43.1118 98.7935 37.8178 95.3595 48.6921C91.9255 59.5664 97.6488 74.304 103.515 82.8889C108.208 89.7569 116.822 94.431 120.542 95.9095M149.588 14.7814L151.305 18.3585M118.253 118.087C118.253 116.323 118.253 111.42 118.253 105.925C118.253 100.431 119.779 96.9588 120.542 95.9095M118.253 118.087C118.73 119.947 120.141 124.154 121.973 126.1M120.542 95.9095C120.685 95.528 121.172 94.6218 121.973 94.0494" stroke="#413318" stroke-width="2" stroke-linecap="round"/>
-<ellipse cx="208.032" cy="84.6237" rx="6.43874" ry="10.4451" transform="rotate(-11.546 208.032 84.6237)" fill="#20190C"/>
-<ellipse cx="176.84" cy="96.3565" rx="6.43874" ry="10.4451" transform="rotate(-11.546 176.84 96.3565)" fill="#20190C"/>
-<rect x="178.672" y="92.1791" width="29.9653" height="6.86799" transform="rotate(-20.262 178.672 92.1791)" fill="#20190C"/>
-<path d="M202.94 95.2968C202.94 95.9441 202.65 96.7457 202.031 97.6334C201.421 98.5093 200.542 99.394 199.502 100.187C197.395 101.792 194.814 102.882 192.779 102.882C188.445 102.882 185.338 100.118 185.338 97.1568C185.338 96.4674 185.614 95.5692 186.184 94.5624C186.746 93.57 187.553 92.5441 188.508 91.6169C190.458 89.7251 192.831 88.4272 194.783 88.4272C196.826 88.4272 198.888 89.3451 200.449 90.7196C202.025 92.1084 202.94 93.8242 202.94 95.2968Z" fill="#ECE5D8" stroke="#413318" stroke-width="2"/>
-<path d="M143.831 73.2443C132.384 71.1839 123.656 63.1808 120.508 59.2222V63.0854C125.513 71.2253 134.842 83.0499 135.675 85.5495C136.705 88.6401 136.104 97.6162 135.675 101.718C136.104 101.289 137.278 100.173 138.537 99.1424C140.111 97.8546 149.268 90.2712 156.708 85.5495C162.661 81.7721 180.889 69.9057 189.188 64.8024L186.899 59.2222C184.371 62.0838 179.001 68.1506 174.308 71.2412C168.441 75.1044 158.139 75.8198 143.831 73.2443Z" fill="#243F5F"/>
-<ellipse cx="154.705" cy="43.0538" rx="2.28933" ry="2.86166" fill="#20190C"/>
-<ellipse cx="176.74" cy="44.1985" rx="2.28933" ry="2.86166" fill="#20190C"/>
-<path d="M166.152 46.5727C169.241 46.9133 171.146 49.2542 171.007 50.511C170.869 51.7677 168.252 52.5104 165.163 52.1697C162.074 51.8291 159.682 50.5342 159.821 49.2775C159.96 48.0207 163.063 46.232 166.152 46.5727Z" fill="#20190C"/>
-<path d="M166.009 51.2095C165.913 52.3542 165.637 54.8438 165.293 55.6451M165.293 55.6451C164.864 56.6467 161.573 58.6498 159.856 58.3637M165.293 55.6451C165.818 56.6467 167.268 58.6785 168.87 58.7929C170.473 58.9074 171.303 57.696 171.589 57.5052" stroke="#20190C" stroke-width="3" stroke-linecap="round"/>
-</svg>
--- a/src/images/img-bear.svg
+++ b/src/images/img-bear.svg
@@ -1,10 +0,0 @@
-<svg width="300" height="180" viewBox="0 0 300 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-<ellipse cx="150" cy="164.5" rx="73" ry="6.5" fill="#373A3E"/>
-<path d="M102.934 146.694V167.083C102.934 167.083 135.378 168.5 149.5 168.5C163.622 168.5 195.046 167.083 195.046 167.083C195.605 166.843 196.581 165.5 196.005 162.046C195.43 158.592 194.326 147.653 193.846 142.616C195.925 143.655 201.522 145.638 207.279 145.255C214.476 144.775 220.233 139.497 219.993 121.267C219.753 103.036 209.918 89.8432 206.32 85.7654C203.441 82.5031 195.525 76.4102 191.927 73.7716C192.567 65.5359 193.846 48.1049 193.846 44.2669C193.846 40.4289 193.207 37.3905 192.887 36.351C194.326 35.3915 197.588 32.8008 199.124 30.1142C201.043 26.756 196.485 22.1983 192.887 20.999C190.008 20.0395 184.171 22.838 181.613 24.3572C179.134 23.2378 171.442 20.5192 160.504 18.6002C149.565 16.6812 135.637 17.3209 130.039 17.8806C129.16 17.2409 126.681 15.6737 123.803 14.5223C120.205 13.0831 116.367 14.5223 115.407 20.0394C114.639 24.4532 115.727 29.0748 116.367 30.8338C116.287 33.7923 115.983 40.8127 115.407 45.2264C114.831 49.6401 113.088 58.8993 112.289 62.9772C106.772 68.8141 94.5859 82.9348 89.9803 92.7217C84.2233 104.955 83.5036 113.111 87.5815 122.466C90.8438 129.95 100.775 132.781 105.332 133.261C104.533 134.94 102.934 139.977 102.934 146.694Z" fill="#ECE5D8"/>
-<path d="M105.332 133.261C104.533 134.94 102.934 139.977 102.934 146.694C102.934 153.41 102.934 164.445 102.934 167.083C102.934 167.083 135.378 168.5 149.5 168.5C163.622 168.5 195.046 167.083 195.046 167.083C195.605 166.843 196.581 165.5 196.005 162.046C195.43 158.592 194.326 147.653 193.846 142.616M105.332 133.261C100.775 132.781 90.8438 129.95 87.5815 122.466C83.5036 113.111 84.2233 104.955 89.9803 92.7217C94.5859 82.9348 106.772 68.8141 112.289 62.9772C113.088 58.8993 114.831 49.6401 115.407 45.2264C115.983 40.8127 116.287 33.7923 116.367 30.8338C115.727 29.0748 114.639 24.4532 115.407 20.0394C116.367 14.5223 120.205 13.0831 123.803 14.5223C126.681 15.6737 129.16 17.2409 130.039 17.8806M105.332 133.261C108.451 134.14 116.223 134.844 122.363 130.622C130.039 125.345 138.915 116.469 147.79 111.192C156.666 105.915 161.703 104.716 165.541 104.716C169.379 104.716 171.058 104.236 169.379 101.837C167.7 99.4383 165.781 97.5193 169.379 98.7186C172.977 99.918 175.616 104.716 177.055 104.716C178.494 104.716 179.454 97.999 175.376 95.3604C171.298 92.7217 166.74 88.8838 163.622 88.8838C160.504 88.8838 147.55 87.2046 136.996 88.8838C128.552 90.2271 123.723 92.0021 122.363 92.7217M130.039 17.8806C135.637 17.3209 149.565 16.6812 160.504 18.6002C171.442 20.5192 179.134 23.2378 181.613 24.3572C184.171 22.838 190.008 20.0395 192.887 20.999C196.485 22.1983 201.043 26.756 199.124 30.1142C197.588 32.8008 194.326 35.3915 192.887 36.351M130.039 17.8806C131.079 19.08 133.206 21.7666 133.398 22.918M192.887 36.351C193.207 37.3905 193.846 40.4289 193.846 44.2669C193.846 48.1049 192.567 65.5359 191.927 73.7716C195.525 76.4102 203.441 82.5031 206.32 85.7654C209.918 89.8433 219.753 103.036 219.993 121.267C220.233 139.497 214.476 144.775 207.279 145.255C201.522 145.638 195.925 143.655 193.846 142.616M192.887 36.351C192.887 35.3915 192.455 33.0407 190.728 31.3136C189.001 29.5865 187.45 28.3552 186.89 27.9554M193.846 142.616C188.969 139.577 180.125 131.342 183.772 122.706C188.329 111.912 197.444 113.111 200.803 115.03C203.489 116.565 207.199 123.506 208.719 126.784" stroke="#413318" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<ellipse cx="152.645" cy="56.2181" rx="3.35826" ry="3.83801" fill="#20190C"/>
-<ellipse cx="177.592" cy="57.6573" rx="2.87851" ry="3.83801" fill="#20190C"/>
-<path d="M166.063 61.3772C171.326 61.4154 175.551 64.306 175.538 66.1607C175.524 68.0154 171.247 69.4879 165.983 69.4497C160.72 69.4116 156.464 67.8771 156.478 66.0224C156.491 64.1678 160.8 61.339 166.063 61.3772Z" fill="#20190C"/>
-<path d="M162 73.4892C162.72 72.9294 164.687 71.7141 166.798 71.3303C168.908 70.9465 171.675 72.6096 172.794 73.4892" stroke="#20190C" stroke-width="2" stroke-linecap="round"/>
-<path d="M200.62 101.555L182.869 97.2368L164.399 141.614L183.589 143.293L186.947 136.576C185.988 135.297 183.877 131.971 183.109 128.9C182.15 125.062 184.308 120.505 187.427 116.667C189.922 113.596 193.744 113.309 195.343 113.548L200.62 101.555Z" fill="#243F5F" stroke="#20190C" stroke-width="2" stroke-linecap="round"/>
-</svg>
--- a/src/images/img-block-to-app.svg
+++ b/src/images/img-block-to-app.svg
@@ -1,32 +0,0 @@
-<svg width="300" height="180" viewBox="0 0 300 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_627_1120)">
-<path d="M150.313 110.953L154.683 72.7302L128.856 78.0673M43.199 138.386L48.1894 94.7362L72.6708 89.6774M72.6708 89.6774L67.9265 131.174M72.6708 89.6774L103.028 83.4044M103.028 83.4044L98.4247 123.665M103.028 83.4044L128.856 78.0673M128.856 78.0673L124.288 118.017" stroke="#20190C" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M159.803 179.5L271.895 135.803L180.227 105.168L28 140.315H75.7341L62.6725 156.227L107.794 151.24L94.9702 166.676L139.142 160.739L129.168 175.938L165.265 170.476L159.803 179.5Z" fill="#243F5F"/>
-<path d="M129.643 121.317C127.553 117.517 130.514 101.051 132.255 93.2936L162.89 105.405L160.516 131.291C151.095 129.549 131.733 125.116 129.643 121.317Z" fill="#ECE5D8" stroke="#413318" stroke-width="2"/>
-<path d="M90.3432 48.3175C92.8099 52.7275 106.77 77.7876 113.441 89.7664C116.252 90.4511 120.461 86.1851 122.214 83.9664C117.959 70.6886 108.47 43.8219 107.439 41.0993C105.91 37.0648 100.717 31.0113 94.6994 33.7853C88.6817 36.5592 87.2599 42.8051 90.3432 48.3175Z" fill="#413318"/>
-<path d="M108.373 36.9245L106.09 42.0615C105.795 42.7256 104.913 42.8631 104.429 42.3202L101.173 38.6617C100.678 38.1054 100.943 37.2227 101.663 37.0307L107.201 35.5523C108.013 35.3355 108.714 36.1565 108.373 36.9245Z" fill="#DACCB1"/>
-<path d="M115.396 51.4917L111.484 55.529C110.979 56.051 110.103 55.8762 109.836 55.2002L108.038 50.6444C107.765 49.9518 108.317 49.2142 109.059 49.2815L114.768 49.8C115.605 49.876 115.98 50.8881 115.396 51.4917Z" fill="#DACCB1"/>
-<path d="M118.518 64.0128L113.777 67.0329C113.164 67.4234 112.352 67.0503 112.25 66.3308L111.558 61.4824C111.452 60.7453 112.161 60.1559 112.867 60.3933L118.3 62.2216C119.096 62.4896 119.227 63.5612 118.518 64.0128Z" fill="#DACCB1"/>
-<path d="M85.2876 43.4207L90.3233 45.9188C90.9743 46.2417 91.7416 45.7843 91.767 45.058L91.9388 40.1635C91.965 39.4193 91.1978 38.9087 90.5214 39.22L85.3139 41.6164C84.5504 41.9678 84.5347 43.0472 85.2876 43.4207Z" fill="#DACCB1"/>
-<path d="M90.9205 55.5929L96.5077 56.2112C97.23 56.2911 97.7937 55.5982 97.5684 54.9072L96.05 50.251C95.8192 49.5431 94.9234 49.3267 94.3949 49.8512L90.3261 53.8892C89.7295 54.4813 90.0852 55.5005 90.9205 55.5929Z" fill="#DACCB1"/>
-<path d="M97.5125 68.8941L103.094 68.2249C103.815 68.1384 104.207 67.3354 103.83 66.7138L101.292 62.5251C100.906 61.8883 99.9846 61.8815 99.5893 62.5125L96.546 67.3704C96.0998 68.0826 96.678 68.9942 97.5125 68.8941Z" fill="#DACCB1"/>
-<ellipse cx="162.663" cy="145.175" rx="51.2963" ry="9.02436" transform="rotate(-7.11542 162.663 145.175)" fill="#373A3E"/>
-<path d="M117.719 90.6813C117.719 93.0123 116.509 95.1892 114.638 96.8107C112.765 98.4348 110.32 99.4181 108.032 99.4181C103.515 99.4181 99.77 95.5542 99.77 90.6813C99.77 88.092 100.257 85.0979 101.322 82.7904C102.393 80.4688 103.908 79.0947 105.894 79.0947C106.954 79.0947 108.231 79.4737 109.59 80.1899C110.938 80.9003 112.306 81.9108 113.531 83.0914C116.03 85.5008 117.719 88.4015 117.719 90.6813Z" fill="#ECE5D8" stroke="#413318" stroke-width="2"/>
-<path d="M155.03 16.3567C175.216 15.8818 185.665 37.7302 189.94 48.6544C194.215 59.5786 197.302 87.1267 196.827 95.6761C196.447 102.516 194.927 106.6 194.215 107.788C197.856 112.458 205.662 123.129 207.751 128.449C210.364 135.098 205.377 139.373 202.527 140.085C200.247 140.655 188.278 137.315 182.578 135.573C178.145 137.631 167.664 142.27 161.205 144.36C153.13 146.972 137.694 150.297 133.894 150.297C130.094 150.297 122.732 139.61 122.97 133.198C123.207 126.786 125.345 121.799 130.807 119.899C136.269 117.999 148.618 114.675 153.13 113.012C153.179 112.991 153.228 112.97 153.278 112.949C150.455 113.825 138.416 117.068 129.382 113.012C120.073 108.833 113.629 103.83 111.571 101.851C108.721 98.1301 104.731 88.9791 111.571 82.1395C118.41 75.3 125.028 76.7566 127.482 78.3398C124.236 75.8858 119.978 70.4079 117.508 61.4785C114.421 50.3168 122.543 36.5594 125.345 30.1308C129.382 20.8689 147.114 17.1484 155.03 16.3567Z" fill="#ECE5D8"/>
-<path d="M194.215 107.788C194.927 106.6 196.447 102.516 196.827 95.6761C197.302 87.1267 194.215 59.5786 189.94 48.6544C185.665 37.7302 175.216 15.8818 155.03 16.3567C147.114 17.1484 129.382 20.8689 125.345 30.1308C122.543 36.5594 114.421 50.3168 117.508 61.4785C119.978 70.4079 124.236 75.8858 127.482 78.3398M194.215 107.788C197.856 112.458 205.662 123.129 207.751 128.449C210.364 135.098 205.377 139.373 202.527 140.085C200.247 140.655 188.278 137.315 182.578 135.573C178.145 137.631 167.664 142.27 161.205 144.36C153.13 146.972 137.694 150.297 133.894 150.297C130.094 150.297 122.732 139.61 122.97 133.198C123.207 126.786 125.345 121.799 130.807 119.899C136.269 117.999 148.618 114.675 153.13 113.012M194.215 107.788C192.481 113.092 188.634 124.649 187.114 128.449M153.13 113.012C157.642 111.35 141.019 118.237 129.382 113.012C120.073 108.833 113.629 103.83 111.571 101.851C108.721 98.1301 104.731 88.9791 111.571 82.1395C118.41 75.3 125.028 76.7566 127.482 78.3398M153.13 113.012C157.175 111.271 165.788 107.788 167.878 107.788M127.482 78.3398C131.931 78.5007 142.248 79.4858 147.929 82.1395C153.61 84.7933 157.104 86.7233 158.141 87.3566" stroke="#413318" stroke-width="2" stroke-linecap="round"/>
-<path d="M158.937 58.1461C157.987 52.684 154.424 39.1475 143.738 37.7226C129.964 37.7226 124.976 49.3593 123.789 56.0088C122.602 62.6583 123.666 74.2753 129.405 77.1448C133.68 79.2821 149.354 79.9946 153.154 79.2821C157.309 78.5029 159.886 63.6083 158.937 58.1461Z" fill="#20190C"/>
-<ellipse cx="156.241" cy="37.7226" rx="1.89986" ry="2.37483" fill="#20190C"/>
-<ellipse cx="127.268" cy="38.1976" rx="1.89986" ry="2.37483" fill="#20190C"/>
-<path d="M149.354 49.8342L153.866 46.272C151.016 41.9973 145.554 38.4351 139.38 39.1475C134.44 39.7175 130.672 44.1346 129.405 46.272L132.968 50.5467L137.717 43.6597L142.229 50.5467L146.742 44.6096L149.354 49.8342Z" fill="#ECE5D8"/>
-<path d="M139.617 77.8572C144.557 78.4272 151.175 78.0947 153.866 77.8572C154.816 74.6275 153.47 70.8119 152.679 69.3078L150.779 74.5325L148.166 70.7327L144.367 74.5325L142.229 69.3078L136.767 74.5325L132.968 69.3078L131.543 73.5825L127.268 70.7327L128.455 75.2449C130.118 75.8782 134.677 77.2873 139.617 77.8572Z" fill="#ECE5D8"/>
-<path d="M167.658 6.90486C168.017 6.61834 168.551 6.83607 168.608 7.29185L170.336 21.2838C170.391 21.729 169.946 22.0689 169.531 21.8996L156.785 16.7037C156.37 16.5344 156.29 15.9807 156.641 15.7009L167.658 6.90486Z" fill="#20190C"/>
-<path d="M195.804 36.1881C196.262 36.1666 196.567 36.6562 196.346 37.0583L189.538 49.4043C189.322 49.7971 188.763 49.8119 188.525 49.4311L181.25 37.7472C181.013 37.3665 181.273 36.8712 181.721 36.8502L195.804 36.1881Z" fill="#20190C"/>
-<path d="M204.862 71.3924C205.302 71.5253 205.425 72.0887 205.082 72.3936L194.541 81.7552C194.205 82.053 193.673 81.8801 193.577 81.442L190.624 67.9986C190.528 67.5605 190.938 67.1806 191.368 67.3105L204.862 71.3924Z" fill="#20190C"/>
-<path d="M265.483 138.415V99.9432L240.429 108.179M162.178 177.838V133.903L185.926 126.096M185.926 126.096V167.863M185.926 126.096L215.374 116.416M215.374 116.416V156.939M215.374 116.416L240.429 108.179M240.429 108.179V148.39" stroke="#20190C" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_627_1120">
-<rect width="300" height="180" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/images/img-elephant-love.svg
+++ b/src/images/img-elephant-love.svg
@@ -1,36 +0,0 @@
-<svg width="300" height="180" viewBox="0 0 300 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-<ellipse cx="150" cy="163.5" rx="82" ry="10.5" fill="#373A3E"/>
-<path d="M192.013 120.952C189.422 113.177 182.628 101.433 179.555 96.5325C162.361 97.0309 127.477 98.4761 125.483 100.27C122.992 102.513 119.752 109.24 116.513 115.719C113.922 120.902 110.37 132.362 108.376 137.595C103.808 139.256 93.0904 143.527 91.097 146.119C88.6053 149.358 89.3528 158.827 93.5888 163.312C96.9776 166.9 105.965 169.126 110.034 169.79C115.018 167.631 125.583 163.312 127.975 163.312C130.965 163.312 150.152 165.554 163.607 163.312C174.372 161.518 183.043 159.574 186.033 158.827C188.027 160.737 193.459 165.056 199.239 167.049C206.466 169.541 209.954 169.292 213.193 168.046C215.785 167.049 217.429 156.003 217.928 150.604L195.003 139.64C195.087 136.65 194.605 128.726 192.013 120.952Z" fill="#ECE5D8"/>
-<path d="M108.376 137.595C103.808 139.256 93.0904 143.527 91.097 146.119C88.6053 149.358 89.3528 158.827 93.5888 163.312C96.9776 166.9 105.965 169.126 110.034 169.79C115.018 167.631 125.583 163.312 127.975 163.312C130.965 163.312 150.152 165.554 163.607 163.312C174.372 161.518 183.043 159.574 186.033 158.827C188.027 160.737 193.459 165.056 199.239 167.049C206.466 169.541 209.954 169.292 213.193 168.046C215.785 167.049 217.429 156.003 217.928 150.604L195.003 139.64C195.087 136.65 194.605 128.726 192.013 120.952C189.422 113.177 182.628 101.433 179.555 96.5325C162.361 97.0309 127.477 98.4761 125.483 100.27C122.992 102.513 119.752 109.24 116.513 115.719C113.922 120.902 110.37 132.362 108.376 137.595ZM108.376 137.595C108.654 140.152 108.775 146.216 111.367 148.808C113.958 151.399 120.088 153.874 122.829 154.788" stroke="#413318" stroke-width="2"/>
-<path d="M163 124.5C172.2 122.1 179.167 108.833 181.5 102.5L119.5 110C121.667 112.167 127.3 117.3 132.5 120.5C139 124.5 151.5 127.5 163 124.5Z" fill="#243F5F"/>
-<path d="M221.167 158.328C225.403 150.853 226.4 134.407 218.177 132.165C205.718 128.925 199.489 146.866 197.744 154.092C196 161.318 199.489 169.043 204.971 170.538C210.452 172.033 216.931 165.803 221.167 158.328Z" fill="#ECE5D8" stroke="#413318" stroke-width="2"/>
-<path d="M99.3198 140.387C95.0838 138.145 88.8544 134.656 82.8742 138.643C77.6415 145.122 78.389 151.6 84.6184 160.571C90.8478 169.541 103.307 175.521 107.543 172.531C111.779 169.541 112.277 162.066 111.28 156.584C110.284 151.102 103.556 142.63 99.3198 140.387Z" fill="#ECE5D8" stroke="#413318" stroke-width="2"/>
-<path d="M187.528 151.351C187.528 144.972 185.036 133.078 183.791 127.929C177.034 125.869 163.09 123.385 161.365 129.922C161.78 133.66 162.361 142.73 161.365 149.109C160.119 157.082 157.129 168.793 162.611 170.288C168.092 171.784 179.804 169.541 181.548 168.793C183.292 168.046 187.528 159.325 187.528 151.351Z" fill="#ECE5D8"/>
-<path d="M183.791 127.929C185.036 133.078 187.528 144.972 187.528 151.351C187.528 159.325 183.292 168.046 181.548 168.793C179.804 169.541 168.092 171.784 162.611 170.289C157.129 168.793 160.119 157.082 161.365 149.109C162.361 142.73 161.78 133.66 161.365 129.922" stroke="#413318" stroke-width="2"/>
-<path d="M133.706 16.547C149.155 14.0552 159.87 14.3044 166.348 19.2879C172.827 24.2714 178.807 34.4876 186.781 38.7236C194.754 42.9596 210.452 48.9398 213.692 58.4085C215.117 62.5761 214.291 66.4439 212.657 69.728C210.578 73.9053 207.191 77.1379 205.469 78.841L190.269 92.2965C189.021 94.5247 187.04 97.6137 184.178 100.731C179.037 106.329 171.055 112.018 159.371 112.978C141.181 114.473 127.726 113.227 120.5 110.985C114.719 109.191 110.45 104.755 109.038 102.762C106.795 101.516 100.267 97.9279 92.0937 93.5424C83.9208 89.1569 79.718 86.2332 78.6382 85.3195C75.6481 83.9906 69.9669 79.439 71.1629 71.864C72.658 62.3953 78.3891 53.6742 86.6119 46.1989C93.1901 40.2187 104.303 34.2384 109.038 31.9959C109.287 28.0921 114.569 19.5371 133.706 16.547Z" fill="#ECE5D8"/>
-<path d="M109.038 102.762C110.45 104.755 114.719 109.191 120.5 110.985C127.726 113.227 141.181 114.473 159.371 112.978C171.055 112.018 179.037 106.329 184.178 100.731M109.038 102.762C106.795 101.516 100.267 97.9279 92.0937 93.5424C83.9208 89.1569 79.718 86.2332 78.6382 85.3195M109.038 102.762C108.178 96.9478 106.975 82.6284 109.038 71.864C111.616 58.4085 115.689 46.1989 112.363 46.1989C109.038 46.1989 88.7777 57.308 83.708 68.0745C79.6522 76.6877 78.6382 83.16 78.6382 85.3195M78.6382 85.3195C75.6481 83.9906 69.9669 79.439 71.1629 71.864C72.658 62.3953 78.3891 53.6742 86.6119 46.1989C93.1901 40.2187 104.303 34.2384 109.038 31.9959C109.287 28.0921 114.569 19.5371 133.706 16.547C149.155 14.0552 159.87 14.3044 166.348 19.2879C172.827 24.2714 178.807 34.4876 186.781 38.7236C194.754 42.9596 210.452 48.9398 213.692 58.4085C216.931 67.8772 208.545 75.799 205.469 78.841L190.269 92.2965C189.021 94.5247 187.04 97.6138 184.178 100.731M184.178 100.731C185.074 89.714 185.82 65.8257 181.634 58.4085C177.448 50.9914 174.076 44.4858 172.913 42.1602C180.222 45.5171 196.336 53.4665 202.316 58.4085C208.296 63.3505 211.406 67.3927 212.706 69.8187" stroke="#413318" stroke-width="2"/>
-<path d="M160.814 93.9888C161.212 90.002 159.485 83.8556 158.571 81.2808L137.391 88.5069C137.308 89.5036 137.192 92.7429 137.391 97.7264C137.64 103.956 143.62 112.179 148.106 115.916C152.591 119.654 158.571 117.411 164.053 114.172C168.438 111.581 170.199 106.78 170.531 104.703C169.618 105.119 167.043 105.949 164.053 105.949C160.315 105.949 160.315 98.9723 160.814 93.9888Z" fill="#ECE5D8"/>
-<path d="M158.571 81.2808C159.485 83.8556 161.212 90.002 160.814 93.9888C160.315 98.9723 160.315 105.949 164.053 105.949C167.043 105.949 169.618 105.119 170.531 104.703C170.199 106.78 168.438 111.581 164.053 114.172C158.571 117.411 152.591 119.654 148.106 115.916M148.106 115.916C148.816 114.587 150.886 111.531 153.477 109.936C156.069 108.341 157.953 107.444 158.571 107.195M148.106 115.916C146.369 114.47 144.409 112.351 142.645 109.936M137.391 88.5069C137.308 89.5036 137.192 92.7429 137.391 97.7264C137.544 101.545 139.85 106.112 142.645 109.936M142.645 109.936C143.431 108.773 145.853 106.099 149.241 104.703C152.63 103.308 156.301 103.125 157.713 103.208M139.274 103.208C140.769 101.713 144.457 98.5238 147.248 97.7264C150.039 96.9291 154.391 97.3942 156.218 97.7264" stroke="#413318" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M122.493 127.929C124.885 128.726 129.47 135.072 131.464 138.145L122.493 145.371C121.496 142.464 119.354 136.002 118.756 133.411C118.008 130.171 119.503 126.932 122.493 127.929Z" fill="#ECE5D8" stroke="#413318" stroke-width="2"/>
-<path d="M128.224 136.151C122.443 139.74 120.666 144.125 120.5 145.869C119.254 155.587 130.218 160.322 135.201 161.069C140.185 161.817 145.168 155.836 146.414 151.351C147.66 146.866 144.421 147.115 141.929 145.122C140.968 144.353 140.563 143.622 140.557 142.827C140.546 141.581 141.516 140.181 142.86 138.239L142.926 138.145C145.168 134.906 144.919 132.912 142.926 131.666C140.932 130.42 135.45 131.666 128.224 136.151Z" fill="#ECE5D8"/>
-<path d="M140.557 142.827C140.546 141.561 141.548 140.135 142.926 138.145C145.168 134.906 144.919 132.912 142.926 131.666C140.932 130.42 135.45 131.666 128.224 136.151C122.443 139.74 120.666 144.125 120.5 145.869C119.254 155.587 130.218 160.322 135.201 161.069C140.185 161.817 145.168 155.836 146.414 151.351C147.66 146.866 144.421 147.115 141.929 145.122C140.968 144.353 140.563 143.622 140.557 142.827ZM140.557 142.827L138.278 147.313" stroke="#413318" stroke-width="2"/>
-<circle cx="131.301" cy="81.2809" r="3.98682" fill="#20190C"/>
-<path d="M163.411 72.5758C161.952 73.4535 158.424 77.1284 156.72 78.8788C158.616 79.5424 167.973 78.0684 168.663 77.6876C169.353 77.3069 168.9 74.8563 167.43 75.1278L164.98 75.5802C165.119 74.9632 167.526 73.4703 167.223 72.6322C166.706 71.2073 165.236 71.4788 163.411 72.5758Z" fill="#20190C"/>
-<path d="M183.129 169.738C183.129 170.977 181.456 171.981 179.392 171.981C177.327 171.981 175.654 170.977 175.654 169.738C175.654 168.5 177.327 166.001 179.392 166.001C181.456 166.001 183.129 168.5 183.129 169.738Z" fill="#20190C"/>
-<path d="M226.304 141.09C225.411 141.948 223.527 141.436 222.098 139.947C220.668 138.459 220.233 136.556 221.126 135.698C222.02 134.84 224.981 134.317 226.411 135.805C227.841 137.294 227.197 140.232 226.304 141.09Z" fill="#20190C"/>
-<path d="M176.152 170.735C176.152 171.974 174.479 172.978 172.415 172.978C170.35 172.978 168.677 171.974 168.677 170.735C168.677 169.496 170.35 166.997 172.415 166.997C174.479 166.997 176.152 169.496 176.152 170.735Z" fill="#20190C"/>
-<path d="M222.828 133.923C222.458 135.105 220.562 135.564 218.591 134.949C216.621 134.333 215.323 132.876 215.692 131.694C216.062 130.511 218.404 128.625 220.375 129.24C222.345 129.856 223.197 132.74 222.828 133.923Z" fill="#20190C"/>
-<path d="M168.179 170.735C168.179 171.974 166.505 172.978 164.441 172.978C162.377 172.978 160.703 171.974 160.703 170.735C160.703 169.496 162.377 166.997 164.441 166.997C166.505 166.997 168.179 169.496 168.179 170.735Z" fill="#20190C"/>
-<path d="M215.522 132.86C215.522 134.099 213.849 135.103 211.784 135.103C209.72 135.103 208.047 134.099 208.047 132.86C208.047 131.622 209.72 129.123 211.784 129.123C213.849 129.123 215.522 131.622 215.522 132.86Z" fill="#20190C"/>
-<path d="M78.6795 146.074C79.5728 146.932 81.4561 146.42 82.8858 144.931C84.3156 143.442 84.7504 141.54 83.857 140.682C82.9637 139.824 80.002 139.3 78.5723 140.789C77.1426 142.278 77.7861 145.216 78.6795 146.074Z" fill="#20190C"/>
-<path d="M82.1558 138.906C82.5251 140.088 84.4218 140.548 86.3921 139.932C88.3625 139.317 89.6604 137.859 89.2911 136.677C88.9218 135.495 86.5794 133.608 84.609 134.224C82.6387 134.839 81.7865 137.724 82.1558 138.906Z" fill="#20190C"/>
-<path d="M89.4614 137.844C89.4614 139.082 91.1348 140.086 93.1991 140.086C95.2633 140.086 96.9367 139.082 96.9367 137.844C96.9367 136.605 95.2633 134.106 93.1991 134.106C91.1348 134.106 89.4614 136.605 89.4614 137.844Z" fill="#20190C"/>
-<g clip-path="url(#clip0_621_590)">
-<path d="M237.575 28.8085C236.157 25.7459 232.522 24.5062 229.363 25.7302L228.126 26.2085L227.685 24.9579C226.565 21.7641 223.255 19.807 220.006 20.7214C216.282 21.7728 214.256 25.8044 215.51 29.3798L219.833 41.6801C220.112 42.4744 220.977 42.8723 221.762 42.568L233.917 37.8531C237.453 36.4827 239.199 32.3218 237.575 28.8085Z" fill="#ECE5D8"/>
-</g>
-<defs>
-<clipPath id="clip0_621_590">
-<rect width="24" height="24" fill="white" transform="translate(219.117 17.0817) rotate(24.7173)"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/images/img-elephant-reading.svg
+++ b/src/images/img-elephant-reading.svg
@@ -1,21 +0,0 @@
-<svg width="300" height="180" viewBox="0 0 300 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_621_642)">
-<ellipse cx="162" cy="159.5" rx="91" ry="6.5" fill="#373A3E"/>
-<path d="M155.069 12.2883C177.766 12.5404 191.132 22.8803 193.906 28.9329C195.357 32.0971 196.118 35.1235 198.315 36.7508C200.321 38.2363 203.525 38.5561 209.542 36.7508C222.152 32.968 234.005 22.3759 243.084 30.9504C252.163 39.5249 261.746 58.4393 259.728 62.7266C258.114 66.1564 254.684 66.5094 253.171 66.2572C251.574 69.3676 247.321 77.9085 243.084 87.1891C238.847 96.4698 218.957 129.053 209.542 144.184C188.274 147.547 142.812 153.616 131.111 150.994C116.484 147.715 94.7951 124.261 90.0034 114.174C85.2118 104.086 76.6373 78.8668 73.8632 72.562C71.0891 66.2572 64.7843 62.7266 59.9926 62.7266C55.201 62.7266 44.1046 56.4218 53.94 45.3253C63.7755 34.2289 80.9245 31.4548 95.5516 34.9855C107.253 37.81 112.364 37.3393 113.457 36.7508C115.979 29.2692 127.832 13.9023 155.069 12.2883Z" fill="#ECE5D8"/>
-<path d="M253.171 66.2572C254.684 66.5094 258.114 66.1564 259.728 62.7266C261.746 58.4393 252.163 39.5249 243.084 30.9504C234.005 22.3759 222.152 32.968 209.542 36.7508C203.525 38.5561 200.321 38.2363 198.315 36.7508M253.171 66.2572C251.574 69.3676 247.321 77.9085 243.084 87.1891C238.847 96.4698 218.957 129.053 209.542 144.184C188.274 147.547 142.812 153.616 131.111 150.994C116.484 147.715 94.7951 124.261 90.0034 114.174C85.2118 104.086 76.6373 78.8668 73.8632 72.562C71.0891 66.2572 64.7843 62.7266 59.9926 62.7266M253.171 66.2572C252.415 63.2309 250.145 55.7661 247.119 50.117C243.336 43.0556 236.779 41.5425 228.204 41.5425C221.345 41.5425 208.484 46.0819 202.912 48.3516M59.9926 62.7266C55.201 62.7266 44.1046 56.4218 53.94 45.3253C63.7755 34.2289 80.9245 31.4548 95.5516 34.9855C107.253 37.81 112.364 37.3393 113.457 36.7508M59.9926 62.7266C59.9926 60.1206 61.2536 53.5972 66.2974 48.3516C72.6021 41.7947 90.0034 41.5425 96.3082 42.0469C101.352 42.4504 106.355 45.5775 108.226 47.0907M113.457 36.7508C115.979 29.2692 127.832 13.9023 155.069 12.2883C177.766 12.5404 191.132 22.8803 193.906 28.9329C195.357 32.0971 196.118 35.1235 198.315 36.7508M113.457 36.7508C112.193 38.9921 109.923 43.2605 108.226 47.0907M198.315 36.7508C199.456 39.5471 201.26 44.0517 202.912 48.3516M209.542 67.5182C209.038 66.2572 207.726 62.6761 206.516 58.4393C205.925 56.3707 204.487 52.4543 202.912 48.3516M102.361 71.5533C103.201 66.7616 105.185 56.1191 106.396 51.8823C106.779 50.5419 107.441 48.8632 108.226 47.0907" stroke="#413318" stroke-width="2" stroke-linecap="round"/>
-<path d="M225.178 63.7353L165.409 88.7023L95.0472 69.2835L96.3082 146.706L165.409 180.5L225.178 146.706V63.7353Z" fill="#243F5F"/>
-<path d="M172.722 101.816C167.073 96.3689 165.829 82.5656 165.913 76.3449L141.198 78.1102C140.442 79.8756 141.198 86.6848 142.964 93.9983C144.729 101.312 149.521 111.147 156.582 120.226C163.643 129.305 172.722 128.549 180.54 128.044C188.358 127.54 186.088 126.027 189.367 125.522C192.645 125.018 196.68 122.748 197.689 118.209C198.698 113.669 198.194 110.895 192.645 112.408C187.097 113.921 179.784 108.625 172.722 101.816Z" fill="#ECE5D8"/>
-<path d="M165.913 76.3449C165.829 82.5656 167.073 96.3689 172.722 101.816C179.784 108.625 187.097 113.921 192.645 112.408C198.194 110.895 198.698 113.669 197.689 118.209C196.68 122.748 192.645 125.018 189.367 125.522C186.088 126.027 188.358 127.54 180.54 128.044C176.949 128.276 173.092 128.561 169.287 127.921M141.198 78.1102C140.442 79.8756 141.198 86.6848 142.964 93.9983C143.289 95.3483 143.718 96.7843 144.246 98.2856M169.287 127.921C169.287 126.701 169.791 123.656 171.809 121.235C173.826 118.814 176.852 116.359 178.113 115.435M169.287 127.921C165.572 127.297 161.906 125.792 158.585 122.496M158.585 122.496C157.902 121.818 157.233 121.064 156.582 120.226C154.197 117.16 152.071 114.008 150.233 110.895M158.585 122.496C159.462 120.983 161.872 117.553 164.495 115.939C167.118 114.325 169.287 112.913 170.043 112.408M150.233 110.895C151.961 108.962 156.324 104.893 159.956 104.086C163.587 103.279 166.008 103.077 166.765 103.077M150.233 110.895C147.634 106.493 145.61 102.171 144.246 98.2856M144.246 98.2856C145.736 97.1927 149.703 94.9062 153.651 94.5027C157.598 94.0992 162.021 94.8389 163.738 95.2593" stroke="#413318" stroke-width="2" stroke-linecap="round"/>
-<path d="M245.614 142.419C245.614 152.986 236.827 161.594 225.935 161.594C220.616 161.594 214.302 157.979 209.252 152.832C204.261 147.747 200.789 141.456 200.708 136.298C203.651 128.787 207.155 125.638 211.135 124.261C213.184 123.552 215.423 123.289 217.901 123.212C219.454 123.163 221.046 123.187 222.726 123.212C223.758 123.228 224.824 123.244 225.935 123.244C236.827 123.244 245.614 131.852 245.614 142.419Z" fill="#ECE5D8" stroke="#413318" stroke-width="2"/>
-<path d="M211.763 129.378L210.325 125.424C210.182 125.029 209.804 124.756 209.388 124.816C206.376 125.246 203.565 128.458 200.755 133.845C198.464 138.235 200.809 142.369 202.492 144.155C202.668 144.341 202.915 144.437 203.172 144.437H204.959C205.629 144.437 206.109 143.791 205.917 143.149L205.069 140.322C204.913 139.804 205.197 139.257 205.71 139.086L208.368 138.2C208.897 138.024 209.18 137.449 208.997 136.923L207.634 133.007C207.455 132.492 207.722 131.928 208.233 131.74L211.169 130.658C211.686 130.468 211.951 129.896 211.763 129.378Z" fill="#413318"/>
-<path d="M76.7235 143.488C76.7235 154.055 85.511 162.663 96.4032 162.663C101.722 162.663 108.036 159.047 113.086 153.901C118.077 148.816 121.549 142.524 121.63 137.367C118.687 129.855 115.183 126.706 111.203 125.329C109.154 124.62 106.915 124.358 104.437 124.28C102.884 124.232 101.292 124.256 99.6119 124.281C98.5797 124.296 97.514 124.312 96.4032 124.312C85.511 124.312 76.7235 132.921 76.7235 143.488Z" fill="#ECE5D8" stroke="#413318" stroke-width="2"/>
-<path d="M110.575 130.447L112.013 126.493C112.156 126.097 112.534 125.825 112.95 125.884C115.962 126.315 118.773 129.527 121.583 134.913C123.873 139.303 121.529 143.437 119.846 145.223C119.67 145.41 119.423 145.505 119.166 145.505H117.379C116.709 145.505 116.229 144.86 116.421 144.218L117.269 141.391C117.424 140.873 117.14 140.326 116.628 140.155L113.97 139.269C113.441 139.092 113.158 138.518 113.341 137.991L114.703 134.075C114.883 133.56 114.616 132.997 114.105 132.808L111.169 131.727C110.652 131.536 110.387 130.964 110.575 130.447Z" fill="#413318"/>
-<ellipse cx="133.475" cy="70.7967" rx="4.79164" ry="5.54821" fill="#20190C"/>
-<path d="M171.052 72.562C171.556 70.8808 173.574 67.5686 177.609 67.7704C181.644 67.9721 183.493 70.0401 183.914 71.0489" stroke="#20190C" stroke-width="5" stroke-linecap="round"/>
-</g>
-<defs>
-<clipPath id="clip0_621_642">
-<rect width="300" height="180" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/images/img-proveyouself.svg
+++ b/src/images/img-proveyouself.svg
@@ -1,15 +0,0 @@
-<svg width="300" height="180" viewBox="0 0 300 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-<ellipse cx="133" cy="173.5" rx="73" ry="6.5" fill="#373A3E"/>
-<path d="M236.525 1.61177C237.318 0.7456 238.682 0.7456 239.475 1.61177L243.71 6.23772C244.184 6.75618 244.896 6.98748 245.585 6.84697L251.729 5.59333C252.88 5.3586 253.984 6.16089 254.116 7.32765L254.823 13.5589C254.902 14.2573 255.342 14.8629 255.982 15.154L261.69 17.7515C262.759 18.2379 263.18 19.536 262.602 20.5577L259.51 26.0142C259.164 26.6257 259.164 27.3743 259.51 27.9858L262.602 33.4423C263.18 34.464 262.759 35.7621 261.69 36.2485L255.982 38.846C255.342 39.1371 254.902 39.7427 254.823 40.4411L254.116 46.6724C253.984 47.8391 252.88 48.6414 251.729 48.4067L245.585 47.153C244.896 47.0125 244.184 47.2438 243.71 47.7623L239.475 52.3882C238.682 53.2544 237.318 53.2544 236.525 52.3882L232.29 47.7623C231.816 47.2438 231.104 47.0125 230.415 47.153L224.271 48.4067C223.12 48.6414 222.016 47.8391 221.884 46.6724L221.177 40.4411C221.098 39.7427 220.658 39.1371 220.018 38.846L214.31 36.2485C213.241 35.7621 212.82 34.464 213.398 33.4423L216.49 27.9858C216.836 27.3743 216.836 26.6257 216.49 26.0142L213.398 20.5577C212.82 19.536 213.241 18.2379 214.31 17.7515L220.018 15.154C220.658 14.8629 221.098 14.2573 221.177 13.5589L221.884 7.32764C222.016 6.16089 223.12 5.3586 224.271 5.59333L230.415 6.84697C231.104 6.98748 231.816 6.75618 232.29 6.23772L236.525 1.61177Z" fill="#ECE5D8"/>
-<path d="M234.151 35.5976L226.351 27.7976C225.883 27.329 225.883 26.5692 226.351 26.1006L228.048 24.4035C228.517 23.9349 229.277 23.9349 229.746 24.4035L235 29.6579L246.254 18.4035C246.723 17.9349 247.483 17.9349 247.952 18.4035L249.649 20.1006C250.117 20.5692 250.117 21.329 249.649 21.7976L235.849 35.5977C235.38 36.0663 234.62 36.0663 234.151 35.5976Z" fill="#243F5F"/>
-<path d="M184.137 61.8863C180.458 64.8761 169.955 72.3314 165.164 75.6854L128.941 73.3855C118.304 77.7936 95.1908 87.7021 87.8313 92.0718L87.6358 92.1878C78.5141 97.6034 70.2929 102.484 70.0075 111.333C69.72 120.245 77.7695 122.257 82.0817 119.957C85.5315 118.118 94.2517 114.783 98.1806 113.345C97.7973 114.783 97.0307 118.75 97.0307 123.12C97.0307 127.489 101.247 135.481 103.355 138.931C102.685 138.452 100.71 137.091 98.1806 135.481C95.0184 133.469 86.6814 131.457 83.2316 135.481C79.7818 139.506 81.5067 148.131 86.6814 153.018C91.856 157.905 110.83 163.942 119.742 166.242C128.654 168.542 135.833 162.792 141.295 158.192C146.757 153.593 151.077 149.856 156.252 151.293C161.426 152.73 168.901 158.767 178.963 158.192C189.025 157.618 188.45 148.131 185.575 141.806C183.275 136.746 174.459 131.073 170.338 128.869C171.009 127.719 172.523 124.327 173.213 119.957C173.903 115.588 172.926 108.362 172.351 105.296C177.046 101.559 187.587 92.8193 192.187 87.7596C197.937 81.435 199.087 75.6854 198.224 67.3484C197.362 59.0115 188.737 58.149 184.137 61.8863Z" fill="#ECE5D8"/>
-<path d="M172.351 105.296C177.046 101.559 187.587 92.8193 192.187 87.7596C197.937 81.435 199.087 75.6854 198.224 67.3484C197.362 59.0115 188.737 58.149 184.137 61.8863C180.458 64.8761 169.955 72.3314 165.164 75.6854L128.941 73.3855C118.304 77.7936 95.1908 87.7021 87.8313 92.0718C78.6318 97.534 70.295 102.421 70.0075 111.333C69.72 120.245 77.7695 122.257 82.0817 119.957C85.5315 118.118 94.2517 114.783 98.1806 113.345M172.351 105.296C172.926 108.362 173.903 115.588 173.213 119.957C172.523 124.327 171.009 127.719 170.338 128.869C174.459 131.073 183.275 136.746 185.575 141.806C188.45 148.131 189.025 157.618 178.963 158.192C168.901 158.767 161.426 152.73 156.252 151.293C151.077 149.856 146.757 153.593 141.295 158.192C135.833 162.792 128.654 168.542 119.742 166.242C110.83 163.942 91.856 157.905 86.6814 153.018C81.5067 148.131 79.7818 139.506 83.2316 135.481C86.6814 131.457 95.0184 133.469 98.1806 135.481C100.71 137.091 102.685 138.452 103.355 138.931M172.351 105.296C172.442 102.891 172.395 97.0478 171.481 92.9197M103.355 138.931C101.247 135.481 97.0307 127.489 97.0307 123.12C97.0307 118.75 97.7973 114.783 98.1806 113.345M103.355 138.931L109.097 141.806M98.1806 113.345L107.085 109.881" stroke="#413318" stroke-width="2" stroke-linecap="round"/>
-<path d="M153.09 107.596C158.609 101.386 163.439 88.9096 165.164 83.4474C159.222 83.1599 145.902 82.7575 140.153 83.4474C134.403 84.1374 111.501 89.4845 100.768 92.0719C103.259 95.9049 109.392 104.089 113.992 106.158C118.592 108.228 132.774 115.262 139.29 118.52C141.59 117.466 147.57 113.805 153.09 107.596Z" fill="#243F5F"/>
-<path d="M171.201 58.724C170.741 52.9744 168.901 40.996 168.038 35.7256C171.776 24.5138 168.038 15.6019 161.714 13.302C156.654 11.4622 148.49 18.4767 145.04 22.214C140.536 22.5014 130.206 23.4789 124.916 25.0888C119.626 26.6987 112.164 30.0572 110.822 31.1113C103.252 27.1824 87.1914 23.8238 82.3617 30.2634C77.532 36.703 82.5605 43.5834 84.0938 48.0872C83.998 49.6205 84.1513 54.5268 85.5312 61.8863C87.2561 71.0857 93.0057 86.2503 100.768 92.0718C106.517 96.3841 123.953 104.081 137.853 100.409C153.089 96.3841 158.551 90.0595 164.589 83.7349C170.626 77.4103 171.776 65.9111 171.201 58.724Z" fill="#ECE5D8"/>
-<path d="M84.0938 48.0872C83.998 49.6205 84.1513 54.5268 85.5312 61.8863C87.2561 71.0857 93.0057 86.2503 100.768 92.0718C106.517 96.3841 123.953 104.081 137.853 100.409C153.089 96.3841 158.551 90.0595 164.589 83.7349C170.626 77.4103 171.776 65.9111 171.201 58.724C170.741 52.9744 168.901 40.996 168.038 35.7256C171.776 24.5138 168.038 15.6019 161.714 13.302C156.654 11.4622 148.49 18.4767 145.04 22.214M84.0938 48.0872C82.5605 43.5834 77.532 36.703 82.3617 30.2634C87.1914 23.8238 103.252 27.1824 110.822 31.1113C112.164 30.0572 119.626 26.6987 124.916 25.0888C130.206 23.4789 140.536 22.5014 145.04 22.214M84.0938 48.0872L85.5312 44.048M145.04 22.214L141.303 26.5262" stroke="#413318" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M157.682 71.3587L128.079 80.8602C123.939 82.2401 125.779 85.9564 128.078 86.8973C132.295 88.6222 141.065 92.0574 148.195 89.7575C157.107 86.8827 161.426 76.548 161.139 73.6732C160.909 71.3733 159.119 71.1671 157.682 71.3587Z" fill="#20190C"/>
-<path d="M145.895 81.4205C148.351 80.6531 151.968 80.3551 154.814 80.2703C156.349 80.2246 157.206 81.8705 156.191 83.0224C153.438 86.1475 150.095 88.2905 148.482 88.895C145.417 90.0444 141.289 89.7471 137.968 89.194C136.3 88.9162 135.899 86.8441 137.321 85.9287C140.05 84.171 143.503 82.1681 145.895 81.4205Z" fill="#ECE5D8"/>
-<ellipse cx="156.827" cy="50.0996" rx="2.87481" ry="4.02474" fill="#20190C"/>
-<ellipse cx="143.321" cy="63.575" rx="6.49995" ry="7.96145" transform="rotate(74.2201 143.321 63.575)" fill="#20190C"/>
-<ellipse cx="122.329" cy="59.8739" rx="3.44977" ry="4.02474" fill="#20190C"/>
-</svg>
--- a/src/images/medium-circle.svg
+++ b/src/images/medium-circle.svg
@@ -1,6 +0,0 @@
-<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.346802 20C0.346802 8.95431 9.30111 0 20.3468 0V0C31.3925 0 40.3468 8.95431 40.3468 20V20C40.3468 31.0457 31.3925 40 20.3468 40V40C9.30111 40 0.346802 31.0457 0.346802 20V20Z" fill="#282A2D"/>
-<path d="M22.2336 20.3794C22.2336 25.0071 18.5144 28.7586 13.9267 28.7586C9.33904 28.7586 5.61951 25.0063 5.61951 20.3794C5.61951 15.7526 9.33876 12 13.9267 12C18.5147 12 22.2336 15.7518 22.2336 20.3794Z" fill="#F9F8FE"/>
-<path d="M31.3466 20.3794C31.3466 24.7354 29.487 28.2681 27.193 28.2681C24.8991 28.2681 23.0394 24.7354 23.0394 20.3794C23.0394 16.0235 24.8988 12.4908 27.1928 12.4908C29.4867 12.4908 31.3464 16.0223 31.3464 20.3794" fill="#F9F8FE"/>
-<path d="M35.074 20.3794C35.074 24.2813 34.42 27.4464 33.6131 27.4464C32.8062 27.4464 32.1526 24.2822 32.1526 20.3794C32.1526 16.4767 32.8065 13.3125 33.6131 13.3125C34.4198 13.3125 35.074 16.4764 35.074 20.3794Z" fill="#F9F8FE"/>
-</svg>
--- a/src/images/overview-pretty.png
+++ b/src/images/overview-pretty.png
--- a/src/images/tlsn-logo.svg
+++ b/src/images/tlsn-logo.svg
@@ -1,6 +0,0 @@
-<svg width="86" height="88" viewBox="0 0 86 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.5484 0.708986C25.5484 0.17436 26.1196 -0.167376 26.5923 0.0844205L33.6891 3.86446C33.9202 3.98756 34.0645 4.22766 34.0645 4.48902V9.44049H37.6129C38.0048 9.44049 38.3226 9.75747 38.3226 10.1485V21.4766L36.1936 20.0606V11.5645H34.0645V80.9919C34.0645 81.1134 34.0332 81.2328 33.9735 81.3388L30.4251 87.6388C30.1539 88.1204 29.459 88.1204 29.1878 87.6388L25.6394 81.3388C25.5797 81.2328 25.5484 81.1134 25.5484 80.9919V0.708986Z" fill="#243F5F"/>
-<path d="M21.2903 25.7246V76.7012H12.7742V34.2207H0V25.7246H21.2903Z" fill="#243F5F"/>
-<path d="M63.871 76.7012H72.3871V34.2207H76.6452V76.7012H85.1613V25.7246H63.871V76.7012Z" fill="#243F5F"/>
-<path d="M38.3226 25.7246H59.6129V34.2207H46.8387V46.9649H59.6129V76.7012H38.3226V68.2051H51.0968V55.4609H38.3226V25.7246Z" fill="#243F5F"/>
-</svg>
--- a/src/images/tlsn.png
+++ b/src/images/tlsn.png
--- a/src/images/twitter.svg
+++ b/src/images/twitter.svg
@@ -1,3 +0,0 @@
-<svg width="33" height="27" viewBox="0 0 33 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.552 26.9999C22.628 26.9999 29.234 16.9939 29.234 8.33192C29.234 8.05192 29.234 7.76792 29.222 7.48792C30.5081 6.55689 31.6181 5.40422 32.5 4.08392C31.2986 4.61362 30.0255 4.96273 28.722 5.11992C30.0951 4.2992 31.1234 3.00786 31.616 1.48592C30.326 2.25017 28.914 2.78667 27.442 3.07192C26.4524 2.01797 25.1428 1.31976 23.7162 1.08544C22.2895 0.851116 20.8254 1.09376 19.5507 1.7758C18.2759 2.45783 17.2616 3.54118 16.6649 4.85804C16.0682 6.1749 15.9224 7.65179 16.25 9.05992C13.6395 8.92902 11.0856 8.25086 8.75409 7.06941C6.42254 5.88796 4.36537 4.22961 2.716 2.20192C1.87868 3.64809 1.62315 5.35872 2.00129 6.98645C2.37944 8.61418 3.36291 10.037 4.752 10.9659C3.71108 10.9306 2.69304 10.651 1.78 10.1499V10.2399C1.78179 11.7549 2.30661 13.2228 3.26575 14.3954C4.22488 15.5681 5.5595 16.3737 7.044 16.6759C6.48053 16.8312 5.89846 16.9085 5.314 16.9059C4.90197 16.9072 4.49076 16.869 4.086 16.7919C4.50557 18.096 5.32255 19.2363 6.42249 20.0529C7.52244 20.8695 8.85027 21.3216 10.22 21.3459C7.89311 23.1735 5.0188 24.1647 2.06 24.1599C1.53864 24.1621 1.01765 24.1321 0.5 24.0699C3.50303 25.9844 6.9906 27.001 10.552 26.9999Z" fill="#282A2D"/>
-</svg>
--- a/src/images/twitter_round.svg
+++ b/src/images/twitter_round.svg
@@ -1,3 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20ZM27.625 14.375C28.5 14.25 29.25 14.125 30 13.75C29.5 14.625 28.75 15.375 27.875 15.875C28.125 21.75 23.875 28.125 16.25 28.125C14 28.125 11.875 27.375 10 26.25C12.125 26.5 14.375 25.875 15.875 24.75C14 24.75 12.5 23.5 12 21.875C12.625 22 13.25 21.875 13.875 21.75C12 21.25 10.625 19.5 10.625 17.625C11.25 17.875 11.875 18.125 12.5 18.125C10.75 16.875 10.125 14.5 11.25 12.625C13.375 15.125 16.375 16.75 19.75 16.875C19.125 14.375 21.125 11.875 23.75 11.875C24.875 11.875 26 12.375 26.75 13.125C27.75 12.875 28.625 12.625 29.375 12.125C29.125 13.125 28.5 13.875 27.625 14.375Z" fill="#151616"/>
-</svg>
--- a/src/images/website.svg
+++ b/src/images/website.svg
@@ -1,3 +0,0 @@
-<svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.516 22H24.5V3.33329C24.5 2.62605 24.219 1.94777 23.719 1.44767C23.2189 0.947577 22.5406 0.666626 21.8333 0.666626H4.5C2.892 0.666626 0.5 1.73196 0.5 4.66663V23.3333C0.5 26.268 2.892 27.3333 4.5 27.3333H24.5V24.6666H4.516C3.9 24.6506 3.16667 24.4066 3.16667 23.3333C3.16667 22.26 3.9 22.016 4.516 22ZM7.16667 5.99996H19.1667V8.66663H7.16667V5.99996Z" fill="#282A2D"/>
-</svg>
--- a/Show More
+++ b/Show More