Create a more appealing docs landing page - improved UI & responsive-friendly

Author: wwwillchen

docs/index.md

@@ -14,18 +14,17 @@ hide:
   <img class="mascot-image" src="./assets/robot_mascot.jpeg"/>
   <div class="mascot-text-container">
     <div class="mascot-text">
-      Mesop
+      Build delightful web apps quickly in Python
       <div class="mascot-subtext">
-        Build delightful demos quickly in Python
+        Used at Google for rapid internal app development
       </div>
     </div>
   </div>
 </div>
 
 <div class="mascot-image-spacer"></div>
 
-Mesop is a Python-based UI framework that allows you to rapidly build web demos:
-
+Mesop is a Python-based UI framework that allows you to rapidly build web apps like demos and internal apps:
 
 <div class="box-row">
   <div class="reason-box">
@@ -52,13 +51,19 @@ Mesop is a Python-based UI framework that allows you to rapidly build web demos:
   </div>
 </div>
 
+<div class="video-card">
+<div style="text-align: center; font-size: 18px; font-weight: 500; margin-bottom: 12px;">
+Edit your UI directly in the browser using the Visual Editor
+</div>
+
  <div class="video-container">
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/tvbO-Lqq_TA?si=bf5pTMneieRLisMc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe><!-- <div>Visual Editor</div>
-</div>!-->
+<iframe width="560" height="315" src="https://www.youtube.com/embed/tvbO-Lqq_TA?si=bf5pTMneieRLisMc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
+
 </div>
 
-## Demo
+## Write your first Mesop app in less than 10 lines of code...
 
 === "Demo & Code"
 

docs/stylesheets/extra.css

@@ -166,18 +166,23 @@ p {
 }
 
 .mascot-image-container {
+  border-radius: 12px;
   display: flex;
-  margin: -16px -16px 12px;
-  padding: 0 16px;
+  padding: 0 24px;
   background: #d1cab8;
-  position: absolute;
-  left: 0;
-  width: calc(100% + 16px);
+  min-height: 240px;
+  align-items: center;
 }
 
 .mascot-image {
-  width: 360px;
-  margin-left: 80px;
+  width: 280px;
+  margin-left: 16px;
+}
+
+@media (max-width: 768px) {
+  .mascot-image {
+    width: 200px;
+  }
 }
 
 .mascot-text-container {
@@ -188,38 +193,33 @@ p {
 
 .mascot-text {
   letter-spacing: 0.17px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: white;
-  font-size: 3rem;
-  letter-spacing: 0.25px;
-  font-weight: bold;
-  width: 100%;
-  text-shadow: 0 0 0.075rem #211d2dcc;
-}
-
-.mascot-subtext {
-  text-shadow: 0 0 0.02rem #211d2dcc;
+  color: rgba(0, 0, 0, 0.87);
   font-size: 1.5rem;
+  line-height: 1.25;
   font-weight: 500;
 }
 
-.mascot-image-spacer {
-  height: 360px;
+.mascot-subtext {
+  margin-top: 12px;
+  text-shadow: 0 0 0.02rem #211d2dcc;
+  font-size: 1rem;
+  font-weight: normal;
 }
 
 .box-row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
-  margin: 0 auto 24px;
+  margin: 0 auto;
   width: min(100%, 1024px);
 }
 
 .reason-box {
+  box-shadow:
+    0 10px 20px #0000000a,
+    0 2px 6px #0000000a,
+    0 0 1px #0000000a;
   background: var(--md-code-hl-color--light);
   width: min(100%, 280px);
   padding: 16px;
@@ -228,6 +228,12 @@ p {
   margin-right: 24px;
 }
 
+@media (max-width: 768px) {
+  .reason-box {
+    width: 100%;
+  }
+}
+
 .reason-title {
   font-weight: 500;
 }
@@ -260,6 +266,18 @@ p {
   border: 0;
 }
 
+.video-card {
+  box-shadow:
+    0 10px 20px #0000000a,
+    0 2px 6px #0000000a,
+    0 0 1px #0000000a;
+  border: 1px solid rgb(243, 244, 246);
+  border-radius: 12px;
+  padding: 16px;
+  margin: 0 auto;
+  width: min(100%, 640px);
+}
+
 .video-container {
   display: flex;
   justify-content: center;