harb/landing/AGENTS.md

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

Key Views & Components

• HomeView.vue - Launch countdown, feature overview, and staking CTA
• DocsView.vue - Documentation portal with responsive navigation and generated table of contents
• 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.

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

• Lazy load route components
• Optimise imagery (WebP) and leverage Vite asset handling
• Prefer CSS animations to JavaScript when animating UI elements