Skip to content

Commit 9905667

Browse files
Neet-NestorNeet-Nestor
committed
[site] Add hero section
1 parent 14bec5a commit 9905667

20 files changed

+1497
-6
lines changed

‎site/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ dist
22
llm-chat-config.json
33
_includes/stable_diffusion.html
44
_site
5+
.jekyll-cache

‎site/Gemfile

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# frozen_string_literal: true
2+
3+
source "https://rubygems.org"
4+
5+
# gem "rails"
6+
gem "jekyll-remote-theme"
7+
gem "jekyll-sass-converter"

‎site/_includes/arrow.svg

Lines changed: 21 additions & 0 deletions
Loading

‎site/_includes/github.svg

Lines changed: 8 additions & 0 deletions
Loading

‎site/_includes/head.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<meta name="description" content="WebLLM: High-Performance In-Browser LLM Inference Engine">
2+
<meta
3+
http-equiv="origin-trial"
4+
content="Agx76XA0ITxMPF0Z8rbbcMllwuxsyp9qdtQaXlLqu1JUrdHB6FPonuyIKJ3CsBREUkeioJck4nn3KO0c0kkwqAMAAABJeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0Ojg4ODgiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjkxNzExOTk5fQ=="
5+
/>
6+
<meta
7+
http-equiv="origin-trial"
8+
content="AnmwqQ1dtYDQTYkZ5iMtHdINCaxjE94uWQBKp2yOz1wPTcjSRtOHUGQG+r2BxsEuM0qhxTVnuTjyh31HgTeA8gsAAABZeyJvcmlnaW4iOiJodHRwczovL21sYy5haTo0NDMiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjkxNzExOTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0="
9+
/>
10+
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
11+
<link rel="stylesheet" href="{{ '/assets/css/hero.css' | relative_url }}" />

‎site/_includes/hero.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<section id="hero">
2+
<div class="heading-container">
3+
<h1>MLC LLM: High-Performance Universal LLM Engine for Cloud and Edge</h1>
4+
<div class="link-container">
5+
<a class="get-start-link" href="https://webllm.mlc.ai">
6+
<span class="get-start-link-content">
7+
<span>Check WebLLM</span>
8+
<span class="arrow-container">{% include arrow.svg %}</span></span
9+
>
10+
</a>
11+
<a class="chat-link moving-border" href="https://llm.mlc.ai/docs">
12+
<span class="border"></span>
13+
<span class="chat-link-content">
14+
<span>Get Started</span>
15+
<span class="arrow-container">{% include arrow.svg %}</span>
16+
</span>
17+
</a>
18+
</div>
19+
</div>
20+
<div class="demo-container">
21+
<!-- <img class="android" src="/assets/gif/android-demo.gif" alt="Android Demo" width="612" height="1334" />
22+
<img class="linux" src="/assets/gif/linux-demo.gif" alt="Linux Demo" width="1089" height="667" />
23+
<img class="ios" src="/assets/gif/ios-demo.gif" alt="iOS Demo" width="640" height="1394" /> -->
24+
<!-- <img src="https://llm.mlc.ai/docs/_images/project-workflow.svg" alt="MLC LLM Architecture" /> -->
25+
{% include project-workflow.svg %}
26+
</div>
27+
</section>
28+
29+
<script>
30+
(function() {
31+
32+
function handlerIn(e) {
33+
$(this).addClass("expanded");
34+
}
35+
function handlerOut(e) {
36+
$(this).removeClass("expanded");
37+
}
38+
39+
$(".chat-link").hover(handlerIn, handlerOut);
40+
$(".github-link").hover(handlerIn, handlerOut);
41+
})()
42+
</script>

‎site/_includes/project-workflow.svg

Lines changed: 1176 additions & 0 deletions
Loading

‎site/assets/css/hero.scss

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
---
2+
---
3+
4+
#hero {
5+
background: radial-gradient(100% 50rem at center 50rem, #3351cb50, #ffffff);
6+
padding: 3rem;
7+
width: 100vw;
8+
margin-left: calc(50% - 50vw);
9+
margin-top: -20px;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
14+
a {
15+
color: black;
16+
}
17+
18+
.heading-container {
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
font-family: "Mona Sans", "MonaSansFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
23+
margin: auto;
24+
25+
a {
26+
min-width: fit-content;
27+
max-width: 16rem;
28+
flex-grow: 1;
29+
}
30+
31+
h1 {
32+
text-align: center;
33+
font-size: 2rem;
34+
font-weight: 700;
35+
}
36+
37+
.link-container {
38+
display: flex;
39+
margin-top: 2rem;
40+
align-items: center;
41+
flex-wrap: wrap;
42+
font-size: 1rem;
43+
word-break: keep-all;
44+
font-weight: 600;
45+
gap: 1rem;
46+
justify-content: center;
47+
48+
.get-start-link {
49+
display: inline-flex;
50+
gap: 1rem;
51+
border-radius: 9999px;
52+
vertical-align: middle;
53+
align-items: center;
54+
justify-content: center;
55+
text-decoration: none;
56+
cursor: pointer;
57+
height: fit-content;
58+
// padding: .25rem;
59+
60+
.get-start-link-content {
61+
width: 100%;
62+
height: 100%;
63+
z-index: 1;
64+
border-radius: 9999px;
65+
padding: 1rem 1.75rem;
66+
background-color: #000000;
67+
display: inline-flex;
68+
gap: .5rem;
69+
display: inline-flex;
70+
justify-content: center;
71+
color: rgb(229 229 229);
72+
73+
.icon {
74+
display: inline-flex;
75+
align-items: center;
76+
77+
svg {
78+
height: 1.5rem;
79+
}
80+
}
81+
}
82+
}
83+
84+
.chat-link {
85+
display: inline-flex;
86+
gap: 1rem;
87+
background-color: white;
88+
border-radius: 9999px;
89+
vertical-align: middle;
90+
align-items: center;
91+
justify-content: center;
92+
text-decoration: none;
93+
cursor: pointer;
94+
height: fit-content;
95+
padding: .25rem;
96+
97+
.chat-link-content {
98+
width: 100%;
99+
height: 100%;
100+
z-index: 1;
101+
border-radius: 9999px;
102+
padding: 1rem 1.75rem;
103+
background-color: white;
104+
display: inline-flex;
105+
justify-content: center;
106+
}
107+
}
108+
109+
.arrow-container {
110+
margin-left: .25rem;
111+
display: inline-flex;
112+
align-items: center;
113+
}
114+
}
115+
}
116+
117+
.arrow-expandable {
118+
stroke-dasharray: 10;
119+
stroke-dashoffset: 10;
120+
transition: stroke-dashoffset 200ms;
121+
}
122+
123+
.expanded {
124+
.arrow-expandable {
125+
stroke-dashoffset: 20;
126+
}
127+
}
128+
129+
.demo-container {
130+
position: relative;
131+
margin-top: 96px;
132+
width: 100%;
133+
max-width: 1024px;
134+
flex-shrink: 0;
135+
padding: 2rem;
136+
137+
svg {
138+
height: auto;
139+
width: 100%;
140+
border-radius: inherit;
141+
}
142+
}
143+
}
144+
145+
.moving-border {
146+
overflow: hidden;
147+
position: relative;
148+
149+
.border {
150+
position: absolute;
151+
inset: -1000%;
152+
animation: spin 3s linear infinite;
153+
border-radius: 1rem;
154+
background-image: conic-gradient(from 90deg at 50% 50%, #e2cbff 0, #393bb2 50%, #e2cbff 100%);
155+
}
156+
}
157+
158+
@media screen and (min-width:640px) {
159+
#hero {
160+
padding: 6rem;
161+
162+
.heading-container {
163+
max-width: 40rem;
164+
165+
h1 {
166+
font-size: 3rem;
167+
}
168+
}
169+
}
170+
}
171+
172+
173+
@media screen and (min-width:768px) {
174+
#hero {
175+
.heading-container {
176+
max-width: 45rem;
177+
178+
h1 {
179+
font-size: 3.2rem;
180+
}
181+
182+
.link-container {
183+
font-size: 1.2rem;
184+
}
185+
}
186+
}
187+
}
188+
189+
@media screen and (min-width:1024px) {
190+
#hero {
191+
padding: 8rem;
192+
193+
.heading-container {
194+
max-width: 50rem;
195+
196+
h1 {
197+
font-size: 3.5rem;
198+
}
199+
}
200+
}
201+
202+
}
203+
204+
@media screen and (min-width:1280px) {
205+
#hero {
206+
.heading-container {
207+
max-width: 60rem;
208+
209+
h1 {
210+
font-size: 4rem;
211+
}
212+
}
213+
}
214+
}
215+
216+
@media screen and (min-width:1760px) {
217+
#hero {
218+
background: radial-gradient(100% 50rem at center 50rem, #3351cb50, #ffffff);
219+
220+
gap: 4rem;
221+
padding-bottom: 12rem;
222+
}
223+
}
224+
225+
@keyframes spin {
226+
100% {
227+
transform: rotate(1turn);
228+
}
229+
}

‎site/gif/android-demo.gif renamed to ‎site/assets/gif/android-demo.gif

File renamed without changes.

‎site/gif/ios-demo.gif renamed to ‎site/assets/gif/ios-demo.gif

File renamed without changes.

0 commit comments

Comments
 (0)