Dev-Landing/docs/superpowers/plans/2026-05-05-canva-redesign.md

Canva Redesign Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Rework the dev landing page into a bold black, red, and white editorial site inspired by the Canva creative brief deck.

Architecture: Replace the current stacked section imports on the homepage with one focused React landing component. Keep existing UI primitives available but avoid broad refactors of old sections so the redesign remains easy to review or revert.

Tech Stack: Astro 6, React 19, Tailwind CSS 4, lucide-react, Node test runner.

---

Task 1: Landing Smoke Test

Files:

• Create: tests/landing-content.test.mjs

• Modify: package.json

• Add a Node smoke test that checks the new component source for key content anchors: Projektbrief, 01, Website, Kontakt.

• Run node --test tests/landing-content.test.mjs and confirm it fails before the component exists.

Task 2: Canva-Inspired Landing Page

Files:

• Create: src/components/landing.tsx

• Modify: src/pages/index.astro

• Modify: src/styles/global.css

• Build a single-page layout with a dark editorial shell, red accent panels, large German headline, numbered sections, pricing/service strips, and a contact brief section.

• Replace the existing homepage component stack with the new Landing component.

• Update global tokens for the dark, high-contrast Canva reference style.

Task 3: Verification

Files:

• Modify: backlog/tasks/task-1 - Redesign-dev-website-from-Canva-reference.md

• Run node --test tests/landing-content.test.mjs and confirm it passes.

• Run CI=true pnpm run build and confirm Astro builds the page.

• Start the local dev server and visually review the page in a browser/screenshot.

• Check off remaining acceptance criteria that have direct evidence.