Update landing page: Prover/Verifier

src/components/How.tsx

@@ -1,35 +1,44 @@
 import "./How.css";
-import diagram from "../images/overview-pretty.png";
+// import diagram from "../images/overview-pretty.png";
+import diagram from "../images/overview-new.drawio.svg"
 
 export default function How() {
   return (
     <div id="How">
-        <div className="body">
-            <div className="diagram-container">
-                <img className="diagram" src={diagram}></img>
-            </div>
-            <div className="text-container">
-                <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 allows 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 className="body">
+        <div className="diagram-container">
+          <img className="diagram" src={diagram}></img>
         </div>
+        <div className="text-container">
+          <h2>How it works</h2>
+          <div style={{ height: "1.375rem" }} />
+          <p>
+            TLSNotary leverages the widely-used TLS (Transport Layer Security) protocol to securely and privately prove a transcript of communications took place with a webserver.
+          </p>
+          <br />
+          <p>
+            The core of the TLSNotary protocol involves splitting TLS session keys between two parties, the Prover and the Verifier. Through secure multi-party computation (MPC), the Prover's requests to a TLS-enabled webserver are encrypted and authenticated.
+          </p>
+          <br />
+          <p>
+            During the protocol neither the Prover nor Verifier are in possession of the full TLS session keys, they only hold respective shares of those keys. This preserves the security properties of TLS while enabling the Prover to prove the authenticity of the communication to the Verifier.
+          </p>
+          <br />
+          <p>
+            All of this is achieved while maintaining full privacy. The unencrypted communications remain hidden to the Verifier, and optionally the identity of the server can remain private as well.
+          </p>
+          <br />
+          <p>
+            Moreover, our protocol operates transparently to the webserver.
+            In fact, the webserver remains unaware that this process is taking place.
+          </p>
+          <br />
+          <p>
+            Since the validation of the TLS traffic neither reveals anything about the plaintext of the TLS session nor about the Server, it is possible to outsource the MPC-TLS verification to a general-purpose TLS verifier, which we term a <em>Notary</em>. This Notary can sign (aka <em>notarize</em>) the data, making it portable in a privacy preserving way.
+          </p>
+
+        </div>
+      </div>
     </div>
   );
 }