From 408caebdf0a03d0b877038963a4672601f4e9cfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 9 Nov 2025 15:54:15 +0100
Subject: [PATCH] design: redesign logo with clean Lucide-style icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Logo Redesign:
- Clean, minimal circular badge design
- Beautiful gradient background (indigo → purple → cyan)
- White outlined icons in Lucide/Heroicons style
- Wrench and paintbrush side-by-side
- Professional and modern aesthetic

Icon Design:
- Wrench: Simple outline with open-end head
- Paintbrush: Clean brush with bristles and handle
- Both icons use consistent 6px stroke width
- Smooth entrance animations (slide in from sides)

Favicon Update:
- Matching circular badge design for 64x64
- Clear visibility at small sizes
- Consistent white icons on gradient background
- Professional brand identity

Colors:
- Background gradient: #667eea → #8b5cf6 → #06b6d4
- Icons: Pure white (#ffffff) for maximum contrast
- Clean, modern, accessible design

Animations:
- Background circle scales in
- Wrench slides in from left
- Paintbrush slides in from right
- Smooth, subtle entrance effects

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/icon.svg        |  70 ++++++++++------------
 components/Logo.tsx | 137 ++++++++++++++++----------------------------
 2 files changed, 78 insertions(+), 129 deletions(-)

diff --git a/app/icon.svg b/app/icon.svg
index 24410d0..7b3e086 100644
--- a/app/icon.svg
+++ b/app/icon.svg
@@ -1,56 +1,44 @@
 <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <!-- Background -->
-  <rect width="64" height="64" rx="12" fill="url(#bg)"/>
+  <!-- Background circle -->
+  <circle cx="32" cy="32" r="27" fill="url(#bg)"/>
 
-  <!-- Wrench (bottom-left to top-right) -->
+  <!-- Wrench icon -->
   <g>
-    <!-- Wrench handle -->
-    <line x1="19" y1="45" x2="37" y2="27" stroke="url(#wrenchGrad)" stroke-width="3" stroke-linecap="round"/>
-    <!-- Wrench head -->
-    <path d="M 37 27 L 40 24 M 37 27 L 40 30" stroke="url(#wrenchGrad)" stroke-width="3" stroke-linecap="round"/>
+    <path
+      d="M24 29L27 26M27 26L30 29M27 26V35M22 35H32"
+      stroke="white"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
   </g>
 
-  <!-- Brush (top-left to bottom-right) -->
+  <!-- Paintbrush icon -->
   <g>
-    <!-- Brush handle -->
-    <line x1="24" y1="19" x2="37" y2="32" stroke="url(#brushGrad)" stroke-width="2.5" stroke-linecap="round"/>
-    <!-- Brush ferrule -->
-    <ellipse cx="38.5" cy="33.5" rx="2.5" ry="4" fill="url(#ferrule)" transform="rotate(45 38.5 33.5)"/>
-    <!-- Brush bristles -->
-    <line x1="39.5" y1="34.5" x2="43" y2="38" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
-    <line x1="40.5" y1="35.5" x2="45" y2="40" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
-    <line x1="41.5" y1="36.5" x2="46" y2="41" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
-    <line x1="38.5" y1="35.5" x2="41" y2="38" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
-    <line x1="37.5" y1="36.5" x2="39.5" y2="38.5" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
+    <path
+      d="M37 29V35M37 35L34 40L37 42L40 40L37 35Z"
+      stroke="white"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <rect
+      x="35"
+      y="27"
+      width="4"
+      height="5"
+      rx="1"
+      stroke="white"
+      stroke-width="2"
+      fill="none"
+    />
   </g>
 
-  <!-- Center circle -->
-  <circle cx="32" cy="32" r="4" fill="url(#center)"/>
-
   <!-- Gradients -->
   <defs>
     <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="wrenchGrad" x1="19" y1="45" x2="40" y2="24">
       <stop offset="0%" stop-color="#667eea"/>
-      <stop offset="100%" stop-color="#a855f7"/>
-    </linearGradient>
-    <linearGradient id="brushGrad" x1="24" y1="19" x2="37" y2="32">
-      <stop offset="0%" stop-color="#f59e0b"/>
-      <stop offset="100%" stop-color="#ef4444"/>
-    </linearGradient>
-    <linearGradient id="ferrule" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#94a3b8"/>
-      <stop offset="100%" stop-color="#64748b"/>
-    </linearGradient>
-    <linearGradient id="bristles" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#10b981"/>
-      <stop offset="100%" stop-color="#06b6d4"/>
-    </linearGradient>
-    <linearGradient id="center" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#a855f7"/>
+      <stop offset="50%" stop-color="#8b5cf6"/>
       <stop offset="100%" stop-color="#06b6d4"/>
     </linearGradient>
   </defs>
diff --git a/components/Logo.tsx b/components/Logo.tsx
index e618999..aa4ec37 100644
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -11,105 +11,66 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
-      initial={{ opacity: 0, rotate: -45 }}
-      animate={{ opacity: 1, rotate: 0 }}
-      transition={{ duration: 0.8, ease: 'easeOut' }}
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.6, ease: 'easeOut' }}
     >
-      {/* Wrench (bottom-left to top-right) */}
-      <motion.g
-        initial={{ pathLength: 0, opacity: 0 }}
-        animate={{ pathLength: 1, opacity: 1 }}
-        transition={{ duration: 1.2, ease: 'easeInOut' }}
-      >
-        {/* Wrench handle */}
-        <motion.line
-          x1="60"
-          y1="140"
-          x2="115"
-          y2="85"
-          stroke="url(#wrenchGradient)"
-          strokeWidth="8"
-          strokeLinecap="round"
-        />
-        {/* Wrench head (open end) */}
-        <motion.path
-          d="M 115 85 L 125 75 M 115 85 L 125 95"
-          stroke="url(#wrenchGradient)"
-          strokeWidth="8"
-          strokeLinecap="round"
-        />
-      </motion.g>
-
-      {/* Brush (top-left to bottom-right) */}
-      <motion.g
-        initial={{ pathLength: 0, opacity: 0 }}
-        animate={{ pathLength: 1, opacity: 1 }}
-        transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}
-      >
-        {/* Brush handle */}
-        <motion.line
-          x1="75"
-          y1="60"
-          x2="115"
-          y2="100"
-          stroke="url(#brushHandleGradient)"
-          strokeWidth="6"
-          strokeLinecap="round"
-        />
-        {/* Brush ferrule (metal part) */}
-        <motion.ellipse
-          cx="120"
-          cy="105"
-          rx="6"
-          ry="10"
-          fill="url(#ferruleGradient)"
-          transform="rotate(45 120 105)"
-        />
-        {/* Brush bristles */}
-        <motion.g
-          initial={{ scaleY: 0.5, opacity: 0 }}
-          animate={{ scaleY: 1, opacity: 1 }}
-          transition={{ duration: 0.6, delay: 0.8, ease: 'easeOut' }}
-        >
-          <motion.line x1="123" y1="108" x2="135" y2="120" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
-          <motion.line x1="126" y1="111" x2="140" y2="125" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
-          <motion.line x1="129" y1="114" x2="143" y2="128" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
-          <motion.line x1="120" y1="111" x2="130" y2="121" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
-          <motion.line x1="117" y1="114" x2="125" y2="122" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
-        </motion.g>
-      </motion.g>
-
-      {/* Center circle (intersection) */}
+      {/* Background circle */}
       <motion.circle
         cx="100"
         cy="100"
-        r="12"
-        fill="url(#centerGradient)"
+        r="85"
+        fill="url(#bgGradient)"
         initial={{ scale: 0 }}
         animate={{ scale: 1 }}
-        transition={{ duration: 0.5, delay: 1, type: 'spring', stiffness: 200 }}
+        transition={{ duration: 0.8, ease: 'easeOut' }}
       />
 
+      {/* Wrench icon (Lucide style) */}
+      <motion.g
+        initial={{ opacity: 0, x: -10 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.6, delay: 0.3 }}
+      >
+        <path
+          d="M75 90L85 80M85 80L95 90M85 80V110M70 110H100"
+          stroke="white"
+          strokeWidth="6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </motion.g>
+
+      {/* Paintbrush icon (Lucide style) */}
+      <motion.g
+        initial={{ opacity: 0, x: 10 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.6, delay: 0.5 }}
+      >
+        <path
+          d="M115 90V110M115 110L108 125L115 130L122 125L115 110Z"
+          stroke="white"
+          strokeWidth="6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <rect
+          x="110"
+          y="85"
+          width="10"
+          height="15"
+          rx="2"
+          stroke="white"
+          strokeWidth="6"
+          fill="none"
+        />
+      </motion.g>
+
       {/* Gradient definitions */}
       <defs>
-        <linearGradient id="wrenchGradient" x1="60" y1="140" x2="125" y2="75">
+        <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
           <stop offset="0%" stopColor="#667eea" />
-          <stop offset="100%" stopColor="#a855f7" />
-        </linearGradient>
-        <linearGradient id="brushHandleGradient" x1="75" y1="60" x2="115" y2="100">
-          <stop offset="0%" stopColor="#f59e0b" />
-          <stop offset="100%" stopColor="#ef4444" />
-        </linearGradient>
-        <linearGradient id="ferruleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="#94a3b8" />
-          <stop offset="100%" stopColor="#64748b" />
-        </linearGradient>
-        <linearGradient id="bristlesGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="#10b981" />
-          <stop offset="100%" stopColor="#06b6d4" />
-        </linearGradient>
-        <linearGradient id="centerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="#a855f7" />
+          <stop offset="50%" stopColor="#8b5cf6" />
           <stop offset="100%" stopColor="#06b6d4" />
         </linearGradient>
       </defs>