From 972430f79e13699893ad7ae14782e76f48a5d333 Mon Sep 17 00:00:00 2001
From: Stan Girard <girard.stanislas@gmail.com>
Date: Wed, 17 May 2023 14:44:57 +0200
Subject: [PATCH] docs(website): added demo link

---
 website/app/page.js         | 100 +++++++++++++++++++++---------------
 website/app/page.module.css |   9 ++--
 2 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/website/app/page.js b/website/app/page.js
index b88a9644c..934b7b0c2 100644
--- a/website/app/page.js
+++ b/website/app/page.js
@@ -10,53 +10,73 @@ export default function Home() {
         </p>
       </div>
       <div className={styles.center}>
-        <iframe 
-          src="https://github.com/StanGirard/quivr/assets/19614572/80721777-2313-468f-b75e-09379f694653" 
-          width="1000" 
-          height="480" 
-          frameborder="0" 
-          allow="autoplay; fullscreen; picture-in-picture" 
+        <iframe
+          src="https://github.com/StanGirard/quivr/assets/19614572/80721777-2313-468f-b75e-09379f694653"
+          width="720"
+          height="480"
+          frameborder="0"
+          allow="autoplay; fullscreen; picture-in-picture"
           allowFullScreen
         ></iframe>
       </div>
+      <p>Stay up to date 👇</p>
+      <iframe
+        src="https://embeds.beehiiv.com/a75f7917-1d4b-4c3c-8d4a-b6891d6e19e3?slim=true"
+        data-test-id="beehiiv-embed"
+        height="52"
+        style = {{width: "100%", maxWidth: "500px", margin: "0 auto", display: "block"}}
+      ></iframe>
+
       <div className={styles.grid}>
-  <a
-    href="https://github.com/StanGirard"
-    className={styles.card}
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    <h2>
-      GitHub <span>-&gt;</span>
-    </h2>
-    <p>Check out the source code on GitHub.</p>
-  </a>
+        <a
+          href="https://github.com/StanGirard/quivr"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2>
+            GitHub <span>-&gt;</span>
+          </h2>
+          <p>Check out the source code on GitHub.</p>
+        </a>
 
-  <a
-    href="https://twitter.com/_StanGirard"
-    className={styles.card}
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    <h2>
-      Twitter <span>-&gt;</span>
-    </h2>
-    <p>Follow us on Twitter for updates.</p>
-  </a>
-  <a
-    href="https://discord.gg/HUpRgp2HG8"
-    className={styles.card}
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    <h2>
-      Discord <span>-&gt;</span>
-    </h2>
-    <p>Join the discussion on Discord</p>
-  </a>
+        <a
+          href="https://twitter.com/_StanGirard"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2>
+            Twitter <span>-&gt;</span>
+          </h2>
+          <p>Follow us on Twitter for updates.</p>
+        </a>
 
+        <a
+          href="https://discord.gg/HUpRgp2HG8"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2>
+            Discord <span>-&gt;</span>
+          </h2>
+          <p>Join the discussion on Discord</p>
+        </a>
 
-</div>
+        <a
+          href="https://try-quivr.streamlit.app"
+          className={styles.card}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2>
+            Demo <span>-&gt;</span>
+          </h2>
+          <p>Try our live demo</p>
+        </a>
+
+      </div>
     </main>
   )
 }
\ No newline at end of file
diff --git a/website/app/page.module.css b/website/app/page.module.css
index 0b7806059..e934a65d2 100644
--- a/website/app/page.module.css
+++ b/website/app/page.module.css
@@ -41,7 +41,7 @@
   
   .grid {
     display: grid;
-    grid-template-columns: repeat(4, minmax(25%, auto));
+    grid-template-columns: repeat(4, 1fr); /* Updated from 3 to 4 */
     width: var(--max-width);
     max-width: 100%;
   }
@@ -77,7 +77,7 @@
     justify-content: center;
     align-items: center;
     position: relative;
-    padding: 4rem 0;
+    padding: 2rem 0;
   }
   
   .center::before {
@@ -196,10 +196,9 @@
     }
   }
   
-  /* Tablet and Smaller Desktop */
   @media (min-width: 701px) and (max-width: 1120px) {
     .grid {
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(2, 1fr); /* Display two cards per row on tablet screens */
     }
   }
   
@@ -231,6 +230,6 @@
   /* Tablet and up */
   @media (min-width: 701px) {
     .grid {
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(4, 1fr);
     }
   }
\ No newline at end of file