From 0f2e574c09590edeac6e6e43cdadc69f9aa61ed0 Mon Sep 17 00:00:00 2001
From: Tomasz Cichocinski <tomaszcichocinski@gmail.com>
Date: Thu, 22 Oct 2026 18:27:55 +0200
Subject: [PATCH 1/8] feat: add agent skills banner to utilities

Promote github.com/jamdotdev/skills with one banner rendered inside
both existing CTA components (JamCallToAction and CallToActionGrid)
and below the tool grid on the utilities index.
---
 components/CallToActionGrid.tsx |  2 ++
 components/JamCallToAction.tsx  |  3 +++
 components/SkillsBanner.tsx     | 38 +++++++++++++++++++++++++++++++++
 components/utils/jam-cta.ts     |  2 ++
 pages/utilities/index.tsx       |  5 +++++
 5 files changed, 50 insertions(+)
 create mode 100644 components/SkillsBanner.tsx

diff --git a/components/CallToActionGrid.tsx b/components/CallToActionGrid.tsx
index e9c13b6d..84f53078 100644
--- a/components/CallToActionGrid.tsx
+++ b/components/CallToActionGrid.tsx
@@ -1,4 +1,5 @@
 import SquareCard from "./SquareCard";
+import SkillsBanner from "./SkillsBanner";
 
 export default function CallToActionGrid() {
   return (
@@ -15,6 +16,7 @@ export default function CallToActionGrid() {
         buttonText="Try Jam"
         href="https://jam.dev?ref=utils"
       />
+      <SkillsBanner className="col-span-2" />
     </section>
   );
 }
diff --git a/components/JamCallToAction.tsx b/components/JamCallToAction.tsx
index b9783073..16f9f587 100644
--- a/components/JamCallToAction.tsx
+++ b/components/JamCallToAction.tsx
@@ -1,5 +1,6 @@
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { getBannerCopy, JAM_URL } from "./utils/jam-cta";
+import SkillsBanner from "./SkillsBanner";
 
 interface JamCallToActionProps {
   // Page slug under /utilities, used to pick the banner copy.
@@ -37,6 +38,8 @@ export default function JamCallToAction({ tool }: JamCallToActionProps) {
         </a>
       </div>
 
+      <SkillsBanner className="mt-4" />
+
       <p className="mt-4 flex items-center justify-center gap-2 text-sm text-muted-foreground">
         <GitHubLogoIcon />
         <span>
diff --git a/components/SkillsBanner.tsx b/components/SkillsBanner.tsx
new file mode 100644
index 00000000..2e3c871b
--- /dev/null
+++ b/components/SkillsBanner.tsx
@@ -0,0 +1,38 @@
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { cn } from "@/lib/utils";
+import { SKILLS_URL } from "./utils/jam-cta";
+
+interface SkillsBannerProps {
+  className?: string;
+}
+
+export default function SkillsBanner({ className }: SkillsBannerProps) {
+  return (
+    <div
+      className={cn(
+        "border rounded-xl p-5 flex flex-col sm:flex-row items-center gap-4",
+        className
+      )}
+    >
+      <div className="flex-1 text-left">
+        <p className="font-medium">Agent skills for Jam</p>
+        <p className="text-sm text-muted-foreground leading-5">
+          Let your coding agent read Jams and record proof.
+        </p>
+        <code className="mt-1.5 inline-block rounded bg-muted px-1.5 py-0.5 text-xs">
+          npx skills add jamdotdev/skills
+        </code>
+      </div>
+
+      <a
+        href={SKILLS_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="shrink-0 w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium leading-none transition-colors hover:bg-muted"
+      >
+        <GitHubLogoIcon />
+        View on GitHub
+      </a>
+    </div>
+  );
+}
diff --git a/components/utils/jam-cta.ts b/components/utils/jam-cta.ts
index 74dba963..2b5a2c6e 100644
--- a/components/utils/jam-cta.ts
+++ b/components/utils/jam-cta.ts
@@ -4,6 +4,8 @@ export interface JamBannerCopy {
 }
 
 export const JAM_URL = "https://jam.dev?ref=utils-banner";
+export const SKILLS_URL =
+  "https://github.com/jamdotdev/skills?ref=utils-banner";
 
 export const defaultBannerCopy: JamBannerCopy = {
   title: "Fix your next bug faster",
diff --git a/pages/utilities/index.tsx b/pages/utilities/index.tsx
index 74283a96..b20e2a6e 100644
--- a/pages/utilities/index.tsx
+++ b/pages/utilities/index.tsx
@@ -4,6 +4,7 @@ import { CMDK } from "@/components/CMDK";
 import { tools } from "@/components/utils/tools-list";
 import { JamLogo64x64 } from "@/components/JamLogo64x64";
 import Meta from "@/components/Meta";
+import SkillsBanner from "@/components/SkillsBanner";
 
 export default function Home() {
   return (
@@ -39,6 +40,10 @@ export default function Home() {
           />
         ))}
       </div>
+
+      <section className="container max-w-2xl mt-16">
+        <SkillsBanner />
+      </section>
     </main>
   );
 }

From 778eb17a012ac9042337ff5aab2ec4ed29c50b00 Mon Sep 17 00:00:00 2001
From: Tomasz Cichocinski <tomaszcichocinski@gmail.com>
Date: Thu, 22 Oct 2026 21:34:50 +0200
Subject: [PATCH 2/8] feat: redesign skills banner and update copy

Dark terminal-style card so the banner stands out from the Jam card.
The install command is the primary action: whole row copies on click
with press feedback, GitHub becomes a text link. New copy sells the
skills roadmap. Command wraps at 375px instead of truncating.
---
 components/SkillsBanner.tsx | 69 ++++++++++++++++++++++++++++---------
 1 file changed, 53 insertions(+), 16 deletions(-)

diff --git a/components/SkillsBanner.tsx b/components/SkillsBanner.tsx
index 2e3c871b..8a7b7381 100644
--- a/components/SkillsBanner.tsx
+++ b/components/SkillsBanner.tsx
@@ -1,38 +1,75 @@
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { Check, Copy, Terminal } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useCopyToClipboard } from "./hooks/useCopyToClipboard";
 import { SKILLS_URL } from "./utils/jam-cta";
 
+const INSTALL_COMMAND = "npx skills add jamdotdev/skills";
+
 interface SkillsBannerProps {
   className?: string;
 }
 
 export default function SkillsBanner({ className }: SkillsBannerProps) {
+  const { buttonText, handleCopy } = useCopyToClipboard();
+  const copied = buttonText !== "Copy";
+
+  const githubLink = (
+    <a
+      href={SKILLS_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex shrink-0 items-center gap-1.5 text-sm text-primary-foreground/70 transition-colors hover:text-primary-foreground"
+    >
+      <GitHubLogoIcon aria-hidden="true" />
+      View on GitHub
+    </a>
+  );
+
   return (
     <div
       className={cn(
-        "border rounded-xl p-5 flex flex-col sm:flex-row items-center gap-4",
+        "rounded-xl bg-primary p-4 text-left text-primary-foreground sm:p-5",
         className
       )}
     >
-      <div className="flex-1 text-left">
-        <p className="font-medium">Agent skills for Jam</p>
-        <p className="text-sm text-muted-foreground leading-5">
-          Let your coding agent read Jams and record proof.
+      <div className="flex items-center gap-3">
+        <span className="shrink-0 rounded-lg bg-[#A7F374] p-2 text-black">
+          <Terminal className="h-4 w-4" aria-hidden="true" />
+        </span>
+        <p className="min-w-0 flex-1 font-medium leading-5">
+          Make your coding agent show its work
         </p>
-        <code className="mt-1.5 inline-block rounded bg-muted px-1.5 py-0.5 text-xs">
-          npx skills add jamdotdev/skills
-        </code>
+        <span className="hidden sm:inline-flex">{githubLink}</span>
       </div>
 
-      <a
-        href={SKILLS_URL}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="shrink-0 w-full sm:w-auto inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium leading-none transition-colors hover:bg-muted"
+      <p className="mt-2 text-sm leading-5 text-primary-foreground/70 sm:mt-1 sm:pl-11">
+        Open-source agent skills for demo videos, proof on every PR, marked-up
+        screenshots and fixes from a bug recording. Four skills today, more on
+        the way.
+      </p>
+
+      <button
+        type="button"
+        onClick={() => handleCopy(INSTALL_COMMAND)}
+        aria-label={copied ? "Copied" : "Copy install command"}
+        className="mt-4 flex w-full items-start gap-2 sm:items-center rounded-lg bg-primary-foreground/10 px-3 py-2 font-mono text-sm transition-[background-color,transform] duration-150 ease-out hover:bg-primary-foreground/15 active:scale-[0.98] sm:py-1.5 sm:pr-1.5"
       >
-        <GitHubLogoIcon />
-        View on GitHub
-      </a>
+        <span className="shrink-0 leading-5 text-[#A7F374]" aria-hidden="true">
+          {copied ? <Check className="h-4 w-4" /> : "$"}
+        </span>
+        <code className="min-w-0 flex-1 break-words text-left leading-5 sm:truncate">
+          {INSTALL_COMMAND}
+        </code>
+        <span
+          className="hidden shrink-0 rounded-md p-1.5 sm:inline-flex"
+          aria-hidden="true"
+        >
+          <Copy className="h-4 w-4" />
+        </span>
+      </button>
+
+      <div className="mt-3 sm:hidden">{githubLink}</div>
     </div>
   );
 }

From 03baf83ea2d79b51a8a1fb62df76f0073f4d0991 Mon Sep 17 00:00:00 2001
From: Tomasz Cichocinski <tomaszcichocinski@gmail.com>
Date: Thu, 22 Oct 2026 21:45:37 +0200
Subject: [PATCH 3/8] feat: light theme and new copy for skills banner

Keep the site's light card instead of the inverted dark one. Title
'Teach your coding agent to show its work' ties to the repo tagline.
Subtitle lists the four outcomes as verbs and drops the skill count.
---
 components/SkillsBanner.tsx | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/components/SkillsBanner.tsx b/components/SkillsBanner.tsx
index 8a7b7381..2c186db9 100644
--- a/components/SkillsBanner.tsx
+++ b/components/SkillsBanner.tsx
@@ -19,7 +19,7 @@ export default function SkillsBanner({ className }: SkillsBannerProps) {
       href={SKILLS_URL}
       target="_blank"
       rel="noopener noreferrer"
-      className="inline-flex shrink-0 items-center gap-1.5 text-sm text-primary-foreground/70 transition-colors hover:text-primary-foreground"
+      className="inline-flex shrink-0 items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
     >
       <GitHubLogoIcon aria-hidden="true" />
       View on GitHub
@@ -27,36 +27,33 @@ export default function SkillsBanner({ className }: SkillsBannerProps) {
   );
 
   return (
-    <div
-      className={cn(
-        "rounded-xl bg-primary p-4 text-left text-primary-foreground sm:p-5",
-        className
-      )}
-    >
+    <div className={cn("rounded-xl border p-4 text-left sm:p-5", className)}>
       <div className="flex items-center gap-3">
         <span className="shrink-0 rounded-lg bg-[#A7F374] p-2 text-black">
           <Terminal className="h-4 w-4" aria-hidden="true" />
         </span>
         <p className="min-w-0 flex-1 font-medium leading-5">
-          Make your coding agent show its work
+          Teach your coding agent to show its work
         </p>
         <span className="hidden sm:inline-flex">{githubLink}</span>
       </div>
 
-      <p className="mt-2 text-sm leading-5 text-primary-foreground/70 sm:mt-1 sm:pl-11">
-        Open-source agent skills for demo videos, proof on every PR, marked-up
-        screenshots and fixes from a bug recording. Four skills today, more on
-        the way.
+      <p className="mt-2 text-sm leading-5 text-muted-foreground sm:mt-1 sm:pl-11">
+        Open-source Jam skills: record a demo, attach proof to the PR, mark up a
+        screenshot, fix a bug from a recording. More on the way.
       </p>
 
       <button
         type="button"
         onClick={() => handleCopy(INSTALL_COMMAND)}
         aria-label={copied ? "Copied" : "Copy install command"}
-        className="mt-4 flex w-full items-start gap-2 sm:items-center rounded-lg bg-primary-foreground/10 px-3 py-2 font-mono text-sm transition-[background-color,transform] duration-150 ease-out hover:bg-primary-foreground/15 active:scale-[0.98] sm:py-1.5 sm:pr-1.5"
+        className="mt-4 flex w-full items-start gap-2 sm:items-center rounded-lg bg-muted px-3 py-2 font-mono text-sm transition-[background-color,transform] duration-150 ease-out hover:bg-border/60 active:scale-[0.98] sm:py-1.5 sm:pr-1.5"
       >
-        <span className="shrink-0 leading-5 text-[#A7F374]" aria-hidden="true">
-          {copied ? <Check className="h-4 w-4" /> : "$"}
+        <span
+          className="shrink-0 leading-5 text-muted-foreground"
+          aria-hidden="true"
+        >
+          {copied ? <Check className="h-4 w-4 text-[#5BA832]" /> : "$"}
         </span>
         <code className="min-w-0 flex-1 break-words text-left leading-5 sm:truncate">
           {INSTALL_COMMAND}

From 639398b10962a72c2060c647563fbd0e22bfa7c8 Mon Sep 17 00:00:00 2001
From: Tomasz Cichocinski <tomaszcichocinski@gmail.com>
Date: Thu, 22 Oct 2026 22:14:06 +0200
Subject: [PATCH 4/8] refactor: one promo block on every tool page

Replace the two-card CallToActionGrid with JamCallToAction on the 28
pages that still used it, so every tool page shows the same Jam banner,
skills banner and open-source line. Delete CallToActionGrid and
SquareCard. Move csv-file-viewer's SEO block below the promos so all
pages read tool, promos, FAQ. Shorten the default Jam copy to one line.
---
 components/CallToActionGrid.tsx               | 22 -------
 components/SquareCard.tsx                     | 65 -------------------
 components/utils/jam-cta.ts                   |  3 +-
 pages/utilities/base64-to-image.tsx           |  4 +-
 pages/utilities/cam.tsx                       |  4 +-
 pages/utilities/css-inliner-for-email.tsx     |  4 +-
 pages/utilities/css-units-converter.tsx       |  4 +-
 pages/utilities/csv-file-viewer.tsx           |  8 +--
 pages/utilities/curl-to-javascript-fetch.tsx  |  4 +-
 pages/utilities/env-to-netlify-toml.tsx       |  4 +-
 pages/utilities/file-integrity-checker.tsx    |  4 +-
 pages/utilities/hash-generator.tsx            |  4 +-
 pages/utilities/hex-to-rgb.tsx                |  4 +-
 pages/utilities/internet-speed-test.tsx       |  4 +-
 pages/utilities/json-to-csv.tsx               |  4 +-
 pages/utilities/json-to-tsv.tsx               |  4 +-
 pages/utilities/json-to-yaml.tsx              |  4 +-
 pages/utilities/jsonl-validator.tsx           |  4 +-
 pages/utilities/jwt-parser.tsx                |  4 +-
 pages/utilities/lorem-ipsum-generator.tsx     |  4 +-
 pages/utilities/number-base-changer.tsx       |  4 +-
 pages/utilities/query-params-to-json.tsx      |  4 +-
 pages/utilities/random-string-generator.tsx   |  4 +-
 pages/utilities/regex-tester.tsx              |  4 +-
 pages/utilities/sql-minifier.tsx              |  4 +-
 pages/utilities/tsv-to-json.tsx               |  4 +-
 pages/utilities/unserializer.tsx              |  4 +-
 pages/utilities/uuid-generator.tsx            |  4 +-
 .../utilities/wcag-color-contrast-checker.tsx |  4 +-
 pages/utilities/xml-to-json.tsx               |  4 +-
 pages/utilities/yaml-to-json.tsx              |  4 +-
 31 files changed, 59 insertions(+), 147 deletions(-)
 delete mode 100644 components/CallToActionGrid.tsx
 delete mode 100644 components/SquareCard.tsx

diff --git a/components/CallToActionGrid.tsx b/components/CallToActionGrid.tsx
deleted file mode 100644
index 84f53078..00000000
--- a/components/CallToActionGrid.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import SquareCard from "./SquareCard";
-import SkillsBanner from "./SkillsBanner";
-
-export default function CallToActionGrid() {
-  return (
-    <section className="grid grid-cols-2 gap-4 container max-w-2xl mb-16">
-      <SquareCard
-        logo="github"
-        description="Our tools are free and open source. Feel free to contribute."
-        buttonText="Contribute"
-        href="https://github.com/jamdotdev/jam-dev-utilities"
-      />
-      <SquareCard
-        logo="jam"
-        description="Auto-capture all the info engineers need to debug!"
-        buttonText="Try Jam"
-        href="https://jam.dev?ref=utils"
-      />
-      <SkillsBanner className="col-span-2" />
-    </section>
-  );
-}
diff --git a/components/SquareCard.tsx b/components/SquareCard.tsx
deleted file mode 100644
index 7ad3f425..00000000
--- a/components/SquareCard.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-import { Button } from "./ds/ButtonComponent";
-import { GitHubLogoIcon } from "@radix-ui/react-icons";
-
-interface SquareCardProps {
-  logo: "github" | "jam";
-  description: string;
-  href: string;
-  buttonText: string;
-}
-
-export default function SquareCard(props: SquareCardProps) {
-  const { logo, description, href, buttonText } = props;
-  const logoMap = {
-    github: <GitHubLogoIcon className="w-6 h-6" />,
-    jam: <JamLogo />,
-  };
-
-  return (
-    <div className="bg-muted p-6 rounded-xl">
-      <div className="mb-3">{logoMap[logo]}</div>
-      <p className="mb-6">{description}</p>
-      <Button variant="outline" onClick={() => window.open(href, "_blank")}>
-        {buttonText}
-      </Button>
-    </div>
-  );
-}
-
-const JamLogo = () => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12.2565 0.750836C14.9682 0.798187 17.3467 2.8512 19.0312 5.61735L19.1921 5.88754L19.1929 5.88907C20.8232 8.68999 21.7684 12.1719 21.7129 15.2739C21.6888 16.6183 21.3029 17.9025 20.3254 18.8359C19.4119 19.7081 18.2102 20.0557 16.9525 20.077L16.9443 20.5492C16.9182 22.0216 15.229 22.8801 13.9455 22.1228C13.0235 23.6576 10.6804 23.6169 9.81262 22.0506C8.50357 22.7622 6.84607 21.8456 6.87138 20.3734L6.87959 19.9012C5.62019 19.8374 4.42897 19.4486 3.54517 18.543C2.60158 17.5761 2.26176 16.2793 2.28586 14.9348C2.34153 11.8334 3.41039 8.38106 5.1412 5.64229C6.93633 2.8016 9.45723 0.701973 12.2565 0.750836Z"
-        fill="#1C2024"
-      />
-      <path
-        d="M16.7246 18.5036C15.7725 18.487 15.2262 18.2549 14.6942 18.0326C14.0766 17.7709 13.4401 17.4994 11.9569 17.4735C10.4736 17.4476 9.82299 17.6967 9.20124 17.9367C8.66634 18.1404 8.11209 18.3532 7.15516 18.3366C6.06901 18.3176 5.23678 18.019 4.67746 17.4459C4.11819 16.8727 3.84594 16.0395 3.86521 14.9652C3.91531 12.1681 4.89118 8.99425 6.47731 6.48438C8.16695 3.81063 10.2618 2.29437 12.2283 2.3287C14.1948 2.36302 16.234 3.95144 17.8268 6.68249C19.3219 9.25087 20.1835 12.4521 20.1334 15.2491C20.1141 16.3234 19.8122 17.1467 19.2327 17.6999C18.6532 18.2532 17.8108 18.5225 16.7246 18.5036Z"
-        fill="#FF4063"
-      />
-      <path
-        d="M9.85498 11.2111C10.3638 11.22 10.769 11.6397 10.7602 12.1485L10.7451 13.0136C10.736 13.5223 10.3165 13.9277 9.80769 13.9188C9.29901 13.9099 8.89378 13.4901 8.90248 12.9814L8.91756 12.1163C8.92652 11.6075 9.34618 11.2023 9.85498 11.2111Z"
-        fill="#1C2024"
-      />
-      <path
-        d="M14.2783 11.2892C14.7871 11.2982 15.1924 11.7178 15.1836 12.2266L15.1685 13.0917C15.1594 13.6004 14.7398 14.0057 14.2311 13.9969C13.7223 13.9881 13.3172 13.5683 13.3258 13.0595L13.3409 12.1945C13.3499 11.6856 13.7695 11.2803 14.2783 11.2892Z"
-        fill="#1C2024"
-      />
-      <path
-        d="M12.1451 6.77553C12.6539 6.78442 13.0591 7.20408 13.0503 7.71292L13.0352 8.57801C13.0261 9.08673 12.6066 9.49215 12.0978 9.48326C11.589 9.47437 11.1839 9.0546 11.1925 8.54587L11.2076 7.68078C11.2166 7.17195 11.6362 6.76668 12.1451 6.77553Z"
-        fill="#1C2024"
-      />
-      <path
-        d="M11.9283 19.0426C12.5748 19.0539 12.9843 19.1182 13.2703 19.1886C13.5568 19.2591 13.7677 19.3458 14.0752 19.4762L14.0836 19.4794C14.4268 19.6228 14.838 19.7948 15.3775 19.9173L15.3674 20.4959C15.362 20.7883 15.0048 20.9551 14.7459 20.7863L13.7417 20.1315C13.5456 20.0037 13.273 20.0656 13.1638 20.2624L12.602 21.2775C12.3037 21.8159 11.4657 21.8011 11.1861 21.2528L10.6594 20.2187C10.5571 20.0182 10.2868 19.9468 10.0864 20.0677L9.05999 20.687C8.79536 20.8467 8.44488 20.6676 8.44976 20.3751L8.45988 19.795C9.00127 19.6913 9.41707 19.5347 9.76439 19.4025L9.77137 19.3995C10.0771 19.2815 10.291 19.202 10.5796 19.1416C10.8687 19.0812 11.2816 19.0313 11.9283 19.0426Z"
-        fill="#9FF065"
-      />
-    </svg>
-  );
-};
diff --git a/components/utils/jam-cta.ts b/components/utils/jam-cta.ts
index 2b5a2c6e..32aeb8c5 100644
--- a/components/utils/jam-cta.ts
+++ b/components/utils/jam-cta.ts
@@ -9,8 +9,7 @@ export const SKILLS_URL =
 
 export const defaultBannerCopy: JamBannerCopy = {
   title: "Fix your next bug faster",
-  description:
-    "Jam captures logs, network requests, and repro steps in one click.",
+  description: "Jam captures logs, network, and repro steps in one click.",
 };
 
 const imageBannerCopy: JamBannerCopy = {
diff --git a/pages/utilities/base64-to-image.tsx b/pages/utilities/base64-to-image.tsx
index 0b356b3e..b2d3653e 100644
--- a/pages/utilities/base64-to-image.tsx
+++ b/pages/utilities/base64-to-image.tsx
@@ -5,7 +5,7 @@ import { Card } from "@/components/ds/CardComponent";
 import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import GitHubContribution from "@/components/GitHubContribution";
 import Base64ToImageSEO from "@/components/seo/Base64ToImageSEO";
@@ -159,7 +159,7 @@ export default function Base64ToImage() {
         username="devin-ai-integration"
         customUrl="https://app.devin.ai"
       />
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <Base64ToImageSEO />
diff --git a/pages/utilities/cam.tsx b/pages/utilities/cam.tsx
index 7107397c..0883514b 100644
--- a/pages/utilities/cam.tsx
+++ b/pages/utilities/cam.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import PageHeader from "@/components/PageHeader";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { Card } from "@/components/ds/CardComponent";
 import { Button } from "@/components/ds/ButtonComponent";
@@ -473,7 +473,7 @@ export default function CameraUtility() {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }
diff --git a/pages/utilities/css-inliner-for-email.tsx b/pages/utilities/css-inliner-for-email.tsx
index 451280a2..68613f0f 100644
--- a/pages/utilities/css-inliner-for-email.tsx
+++ b/pages/utilities/css-inliner-for-email.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ds/ButtonComponent";
 import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { convertCSSToInline } from "@/components/utils/css-to-inline.utils";
 import { CMDK } from "@/components/CMDK";
@@ -123,7 +123,7 @@ export default function CSSInlinerForEmail() {
       </section>
 
       <GitHubContribution username="EduardoDePatta" />
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }
diff --git a/pages/utilities/css-units-converter.tsx b/pages/utilities/css-units-converter.tsx
index 3c6166b3..a09ebfa1 100644
--- a/pages/utilities/css-units-converter.tsx
+++ b/pages/utilities/css-units-converter.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import { CMDK } from "@/components/CMDK";
 import { Card } from "@/components/ds/CardComponent";
 import Header from "@/components/Header";
@@ -203,7 +203,7 @@ export default function CSSUnitsConverter() {
       </section>
 
       <GitHubContribution username="franciscoaiolfi" />
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }
diff --git a/pages/utilities/csv-file-viewer.tsx b/pages/utilities/csv-file-viewer.tsx
index aaa95468..8c0f921d 100644
--- a/pages/utilities/csv-file-viewer.tsx
+++ b/pages/utilities/csv-file-viewer.tsx
@@ -1,4 +1,4 @@
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import { CMDK } from "@/components/CMDK";
 import { Button } from "@/components/ds/ButtonComponent";
 import { Card } from "@/components/ds/CardComponent";
@@ -999,11 +999,11 @@ export default function CSVLogsViewer() {
         </>
       )}
 
-      <section className="container max-w-2xl mb-12">
+      <JamCallToAction />
+
+      <section className="container max-w-2xl">
         <CsvViewerSEO />
       </section>
-
-      <CallToActionGrid />
     </main>
   );
 }
diff --git a/pages/utilities/curl-to-javascript-fetch.tsx b/pages/utilities/curl-to-javascript-fetch.tsx
index 0cca3e36..1c40e159 100644
--- a/pages/utilities/curl-to-javascript-fetch.tsx
+++ b/pages/utilities/curl-to-javascript-fetch.tsx
@@ -7,7 +7,7 @@ import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { toJavaScript } from "curlconverter";
 
@@ -71,7 +71,7 @@ export default function CurlToJavascript() {
           </div>
         </Card>
       </section>
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }
diff --git a/pages/utilities/env-to-netlify-toml.tsx b/pages/utilities/env-to-netlify-toml.tsx
index 8f434d94..2e20d3e5 100644
--- a/pages/utilities/env-to-netlify-toml.tsx
+++ b/pages/utilities/env-to-netlify-toml.tsx
@@ -7,7 +7,7 @@ import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { envToToml } from "@/components/utils/env-to-toml.utils";
 import EnvToTomlSEO from "@/components/seo/EnvToTomlSEO";
@@ -67,7 +67,7 @@ export default function EnvToToml() {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <EnvToTomlSEO />
diff --git a/pages/utilities/file-integrity-checker.tsx b/pages/utilities/file-integrity-checker.tsx
index 4fe8b0ed..e9cee892 100644
--- a/pages/utilities/file-integrity-checker.tsx
+++ b/pages/utilities/file-integrity-checker.tsx
@@ -7,7 +7,7 @@ import { Textarea } from "@/components/ds/TextareaComponent";
 import Header from "@/components/Header";
 import UploadIcon from "@/components/icons/UploadIcon";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { CMDK } from "@/components/CMDK";
 import crypto from "crypto";
@@ -346,7 +346,7 @@ export default function FileIntegrityChecker() {
       </section>
 
       <GitHubContribution username="hariharjeevan" />
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <FileIntegrityCheckerSEO />
diff --git a/pages/utilities/hash-generator.tsx b/pages/utilities/hash-generator.tsx
index b5039f3c..e4c38ab4 100644
--- a/pages/utilities/hash-generator.tsx
+++ b/pages/utilities/hash-generator.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ds/ButtonComponent";
 import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { CMDK } from "@/components/CMDK";
 import { Combobox } from "@/components/ds/ComboboxComponent";
@@ -262,7 +262,7 @@ export default function HashGenerator() {
       </section>
 
       <GitHubContribution username="EduardoDePatta" />
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }
diff --git a/pages/utilities/hex-to-rgb.tsx b/pages/utilities/hex-to-rgb.tsx
index 3e1d8fc2..d09da8b6 100644
--- a/pages/utilities/hex-to-rgb.tsx
+++ b/pages/utilities/hex-to-rgb.tsx
@@ -17,7 +17,7 @@ import {
 import { Input } from "@/components/ds/InputComponent";
 import CodeSnippetRow from "@/components/CodeSnippetRow";
 import HexToRgbSEO from "@/components/seo/HexToRgbSEO";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { cn } from "@/lib/utils";
 import RgbToHexSEO from "@/components/seo/RgbToHexSEO";
@@ -181,7 +181,7 @@ export default function HEXtoRGB(props: HEXtoRGBProps) {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         {props.invertOrder ? <RgbToHexSEO /> : <HexToRgbSEO />}
diff --git a/pages/utilities/internet-speed-test.tsx b/pages/utilities/internet-speed-test.tsx
index 113de717..5a1276cb 100644
--- a/pages/utilities/internet-speed-test.tsx
+++ b/pages/utilities/internet-speed-test.tsx
@@ -4,7 +4,7 @@ import { useCallback, useRef, useState } from "react";
 import PageHeader from "@/components/PageHeader";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import SpeedTestEngine from "@cloudflare/speedtest";
 import { Card } from "@/components/ds/CardComponent";
@@ -210,7 +210,7 @@ export default function InternetSpeedTest() {
         </div>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <InternetSpeedTestSEO />
diff --git a/pages/utilities/json-to-csv.tsx b/pages/utilities/json-to-csv.tsx
index 92eb753d..6659b3ba 100644
--- a/pages/utilities/json-to-csv.tsx
+++ b/pages/utilities/json-to-csv.tsx
@@ -7,7 +7,7 @@ import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { convertJSONtoCSV } from "@/components/utils/json-to-csv.utils";
 import JsonToCsvSEO from "@/components/seo/JsonToCsvSEO";
@@ -77,7 +77,7 @@ export default function JSONtoCSV() {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <JsonToCsvSEO />
diff --git a/pages/utilities/json-to-tsv.tsx b/pages/utilities/json-to-tsv.tsx
index 706cbd37..29931790 100644
--- a/pages/utilities/json-to-tsv.tsx
+++ b/pages/utilities/json-to-tsv.tsx
@@ -7,7 +7,7 @@ import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { convertJSONtoTSV } from "@/components/utils/json-to-tsv.utils";
 import JsonToTsvSEO from "@/components/seo/JsonToTsvSEO";
@@ -77,7 +77,7 @@ export default function JSONtoTSV() {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <JsonToTsvSEO />
diff --git a/pages/utilities/json-to-yaml.tsx b/pages/utilities/json-to-yaml.tsx
index 7a2e3832..a2d405a8 100644
--- a/pages/utilities/json-to-yaml.tsx
+++ b/pages/utilities/json-to-yaml.tsx
@@ -8,7 +8,7 @@ import Header from "@/components/Header";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
 import yaml from "js-yaml";
 import { CMDK } from "@/components/CMDK";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import JsonToYamlSEO from "@/components/seo/JsonToYaml";
 
@@ -69,7 +69,7 @@ export default function JSONtoYAML() {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <JsonToYamlSEO />
diff --git a/pages/utilities/jsonl-validator.tsx b/pages/utilities/jsonl-validator.tsx
index 6118f37a..ff681d74 100644
--- a/pages/utilities/jsonl-validator.tsx
+++ b/pages/utilities/jsonl-validator.tsx
@@ -1,4 +1,4 @@
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import { CMDK } from "@/components/CMDK";
 import { Button } from "@/components/ds/ButtonComponent";
 import { Card } from "@/components/ds/CardComponent";
@@ -344,7 +344,7 @@ export default function JsonlValidator() {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-4xl">
         <JsonlValidatorSEO />
diff --git a/pages/utilities/jwt-parser.tsx b/pages/utilities/jwt-parser.tsx
index 7aca7276..e47d3831 100644
--- a/pages/utilities/jwt-parser.tsx
+++ b/pages/utilities/jwt-parser.tsx
@@ -7,7 +7,7 @@ import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { decodeJWT } from "@/components/utils/jwt-parser.utils";
 import GitHubContribution from "@/components/GitHubContribution";
@@ -123,7 +123,7 @@ export default function JWTParser() {
       </section>
 
       <GitHubContribution username="EduardoDePatta" />
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }
diff --git a/pages/utilities/lorem-ipsum-generator.tsx b/pages/utilities/lorem-ipsum-generator.tsx
index 70f99234..8eaca624 100644
--- a/pages/utilities/lorem-ipsum-generator.tsx
+++ b/pages/utilities/lorem-ipsum-generator.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { generateLoremIpsum } from "@/components/utils/lorem-ipsum-generator";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import { CMDK } from "@/components/CMDK";
 import { Button } from "@/components/ds/ButtonComponent";
 import { Card } from "@/components/ds/CardComponent";
@@ -138,7 +138,7 @@ export default function LoremIpsumGenerator() {
       </section>
 
       <GitHubContribution username="sprechblase" />
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl mb-6">
         <LoremIpsumGeneratorSEO />
diff --git a/pages/utilities/number-base-changer.tsx b/pages/utilities/number-base-changer.tsx
index f5c83008..d5b4f530 100644
--- a/pages/utilities/number-base-changer.tsx
+++ b/pages/utilities/number-base-changer.tsx
@@ -7,7 +7,7 @@ import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { Combobox } from "@/components/ds/ComboboxComponent";
 import NumberBaseChangerSEO from "@/components/seo/NumberBaseChangerSEO";
@@ -105,7 +105,7 @@ export default function NumberBaseChanger() {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl mb-6">
         <NumberBaseChangerSEO />
diff --git a/pages/utilities/query-params-to-json.tsx b/pages/utilities/query-params-to-json.tsx
index cdbff954..b3c617a4 100644
--- a/pages/utilities/query-params-to-json.tsx
+++ b/pages/utilities/query-params-to-json.tsx
@@ -8,7 +8,7 @@ import Header from "@/components/Header";
 import { CMDK } from "@/components/CMDK";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
 import QueryParamsToJsonSEO from "@/components/seo/QueryParamsToJsonSEO";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "../../components/Meta";
 import { convertQueryParamsToJSON } from "../../components/utils/query-params-to-json.utils";
 
@@ -73,7 +73,7 @@ export default function QueryParamsToJSON() {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <QueryParamsToJsonSEO />
diff --git a/pages/utilities/random-string-generator.tsx b/pages/utilities/random-string-generator.tsx
index cf2b512f..dff4aae0 100644
--- a/pages/utilities/random-string-generator.tsx
+++ b/pages/utilities/random-string-generator.tsx
@@ -8,7 +8,7 @@ import Header from "@/components/Header";
 import { Checkbox } from "@/components/ds/CheckboxComponent";
 import { CMDK } from "@/components/CMDK";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { Input } from "@/components/ds/InputComponent";
 import { PasswordBuilder } from "@/components/utils/password-generator.utils";
@@ -203,7 +203,7 @@ export default function PasswordGenerator() {
       </section>
 
       <GitHubContribution username="sousadiego11" />
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <RandomStringGeneratorSEO />
diff --git a/pages/utilities/regex-tester.tsx b/pages/utilities/regex-tester.tsx
index b73a4409..28b5806a 100644
--- a/pages/utilities/regex-tester.tsx
+++ b/pages/utilities/regex-tester.tsx
@@ -15,7 +15,7 @@ import {
   getPatternBody,
   RegexFlags,
 } from "@/components/utils/regex-tester.utils";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import GitHubContribution from "@/components/GitHubContribution";
 import RegexFlagToggle from "@/components/regex/RegexFlagToggle";
 import RegexPresetPatterns from "@/components/regex/RegexPresetPatterns";
@@ -296,7 +296,7 @@ export default function RegexTester() {
       </section>
 
       <GitHubContribution username="shashankshet" />
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }
diff --git a/pages/utilities/sql-minifier.tsx b/pages/utilities/sql-minifier.tsx
index 5009e392..420f9461 100644
--- a/pages/utilities/sql-minifier.tsx
+++ b/pages/utilities/sql-minifier.tsx
@@ -7,7 +7,7 @@ import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
 import { CMDK } from "@/components/CMDK";
-import CallToActionGrid from "../../components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import SQLMinifierSEO from "@/components/seo/SQLMinifierSEO";
 import {
@@ -99,7 +99,7 @@ export default function SQLMinifier() {
       </section>
 
       <GitHubContribution username="prasang-s" />
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <SQLMinifierSEO />
diff --git a/pages/utilities/tsv-to-json.tsx b/pages/utilities/tsv-to-json.tsx
index 6bd635ec..c1f01d64 100644
--- a/pages/utilities/tsv-to-json.tsx
+++ b/pages/utilities/tsv-to-json.tsx
@@ -8,7 +8,7 @@ import Header from "@/components/Header";
 import { Checkbox } from "@/components/ds/CheckboxComponent";
 import { CMDK } from "@/components/CMDK";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import TsvToJsonSEO from "@/components/seo/TsvToJsonSEO";
 import Meta from "@/components/Meta";
 import { convertTSVtoJSON } from "@/components/utils/tsv-to-json.utils";
@@ -258,7 +258,7 @@ Bob\t35\tUK`;
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <TsvToJsonSEO />
diff --git a/pages/utilities/unserializer.tsx b/pages/utilities/unserializer.tsx
index 5558269b..8d541555 100644
--- a/pages/utilities/unserializer.tsx
+++ b/pages/utilities/unserializer.tsx
@@ -7,7 +7,7 @@ import { Label } from "@/components/ds/LabelComponent";
 import Header from "@/components/Header";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
 import { CMDK } from "@/components/CMDK";
-import CallToActionGrid from "../../components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import GitHubContribution from "@/components/GitHubContribution";
 import UnserializerSEO from "@/components/seo/UnserializerSEO";
 import Meta from "@/components/Meta";
@@ -154,7 +154,7 @@ export default function Unserializer() {
       </section>
 
       <GitHubContribution username="aminurislamarnob" />
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <UnserializerSEO />
diff --git a/pages/utilities/uuid-generator.tsx b/pages/utilities/uuid-generator.tsx
index 8688faac..c724582d 100644
--- a/pages/utilities/uuid-generator.tsx
+++ b/pages/utilities/uuid-generator.tsx
@@ -4,7 +4,7 @@ import { Card } from "@/components/ds/CardComponent";
 import { Button } from "@/components/ds/ButtonComponent";
 import Header from "@/components/Header";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import Meta from "@/components/Meta";
 import { CMDK } from "@/components/CMDK";
 import { Input } from "@/components/ds/InputComponent";
@@ -55,7 +55,7 @@ export default function UuidGenerator() {
       </section>
 
       <GitHubContribution username="ChrBu92" />
-      <CallToActionGrid />
+      <JamCallToAction />
     </main>
   );
 }
diff --git a/pages/utilities/wcag-color-contrast-checker.tsx b/pages/utilities/wcag-color-contrast-checker.tsx
index 0a3f0c3d..9bf58a12 100644
--- a/pages/utilities/wcag-color-contrast-checker.tsx
+++ b/pages/utilities/wcag-color-contrast-checker.tsx
@@ -7,7 +7,7 @@ import { CMDK } from "@/components/CMDK";
 import { Input } from "@/components/ds/InputComponent";
 import { ColorPicker } from "@/components/ds/ColorPickerComponent";
 import WcagColorContrastCheckerSEO from "@/components/seo/WcagColorContrastCheckerSEO";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import GitHubContribution from "@/components/GitHubContribution";
 import Meta from "@/components/Meta";
 import {
@@ -236,7 +236,7 @@ export default function WcagColorContrastChecker() {
       </section>
 
       <GitHubContribution username="EduardoDePatta" />
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <WcagColorContrastCheckerSEO />
diff --git a/pages/utilities/xml-to-json.tsx b/pages/utilities/xml-to-json.tsx
index abd301bd..200c8752 100644
--- a/pages/utilities/xml-to-json.tsx
+++ b/pages/utilities/xml-to-json.tsx
@@ -1,4 +1,4 @@
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import { CMDK } from "@/components/CMDK";
 import { Button } from "@/components/ds/ButtonComponent";
 import { Card } from "@/components/ds/CardComponent";
@@ -82,7 +82,7 @@ export default function XMLtoJSON() {
 
       <GitHubContribution username="HamdiSaidaniX" />
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <XmlToJsonSEO />
diff --git a/pages/utilities/yaml-to-json.tsx b/pages/utilities/yaml-to-json.tsx
index 34a180a9..57a0f54e 100644
--- a/pages/utilities/yaml-to-json.tsx
+++ b/pages/utilities/yaml-to-json.tsx
@@ -8,7 +8,7 @@ import Header from "@/components/Header";
 import { useCopyToClipboard } from "@/components/hooks/useCopyToClipboard";
 import yaml from "js-yaml";
 import { CMDK } from "@/components/CMDK";
-import CallToActionGrid from "@/components/CallToActionGrid";
+import JamCallToAction from "@/components/JamCallToAction";
 import YamlToJsonSEO from "@/components/seo/YamlToJsonSEO";
 import Meta from "../../components/Meta";
 
@@ -69,7 +69,7 @@ export default function YAMLtoJSON() {
         </Card>
       </section>
 
-      <CallToActionGrid />
+      <JamCallToAction />
 
       <section className="container max-w-2xl">
         <YamlToJsonSEO />

From f298e937a24819329f95cf430d27ac31238b2823 Mon Sep 17 00:00:00 2001
From: Tomasz Cichocinski <tomaszcichocinski@gmail.com>
Date: Thu, 22 Oct 2026 22:19:31 +0200
Subject: [PATCH 5/8] feat: skills promo as third card in the utilities grid

Replace the full-width banner below the index grid with a SkillsCard
in slot 3, using the same Card shell as the tool cards. The install
command and copy become a shared InstallCommand export.
---
 components/SkillsBanner.tsx | 70 +++++++++++++++++++++----------------
 components/SkillsCard.tsx   | 39 +++++++++++++++++++++
 pages/utilities/index.tsx   | 23 ++++++------
 3 files changed, 90 insertions(+), 42 deletions(-)
 create mode 100644 components/SkillsCard.tsx

diff --git a/components/SkillsBanner.tsx b/components/SkillsBanner.tsx
index 2c186db9..b2bb472a 100644
--- a/components/SkillsBanner.tsx
+++ b/components/SkillsBanner.tsx
@@ -6,14 +6,48 @@ import { SKILLS_URL } from "./utils/jam-cta";
 
 const INSTALL_COMMAND = "npx skills add jamdotdev/skills";
 
+export const SKILLS_TITLE = "Teach your coding agent to show its work";
+export const SKILLS_DESCRIPTION =
+  "Open-source Jam skills: record a demo, attach proof to the PR, mark up a screenshot, fix a bug from a recording. More on the way.";
+
+export function InstallCommand({ className }: { className?: string }) {
+  const { buttonText, handleCopy } = useCopyToClipboard();
+  const copied = buttonText !== "Copy";
+
+  return (
+    <button
+      type="button"
+      onClick={() => handleCopy(INSTALL_COMMAND)}
+      aria-label={copied ? "Copied" : "Copy install command"}
+      className={cn(
+        "flex w-full items-start gap-2 sm:items-center rounded-lg bg-muted px-3 py-2 font-mono text-sm transition-[background-color,transform] duration-150 ease-out hover:bg-border/60 active:scale-[0.98] sm:py-1.5 sm:pr-1.5",
+        className
+      )}
+    >
+      <span
+        className="shrink-0 leading-5 text-muted-foreground"
+        aria-hidden="true"
+      >
+        {copied ? <Check className="h-4 w-4 text-[#5BA832]" /> : "$"}
+      </span>
+      <code className="min-w-0 flex-1 break-words text-left leading-5 sm:truncate">
+        {INSTALL_COMMAND}
+      </code>
+      <span
+        className="hidden shrink-0 rounded-md p-1.5 sm:inline-flex"
+        aria-hidden="true"
+      >
+        <Copy className="h-4 w-4" />
+      </span>
+    </button>
+  );
+}
+
 interface SkillsBannerProps {
   className?: string;
 }
 
 export default function SkillsBanner({ className }: SkillsBannerProps) {
-  const { buttonText, handleCopy } = useCopyToClipboard();
-  const copied = buttonText !== "Copy";
-
   const githubLink = (
     <a
       href={SKILLS_URL}
@@ -32,39 +66,15 @@ export default function SkillsBanner({ className }: SkillsBannerProps) {
         <span className="shrink-0 rounded-lg bg-[#A7F374] p-2 text-black">
           <Terminal className="h-4 w-4" aria-hidden="true" />
         </span>
-        <p className="min-w-0 flex-1 font-medium leading-5">
-          Teach your coding agent to show its work
-        </p>
+        <p className="min-w-0 flex-1 font-medium leading-5">{SKILLS_TITLE}</p>
         <span className="hidden sm:inline-flex">{githubLink}</span>
       </div>
 
       <p className="mt-2 text-sm leading-5 text-muted-foreground sm:mt-1 sm:pl-11">
-        Open-source Jam skills: record a demo, attach proof to the PR, mark up a
-        screenshot, fix a bug from a recording. More on the way.
+        {SKILLS_DESCRIPTION}
       </p>
 
-      <button
-        type="button"
-        onClick={() => handleCopy(INSTALL_COMMAND)}
-        aria-label={copied ? "Copied" : "Copy install command"}
-        className="mt-4 flex w-full items-start gap-2 sm:items-center rounded-lg bg-muted px-3 py-2 font-mono text-sm transition-[background-color,transform] duration-150 ease-out hover:bg-border/60 active:scale-[0.98] sm:py-1.5 sm:pr-1.5"
-      >
-        <span
-          className="shrink-0 leading-5 text-muted-foreground"
-          aria-hidden="true"
-        >
-          {copied ? <Check className="h-4 w-4 text-[#5BA832]" /> : "$"}
-        </span>
-        <code className="min-w-0 flex-1 break-words text-left leading-5 sm:truncate">
-          {INSTALL_COMMAND}
-        </code>
-        <span
-          className="hidden shrink-0 rounded-md p-1.5 sm:inline-flex"
-          aria-hidden="true"
-        >
-          <Copy className="h-4 w-4" />
-        </span>
-      </button>
+      <InstallCommand className="mt-4" />
 
       <div className="mt-3 sm:hidden">{githubLink}</div>
     </div>
diff --git a/components/SkillsCard.tsx b/components/SkillsCard.tsx
new file mode 100644
index 00000000..afddbc54
--- /dev/null
+++ b/components/SkillsCard.tsx
@@ -0,0 +1,39 @@
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { Terminal } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "./ds/CardComponent";
+import {
+  InstallCommand,
+  SKILLS_DESCRIPTION,
+  SKILLS_TITLE,
+} from "./SkillsBanner";
+import { SKILLS_URL } from "./utils/jam-cta";
+
+// Grid-sized version of SkillsBanner for the utilities index.
+export default function SkillsCard() {
+  return (
+    <Card>
+      <CardContent className="w-full">
+        <span className="mb-4 rounded-lg bg-[#A7F374] p-2 text-black">
+          <Terminal className="h-4 w-4" aria-hidden="true" />
+        </span>
+        <CardTitle className="leading-tight">{SKILLS_TITLE}</CardTitle>
+        <CardDescription>{SKILLS_DESCRIPTION}</CardDescription>
+        <InstallCommand className="self-stretch" />
+        <a
+          href={SKILLS_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mt-4 inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <GitHubLogoIcon aria-hidden="true" />
+          View on GitHub
+        </a>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/pages/utilities/index.tsx b/pages/utilities/index.tsx
index b20e2a6e..f78dd33d 100644
--- a/pages/utilities/index.tsx
+++ b/pages/utilities/index.tsx
@@ -4,7 +4,8 @@ import { CMDK } from "@/components/CMDK";
 import { tools } from "@/components/utils/tools-list";
 import { JamLogo64x64 } from "@/components/JamLogo64x64";
 import Meta from "@/components/Meta";
-import SkillsBanner from "@/components/SkillsBanner";
+import SkillsCard from "@/components/SkillsCard";
+import { Fragment } from "react";
 
 export default function Home() {
   return (
@@ -31,19 +32,17 @@ export default function Home() {
       </div>
 
       <div className="container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {tools.map((card) => (
-          <HomeCard
-            key={card.title}
-            title={card.title}
-            description={card.description}
-            link={card.link}
-          />
+        {tools.map((card, i) => (
+          <Fragment key={card.title}>
+            {i === 2 && <SkillsCard />}
+            <HomeCard
+              title={card.title}
+              description={card.description}
+              link={card.link}
+            />
+          </Fragment>
         ))}
       </div>
-
-      <section className="container max-w-2xl mt-16">
-        <SkillsBanner />
-      </section>
     </main>
   );
 }

From d711fefb3ffc958b919568e70755c414d453d988 Mon Sep 17 00:00:00 2001
From: Tomasz Cichocinski <tomaszcichocinski@gmail.com>
Date: Fri, 23 Oct 2026 10:52:29 +0200
Subject: [PATCH 6/8] refactor: drop skills promo from the utilities index

Keep the skills banner on tool pages only. Removes SkillsCard and the
InstallCommand/copy exports it needed.
---
 components/SkillsBanner.tsx | 70 ++++++++++++++++---------------------
 components/SkillsCard.tsx   | 39 ---------------------
 pages/utilities/index.tsx   | 18 ++++------
 3 files changed, 37 insertions(+), 90 deletions(-)
 delete mode 100644 components/SkillsCard.tsx

diff --git a/components/SkillsBanner.tsx b/components/SkillsBanner.tsx
index b2bb472a..2c186db9 100644
--- a/components/SkillsBanner.tsx
+++ b/components/SkillsBanner.tsx
@@ -6,48 +6,14 @@ import { SKILLS_URL } from "./utils/jam-cta";
 
 const INSTALL_COMMAND = "npx skills add jamdotdev/skills";
 
-export const SKILLS_TITLE = "Teach your coding agent to show its work";
-export const SKILLS_DESCRIPTION =
-  "Open-source Jam skills: record a demo, attach proof to the PR, mark up a screenshot, fix a bug from a recording. More on the way.";
-
-export function InstallCommand({ className }: { className?: string }) {
-  const { buttonText, handleCopy } = useCopyToClipboard();
-  const copied = buttonText !== "Copy";
-
-  return (
-    <button
-      type="button"
-      onClick={() => handleCopy(INSTALL_COMMAND)}
-      aria-label={copied ? "Copied" : "Copy install command"}
-      className={cn(
-        "flex w-full items-start gap-2 sm:items-center rounded-lg bg-muted px-3 py-2 font-mono text-sm transition-[background-color,transform] duration-150 ease-out hover:bg-border/60 active:scale-[0.98] sm:py-1.5 sm:pr-1.5",
-        className
-      )}
-    >
-      <span
-        className="shrink-0 leading-5 text-muted-foreground"
-        aria-hidden="true"
-      >
-        {copied ? <Check className="h-4 w-4 text-[#5BA832]" /> : "$"}
-      </span>
-      <code className="min-w-0 flex-1 break-words text-left leading-5 sm:truncate">
-        {INSTALL_COMMAND}
-      </code>
-      <span
-        className="hidden shrink-0 rounded-md p-1.5 sm:inline-flex"
-        aria-hidden="true"
-      >
-        <Copy className="h-4 w-4" />
-      </span>
-    </button>
-  );
-}
-
 interface SkillsBannerProps {
   className?: string;
 }
 
 export default function SkillsBanner({ className }: SkillsBannerProps) {
+  const { buttonText, handleCopy } = useCopyToClipboard();
+  const copied = buttonText !== "Copy";
+
   const githubLink = (
     <a
       href={SKILLS_URL}
@@ -66,15 +32,39 @@ export default function SkillsBanner({ className }: SkillsBannerProps) {
         <span className="shrink-0 rounded-lg bg-[#A7F374] p-2 text-black">
           <Terminal className="h-4 w-4" aria-hidden="true" />
         </span>
-        <p className="min-w-0 flex-1 font-medium leading-5">{SKILLS_TITLE}</p>
+        <p className="min-w-0 flex-1 font-medium leading-5">
+          Teach your coding agent to show its work
+        </p>
         <span className="hidden sm:inline-flex">{githubLink}</span>
       </div>
 
       <p className="mt-2 text-sm leading-5 text-muted-foreground sm:mt-1 sm:pl-11">
-        {SKILLS_DESCRIPTION}
+        Open-source Jam skills: record a demo, attach proof to the PR, mark up a
+        screenshot, fix a bug from a recording. More on the way.
       </p>
 
-      <InstallCommand className="mt-4" />
+      <button
+        type="button"
+        onClick={() => handleCopy(INSTALL_COMMAND)}
+        aria-label={copied ? "Copied" : "Copy install command"}
+        className="mt-4 flex w-full items-start gap-2 sm:items-center rounded-lg bg-muted px-3 py-2 font-mono text-sm transition-[background-color,transform] duration-150 ease-out hover:bg-border/60 active:scale-[0.98] sm:py-1.5 sm:pr-1.5"
+      >
+        <span
+          className="shrink-0 leading-5 text-muted-foreground"
+          aria-hidden="true"
+        >
+          {copied ? <Check className="h-4 w-4 text-[#5BA832]" /> : "$"}
+        </span>
+        <code className="min-w-0 flex-1 break-words text-left leading-5 sm:truncate">
+          {INSTALL_COMMAND}
+        </code>
+        <span
+          className="hidden shrink-0 rounded-md p-1.5 sm:inline-flex"
+          aria-hidden="true"
+        >
+          <Copy className="h-4 w-4" />
+        </span>
+      </button>
 
       <div className="mt-3 sm:hidden">{githubLink}</div>
     </div>
diff --git a/components/SkillsCard.tsx b/components/SkillsCard.tsx
deleted file mode 100644
index afddbc54..00000000
--- a/components/SkillsCard.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { GitHubLogoIcon } from "@radix-ui/react-icons";
-import { Terminal } from "lucide-react";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardTitle,
-} from "./ds/CardComponent";
-import {
-  InstallCommand,
-  SKILLS_DESCRIPTION,
-  SKILLS_TITLE,
-} from "./SkillsBanner";
-import { SKILLS_URL } from "./utils/jam-cta";
-
-// Grid-sized version of SkillsBanner for the utilities index.
-export default function SkillsCard() {
-  return (
-    <Card>
-      <CardContent className="w-full">
-        <span className="mb-4 rounded-lg bg-[#A7F374] p-2 text-black">
-          <Terminal className="h-4 w-4" aria-hidden="true" />
-        </span>
-        <CardTitle className="leading-tight">{SKILLS_TITLE}</CardTitle>
-        <CardDescription>{SKILLS_DESCRIPTION}</CardDescription>
-        <InstallCommand className="self-stretch" />
-        <a
-          href={SKILLS_URL}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="mt-4 inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
-        >
-          <GitHubLogoIcon aria-hidden="true" />
-          View on GitHub
-        </a>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/pages/utilities/index.tsx b/pages/utilities/index.tsx
index f78dd33d..74283a96 100644
--- a/pages/utilities/index.tsx
+++ b/pages/utilities/index.tsx
@@ -4,8 +4,6 @@ import { CMDK } from "@/components/CMDK";
 import { tools } from "@/components/utils/tools-list";
 import { JamLogo64x64 } from "@/components/JamLogo64x64";
 import Meta from "@/components/Meta";
-import SkillsCard from "@/components/SkillsCard";
-import { Fragment } from "react";
 
 export default function Home() {
   return (
@@ -32,15 +30,13 @@ export default function Home() {
       </div>
 
       <div className="container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {tools.map((card, i) => (
-          <Fragment key={card.title}>
-            {i === 2 && <SkillsCard />}
-            <HomeCard
-              title={card.title}
-              description={card.description}
-              link={card.link}
-            />
-          </Fragment>
+        {tools.map((card) => (
+          <HomeCard
+            key={card.title}
+            title={card.title}
+            description={card.description}
+            link={card.link}
+          />
         ))}
       </div>
     </main>

From b7c9f65b6ce9e2d14691f22184896bb7fcb5012c Mon Sep 17 00:00:00 2001
From: Tomasz Cichocinski <tomaszcichocinski@gmail.com>
Date: Fri, 23 Oct 2026 10:57:14 +0200
Subject: [PATCH 7/8] fix: align skills chip with Jam logo, show Copied next to
 copy icon

Chip is now 40px with an 8px gap so both cards' text starts at the
same x. The $ prompt no longer swaps for a checkmark; the copy icon
slot shows a check and "Copied" instead, on all viewports.
---
 components/SkillsBanner.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/components/SkillsBanner.tsx b/components/SkillsBanner.tsx
index 2c186db9..1ed31ec1 100644
--- a/components/SkillsBanner.tsx
+++ b/components/SkillsBanner.tsx
@@ -28,9 +28,9 @@ export default function SkillsBanner({ className }: SkillsBannerProps) {
 
   return (
     <div className={cn("rounded-xl border p-4 text-left sm:p-5", className)}>
-      <div className="flex items-center gap-3">
-        <span className="shrink-0 rounded-lg bg-[#A7F374] p-2 text-black">
-          <Terminal className="h-4 w-4" aria-hidden="true" />
+      <div className="flex items-center gap-2">
+        <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#A7F374] text-black">
+          <Terminal className="h-5 w-5" aria-hidden="true" />
         </span>
         <p className="min-w-0 flex-1 font-medium leading-5">
           Teach your coding agent to show its work
@@ -38,7 +38,7 @@ export default function SkillsBanner({ className }: SkillsBannerProps) {
         <span className="hidden sm:inline-flex">{githubLink}</span>
       </div>
 
-      <p className="mt-2 text-sm leading-5 text-muted-foreground sm:mt-1 sm:pl-11">
+      <p className="mt-2 text-sm leading-5 text-muted-foreground sm:mt-1 sm:pl-12">
         Open-source Jam skills: record a demo, attach proof to the PR, mark up a
         screenshot, fix a bug from a recording. More on the way.
       </p>
@@ -47,22 +47,29 @@ export default function SkillsBanner({ className }: SkillsBannerProps) {
         type="button"
         onClick={() => handleCopy(INSTALL_COMMAND)}
         aria-label={copied ? "Copied" : "Copy install command"}
-        className="mt-4 flex w-full items-start gap-2 sm:items-center rounded-lg bg-muted px-3 py-2 font-mono text-sm transition-[background-color,transform] duration-150 ease-out hover:bg-border/60 active:scale-[0.98] sm:py-1.5 sm:pr-1.5"
+        className="mt-4 flex w-full items-start gap-2 sm:items-center rounded-lg bg-muted py-1.5 pl-3 pr-1.5 font-mono text-sm transition-[background-color,transform] duration-150 ease-out hover:bg-border/60 active:scale-[0.98]"
       >
         <span
           className="shrink-0 leading-5 text-muted-foreground"
           aria-hidden="true"
         >
-          {copied ? <Check className="h-4 w-4 text-[#5BA832]" /> : "$"}
+          $
         </span>
         <code className="min-w-0 flex-1 break-words text-left leading-5 sm:truncate">
           {INSTALL_COMMAND}
         </code>
         <span
-          className="hidden shrink-0 rounded-md p-1.5 sm:inline-flex"
+          className="inline-flex shrink-0 items-center gap-1.5 rounded-md p-1.5 text-muted-foreground"
           aria-hidden="true"
         >
-          <Copy className="h-4 w-4" />
+          {copied ? (
+            <>
+              <Check className="h-4 w-4 text-[#5BA832]" />
+              <span className="font-sans text-xs leading-4">Copied</span>
+            </>
+          ) : (
+            <Copy className="h-4 w-4" />
+          )}
         </span>
       </button>
 

From 7d266fc18230b464e532f514eed0cf5c20c914dd Mon Sep 17 00:00:00 2001
From: Petar Cirkovic <pekiseven@gmail.com>
Date: Fri, 23 Oct 2026 13:23:11 +0200
Subject: [PATCH 8/8] fix: fine tune icon and copy

---
 components/SkillsBanner.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/SkillsBanner.tsx b/components/SkillsBanner.tsx
index 1ed31ec1..03b170c1 100644
--- a/components/SkillsBanner.tsx
+++ b/components/SkillsBanner.tsx
@@ -29,7 +29,7 @@ export default function SkillsBanner({ className }: SkillsBannerProps) {
   return (
     <div className={cn("rounded-xl border p-4 text-left sm:p-5", className)}>
       <div className="flex items-center gap-2">
-        <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#A7F374] text-black">
+        <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-foreground">
           <Terminal className="h-5 w-5" aria-hidden="true" />
         </span>
         <p className="min-w-0 flex-1 font-medium leading-5">
@@ -40,7 +40,7 @@ export default function SkillsBanner({ className }: SkillsBannerProps) {
 
       <p className="mt-2 text-sm leading-5 text-muted-foreground sm:mt-1 sm:pl-12">
         Open-source Jam skills: record a demo, attach proof to the PR, mark up a
-        screenshot, fix a bug from a recording. More on the way.
+        screenshot, fix a bug from a recording.
       </p>
 
       <button