diff --git a/package.json b/package.json index f64ead3..181b19b 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "pse-landingpage", + "name": "tlsn-landingpage", "version": "0.1.0", "private": true, "dependencies": { diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png index b480f8d..2fb8e09 100644 Binary files a/public/android-chrome-192x192.png and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png index 4a36a56..801d3c7 100644 Binary files a/public/android-chrome-512x512.png and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png index 0c15caa..7601518 100644 Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png index 4bf4fa1..b66eed1 100644 Binary files a/public/favicon-16x16.png and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png index 12ab68c..e23f1a9 100644 Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 9494940..e23f1a9 100644 Binary files a/public/favicon.ico and b/public/favicon.ico 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..79a9885 100644 --- a/src/HomePage.tsx +++ b/src/HomePage.tsx @@ -3,7 +3,11 @@ 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 +15,10 @@ function HomePage() {
- - - + + + +
); diff --git a/src/components/Hero.css b/src/components/Hero.css index 043b030..802325c 100644 --- a/src/components/Hero.css +++ b/src/components/Hero.css @@ -8,6 +8,10 @@ img.hero-graphic { object-fit: contain; } +#Hero .name { + color: var(--brown); +} + .border-2 { border-width: 2px; } diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index e05d7f7..5d75e91 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -1,42 +1,25 @@ -import downArrow from "../images/arrow-down.svg"; -import triangleGraphic from "../images/triangle-gfc.svg"; -import lockGraphic from "../images/lock-gfc.svg"; +import github from "../images/github.svg"; import "./Hero.css"; +import config from "../config.json"; const Hero = () => ( -
-
-

Privacy & Scaling Explorations

-

- Enhancing Ethereum through cryptographic research. -

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

TLSNotary

+

+ Proof of data authenticity +

+

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

+
+ + + + + github -
-
-
- -
- {/* 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..8f543b3 --- /dev/null +++ b/src/components/How.css @@ -0,0 +1,21 @@ +#How { + display: flex; + flex-direction: row; + align-items: center; + padding-block: 12px; + padding: 100px; +} + +#How .body { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2.5rem; +} + +#How .diagram-container { + padding: 10px; +} + +#How .diagram { + display: flex; +} diff --git a/src/components/How.tsx b/src/components/How.tsx new file mode 100644 index 0000000..56299ee --- /dev/null +++ b/src/components/How.tsx @@ -0,0 +1,34 @@ +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 allowing 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 9d352a1..ddd4ec9 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 medium from '../images/medium-circle.svg'; +import github from "../images/github.svg"; import './Navbar.css' +import config from "../config.json"; function Navbar() { const [isOpen, setIsOpen] = useState(false); @@ -15,25 +15,21 @@ 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 ( -
- - {source} - {text ?
{source}
: null} - -
- ); - } else { - return ( -
- - {source} - {text ?
{source}
: null} - -
- ); - } -} - -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..78c2fb6 --- /dev/null +++ b/src/components/Roadmap.css @@ -0,0 +1,64 @@ +#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; */ +} 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/Team.tsx b/src/components/Team.tsx deleted file mode 100644 index 816c0c1..0000000 --- a/src/components/Team.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import TeamData from "../data/Team.json"; -import TeamCard, { TeamMemberCardProps } from "./TeamMemberCard"; -import { shuffleFisherYates } from "../Utils"; -import "./Team.css"; - -const cards = CreateCards(true); - -function Teams() { - return ( -
-

Members

-
-

PSE is a team of 50 members, below you can find some of our team member's information.

-
{cards}
-
- ); -} - -export default Teams; - -function CreateCards(shuffle: boolean = true): JSX.Element[] { - let _cards = TeamData.map((card: TeamMemberCardProps) => { - return ; - }); - - if (shuffle) { - _cards = shuffleFisherYates(_cards as []); - } - - return _cards; -} 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..4314d24 --- /dev/null +++ b/src/components/Usecases.css @@ -0,0 +1,84 @@ +#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); + gap: 2.5rem; +} + +#Usecases .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; +} + +#Usecases .card-text { + color: var(--white); + line-height: 1.5rem; + font-weight: 600; + font-size: 1rem; +} + +#Usecases .card-title { + display: flex; +} + +#Usecases .card-title > div, +#Usecases .card-title > a > div { + font-weight: 700; + font-size: 1.5rem; + padding-block: 1.5rem; +} + +#Usecases .card-title > a > * { + display: inline-flex; +} + +#Usecases .card-body { + align-self: flex-start; + flex: 1; +} + +#Usecases .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 screen and (max-width: 800px) { + #Usecases { + padding-inline: 1rem; + } +} diff --git a/src/components/Usecases.tsx b/src/components/Usecases.tsx new file mode 100644 index 0000000..da58c1e --- /dev/null +++ b/src/components/Usecases.tsx @@ -0,0 +1,60 @@ +import "./Usecases.css"; + +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 private information about yourself is stored on a platform.
+
+
+
+
+
Prove you received a private message from someone.
+
+
+
+
+
Prove you received a money transfer.
+
+
+
+
+
Create a provable snapshot of a webpage.
+
+
+
+
+

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..8fbb0b7 --- /dev/null +++ b/src/config.json @@ -0,0 +1,8 @@ +{ + "links": { + "discord": "https://discord.gg/9XwESXtcN7", + "repo": "https://github.com/tlsnotary/tlsn", + "docs": "https://tlsnotary.github.io/docs-mdbook/", + "pse": "https://appliedzkp.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 f5c4e13..0000000 --- a/src/data/Projects.json +++ /dev/null @@ -1,225 +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": "BLS Wallet", - "image": "bls.svg", - "description": "Reduce transaction costs on evm-L2s using BLS signatures. The smart contract wallet also includes: recovery, multi-action, gas-less transactions, and upgradability.", - "links": [ - { - "website": "https://blswallet.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 allows anonymous members of a group to give, receive, and prove reputation without revealing their identity. Applications or people can act as attesters and build their own reputation tokens on top of a shared Unirep contract.", - "image": "unirep.svg", - "links": [ - { - "website": "https://unirep.social/" - }, - { - "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://github.com/semaphore-protocol/" - }, - { - "telegram": "https://t.me/joinchat/B-PQx1U3GtAh--Z4Fwo56A" - } - ] - }, - { - "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" - }, - { - "discord": "https://discord.gg/9B9WgGP6YM" - } - ] - }, - { - "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" - }, - { - "discord": "https://discord.gg/jMfye2mWcf" - } - ] - }, - { - "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://ethresear.ch/t/semaphore-rln-rate-limiting-nullifier-for-spam-prevention-in-anonymous-p2p-setting/5009" - }, - { - "github": "https://github.com/bdim1/rlnapp" - } - ] - }, - { - "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": "ZK-Keeper", - "short_name": "ZK-Keeper", - "description": "ZK-Keeper is a browser plugin which enables Zero knowledge identity management and proof generation", - "image": "zk-keeper.png", - "links": [ - { - "github": "https://github.com/faa/zk-keeper" - } - ] - } -] \ No newline at end of file diff --git a/src/data/Team.json b/src/data/Team.json deleted file mode 100644 index 0c4d45a..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": "BLS Wallet 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 auxillary 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": "All things UX & pretty designs. Unirep and other projects", - "links": [ - { - "provider": "github", - "url": "https://github.com/ChialiTsai" - }, - { - "provider": "twitter", - "url": "https://twitter.com/Chia_Tea" - } - ] - }, - { - "name": "Justin Martin", - "description": "Zero knowledge sorting hat. Making opportunities for smart people to advance ZK and privacy", - "links": [ - { - "provider": "github", - "url": "https://github.com/TheFrozenFire" - }, - { - "provider": "twitter", - "url": "https://twitter.com/thefrozenfire" - } - ] - }, - { - "name": "Cedoor", - "description": "Full stack engineer; working on Semaphore and Interep", - "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": "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/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/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/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/index.css b/src/index.css index b783d75..fd384b0 100644 --- a/src/index.css +++ b/src/index.css @@ -12,6 +12,10 @@ --white: #fcfcfc; --box-shadow: -5px 3px 0px var(--gray); --black: #151616; + --blue: #243f5f; + --light-blue: #8ca4c1; + --light-brown: #ece5d8; + --brown: #a27f3c; --twitter: #1da1f2; --telegram: #0088cc; @@ -21,19 +25,20 @@ --discord: #7289da; --website: var(--green); - --background: #f3f0fe; + --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; } 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; @@ -46,7 +51,7 @@ h1, h2, h3 { font-weight: 700; - color: var(--black); + color: var(--blue); padding: 0px; margin: 0px; } @@ -60,7 +65,7 @@ h2 { } p { - color: var(--black); + color: var(--blue); font-weight: 400; font-size: 1.125rem; line-height: 120%; @@ -70,13 +75,24 @@ p { a { text-decoration: none; - color: var(--black); + color: var(--light-blue); } html { scroll-behavior: smooth; } +.pill-button { + font-family: "Inter", sans-serif; + background-color: var(--white); + border: 3px solid var(--blue); + color: var(--black); + text-align: center; + font-size: 20px; + border-radius: 32px; + padding: 18px 24px; +} + /* Responsiveness */ diff --git a/src/index.tsx b/src/index.tsx index 33771bb..e3d6e64 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,6 +4,7 @@ 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(