From 9871f889531c95f952aa0eb031b2f5013a668eef Mon Sep 17 00:00:00 2001
From: Laurence <laurence.jones@live.co.uk>
Date: Sat, 21 Sep 2024 14:40:28 +0100
Subject: [PATCH 1/4] enhance: add remediation supported features bubble

---
 crowdsec-docs/components.json                 |  20 +
 crowdsec-docs/package-lock.json               | 484 ++++++++++++++++--
 crowdsec-docs/package.json                    |   9 +-
 .../components/RemediationSupportTable.tsx    |  49 ++
 crowdsec-docs/src/ui/tooltip.tsx              |  30 ++
 crowdsec-docs/src/utils/index.ts              |   6 +
 crowdsec-docs/tailwind.config.js              |   9 +-
 crowdsec-docs/tsconfig.json                   |  12 +
 .../unversioned/bouncers/aws-waf.mdx          |   6 +
 .../unversioned/bouncers/blocklist-mirror.mdx |   7 +
 .../bouncers/cloudflare-workers.mdx           |   8 +
 .../unversioned/bouncers/cloudflare.mdx       |   6 +
 crowdsec-docs/unversioned/bouncers/custom.mdx |   5 +
 crowdsec-docs/unversioned/bouncers/fastly.mdx |   4 +
 .../unversioned/bouncers/firewall.mdx         |   7 +
 .../unversioned/bouncers/haproxy.mdx          |   6 +
 .../unversioned/bouncers/ingress-nginx.mdx    |   4 +
 .../unversioned/bouncers/magento.mdx          |   6 +
 .../bouncers/misp-feed-generator.mdx          |   4 +
 crowdsec-docs/unversioned/bouncers/nginx.mdx  |   6 +
 .../unversioned/bouncers/openresty.mdx        |   6 +-
 .../unversioned/bouncers/php-lib.mdx          |   7 +
 crowdsec-docs/unversioned/bouncers/php.mdx    |   6 +
 .../unversioned/bouncers/windows-firewall.mdx |   5 +
 .../unversioned/bouncers/wordpress.mdx        |   6 +
 crowdsec-docs/yarn.lock                       | 191 ++++++-
 26 files changed, 843 insertions(+), 66 deletions(-)
 create mode 100644 crowdsec-docs/components.json
 create mode 100644 crowdsec-docs/src/components/RemediationSupportTable.tsx
 create mode 100644 crowdsec-docs/src/ui/tooltip.tsx
 create mode 100644 crowdsec-docs/src/utils/index.ts
 create mode 100644 crowdsec-docs/tsconfig.json

diff --git a/crowdsec-docs/components.json b/crowdsec-docs/components.json
new file mode 100644
index 00000000..29c557ca
--- /dev/null
+++ b/crowdsec-docs/components.json
@@ -0,0 +1,20 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "tailwind": {
+      "config": "tailwind.config.js",
+      "css": "src/css/custom.css",
+      "baseColor": "neutral",
+      "prefix": "tw-",
+      "cssVariables": false
+    },
+    "rsc": true,
+    "aliases": {
+        "utils": "@/src/utils",
+        "components": "@/src/components",
+        "ui": "@/src/ui",
+        "hooks": "@/src/hooks",
+        "lib": "@/src/lib"
+    },
+    "style": "default"
+  }
+  
\ No newline at end of file
diff --git a/crowdsec-docs/package-lock.json b/crowdsec-docs/package-lock.json
index 8a4b64fb..463e9313 100644
--- a/crowdsec-docs/package-lock.json
+++ b/crowdsec-docs/package-lock.json
@@ -21,11 +21,16 @@
         "@mui/icons-material": "^5.11.16",
         "@mui/material": "^5.13.4",
         "@mui/x-date-pickers": "^6.18.0",
-        "clsx": "^2.0.0",
+        "@radix-ui/react-tooltip": "^1.1.2",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.441.0",
         "material-react-table": "^2.0.2",
         "prism-react-renderer": "^2.1.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "tailwind-merge": "^2.5.2",
+        "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
         "@docusaurus/module-type-aliases": "^3.5.2",
@@ -312,7 +317,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -3089,7 +3093,6 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -3106,7 +3109,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
       "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -3118,7 +3120,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -3617,7 +3618,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=14"
@@ -3674,6 +3674,376 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
+      "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
+      "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz",
+      "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz",
+      "integrity": "sha512-9XRsLwe6Yb9B/tlnYCPVUd/TFS4J7HuOZW345DCeC6vKIxQGMZdx21RK4VoZauPD5frgkXTYVS5y90L+3YBn4w==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -4865,8 +5235,7 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
@@ -5303,7 +5672,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -5490,6 +5858,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
+    "node_modules/class-variance-authority/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -5585,9 +5972,9 @@
       }
     },
     "node_modules/clsx": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
-      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
       "engines": {
         "node": ">=6"
       }
@@ -6457,8 +6844,7 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/dir-glob": {
       "version": "3.0.1",
@@ -6474,8 +6860,7 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/dns-equal": {
       "version": "1.0.0",
@@ -7305,7 +7690,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
       "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
-      "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -7321,7 +7705,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -8784,7 +9167,6 @@
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
       "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
-      "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -8985,7 +9367,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -9122,6 +9503,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.441.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.441.0.tgz",
+      "integrity": "sha512-0vfExYtvSDhkC2lqg0zYVW1Uu9GsI4knuV9GP9by5z0Xhc4Zi5RejTxfz9LsjRmCyWVzHCJvxGKZWcRyvQCWVg==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/markdown-extensions": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz",
@@ -11375,7 +11764,6 @@
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
       "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
-      "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -11409,7 +11797,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -11537,7 +11924,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -11876,7 +12262,6 @@
       "version": "1.10.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
       "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^9.1.1 || ^10.0.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -11892,7 +12277,6 @@
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
       "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
-      "dev": true,
       "engines": {
         "node": "14 || >=16.14"
       }
@@ -11943,7 +12327,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11952,7 +12335,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -12174,7 +12556,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -12191,7 +12572,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -12210,7 +12590,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -12245,7 +12624,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
       "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       }
@@ -12254,7 +12632,6 @@
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
       "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
-      "dev": true,
       "engines": {
         "node": ">= 14"
       }
@@ -12471,7 +12848,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
       "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.11"
       },
@@ -13255,7 +13631,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -14396,7 +14771,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -14409,8 +14783,7 @@
     "node_modules/string-width-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/string-width/node_modules/ansi-regex": {
       "version": "6.0.1",
@@ -14479,7 +14852,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -14546,7 +14918,6 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -14568,7 +14939,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -14577,7 +14947,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -14586,7 +14955,6 @@
       "version": "10.3.10",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
       "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
-      "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.5",
@@ -14608,7 +14976,6 @@
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
       "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -14678,11 +15045,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",
+      "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
       "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
-      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -14715,11 +15090,18 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/tailwindcss/node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -14871,7 +15253,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -14880,7 +15261,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -14959,8 +15339,7 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/tslib": {
       "version": "2.6.2",
@@ -15924,7 +16303,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -15940,14 +16318,12 @@
     "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
diff --git a/crowdsec-docs/package.json b/crowdsec-docs/package.json
index 09dc616c..db5c3144 100644
--- a/crowdsec-docs/package.json
+++ b/crowdsec-docs/package.json
@@ -27,11 +27,16 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.4",
     "@mui/x-date-pickers": "^6.18.0",
-    "clsx": "^2.0.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.441.0",
     "material-react-table": "^2.0.2",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.5.2",
diff --git a/crowdsec-docs/src/components/RemediationSupportTable.tsx b/crowdsec-docs/src/components/RemediationSupportTable.tsx
new file mode 100644
index 00000000..3456cd35
--- /dev/null
+++ b/crowdsec-docs/src/components/RemediationSupportTable.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+    ToolTipArrow
+} from "@site/src/ui/tooltip"
+
+
+type RemediationSupportTableProps = {
+    Prometheus: boolean;
+    MTLS: boolean;
+    Stream: boolean;
+    Live: boolean;
+    Metrics: boolean;
+}
+
+const RemediationSupportItem = ({ title, description, supported }: { title: string, description: string, supported: boolean }) => {
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <div className='tw-border tw-rounded-full tw-flex tw-text-black'>
+                        <span className='tw-bg-slate-400 tw-px-2 tw-rounded-l-lg'>{title}</span>
+                        <span className={clsx('tw-rounded-r-lg tw-px-2', { 'tw-bg-green-400': supported, 'tw-bg-red-400': !supported })}>{supported ? 'Supported' : 'Unsupported'}</span>
+                    </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>{description}</p>
+                    <ToolTipArrow className='dark:tw-fill-white'/>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+}
+
+export default function RemediationSupportTable({ MTLS, Metrics, Prometheus, Live, Stream }: RemediationSupportTableProps): React.JSX.Element {
+    return (
+        <div className='tw-flex tw-justify-center tw-flex-wrap tw-mb-4 tw-gap-2'>
+            <RemediationSupportItem title='Metrics' description='Can send detailed metrics to LAPI' supported={Metrics} />
+            <RemediationSupportItem title='MTLS' description='Can do mutual TLS authentication to LAPI' supported={MTLS} />
+            <RemediationSupportItem title='Prometheus' description='Can expose metrics to Prometheus' supported={Prometheus} />
+            <RemediationSupportItem title='Live' description='Can use live endpoint on LAPI' supported={Live} />
+            <RemediationSupportItem title='Stream' description='Can use stream endpoint on LAPI' supported={Stream} />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/crowdsec-docs/src/ui/tooltip.tsx b/crowdsec-docs/src/ui/tooltip.tsx
new file mode 100644
index 00000000..c1c96878
--- /dev/null
+++ b/crowdsec-docs/src/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@site/src/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const ToolTipArrow = TooltipPrimitive.Arrow
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "tw-z-50 tw-overflow-hidden tw-rounded-md tw-border tw-border-neutral-200 tw-bg-white tw-px-3 tw-py-1.5 tw-text-sm tw-text-neutral-950 tw-shadow-md tw-animate-in tw-fade-in-0 tw-zoom-in-95 data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=closed]:tw-zoom-out-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2 dark:tw-border-neutral-800 dark:tw-bg-neutral-950 dark:tw-text-neutral-50",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, ToolTipArrow }
diff --git a/crowdsec-docs/src/utils/index.ts b/crowdsec-docs/src/utils/index.ts
new file mode 100644
index 00000000..bd0c391d
--- /dev/null
+++ b/crowdsec-docs/src/utils/index.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/crowdsec-docs/tailwind.config.js b/crowdsec-docs/tailwind.config.js
index 5c33c9fe..48b87dad 100644
--- a/crowdsec-docs/tailwind.config.js
+++ b/crowdsec-docs/tailwind.config.js
@@ -1,5 +1,6 @@
-const colors = require('tailwindcss/colors')
+const colors = require("tailwindcss/colors")
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
     corePlugins: {
         preflight: false,
@@ -15,12 +16,12 @@ module.exports = {
             ...colors, // Default colors
             primary: {
                 light: "#2E2A77",
-                dark: '#242441',
+                dark: "#242441",
             },
             secondary: "#F8AB13",
         },
         extend: {},
     },
-    plugins: [],
+    plugins: [require("tailwindcss-animate")],
     prefix: "tw-", // This is the prefix for the tailwind classes to not clash with docusarus classes
-};
+}
diff --git a/crowdsec-docs/tsconfig.json b/crowdsec-docs/tsconfig.json
new file mode 100644
index 00000000..44bfbdeb
--- /dev/null
+++ b/crowdsec-docs/tsconfig.json
@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+      "esModuleInterop": true,
+      "jsx": "react",
+      "baseUrl": ".",
+      "paths": {
+        "@/*": ["./*"],
+        "@site/*": ["./*"]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/crowdsec-docs/unversioned/bouncers/aws-waf.mdx b/crowdsec-docs/unversioned/bouncers/aws-waf.mdx
index 1cb091a3..1ded63f9 100644
--- a/crowdsec-docs/unversioned/bouncers/aws-waf.mdx
+++ b/crowdsec-docs/unversioned/bouncers/aws-waf.mdx
@@ -7,6 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/aws-waf-bouncer-logo.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -18,6 +19,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  MTLS
+  Stream
+/>
+
 ## Overview
 
 The `crowdsec-awf-waf-bouncer` automatically adds rules to an AWS WAF ACL and manages IPSets content to apply decisions taken by crowdsec.
diff --git a/crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx b/crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx
index 6fa73917..b1edcb2a 100644
--- a/crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx
+++ b/crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx
@@ -7,6 +7,7 @@ sidebar_position: 7
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 
 <p align="center">
@@ -25,6 +26,12 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 </p>
 </p>
 
+<RemediationSupportTable
+  MTLS
+  Prometheus
+  Stream
+/>
+
 
 This Remediation Component exposes CrowdSec's active decisions via provided HTTP(S) endpoints in pre-defined formats. It can be used by network appliances which support consumption of blocklists via HTTP.
 
diff --git a/crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx b/crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx
index 48ac0bc2..709ee5a6 100644
--- a/crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx
+++ b/crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx
@@ -6,6 +6,8 @@ title: CrowdSec Cloudflare Worker
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+
 
 
 <p align="center">
@@ -23,6 +25,12 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  MTLS
+  Prometheus
+  Stream
+/>
+
 
 :::warning
 This Remediation Component heavily relies on Cloudflare Workers and KV store. It works best on a paid Workers subscription.
diff --git a/crowdsec-docs/unversioned/bouncers/cloudflare.mdx b/crowdsec-docs/unversioned/bouncers/cloudflare.mdx
index c2a76473..7f6c7d8f 100644
--- a/crowdsec-docs/unversioned/bouncers/cloudflare.mdx
+++ b/crowdsec-docs/unversioned/bouncers/cloudflare.mdx
@@ -6,6 +6,7 @@ title: Cloudflare
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 
 <p align="center">
@@ -23,6 +24,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  MTLS
+  Prometheus
+  Stream
+/>
 
 A Remediation Component that syncs the decisions made by CrowdSec with CloudFlare's firewall. Manages multi user, multi account, multi zone setup. Supports IP, Country and AS scoped decisions.
 
diff --git a/crowdsec-docs/unversioned/bouncers/custom.mdx b/crowdsec-docs/unversioned/bouncers/custom.mdx
index 099d3ad1..587e1a91 100644
--- a/crowdsec-docs/unversioned/bouncers/custom.mdx
+++ b/crowdsec-docs/unversioned/bouncers/custom.mdx
@@ -7,6 +7,7 @@ sidebar_position: 5
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 
 <p align="center">
@@ -22,6 +23,10 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  Prometheus
+  Stream
+/>
 
 CrowdSec Remediation Component written to invoke custom scripts.
 
diff --git a/crowdsec-docs/unversioned/bouncers/fastly.mdx b/crowdsec-docs/unversioned/bouncers/fastly.mdx
index 71ded160..d7a7c46c 100644
--- a/crowdsec-docs/unversioned/bouncers/fastly.mdx
+++ b/crowdsec-docs/unversioned/bouncers/fastly.mdx
@@ -6,6 +6,7 @@ title: Fastly
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 <p align="center">
   <img src={useBaseUrl('/img/crowdsec_fastly.png')} width="280" height="300" />
@@ -22,6 +23,9 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  Stream
+/>
 
 # cs-fastly-bouncer
 
diff --git a/crowdsec-docs/unversioned/bouncers/firewall.mdx b/crowdsec-docs/unversioned/bouncers/firewall.mdx
index 7287ecff..a69c800a 100644
--- a/crowdsec-docs/unversioned/bouncers/firewall.mdx
+++ b/crowdsec-docs/unversioned/bouncers/firewall.mdx
@@ -7,6 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 
 <p align="center">
@@ -22,6 +23,12 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  MTLS
+  Prometheus
+  Stream
+  Metrics
+/>
 
 CrowdSec Remediation Component written in golang for firewalls.
 
diff --git a/crowdsec-docs/unversioned/bouncers/haproxy.mdx b/crowdsec-docs/unversioned/bouncers/haproxy.mdx
index 56eba3c3..bbf66de1 100644
--- a/crowdsec-docs/unversioned/bouncers/haproxy.mdx
+++ b/crowdsec-docs/unversioned/bouncers/haproxy.mdx
@@ -6,6 +6,7 @@ title: HAProxy
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_haproxy.svg')} alt="CrowdSec" title="CrowdSec" width="400" height="300" />
@@ -20,6 +21,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  Stream
+  Live
+/>
+
 
 A lua Remediation Component for haproxy.
 
diff --git a/crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx b/crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx
index a87d299e..27ce6b56 100644
--- a/crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx
+++ b/crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx
@@ -7,6 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_nginx.svg')} alt="CrowdSec" title="CrowdSec" width="400" height="300" />
@@ -21,6 +22,9 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  Live
+/>
 
 A lua Remediation Component for Ingress Nginx Controller.
 
diff --git a/crowdsec-docs/unversioned/bouncers/magento.mdx b/crowdsec-docs/unversioned/bouncers/magento.mdx
index efe3ffca..20f4f05c 100644
--- a/crowdsec-docs/unversioned/bouncers/magento.mdx
+++ b/crowdsec-docs/unversioned/bouncers/magento.mdx
@@ -7,6 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/bouncer/magento/crowdsec_magento_bouncer.png')} alt="CrowdSec" title="CrowdSec" />
@@ -17,6 +18,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  Stream
+  Live
+  MTLS
+/>
 
 ## Introduction
 
diff --git a/crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx b/crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx
index df13f5fe..e57b6e95 100644
--- a/crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx
+++ b/crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx
@@ -7,6 +7,7 @@ sidebar_position: 7
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/bouncer/misp_feed_generator/logo.png')} alt="CrowdSec" title="CrowdSec" />
@@ -25,6 +26,9 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 </p>
 </p>
 
+<RemediationSupportTable
+  Stream
+/>
 
 This Remediation Component generates MISP Feed from CrowdSec decisions. It exposes this Feed over HTTP/S.
 This can be used to feed CrowdSec decisions to MISP using the "Feeds" functionality of MISP.
diff --git a/crowdsec-docs/unversioned/bouncers/nginx.mdx b/crowdsec-docs/unversioned/bouncers/nginx.mdx
index d92d375a..edbbacab 100644
--- a/crowdsec-docs/unversioned/bouncers/nginx.mdx
+++ b/crowdsec-docs/unversioned/bouncers/nginx.mdx
@@ -7,6 +7,7 @@ sidebar_position: 1
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import useBaseUrl from "@docusaurus/useBaseUrl";
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 <p align="center">
   <img
@@ -27,6 +28,11 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
   &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  Stream
+  Live
+/>
+
 A lua Remediation Component for nginx.
 
 ## How does it work ?
diff --git a/crowdsec-docs/unversioned/bouncers/openresty.mdx b/crowdsec-docs/unversioned/bouncers/openresty.mdx
index 16a1ce9a..11cc4b79 100644
--- a/crowdsec-docs/unversioned/bouncers/openresty.mdx
+++ b/crowdsec-docs/unversioned/bouncers/openresty.mdx
@@ -7,6 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/openresty.svg')} alt="CrowdSec" title="CrowdSec" width="400" height="300" />
@@ -21,7 +22,10 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-
+<RemediationSupportTable
+  Stream
+  Live
+/>
 
 A lua Remediation Component for OpenResty.
 
diff --git a/crowdsec-docs/unversioned/bouncers/php-lib.mdx b/crowdsec-docs/unversioned/bouncers/php-lib.mdx
index 843385c2..3b3a827f 100644
--- a/crowdsec-docs/unversioned/bouncers/php-lib.mdx
+++ b/crowdsec-docs/unversioned/bouncers/php-lib.mdx
@@ -7,6 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_bouncer_php.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -18,6 +19,12 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  Stream
+  Live
+  MTLS
+/>
+
 ## Overview
 
 This library allows you to create CrowdSec bouncers for PHP applications or frameworks like e-commerce, blog or other exposed applications.
diff --git a/crowdsec-docs/unversioned/bouncers/php.mdx b/crowdsec-docs/unversioned/bouncers/php.mdx
index 6a21841d..7c00cc23 100644
--- a/crowdsec-docs/unversioned/bouncers/php.mdx
+++ b/crowdsec-docs/unversioned/bouncers/php.mdx
@@ -7,6 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_bouncer_php.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -18,6 +19,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  Stream
+  Live
+  MTLS
+/>
 
 ## Overview
 
diff --git a/crowdsec-docs/unversioned/bouncers/windows-firewall.mdx b/crowdsec-docs/unversioned/bouncers/windows-firewall.mdx
index 1c1221c1..04a979db 100644
--- a/crowdsec-docs/unversioned/bouncers/windows-firewall.mdx
+++ b/crowdsec-docs/unversioned/bouncers/windows-firewall.mdx
@@ -6,6 +6,7 @@ title: Windows Firewall
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/cs-windows-firewall-bouncer-logo.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -17,6 +18,10 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
+<RemediationSupportTable
+  Stream
+/>
+
 ## Overview
 
 The Windows firewall Remediation Component interacts with the Windows Firewall to block IPs banned by CrowdSec.
diff --git a/crowdsec-docs/unversioned/bouncers/wordpress.mdx b/crowdsec-docs/unversioned/bouncers/wordpress.mdx
index 8d2f6602..ce4f0007 100644
--- a/crowdsec-docs/unversioned/bouncers/wordpress.mdx
+++ b/crowdsec-docs/unversioned/bouncers/wordpress.mdx
@@ -7,11 +7,17 @@ title: WordPress
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_wp.png')} alt="CrowdSec" title="CrowdSec" />
 </p>
 
+<RemediationSupportTable
+  Stream
+  Live
+  MTLS
+/>
 
 ## Usage
 
diff --git a/crowdsec-docs/yarn.lock b/crowdsec-docs/yarn.lock
index 6f9b25bf..2acfe5f8 100644
--- a/crowdsec-docs/yarn.lock
+++ b/crowdsec-docs/yarn.lock
@@ -1813,7 +1813,7 @@
     "@floating-ui/core" "^1.4.2"
     "@floating-ui/utils" "^0.1.3"
 
-"@floating-ui/react-dom@^2.0.2":
+"@floating-ui/react-dom@^2.0.0", "@floating-ui/react-dom@^2.0.2":
   version "2.0.2"
   resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz"
   integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
@@ -2110,6 +2110,160 @@
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@radix-ui/primitive@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz"
+  integrity sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==
+
+"@radix-ui/react-arrow@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz"
+  integrity sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
+"@radix-ui/react-compose-refs@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz"
+  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+
+"@radix-ui/react-context@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz"
+  integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==
+
+"@radix-ui/react-dismissable-layer@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz"
+  integrity sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-escape-keydown" "1.1.0"
+
+"@radix-ui/react-id@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz"
+  integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-popper@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz"
+  integrity sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+    "@radix-ui/react-use-rect" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+    "@radix-ui/rect" "1.1.0"
+
+"@radix-ui/react-portal@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz"
+  integrity sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-presence@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz"
+  integrity sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-primitive@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz"
+  integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==
+  dependencies:
+    "@radix-ui/react-slot" "1.1.0"
+
+"@radix-ui/react-slot@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
+"@radix-ui/react-tooltip@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz"
+  integrity sha512-9XRsLwe6Yb9B/tlnYCPVUd/TFS4J7HuOZW345DCeC6vKIxQGMZdx21RK4VoZauPD5frgkXTYVS5y90L+3YBn4w==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.0"
+    "@radix-ui/react-portal" "1.1.1"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-visually-hidden" "1.1.0"
+
+"@radix-ui/react-use-callback-ref@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz"
+  integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
+
+"@radix-ui/react-use-controllable-state@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz"
+  integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
+"@radix-ui/react-use-escape-keydown@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz"
+  integrity sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
+"@radix-ui/react-use-layout-effect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz"
+  integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
+
+"@radix-ui/react-use-rect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz"
+  integrity sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==
+  dependencies:
+    "@radix-ui/rect" "1.1.0"
+
+"@radix-ui/react-use-size@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz"
+  integrity sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-visually-hidden@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz"
+  integrity sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
+"@radix-ui/rect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz"
+  integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==
+
 "@sideway/address@^4.1.5":
   version "4.1.5"
   resolved "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz"
@@ -3352,6 +3506,13 @@ ci-info@^3.2.0:
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
+class-variance-authority@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz"
+  integrity sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==
+  dependencies:
+    clsx "2.0.0"
+
 clean-css@^5.2.2, clean-css@^5.3.2, clean-css@~5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz"
@@ -3387,7 +3548,12 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
-clsx@^2.0.0:
+clsx@^2.0.0, clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
+clsx@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
@@ -5734,6 +5900,11 @@ lru-cache@^6.0.0:
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz"
   integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
 
+lucide-react@^0.441.0:
+  version "0.441.0"
+  resolved "https://registry.npmjs.org/lucide-react/-/lucide-react-0.441.0.tgz"
+  integrity sha512-0vfExYtvSDhkC2lqg0zYVW1Uu9GsI4knuV9GP9by5z0Xhc4Zi5RejTxfz9LsjRmCyWVzHCJvxGKZWcRyvQCWVg==
+
 markdown-extensions@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz"
@@ -7488,7 +7659,7 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@*, "react-dom@^16.6.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>= 16.8.0 < 19.0.0", react-dom@>=16, react-dom@>=16.6.0, react-dom@>=16.8.0, react-dom@>=17, react-dom@>=18.0:
+react-dom@*, "react-dom@^16.6.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>= 16.8.0 < 19.0.0", react-dom@>=16, react-dom@>=16.6.0, react-dom@>=16.8.0, react-dom@>=17, react-dom@>=18.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -7601,7 +7772,7 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@*, "react@^16.13.1 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16.8.0 < 19.0.0", react@>=15, react@>=16, react@>=16.0.0, react@>=16.6.0, react@>=16.8.0, react@>=17, react@>=18.0:
+react@*, "react@^16.13.1 || ^17.0.0 || ^18.0.0", "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc", "react@^16.6.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16.8.0 < 19.0.0", react@>=15, react@>=16, react@>=16.0.0, react@>=16.6.0, react@>=16.8.0, react@>=17, react@>=18.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -8523,7 +8694,17 @@ svgo@^3.0.2, svgo@^3.2.0:
     csso "^5.0.5"
     picocolors "^1.0.0"
 
-tailwindcss@^3.4.1:
+tailwind-merge@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz"
+  integrity sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==
+
+tailwindcss-animate@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz"
+  integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
+
+tailwindcss@^3.4.1, "tailwindcss@>=3.0.0 || insiders":
   version "3.4.1"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz"
   integrity sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==

From 96071767b75f28afe442db2756567e017b10b4b4 Mon Sep 17 00:00:00 2001
From: Laurence <laurence.jones@live.co.uk>
Date: Mon, 23 Sep 2024 13:56:46 +0100
Subject: [PATCH 2/4] enhance: updates

---
 ...tTable.tsx => RemediationSupportBadges.tsx} | 18 ++++++++++--------
 crowdsec-docs/unversioned/bouncers/aws-waf.mdx |  3 +--
 .../unversioned/bouncers/blocklist-mirror.mdx  |  3 +--
 .../bouncers/cloudflare-workers.mdx            |  3 +--
 .../unversioned/bouncers/cloudflare.mdx        |  3 +--
 crowdsec-docs/unversioned/bouncers/custom.mdx  |  3 +--
 crowdsec-docs/unversioned/bouncers/fastly.mdx  |  3 +--
 .../unversioned/bouncers/firewall.mdx          |  3 +--
 crowdsec-docs/unversioned/bouncers/haproxy.mdx |  6 +++---
 .../unversioned/bouncers/ingress-nginx.mdx     |  5 +++--
 crowdsec-docs/unversioned/bouncers/magento.mdx |  5 ++---
 .../bouncers/misp-feed-generator.mdx           |  3 +--
 crowdsec-docs/unversioned/bouncers/nginx.mdx   |  6 +++---
 .../unversioned/bouncers/openresty.mdx         |  6 +++---
 crowdsec-docs/unversioned/bouncers/php-lib.mdx |  5 ++---
 crowdsec-docs/unversioned/bouncers/php.mdx     |  5 ++---
 .../unversioned/bouncers/windows-firewall.mdx  |  3 +--
 .../unversioned/bouncers/wordpress.mdx         |  5 ++---
 18 files changed, 39 insertions(+), 49 deletions(-)
 rename crowdsec-docs/src/components/{RemediationSupportTable.tsx => RemediationSupportBadges.tsx} (66%)

diff --git a/crowdsec-docs/src/components/RemediationSupportTable.tsx b/crowdsec-docs/src/components/RemediationSupportBadges.tsx
similarity index 66%
rename from crowdsec-docs/src/components/RemediationSupportTable.tsx
rename to crowdsec-docs/src/components/RemediationSupportBadges.tsx
index 3456cd35..00f87a9a 100644
--- a/crowdsec-docs/src/components/RemediationSupportTable.tsx
+++ b/crowdsec-docs/src/components/RemediationSupportBadges.tsx
@@ -10,11 +10,11 @@ import {
 
 
 type RemediationSupportTableProps = {
-    Prometheus: boolean;
-    MTLS: boolean;
-    Stream: boolean;
-    Live: boolean;
-    Metrics: boolean;
+    Prometheus: boolean; // Prometheus is a boolean that controls the color of the Prometheus bubble
+    MTLS: boolean; // MTLS is a boolean that controls the color of the MTLS bubble
+    Mode: boolean; // Mode is a boolean that controls the color of the Mode bubble
+    Metrics: boolean; // Metrics is a boolean that controls the color of the Metrics bubble
+    Appsec?: boolean; // Appsec is a boolean that controls the color of the AppSec bubble
 }
 
 const RemediationSupportItem = ({ title, description, supported }: { title: string, description: string, supported: boolean }) => {
@@ -36,14 +36,16 @@ const RemediationSupportItem = ({ title, description, supported }: { title: stri
     );
 }
 
-export default function RemediationSupportTable({ MTLS, Metrics, Prometheus, Live, Stream }: RemediationSupportTableProps): React.JSX.Element {
+export default function RemediationSupportTable({ MTLS, Metrics, Prometheus, Mode, Appsec }: RemediationSupportTableProps): React.JSX.Element {
     return (
         <div className='tw-flex tw-justify-center tw-flex-wrap tw-mb-4 tw-gap-2'>
+            {Appsec !== undefined && (
+                <RemediationSupportItem title='AppSec' description='Can forward HTTP requests to the AppSec Component' supported={Appsec} />
+            )}
+            <RemediationSupportItem title='Mode' description='Can be configured in different modes, typically live or stream' supported={Mode} />
             <RemediationSupportItem title='Metrics' description='Can send detailed metrics to LAPI' supported={Metrics} />
             <RemediationSupportItem title='MTLS' description='Can do mutual TLS authentication to LAPI' supported={MTLS} />
             <RemediationSupportItem title='Prometheus' description='Can expose metrics to Prometheus' supported={Prometheus} />
-            <RemediationSupportItem title='Live' description='Can use live endpoint on LAPI' supported={Live} />
-            <RemediationSupportItem title='Stream' description='Can use stream endpoint on LAPI' supported={Stream} />
         </div>
     );
 }
\ No newline at end of file
diff --git a/crowdsec-docs/unversioned/bouncers/aws-waf.mdx b/crowdsec-docs/unversioned/bouncers/aws-waf.mdx
index 1ded63f9..c1699e6e 100644
--- a/crowdsec-docs/unversioned/bouncers/aws-waf.mdx
+++ b/crowdsec-docs/unversioned/bouncers/aws-waf.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/aws-waf-bouncer-logo.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -21,7 +21,6 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 
 <RemediationSupportTable
   MTLS
-  Stream
 />
 
 ## Overview
diff --git a/crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx b/crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx
index b1edcb2a..20356774 100644
--- a/crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx
+++ b/crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx
@@ -7,7 +7,7 @@ sidebar_position: 7
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 <p align="center">
@@ -29,7 +29,6 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 <RemediationSupportTable
   MTLS
   Prometheus
-  Stream
 />
 
 
diff --git a/crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx b/crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx
index 709ee5a6..a3bec2cb 100644
--- a/crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx
+++ b/crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx
@@ -6,7 +6,7 @@ title: CrowdSec Cloudflare Worker
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 
@@ -28,7 +28,6 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 <RemediationSupportTable
   MTLS
   Prometheus
-  Stream
 />
 
 
diff --git a/crowdsec-docs/unversioned/bouncers/cloudflare.mdx b/crowdsec-docs/unversioned/bouncers/cloudflare.mdx
index 7f6c7d8f..dd0f874c 100644
--- a/crowdsec-docs/unversioned/bouncers/cloudflare.mdx
+++ b/crowdsec-docs/unversioned/bouncers/cloudflare.mdx
@@ -6,7 +6,7 @@ title: Cloudflare
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 <p align="center">
@@ -27,7 +27,6 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 <RemediationSupportTable
   MTLS
   Prometheus
-  Stream
 />
 
 A Remediation Component that syncs the decisions made by CrowdSec with CloudFlare's firewall. Manages multi user, multi account, multi zone setup. Supports IP, Country and AS scoped decisions.
diff --git a/crowdsec-docs/unversioned/bouncers/custom.mdx b/crowdsec-docs/unversioned/bouncers/custom.mdx
index 587e1a91..1065191c 100644
--- a/crowdsec-docs/unversioned/bouncers/custom.mdx
+++ b/crowdsec-docs/unversioned/bouncers/custom.mdx
@@ -7,7 +7,7 @@ sidebar_position: 5
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 <p align="center">
@@ -25,7 +25,6 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 
 <RemediationSupportTable
   Prometheus
-  Stream
 />
 
 CrowdSec Remediation Component written to invoke custom scripts.
diff --git a/crowdsec-docs/unversioned/bouncers/fastly.mdx b/crowdsec-docs/unversioned/bouncers/fastly.mdx
index d7a7c46c..29a1620c 100644
--- a/crowdsec-docs/unversioned/bouncers/fastly.mdx
+++ b/crowdsec-docs/unversioned/bouncers/fastly.mdx
@@ -6,7 +6,7 @@ title: Fastly
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
   <img src={useBaseUrl('/img/crowdsec_fastly.png')} width="280" height="300" />
@@ -24,7 +24,6 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 </p>
 
 <RemediationSupportTable
-  Stream
 />
 
 # cs-fastly-bouncer
diff --git a/crowdsec-docs/unversioned/bouncers/firewall.mdx b/crowdsec-docs/unversioned/bouncers/firewall.mdx
index a69c800a..f0c087d8 100644
--- a/crowdsec-docs/unversioned/bouncers/firewall.mdx
+++ b/crowdsec-docs/unversioned/bouncers/firewall.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 <p align="center">
@@ -26,7 +26,6 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 <RemediationSupportTable
   MTLS
   Prometheus
-  Stream
   Metrics
 />
 
diff --git a/crowdsec-docs/unversioned/bouncers/haproxy.mdx b/crowdsec-docs/unversioned/bouncers/haproxy.mdx
index bbf66de1..04579935 100644
--- a/crowdsec-docs/unversioned/bouncers/haproxy.mdx
+++ b/crowdsec-docs/unversioned/bouncers/haproxy.mdx
@@ -6,7 +6,7 @@ title: HAProxy
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_haproxy.svg')} alt="CrowdSec" title="CrowdSec" width="400" height="300" />
@@ -22,8 +22,8 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 </p>
 
 <RemediationSupportTable
-  Stream
-  Live
+  Mode
+  Appsec={false}
 />
 
 
diff --git a/crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx b/crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx
index 27ce6b56..75735dd0 100644
--- a/crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx
+++ b/crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_nginx.svg')} alt="CrowdSec" title="CrowdSec" width="400" height="300" />
@@ -23,7 +23,8 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 </p>
 
 <RemediationSupportTable
-  Live
+  Mode
+  Appsec 
 />
 
 A lua Remediation Component for Ingress Nginx Controller.
diff --git a/crowdsec-docs/unversioned/bouncers/magento.mdx b/crowdsec-docs/unversioned/bouncers/magento.mdx
index 20f4f05c..0219507d 100644
--- a/crowdsec-docs/unversioned/bouncers/magento.mdx
+++ b/crowdsec-docs/unversioned/bouncers/magento.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/bouncer/magento/crowdsec_magento_bouncer.png')} alt="CrowdSec" title="CrowdSec" />
@@ -19,8 +19,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 </p>
 
 <RemediationSupportTable
-  Stream
-  Live
+  Mode
   MTLS
 />
 
diff --git a/crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx b/crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx
index e57b6e95..5e658128 100644
--- a/crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx
+++ b/crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx
@@ -7,7 +7,7 @@ sidebar_position: 7
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/bouncer/misp_feed_generator/logo.png')} alt="CrowdSec" title="CrowdSec" />
@@ -27,7 +27,6 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 </p>
 
 <RemediationSupportTable
-  Stream
 />
 
 This Remediation Component generates MISP Feed from CrowdSec decisions. It exposes this Feed over HTTP/S.
diff --git a/crowdsec-docs/unversioned/bouncers/nginx.mdx b/crowdsec-docs/unversioned/bouncers/nginx.mdx
index edbbacab..60c9442f 100644
--- a/crowdsec-docs/unversioned/bouncers/nginx.mdx
+++ b/crowdsec-docs/unversioned/bouncers/nginx.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
   <img
@@ -29,8 +29,8 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 </p>
 
 <RemediationSupportTable
-  Stream
-  Live
+  Mode
+  Appsec
 />
 
 A lua Remediation Component for nginx.
diff --git a/crowdsec-docs/unversioned/bouncers/openresty.mdx b/crowdsec-docs/unversioned/bouncers/openresty.mdx
index 11cc4b79..6b6cd55b 100644
--- a/crowdsec-docs/unversioned/bouncers/openresty.mdx
+++ b/crowdsec-docs/unversioned/bouncers/openresty.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/openresty.svg')} alt="CrowdSec" title="CrowdSec" width="400" height="300" />
@@ -23,8 +23,8 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 </p>
 
 <RemediationSupportTable
-  Stream
-  Live
+  Mode
+  Appsec
 />
 
 A lua Remediation Component for OpenResty.
diff --git a/crowdsec-docs/unversioned/bouncers/php-lib.mdx b/crowdsec-docs/unversioned/bouncers/php-lib.mdx
index 3b3a827f..079d1456 100644
--- a/crowdsec-docs/unversioned/bouncers/php-lib.mdx
+++ b/crowdsec-docs/unversioned/bouncers/php-lib.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_bouncer_php.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -20,8 +20,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 </p>
 
 <RemediationSupportTable
-  Stream
-  Live
+  Mode
   MTLS
 />
 
diff --git a/crowdsec-docs/unversioned/bouncers/php.mdx b/crowdsec-docs/unversioned/bouncers/php.mdx
index 7c00cc23..889c9b20 100644
--- a/crowdsec-docs/unversioned/bouncers/php.mdx
+++ b/crowdsec-docs/unversioned/bouncers/php.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_bouncer_php.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -20,8 +20,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 </p>
 
 <RemediationSupportTable
-  Stream
-  Live
+  Mode
   MTLS
 />
 
diff --git a/crowdsec-docs/unversioned/bouncers/windows-firewall.mdx b/crowdsec-docs/unversioned/bouncers/windows-firewall.mdx
index 04a979db..8ba553d8 100644
--- a/crowdsec-docs/unversioned/bouncers/windows-firewall.mdx
+++ b/crowdsec-docs/unversioned/bouncers/windows-firewall.mdx
@@ -6,7 +6,7 @@ title: Windows Firewall
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/cs-windows-firewall-bouncer-logo.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -19,7 +19,6 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportTabl
 </p>
 
 <RemediationSupportTable
-  Stream
 />
 
 ## Overview
diff --git a/crowdsec-docs/unversioned/bouncers/wordpress.mdx b/crowdsec-docs/unversioned/bouncers/wordpress.mdx
index ce4f0007..c7bae53c 100644
--- a/crowdsec-docs/unversioned/bouncers/wordpress.mdx
+++ b/crowdsec-docs/unversioned/bouncers/wordpress.mdx
@@ -7,15 +7,14 @@ title: WordPress
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportTable.tsx';
+import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_wp.png')} alt="CrowdSec" title="CrowdSec" />
 </p>
 
 <RemediationSupportTable
-  Stream
-  Live
+  Mode
   MTLS
 />
 

From ce1c3d8ad96a5b4b453e7da6f56498287ddf78d9 Mon Sep 17 00:00:00 2001
From: Laurence <laurence.jones@live.co.uk>
Date: Mon, 23 Sep 2024 13:58:42 +0100
Subject: [PATCH 3/4] enhance: rename for clarity

---
 .../src/components/RemediationSupportBadges.tsx  | 16 ++++++++--------
 crowdsec-docs/unversioned/bouncers/aws-waf.mdx   |  4 ++--
 .../unversioned/bouncers/blocklist-mirror.mdx    |  4 ++--
 .../unversioned/bouncers/cloudflare-workers.mdx  |  4 ++--
 .../unversioned/bouncers/cloudflare.mdx          |  4 ++--
 crowdsec-docs/unversioned/bouncers/custom.mdx    |  4 ++--
 crowdsec-docs/unversioned/bouncers/fastly.mdx    |  4 ++--
 crowdsec-docs/unversioned/bouncers/firewall.mdx  |  4 ++--
 crowdsec-docs/unversioned/bouncers/haproxy.mdx   |  4 ++--
 .../unversioned/bouncers/ingress-nginx.mdx       |  4 ++--
 crowdsec-docs/unversioned/bouncers/magento.mdx   |  4 ++--
 .../unversioned/bouncers/misp-feed-generator.mdx |  4 ++--
 crowdsec-docs/unversioned/bouncers/nginx.mdx     |  4 ++--
 crowdsec-docs/unversioned/bouncers/openresty.mdx |  4 ++--
 crowdsec-docs/unversioned/bouncers/php-lib.mdx   |  4 ++--
 crowdsec-docs/unversioned/bouncers/php.mdx       |  4 ++--
 .../unversioned/bouncers/windows-firewall.mdx    |  4 ++--
 crowdsec-docs/unversioned/bouncers/wordpress.mdx |  4 ++--
 18 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/crowdsec-docs/src/components/RemediationSupportBadges.tsx b/crowdsec-docs/src/components/RemediationSupportBadges.tsx
index 00f87a9a..9a90bd14 100644
--- a/crowdsec-docs/src/components/RemediationSupportBadges.tsx
+++ b/crowdsec-docs/src/components/RemediationSupportBadges.tsx
@@ -9,7 +9,7 @@ import {
 } from "@site/src/ui/tooltip"
 
 
-type RemediationSupportTableProps = {
+type RemediationSupportBadgesProps = {
     Prometheus: boolean; // Prometheus is a boolean that controls the color of the Prometheus bubble
     MTLS: boolean; // MTLS is a boolean that controls the color of the MTLS bubble
     Mode: boolean; // Mode is a boolean that controls the color of the Mode bubble
@@ -17,7 +17,7 @@ type RemediationSupportTableProps = {
     Appsec?: boolean; // Appsec is a boolean that controls the color of the AppSec bubble
 }
 
-const RemediationSupportItem = ({ title, description, supported }: { title: string, description: string, supported: boolean }) => {
+const RemediationSupportBadge = ({ title, description, supported }: { title: string, description: string, supported: boolean }) => {
     return (
         <TooltipProvider>
             <Tooltip>
@@ -36,16 +36,16 @@ const RemediationSupportItem = ({ title, description, supported }: { title: stri
     );
 }
 
-export default function RemediationSupportTable({ MTLS, Metrics, Prometheus, Mode, Appsec }: RemediationSupportTableProps): React.JSX.Element {
+export default function RemediationSupportBadges({ MTLS, Metrics, Prometheus, Mode, Appsec }: RemediationSupportBadgesProps): React.JSX.Element {
     return (
         <div className='tw-flex tw-justify-center tw-flex-wrap tw-mb-4 tw-gap-2'>
             {Appsec !== undefined && (
-                <RemediationSupportItem title='AppSec' description='Can forward HTTP requests to the AppSec Component' supported={Appsec} />
+                <RemediationSupportBadge title='AppSec' description='Can forward HTTP requests to the AppSec Component' supported={Appsec} />
             )}
-            <RemediationSupportItem title='Mode' description='Can be configured in different modes, typically live or stream' supported={Mode} />
-            <RemediationSupportItem title='Metrics' description='Can send detailed metrics to LAPI' supported={Metrics} />
-            <RemediationSupportItem title='MTLS' description='Can do mutual TLS authentication to LAPI' supported={MTLS} />
-            <RemediationSupportItem title='Prometheus' description='Can expose metrics to Prometheus' supported={Prometheus} />
+            <RemediationSupportBadge title='Mode' description='Can be configured in different modes, typically live or stream' supported={Mode} />
+            <RemediationSupportBadge title='Metrics' description='Can send detailed metrics to LAPI' supported={Metrics} />
+            <RemediationSupportBadge title='MTLS' description='Can do mutual TLS authentication to LAPI' supported={MTLS} />
+            <RemediationSupportBadge title='Prometheus' description='Can expose metrics to Prometheus' supported={Prometheus} />
         </div>
     );
 }
\ No newline at end of file
diff --git a/crowdsec-docs/unversioned/bouncers/aws-waf.mdx b/crowdsec-docs/unversioned/bouncers/aws-waf.mdx
index c1699e6e..392f363b 100644
--- a/crowdsec-docs/unversioned/bouncers/aws-waf.mdx
+++ b/crowdsec-docs/unversioned/bouncers/aws-waf.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/aws-waf-bouncer-logo.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -19,7 +19,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   MTLS
 />
 
diff --git a/crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx b/crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx
index 20356774..d1e6467e 100644
--- a/crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx
+++ b/crowdsec-docs/unversioned/bouncers/blocklist-mirror.mdx
@@ -7,7 +7,7 @@ sidebar_position: 7
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 <p align="center">
@@ -26,7 +26,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 </p>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   MTLS
   Prometheus
 />
diff --git a/crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx b/crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx
index a3bec2cb..082b3635 100644
--- a/crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx
+++ b/crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx
@@ -6,7 +6,7 @@ title: CrowdSec Cloudflare Worker
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 
@@ -25,7 +25,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   MTLS
   Prometheus
 />
diff --git a/crowdsec-docs/unversioned/bouncers/cloudflare.mdx b/crowdsec-docs/unversioned/bouncers/cloudflare.mdx
index dd0f874c..3ccab657 100644
--- a/crowdsec-docs/unversioned/bouncers/cloudflare.mdx
+++ b/crowdsec-docs/unversioned/bouncers/cloudflare.mdx
@@ -6,7 +6,7 @@ title: Cloudflare
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 <p align="center">
@@ -24,7 +24,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   MTLS
   Prometheus
 />
diff --git a/crowdsec-docs/unversioned/bouncers/custom.mdx b/crowdsec-docs/unversioned/bouncers/custom.mdx
index 1065191c..726eee4e 100644
--- a/crowdsec-docs/unversioned/bouncers/custom.mdx
+++ b/crowdsec-docs/unversioned/bouncers/custom.mdx
@@ -7,7 +7,7 @@ sidebar_position: 5
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 <p align="center">
@@ -23,7 +23,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   Prometheus
 />
 
diff --git a/crowdsec-docs/unversioned/bouncers/fastly.mdx b/crowdsec-docs/unversioned/bouncers/fastly.mdx
index 29a1620c..df3effec 100644
--- a/crowdsec-docs/unversioned/bouncers/fastly.mdx
+++ b/crowdsec-docs/unversioned/bouncers/fastly.mdx
@@ -6,7 +6,7 @@ title: Fastly
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
   <img src={useBaseUrl('/img/crowdsec_fastly.png')} width="280" height="300" />
@@ -23,7 +23,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
 />
 
 # cs-fastly-bouncer
diff --git a/crowdsec-docs/unversioned/bouncers/firewall.mdx b/crowdsec-docs/unversioned/bouncers/firewall.mdx
index f0c087d8..d8dc61b6 100644
--- a/crowdsec-docs/unversioned/bouncers/firewall.mdx
+++ b/crowdsec-docs/unversioned/bouncers/firewall.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 
 <p align="center">
@@ -23,7 +23,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   MTLS
   Prometheus
   Metrics
diff --git a/crowdsec-docs/unversioned/bouncers/haproxy.mdx b/crowdsec-docs/unversioned/bouncers/haproxy.mdx
index 04579935..b2acb224 100644
--- a/crowdsec-docs/unversioned/bouncers/haproxy.mdx
+++ b/crowdsec-docs/unversioned/bouncers/haproxy.mdx
@@ -6,7 +6,7 @@ title: HAProxy
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_haproxy.svg')} alt="CrowdSec" title="CrowdSec" width="400" height="300" />
@@ -21,7 +21,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   Mode
   Appsec={false}
 />
diff --git a/crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx b/crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx
index 75735dd0..1f8334b5 100644
--- a/crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx
+++ b/crowdsec-docs/unversioned/bouncers/ingress-nginx.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_nginx.svg')} alt="CrowdSec" title="CrowdSec" width="400" height="300" />
@@ -22,7 +22,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   Mode
   Appsec 
 />
diff --git a/crowdsec-docs/unversioned/bouncers/magento.mdx b/crowdsec-docs/unversioned/bouncers/magento.mdx
index 0219507d..4ae69b8a 100644
--- a/crowdsec-docs/unversioned/bouncers/magento.mdx
+++ b/crowdsec-docs/unversioned/bouncers/magento.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/bouncer/magento/crowdsec_magento_bouncer.png')} alt="CrowdSec" title="CrowdSec" />
@@ -18,7 +18,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   Mode
   MTLS
 />
diff --git a/crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx b/crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx
index 5e658128..1eb2bf29 100644
--- a/crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx
+++ b/crowdsec-docs/unversioned/bouncers/misp-feed-generator.mdx
@@ -7,7 +7,7 @@ sidebar_position: 7
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/bouncer/misp_feed_generator/logo.png')} alt="CrowdSec" title="CrowdSec" />
@@ -26,7 +26,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 </p>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
 />
 
 This Remediation Component generates MISP Feed from CrowdSec decisions. It exposes this Feed over HTTP/S.
diff --git a/crowdsec-docs/unversioned/bouncers/nginx.mdx b/crowdsec-docs/unversioned/bouncers/nginx.mdx
index 60c9442f..a294da4b 100644
--- a/crowdsec-docs/unversioned/bouncers/nginx.mdx
+++ b/crowdsec-docs/unversioned/bouncers/nginx.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
   <img
@@ -28,7 +28,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
   &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   Mode
   Appsec
 />
diff --git a/crowdsec-docs/unversioned/bouncers/openresty.mdx b/crowdsec-docs/unversioned/bouncers/openresty.mdx
index 6b6cd55b..75581219 100644
--- a/crowdsec-docs/unversioned/bouncers/openresty.mdx
+++ b/crowdsec-docs/unversioned/bouncers/openresty.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/openresty.svg')} alt="CrowdSec" title="CrowdSec" width="400" height="300" />
@@ -22,7 +22,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   Mode
   Appsec
 />
diff --git a/crowdsec-docs/unversioned/bouncers/php-lib.mdx b/crowdsec-docs/unversioned/bouncers/php-lib.mdx
index 079d1456..afdf47fd 100644
--- a/crowdsec-docs/unversioned/bouncers/php-lib.mdx
+++ b/crowdsec-docs/unversioned/bouncers/php-lib.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_bouncer_php.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -19,7 +19,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   Mode
   MTLS
 />
diff --git a/crowdsec-docs/unversioned/bouncers/php.mdx b/crowdsec-docs/unversioned/bouncers/php.mdx
index 889c9b20..9f69d5a8 100644
--- a/crowdsec-docs/unversioned/bouncers/php.mdx
+++ b/crowdsec-docs/unversioned/bouncers/php.mdx
@@ -7,7 +7,7 @@ sidebar_position: 1
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_bouncer_php.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -19,7 +19,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   Mode
   MTLS
 />
diff --git a/crowdsec-docs/unversioned/bouncers/windows-firewall.mdx b/crowdsec-docs/unversioned/bouncers/windows-firewall.mdx
index 8ba553d8..5be9f2fb 100644
--- a/crowdsec-docs/unversioned/bouncers/windows-firewall.mdx
+++ b/crowdsec-docs/unversioned/bouncers/windows-firewall.mdx
@@ -6,7 +6,7 @@ title: Windows Firewall
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/cs-windows-firewall-bouncer-logo.png')} alt="CrowdSec" title="CrowdSec" width="300" height="300" />
@@ -18,7 +18,7 @@ import RemediationSupportTable from '@site/src/components/RemediationSupportBadg
 &#128172; <a href="https://discourse.crowdsec.net">Discourse </a>
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
 />
 
 ## Overview
diff --git a/crowdsec-docs/unversioned/bouncers/wordpress.mdx b/crowdsec-docs/unversioned/bouncers/wordpress.mdx
index c7bae53c..b14f866d 100644
--- a/crowdsec-docs/unversioned/bouncers/wordpress.mdx
+++ b/crowdsec-docs/unversioned/bouncers/wordpress.mdx
@@ -7,13 +7,13 @@ title: WordPress
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import RemediationSupportTable from '@site/src/components/RemediationSupportBadges.tsx';
+import RemediationSupportBadges from '@site/src/components/RemediationSupportBadges.tsx';
 
 <p align="center">
 <img src={useBaseUrl('/img/crowdsec_wp.png')} alt="CrowdSec" title="CrowdSec" />
 </p>
 
-<RemediationSupportTable
+<RemediationSupportBadges
   Mode
   MTLS
 />

From b762799017ca4e11465fe71d7c46b3bebb66206b Mon Sep 17 00:00:00 2001
From: Laurence <laurence.jones@live.co.uk>
Date: Mon, 23 Sep 2024 14:12:00 +0100
Subject: [PATCH 4/4] enhance: add remediation component badges section in
 intro

---
 crowdsec-docs/unversioned/bouncers/intro.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/crowdsec-docs/unversioned/bouncers/intro.md b/crowdsec-docs/unversioned/bouncers/intro.md
index 2d474261..ea801712 100644
--- a/crowdsec-docs/unversioned/bouncers/intro.md
+++ b/crowdsec-docs/unversioned/bouncers/intro.md
@@ -44,6 +44,16 @@ This command must be run on the server where the local API is installed (or at l
 
 If you wish to create your own Remediation Component, look at [this section](/docs/next/local_api/bouncers) of the local API documentation.
 
+## Remediation Component Badges
 
+As CrowdSec has evolved over the years we have added support for various technologies and services. The following badges indicate the level of support for each remediation component.
+
+| Badge | Description |
+| --- | --- |
+| AppSec | Can forward HTTP requests to the AppSec Component [more information](/docs/next/appsec/intro) |
+| Mode | Can be configured into different modes, typically live (send a request to LAPI for each remediation check) or stream (downloads all current decisions to a local cache and checks periodically for new / deleted ones) <br/><br/>**note these are the naming schemes live/stream are used by first party remediation components** |
+| Metrics | Can send detailed metrics to the LAPI [more information](/docs/next/observability/usage_metrics) |
+| MTLS | Supports Mutual TLS authentication to the LAPI [more information](/docs/next/local_api/tls_auth) |
+| Prometheus | Can expose Prometheus metrics |