+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+ );
+}
diff --git a/components/AppContainer.tsx b/components/AppContainer.tsx
new file mode 100644
index 0000000..a6a64d1
--- /dev/null
+++ b/components/AppContainer.tsx
@@ -0,0 +1,13 @@
+import { classed } from "@tw-classed/react";
+
+export const AppContainer = classed.div("px-6 mx-auto w-full", {
+ variants: {
+ size: {
+ small: "max-w-[700px] md:px-0",
+ medium: "max-w-screen-2xl md:px-16",
+ },
+ },
+ defaultVariants: {
+ size: "medium",
+ },
+});
diff --git a/components/AppFooter.tsx b/components/AppFooter.tsx
new file mode 100644
index 0000000..b0ef8d4
--- /dev/null
+++ b/components/AppFooter.tsx
@@ -0,0 +1,82 @@
+import { AppContainer } from "./AppContainer";
+import { Icons } from "./Icons";
+import { classed } from "@tw-classed/react";
+import { NAVIGATION, SOCIALS_FOOTER } from "../app/settings";
+import Link from "next/link";
+import { LABELS } from "../content";
+
+const NavLabel = classed.span("flex gap-2 items-center font-sans text-white-100 text-sm duration-300", {
+ variants: {
+ hover: {
+ true: "hover:text-gold",
+ },
+ },
+});
+
+export const AppFooter = () => {
+ return (
+
+
+
+ {LABELS.USE_CASES.USE_CASES.TITLE}
+
+ }
+ description={LABELS.USE_CASES.USE_CASES.DESCRIPTION}
+ >
+
+
+ {LABELS.USE_CASES.BUILD_WITH_TLSNOTARY}
+
+ }
+ >
+
+
+
+
+ {ProjectList.map((project) => {
+ return (
+
+
+ );
+ })}
+
+
+
+ + {project.title} +
+
+ {project.tldr}
+
+
+ {Object.keys(project?.links ?? []).map((website, index) => {
+ // @ts-ignore
+ const url: string | undefined = project.links?.[website] ?? undefined;
+
+ const icon: any = IconMapping[website as WebsiteType];
+
+ if (!url) return null;
+ if (!icon) return null;
+
+ return (
+
+ {icon}
+
+ );
+ })}
+
+
+
+
+
+ );
+};
diff --git a/components/AppHeader.tsx b/components/AppHeader.tsx
new file mode 100644
index 0000000..b12900c
--- /dev/null
+++ b/components/AppHeader.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import Link from "next/link";
+import { AppContainer } from "./AppContainer";
+import { Icons } from "./Icons";
+import { NAVIGATION, SOCIALS_HEADER } from "../app/settings";
+import { classed } from "@tw-classed/react";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { cn } from "../shared/utils";
+import { LABELS } from "../content";
+
+const NavLabel = classed.span(
+ "relative overflow-hidden text-base md:text-lg text-primary font-semibold group-hover:text-brown-50 hover:text-gold duration-300 after:content-[''] after:h-1 after:w-full after:bottom-0 after:left-0 after:absolute p-2 duration-200",
+ {
+ variants: {
+ active: {
+ false: "after:bg-transparent",
+ true: "after:bg-brown-50",
+ },
+ },
+ }
+);
+
+const AppMobileNav = () => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+
+ {LABELS.COMMON.FOOTER.TITLE}
+
+
+
+
+ {NAVIGATION.map(({ label, href, external }, index) => {
+ if (external) return null;
+ return (
+
+
+ {label}
+
+
+ );
+ })}
+
+
+ {NAVIGATION.map(({ label, href, external }, index) => {
+ if (!external) return null;
+ return (
+
+
+ {label}
+
+
+ );
+ })}
+
+
+ {SOCIALS_FOOTER.map(({ label, href, external, icon }, index) => {
+ return (
+
+
+ {icon}
+ {label}
+
+
+ );
+ })}
+
+
+
+
+
+ {isOpen && (
+
+ );
+};
+
+const AppDesktopNav = () => {
+ const pathname = usePathname();
+
+ return (
+ setIsOpen(false)}
+ >
+ )}
+
+
+
+
+
+
+ {NAVIGATION.map((item, index) => {
+ return (
+ setIsOpen(false)}
+ className="flex items-center py-3 gap-3"
+ >
+
+ {item.label}
+
+ {item.external &&
+
+
+
+ {SOCIALS_HEADER.map(({ href, external, icon }, index) => {
+ return (
+
+ {icon}
+
+ );
+ })}
+
+ {LABELS.COMMON.FOOTER.TITLE}
+
+ {NAVIGATION.map(({ label, href, external }, index) => {
+ const pathParts = href.split("/").filter(Boolean);
+ const isHome = pathname === "/" && href === "/";
+
+ // is home or the first part of the path matches the first part of the href
+ const isActive = isHome || (pathname !== null && pathParts[0] === pathname.split("/")[1]);
+
+ return (
+
+ {label}
+ {external &&
+
+
+
+ {SOCIALS_HEADER.map(({ href, external, icon }, index) => {
+ return (
+
+ {icon}
+
+ );
+ })}
+
+
+
+ );
+};
diff --git a/components/ui/Accordion.tsx b/components/ui/Accordion.tsx
new file mode 100644
index 0000000..adc9dc3
--- /dev/null
+++ b/components/ui/Accordion.tsx
@@ -0,0 +1,53 @@
+"use client";
+import { ReactNode, useState } from "react";
+import { Icons } from "../Icons";
+import { cn } from "../../shared/utils";
+
+interface AccordionProps {
+ label: string;
+ children?: ReactNode;
+}
+
+const Accordion = ({ label, children }: AccordionProps) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+ {typeof title === "string" ? {title} : title}
+ {description && {description} }
+ {children &&
+ {children}
}
+
+
+ );
+};
+
+Accordion.displayName = "Accordion";
+export { Accordion };
diff --git a/components/ui/Banner.tsx b/components/ui/Banner.tsx
new file mode 100644
index 0000000..79ddf8e
--- /dev/null
+++ b/components/ui/Banner.tsx
@@ -0,0 +1,92 @@
+import { ReactNode } from "react";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import type * as Classed from "@tw-classed/react";
+import { classed } from "@tw-classed/react";
+import { cn } from "../../shared/utils";
+import ReactMarkdown from "react-markdown";
+import { createMarkdownElement } from "../AppMarkdown";
+import { AppContainer } from "../AppContainer";
+
+export const BannerWrapper = classed.div("py-[120px] relative", {
+ variants: {
+ color: {
+ brown: "bg-brown-50",
+ gray: "bg-gray",
+ },
+ },
+ defaultVariants: {
+ color: "brown",
+ },
+});
+
+export const BannerTitle = classed.h4("text-gold", {
+ variants: {
+ titleSize: {
+ small: "text-[32px] font-semibold",
+ medium: "text-3xl md:text-4xl lg:text-5xl md:leading-[49px] font-bold",
+ },
+ variant: {
+ brown: "text-gold",
+ primary: "text-primary",
+ },
+ },
+ defaultVariants: {
+ titleSize: "medium",
+ },
+});
+
+type BannerProps = Classed.VariantProps {
+ setIsOpen(!isOpen);
+ }}
+ >
+ {label}
+
+
+
+
+ {typeof children === "string" ? (
+
+ + {children} +
+ ) : ( + children + )} +
+
+
+
+
+ {title}
+ {description && (
+
+ createMarkdownElement("span", {
+ className: "font-medium",
+ ...props,
+ }),
+ a: ({ node, ...props }) =>
+ createMarkdownElement("a", {
+ className: "text-primary font-medium text-lg md:text-xl md:leading-6",
+ target: "_blank",
+ ...props,
+ }),
+ span: ({ ...props }: any) => (
+
+ ),
+ p: ({ ...props }: any) => (
+
+ ),
+ }}
+ className={cn(descriptionClass, "text-primary font-normal text-lg md:text-xl md:leading-6")}
+ >
+ {description}
+
+ )}
+
+ {actions}
+ 
+ `,
+
+ STEPS: [
+ {
+ TITLE: "Step 1: Multiparty TLS Request",
+ DESCRIPTION:
+ "The Prover requests data from a Server over TLS. The verifier cooperates in secure and privacy-preserving multi-party computation (MPC). This cooperation guaranties that the Prover can not cheat and allows the Verifier to check the authenticity of the data in step 3.",
+ },
+ {
+ TITLE: "Step 2: Selective Disclosure",
+ DESCRIPTION:
+ "The Prover selectively discloses the data to the Verifier by redacting sensitive information prior to sharing it. Selective disclosure may involve simple redactions, or more advanced techniques such as a zero-knowledge proofs that can prove properties of redacted data without revealing the data itself.",
+ },
+ {
+ TITLE: "Step 3: Data Verification",
+ DESCRIPTION:
+ "The Verifier verifies that the prover did not tamper with the data and also verifiers the data origin, by inspecting the Server certificate through trusted certificate authorities (CAs). The Verifier can now make assertions about the non-redacted content of the transcript.",
+ },
+ ],
+ },
+ GET_INVOLVED: {
+ TITLE: "Get involved",
+ DESCRIPTION:
+ "An alpha version of the TLSNotary protocol is available for testing. We welcome folks to start playing around with it, including trying to break it!\n\nBoth codebases are 100% Rust and compile to WASM targets with an eye on deployment into browser environments. All our code is and always will be open source! Dual-licensed under Apache 2 and MIT, at your choice.\n\nWe've invested effort into making sure our code is modular and capable of evolving. We hope that others may find some of the components independently interesting and useful. Contributions are welcome!",
+ },
+};
diff --git a/content/common.tsx b/content/common.tsx
new file mode 100644
index 0000000..abbf103
--- /dev/null
+++ b/content/common.tsx
@@ -0,0 +1,20 @@
+export const COMMON_CONTENT = {
+ VIEW_DOCUMENTATION: "View Documentation",
+ FORK_REPO: "Fork github repo",
+ AND_MORE: "... and more!",
+ CHECKOUT_GITHUB: "Checkout our Github",
+ CHECKOUT_DOCS: "Checkout our documentation",
+ LEARN_THE_BASICS: "Learn the basics",
+ SERVER_AUTHENTICATION: "Server Authentication",
+ DATA_PORTABILITY: "Data Portability",
+ FAQ: "FAQ",
+ JOIN_DISCORD: "Join Our Discord",
+ CONNECT_WITH_US: {
+ TITLE: "Connect with us",
+ DESCRIPTION:
+ "Our team believes in open-source development with a strong emphasis on trustlessness. We are committed to transparency and community-driven improvements. Come find us in our public Discord to learn more and collaborate!",
+ },
+ FOOTER: {
+ TITLE: "TLSNotary is project of Privacy and Scaling Explorations, an Ethereum Foundation supported team.",
+ },
+};
diff --git a/content/faq.tsx b/content/faq.tsx
new file mode 100644
index 0000000..a1ba255
--- /dev/null
+++ b/content/faq.tsx
@@ -0,0 +1,63 @@
+interface FAQItem {
+ question: string;
+ answer: string;
+}
+
+/**
+Markdown supported for answer
+*/
+export const FAQS: FAQItem[] = [
+ {
+ question: "Why is TLS not sufficient for data portability?",
+ answer:
+ "TLS indeed signs a checksum (a Message Authentication Code, MAC) to check data integrity. However, in TLS, both the Server and the User use symmetric keys for data exchange, meaning the same key is employed for both encryption and decryption. This symmetric key usage allows a User to modify the data and retroactively compute a new checksum. As a result, this checksum alone is insufficient to guarantee data authenticity to a third party.",
+ },
+ {
+ question: "How can I verify the data origin in a TLSNotary proof?",
+ answer:
+ "The proof contains the domain name and ephemeral public key of the server. A standard certificate verifier can verify whether the key is valid for the provided server name and that it chains to at least one trusted root certificate.",
+ },
+ {
+ question: "What does “privacy-centric” exactly mean for TLSNotary?",
+ answer:
+ "TLSNotary does not compromise on privacy for performance reasons. It prioritizes user privacy in all its operations. The verifier only sees the data the prover decides to share. If a generic notary is used to verify the TLS session, this notary only sees encrypted data and does not know what Server the Prover communicates with. The only information the Notary can see is: the time of the TLS-session, the length of the requests and responses, the number or round trips, and which cipher suite is used.", + }, + { + question: "What is the overhead of using TLSNotary?", + answer: + "The Multi-Party Computation (MPC) between the Prover and the Verifier requires significant bandwidth, orders of magnitude more than the Server's data size.", + }, + { + question: "Can the server detect that a TLS session is being notarized?", + answer: "To the server, the TLS connection appears the same as any other connection. Only the User communicates with the Server, not the Notary or the Verifier. However, the timing patterns of TLS communication might have a different fingerprint, so through statistical analysis, specific identifying patterns might be uncovered.", + }, + { + question: "Can TLSNotary be used for public data?", + answer: + "Yes, but for public data, a less-resource-intensive man-in-the-middle approach is more economical since the privacy features of TLSNotary are superfluous in this scenario.", + }, + { + question: "How can I inspect and verify a TLSNotary proof?", + answer: + "The easiest way is to use the proof-of-concept [TLSNotary Explorer](https://explorer.tlsnotary.org)", + }, + { + question: "Which TLS versions are supported?", + answer: "TLSNotary currently supports TLS 1.2. Support for TLS 1.3 is on the roadmap.", + }, + { + question: "How can I use TLSNotary to verify data on-chain?", + answer: + "At the moment the most practical way to verify data on-chain is to prove the data directly to an off-chain application specific verifier. There are planned upgrades to make TLSNotary proofs directly verifiable on-chain.", + }, + { + question: "Why can a verifier trust a TLSNotary proof?", + answer: + "A TLSNotary proof is trustworthy because of its cryptographic integrity and its inclusion of an ephemeral key, allowing verifiers to confirm the data's origin from the claimed domain. This trust also hinges on the verifier's confidence in the data source (the server) and the validity of any redactions. Additionally, if the verifier did not conduct the TLS-MPC process themselves, they must trust in the notary's neutrality, ensuring it has not been influenced or compromised by the Prover.", + }, + { + question: "How does TLSNotary differ from other TLS portability approaches?", + answer: + "TLSNotary distinguishes itself with its dedication to open-source development and a strong emphasis on trustlessness. Developed as a public good without a business model, it fosters transparency and allows for community-driven improvements. Unlike other solutions, TLSNotary is designed to prioritize trustlessness, thereby guaranteeing superior levels of privacy and security. It achieves this without depending on particular network assumptions or compromising on privacy or security to enhance performance. This strategy positions TLSNotary as the go-to choice for projects that place a high value on security and privacy in their TLS portability needs.", + }, +]; diff --git a/content/homepage.tsx b/content/homepage.tsx new file mode 100644 index 0000000..2413ad0 --- /dev/null +++ b/content/homepage.tsx @@ -0,0 +1,17 @@ +export const HOMEPAGE_CONTENT = { + TITLE: "Privacy-preserving data portability", + SUBTITLE: "TLSNotary", + DESCRIPTION: + " TLSNotary is an open-source protocol that can verify the authenticity of TLS data while protecting privacy. If you're looking for a way to make data portable without compromising on security, check out the protocol and integrate it into your applications!", + BUILD_WITH_US: { + TITLE: "Build with us", + DESCRIPTION: + "Interested in using TLSNotary, contributing, or just learning more about how it works? Join the conversation on our [Discord server](https://discord.gg/9XwESXtcN7), check out our [Github](https://github.com/tlsnotary/tlsn), or use our Quick Start guide to try it out!", + }, + WHY_USE_TLSNOTARY: { + TITLE: "Why use TLSNotary?", + DESCRIPTION: `TLS (Transport Layer Security), also known as the "s" in "https" 🔐, can secure communication between a server and a user. But what if you want to credibly share data with others without compromising security, privacy, or control? TLSNotary solves this by adding a Verifier to the TLS connection using secure Multi-Party Computation (MPC). MPC provides cryptographic guarantees, allowing the Verifier to authenticate the TLS transcript without requiring external trust or revealing the complete data to anyone. TLSNotary can sign (aka notarize) data and make it portable in a privacy preserving way. + With TLSNotary, users are in full control over the data they choose to share. + `, + }, +}; diff --git a/content/index.ts b/content/index.ts new file mode 100644 index 0000000..8368c3e --- /dev/null +++ b/content/index.ts @@ -0,0 +1,11 @@ +import { ABOUT_CONTENT } from "./about"; +import { COMMON_CONTENT } from "./common"; +import { HOMEPAGE_CONTENT } from "./homepage"; +import { USE_CASES_CONTENT } from "./useCases"; + +export const LABELS = { + ABOUT: ABOUT_CONTENT, + HOMEPAGE: HOMEPAGE_CONTENT, + COMMON: COMMON_CONTENT, + USE_CASES: USE_CASES_CONTENT, +}; diff --git a/content/projects.tsx b/content/projects.tsx new file mode 100644 index 0000000..84169a2 --- /dev/null +++ b/content/projects.tsx @@ -0,0 +1,58 @@ +export type WebsiteType = "website" | "twitter" | "github"; + +type Project = { + title: string; + tldr: string; + links?: Partial
${app}
- `)
- if (output.indexOf('html') !== -1) {
- fs.writeFileSync(path.join(__dirname, `../build/${output}`), html)
- } else {
- // make a directory and put an index.html in that
- fs.mkdirSync(path.join(__dirname, `../build/${output}`))
- fs.writeFileSync(path.join(__dirname, `../build/${output}`, 'index.html'), html)
- }
-}
diff --git a/shared/utils.ts b/shared/utils.ts
new file mode 100644
index 0000000..a5ef193
--- /dev/null
+++ b/shared/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/src/HomePage.test.tsx b/src/HomePage.test.tsx
deleted file mode 100644
index d534457..0000000
--- a/src/HomePage.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import 'react';
-import { render, screen } from '@testing-library/react';
-import App from './HomePage';
-
-test('renders learn react link', () => {
- render(
-
- );
-}
-
-export default HomePage;
diff --git a/src/Utils.tsx b/src/Utils.tsx
deleted file mode 100644
index d460cdc..0000000
--- a/src/Utils.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export function shuffleFisherYates(array: []): [] {
- let i = array.length;
- while (i--) {
- const ri = Math.floor(Math.random() * i);
- [array[i], array[ri]] = [array[ri], array[i]];
- }
- return array;
-}
\ No newline at end of file
diff --git a/src/components/About.css b/src/components/About.css
deleted file mode 100644
index 239269d..0000000
--- a/src/components/About.css
+++ /dev/null
@@ -1,13 +0,0 @@
-#About {
- display: flex;
- padding: 100px;
- justify-content: center;
-}
-
-#About .container {
- display: flex;
- flex-direction: column;
- text-align: center;
- align-items: center;
- max-width: 600px;
-}
diff --git a/src/components/About.tsx b/src/components/About.tsx
deleted file mode 100644
index 0aedd05..0000000
--- a/src/components/About.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import "./About.css";
-import ethlogo from '../images/eth-logo-blue.svg';
-import config from "../config.json";
-
-export default function About() {
- return (
-
-
- );
-}
diff --git a/src/components/Discord.css b/src/components/Discord.css
deleted file mode 100644
index 5e22dac..0000000
--- a/src/components/Discord.css
+++ /dev/null
@@ -1,27 +0,0 @@
-#call_to_action {
- padding: 2rem;
- border: 2px solid var(--black);
- border-left: none;
- border-right: none;
- background-color: var(--purple);
-}
-
-/* .discord-text {
- font-weight: 600;
- font-size: 1.5rem;
- line-height: 125%;
-} */
-
-.text-2xl {
- font-size: 1.5rem; /* 24px */
- line-height: 2rem; /* 32px */
-}
-
-.cta {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 1rem;
- max-width: 500px;
- margin: 0 auto;
-}
diff --git a/src/components/Discord.tsx b/src/components/Discord.tsx
deleted file mode 100644
index f877d4a..0000000
--- a/src/components/Discord.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import discord from "../images/discord_round.svg";
-import "./Discord.css";
-
-// Discord call to action
-function Discord() {
- return (
-
-
-
- 
-
-
-
-
-
- - TLSNotary is a public good & open source project supported by the Ethereum Foundation under the - Privacy and Scaling Exploration Team. -
-
-
-
-
-
-
-
- );
-}
-
-export default Discord;
diff --git a/src/components/Footer.css b/src/components/Footer.css
deleted file mode 100644
index 664626d..0000000
--- a/src/components/Footer.css
+++ /dev/null
@@ -1,76 +0,0 @@
-footer {
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- gap: 1rem;
- border-top: 2px solid var(--gray);
- margin: 0rem 5em 1rem;
- padding-block: 2.4rem;
-}
-
-#copyright {
- display: flex;
- justify-content: start;
- gap: 2.5rem;
-}
-
-#copyright img {
- max-width: 50px;
-}
-
-#footer-text {
- display: flex;
- flex-direction: column;
- justify-content: space-evenly;
-}
-
-#footer-text > * {
- margin: 0;
-}
-
-#footer-title {
- font-weight: 700;
-}
-
-#footer-links {
- display: flex;
- gap: 4.5rem;
-}
-
-#footer-links > * {
- display: flex;
- flex-direction: row;
- gap: 0.75em;
- align-items: center;
- font-size: 1.125rem;
- font-weight: 700;
-}
-
-#footer-links img {
- max-width: 40px;
-}
-
-#footer-links .cta {
- color: var(--brown);
-}
-
-@media screen and (max-width: 800px) {
- footer {
- margin: 1em 0em;
- margin-top: 4rem;
- padding: 1em;
- justify-content: center;
- }
-
- #copyright img {
- display: none;
- }
-
- #footer-links {
- flex-direction: column;
- margin-top: 4rem;
- }
- #footer-links img {
- max-width: 3rem;
- }
-}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
deleted file mode 100644
index 53144a6..0000000
--- a/src/components/Footer.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import "./Footer.css";
-import logo from '../images/tlsn-logo.svg';
-import discord from "../images/discord_round.svg";
-import config from "../config.json";
-
-function copyright() {
- let websiteCreationYear = 2022;
- let currentYear = new Date().getFullYear();
- if (currentYear > websiteCreationYear) {
- return `${websiteCreationYear} - ${currentYear}`;
- } else {
- return websiteCreationYear;
- }
-}
-
-export default function Footer() {
- return (
-
- );
-}
diff --git a/src/components/Hero.css b/src/components/Hero.css
deleted file mode 100644
index 972ece4..0000000
--- a/src/components/Hero.css
+++ /dev/null
@@ -1,40 +0,0 @@
-#Hero {
- max-width: 67%;
- padding: 50px;
-}
-
-#Hero .name {
- color: var(--brown);
-}
-
-#Hero .links {
- display: flex;
- align-items: center;
-}
-
-#Hero .docs-link {
- margin-right: 10px;
-}
-
-#Hero .button-docs {
- width: 20px;
- margin-left: 10px;
-}
-
-#Hero .repo-link {
- margin-inline: 10px;
-}
-
-#Hero .button-github {
- width: 20px;
- margin-left: 10px;
-}
-
-@media only screen and (max-width: 600px) {
- #Hero .links {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- align-items: left;
- }
-}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
deleted file mode 100644
index 51b3675..0000000
--- a/src/components/Hero.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import github from "../images/github.svg";
-import docs from "../images/docs.svg";
-import "./Hero.css";
-import config from "../config.json";
-
-const Hero = () => (
-
- 
-
-
- Come chat with us on Discord!
-
-
-
-);
-
-export default Hero;
diff --git a/src/components/How.css b/src/components/How.css
deleted file mode 100644
index 7bc65c4..0000000
--- a/src/components/How.css
+++ /dev/null
@@ -1,51 +0,0 @@
-#How {
- display: flex;
- flex-direction: row;
- align-items: center;
- padding-top: 50px;
- padding-bottom: 50px;
-}
-
-#How .body {
- display: flex;
- flex-direction: row;
- gap: 2.5rem;
- align-items: center;
-}
-
-#How .diagram {
- padding: 30px;
-}
-
-#How .diagram-container {
- display: flex;
- border: 5px solid var(--brown);
- border-radius: 30px;
- justify-content: center;
-}
-
-#How .text-container {
- text-align: left;
-}
-
-@media only screen and (max-width: 1440px) {
- #How {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- padding-top: 50px;
- padding-bottom: 50px;
- }
-
- #How .body {
- flex-direction: column;
- position: static;
- max-width: 67%;
- }
-
- #How .diagram {
- max-width: 80%;
- padding: 30px;
- }
-}
diff --git a/src/components/How.tsx b/src/components/How.tsx
deleted file mode 100644
index f8257b8..0000000
--- a/src/components/How.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import "./How.css";
-import diagram from "../images/overview-pretty.png";
-
-export default function How() {
- return (
- TLSNotary
-- Proof of data authenticity -
- -- Export data from any web application and prove facts about it without compromising on privacy. -
- - -
-
- );
-}
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
deleted file mode 100644
index 52b0acb..0000000
--- a/src/components/Navbar.css
+++ /dev/null
@@ -1,110 +0,0 @@
-#navbar {
- border-bottom: var(--border);
- display: grid;
- grid-template-columns: 1fr auto 1fr;
- grid-template-areas: "tlsn-link anchor-links social-links";
- font-weight: 600;
- font-size: 1.125rem;
- padding-block: 12px;
-}
-
-#navbar > * {
- align-self: center;
- justify-self: center;
-}
-
-#navbar > img {
- width: 40px;
- height: 40px;
-}
-
-.nav-links {
- display: flex;
- flex-direction: row;
- justify-content: space-evenly;
- align-items: center;
- gap: 3rem;
-}
-
-.nav-links a {
- text-decoration: none;
- color: var(--text-color);
- font-size: 1.125rem;
-}
-
-#anchor-links {
- grid-area: anchor-links;
-}
-
-#tlsn-link {
- grid-area: tlsn-link;
-}
-
-#social-links {
- grid-area: social-links;
-}
-
-#menu-link {
- display: none;
- grid-area: menu-link;
-}
-
-#nav-menu-mobile {
- display: none;
-}
-
-@media screen and (max-width: 800px) {
- #navbar {
- grid-template-areas: "tlsn-link social-links menu-link";
- padding-inline: 1em;
- border-bottom: none;
- padding-block: 16px;
- }
-
- .nav-links {
- gap: 1rem;
- }
-
- #anchor-links {
- display: none;
- }
-
- #menu-link {
- display: block;
- justify-self: end;
- }
-
- #social-links {
- justify-self: start;
- }
-
- #social-links > #job-openings {
- display: none;
- }
-
- #nav-menu-mobile.menu-open {
- display: grid;
- min-height: 33vh;
- }
-
- #nav-menu-mobile.menu-closed {
- display: none;
- }
-
- #nav-menu-mobile {
- grid-template-columns: 1fr;
- padding-block: 1.5em;
- border-bottom: var(--border);
- margin-bottom: 1em;
- }
-
- #nav-menu-mobile > a {
- font-weight: 600;
- text-decoration: none;
- color: var(--text-color);
- padding: 0.75em;
- align-self: center;
- justify-self: start;
- padding-left: 1em;
- }
-}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
deleted file mode 100644
index da9d78e..0000000
--- a/src/components/Navbar.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useState } from 'react';
-import logo from '../images/tlsn-logo.svg';
-import discord from '../images/discord_round.svg';
-import github from "../images/github.svg";
-import './Navbar.css'
-import config from "../config.json";
-
-function Navbar() {
- const [isOpen, setIsOpen] = useState(false);
-
- const toggleMenu = () => {
- setIsOpen(!isOpen)
- };
-
- return (
-
- )
-}
-
-export default Navbar;
diff --git a/src/components/Roadmap.css b/src/components/Roadmap.css
deleted file mode 100644
index 76d6b79..0000000
--- a/src/components/Roadmap.css
+++ /dev/null
@@ -1,73 +0,0 @@
-#Roadmap {
- background-color: var(--light-brown);
- padding: 100px;
-}
-
-#Roadmap .cards {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 2.5rem;
-}
-
-#Roadmap .border {
- box-shadow: 2px 3px 5px var(--blue);
-}
-
-#Roadmap .card {
- display: flex;
- justify-content: space-between;
- flex-direction: column;
- align-items: flex-start;
- border-radius: var(--border-radius);
- background: var(--light-blue);
- padding: 1.2rem;
-}
-
-#Roadmap .card-text {
- color: var(--white);
- line-height: 1.5rem;
- font-weight: 600;
- font-size: 1rem;
-}
-
-#Roadmap .card-title {
- display: flex;
-}
-
-#Roadmap .card-title > div,
-#Roadmap .card-title > a > div {
- font-weight: 700;
- font-size: 1.5rem;
- padding-block: 1.5rem;
-}
-
-#Roadmap .card-title > a > * {
- display: inline-flex;
-}
-
-#Roadmap .card-body {
- align-self: flex-start;
- flex: 1;
-}
-
-#Roadmap .card-footer {
- display: flex;
- justify-content: space-between;
- border-top: 2px solid #9ea3a7;
- padding-top: 1rem;
- margin-top: 2.5rem;
- /* flex-wrap: wrap;
- background-color: transparent;
- padding: 1em 0em;
- border-top: 2px solid var(--gray);
- align-self: stretch; */
-}
-
-@media only screen and (max-width: 600px) {
- #Roadmap .cards {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- align-items: center;
- }
-}
diff --git a/src/components/Roadmap.tsx b/src/components/Roadmap.tsx
deleted file mode 100644
index 746aefe..0000000
--- a/src/components/Roadmap.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import "./Roadmap.css";
-
-export default function Roadmap() {
- return (
-
-
-
- 
-
-
-
- How it works
- -
- TLSNotary leverages the ubiquitous TLS (Transport Layer Security) protocol to securely and privately prove a transcript of communications took place with a webserver.
-
-
- At the core of the TLSNotary protocol is dividing TLS session keys between two parties (Client and Notary) and then using secure two-party computation (2PC) to encrypt and authenticate requests from the Client to a TLS-enabled webserver.
-
-
- During the protocol neither the Client nor Notary are in posession of the full TLS session keys, they only know their shares of those keys.
- This preserves the security assumptions of TLS while at the same time allows the Client to prove to the Notary the authenticity of the transcript.
-
-
- This is all achieved with full privacy. The Notary is never aware of which webserver is being queried, nor do they ever see the unencrypted communications.
-
-
- Furthermore, our protocol is transparent to the webserver.
- In fact, the webserver is never aware that this process took place.
-
-
- );
-}
diff --git a/src/components/Usecases.css b/src/components/Usecases.css
deleted file mode 100644
index efbe6e3..0000000
--- a/src/components/Usecases.css
+++ /dev/null
@@ -1,60 +0,0 @@
-#Usecases {
- padding-inline: 5rem;
- padding: 4rem 3rem;
- background-color: var(--background-blue);
- justify-items: center;
-}
-
-#Usecases * p {
- color: var(--white);
- font-size: 1.125rem;
- font-weight: 400;
- line-height: 120%;
-}
-
-#Usecases .header {
- color: var(--white);
-}
-
-#Usecases .body {
- max-width: 67%;
- margin: auto;
-}
-
-#Usecases .cards {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- grid-template-rows: repeat(2, 1fr);
- gap: 2.5rem;
-}
-
-#Usecases .card {
- border-radius: var(--border-radius);
- background: var(--light-blue);
- padding: 1.2rem;
-}
-
-#Usecases .card-text {
- color: var(--white);
- line-height: 1.5rem;
- font-weight: 600;
- font-size: 1rem;
-}
-.card-image {
- display:block;
- margin:auto;
- width:100%;
- height:auto;
-}
-
-#Usecases .card-body {
- align-self: flex-start;
-}
-
-@media only screen and (max-width: 600px) {
- #Usecases .cards {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- }
-}
diff --git a/src/components/Usecases.tsx b/src/components/Usecases.tsx
deleted file mode 100644
index ce2beb2..0000000
--- a/src/components/Usecases.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import "./Usecases.css";
-import prove from "../images/img-proveyouself.svg";
-import msg from "../images/img-bear.svg";
-import money from "../images/img-elephant-love.svg";
-import webpage from "../images/img-elephant-reading.svg";
-import block from "../images/img-block-to-app.svg";
-import account from "../images/img-bear-access.svg";
-
-
-
-export default function Usecases() {
- return (
- - 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/config.json b/src/config.json
deleted file mode 100644
index 8bf7a67..0000000
--- a/src/config.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "links": {
- "discord": "https://discord.gg/9XwESXtcN7",
- "repo": "https://github.com/tlsnotary/tlsn",
- "docs": "https://docs.tlsnotary.org",
- "pse": "https://appliedzkp.org/",
- "legacy": "https://old.tlsnotary.org/"
- }
-}
diff --git a/src/images/discord.svg b/src/images/discord.svg
deleted file mode 100644
index 3914210..0000000
--- a/src/images/discord.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/images/discord_round.svg b/src/images/discord_round.svg
deleted file mode 100644
index 74c0b8b..0000000
--- a/src/images/discord_round.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/src/images/docs.svg b/src/images/docs.svg
deleted file mode 100644
index 3df9843..0000000
--- a/src/images/docs.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/images/eth-logo-blue.svg b/src/images/eth-logo-blue.svg
deleted file mode 100644
index 393fec4..0000000
--- a/src/images/eth-logo-blue.svg
+++ /dev/null
@@ -1,69 +0,0 @@
-
-
-
-
diff --git a/src/images/eth.svg b/src/images/eth.svg
deleted file mode 100644
index 551c5cb..0000000
--- a/src/images/eth.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/src/images/github.svg b/src/images/github.svg
deleted file mode 100644
index f8d306c..0000000
--- a/src/images/github.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/images/img-bear-access.svg b/src/images/img-bear-access.svg
deleted file mode 100644
index 44c761a..0000000
--- a/src/images/img-bear-access.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
diff --git a/src/images/img-bear.svg b/src/images/img-bear.svg
deleted file mode 100644
index edde5af..0000000
--- a/src/images/img-bear.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/src/images/img-block-to-app.svg b/src/images/img-block-to-app.svg
deleted file mode 100644
index e78d3e2..0000000
--- a/src/images/img-block-to-app.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-
diff --git a/src/images/img-elephant-love.svg b/src/images/img-elephant-love.svg
deleted file mode 100644
index 3e62969..0000000
--- a/src/images/img-elephant-love.svg
+++ /dev/null
@@ -1,36 +0,0 @@
-
diff --git a/src/images/img-elephant-reading.svg b/src/images/img-elephant-reading.svg
deleted file mode 100644
index 128bd62..0000000
--- a/src/images/img-elephant-reading.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-
diff --git a/src/images/img-proveyouself.svg b/src/images/img-proveyouself.svg
deleted file mode 100644
index a770912..0000000
--- a/src/images/img-proveyouself.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/src/images/medium-circle.svg b/src/images/medium-circle.svg
deleted file mode 100644
index 0b7c283..0000000
--- a/src/images/medium-circle.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
diff --git a/src/images/overview-pretty.png b/src/images/overview-pretty.png
deleted file mode 100644
index 0f4b6ad..0000000
Binary files a/src/images/overview-pretty.png and /dev/null differ
diff --git a/src/images/tlsn-logo.svg b/src/images/tlsn-logo.svg
deleted file mode 100644
index 1b6d6d0..0000000
--- a/src/images/tlsn-logo.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
diff --git a/src/images/tlsn.png b/src/images/tlsn.png
deleted file mode 100644
index 959b183..0000000
Binary files a/src/images/tlsn.png and /dev/null differ
diff --git a/src/images/twitter.svg b/src/images/twitter.svg
deleted file mode 100644
index a78250f..0000000
--- a/src/images/twitter.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/images/twitter_round.svg b/src/images/twitter_round.svg
deleted file mode 100644
index e4f7c84..0000000
--- a/src/images/twitter_round.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/images/website.svg b/src/images/website.svg
deleted file mode 100644
index 3df9843..0000000
--- a/src/images/website.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index dfe23e6..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,108 +0,0 @@
-:root {
- --light-purple: rgb(195, 181, 250);
- --purple: #cfc4fb;
- --green: #a6e275;
- --aqua: #53d3e0;
- --light-aqua: #cbf2f6;
- --pink: #ff9c92;
- --light-pink: #ffe1de;
- --gold: #ffe94d;
- --gray: #282a2d;
- --gray-transparent: rgba(40, 42, 45, 0.5);
- --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;
- --youtube: #ff0000;
- --github-dark: #171515;
- --github: #e8eaea;
- --discord: #7289da;
- --website: var(--green);
-
- --background: #fafbfc;
- --background-blue: #243f5f;
- --text-color: #151616;
- --border-color: var(--blue);
- --border-radius: 8px;
- --border: 1px solid var(--border-color);
- --link-bold: #854ad1;
- --padding: 10px;
-}
-
-body {
- color: var(--blue);
- margin: 0 auto;
- max-width: 1440px;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizeLegibility;
- background-color: var(--background);
- background-attachment: fixed;
- font-family: "Inter", sans-serif;
-}
-
-h1,
-h2,
-h3 {
- font-weight: 700;
- color: var(--blue);
- padding: 0px;
- margin: 0px;
-}
-
-h1 {
- font-size: 3rem;
-}
-
-h2 {
- font-size: 2.5rem;
-}
-
-p {
- color: var(--blue);
- font-weight: 400;
- font-size: 1.125rem;
- line-height: 120%;
- padding: 0px;
- margin: 0px;
-}
-
-a {
- text-decoration: none;
- color: var(--light-blue);
-}
-
-html {
- scroll-behavior: smooth;
-}
-
-.pill-button {
- display: flex;
- font-family: "Inter", sans-serif;
- background-color: var(--white);
- border: 3px solid var(--blue);
- color: var(--blue);
- text-align: center;
- font-size: 20px;
- font-weight: 600;
- border-radius: 32px;
- padding: 18px 24px;
- align-items: center;
-}
-
-.pill-button:hover {
- background-color: var(--light-brown);
-}
-
-/*
- Responsiveness
-*/
-
-@media screen and (max-width: 800px) {
-}
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index d96208f..0000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import 'react';
-import ReactDOM from 'react-dom/client';
-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(
-
-
- 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.
-
-
-
- 
-
- You received a private message from someone.
-
-
-
- 
-
- You received a money transfer.
-
-
-
- 
-
- A snapshot of a webpage.
-
-
-
- 
-
- You were blocked from using an app.
-
-
-
- 
-
- You have access to an account.
- Is it secure?
- -
- One may assume that TLSNotary requires a “man-in-the-middle” setup where the Notary snoops on the connection with the webserver.
- Fortunately, this is not true! Data is kept private even from the Notary.
-
-
- See below for more details on how it works.
-
What's the catch?
- -
- TLSNotary does require a trust assumption.
- A Verifier of a proof must trust that the Notary did not collude with the Prover to forge it.
- This trust can be minimized by requiring multiple proofs each signed by different Notaries.
-
-
- In some applications the Verifier can act as the Notary themselves, which allows for fully trustless proofs!
-