# Landing 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