kit-ui/README.md

# Kit Landing Page

A stylish, animated landing page for [kit.pivoine.art](https://kit.pivoine.art) - your creative toolkit.

## Features

- ✨ **Animated UI** - Smooth animations with Framer Motion
- 🎨 **Modern Design** - Glassmorphism effects, gradients, and animated backgrounds
- 📱 **Responsive** - Mobile-first design that works on all devices
- ⚡ **Fast** - Static export with Next.js 16 and Turbopack for optimal performance
- 🎯 **SEO Optimized** - Proper meta tags and semantic HTML
- 🚀 **Production Ready** - Docker support with Nginx

## Tech Stack

- **Next.js 16** - React framework with App Router and Turbopack
- **React 19** - Latest React with modern features
- **Tailwind CSS 4** - Utility-first CSS with CSS-first configuration
- **Framer Motion** - Professional animation library
- **TypeScript 5** - Type-safe development
- **ESLint 9** - Latest linting with flat config
- **pnpm** - Fast, efficient package manager

## Getting Started

### Prerequisites

- Node.js 20+
- pnpm (via corepack)

### Development

```bash
# Install dependencies
pnpm install

# Run development server
pnpm dev

# Build for production
pnpm build

# Preview production build locally
pnpm start
```

Visit [http://localhost:3000](http://localhost:3000) to see the site.

## Docker Deployment

### Using Pre-built Image from GHCR

The Docker image is automatically built and published to GitHub Container Registry on every push to main:

```bash
# Pull and run the latest image
docker pull ghcr.io/valknarness/kit-ui:latest
docker run -p 80:80 ghcr.io/valknarness/kit-ui:latest
```

### Build Locally

Or build and run locally:

```bash
# Build the image
docker build -t kit-landing .

# Run the container
docker run -p 80:80 kit-landing
```

### Docker Compose

For production deployment, see `/home/valknar/Projects/docker-compose/kit/compose.yaml`.

### Available Tags

- `latest` - Latest build from main branch
- `main` - Main branch builds
- `v*` - Semantic version tags (e.g., `v1.0.0`)
- `<branch>-<sha>` - Branch-specific builds with commit SHA

## Project Structure

```
.
├── app/
│   ├── layout.tsx      # Root layout with metadata
│   ├── page.tsx        # Home page
│   └── globals.css     # Global styles and utilities
├── components/
│   ├── AnimatedBackground.tsx  # Animated gradient background
│   ├── Hero.tsx               # Hero section with logo
│   ├── Logo.tsx               # Animated SVG logo
│   ├── ToolCard.tsx           # Tool card component
│   ├── ToolsGrid.tsx          # Grid of available tools
│   └── Footer.tsx             # Footer component
├── public/             # Static assets
├── Dockerfile          # Multi-stage Docker build
├── nginx.conf          # Nginx configuration
└── next.config.ts      # Next.js configuration
```

## Customization

### Adding New Tools

Edit `components/ToolsGrid.tsx` and add a new tool object to the `tools` array:

```typescript
{
  title: 'Tool Name',
  description: 'Tool description',
  url: 'https://tool.kit.pivoine.art',
  gradient: 'gradient-purple-blue', // or 'gradient-cyan-purple'
  icon: (
    // Your SVG icon here
  ),
}
```

### Styling

Tailwind CSS 4 uses a new CSS-first configuration approach:

- **Theme customization**: Edit the `@theme` block in `app/globals.css`
- **Custom utilities**: Add `@utility` blocks in `app/globals.css`
- **Animations**: Define keyframes directly in the `@theme` block
- **Colors & fonts**: Configure via CSS custom properties in `@theme`

## Available Tools

- **Convert** - Modern browser-based file converter powered by WebAssembly (videos, images, audio)
- **Pastel** - Modern color manipulation toolkit with palette generation and accessibility testing
- **Audio** - Professional browser-based audio editor with multi-track editing, effects, and analysis (WAV, MP3, OGG, FLAC export)
- **Units** - Smart unit converter with 187 units across 23 categories (length, mass, temperature, etc.)
- **Draw** - Virtual whiteboard for sketching hand-drawn style diagrams (flowcharts, wireframes, collaborative editing)
- **Figlet** - ASCII art text generator with 373 fonts (text banners, terminal art, retro designs)

## CI/CD Pipeline

The project uses GitHub Actions for automated Docker image builds:

### Workflow Features

- ✅ **Automated builds** on push to main and tags
- ✅ **Multi-architecture support** (linux/amd64, linux/arm64)
- ✅ **GitHub Container Registry** (GHCR) publishing
- ✅ **Build caching** for faster builds
- ✅ **Artifact attestation** for supply chain security
- ✅ **Semantic versioning** support

### Triggering Builds

```bash
# Automatic build on push to main
git push origin main

# Create a versioned release
git tag v1.0.0
git push origin v1.0.0

# Manual trigger via GitHub Actions UI
# Go to Actions → Build and Push Docker Image → Run workflow
```

### Using the Published Image

```bash
# Latest from main branch
docker pull ghcr.io/valknarness/kit-ui:latest

# Specific version
docker pull ghcr.io/valknarness/kit-ui:v1.0.0

# Specific commit
docker pull ghcr.io/valknarness/kit-ui:main-abc1234
```

## Performance

- Static export for fast loading
- Optimized images and assets
- Gzip compression via Nginx
- Proper caching headers

## License

Private project - All rights reserved.

## Author

Created for [pivoine.art](https://pivoine.art)