### Build Bookstore App with Next.js and Tailwind CSS

#### Context

Create a simple bookstore app from scratch in an empty directory. The app features a book catalog (grid view) and individual book detail pages, powered by hardcoded mock data.

#### Tech Stack

1. **Next.js 15** (App Router)
2. **Tailwind CSS v4**
3. **TypeScript**

#### Project Structure

```
bookstore/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Root layout with navbar
│   │   ├── page.tsx            # Home — book grid catalog
│   │   ├── globals.css         # Tailwind imports
│   │   └── books/
│   │       └── [id]/
│   │           └── page.tsx    # Book detail page
│   ├── components/
│   │   ├── Navbar.tsx          # Site header with logo/nav
│   │   └── BookCard.tsx        # Card component for the grid
│   └── data/
│       └── books.ts            # Mock book data + TypeScript types
├── public/                     # (empty, Next.js default)
├── package.json
├── tsconfig.json
├── next.config.ts
└── tailwind.config.ts
```

#### Steps

1. **Scaffold Next.js project** — `npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --no-import-alias --use-npm`
2. **Create mock data** — `src/data/books.ts` with ~8 books (title, author, price, genre, description, cover image URL, rating)
3. **Build BookCard component** — cover image, title, author, price, rating; links to detail page
4. **Build Navbar component** — logo/site name, link to home
5. **Build home page** — responsive grid of BookCards with a heading
6. **Build book detail page** — `/books/[id]` with full book info (cover, title, author, price, genre, description, rating)
7. **Polish styling** — consistent Tailwind styling, hover effects, responsive layout

#### Mock Data Shape

```
type Book = {
  id: string;
  title: string;
  author: string;
  price: number;
  genre: string;
  description: string;
  coverImage: string;
  rating: number;
};
```

Cover images will use placeholder URLs from `https://covers.openlibrary.org` (real book covers, no API key needed).

#### Verification

1. `npm run dev` — app starts without errors
2. Home page shows a responsive grid of books
3. Clicking a book card navigates to `/books/[id]` with full details
4. Back navigation works from detail page
5. Responsive layout works on mobile/tablet/desktop

### Key features:

1. Responsive grid layout (1 col mobile, 2 tablet, 3 laptop, 4 desktop)
2. Hover animations on cards (lift + shadow + image zoom)
3. Static generation with `generateStaticParams` for all book detail pages
4. `notFound()` handling for invalid book IDs
5. Sticky frosted-glass navbar

Run `npm run dev` to start the dev server at `http://localhost:3000`.
