# Maintenance with mockup

> A maintenance notice beside a product screen built from the components.

URL: https://apogee.avaui.dev/docs/not-found-pages/maintenance-mockup
Last updated: 2026-10-15

A maintenance notice beside a product screen built from the components.

Last updated October 15, 2026

Live example: https://apogee.avaui.dev/examples/not-found/maintenance-mockup

```astro
---
/**
 * Maintenance with mockup: A maintenance notice beside a product screen built from the components.
 *
 * @page not-found
 */
import NotFound from '@/components/apogee/sections/NotFound/NotFound.astro'
import Card from '@/components/apogee/Card/Card.astro'
import Stat from '@/components/apogee/Stat/Stat.astro'
import Table from '@/components/apogee/Table/Table.astro'
import Badge from '@/components/apogee/Badge/Badge.astro'

const stats = [
  { label: 'Active users', value: '4,862', change: '+12%', trend: 'up' as const },
  { label: 'Sessions', value: '18,204', change: '+8%', trend: 'up' as const },
]
const rows = [
  ['Oakmere', 'Team', 24],
  ['Fernhill', 'Business', 120],
  ['Brightwell', 'Team', 8],
]
---

<NotFound fullHeight back="Go back" layout="split" code="503 error" heading="Under maintenance" description="Sorry, the site is down for scheduled work. We'll be back soon.">
  <!-- A product screen built from the components; decorative, so hidden from assistive tech. -->
  <div slot="media" class="overflow-hidden rounded-xl border-[6px] border-neutral bg-page text-neutral shadow-raised" aria-hidden="true" inert>
    <div class="flex items-center justify-between border-b border-neutral px-5 py-3">
      <p class="font-semibold">Dashboard</p>
      <Badge color="warning" variant="faded">Maintenance</Badge>
    </div>
    <div class="flex flex-col gap-5 p-5">
      <div class="grid grid-cols-2 gap-4">
        {stats.map((s) => <Card padding="medium"><Stat {...s} /></Card>)}
      </div>
      <Table size="small" border>
        <thead><tr><th>Customer</th><th>Plan</th><th>Seats</th></tr></thead>
        <tbody>{rows.map((r) => <tr><td>{r[0]}</td><td>{r[1]}</td><td class="tabular-nums">{r[2]}</td></tr>)}</tbody>
      </Table>
    </div>
  </div>
</NotFound>
```

## Add

```sh
npx @ava-ui/apogee add not-found/maintenance-mockup
```

This copies the page to `src/components/apogee/pages/not-found/` with everything it uses: Badge, Card, NotFound, Stat, Table. Render it from `src/pages/404.astro`, or use **Copy code** above.

## Accessibility

-   The page heading is the `h1`.
-   “Go back” returns to the previous page (or home when the page was opened directly). It needs JS, so it hides without it; “Take me home” always works.
-   The product screen is decoration: `aria-hidden` and `inert`.
-   For real downtime, serve it with status 503 and a `Retry-After` header.

## Related

[

Not foundThe 404 page body; a status line, heading, description and a way back, centred, left-aligned or beside media.

](https://apogee.avaui.dev/docs/sections/not-found)[

CardA surface container for grouped content. Compose freely inside — heading, text, button, an optional media block.

](https://apogee.avaui.dev/docs/card)