# Frontend Toolkit Blocks

![Netlify-ready](https://img.shields.io/badge/Netlify-ready-00C7B7?logo=netlify&logoColor=white)

A curated collection of **responsive Vue 3 component layouts, page blocks, and premium UI assets** — ready to copy, paste, and ship.

Built with **Vue 3**, **TypeScript**, **Tailwind CSS v4**, and **Vite**.

## Features

- **Copy & Paste Ready** — Every component is self-contained
- **Fully Responsive** — Mobile-first design that works on every screen size
- **Dark Mode** — Built-in dark/light theme support
- **TypeScript** — Full type safety with strict typing
- **Tailwind CSS v4** — Modern utility-first styling with CSS-first configuration
- **Vue 3 Composition API** — Uses `<script setup>` and composables

## What's Included

### Page Blocks

- **HeroBlock** — Hero section with gradient text, badge, and dual CTAs
- **FeaturesBlock** — Configurable feature grid with icons (2/3/4 columns)
- **PricingBlock** — Three-tier pricing cards with popular plan highlighting
- **CtaBlock** — Call-to-action with gradient background and optional email input
- **ContentBlock** — Split content section with stats and testimonials

### Page Layouts

- **DashboardLayout** — Admin dashboard with collapsible sidebar, search, stats, and responsive mobile nav
- **AuthLayout** — Split-screen authentication with social login and branding panel

### UI Components

- **ThemeToggle** — Dark/light mode toggle using VueUse

## Getting Started

```bash
# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build for production
pnpm build

# Run tests
pnpm test:unit
```

## Deploy To Netlify

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/boussadjra/frontend-toolkit)

The project is configured for Netlify with:

- `netlify.toml` for the build command and publish directory
- `public/_redirects` for Vue Router history-mode fallback

Netlify settings:

- Build command: `pnpm build`
- Publish directory: `dist`
- Node version: `22`

If you prefer the CLI after logging in:

```bash
pnpm --package=netlify-cli dlx netlify login
pnpm --package=netlify-cli dlx netlify init
```

## Project Structure

```
src/
├── assets/
│   └── main.css          # Tailwind CSS entry + design tokens
├── components/
│   ├── app/              # App shell (header, footer)
│   ├── blocks/           # Copy-paste page sections
│   ├── layouts/          # Full page layouts
│   └── ui/               # UI primitives
├── lib/
│   └── utils.ts          # Utility functions (cn)
├── pages/                # App views/pages
├── router/               # Vue Router config
└── main.ts               # App entry point
```

## Tech Stack

| Tool         | Version | Purpose          |
| ------------ | ------- | ---------------- |
| Vue          | 3.5+    | UI framework     |
| TypeScript   | 5.7+    | Type safety      |
| Tailwind CSS | 4.1+    | Styling          |
| Vite         | 6.2+    | Build tool       |
| Pinia        | 2.3+    | State management |
| Vue Router   | 4.5+    | Routing          |
| VueUse       | 12+     | Composables      |
| Lucide       | Latest  | Icons            |

## License

MIT