Skip to content

Commit fae5306

Browse files
donmckennapeter-zawistowicz
donmckenna
and
peter-zawistowicz
authored
feat: add /ai page (#71)
Co-authored-by: Peter Zawistowicz <44822072+peter-zawistowicz@users.noreply.github.com>
1 parent 1bd626a commit fae5306

File tree

5 files changed

+422
-1
lines changed

5 files changed

+422
-1
lines changed

‎docs/.vitepress/config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export default defineConfig({
9090
nav: [
9191
{ text: 'Guides', link: '/guides/introduction' },
9292
{ text: 'Tutorial', link: '/tutorial/1-build-your-first-webcontainer-app' },
93-
{ text: 'API Reference', link: '/api' },
93+
{ text: 'Artificial Intelligence', link: '/ai' },
9494
{ text: 'Commercial Usage', link: '/enterprise' },
9595
],
9696
sidebar: {

‎docs/.vitepress/theme/components/Ai.vue

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
<script setup lang="ts">
2+
import CTAButton from '@theme/components/Buttons/CTAButton.vue';
3+
import Footer from '@theme/components/Footer.vue';
4+
import HeroAi from '@theme/components/Hero/HeroAi.vue';
5+
import FeaturesCardList from '@theme/components/Features/FeaturesCardList.vue';
6+
import TestimonialCardList from '@theme/components/Testimonials/TestimonialCardList.vue';
7+
import WCUsedBy from '@theme/components/WCUsedByOrgs/WCUsedBy.vue';
8+
import WCHelloWorld from '@theme/components/Examples/WCHelloWorld.vue';
9+
import ProjectsUsingWCCardList from '@theme/components/WCUsedByProjects/ProjectsUsingWCCardList.vue';
10+
11+
defineProps<{
12+
footerSections: any[];
13+
}>();
14+
</script>
15+
16+
<template>
17+
18+
<div class="top-section">
19+
<HeroAi />
20+
</div>
21+
22+
<div class="final-section">
23+
<div class="section">
24+
<div class="features-small">
25+
<div class="feature">
26+
<h2>Improve the quality of your AI-generated code</h2>
27+
<p>To ensure code generated by your LLM is valid, performant, and satisfies the prompt, you need to be able to actually execute it. The WebContainer API enables this securely, right inside the user's browser tab.</p>
28+
</div>
29+
<div class="feature">
30+
<h2>Provide a better developer experience for your users</h2>
31+
<p>With the WebContainer API you can provide your users a low-latency in-browser code execution environment seamlessly integrated into your AI application so they can get production-ready code faster.</p>
32+
</div>
33+
<div class="feature">
34+
<h2>Avoid infrastructure and security headaches</h2>
35+
<p>With no virtual machines or network connections to manage, you can ensure untrusted AI-generated code doesn’t pose security risks to you or your end users.</p>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
41+
<div class="section">
42+
<h2>Leverage the tech <strong>we use<br/> in our own products.</strong></h2>
43+
<p>WebContainers already powers production developer experiences from interactive tutorials to full-blown IDEs. With the WebContainer API, you can build a secure and performant coding environment into your AI applications without worrying about provisioning infrastructure.</p>
44+
<CTAButton href="/guides/quickstart">Get started!</CTAButton>
45+
</div>
46+
47+
<Footer :sections="footerSections" />
48+
49+
</template>
50+
51+
<style scoped lang="scss">
52+
@import '@theme/styles/vars.scss';
53+
54+
.top-section {
55+
display: flex;
56+
flex-direction: column;
57+
align-items: center;
58+
margin-top: -72px;
59+
padding-top: 224px;
60+
padding-bottom: 0px;
61+
// min-height: 100lvh;
62+
background-attachment: fixed;
63+
background-image: url('/img/0001-8-2.jpg');
64+
background-size: cover;
65+
background-position: center bottom;
66+
overflow-x: hidden;
67+
68+
:root.dark & {
69+
background-image: url('/img/0001-8-2-dk-bluedk.jpg');
70+
}
71+
72+
@media (max-width: 1024px) {
73+
padding-top: 160px;
74+
}
75+
76+
h3 {
77+
@media (max-width: 10240px) {
78+
margin-top: 52px;
79+
}
80+
}
81+
}
82+
83+
.features-small {
84+
max-width:var(--content-max-width);
85+
display: flex;
86+
flex-wrap: wrap;
87+
justify-content: space-around;
88+
gap: 84px 40px;
89+
margin: 52px 0;
90+
padding: 0 52px;
91+
@media (max-width: 600px) {
92+
padding: 0;
93+
}
94+
}
95+
96+
.feature {
97+
max-width: 30%;
98+
display: flex;
99+
flex-direction: column;
100+
gap: 28px;
101+
@media (max-width: 1200px) {
102+
max-width: 416px;
103+
}
104+
h2 {
105+
font-family: Gilroy, var(--vp-font-family-base);
106+
font-size: 28px;
107+
line-height: 1.1;
108+
font-weight: 400;
109+
color: #000;
110+
:root.dark & {
111+
color: #fff;
112+
}
113+
strong {
114+
font-weight: 600;
115+
}
116+
}
117+
p {
118+
max-width: 416px;
119+
font-size: 15px;
120+
line-height: 1.8;
121+
@media (max-width: 680px) {
122+
max-width: 84%;
123+
font-size: 15px;
124+
line-height: 1.8;
125+
}
126+
@media (max-width: 680px) {
127+
max-width: 100%;
128+
}
129+
@media (max-width: 500px) {
130+
font-size: 14px;
131+
}
132+
}
133+
}
134+
135+
.section > h2 {
136+
margin-bottom: 32px;
137+
font-family: Gilroy, var(--vp-font-family-base);
138+
font-size: 52px;
139+
line-height: 1.1;
140+
font-weight: 400;
141+
letter-spacing: -0.5px;
142+
color: #000;
143+
:root.dark & {
144+
color: #fff;
145+
}
146+
strong {
147+
font-weight: 600;
148+
}
149+
@media (max-width: 680px) {
150+
margin-bottom: 40px;
151+
font-size: 34px;
152+
}
153+
@media (max-width: 600px) {
154+
font-size: 30px;
155+
}
156+
}
157+
158+
.section > p {
159+
width: 760px;
160+
max-width: 100%;
161+
margin-bottom: 52px;
162+
font-size: 17px;
163+
line-height: 1.8;
164+
@media (max-width: 680px) {
165+
max-width: 84%;
166+
font-size: 15px;
167+
line-height: 1.8;
168+
}
169+
@media (max-width: 680px) {
170+
max-width: 100%;
171+
}
172+
}
173+
174+
h3 {
175+
margin-bottom: 48px;
176+
font-family: 'Gilroy', sans-serif;
177+
font-size: 28px;
178+
font-weight: 400;
179+
line-height: 1.2;
180+
text-align: center;
181+
color: #000;
182+
:root.dark & {
183+
color: #fff;
184+
}
185+
@media (max-width: 680px) {
186+
font-size: 26px;
187+
}
188+
}
189+
190+
.section {
191+
position: relative;
192+
display: flex;
193+
flex-direction: column;
194+
align-items: center;
195+
width: 100%;
196+
max-width:var(--content-max-width);
197+
padding: 0 18px;
198+
margin: 100px auto 132px;
199+
text-align: center;
200+
}
201+
202+
.final-section {
203+
background-attachment: fixed;
204+
background-image: url('/img/0001-8-2.jpg');
205+
background-size: cover;
206+
background-position: center bottom;
207+
padding: 16px 0;
208+
:root.dark & {
209+
background-image: url('/img/0001-8-2-dk-bluedk.jpg');
210+
}
211+
}
212+
213+
img {
214+
max-height: 84px;
215+
margin-block-end: 24px;
216+
&.light {
217+
:root.dark & {
218+
display: none;
219+
}
220+
}
221+
&.dark {
222+
:root:not(.dark) & {
223+
display: none;
224+
}
225+
}
226+
}
227+
228+
.external-links {
229+
padding-bottom: 60px;
230+
231+
:root.dark & {
232+
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 360px);
233+
}
234+
235+
@media (min-width: $bp-medium) {
236+
padding-top: 20px;
237+
padding-bottom: 80px;
238+
}
239+
}
240+
</style>

0 commit comments

Comments
 (0)