118 lines
2.6 KiB
Markdown
118 lines
2.6 KiB
Markdown
|
# 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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 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
|