diff --git a/.github/workflows/build_deploy_master.yml b/.github/workflows/build_deploy_master.yml index 21290ac..59cc116 100644 --- a/.github/workflows/build_deploy_master.yml +++ b/.github/workflows/build_deploy_master.yml @@ -29,7 +29,7 @@ jobs: - name: Upload artifact 📡 uses: actions/upload-pages-artifact@v3 with: - path: out + path: ./landing-page/out - name: Publish to GitHub Pages 🚀 uses: actions/deploy-pages@v4 diff --git a/app/about/page.tsx b/app/about/page.tsx index b2d3b4c..3ae01fc 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,50 +1,55 @@ import { AppContainer } from "../../components/AppContainer"; import { Section } from "../../components/Section"; import { Button } from "../../components/ui/Button"; -import Link from "next/link"; import React from "react"; import { LINKS } from "../settings"; -import { Card } from "../../components/ui/Card"; -import { COMMON_CONTENT } from "../../content/common"; import { Banner } from "../../components/ui/Banner"; import { LABELS } from "../../content"; +import { AppLink } from "@/components/AppLink"; export default function AboutPage() { return (
-
- -
-
- {LABELS.ABOUT.HOW_IT_WORKS.STEPS.map((step, index) => ( - -
-
{step?.icon}
-
- {step.TITLE} - {step.DESCRIPTION} -
-
- - ))} +
+ {LABELS.ABOUT.WHO_WE_ARE.TITLE} + + } + description={LABELS.ABOUT.WHO_WE_ARE.DESCRIPTION} + > +
+ + +
-
- -
- - - - - - -
+
+ {LABELS.ABOUT.GET_INVOLVED.TITLE} + + } + description={LABELS.ABOUT.GET_INVOLVED.DESCRIPTION} + > +
+ + + +
+
- + + + + } + />
); } diff --git a/app/faq/page.tsx b/app/faq/page.tsx index 87c1768..ef81dcf 100644 --- a/app/faq/page.tsx +++ b/app/faq/page.tsx @@ -9,8 +9,14 @@ import React from "react"; export default function FAQPage() { return (
- -
+ +
+ {LABELS.COMMON.FAQ} + + } + >
{FAQS.map(({ answer, question }, index) => { return ( diff --git a/app/layout.tsx b/app/layout.tsx index 7f819f4..de4425d 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,11 +1,11 @@ import type { Metadata } from "next"; -import { Inter } from "next/font/google"; +import { Inter, DM_Sans } from "next/font/google"; import "./globals.css"; import { AppFooter } from "../components/AppFooter"; import { AppHeader } from "../components/AppHeader"; -import { cn } from "../shared/utils"; -const inter = Inter({ subsets: ["latin"] }); +const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" }); +const sans = DM_Sans({ subsets: ["latin"], variable: "--font-sans", display: "swap" }); export const metadata: Metadata = { title: "TLSNotary", @@ -28,7 +28,7 @@ export default function RootLayout({ }>) { return ( - + {children} diff --git a/app/page.tsx b/app/page.tsx index 52dd2da..ef5ba0e 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,58 +1,130 @@ +import { AppLink } from "@/components/AppLink"; import { AppContainer } from "../components/AppContainer"; -import { Banner } from "../components/ui/Banner"; +import { Banner, BannerTitle, BannerWrapper } from "../components/ui/Banner"; import { Button } from "../components/ui/Button"; -import { Card } from "../components/ui/Card"; import { Label } from "../components/ui/Label"; import { LABELS } from "../content"; -import { COMMON_CONTENT } from "../content/common"; -import { WHAT_WE_DO } from "../content/whatWeDo"; +import { LINKS } from "./settings"; +import { Icons } from "@/components/Icons"; +import { Section } from "@/components/Section"; +import Image from "next/image"; +import { classed } from "@tw-classed/react"; + +interface ComparisonTableProps { + title: string; + tls: boolean; + tlsNotary: boolean; +} + +const TableWrapper = classed.div("grid grid-cols-4 "); +const TableTitle = classed.h4("font-semibold text-[15px] text-inter text-brown-50 uppercase"); +const TableContent = classed.div("p-4"); + +const ComparisonTable = ({ title, tls, tlsNotary }: ComparisonTableProps) => { + return ( + + + {title} + + {tls ? : } + {tlsNotary ? : } + + ); +}; export default function Home() { return (
- -
- {LABELS.HOMEPAGE.SUBTITLE} - {LABELS.HOMEPAGE.TITLE} -
-
- - -
- - - - - -
-
- {WHAT_WE_DO.map(({ title, icon }, index) => { - return ( - -
- {icon} - {title} -
- - ); - })} + +
+
+
+ {LABELS.HOMEPAGE.SUBTITLE} + {LABELS.HOMEPAGE.TITLE} +
+ + {LABELS.HOMEPAGE.DESCRIPTION} + +
+ + + + +
+ + + + +
+ {LABELS.HOMEPAGE.WHY_USE_TLSNOTARY.TITLE} + + } + description={LABELS.HOMEPAGE.WHY_USE_TLSNOTARY.DESCRIPTION} + > +
+ infographic +
+
+ + + +
+ +
+ + TLS + + + TLSNotary + + +
+ + {LABELS.COMMON.SERVER_AUTHENTICATION} + + + + + + {LABELS.COMMON.SERVER_AUTHENTICATION} + + +
- - {COMMON_CONTENT.AND_MORE} -
+ + + + {LABELS.COMMON.LEARN_THE_BASICS} + + +
+ -
- + title={LABELS.HOMEPAGE.BUILD_WITH_US.TITLE} + description={LABELS.HOMEPAGE.BUILD_WITH_US.DESCRIPTION} + actions={ + + + + } + />
); } diff --git a/app/settings.tsx b/app/settings.tsx index 583f7d2..b4627a8 100644 --- a/app/settings.tsx +++ b/app/settings.tsx @@ -12,7 +12,7 @@ type NavItem = { export const LINKS = { DISCORD: "https://discord.gg/9XwESXtcN7", GITHUB: "https://github.com/tlsnotary/tlsn", - TWITTER: "https://github.com/tlsnotary/tlsn", + TWITTER: "https://twitter.com/tlsnotary", DOCUMENTATION: "https://docs.tlsnotary.org/", BLOG: "#", }; @@ -23,18 +23,22 @@ export const NAVIGATION: NavItem[] = [ label: "About", href: "/about", }, + { + label: "Use Cases", + href: "/use-cases", + }, { label: "FAQ", href: "/faq", }, { - label: "API", - href: "https://tlsnotary.github.io/tlsn/", + label: "Documentation", + href: LINKS.DOCUMENTATION, external: true, }, { - label: "Documentation", - href: LINKS.DOCUMENTATION, + label: "API", + href: "https://tlsnotary.github.io/tlsn/", external: true, }, ]; @@ -75,4 +79,10 @@ export const SOCIALS_HEADER: NavItem[] = [ external: true, icon: , }, + { + label: "Twitter", + href: LINKS.TWITTER, + external: true, + icon: , + }, ]; diff --git a/app/use-cases/page.tsx b/app/use-cases/page.tsx new file mode 100644 index 0000000..627d9e6 --- /dev/null +++ b/app/use-cases/page.tsx @@ -0,0 +1,90 @@ +import { AppLink } from "@/components/AppLink"; +import { Banner } from "@/components/ui/Banner"; +import { Button } from "@/components/ui/Button"; +import { LABELS } from "@/content"; +import React from "react"; +import { LINKS } from "../settings"; +import { AppContainer } from "@/components/AppContainer"; +import { Section } from "@/components/Section"; +import { ProjectList, WebsiteType } from "@/content/projects"; +import { Card } from "@/components/ui/Card"; +import { Icons } from "@/components/Icons"; + +const IconMapping: Record = { + twitter: , + github: , + website: , +}; + +export default function UseCases() { + 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/AppFooter.tsx b/components/AppFooter.tsx index 7bd423b..b0ef8d4 100644 --- a/components/AppFooter.tsx +++ b/components/AppFooter.tsx @@ -17,18 +17,43 @@ export const AppFooter = () => { return (
-
+
- {LABELS.COMMON.FOOTER.TITLE} + {LABELS.COMMON.FOOTER.TITLE}
{NAVIGATION.map(({ label, href, external }, index) => { + if (external) return null; return ( - - {label} + + + {label} + + + ); + })} +
+
+ {NAVIGATION.map(({ label, href, external }, index) => { + if (!external) return null; + return ( + + + {label} + ); })} @@ -36,8 +61,13 @@ export const AppFooter = () => {
{SOCIALS_FOOTER.map(({ label, href, external, icon }, index) => { return ( - - + + {icon} {label} diff --git a/components/AppHeader.tsx b/components/AppHeader.tsx index ee9fa3a..718c7c2 100644 --- a/components/AppHeader.tsx +++ b/components/AppHeader.tsx @@ -10,14 +10,17 @@ import { useState } from "react"; import { cn } from "../shared/utils"; import { LABELS } from "../content"; -const NavLabel = classed.span("text-lg font-semibold hover:text-gold duration-300", { - variants: { - active: { - false: "text-primary", - true: "text-gold", +const NavLabel = classed.span( + "relative overflow-hidden 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); @@ -59,9 +62,12 @@ const AppMobileNav = () => { key={index} href={`${item.href}`} onClick={() => setIsOpen(false)} - className="py-3 capitalize text-primary text-lg dark:text-white duration-200 font-semibold hover:text-gray-900" + className="flex items-center py-3 gap-3" > - {item.label} + + {item.label} + + {item.external && } ); })} @@ -81,7 +87,7 @@ const AppMobileNav = () => { ); })}
- {LABELS.COMMON.FOOTER.TITLE} + {LABELS.COMMON.FOOTER.TITLE}
@@ -92,7 +98,7 @@ const AppDesktopNav = () => { const pathname = usePathname(); return ( - + @@ -105,8 +111,9 @@ const AppDesktopNav = () => { const isActive = isHome || (pathname !== null && pathParts[0] === pathname.split("/")[1]); return ( - + {label} + {external && } ); })} @@ -133,7 +140,7 @@ const AppDesktopNav = () => { export const AppHeader = () => { return ( -
+
diff --git a/components/AppLink.tsx b/components/AppLink.tsx new file mode 100644 index 0000000..64ab6a0 --- /dev/null +++ b/components/AppLink.tsx @@ -0,0 +1,35 @@ +import Link from "next/link"; +import React from "react"; +import { Icons } from "./Icons"; +import { cn } from "@/shared/utils"; + +interface LinkProps extends React.AnchorHTMLAttributes { + children: React.ReactNode; + href: string; + external?: boolean; + showExternalIcon?: boolean; +} + +/** + * This component easily manages internal and external links and adds the necessary attributes. + * + * @param {string} href - The URL of the link. + * @param {React.ReactNode} children - The content of the link. + * @param {boolean} external - If the link is external, in this case it will open in a new tab and also add rel="noreferrer noopener nofollow". + */ +export const AppLink = ({ href, children, external, className, showExternalIcon = false, ...props }: LinkProps) => { + return ( + + {children} + {showExternalIcon && external && ( + + )} + + ); +}; diff --git a/components/AppMarkdown.tsx b/components/AppMarkdown.tsx index 38d55ea..366a17a 100644 --- a/components/AppMarkdown.tsx +++ b/components/AppMarkdown.tsx @@ -4,7 +4,7 @@ import rehypeRaw from "rehype-raw"; import { Label } from "./ui/Label"; import { createElement } from "react"; -const createMarkdownElement = (tag: keyof JSX.IntrinsicElements, props: any) => +export const createMarkdownElement = (tag: keyof JSX.IntrinsicElements, props: any) => createElement(tag, { ...props, }); @@ -34,7 +34,12 @@ const REACT_MARKDOWN_CONFIG: Components = { }), strong: ({ node, ...props }) => createMarkdownElement("span", { - className: "font-bold", + className: "underline", + ...props, + }), + b: ({ node, ...props }) => + createMarkdownElement("b", { + className: "text-bold", ...props, }), span: ({ ...props }: any) => , diff --git a/components/Icons.tsx b/components/Icons.tsx index d5715e5..7480948 100644 --- a/components/Icons.tsx +++ b/components/Icons.tsx @@ -3,6 +3,23 @@ interface IconProps extends React.SVGProps { } export const Icons: Record = { + ExternalLink: (props: IconProps) => ( + + + + ), Logo: (props: IconProps) => ( = { d="M25.5484 1.20899C25.5484 0.67436 26.1196 0.332624 26.5923 0.58442L33.6891 4.36446C33.9202 4.48756 34.0645 4.72766 34.0645 4.98902V9.94049H37.6129C38.0048 9.94049 38.3226 10.2575 38.3226 10.6485V21.9766L36.1936 20.5606V12.0645H34.0645V81.4919C34.0645 81.6134 34.0332 81.7328 33.9735 81.8388L30.4251 88.1388C30.1539 88.6204 29.459 88.6204 29.1878 88.1388L25.6394 81.8388C25.5797 81.7328 25.5484 81.6134 25.5484 81.4919V1.20899Z" fill="currentColor" /> - - + + = { ), Close: (props: IconProps) => ( - + = { ), Burgher: (props: IconProps) => ( - - + + ), Discord: (props: IconProps) => ( @@ -108,14 +101,7 @@ export const Icons: Record = { ), DiscordCircle: (props: IconProps) => ( - + = { /> ), + TwitterCircle: (props: IconProps) => ( + + + + ), ArrowUp: (props: IconProps) => ( - + = { ), GithubCircle: (props: IconProps) => ( - + = { /> ), - GeometricPattern1: (props: IconProps) => ( - + DividerHomepage: (props: IconProps) => ( + - ), - GeometricPattern2: (props: IconProps) => ( - + Check: (props: IconProps) => ( + - - - ), - GeometricPattern3: (props: IconProps) => ( - + X: (props: IconProps) => ( + - - - ), - GeometricPattern4: (props: IconProps) => ( - - - - - ), - GeometricPattern5: (props: IconProps) => ( - - - - - - - ), - GeometricPattern6: (props: IconProps) => ( - - - ), diff --git a/components/Section.tsx b/components/Section.tsx index 6c25a0c..5585f35 100644 --- a/components/Section.tsx +++ b/components/Section.tsx @@ -1,9 +1,9 @@ -import { HTMLAttributes } from "react"; +import { HTMLAttributes, ReactNode } from "react"; import { Label } from "./ui/Label"; import { AppMarkdown } from "./AppMarkdown"; -interface SectionProps extends HTMLAttributes { - title: string; +interface SectionProps extends Omit, "title"> { + title: ReactNode; description?: string; } @@ -11,10 +11,10 @@ export const Section = ({ title, description, children }: SectionProps) => { return (
- {title} + {typeof title === "string" ? {title} : title} {description && {description}} + {children &&
{children}
}
- {children &&
{children}
}
); }; diff --git a/components/ui/Accordion.tsx b/components/ui/Accordion.tsx index 77d7523..adc9dc3 100644 --- a/components/ui/Accordion.tsx +++ b/components/ui/Accordion.tsx @@ -12,14 +12,17 @@ const Accordion = ({ label, children }: AccordionProps) => { const [isOpen, setIsOpen] = useState(false); return ( -
+
{ setIsOpen(!isOpen); }} > - {label} + {label} & { - title: string; - description?: ReactNode; - actions?: ReactNode; - children?: ReactNode; - inverse?: boolean; // used to determine the banner image and content -}; - -const BannerImage = ({ inverse }: Pick) => { - if (inverse) { - return ( - banner inverse - ); - } +type BannerProps = Classed.VariantProps & + Classed.VariantProps & { + title: string; + description?: string; + actions?: ReactNode; + children?: ReactNode; + descriptionClass?: string; + }; +export const Banner = ({ title, description, actions, descriptionClass, color }: BannerProps) => { return ( - <> - banner desktop - - ); -}; - -export const Banner = ({ title, description, inverse = false, children, actions, titleSize }: BannerProps) => { - return ( -
- - - -
-
- {title} - {description && ( - {description} - )} + + +
+
+
+ {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}
- {actions}
- {children && ( -
- {children} -
- )} -
+ ); }; diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx index 1a79b85..8137224 100644 --- a/components/ui/Button.tsx +++ b/components/ui/Button.tsx @@ -3,18 +3,15 @@ import type * as Classed from "@tw-classed/react"; import React, { forwardRef, HTMLAttributes } from "react"; const ButtonComponent = classed.button( - "relative overflow-hidden font-semibold cursor-pointer justify-center flex items-center gap-2 border rounded-[32px] inline-block disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 ease-in-out", + "relative overflow-hidden font-medium cursor-pointer justify-center flex items-center gap-2 border rounded-[32px] inline-block disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 ease-in-out", { variants: { variant: { - transparent: - "border-transparent bg-transparent text-primary hover:opacity-60", - primary: - "bg-white border-primary text-primary hover:bg-primary hover:text-white", + transparent: "border-transparent bg-transparent text-brown-50 hover:text-brown-70 !p-2", + primary: "bg-primary border-primary text-white hover:bg-brown-70 hover:border-brown-70 hover:text-white", }, size: { - medium: - "text-sm md:text-base lg:text-xl md:leading-6 py-2 md:py-3 lg:py-[18px] px-6", + medium: "text-sm md:text-base lg:text-xl md:leading-6 py-2 md:py-[14px] px-8", }, }, defaultVariants: { @@ -26,9 +23,7 @@ const ButtonComponent = classed.button( type ButtonVariants = Classed.VariantProps; -interface ButtonProps - extends ButtonVariants, - HTMLAttributes { +interface ButtonProps extends ButtonVariants, HTMLAttributes { children?: React.ReactNode; icon?: React.ReactNode; disabled?: boolean; diff --git a/components/ui/Card.tsx b/components/ui/Card.tsx index 850d528..2825030 100644 --- a/components/ui/Card.tsx +++ b/components/ui/Card.tsx @@ -1,23 +1,20 @@ import { classed } from "@tw-classed/react"; -const CardBase = classed.div( - "bg-gray border border-gray-100 rounded-[16px] overflow-hidden", - { - variants: { - spacing: { - small: "py-8 px-6", - medium: "py-8 px-10 md:px-16", - }, - shadow: { - true: "shadow-card", - }, +const CardBase = classed.div("bg-primary border border-gray-100 rounded-[16px] overflow-hidden", { + variants: { + spacing: { + small: "p-8", + medium: "py-8 px-10 md:px-16", }, - defaultVariants: { - shadow: true, - spacing: "small", + shadow: { + true: "shadow-card", }, - } -); + }, + defaultVariants: { + shadow: true, + spacing: "small", + }, +}); const CardImage = classed.div("min-h-[155px] bg-gray-300 bg-cover bg-center"); const CardContent = classed.div("p-4"); diff --git a/components/ui/Label.tsx b/components/ui/Label.tsx index b319ccc..23b8b1b 100644 --- a/components/ui/Label.tsx +++ b/components/ui/Label.tsx @@ -1,10 +1,12 @@ import { classed } from "@tw-classed/react"; -const Title = classed.h1("text-5xl font-black leading-1 text-primary md:text-6xl lg:text-8xl lg:leading-[108px]"); +const Title = classed.h1("text-5xl font-black leading-1 text-primary md:text-6xl lg:text-[96px] lg:leading-[101px]"); -const Subtitle = classed.h6("text-brown-50 font-bold text-lg leading-none md:text-2xl md:leading-6"); +const Subtitle = classed.h6("text-brown-50 font-black text-lg leading-none md:text-2xl lg:text-7xl md:leading-6"); -const SectionTitle = classed.h6("font-semibold text-primary text-2xl leading-[24px] md:text-[32px] leading-[32px]"); +const SectionTitle = classed.h6( + "font-semibold font-inter text-primary text-2xl leading-[24px] md:text-[56px] md:leading-[56px]" +); const Paragraph = classed.span("text-primary text-sm md:text-xl leading-6"); diff --git a/content/about.tsx b/content/about.tsx index 383f6f1..d861bdb 100644 --- a/content/about.tsx +++ b/content/about.tsx @@ -26,12 +26,12 @@ export const ABOUT_CONTENT = { { 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." + "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." + "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.", }, ], }, diff --git a/content/common.tsx b/content/common.tsx index 785447e..abbf103 100644 --- a/content/common.tsx +++ b/content/common.tsx @@ -2,6 +2,11 @@ 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: { @@ -10,6 +15,6 @@ export const COMMON_CONTENT = { "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 a public good & open source project supported by the Ethereum Foundation under the Privacy and Scaling Exploration Team.", + TITLE: "TLSNotary is project of Privacy and Scaling Explorations, an Ethereum Foundation supported team.", }, }; diff --git a/content/homepage.tsx b/content/homepage.tsx index 2f3e998..49adfbf 100644 --- a/content/homepage.tsx +++ b/content/homepage.tsx @@ -1,14 +1,17 @@ export const HOMEPAGE_CONTENT = { TITLE: "Privacy-preserving data portability for any data on the web", SUBTITLE: "TLSNotary", - INTRO: { - TITLE: - "An open-source protocol for private and verifiable data disclosure.", + DESCRIPTION: + " TLSNotary is an open-source protocol that can verify the authenticity of 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: - "TLSNotary can be used to verify the origin of any piece of data, ensuring it hasn't been fabricated or tampered with, while allowing users to redact sensitive information. As a result, the data becomes portable, reusable, and endlessly composable!", + "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!", }, - DOWNLOAD: { - TITLE: "Data portability with endless possibilities", - DESCRIPTION: "Watch the TLSNotary presentation at ETHDam 2024", + 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 index 0895456..8368c3e 100644 --- a/content/index.ts +++ b/content/index.ts @@ -1,11 +1,11 @@ import { ABOUT_CONTENT } from "./about"; import { COMMON_CONTENT } from "./common"; import { HOMEPAGE_CONTENT } from "./homepage"; -import { WHAT_WE_DO } from "./whatWeDo"; +import { USE_CASES_CONTENT } from "./useCases"; export const LABELS = { ABOUT: ABOUT_CONTENT, HOMEPAGE: HOMEPAGE_CONTENT, COMMON: COMMON_CONTENT, - WHAT_WE_DO: WHAT_WE_DO, + USE_CASES: USE_CASES_CONTENT, }; diff --git a/content/projects.tsx b/content/projects.tsx new file mode 100644 index 0000000..3d4ee76 --- /dev/null +++ b/content/projects.tsx @@ -0,0 +1,48 @@ +export type WebsiteType = "website" | "twitter" | "github"; + +type Project = { + title: string; + tldr: string; + links?: Partial>; +}; + +export const ProjectList: Project[] = [ + { + title: "ZeroTrustBounty", + tldr: "A trustless bug bounty platform with redacted bug reports & guaranteed payments to whitehats.", + links: { + github: "https://github.com/antojoseph/ZeroTrustBounty", + }, + }, + { + title: "RealReturn", + tldr: "An open leaderboard of verified real investment returns, enabled by TLSNotary and Jomo.", + links: { + github: "https://github.com/chcharcharlie/realreturn", + }, + }, + { + title: "zkP2M", + tldr: "Trustless and instant INR to USD on-ramp powered by ZK", + links: { + github: "https://github.com/zkP2M", + }, + }, + { + title: "ComplianceNoted", + tldr: "Compliance for on-chain private equity: manage a portfolio or a fund with an array of accounts and breathe through client reporting and compliance requirements! Privacy, efficiency and portability all in place.", + links: {}, + }, + { + title: "Zero Guard", + tldr: "A decentralized zero knowledge powered AI Red Team Network that improves diversity, safety to AI through community", + links: { + github: "https://github.com/dingchaoz/ZEROGUARD", + }, + }, + { + title: "Zkyc", + tldr: "Trustless and instant INR to USD on-ramp powered by ZK", + links: {}, + }, +]; diff --git a/content/useCases.tsx b/content/useCases.tsx new file mode 100644 index 0000000..c35f5e3 --- /dev/null +++ b/content/useCases.tsx @@ -0,0 +1,19 @@ +export const USE_CASES_CONTENT = { + USE_CASES: { + TITLE: "Use Cases", + DESCRIPTION: `You can use TLSNotary for:

- Identity Verification: verify your name, age, or citizenship from online government services +

- Reputation Verification: verify user experience or trustworthiness on platforms like AirBnb, Uber, Strava +

- Real World Asset Ownership Verification: confirm ownership of tangible assets (e.g. vehicles, real estate) +

- Health Information Verification: verify personal health records from platforms like MyHealth, HealthVault etc +

- Account Ownership Verification: confirm control over online accounts (e.g. Google, Microsoft, Apple, Twitter) +

- Financial Verification: verify your financial standing or prove financial dealings from your bank or other service +

- User Restriction Verification: confirm if a user is barred from accessing specific applications or services +

...and more! + `, + }, + BUILD_WITH_TLSNOTARY: "Projects using TLSNotary", + BANNER: { + TITLE: "Share what you're building with TLSNotary.", + DESCRIPTION: "Are you using TLSNotary in your project? Reach out on Discord and tell us about your work!", + }, +}; diff --git a/content/whatWeDo.tsx b/content/whatWeDo.tsx deleted file mode 100644 index 5e7fc42..0000000 --- a/content/whatWeDo.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Icons } from "../components/Icons"; -import { ReactNode } from "react"; - -type WhatWeDo = { - title: string; - icon?: ReactNode; -}; - -export const WHAT_WE_DO: WhatWeDo[] = [ - { - title: "Prove that you received a private message", - icon: , - }, - { - title: "Prove the contents of a website from a moment in time", - icon: , - }, - { - title: "Prove personal information (e.g. address, birth date, health data)", - icon: , - }, - { - title: "Prove you have a professional certification", - icon: , - }, - { - title: "Prove a financial transaction without revealing credentials", - icon: , - }, -]; diff --git a/public/images/infographic.svg b/public/images/infographic.svg new file mode 100644 index 0000000..325fbbe --- /dev/null +++ b/public/images/infographic.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/tailwind.config.ts b/tailwind.config.ts index cceaeac..bd644c7 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -10,15 +10,16 @@ const config: Config = { extend: { backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", - "gradient-conic": - "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", + "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, fontFamily: { - sans: ["DM Sans", "sans-serif"], + sans: ["var(--font-sans)"], + inter: ["var(--font-inter)"], }, colors: { primary: "#243F5F", // nano-blue gold: "#E8C075", // nano-yellow + // brown: "#A27F3C", // nano-brown white: { DEFAULT: "#FFFFFF", 100: "#F6F7F7", @@ -29,6 +30,7 @@ const config: Config = { }, brown: { 50: "#A27F3C", + 70: "#614C24", }, }, },