archy/neode-ui/src/views/OnboardingIntro.vue

<template>
  <div class="min-h-screen flex items-center justify-center p-4">
    <div class="max-w-2xl w-full">
      <div class="glass-card p-12 pt-20 text-center animate-fade-up relative overflow-visible">
        <!-- Logo - half in, half out of container -->
        <div class="absolute -top-10 left-1/2 -translate-x-1/2 z-10">
          <div class="logo-gradient-border w-20 h-20">
            <AnimatedLogo no-border fit />
          </div>
        </div>
        
        <h1 class="text-4xl font-bold text-white mb-4">
          Welcome to Archipelago
        </h1>
        
        <p class="text-xl text-white/80 mb-12 max-w-2xl mx-auto">
          Your personal server for a sovereign digital life
        </p>
        
        <button
          @click="goToOptions"
          class="glass-button px-8 py-4 rounded-lg text-lg font-medium transition-all hover:bg-black/70 hover:border-white/30"
        >
          Unlock your sovereignty →
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import AnimatedLogo from '@/components/AnimatedLogo.vue'

const router = useRouter()

function goToOptions() {
  router.push('/onboarding/path').catch(() => {})
}
</script>