From 94930e119cbd9d511d857756d9dc9d212f29b76e Mon Sep 17 00:00:00 2001
From: Matthew Holt <mholt@users.noreply.github.com>
Date: Thu, 2 Nov 2023 16:33:52 -0600
Subject: [PATCH] Work on testimonials

---
 new/index.html                  | 10 ++++++----
 new/resources/css/home.css      | 17 ++++++++++++-----
 new/resources/testimonials.json | 17 +++++++++++++++++
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/new/index.html b/new/index.html
index 9dd49c9..30db286 100644
--- a/new/index.html
+++ b/new/index.html
@@ -372,10 +372,12 @@
 						</div>
 					</div>
 
-					<div class="testimonials">
-						<div class="testimonial-col"></div>
-						<div class="testimonial-col"></div>
-						<div class="testimonial-col"></div>
+					<div class="testimonials-container">
+						<div class="testimonials">
+							<div class="testimonial-col"></div>
+							<div class="testimonial-col"></div>
+							<div class="testimonial-col"></div>
+						</div>
 					</div>
 				</div>
 			</section>
diff --git a/new/resources/css/home.css b/new/resources/css/home.css
index 628ac92..4aebe5f 100644
--- a/new/resources/css/home.css
+++ b/new/resources/css/home.css
@@ -322,24 +322,31 @@ div.ap-wrapper:fullscreen div.ap-player {
 
 
 
-
+.testimonials-container {
+	height: 100vh;
+	position: relative;
+}
 .testimonials {
 	--testimonial-spacing: 25px;
 	display: grid;
 	grid-auto-columns: minmax(0, 1fr);
 	grid-auto-flow: column;
 	gap: var(--testimonial-spacing);
-	position: relative;
+	padding-top: 150px;
+	padding-bottom: 150px;
+	height: 100%;
+	overflow-y: auto;
 }
-.testimonials::before {
+.testimonials-container::before {
 	content: "";
-	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 55%, rgba(255,255,255,1) 100%);
+	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 400px, rgba(255,255,255,0) 600px, rgba(255,255,255,1) 100%);
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	left: 0;
 	right: 0;
 	pointer-events: none;
+	z-index: 1;
 }
 .testimonial-picture {
 	width: 60px;
@@ -349,7 +356,7 @@ div.ap-wrapper:fullscreen div.ap-player {
 	display: flex;
 	align-items: flex-start;
 	gap: 1em;
-	border: 1px solid rgb(174, 181, 185);
+	border: 1px solid rgb(222, 233, 240);
 	border-radius: 5px;
 	padding: 1em;
 	margin: var(--testimonial-spacing) 0;
diff --git a/new/resources/testimonials.json b/new/resources/testimonials.json
index 8fe8fd1..c8f28d5 100644
--- a/new/resources/testimonials.json
+++ b/new/resources/testimonials.json
@@ -37,5 +37,22 @@
 		"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"
+	},
+	{
+		"name": "Karim Naufal",
+		"role": "Tech founder",
+		"quote": "After working for 12 hours straight, unable to make Traefik work and almost going nuts, I switched to Caddy and was able to make it work in 3 lines of code, HTTPS included. Thank you Caddy team for this magically simple and awesome project."
+	},
+	{
+		"name": "Kenn White",
+		"role": "Security engineer",
+		"org": "Subcontractor, UK government",
+		"quote": "This is a brilliant piece of software. ... Even on first install, the defaults are sane. Truly, great work. … Seriously: Caddy makes it possible for hundreds of thousands of very needy folk to get treatment. It’s the backbone of vital systems used by local Doctors Without Borders and local government ministries."
+	},
+	{
+		"name": "John Resig",
+		"role": "Creator of jQuery",
+		"quote": "Caddy is pretty incredible. A 3-line config yields a fully A-rated SSL site. Trivial!",
+		"link": "https://twitter.com/jeresig/status/821768122017398785"
 	}
 ]
\ No newline at end of file