73 lines
2.6 KiB
Svelte
73 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { currentStep } from '$lib/stores.js';
|
|
import FeatureList from './splash/FeatureList.svelte';
|
|
import { env } from '$env/dynamic/public';
|
|
|
|
const buildDate = env.PUBLIC_BUILD_DATE;
|
|
const gitRef = env.PUBLIC_GIT_REF ? env.PUBLIC_GIT_REF.substring(0, 7) : '';
|
|
|
|
|
|
function startWizard() {
|
|
currentStep.set(1); // Move to auth step
|
|
}
|
|
</script>
|
|
|
|
<div class="flex min-h-screen flex-col items-center justify-center bg-gray-100 p-4">
|
|
<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">
|
|
<!-- 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-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 font-medium leading-relaxed text-gray-700">
|
|
Transform your Google Sheets into professional ESNcards with photos.
|
|
</p>
|
|
<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-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
|
|
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}
|
|
<p class="text-xs text-gray-400">
|
|
Build: {gitRef} {buildDate}
|
|
</p>
|
|
{/if}
|
|
</footer>
|
|
</div>
|