# Movie Corner Page — Design Spec

## Overview

A new `/movie-corner` page on gabrielkaszewski.dev that embeds the user's external movie review site and introduces it with a cinematic hero section.

## Goals

- Give the movie review site a home on the personal portfolio
- Welcome visitors with personality before showing the embed
- Keep the design consistent with the rest of the site (dark glassmorphism, yellow accents, `gravity-body`)

## Page Structure

Two vertically stacked sections filling the full viewport height (`min-h-screen flex flex-col`):

1. **Hero section** — fixed height, centered content
2. **Iframe section** — `flex-1`, fills all remaining height

No page-level scroll after the hero. The iframe scrolls internally.

## Hero Section

Centered, padded, with a subtle radial yellow glow behind the icon.

| Element | Detail |
|---|---|
| Icon | 🎬 emoji, large |
| Title | "MOVIE CORNER", uppercase, yellow (`text-yellow-400`), large tracking |
| Tagline | "What I watch, what I think. A personal cinema journal." — muted white |
| Quote | Left-bordered card (yellow left border, glass background): *"I'd only give one piece of advice to anyone marrying. We're all quite similar in the end. We all get old and tell the same tales too many times. But try and marry someone kind."* — About Time, 2013 |
| Genre chips | Three pills: **Sci-Fi** (yellow tint), **Drama** (white/glass), **Family** (white/glass) |

The quote card uses `border-l-2 border-yellow-400/50 bg-white/5` consistent with the site's glass style.

## Iframe Section

- `flex-1 w-full` — grows to fill remaining page height
- `src`: `https://movies.gabrielkaszewski.dev/users/5d253151-0f6a-4246-9bc5-cb0b5869731b`
- `title`: "Gabriel's Movie Reviews"
- No JS error handling — a permanent **"Open reviews directly →"** text link (yellow, small) sits below the iframe as an always-visible fallback
- Thin top border separating hero from iframe (`border-t border-white/10`)

## Navbar

Add "Movie Corner" to the `navLinks` array in `components/navbar.tsx`:

```ts
{ href: "/movie-corner", label: "Movie Corner" }
```

Inserted after "Projects" and before "Blog".

## Metadata

```ts
export const metadata: Metadata = {
  title: "Movie Corner | Gabriel Kaszewski",
  description: "My personal cinema journal — what I watch and how I feel about it.",
}
```

## Styling Constraints

- Use `gravity-body` class on the page root (matches all other pages)
- `pt-20` on the page root to clear the fixed navbar
- No new CSS — use only existing Tailwind utilities and glass classes already in the project (`backdrop-blur-sm`, `bg-white/5`, `border-white/10`, etc.)

## Files to Touch

| File | Change |
|---|---|
| `app/movie-corner/page.tsx` | Create — full page implementation |
| `components/navbar.tsx` | Add "Movie Corner" nav link |

## Out of Scope

- Fetching live stats (films watched, avg rating) — static content only
- JS error boundary on the iframe
- Any backend or API work