From c417ec200a31a3f31726a2d9ccd0b076f1219619 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Kr=C3=BCger?= <philipp.krueger1@gmail.com>
Date: Fri, 15 Aug 2025 11:43:53 +0200
Subject: [PATCH] feat: Implement and use a full brand color palette

---
 src/app/roadmap/roadmap.json       |  2 +-
 src/components/FooterMarketing.jsx |  2 +-
 src/components/ThemeToggle.jsx     |  2 +-
 src/components/home/UseCases.jsx   |  2 +-
 src/components/mdx.jsx             |  2 +-
 tailwind.config.mjs                | 20 ++++++++++----------
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/roadmap/roadmap.json b/src/app/roadmap/roadmap.json
index 2c032d1b..6f07b8e1 100644
--- a/src/app/roadmap/roadmap.json
+++ b/src/app/roadmap/roadmap.json
@@ -1,5 +1,5 @@
 {
-  "last_updated": "2025-05-13",
+  "last_updated": "2025-08-01",
   "milestones": [
     {
       "done": true,
diff --git a/src/components/FooterMarketing.jsx b/src/components/FooterMarketing.jsx
index 083fcf05..ab68217e 100644
--- a/src/components/FooterMarketing.jsx
+++ b/src/components/FooterMarketing.jsx
@@ -122,7 +122,7 @@ export function FooterMarketing() {
           </div>
         </div>
         <div className="mt-16 flex border-t border-white/10 pt-8 sm:mt-20 lg:mt-24">
-          <p className="text-xs leading-5 text-gray-400 mr-auto">&copy; 2024 n0, inc.</p>
+          <p className="text-xs leading-5 text-gray-400 mr-auto">&copy; 2025 n0, inc.</p>
           <ThemeToggle />
         </div>
       </div>
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
index 56dd71e5..0b6853b9 100644
--- a/src/components/ThemeToggle.jsx
+++ b/src/components/ThemeToggle.jsx
@@ -35,7 +35,7 @@ export function ThemeToggle() {
   return (
     <button
       type="button"
-      className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5"
+      className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5 cursor-pointer"
       aria-label={mounted ? `Switch to ${otherTheme} theme` : 'Toggle theme'}
       onClick={() => setTheme(otherTheme)}
     >
diff --git a/src/components/home/UseCases.jsx b/src/components/home/UseCases.jsx
index 2ae8ad4b..ad2252b3 100644
--- a/src/components/home/UseCases.jsx
+++ b/src/components/home/UseCases.jsx
@@ -101,7 +101,7 @@ export function UseCaseScroller() {
           <button
             key={category}
             onClick={() => handleCategoryChange(category)}
-            className={`px-2 py-1 text-sm font-semibold transition-colors bg-iroh-gray-200/10 ${
+            className={`px-2 py-1 text-sm font-semibold transition-colors bg-iroh-gray-200/10 cursor-pointer ${
               selectedCategory === category ? "text-iroh-purple-500" : "text-iroh-gray-800/20 dark:text-iroh-gray-400 hover:text-iroh-purple-500"
             }`}
           >
diff --git a/src/components/mdx.jsx b/src/components/mdx.jsx
index 358d10ae..21bd3150 100644
--- a/src/components/mdx.jsx
+++ b/src/components/mdx.jsx
@@ -36,7 +36,7 @@ function InfoIcon(props) {
 
 export function Note({children}) {
   return (
-    <div className="my-6 flex gap-2.5 rounded-2xl border border-iroh-purple-500/20 bg-iroh-purple-200/10 p-4 leading-6 text-iroh-purple-900 dark:border-iroh-purple-500/30 dark:bg-iroh-purple-500/5 dark:text-iroh-purple-200 dark:[--tw-prose-links-hover:theme(colors.irohPurple.300)] dark:[--tw-prose-links:var(--color-white)]">
+    <div className="my-6 flex gap-2.5 rounded-2xl border border-iroh-purple-200 bg-iroh-purple-50 p-4 leading-6 text-iroh-purple-900 dark:border-iroh-purple-500/30 dark:bg-iroh-purple-500/5 dark:text-iroh-purple-200 dark:[--tw-prose-links-hover:theme(colors.irohPurple.300)] dark:[--tw-prose-links:var(--color-white)]">
       <InfoIcon className="mt-1 h-4 w-4 flex-none fill-iroh-purple-500 stroke-white dark:fill-iroh-purple-200/20 dark:stroke-iroh-purple-200" />
       <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
         {children}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index c33c3c39..326816f6 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -80,17 +80,17 @@ export default {
            1000 : "#0E0E0F",
         },
         'irohPurple': {
-          // TODO - actual color gradation
-          50: "#7C7CFF",
-          100: "#7C7CFF",
-          200: "#7C7CFF",
-          300: "#7C7CFF",
-          400: "#7C7CFF",
+          50: "#EEF1FF",
+          100: "#E1E8FF",
+          200: "#C9D4FF",
+          300: "#A8B6FF",
+          400: "#8790FF",
           500: "#7C7CFF",
-          600: "#7C7CFF",
-          700: "#7C7CFF",
-          800: "#7C7CFF",
-          900: "#7C7CFF",
+          600: "#6257F7",
+          700: "#4E3FE0",
+          800: "#3225C6",
+          900: "#2D279C",
+          950: "#1D175B",
         }
       },
       animation: {