site: update terminal section, move survey text lower, lowercase headings (#8745)

Author: benmccann

sites/svelte.dev/src/routes/_components/Demo.svelte

@@ -36,7 +36,7 @@
 </svelte:head>
 
 <Section --background="var(--sk-back-2)">
-	<h3>Why Svelte?</h3>
+	<h3>build with ease</h3>
 
 	<div class="container">
 		<div class="controls">

sites/svelte.dev/src/routes/_components/Supporters/index.svelte

@@ -6,12 +6,12 @@
 
 <Section --background="var(--sk-back-2">
 	<p class="intro">
-		Svelte is free and open source software, made possible <br /> by the work of hundreds of supporters.
+		Svelte is free and open source software, made possible by the work of hundreds of supporters.
 	</p>
 
 	<div class="layout">
 		<div class="contributors blurb">
-			<h3>Contributors</h3>
+			<h3>contributors</h3>
 			<p>
 				<a href="https://github.com/sveltejs/svelte/graphs/contributors">Join us on GitHub</a>
 			</p>
@@ -30,7 +30,7 @@
 		</div>
 
 		<div class="donors blurb">
-			<h3>Donors</h3>
+			<h3>donors</h3>
 			<p><a href="https://opencollective.com/svelte">Support us on OpenCollective</a></p>
 		</div>
 
@@ -53,7 +53,7 @@
 	}
 
 	.intro {
-		max-width: 25em; /* text balancing */
+		max-width: 28em; /* text balancing */
 		margin: 0 0 3.2rem 0;
 	}
 
@@ -148,7 +148,7 @@
 
 	@media (min-width: 1200px) {
 		.intro {
-			max-width: none;
+			max-width: 600px;
 		}
 	}
 </style>

sites/svelte.dev/src/routes/_components/Try.svelte

@@ -8,42 +8,13 @@
 		<div class="grid" style="--columns: 2">
 			<div class="try">
 				<TryTerminal />
-
-				<p class="create-an-app">
-					...or
-					<a target="_blank" rel="noreferrer" href="https://sveltekit.new"> create an app </a>
-					on StackBlitz.
-				</p>
 			</div>
-
-			<div class="description">
-				<p>
-					Svelte is a radical new approach to building user interfaces. Whereas traditional
-					frameworks like React and Vue do the bulk of their work in the <em>browser</em>, Svelte
-					shifts that work into a
-					<em>compile step</em> that happens when you build your app. No more virtual DOM!
-				</p>
-
-				<p>
-					We're proud that Svelte was recently voted the <a
-						href="https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks"
-						>most loved web framework</a
-					>
-					with the
-					<a href="https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/"
-						>most satisfied developers</a
-					>
-					drawing the
-					<a
-						href="https://tsh.io/state-of-frontend/#which-of-the-following-frameworks-would-you-like-to-learn-in-the-future"
-						>most interest in learning it</a
-					>
-					in a trio of industry surveys. We think you'll love it too.
-					<a href="/blog/svelte-3-rethinking-reactivity" class="cta"
-						>Read the introductory blog post</a
-					>
-					to learn more.
-				</p>
+			<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<br />
+					with <a target="_blank" href="https://learn.svelte.dev">the interactive tutorial</a>.
+				</div>
 			</div>
 		</div>
 	</Section>
@@ -85,30 +56,26 @@
 		}
 	}
 
-	.create-an-app {
-		font-size: 0.75em;
-	}
-
-	.grid *::selection {
-		background: hsl(15, 100%, 65%);
-		color: white;
-	}
-
-	.description {
-		color: var(--sk-text-1);
-	}
-
-	.description p:first-child {
-		margin-top: 0;
-	}
-
 	.try {
 		width: 100%;
 		margin: 0 auto;
 		font-size: var(--sk-text-m);
 		color: var(--sk-text-1);
 	}
 
+	.copy {
+		text-align: center;
+		margin: 0 0 8rem;
+	}
+
+	h2 {
+		display: inline-block;
+		width: 25rem;
+		margin: 4rem 0 1rem;
+		font-size: var(--sk-text-xl);
+		text-align: justify;
+	}
+
 	a {
 		color: inherit;
 		text-decoration: underline;

sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte

@@ -7,8 +7,20 @@
 </script>
 
 <Section --background={$theme.current === 'light' ? 'var(--sk-back-4)' : '#222'}>
+	<h3>loved by developers</h3>
+
+	<p>
+		We're proud that Svelte was recently voted the <a
+			href="https://survey.stackoverflow.co/2023/#section-admired-and-desired-web-frameworks-and-technologies"
+			>most admired JS web framework</a
+		>
+		in one industry survey while drawing the most interest in learning it in <a
+		href="https://tsh.io/state-of-frontend/#which-of-the-following-frameworks-would-you-like-to-learn-in-the-future"
+		>two</a> <a href="https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/"
+		>others</a>. We think you'll love it too.
+	</p>
+
 	<section class="whos-using-svelte-container" class:dark={$theme.current === 'dark'}>
-		<h3>Who's using Svelte?</h3>
 		<div class="logos">
 			{#each sorted as { href, filename, alt, style, invert, width, height }}
 				<a target="_blank" rel="noreferrer" {href} class:invert style={style || ''}>
@@ -25,6 +37,17 @@
 	h3 {
 		font-size: var(--sk-text-xl);
 	}
+
+	p {
+		max-width: 28em; /* text balancing */
+	}
+
+	@media (min-width: 1200px) {
+		p {
+			max-width: 600px;
+		}
+	}
+
 	.logos {
 		display: flex;
 		margin: 6rem 0 0 0;
@@ -38,7 +61,7 @@
 		width: calc(100% / calc(2 * var(--row-size) - 1));
 	}
 
-	a {
+	.logos a {
 		width: calc(100% / calc(2 * var(--row-size) - 1));
 		height: auto;
 		display: flex;
@@ -50,12 +73,12 @@
 		grid-column: span 2;
 	}
 
-	a:last-of-type {
+	.logos a:last-of-type {
 		/* hide last item at this screen size, it ruins wrapping */
 		display: none;
 	}
 
-	a.invert {
+	.logos a.invert {
 		--invert: 1;
 	}
 
@@ -73,7 +96,7 @@
 			--row-size: 4;
 		}
 
-		a:last-of-type {
+		.logos a:last-of-type {
 			/* show 14 items instead of 13 — wraps better */
 			display: flex;
 		}