Redesign logo & storefront, light subtle admin theme, and 3D print cost calculator

public/images/logo-icon.svg

@@ -1,70 +1,41 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
   <defs>
-    <!-- Top Slice Gradients -->
-    <linearGradient id="icoTopFace" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#38BDF8" />
-      <stop offset="100%" stop-color="#0284C7" />
-    </linearGradient>
-    <linearGradient id="icoTopRight" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#0284C7" />
-      <stop offset="100%" stop-color="#0369A1" />
-    </linearGradient>
-    <linearGradient id="icoTopLeft" 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="icoMidFace" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#F43F5E" />
-      <stop offset="100%" stop-color="#E11D48" />
-    </linearGradient>
-    <linearGradient id="icoMidRight" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#E11D48" />
-      <stop offset="100%" stop-color="#BE123C" />
-    </linearGradient>
-    <linearGradient id="icoMidLeft" x1="0%" y1="0%" x2="100%" y2="100%">
+    <!-- Soft Warm Coral Gradient -->
+    <linearGradient id="iconCoral" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" stop-color="#FB7185" />
-      <stop offset="100%" stop-color="#E11D48" />
+      <stop offset="100%" stop-color="#F43F5E" />
     </linearGradient>
 
-    <!-- Bot Slice Gradients -->
-    <linearGradient id="icoBotFace" x1="0%" y1="0%" x2="100%" y2="100%">
+    <!-- Warm Amber Gradient -->
+    <linearGradient id="iconAmber" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" stop-color="#FBBF24" />
       <stop offset="100%" stop-color="#F59E0B" />
     </linearGradient>
-    <linearGradient id="icoBotRight" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#F59E0B" />
-      <stop offset="100%" stop-color="#D97706" />
-    </linearGradient>
-    <linearGradient id="icoBotLeft" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#FCD34D" />
-      <stop offset="100%" stop-color="#F59E0B" />
+
+    <!-- Gentle Sky Gradient -->
+    <linearGradient id="iconSky" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#38BDF8" />
+      <stop offset="100%" stop-color="#0284C7" />
     </linearGradient>
   </defs>
 
-  <g transform="translate(4, 2)">
-    <!-- Bottom Layer (Amber) -->
-    <g transform="translate(0, 22)">
-      <polygon points="22,6 40,16 22,26 4,16" fill="url(#icoBotFace)" opacity="0.9" />
-      <polygon points="4,16 22,26 22,34 4,24" fill="url(#icoBotLeft)" />
-      <polygon points="22,26 40,16 40,24 22,34" fill="url(#icoBotRight)" />
-    </g>
+  <!-- Friendly Rounded Layered 3D Emblem -->
+  <g transform="translate(4, 4)">
+    <!-- Base Layer (Amber) -->
+    <rect x="2" y="26" width="36" height="12" rx="6" fill="url(#iconAmber)" />
+    
+    <!-- Middle Layer (Coral) -->
+    <rect x="2" y="14" width="36" height="12" rx="6" fill="url(#iconCoral)" />
+    
+    <!-- Top Layer (Sky) -->
+    <rect x="2" y="2" width="36" height="12" rx="6" fill="url(#iconSky)" />
 
-    <!-- Middle Layer (Rose Pink) -->
-    <g transform="translate(0, 11)">
-      <polygon points="22,6 40,16 22,26 4,16" fill="url(#icoMidFace)" opacity="0.95" />
-      <polygon points="4,16 22,26 22,34 4,24" fill="url(#icoMidLeft)" />
-      <polygon points="22,26 40,16 40,24 22,34" fill="url(#icoMidRight)" />
-    </g>
+    <!-- Cute extrusion highlights -->
+    <circle cx="10" cy="8" r="2.5" fill="#FFFFFF" opacity="0.85" />
+    <circle cx="10" cy="20" r="2.5" fill="#FFFFFF" opacity="0.85" />
+    <circle cx="10" cy="32" r="2.5" fill="#FFFFFF" opacity="0.85" />
 
-    <!-- Top Layer (Cyan / Sky) -->
-    <g transform="translate(0, 0)">
-      <polygon points="22,6 40,16 22,26 4,16" fill="url(#icoTopFace)" />
-      <polygon points="4,16 22,26 22,34 4,24" fill="url(#icoTopLeft)" />
-      <polygon points="22,26 40,16 40,24 22,34" fill="url(#icoTopRight)" />
-      <circle cx="22" cy="16" r="3" fill="#FFFFFF" opacity="0.95" />
-    </g>
+    <!-- Cute Sparkle -->
+    <path d="M33 4L34 7L37 8L34 9L33 12L32 9L29 8L32 7Z" fill="#FFFFFF" opacity="0.95" />
   </g>
 </svg>
-