[Site] Add hero section to landing page

.lintstagedrc.json

@@ -1,3 +1,3 @@
 {
-  "./**/*.{js,ts,jsx,tsx,json,html,css}": ["eslint --fix", "prettier --write"]
+  "./**/*.{js,ts,jsx,tsx,json,css}": ["eslint --fix", "prettier --write"]
 }

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/_config.yml

@@ -1,8 +1,7 @@
-
-name: "Web LLM"
+name: "WebLLM"
 short_name: "WebLLM"
 
-url: https://webllm.mlc.ai
+url: https://neet-nestor.github.io/
 
 exclude: [README.md, serve_local.sh]
 
@@ -11,7 +10,6 @@ plugins:
 
 remote_theme: mlc-ai/jekyll-theme-mlc
 
-
 # Colorize code snippets with the rogue module if we want to deploy on GH.
 highlighter: rouge
 
@@ -24,7 +22,7 @@ permalink: /blog/:year/:month/:day/:title.html
 front_page_news: 8
 
 # Base pathname for links.
-base: ''
+base: ""
 
 # make pages for the _projects folder
 collections:
@@ -37,5 +35,7 @@ course_title:
 navigation:
   - title: Home
     link: /
+  - title: Chat
+    link: https://chat.webllm.ai
   - title: GitHub
     link: https://github.com/mlc-ai/web-llm

site/_includes/head.html

@@ -1,3 +1,10 @@
-<meta http-equiv="origin-trial" content="Agx76XA0ITxMPF0Z8rbbcMllwuxsyp9qdtQaXlLqu1JUrdHB6FPonuyIKJ3CsBREUkeioJck4nn3KO0c0kkwqAMAAABJeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0Ojg4ODgiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjkxNzExOTk5fQ==">
-<meta http-equiv="origin-trial" content="AnmwqQ1dtYDQTYkZ5iMtHdINCaxjE94uWQBKp2yOz1wPTcjSRtOHUGQG+r2BxsEuM0qhxTVnuTjyh31HgTeA8gsAAABZeyJvcmlnaW4iOiJodHRwczovL21sYy5haTo0NDMiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjkxNzExOTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">
+<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,50 @@
+<section id="hero">
+  <div class="heading-container">
+    <h1>WebLLM: High-Performance In-Browser LLM Serving Engine.</h1>
+    <div class="link-container">
+      <a class="get-start-link" href="https://llm.mlc.ai/docs/deploy/javascript.html">
+        <!-- <span class="border"></span> -->
+        <span class="get-start-link-content">
+          <span>Get Started</span>
+          <span class="arrow-container">{% include arrow.svg %}</span></span
+        >
+      </a>
+      <a class="chat-link" href="https://chat.webllm.ai">
+        <span class="border"></span>
+        <span class="chat-link-content">
+          <span>Chat with WebLLM</span>
+          <span class="arrow-container">{% include arrow.svg %}</span>
+          </span>
+      </a>
+    </div>
+  </div>
+  <div class="video-container">
+    <video
+      autoplay
+      playsinline
+      muted
+      poster="{{ site.base }}/assets/img/fig/light_demo.png"
+    >
+      <source
+        src="{{ site.base }}/assets/video/light_demo.webm"
+        type="video/webm"
+      />
+      <source
+        src="{{ site.base }}/assets/video/light_demo.mp4"
+        type="video/mp4"
+      />
+    </video>
+  </div>
+</section>
+
+<script>
+  function handlerIn(e) {
+    $(this).addClass("expanded");
+  }
+  function handlerOut(e) {
+    $(this).removeClass("expanded");
+  }
+
+  $(".chat-link").hover(handlerIn, handlerOut);
+  $(".github-link").hover(handlerIn, handlerOut);
+</script>