From e8fe69a5435ae829ca7daa0621da031f447f6910 Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Thu, 2 Apr 2026 14:41:10 +0200
Subject: [PATCH] feat(auth): add BrandPanel component for signup screen

Renders brand identity with logo, app name, tagline, and feature icons
on green-dark background. Responsive: banner on mobile, 440px column
on desktop.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/auth/BrandPanel.svelte  | 32 ++++++++++++++++++++++
 frontend/src/lib/auth/BrandPanel.test.ts | 34 ++++++++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 frontend/src/lib/auth/BrandPanel.svelte
 create mode 100644 frontend/src/lib/auth/BrandPanel.test.ts

diff --git a/frontend/src/lib/auth/BrandPanel.svelte b/frontend/src/lib/auth/BrandPanel.svelte
new file mode 100644
index 0000000..a28d8ab
--- /dev/null
+++ b/frontend/src/lib/auth/BrandPanel.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+</script>
+
+<div
+	class="bg-[var(--green-dark)] flex flex-col items-center justify-center
+		px-6 py-7 text-center
+		md:w-[440px] md:min-h-screen md:px-10 md:py-12"
+>
+	<span class="text-[28px] md:text-[64px]" aria-hidden="true">🥗</span>
+
+	<h1
+		class="mt-2 font-[var(--font-display)] text-[22px] font-medium tracking-[-0.02em] text-white
+			md:mt-3 md:text-[36px]"
+	>
+		Mealprep
+	</h1>
+
+	<p class="mt-1 text-[12px] text-[var(--green-light)] md:mt-2 md:text-[15px]">
+		Plan meals, eat well, waste less
+	</p>
+
+	<div class="mt-8 hidden gap-3 md:flex">
+		{#each [{ emoji: '📅', label: 'Plan' }, { emoji: '🍳', label: 'Cook' }, { emoji: '🛒', label: 'Shop' }] as feature (feature.label)}
+			<div
+				class="flex flex-col items-center gap-1 rounded-lg bg-white/10 px-4 py-3"
+			>
+				<span class="text-[18px]">{feature.emoji}</span>
+				<span class="text-[10px] text-[var(--green-light)]">{feature.label}</span>
+			</div>
+		{/each}
+	</div>
+</div>
diff --git a/frontend/src/lib/auth/BrandPanel.test.ts b/frontend/src/lib/auth/BrandPanel.test.ts
new file mode 100644
index 0000000..38b9dd3
--- /dev/null
+++ b/frontend/src/lib/auth/BrandPanel.test.ts
@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import BrandPanel from './BrandPanel.svelte';
+
+describe('BrandPanel', () => {
+	it('renders the app name', () => {
+		render(BrandPanel);
+		expect(screen.getByText('Mealprep')).toBeInTheDocument();
+	});
+
+	it('renders the tagline', () => {
+		render(BrandPanel);
+		expect(screen.getByText('Plan meals, eat well, waste less')).toBeInTheDocument();
+	});
+
+	it('renders the logo emoji', () => {
+		render(BrandPanel);
+		expect(screen.getByText('🥗')).toBeInTheDocument();
+	});
+
+	it('renders three feature icons with labels', () => {
+		render(BrandPanel);
+		expect(screen.getByText('Plan')).toBeInTheDocument();
+		expect(screen.getByText('Cook')).toBeInTheDocument();
+		expect(screen.getByText('Shop')).toBeInTheDocument();
+	});
+
+	it('renders feature emojis', () => {
+		render(BrandPanel);
+		expect(screen.getByText('📅')).toBeInTheDocument();
+		expect(screen.getByText('🍳')).toBeInTheDocument();
+		expect(screen.getByText('🛒')).toBeInTheDocument();
+	});
+});