Rebrand to Card Forge

src/lib/components/Splash.svelte

@@ -1,40 +1,59 @@
 <script lang="ts">
 	import { currentStep } from '$lib/stores.js';
+	import FeatureList from './splash/FeatureList.svelte';
 
 	function startWizard() {
 		currentStep.set(1); // Move to auth step
 	}
 </script>
 
-<div class="container mx-auto max-w-4xl p-2">
-	<div class="container mx-auto max-w-4xl rounded-lg bg-white p-8 text-center shadow-lg">
-		<div class="mb-8">
-			<!-- ESN Logo placeholder -->
-			<div class="mx-auto mb-6 flex h-48 w-48 items-center justify-center rounded-full bg-gray-400 p-6">
-        <img src="/favicon.svg" alt="ESN Logo" class="h-32 w-32" />
+<div class="flex min-h-screen items-center justify-center bg-gray-100 p-4">
+	<div
+		class="container mx-auto max-w-4xl rounded-lg border border-gray-200 bg-white/90 p-10 text-center shadow-xl"
+	>
+		<div class="mb-10 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"
+			>
+				<img src="/favicon.svg" alt="ESN Logo" class="h-28 w-28 drop-shadow-lg" />
 			</div>
-
-			<h1 class="mb-6 text-3xl font-bold text-gray-800">ESNcard Generator</h1>
-
-			<p class="mb-4 text-lg leading-relaxed text-gray-700">
-				Transform your Google Sheets into professional ESN membership cards with photos.
+			<h1
+				class="mb-2 pb-4 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-6xl font-extrabold tracking-tight text-transparent"
+			>
+				Card Forge
+			</h1>
+			<p class="mb-4 text-xl leading-relaxed font-medium text-gray-700">
+				Transform your Google Sheets into professional ESNcards with photos.
 			</p>
-
-			<p class="mb-6 text-lg leading-relaxed text-gray-700">
-				Privacy-first: all processing happens in your browser.
+			<p class="mb-4 text-lg leading-relaxed text-gray-600">
+				<span class="font-semibold text-black-800"
+					>Privacy-first</span
+				>: all processing happens in your browser.
 			</p>
-
-			<div class="mb-8 text-sm text-gray-500">
-				<p class="mb-2">✓ Import data from Google Sheets</p>
-				<p class="mb-2">✓ Automatic face detection and cropping</p>
-				<p class="mb-2">✓ Generate text and photo PDFs</p>
-				<p>✓ No data stored on our servers</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" />
 		</div>
-
 		<button
-			on:click={startWizard}
-			class="rounded-lg bg-blue-600 px-8 py-3 font-semibold text-white transition-colors hover:bg-blue-700"
+			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>