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

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

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

const goToNewWallet = () => {
    window.open('https://kaspa-ng.org', '_blank')
}

const goToLegacyWallet = () => {
    // Emit event to parent to show tab interface
    emit('onboardingComplete')
}
</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>
                        We've launched a new version of the Kaspa Wallet at
                        <br />
                        <span class="highlight"> https://kaspa-ng.org </span>
                    </p>
                    <ButtonCommon @click="goToNewWallet">
                        Go to the new Kaspa NG Wallet
                    </ButtonCommon>
                </div>
                <div class="spacer"></div>
                <p>
                    Already have funds on the old wallet?<br />
                    You can still use <span class="highlight">https://wallet.kaspanet.io</span>
                </p>
                <ButtonCommon @click="goToLegacyWallet"> Continue on Legacy Wallet </ButtonCommon>
                <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: 800px;
        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>