neptune-web-wallet/src/components/auth/OnboardingComponent.vue

<script setup lang="ts">
import { ButtonCommon } from '@/components'

const emit = defineEmits<{
    goToCreate: []
    goToLogin: []
}>()

const handleGoToCreate = () => {
    emit('goToCreate')
}

const handleGoToLogin = () => {
    emit('goToLogin')
}
</script>

<template>
    <div class="welcome-page flex-center">
        <div class="welcome-card flex-center">
            <div class="welcome-box">
                <div class="header-section">
                    <h2>Welcome to the New Wallet Experience</h2>
                    <p>Choose the next action:</p>
                </div>
                <div
                    class="button-group"
                    style="display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0"
                >
                    <ButtonCommon type="primary" size="large" @click="handleGoToCreate">
                        Create new wallet
                    </ButtonCommon>
                    <ButtonCommon type="default" size="large" @click="handleGoToLogin">
                        Open existing wallet
                    </ButtonCommon>
                </div>
                <div class="note">Thank you for being a part of the Kaspa community!</div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.welcome-page {
    min-height: 100vh;
    background-color: var(--bg-light);
    position: relative;

    .welcome-card {
        background-color: var(--bg-white);
        box-shadow: var(--shadow-md);
        border-radius: var(--radius-md);
        width: 100%;
        max-width: 500px;
        flex-direction: column;
        text-align: center;
        padding: 2rem;
        .welcome-box {
            width: 100%;
            max-width: 700px;
            padding: 30px;
        }
    }
}

p {
    margin: 1rem;
    font-size: var(--font-sm);
}

.note {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
</style>