An easy-to-host PDS on the ATProtocol, MacOS. Grandma-approved.

feat(identity-wallet): add WelcomeScreen component

authored by malpercio.dev and committed by

Tangled 4f802b57 39a8518f

+56
apps/identity-wallet/src/lib/components/onboarding/.gitkeep

This is a binary file and will not be displayed.

+56
apps/identity-wallet/src/lib/components/onboarding/WelcomeScreen.svelte
··· 1 + <script lang="ts"> 2 + let { onstart }: { onstart: () => void } = $props(); 3 + </script> 4 + 5 + <div class="screen"> 6 + <div class="brand"> 7 + <h1>Identity Wallet</h1> 8 + <p class="tagline">Your self-sovereign identity, in your pocket.</p> 9 + </div> 10 + <button class="cta" onclick={onstart}>Get Started</button> 11 + </div> 12 + 13 + <style> 14 + .screen { 15 + display: flex; 16 + flex-direction: column; 17 + align-items: center; 18 + justify-content: center; 19 + height: 100%; 20 + padding: 2rem; 21 + gap: 3rem; 22 + } 23 + 24 + .brand { 25 + display: flex; 26 + flex-direction: column; 27 + align-items: center; 28 + gap: 0.75rem; 29 + text-align: center; 30 + } 31 + 32 + h1 { 33 + font-size: 2rem; 34 + font-weight: 700; 35 + margin: 0; 36 + } 37 + 38 + .tagline { 39 + font-size: 1rem; 40 + color: #6b7280; 41 + margin: 0; 42 + } 43 + 44 + .cta { 45 + width: 100%; 46 + max-width: 320px; 47 + padding: 1rem; 48 + background: #007aff; 49 + color: #fff; 50 + border: none; 51 + border-radius: 12px; 52 + font-size: 1.1rem; 53 + font-weight: 600; 54 + cursor: pointer; 55 + } 56 + </style>