diff --git a/site/src/routes/index.html b/site/src/routes/index.html index 426ff7718e..7a61826e72 100644 --- a/site/src/routes/index.html +++ b/site/src/routes/index.html @@ -110,11 +110,37 @@ h6 { max-width: 25em; padding: 2.4rem; + } + + .example { + background: var(--second); + color: white; + padding: 0.8rem; + border-radius: var(--border-r); + } + + .example > div:first-child { + padding: 0.8rem; + } + + iframe { + display: block; + width: 100%; + height: 420px; + border: none; border-radius: var(--border-r); font: 300 1rem/1.4 var(--font-mono); text-align: center; } + @media (min-width: 920px) { + .example { + display: grid; + grid-template-columns: 1fr 4fr; + align-items: start; + } + } + @media screen and (min-width: 870px) { .hero h1 { position: relative; @@ -175,6 +201,54 @@ +
+
+

Svelte components are written in HTML files. Just add data.

+
+ + +
+ +
+
+

CSS is component-scoped by default — no more style collisions or specificity wars. Or you can use your favourite CSS-in-JS library.

+
+ + +
+ +
+
+

Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.

+
+ + +
+ +
+
+

Build beautiful UIs with a powerful, performant transition engine built right into the framework.

+
+ + +
+

TODO finish building this page. Ideas: Who's using Svelte? Example code (interactive, ideally). What else?