[Site] Update title and links

mlc-ai · May 26, 2024 · c079378 · c079378
1 parent 03fbf54
commit c079378
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 27 deletions.
diff --git a/site/_includes/github.svg b/site/_includes/github.svg
diff --git a/site/_includes/head.html b/site/_includes/head.html
@@ -1,4 +1,4 @@
-<meta name="description" content="WebLLM: High-Performance In-Browser LLM Serving Engine.">
+<meta name="description" content="WebLLM: High-Performance In-Browser LLM Inference Engine">
 <meta
   http-equiv="origin-trial"
   content="Agx76XA0ITxMPF0Z8rbbcMllwuxsyp9qdtQaXlLqu1JUrdHB6FPonuyIKJ3CsBREUkeioJck4nn3KO0c0kkwqAMAAABJeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0Ojg4ODgiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjkxNzExOTk5fQ=="

diff --git a/site/_includes/hero.html b/site/_includes/hero.html
@@ -1,15 +1,14 @@
 <section id="hero">
   <div class="heading-container">
-    <h1>WebLLM: High-Performance In-Browser LLM Serving Engine.</h1>
+    <h1>WebLLM: High-Performance In-Browser LLM Inference Engine</h1>
     <div class="link-container">
-      <a class="get-start-link" href="https://llm.mlc.ai/docs/deploy/javascript.html">
-        <!-- <span class="border"></span> -->
+      <a class="get-start-link" href="https://github.com/mlc-ai/web-llm?tab=readme-ov-file#get-started">
         <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">
+      <a class="chat-link moving-border" href="https://chat.webllm.ai">
         <span class="border"></span>
         <span class="chat-link-content">
           <span>Chat with WebLLM</span>

diff --git a/site/assets/css/hero.scss b/site/assets/css/hero.scss
@@ -55,25 +55,15 @@
                 text-decoration: none;
                 cursor: pointer;
                 height: fit-content;
-                overflow: hidden;
-                position: relative;
                 // padding: .25rem;
 
-                .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%);
-                }
-
                 .get-start-link-content {
                     width: 100%;
                     height: 100%;
                     z-index: 1;
                     border-radius: 9999px;
                     padding: 1rem 1.75rem;
-                    background-color: black;
+                    background-color: #000000;
                     display: inline-flex;
                     gap: .5rem;
                     display: inline-flex;
@@ -102,18 +92,8 @@
                 text-decoration: none;
                 cursor: pointer;
                 height: fit-content;
-                overflow: hidden;
-                position: relative;
                 padding: .25rem;
 
-                .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%);
-                }
-
                 .chat-link-content {
                     width: 100%;
                     height: 100%;
@@ -166,6 +146,19 @@
     }
 }
 
+.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;