From b90265110f7f4194044b41481df8944de6595261 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Tue, 18 Nov 2025 13:37:32 +0100
Subject: [PATCH] Update splash

---
 src/lib/components/Splash.svelte | 52 ++++++++++++++++----------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/Splash.svelte b/src/lib/components/Splash.svelte
index 4f970d6..b41388a 100644
--- a/src/lib/components/Splash.svelte
+++ b/src/lib/components/Splash.svelte
@@ -16,7 +16,7 @@
 	<div
 		class="container mx-auto max-w-5xl rounded-lg border border-gray-200 bg-white/90 p-10 text-center shadow-xl"
 	>
-		<div class="mb-10 flex flex-col items-center">
+		<div class="mb-4 flex flex-col items-center">
 			<!-- Animated ESN Logo -->
 			<div
 				class="mx-auto mb-6 flex h-40 w-40 items-center justify-center rounded-full bg-gradient-to-tr from-blue-400 via-purple-400 to-pink-400"
@@ -35,32 +35,32 @@
 				<span class="font-semibold text-black-800">Privacy-first</span>: all processing happens in
 				your browser.
 			</p>
-			<div class="mb-6">
-				<a
-					href="https://youtube.com"
-					target="_blank"
-					class="inline-flex items-center gap-2 rounded-lg bg-pink-100 px-4 py-2 font-semibold text-pink-700 transition-colors hover:bg-pink-200"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="currentColor"
-						viewBox="0 0 24 24"
-						><path
-							d="M23.498 6.186a2.998 2.998 0 0 0-2.115-2.117C19.073 3.5 12 3.5 12 3.5s-7.073 0-9.383.569A2.998 2.998 0 0 0 .502 6.186C0 8.497 0 12 0 12s0 3.503.502 5.814a2.998 2.998 0 0 0 2.115 2.117C4.927 20.5 12 20.5 12 20.5s7.073 0 9.383-.569a2.998 2.998 0 0 0 2.115-2.117C24 15.503 24 12 24 12s0-3.503-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
-						/></svg
-					>
-					Watch how Card Forge works
-				</a>
-			</div>
-			<FeatureList class="mb-8" />
+			<FeatureList class="mb-6" />
+		</div>
+		<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
+			<a
+				href="https://youtube.com"
+				target="_blank"
+				class="flex w-64 items-center justify-center gap-2 rounded-lg bg-pink-400 px-8 py-3 text-lg font-bold text-white shadow-lg transition-transform hover:scale-105 hover:bg-pink-400"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					fill="currentColor"
+					viewBox="0 0 24 24"
+					><path
+						d="M23.498 6.186a2.998 2.998 0 0 0-2.115-2.117C19.073 3.5 12 3.5 12 3.5s-7.073 0-9.383.569A2.998 2.998 0 0 0 .502 6.186C0 8.497 0 12 0 12s0 3.503.502 5.814a2.998 2.998 0 0 0 2.115 2.117C4.927 20.5 12 20.5 12 20.5s7.073 0 9.383-.569a2.998 2.998 0 0 0 2.115-2.117C24 15.503 24 12 24 12s0-3.503-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
+					/></svg
+				>
+				Watch Tutorial
+			</a>
+			<button
+				onclick={startWizard}
+				class="w-64 rounded-lg bg-blue-600 px-8 py-3 text-lg font-bold text-white shadow-lg transition-transform hover:scale-105 hover:bg-blue-700"
+			>
+				Start Creating Cards
+			</button>
 		</div>
-		<button
-			onclick={startWizard}
-			class="rounded-lg bg-blue-600 bg-gradient-to-r px-10 py-4 text-lg font-bold text-white shadow-lg transition-transform hover:scale-105"
-		>
-			Start Creating Cards
-		</button>
 	</div>
 	<footer class="mt-4 text-center">
 		{#if buildDate && gitRef}