From dc8c51168c653cd2b360fc485aac2ac7d2151095 Mon Sep 17 00:00:00 2001
From: Luke Hagar <lukeslakemail@gmail.com>
Date: Tue, 3 Jun 2025 13:04:02 -0500
Subject: [PATCH] Adding icons and adjusting styling

---
 src/routes/+page.svelte         | 60 ++++++++++++++++++++-------------
 static/resend-icon-black.svg    |  3 ++
 static/resend-icon-white.svg    |  3 ++
 static/tailwind-logo-square.svg |  1 +
 4 files changed, 43 insertions(+), 24 deletions(-)
 create mode 100644 static/resend-icon-black.svg
 create mode 100644 static/resend-icon-white.svg
 create mode 100644 static/tailwind-logo-square.svg

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1ec583d..751367e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,7 +7,7 @@
 	let { data } = $props();
 </script>
 
-<div class="container mx-auto space-y-20 py-20 p-4">
+<div class="container mx-auto space-y-20 p-4 py-20">
 	<!-- Hero Section -->
 	<header class="grid grid-cols-1 items-center gap-8 lg:grid-cols-[1fr_auto]">
 		<div class="order-2 max-w-3xl space-y-8 lg:order-1">
@@ -57,13 +57,13 @@
 		</div>
 	</header>
 
-    <div class="flex justify-center">
+	<div class="flex justify-center">
 		<hr class="hr border-surface-500 max-w-64" />
 	</div>
 
 	<!-- Stats Section -->
 	<section>
-		<div class="flex gap-20 text-center flex-wrap font-bold justify-center">
+		<div class="flex flex-wrap justify-center gap-20 text-center font-bold">
 			<div class="space-y-1">
 				<span class="text-7xl">99%</span>
 				<p class="text-primary-500">Faster Development</p>
@@ -74,7 +74,7 @@
 			</div>
 			<div class="space-y-1">
 				<span class="text-7xl">100%</span>
-				<p class="text-primary-500 ">Type Safe</p>
+				<p class="text-primary-500">Type Safe</p>
 			</div>
 			<div class="space-y-1">
 				<span class="text-7xl">∞</span>
@@ -83,13 +83,13 @@
 		</div>
 	</section>
 
-    <div class="flex justify-center">
+	<div class="flex justify-center">
 		<hr class="hr border-surface-500 max-w-64" />
 	</div>
 
 	<!-- Features Section -->
 	<section class="flex flex-wrap gap-4">
-		<div class="card preset-outlined-surface-500 space-y-4 p-4 md:p-8 flex-1 min-w-[250px]">
+		<div class="card preset-outlined-surface-500 min-w-[250px] flex-1 space-y-4 p-4 md:p-8">
 			<Database class="stroke-primary-500 size-10" aria-hidden="true" />
 			<h3 class="h3">Supabase Ready</h3>
 			<p class="opacity-75">
@@ -97,7 +97,7 @@
 				your Supabase credentials and you're ready to go.
 			</p>
 		</div>
-		<div class="card preset-outlined-surface-500 space-y-4 p-4 md:p-8 flex-1 min-w-[250px]">
+		<div class="card preset-outlined-surface-500 min-w-[250px] flex-1 space-y-4 p-4 md:p-8">
 			<Zap class="stroke-primary-500 size-10" aria-hidden="true" />
 			<h3 class="h3">Lightning Fast</h3>
 			<p class="opacity-75">
@@ -105,7 +105,7 @@
 				blazing fast navigation included.
 			</p>
 		</div>
-		<div class="card preset-outlined-surface-500 space-y-4 p-4 md:p-8 flex-1 min-w-[250px]">
+		<div class="card preset-outlined-surface-500 min-w-[250px] flex-1 space-y-4 p-4 md:p-8">
 			<GitBranch class="stroke-primary-500 size-10" aria-hidden="true" />
 			<h3 class="h3">Developer Experience</h3>
 			<p class="opacity-75">
@@ -115,7 +115,7 @@
 		</div>
 	</section>
 
-    <div class="flex justify-center">
+	<div class="flex justify-center">
 		<hr class="hr border-surface-500 max-w-64" />
 	</div>
 
@@ -127,30 +127,42 @@
 				<div class="mx-auto flex items-center justify-center">
 					<img src="/svelte-logo-square.svg" alt="SvelteKit" class="size-16" />
 				</div>
-				<p class="text-lg font-extrabold">SvelteKit</p>
-			</div>
-			<div class="space-y-2">
-				<div class="mx-auto flex items-center justify-center">
-					<img src="/supabase-logo-icon.svg" alt="Supabase" class="size-16" />
-				</div>
-				<p class="text-lg font-extrabold">Supabase</p>
-			</div>
-			<div class="space-y-2">
-				<div class="mx-auto flex items-center justify-center">
-					<img src="/ts-logo-512.svg" alt="TypeScript" class="size-16" />
-				</div>
-				<p class="text-lg font-extrabold">TypeScript</p>
+				<p class="text-lg font-bold">SvelteKit</p>
 			</div>
 			<div class="space-y-2">
 				<div class="mx-auto flex items-center justify-center">
 					<Skeleton alt="Skeleton UI" class="size-16 fill-black dark:fill-white" />
 				</div>
-				<p class="text-lg font-extrabold">Skeleton UI</p>
+				<p class="text-lg font-bold">Skeleton UI</p>
+			</div>
+			<div class="space-y-2">
+				<div class="mx-auto flex items-center justify-center">
+					<img src="/tailwind-logo-square.svg" alt="Tailwind CSS" class="size-16" />
+				</div>
+				<p class="text-lg font-bold">Tailwind CSS</p>
+			</div>
+			<div class="space-y-2">
+				<div class="mx-auto flex items-center justify-center">
+					<img src="/supabase-logo-icon.svg" alt="Supabase" class="size-16" />
+				</div>
+				<p class="text-lg font-bold">Supabase</p>
+			</div>
+			<div class="space-y-2">
+				<div class="rounded-base mx-auto flex size-16 items-center justify-center bg-black p-2">
+					<img src="/resend-icon-white.svg" alt="Resend" class="size-16" />
+				</div>
+				<p class="text-lg font-bold">Resend</p>
+			</div>
+			<div class="space-y-2">
+				<div class="mx-auto flex items-center justify-center">
+					<img src="/ts-logo-512.svg" alt="TypeScript" class="size-16" />
+				</div>
+				<p class="text-lg font-bold">TypeScript</p>
 			</div>
 		</div>
 	</section>
 
-    <div class="flex justify-center">
+	<div class="flex justify-center">
 		<hr class="hr border-surface-500 max-w-64" />
 	</div>
 
diff --git a/static/resend-icon-black.svg b/static/resend-icon-black.svg
new file mode 100644
index 0000000..5d090af
--- /dev/null
+++ b/static/resend-icon-black.svg
@@ -0,0 +1,3 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M186 447.471V154H318.062C336.788 154 353.697 158.053 368.79 166.158C384.163 174.263 396.181 185.443 404.845 199.698C413.51 213.672 417.842 229.604 417.842 247.491C417.842 265.938 413.51 282.568 404.845 297.381C396.181 311.915 384.302 323.375 369.209 331.759C354.117 340.144 337.067 344.337 318.062 344.337H253.917V447.471H186ZM348.667 447.471L274.041 314.99L346.99 304.509L430 447.471H348.667ZM253.917 289.835H311.773C319.04 289.835 325.329 288.298 330.639 285.223C336.229 281.869 340.421 277.258 343.216 271.388C346.291 265.519 347.828 258.811 347.828 251.265C347.828 243.718 346.151 237.15 342.797 231.56C339.443 225.691 334.552 221.219 328.124 218.144C321.975 215.07 314.428 213.533 305.484 213.533H253.917V289.835Z" fill="black"/>
+</svg>
diff --git a/static/resend-icon-white.svg b/static/resend-icon-white.svg
new file mode 100644
index 0000000..3f14915
--- /dev/null
+++ b/static/resend-icon-white.svg
@@ -0,0 +1,3 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M186 447.471V154H318.062C336.788 154 353.697 158.053 368.79 166.158C384.163 174.263 396.181 185.443 404.845 199.698C413.51 213.672 417.842 229.604 417.842 247.491C417.842 265.938 413.51 282.568 404.845 297.381C396.181 311.915 384.302 323.375 369.209 331.759C354.117 340.144 337.067 344.337 318.062 344.337H253.917V447.471H186ZM348.667 447.471L274.041 314.99L346.99 304.509L430 447.471H348.667ZM253.917 289.835H311.773C319.04 289.835 325.329 288.298 330.639 285.223C336.229 281.869 340.421 277.258 343.216 271.388C346.291 265.519 347.828 258.811 347.828 251.265C347.828 243.718 346.151 237.15 342.797 231.56C339.443 225.691 334.552 221.219 328.124 218.144C321.975 215.07 314.428 213.533 305.484 213.533H253.917V289.835Z" fill="white"/>
+</svg>
diff --git a/static/tailwind-logo-square.svg b/static/tailwind-logo-square.svg
new file mode 100644
index 0000000..6a9ab49
--- /dev/null
+++ b/static/tailwind-logo-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33"><g clip-path="url(#prefix__clip0)"><path fill="#38bdf8" fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd"/></g><defs><clipPath id="prefix__clip0"><path fill="#fff" d="M0 0h54v32.4H0z"/></clipPath></defs></svg>
\ No newline at end of file