mirror of
https://github.com/tlsnotary/website.git
synced 2026-01-08 22:38:08 -05:00
initial work on tlsn page
This commit is contained in:
sinu
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "pse-landingpage",
|
||||
"name": "tlsn-landingpage",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 659 B After Width: | Height: | Size: 462 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 618 B |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 618 B |
@@ -13,11 +13,11 @@
|
||||
<meta name="msapplication-TileColor" content="#cfc4fb" />
|
||||
<meta name="theme-color" content="#cfc4fb" />
|
||||
<meta property="og:image" content="/src/images/pse-og.png" alt="pse logo" />
|
||||
<link rel="canonical" href="http://projects.appliedzkp.org" />
|
||||
<link rel="canonical" href="http://tlsnotary.org" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="The Privacy and Scaling Exploration Team's website. Enjoy." />
|
||||
<title>Privacy and Scaling Exploration</title>
|
||||
<meta name="description" content="TLSNotary website" />
|
||||
<title>TLSNotary</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -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() {
|
||||
<Navbar />
|
||||
<main>
|
||||
<Hero />
|
||||
<Projects />
|
||||
<Discord />
|
||||
<Team />
|
||||
<Usecases />
|
||||
<How />
|
||||
<Roadmap />
|
||||
<About />
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
|
||||
10
src/components/About.css
Normal file
10
src/components/About.css
Normal file
@@ -0,0 +1,10 @@
|
||||
#About {
|
||||
display: flex;
|
||||
padding: 100px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#About .container {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
}
|
||||
22
src/components/About.tsx
Normal file
22
src/components/About.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import "./About.css";
|
||||
import ethlogo from '../images/eth-logo-blue.svg';
|
||||
import config from "../config.json";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<div id="About">
|
||||
<div className="container">
|
||||
<img src={ethlogo}></img>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<h3>
|
||||
TLSNotary is a public good & open source project supported by the Ethereum Foundation under the
|
||||
Privacy and Scaling Exploration Team.
|
||||
</h3>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<a href={config.links.pse}>
|
||||
<button className="pill-button">Learn More</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,8 +6,8 @@ function Discord() {
|
||||
return (
|
||||
<div id="call_to_action">
|
||||
<div className="cta">
|
||||
<div className="discord-text text-2xl lg:text-3xl font-semibold">Join our conversation on Discord!</div>
|
||||
<a href="https://discord.gg/g5YTV7HHbh" target="_blank" rel="noopener noreferrer" aria-label="PSE Discord link">
|
||||
<div className="discord-text text-2xl lg:text-3xl font-semibold">Come chat with us on Discord!</div>
|
||||
<a href="https://discord.gg/9XwESXtcN7" target="_blank" rel="noopener noreferrer" aria-label="TLSNotary Discord link">
|
||||
<img style={{ width: "4rem" }} src={discord} alt="" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -50,6 +50,10 @@ footer {
|
||||
max-width: 40px;
|
||||
}
|
||||
|
||||
#footer-links .cta {
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
footer {
|
||||
margin: 1em 0em;
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import "./Footer.css";
|
||||
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 config from "../config.json";
|
||||
|
||||
function copyright() {
|
||||
let websiteCreationYear = 2022;
|
||||
@@ -20,23 +19,15 @@ export default function Footer() {
|
||||
<div id="copyright">
|
||||
<img src={logo} alt="Pse Logo" />
|
||||
<div id="footer-text">
|
||||
<p id="footer-title">Privacy and Scaling Exploration Team © {copyright()}</p>
|
||||
<p>A multidisciplinary team supported by the Ethereum Foundation.</p>
|
||||
<p id="footer-title">TLSNotary</p>
|
||||
<p>Proof of data authenticity</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer-links">
|
||||
<a href="https://discord.gg/g5YTV7HHbh" target="_blank" rel="noopener noreferrer">
|
||||
<span>Chat with us</span>
|
||||
<a href={config.links.discord} target="_blank" rel="noopener noreferrer">
|
||||
<span className="cta">Chat with us</span>
|
||||
<img src={discord} alt="Discord Icon" />
|
||||
</a>
|
||||
<a href="https://twitter.com/PrivacyScaling" target="_blank" rel="noopener noreferrer">
|
||||
<span>Follow Updates</span>
|
||||
<img src={twitter} alt="Twitter Icon" />
|
||||
</a>
|
||||
<a href="https://medium.com/privacy-scaling-explorations" target="_blank" rel="noopener noreferrer">
|
||||
<span>Our Articles</span>
|
||||
<img src={medium} alt="Medium Icon" />
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
@@ -8,6 +8,10 @@ img.hero-graphic {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#Hero .name {
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
@@ -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 = () => (
|
||||
<div className="container xl:mx-auto home-hero max-w-[1920px]">
|
||||
<div className="mx-auto px-4 md:px-16 xl:pl-18 py-12 lg:py-16 xl:py-24 flex flex-col space-y-4 lg:space-y-6 md:max-w-4xl lg:max-w-6xl">
|
||||
<p className="uppercase text-sm xl:text-base tracking-wider font-semibold">Privacy & Scaling Explorations</p>
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl xl:text-6xl lg:leading-[110%] font-bold">
|
||||
Enhancing Ethereum through cryptographic research.
|
||||
</h1>
|
||||
<a href="#Projects">
|
||||
<div className="flex space-x-2">
|
||||
<div className="font-semibold underline text-purple-800 active:text-opacity-70 transition-all lg:text-lg">
|
||||
Explore our work
|
||||
</div>
|
||||
<div className="animate-bounce">
|
||||
<img src={downArrow} width={12} height={12} />
|
||||
</div>
|
||||
</div>
|
||||
<div id="Hero">
|
||||
<h2 className="name">TLSNotary</h2>
|
||||
<h1>
|
||||
Proof of data authenticity
|
||||
</h1>
|
||||
<p>
|
||||
Export data from any web application and prove facts about it without compromising on privacy.
|
||||
</p>
|
||||
<div className="flex space-x-2">
|
||||
<a href="https://tlsnotary.github.io/docs-mdbook/">
|
||||
<button className="pill-button">
|
||||
<p>View Documentation</p>
|
||||
</button>
|
||||
</a>
|
||||
<a href={config.links.repo}>
|
||||
<img src={github} alt="github"></img>
|
||||
</a>
|
||||
</div>
|
||||
<div className="w-full flex flex-col md:flex-row border-2 border-gray-800">
|
||||
<div className="hidden md:block w-[108px] h-[149.44px] lg:w-[195px] lg:h-[269.83px] xl:w-[270px] xl:h-[373.61px] absolute right-[6%] 2xl:right-[10%] top-60 hover:animate-spin">
|
||||
<img className="hero-graphic" src={triangleGraphic} />
|
||||
</div>
|
||||
{/* Lock */}
|
||||
<div className="md:w-1/4 bg-yellow-400">
|
||||
<div className="w-auto h-[91px] lg:w-[177.08px] lg:h-[173px] relative right-1/3 md:-right-2/4 xl:-right-3/4 top-6 md:top-12 lg:top-16 xl:top-32 hover:animate-bounce">
|
||||
<img className="hero-graphic" src={lockGraphic} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-auto bg-white py-12 lg:py-16 xl:py-24 px-4 md:px-24 xl:px-44">
|
||||
<h3 className="text-xl lg:text-3xl xl:text-4xl lg:leading-[145%] xl:leading-[150%] font-semibold md:max-w-xl xl:max-w-2xl ">
|
||||
We explore new use cases for zero-knowledge proofs and other cryptographic primitives through research and
|
||||
proof-of-concepts.
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
21
src/components/How.css
Normal file
21
src/components/How.css
Normal file
@@ -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;
|
||||
}
|
||||
34
src/components/How.tsx
Normal file
34
src/components/How.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import "./How.css";
|
||||
import diagram from "../images/overview-pretty.png";
|
||||
|
||||
export default function How() {
|
||||
return (
|
||||
<div id="How">
|
||||
<div className="body">
|
||||
<div className="diagram-container">
|
||||
<img className="diagram" src={diagram}></img>
|
||||
</div>
|
||||
<div>
|
||||
<h2>How it works</h2>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<p>
|
||||
TLSNotary leverages the ubiquitous TLS (Transport Layer Security) protocol to securely and privately prove a transcript of communications took place with a webserver.
|
||||
<br/>
|
||||
<br/>
|
||||
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.
|
||||
<br/>
|
||||
<br/>
|
||||
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.
|
||||
<br/>
|
||||
<br/>
|
||||
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.
|
||||
<br/>
|
||||
<br/>
|
||||
Furthermore, our protocol is transparent to the webserver.
|
||||
In fact, the webserver is never aware that this process took place.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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 (
|
||||
<nav id="nav-menu">
|
||||
<nav id="navbar" aria-label="Navigation for Desktop">
|
||||
<div id="anchor-links" className="nav-links">
|
||||
<a href="#top">About</a>
|
||||
<a href="#Projects">Projects</a>
|
||||
<a href="#Team">Members</a>
|
||||
</div>
|
||||
<a href="#" id="pse-link">
|
||||
<img src={logo} alt="pse logo" />
|
||||
<a href="#" id="tlsn-link">
|
||||
<img src={logo} alt="tlsn logo" />
|
||||
</a>
|
||||
<div id="anchor-links" className="nav-links">
|
||||
<a href={config.links.docs}>Docs</a>
|
||||
<a href="#Roadmap">Roadmap</a>
|
||||
<a href="#About">About</a>
|
||||
</div>
|
||||
<div id="social-links" className="nav-links">
|
||||
<a id="job-openings" href="https://jobs.lever.co/ethereumfoundation/?department=Ethereum%20Foundation&team=Privacy%20and%20Scaling%20Explorations" target="_blank" rel="noopener noreferrer">Job Openings</a>
|
||||
<a href="https://twitter.com/PrivacyScaling" aria-label="PSE Twitter link" target="_blank" rel="noopener noreferrer">
|
||||
<img src={twitter} alt="" />
|
||||
</a>
|
||||
<a href="https://discord.gg/g5YTV7HHbh" aria-label="PSE Discord link" target="_blank" rel="noopener noreferrer">
|
||||
<img src={discord} alt="" />
|
||||
</a>
|
||||
<a href="https://medium.com/privacy-scaling-explorations" aria-label="PSE medium" target="_blank" rel="noopener noreferrer">
|
||||
<img src={medium} alt="" />
|
||||
</a>
|
||||
<a href={config.links.discord} aria-label="TLSNotary Discord link" target="_blank" rel="noopener noreferrer">
|
||||
<img src={discord} alt="TLSNotary Discord" />
|
||||
</a>
|
||||
<a href={config.links.repo} aria-label="TLSNotary Github Repo">
|
||||
<img src={github} alt="Github" />
|
||||
</a>
|
||||
</div>
|
||||
<div id="menu-link" onClick={() => { toggleMenu() }}>{isOpen ? 'Close' : 'Menu'}</div>
|
||||
</nav>
|
||||
@@ -41,7 +37,6 @@ function Navbar() {
|
||||
<a href="#top">About</a>
|
||||
<a href="#Projects">Projects</a>
|
||||
<a href="#Team">Members</a>
|
||||
<a id="job-openings-mobile" href="https://jobs.lever.co/ethereumfoundation/?department=Ethereum%20Foundation&team=Privacy%20and%20Scaling%20Explorations" target="_blank" rel="noopener noreferrer">Job Openings</a>
|
||||
</nav>
|
||||
</nav>
|
||||
)
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="link" key={url}>
|
||||
<a href={url} target="_blank">
|
||||
<img className="icon" src={icon} alt={source} />
|
||||
{text ? <div className="link-title">{source}</div> : null}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="link" key={url}>
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="btn"
|
||||
style={{ backgroundColor: `var(--${source})` }}
|
||||
>
|
||||
<img className="icon" src={icon} alt={source} />
|
||||
{text ? <div className="link-title">{source}</div> : null}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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 (
|
||||
<svg height="150px" width="350px" style={{ backgroundColor: colorHashBG }} className="card-img-top">
|
||||
<text
|
||||
textAnchor="middle"
|
||||
x="50%"
|
||||
y="58%"
|
||||
fill={colorHashText}
|
||||
style={{ fontSize: "2.5rem", fontStyle: "italic" }}
|
||||
>
|
||||
{name}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function renderDescription(description: string | string[]): any {
|
||||
if (typeof description === "string") {
|
||||
return <p className="card-text-project">{description}</p>;
|
||||
}
|
||||
return description.map((text: string, index: number) => {
|
||||
return (
|
||||
<p className="card-text-project" key={index}>
|
||||
{text}
|
||||
</p>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
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 <img className="card-img-top" src={imageSource} alt={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 = (
|
||||
<a href={props.links[link].website} target="_blank">
|
||||
<div>{props.name}</div>
|
||||
<div style={{ width: "0.8125rem" }} />
|
||||
<img src={img_link} role="presentation" alt="Go to project website" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (title_with_link) {
|
||||
return title_with_link;
|
||||
}
|
||||
return <div>{props.name}</div>;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card border border-dark">
|
||||
{img}
|
||||
<div className="card-body">
|
||||
<div className="card-title">{title(props)}</div>
|
||||
<div className="project-description">{renderDescription(props.description)}</div>
|
||||
</div>
|
||||
<ProjectDescription title={props.name} description={props.description}></ProjectDescription>
|
||||
<div className="card-footer">
|
||||
<div className="docs-links">{docLinks}</div>
|
||||
<div className="social-links">{socialLinks}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProjectCard;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 (
|
||||
<>
|
||||
<button className="btn btn-ext" onClick={() => setmodalIsOpen(true)}>
|
||||
More Details
|
||||
</button>
|
||||
<Modal
|
||||
isOpen={modalIsOpen}
|
||||
shouldCloseOnOverlayClick={true}
|
||||
onRequestClose={() => setmodalIsOpen(false)}
|
||||
style={{
|
||||
overlay: {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.75)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="column">
|
||||
<div>
|
||||
<h3>{props.title}</h3>
|
||||
<button className="btn btn-close" onClick={() => setmodalIsOpen(false)}>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="modal-description">{props.description}</p>
|
||||
</div>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProjectDescription;
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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<any[]>([CreateCards(ProjectData, true)]);
|
||||
|
||||
return (
|
||||
<div id="Projects">
|
||||
<h2 className="">What we work on</h2>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<p className="">Explore how we integrate ZK primitives into decentralized applications</p>
|
||||
<div style={{ height: "4.4375rem" }} />
|
||||
<div className="Cards">{cards}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Projects;
|
||||
|
||||
function CreateCards(cards: ProjectCardProps[], shuffle: boolean = true): JSX.Element[] {
|
||||
let _cards = cards.map((card: ProjectCardProps) => {
|
||||
return <ProjectCard key={card.name} {...card} renderBanner={true} />;
|
||||
});
|
||||
|
||||
if (shuffle) {
|
||||
_cards = shuffleFisherYates(_cards as []);
|
||||
}
|
||||
|
||||
return _cards;
|
||||
}
|
||||
64
src/components/Roadmap.css
Normal file
64
src/components/Roadmap.css
Normal file
@@ -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; */
|
||||
}
|
||||
36
src/components/Roadmap.tsx
Normal file
36
src/components/Roadmap.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import "./Roadmap.css";
|
||||
|
||||
export default function Roadmap() {
|
||||
return (
|
||||
<div id="Roadmap">
|
||||
<h3>
|
||||
We're rebuilding the protocol from the ground up.
|
||||
</h3>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<p>Below are some development goals on our roadmap:</p>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<div className="cards">
|
||||
<div className="card border">
|
||||
<div className="card-body">
|
||||
<div className="card-text">Implement the core protocol as a series of open-source Rust libraries</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card border">
|
||||
<div className="card-body">
|
||||
<div className="card-text">Build and release a Notary server implementation</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card border">
|
||||
<div className="card-body">
|
||||
<div className="card-text">Develop a web extension for the browser</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card border">
|
||||
<div className="card-body">
|
||||
<div className="card-text">Create developer tools to build on top of TLSNotary</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 (
|
||||
<div id="Team">
|
||||
<h2 className="">Members</h2>
|
||||
<div style={{ height: "1.5rem" }} />
|
||||
<p>PSE is a team of 50 members, below you can find some of our team member's information.</p>
|
||||
<div className="Cards">{cards}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Teams;
|
||||
|
||||
function CreateCards(shuffle: boolean = true): JSX.Element[] {
|
||||
let _cards = TeamData.map((card: TeamMemberCardProps) => {
|
||||
return <TeamCard key={card.name} {...card} renderBanner={false} />;
|
||||
});
|
||||
|
||||
if (shuffle) {
|
||||
_cards = shuffleFisherYates(_cards as []);
|
||||
}
|
||||
|
||||
return _cards;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 <p className="card-text">{description}</p>;
|
||||
}
|
||||
return description.map((text: string, index: number) => {
|
||||
return (
|
||||
<p className="card-text" key={index}>
|
||||
{text}
|
||||
</p>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function TeamMemberCard(props: TeamMemberCardProps) {
|
||||
return (
|
||||
<div className="members-card">
|
||||
<div className="members-card-body">
|
||||
<div className="members-card-title">{props.name}</div>
|
||||
{renderDescription(props.description)}
|
||||
</div>
|
||||
<div className="members-card-footer">
|
||||
{(props.links || []).map(({ url, provider }) => (
|
||||
<a className="team-link" href={url} target="_blank" rel="noopener noreferrer" key={url}>
|
||||
<div className="team-link-title">{provider}</div>
|
||||
<img className="team-icon" src={images[provider] || globe} alt={''} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamMemberCard;
|
||||
84
src/components/Usecases.css
Normal file
84
src/components/Usecases.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
60
src/components/Usecases.tsx
Normal file
60
src/components/Usecases.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import "./Usecases.css";
|
||||
|
||||
export default function Usecases() {
|
||||
return (
|
||||
<div id="Usecases">
|
||||
<div className="body">
|
||||
<h2 className="header">What can TLSNotary do?</h2>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<p>
|
||||
With TLSNotary, you can create cryptographic proofs of authenticity for any data on the web, even your private data.
|
||||
Using our protocol you can securely:
|
||||
</p>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<div className="cards">
|
||||
<div className="card border">
|
||||
<div className="card-body">
|
||||
<div className="card-text">Prove private information about yourself is stored on a platform.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card border">
|
||||
<div className="card-body">
|
||||
<div className="card-text">Prove you received a private message from someone.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card border">
|
||||
<div className="card-body">
|
||||
<div className="card-text">Prove you received a money transfer.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card border">
|
||||
<div className="card-body">
|
||||
<div className="card-text">Create a provable snapshot of a webpage.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<h3 className="header">Is it secure?</h3>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<p>
|
||||
One may assume that TLSNotary requires a “man-in-the-middle” setup where the Notary snoops on the connection with the webserver.
|
||||
Fortunately, this is not true! Data is kept private even from the Notary.
|
||||
<br/>
|
||||
<br/>
|
||||
See <a href="#How">below</a> for more details on how it works.
|
||||
</p>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<h3 className="header">What's the catch?</h3>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<p>
|
||||
TLSNotary does require a trust assumption.
|
||||
A Verifier of a proof must trust that the Notary did not collude with the Prover to forge it.
|
||||
This trust can be minimized by requiring multiple proofs each signed by different Notaries.
|
||||
<br/>
|
||||
<br/>
|
||||
In some applications the Verifier can act as the Notary themselves, which allows for fully trustless proofs!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
8
src/config.json
Normal file
8
src/config.json
Normal file
@@ -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/"
|
||||
}
|
||||
}
|
||||
@@ -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}"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
69
src/images/eth-logo-blue.svg
Normal file
69
src/images/eth-logo-blue.svg
Normal file
@@ -0,0 +1,69 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="24.354912mm"
|
||||
height="39.464851mm"
|
||||
viewBox="0 0 24.354912 39.464851"
|
||||
version="1.1"
|
||||
id="svg1277"
|
||||
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
||||
sodipodi:docname="eth-logo-blue.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1279"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="2.1997092"
|
||||
inkscape:cx="-78.192154"
|
||||
inkscape:cy="147.06489"
|
||||
inkscape:window-width="3774"
|
||||
inkscape:window-height="2096"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<defs
|
||||
id="defs1274" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-92.822544,-128.76757)">
|
||||
<g
|
||||
id="g1468"
|
||||
transform="translate(-0.14096858,-6.5988166)">
|
||||
<g
|
||||
style="fill:none"
|
||||
id="g1411"
|
||||
transform="matrix(0.26458333,0,0,0.26458333,92.963513,135.36639)">
|
||||
<path
|
||||
d="m 0.0990773,74.8785 c -0.003466,0.1949 0.0107467,0.3897 0.0424617,0.5819 0.035385,0.1136 0.120311,0.1988 0.162773,0.3052 0.016884,0.0985 0.040529,0.1957 0.070768,0.291 0.042462,0.0923 0.148616,0.1277 0.198154,0.2129 0.237048,0.3938 0.549776,0.7363 0.920006,1.0078 0.12031,0.0851 0.20524,0.1845 0.32554,0.2555 0.12031,0.071 0.08493,0.0851 0.13447,0.1064 L 44.4151,98.9303 h 0.0991 c 0.4623,0.2285 0.9708,0.3474 1.4862,0.3474 0.5154,0 1.0239,-0.1189 1.4861,-0.3474 h 0.0991 L 90.0475,77.6392 c 0.1038,-0.0719 0.2031,-0.1501 0.2973,-0.2342 0.2212,-0.1388 0.4254,-0.3032 0.6086,-0.4897 0.1565,-0.1604 0.2964,-0.3364 0.4175,-0.5251 0.091,-0.1064 0.1761,-0.2178 0.2548,-0.3336 0.0495,-0.1065 0.0424,-0.2129 0.0849,-0.3123 0.0551,-0.0916 0.1047,-0.1864 0.1486,-0.2839 0.0106,-0.1275 0.0106,-0.2557 0,-0.3832 0.0502,-0.245 0.0693,-0.4954 0.0566,-0.7452 C 91.908,74.1243 91.8819,73.9177 91.838,73.7146 91.7799,73.4692 91.6944,73.2311 91.5832,73.0049 91.5529,72.8913 91.5151,72.7798 91.47,72.6713 L 49.0081,1.70095 C 48.9586,1.62288 48.8666,1.59449 48.817,1.52352 48.5072,1.05506 48.0865,0.670779 47.5926,0.404948 47.0986,0.139118 46.5468,0 45.9862,0 45.4257,0 44.8738,0.139118 44.3799,0.404948 43.886,0.670779 43.4653,1.05506 43.1554,1.52352 43.1059,1.59449 43.0139,1.62288 42.9644,1.70095 L 0.502466,72.6713 C 0.220065,73.175 0.0645848,73.7402 0.0495387,74.3178 0.0495387,74.3817 0,74.4314 0,74.4952 0.0249646,74.625 0.0580556,74.753 0.0990773,74.8785 Z M 42.4619,90.0165 11.4506,74.4669 42.4619,58.9173 Z m 7.077,-31.0992 31.0113,15.5496 -31.0113,15.5496 z m 0,-7.9345 V 16.3066 l 29.6313,49.5303 z m -7.077,0 L 12.8235,65.844 42.4619,16.3066 Z"
|
||||
fill="#243f5f"
|
||||
id="path1402" />
|
||||
</g>
|
||||
<g
|
||||
style="fill:none"
|
||||
id="g1422"
|
||||
transform="matrix(0.26458333,0,0,0.26458333,92.976762,157.89791)">
|
||||
<path
|
||||
d="M 91.1797,1.38995 C 90.6689,0.775196 89.9659,0.351623 89.1848,0.188005 88.4037,0.0243872 87.5904,0.130333 86.8769,0.488631 L 46.0002,20.9849 5.12359,0.488631 C 4.41072,0.130439 3.59811,0.0241912 2.81749,0.187118 2.03687,0.350045 1.33401,0.772597 0.822832,1.38626 0.311658,1.99993 0.0221425,2.76874 0.00121924,3.56807 -0.019704,4.36741 0.229192,5.1504 0.707557,5.79011 L 43.1695,62.5664 c 0.0424,0.0568 0.1132,0.0781 0.1627,0.1348 0.2362,0.2797 0.5158,0.5194 0.828,0.7097 0.1118,0.087 0.2301,0.1653 0.3539,0.2342 C 44.9749,63.8784 45.484,64 46.0002,64 c 0.5163,0 1.0253,-0.1216 1.4862,-0.3549 0.1237,-0.0689 0.242,-0.1472 0.3539,-0.2342 0.3122,-0.1903 0.5918,-0.43 0.828,-0.7097 0.0495,-0.0567 0.1203,-0.078 0.1627,-0.1348 L 91.2929,5.79011 C 91.7707,5.15094 92.0194,4.36882 91.9988,3.5703 91.9783,2.77178 91.6897,2.00356 91.1797,1.38995 Z M 42.4618,27.1451 V 49.7917 L 15.364,13.5968 Z m 7.0769,22.6466 V 27.1451 L 76.6365,13.5968 Z"
|
||||
fill="#243f5f"
|
||||
id="path1413" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/images/overview-pretty.png
Normal file
BIN
src/images/overview-pretty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
6
src/images/tlsn-logo.svg
Normal file
6
src/images/tlsn-logo.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="86" height="88" viewBox="0 0 86 88" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25.5484 0.708986C25.5484 0.17436 26.1196 -0.167376 26.5923 0.0844205L33.6891 3.86446C33.9202 3.98756 34.0645 4.22766 34.0645 4.48902V9.44049H37.6129C38.0048 9.44049 38.3226 9.75747 38.3226 10.1485V21.4766L36.1936 20.0606V11.5645H34.0645V80.9919C34.0645 81.1134 34.0332 81.2328 33.9735 81.3388L30.4251 87.6388C30.1539 88.1204 29.459 88.1204 29.1878 87.6388L25.6394 81.3388C25.5797 81.2328 25.5484 81.1134 25.5484 80.9919V0.708986Z" fill="#243F5F"/>
|
||||
<path d="M21.2903 25.7246V76.7012H12.7742V34.2207H0V25.7246H21.2903Z" fill="#243F5F"/>
|
||||
<path d="M63.871 76.7012H72.3871V34.2207H76.6452V76.7012H85.1613V25.7246H63.871V76.7012Z" fill="#243F5F"/>
|
||||
<path d="M38.3226 25.7246H59.6129V34.2207H46.8387V46.9649H59.6129V76.7012H38.3226V68.2051H51.0968V55.4609H38.3226V25.7246Z" fill="#243F5F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 896 B |
@@ -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
|
||||
*/
|
||||
|
||||
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user