diff --git a/new/index.html b/new/index.html
index 7e633ac..80fe7ee 100644
--- a/new/index.html
+++ b/new/index.html
@@ -33,6 +33,7 @@
 							<div class="action-buttons">
 								<a href="/download" class="button primary">Download</a>
 								<a href="/docs/" class="button cool">Docs<sh></sh></a>
+								<iframe src="https://ghbtns.com/github-btn.html?user=caddyserver&amp;repo=caddy&amp;type=star&amp;count=true&amp;size=large" frameborder="0" scrolling="0" width="160px" height="30px" class="github-stars" style="margin: 0 auto; align-self: center;"></iframe>
 							</div>
 						</div>
 						<div>
@@ -72,7 +73,7 @@
 				<b>By default, </b>Caddy <b>automatically obtains</b> and <b>renews</b> TLS certificates for <b>all your sites.</b>
 			</h2>
 
-			<div class="wrapper cols">
+			<div class="wrapper feature cols">
 				<div class="col">
 					<h3 class="green">Dynamically provision certificates</h3>
 					<p>
@@ -95,81 +96,279 @@
 		</div>
 
 		<section>
-			<div class="section-header">
-				<h2>
-					The <b>most advanced</b> HTTPS server <b>in the world</b>
-				</h2>
-			</div>
-
-			<div class="wrapper cols">
-				<div class="col">
-					<h3 class="green">Dynamically provision certificates</h3>
-					<p>
-						With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
-					</p>
-				</div>
-				<div class="col">
-					<h3 class="purple">Dynamically provision certificates</h3>
-					<p>
-						With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
-					</p>
-				</div>
-				<div class="col">
-					<h3 class="blue">Dynamically provision certificates</h3>
-					<p>
-						With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
-					</p>
+			<div class="section-upset">
+				<div class="wrapper">
+					<h2>
+						The <b>most advanced</b> HTTPS server <b>in the world</b>
+					</h2>
 				</div>
 			</div>
+			<div class="wrapper">
+				<div class="feature cols">
+					<div class="col">
+						<h3 class="green">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+					<div class="col">
+						<h3 class="purple">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+					<div class="col">
+						<h3 class="blue">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+				</div>
 
-			<div class="wrapper demobox">
-				<h2>Experience it</h2>
-				<p>
-					<b>Discover Caddy's automagic HTTPS features in this demo!</b>
-				</p>
-				<p>
-					Point any subdomain named <b><code>caddydemo</code></b> to:
-				</p>
-				<p class="demo-ips">
-					<code>
-						<span class="record-type">A</span>
-						<span class="demo-ip">123.123.123.123</span>
-					</code>
-					<code>
-						<span class="record-type">AAAA</span>
-						<span class="demo-ip">::f00</span>
-					</code>
-				</p>
-				<p>
-					Then <b>visit it</b> in your browser.
-				</p>
-				<p>
-					You'll notice how Caddy <b>provisions a certificate</b> for your domain <b>automatically.</b>
-				</p>
-				<div class="demo-help">
+				<div class="demobox">
+					<h2>Experience it</h2>
 					<p>
-						<b>Not working?</b> Make sure to use a subdomain of a registered domain, not a "sub-subdomain."
-						Verify you have created the public DNS records shown above with the correct values.
-						You may have to wait to allow time for propagation. Consult your DNS provider's documentation or support for more information.
+						<b>Discover Caddy's automagic HTTPS features.</b>
 					</p>
 					<p>
-						<b>Example subdomains that could work:</b> <code>caddydemo.example.net</code>, <code>caddydemo.example.co.uk</code>
+						Point any subdomain named <b><code>caddydemo</code></b> to:
+					</p>
+					<p class="demo-ips">
+						<code>
+							<span class="record-type">A</span>
+							<span class="demo-ip">1.2.3.4</span>
+						</code>
+						<code>
+							<span class="record-type">AAAA</span>
+							<span class="demo-ip">::f00</span>
+						</code>
 					</p>
 					<p>
-						(Caddy is capable of serving TLS for any domains and IPs. This demo is arbitrarily restricted.)
+						Then <b>visit it</b> in your browser.
 					</p>
+					<p>
+						You'll notice how Caddy <b>provisions a certificate</b> for your domain <b>automatically.</b>
+					</p>
+					<div class="demo-help">
+						<p>
+							Caddy is capable of serving TLS for any domains and IPs. This demo is intentionally restricted.
+						</p>
+						<p>
+							<b>Not working?</b> Make sure to use a subdomain of a registered domain, not a "sub-subdomain."
+							Verify you have created the public DNS records shown above with the correct values.
+							You may have to allow time for propagation. Consult your DNS provider's documentation or support for more information.
+						</p>
+						<p>
+							<b>Example subdomains that could work:</b> <code>caddydemo.example.net</code>, <code>caddydemo.example.co.uk</code>
+						</p>
+					</div>
 				</div>
 			</div>
 		</section>
 
-		<section class="dark-section">
+		<section class="diagonal down dark feature">
 			<div class="wrapper">
 				<h2>
-					Flexible configuration for any production environment
+					A truly forward-thinking reverse proxy
 				</h2>
+				<p>
+					Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+					Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+				</p>
+				<div class="cols">
+					<div class="col">
+						<h3 class="green">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+					<div class="col">
+						<h3 class="purple">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+					<div class="col">
+						<h3 class="blue">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+				</div>
+
+
+				<h2>
+					Production-grade static file server
+				</h2>
+				<p>
+					Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+					Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+				</p>
+				<div class="cols">
+					<div class="col">
+						<h3 class="green">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+					<div class="col">
+						<h3 class="purple">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+					<div class="col">
+						<h3 class="blue">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+				</div>
 			</div>
 		</section>
 
+		<section class="feature">
+			<div class="wrapper">
+				<h2>
+					Flexible configuration for all production environments
+				</h2>
+				<p>
+					Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+					Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+				</p>
+				<div class="cols">
+					<div class="col">
+						<h3 class="green">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+					<div class="col">
+						<h3 class="purple">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+					<div class="col">
+						<h3 class="blue">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+				</div>
+			</div>
+		</section>
+
+
+
+		<section class="diagonal up light feature">
+			<div class="wrapper">
+				<h2>
+					Unparalleled extensibility
+				</h2>
+				<p>
+					Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+					Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 
+				</p>
+				<div class="cols">
+					<div class="col">
+						<h3 class="green">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+					<div class="col">
+						<h3 class="purple">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+					<div class="col">
+						<h3 class="blue">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+				</div>
+			</div>
+		</section>
+
+
+		<section class="feature">
+			<div class="wrapper">
+				<h2>
+					The gold standard web server
+				</h2>
+				<p>
+					Caddy keeps your sites up when other servers let you down.
+				</p>
+				<div class="cols">
+					<div class="col">
+						<h3 class="green">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+					<div class="col">
+						<h3 class="purple">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+					<div class="col">
+						<h3 class="blue">Dynamically provision certificates</h3>
+						<p>
+							With On-Demand TLS, only Caddy obtains, renews, and maintains certificates on-the-fly during TLS handshakes. Perfect for customer-owned domains.
+						</p>
+					</div>
+				</div>
+			</div>
+		</section>
+
+
+		<footer>
+			<div class="wrapper">
+				<div>
+					<img src="/resources/images/logo-dark.svg" class="logo" alt="Caddy web server">
+					<p>
+						An awesome <a href="https://github.com/caddyserver/caddy">open source</a> project
+						that relies on <a href="/sponsor">sponsors</a>.
+					</p>
+					<p>
+						<a href="https://usefathom.com/ref/AUKNWU">Privacy-respecting analytics</a> by Fathom
+					</p>
+					<br>
+					<p>
+						&copy; {{now | date "2006"}} Stack Holdings. All rights reserved.
+					</p>
+				</div>
+				<div class="link-col" style="margin-left: auto;">
+					<div class="col-header">Project</div>
+					<a href="#">Features</a>
+					<a href="#">Download</a>
+					<a href="#">Documentation</a>
+					<a href="#">Get involved</a>
+				</div>
+				<div class="link-col">
+					<div class="col-header">Business services</div>
+					<a href="#">Support</a>
+					<a href="#">Development</a>
+					<a href="#">Training</a>
+				</div>
+				<div class="link-col">
+					<div class="col-header">Community</div>
+					<a href="https://caddy.community">Forum</a>
+					<a href="https://github.com/caddyserver">GitHub</a>
+					<a href="https://twitter.com/caddyserver">Twitter / X</a>
+					<a href="/research">Research</a>
+				</div>
+				<div class="link-col" style="margin-right: auto;">
+					<div class="col-header">Contact</div>
+					<a href="https://caddy.community">Sales</a>
+					<a href="https://github.com/caddyserver">Email</a>
+				</div>
+			</div>
+		</footer>
 
 		<script>
 			AsciinemaPlayer.create('/resources/321140.cast', $('#demo'), {
diff --git a/new/resources/css/home.css b/new/resources/css/home.css
index c95d5a4..64b4b85 100644
--- a/new/resources/css/home.css
+++ b/new/resources/css/home.css
@@ -1,7 +1,31 @@
 body {
 	background-color: #123245;
+	background-image: none;
 }
 
+h1,
+h2,
+h3,
+.bgtext,
+.demobox {
+	font-family: Poppins, ui-rounded;
+}
+
+p,
+h2 {
+	max-width: 800px;
+}
+
+h2 {
+	font-size: 50px;
+	font-weight: 600;
+}
+
+.feature h2:not(:first-child) {
+	margin-top: 100px;
+}
+
+
 .hero {
 	background-color: hsla(201,63%,15%,1);
 	background-image:
@@ -94,7 +118,7 @@ body {
 	position: absolute;
 	inset: 0px;
 	background: conic-gradient(from var(--a), rgb(207, 19, 175) 0.42%, #ee6907 59.24%, #70d52c);
-	filter: blur(35px);
+	filter: blur(25px);
 	transform: translate(0px,0px);
 
 	--a: 0deg; /*  needed for firefox to have a valid output ? */
@@ -110,8 +134,8 @@ body {
 
 
 h1 {
-	font-family: Poppins;
 	font-size: 120px;
+	font-weight: 800;
 	text-transform: uppercase;
 	color: #65D1C6;
 	line-height: .9;
@@ -170,6 +194,7 @@ h1 .sub-h1 {
 
 .asides h2 {
 	text-align: left;
+	max-width: none;
 }
 
 .asides p {
@@ -294,7 +319,6 @@ div.ap-wrapper:fullscreen div.ap-player {
 .sponsors-leaders h3 {
 	color: #EB5EDD;
 	font-weight: normal;
-	font-family: Poppins, ui-rounded;
 	font-size: 18px;
 	margin-bottom: 1em;
 }
@@ -309,8 +333,7 @@ div.ap-wrapper:fullscreen div.ap-player {
 }
 
 .sponsor-logos img {
-	width: 100%;
-	max-height: 2em;
+	height: 2em;
 }
 
 
@@ -324,7 +347,6 @@ div.ap-wrapper:fullscreen div.ap-player {
 	z-index: 0;
 	padding-top: 14vw;
 	padding-bottom: 300px;
-	font-family: Poppins, ui-rounded;
 }
 
 .wavy-top::before {
@@ -344,9 +366,9 @@ div.ap-wrapper:fullscreen div.ap-player {
 	color: #86A6A3;
 	opacity: .5;
 	width: 90%;
-	/* min-width: 65vw; */
+	min-width: 65vw;
 	max-width: 1200px;
-	font-size: 15vw;
+	font-size: min(15vw, 300px);
 	text-align: center;
 	line-height: .85;
 	font-weight: 800;
@@ -366,8 +388,7 @@ div.ap-wrapper:fullscreen div.ap-player {
 
 .wavy-top h2 {
 	color: #003E4B;
-	/* font-size: 52px; */
-	font-size: 3vw;
+	font-size: min(3vw, 52px);
 	text-align: center;
 	width: 60vw;
 	max-width: 950px;
@@ -377,37 +398,48 @@ div.ap-wrapper:fullscreen div.ap-player {
 }
 
 .wavy-top h2 b,
-.section-header b {
+.section-upset b {
 	font-weight: 800;
 }
 
 
+
+.feature p {
+	font-weight: 600;
+	margin-top: 2em;
+	margin-bottom: 4em;
+	line-height: 1.65;
+}
+
+
+
 section {
-	padding: 5em;
+	padding: 200px;
 	background: white;
 }
 
-.section-header {
+.section-upset {
 	background: white;
-	margin-top: -250px;
+	max-width: 1600px;
+	margin: -350px auto 0;
 	padding: 50px 100px 0;
 	border-radius: 20px;
 	z-index: 0;
 	position: relative;
-	box-shadow: 0 -15px 20px -10px rgb(0 0 0 / .1);
+	box-shadow: 0 -15px 20px -2px rgb(0 0 0 / .1);
 }
 
-.section-header h2 {
+.section-upset h2 {
 	background: linear-gradient(195deg, rgb(6, 79, 107) 25%, rgba(139, 189, 224, 1) 49%, rgb(72, 129, 164)50%, rgb(8, 44, 58) 100%);
 	-webkit-background-clip: text;
 	background-clip: text;
 	-webkit-text-fill-color: transparent;
-	
-	font-family: Poppins;
+
 	font-size: 80px;
 	font-weight: 600;
 	text-align: center;
 	margin-bottom: 100px;
+	max-width: none;
 }
 
 
@@ -416,6 +448,11 @@ section {
 	flex-wrap: wrap;
 	justify-content:space-around;
 	gap: 50px;
+	color: #424242;
+}
+
+section.dark .cols {
+	color: #c1ced9;
 }
 
 .col {
@@ -427,10 +464,10 @@ section {
 
 .col h3 {
 	font-weight: 600;
-	font-size: 18px;
+	font-size: 20px;
 	border-left: 2px solid;
-	padding-top: .25em;
-	padding-bottom: .25em;
+	padding-top: .15em;
+	padding-bottom: .15em;
 	margin-bottom: 10px;
 
 	/* shove the border over but leave space between border and content */
@@ -441,23 +478,26 @@ section {
 .col p {
 	font-family: Inter;
 	font-size: 90%;
-	line-height: 1.6;
-	color: #424242;
+	font-weight: normal;
 }
 
 .col .green {
-	color: #389564;
-	border-color: #389564;
+	color: #23a460; border-color: #23a460;
 }
-
 .col .purple {
-	color: rgb(105, 30, 105);
-	border-color: rgb(105, 30, 105);
+	color: rgb(151, 39, 151); border-color: rgb(151, 39, 151);
 }
-
 .col .blue {
-	color: rgb(34, 94, 143);
-	border-color: rgb(34, 94, 143);
+	color: rgb(14, 110, 189); border-color: rgb(14, 110, 189);
+}
+section.dark .col .green {
+	color: #41e68f; border-color: #41e68f;
+}
+section.dark .col .purple {
+	color: rgb(204, 82, 204); border-color: rgb(204, 82, 204);
+}
+section.dark .col .blue {
+	color: rgb(81, 165, 234); border-color: rgb(81, 165, 234);
 }
 
 
@@ -468,7 +508,6 @@ section {
 	position: relative;
 	color: #003e4b;
 	background: radial-gradient(circle at 200px 100px, rgba(184,255,239,1) 0%, rgba(234,249,255,1) 280px);
-	font-family: Poppins, ui-rounded;
 	font-size: 20px;
 	padding: 50px;
 	border-radius: 15px;
@@ -481,6 +520,7 @@ section {
 	font-size: 90px;
 	font-weight: 700;
 	white-space: nowrap;
+	max-width: none;
 
 	background: linear-gradient(0deg, rgba(27,180,186,1) 10%, rgba(0,61,75,1) 50%);
 	-webkit-background-clip: text;
@@ -528,19 +568,89 @@ section {
 }
 
 
-.dark-section {
+section.dark,
+footer {
 	background-color: #002020;
 	color: #fff;
 }
 
-.dark-section h2 {
-	font-family: Poppins, ui-rounded;
-	font-size: 50px;
-	font-weight: 600;
-	max-width: 800px;
+section.light {
+	background-color: #f5f8f9;
 }
 
 
+.diagonal {
+	padding: 200px 0;
+	margin: 25px 0;
+}
+
+.diagonal.up { transform: skewY(-5deg); }
+.diagonal.up > * { transform: skewY(5deg); }
+
+.diagonal.down { transform: skewY(5deg); }
+.diagonal.down > * { transform: skewY(-5deg); }
+
+
+
+
+footer {
+	padding: 75px 0;
+	font-size: 14px;
+	color: #7c9393;
+	line-height: 1.5;
+}
+
+footer p {
+	margin: 1em 0;
+}
+
+footer a {
+	color: inherit;
+	font-weight: bold;
+	transition: .25s;
+}
+
+footer a:hover {
+	color: #76b8b8;
+}
+
+footer .wrapper {
+	display: flex;
+	gap: 75px;
+}
+
+footer .logo {
+	display: block;
+	margin-bottom: 15px;
+	height: 40px;
+}
+
+footer .link-col {
+	font-size: initial;
+	line-height: 2;
+}
+
+footer .col-header {
+	font-size: 110%;
+	color: white;
+	font-weight: 700;
+	margin-bottom: .5em;
+}
+
+footer .link-col a {
+	display: block;
+	color: #b7c8c8;
+	font-weight: 500;
+	text-decoration: none;
+}
+
+footer .link-col a:hover {
+	color: #c8ecf5;
+}
+
+
+
+
 
 @media (max-width: 720px) {
 	.display {
diff --git a/new/resources/images/favicon.png b/new/resources/images/favicon.png
new file mode 100644
index 0000000..6e87127
Binary files /dev/null and b/new/resources/images/favicon.png differ