[Site] Add landing page with hero style title (#49)

This PR adds the hero-style title to the landing page.

site/_includes/head.html

@@ -0,0 +1,11 @@
+<meta name="description" content="WebLLM: High-Performance In-Browser LLM Inference Engine">
+<meta
+  http-equiv="origin-trial"
+  content="Agx76XA0ITxMPF0Z8rbbcMllwuxsyp9qdtQaXlLqu1JUrdHB6FPonuyIKJ3CsBREUkeioJck4nn3KO0c0kkwqAMAAABJeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0Ojg4ODgiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjkxNzExOTk5fQ=="
+/>
+<meta
+  http-equiv="origin-trial"
+  content="AnmwqQ1dtYDQTYkZ5iMtHdINCaxjE94uWQBKp2yOz1wPTcjSRtOHUGQG+r2BxsEuM0qhxTVnuTjyh31HgTeA8gsAAABZeyJvcmlnaW4iOiJodHRwczovL21sYy5haTo0NDMiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjkxNzExOTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0="
+/>
+<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="{{ '/assets/css/hero.css' | relative_url }}" />

site/_includes/hero.html

@@ -0,0 +1,36 @@
+<section id="hero">
+  <div class="heading-container">
+    <h1>XGrammar: Efficient, Flexible and Portable Structured Generation</h1>
+    <div class="link-container">
+      <a class="github-link" href="https://github.com/mlc-ai/xgrammar">
+        <span class="github-link-content">
+          <span class="icon">{% include github.svg %}</span>
+          <span>GitHub</span>
+          <span class="arrow-container">{% include arrow.svg %}</span>
+          </span>
+      </a>
+      <a class="get-start-link moving-border" href="https://xgrammar.mlc.ai/docs/">
+        <span class="border"></span>
+        <span class="get-start-link-content">
+          <span>Documentation</span>
+          <span class="arrow-container">{% include arrow.svg %}</span>
+          </span>
+      </a>
+    </div>
+  </div>
+</section>
+
+<script>
+  (function() {
+
+  function handlerIn(e) {
+    $(this).addClass("expanded");
+  }
+  function handlerOut(e) {
+    $(this).removeClass("expanded");
+  }
+
+  $(".chat-link").hover(handlerIn, handlerOut);
+  $(".github-link").hover(handlerIn, handlerOut);
+})()
+</script>

site/assets/css/hero.scss

@@ -0,0 +1,238 @@
+---
+---
+
+#hero {
+    background: radial-gradient(100% 50rem at center 50rem, #3351cb50, #ffffff);
+    padding: 3rem;
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    margin-top: -20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    a {
+        color: black;
+    }
+
+    .heading-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-family: "Mona Sans", "MonaSansFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        margin: auto;
+
+        a {
+            min-width: fit-content;
+            max-width: 16rem;
+            flex-grow: 1;
+        }
+
+        h1 {
+            text-align: center;
+            font-size: 2rem;
+            font-weight: 700;
+        }
+
+        .link-container {
+            display: flex;
+            margin-top: 2rem;
+            align-items: center;
+            flex-wrap: wrap;
+            font-size: 1rem;
+            word-break: keep-all;
+            font-weight: 600;
+            gap: 1rem;
+            justify-content: center;
+
+            .github-link {
+                display: inline-flex;
+                gap: 1rem;
+                border-radius: 9999px;
+                vertical-align: middle;
+                align-items: center;
+                justify-content: center;
+                text-decoration: none;
+                cursor: pointer;
+                height: fit-content;
+                // padding: .25rem;
+
+                .github-link-content {
+                    width: 100%;
+                    height: 100%;
+                    z-index: 1;
+                    border-radius: 9999px;
+                    padding: 1rem 1.75rem;
+                    background-color: #000000;
+                    display: inline-flex;
+                    gap: .5rem;
+                    display: inline-flex;
+                    justify-content: center;
+                    color: rgb(229 229 229);
+
+                    .icon {
+                        display: inline-flex;
+                        align-items: center;
+                        margin-right: .5rem;
+
+                        svg {
+                            height: 1.5rem;
+                        }
+                    }
+                }
+            }
+
+            .get-start-link {
+                display: inline-flex;
+                gap: 1rem;
+                background-color: white;
+                border-radius: 9999px;
+                vertical-align: middle;
+                align-items: center;
+                justify-content: center;
+                text-decoration: none;
+                cursor: pointer;
+                height: fit-content;
+                padding: .25rem;
+
+                .get-start-link-content {
+                    width: 100%;
+                    height: 100%;
+                    z-index: 1;
+                    border-radius: 9999px;
+                    padding: 1rem 1.75rem;
+                    background-color: white;
+                    display: inline-flex;
+                    justify-content: center;
+                }
+            }
+
+            .arrow-container {
+                margin-left: .25rem;
+                display: inline-flex;
+                align-items: center;
+            }
+        }
+    }
+
+    .arrow-expandable {
+        stroke-dasharray: 10;
+        stroke-dashoffset: 10;
+        transition: stroke-dashoffset 200ms;
+    }
+
+    .expanded {
+        .arrow-expandable {
+            stroke-dashoffset: 20;
+        }
+    }
+
+    .demo-container {
+        position: relative;
+        margin-top: 96px;
+        width: calc(100% + 4rem);
+        max-width: 1024px;
+        flex-shrink: 0;
+        padding: 2rem;
+
+        svg {
+            height: auto;
+            width: 100%;
+            border-radius: inherit;
+        }
+    }
+}
+
+.moving-border {
+    overflow: hidden;
+    position: relative;
+
+    .border {
+        position: absolute;
+        inset: -1000%;
+        animation: spin 3s linear infinite;
+        border-radius: 1rem;
+        background-image: conic-gradient(from 90deg at 50% 50%, #e2cbff 0, #393bb2 50%, #e2cbff 100%);
+    }
+}
+
+@media screen and (min-width:640px) {
+    #hero {
+        padding: 6rem;
+
+        .heading-container {
+            max-width: 40rem;
+
+            h1 {
+                font-size: 3rem;
+            }
+        }
+
+        .demo-container {
+            width: calc(100% + 10rem);
+        }
+    }
+}
+
+
+@media screen and (min-width:768px) {
+    #hero {
+        .heading-container {
+            max-width: 45rem;
+
+            h1 {
+                font-size: 3.2rem;
+            }
+
+            .link-container {
+                font-size: 1.2rem;
+            }
+        }
+    }
+}
+
+@media screen and (min-width:1024px) {
+    #hero {
+        padding: 8rem;
+
+        .heading-container {
+            max-width: 50rem;
+
+            h1 {
+                font-size: 3.5rem;
+            }
+        }
+
+        .demo-container {
+            width: 100%;
+        }
+    }
+
+}
+
+@media screen and (min-width:1280px) {
+    #hero {
+        .heading-container {
+            max-width: 60rem;
+
+            h1 {
+                font-size: 4rem;
+            }
+        }
+    }
+}
+
+@media screen and (min-width:1760px) {
+    #hero {
+        background: radial-gradient(100% 50rem at center 50rem, #3351cb50, #ffffff);
+
+        gap: 4rem;
+        padding-bottom: 12rem;
+    }
+}
+
+@keyframes spin {
+    100% {
+        transform: rotate(1turn);
+    }
+}

site/index.md

@@ -4,6 +4,8 @@ title: Home
 notitle: true
 ---
 
+{% include hero.html %}
+
 ## Overview
 
 XGrammar is open-source solution for flexible, portable, and fast structured generations,