From b8c3b80db7ea842a7e83e61d38471e21a62c3835 Mon Sep 17 00:00:00 2001
From: clucraft <clucraft@users.noreply.github.com>
Date: Fri, 23 Jan 2026 13:23:54 -0500
Subject: [PATCH] Add ghostly header SVG for README

- Combined icon + PriceGhost text in single SVG header
- Ghost text has gradient fade effect (solid to transparent)
- Subtle glow filter for ethereal look
- Replaces separate icon and h1 in README

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 README.md         |  4 +---
 assets/header.svg | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 assets/header.svg

diff --git a/README.md b/README.md
index fdce631..472ce6d 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,7 @@
 <p align="center">
-  <img src="frontend/public/icon.svg" alt="PriceGhost Logo" width="120" height="120">
+  <img src="assets/header.svg" alt="PriceGhost" width="500">
 </p>
 
-<h1 align="center">PriceGhost</h1>
-
 <p align="center">
   <strong>A self-hosted price tracking application that monitors product prices from any website.</strong><br>
   Get notified when prices drop, hit your target price, or items come back in stock.
diff --git a/assets/header.svg b/assets/header.svg
new file mode 100644
index 0000000..b996265
--- /dev/null
+++ b/assets/header.svg
@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 120">
+  <defs>
+    <!-- Ghost icon gradient -->
+    <linearGradient id="ghostGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#818cf8"/>
+      <stop offset="100%" style="stop-color:#6366f1"/>
+    </linearGradient>
+    <!-- Text fade gradient for "Ghost" -->
+    <linearGradient id="textFade" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#1f2937"/>
+      <stop offset="30%" style="stop-color:#1f2937"/>
+      <stop offset="100%" style="stop-color:#1f2937;stop-opacity:0"/>
+    </linearGradient>
+    <!-- Glow filter -->
+    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Ghost Icon (scaled down) -->
+  <g transform="translate(10, 10) scale(0.195)">
+    <!-- Background circle -->
+    <circle cx="256" cy="256" r="240" fill="url(#ghostGrad)"/>
+    <!-- Ghost body -->
+    <path d="M256 100c-70.7 0-128 57.3-128 128v120c0 8 6 14 12 14 8 0 14-8 14-20v-30c0-8 8-14 16-14s16 6 16 14v30c0 12 6 20 14 20s14-8 14-20v-30c0-8 8-14 16-14s16 6 16 14v30c0 12 6 20 14 20s14-8 14-20v-30c0-8 8-14 16-14s16 6 16 14v30c0 12 6 20 14 20 6 0 12-6 12-14V228c0-70.7-57.3-128-128-128z" fill="white" opacity="0.95"/>
+    <!-- Left eye -->
+    <ellipse cx="210" cy="220" rx="20" ry="24" fill="#6366f1"/>
+    <!-- Right eye -->
+    <ellipse cx="302" cy="220" rx="20" ry="24" fill="#6366f1"/>
+    <!-- Price tag -->
+    <g transform="translate(320, 120) rotate(15)">
+      <rect x="0" y="0" width="60" height="40" rx="6" fill="#10b981"/>
+      <text x="30" y="28" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="22" font-weight="bold">$</text>
+    </g>
+  </g>
+
+  <!-- "Price" text - solid -->
+  <text x="125" y="78" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="52" font-weight="700" fill="#1f2937">Price</text>
+
+  <!-- "Ghost" text - with fade effect and glow -->
+  <text x="260" y="78" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="52" font-weight="700" fill="url(#textFade)" filter="url(#glow)">Ghost</text>
+</svg>