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>
+            TLSVerifier 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 TLSVerifier 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 a share of those keys. This ensures the security assumptions 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 Verifier remains unaware of which webserver is being queried, and the Verifier never has access to the unencrypted communications.
+          </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>
   );
 }