path: root/docs/superpowers/specs/2026-04-17-404-repository-pages-design.md

# 404 & Repository Pages Design Spec
**danix.xyz Hacker Theme — Week 6**

**Date:** 2026-04-17  
**Project:** danix.xyz Hacker Theme (Hugo)  
**Scope:** Design two new pages (404 error page, Repository/Slackware guide page)  
**Status:** Design Phase (awaiting approval)

---

## Overview

This spec defines the design and implementation strategy for two new pages in Week 6:

1. **404 Error Page** — User-friendly error page with hacker theme integration, search, recent articles, and interactive easter egg
2. **Repository Page** — Slackware package repository guide with hero section, installation/usage sections, and GitHub SlackBuild repo cards

Both pages must:
- Maintain visual cohesion with existing theme (Weeks 1-5)
- Meet WCAG 2.1 AA accessibility standards
- Support multilingual content (EN/IT)
- Be fully responsive (320px, 768px, 1200px+)
- Work in light and dark modes
- Integrate animations and interactive elements from Week 5

---

## Part 1: 404 Error Page

### Purpose & Audience
- **Purpose:** Display when users navigate to non-existent URLs; provide helpful navigation back to site content
- **Audience:** Users who've made typos or followed broken links
- **Success Criteria:** Users quickly understand the error, access search/articles, find their way back to site

### Visual Design & Layout

#### Structure
```
Header (existing hamburger + theme toggle)
────────────────────────────────────────
Main Content (centered, full-width, single column)
  • 404 heading (large, accent color, themed)
  • Error message (friendly, conversational)
  ────────────────────────────────────────
  Search box (interactive, themed)
  ────────────────────────────────────────
  "Recent Articles" section (3-5 articles)
    - Article title + date + category
    - Links to articles
  ────────────────────────────────────────
  Quick navigation links (Home, Articles, Contact)
  ────────────────────────────────────────
  Easter egg (interactive: "Follow the white rabbit")
────────────────────────────────────────
Footer (existing)
```

#### Visual Elements
- **404 Heading:** Oversized (6xl/4rem), accent purple color, bold weight, animated entry (fade-in + subtle scale from Week 5 keyframes)
- **Error Message:** 1.125rem/18px, gray-600 (light mode) / gray-400 (dark mode), conversational tone
- **Search Box:** Styled to match form inputs from Week 4 (border, focus ring, label), full-width or max-width container
- **Article Cards:** Minimal style (title, date, category badge), inherit article list styling from Week 2-3
- **Navigation Links:** Button styles from Week 2 (primary, secondary, outline variants)
- **Easter Egg:** Hidden by default, triggered by specific interaction (click "Follow the white rabbit" link or keyboard shortcut), displays blue pill/red pill choice (inline modal or overlay)

#### Color & Typography
- **Accent:** Primary purple (#8B5CF6 or project's purple)
- **Text:** Inherit from project palette (gray-900/light, gray-50/dark)
- **Heading Font:** Inherit from project (likely mono or sans-serif bold)
- **Body Font:** Inherit from project
- **Focus Indicators:** 2px ring from Week 5 (visible in light & dark modes)

#### Responsive Behavior
- **Mobile (320px):** Single column, search box full-width, article cards stacked, buttons stack vertically
- **Tablet (768px):** Single column, slightly wider max-width for content, buttons may be inline
- **Desktop (1200px+):** Single column, centered max-width (~600-800px), all elements readable

#### Dark/Light Mode
- **Light Mode:** Light background, dark text, purple accents, focus rings with high contrast
- **Dark Mode:** Dark background, light text, purple accents, focus rings with high contrast (inherited from Week 5)

### Functionality & Interactivity

#### Search Box
- **Type:** Client-side search or Hugo search integration
- **Behavior:** On input, filter/search site content in real-time or on Enter
- **Display:** Show matching results (articles, pages) or "no results" message
- **Accessibility:** Label associated with input, ARIA live region for search results, keyboard-navigable results

#### Recent Articles Section
- **Content:** Auto-pulled from Hugo's recent articles (3-5 most recent)
- **Display:** Title, date (formatted EN/IT), category badge, link to article
- **Accessibility:** Semantic list, headings, links keyboard-navigable, article titles descriptive

#### Easter Egg (Optional Interactive Element)
- **Trigger:** Click "Follow the white rabbit" link or press a keyboard shortcut (e.g., Shift+? or Alt+W)
- **Display:** Modal or inline section with blue pill/red pill choice (humorous, non-intrusive)
  - Blue pill: Stay on 404 page (or navigate to a funny "you chose the blue pill" page)
  - Red pill: Navigate to a random article (or home page with a surprise)
- **Accessibility:** Modal must have focus trap (from Week 5), close button, keyboard-dismissible (Escape key)
- **Implementation:** Alpine.js for toggle, CSS animations for reveal

#### Language Switching
- **EN/IT:** Page content, search results, article titles, labels all in current language
- **Logic:** Uses existing language switcher from header, maintains language context in URLs
- **i18n Strings:** All UI text (404 heading, error message, button labels, search placeholder) in `i18n/en.yaml` and `i18n/it.yaml`

### Accessibility Requirements (WCAG 2.1 AA)

#### Semantic HTML
- One `<h1>` (404 heading, may be visual-only via CSS if needed, but semantically present)
- `<h2>` for "Search" and "Recent Articles" sections (proper hierarchy)
- `<main>` wrapper around content
- Semantic `<article>` for each article in recent list
- `<form>` for search box with `<label>` for input
- `<nav>` for quick navigation links (if grouped)

#### Keyboard Navigation
- **Tab order:** Natural top-to-bottom flow (search box → articles → links → easter egg trigger)
- **Search box:** Focusable, Enter submits, results keyboard-navigable
- **Article links:** All keyboard-accessible, focus rings visible
- **Buttons:** Enter or Space activates, focus rings visible
- **Easter egg modal:** Focus trap (first focusable element when opened, Escape closes)

#### Focus Indicators
- **All interactive elements:** 2px focus ring (visible in light & dark modes, sufficient contrast)
- **Contrast:** Focus ring must meet WCAG AA (4.5:1 minimum for text)
- **Visibility:** Ring should not obscure content, placed outside element when possible

#### Color Contrast
- **Text:** Body text ≥4.5:1 contrast ratio (light & dark modes)
- **Links:** Link color ≥4.5:1 contrast with background
- **Buttons:** Button text ≥4.5:1 contrast with button background
- **Focus rings:** Ring color ≥3:1 contrast with background

#### Screen Reader Support
- **Heading:** "404", announced as heading level 1
- **Error message:** Announced as paragraph
- **Search box:** Label announced ("Search site"), input type clear
- **Article links:** Link text descriptive (article title + date/category context)
- **Buttons:** Text clear and descriptive
- **Easter egg:** Modal announced with role="dialog", close button labeled

#### Motion & Animation
- **Animations:** Use keyframes from Week 5 (fade-in, subtle scale)
- **prefers-reduced-motion:** Disable animations for users with this preference (from Week 5 implementation)
- **Transitions:** Keep smooth but brief (200-300ms)

#### Responsive & Touch
- **Touch targets:** All buttons and links ≥44px (WCAG 2.5.5)
- **Touch spacing:** Links/buttons have adequate spacing to avoid accidental activation
- **Viewport:** Responsive at 320px, 768px, 1200px (tested in Week 6)

---

## Part 2: Repository Page (Slackware Packages Guide)

### Purpose & Audience
- **Purpose:** Guide users on how to use the Slackware package repository, with links to GitHub SlackBuild repos
- **Audience:** Slackware users interested in pre-built packages and the SlackBuild source files
- **Success Criteria:** Users understand how to add the repository, install packages, and find the GitHub source repos

### Visual Design & Layout

#### Structure
```
Header (existing hamburger + theme toggle)
────────────────────────────────────────
Hero Section (full-width, accent background or subtle gradient)
  • Title: "Slackware Repository"
  • Subtitle: Brief intro
  • Quick-start command (code block, copyable)
  ────────────────────────────────────────
Main Content (centered, single column, no sidebar)
  ────────────────────────────────────────
  Section: "Installation"
    - Instructions for adding repo
    - Code blocks with commands
    - Compatibility notes (Slackware versions)
  ────────────────────────────────────────
  Section: "Usage"
    - How to install/update packages
    - Code blocks with examples
    - Common package management tasks
  ────────────────────────────────────────
  Section: "Available Packages"
    - Brief list or table of packages
    - Version info
    - Links to GitHub repos
  ────────────────────────────────────────
  Section: "GitHub SlackBuild Repositories" (or similar title)
    - Cards for each repo
      • Project image/icon
      • Project name
      • Short description
      • GitHub link
      • Tech stack or tags
────────────────────────────────────────
Footer (existing)
```

#### Hero Section
- **Background:** Subtle gradient or solid accent color with opacity, or dark overlay on themed background
- **Title:** Large, bold (4xl/3rem), accent purple or white
- **Subtitle:** 1.125rem/18px, descriptive intro
- **Quick-start Command:** Code block, monospace font, dark background, syntax-highlighted or plain, with copy button (optional)
- **Layout:** Centered, max-width ~800px, padding/margin for breathing room

#### Organized Sections (Installation, Usage, Available Packages)
- **Headings:** `<h2>` (1.875rem/30px), accent color or bold
- **Paragraphs:** Standard body text (1rem/16px), gray-600/400
- **Code Blocks:** Dark background (inherited from Week 1 code styling), monospace font, syntax highlighting if available, scrollable horizontally if needed
- **Lists:** Semantic `<ol>` or `<ul>`, bullet/number styling inherited from project

#### GitHub Repo Cards
- **Layout:** Grid (1 column mobile, 2-3 columns tablet/desktop) or stacked cards
- **Card Content:**
  - **Image/Icon:** Project image or Slackware logo, ~200px height, responsive
  - **Title:** Project/repo name (h3)
  - **Description:** Short text (2-3 sentences), gray-600/400
  - **Tech Tags:** Optional badges (if repo uses specific languages/tools)
  - **GitHub Link:** Button or link (styled as button)
- **Card Styling:** Border, subtle shadow, hover effect (from Week 2 card styles), dark/light mode compatible

#### Color & Typography
- **Hero:** Accent purple or themed gradient, white or dark text
- **Headings:** Project bold sans-serif or mono, accent purple for h2
- **Body:** Standard gray-900/50, inherited fonts
- **Code Blocks:** Dark background (#1F2937 or darker), light text (#F3F4F6), monospace font
- **Cards:** Subtle borders, inherited shadow/hover effects

#### Responsive Behavior
- **Mobile (320px):** Single column, hero full-width, code blocks scrollable, cards stacked
- **Tablet (768px):** Single column content, cards 2 per row, code blocks still scrollable
- **Desktop (1200px+):** Single column content (max-width ~900px), cards 2-3 per row, code blocks fit viewport

#### Dark/Light Mode
- **Light Mode:** Light background, dark text, purple accents, code blocks with dark bg/light text
- **Dark Mode:** Dark background, light text, purple accents, code blocks match dark theme
- **Card Styling:** Borders and shadows adapt to mode (inherited from Week 2-3)

### Functionality & Interactivity

#### Code Block Copy Button
- **Interaction:** Hover on code block reveals copy button, click copies to clipboard
- **Feedback:** Toast message "Copied!" (from Week 4 toast component) or button state change
- **Accessibility:** Button labeled, keyboard-accessible (Tab + Enter)

#### Expandable Sections (Optional)
- **Interaction:** "Installation" or "Usage" sections can be expandable details/collapsible
- **Behavior:** Click to expand/collapse, smooth animation
- **Default:** All sections open (or first section expanded)
- **Accessibility:** `<details>/<summary>` semantics or ARIA expanded for custom implementation

#### GitHub Links
- **Behavior:** Click opens repo in new tab/window (or same window, user preference)
- **Styling:** Link styling from Week 3, with external link icon (optional, if project uses it)
- **Accessibility:** Link text clear, target="_blank" handled with ARIA

#### Language Switching
- **EN/IT:** All section headings, instructions, descriptions in current language
- **i18n Strings:** All UI text in `i18n/en.yaml` and `i18n/it.yaml`
- **Content:** May have separate content files for EN/IT or manage via shortcodes

### Accessibility Requirements (WCAG 2.1 AA)

#### Semantic HTML
- `<h1>` for page title (or hero title)
- `<h2>` for main sections (Installation, Usage, etc.)
- `<h3>` for subsections or repo names
- `<main>` wrapper around content
- `<article>` or `<section>` for each repo card
- `<code>` or `<pre><code>` for code blocks
- `<button>` for copy buttons and CTA links
- `<nav>` if repo cards are navigation-heavy

#### Keyboard Navigation
- **Tab order:** Natural top-to-bottom (hero → sections → code blocks → repo cards → links)
- **Code blocks:** Copy button focusable and activable (Enter/Space)
- **Expandable sections:** Summary element keyboard-activable (Enter)
- **Repo links:** All keyboard-accessible, focus rings visible
- **All buttons:** Enter or Space activates

#### Focus Indicators
- **All interactive elements:** 2px focus ring (visible in light & dark modes)
- **Contrast:** Ring ≥3:1 contrast with background
- **Visibility:** Should not obscure content

#### Color Contrast
- **Text:** Body text ≥4.5:1 contrast (light & dark modes)
- **Links:** Link color ≥4.5:1 contrast with background
- **Code blocks:** Text in code blocks ≥4.5:1 contrast
- **Buttons:** Button text ≥4.5:1 contrast with background

#### Screen Reader Support
- **Page title:** Clear, "Slackware Repository" or similar
- **Hero:** Subtitle announced, quick-start command in `<code>` element (or `<pre><code>`)
- **Section headings:** All announced with level (h2, h3)
- **Code blocks:** Announce as code (screen reader announces "code block"), text within readable
- **Copy button:** Labeled "Copy" or "Copy to clipboard", feedback announced
- **Repo cards:** Card title, description, link text all clear and descriptive
- **Links:** External link icon indicated (if used) with aria-label or title

#### Motion & Animation
- **Animations:** Use keyframes from Week 5 (fade-in, slide, scale)
- **Expandable sections:** Smooth transitions (200-300ms)
- **Card hover effects:** Subtle, non-distracting
- **prefers-reduced-motion:** Disable animations for users with preference

#### Responsive & Touch
- **Touch targets:** All buttons and links ≥44px (WCAG 2.5.5)
- **Touch spacing:** Cards and repo items have adequate spacing
- **Viewport:** Responsive at 320px, 768px, 1200px

---

## Part 3: Implementation Strategy

### Files to Create/Modify

#### New Files
1. **`layouts/404.html`** — 404 error page layout (Hugo special template)
2. **`content/en/repository/_index.md`** — Repository page content (English, fully editable markdown)
3. **`content/it/repository/_index.md`** — Repository page content (Italian, fully editable markdown)
4. **`themes/danix-xyz-hacker/layouts/repository/single.html`** (optional) — Custom layout for repository section if needed
5. **`data/repos.yaml`** or **`data/en/repos.yaml`** + **`data/it/repos.yaml`** — Structured data for GitHub repo cards (YAML, editable)

#### Modified Files
1. **`i18n/en.yaml`** — Add i18n strings for 404 and Repository pages
2. **`i18n/it.yaml`** — Add i18n strings for 404 and Repository pages (Italian)
3. **`tailwind.config.js`** (if needed) — Add custom utilities for 404/repository specific styling
4. **`themes/danix-xyz-hacker/assets/js/main.js`** (if needed) — Add search functionality for 404, copy-to-clipboard for repo page

#### No Changes Required
- Existing components (header, footer, hamburger menu, form inputs, buttons, cards)
- Existing animations and keyframes from Week 5
- Existing accessibility patterns (focus management, ARIA labels)

### i18n Strings Required

#### 404 Page (EN)
```yaml
notFound:
  other: "Page Not Found"
errorHeading:
  other: "404"
errorMessage:
  other: "Sorry, the page you're looking for doesn't exist."
searchPlaceholder:
  other: "Search the site..."
recentArticles:
  other: "Recent Articles"
goHome:
  other: "Go Home"
browseArticles:
  other: "Browse Articles"
contactSupport:
  other: "Contact Me"
followWhiteRabbit:
  other: "Follow the white rabbit"
noResults:
  other: "No results found"
```

#### 404 Page (IT)
```yaml
notFound:
  other: "Pagina Non Trovata"
errorHeading:
  other: "404"
errorMessage:
  other: "Scusa, la pagina che cerchi non esiste."
searchPlaceholder:
  other: "Cerca nel sito..."
recentArticles:
  other: "Articoli Recenti"
goHome:
  other: "Torna a Casa"
browseArticles:
  other: "Sfoglia Articoli"
contactSupport:
  other: "Contattami"
followWhiteRabbit:
  other: "Segui il coniglio bianco"
noResults:
  other: "Nessun risultato trovato"
```

#### Repository Page (EN)
```yaml
repositoryTitle:
  other: "Slackware Repository"
repositorySubtitle:
  other: "Download and install my curated Slackware packages"
quickStartTitle:
  other: "Quick Start"
copyCommand:
  other: "Copy"
copiedMessage:
  other: "Copied to clipboard!"
installationTitle:
  other: "Installation"
usageTitle:
  other: "Usage"
availablePackagesTitle:
  other: "Available Packages"
githubReposTitle:
  other: "GitHub SlackBuild Repositories"
visitGithub:
  other: "Visit GitHub"
```

#### Repository Page (IT)
```yaml
repositoryTitle:
  other: "Repository Slackware"
repositorySubtitle:
  other: "Scarica e installa i miei pacchetti Slackware curati"
quickStartTitle:
  other: "Inizio Rapido"
copyCommand:
  other: "Copia"
copiedMessage:
  other: "Copiato negli appunti!"
installationTitle:
  other: "Installazione"
usageTitle:
  other: "Utilizzo"
availablePackagesTitle:
  other: "Pacchetti Disponibili"
githubReposTitle:
  other: "Repository GitHub SlackBuild"
visitGithub:
  other: "Visita GitHub"
```

### Component Integration Points

#### 404 Page
- **Recent articles:** Use Hugo's `first 5 (where .Section "articles")` or similar to fetch latest articles
- **Search:** Client-side search via existing Alpine.js setup or lightweight library
- **Easter egg:** Alpine.js for modal toggle, focus trap from Week 5
- **Form styling:** Inherit from Week 4 form components
- **Button styling:** Inherit from Week 2 button classes
- **Animations:** Use keyframes from Week 5 (fade-in, scale)

#### Repository Page — Content Management via Markdown

**Markdown-Driven Architecture:**
All repository page content is fully editable via markdown files and YAML data files. No hardcoded content in templates.

**File Structure:**
- **`content/en/repository/_index.md`** — English page content:
  - Page frontmatter (title, date, etc.)
  - Hero section content (title, subtitle, quick-start command via markdown code fence)
  - Installation, Usage, Available Packages sections (regular markdown headings and paragraphs)
  - Quick-start command as markdown code block (triple backticks, bash syntax)
  - Each section written as markdown (headings, paragraphs, lists, code blocks)

- **`content/it/repository/_index.md`** — Italian page content (same structure, Italian language)

- **`data/repos.yaml`** — GitHub repo card data (structured, language-agnostic):
  ```yaml
  repos:
    - name: slackbuild-package-1
      description_key: "repo1_description"  # i18n key for description
      github_url: "https://github.com/danix/slackbuild-package-1"
      image: "images/repo-icons/package-1.png"  # path to image asset
      tags: ["Slackware", "Build System"]
    - name: slackbuild-package-2
      description_key: "repo2_description"
      github_url: "https://github.com/danix/slackbuild-package-2"
      image: "images/repo-icons/package-2.png"
      tags: ["Slackware", "Package"]
  ```

**Markdown Content Example (English):**
```markdown
+++
title = "Slackware Repository"
date = "2026-04-17"
+++

# Slackware Repository

Your custom intro paragraph here.

## Installation

Full installation instructions in markdown format.

\`\`\`bash
# Copy this command to add the repository
your-command-here
\`\`\`

More details...

## Usage

Usage instructions in markdown.

\`\`\`bash
# Example usage
command example
\`\`\`

## Available Packages

List of available packages in markdown table or list format.
```

**Template Rendering:**
- The layout template (`layouts/repository/single.html` or similar) renders:
  1. Parsed markdown content (Installation, Usage, Available Packages sections) from `_index.md`
  2. Hero section extracted from markdown frontmatter or parsed from top of content
  3. GitHub repo cards dynamically generated from `data/repos.yaml` with i18n descriptions
  4. All i18n strings pulled from `i18n/en.yaml` and `i18n/it.yaml`

**To Modify Content:**
1. **Hero section / introduction:** Edit `content/en/repository/_index.md` or `content/it/repository/_index.md`
2. **Installation / Usage / Package sections:** Edit markdown content in `_index.md` files
3. **Quick-start command:** Update markdown code fence in `_index.md`
4. **GitHub repo cards:** Add/edit repos in `data/repos.yaml`, add descriptions to `i18n/en.yaml` and `i18n/it.yaml`
5. **Repo descriptions (translated):** Edit i18n files with `repo<N>_description` keys

**No template editing required** — all content changes via markdown and YAML files.

---

### Component Integration Points (Continued)

#### Repository Page
- **Hero section:** Custom styled with accent colors, parsed from markdown frontmatter/content
- **Code blocks:** Inherit from existing code styling (if present), or add minimal CSS for markdown-generated `<pre><code>`
- **Cards:** Inherit from Week 2 card styling (border, shadow, hover effects), generated from `data/repos.yaml`
- **Copy button:** Custom Alpine.js component with toast notification from Week 4, attached to code blocks via shortcode or template filter
- **Link styling:** Inherit from navigation/link classes from Week 3
- **Images:** Use responsive image handling, repo card images loaded from `images/repo-icons/` directory

### Testing Strategy (Week 6)

#### 404 Page Tests
1. Manual navigation to non-existent URLs (EN/IT)
2. Search box functionality (if implemented)
3. Recent articles loaded and displayed correctly
4. Easter egg trigger and interaction
5. Keyboard navigation (Tab, Shift+Tab, Enter, Escape)
6. Focus indicators visible in light & dark modes
7. Screen reader testing (page structure, links, interactive elements)
8. Responsive testing (320px, 768px, 1200px)
9. Browser compatibility (Chrome, Firefox, Safari)
10. Color contrast verification (WCAG AA)

#### Repository Page Tests
1. Page loads and renders correctly (EN/IT)
2. Hero section displays with quick-start command
3. Code blocks display with proper syntax highlighting (if applicable)
4. Copy-to-clipboard functionality works
5. GitHub repo cards display with images and links
6. Expandable sections (if implemented) work smoothly
7. Keyboard navigation (Tab, Shift+Tab, Enter on expandable sections)
8. Focus indicators visible in light & dark modes
9. Screen reader testing (headings, code blocks, links)
10. Responsive testing (320px, 768px, 1200px)
11. Browser compatibility (Chrome, Firefox, Safari)
12. Color contrast verification (WCAG AA)

### Build & Deployment

#### CSS Build
- Run `npm run build` after adding any new Tailwind classes
- Verify `main.min.css` generated successfully
- Test in browser to confirm styling applied

#### Hugo Build
- Run `hugo server` to test locally
- Verify both pages render correctly in EN/IT
- Check for build errors or warnings

#### Merge to Master
- Create feature branch `week-6-pages` from master
- Implement both pages
- Run all Week 6 tests (from plan)
- Commit all changes with clear messages
- Merge back to master with PR/commit
- Verify no regressions in other pages

---

## Design Approval Checklist

- [ ] 404 page layout and visual design approved
- [ ] 404 page functionality (search, recent articles, easter egg) approved
- [ ] 404 accessibility requirements approved
- [ ] Repository page layout and visual design approved
- [ ] Repository page functionality (hero, sections, cards, copy button) approved
- [ ] Repository page accessibility requirements approved
- [ ] i18n strings coverage approved
- [ ] Implementation strategy and file structure approved
- [ ] Testing strategy approved

**Next Step:** After approval, invoke `superpowers:writing-plans` skill to create detailed implementation plan.

---

## Reference: Existing Theme Patterns

### From Week 1-2 (Colors, Typography, Components)
- Tailwind utility classes for spacing, sizing, colors
- Button classes: `btn btn-primary`, `btn btn-secondary`, `btn btn-outline`
- Card styling with borders and shadows
- Color palette: primary purple (#8B5CF6), grays, accent colors

### From Week 3 (Navigation, Breadcrumbs)
- Header with hamburger menu
- Language switcher in menu
- Theme toggle in header
- Navigation link styling

### From Week 4 (Forms & Interactions)
- Form input styling with label association
- Focus ring styling (2px purple ring)
- Modal components with focus trap
- Toast notifications
- Form validation (if applicable)

### From Week 5 (Animations & Accessibility)
- Keyframe animations: fade-in, slide, scale
- prefers-reduced-motion support
- Focus management and ARIA labels
- Modal focus trap implementation
- Accessible heading hierarchies
- Semantic HTML best practices

---

## Notes

- Both pages inherit visual cohesion from Weeks 1-5; no new components needed
- Accessibility is built-in, not added later (following Week 5 patterns)
- Multilingual support uses existing i18n structure (Hugo's native system)
- Responsive design uses existing Tailwind breakpoints (sm, md, lg)
- Dark/light mode uses existing CSS custom properties and class toggles
- All animations respect prefers-reduced-motion (from Week 5)