[site] Add hero section

Author: Neet-Nestor

site/.gitignore

@@ -2,3 +2,4 @@ dist
 llm-chat-config.json
 _includes/stable_diffusion.html
 _site
+.jekyll-cache

site/Gemfile

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+# gem "rails"
+gem "jekyll-remote-theme"
+gem "jekyll-sass-converter"

site/_includes/arrow.svg

@@ -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/github.svg

@@ -0,0 +1,42 @@
+<section id="hero">
+  <div class="heading-container">
+    <h1>MLC LLM: High-Performance Universal LLM Engine for Cloud and Edge</h1>
+    <div class="link-container">
+      <a class="get-start-link" href="https://webllm.mlc.ai">
+        <span class="get-start-link-content">
+          <span>Check WebLLM</span>
+          <span class="arrow-container">{% include arrow.svg %}</span></span
+        >
+      </a>
+      <a class="chat-link moving-border" href="https://llm.mlc.ai/docs">
+        <span class="border"></span>
+        <span class="chat-link-content">
+          <span>Get Started</span>
+          <span class="arrow-container">{% include arrow.svg %}</span>
+          </span>
+      </a>
+    </div>
+  </div>
+  <div class="demo-container">
+    <!-- <img class="android" src="/assets/gif/android-demo.gif" alt="Android Demo" width="612" height="1334" />
+    <img class="linux" src="/assets/gif/linux-demo.gif" alt="Linux Demo" width="1089" height="667" />
+    <img class="ios" src="/assets/gif/ios-demo.gif" alt="iOS Demo" width="640" height="1394" /> -->
+    <!-- <img src="https://llm.mlc.ai/docs/_images/project-workflow.svg" alt="MLC LLM Architecture" /> -->
+    {% include project-workflow.svg %}
+  </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/_includes/head.html

@@ -0,0 +1,229 @@
+---
+---
+
+#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;
+
+            .get-start-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;
+
+                .get-start-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;
+
+                        svg {
+                            height: 1.5rem;
+                        }
+                    }
+                }
+            }
+
+            .chat-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;
+
+                .chat-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: 100%;
+        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;
+            }
+        }
+    }
+}
+
+
+@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;
+            }
+        }
+    }
+
+}
+
+@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/_includes/hero.html

@@ -4,16 +4,12 @@ title: Home
 notitle: true
 ---
 
-# MLC LLM
+{% include hero.html %}
 
-Documentation: [https://llm.mlc.ai/docs](https://llm.mlc.ai/docs)
+## Overview
 
 **M**achine **L**earning **C**ompilation for **L**arge **L**anguage **M**odels (MLC LLM) is a high-performance universal deployment solution that allows native deployment of any large language models with native APIs with compiler acceleration. The mission of this project is to enable everyone to develop, optimize and deploy AI models natively on everyone's devices with ML compilation techniques.
 
-<p align="center">
-<img src="https://llm.mlc.ai/docs/_images/project-workflow.svg" height="300">
-</p>
-
 ## Installation
 
 MLC LLM is available via [pip](https://llm.mlc.ai/docs/install/mlc_llm.html#install-mlc-packages).