From 5d549ed32cb04eb6ae82615a8a30f0c34bef2859 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 9 Nov 2025 16:08:28 +0100
Subject: [PATCH] design: finalize logo and update Pastel to palette icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Logo Updates:
- Using authentic Lucide brush and wrench icons
- Wrench vertical, brush horizontal (90° rotation)
- Aligned bottom edges for visual balance
- Scaled up to 5x for better visibility
- Removed center dot for cleaner look

Pastel Icon:
- Changed from paintbrush to proper palette icon
- Palette with thumb hole and color dots
- Better represents color manipulation tool

Visual improvements:
- Clean, professional crossed tools design
- Proper alignment and spacing
- Large, visible icons at all sizes
- Consistent with Lucide icon library

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/icon.svg             | 25 +++++++------------------
 components/Logo.tsx      | 33 +++++++--------------------------
 components/ToolsGrid.tsx |  9 +++++----
 3 files changed, 19 insertions(+), 48 deletions(-)

diff --git a/app/icon.svg b/app/icon.svg
index 4580ac6..492389d 100644
--- a/app/icon.svg
+++ b/app/icon.svg
@@ -2,8 +2,8 @@
   <!-- Background -->
   <rect width="64" height="64" rx="12" fill="url(#bg)"/>
 
-  <!-- Wrench (Lucide) - rotated 45 degrees -->
-  <g transform="translate(32, 32) rotate(45) scale(1.8) translate(-12, -12)">
+  <!-- Wrench (Lucide) - vertical -->
+  <g transform="translate(32, 32) rotate(0) scale(2.4) translate(-12, -12)">
     <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(#wrench)"
@@ -15,10 +15,10 @@
     />
   </g>
 
-  <!-- Brush (Lucide) - rotated -45 degrees -->
-  <g transform="translate(32, 32) rotate(-45) scale(1.8) translate(-12, -12)">
+  <!-- Brush (Lucide) - horizontal flipped -->
+  <g transform="translate(32, 31) rotate(90) scale(2.4) 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"
+      d="m11 10l3 3m-7.5 8A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"
       stroke="url(#brush)"
       stroke-width="1.5"
       stroke-linecap="round"
@@ -27,19 +27,16 @@
       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"
+      d="M9.969 17.031L21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"
       stroke="url(#brush)"
       stroke-width="1.5"
       stroke-linecap="round"
       stroke-linejoin="round"
-      fill="url(#brushFill)"
+      fill="none"
       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%">
@@ -54,13 +51,5 @@
       <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>
 </svg>
diff --git a/components/Logo.tsx b/components/Logo.tsx
index feaa403..96d74d2 100644
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -15,9 +15,9 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
       animate={{ opacity: 1, scale: 1 }}
       transition={{ duration: 0.6, ease: 'easeOut' }}
     >
-      {/* Wrench (Lucide) - rotated 45 degrees, bottom-left to top-right */}
+      {/* Wrench (Lucide) - vertical */}
       <motion.g
-        transform="translate(100, 100) rotate(45) translate(-12, -12)"
+        transform="translate(100, 100) rotate(0) scale(5) translate(-12, -12)"
         initial={{ pathLength: 0, opacity: 0 }}
         animate={{ pathLength: 1, opacity: 1 }}
         transition={{ duration: 1.2, ease: 'easeInOut' }}
@@ -33,15 +33,15 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
         />
       </motion.g>
 
-      {/* Brush (Lucide) - rotated -45 degrees, top-left to bottom-right */}
+      {/* Brush (Lucide) - horizontal flipped */}
       <motion.g
-        transform="translate(100, 100) rotate(-45) translate(-12, -12)"
+        transform="translate(100, 97) rotate(90) scale(5) 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"
+          d="m11 10l3 3m-7.5 8A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"
           stroke="url(#brushGradient)"
           strokeWidth="1.5"
           strokeLinecap="round"
@@ -50,27 +50,16 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
           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"
+          d="M9.969 17.031L21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031"
           stroke="url(#brushGradient)"
           strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
-          fill="url(#brushFill)"
+          fill="none"
           vectorEffect="non-scaling-stroke"
         />
       </motion.g>
 
-      {/* Center circle */}
-      <motion.circle
-        cx="100"
-        cy="100"
-        r="8"
-        fill="url(#centerGradient)"
-        initial={{ scale: 0 }}
-        animate={{ scale: 1 }}
-        transition={{ duration: 0.5, delay: 0.8, type: 'spring', stiffness: 200 }}
-      />
-
       {/* Gradient definitions */}
       <defs>
         <linearGradient id="wrenchGradient" x1="0%" y1="0%" x2="100%" y2="100%">
@@ -81,14 +70,6 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
           <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>
     </motion.svg>
   );
diff --git a/components/ToolsGrid.tsx b/components/ToolsGrid.tsx
index 4df604e..9e33ed2 100644
--- a/components/ToolsGrid.tsx
+++ b/components/ToolsGrid.tsx
@@ -26,10 +26,11 @@ const tools = [
     badges: ['Open Source', 'WCAG', 'Free'],
     icon: (
       <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
-        <circle cx="8.5" cy="8.5" r="1.5" fill="currentColor" />
-        <circle cx="15" cy="8.5" r="1.5" fill="currentColor" />
-        <circle cx="8.5" cy="15" r="1.5" fill="currentColor" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
+        <circle cx="6.5" cy="11.5" r="1" fill="currentColor" />
+        <circle cx="9.5" cy="7.5" r="1" fill="currentColor" />
+        <circle cx="14.5" cy="7.5" r="1" fill="currentColor" />
+        <circle cx="17.5" cy="11.5" r="1" fill="currentColor" />
       </svg>
     ),
   },