# Landing Interface - Agent Guide Vue 3 + Vite application that delivers the public marketing site and forthcoming staking UI. ## Technology Snapshot - Vue 3 (Composition API) with TypeScript and Vite toolchain - Vue Router for multi-view navigation - Sass-based design system with custom typography - `@wagmi/vue` for wallet connection (injected, WalletConnect, Coinbase Wallet) - `@tanstack/vue-query` — required peer dependency of `@wagmi/vue`; must be registered via `VueQueryPlugin` in `main.ts` - `@harb/web3` shared composables for wagmi config and wallet hooks - `@harb/analytics` — self-hosted Umami wrapper; call `initAnalytics(url, id)` in `main.ts`, use `trackCtaClick(label)` via the `navigateCta` helper in views ## Key Views & Components - `HomeView.vue` - Launch countdown, feature overview, and staking CTA - `DocsView.vue` - Documentation portal with responsive navigation and generated table of contents - `SecurityInfo.vue` - Displays unaudited badge (planned Q3 2026), KRAIKEN Token and Stake contract addresses with copy-to-clipboard, BaseScan and source links (#147) - `landing/public/pitch-deck.html` — self-contained, print-optimized pitch deck for influencer outreach; accessible at `/pitch-deck.html`; footer link added in `KFooter.vue` - Layout components (`KNavbar.vue`, `KFooter.vue`, `LeftRightComponent.vue`) manage shared chrome - UI components (`KButton.vue`, `Countdown.vue`, `SocialButton.vue`, icon set) supply reusable primitives ## Design Notes - Dark theme palette: primary `#07111B`, accent `#9667BE` - Mobile-first breakpoints at 768px drive layout shifts and slide-out navigation - Motion relies on CSS transitions to keep runtime costs low ## Development Workflow - Boot the full stack with `nohup ./scripts/dev.sh start &`; the script handles landing dev server wiring. - Use local package scripts for targeted tasks: - `npm install` - `npm run build` - `npm run preview` - `npm run type-check` - Deployments assume hash-based routing and the Vite `base` setting configured for static hosting. ## Analytics The landing page uses `@harb/analytics` (a self-hosted Umami wrapper) for conversion funnel tracking. - `initAnalytics(VITE_UMAMI_URL, VITE_UMAMI_WEBSITE_ID)` is called in `main.ts` — the Umami `