feat: flat light colorful shop redesign with catchy 3D logo and pure catalog storefront

2026-10-31 20:13:43 +01:00
parent 7964bbd9ec
commit 0433f8d6bf
7 changed files with 318 additions and 152 deletions
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 56" fill="none">
+  <defs>
+    <!-- Top Slice Gradients -->
+    <linearGradient id="topFace" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#38BDF8" />
+      <stop offset="100%" stop-color="#0284C7" />
+    </linearGradient>
+    <linearGradient id="topRight" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0284C7" />
+      <stop offset="100%" stop-color="#0369A1" />
+    </linearGradient>
+    <linearGradient id="topLeft" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0EA5E9" />
+      <stop offset="100%" stop-color="#0284C7" />
+    </linearGradient>
+
+    <!-- Mid Slice Gradients -->
+    <linearGradient id="midFace" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#F43F5E" />
+      <stop offset="100%" stop-color="#E11D48" />
+    </linearGradient>
+    <linearGradient id="midRight" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#E11D48" />
+      <stop offset="100%" stop-color="#BE123C" />
+    </linearGradient>
+    <linearGradient id="midLeft" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FB7185" />
+      <stop offset="100%" stop-color="#E11D48" />
+    </linearGradient>
+
+    <!-- Bot Slice Gradients -->
+    <linearGradient id="botFace" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FBBF24" />
+      <stop offset="100%" stop-color="#F59E0B" />
+    </linearGradient>
+    <linearGradient id="botRight" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#F59E0B" />
+      <stop offset="100%" stop-color="#D97706" />
+    </linearGradient>
+    <linearGradient id="botLeft" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FCD34D" />
+      <stop offset="100%" stop-color="#F59E0B" />
+    </linearGradient>
+
+    <!-- Wordmark Gradient -->
+    <linearGradient id="wordmarkGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#F43F5E" />
+      <stop offset="50%" stop-color="#8B5CF6" />
+      <stop offset="100%" stop-color="#06B6D4" />
+    </linearGradient>
+    <linearGradient id="badgeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#6366F1" />
+      <stop offset="100%" stop-color="#4F46E5" />
+    </linearGradient>
+  </defs>
+
+  <!-- 3D Layered Isometric Cube Mark -->
+  <g transform="translate(6, 4)">
+    <!-- Bottom Layer (Amber) -->
+    <g transform="translate(0, 22)">
+      <!-- Top surface of bottom layer -->
+      <polygon points="22,6 40,16 22,26 4,16" fill="url(#botFace)" opacity="0.9" />
+      <!-- Left side of bottom layer -->
+      <polygon points="4,16 22,26 22,34 4,24" fill="url(#botLeft)" />
+      <!-- Right side of bottom layer -->
+      <polygon points="22,26 40,16 40,24 22,34" fill="url(#botRight)" />
+    </g>
+
+    <!-- Middle Layer (Rose Pink) -->
+    <g transform="translate(0, 11)">
+      <!-- Top surface of middle layer -->
+      <polygon points="22,6 40,16 22,26 4,16" fill="url(#midFace)" opacity="0.95" />
+      <!-- Left side of middle layer -->
+      <polygon points="4,16 22,26 22,34 4,24" fill="url(#midLeft)" />
+      <!-- Right side of middle layer -->
+      <polygon points="22,26 40,16 40,24 22,34" fill="url(#midRight)" />
+    </g>
+
+    <!-- Top Layer (Cyan / Sky) -->
+    <g transform="translate(0, 0)">
+      <!-- Top surface of top layer -->
+      <polygon points="22,6 40,16 22,26 4,16" fill="url(#topFace)" />
+      <!-- Left side of top layer -->
+      <polygon points="4,16 22,26 22,34 4,24" fill="url(#topLeft)" />
+      <!-- Right side of top layer -->
+      <polygon points="22,26 40,16 40,24 22,34" fill="url(#topRight)" />
+      <!-- Accent Sparkle/Nozzle Dot on Top Face -->
+      <circle cx="22" cy="16" r="3" fill="#FFFFFF" opacity="0.9" />
+    </g>
+  </g>
+
+  <!-- Wordmark Text -->
+  <g transform="translate(62, 38)">
+    <!-- "Jouw" in Bold Slate -->
+    <text x="0" y="0" font-family="'Fredoka', system-ui, sans-serif" font-weight="700" font-size="28" fill="#0F172A" letter-spacing="-0.5">Jouw</text>
+    
+    <!-- "driedee" in Vibrant Gradient -->
+    <text x="74" y="0" font-family="'Fredoka', system-ui, sans-serif" font-weight="700" font-size="28" fill="url(#wordmarkGrad)" letter-spacing="-0.5">driedee</text>
+
+    <!-- ".nl" Badge -->
+    <rect x="168" y="-21" width="28" height="16" rx="5" fill="url(#badgeGrad)" />
+    <text x="173" y="-9" font-family="'Nunito', system-ui, sans-serif" font-weight="800" font-size="10" fill="#FFFFFF" letter-spacing="0.5">.NL</text>
+  </g>
+</svg>