From ea2061dc0ff73d2682c402c3f5124ee45de41419 Mon Sep 17 00:00:00 2001
From: Matthew Holt <mholt@users.noreply.github.com>
Date: Wed, 20 Sep 2023 16:27:38 -0600
Subject: [PATCH] Work on homepage a little more

---
 new/includes/header.html                      |   2 +-
 new/index.html                                |  34 +++++
 new/resources/css/common.css                  |  15 ++-
 new/resources/css/home.css                    | 119 +++++++++++++++++-
 new/resources/images/home-curvey-bg.svg       |  18 +++
 new/resources/images/sponsors/stripe-dark.svg |  19 +++
 .../images/sponsors/zerossl-dark.svg          |  41 ++++++
 src/includes/head.html                        |   5 +
 8 files changed, 250 insertions(+), 3 deletions(-)
 create mode 100644 new/resources/images/home-curvey-bg.svg
 create mode 100644 new/resources/images/sponsors/stripe-dark.svg
 create mode 100644 new/resources/images/sponsors/zerossl-dark.svg

diff --git a/new/includes/header.html b/new/includes/header.html
index 362c1fe..d59d623 100644
--- a/new/includes/header.html
+++ b/new/includes/header.html
@@ -22,7 +22,7 @@
 		</div>
 	</div>
 	<div class="navbar wrapper">
-		<a href="/">
+		<a href="/" class="logo-link">
 			<img src="/resources/images/logo-light.svg" class="logo" id="logo-light" alt="Caddy web server">
 			<img src="/resources/images/logo-dark.svg" class="logo" id="logo-dark" alt="Caddy web server">
 		</a>
diff --git a/new/index.html b/new/index.html
index 1469511..8d1e6d1 100644
--- a/new/index.html
+++ b/new/index.html
@@ -44,11 +44,45 @@
 							</div>
 						</div>
 					</div>
+
+					<div class="sponsors-leaders">
+						<h3>Sponsored by <b>leaders</b></h3>
+						<div class ="sponsor-logos">
+							<a href="https://zerossl.com">
+								<img src="/resources/images/sponsors/zerossl-dark.svg" alt="ZeroSSL">
+							</a>
+							<a href="https://stripe.com">
+								<img src="/resources/images/sponsors/stripe-dark.svg" alt="Stripe">
+							</a>
+						</div>
+						<a href="/sponsor" class="button purple">Sponsorship info</a>
+					</div>
 				</div>
 			</div>
 		</div>
 
 
+		<div class="wavy-top">
+			<div class="bgtext">
+				Every<br>
+				<span class="site-on">site on</span><br>
+				HTTPS
+			</div>
+			<h2>
+				<b>By default, </b>Caddy <b>automatically obtains</b> and <b>renews</b> TLS certificates for <b>all your domains.</b>
+			</h2>
+			<p>
+				Check this out
+				<br><br>
+				Testing Testing
+				<br><br>
+				Test
+				<br><br>
+				Another test
+			</p>
+		</div>
+
+
 		<script>
 			AsciinemaPlayer.create('/resources/321140.cast', $('#demo'), {
 				preload: true,
diff --git a/new/resources/css/common.css b/new/resources/css/common.css
index b754913..595ed81 100644
--- a/new/resources/css/common.css
+++ b/new/resources/css/common.css
@@ -244,6 +244,10 @@ header nav ul {
 	vertical-align: middle;
 }
 
+.logo-link {
+	line-height: 0; /* avoid extra space along the bottom for some reason */
+}
+
 .logo {
 	height: 2.25em;
 }
@@ -265,7 +269,7 @@ button,
 	/* necessary for hoversplash: */
 	position: relative;
 	overflow: hidden;
-	display: flex;
+	display: inline-flex;
 	align-items: center;
 }
 
@@ -289,6 +293,15 @@ button:active,
 	box-shadow: 1px 1px 3px inset rgba(0, 0, 0, 0.2);
 }
 
+button.purple,
+.button.purple {
+	border: none;
+	background: linear-gradient(165deg, rgba(170,81,212,1) 20%, rgba(37,159,235,1) 100%);
+	color: white;
+	font-weight: bold;
+	font-size: 90%;
+}
+
 
 @keyframes hoverSplash {
 	0% {
diff --git a/new/resources/css/home.css b/new/resources/css/home.css
index c04b4df..c14e17d 100644
--- a/new/resources/css/home.css
+++ b/new/resources/css/home.css
@@ -1,3 +1,7 @@
+body {
+	background-color: #123245;
+}
+
 .hero {
 	background-color: hsla(201,63%,15%,1);
 	background-image:
@@ -5,6 +9,8 @@
 		radial-gradient(at 5% 30%, hsla(136,95%,15%,1) 0px, transparent 50%),
 		radial-gradient(at 91% 35%, hsla(214,83%,25%,1) 0px, transparent 75%),
 		radial-gradient(at 82% 73%, hsla(265,72%,20%,1) 0px, transparent 50%);
+	
+	padding-bottom: 20vw;
 }
 
 .hero .vertical-padding {
@@ -231,7 +237,7 @@ div.ap-wrapper:fullscreen div.ap-player {
 .display code.dark,
 .ap-player {
 	/* background: #333 linear-gradient(135deg, rgba(0, 0, 0, 0) 0%,rgba(125, 125, 125, 0.3) 46%,rgba(45, 45, 45, 0.8) 46.8%,rgba(0, 0, 0, 0) 100%); */
-	background: rgb(0 0 0 / .6) linear-gradient(135deg, transparent 0%, rgb(200 200 200 / 0.25) 46%, rgb(200 200 200 / .15) 46.5%, transparent 100%);
+	background: rgb(0 0 0 / .7) linear-gradient(135deg, transparent 0%, rgb(200 200 200 / 0.25) 46%, rgb(200 200 200 / .15) 46.5%, transparent 100%);
 	color: #fff;
 }
 
@@ -261,6 +267,117 @@ div.ap-wrapper:fullscreen div.ap-player {
 }
 
 
+
+.sponsors-leaders {
+	position: relative;
+	text-align: center;
+	margin: 75px auto;
+	padding: 35px;
+}
+
+.sponsors-leaders h3 {
+	color: #EB5EDD;
+	font-weight: normal;
+	font-family: Poppins, ui-rounded;
+	font-size: 18px;
+	margin-bottom: 1em;
+}
+
+.sponsors-leaders::before {
+	content: "";
+	position: absolute;
+	padding: 40px;
+	background-color: rgb(207 27 189 / .2);
+	filter: blur(10px);
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	pointer-events: none;
+}
+
+.sponsor-logos {
+	display: flex;
+	gap: 50px;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 1em;
+}
+
+.sponsor-logos img {
+	width: 100%;
+	max-height: 2em;
+}
+
+
+
+
+
+.wavy-top {
+	background-color: #C4D5E0;
+	margin-top: -10vw;
+	position: relative;
+	z-index: 0;
+	padding-top: 11vw;
+	font-family: Poppins, ui-rounded;
+}
+
+.wavy-top::before {
+	content: "";
+	position: absolute;
+	top: -16vw;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-image: url('/resources/images/home-curvey-bg.svg');
+	background-repeat: no-repeat;
+	background-size: 100% auto;
+	z-index: -1;
+}
+
+.bgtext {
+	color: #86A6A3;
+	opacity: .5;
+	width: 90%;
+	min-width: 65vw;
+	max-width: 1200px;
+	font-size: 15vw;
+	text-align: center;
+	line-height: .85;
+	font-weight: 800;
+	text-transform: uppercase;
+	mix-blend-mode: color-burn;
+	pointer-events: none;
+	
+	position: absolute;
+	top: 40px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.bgtext .site-on {
+	font-size: 85%;
+}
+
+.wavy-top h2 {
+	color: #003E4B;
+	font-size: 52px;
+	text-align: center;
+	max-width: 950px;
+	font-weight: normal;
+	margin: 0 auto;
+	line-height: 2em;
+}
+
+.wavy-top h2 b {
+	font-weight: 800;
+}
+
+
+
+
+
 @media (max-width: 720px) {
 	.display {
 		margin-top: 50px;
diff --git a/new/resources/images/home-curvey-bg.svg b/new/resources/images/home-curvey-bg.svg
new file mode 100644
index 0000000..22b4c7b
--- /dev/null
+++ b/new/resources/images/home-curvey-bg.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 939 1011" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
+	<g>
+		<path d="M14.129,140.755L0.105,137.072L-0,107.542L21.496,112.707C191.726,157.42 354.607,118.243 505.391,74.798C661.081,29.939 804.376,-18.996 939.021,7.472L939,9.429L939,38.78L924.043,35.849C802.463,10.237 664.073,59.257 513.42,102.664C357.863,147.485 189.747,186.883 14.129,140.755Z" style="fill:url(#_Linear1);"/>
+		<path d="M939,33.014C792.052,-19.345 386.487,159.402 186.064,159.402C90.914,159.402 0.217,137.033 0.217,137.033L0.132,1011L939,1011L939,33.014Z" style="fill:url(#_Linear2);"/>
+	</g>
+	<defs>
+		<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(994.138,0,0,545.232,-12.3299,-13.0835)">
+			<stop offset="0" style="stop-color:rgb(0,83,166);stop-opacity:1"/>
+			<stop offset="1" style="stop-color:rgb(10,112,29);stop-opacity:1"/>
+		</linearGradient>
+		<linearGradient id="_Linear2" x1="0.31" y1="0.04" x2="0.69" y2="0.96">
+			<stop offset="7%" stop-color="#f7fafc"/>
+			<stop offset="66%" stop-color="#c4d5e0"/>
+		</linearGradient>
+	</defs>
+</svg>
diff --git a/new/resources/images/sponsors/stripe-dark.svg b/new/resources/images/sponsors/stripe-dark.svg
new file mode 100644
index 0000000..cbef3c8
--- /dev/null
+++ b/new/resources/images/sponsors/stripe-dark.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 71 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-3877.07,-3945.82)">
+        <g transform="matrix(0.875155,0,0,2.13261,3732.24,3013.56)">
+            <g transform="matrix(0.224703,0,0,0.0922108,153.356,433.824)">
+                <g>
+                    <path d="M414,113.4C414,87.8 401.6,67.6 377.9,67.6C354.1,67.6 339.7,87.8 339.7,113.2C339.7,143.3 356.7,158.5 381.1,158.5C393,158.5 402,155.8 408.8,152L408.8,132C402,135.4 394.2,137.5 384.3,137.5C374.6,137.5 366,134.1 364.9,122.3L413.8,122.3C413.8,121 414,115.8 414,113.4ZM364.6,103.9C364.6,92.6 371.5,87.9 377.8,87.9C383.9,87.9 390.4,92.6 390.4,103.9L364.6,103.9Z" style="fill:white;"/>
+                    <path d="M301.1,67.6C291.3,67.6 285,72.2 281.5,75.4L280.2,69.2L258.2,69.2L258.2,185.8L283.2,180.5L283.3,152.2C286.9,154.8 292.2,158.5 301,158.5C318.9,158.5 335.2,144.1 335.2,112.4C335.1,83.4 318.6,67.6 301.1,67.6ZM295.1,136.5C289.2,136.5 285.7,134.4 283.3,131.8L283.2,94.7C285.8,91.8 289.4,89.8 295.1,89.8C304.2,89.8 310.5,100 310.5,113.1C310.5,126.5 304.3,136.5 295.1,136.5Z" style="fill:white;"/>
+                    <path d="M223.8,61.7L248.9,56.3L248.9,36L223.8,41.3L223.8,61.7Z" style="fill:white;"/>
+                    <rect x="223.8" y="69.3" width="25.1" height="87.5" style="fill:white;"/>
+                    <path d="M196.9,76.7L195.3,69.3L173.7,69.3L173.7,156.8L198.7,156.8L198.7,97.5C204.6,89.8 214.6,91.2 217.7,92.3L217.7,69.3C214.5,68.1 202.8,65.9 196.9,76.7Z" style="fill:white;"/>
+                    <path d="M146.9,47.6L122.5,52.8L122.4,132.9C122.4,147.7 133.5,158.6 148.3,158.6C156.5,158.6 162.5,157.1 165.8,155.3L165.8,135C162.6,136.3 146.8,140.9 146.8,126.1L146.8,90.6L165.8,90.6L165.8,69.3L146.8,69.3L146.9,47.6Z" style="fill:white;"/>
+                    <path d="M79.3,94.7C79.3,90.8 82.5,89.3 87.8,89.3C95.4,89.3 105,91.6 112.6,95.7L112.6,72.2C104.3,68.9 96.1,67.6 87.8,67.6C67.5,67.6 54,78.2 54,95.9C54,123.5 92,119.1 92,131C92,135.6 88,137.1 82.4,137.1C74.1,137.1 63.5,133.7 55.1,129.1L55.1,152.9C64.4,156.9 73.8,158.6 82.4,158.6C103.2,158.6 117.5,148.3 117.5,130.4C117.4,100.6 79.3,105.9 79.3,94.7Z" style="fill:white;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/new/resources/images/sponsors/zerossl-dark.svg b/new/resources/images/sponsors/zerossl-dark.svg
new file mode 100644
index 0000000..f687207
--- /dev/null
+++ b/new/resources/images/sponsors/zerossl-dark.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 144 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-3665.85,-3944.91)">
+        <g transform="matrix(0.875155,0,0,2.13261,3732.24,3013.56)">
+            <g transform="matrix(0.756623,0,0,0.756623,-121.263,330.154)">
+                <g>
+                    <g>
+                        <g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
+                            <path d="M148.9,69.1L114,69.1L114,62.2L135.2,34.6L114.6,34.6L114.6,25.6L148.4,25.6L148.4,33.8L128.7,60.1L148.9,60.1L148.9,69.1Z" style="fill:white;fill-rule:nonzero;"/>
+                        </g>
+                        <g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
+                            <path d="M185.5,55.4L162.3,55.4C163.1,59.3 165.7,61.7 169.1,61.7C171.4,61.7 174.1,61.1 175.8,57.9L184.7,59.8C182,66.7 176.3,70 169.1,70C160,70 152.5,63.1 152.5,52.7C152.5,42.4 160,35.4 169.2,35.4C178.1,35.4 185.3,42 185.5,52.7L185.5,55.4ZM162.5,49.1L175.5,49.1C174.6,45.6 172,44 169.2,44C166.3,44 163.4,45.8 162.5,49.1Z" style="fill:white;fill-rule:nonzero;"/>
+                        </g>
+                        <g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
+                            <path d="M213.8,36.3L213.4,46.7L211.6,46.7C204.6,46.7 200.7,50.5 200.7,58.9L200.7,69.1L190.7,69.1L190.7,36.5L200.7,36.5L200.7,42.7C203,38.8 206.4,36 211.6,36C212.4,36 213.1,36.1 213.8,36.3Z" style="fill:white;fill-rule:nonzero;"/>
+                        </g>
+                        <g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
+                            <path d="M250.6,52.8C250.6,63.1 242.7,70 233.3,70C223.8,70 215.8,63.1 215.8,52.8C215.8,42.5 223.7,35.7 233.3,35.7C242.7,35.7 250.6,42.5 250.6,52.8ZM240.9,52.8C240.9,47.7 237.2,44.4 233.3,44.4C229.2,44.4 225.5,47.8 225.5,52.8C225.5,57.9 229.2,61.2 233.3,61.2C237.2,61.2 240.9,57.9 240.9,52.8Z" style="fill:white;fill-rule:nonzero;"/>
+                        </g>
+                        <g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
+                            <path d="M289.7,37.2L279.5,39.3C278.7,35.2 275.5,33.2 272.2,33.2C268.7,33.2 266.5,35.1 266.5,37.6C266.5,39.4 267.3,40.7 269.9,41.2L278.6,43.2C285.9,44.9 290.2,49 290.2,55.9C290.2,65.2 282.2,70 272.9,70C263.4,70 255.6,65.3 254.5,56.8L265.2,54.7C266.3,59.2 269.3,61.1 273.5,61.1C277.4,61.1 279.7,59.3 279.7,56.6C279.7,54.7 278.8,53.4 275.8,52.8L267,50.9C261,49.5 255.7,46.2 255.7,38.3C255.7,29.9 262.5,24.6 272.3,24.6C281.5,24.6 288.1,29.3 289.7,37.2Z" style="fill:white;fill-rule:nonzero;"/>
+                        </g>
+                        <g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
+                            <path d="M329.3,37.2L319.1,39.3C318.3,35.2 315.1,33.2 311.8,33.2C308.3,33.2 306.1,35.1 306.1,37.6C306.1,39.4 306.9,40.7 309.5,41.2L318.2,43.2C325.5,44.9 329.8,49 329.8,55.9C329.8,65.2 321.8,70 312.5,70C303,70 295.2,65.3 294.1,56.8L304.8,54.7C305.9,59.2 308.9,61.1 313.1,61.1C317,61.1 319.3,59.3 319.3,56.6C319.3,54.7 318.4,53.4 315.4,52.8L306.6,50.9C300.6,49.5 295.3,46.2 295.3,38.3C295.3,29.9 302.1,24.6 311.9,24.6C321,24.6 327.7,29.3 329.3,37.2Z" style="fill:white;fill-rule:nonzero;"/>
+                        </g>
+                        <g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
+                            <path d="M367,69.1L335.9,69.1L335.9,25.6L346.3,25.6L346.3,59.7L367,59.7L367,69.1Z" style="fill:white;fill-rule:nonzero;"/>
+                        </g>
+                        <g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
+                            <rect x="7.1" y="67.7" width="20.3" height="20.3" style="fill:rgb(77,112,213);"/>
+                        </g>
+                        <g transform="matrix(0.602377,0,0,0.247196,55.728,139.111)">
+                            <path d="M67.8,47.4L67.8,27.2L47.6,27.2L47.6,7L27.4,7L27.4,27.2L7.1,27.2L7.1,47.4L27.4,47.4L27.4,67.7L47.6,67.7L47.6,87.9L67.8,87.9L67.8,67.7L88.1,67.7L88.1,47.4L67.8,47.4Z" style="fill:rgb(77,112,213);fill-rule:nonzero;"/>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/includes/head.html b/src/includes/head.html
index c9269a0..a7d7e87 100644
--- a/src/includes/head.html
+++ b/src/includes/head.html
@@ -50,3 +50,8 @@
 <script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js" defer></script>
 <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
 {{end}}
+
+
+<!-- TODO: These don't work -- color values need to be tweaked if they do work -- I think because background-color is set on the body. -->
+<meta name="theme-color" content="#123245" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#123245" media="(prefers-color-scheme: dark)">