## Atelier (S—018)

A complete portfolio page for an architecture or design studio: serif statement, work index with cursor previews, and contact.

- URL: https://sundaeui.dev/components/atelier-template
- Category: Templates & layouts · Art direction: Editorial
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/atelier-template.json`
- Tags: portfolio, tailwind, typography, animated, agency, react, template, landing-page

A full page for studios that sell taste. The hero is a single serif statement with a short colophon. The work index is a ruled list where hovering a project dims the others and slides out a preview plate that follows the cursor. Each plate wipes in with a clip-path reveal.
Below it sit three numbered practice areas and a dark contact footer, where the email address is the call to action, set large with an underline that draws in on hover.
Preview plates are compositions generated from two colours per project, so the template looks finished before you add photography. Replace Plate with next/image when you have real images. It is one file written in Tailwind, and every section is a clear block you can lift out.

### Usage

```tsx
import { AtelierTemplate } from '@/components/sundae/atelier-template'

export default function Page() {
  return (
    <AtelierTemplate
      studio="Atelier Vos"
      city="Amsterdam"
      email="studio@ateliervos.nl"
      projects={[{ year: '2026', title: 'House on the Dune', place: 'Texel, NL', discipline: 'Residential', plate: ['#c8b79a', '#3b3a33'], href: '/work/dune' }]}
    />
  )
}
```

### Props

- `studio` (`string`, default `'Atelier Vos'`): Studio name in the nav and footer.
- `statement` (`ReactNode`): Hero statement. Use <em> for the muted italic phrase.
- `projects` (`AtelierProject[]`): { year, title, place, discipline, plate: [colorA, colorB], href? }.
- `services` (`{ title, body }[]`): Practice areas, best with three.
- `email` (`string`): Contact address, used for Enquire and in the footer.
- `city` (`string`): Shown in the colophon and footer.

### Accessibility

- Uses landmarks throughout: header, nav, sections with headings, and footer. There is a single h1.
- The cursor preview is decorative (aria-hidden), and the project rows are ordinary links that respond to focus as well as hover.
- Text contrast passes AA on both the light and dark surfaces.