kit-ui/README.md

Kit Landing Page

A stylish, animated landing page for 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

# Install dependencies
pnpm install

# Run development server
pnpm dev

# Build for production
pnpm build

# Preview production build locally
pnpm start

Visit 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:

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

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

{
  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.)
• Paint - Modern browser-based image editor with multi-layer canvas, drawing tools, and 50+ filters (inspired by miniPaint)
• 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

# 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

# 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