feat: Implement and use a full brand color palette (#384)

Author: matheus23

src/app/roadmap/roadmap.json

@@ -1,5 +1,5 @@
 {
-  "last_updated": "2025-05-13",
+  "last_updated": "2025-08-01",
   "milestones": [
     {
       "done": true,

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>

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)}
     >

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"
             }`}
           >

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}

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: {