harb/web/CLAUDE.md

Web Interface - CLAUDE.md

Vue 3 + Vite application serving as the main interface for KRAIKEN protocol.

Technology Stack

• Vue 3 (Composition API)
• TypeScript - Type-safe development
• Vite - Fast build tooling
• Vue Router - Client-side routing
• Sass - Advanced styling

Architecture

Views

HomeView.vue - Landing page

• Launch countdown timer
• Project introduction
• Feature highlights
• Call-to-action for staking

DocsView.vue - Documentation portal

• Comprehensive protocol documentation
• Auto-generated table of contents
• Mobile-responsive navigation
• Sections: Introduction, Liquidity, AI Agent, Tokenomics, Staking, FAQ

Key Components

Layout Components:

• KNavbar.vue - Main navigation with scroll effects
• KFooter.vue - Site footer
• LeftRightComponent.vue - Content layout helper

UI Components:

• KButton.vue - Reusable button with hover states
• Countdown.vue - Launch countdown display
• SocialButton.vue - Social media links
• NavItem.vue - Navigation menu items

Icons (components/icons/):

• Custom SVG icons for UI elements
• Social media icons (Twitter, Discord, Telegram)

Styling

Design System

• Primary Color: #07111B (deep ocean)
• Accent: #9667BE (purple)
• Background: Dark theme throughout
• Typography: Custom fonts (Audiowide, DM Sans, Orbitron)

Responsive Design

• Mobile-first approach
• Breakpoint: 768px
• Slide-out mobile navigation
• Optimized images for different screen sizes

Development Commands

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Type checking
npm run type-check

Deployment

Configured for GitHub Pages:

• Hash-based routing for compatibility
• Base URL configuration in vite.config.ts
• Assets optimized for CDN delivery

Future Integrations

Wallet Connection (Planned)

• Web3 wallet integration
• Network switching to Base
• Transaction signing

Staking Interface (Planned)

• Position management
• Tax rate adjustment
• Real-time position monitoring
• Snatching interface

Data Visualization (Planned)

• Protocol metrics dashboard
• Liquidity depth charts
• Staking statistics

Code Quality Guidelines

• Use Composition API for all components
• Leverage TypeScript for type safety
• Keep components small and focused
• Use Sass variables for consistent theming
• Follow Vue 3 best practices

Performance Optimization

• Lazy load route components
• Optimize images (WebP format)
• Minimize bundle size
• Use CSS animations over JavaScript
• Implement proper caching strategies