# 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

Build and run with Docker:

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

```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

- **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](https://pivoine.art)