## Acceptance Criteria - [x] Use existing Whats New components where applicable ### Page Layout - [x] The page renders a full-width hero header section ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:18579)) containing: - An H1 heading: **"What's new in GitLab"** ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:18583)) - A subtitle: **"Stay updated with our latest features and improvements."** ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:18584)) - The header section is separated from the content below by a bottom border - [x] The page uses a two-column layout at desktop breakpoints, with the main content area occupying the majority of the width (left) and a "Monthly releases" panel in a fixed-width right column ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:18585)) ### Release Section - [x] Each release version is rendered as a distinct section ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17127)) with: - An H2-level version heading (e.g. **"What's new in 18.10"**) aligned left ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17131)) - A release date and a **"New"** pill badge aligned right ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17132)) - A release summary paragraph in a secondary text colour below the heading ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17137)) ### Video Card - [x] A video card is displayed within each release section ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17138)) containing: - A thumbnail image with a play button overlay ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17140)) - A bold linked title ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17150)) - A supporting description paragraph in secondary text colour ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17151)) - A text link in the brand purple (e.g. **"Read CEO's blog"**) with underline styling ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17152)) ### Feature Items - [x] Each feature item renders a bold linked title with inline stage badges ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17156)), a description paragraph, and a bulleted list using the custom bullet-point icon - [x] Stage badges render the correct icon and label for each GitLab stage (Manage, Plan, AI, Code, Monitor, Deploy, Operate) ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17158)) - [x] Bullet list items use the custom SVG bullet icon — not a native `<ul>` ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17163)) - [x] Feature items are visually separated with consistent vertical spacing (`padding-bottom: 24px` per item) ([Figma ↗](https://www.figma.com/design/UeQnHScevSiXoTNxjg6jaf?node-id=2105:17185)) ### SSR / Build Requirements - [x] All release content (version sections, feature items, video cards, badges) is rendered at **build time** via Nuxt's static generation — no client-side data fetching or runtime API calls are used to populate page content - [x] The page hydrates correctly without SSR mismatch errors - [x] The rendered HTML contains the full release content when viewed with JavaScript disabled ### Accessibility & Markup - [x] Feature titles that link to external docs use an `<a>` tag with `target="_blank"` and appropriate `rel` attributes - [x] Decorative images (icons, bullet SVGs) have empty `alt` attributes - [x] The page is navigable by keyboard and passes basic screen reader structure checks