diff --git a/.github/workflows/build_deploy_master.yml b/.github/workflows/build_deploy_master.yml index 8361991..233f879 100644 --- a/.github/workflows/build_deploy_master.yml +++ b/.github/workflows/build_deploy_master.yml @@ -3,10 +3,6 @@ name: Build & Deploy to Pages on: push: branches: [ master ] - pull_request: - types: [closed] - branches: - - master # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -28,7 +24,7 @@ jobs: npm run prerender - name: Deploy to gh-pages branch - uses: JamesIves/github-pages-deploy-action@v4.3.3 + uses: JamesIves/github-pages-deploy-action@v4.4.3 with: branch: gh-pages folder: build diff --git a/.github/workflows/build_dev.yml b/.github/workflows/build_dev.yml index 0ad97d7..3494e09 100644 --- a/.github/workflows/build_dev.yml +++ b/.github/workflows/build_dev.yml @@ -10,7 +10,6 @@ on: workflow_dispatch: - jobs: build-and-deploy-dev: permissions: @@ -31,8 +30,7 @@ jobs: npm run prerender - name: Deploy to gh-pages-dev branch - uses: JamesIves/github-pages-deploy-action@v4.3.3 - + uses: JamesIves/github-pages-deploy-action@v4.4.3 with: branch: gh-pages-dev folder: build diff --git a/CNAME b/CNAME index 3c413b7..afd706e 100644 --- a/CNAME +++ b/CNAME @@ -1 +1 @@ -appliedzkp.org +tlsnotary.org diff --git a/package-lock.json b/package-lock.json index e8c96ef..0b7b3cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "pse-landingpage", + "name": "tlsn-landingpage", "version": "0.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "pse-landingpage", + "name": "tlsn-landingpage", "version": "0.1.0", "dependencies": { "@babel/core": "^7.16.0", diff --git a/package.json b/package.json index f64ead3..a405afa 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { - "name": "pse-landingpage", + "name": "tlsn-landingpage", "version": "0.1.0", "private": true, + "homepage": "https://tlsnotary.github.io/landing-page", "dependencies": { "@babel/core": "^7.16.0", "@babel/preset-react": "^7.17.12", diff --git a/public/TLSNotary.pdf b/public/TLSNotary.pdf new file mode 100644 index 0000000..381576d Binary files /dev/null and b/public/TLSNotary.pdf differ diff --git a/public/index.html b/public/index.html index d41658c..c75416d 100644 --- a/public/index.html +++ b/public/index.html @@ -13,11 +13,11 @@ - + - - Privacy and Scaling Exploration + + TLSNotary diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png index 8a83a7c..9bd27d5 100644 Binary files a/public/mstile-150x150.png and b/public/mstile-150x150.png differ diff --git a/src/HomePage.tsx b/src/HomePage.tsx index d1ba58f..a63e7f7 100644 --- a/src/HomePage.tsx +++ b/src/HomePage.tsx @@ -1,9 +1,10 @@ import Navbar from './components/Navbar'; import Hero from './components/Hero'; -import Projects from './components/Projects'; -import Discord from './components/Discord'; -import Team from './components/Team'; +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 ( @@ -11,9 +12,10 @@ function HomePage() {
- - - + + + +
); diff --git a/src/components/Hero.css b/src/components/Hero.css index 043b030..972ece4 100644 --- a/src/components/Hero.css +++ b/src/components/Hero.css @@ -1,400 +1,40 @@ -.container { - width: 100%; +#Hero { + max-width: 67%; + padding: 50px; } -img.hero-graphic { - width: 100%; /* or any custom size */ - height: 100%; - object-fit: contain; +#Hero .name { + color: var(--brown); } -.border-2 { - border-width: 2px; -} - -.hidden { - display: none; -} - -.absolute { - position: absolute; -} - -.relative { - position: relative; -} - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -} - -.border-gray-800 { - --tw-border-opacity: 1; - border-color: rgb(31 41 55 / var(--tw-border-opacity)); -} - -.bg-yellow-400 { - --tw-bg-opacity: 1; - background-color: rgb(250 204 21 / var(--tw-bg-opacity)); -} - -.transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -@keyframes bounce { - 0%, - 100% { - transform: translateY(-25%); - animation-timing-function: cubic-bezier(0.8, 0, 1, 1); - } - 50% { - transform: none; - animation-timing-function: cubic-bezier(0, 0, 0.2, 1); - } -} - -.animate-bounce, -.hover\:animate-bounce:hover { - animation: bounce 1s infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} -.hover\:animate-spin:hover { - animation: spin 1s linear infinite; -} - -.mx-auto { - margin-left: auto; - margin-right: auto; -} - -.max-w-\[1920px\] { - max-width: 1920px; -} - -.px-4 { - padding-left: 1rem /* 16px */; - padding-right: 1rem /* 16px */; -} - -.py-12 { - padding-top: 3rem /* 48px */; - padding-bottom: 3rem /* 48px */; -} - -.flex { +#Hero .links { display: flex; + align-items: center; } -.flex-col { - flex-direction: column; +#Hero .docs-link { + margin-right: 10px; } -.flex-auto { - flex: 1 1 auto; +#Hero .button-docs { + width: 20px; + margin-left: 10px; } -.right-\[6\%\] { - right: 6%; +#Hero .repo-link { + margin-inline: 10px; } -.right-1\/3 { - right: 33.333333%; +#Hero .button-github { + width: 20px; + margin-left: 10px; } -.top-6 { - top: 1.5rem /* 24px */; -} - -.top-60 { - top: 15rem /* 240px */; -} - -.space-x-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); -} - -.space-y-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1rem * var(--tw-space-y-reverse)); -} - -.uppercase { - text-transform: uppercase; -} - -.underline { - text-decoration-line: underline; -} - -.text-purple-800 { - --tw-text-opacity: 1; - color: rgb(107 33 168 / var(--tw-text-opacity)); -} - -.active\:text-opacity-70:active { - --tw-text-opacity: 0.7; -} - -.text-xs { - font-size: 0.75rem /* 12px */; - line-height: 1rem /* 16px */; -} - -.text-sm { - font-size: 0.875rem /* 14px */; - line-height: 1.25rem /* 20px */; -} - -.text-xl { - font-size: 1.25rem /* 20px */; - line-height: 1.75rem /* 28px */; -} - -.text-3xl { - font-size: 2rem /* 32px */; - line-height: 2.5rem /* 40px */; -} - -.tracking-wider { - letter-spacing: 0.05em; -} - -.font-semibold { - font-weight: 600; -} - -.font-bold { - font-weight: 700; -} - -/* Widths */ -.w-full { - width: 100%; -} - -.w-auto { - width: auto; -} - -.w-\[108px\] { - width: 108px; -} - -/* Heights */ -.h-\[149\.44px\] { - height: 149.44px; -} - -.h-\[91px\] { - height: 91px; -} - -/** - * Media Queries - */ - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } - - .md\:block { - display: block; - } - - .md\:px-16 { - padding-left: 4rem /* 64px */; - padding-right: 4rem /* 64px */; - } - - .md\:px-24 { - padding-left: 6rem /* 96px */; - padding-right: 6rem /* 96px */; - } - - .md\:max-w-xl { - max-width: 36rem /* 576px */; - } - - .md\:max-w-4xl { - max-width: 56rem /* 896px */; - } - - .md\:text-4xl { - font-size: 2.25rem /* 36px */; - line-height: 2.5rem /* 40px */; - } - - .md\:flex-row { - flex-direction: row; - } - - .md\:w-1\/4 { - width: 25%; - } - - .md\:top-12 { - top: 3rem /* 48px */; - } - - .md\:-right-2\/4 { - right: -50%; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } - - .lg\:py-16 { - padding-top: 4rem /* 64px */; - padding-bottom: 4rem /* 64px */; - } - - .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); - } - - .lg\:max-w-6xl { - max-width: 72rem /* 1152px */; - } - - .lg\:w-\[195px\] { - width: 195px; - } - - .lg\:h-\[269\.83px\] { - height: 269.83px; - } - - .lg\:w-\[177\.08px\] { - width: 177.08px; - } - - .lg\:h-\[173px\] { - height: 173px; - } - - .lg\:text-sm { - font-size: 0.875rem /* 14px */; - line-height: 1.25rem /* 20px */; - } - - .lg\:text-lg { - font-size: 1.125rem /* 18px */; - line-height: 1.75rem /* 28px */; - } - - .lg\:text-3xl { - font-size: 2rem /* 32px */; - line-height: 2.5rem /* 40px */; - } - - .lg\:text-5xl { - font-size: 3rem /* 48px */; - line-height: 1; - } - - .lg\:leading-\[110\%\] { - line-height: 110%; - } - - .lg\:leading-\[145\%\] { - line-height: 145%; - } - - .lg\:top-16 { - top: 4rem /* 64px */; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } - - .xl\:text-base { - font-size: 1rem /* 16px */; - line-height: 1.5rem /* 24px */; - } - - .xl\:text-4xl { - font-size: 2.25rem /* 36px */; - line-height: 2.5rem /* 40px */; - } - - .xl\:text-6xl { - font-size: 3.75rem /* 60px */; - line-height: 1; - } - - .xl\:max-w-2xl { - max-width: 42rem /* 672px */; - } - - .xl\:w-\[270px\] { - width: 270px; - } - - .xl\:h-\[373\.61px\] { - height: 373.61px; - } - - .xl\:px-44 { - padding-left: 11rem /* 176px */; - padding-right: 11rem /* 176px */; - } - - .xl\:py-24 { - padding-top: 6rem /* 96px */; - padding-bottom: 6rem /* 96px */; - } - - .xl\:leading-\[150\%\] { - line-height: 150%; - } - - .xl\:-right-3\/4 { - right: -75%; - } - - .xl\:top-32 { - top: 8rem /* 128px */; - } - - .xl\:mx-auto { - margin-left: auto; - margin-right: auto; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } - - .\32xl\:right-\[10\%\] { - right: 10%; +@media only screen and (max-width: 600px) { + #Hero .links { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: left; } } diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 9ce3a74..51b3675 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -1,46 +1,36 @@ -import downArrow from "../images/arrow-down.svg"; -import triangleGraphic from "../images/pse-badge.svg"; -import lockGraphic from "../images/lock-gfc.svg"; +import github from "../images/github.svg"; +import docs from "../images/docs.svg"; import "./Hero.css"; +import config from "../config.json"; const Hero = () => ( -
-
-

Privacy & Scaling Explorations

-

- Enhancing Ethereum through cryptographic research. -

-

- We explore new use cases for zero-knowledge proofs and other cryptographic primitives through research and - proof-of-concepts. -

- -
-
- Explore our work -
-
- -
-
- -
-
-
- +
+

TLSNotary

+

+ Proof of data authenticity +

+
+

+ Export data from any web application and prove facts about it without compromising on privacy. +

+
+
+ - {/* Lock */} - {/*
-
- -
+ -
-

- We explore new use cases for zero-knowledge proofs and other cryptographic primitives through research and - proof-of-concepts. -

-
*/}
); diff --git a/src/components/How.css b/src/components/How.css new file mode 100644 index 0000000..7bc65c4 --- /dev/null +++ b/src/components/How.css @@ -0,0 +1,51 @@ +#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; + } +} diff --git a/src/components/How.tsx b/src/components/How.tsx new file mode 100644 index 0000000..f8257b8 --- /dev/null +++ b/src/components/How.tsx @@ -0,0 +1,35 @@ +import "./How.css"; +import diagram from "../images/overview-pretty.png"; + +export default function How() { + return ( +
+
+
+ +
+
+

How it works

+
+

+ TLSNotary leverages the ubiquitous TLS (Transport Layer Security) protocol to securely and privately prove a transcript of communications took place with a webserver. +
+
+ At the core of the TLSNotary protocol is dividing TLS session keys between two parties (Client and Notary) and then using secure two-party computation (2PC) to encrypt and authenticate requests from the Client to a TLS-enabled webserver. +
+
+ During the protocol neither the Client nor Notary are in posession of the full TLS session keys, they only know their shares of those keys. + This preserves the security assumptions of TLS while at the same time allows the Client to prove to the Notary the authenticity of the transcript. +
+
+ This is all achieved with full privacy. The Notary is never aware of which webserver is being queried, nor do they ever see the unencrypted communications. +
+
+ Furthermore, our protocol is transparent to the webserver. + In fact, the webserver is never aware that this process took place. +

+
+
+
+ ); +} diff --git a/src/components/Navbar.css b/src/components/Navbar.css index f1639e3..52b0acb 100644 --- a/src/components/Navbar.css +++ b/src/components/Navbar.css @@ -2,10 +2,10 @@ border-bottom: var(--border); display: grid; grid-template-columns: 1fr auto 1fr; - grid-template-areas: "anchor-links pse-link social-links"; + grid-template-areas: "tlsn-link anchor-links social-links"; font-weight: 600; font-size: 1.125rem; - padding-block: 36px; + padding-block: 12px; } #navbar > * { @@ -36,8 +36,8 @@ grid-area: anchor-links; } -#pse-link { - grid-area: pse-link; +#tlsn-link { + grid-area: tlsn-link; } #social-links { @@ -55,7 +55,7 @@ @media screen and (max-width: 800px) { #navbar { - grid-template-areas: "social-links pse-link menu-link"; + grid-template-areas: "tlsn-link social-links menu-link"; padding-inline: 1em; border-bottom: none; padding-block: 16px; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index f29dca5..da9d78e 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,9 +1,9 @@ import { useState } from 'react'; -import logo from '../images/pse-logo.svg'; +import logo from '../images/tlsn-logo.svg'; import discord from '../images/discord_round.svg'; -import twitter from '../images/twitter_round.svg'; -import mirror from '../images/mirror.svg'; +import github from "../images/github.svg"; import './Navbar.css' +import config from "../config.json"; function Navbar() { const [isOpen, setIsOpen] = useState(false); @@ -15,33 +15,26 @@ function Navbar() { return ( ) diff --git a/src/components/ProjectCard.css b/src/components/ProjectCard.css deleted file mode 100644 index 7c01357..0000000 --- a/src/components/ProjectCard.css +++ /dev/null @@ -1,105 +0,0 @@ -.card { - display: flex; - justify-content: space-between; - flex-direction: column; - border-radius: var(--border-radius); - box-shadow: var(--box-shadow); - background-color: var(--white); - padding: 1.2rem; - border: var(--border); -} - -.card-img-top { - border-radius: var(--border-radius); - object-fit: cover; - max-height: 150px; -} - -.project-description { - overflow: hidden; - height: 4.5em; /* exactly three lines */ - position: relative; -} - -.project-description::after { - content: ""; - text-align: right; - position: absolute; - bottom: 0; - right: 0; - width: 70%; - height: 1.2em; - background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); -} - -.card-text-project { - line-height: 1.5rem; - font-weight: 400; - font-size: 1rem; -} - -.card-title { - display: flex; -} - -.card-title > div, -.card-title > a > div { - font-weight: 700; - font-size: 1.5rem; - padding-block: 1.5rem; -} - -.card-title > a > * { - display: inline-flex; -} - -.card-body { - align-self: flex-start; - flex: 1; -} - -.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; */ -} - -.docs-links { - display: flex; -} - -.social-links { - display: flex; - justify-content: flex-end; -} - -.card-footer .btn { - padding: 0.25rem 0.5rem; -} - -.link { - padding: 0.125rem; - margin: 0 auto; -} - -.link a { - display: flex; - align-items: center; -} - -.icon { - height: 2rem; - padding-bottom: calc(1rem - var(--padding)); - padding-inline: 1.125rem; -} - -.link-title { - text-transform: capitalize; -} diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx deleted file mode 100644 index 8485772..0000000 --- a/src/components/ProjectCard.tsx +++ /dev/null @@ -1,189 +0,0 @@ -import docs from "../images/website.svg"; -import github from "../images/github.svg"; -import discord from "../images/discord.svg"; -import twitter from "../images/twitter.svg"; -import telegram from "../images/telegram.svg"; -import img_link from "../images/box_arrow_out.svg"; -import "./ProjectCard.css"; -import ColorHash from "color-hash"; -import { title } from "process"; -import ProjectDescription from "./ProjectDescription"; - -export interface ProjectCardProps { - name: string; - short_name?: string; - description: string | string[]; - long_description?: string | string[]; - image?: string; - links?: Links[]; - renderBanner?: boolean; -} - -interface Links { - github?: string; - website?: string; - discord?: string; - twitter?: string; - telegram?: string; - documentation?: string; -} - -function renderLink(url: string, source: string, icon: string, button: boolean = false, text: boolean = false): any { - // The next few lines check if the link begins with a protocol like http or https, and if it doesn't, it adds the '//' to the beginning of the link to make it an http(s) link. - let RgExp = new RegExp("^(?:[a-z]+:)?//", "i"); - if (!RgExp.test(url)) { - url = "//" + url; - } - if (!button) { - return ( - - ); - } else { - return ( - - ); - } -} - -function renderBanner(name: string): any { - let hueRange = { min: 45, max: 360 }; - let colorHashText = new ColorHash({ hue: hueRange, lightness: [0.8, 0.9] }).hex(name); - let colorHashBG = new ColorHash({ - hue: hueRange, - lightness: [0.35, 0.4], - saturation: [0.65, 0.85, 1], - }).hex(name); - return ( - - - {name} - - - ); -} - -function renderDescription(description: string | string[]): any { - if (typeof description === "string") { - return

{description}

; - } - return description.map((text: string, index: number) => { - return ( -

- {text} -

- ); - }); -} - -function ProjectCard(props: ProjectCardProps) { - const docLinks = props.links - ? props.links.map((link) => { - if (link.github) { - return renderLink(link.github, "github", github); - } else if (link.documentation) { - return renderLink(link.documentation, "website", docs); - } else { - return null; - } - }) - : null; - - const socialLinks = props.links - ? props.links.map((link) => { - if (link.discord) { - return renderLink(link.discord, "discord", discord); - } else if (link.twitter) { - return renderLink(link.twitter, "twitter", twitter); - } else if (link.telegram) { - return renderLink(link.telegram, "telegram", telegram); - } else { - return null; - } - }) - : null; - - let img = (() => { - try { - if (props.image) { - let imageSource; - if (props.image.startsWith("http")) { - imageSource = props.image; - } else { - imageSource = require(`../images/${props.image}`); - } - - return {props.name}; - } else if (props.renderBanner == true || props.renderBanner == undefined) { - return renderBanner(props.short_name || props.name); - } else { - return null; - } - } catch (e) { - if (props.renderBanner == true || props.renderBanner == undefined) { - return renderBanner(props.short_name || props.name); - } else { - return null; - } - } - })(); - - const title = (props: ProjectCardProps) => { - let title_with_link; - if (props.links) { - for (let link in props.links) { - if (props.links[link].website) { - title_with_link = ( - -
{props.name}
-
- Go to project website - - ); - } - } - } - if (title_with_link) { - return title_with_link; - } - return
{props.name}
; - }; - - return ( -
- {img} -
-
{title(props)}
-
{renderDescription(props.description)}
-
- -
-
{docLinks}
-
{socialLinks}
-
-
- ); -} - -export default ProjectCard; diff --git a/src/components/ProjectDescription.css b/src/components/ProjectDescription.css deleted file mode 100644 index 2a59f9f..0000000 --- a/src/components/ProjectDescription.css +++ /dev/null @@ -1,80 +0,0 @@ -.btn { - display: inline-block; - padding: 10px 10px; - font-size: 15px; - cursor: pointer; - text-align: center; - text-decoration: none; - border: var(--border); - border-radius: 2em; -} - -.btn-close { - color: var(--black); - padding: 0; - float: right; - background-color: transparent; - border: none; -} - -.btn-close::after { - content: "×"; - font-size: 1.5rem; -} - -.btn-ext { - color: var(--black); - font-weight: 600; - background-color: var(--white); - margin-top: 1em; -} - -.column { - display: flex; - flex-direction: column; /* stacks the left and right headers above the bottom content */ -} - -h3 { - float: left; - font-size: 1.5rem; -} - -.modal-description { - margin-top: 1em; -} - -.ReactModal__Content { - inset: 25% 33% !important; - border: var(--border) !important; - border-radius: var(--border-radius) !important; -} - -.ReactModal__Overlay { - background-color: var(--gray-transparent); - opacity: 0; - transition: 300ms ease-in-out; -} - -.ReactModal__Overlay--after-open { - opacity: 1; -} - -.ReactModal__Overlay--before-close { - opacity: 0; -} - -.ReactModal__Body--open { - overflow: hidden; -} - -@media screen and (max-width: 1400px) { - .ReactModal__Content { - inset: 20% 25% !important; - } -} - -@media screen and (max-width: 800px) { - .ReactModal__Content { - inset: 20% 10% !important; - } -} diff --git a/src/components/ProjectDescription.tsx b/src/components/ProjectDescription.tsx deleted file mode 100644 index d2a044e..0000000 --- a/src/components/ProjectDescription.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { useState } from "react"; -import Modal from "react-modal"; -import "./ProjectDescription.css"; - -Modal.setAppElement('#root'); - -function ProjectDescription(props:any) { - // For more descriptions modal - const [modalIsOpen, setmodalIsOpen] = useState(false); - - return ( - <> - - setmodalIsOpen(false)} - style={{ - overlay: { - backgroundColor: "rgba(0, 0, 0, 0.75)", - }, - }} - > -
-
-

{props.title}

- -
-
-
-

{props.description}

-
- - - ); -} - -export default ProjectDescription; diff --git a/src/components/Projects.css b/src/components/Projects.css deleted file mode 100644 index 3034b76..0000000 --- a/src/components/Projects.css +++ /dev/null @@ -1,26 +0,0 @@ -#Projects { - padding-inline: 5rem; - padding: 4rem 3rem; -} - -#Projects > p { - font-size: 1.125rem; - font-weight: 400; - line-height: 120%; -} - -#Projects .Cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); - gap: 2.5rem; -} - -.CardSectionTitle { - text-shadow: -1px 1px 1px rgba(255, 255, 255, 0.66); -} - -@media screen and (max-width: 800px) { - #Projects { - padding-inline: 1rem; - } -} diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx deleted file mode 100644 index 85dd27b..0000000 --- a/src/components/Projects.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import ProjectData from "../data/Projects.json"; -import { useState } from "react"; -import ProjectCard, { ProjectCardProps } from "./ProjectCard"; -import { shuffleFisherYates } from "../Utils"; -import "./Projects.css"; - -function Projects() { - const [cards] = useState([CreateCards(ProjectData, true)]); - - return ( -
-

What we work on

-
-

Explore how we integrate ZK primitives into decentralized applications

-
-
{cards}
-
- ); -} - -export default Projects; - -function CreateCards(cards: ProjectCardProps[], shuffle: boolean = true): JSX.Element[] { - let _cards = cards.map((card: ProjectCardProps) => { - return ; - }); - - if (shuffle) { - _cards = shuffleFisherYates(_cards as []); - } - - return _cards; -} diff --git a/src/components/Roadmap.css b/src/components/Roadmap.css new file mode 100644 index 0000000..76d6b79 --- /dev/null +++ b/src/components/Roadmap.css @@ -0,0 +1,73 @@ +#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; + } +} diff --git a/src/components/Roadmap.tsx b/src/components/Roadmap.tsx new file mode 100644 index 0000000..746aefe --- /dev/null +++ b/src/components/Roadmap.tsx @@ -0,0 +1,36 @@ +import "./Roadmap.css"; + +export default function Roadmap() { + return ( +
+

+ We're rebuilding the protocol from the ground up. +

+
+

Below are some development goals on our roadmap:

+
+
+
+
+
Implement the core protocol as a series of open-source Rust libraries
+
+
+
+
+
Build and release a Notary server implementation
+
+
+
+
+
Develop a web extension for the browser
+
+
+
+
+
Create developer tools to build on top of TLSNotary
+
+
+
+
+ ); +} diff --git a/src/components/Team.css b/src/components/Team.css deleted file mode 100644 index 55af93d..0000000 --- a/src/components/Team.css +++ /dev/null @@ -1,17 +0,0 @@ -#Team { - padding-inline: 5rem; - padding: 4rem 3rem; -} - -#Team .Cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); - gap: 1rem 2rem; - margin-top: 1rem; -} - -@media screen and (max-width: 800px) { - #Team { - padding-inline: 1em; - } -} diff --git a/src/components/TeamMemberCard.css b/src/components/TeamMemberCard.css deleted file mode 100644 index f744ac3..0000000 --- a/src/components/TeamMemberCard.css +++ /dev/null @@ -1,59 +0,0 @@ -.members-card { - display: flex; - justify-content: space-between; - flex-direction: column; - margin-top: 1rem; - border: 1px solid var(--gray-transparent); - border-radius: var(--border-radius); - background-color: var(--white); - box-shadow: var(--box-shadow); - padding: 2rem; -} - -.members-card-title { - font-weight: 600; - font-size: 1.5rem; - padding-bottom: 1rem; -} - -.card-text { - line-height: 150%; - padding-bottom: 1.5rem; -} - -.members-card-footer { - border-top: 2px solid var(--black); -} - -.members-card-footer a { - display: flex; - justify-content: space-between; - padding: 1rem 0px; - font-weight: 700; - text-decoration: none; - color: var(--black); -} - -.members-card-footer > *:not(:first-child) { - border-top: 2px solid var(--black); -} - -.team-link { - padding: 0.125rem; - display: flex; - justify-content: space-between; - align-items: center; -} - -.team-link a { - display: flex; - align-items: center; -} - -.team-icon { - height: 1.5rem; -} - -.team-link-title { - text-transform: capitalize; -} diff --git a/src/components/TeamMemberCard.tsx b/src/components/TeamMemberCard.tsx deleted file mode 100644 index f36dbad..0000000 --- a/src/components/TeamMemberCard.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import globe from "../images/globe.svg"; -import github from "../images/github.svg"; -import discord from "../images/discord_round.svg"; -import twitter from "../images/twitter_round.svg"; -import telegram from "../images/telegram.svg"; -import "./TeamMemberCard.css"; -const images = { - github, - discord, - twitter, - telegram, -} as any - -export interface TeamMemberCardProps { - name: string; - short_name?: string; - description: string | string[]; - long_description?: string | string[]; - image?: string; - links?: Link[]; - renderBanner?: boolean; -} - -interface Link { - provider: string - url: string -} - -function renderDescription(description: string | string[]): any { - if (typeof description === "string") { - return

{description}

; - } - return description.map((text: string, index: number) => { - return ( -

- {text} -

- ); - }); -} - -function TeamMemberCard(props: TeamMemberCardProps) { - return ( -
-
-
{props.name}
- {renderDescription(props.description)} -
-
- {(props.links || []).map(({ url, provider }) => ( - -
{provider}
- {''} - - ))} -
-
- ); -} - -export default TeamMemberCard; diff --git a/src/components/Usecases.css b/src/components/Usecases.css new file mode 100644 index 0000000..efbe6e3 --- /dev/null +++ b/src/components/Usecases.css @@ -0,0 +1,60 @@ +#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; + } +} diff --git a/src/components/Usecases.tsx b/src/components/Usecases.tsx new file mode 100644 index 0000000..ce2beb2 --- /dev/null +++ b/src/components/Usecases.tsx @@ -0,0 +1,84 @@ +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 ( +
+
+

What can TLSNotary do?

+
+

+ 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: +

+
+
+
+
+
verify
+
Private information about yourself.
+
+
+
+
+
verify
+
You received a private message from someone.
+
+
+
+
+
verify
+
You received a money transfer.
+
+
+
+
+
verify
+
A snapshot of a webpage.
+
+
+
+
+
verify
+
You were blocked from using an app.
+
+
+
+
+
verify
+
You have access to an account.
+
+
+
+
+

Is it secure?

+
+

+ 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. +
+
+ See below for more details on how it works. +

+
+

What's the catch?

+
+

+ 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. +
+
+ In some applications the Verifier can act as the Notary themselves, which allows for fully trustless proofs! +

+
+
+ ); +} diff --git a/src/config.json b/src/config.json new file mode 100644 index 0000000..8bf7a67 --- /dev/null +++ b/src/config.json @@ -0,0 +1,9 @@ +{ + "links": { + "discord": "https://discord.gg/9XwESXtcN7", + "repo": "https://github.com/tlsnotary/tlsn", + "docs": "https://docs.tlsnotary.org", + "pse": "https://appliedzkp.org/", + "legacy": "https://old.tlsnotary.org/" + } +} diff --git a/src/data/Example.md b/src/data/Example.md deleted file mode 100644 index abf79a7..0000000 --- a/src/data/Example.md +++ /dev/null @@ -1,57 +0,0 @@ -# Examples - -## Project Example - -```json - { - "name": "Test", - "short_name": "TEST", - "description": "Black Magic", - "long_description": "Black Magic", - "image": "banner.png", - "links": [ - { - "website": "https://discord.gg" - }, - { - "twitter": "https://discord.gg/1" - }, - { - "telegram": "https://discord.gg/2" - }, - { - "discord": "https://discord.gg/3" - }, - { - "github": "https://discord.gg/4" - } - ] -} -``` - -## Team Member Example - -```json - { - "name": "NAME / USERNAME", - "description": "Whatever description you want, try to keep it tweet sized", - "image": "{filename}(Upload image to /src/images and put the file name here, will add support for external images soon)", - "links": [ - { - "github": "https://github.com/USERNAME" - }, - { - "twitter": "https://twitter.com/USERNAME" - }, - { - "discord": "https://discord.com//users/USER_ID (NOT USERNAME, https://i.imgur.com/6CDZ1dp.gifv for how-to)" - }, - { - "telegram": "t.me/USERNAME" - }, - { - "website": "{YOUR_WEBSITE}" - } - ] - } -``` diff --git a/src/data/Projects.json b/src/data/Projects.json deleted file mode 100644 index fa00be2..0000000 --- a/src/data/Projects.json +++ /dev/null @@ -1,247 +0,0 @@ -[ - { - "name": "Zkopru", - "image": "zkopru-cover.png", - "description": "Zkopru is an optimistic rollup that uses zero knowledge proofs to enable private, low-cost transactions with ETH, ERC-20s and NFTs on layer 2.", - "links": [ - { - "website": "https://zkopru.network/" - }, - { - "github": "https://github.com/zkopru-network" - }, - { - "discord": "https://discord.gg/R8QKzad8u4" - } - ] - }, - { - "name": "WAX", - "image": "wax.png", - "description": "Formerly BLS Wallet. Reduce transaction costs on evm-L2s using BLS signatures. The smart contract wallet also includes: recovery, multi-action, gas-less transactions, and upgradability. Expanding verification options via 4337 compatibility.", - "links": [ - { - "website": "https://getwax.org/" - }, - { - "github": "https://github.com/web3well/bls-wallet" - } - ] - }, - { - "name": "zkEVM", - "image": "zkEVM.svg", - "description": "A zk-rollup that can generate zk proofs for general EVM verification. This allows us to build a fully EVM-compatible zk-Rollup, which any existing Ethereum application can easily migrate to.", - "links": [ - { - "documentation": "https://privacy-scaling-explorations.github.io/zkevm-docs/" - }, - { - "website": "https://github.com/privacy-scaling-explorations/zkevm-specs" - }, - { - "github": "https://github.com/privacy-scaling-explorations/zkevm-circuits" - } - ] - }, - { - "name": "MACI", - "image": "MACI.svg", - "description": "MACI (Minimal Anti-Collusion Infrastructure) uses zero knowledge proofs for collusion resistance in blockchain voting (such as quadratic funding mechanisms) by making it impossible for anyone other than the vote coordinator to verify how a specific user voted. MACI also ensures correct execution of the votes, allowing anyone to verify the results.", - "links": [ - { - "website": "" - }, - { - "github": "https://github.com/appliedzkp/maci" - } - ] - }, - { - "name": "UniRep", - "description": "UniRep (Universal Reputation) is a private and non-repudiable data storage and retrieval system. Applications can attest to changes in user data using short lived identifiers called epoch keys. The high-level goal for UniRep is to be a base layer on top of which anyone can easily build custom, yet interoperable, zk applications. UniRep acts as a memory layer for zk: anything stored in UniRep can be retrieved and proven with strong privacy guarantees and constant computation complexity. UniRep can be used to store the result of large proofs (e.g. proof of Ethereum address control from an ECDSA signature). This result can later be retrieved and proven by a user any number of times. Similar patterns exist for web2 authentication bridging; a user oauths with a trusted entity once, and the entity attests storing information about the users web2 identity in zk. UniRep can be used to store data important to applications. This might include reputation the user has accrued, actions the user has taken, groups the user is a member of, or anything else. Applications can interoperate by having users make proofs using publicly available state roots.", - "image": "unirep.svg", - "links": [ - { - "website": "https://developer.unirep.io/" - }, - { - "github": "https://github.com/unirep" - }, - { - "discord": "https://discord.gg/qrqq8SeN7F" - } - ] - }, - { - "name": "Semaphore", - "description": "Semaphore is a protocol, designed to be a simple and generic privacy layer for Ethereum DApps. Using zero knowledge, Ethereum users can prove their membership of a group and send signals such as votes or endorsements without revealing their original identity.", - "image": "semaphore.svg", - "links": [ - { - "website": "https://semaphore.appliedzkp.org/" - }, - { - "github": "https://semaphore.appliedzkp.org/github" - }, - { - "discord": "https://semaphore.appliedzkp.org/discord" - } - ] - }, - { - "name": "ZK-kit", - "description": "ZK-kit is a set of NPM modules (algorithms or utility functions) that can be reused in different projects and zero-knowledge protocols, making it easier for developers to access ready-to-use and tested libraries for common tasks.", - "image": "zk-kit.svg", - "links": [ - { - "github": "https://github.com/privacy-scaling-explorations/zk-kit" - } - ] - }, - { - "name": "Interep", - "description": "Private reputation and identity system allowing services to verify that users belong to a certain group or meet certain reputation criteria without revealing their identities. Users can anonymously export reputation from platforms such as Twitter and Github.", - "image": "interep.svg", - "links": [ - { - "website": "https://interep.link/" - }, - { - "github": "https://github.com/interep-project" - } - ] - }, - { - "name": "Clr.fund for Everyone", - "short_name": "Clr.fund", - "image": "clr.svg", - "description": "Infrastructure to make it easy for any community to run their own CLR round with clr.fund.", - "links": [ - { - "website": "https://qf.ethprague.com/" - }, - { - "documentation": "https://clrfund.gitbook.io/deployer/" - }, - { - "github": "https://github.com/quadratic-funding/qfi" - } - ] - }, - { - "name": "Rate Limiting Nullifier", - "short_name": "RLN", - "image": "rln.svg", - "description": "RLN is a construct based on zero-knowledge proofs that enables spam prevention mechanism for decentralized, anonymous environments. In anonymous environments, the identity of the entities is unknown.", - "links": [ - { - "website": "https://rate-limiting-nullifier.github.io/rln-docs/" - }, - { - "github": "https://github.com/Rate-Limiting-Nullifier/" - } - ] - }, - { - "name": "zk-chat", - "image": "zkchat.svg", - "description": "Anonymous and private chat environments, using Interep for a privacy preserving registry and sybil resistance and RLN for spam protection.", - "links": [ - { - "website": "https://zkchat.org" - }, - { - "github": "https://github.com/njofce/zk-chat" - } - ] - }, - { - "name": "COCO", - "description": "Collaborative content curation of online communities using a double-or-nothing challenge mechanism.", - "image": "Coco.svg", - "links": [ - { - "website": "https://www.cocoverse.club/" - }, - { - "github": "https://github.com/Janmajayamall/coco-contracts" - }, - { - "telegram": "https://t.me/+A47HJeqh0-tlODI1" - } - ] - }, - { - "name": "Trusted Setup", - "image": "trust-setup.svg", - "description": "Open source infrastructure for running a trusted setup ceremony in which many people participate in generating entropy which will secure a cryptographic protocol. Perpetual Powers of Tau: A universal ceremony for the initial phase of a trusted setup. MPC Phase 2 UI: UI for a CLI or browser-based ceremony for the second, circuit-specific phase for Groth-16 SNARKs. MPC Phase2 Suite: All-in-one suite of tools for conducting Phase 2 Trusted Setup ceremonies for multiple and large Groth-16 SNARKs circuits.", - "links": [ - { - "github": "https://github.com/privacy-scaling-explorations/perpetualpowersoftau" - }, - { - "github": "https://github.com/zkparty/setup-mpc-ui" - }, - { - "github": "https://github.com/quadratic-funding/mpc-phase2-suite" - } - ] - }, - { - "name": "TLSNotary", - "short_name": "TLSN", - "description": "TLSNotary leverages the ubiquitous TLS protocol to allow users to privately export their data from any webserver in a provable way.", - "image": "tlsn.png", - "links": [ - { - "website": "https://tlsnotary.org" - }, - { - "github": "https://github.com/tlsnotary/tlsn" - }, - { - "discord": "https://discord.gg/9XwESXtcN7" - } - ] - }, - { - "name": "Crypt-Keeper", - "short_name": "Crypt-Keeper", - "description": "Crypt-Keeper is a Zero knowledge identity management and proof generation", - "image": "zk-keeper.png", - "links": [ - { - "github": "https://github.com/privacy-scaling-explorations/crypt-keeper-extension" - } - ] - }, - { - "name": "Bandada", - "short_name": "Bandada", - "description": "An open-source system for managing privacy-preserving groups.", - "image": "bandada.svg", - "links": [ - { - "github": "https://github.com/privacy-scaling-explorations/zk-groups" - } - ] - }, - { - "name": "Channel 4", - "short_name": "Channel 4", - "description": "Discover the unexpected with State Channel.", - "image": "channel4.svg", - "links": [ - { - "website": "https://channel4.wtf//" - }, - { - "github": "https://github.com/State-Channel-4" - }, - { - "discord": "https://discord.gg/76UrYgVyEx" - } - ] - } -] diff --git a/src/data/Team.json b/src/data/Team.json deleted file mode 100644 index e880a8c..0000000 --- a/src/data/Team.json +++ /dev/null @@ -1,166 +0,0 @@ -[ - { - "name": "sinu", - "description": "TLSNotary Project Lead and Software Engineer", - "links": [ - { - "provider": "github", - "url": "https://github.com/sinui0" - }, - { - "provider": "twitter", - "url": "https://twitter.com/sinu_eth" - } - ] - }, - { - "name": "AtHeartEngineer", - "description": "Full stack / systems engineer; working on RLN", - "links": [ - { - "provider": "github", - "url": "https://github.com/atheartengineer" - }, - { - "provider": "twitter", - "url": "https://twitter.com/atheartengineer" - } - ] - }, - { - "name": "Geoff Lamperd", - "description": "Full stack engineer; working on Trusted Setup and Interep", - "links": [ - { - "provider": "github", - "url": "https://github.com/glamperd" - }, - { - "provider": "twitter", - "url": "https://twitter.com/glamperd" - } - ] - }, - { - "name": "James Zaki", - "description": "WAX project lead and software engineer", - "links": [ - { - "provider": "github", - "url": "https://github.com/jzaki" - }, - { - "provider": "twitter", - "url": "https://twitter.com/james_zaki" - } - ] - }, - { - "name": "Beyondr (Jeo)", - "description": "Designer & developer. Main project is ZKOPRU at the moment but also working on other auxiliary projects.", - "links": [ - { - "provider": "github", - "url": "https://github.com/thebeyondr" - }, - { - "provider": "twitter", - "url": "https://twitter.com/thebeyondr" - } - ] - }, - { - "name": "Jacob Caban-Tomski", - "description": "Full stack engineer; working on BLS Wallet", - "links": [ - { - "provider": "github", - "url": "https://github.com/jacque006" - } - ] - }, - { - "name": "Chiali", - "description": "Pollen Labs team lead. Building the best experience for freedom & humanity", - "links": [ - { - "provider": "github", - "url": "https://github.com/ChialiT" - }, - { - "provider": "twitter", - "url": "https://twitter.com/Chia_Tea" - } - ] - }, - { - "name": "Cedoor", - "description": "Software engineer; working on Semaphore and related projects", - "links": [ - { - "provider": "github", - "url": "https://github.com/cedoor" - }, - { - "provider": "twitter", - "url": "https://twitter.com/cedoor_" - } - ] - }, - { - "name": "Rachel", - "description": "Design strategy for ZK explorations", - "links": [ - { - "provider": "github", - "url": "https://github.com/rachelaux" - }, - { - "provider": "twitter", - "url": "https://twitter.com/rachel_aux" - } - ] - }, - { - "name": "Andy", - "description": "Product owner; working on Semaphore and other projects", - "links": [ - { - "provider": "github", - "url": "https://github.com/aguzmant103" - }, - { - "provider": "twitter", - "url": "https://twitter.com/AndyGuzmanEth" - } - ] - }, - { - "name": "Vivian", - "description": "Unirep Project Lead and Software Engineer", - "links": [ - { - "provider": "github", - "url": "https://github.com/vivianjeng" - }, - { - "provider": "twitter", - "url": "https://twitter.com/vivi4322" - } - ] - }, - { - "name": "0xjei", - "description": "Software Engineer; working on MACI/QFI and Trusted Setup", - "links": [ - { - "provider": "github", - "url": "https://github.com/0xjei" - }, - { - "provider": "twitter", - "url": "https://twitter.com/0xjei" - } - ] - } -] diff --git a/src/images/Coco.svg b/src/images/Coco.svg deleted file mode 100644 index a908b0b..0000000 --- a/src/images/Coco.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/MACI.svg b/src/images/MACI.svg deleted file mode 100644 index eb1c80a..0000000 --- a/src/images/MACI.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/src/images/arrow-down.svg b/src/images/arrow-down.svg deleted file mode 100644 index 08bed66..0000000 --- a/src/images/arrow-down.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/images/banner.png b/src/images/banner.png deleted file mode 100644 index b953f12..0000000 Binary files a/src/images/banner.png and /dev/null differ diff --git a/src/images/box_arrow_out.svg b/src/images/box_arrow_out.svg deleted file mode 100644 index bfad9a1..0000000 --- a/src/images/box_arrow_out.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/clr.svg b/src/images/clr.svg deleted file mode 100644 index d912614..0000000 --- a/src/images/clr.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/coco.png b/src/images/coco.png deleted file mode 100644 index bc0c8c6..0000000 Binary files a/src/images/coco.png and /dev/null differ diff --git a/src/images/docs.svg b/src/images/docs.svg new file mode 100644 index 0000000..3df9843 --- /dev/null +++ b/src/images/docs.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/eth-diamond-color.png b/src/images/eth-diamond-color.png deleted file mode 100644 index bc4c7aa..0000000 Binary files a/src/images/eth-diamond-color.png and /dev/null differ diff --git a/src/images/eth-logo-blue.svg b/src/images/eth-logo-blue.svg new file mode 100644 index 0000000..393fec4 --- /dev/null +++ b/src/images/eth-logo-blue.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + diff --git a/src/images/footer.png b/src/images/footer.png deleted file mode 100644 index b7e393f..0000000 Binary files a/src/images/footer.png and /dev/null differ diff --git a/src/images/globe.svg b/src/images/globe.svg deleted file mode 100644 index b321f93..0000000 --- a/src/images/globe.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/img-bear-access.svg b/src/images/img-bear-access.svg new file mode 100644 index 0000000..44c761a --- /dev/null +++ b/src/images/img-bear-access.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/images/img-bear.svg b/src/images/img-bear.svg new file mode 100644 index 0000000..edde5af --- /dev/null +++ b/src/images/img-bear.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/img-block-to-app.svg b/src/images/img-block-to-app.svg new file mode 100644 index 0000000..e78d3e2 --- /dev/null +++ b/src/images/img-block-to-app.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/img-elephant-love.svg b/src/images/img-elephant-love.svg new file mode 100644 index 0000000..3e62969 --- /dev/null +++ b/src/images/img-elephant-love.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/img-elephant-reading.svg b/src/images/img-elephant-reading.svg new file mode 100644 index 0000000..128bd62 --- /dev/null +++ b/src/images/img-elephant-reading.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/img-proveyouself.svg b/src/images/img-proveyouself.svg new file mode 100644 index 0000000..a770912 --- /dev/null +++ b/src/images/img-proveyouself.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/images/interep.svg b/src/images/interep.svg deleted file mode 100644 index 041c5f2..0000000 --- a/src/images/interep.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/images/lock-gfc.svg b/src/images/lock-gfc.svg deleted file mode 100644 index d6b232f..0000000 --- a/src/images/lock-gfc.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/overview-pretty.png b/src/images/overview-pretty.png new file mode 100644 index 0000000..0f4b6ad Binary files /dev/null and b/src/images/overview-pretty.png differ diff --git a/src/images/pse-deco.png b/src/images/pse-deco.png deleted file mode 100644 index f7a1ec0..0000000 Binary files a/src/images/pse-deco.png and /dev/null differ diff --git a/src/images/pse-deco.svg b/src/images/pse-deco.svg deleted file mode 100644 index 8a14b6b..0000000 --- a/src/images/pse-deco.svg +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/pse-logo.svg b/src/images/pse-logo.svg deleted file mode 100644 index 476a515..0000000 --- a/src/images/pse-logo.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/images/pse-og.png b/src/images/pse-og.png deleted file mode 100644 index c3d234e..0000000 Binary files a/src/images/pse-og.png and /dev/null differ diff --git a/src/images/rln.png b/src/images/rln.png deleted file mode 100644 index f7a7eed..0000000 Binary files a/src/images/rln.png and /dev/null differ diff --git a/src/images/rln.svg b/src/images/rln.svg deleted file mode 100644 index 41f8e34..0000000 --- a/src/images/rln.svg +++ /dev/null @@ -1,88 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/semaphore.svg b/src/images/semaphore.svg deleted file mode 100644 index 0bad963..0000000 --- a/src/images/semaphore.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/src/images/site-footer.svg b/src/images/site-footer.svg deleted file mode 100644 index 70cda64..0000000 --- a/src/images/site-footer.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/telegram.svg b/src/images/telegram.svg deleted file mode 100644 index 1f7cd5e..0000000 --- a/src/images/telegram.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/tlsn-logo.svg b/src/images/tlsn-logo.svg new file mode 100644 index 0000000..1b6d6d0 --- /dev/null +++ b/src/images/tlsn-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/triangle-gfc.svg b/src/images/triangle-gfc.svg deleted file mode 100644 index 7e77502..0000000 --- a/src/images/triangle-gfc.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/images/trust-setup.svg b/src/images/trust-setup.svg deleted file mode 100644 index ba403df..0000000 --- a/src/images/trust-setup.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/images/unirep.svg b/src/images/unirep.svg deleted file mode 100644 index bbaf732..0000000 --- a/src/images/unirep.svg +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/zk-keeper.png b/src/images/zk-keeper.png deleted file mode 100644 index d21f4b0..0000000 Binary files a/src/images/zk-keeper.png and /dev/null differ diff --git a/src/images/zk-keeper.svg b/src/images/zk-keeper.svg deleted file mode 100644 index af4c289..0000000 --- a/src/images/zk-keeper.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/zk-kit.svg b/src/images/zk-kit.svg deleted file mode 100644 index 01db4c9..0000000 --- a/src/images/zk-kit.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/zkEVM.svg b/src/images/zkEVM.svg deleted file mode 100644 index e5082c4..0000000 --- a/src/images/zkEVM.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/src/images/zkchat.svg b/src/images/zkchat.svg deleted file mode 100644 index fc2054a..0000000 --- a/src/images/zkchat.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/zkopru-cover.png b/src/images/zkopru-cover.png deleted file mode 100644 index ffdc85a..0000000 Binary files a/src/images/zkopru-cover.png and /dev/null differ diff --git a/src/index.css b/src/index.css index 6cd87b4..e7c89b1 100644 --- a/src/index.css +++ b/src/index.css @@ -12,7 +12,10 @@ --white: #fcfcfc; --box-shadow: -5px 3px 0px var(--gray); --black: #151616; - --iceberg-200: #A7E8DC; + --blue: #243f5f; + --light-blue: #8ca4c1; + --light-brown: #ece5d8; + --brown: #a27f3c; --twitter: #1da1f2; --telegram: #0088cc; @@ -22,33 +25,36 @@ --discord: #7289da; --website: var(--green); - --background: #F2FBF9; + --background: #fafbfc; + --background-blue: #243f5f; --text-color: #151616; - --border-color: var(--text-color); - --border-radius: 4px; + --border-color: var(--blue); + --border-radius: 8px; --border: 1px solid var(--border-color); --link-bold: #854ad1; --padding: 10px; } + @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); body { - color: var(--black); + color: var(--blue); margin: 0 auto; - max-width: 1800px; + max-width: 1440px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background-color: var(--background); background-attachment: fixed; - font-family: 'Space Grotesk', sans-serif;; + font-family: 'Space Grotesk', sans-serif; + ; } h1, h2, h3 { font-weight: 700; - color: var(--black); + color: var(--blue); padding: 0px; margin: 0px; } @@ -62,7 +68,7 @@ h2 { } p { - color: var(--black); + color: var(--blue); font-weight: 400; font-size: 1.125rem; line-height: 120%; @@ -72,16 +78,33 @@ p { a { text-decoration: none; - color: var(--black); + color: var(--light-blue); } html { scroll-behavior: smooth; } +.pill-button { + display: flex; + font-family: "Inter", sans-serif; + background-color: var(--white); + border: 3px solid var(--blue); + color: var(--blue); + text-align: center; + font-size: 20px; + font-weight: 600; + border-radius: 32px; + padding: 18px 24px; + align-items: center; +} + +.pill-button:hover { + background-color: var(--light-brown); +} + /* Responsiveness */ -@media screen and (max-width: 800px) { -} +@media screen and (max-width: 800px) {} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 33771bb..d96208f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,12 +4,14 @@ import './index.css'; import HomePage from './HomePage'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import reportWebVitals from './reportWebVitals'; +import './config' const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render( - } /> + } /> + } /> ); diff --git a/webpack.config.js b/webpack.config.js index 5c68b56..2e31d45 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,63 +1,72 @@ -const HtmlWebpackPlugin = require('html-webpack-plugin') -const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin') -const path = require('path') -const MiniCssExtractPlugin = require('mini-css-extract-plugin') -const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') -const CopyPlugin = require('copy-webpack-plugin') +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin"); +const path = require("path"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); +const CopyPlugin = require("copy-webpack-plugin"); module.exports = { - entry: ['./src/index.tsx'], - mode: 'development', + entry: ["./src/index.tsx"], + mode: "development", output: { - path: path.resolve(__dirname, 'build'), - publicPath: '/', + path: path.resolve(__dirname, "build"), + publicPath: "/", }, resolve: { - extensions: ['*', '.js', '.jsx', '.ts', '.tsx', '.json'], + extensions: ["*", ".js", ".jsx", ".ts", ".tsx", ".json"], }, module: { rules: [ { test: /\.(js|tsx?)$/, - loader: 'babel-loader' + loader: "babel-loader", }, { test: /\.(png|svg|jpg|gif|ico)$/, - loader: 'file-loader', + loader: "file-loader", options: { - // publicPath: 'build', + publicPath: './', esModule: false, - } + }, }, { test: /\.css$/, // exclude: /node_modules/, - use: [{ - loader: MiniCssExtractPlugin.loader, - }, 'css-loader',] - } - ] + use: [ + { + loader: MiniCssExtractPlugin.loader, + }, + "css-loader", + ], + }, + ], }, plugins: [ new HtmlWebpackPlugin({ - template: 'public/index.html', - filename: 'index.html', - inlineSource: '.(js|css)', + template: "public/index.html", + filename: "index.html", + inlineSource: ".(js|css)", + publicPath: "./", }), new MiniCssExtractPlugin({ - filename: 'styles.css', + filename: "styles.css", }), new CopyPlugin({ patterns: [ - { from: './public/manifest.json', to: 'manifest.json' }, + { + from: "./public/manifest.json", + to: "manifest.json" + }, + { + from: "./public/*.pdf", + to: "[name][ext]", + noErrorOnMissing: true + } ], }), // new HtmlWebpackInlineSourcePlugin(), ], optimization: { - minimizer: [ - `...`, - new CssMinimizerPlugin(), - ], + minimizer: [`...`, new CssMinimizerPlugin()], }, -} +}; diff --git a/webpack.prerender.js b/webpack.prerender.js index f76c320..b7300b1 100644 --- a/webpack.prerender.js +++ b/webpack.prerender.js @@ -24,7 +24,7 @@ module.exports = { test: /\.(png|svg|jpg|gif)$/, loader: 'file-loader', options: { - // publicPath: 'build', + publicPath: './', esModule: false, } },