From 3cba9584375187b579ad804b326dce70bba7471c Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Thu, 18 Jun 2026 00:46:05 +0700
Subject: [PATCH] New logo: map pin on top of skateboard deck, same gradient
 colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Redesigned icon.svg: skateboard deck shape (rounded nose/tail, truck axles,
  wheels) beneath the existing map pin, all using the same red→orange→lime
  gradient as the original
- Replace MapPin component icons in desktop header, mobile header, and footer
  with the actual icon.svg image so the new logo shows everywhere

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 public/images/icon.svg    | 47 +++++++++++++++++++++++++++++++--------
 src/components/Layout.tsx | 18 ++++++++-------
 src/pages/Index.tsx       |  8 ++++---
 3 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/public/images/icon.svg b/public/images/icon.svg
index 5627495..0815482 100644
--- a/public/images/icon.svg
+++ b/public/images/icon.svg
@@ -1,25 +1,54 @@
 <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
   <!-- Black background -->
   <rect width="512" height="512" fill="#000000"/>
-  
-  <!-- Gradient circle -->
+
   <defs>
     <linearGradient id="iconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" style="stop-color:#ff0040;stop-opacity:1" />
       <stop offset="50%" style="stop-color:#ff6600;stop-opacity:1" />
       <stop offset="100%" style="stop-color:#ccff00;stop-opacity:1" />
     </linearGradient>
+    <linearGradient id="deckGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ff0040;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#ff6600;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#ccff00;stop-opacity:1" />
+    </linearGradient>
   </defs>
-  
-  <circle cx="256" cy="256" r="256" fill="url(#iconGradient)"/>
-  
-  <!-- Map pin icon -->
+
+  <!-- Skateboard deck — classic shape with rounded nose & tail, centered below pin -->
+  <!-- Deck body: tall rounded rectangle -->
+  <rect x="218" y="310" width="76" height="160" rx="28" ry="28" fill="url(#deckGradient)"/>
+
+  <!-- Nose kick (top rounded tip) -->
+  <ellipse cx="256" cy="318" rx="38" ry="18" fill="url(#deckGradient)"/>
+
+  <!-- Tail kick (bottom rounded tip) -->
+  <ellipse cx="256" cy="462" rx="38" ry="18" fill="url(#deckGradient)"/>
+
+  <!-- Truck axle top -->
+  <rect x="200" y="338" width="112" height="14" rx="7" fill="#000000" opacity="0.35"/>
+  <!-- Wheel top-left -->
+  <ellipse cx="208" cy="345" rx="12" ry="9" fill="#000000" opacity="0.45"/>
+  <!-- Wheel top-right -->
+  <ellipse cx="304" cy="345" rx="12" ry="9" fill="#000000" opacity="0.45"/>
+
+  <!-- Truck axle bottom -->
+  <rect x="200" y="428" width="112" height="14" rx="7" fill="#000000" opacity="0.35"/>
+  <!-- Wheel bottom-left -->
+  <ellipse cx="208" cy="435" rx="12" ry="9" fill="#000000" opacity="0.45"/>
+  <!-- Wheel bottom-right -->
+  <ellipse cx="304" cy="435" rx="12" ry="9" fill="#000000" opacity="0.45"/>
+
+  <!-- Gradient circle background for pin -->
+  <circle cx="256" cy="200" r="160" fill="url(#iconGradient)"/>
+
+  <!-- Map pin icon — identical to original, just shifted up slightly -->
   <g fill="#ffffff">
     <!-- Pin circle -->
-    <circle cx="256" cy="230" r="80" />
+    <circle cx="256" cy="178" r="72"/>
     <!-- Pin point -->
-    <path d="M 216 290 L 256 370 L 296 290 Z" />
+    <path d="M 220 228 L 256 300 L 292 228 Z"/>
     <!-- Inner hole -->
-    <circle cx="256" cy="230" r="40" fill="#000000"/>
+    <circle cx="256" cy="178" r="36" fill="#000000"/>
   </g>
 </svg>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 62bed97..9d8134e 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -355,11 +355,11 @@ export function Layout({ children }: LayoutProps) {
       <header className="hidden md:flex sticky top-0 z-50 border-b border-red-500/30 bg-black/95 backdrop-blur">
         <div className="container flex items-center justify-between h-16 px-4">
           <Link to="/" className="flex items-center gap-3 group">
-            <div className="relative">
-              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center shadow-lg">
-                <MapPin className="h-5 w-5 text-white" />
-              </div>
-            </div>
+            <img
+              src="/images/icon.svg"
+              alt="SkateSpots"
+              className="w-10 h-10 rounded-xl shadow-lg shadow-red-500/30 group-hover:shadow-red-500/50 transition-shadow"
+            />
             <span className="font-display text-2xl neon-red tracking-wide" style={{
               textShadow: '0 0 10px #ff0040, 0 0 20px #ff0040'
             }}>SKATESPOTS</span>
@@ -540,9 +540,11 @@ export function Layout({ children }: LayoutProps) {
       <header className="md:hidden sticky top-0 z-50 border-b border-red-500/30 bg-black/95 backdrop-blur safe-area-top">
         <div className="flex items-center justify-between h-14 px-3 gap-3">
           <Link to="/" className="flex items-center gap-2 touch-manipulation active:opacity-80 flex-1 min-w-0">
-            <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center flex-shrink-0 shadow-lg">
-              <MapPin className="h-4 w-4 text-white" />
-            </div>
+            <img
+              src="/images/icon.svg"
+              alt="SkateSpots"
+              className="w-9 h-9 rounded-lg flex-shrink-0 shadow-lg shadow-red-500/30"
+            />
             <span className="font-display text-xl neon-red tracking-wide" style={{
               textShadow: '0 0 8px #ff0040'
             }}>SKATESPOTS</span>
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index d728751..073ed9b 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -509,9 +509,11 @@ function Footer() {
       <div className="container px-4 py-10">
         <div className="flex flex-col md:flex-row items-center justify-between gap-6">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#ff0040] to-[#ff6600] flex items-center justify-center shadow-[0_0_20px_rgba(255,0,64,0.5)]">
-              <MapPin className="h-5 w-5 text-white" />
-            </div>
+            <img
+              src="/images/icon.svg"
+              alt="SkateSpots"
+              className="w-10 h-10 rounded-lg shadow-[0_0_20px_rgba(255,0,64,0.5)]"
+            />
             <span className="font-display text-2xl neon-red tracking-wide" style={{
               textShadow: '0 0 10px #ff0040'
             }}>SkateSpots</span>