2026-03-23 07:04:19 +00:00
|
|
|
<!-- last-reviewed: 224edcc6d3a61aa5a61b2816061f253584791cfd -->
|
2025-09-24 09:57:20 +02:00
|
|
|
# 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
|
2026-02-23 21:13:02 +00:00
|
|
|
- `@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
|
2025-09-24 09:57:20 +02:00
|
|
|
|
|
|
|
|
## Key Views & Components
|
|
|
|
|
- `HomeView.vue` - Launch countdown, feature overview, and staking CTA
|
|
|
|
|
- `DocsView.vue` - Documentation portal with responsive navigation and generated table of contents
|
2026-03-23 07:04:19 +00:00
|
|
|
- `SecurityInfo.vue` - Displays unaudited badge (planned Q3 2026), KRAIKEN Token and Stake contract addresses with copy-to-clipboard, BaseScan and source links (#147)
|
2025-09-24 09:57:20 +02:00
|
|
|
- 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
|
2025-10-02 14:37:59 +02:00
|
|
|
- Boot the full stack with `nohup ./scripts/dev.sh start &`; the script handles landing dev server wiring.
|
2025-09-24 09:57:20 +02:00
|
|
|
- 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.
|
|
|
|
|
|
|
|
|
|
## Upcoming Integrations
|
|
|
|
|
- Wallet connection with Base network switching
|
|
|
|
|
- Staking dashboard that reuses shared helpers from `kraiken-lib`
|
|
|
|
|
- Data visualisations sourced from the Ponder GraphQL API
|
|
|
|
|
|
|
|
|
|
## Quality Guidelines
|
|
|
|
|
- Favour Composition API and strongly typed props/emit definitions
|
|
|
|
|
- Keep components focused; push shared logic into composables when possible
|
|
|
|
|
- Use Sass variables and mixins from the design system for consistent styling
|
|
|
|
|
|
|
|
|
|
## Performance Tips
|
2025-07-24 16:08:17 +02:00
|
|
|
- Lazy load route components
|
2025-09-24 09:57:20 +02:00
|
|
|
- Optimise imagery (WebP) and leverage Vite asset handling
|
|
|
|
|
- Prefer CSS animations to JavaScript when animating UI elements
|
