Merge remote-tracking branch 'origin/more-signup-pages' into more-sig…

…nup-pages

src/app.css

@@ -38,7 +38,7 @@
 	}
 
 	p {
-		@apply max-w-prose text-base font-medium;
+		@apply max-w-prose text-base font-medium text-white/60;
 	}
 
 	/* Layout */

src/routes/[network]/(account)/signup/+layout.svelte

@@ -9,6 +9,8 @@
 	import { page } from '$app/stores';
 	import Stack from '$lib/components/layout/stack.svelte';
 	import Pageheader from '$lib/components/pageheader.svelte';
+	import { crossfade } from 'svelte/transition';
+	import { cubicInOut } from 'svelte/easing';
 	import { getWalletType } from './walletTypes.js';
 
 	const { data, children } = $props();
@@ -58,32 +60,48 @@
 
 		return step.path;
 	}
+
+	const [send, receive] = crossfade({
+		duration: 250,
+		easing: cubicInOut
+	});
 </script>
 
 <Stack>
 	<Pageheader title="Sign Up" subtitle="Setup your account" />
 
-	<div class="mb-6 flex justify-start space-x-4">
+	<!-- Step progress -->
+	<ol class="mb-4 flex justify-between gap-5">
 		{#each steps as step, index}
 			{@const isCurrentStep = step.path === getCurrentStep()?.path}
-			{#if isCurrentStep || isFutureStep(index)}
-				<div
-					class="text-lg font-medium {isCurrentStep ? 'text-primary underline' : 'text-gray-500'}"
-				>
-					Step {index + 1}: {step.title}
-				</div>
-			{:else}
+			{@const isIncompleteStep = isCurrentStep || isFutureStep(index)}
+			<li class="grid flex-1">
 				<a
 					href={getFullStepPath(step)}
-					class="hover:text-primary text-lg font-medium text-gray-500 hover:underline"
+					data-current={isCurrentStep}
+					data-incomplete={isIncompleteStep}
+					class="relative flex flex-col justify-between gap-2 text-white/50 hover:text-white/80 focus-visible:outline focus-visible:outline-offset-2
+ focus-visible:outline-solar-500 data-[incomplete=true]:pointer-events-none data-[current=true]:text-white
+					"
+					tabindex={isIncompleteStep ? -1 : 0}
 				>
-					Step {index + 1}: {step.title}
+					<span> Step {index + 1}: {step.title} </span>
+
+					<!-- Bottom indicator -->
+					<div class="h-1 w-full rounded-full bg-white/10"></div>
+					{#if isCurrentStep}
+						<div
+							in:send={{ key: 'step' }}
+							out:receive={{ key: 'step' }}
+							class="absolute bottom-0 left-1/2 h-1 w-full -translate-x-1/2 rounded-full bg-skyBlue-400"
+						></div>
+					{/if}
 				</a>
-			{/if}
+			</li>
 		{/each}
-	</div>
+	</ol>
 
-	<div>
+	<div class="relative">
 		{@render children()}
 	</div>
 </Stack>

src/routes/[network]/(account)/signup/+page.svelte

@@ -1,38 +1,55 @@
 <script lang="ts">
-	import Pageheader from '$lib/components/pageheader.svelte';
 	import Stack from '$lib/components/layout/stack.svelte';
-	import Button from '$lib/components/button/button.svelte';
-	import { walletTypes } from './walletTypes';
+	import { ChevronRight } from 'lucide-svelte';
+	import { walletTypes, type WalletType } from './walletTypes';
 
 	const { data } = $props();
 </script>
 
-<Stack>
-	<Pageheader title="Sign Up" subtitle="Create your account" />
+{#snippet walletButton(wallet: WalletType)}
+	<a
+		href="/{data.network}/signup/wallet-type/{wallet.type}"
+		class="group grid grid-cols-[auto_1fr_auto] items-center gap-4 rounded-2xl border border-white/20 p-4
+hover:bg-mineShaft-950 focus-visible:outline focus-visible:outline-transparent focus-visible:ring-2 focus-visible:ring-solar-500"
+	>
+		<div class="rounded-full bg-mineShaft-900/60 p-3">
+			<svelte:component this={wallet.icon} class="size-6 group-hover:stroke-skyBlue-500 " />
+		</div>
+		<div class="space-y-1">
+			<h4 class="text-xl font-semibold">
+				{wallet.title}
+			</h4>
+			<p>{wallet.description}</p>
+		</div>
+		<ChevronRight class="size-6 group-hover:stroke-skyBlue-500" />
+	</a>
+{/snippet}
 
-	<div class="mb-6">
-		<h2 class="mb-4 text-xl font-semibold">Why do I need a wallet?</h2>
-		<p class="mb-4">
+<Stack
+	class="gap-7 *:z-10 before:absolute before:-inset-4 before:z-0 before:bg-shark-900/10 md:mx-auto md:max-w-md md:p-6 md:before:inset-0 md:before:rounded-2xl"
+>
+	<Stack class="gap-2">
+		<h3 class="h3">Why do I need a wallet?</h3>
+		<p>
 			A wallet is your gateway to the blockchain, allowing you to manage your digital assets and
 			interact with decentralized applications.
 		</p>
-		<h2 class="mb-4 text-xl font-semibold">Why do I need an account?</h2>
-		<p class="mb-4">
+	</Stack>
+
+	<Stack class="gap-2">
+		<h3 class="h3">Why do I need an account?</h3>
+		<p>
 			An account on the blockchain is your unique identity, enabling you to perform transactions,
 			store assets, and participate in the network.
 		</p>
-	</div>
+	</Stack>
 
-	<div class="container mx-auto p-4">
-		<h2 class="mb-4 text-xl font-semibold">Choose A Wallet Type</h2>
-		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
-			{#each Object.entries(walletTypes) as [walletType, value]}
-				<div class="flex justify-center">
-					<Button href="/{data.network}/signup/wallet-type/{walletType}" class="w-full">
-						{value.title}
-					</Button>
-				</div>
+	<Stack>
+		<h3 class="h2">Choose A Wallet Type</h3>
+		<Stack>
+			{#each Object.values(walletTypes) as wallet}
+				{@render walletButton(wallet)}
 			{/each}
-		</div>
-	</div>
+		</Stack>
+	</Stack>
 </Stack>

src/routes/[network]/(account)/signup/walletTypes.ts

@@ -1,7 +1,14 @@
-interface WalletType {
+import TabletSmartphone from 'lucide-svelte/icons/tablet-smartphone';
+import LaptopMinimal from 'lucide-svelte/icons/laptop-minimal';
+import LockKeyhole from 'lucide-svelte/icons/lock-keyhole';
+import GlobeLock from 'lucide-svelte/icons/globe-lock';
+import type { Icon } from 'lucide-svelte';
+
+export interface WalletType {
 	type: 'hardware' | 'desktop' | 'mobile' | 'extensions';
 	title: string;
 	description: string;
+	icon: typeof Icon;
 	benefits: string[];
 	wallets: { name: string; route: string }[];
 }
@@ -10,6 +17,7 @@ export const walletTypes: Record<string, WalletType> = {
 	// webAuths: {
 	// 	type: 'webAuths',
 	// 	title: 'Web Authenticators',
+	// icon: 'tablet-smartphone',
 	// 	description:
 	// 		"Web Authenticators are convenient wallet options that don't require any installation.",
 	// 	benefits: [
@@ -23,6 +31,7 @@ export const walletTypes: Record<string, WalletType> = {
 		type: 'hardware',
 		title: 'Hardware Wallets',
 		description: 'Hardware wallets are physical devices that securely store your private keys.',
+		icon: LockKeyhole,
 		benefits: [
 			'Highest level of security',
 			'Offline storage of private keys',
@@ -34,6 +43,7 @@ export const walletTypes: Record<string, WalletType> = {
 		type: 'desktop',
 		title: 'Desktop Wallets',
 		description: 'Software wallets are applications you install on your computer or mobile device.',
+		icon: LaptopMinimal,
 		benefits: [
 			'Easy to use and set up',
 			'Convenient for frequent transactions',
@@ -48,6 +58,7 @@ export const walletTypes: Record<string, WalletType> = {
 		type: 'mobile',
 		title: 'Mobile Wallets',
 		description: 'Mobile wallets are applications you install on your mobile device.',
+		icon: TabletSmartphone,
 		benefits: [
 			'Convenient for on-the-go access',
 			'Secure storage of your digital assets on your mobile device',
@@ -64,6 +75,7 @@ export const walletTypes: Record<string, WalletType> = {
 		title: 'Browser Extensions',
 		description:
 			'Browser extension wallets integrate directly with your web browser for easy access.',
+		icon: GlobeLock,
 		benefits: [
 			'Seamless integration with web applications',
 			'Quick access from your browser',