feat: Try Terminal (#178)

* Push

* Add changeset

* Push new color change

.changeset/spicy-shoes-explain.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/site-kit': minor
+---
+
+(feat) Add homepage Try section

packages/site-kit/package.json

@@ -61,6 +61,11 @@
 			"default": "./dist/components/index.js",
 			"svelte": "./dist/components/index.js"
 		},
+		"./home": {
+			"types": "./dist/home/index.d.ts",
+			"default": "./dist/home/index.js",
+			"svelte": "./dist/home/index.js"
+		},
 		"./docs": {
 			"types": "./dist/docs/index.d.ts",
 			"default": "./dist/docs/index.js",

packages/site-kit/src/lib/components/index.js

@@ -1,7 +1,5 @@
-export { default as Blurb } from './Blurb.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as Icons } from './Icons.svelte';
 export { default as Section } from './Section.svelte';
 export { default as Shell } from './Shell.svelte';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
-export { default as TryTerminal } from './TryTerminal.svelte';

packages/site-kit/src/lib/components/Blurb.svelte → packages/site-kit/src/lib/home/Blurb.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Section from './Section.svelte';
+	import Section from '../components/Section.svelte';
 </script>
 
 <Section --background="var(--sk-back-1)">

packages/site-kit/src/lib/home/TrySection.svelte

@@ -0,0 +1,92 @@
+<script>
+	import Section from '$lib/components/Section.svelte';
+	import TryTerminal from './TryTerminal.svelte';
+</script>
+
+<div class="try-container">
+	<Section --background="var(--background-2)">
+		<div class="grid" style="--columns: 2">
+			<div class="copy">
+				<h2>see for yourself</h2>
+				<div>
+					Try it locally, <a target="_blank" rel="noreferrer" href="https://sveltekit.new"
+						>on StackBlitz</a
+					>, or with
+					<a target="_blank" href="https://learn.svelte.dev">the interactive tutorial</a>.
+				</div>
+			</div>
+
+			<div class="try">
+				<TryTerminal />
+			</div>
+		</div>
+	</Section>
+</div>
+
+<style>
+	.try-container {
+		--background-2: var(--sk-back-4);
+	}
+
+	:global(body.dark .try-container) {
+		--background-2: #444;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.try-container {
+			--background-2: #444;
+		}
+
+		:global(body.light .try-container) {
+			--background-2: var(--sk-back-4) !important;
+		}
+	}
+
+	.grid {
+		display: grid;
+		gap: 2em;
+		margin: 0 0 4rem 0;
+	}
+
+	.grid:last-child {
+		margin-bottom: 0;
+	}
+
+	.try {
+		width: 100%;
+		margin: 0 auto;
+		font-size: var(--sk-text-m);
+		color: var(--sk-text-1);
+	}
+
+	.copy {
+		text-align: left;
+	}
+
+	h2 {
+		display: inline-block;
+		width: 25rem;
+		margin: 0 0 1rem;
+		font-size: var(--sk-text-xl);
+	}
+
+	@media (min-width: 900px) {
+		.grid {
+			grid-template-columns: repeat(var(--columns), 1fr);
+			gap: 7rem;
+		}
+
+		.copy {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			order: 2;
+		}
+
+		.copy div {
+			max-width: 15em;
+			text-align: center;
+		}
+	}
+</style>

packages/site-kit/src/lib/components/TryTerminal.svelte → packages/site-kit/src/lib/home/TryTerminal.svelte

@@ -25,7 +25,7 @@
 
 	.terminal .chrome {
 		position: relative;
-		background: #666;
+		background: hsl(0, 0%, 10%);
 		color: #999;
 		display: flex;
 		align-items: center;

packages/site-kit/src/lib/home/index.js

@@ -0,0 +1,2 @@
+export { default as Blurb } from './Blurb.svelte';
+export { default as TrySection } from './TrySection.svelte';