From 724681e5b1f82afb90a8af55edfc9cdd8362ecee Mon Sep 17 00:00:00 2001
From: peckz <pekiseven@gmail.com>
Date: Thu, 7 Aug 2025 10:40:51 +0200
Subject: [PATCH] style: update page header logo and copy

---
 components/JamLogo64x64.tsx        | 43 +++++++-----------------------
 components/PageHeader.tsx          | 30 +++++++++++++++++++--
 pages/utilities/webp-converter.tsx |  2 +-
 3 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/components/JamLogo64x64.tsx b/components/JamLogo64x64.tsx
index f3c8812..9aeb55b 100644
--- a/components/JamLogo64x64.tsx
+++ b/components/JamLogo64x64.tsx
@@ -1,38 +1,13 @@
 export const JamLogo64x64 = () => {
+  const logoUrl = "https://storage.googleapis.com/jam-assets/jam-logo.webp";
+
   return (
-    <svg
-      className="flex rounded-2xl"
-      width="64"
-      height="64"
-      viewBox="0 0 64 64"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect width="64" height="64" fill="#9D7CEE" />
-      <path
-        d="M31.2013 41.783C30.5695 40.969 29.9196 40.1277 27.9492 38.99C25.9788 37.8524 24.9188 37.7066 23.9044 37.5701C23.6142 37.5296 23.3176 37.4855 23.0056 37.424C21.8658 37.8423 20.9121 38.7748 20.4472 39.9471C20.1802 40.615 20.4526 41.391 21.0818 41.7543C21.1454 41.791 21.2126 41.8213 21.2862 41.8553C21.9832 42.1306 22.6084 42.178 23.1239 42.1366C23.0275 42.92 23.1287 43.9191 23.868 44.9138C23.9866 45.0755 24.1335 45.2027 24.3115 45.3054C24.4894 45.4082 24.6731 45.4718 24.8723 45.4936C26.0997 45.643 27.0193 45.2246 27.6495 44.7495C27.8714 45.2166 28.2287 45.728 28.812 46.2003C28.8682 46.2497 28.9318 46.2864 29.0017 46.3268C29.6309 46.6901 30.4391 46.538 30.8841 45.9729C31.6605 44.9804 31.9976 43.6919 31.7899 42.4957C31.5679 42.2489 31.3878 42.0177 31.2013 41.783Z"
-        fill="#73E5BF"
-      />
-      <path
-        d="M33.5713 43.9311C32.3064 43.2009 31.7479 42.4801 31.2012 41.783C30.5694 40.9691 29.9195 40.1278 27.949 38.9901C25.9786 37.8525 24.9187 37.7067 23.9042 37.5702C23.0336 37.4488 22.1301 37.3256 20.8589 36.5916C19.416 35.7586 18.5239 34.735 18.2042 33.5419C17.8845 32.3488 18.1453 31.0163 18.9784 29.5734C21.1472 25.8169 24.841 22.2374 28.8547 20.0121C33.1303 17.6415 37.0799 17.1419 39.6923 18.6502C42.3047 20.1585 43.8469 23.8287 43.9316 28.7168C44.0077 33.3118 42.7583 38.2941 40.5895 42.0506C39.7565 43.4935 38.7329 44.3856 37.5398 44.7053C36.3467 45.025 35.0142 44.7642 33.5713 43.9311Z"
-        fill="#FF4070"
-      />
-      <path
-        d="M29.8594 29.0756C29.5416 28.8921 28.906 28.5252 27.9885 30.1142C27.0711 31.7033 27.7067 32.0702 28.0245 32.2537C28.3423 32.4372 28.978 32.8042 29.8954 31.2151C30.8129 29.6261 30.1772 29.2591 29.8594 29.0756Z"
-        fill="#2A3632"
-      />
-      <path
-        d="M35.58 32.3784C35.2622 32.1949 34.6266 31.828 33.7091 33.417C32.7917 35.0061 33.4273 35.373 33.7451 35.5565C34.0629 35.74 34.6986 36.107 35.616 34.5179C36.5334 32.9289 35.8978 32.5619 35.58 32.3784Z"
-        fill="#2A3632"
-      />
-      <path
-        d="M35.6555 25.642C35.3377 25.4586 34.7021 25.0916 33.7847 26.6806C32.8672 28.2697 33.5028 28.6367 33.8206 28.8202C34.1385 29.0036 34.7741 29.3706 35.6915 27.7816C36.609 26.1925 35.9733 25.8255 35.6555 25.642Z"
-        fill="#2A3632"
-      />
-      <path
-        d="M43.8591 35.7262C44.4293 33.4028 44.7069 30.9697 44.6687 28.7018C44.6291 26.3483 44.2464 24.1781 43.5597 22.4172C42.7549 20.3762 41.578 18.8916 40.0589 18.0145C38.5397 17.1374 36.6656 16.8605 34.502 17.1877C32.6336 17.4735 30.5628 18.2271 28.5048 19.3696C26.5217 20.4705 24.5534 21.9274 22.8263 23.583C21.0161 25.3091 19.469 27.255 18.3423 29.2064C17.4102 30.8208 17.1249 32.3426 17.502 33.7299C17.869 35.1198 18.877 36.295 20.4915 37.2271C20.7585 37.3813 21.0073 37.508 21.2472 37.6211C20.6029 38.1644 20.0836 38.8731 19.766 39.6728C19.3637 40.6779 19.7736 41.8468 20.7143 42.3899C20.8096 42.4449 20.915 42.4973 21.0214 42.5333C21.5003 42.7166 21.9578 42.8197 22.3663 42.8606C22.4115 43.7512 22.7191 44.5983 23.2793 45.3454C23.4621 45.5866 23.6807 45.7806 23.9413 45.931C24.2019 46.0815 24.4855 46.1774 24.7794 46.2115C25.7065 46.3231 26.5939 46.1659 27.3878 45.7598C27.6339 46.0968 27.9455 46.4377 28.3437 46.7609C28.4317 46.8286 28.5298 46.8937 28.6251 46.9487C29.5658 47.4919 30.7831 47.2624 31.4524 46.4115C31.9861 45.7365 32.3402 44.9324 32.4886 44.1028C32.7064 44.254 32.9406 44.4062 33.2076 44.5603C34.8221 45.4924 36.3439 45.7778 37.7311 45.4007C39.1174 45.04 40.2926 44.032 41.2247 42.4175C42.3513 40.4661 43.2629 38.1533 43.8591 35.7262ZM30.2966 45.5069C30.0686 45.799 29.6669 45.8637 29.3554 45.6838C29.3236 45.6655 29.2918 45.6471 29.2637 45.6224C27.9429 44.5633 28.0206 43.2691 28.0206 43.2691C28.0206 43.2691 27.0188 45.0043 24.9488 44.7584C24.8478 44.7425 24.7542 44.7138 24.6715 44.6661C24.5889 44.6184 24.5109 44.548 24.453 44.4722C23.2051 42.8025 24.2069 41.0672 24.2069 41.0672C24.2069 41.0672 23.1249 41.7816 21.5473 41.1673C21.5118 41.1554 21.48 41.137 21.4483 41.1187C21.1368 40.9388 20.9919 40.5586 21.1309 40.2151C21.5249 39.2391 22.2809 38.5315 23.0782 38.1782C23.332 38.223 23.573 38.2605 23.8014 38.2906C24.7931 38.4225 25.732 38.5578 27.5817 39.6257C29.4313 40.6936 30.0079 41.4417 30.628 42.2319C30.7746 42.4183 30.9176 42.611 31.087 42.8021C31.1796 43.6691 30.9512 44.6814 30.2966 45.5069ZM33.9379 43.2954C31.3954 41.8275 32.1294 40.5563 28.3156 38.3544C24.5019 36.1526 23.7679 37.4238 21.2255 35.9559C18.683 34.488 18.1457 32.4828 19.6136 29.9403C24.0173 22.3128 34.2399 16.3499 39.3249 19.2858C44.4099 22.2216 44.3572 34.0561 39.9535 41.6836C38.4856 44.226 36.4804 44.7633 33.9379 43.2954Z"
-        fill="#2A3632"
-      />
-    </svg>
+    <img
+      src={logoUrl}
+      className="rounded-xl overflow-hidden ring-1 ring-gray-400/10 shadow-md"
+      alt="Jam Logo"
+      width={64}
+      height={64}
+    />
   );
 };
diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx
index a52cc11..cb86d25 100644
--- a/components/PageHeader.tsx
+++ b/components/PageHeader.tsx
@@ -11,10 +11,36 @@ export default function PageHeader({ title, description }: PageHeader) {
       <div className="flex justify-center items-center mb-6">
         <JamLogo64x64 />
       </div>
-      <h1 className="text-3xl font-bold mb-4">{title}</h1>
-      <p className="text-lg text-muted-foreground mb-7 leading-6 font-light">
+
+      <h1 className="text-3xl font-bold mb-2">{title}</h1>
+      <p className="text-lg text-muted-foreground mb-2 leading-6 font-light">
         {description}
       </p>
+
+      <div className="flex justify-center items-center gap-2 mt-4">
+        <a
+          href="https://jam.dev?ref=utils-badge"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1 text-[11px] rounded-xl ring-1 ring-purple-200 bg-purple-100/40 hover:bg-purple-100/60 px-2 py-[2px]"
+        >
+          by Jam.dev — One click bug reports devs love
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M2.5 9.5L8.5 3.5M8.5 3.5C6.9379 3.5 5.0621 3.5 3.5 3.5M8.5 3.5V8.5"
+              stroke="#9E5BE5"
+              strokeLinecap="round"
+              strokeWidth="1.5"
+            />
+          </svg>
+        </a>
+      </div>
     </div>
   );
 }
diff --git a/pages/utilities/webp-converter.tsx b/pages/utilities/webp-converter.tsx
index 5a327cb..b5e08dc 100644
--- a/pages/utilities/webp-converter.tsx
+++ b/pages/utilities/webp-converter.tsx
@@ -192,7 +192,7 @@ export default function WebPConverter() {
       <section className="container max-w-2xl mb-12">
         <PageHeader
           title="WebP Converter"
-          description="Convert images to WebP format with batch processing and quality control."
+          description="Convert images to WebP format with batch processing."
         />
       </section>