From 4b6b59aaed2a0fcb5f8956c4f1093762431c1377 Mon Sep 17 00:00:00 2001
From: wighawag <wighawag@gmail.com>
Date: Tue, 16 Jan 2024 14:04:17 +0000
Subject: [PATCH] home page complete

---
 .../lib/components/jolly-roger/Feature.svelte |   4 +
 .../components/jolly-roger/Showcase.svelte    |  66 +++++++++--
 web/src/routes/+page.svelte                   | 110 ++++++++++++++++--
 3 files changed, 161 insertions(+), 19 deletions(-)

diff --git a/web/src/lib/components/jolly-roger/Feature.svelte b/web/src/lib/components/jolly-roger/Feature.svelte
index 6e69252..543c7fa 100644
--- a/web/src/lib/components/jolly-roger/Feature.svelte
+++ b/web/src/lib/components/jolly-roger/Feature.svelte
@@ -14,6 +14,10 @@
 </div>
 
 <style>
+	h3 {
+		color: var(--color-background-primary-100);
+	}
+
 	p,
 	h3 {
 		margin-block: 24px;
diff --git a/web/src/lib/components/jolly-roger/Showcase.svelte b/web/src/lib/components/jolly-roger/Showcase.svelte
index 4074474..f07b1bc 100644
--- a/web/src/lib/components/jolly-roger/Showcase.svelte
+++ b/web/src/lib/components/jolly-roger/Showcase.svelte
@@ -10,16 +10,16 @@
 </script>
 
 <div class="wrapper">
-	<div>
+	<div class="image-wrapper">
 		<a {href} target="_blank" rel="noreferrer"><img src={url(preview)} alt={name} /></a>
 	</div>
 	<div class="info-wrapper">
 		<div class="info">
-			<p><a {href} target="_blank" rel="noreferrer">{name}</a></p>
-			<div>
-				<p>{title}</p>
-				<p>{description}</p>
-				<p>
+			<p class="name"><a {href} target="_blank" rel="noreferrer">{name}</a></p>
+			<div class="card-content">
+				<p class="card-title">{title}</p>
+				<p class="card-description">{description}</p>
+				<p class="card-source">
 					{#if source}
 						Check the <a href={source} target="_blank" rel="noreferrer">source code</a>.
 					{:else}Source code not yet available.{/if}
@@ -30,26 +30,68 @@
 </div>
 
 <style>
-	p {
-		margin-block: 24px;
-	}
-
 	.wrapper {
 		display: flex;
+		overflow: hidden;
 		flex-direction: column;
-		align-items: center;
+		border-radius: 0.5rem;
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+		background-color: var(--color-background-base-200);
+	}
+
+	.image-wrapper {
+		flex-shrink: 0;
 	}
 
-	.wrapper img {
+	.image-wrapper img {
 		object-fit: cover;
+		width: 100%;
+		height: 12rem;
 	}
 
 	.info-wrapper {
 		display: flex;
+		padding: 1.5rem;
 		flex-direction: column;
+		flex: 1 1 0%;
+		justify-content: space-between;
 	}
 
 	.info {
 		flex: 1;
 	}
+
+	.name {
+		font-size: 1.25rem;
+		line-height: 1.75rem;
+		font-weight: 500;
+	}
+	.name a {
+		color: var(--color-background-primary);
+	}
+
+	.card-content {
+		display: block;
+		margin-top: 0.5rem;
+	}
+
+	.card-title {
+		font-size: 1.25rem;
+		line-height: 1.75rem;
+		font-weight: 600;
+	}
+
+	.card-description,
+	.card-source {
+		margin-top: 0.75rem;
+		font-size: 1rem;
+		line-height: 1.5rem;
+	}
+
+	.card-source a {
+		text-decoration: underline;
+	}
 </style>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 14638ca..792d7ab 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -43,13 +43,13 @@
 </section>
 
 <section class="bottom">
-	<div>
-		<h2>Showcase</h2>
-		<p>
+	<div class="bottom-header">
+		<h2 class="bottom-header-title">Showcase</h2>
+		<p class="bottom-header-description">
 			Here are examples of apps built using "{name}"
 		</p>
 	</div>
-	<div>
+	<div class="showcase-list">
 		<Showcase
 			href="https://bleeps.art"
 			preview="/images/featured/bleeps-preview-small.webp"
@@ -77,10 +77,10 @@
 		/>
 	</div>
 
-	<div>
+	<div class="features-wrapper">
 		<h2>Features</h2>
-		<div>
-			<div>
+		<div class="features-list-wrapper">
+			<div class="features-list">
 				<Feature title="All Included">
 					This template include setup for smart contracts, indexer and frontend. All runs locally for the best-in-class
 					developer experience.
@@ -140,6 +140,102 @@
 		max-width: 1280px;
 	}
 
+	.bottom-header {
+		text-align: center;
+	}
+
+	.bottom-header-title {
+		font-size: 1.875rem;
+		line-height: 2.25rem;
+		font-weight: 800;
+		letter-spacing: -0.025em;
+	}
+
+	@media (min-width: 640px) {
+		.bottom-header-title {
+			font-size: 2.25rem;
+			line-height: 2.5rem;
+		}
+	}
+
+	.bottom-header-description {
+		margin-top: 0.75rem;
+		max-width: 42rem;
+		font-size: 1.25rem;
+		line-height: 1.75rem;
+		margin-inline: auto;
+	}
+
+	@media (min-width: 640px) {
+		.bottom-header-description {
+			margin-top: 1rem;
+		}
+	}
+
+	.showcase-list {
+		display: grid;
+		margin-top: 3rem;
+		gap: 1.25rem;
+		max-width: 32rem;
+		margin-inline: auto;
+	}
+
+	@media (min-width: 1024px) {
+		.showcase-list {
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+			max-width: none;
+		}
+	}
+
+	.features-wrapper {
+		padding-bottom: 1rem;
+		padding-top: 4rem;
+	}
+
+	.features-wrapper > h2 {
+		font-size: 1.875rem;
+		line-height: 2.25rem;
+		font-weight: 800;
+		letter-spacing: -0.025em;
+	}
+
+	@media (min-width: 640px) {
+		.features-wrapper > h2 {
+			font-size: 2.25rem;
+			line-height: 2.5rem;
+		}
+	}
+
+	.features-list-wrapper {
+		padding-left: 1rem;
+		padding-right: 1rem;
+		max-width: 36rem;
+		margin-inline: auto;
+	}
+
+	@media (min-width: 640px) {
+		.features-list-wrapper {
+			padding-left: 1.5rem;
+			padding-right: 1.5rem;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.features-list-wrapper {
+			padding-left: 2rem;
+			padding-right: 2rem;
+			max-width: 1280px;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.features-list {
+			display: grid;
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+			gap: 2rem;
+		}
+	}
+
 	section > img {
 		margin-inline: auto;
 	}