M src/pages/index.astro → src/pages/index.astro

@@ -15,6 +15,13 @@ label: "on listenbrainz",
 		href: "https://listenbrainz.org/user/aprvi",
 	},
 ];
+
+const testimonials = [
+	{
+		text: "you bring a very SSRI type of vibe to the function",
+		author: "khls",
+	},
+];
 ---
 
 <Layout>
@@ -40,17 +47,71 @@ <header>
 				<h2>links</h2>
 				<p>find me . locate me .</p>
 			</header>
-			<div class="content">
-				<div class="links">
-					{
-						links.map((link) => (
-							<a href={link.href} data-text={link.label}>
-								{link.label}
-							</a>
-						))
-					}
-				</div>
+			<div class="content links">
+				{
+					links.map((link) => (
+						<a href={link.href} data-text={link.label}>
+							{link.label}
+						</a>
+					))
+				}
+			</div>
+		</section>
+
+		<section>
+			<header>
+				<h2>testimonials</h2>
+			</header>
+			<div class="content testimonials">
+				{
+					testimonials.map((testimonial) => (
+						<figure class="testimonial">
+							<blockquote>
+								<p>"{testimonial.text}"</p>
+							</blockquote>
+							<figcaption>
+								<cite>{testimonial.author}</cite>
+							</figcaption>
+						</figure>
+					))
+				}
 			</div>
 		</section>
 	</Fragment>
 </Layout>
+
+<style scoped>
+	.testimonials {
+		display: flex;
+		flex-direction: column;
+		gap: 1.25rem;
+	}
+
+	figure.testimonial {
+		display: inline-flex;
+		flex-direction: column;
+
+		blockquote {
+			p {
+				position: relative;
+				color: hsl(var(--text));
+				line-height: 1;
+			}
+		}
+
+		figcaption {
+			cite {
+				font-style: normal;
+				font-weight: 600;
+				font-size: 0.875rem;
+				color: hsl(var(--subtext0));
+				line-height: 1;
+
+				&::before {
+					content: "— ";
+					color: hsl(var(--overlay1));
+				}
+			}
+		}
+	}
+</style>