Improvements to landing page

2026-01-09 06:48:08 -05:00 · 2025-05-15 14:02:04 +02:00
parent e34f0ea17f
commit 013dc11602
5 changed files with 66 additions and 47 deletions
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -103,22 +103,23 @@ const config: Config = {

        { to: '/docs/faq', label: 'FAQ', position: 'left' },

-        { href: 'https://tlsnotary.github.io/tlsn/tlsn_prover/', label: 'API', position: 'left' },
        { to: '/blog', label: 'Blog', position: 'left' },
+
+
+        { href: 'https://tlsnotary.github.io/tlsn/tlsn_prover/', label: 'API', position: 'right' },
        {
-          href: 'https://discord.com/invite/9XwESXtcN7',
-          label: 'Discord',
+          href: 'https://github.com/tlsnotary',
+          label: 'GitHub',
          position: 'right',
        },
-
        {
          href: 'https://x.com/tlsnotary',
          label: 'X',
          position: 'right',
        },
        {
-          href: 'https://github.com/tlsnotary',
-          label: 'GitHub',
+          href: 'https://discord.com/invite/9XwESXtcN7',
+          label: 'Discord',
          position: 'right',
        },
      ],
@@ -130,9 +131,17 @@ const config: Config = {
          title: 'Docs',
          items: [
            {
-              label: 'Tutorial',
+              label: 'Documentation',
              to: '/docs/intro',
            },
+            {
+              label: 'Quick Start',
+              to: '/docs/quick_start',
+            },
+            {
+              label: 'FAQ',
+              to: '/docs/faq',
+            },
          ],
        },
        {
@@ -146,6 +155,10 @@ const config: Config = {
              label: 'X',
              href: 'https://x.com/tlsnotary',
            },
+            {
+              label: 'PSE',
+              href: 'https://pse.dev',
+            },
          ],
        },
        {
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -7,6 +7,12 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Heading from '@theme/Heading';

 import styles from './index.module.css';
+import actioncard_styles from "../components/ActionCard/styles.module.css";
+import IconChrome from '@site/src/icons/IconChrome';
+import TLSNotaryTable from './landing_page/_table.md';
+import Why from './landing_page/_why.md';
+import Build from './landing_page/_build.md';
+

 function HomepageHeader() {
  const { siteConfig } = useDocusaurusContext();
@@ -33,66 +39,47 @@ export default function Home(): ReactNode {
      description="Description will go into a meta tag in <head />">
      <HomepageHeader />

-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-        <svg xmlns="http://www.w3.org/2000/svg" width="766" height="112" viewBox="0 0 766 112" fill="none" >
-          <path
-            d="M7.08083 111.735C2.43838 111.735 -0.529098 106.775 1.65739 102.67L34.4815 41.045C35.5504 39.0382 37.6354 37.7849 39.9049 37.7849H82.9012V6.97233C82.9012 3.56887 85.6537 0.809822 89.0492 0.809822H187.417L175.121 19.2973H101.345V37.7849H704.221C705.276 37.7849 706.313 38.057 707.233 38.5749L761.94 69.3875C766.121 71.7428 766.121 77.7771 761.94 80.1324L707.233 110.945C706.313 111.463 705.276 111.735 704.221 111.735H7.08083Z"
-            fill="#243F5F"
-          />
-        </svg>
-      </div>
      <main>
        <section className={styles.introduction}>
          <div className="container">
            <h2 className={styles.borderBlue}>Why use TLSNotary?</h2>
-            <p>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?
-            </p>
-            <p>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.
-            </p>
-            <p>With TLSNotary, users are in full control over the data they choose to share.
-            </p>
+            <Why />
          </div>
        </section>

        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-          <div className={styles.buttons}>
-            <Link
-              className="button button--secondary button--lg"
-              to="/docs/intro">
-              Check out our documentation
-            </Link>
-          </div>
-        </div>
-        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-          <div className={styles.buttons}>
-            <Link
-              className="button button--secondary button--lg"
-              to="https://demo.tlsnotary.org">
-              Try TLSNotary (Chrome Browser)
-            </Link>
+          <div className={actioncard_styles.actionCardButtonContainer}>
+            <a className={actioncard_styles.actionCardButton} href="https://demo.tlsnotary.org" rel="noopener noreferrer" target="_blank">
+              Try TLSNotary (Desktop Only) <IconChrome />
+            </a>
          </div>
+
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <img src="img/infographic.svg" />
          {/* <Image className="hidden md:block" src="/images/infographic.svg" alt="infographic" fill />
          <Image className="block md:hidden" src="/images/infographic-mobile.svg" alt="infographic mobile" fill /> */}
+
+
        </div>

+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <TLSNotaryTable />
+        </div>
+
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="766" height="112" viewBox="0 0 766 112" fill="none" >
+            <path
+              d="M7.08083 111.735C2.43838 111.735 -0.529098 106.775 1.65739 102.67L34.4815 41.045C35.5504 39.0382 37.6354 37.7849 39.9049 37.7849H82.9012V6.97233C82.9012 3.56887 85.6537 0.809822 89.0492 0.809822H187.417L175.121 19.2973H101.345V37.7849H704.221C705.276 37.7849 706.313 38.057 707.233 38.5749L761.94 69.3875C766.121 71.7428 766.121 77.7771 761.94 80.1324L707.233 110.945C706.313 111.463 705.276 111.735 704.221 111.735H7.08083Z"
+              fill="#243F5F"
+            />
+          </svg>
+        </div>

        <section className={styles.introduction}>
          <div className="container">
-            <h2 className={styles.borderBlue}>Build with us</h2>
-            <p>
-              Interested in using TLSNotary, contributing, or just learning more about how it works? Join the conversation on our Discord server, check out our Github, or use our Quick Start guide to try it out!
-            </p>
-            <div className={styles.buttons}>
-              <Link
-                className="button button--secondary button--lg"
-                to="https://discord.gg/9XwESXtcN7">
-                Join our Discord
-              </Link>
-            </div>
+            <Build />
          </div>
        </section>

--- a/src/pages/landing_page/_build.md
+++ b/src/pages/landing_page/_build.md
@@ -0,0 +1,5 @@
+## Build with us
+
+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), or use our [Quick Start guide](/docs/quick_start) to try it out!
--- a/src/pages/landing_page/_table.md
+++ b/src/pages/landing_page/_table.md
@@ -0,0 +1,9 @@
+
+|                           | TLS | TLSNotary |
+| ------------------------- | --- | --------- |
+| **Server Authentication** |     |           |
+| Data Origin               | ✅   | ✅         |
+| Data Integrity            | ✅   | ✅         |
+| **Data Portability**      |     |           |
+| Trustless                 | ❌   | ✅         |
+| Privacy Preserving        | ❌   | ✅         |
--- a/src/pages/landing_page/_why.md
+++ b/src/pages/landing_page/_why.md
@@ -0,0 +1,5 @@
+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.