new homepage

apps/svelte.dev/scripts/get_contributors.js

@@ -22,7 +22,7 @@ try {
 	const base = `https://api.github.com/repos/sveltejs/svelte/contributors`;
 	const { GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET } = process.env;
 
-	const MAX = 24;
+	const MAX = 48;
 	const SIZE = 128;
 
 	const contributors = [];

apps/svelte.dev/scripts/get_donors.js

@@ -18,7 +18,7 @@ try {
 		process.exit(0);
 	}
 } catch {
-	const MAX = 24;
+	const MAX = 48;
 	const SIZE = 128;
 
 	const res = await fetch('https://opencollective.com/svelte/members/all.json');

apps/svelte.dev/src/routes/+page.svelte

@@ -1,14 +1,13 @@
 <script>
-	import { Blurb, Footer, TrySection } from '@sveltejs/site-kit/home';
+	import { Footer } from '@sveltejs/site-kit/home';
+	import { Section } from '@sveltejs/site-kit/components';
 	import Hero from './_home/Hero.svelte';
 	import Supporters from './_home/Supporters/index.svelte';
-	import WhosUsingSvelte from './_home/WhosUsingSvelte/index.svelte';
-	import Svelte from './_home/Svelte.svelte';
-	import Features from './_home/Features.svelte';
-	import Deployment from './_home/Deployment.svelte';
-	import Showcase from './_home/Showcase.svelte';
-	import './_home/common.css';
-	import HeroSvelteKit from './_home/HeroSvelteKit.svelte';
+	import Testimonials from './_home/Testimonials.svelte';
+	import Companies from './_home/Companies.svelte';
+	import Video from './_home/Video.svelte';
+	import Community from './_home/Community.svelte';
+	import './_home/common.css'; /* TODO wut */
 </script>
 
 <svelte:head>
@@ -24,99 +23,38 @@
 
 	<Hero />
 
-	<Blurb>
-		{#snippet one()}
-			<div>
-				<h2>fast</h2>
-				<p>
-					Svelte shifts as much work as possible out of the browser and into your build step. No
-					more manual optimisations — just faster, smaller and more efficient apps.
-				</p>
-			</div>
-		{/snippet}
+	<Testimonials />
 
-		{#snippet two()}
-			<div>
-				<h2>fun</h2>
-				<p>
-					Write concise components using languages you already know — HTML, CSS and JavaScript. Get
-					things done without fighting the framework. Code with joy.
-				</p>
-			</div>
-		{/snippet}
+	<Companies />
 
-		{#snippet three()}
-			<div>
-				<h2>flexible</h2>
-				<p>
-					Svelte scales from tiny widgets all the way to big full-stack applications. State
-					management, motion primitives, form bindings and more — all built-in.
-				</p>
-			</div>
-		{/snippet}
-	</Blurb>
+	<Section>
+		<figure>
+			<Video />
+			<figcaption>
+				<a href="https://www.offerzen.com/community/svelte-origins-documentary"
+					>Watch the full Svelte Origins documentary</a
+				>
+			</figcaption>
+		</figure>
+	</Section>
 
-	<TrySection />
-
-	<Svelte />
-
-	<HeroSvelteKit />
-
-	<Features />
-
-	<Deployment />
-
-	<Showcase />
-
-	<WhosUsingSvelte />
+	<Community />
 
 	<Supporters />
 
-	<Footer
-		links={{
-			resources: [
-				{
-					title: 'documentation',
-					href: '/docs'
-				},
-				{
-					title: 'tutorial',
-					href: '/tutorial'
-				},
-				{
-					title: 'playground',
-					href: '/playground'
-				},
-				{
-					title: 'blog',
-					href: '/blog'
-				}
-			],
-			connect: [
-				{
-					title: 'github',
-					href: 'https://github.com/sveltejs/svelte'
-				},
-				{
-					title: 'opencollective',
-					href: 'https://opencollective.com/svelte'
-				},
-				{
-					title: 'discord',
-					href: '/chat'
-				},
-				{
-					title: 'twitter',
-					href: 'https://twitter.com/sveltejs'
-				}
-			]
-		}}
-	>
-		{#snippet license()}
-			<span>
-				Svelte is <a href="https://github.com/sveltejs/svelte">free and open source software</a> released
-				under the MIT license
-			</span>
-		{/snippet}
-	</Footer>
+	<Footer />
 </div>
+
+<style>
+	figcaption {
+		font: var(--sk-font-body-small);
+	}
+
+	.home :global {
+		@media (min-width: 800px) {
+			h2 {
+				font: var(--sk-font-h1);
+			}
+		}
+	}
+</style>

apps/svelte.dev/src/routes/_home/Community.svelte

@@ -0,0 +1,52 @@
+<script>
+	import { Section } from '@sveltejs/site-kit/components';
+</script>
+
+<Section --max-width="200rem">
+	<h2>join our friendly community</h2>
+	<p>
+		Our sister organisation, <a href="https://www.sveltesociety.dev/">Svelte Society</a>, organises
+		events around the globe.
+	</p>
+	<p>Find your chapter and join us in <a href="/chat">our Discord server</a>.</p>
+
+	<figure>
+		<enhanced:img
+			src="./summit.png"
+			alt="Photos by Marcel Cutts from the 2022 Svelte Summit in Stockholm"
+		/>
+		<figcaption>Photos by <a href="https://x.com/marcelcutts">Marcel Cutts</a></figcaption>
+	</figure>
+</Section>
+
+<style>
+	figure {
+		position: relative;
+	}
+
+	figcaption {
+		position: relative;
+		top: max(-2vw, calc(-0.02 * (120rem + 2 * var(--sk-page-padding-side))));
+		font: var(--sk-font-body-small);
+		margin: 0 auto;
+		padding: 0 var(--sk-page-padding-side);
+		color: var(--sk-text-4);
+		text-align: center;
+
+		a {
+			text-wrap: nowrap;
+			color: inherit;
+			text-decoration: underline;
+		}
+	}
+
+	img {
+		width: 100%;
+		height: auto;
+	}
+
+	h2,
+	p {
+		text-align: center;
+	}
+</style>

apps/svelte.dev/src/routes/_home/Companies.svelte

@@ -0,0 +1,86 @@
+<div class="companies">
+	<div class="wing">
+		<div class="logos">
+			<enhanced:img src="./companies/ikea.svg" alt="Ikea logo" />
+			<enhanced:img src="./companies/mullvad.svg" alt="Mullvad logo" />
+			<enhanced:img src="./companies/stack-overflow.svg" alt="Mullvad logo" />
+			<enhanced:img src="./companies/yelp.svg" alt="New York Times logo" />
+			<enhanced:img src="./companies/square.svg" alt="Mullvad logo" />
+			<enhanced:img src="./companies/apple.svg" alt="Apple logo" />
+		</div>
+	</div>
+	<h2>used by companies you've heard of</h2>
+	<div class="wing">
+		<div class="logos">
+			<enhanced:img src="./companies/spotify.svg" alt="Spotify logo" />
+			<enhanced:img src="./companies/nyt.svg" alt="New York Times logo" />
+			<enhanced:img src="./companies/logitech.svg" alt="Logitech logo" />
+			<enhanced:img src="./companies/decathlon.svg" alt="Decathlon logo" />
+			<enhanced:img src="./companies/1password.svg" alt="1password logo" />
+		</div>
+	</div>
+</div>
+
+<style>
+	.companies {
+		display: grid;
+		gap: 1rem;
+		align-items: center;
+		margin: 15rem 0 5rem 0;
+		mask-size: 100%;
+		mask-image: radial-gradient(ellipse 110rem 500%, white, white 70%, transparent);
+	}
+
+	h2 {
+		width: 100%;
+		text-align: center;
+		margin: 0 auto;
+		position: absolute;
+		z-index: 2;
+		filter: drop-shadow(0 0 1rem var(--sk-back-1)) drop-shadow(0 0 1rem var(--sk-back-1));
+		padding: 0 var(--sk-page-padding-side);
+	}
+
+	.wing {
+		position: relative;
+		height: 4rem;
+	}
+
+	.logos {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		top: 0;
+		gap: 4rem;
+		opacity: 0.5;
+
+		.wing:first-child & {
+			right: 0;
+		}
+
+		.wing:last-child & {
+			left: 0;
+		}
+
+		img {
+			height: 100%;
+			width: auto;
+		}
+	}
+
+	@media (min-width: 800px) {
+		.companies {
+			grid-template-columns: 1fr auto 1fr;
+			align-items: center;
+		}
+
+		h2 {
+			position: relative;
+			width: 12em;
+		}
+
+		.logos {
+			position: absolute;
+		}
+	}
+</style>