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

Build and run with Docker:

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

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

Or with docker-compose (see /home/valknar/Projects/docker-compose/kit/compose.yaml).

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

• Vert - Minimalist pastebin for code snippets
• Paint - Browser-based image editor

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