Redesign landing page from Canva brief

This commit is contained in:
2026-05-05 22:33:46 +02:00
parent 0d8b56864a
commit e2ca8074b8
6 changed files with 338 additions and 48 deletions

View File

@@ -0,0 +1,41 @@
# 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`
- [x] Add a Node smoke test that checks the new component source for key content anchors: `Projektbrief`, `01`, `Website`, `Kontakt`.
- [x] 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/canva-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 `CanvaLanding` 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.