Update homepage

sites/kit.svelte.dev/package.json

@@ -15,6 +15,7 @@
 		"@sveltejs/amp": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
 		"@sveltejs/site-kit": "^2.1.4",
+		"@types/d3-geo": "^3.0.2",
 		"@types/node": "^16.18.6",
 		"flexsearch": "^0.7.31",
 		"magic-string": "^0.27.0",
@@ -29,5 +30,11 @@
 		"vite": "^3.2.4",
 		"vite-imagetools": "^4.0.11"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@vercel/edge": "^0.1.2",
+		"d3-geo": "^3.0.1",
+		"d3-geo-projection": "^4.0.0",
+		"topojson-client": "^3.1.0"
+	}
 }

sites/kit.svelte.dev/src/routes/+layout.svelte

@@ -5,7 +5,7 @@
 	import { Icon, Icons, Nav, NavItem, PreloadingIndicator, SkipLink } from '@sveltejs/site-kit';
 	import Search from '$lib/search/Search.svelte';
 	import SearchBox from '$lib/search/SearchBox.svelte';
-	import Logo from './svelte-logo.svg';
+	import Logo from './home/svelte-logo.svg';
 </script>
 
 <Icons />

sites/kit.svelte.dev/src/routes/+page.svelte

@@ -1,110 +1,58 @@
 <script>
-	import { Blurb } from '@sveltejs/site-kit';
-	import Hero from './Hero.svelte';
-	import Logotype from './svelte-kit-logotype.svg';
-	import Machine from './svelte-kit-machine.webp?w=1440;800;600;480&format=avif;webp;png&picture';
+	import Section from '@sveltejs/site-kit/components/Section.svelte';
+	import Features from './home/Features.svelte';
+	import Hero from './home/Hero.svelte';
+	import Showcase from './home/Showcase.svelte';
+	import Try from './home/Try.svelte';
+	import Video from './home/Video.svelte';
+	import './home/common.css';
+	import Deployment from './home/Deployment.svelte';
+	import Svelte from './home/Svelte.svelte';
+	import Intro from './home/Intro.svelte';
 </script>
 
 <svelte:head>
-	<title>SvelteKit • The fastest way to build Svelte apps</title>
+	<title>SvelteKit • Web development, streamlined</title>
 
 	<meta name="twitter:title" content="SvelteKit" />
-	<meta name="twitter:description" content="The fastest way to build Svelte apps" />
+	<meta name="twitter:description" content="Web development, streamlined" />
 	<meta name="description" content="SvelteKit is the official Svelte application framework" />
 </svelte:head>
 
-<h1 class="visually-hidden">SvelteKit</h1>
-<Hero
-	title="SvelteKit"
-	logotype={Logotype}
-	tagline="The fastest way to build svelte apps"
-	background={Machine}
-	alt="SvelteKit illustration"
-/>
-
-<div class="blurb-shifter">
-	<Blurb>
-		<div slot="one">
-			<h2>Powered by Svelte</h2>
-			<p>
-				SvelteKit is an application framework powered by Svelte — build bigger apps with a smaller
-				footprint
-			</p>
-
-			<a href="https://svelte.dev" class="cta">learn Svelte</a>
-		</div>
-
-		<div slot="two">
-			<h2>Best of both worlds</h2>
-			<p>
-				All the SEO and progressive enhancement of a server-rendered app, with the slick navigation
-				of an SPA
-			</p>
-
-			<a data-sveltekit-preload-data href="/docs" class="cta">read the docs</a>
-		</div>
-
-		<div slot="three">
-			<h2>Build fast</h2>
-			<p>
-				Hit the ground running with advanced routing, server-side rendering, code-splitting, offline
-				support and more
-			</p>
-
-			<a data-sveltekit-preload-data href="/docs" class="cta">read the docs</a>
-		</div>
-
-		<div class="description" slot="what">
-			<p>
-				SvelteKit is a framework for building web applications of all sizes, with a beautiful
-				development experience and flexible filesystem-based routing.
-			</p>
-
-			<p>
-				Unlike single-page apps, SvelteKit doesn't compromise on SEO, progressive enhancement or the
-				initial load experience — but unlike traditional server-rendered apps, navigation is
-				instantaneous for that app-like feel.
-			</p>
-
-			<p>
-				<a href="https://node.new/sveltekit">Try it on StackBlitz</a> or create a project locally.
-			</p>
-		</div>
-
-		<div slot="how">
-			<pre><code
-					>npm create <span class="orange-highlight">svelte</span>@latest my-app
-cd my-app
-npm install
-npm run dev -- --open</code
-				></pre>
-			<a data-sveltekit-preload-data href="/docs" class="cta">get started</a>
-		</div>
-	</Blurb>
+<div class="home">
+	<h1 class="visually-hidden">SvelteKit</h1>
+
+	<Hero />
+	<Intro />
+	<Try />
+	<Svelte />
+	<Features />
+	<Deployment />
+	<Showcase />
+
+	<footer>
+		<p>
+			SvelteKit is <a target="_blank" rel="noreferrer" href="https://github.com/sveltejs/kit"
+				>free and open source software</a
+			> released under the MIT license.
+		</p>
+	</footer>
 </div>
 
 <style>
-	:global(.hero-container:dir(rtl)) {
-		max-width: 116rem;
-	}
-
-	pre {
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.orange-highlight {
-		color: var(--sk-theme-1);
+	footer {
+		padding: 1em var(--sk-page-padding-side);
+		text-align: center;
 	}
 
-	.blurb-shifter {
-		margin-top: calc(-10rem + var(--sk-page-padding-side));
+	footer p {
+		max-width: 20em;
+		margin: 0 auto;
 	}
 
-	@media (min-width: 900px) {
-		.blurb-shifter {
-			margin-top: -12em;
+	@media (min-width: 680px) {
+		footer p {
+			max-width: none;
 		}
 	}
 </style>