Implement basic Sponsor Experience box

new/index.html

@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="/resources/css/vendor/asciinema-player-3.6.1.css">
 		<script src="/resources/js/vendor/asciinema-player-3.6.1.min.js"></script>
 		
+		<link rel="stylesheet" href="/resources/css/marketing.css">
 		<link rel="stylesheet" href="/resources/css/home.css">
 
 		<!-- <meta property="og:title" content="Caddy 2 - The Ultimate Server with Automatic HTTPS">
@@ -57,49 +58,49 @@
 
 						<div class="sponsor-logos">
 							<a href="https://zerossl.com" target="_blank">
-								<img src="/resources/images/sponsors/zerossl.svg" alt="ZeroSSL" height="45">
+								<img src="/resources/images/sponsors/zerossl.svg" alt="ZeroSSL" title="ZeroSSL" height="45">
 							</a>
 							<a href="https://stripe.com" target="_blank">
-								<img src="/resources/images/sponsors/stripe.svg" alt="Stripe" class="featured" height="45">
+								<img src="/resources/images/sponsors/stripe.svg" alt="Stripe" title="Stripe" class="featured" height="45">
 							</a>
 						</div>
 						<div class="sponsors-divider"></div>
 						<div class="sponsor-logos">
 						<a href="https://opensource.mercedes-benz.com/" target="_blank">
-							<img src="/resources/images/sponsors/mercedes-benz.svg" alt="Mercedes-Benz" height="38">
+							<img src="/resources/images/sponsors/mercedes-benz.svg" alt="Mercedes-Benz" title="Mercedes-Benz" height="38">
 						</a>
 						<a href="https://sourcegraph.com/" target="_blank">
-							<img src="/resources/images/sponsors/sourcegraph.svg" alt="Sourcegraph" height="30">
+							<img src="/resources/images/sponsors/sourcegraph.svg" alt="Sourcegraph" title="Sourcegraph" height="30">
 						</a>
 						<a href="https://tailscale.com" target="_blank">
-							<img src="/resources/images/sponsors/tailscale.svg" alt="Tailscale" height="22">
+							<img src="/resources/images/sponsors/tailscale.svg" alt="Tailscale" title="Tailscale" height="22">
 						</a>
 						<a href="https://fusionauth.com" target="_blank">
-							<img src="/resources/images/sponsors/fusionauth.svg" alt="FusionAuth" height="35">
+							<img src="/resources/images/sponsors/fusionauth.svg" alt="FusionAuth" title="FusionAuth" height="35">
 						</a>
 						<a href="https://www.aryeo.com" target="_blank">
-							<img src="/resources/images/sponsors/aryeo.svg" alt="Aryeo" height="26">
+							<img src="/resources/images/sponsors/aryeo.svg" alt="Aryeo" title="Aryeo" height="26">
 						</a>
 						<a href="https://checklyhq.com" target="_blank">
-							<img src="/resources/images/sponsors/checkly.svg" alt="Checkly" height="24" style="position: relative; top: 3px;">
+							<img src="/resources/images/sponsors/checkly.svg" alt="Checkly" title="Checkly" height="24" style="position: relative; top: 3px;">
 						</a>
 						<a href="https://appcove.com/" target="_blank">
-							<img src="/resources/images/sponsors/appcove.png" alt="AppCove" height="24">
+							<img src="/resources/images/sponsors/appcove.png" alt="AppCove" title="AppCove" height="24">
 						</a>
 						<a href="https://www.transistor.fm" target="_blank">
-							<img src="/resources/images/sponsors/transistorfm.svg" alt="Transistor" height="32">
+							<img src="/resources/images/sponsors/transistorfm.svg" alt="Transistor" title="Transistor" height="32">
 						</a>
 						<a href="https://photostructure.com/" target="_blank">
-							<img src="/resources/images/sponsors/photostructure.svg" alt="PhotoStructure" height="30">
+							<img src="/resources/images/sponsors/photostructure.svg" alt="PhotoStructure" title="PhotoStructure" height="30">
 						</a>
 						<a href="https://gitea.com/" target="_blank">
-							<img src="/resources/images/sponsors/gitea.svg" alt="Gitea" height="25">
+							<img src="/resources/images/sponsors/gitea.svg" alt="Gitea" title="Gitea" height="25">
 						</a>
 						<a href="https://aniftyco.com/" target="_blank">
-							<img src="/resources/images/sponsors/niftyco.svg" alt="Niftyco" height="25">
+							<img src="/resources/images/sponsors/niftyco.svg" alt="Niftyco" title="Niftyco" height="25">
 						</a>
 						<a href="https://iqm.com/" target="_blank">
-							<img src="/resources/images/sponsors/iqm.svg" alt="IQM" height="24">
+							<img src="/resources/images/sponsors/iqm.svg" alt="IQM" title="IQM" height="24">
 						</a>
 						<a href="/sponsor" class="button purple">
 							<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-new-section" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -111,6 +112,7 @@
 							Join the ranks
 						</a>
 					</div>
+					<!-- <a href="#">Why a sponsorship</a> -->
 					<!-- <a href="/sponsor" class="button purple">Sponsorship info</a> -->
 				</div>
 				</div>
@@ -155,6 +157,22 @@
 					</p>
 					<a href="/sponsor" class="button purple">See sponsorships</a>
 				</div>
+
+				<div class="sponsor-experience stripe">
+					<img src="/resources/images/sponsors/stripe.svg" class="experience-logo">
+					<div class="experience-content">
+						<div class="experience-quote">
+							"Something good to say, hopefully. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet."
+						</div>
+						<div class="experience-credit">
+							<img src="" class="experience-picture">
+							<cite>
+								<b>Firstname Last</b>
+								Position or credentials
+							</cite>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 

new/resources/css/marketing.css

@@ -0,0 +1,65 @@
+.sponsor-experience {
+	border-radius: 10px;
+	padding: 30px 50px 40px;
+	color: #fff;
+	display: flex;
+	flex-wrap: wrap;
+	max-width: 700px; /* TODO: TEMPORARY! */
+	column-gap: 50px;
+}
+
+.sponsor-experience::before {
+	content: "Sponsor Experience";
+	text-transform: uppercase;
+	letter-spacing: 4px;
+	color: rgb(255 255 255 / .7);
+	font-size: 12px;
+	font-weight: 800;
+	text-align: center;
+	display: block;
+	width: 100%;
+}
+
+.sponsor-experience .experience-content {
+	flex: 1;
+	margin-top: 40px;
+}
+
+.sponsor-experience .experience-quote {
+	margin-bottom: 1em;
+}
+
+.sponsor-experience .experience-logo {
+	width: 150px;
+}
+
+.sponsor-experience .experience-credit {
+	display: flex;
+	gap: 1em;
+	align-items: center;
+}
+
+.sponsor-experience cite {
+	font-style: normal;
+	font-size: 14px;
+	color: rgb(255 255 255 / .7);
+}
+
+.sponsor-experience cite b {
+	display: block;
+	font-size: 125%;
+	color: #fff;
+}
+
+.sponsor-experience .experience-picture {
+	width: 3em;
+	height: 3em;
+	border-radius: 50%;
+	object-fit: cover;
+	background-color: gray;
+}
+
+
+.sponsor-experience.stripe {
+	background: linear-gradient(to right, #635bff 30%, #d4b8ff);
+}