From f843ad99235a89a1e87bbc3078ae17ca680a3ea3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 8 Nov 2025 19:20:39 +0100
Subject: [PATCH] design: simplify logo to suitcase with single brush
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Logo Redesign:
- Simplified from toolbox with 3 tools to clean suitcase with 1 brush
- Purple gradient suitcase with handle and latch detail
- Single colorful brush inside (orange-to-red handle, green-to-cyan bristles)
- Smoother animations with reduced complexity
- Better visual clarity and brand identity

Favicon Update:
- Matching simplified design scaled for 64x64
- Clear icon that works at small sizes
- Consistent with main logo design

Visual Elements:
- Suitcase: Purple (#a855f7) to Indigo (#6366f1) gradient
- Brush handle: Orange (#f59e0b) to Red (#ef4444) gradient
- Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient
- Animated entrance with subtle scale and fade

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/icon.svg        |  45 +++++++++++-----
 components/Logo.tsx | 125 +++++++++++++++++++-------------------------
 2 files changed, 88 insertions(+), 82 deletions(-)

diff --git a/app/icon.svg b/app/icon.svg
index 7df1b1f..31682b4 100644
--- a/app/icon.svg
+++ b/app/icon.svg
@@ -1,17 +1,38 @@
 <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="64" height="64" rx="12" fill="url(#gradient)"/>
-  <path d="M20 28 L20 42 L34 42 L34 28 Z" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M24 28 Q 27 18, 30 28" stroke="white" stroke-width="3" fill="none" stroke-linecap="round"/>
-  <line x1="22" y1="34" x2="22" y2="39" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
-  <circle cx="22" cy="32" r="1.5" fill="white"/>
-  <line x1="27" y1="34" x2="27" y2="40" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
-  <path d="M24 34 L 27 32 L 30 34" fill="white" stroke="none"/>
-  <rect x="31" y="34" width="2" height="6" fill="white" rx="1"/>
-  <path d="M29 34 L 33 32 L 35 34" fill="white" stroke="none"/>
+  <!-- Background -->
+  <rect width="64" height="64" rx="12" fill="url(#bg)"/>
+
+  <!-- Suitcase body -->
+  <rect x="16" y="27" width="32" height="22" rx="2" stroke="url(#suitcase)" stroke-width="2" fill="rgba(139, 92, 246, 0.2)"/>
+
+  <!-- Suitcase handle -->
+  <path d="M 27 27 Q 32 19, 37 27" stroke="url(#suitcase)" stroke-width="2" fill="none" stroke-linecap="round"/>
+
+  <!-- Suitcase latch -->
+  <rect x="30" y="26" width="4" height="3" rx="1" fill="url(#suitcase)"/>
+
+  <!-- Brush handle -->
+  <rect x="31" y="32" width="2" height="11" fill="url(#brushHandle)" rx="1"/>
+
+  <!-- Brush bristles -->
+  <path d="M 28 43 L 29 47 L 30 46 L 31 48 L 32 46 L 33 48 L 34 46 L 35 47 L 36 43 Z" fill="url(#brushBristles)"/>
+
+  <!-- Gradients -->
   <defs>
-    <linearGradient id="gradient" x1="0" y1="0" x2="64" y2="64">
-      <stop offset="0%" stop-color="#667eea"/>
-      <stop offset="50%" stop-color="#8b5cf6"/>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#1a1a2e"/>
+      <stop offset="100%" stop-color="#0f0f1a"/>
+    </linearGradient>
+    <linearGradient id="suitcase" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#a855f7"/>
+      <stop offset="100%" stop-color="#6366f1"/>
+    </linearGradient>
+    <linearGradient id="brushHandle" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#ef4444"/>
+    </linearGradient>
+    <linearGradient id="brushBristles" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#10b981"/>
       <stop offset="100%" stop-color="#06b6d4"/>
     </linearGradient>
   </defs>
diff --git a/components/Logo.tsx b/components/Logo.tsx
index 3d2a908..74a5e3b 100644
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -11,107 +11,92 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
-      initial={{ opacity: 0, scale: 0.5, rotate: -180 }}
-      animate={{ opacity: 1, scale: 1, rotate: 0 }}
-      transition={{ duration: 1, ease: 'easeOut' }}
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.8, ease: 'easeOut' }}
     >
-      {/* Toolbox base */}
+      {/* Suitcase body */}
       <motion.rect
-        x="40"
-        y="80"
-        width="120"
-        height="80"
-        rx="8"
+        x="50"
+        y="85"
+        width="100"
+        height="70"
+        rx="6"
         stroke="url(#gradient1)"
-        strokeWidth="4"
-        fill="rgba(139, 92, 246, 0.1)"
-        initial={{ pathLength: 0 }}
-        animate={{ pathLength: 1 }}
-        transition={{ duration: 1.5, ease: 'easeInOut' }}
+        strokeWidth="5"
+        fill="rgba(139, 92, 246, 0.15)"
+        initial={{ pathLength: 0, opacity: 0 }}
+        animate={{ pathLength: 1, opacity: 1 }}
+        transition={{ duration: 1.2, ease: 'easeInOut' }}
       />
 
-      {/* Toolbox handle */}
+      {/* Suitcase handle */}
       <motion.path
-        d="M 80 80 Q 100 40, 120 80"
+        d="M 85 85 Q 100 60, 115 85"
         stroke="url(#gradient1)"
-        strokeWidth="4"
+        strokeWidth="5"
         fill="none"
         strokeLinecap="round"
-        initial={{ pathLength: 0 }}
-        animate={{ pathLength: 1 }}
-        transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}
+        initial={{ pathLength: 0, opacity: 0 }}
+        animate={{ pathLength: 1, opacity: 1 }}
+        transition={{ duration: 1, delay: 0.2, ease: 'easeInOut' }}
       />
 
-      {/* Wrench */}
-      <motion.g
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.8, delay: 0.8 }}
-      >
-        <path
-          d="M 70 110 L 70 130"
-          stroke="url(#gradient2)"
-          strokeWidth="5"
-          strokeLinecap="round"
-        />
-        <circle cx="70" cy="105" r="6" fill="url(#gradient2)" />
-      </motion.g>
+      {/* Suitcase latch */}
+      <motion.rect
+        x="95"
+        y="82"
+        width="10"
+        height="8"
+        rx="2"
+        fill="url(#gradient1)"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.8 }}
+      />
 
-      {/* Pencil */}
+      {/* Brush handle */}
       <motion.g
-        initial={{ opacity: 0, y: -20 }}
+        initial={{ opacity: 0, y: -15 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.8, delay: 1 }}
-      >
-        <path
-          d="M 100 110 L 100 135"
-          stroke="url(#gradient3)"
-          strokeWidth="5"
-          strokeLinecap="round"
-        />
-        <path
-          d="M 95 110 L 100 105 L 105 110"
-          fill="url(#gradient3)"
-        />
-      </motion.g>
-
-      {/* Brush */}
-      <motion.g
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.8, delay: 1.2 }}
+        transition={{ duration: 0.8, delay: 1, ease: 'easeOut' }}
       >
         <rect
-          x="127"
-          y="110"
+          x="97"
+          y="100"
           width="6"
-          height="20"
-          fill="url(#gradient4)"
-          rx="1"
+          height="35"
+          fill="url(#brushHandle)"
+          rx="3"
         />
+      </motion.g>
+
+      {/* Brush bristles */}
+      <motion.g
+        initial={{ opacity: 0, scaleY: 0.5 }}
+        animate={{ opacity: 1, scaleY: 1 }}
+        transition={{ duration: 0.6, delay: 1.3, ease: 'easeOut' }}
+        style={{ transformOrigin: '100px 135px' }}
+      >
         <path
-          d="M 125 110 L 130 105 L 135 110"
-          fill="url(#gradient4)"
+          d="M 88 135 L 90 145 L 92 143 L 94 146 L 96 144 L 98 147 L 100 145 L 102 147 L 104 144 L 106 146 L 108 143 L 110 145 L 112 135 Z"
+          fill="url(#brushBristles)"
         />
       </motion.g>
 
       {/* Gradient definitions */}
       <defs>
         <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="#8b5cf6" />
+          <stop offset="0%" stopColor="#a855f7" />
           <stop offset="100%" stopColor="#6366f1" />
         </linearGradient>
-        <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="#2dd4bf" />
-          <stop offset="100%" stopColor="#06b6d4" />
-        </linearGradient>
-        <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
+        <linearGradient id="brushHandle" x1="0%" y1="0%" x2="0%" y2="100%">
           <stop offset="0%" stopColor="#f59e0b" />
           <stop offset="100%" stopColor="#ef4444" />
         </linearGradient>
-        <linearGradient id="gradient4" x1="0%" y1="0%" x2="100%" y2="100%">
+        <linearGradient id="brushBristles" x1="0%" y1="0%" x2="0%" y2="100%">
           <stop offset="0%" stopColor="#10b981" />
-          <stop offset="100%" stopColor="#14b8a6" />
+          <stop offset="100%" stopColor="#06b6d4" />
         </linearGradient>
       </defs>
     </motion.svg>