More homepage/features content, screenshots, tweaks

new/resources/css/common.css

@@ -516,6 +516,28 @@ button.primary .hover-splash,
 	text-transform: capitalize;
 }
 
+.construction-images {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 20px;
+}
+
+.construction img {
+	margin-left: 20px;
+	margin-right: 20px;
+	max-width: 100%;
+}
+
+.construction p {
+	width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+	color: #e71414; 
+}
+
+
 
 
 
@@ -545,6 +567,30 @@ footer .wrapper {
 	gap: 75px;
 }
 
+footer .nostalgia {
+	display: block;
+	text-align: center;
+	margin-top: 50px;
+}
+
+footer .nostalgia-badges {
+	gap: 25px;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	display: flex;
+}
+
+footer .nostalgia p {
+	margin: 0 auto 15px;
+	color: #d2f7e7;
+}
+
+footer .w3c {
+	width: 80px;
+	line-height: 0;
+}
+
 footer .logo {
 	display: block;
 	margin-bottom: 15px;
@@ -587,9 +633,6 @@ footer .link-col a:hover {
 
 
 
-
-
-
 @media (max-width: 1150px) {
 	.dropdown {
 		display: none;

new/resources/css/features.css

@@ -93,6 +93,35 @@
 }
 
 
+.split {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-bottom: 75px;
+	align-items: center;
+}
+
+.split > * {
+	flex: 1;
+	margin-right: 50px;
+	min-width: 0;
+	min-width: 300px;
+}
+
+.split img {
+	max-width: 100%;
+}
+
+.split img,
+.benefits img {
+	margin: 2em 0 0;
+	max-width: 100%;
+	box-shadow: 0 6px 10px rgb(0 0 0 / .15);
+	border-radius: 8px;
+}
+
+
+
 /* TODO: Figure this out */
 @media (max-width: 800px) {
 	.feature-row {

new/resources/css/home.css

@@ -295,7 +295,7 @@ div.ap-wrapper:fullscreen div.ap-player {
 	background: white;
 	max-width: 1600px;
 	margin: -350px auto 0;
-	padding: 50px 50px 0;
+	padding: 100px 50px 0;
 	border-radius: 20px;
 	z-index: 0;
 	position: relative;

new/resources/css/marketing.css

@@ -322,7 +322,10 @@ section.dark h3.blue {
 
 
 
-
+.sponsor-experience,
+.sponsorship-primer {
+	max-width: 700px; /* TODO: TEMPORARY! */
+}
 
 
 
@@ -332,7 +335,6 @@ section.dark h3.blue {
 	color: #fff;
 	display: flex;
 	flex-wrap: wrap;
-	max-width: 700px; /* TODO: TEMPORARY! */
 	column-gap: 50px;
 }
 
@@ -400,7 +402,8 @@ section.dark h3.blue {
 	border-radius: 10px;
 	background: linear-gradient(50deg, #670d7f, #531cc7);
 	padding: 40px 50px;
-	color: #edb7e8;
+	margin: 50px auto;
+	color: #ffcffb;
 }
 
 .sponsorship-primer h3 {
@@ -410,10 +413,12 @@ section.dark h3.blue {
 	border: none;
 	padding-left: 0;
 	margin-left: 0;
+	margin-bottom: 0;
+	padding-bottom: 0;
 }
 
 .sponsorship-primer p {
-	margin: 1em 0;
+	margin: 1em 0 1.5em;
 	font-weight: normal;
 }
 

new/resources/js/home.js

@@ -8,8 +8,16 @@ const resp = fetch("/resources/testimonials.json").then(async resp => {
 			const tpl = cloneTemplate('#tpl-testimonial');
 			$('.testimonial-picture', tpl).src = testimonial.picture || "";
 			$('.testimonial-quote', tpl).innerText = `"${testimonial.quote}"`;
-			$('.testimonial-name', tpl).innerText = testimonial.name || "";
+			if (testimonial.username) {
+				$('.testimonial-name', tpl).innerText = ` @${testimonial.username}`;
+			} else {
+				$('.testimonial-name', tpl).innerText = testimonial.name || "";
+			}
 			$('.testimonial-role', tpl).innerText = testimonial.role || "";
+			if (testimonial.org) {
+				$('.testimonial-role', tpl).appendChild(document.createElement("br"));
+				$('.testimonial-role', tpl).appendChild(document.createTextNode(testimonial.org));
+			}
 			$(`.testimonial-col:nth-child(${i%3 + 1})`).append(tpl);
 		}
 	});

new/resources/testimonials.json

@@ -2,7 +2,7 @@
 	{
 		"name": "First last",
 		"role": "9999x developer",
-		"company": "Bigcorp",
+		"org": "Bigcorp",
 		"picture": "https://pbs.twimg.com/profile_images/1624497316366528512/fBMXDuiZ_400x400.jpg",
 		"quote": "Caddy is cool.",
 		"link": "https://..."
@@ -10,7 +10,7 @@
 	{
 		"name": "Brad Warren",
 		"role": "Lead Engineer of Certbot",
-		"company": "Electronic Frontier Foundation (EFF)",
+		"org": "Electronic Frontier Foundation (EFF)",
 		"picture": "https://sea1.discourse-cdn.com/letsencrypt/user_avatar/community.letsencrypt.org/bmw/144/7797_2.png",
 		"quote": "I think we should consider making Caddy the default ACME client recommendation. … It allows for better integration between the TLS server and the ACME management of those certificates. … [ACME clients with] Apache and NGINX are inherently more error prone and brittle than having the TLS server manage its certificates itself. … Caddy is written in a memory-safe language. Adoption of memory-safe programming languages is something that both ISRG and the broader computer security community have been encouraging more and more lately.",
 		"link": "https://community.letsencrypt.org/t/should-our-default-client-recommendation-be-caddy-if-not-why-not/199949?u=mholt"
@@ -18,7 +18,7 @@
 	{
 		"name": "Josh Aas",
 		"role": "Executive Director",
-		"company": "Let's Encrypt",
+		"org": "Let's Encrypt",
 		"picture": "https://sea1.discourse-cdn.com/letsencrypt/user_avatar/community.letsencrypt.org/josh/144/10641_2.png",
 		"quote": "Caddy is impressive. This is what we want, setting up a secure website.",
 		"link": "https://www.youtube.com/watch?v=OE5UhQGg_Fo"
@@ -32,5 +32,10 @@
 		"name": "Robert Melton",
 		"role": "Software Developer",
 		"quote": "Our client was in deep trouble: they were about to fail PCI compliance. We tossed Caddy in front hours before the deadline and went from 40 to 0 security errors in just minutes. … We have put over 1,000 domains on Caddy so far."
+	},
+	{
+		"username": "lost_RD",
+		"quote": "Every time I have a problem, google directs me to a \"mature\" Traefik-based solution that barely works, if at all. Then I come here and there's a Caddy solution that blows it out of the water. New plan for today then. ... It's a simple addition to an already-simple config. Traefik is complexity on complexity and a nightmare to debug.",
+		"link": "https://discord.com/channels/569842713239879680/569842713239879682/1161874875053527081"
 	}
 ]