feat: added styling to landing-page, faq, and footer

docs/faq.md

@@ -4,12 +4,12 @@ sidebar_position: 3
 sidebar_label: FAQ
 ---
 
-import TOCInline from '@theme/TOCInline';
-
-<TOCInline toc={toc} />
+<div className="text--center">
 
 ## Generic Questions
 
+</div>
+
 ### Why is TLS not sufficient for data portability?
 
 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.
@@ -18,7 +18,7 @@ TLS indeed signs a checksum (a Message Authentication Code, MAC) to check data i
 
 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.
 
-### What does “privacy-centric” exactly mean for TLSNotary?
+### What does "privacy-centric" exactly mean for TLSNotary?
 
 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.
 
@@ -129,7 +129,7 @@ cargo run --release
 ```
 ### How to run TLSNotary with extra logging? {#faq11}
 
-To get deeper insights into what TLSNotary is doing, you can enable extra logging with `RUST_LOG=debug` or `RUST_LOG=trace`. This will generate a lot of output, as it logs extensive network activity. It’s recommended to filter logs for better readability. The recommended configuration is:
+To get deeper insights into what TLSNotary is doing, you can enable extra logging with `RUST_LOG=debug` or `RUST_LOG=trace`. This will generate a lot of output, as it logs extensive network activity. It's recommended to filter logs for better readability. The recommended configuration is:
 ```
 RUST_LOG=trace,yamux=info,uid_mux=info cargo run --release
 ```
@@ -160,10 +160,10 @@ TLSNotary can be used to bring data on-chain, but when the stakes are high, it i
 
 In TLSNotary, a **presentation** refers to data shared by the Prover to selectively reveal specific parts of the TLS data committed to earlier during the attestation phase. By using these earlier commitments, the Prover can choose to disclose only particular segments of the TLS data while keeping other parts hidden or redacted. This enables a flexible and controlled way to share proofs, ensuring that sensitive information remains private.
 
-The term “presentation” is inspired by similar terminology in the [W3C Verifiable Credentials standard](https://www.w3.org/TR/vc-data-model/#dfn-verifiable-presentations).
+The term "presentation" is inspired by similar terminology in the [W3C Verifiable Credentials standard](https://www.w3.org/TR/vc-data-model/#dfn-verifiable-presentations).
 
 ### Why does TLSNotary need an online Verifier? Can't this be done serverlessly in the browser with Zero Knowledge?
 
-TLSNotary uses a multi-party computation (MPC) approach to secure the TLS session. Without MPC, the Prover would have full control over the TLS session keys and could forge the Server’s responses. Zero-knowledge (ZK) proofs alone cannot prevent this. To prevent forged responses, the Verifier participates in the handshake, splitting the TLS session keys between the Prover and the Verifier.
+TLSNotary uses a multi-party computation (MPC) approach to secure the TLS session. Without MPC, the Prover would have full control over the TLS session keys and could forge the Server's responses. Zero-knowledge (ZK) proofs alone cannot prevent this. To prevent forged responses, the Verifier participates in the handshake, splitting the TLS session keys between the Prover and the Verifier.
 
-In proxy-based designs only ZK proofs are needed. In such designs the verifier proxies the connection with the server, observes the encrypted traffic, and later verifies a ZK proof from the Prover that the plaintext matches the encrypted data. TLSNotary’s direct connection model avoids introducing a network assumption and provides stronger resistance to censorship compared to the proxy approach.
+In proxy-based designs only ZK proofs are needed. In such designs the verifier proxies the connection with the server, observes the encrypted traffic, and later verifies a ZK proof from the Prover that the plaintext matches the encrypted data. TLSNotary's direct connection model avoids introducing a network assumption and provides stronger resistance to censorship compared to the proxy approach.

docs/intro.md

@@ -53,14 +53,22 @@ In this setup, the `Notary` cryptographically signs commitments to the data and
 ## What Can TLSNotary Do?
 
 TLSNotary can be used for various purposes. For example, you can use TLSNotary to prove that:
-- you have access to an account on a web platform
-- a website showed specific content on a certain date
-- you have private information about yourself (address, birth date, health, etc.)
-- you have received a money transfer using your online banking account without revealing your login credentials or sensitive financial information
-- you received a private message from someone
-- you purchased an item online
-- you were blocked from using an app
-- you earned professional certificates
+
+You have access to an account on a web platform
+
+A website showed specific content on a certain date
+
+You have private information about yourself (address, birth date, health, etc.)
+
+You have received a money transfer using your online banking account without revealing your login credentials or sensitive financial information
+
+You received a private message from someone
+
+You purchased an item online
+
+You were blocked from using an app
+
+You earned professional certificates
 
 While TLSNotary can notarize publicly available data, it does not solve the "[oracle problem](https://ethereum.org/en/developers/docs/oracles/)". For this use case, existing oracle solutions are more suitable.
 

docusaurus.config.ts

@@ -90,7 +90,6 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/docusaurus-social-card.jpg',
     navbar: {
       title: 'TLSNotary',
       logo: {

src/css/custom.css

@@ -33,3 +33,14 @@
 [data-theme='dark'] img[src$='#gh-light-mode-only'] {
   display: none;
 }
+
+/* Fix logo alignment in navbar */
+.navbar__logo {
+  display: flex;
+  align-items: center;
+}
+
+.navbar__logo img {
+  margin-right: 8px;
+  height: 32px;
+}

src/pages/about.md

@@ -19,7 +19,7 @@ TLSNotary is a protocol which allows people to export data from any web applicat
 
 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.",
 
-### Step 2: "Selective Disclosure",
+### Step 2: "Selective Disclosure"
 
 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.
 

src/pages/index.module.css

@@ -8,16 +8,125 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  background: linear-gradient(145deg, #243F5F 0%, #1a2d43 100%);
+  color: white;
+}
+
+.heroBanner h1 {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+}
+
+.heroBanner p {
+  font-size: 1.2rem;
+  max-width: 800px;
+  margin: 0 auto;
+  opacity: 0.9;
 }
 
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
   }
+
+  .heroBanner h1 {
+    font-size: 2.5rem;
+  }
 }
 
 .buttons {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.buttons :global(.button) {
+  min-width: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  height: 48px;
+}
+
+.buttons :global(.button svg) {
+  width: 20px;
+  height: 20px;
+  margin-left: 4px;
+}
+
+.introduction {
+  padding: 4rem 0;
+  background: white;
+}
+
+.introduction h2 {
+  font-size: 2.5rem;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 2rem;
+  color: #243F5F;
+}
+
+.introduction p {
+  font-size: 1.1rem;
+  line-height: 1.7;
+  color: #333;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+:global(.markdown) {
+  font-size: 1.1rem;
+  line-height: 1.7;
+  text-align: center;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+:global(.markdown p) {
+  text-align: center;
+}
+
+:global(.markdown strong) {
+  color: #243F5F;
+}
+
+section + section {
+  margin-top: 2rem;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 2rem 0;
+}
+
+.container {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: 2rem;
+  background: white;
+  margin: 2rem auto;
+}
+
+@media screen and (max-width: 768px) {
+  .introduction h2 {
+    font-size: 2rem;
+  }
+
+  .introduction p {
+    font-size: 1rem;
+    padding: 0 1rem;
+  }
+
+  .container {
+    margin: 1rem;
+    padding: 1rem;
+  }
 }

src/pages/index.tsx

@@ -13,7 +13,6 @@ 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();
   return (
@@ -23,7 +22,22 @@ function HomepageHeader() {
           {siteConfig.title}
         </Heading>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className="">
+        <div className={styles.buttons}>
+          <Link
+            className="button button--primary button--lg"
+            to="/docs/intro">
+            <span>Get Started</span>
+          </Link>
+          <a
+            className="button button--primary button--lg"
+            href="https://demo.tlsnotary.org"
+            rel="noopener noreferrer"
+            target="_blank">
+            <span>Try Demo</span>
+            <IconChrome />
+          </a>
+        </div>
+        <div className="margin-top--xl">
           <p>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!</p>
         </div>
       </div>
@@ -35,54 +49,40 @@ export default function Home(): ReactNode {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      title={`${siteConfig.title} - Secure Data Verification`}
+      description="TLSNotary - Verify the authenticity of TLS data while protecting privacy. Make data portable without compromising security.">
       <HomepageHeader />
 
       <main>
         <section className={styles.introduction}>
-          <div className="container">
-            <h2 className={styles.borderBlue}>Why use TLSNotary?</h2>
+          <div className="container text--center">
+            <Heading as="h2" className="text--center margin-bottom--xl">Why use TLSNotary?</Heading>
             <Why />
           </div>
         </section>
 
-        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-          <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">
-            <Build />
+          <div className="container text--center">
+            <img
+              src="img/infographic.svg"
+              alt="TLSNotary Infographic"
+              className="margin-bottom--lg"
+            />
           </div>
         </section>
 
+        <section className={styles.introduction}>
+          <div className="container text--center">
+            <Build />
+            <div className="margin-top--lg">
+              <Link
+                className="button button--primary button--lg"
+                to="/docs/intro">
+                <span>Start Building</span>
+              </Link>
+            </div>
+          </div>
+        </section>
       </main>
     </Layout>
   );