From a37b0e5b088765e44225ef8a8431dcf76916613e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 9 Nov 2025 15:56:57 +0100
Subject: [PATCH] =?UTF-8?q?design:=20use=20authentic=20Lucide=20icons=20(b?=
 =?UTF-8?q?rush=20=C3=97=20wrench)=20crossed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Logo Update:
- Using official Lucide SVG paths for brush and wrench icons
- Crossed in X formation (45° and -45° rotation)
- Professional, recognizable design from established icon library

Icon Details:
- Wrench (Lucide): Purple gradient (#667eea → #a855f7)
- Brush (Lucide): Orange-to-pink gradient (#f59e0b → #ec4899)
- Brush bristles: Green-cyan fill with transparency
- Center circle: Purple-to-cyan gradient accent

Animations:
- Wrench draws in with path animation
- Brush draws in with delay
- Center circle pops in with spring effect
- Smooth, professional entrance

Favicon:
- Matching crossed Lucide icons for 64x64
- Scaled appropriately for small sizes
- Dark background with gradient icons

Benefits:
- Authentic, recognizable icons from Lucide library
- Professional design language
- Consistent with modern UI/UX standards
- Clear symbolism: utility (wrench) + creativity (brush)

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/icon.svg        |  77 +++++++++++++++++++------------
 components/Logo.tsx | 108 +++++++++++++++++++++++++-------------------
 2 files changed, 111 insertions(+), 74 deletions(-)

diff --git a/app/icon.svg b/app/icon.svg
index 7b3e086..4580ac6 100644
--- a/app/icon.svg
+++ b/app/icon.svg
@@ -1,44 +1,65 @@
 <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <!-- Background circle -->
-  <circle cx="32" cy="32" r="27" fill="url(#bg)"/>
+  <!-- Background -->
+  <rect width="64" height="64" rx="12" fill="url(#bg)"/>
 
-  <!-- Wrench icon -->
-  <g>
+  <!-- Wrench (Lucide) - rotated 45 degrees -->
+  <g transform="translate(32, 32) rotate(45) scale(1.8) translate(-12, -12)">
     <path
-      d="M24 29L27 26M27 26L30 29M27 26V35M22 35H32"
-      stroke="white"
-      stroke-width="2"
+      d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+      stroke="url(#wrench)"
+      stroke-width="1.5"
       stroke-linecap="round"
       stroke-linejoin="round"
-    />
-  </g>
-
-  <!-- Paintbrush icon -->
-  <g>
-    <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"
+      vector-effect="non-scaling-stroke"
     />
   </g>
 
+  <!-- Brush (Lucide) - rotated -45 degrees -->
+  <g transform="translate(32, 32) rotate(-45) scale(1.8) translate(-12, -12)">
+    <path
+      d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"
+      stroke="url(#brush)"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      vector-effect="non-scaling-stroke"
+    />
+    <path
+      d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"
+      stroke="url(#brush)"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="url(#brushFill)"
+      vector-effect="non-scaling-stroke"
+    />
+  </g>
+
+  <!-- Center circle -->
+  <circle cx="32" cy="32" r="3" 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="wrench" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" stop-color="#667eea"/>
-      <stop offset="50%" stop-color="#8b5cf6"/>
+      <stop offset="100%" stop-color="#a855f7"/>
+    </linearGradient>
+    <linearGradient id="brush" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#ec4899"/>
+    </linearGradient>
+    <linearGradient id="brushFill" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#10b981" stop-opacity="0.3"/>
+      <stop offset="100%" stop-color="#06b6d4" stop-opacity="0.3"/>
+    </linearGradient>
+    <linearGradient id="center" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#a855f7"/>
       <stop offset="100%" stop-color="#06b6d4"/>
     </linearGradient>
   </defs>
diff --git a/components/Logo.tsx b/components/Logo.tsx
index aa4ec37..feaa403 100644
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -15,62 +15,78 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
       animate={{ opacity: 1, scale: 1 }}
       transition={{ duration: 0.6, ease: 'easeOut' }}
     >
-      {/* Background circle */}
+      {/* Wrench (Lucide) - rotated 45 degrees, bottom-left to top-right */}
+      <motion.g
+        transform="translate(100, 100) rotate(45) translate(-12, -12)"
+        initial={{ pathLength: 0, opacity: 0 }}
+        animate={{ pathLength: 1, opacity: 1 }}
+        transition={{ duration: 1.2, ease: 'easeInOut' }}
+      >
+        <motion.path
+          d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+          stroke="url(#wrenchGradient)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+          vectorEffect="non-scaling-stroke"
+        />
+      </motion.g>
+
+      {/* Brush (Lucide) - rotated -45 degrees, top-left to bottom-right */}
+      <motion.g
+        transform="translate(100, 100) rotate(-45) translate(-12, -12)"
+        initial={{ pathLength: 0, opacity: 0 }}
+        animate={{ pathLength: 1, opacity: 1 }}
+        transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}
+      >
+        <motion.path
+          d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"
+          stroke="url(#brushGradient)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+          vectorEffect="non-scaling-stroke"
+        />
+        <motion.path
+          d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"
+          stroke="url(#brushGradient)"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="url(#brushFill)"
+          vectorEffect="non-scaling-stroke"
+        />
+      </motion.g>
+
+      {/* Center circle */}
       <motion.circle
         cx="100"
         cy="100"
-        r="85"
-        fill="url(#bgGradient)"
+        r="8"
+        fill="url(#centerGradient)"
         initial={{ scale: 0 }}
         animate={{ scale: 1 }}
-        transition={{ duration: 0.8, ease: 'easeOut' }}
+        transition={{ duration: 0.5, delay: 0.8, type: 'spring', stiffness: 200 }}
       />
 
-      {/* 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="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+        <linearGradient id="wrenchGradient" x1="0%" y1="0%" x2="100%" y2="100%">
           <stop offset="0%" stopColor="#667eea" />
-          <stop offset="50%" stopColor="#8b5cf6" />
+          <stop offset="100%" stopColor="#a855f7" />
+        </linearGradient>
+        <linearGradient id="brushGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#f59e0b" />
+          <stop offset="100%" stopColor="#ec4899" />
+        </linearGradient>
+        <linearGradient id="brushFill" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#10b981" stopOpacity="0.3" />
+          <stop offset="100%" stopColor="#06b6d4" stopOpacity="0.3" />
+        </linearGradient>
+        <linearGradient id="centerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#a855f7" />
           <stop offset="100%" stopColor="#06b6d4" />
         </linearGradient>
       </defs>