An easy-to-host PDS on the ATProtocol, MacOS. Grandma-approved.
feat(identity-wallet): add WelcomeScreen component
authored by
Tangled
4f802b57
39a8518f
+56
apps/identity-wallet/src/lib/components/onboarding/.gitkeep
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
+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>