# Selected Work Section — Summary & Build Guide

## 1. Summary

The Selected Work section (`#work`) is the home-page product portfolio. It shows 4 products with a category filter. The first product in the current filter is rendered as a large **featured card**, and the rest appear in a responsive grid of **product cards**. Each card has a screenshot, a monogram logo, a description and a "View Product" link.

- Component: `src/components/SelectedWork.tsx` (client component, uses `useState`)
- Data: `src/lib/home-content.ts` (`caseStudies`, types `CaseStudy`, `WorkCategory`, `WorkPlatform`)
- Shared UI: `SectionHeader` + `Highlight`, `SectionBackdrop` (`tinted`, glow right), `ScrollReveal`
- Images: `public/images/case-*.jpg` (rendered with `next/image`)
- Anchor: `id="work"`, `scroll-mt-24`

### Header copy

- Eyebrow: "Selected Work"
- Title: "Products we've built **for the real world.**"
- Description: "Explore the apps and digital products created, designed and developed by our team."

### Products (from `caseStudies`)

| # | Title | Monogram | Categories | Platforms | Description |
|---|-------|----------|-----------|-----------|-------------|
| 1 | PayStride | PS | Mobile Apps, Consumer Products | iOS, Android | Mobile lending app from application to approval in one flow |
| 2 | Nordwear | NW | Web Products | Web | Commerce operations platform syncing orders, stock and fulfilment |
| 3 | CareBridge | CB | SaaS, Web Products | Web | Clinic suite for scheduling, patient communication and operations |
| 4 | FleetPulse | FP | SaaS, Mobile Apps | Web, Android | Live fleet tracking and routing for ops teams and drivers |

Each entry also has `features` (3 bullets), `tags` (tech stack), `outcome` (a metric string) and an image (`/images/case-fintech.jpg`, `case-commerce.jpg`, `case-health.jpg`, `case-logistics.jpg`).

Note: `tags` and `outcome` are in the data but **not rendered** by the component.

## 2. How It Is Built

### 2.1 Data model

```ts
export type WorkCategory = "Mobile Apps" | "Web Products" | "SaaS" | "AI" | "Consumer Products";
export type WorkPlatform = "iOS" | "Android" | "Web";

export type CaseStudy = {
  image: string;          // public/ path
  title: string;
  monogram: string;       // placeholder logo text
  description: string;
  categories: WorkCategory[];
  platforms: WorkPlatform[];
  outcome: string;
  features: string[];
  tags: string[];
  productUrl?: string;    // optional real links
  appStoreUrl?: string;
  googlePlayUrl?: string;
};
```

To add a product, append an object to `caseStudies`, add its image to `public/images/`, and it appears automatically.

### 2.2 Filtering

- `CATEGORY_ORDER` fixes the tab order. `FILTERS` is `"All"` plus only the categories that have at least one product, so "AI" is hidden today because no product uses it.
- State: `filter` (default `"All"`).
- `items` is all products, or those whose `categories` include the filter.
- `const [featured, ...rest] = items` — the first item becomes the featured card, the rest go in the grid.
- The results wrapper has `key={filter}` and `animate-tab-in`, so it remounts and animates on each filter change.

### 2.3 Filter bar

A `role="group"` pill bar (`aria-label="Filter products by category"`) with `<button aria-pressed>` items. It is `min-h-11`, horizontally scrollable on small screens (`no-scrollbar overflow-x-auto`), and the active tab gets a light-blue fill, accent border and soft glow.

### 2.4 Featured card (`FeaturedCard`)

- Two-column layout on `lg` (`58fr / 42fr`); stacked below that. `rounded-[2rem]`.
- Left: screenshot (`object-cover`, slow zoom on hover), a hover gradient overlay and a "Featured" pill.
- Right: monogram logo + title + categories, description, a checked feature list, platform badges, optional store buttons and a primary "View Product" pill button.

### 2.5 Product card (`ProductCard`)

- Grid: 1 column, `md:2`, `lg:3`, with `ScrollReveal` stagger of `i * 90` ms.
- Top: screenshot with platform badges at top-left. On hover or focus-within, a dark gradient overlay reveals a white "View Product" pill.
- Body: monogram logo, title, categories (truncated), description (`flex-1` so cards align), optional store links and a text "View Product" link.
- Hover: lifts 6px, border tints, blue glow shadow.

### 2.6 Small helpers (same file)

- `PlatformBadge` — Globe icon for Web, Smartphone otherwise.
- `Logo` — gradient rounded square showing `monogram` (`aria-hidden`).
- `ProductLink` — links to `productUrl` (opens in a new tab with `rel="noopener noreferrer"`) or falls back to `/#contact`.
- `StoreLinks` — App Store / Google Play buttons, rendered only when URLs exist.

### 2.7 Step-by-step to recreate

1. Add the types and `caseStudies` array in `home-content.ts`.
2. Put the screenshots in `public/images/`.
3. Make sure `SectionHeader`/`Highlight`, `SectionBackdrop` and `ScrollReveal` exist.
4. Create `SelectedWork.tsx` with the filter state, the filter bar, and the featured plus grid layout.
5. Add the helper components, then place `<SelectedWork />` in `src/app/page.tsx`.
6. Add the nav link `/#work` in `navLinks` if it is not there.

## 3. Notes & Things to Review

- **Unverified data:** the `outcome` strings ("cut from 4 days to 6 hours", "up 3.4x", "down 27% across 42 clinics", "reduced 18%") and the Reviews section's testimonials, names and companies (including PayStride, CareBridge and FleetPulse) look like placeholder content. `outcome` isn't rendered here, but confirm the data before showing it publicly, and don't present these products as real client work unless they are.
- **Placeholder logos:** monograms stand in for real logos, as the data comment says.
- **CTA falls back to `/#contact`** for all four products because no `productUrl` is set. The label "View Product" implies a destination, so add real URLs or reword.
- **Featured card depends on filter order:** the first result is always featured, so a filter with one product shows only the featured layout.
- **Hover-only CTA on cards:** the overlay "View Product" link is revealed on hover or focus, but the body also has a always-visible link, so touch users are covered.
- **Reduced motion:** `ScrollReveal` is handled globally in CSS, but the image zoom and lift transitions have no `motion-reduce:` variants, so consider adding them.
- **Alt text:** images use "`<title>` — product screenshot".
- **Image cost:** all four images use `width=1024 height=768` with `sizes` set, which is good for `next/image`. Check the source files are compressed.