From e57678a68d710616b1538c989f8ea9062236aebb Mon Sep 17 00:00:00 2001
From: Matthias Meister <meister.matthias86@gmail.com>
Date: Tue, 5 May 2026 22:37:20 +0200
Subject: [PATCH] Cleanly separate hero color fields

---
 .../task-1 - Redesign-dev-website-from-Canva-reference.md     | 4 +++-
 src/components/canva-landing.tsx                              | 3 +--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/backlog/tasks/task-1 - Redesign-dev-website-from-Canva-reference.md b/backlog/tasks/task-1 - Redesign-dev-website-from-Canva-reference.md
index 5edc546..bd78867 100644
--- a/backlog/tasks/task-1 - Redesign-dev-website-from-Canva-reference.md	
+++ b/backlog/tasks/task-1 - Redesign-dev-website-from-Canva-reference.md	
@@ -4,7 +4,7 @@ title: Redesign dev website from Canva reference
 status: In Progress
 assignee: []
 created_date: '2026-05-05 20:20'
-updated_date: '2026-05-05 20:35'
+updated_date: '2026-05-05 20:37'
 labels: []
 dependencies: []
 priority: high
@@ -42,4 +42,6 @@ Created worktree at .worktrees/canva-redesign on branch codex/canva-redesign. Ba
 Implemented a consolidated Canva-inspired landing page in src/components/canva-landing.tsx and switched src/pages/index.astro to it. Smoke test and CI=true pnpm run build pass. Local dev server responds with HTTP 200 at http://127.0.0.1:4321/. Browser screenshot tooling is not available in this session, so visual review remains open.
 
 Converted visible German UI copy from ae/oe/ue fallbacks to real umlauts in the Canva landing page and legacy section components. Added smoke-test coverage for the Canva landing copy.
+
+Removed the black decorative cutout from the red hero panel and replaced it with a clean responsive border between the black and red surfaces.
 <!-- SECTION:NOTES:END -->
diff --git a/src/components/canva-landing.tsx b/src/components/canva-landing.tsx
index eb0a4bb..068e843 100644
--- a/src/components/canva-landing.tsx
+++ b/src/components/canva-landing.tsx
@@ -93,12 +93,11 @@ const CanvaLanding = () => {
           </div>
         </div>
 
-        <aside className="relative flex min-h-[520px] flex-col justify-between bg-primary px-5 py-5 text-primary-foreground sm:px-8 lg:px-12">
+        <aside className="relative flex min-h-[520px] flex-col justify-between border-t border-primary-foreground/25 bg-primary px-5 py-5 text-primary-foreground sm:px-8 lg:border-l lg:border-t-0 lg:px-12">
           <div className="flex items-start justify-between border-b border-primary-foreground/30 pb-5 text-xs uppercase tracking-[0.28em]">
             <span>Creative Direction</span>
             <span>2026</span>
           </div>
-          <div className="absolute left-0 top-28 h-28 w-28 bg-background" />
           <div className="absolute bottom-32 right-10 h-36 w-36 border border-primary-foreground/35" />
           <div className="relative mt-28 max-w-xl">
             <p className="text-[clamp(4rem,10vw,9rem)] font-black uppercase leading-[0.75] tracking-normal">