Icons

src/lib/components/Splash.svelte

@@ -1,41 +1,42 @@
 <script lang="ts">
-  import { currentStep } from '$lib/stores.js';
+	import { currentStep } from '$lib/stores.js';
 
-  function startWizard() {
-    currentStep.set(1); // Move to auth step
-  }
+	function startWizard() {
+		currentStep.set(1); // Move to auth step
+	}
 </script>
 
-<div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
-  <div class="container mx-auto max-w-2xl bg-white p-8 rounded-lg shadow-lg text-center">
-    <div class="mb-8">
-      <!-- ESN Logo placeholder -->
-      <div class="mx-auto mb-6 w-24 h-24 bg-blue-600 rounded-full flex items-center justify-center">
-        <span class="text-white text-2xl font-bold">ESN</span>
-      </div>
-      
-      <h1 class="mb-6 text-3xl font-bold text-gray-800">
-        ESN Card Generator
-      </h1>
-      
-      <p class="text-lg text-gray-700 leading-relaxed mb-6">
-        Transform your Google Sheets into professional ESN membership cards with photos.
-        Privacy-first: all processing happens in your browser.
-      </p>
-      
-      <div class="text-sm text-gray-500 mb-8">
-        <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>
-    </div>
-    
-    <button
-      on:click={startWizard}
-      class="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
-    >
-      Start Creating Cards
-    </button>
-  </div>
+<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>
+
+			<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.
+			</p>
+
+			<p class="mb-6 text-lg leading-relaxed text-gray-700">
+				Privacy-first: 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>
+		</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"
+		>
+			Start Creating Cards
+		</button>
+	</div>
 </div>