merge: synchroniser stand-alone avec main (refactorisation stand-alone + migration Next.js 16)

- Merge de main dans stand-alone - Résolution du conflit dans radar-app/package.json (conservation de Next.js 16.1.6) - Intégration de la refactorisation stand-alone complète - Migration Next.js 15.2.4 -> 16.1.6 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-25 18:36:03 +01:00
parent acb475d5d0 9d8ae3d32a
commit 6c304d461c
125 changed files with 15544 additions and 123 deletions
--- a/radar-app/.eslintrc.json
+++ b/radar-app/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
+}
--- a/radar-app/.github/workflows/main.yml
+++ b/radar-app/.github/workflows/main.yml
@@ -0,0 +1,27 @@
+name: Test AOE Technology Radar
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+      - uses: actions/cache@v4
+        with:
+          path: |
+            ~/.npm
+            **/node_modules
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm
+      - run: npm ci
+      - run: npm run build:data
+      - run: npm run build
+      - run: if [ -n "$(git status --porcelain)" ]; then echo 'workspace is dirty after rebuilding' ; git status ; git diff ; exit 1 ; fi
--- a/radar-app/.github/workflows/semanticore.yml
+++ b/radar-app/.github/workflows/semanticore.yml
@@ -0,0 +1,22 @@
+name: Semanticore
+
+on:
+  push:
+    branches:
+      - main
+jobs:
+  semanticore:
+    runs-on: ubuntu-latest
+    name: Semanticore
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: 1.*
+      - name: Semanticore
+        run: go run github.com/aoepeople/semanticore@v0 -npm-update-version package.json
+        env:
+          SEMANTICORE_TOKEN: ${{secrets.GITHUB_TOKEN}}
--- a/radar-app/.gitignore
+++ b/radar-app/.gitignore
@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+/techradar/
+
+# generated
+/src/components/Icons/
+
+/data/about.json
+/data/data.json
+
+# misc
+.DS_Store
+.idea/
+*.pem
+*.tgz
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/radar-app/.husky/commit-msg
+++ b/radar-app/.husky/commit-msg
@@ -0,0 +1 @@
+npx --no-install commitlint --edit "$1"
--- a/radar-app/.husky/pre-commit
+++ b/radar-app/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
--- a/radar-app/.npmignore
+++ b/radar-app/.npmignore
@@ -0,0 +1,8 @@
+*.tgz
+.idea
+.github
+ /.next/
+ /out/
+ /techradar/
+/data/about.json
+/data/data.json
--- a/radar-app/.prettierignore
+++ b/radar-app/.prettierignore
@@ -0,0 +1,3 @@
+node_modules
+out
+CHANGELOG.md
--- a/radar-app/.prettierrc
+++ b/radar-app/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "singleQuote": false,
+  "semi": true,
+  "importOrder": ["^[./]", "^@(.*)$"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+}
--- a/radar-app/LICENSE
+++ b/radar-app/LICENSE
@@ -0,0 +1,204 @@
+The license applies to the generator code and not the articles in the "radar" folder. (Read also the README.md in this folder)
+
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2017 Google Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
--- a/radar-app/bin/techradar.js
+++ b/radar-app/bin/techradar.js
@@ -0,0 +1,167 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+const crypto = require("crypto");
+
+const CWD = process.cwd();
+const BUILDER_DIR = path.join(CWD, ".techradar");
+const SOURCE_DIR = path.join(CWD, "node_modules", "aoe_technology_radar");
+const HASH_FILE = path.join(BUILDER_DIR, "hash");
+
+const PARAMETER = process.argv[2]; // "build" or "serve"
+const FLAGS = process.argv.slice(3).join(" ");
+
+function info(message) {
+  console.log(`\x1b[32m${message}\x1b[0m`);
+}
+
+function warn(message) {
+  console.log(`\x1b[33mWarning: ${message}\x1b[0m`);
+}
+
+function error(message) {
+  console.error(`Error: ${message}`);
+  process.exit(1);
+}
+
+function bootstrap() {
+  if (!fs.existsSync(path.join(CWD, "radar"))) {
+    warn(
+      "Could not find radar directory. Created a bootstrap radar directory in your current working directory. Feel free to customize it.",
+    );
+    fs.cpSync(path.join(SOURCE_DIR, "data", "radar"), path.join(CWD, "radar"), {
+      recursive: true,
+    });
+  }
+
+  if (!fs.existsSync(path.join(CWD, "public"))) {
+    warn(
+      "Could not find public directory. Created a public radar directory in your current working directory.",
+    );
+    fs.cpSync(path.join(SOURCE_DIR, "public"), path.join(CWD, "public"), {
+      recursive: true,
+    });
+  }
+
+  if (!fs.existsSync(path.join(CWD, "config.json"))) {
+    warn(
+      "Could not find a config.json. Created a bootstrap config.json in your current working directory. Customize it to your needs.",
+    );
+    fs.copyFileSync(
+      path.join(SOURCE_DIR, "data", "config.default.json"),
+      path.join(CWD, "config.json"),
+    );
+  }
+
+  if (!fs.existsSync(path.join(CWD, "about.md"))) {
+    warn(
+      "Could not find a about.md. Created a bootstrap about.md in your current working directory. Customize it to your needs.",
+    );
+    fs.copyFileSync(
+      path.join(SOURCE_DIR, "data", "about.md"),
+      path.join(CWD, "about.md"),
+    );
+  }
+
+  if (!fs.existsSync(path.join(CWD, "custom.css"))) {
+    warn("Created a bootstrap custom.css in your current working directory.");
+    fs.copyFileSync(
+      path.join(SOURCE_DIR, "src", "styles", "custom.css"),
+      path.join(CWD, "custom.css"),
+    );
+  }
+}
+
+// Calculate current hash of package.json
+function calculateHash(file) {
+  const fileBuffer = fs.readFileSync(file);
+  const hashSum = crypto.createHash("sha256");
+  hashSum.update(fileBuffer);
+  return hashSum.digest("hex");
+}
+
+const CURRENT_HASH = calculateHash(path.join(CWD, "package.json"));
+
+// Check if builder dir needs to be recreated
+let RECREATE_DIR = false;
+if (
+  !fs.existsSync(BUILDER_DIR) ||
+  !fs.existsSync(HASH_FILE) ||
+  fs.readFileSync(HASH_FILE, "utf8") !== CURRENT_HASH
+) {
+  RECREATE_DIR = true;
+}
+
+if (RECREATE_DIR) {
+  // Remove existing builder dir if it exists
+  if (fs.existsSync(BUILDER_DIR)) {
+    fs.rmSync(BUILDER_DIR, { recursive: true });
+  }
+
+  // Copy source dir to builder dir
+  try {
+    fs.cpSync(SOURCE_DIR, BUILDER_DIR, { recursive: true });
+    fs.writeFileSync(HASH_FILE, CURRENT_HASH);
+  } catch (e) {
+    error(`Could not copy ${SOURCE_DIR} to ${BUILDER_DIR}`);
+  }
+
+  try {
+    process.chdir(BUILDER_DIR);
+    info("Installing npm packages");
+    execSync("npm install", { stdio: "inherit" });
+  } catch (e) {
+    error("Could not install npm packages");
+  }
+}
+
+bootstrap();
+
+try {
+  if (fs.existsSync(path.join(BUILDER_DIR, "data", "radar"))) {
+    fs.rmSync(path.join(BUILDER_DIR, "data", "radar"), { recursive: true });
+  }
+  fs.cpSync(path.join(CWD, "radar"), path.join(BUILDER_DIR, "data", "radar"), {
+    recursive: true,
+  });
+  fs.cpSync(path.join(CWD, "public"), path.join(BUILDER_DIR, "public"), {
+    recursive: true,
+  });
+  fs.copyFileSync(
+    path.join(CWD, "about.md"),
+    path.join(BUILDER_DIR, "data", "about.md"),
+  );
+  fs.copyFileSync(
+    path.join(CWD, "custom.css"),
+    path.join(BUILDER_DIR, "src", "styles", "custom.css"),
+  );
+  fs.copyFileSync(
+    path.join(CWD, "config.json"),
+    path.join(BUILDER_DIR, "data", "config.json"),
+  );
+  process.chdir(BUILDER_DIR);
+} catch (e) {
+  error(e.message);
+}
+
+info("Building data");
+execSync(`npm run build:data -- ${FLAGS}`, {
+  stdio: "inherit",
+});
+
+if (PARAMETER === "serve") {
+  info("Starting techradar");
+  execSync("npm run dev", { stdio: "inherit" });
+}
+
+if (PARAMETER === "build") {
+  info("Building techradar");
+  execSync("npm run build", { stdio: "inherit" });
+  if (fs.existsSync(path.join(CWD, "build"))) {
+    fs.rmSync(path.join(CWD, "build"), { recursive: true });
+  }
+  info(`Copying techradar to ${path.join(CWD, "build")}`);
+  fs.renameSync(path.join(BUILDER_DIR, "out"), path.join(CWD, "build"));
+}
--- a/radar-app/commitlint.config.js
+++ b/radar-app/commitlint.config.js
@@ -0,0 +1,26 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "type-enum": [
+      2,
+      "always",
+      [
+        "feat",
+        "sec",
+        "fix",
+        "bug",
+        "test",
+        "refactor",
+        "rework",
+        "ops",
+        "ci",
+        "cd",
+        "build",
+        "doc",
+        "perf",
+        "chore",
+        "update",
+      ],
+    ],
+  },
+};
--- a/radar-app/data/config.default.json
+++ b/radar-app/data/config.default.json
@@ -0,0 +1,147 @@
+{
+  "basePath": "/techradar",
+  "baseUrl": "",
+  "editUrl": "https://github.dev/AOEpeople/techradar/blob/main/radar/{release}/{id}.md",
+  "logoFile": "logo.svg",
+  "jsFile": "",
+  "toggles": {
+    "showSearch": false,
+    "showChart": true,
+    "showTagFilter": true,
+    "showQuadrantList": true,
+    "showEmptyRings": false
+  },
+  "sections": ["radar", "tags", "list"],
+  "colors": {
+    "foreground": "#fcf2e6",
+    "background": "#113521",
+    "highlight": "#d4a373",
+    "content": "#fff",
+    "text": "#575757",
+    "link": "#bc6c25",
+    "border": "rgba(255, 255, 255, 0.1)",
+    "tag": "rgba(255, 255, 255, 0.1)"
+  },
+  "quadrants": [
+    {
+      "id": "languages-and-frameworks",
+      "title": "Languages & Frameworks",
+      "description": "A selection of programming languages, alongside essential frameworks for building a variety of custom software.",
+      "color": "#a3b18a"
+    },
+    {
+      "id": "methods-and-patterns",
+      "title": "Methods & Patterns",
+      "description": "Key software development methods and design patterns, covering everything from continuous integration and testing to architecture.",
+      "color": "#588157"
+    },
+    {
+      "id": "platforms-and-operations",
+      "title": "Platforms & Operations",
+      "description": "Technologies and tools for software and infrastructure operations, including platforms and services for managing and scaling applications.",
+      "color": "#3f633e"
+    },
+    {
+      "id": "tools",
+      "title": "Tools",
+      "description": "A range of software tools, from simple productivity enhancers to comprehensive project solutions, catering to various project needs.",
+      "color": "#40713f"
+    }
+  ],
+  "rings": [
+    {
+      "id": "adopt",
+      "title": "Adopt",
+      "description": "",
+      "color": "#588157",
+      "radius": 0.5,
+      "strokeWidth": 5
+    },
+    {
+      "id": "trial",
+      "title": "Trial",
+      "description": "",
+      "color": "#457b9d",
+      "radius": 0.69,
+      "strokeWidth": 3
+    },
+    {
+      "id": "assess",
+      "title": "Assess",
+      "description": "",
+      "color": "#bc6c25",
+      "radius": 0.85,
+      "strokeWidth": 2
+    },
+    {
+      "id": "hold",
+      "title": "Hold",
+      "description": "",
+      "color": "#d62828",
+      "radius": 1,
+      "strokeWidth": 0.75
+    }
+  ],
+  "flags": {
+    "new": {
+      "color": "#f1235a",
+      "title": "New",
+      "titleShort": "N",
+      "description": "New in this version"
+    },
+    "changed": {
+      "color": "#40a7d1",
+      "title": "Changed",
+      "titleShort": "C",
+      "description": "Recently changed"
+    },
+    "default": {
+      "description": "Unchanged"
+    }
+  },
+  "chart": {
+    "size": 800,
+    "blipSize": 12
+  },
+  "social": [
+    {
+      "href": "https://twitter.com/aoepeople",
+      "icon": "x"
+    },
+    {
+      "href": "https://www.linkedin.com/company/aoe",
+      "icon": "linkedIn"
+    },
+    {
+      "href": "https://www.xing.com/company/aoe",
+      "icon": "xing"
+    },
+    {
+      "href": "https://github.com/aoepeople",
+      "icon": "github"
+    }
+  ],
+  "imprint": "https://www.aoe.com/en/imprint.html",
+  "labels": {
+    "title": "Technology Radar",
+    "imprint": "Legal Information",
+    "quadrant": "Quadrant",
+    "quadrantOverview": "Quadrant Overview",
+    "zoomIn": "Zoom in",
+    "filterByTag": "Filter by Tag",
+    "footer": "The technology radar is a project by AOE GmbH. Feel free to build your own radar based on the open source project.",
+    "notUpdated": "This item was not updated in last three versions of the Radar. Should it have appeared in one of the more recent editions, there is a good chance it remains pertinent. However, if the item dates back further, its relevance may have diminished and our current evaluation could vary. Regrettably, our capacity to consistently revisit items from past Radar editions is limited.",
+    "notFound": "404 - Page not found",
+    "pageAbout": "How to use AOE Technology Radar?",
+    "pageOverview": "Technologies Overview",
+    "pageSearch": "Search",
+    "searchPlaceholder": "What are you looking for?",
+    "metaDescription": ""
+  },
+  "fuzzySearch": {
+    "threshold": 0.4,
+    "distance": 600,
+    "ignoreLocation": false,
+    "includeScore": true
+  }
+}
--- a/radar-app/data/config.json
+++ b/radar-app/data/config.json
@@ -0,0 +1,3 @@
+{
+  "basePath": "/techradar"
+}
--- a/radar-app/docs/assets/screenshot-techradar.png
+++ b/radar-app/docs/assets/screenshot-techradar.png
--- a/radar-app/next.config.js
+++ b/radar-app/next.config.js
@@ -0,0 +1,16 @@
+const config = require("./data/config.json");
+const basePath =
+  config.basePath && config.basePath !== "/" ? config.basePath : "";
+
+/** @type {import("next").NextConfig} */
+const nextConfig = {
+  basePath,
+  output: "export",
+  trailingSlash: true,
+  reactStrictMode: true,
+  experimental: {
+    scrollRestoration: true,
+  },
+};
+
+module.exports = nextConfig;
--- a/radar-app/package-lock.json
+++ b/radar-app/package-lock.json
--- a/radar-app/package.json
+++ b/radar-app/package.json
@@ -24,7 +24,11 @@
    "@types/react-dom": "^19",
    "clsx": "^2.1.1",
    "eslint": "^9.23.0",
+<<<<<<< HEAD
    "eslint-config-next": "16.1.6",
+=======
+    "eslint-config-next": "15.2.4",
+>>>>>>> main
    "fuse.js": "^7.1.0",
    "gray-matter": "^4.0.3",
    "highlight.js": "^11.11.1",
@@ -32,7 +36,11 @@
    "lint-staged": "^15.5.0",
    "marked": "^15.0.7",
    "marked-highlight": "^2.2.1",
+<<<<<<< HEAD
    "next": "16.1.6",
+=======
+    "next": "15.2.4",
+>>>>>>> main
    "postcss-nested": "^7.0.2",
    "postcss-preset-env": "^10.1.5",
    "prettier": "^3.5.3",
--- a/radar-app/postcss.config.js
+++ b/radar-app/postcss.config.js
@@ -0,0 +1,17 @@
+module.exports = {
+  plugins: [
+    "postcss-nested",
+    [
+      "postcss-preset-env",
+      {
+        autoprefixer: {
+          flexbox: "no-2009",
+        },
+        stage: 3,
+        features: {
+          "custom-properties": false,
+        },
+      },
+    ],
+  ],
+};
--- a/radar-app/public/favicon.ico
+++ b/radar-app/public/favicon.ico
--- a/radar-app/public/logo.svg
+++ b/radar-app/public/logo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149.6 64.73"><path d="M25.87,0h-1.77v7.24C10.65,8.15,0,19.35,0,33.02s11.62,25.87,25.87,25.87,24.87-10.65,25.79-24.1h7.24v-1.77C58.89,14.81,44.09,0,25.87,0ZM25.87,55.32c-12.31,0-22.32-10.01-22.32-22.32S12.59,11.67,24.07,10.76v24.01h24.01c-.92,11.48-10.54,20.52-22.24,20.52h0l.03.03ZM51.74,31.22h-24.1V3.63c14.81.89,26.7,12.78,27.59,27.62h-3.52l.03-.03Z" fill="#fff" fill-rule="evenodd" stroke-width="0"/><path d="M78.09,10.41h-6.09v16.5h-1.5V10.41h-6.08v-1.27h13.67v1.27Z" fill="#fff" stroke-width="0"/><path d="M90.78,18.39h-8.31v7.25h9.56v1.27h-11.06V9.14h11v1.27h-9.5v6.71h8.31v1.27Z" fill="#fff" stroke-width="0"/><path d="M107.77,21.37c-.2,1.87-.87,3.3-2.01,4.3-1.13.99-2.65,1.49-4.53,1.49-1.32,0-2.48-.33-3.5-.99-1.01-.66-1.8-1.59-2.35-2.8-.55-1.21-.83-2.59-.84-4.14v-2.31c0-1.58.28-2.98.83-4.2.55-1.22,1.35-2.16,2.39-2.83,1.04-.66,2.23-1,3.58-1,1.9,0,3.41.51,4.51,1.54,1.1,1.03,1.74,2.45,1.92,4.26h-1.51c-.38-3.02-2.01-4.53-4.92-4.53-1.61,0-2.9.6-3.85,1.81s-1.43,2.87-1.43,5v2.17c0,2.05.46,3.69,1.4,4.91.93,1.22,2.19,1.83,3.78,1.83s2.75-.38,3.55-1.13c.8-.75,1.29-1.88,1.48-3.39h1.51Z" fill="#fff" stroke-width="0"/><path d="M124.59,26.91h-1.51v-8.52h-10.16v8.52h-1.5V9.14h1.5v7.98h10.16v-7.98h1.51v17.77Z" fill="#fff" stroke-width="0"/><path d="M71.73,41.62h-2.32v6.29h-4.28v-17.77h6.99c2.11,0,3.76.47,4.94,1.4,1.19.93,1.78,2.26,1.78,3.96,0,1.24-.25,2.26-.75,3.07-.5.81-1.28,1.47-2.35,1.98l3.71,7.18v.18h-4.59l-3.14-6.29ZM69.41,38.33h2.71c.81,0,1.43-.21,1.84-.64.41-.43.62-1.03.62-1.79s-.21-1.37-.62-1.81-1.03-.65-1.83-.65h-2.71v4.9Z" fill="#fff" stroke-width="0"/><path d="M91.53,44.59h-5.87l-1.03,3.32h-4.58l6.52-17.77h4.03l6.57,17.77h-4.6l-1.04-3.32ZM86.69,41.28h3.82l-1.92-6.16-1.9,6.16Z" fill="#fff" stroke-width="0"/><path d="M98.47,47.91v-17.77h5.73c1.57,0,2.98.36,4.24,1.07,1.25.71,2.23,1.72,2.94,3.01s1.06,2.75,1.07,4.36v.82c0,1.63-.34,3.09-1.03,4.38-.69,1.29-1.66,2.3-2.91,3.03-1.25.73-2.64,1.1-4.18,1.1h-5.85ZM102.75,33.44v11.17h1.49c1.23,0,2.17-.44,2.83-1.31.66-.87.99-2.17.99-3.9v-.77c0-1.72-.33-3.01-.99-3.88-.66-.87-1.62-1.31-2.88-1.31h-1.44Z" fill="#fff" stroke-width="0"/><path d="M124.47,44.59h-5.87l-1.03,3.32h-4.58l6.52-17.77h4.03l6.57,17.77h-4.6l-1.04-3.32ZM119.62,41.28h3.82l-1.92-6.16-1.9,6.16Z" fill="#fff" stroke-width="0"/><path d="M138.01,41.62h-2.32v6.29h-4.28v-17.77h7c2.11,0,3.75.47,4.94,1.4,1.19.93,1.78,2.26,1.78,3.96,0,1.24-.25,2.26-.75,3.07-.5.81-1.28,1.47-2.35,1.98l3.71,7.18v.18h-4.59l-3.14-6.29ZM135.69,38.33h2.71c.81,0,1.43-.21,1.84-.64.41-.43.62-1.03.62-1.79s-.21-1.37-.62-1.81c-.41-.44-1.03-.65-1.83-.65h-2.71v4.9Z" fill="#fff" stroke-width="0"/></svg>
--- a/radar-app/renovate.json
+++ b/radar-app/renovate.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["config:base", ":semanticCommitTypeAll(chore)"]
+}
--- a/radar-app/scripts/buildData.ts
+++ b/radar-app/scripts/buildData.ts
@@ -0,0 +1,271 @@
+import fs from "fs";
+import matter from "gray-matter";
+import hljs from "highlight.js";
+import { Marked } from "marked";
+import { markedHighlight } from "marked-highlight";
+import path from "path";
+
+import nextConfig from "../next.config.js";
+import config from "../src/lib/config";
+import ErrorHandler, { ErrorType, TextColor } from "./errorHandler.js";
+import Positioner from "./positioner";
+
+import { Flag, Item } from "@/lib/types";
+
+const {
+  rings,
+  chart: { size },
+} = config;
+
+const ringIds = rings.map((r) => r.id);
+const quadrants = config.quadrants.map((q, i) => ({ ...q, position: i + 1 }));
+const quadrantIds = quadrants.map((q) => q.id);
+const tags = (config as { tags?: string[] }).tags || [];
+const positioner = new Positioner(size, quadrants, rings);
+const errorHandler = new ErrorHandler(quadrants, rings);
+
+const marked = new Marked(
+  markedHighlight({
+    langPrefix: "hljs language-",
+    highlight(code, lang, info) {
+      const language = hljs.getLanguage(lang) ? lang : "plaintext";
+      return hljs.highlight(code, { language }).value;
+    },
+  }),
+);
+
+function dataPath(...paths: string[]): string {
+  return path.resolve("data", ...paths);
+}
+
+function convertToHtml(markdown: string): string {
+  // replace deprecated internal links with .html extension
+  markdown = markdown.replace(/(]\(\/[^)]+)\.html/g, "$1/");
+
+  if (nextConfig.basePath) {
+    markdown = markdown.replace(/]\(\//g, `](${nextConfig.basePath}/`);
+  }
+
+  let html = marked.parse(markdown.trim()) as string;
+  html = html.replace(
+    /a href="http/g,
+    'a target="_blank" rel="noopener noreferrer" href="http',
+  );
+  return html;
+}
+
+function readMarkdownFile(filePath: string) {
+  const id = path.basename(filePath, ".md");
+  const fileContent = fs.readFileSync(filePath, "utf8");
+
+  try {
+    const { data, content } = matter(fileContent);
+    const body = convertToHtml(content);
+    return { id, data, body };
+  } catch (error) {
+    console.error(`Failed parsing ${filePath}: ${error}`);
+    process.exit(1);
+  }
+}
+
+// Function to recursively read Markdown files and parse them
+async function parseDirectory(dirPath: string): Promise<Item[]> {
+  const items: Record<string, Item> = {};
+
+  async function readDir(dirPath: string) {
+    const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const fullPath = path.join(dirPath, entry.name);
+      if (entry.isDirectory()) {
+        await readDir(fullPath);
+      } else if (entry.isFile() && entry.name.endsWith(".md")) {
+        const releaseDate = path.basename(path.dirname(fullPath));
+        const { id, data, body } = readMarkdownFile(fullPath);
+
+        if (!items[id]) {
+          items[id] = {
+            id,
+            release: releaseDate,
+            title: data.title || id,
+            ring: data.ring,
+            quadrant: data.quadrant,
+            body,
+            featured: data.featured !== false,
+            flag: Flag.Default,
+            tags: data.tags || [],
+            revisions: [],
+            position: [0, 0],
+          };
+        } else {
+          items[id].release = releaseDate;
+          items[id].body = body || items[id].body;
+          items[id].title = data.title || items[id].title;
+          items[id].ring = data.ring || items[id].ring;
+          items[id].quadrant = data.quadrant || items[id].quadrant;
+          items[id].tags = data.tags || items[id].tags;
+          items[id].featured =
+            typeof data.featured === "boolean"
+              ? data.featured
+              : items[id].featured;
+        }
+
+        items[id].revisions!.push({
+          release: releaseDate,
+          ring: data.ring,
+          body,
+        });
+      }
+    }
+  }
+
+  await readDir(dirPath);
+  return Object.values(items).sort((a, b) => a.title.localeCompare(b.title));
+}
+
+function getUniqueReleases(items: Item[]): string[] {
+  const releases = new Set<string>();
+  for (const item of items) {
+    for (const revision of item.revisions || []) {
+      releases.add(revision.release);
+    }
+  }
+  return Array.from(releases).sort();
+}
+
+function getUniqueTags(items: Item[]): string[] {
+  const tags = new Set<string>();
+  for (const item of items) {
+    for (const tag of item.tags || []) {
+      tags.add(tag);
+    }
+  }
+  return Array.from(tags).sort();
+}
+
+function getFlag(item: Item, allReleases: string[]): Flag {
+  // return default flag if this is the first edition of the radar
+  if (allReleases.length === 1) {
+    return Flag.Default;
+  }
+
+  const latestRelease = allReleases[allReleases.length - 1];
+  const revisions = item.revisions || [];
+  const isInLatestRelease =
+    revisions.length > 0 &&
+    revisions[revisions.length - 1].release === latestRelease;
+
+  if (revisions.length == 1 && isInLatestRelease) {
+    return Flag.New;
+  } else if (revisions.length > 1 && isInLatestRelease) {
+    return Flag.Changed;
+  }
+
+  return Flag.Default;
+}
+
+function postProcessItems(items: Item[]): {
+  releases: string[];
+  tags: string[];
+  items: Item[];
+} {
+  const filteredItems = items.filter((item) => {
+    // check if the items' quadrant and ring are valid
+    if (!item.quadrant || !item.ring) {
+      errorHandler.processBuildErrors(ErrorType.NoQuadrant, item.id);
+      return false;
+    }
+
+    if (!quadrantIds.includes(item.quadrant)) {
+      errorHandler.processBuildErrors(
+        ErrorType.InvalidQuadrant,
+        item.id,
+        item.quadrant,
+      );
+      return false;
+    }
+
+    if (!ringIds.includes(item.ring)) {
+      errorHandler.processBuildErrors(
+        ErrorType.InvalidRing,
+        item.id,
+        item.ring,
+      );
+      return false;
+    }
+
+    // check if config has a key `tags` and if it is an array
+    if (Array.isArray(tags) && tags.length) {
+      // if tags are specified, only keep items that have at least one of the tags
+      return item.tags?.some((tag) => tags.includes(tag));
+    }
+
+    return true;
+  });
+
+  errorHandler.checkForBuildErrors();
+
+  const releases = getUniqueReleases(filteredItems);
+  const uniqueTags = getUniqueTags(filteredItems);
+  const processedItems = filteredItems.map((item) => {
+    const processedItem = {
+      ...item,
+      position: positioner.getNextPosition(item.quadrant, item.ring),
+      flag: getFlag(item, releases),
+      // only keep revision which ring or body is different
+      revisions: item.revisions
+        ?.filter((revision, index, revisions) => {
+          const { ring, body } = revision;
+          return (
+            ring !== item.ring ||
+            (body != "" &&
+              body != item.body &&
+              body !== revisions[index - 1]?.body)
+          );
+        })
+        .reverse(),
+    };
+
+    // unset revisions if there are none
+    if (!processedItem.revisions?.length) {
+      delete processedItem.revisions;
+    }
+
+    // unset tags if there are none
+    if (!processedItem.tags?.length) {
+      delete processedItem.tags;
+    }
+
+    return processedItem;
+  });
+
+  return { releases, tags: uniqueTags, items: processedItems };
+}
+
+async function main() {
+  // Parse the data and write radar data to JSON file
+  const items = await parseDirectory(dataPath("radar"));
+  const data = postProcessItems(items);
+
+  if (data.items.length === 0) {
+    errorHandler.processBuildErrors(ErrorType.NoRadarItems);
+  }
+
+  errorHandler.checkForBuildErrors(true);
+
+  const json = JSON.stringify(data, null, 2);
+  fs.writeFileSync(dataPath("data.json"), json);
+
+  // write about data to JSON file
+  const about = readMarkdownFile(dataPath("about.md"));
+  fs.writeFileSync(dataPath("about.json"), JSON.stringify(about, null, 2));
+  console.log(
+    "ℹ️ Data written to data/data.json and data/about.json\n\n" +
+      errorHandler.colorizeBackground(
+        " Build was successfull ",
+        TextColor.Green,
+      ),
+  );
+}
+
+main();
--- a/radar-app/scripts/errorHandler.ts
+++ b/radar-app/scripts/errorHandler.ts
@@ -0,0 +1,108 @@
+import { Quadrant, Ring } from "@/lib/types";
+
+export enum ErrorType {
+  NoQuadrant = "Item {0} has no quadrant or ring",
+  InvalidQuadrant = "Item {0} has invalid quadrant {1}\n\tvalid quadrants are: {2}",
+  InvalidRing = "Item {0} has invalid ring {1}\n\tvalid rings are: {2}",
+  NoRadarItems = "No valid radar items found. Please check the markdown files in the `radar` directory.",
+}
+
+export enum TextColor {
+  Default = 0,
+  Black,
+  Red = 31,
+  Green = 32,
+  Yellow = 33,
+  Blue = 34,
+  Mangenta = 35,
+  Cyan = 36,
+  White = 37,
+}
+
+export default class ErrorHandler {
+  private buildErrors: string[] = [];
+  private quadrants: Quadrant[];
+  private rings: Ring[];
+  private isStrict: boolean;
+  private supportsColor: boolean;
+
+  constructor(quadrants: Quadrant[], rings: Ring[]) {
+    this.isStrict = process.argv.slice(2).includes("--strict");
+    this.supportsColor = process.stdout.isTTY && process.env.TERM !== "dumb";
+    this.quadrants = quadrants;
+    this.rings = rings;
+    console.log(`ℹ️ Build is${this.isStrict ? "" : " not"} in strict mode\n`);
+  }
+
+  public processBuildErrors(errorType: ErrorType, ...args: string[]) {
+    const errorHint = this.getErrorHint(errorType);
+    const errorMsg = this.formatString(
+      errorType.toString(),
+      errorHint ? [...args, errorHint] : args,
+    );
+    this.buildErrors.push(errorMsg);
+  }
+
+  public checkForBuildErrors(exitOnErr: boolean = false) {
+    if (this.buildErrors.length > 0) {
+      console.warn(
+        this.colorizeBackground(
+          `There ${this.buildErrors.length > 1 ? "are" : "is"} ${this.buildErrors.length} error${this.buildErrors.length > 1 ? "s" : ""} in your data build`,
+          TextColor.Red,
+        ) +
+          "\n\n" +
+          this.buildErrors
+            .map((error, index) => `${index + 1}. ${error}`)
+            .join("\n") +
+          "\n",
+      );
+
+      if (this.isStrict || exitOnErr) {
+        process.exit(1);
+      }
+
+      this.buildErrors = [];
+    }
+  }
+
+  private getErrorHint(errorType: ErrorType) {
+    switch (errorType) {
+      case ErrorType.InvalidQuadrant:
+        return this.quadrants.map((quadrant) => quadrant.id).join(", ");
+      case ErrorType.InvalidRing:
+        return this.rings.map((ring) => ring.id).join(", ");
+      default:
+        break;
+    }
+  }
+
+  public colorizeBackground(str: string, backgroundColor: TextColor) {
+    if (this.supportsColor) {
+      return `\x1b[${backgroundColor + 10}m${str}\x1b[${TextColor.Default}m`;
+    }
+
+    return str;
+  }
+
+  private formatString(msg: string, inserts: string[]) {
+    return inserts.reduce(
+      (acc, cur, index) =>
+        acc.replaceAll(
+          `{${index}}`,
+          this.colorizeString(
+            cur,
+            index === 2 ? TextColor.Green : TextColor.Red,
+          ),
+        ),
+      msg,
+    );
+  }
+
+  private colorizeString(str: string, textColor: TextColor) {
+    if (this.supportsColor) {
+      return `\x1b[${textColor}m${str}\x1b[${TextColor.Default}m`;
+    }
+
+    return str;
+  }
+}
--- a/radar-app/scripts/positioner.ts
+++ b/radar-app/scripts/positioner.ts
@@ -0,0 +1,95 @@
+import { Quadrant, Ring } from "@/lib/types";
+
+type Position = [x: number, y: number];
+type RingDimension = [innerRadius: number, outerRadius: number];
+
+// Corresponding to positions 1, 2, 3, and 4 respectively
+const startAngles = [270, 0, 180, 90];
+
+export default class Positioner {
+  private readonly centerRadius: number;
+  private readonly minDistance: number = 20;
+  private readonly paddingRing: number = 15;
+  private readonly paddingAngle: number = 10;
+  private positions: Record<string, Position[]> = {};
+  private ringDimensions: Record<string, RingDimension> = {};
+  private quadrantAngles: Record<string, number> = {};
+
+  constructor(size: number, quadrants: Quadrant[], rings: Ring[]) {
+    this.centerRadius = size / 2;
+
+    quadrants.forEach((quadrant) => {
+      this.quadrantAngles[quadrant.id] = startAngles[quadrant.position - 1];
+    });
+
+    rings.forEach((ring, index) => {
+      const innerRadius =
+        (rings[index - 1]?.radius ?? 0) * this.centerRadius + this.paddingRing;
+      const outerRadius =
+        (ring.radius ?? 1) * this.centerRadius - this.paddingRing;
+      this.ringDimensions[ring.id] = [innerRadius, outerRadius];
+    });
+  }
+
+  static getDistance(a: Position, b: Position): number {
+    const [x1, y1] = a;
+    const [x2, y2] = b;
+    return Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
+  }
+
+  private isOverlapping(position: Position, positions: Position[]): boolean {
+    return positions.some(
+      (p) => Positioner.getDistance(position, p) < this.minDistance,
+    );
+  }
+
+  private getXYPosition(
+    quadrantId: string,
+    ringId: string,
+    radiusFraction: number,
+    angleFraction: number,
+  ): Position {
+    const [innerRadius, outerRadius] = this.ringDimensions[ringId];
+    const ringWidth = outerRadius - innerRadius;
+    const absoluteRadius = innerRadius + radiusFraction * ringWidth;
+
+    const startAngle = this.quadrantAngles[quadrantId] + this.paddingAngle;
+    const endAngle = startAngle + 90 - 2 * this.paddingAngle;
+    const absoluteAngle = startAngle + (endAngle - startAngle) * angleFraction;
+    const angleInRadians = ((absoluteAngle - 90) * Math.PI) / 180;
+
+    return [
+      Math.round(this.centerRadius + absoluteRadius * Math.cos(angleInRadians)),
+      Math.round(this.centerRadius + absoluteRadius * Math.sin(angleInRadians)),
+    ];
+  }
+
+  public getNextPosition(quadrantId: string, ringId: string): Position {
+    this.positions[quadrantId] ??= [];
+
+    let tries = 0;
+    let position: Position;
+
+    do {
+      position = this.getXYPosition(
+        quadrantId,
+        ringId,
+        Math.sqrt(Math.random()),
+        Math.random(),
+      );
+      tries++;
+    } while (
+      this.isOverlapping(position, this.positions[quadrantId]) &&
+      tries < 150
+    );
+
+    if (tries >= 150) {
+      console.warn(
+        `Could not find a non-overlapping position for ${quadrantId} in ring ${ringId}`,
+      );
+    }
+
+    this.positions[quadrantId].push(position);
+    return position;
+  }
+}
--- a/radar-app/src/app/sitemap.ts
+++ b/radar-app/src/app/sitemap.ts
@@ -0,0 +1,40 @@
+import { MetadataRoute } from "next";
+
+import { getAbsoluteUrl, getItems, getQuadrants } from "@/lib/data";
+
+export const dynamic = "force-static";
+export const revalidate = 60;
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const quadrants = getQuadrants().map((quadrant) => ({
+    url: getAbsoluteUrl(`/${quadrant.id}/`),
+    lastModified: new Date(),
+    priority: 0.8,
+  }));
+
+  const items = getItems().map((item) => ({
+    url: getAbsoluteUrl(`/${item.quadrant}/${item.id}/`),
+    lastModified: new Date(),
+    priority: 0.5,
+  }));
+
+  return [
+    {
+      url: getAbsoluteUrl(),
+      lastModified: new Date(),
+      priority: 1,
+    },
+    {
+      url: getAbsoluteUrl("/overview/"),
+      lastModified: new Date(),
+      priority: 0.9,
+    },
+    {
+      url: getAbsoluteUrl("/help-and-about-tech-radar/"),
+      lastModified: new Date(),
+      priority: 0.9,
+    },
+    ...quadrants,
+    ...items,
+  ];
+}
--- a/radar-app/src/components/Badge/Badge.module.css
+++ b/radar-app/src/components/Badge/Badge.module.css
@@ -0,0 +1,50 @@
+.badge {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 6px 15px;
+  text-transform: uppercase;
+  border: 1px solid transparent;
+  border-radius: 13px;
+  font-size: 12px;
+  line-height: 1;
+  overflow: hidden;
+  text-decoration: none;
+}
+
+.size-small {
+  padding: 4px 8px;
+  font-size: 9px;
+}
+
+.size-large {
+  padding: 7px 20px;
+  font-size: 14px;
+  border-radius: 15px;
+}
+
+.colored {
+  color: var(--foreground);
+  background-color: var(--badge);
+}
+
+.selectable {
+  cursor: pointer;
+
+  &:not(.selected) {
+    color: var(--foreground);
+    border: 1px solid var(--foreground);
+    background: transparent;
+  }
+
+  &:not(.colored) {
+    color: var(--foreground);
+    border: 1px solid var(--foreground);
+    background: transparent;
+
+    &.selected {
+      color: var(--background);
+      background: var(--foreground);
+    }
+  }
+}
--- a/radar-app/src/components/Badge/Badge.tsx
+++ b/radar-app/src/components/Badge/Badge.tsx
@@ -0,0 +1,105 @@
+import {
+  CSSProperties,
+  ComponentPropsWithoutRef,
+  ReactNode,
+  useMemo,
+} from "react";
+
+import styles from "./Badge.module.css";
+
+import { getFlag, getRing } from "@/lib/data";
+import { formatRelease } from "@/lib/format";
+import { Flag } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
+  children?: ReactNode;
+  color?: string;
+  selectable?: boolean;
+  selected?: boolean;
+  size?: "small" | "medium" | "large";
+}
+
+export function Badge({
+  children,
+  color,
+  size = "medium",
+  selectable,
+  selected,
+  ...props
+}: BadgeProps) {
+  const style = useMemo(
+    () => (color ? ({ "--badge": color } as CSSProperties) : undefined),
+    [color],
+  );
+
+  const Component = props.onClick ? "button" : "span";
+
+  return (
+    <Component
+      {...props}
+      style={style}
+      className={cn(
+        props.className,
+        styles.badge,
+        styles[`size-${size}`],
+        color && styles.colored,
+        selectable && styles.selectable,
+        selected && styles.selected,
+      )}
+    >
+      {children}
+    </Component>
+  );
+}
+
+interface RingBadgeProps extends Omit<BadgeProps, "color" | "children"> {
+  ring: string;
+  release?: string;
+}
+
+export function RingBadge({
+  ring: ringName,
+  release,
+  ...props
+}: RingBadgeProps) {
+  const ring = getRing(ringName);
+  if (!ring) return null;
+
+  const label = release
+    ? `${ring.title} | ${formatRelease(release)}`
+    : ring.title;
+
+  return (
+    <Badge color={ring.color} {...props}>
+      {label}
+    </Badge>
+  );
+}
+
+// Type guard to check if flag has the required attributes
+function hasRequiredFlagAttributes(flag: any): flag is {
+  color: string;
+  title: string;
+  titleShort: string;
+} {
+  return "color" in flag && "title" in flag && "titleShort" in flag;
+}
+
+interface FlagBadgeProps
+  extends Omit<BadgeProps, "color" | "children" | "size"> {
+  flag: Flag;
+  short?: boolean;
+}
+
+export function FlagBadge({ flag: flagName, short, ...props }: FlagBadgeProps) {
+  if (flagName === Flag.Default) return null;
+  const flag = getFlag(flagName);
+  if (!flag || !hasRequiredFlagAttributes(flag)) return null;
+
+  return (
+    <Badge color={flag.color} size="small" {...props}>
+      {short ? flag.titleShort : flag.title}
+    </Badge>
+  );
+}
--- a/radar-app/src/components/Filter/Filter.module.css
+++ b/radar-app/src/components/Filter/Filter.module.css
@@ -0,0 +1,8 @@
+.filter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+  gap: 20px;
+}
--- a/radar-app/src/components/Filter/Filter.tsx
+++ b/radar-app/src/components/Filter/Filter.tsx
@@ -0,0 +1,25 @@
+import styles from "./Filter.module.css";
+
+import { QueryFilter } from "@/components/Filter/QueryFilter";
+import { RingFilter } from "@/components/Filter/RingFilter";
+
+interface FilterProps {
+  query?: string;
+  onQueryChange: (query: string) => void;
+  ring?: string;
+  onRingChange: (ring: string) => void;
+}
+
+export function Filter({
+  query,
+  onQueryChange,
+  ring,
+  onRingChange,
+}: FilterProps) {
+  return (
+    <div className={styles.filter}>
+      <QueryFilter value={query} onChange={onQueryChange} />
+      <RingFilter value={ring} onChange={onRingChange} />
+    </div>
+  );
+}
--- a/radar-app/src/components/Filter/QueryFilter.module.css
+++ b/radar-app/src/components/Filter/QueryFilter.module.css
@@ -0,0 +1,29 @@
+.filter {
+  flex: 1 1 100%;
+  position: relative;
+}
+
+.input {
+  padding-right: 50px;
+}
+
+.button {
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0;
+  background: transparent;
+  border: none;
+}
+
+.icon {
+  fill: var(--highlight);
+}
+
+@media (min-width: 768px) {
+  .filter {
+    flex: 1 1 auto;
+  }
+}
--- a/radar-app/src/components/Filter/QueryFilter.tsx
+++ b/radar-app/src/components/Filter/QueryFilter.tsx
@@ -0,0 +1,39 @@
+import { ChangeEvent, useEffect, useState } from "react";
+
+import Search from "../Icons/Search";
+import styles from "./QueryFilter.module.css";
+
+import { getLabel } from "@/lib/data";
+
+interface QueryFilterProps {
+  value?: string;
+  onChange: (value: string) => void;
+}
+
+export function QueryFilter({ value, onChange }: QueryFilterProps) {
+  const [val, setVal] = useState(value);
+  const _onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setVal(e.target.value);
+    onChange(e.target.value);
+  };
+
+  useEffect(() => {
+    setVal(value);
+  }, [value]);
+
+  return (
+    <div className={styles.filter}>
+      <input
+        className={styles.input}
+        id="search"
+        type="search"
+        placeholder={getLabel("searchPlaceholder")}
+        value={val}
+        onChange={_onChange}
+      />
+      <button className={styles.button} type="submit">
+        <Search className={styles.icon} />
+      </button>
+    </div>
+  );
+}
--- a/radar-app/src/components/Filter/RingFilter.module.css
+++ b/radar-app/src/components/Filter/RingFilter.module.css
@@ -0,0 +1,8 @@
+.filter {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
--- a/radar-app/src/components/Filter/RingFilter.tsx
+++ b/radar-app/src/components/Filter/RingFilter.tsx
@@ -0,0 +1,43 @@
+import styles from "./RingFilter.module.css";
+
+import { Badge, RingBadge } from "@/components/Badge/Badge";
+import { getRings } from "@/lib/data";
+import { cn } from "@/lib/utils";
+
+interface RingFilterProps {
+  value?: string;
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export function RingFilter({ value, onChange, className }: RingFilterProps) {
+  const rings = getRings();
+
+  return (
+    <ul className={cn(styles.filter, className)}>
+      <li>
+        <Badge
+          size="large"
+          selectable
+          selected={!value}
+          onClick={() => {
+            onChange("");
+          }}
+        >
+          All
+        </Badge>
+      </li>
+      {rings.map((ring) => (
+        <li key={ring.id}>
+          <RingBadge
+            ring={ring.id}
+            size="large"
+            selectable
+            selected={value === ring.id}
+            onClick={() => onChange(ring.id)}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
--- a/radar-app/src/components/Footer/Footer.module.css
+++ b/radar-app/src/components/Footer/Footer.module.css
@@ -0,0 +1,54 @@
+.branding {
+  padding: 20px 0;
+  border-top: 1px solid var(--border);
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 20px;
+  width: 150px;
+}
+
+.description {
+  font-size: 12px;
+  margin: 0 0 30px;
+}
+
+.imprint {
+  opacity: 0.7;
+  display: block;
+  font-size: 12px;
+  text-decoration: underline;
+  text-align: center;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+@media (min-width: 768px) {
+  .branding {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .logo {
+    margin: 0;
+  }
+
+  .description {
+    margin: 0 50px 0;
+  }
+
+  .imprint {
+    text-align: right;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .socialLinks {
+    flex-wrap: wrap;
+    min-width: 150px;
+  }
+}
--- a/radar-app/src/components/Footer/Footer.tsx
+++ b/radar-app/src/components/Footer/Footer.tsx
@@ -0,0 +1,20 @@
+import styles from "./Footer.module.css";
+
+import { SocialLinks } from "@/components/SocialLinks/SocialLinks";
+import { getAppName, getImprintUrl, getLabel, getLogoUrl } from "@/lib/data";
+
+export function Footer() {
+  const logoUrl = getLogoUrl();
+  return (
+    <div className={styles.footer}>
+      <div className={styles.branding}>
+        <img src={logoUrl} className={styles.logo} alt={getAppName()} />
+        <p className={styles.description}>{getLabel("footer")}</p>
+        <SocialLinks className={styles.socialLinks} />
+      </div>
+      <a href={getImprintUrl()} className={styles.imprint} target="_blank">
+        {getLabel("imprint")}
+      </a>
+    </div>
+  );
+}
--- a/radar-app/src/components/ItemDetail/ItemDetail.module.css
+++ b/radar-app/src/components/ItemDetail/ItemDetail.module.css
@@ -0,0 +1,119 @@
+.header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0 0 20px;
+}
+
+.title {
+  margin: 0 30px 0 0;
+}
+
+.editLink {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: block;
+  width: 20px;
+  height: 20px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.revision {
+  padding: 30px 0 15px 35px;
+  margin-left: 20px;
+  border-left: 1px solid var(--border);
+
+  &:hover {
+    .editLink {
+      opacity: 1;
+    }
+  }
+}
+
+.release {
+  display: block;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 12px;
+  line-height: 1.2;
+  width: 50px;
+  height: 50px;
+  padding: 10px 0;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: var(--background);
+  float: left;
+  margin: -15px 0 0 -60px;
+}
+
+.notMaintainedIcon {
+  fill: currentColor;
+  width: 24px;
+  height: 24px;
+  margin: 8px auto;
+}
+
+.ring {
+  float: left;
+  margin: -45px 0 0 0;
+}
+
+.content {
+  position: relative;
+  background: var(--content);
+  color: var(--text);
+  border-radius: 6px;
+  padding: 30px 15px;
+}
+
+.content a {
+  color: var(--link);
+  text-decoration: underline;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .revision {
+    padding: 30px 0 15px 50px;
+    margin-left: 38px;
+  }
+
+  .release {
+    font-size: 18px;
+    width: 75px;
+    height: 75px;
+    padding: 15px 0;
+    margin: -15px 0 0 -90px;
+  }
+
+  .ring {
+    margin-left: -15px;
+  }
+
+  .content {
+    padding: 30px;
+  }
+}
+
+/* special styles for revisions without content */
+.revision.noContent {
+  .content {
+    background: none;
+  }
+
+  .ring {
+    margin-top: -20px;
+  }
+}
+
+.revision.hint {
+  .content {
+    font-size: 14px;
+    background: var(--border);
+    color: var(--foreground);
+  }
+}
--- a/radar-app/src/components/ItemDetail/ItemDetail.tsx
+++ b/radar-app/src/components/ItemDetail/ItemDetail.tsx
@@ -0,0 +1,81 @@
+import styles from "./ItemDetail.module.css";
+
+import { RingBadge } from "@/components/Badge/Badge";
+import { Attention, Edit } from "@/components/Icons";
+import { Tag } from "@/components/Tags/Tags";
+import { getEditUrl, getLabel, getReleases } from "@/lib/data";
+import { Item } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+const latestReleases = getReleases().slice(-3);
+
+function isNotMaintained(release: string) {
+  return !latestReleases.includes(release);
+}
+
+interface ItemProps {
+  item: Item;
+}
+
+export function ItemDetail({ item }: ItemProps) {
+  const notMaintainedText = getLabel("notUpdated");
+  return (
+    <>
+      <div className={styles.header}>
+        <h1 className={styles.title}>{item.title}</h1>
+        {item.tags?.map((tag) => <Tag key={tag} tag={tag} />)}
+      </div>
+      <div className={styles.revisions}>
+        {notMaintainedText && isNotMaintained(item.release) && (
+          <div className={cn(styles.revision, styles.hint)}>
+            <span className={styles.release}>
+              <Attention className={styles.notMaintainedIcon} />
+            </span>
+            <div className={styles.content}>{notMaintainedText}</div>
+          </div>
+        )}
+        <Revision
+          id={item.id}
+          release={item.release}
+          ring={item.ring}
+          body={item.body}
+        />
+        {item.revisions?.map((revision, index) => (
+          <Revision key={index} id={item.id} {...revision} />
+        ))}
+      </div>
+    </>
+  );
+}
+
+interface RevisionProps {
+  id: string;
+  release: string;
+  ring: string;
+  body?: string;
+}
+
+function Revision({ id, release, ring, body }: RevisionProps) {
+  const date = new Date(release);
+  const editLink = getEditUrl({ id, release });
+  const formattedDate = date.toLocaleDateString("en-US", {
+    month: "short",
+    year: "numeric",
+  });
+  return (
+    <div className={cn(styles.revision, !body && styles.noContent)}>
+      <time dateTime={release} className={styles.release}>
+        {formattedDate}
+      </time>
+      <div className={styles.content}>
+        <RingBadge className={styles.ring} ring={ring} size="large" />
+        {body ? <div dangerouslySetInnerHTML={{ __html: body }} /> : null}
+        {editLink && (
+          <a href={editLink} target="_blank" className={styles.editLink}>
+            <Edit />
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/radar-app/src/components/ItemList/ItemList.module.css
+++ b/radar-app/src/components/ItemList/ItemList.module.css
@@ -0,0 +1,76 @@
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  + .item {
+    border-top: 1px solid var(--border);
+  }
+}
+
+.flag {
+  display: inline;
+  flex: 0 0 auto;
+  align-self: baseline;
+  margin-left: 8px;
+}
+
+.ring {
+  flex: 0 0 auto;
+  margin-left: 16px;
+  align-self: baseline;
+}
+
+.quadrant {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.info {
+  flex-basis: 100%;
+}
+
+.link {
+  display: block;
+  padding: 10px;
+  border-radius: 6px;
+
+  &.isFadedOut {
+    opacity: 0.65;
+  }
+
+  &:hover,
+  &.isActive {
+    background: var(--foreground);
+    color: var(--background);
+    opacity: 1;
+  }
+}
+
+.isSmall {
+  font-size: 14px;
+
+  .link {
+    padding: 8px;
+  }
+}
+
+.isLarge {
+  .link {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .quadrant {
+    margin-left: auto;
+  }
+
+  @media (min-width: 768px) {
+    .info {
+      flex-basis: auto;
+      margin-left: auto;
+    }
+  }
+}
--- a/radar-app/src/components/ItemList/ItemList.tsx
+++ b/radar-app/src/components/ItemList/ItemList.tsx
@@ -0,0 +1,67 @@
+import Link from "next/link";
+
+import styles from "./ItemList.module.css";
+
+import { FlagBadge, RingBadge } from "@/components/Badge/Badge";
+import { getQuadrant } from "@/lib/data";
+import { Item } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+export interface ItemListProps {
+  items: Item[];
+  activeId?: string;
+  size?: "small" | "default" | "large";
+  hideRing?: boolean;
+  className?: string;
+}
+
+export function ItemList({
+  items,
+  activeId,
+  size = "default",
+  hideRing = false,
+  className,
+}: ItemListProps) {
+  return (
+    <ul
+      className={cn(styles.list, className, {
+        [styles.isSmall]: size === "small",
+        [styles.isLarge]: size === "large",
+      })}
+    >
+      {items.map((item) => (
+        <li className={styles.item} key={item.id}>
+          <Link
+            className={cn(styles.link, {
+              [styles.isFadedOut]: !item.featured,
+              [styles.isActive]: item.id === activeId,
+            })}
+            href={`/${item.quadrant}/${item.id}`}
+          >
+            <span className={styles.title}>{item.title}</span>
+            <FlagBadge
+              className={styles.flag}
+              flag={item.flag}
+              short={size == "small"}
+            />
+
+            {size === "large" && (
+              <div className={styles.info}>
+                <span className={styles.quadrant}>
+                  {getQuadrant(item.quadrant)?.title}
+                </span>
+                {!hideRing && (
+                  <RingBadge
+                    className={styles.ring}
+                    ring={item.ring}
+                    size="small"
+                  />
+                )}
+              </div>
+            )}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
--- a/radar-app/src/components/Layout/Layout.module.css
+++ b/radar-app/src/components/Layout/Layout.module.css
@@ -0,0 +1,24 @@
+.layout {
+  min-height: 100vh;
+}
+
+.container {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.layout.default {
+  .content {
+    max-width: var(--max-width);
+    min-height: calc(100vh - 250px);
+    margin: 0 auto;
+    padding: 20px;
+  }
+}
--- a/radar-app/src/components/Layout/Layout.tsx
+++ b/radar-app/src/components/Layout/Layout.tsx
@@ -0,0 +1,39 @@
+import { Roboto } from "next/font/google";
+import { FC, ReactNode } from "react";
+
+import styles from "./Layout.module.css";
+
+import { Footer } from "@/components/Footer/Footer";
+import { Logo } from "@/components/Logo/Logo";
+import { Navigation } from "@/components/Navigation/Navigation";
+import { cn } from "@/lib/utils";
+
+const font = Roboto({ weight: ["400", "700"], subsets: ["latin"] });
+
+export type LayoutClass = "default" | "full";
+
+interface LayoutProps {
+  children: ReactNode;
+  layoutClass?: LayoutClass;
+}
+
+export const Layout: FC<LayoutProps> = ({
+  children,
+  layoutClass = "default",
+}) => {
+  return (
+    <div
+      id="layout"
+      className={cn(styles.layout, font.className, styles[layoutClass])}
+    >
+      <header className={cn(styles.container, styles.header)}>
+        <Logo />
+        <Navigation />
+      </header>
+      <main className={cn(styles.content)}>{children}</main>
+      <footer className={cn(styles.container, styles.footer)}>
+        <Footer />
+      </footer>
+    </div>
+  );
+};
--- a/radar-app/src/components/Logo/Logo.module.css
+++ b/radar-app/src/components/Logo/Logo.module.css
@@ -0,0 +1,54 @@
+.logo {
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  min-height: 60px;
+  gap: 16px;
+  transition: padding-left 200ms ease-in-out;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    width: 22px;
+    height: 22px;
+    background: url("../../icons/back.svg") no-repeat 50% 50%;
+    opacity: 0;
+    transition: opacity 200ms ease-in-out;
+  }
+}
+
+.src {
+  width: 150px;
+  transition: width 200ms ease-in-out;
+}
+
+.subline {
+  position: relative;
+  top: -2px;
+  font-size: 18px;
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+
+  @media (max-width: 1024px) {
+    display: none;
+  }
+}
+
+.logo.small {
+  .subline {
+    opacity: 0.8;
+  }
+  .src {
+    width: 75px;
+  }
+
+  &:hover {
+    padding-left: 30px;
+    &:before {
+      opacity: 1;
+    }
+  }
+}
--- a/radar-app/src/components/Logo/Logo.tsx
+++ b/radar-app/src/components/Logo/Logo.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import styles from "./Logo.module.css";
+
+import { getAppName, getLogoUrl } from "@/lib/data";
+import { cn } from "@/lib/utils";
+
+export function Logo() {
+  const pathname = usePathname();
+  const appName = getAppName();
+  const logoUrl = getLogoUrl();
+
+  return (
+    <Link href="/" className={cn(styles.logo, pathname != "/" && styles.small)}>
+      <img src={logoUrl} className={cn(styles.src)} alt={appName} />
+      <span className={styles.subline}>{appName}</span>
+    </Link>
+  );
+}
--- a/radar-app/src/components/Navigation/Navigation.module.css
+++ b/radar-app/src/components/Navigation/Navigation.module.css
@@ -0,0 +1,20 @@
+.list {
+  list-style: none;
+  display: flex;
+  gap: 16px;
+  font-size: 14px;
+}
+
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: 22px;
+  margin: 0 6px 0 0;
+  fill: var(--highlight);
+}
+
+@media (max-width: 900px) {
+  .label {
+    display: none;
+  }
+}
--- a/radar-app/src/components/Navigation/Navigation.tsx
+++ b/radar-app/src/components/Navigation/Navigation.tsx
@@ -0,0 +1,37 @@
+import Link from "next/link";
+
+import styles from "./Navigation.module.css";
+
+import IconOverview from "@/components/Icons/Overview";
+import IconQuestion from "@/components/Icons/Question";
+import IconSearch from "@/components/Icons/Search";
+import { getLabel, getToggle } from "@/lib/data";
+
+export function Navigation() {
+  return (
+    <nav className={styles.nav}>
+      <ul className={styles.list}>
+        <li className={styles.item}>
+          <Link href="/help-and-about-tech-radar">
+            <IconQuestion className={styles.icon} />
+            <span className={styles.label}>{getLabel("pageAbout")}</span>
+          </Link>
+        </li>
+        <li className={styles.item}>
+          <Link href="/overview">
+            <IconOverview className={styles.icon} />
+            <span className={styles.label}>{getLabel("pageOverview")}</span>
+          </Link>
+        </li>
+        {getToggle("showSearch") && (
+          <li className={styles.item}>
+            <Link href="/overview">
+              <IconSearch className={styles.icon} />
+              <span className={styles.label}>{getLabel("pageSearch")}</span>
+            </Link>
+          </li>
+        )}
+      </ul>
+    </nav>
+  );
+}
--- a/radar-app/src/components/QuadrantLink/QuadrantLink.module.css
+++ b/radar-app/src/components/QuadrantLink/QuadrantLink.module.css
@@ -0,0 +1,20 @@
+.link {
+  text-transform: uppercase;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.icon {
+  fill: var(--highlight);
+  display: inline-block;
+  vertical-align: middle;
+  margin: -2px 6px 0 0;
+  width: 16px;
+  height: 16px;
+}
+
+.link:hover {
+  .label {
+    text-decoration: underline;
+  }
+}
--- a/radar-app/src/components/QuadrantLink/QuadrantLink.tsx
+++ b/radar-app/src/components/QuadrantLink/QuadrantLink.tsx
@@ -0,0 +1,26 @@
+import Link from "next/link";
+
+import styles from "./QuadrantLink.module.css";
+
+import Pie from "@/components/Icons/Pie";
+import { getLabel } from "@/lib/data";
+import { Quadrant } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+interface QuadrantLinkProps {
+  quadrant: Quadrant;
+  label?: string;
+  className?: string;
+}
+export function QuadrantLink({
+  quadrant,
+  label = getLabel("zoomIn"),
+  className,
+}: QuadrantLinkProps) {
+  return (
+    <Link className={cn(styles.link, className)} href={`/${quadrant.id}`}>
+      <Pie className={styles.icon} />
+      <span className={styles.label}>{label}</span>
+    </Link>
+  );
+}
--- a/radar-app/src/components/QuadrantList/QuadrantList.module.css
+++ b/radar-app/src/components/QuadrantList/QuadrantList.module.css
@@ -0,0 +1,38 @@
+.quadrants {
+  --cols: 1;
+  --gap: 60px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+}
+
+.quadrant {
+  margin-bottom: 20px;
+  flex: 1 0
+    calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  margin-bottom: 20px;
+  border-bottom: 1px solid var(--border);
+}
+
+.title {
+  margin: 0;
+}
+
+.link {
+}
+
+@media (min-width: 1220px) {
+  .quadrants {
+    --cols: 2;
+  }
+}
--- a/radar-app/src/components/QuadrantList/QuadrantList.tsx
+++ b/radar-app/src/components/QuadrantList/QuadrantList.tsx
@@ -0,0 +1,35 @@
+import Link from "next/link";
+
+import styles from "./QuadrantList.module.css";
+
+import { QuadrantLink } from "@/components/QuadrantLink/QuadrantLink";
+import { RingList } from "@/components/RingList/RingList";
+import { getQuadrant, groupItemsByQuadrant } from "@/lib/data";
+import { Item } from "@/lib/types";
+
+interface RingListProps {
+  items: Item[];
+}
+
+export function QuadrantList({ items }: RingListProps) {
+  const quadrants = groupItemsByQuadrant(items);
+  return (
+    <ul className={styles.quadrants}>
+      {Object.entries(quadrants).map(([quadrantId, items]) => {
+        const quadrant = getQuadrant(quadrantId);
+        if (!quadrant) return null;
+        return (
+          <li key={quadrantId} className={styles.quadrant}>
+            <div className={styles.header}>
+              <h3 className={styles.title}>
+                <Link href={`/${quadrant.id}`}>{quadrant.title}</Link>
+              </h3>
+              <QuadrantLink quadrant={quadrant} />
+            </div>
+            <RingList items={items} size="small" />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
--- a/radar-app/src/components/Radar/Blip.tsx
+++ b/radar-app/src/components/Radar/Blip.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+
+import { getChartConfig } from "@/lib/data";
+import { Flag } from "@/lib/types";
+
+const { blipSize } = getChartConfig();
+const halfBlipSize = blipSize / 2;
+
+interface BlipProps {
+  color: string;
+  x: number;
+  y: number;
+}
+
+export function Blip({ flag, color, x, y }: BlipProps & { flag: Flag }) {
+  switch (flag) {
+    case Flag.New:
+      return <BlipNew x={x} y={y} color={color} />;
+    case Flag.Changed:
+      return <BlipChanged x={x} y={y} color={color} />;
+    default:
+      return <BlipDefault x={x} y={y} color={color} />;
+  }
+}
+
+function BlipNew({ x, y, color }: BlipProps) {
+  x = Math.round(x - halfBlipSize);
+  y = Math.round(y - halfBlipSize);
+  return (
+    <path
+      stroke="none"
+      fill={color}
+      d="M5.7679491924311 2.1387840678323a2 2 0 0 1 3.4641016151378 0l5.0358983848622 8.7224318643355a2 2 0 0 1 -1.7320508075689 3l-10.071796769724 0a2 2 0 0 1 -1.7320508075689 -3"
+      transform={`translate(${x},${y})`}
+    />
+  );
+}
+
+function BlipChanged({ x, y, color }: BlipProps) {
+  x = Math.round(x - halfBlipSize);
+  y = Math.round(y - halfBlipSize);
+  return (
+    <rect
+      transform={`rotate(-45 ${x} ${y})`}
+      x={x}
+      y={y}
+      width={blipSize}
+      height={blipSize}
+      rx="3"
+      stroke="none"
+      fill={color}
+    />
+  );
+}
+
+function BlipDefault({ x, y, color }: BlipProps) {
+  return <circle cx={x} cy={y} r={halfBlipSize} stroke="none" fill={color} />;
+}
--- a/radar-app/src/components/Radar/Chart.module.css
+++ b/radar-app/src/components/Radar/Chart.module.css
@@ -0,0 +1,9 @@
+.ringLabels {
+  text-transform: uppercase;
+}
+
+@media (max-width: 767px) {
+  .ringLabels {
+    display: none;
+  }
+}
--- a/radar-app/src/components/Radar/Chart.tsx
+++ b/radar-app/src/components/Radar/Chart.tsx
@@ -0,0 +1,163 @@
+import Link from "next/link";
+import React, { FC, Fragment, memo } from "react";
+
+import styles from "./Chart.module.css";
+
+import { Blip } from "@/components/Radar/Blip";
+import { Item, Quadrant, Ring } from "@/lib/types";
+
+export interface ChartProps {
+  size?: number;
+  quadrants: Quadrant[];
+  rings: Ring[];
+  items: Item[];
+  className?: string;
+}
+
+const _Chart: FC<ChartProps> = ({
+  size = 800,
+  quadrants = [],
+  rings = [],
+  items = [],
+  className,
+}) => {
+  const viewBoxSize = size;
+  const center = size / 2;
+  const startAngles = [270, 0, 180, 90]; // Corresponding to positions 1, 2, 3, and 4 respectively
+
+  // Helper function to convert polar coordinates to cartesian
+  const polarToCartesian = (
+    radius: number,
+    angleInDegrees: number,
+  ): { x: number; y: number } => {
+    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+    return {
+      x: Math.round(center + radius * Math.cos(angleInRadians)),
+      y: Math.round(center + radius * Math.sin(angleInRadians)),
+    };
+  };
+
+  // Function to generate the path for a ring segment
+  const describeArc = (radiusPercentage: number, position: number): string => {
+    // Define the start and end angles based on the quadrant position
+    const startAngle = startAngles[position - 1];
+    const endAngle = startAngle + 90;
+
+    const radius = radiusPercentage * center; // Convert percentage to actual radius
+    const start = polarToCartesian(radius, endAngle);
+    const end = polarToCartesian(radius, startAngle);
+
+    // prettier-ignore
+    return [
+      "M", start.x, start.y,
+      "A", radius, radius, 0, 0, 0, end.x, end.y,
+    ].join(" ");
+  };
+
+  const renderGlow = (position: number, color: string) => {
+    const gradientId = `glow-${position}`;
+
+    const cx = position === 1 || position === 3 ? 1 : 0;
+    const cy = position === 1 || position === 2 ? 1 : 0;
+
+    const x = position === 1 || position === 3 ? 0 : center;
+    const y = position === 1 || position === 2 ? 0 : center;
+    return (
+      <>
+        <defs>
+          <radialGradient id={gradientId} x={0} y={0} r={1} cx={cx} cy={cy}>
+            <stop offset="0%" stopColor={color} stopOpacity={0.5}></stop>
+            <stop offset="100%" stopColor={color} stopOpacity={0}></stop>
+          </radialGradient>
+        </defs>
+        <rect
+          width={center}
+          height={center}
+          x={x}
+          y={y}
+          fill={`url(#${gradientId})`}
+        />
+      </>
+    );
+  };
+
+  // Function to place items inside their rings and quadrants
+  const renderItem = (item: Item) => {
+    const ring = rings.find((r) => r.id === item.ring);
+    const quadrant = quadrants.find((q) => q.id === item.quadrant);
+    if (!ring || !quadrant) return null; // If no ring or quadrant, don't render item
+    const [x, y] = item.position;
+
+    return (
+      <Link
+        key={item.id}
+        href={`/${item.quadrant}/${item.id}`}
+        data-tooltip={item.title}
+        data-tooltip-color={quadrant.color}
+        tabIndex={-1}
+      >
+        <Blip flag={item.flag} color={quadrant.color} x={x} y={y} />
+      </Link>
+    );
+  };
+
+  const renderRingLabels = () => {
+    return rings.map((ring, index) => {
+      const outerRadius = ring.radius || 1;
+      const innerRadius = rings[index - 1]?.radius || 0;
+      const position = ((outerRadius + innerRadius) / 2) * center;
+
+      return (
+        <Fragment key={ring.id}>
+          <text
+            x={center + position}
+            y={center}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fontSize="12"
+          >
+            {ring.title}
+          </text>
+          <text
+            x={center - position}
+            y={center}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fontSize="12"
+          >
+            {ring.title}
+          </text>
+        </Fragment>
+      );
+    });
+  };
+
+  return (
+    <svg
+      className={className}
+      width={viewBoxSize}
+      height={viewBoxSize}
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+    >
+      {quadrants.map((quadrant) => (
+        <g key={quadrant.id} data-quadrant={quadrant.id}>
+          {renderGlow(quadrant.position, quadrant.color)}
+          {rings.map((ring) => (
+            <path
+              key={`${ring.id}-${quadrant.id}`}
+              data-key={`${ring.id}-${quadrant.id}`}
+              d={describeArc(ring.radius || 0.5, quadrant.position)}
+              fill="none"
+              stroke={quadrant.color}
+              strokeWidth={ring.strokeWidth || 2}
+            />
+          ))}
+        </g>
+      ))}
+      <g className={styles.items}>{items.map((item) => renderItem(item))}</g>
+      <g className={styles.ringLabels}>{renderRingLabels()}</g>
+    </svg>
+  );
+};
+
+export const Chart = memo(_Chart);
--- a/radar-app/src/components/Radar/Label.module.css
+++ b/radar-app/src/components/Radar/Label.module.css
@@ -0,0 +1,37 @@
+.label {
+  width: 240px;
+  min-height: 210px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  margin: 0 0 15px;
+  border-bottom: 2px solid var(--quadrant-color);
+  text-transform: uppercase;
+  font-size: 12px;
+}
+
+.title {
+  margin: 0 0 10px;
+}
+
+.description {
+  font-size: 14px;
+}
+
+.position-2,
+.position-4 {
+  left: auto;
+  right: 0;
+}
+
+.position-3,
+.position-4 {
+  top: auto;
+  bottom: 0;
+}
--- a/radar-app/src/components/Radar/Label.tsx
+++ b/radar-app/src/components/Radar/Label.tsx
@@ -0,0 +1,36 @@
+import Link from "next/link";
+import { CSSProperties, useMemo } from "react";
+
+import styles from "./Label.module.css";
+
+import { QuadrantLink } from "@/components/QuadrantLink/QuadrantLink";
+import { getLabel } from "@/lib/data";
+import { Quadrant } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+interface LabelProps {
+  quadrant: Quadrant;
+}
+
+export function Label({ quadrant }: LabelProps) {
+  const style = useMemo(
+    () => ({ "--quadrant-color": quadrant.color }) as CSSProperties,
+    [quadrant.color],
+  );
+
+  return (
+    <div
+      className={cn(styles.label, styles[`position-${quadrant.position}`])}
+      style={style}
+    >
+      <div className={styles.header}>
+        <span>
+          {getLabel("quadrant")} {quadrant.position}
+        </span>
+        <QuadrantLink quadrant={quadrant} />
+      </div>
+      <h3 className={styles.title}>{quadrant.title}</h3>
+      <p className={styles.description}>{quadrant.description}</p>
+    </div>
+  );
+}
--- a/radar-app/src/components/Radar/Legend.module.css
+++ b/radar-app/src/components/Radar/Legend.module.css
@@ -0,0 +1,35 @@
+.legend {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+  display: none;
+}
+
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: 16px;
+  height: 16px;
+  margin: -2px 8px 0 0;
+}
+
+@media (min-width: 768px) {
+  .legend {
+    display: block;
+    position: absolute;
+    left: 50%;
+    bottom: 50px;
+    transform: translateX(-50%);
+  }
+}
+
+@media (min-width: 1200px) {
+  .legend {
+    bottom: auto;
+    left: auto;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
--- a/radar-app/src/components/Radar/Legend.tsx
+++ b/radar-app/src/components/Radar/Legend.tsx
@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef } from "react";
+
+import styles from "./Legend.module.css";
+
+import BlipChanged from "@/components/Icons/BlipChanged";
+import BlipDefault from "@/components/Icons/BlipDefault";
+import BlipNew from "@/components/Icons/BlipNew";
+import { getFlags } from "@/lib/data";
+import { Flag } from "@/lib/types";
+
+function Icon({
+  flag,
+  ...props
+}: { flag: Flag } & ComponentPropsWithoutRef<"svg">) {
+  switch (flag) {
+    case Flag.New:
+      return <BlipNew {...props} />;
+    case Flag.Changed:
+      return <BlipChanged {...props} />;
+    case Flag.Default:
+      return <BlipDefault {...props} />;
+  }
+}
+
+export function Legend() {
+  return (
+    <ul className={styles.legend}>
+      {Object.entries(getFlags()).map(([key, flag]) => (
+        <li key={key}>
+          <Icon flag={key as Flag} className={styles.icon} />
+          <span className={styles.label}>{flag.description}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
--- a/radar-app/src/components/Radar/Radar.module.css
+++ b/radar-app/src/components/Radar/Radar.module.css
@@ -0,0 +1,74 @@
+.radar {
+  padding: 0 15px 30px;
+  position: relative;
+  transition: padding 200ms ease-in-out;
+}
+
+.chart {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  fill: currentColor;
+}
+
+.tooltip {
+  background-color: var(--tooltip, var(--background));
+  color: var(--foreground);
+  font-size: 14px;
+  padding: 4px 8px;
+  height: fit-content;
+  width: fit-content;
+  border-radius: 6px;
+  position: absolute;
+  text-align: center;
+  opacity: 0;
+  transform: translate(-50%, -90%) scale(0.7);
+  transform-origin: 50% 100%;
+  transition:
+    all 100ms ease-in-out,
+    left 0ms,
+    top 0ms;
+  box-shadow:
+    0 4px 14px 0 rgba(0, 0, 0, 0.2),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+  pointer-events: none;
+  z-index: 1;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    z-index: 2;
+    bottom: -1px;
+    left: 50%;
+    margin-left: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid var(--tooltip, var(--background));
+    transition: bottom 100ms ease-in-out;
+  }
+
+  &.isShown {
+    opacity: 1;
+    transform: translate(-50%, -130%) scale(1);
+
+    &:before {
+      bottom: -7px;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .labels {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1200px) {
+  .radar {
+    padding: 150px 15px;
+  }
+}
--- a/radar-app/src/components/Radar/Radar.tsx
+++ b/radar-app/src/components/Radar/Radar.tsx
@@ -0,0 +1,111 @@
+import React, {
+  CSSProperties,
+  FC,
+  MouseEvent,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import styles from "./Radar.module.css";
+
+import { Chart } from "@/components/Radar/Chart";
+import { Label } from "@/components/Radar/Label";
+import { Legend } from "@/components/Radar/Legend";
+import { Item, Quadrant, Ring } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+export interface RadarProps {
+  size?: number;
+  quadrants: Quadrant[];
+  rings: Ring[];
+  items: Item[];
+}
+
+export const Radar: FC<RadarProps> = ({
+  size = 800,
+  quadrants = [],
+  rings = [],
+  items = [],
+}) => {
+  const radarRef = useRef<HTMLDivElement>(null);
+  const [tooltip, setTooltip] = useState({
+    show: false,
+    text: "",
+    color: "",
+    x: 0,
+    y: 0,
+  });
+
+  const tooltipStyle = useMemo(
+    () =>
+      ({
+        left: tooltip.x,
+        top: tooltip.y,
+        ...(tooltip.color ? { "--tooltip": tooltip.color } : undefined),
+      }) as CSSProperties,
+    [tooltip],
+  );
+
+  const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
+    const link =
+      e.target instanceof Element && e.target.closest("a[data-tooltip]");
+    if (link) {
+      const text = link.getAttribute("data-tooltip") || "";
+      const color = link.getAttribute("data-tooltip-color") || "";
+      const linkRect = link.getBoundingClientRect();
+      const radarRect = radarRef.current!.getBoundingClientRect();
+
+      // Adjusting tooltip position to be relative to the radar container
+      const x = linkRect.left - radarRect.left + linkRect.width / 2;
+      const y = linkRect.top - radarRect.top;
+
+      setTooltip({
+        text,
+        color,
+        show: !!text,
+        x,
+        y,
+      });
+    } else {
+      if (tooltip.show) {
+        setTooltip({ ...tooltip, show: false });
+      }
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setTooltip({ ...tooltip, show: false });
+  };
+
+  return (
+    <div
+      ref={radarRef}
+      className={styles.radar}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+    >
+      <Chart
+        className={styles.chart}
+        size={size}
+        quadrants={quadrants}
+        rings={rings}
+        items={items}
+      />
+      <div className={styles.labels}>
+        {quadrants.map((quadrant) => (
+          <Label key={quadrant.id} quadrant={quadrant} />
+        ))}
+      </div>
+      <Legend />
+      <span
+        className={cn(styles.tooltip, tooltip.show && styles.isShown)}
+        style={tooltipStyle}
+      >
+        {tooltip.text}
+      </span>
+    </div>
+  );
+};
+
+export default Radar;
--- a/radar-app/src/components/RingList/RingList.module.css
+++ b/radar-app/src/components/RingList/RingList.module.css
@@ -0,0 +1,38 @@
+.rings {
+  --cols: 1;
+  --gap: 30px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+}
+
+.ring {
+  margin-bottom: 20px;
+  flex: 1 0
+    calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
+}
+
+.badge {
+  margin-bottom: 20px;
+}
+
+@media (min-width: 480px) {
+  .rings {
+    --cols: 2;
+  }
+}
+
+@media (min-width: 768px) {
+  .rings.isSmall {
+    --cols: 4;
+  }
+}
+
+@media (min-width: 1024px) {
+  .rings {
+    --cols: 4;
+  }
+}
--- a/radar-app/src/components/RingList/RingList.tsx
+++ b/radar-app/src/components/RingList/RingList.tsx
@@ -0,0 +1,27 @@
+import styles from "./RingList.module.css";
+
+import { RingBadge } from "@/components/Badge/Badge";
+import { ItemList, ItemListProps } from "@/components/ItemList/ItemList";
+import { groupItemsByRing } from "@/lib/data";
+import { Item } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+interface RingListProps {
+  items: Item[];
+  size?: ItemListProps["size"];
+}
+export function RingList({ items, size }: RingListProps) {
+  const rings = groupItemsByRing(items);
+  return (
+    <ul className={cn(styles.rings, { [styles.isSmall]: size == "small" })}>
+      {Object.entries(rings).map(([ring, items]) => {
+        return (
+          <li key={ring} className={styles.ring}>
+            <RingBadge className={styles.badge} ring={ring} />
+            <ItemList className={styles.list} items={items} size={size} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
--- a/radar-app/src/components/SocialLinks/SocialLinks.module.css
+++ b/radar-app/src/components/SocialLinks/SocialLinks.module.css
@@ -0,0 +1,29 @@
+.links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  list-style: none;
+  padding: 0;
+}
+
+.icon {
+  fill: var(--background);
+  width: 16px;
+  height: 16px;
+}
+
+.link {
+  display: block;
+  border: 1px solid var(--border);
+  background: var(--foreground);
+  padding: 6px;
+  border-radius: 50%;
+
+  &:hover {
+    background: var(--background);
+    .icon {
+      fill: var(--foreground);
+    }
+  }
+}
--- a/radar-app/src/components/SocialLinks/SocialLinks.tsx
+++ b/radar-app/src/components/SocialLinks/SocialLinks.tsx
@@ -0,0 +1,66 @@
+import styles from "./SocialLinks.module.css";
+
+import {
+  SocialFacebook,
+  SocialGithub,
+  SocialGitlab,
+  SocialInstagram,
+  SocialLinkedin,
+  SocialX,
+  SocialXing,
+  SocialYoutube,
+} from "@/components/Icons";
+import { getSocialLinks } from "@/lib/data";
+import { cn } from "@/lib/utils";
+
+interface SocialLinksProps {
+  className?: string;
+}
+
+function getIcon(name: string) {
+  switch (name.toLowerCase()) {
+    case "facebook":
+      return SocialFacebook;
+    case "github":
+      return SocialGithub;
+    case "gitlab":
+      return SocialGitlab;
+    case "instagram":
+      return SocialInstagram;
+    case "linkedin":
+      return SocialLinkedin;
+    case "x":
+      return SocialX;
+    case "xing":
+      return SocialXing;
+    case "youtube":
+      return SocialYoutube;
+    default:
+      return null;
+  }
+}
+
+export function SocialLinks({ className }: SocialLinksProps) {
+  const links = getSocialLinks();
+  return (
+    <ul className={cn(styles.links, className)}>
+      {links.map((link, i) => {
+        const Icon = getIcon(link.icon);
+        return (
+          Icon && (
+            <li key={i}>
+              <a
+                href={link.href}
+                className={styles.link}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Icon className={styles.icon} />
+              </a>
+            </li>
+          )
+        );
+      })}
+    </ul>
+  );
+}
--- a/radar-app/src/components/Tags/Tags.module.css
+++ b/radar-app/src/components/Tags/Tags.module.css
@@ -0,0 +1,43 @@
+.icon {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  margin: -2px 6px 0 -5px;
+}
+
+.tag {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 6px 15px 5px;
+  margin: 6px;
+  text-transform: uppercase;
+  border: 1px solid var(--tag);
+  border-radius: 13px;
+  background: var(--tag);
+  font-size: 14px;
+  line-height: 1;
+  overflow: hidden;
+  text-decoration: none;
+  transition: all 150ms ease-in-out;
+
+  &:hover,
+  &:focus,
+  &.active {
+    background: var(--foreground);
+    color: var(--background);
+  }
+
+  &.active {
+    .icon {
+      transform: scale(0.8);
+    }
+  }
+}
+
+.tags {
+  text-align: center;
+  margin: 0 auto 60px;
+  max-width: 600px;
+}
--- a/radar-app/src/components/Tags/Tags.tsx
+++ b/radar-app/src/components/Tags/Tags.tsx
@@ -0,0 +1,47 @@
+import Link, { LinkProps } from "next/link";
+import { ComponentPropsWithoutRef } from "react";
+
+import styles from "./Tags.module.css";
+
+import IconRemove from "@/components/Icons/Close";
+import IconTag from "@/components/Icons/Tag";
+import { getLabel } from "@/lib/data";
+import { cn } from "@/lib/utils";
+
+type TagProps = {
+  tag: string;
+  isActive?: boolean;
+} & Omit<LinkProps, "href"> &
+  ComponentPropsWithoutRef<"a">;
+
+export function Tag({ tag, isActive, className, ...props }: TagProps) {
+  const Icon = isActive ? IconRemove : IconTag;
+  return (
+    <Link
+      {...props}
+      className={cn(styles.tag, className, isActive && styles.active)}
+      href={isActive ? "/" : `/?tag=${encodeURIComponent(tag)}`}
+    >
+      <Icon className={cn(styles.icon)} />
+      <span className={styles.label}>{tag}</span>
+    </Link>
+  );
+}
+
+interface TagsProps {
+  tags: string[];
+  activeTag?: string;
+  className?: string;
+}
+
+export function Tags({ tags, activeTag, className }: TagsProps) {
+  const label = getLabel("filterByTag");
+  return (
+    <div className={cn(styles.tags, className)}>
+      {!!label && <h3>{label}</h3>}
+      {tags.map((tag) => (
+        <Tag key={tag} tag={tag} isActive={activeTag == tag} scroll={false} />
+      ))}
+    </div>
+  );
+}
--- a/radar-app/src/icons/attention.svg
+++ b/radar-app/src/icons/attention.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M12.8455 5.21137C12.4531 4.59003 11.5469 4.59003 11.1545 5.21137L2.78316 18.466C2.36261 19.1319 2.84109 20 3.62865 20H20.3713C21.1589 20 21.6374 19.1319 21.2168 18.466L12.8455 5.21137ZM9.46353 4.14338C10.6408 2.27935 13.3592 2.27936 14.5365 4.14339L22.9078 17.398C24.1695 19.3956 22.734 22 20.3713 22H3.62865C1.26598 22 -0.169465 19.3956 1.09218 17.398L9.46353 4.14338ZM13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17ZM10.6941 10.1644L11.4178 14.5068C11.4652 14.7914 11.7115 15 12 15C12.2885 15 12.5348 14.7914 12.5822 14.5068L13.3059 10.1644C13.4075 9.55487 12.9375 9 12.3195 9H11.6805C11.0625 9 10.5925 9.55487 10.6941 10.1644Z" fill-rule="evenodd"/></svg>
--- a/radar-app/src/icons/back.svg
+++ b/radar-app/src/icons/back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421" viewBox="0 0 30 21"><path d="M4.012 11.427h24.704a1.134 1.134 0 0 0 0-2.267H3.729l7.224-7.225A1.133 1.133 0 1 0 9.35.332L.332 9.35a1.134 1.134 0 0 0-.106 1.481c.099.182.245.335.423.439l8.701 8.701a1.133 1.133 0 1 0 1.603-1.603l-6.941-6.941Z" style="fill:#fff"/></svg>
--- a/radar-app/src/icons/blip_changed.svg
+++ b/radar-app/src/icons/blip_changed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="12" height="12" x="2" y="2" rx="3" transform="rotate(-45 8 8)"/></svg>
--- a/radar-app/src/icons/blip_default.svg
+++ b/radar-app/src/icons/blip_default.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6"/></svg>
--- a/radar-app/src/icons/blip_new.svg
+++ b/radar-app/src/icons/blip_new.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><path d="m.247 10.212 5.02-8.697a2 2 0 0 1 3.465 0l5.021 8.697a2 2 0 0 1-1.732 3H1.98a2 2 0 0 1-1.732-3z"/></svg>
--- a/radar-app/src/icons/close.svg
+++ b/radar-app/src/icons/close.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="m18.7,1.4l-7.68,7.73L3.35,1.41c-.54-.54-1.4-.54-1.89,0-.54.54-.54,1.41,0,1.89l7.67,7.73-7.73,7.67c-.54.54-.54,1.41,0,1.89.54.54,1.41.54,1.89,0l7.73-7.68,7.68,7.68c.54.54,1.41.54,1.89,0,.49-.54.54-1.41,0-1.89l-7.68-7.68,7.68-7.67c.54-.54.54-1.4,0-1.89-.48-.54-1.35-.54-1.89-.06Z" fill-rule="evenodd" stroke-width="0"/></svg>
--- a/radar-app/src/icons/edit.svg
+++ b/radar-app/src/icons/edit.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" ?>
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+  <path d="m18.988 2.012 3 3L19.701 7.3l-3-3zM8 16h3l7.287-7.287-3-3L8 13z"/>
+  <path
+    d="M19 19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .896-2 2v14c0 1.104.897 2 2 2h14a2 2 0 0 0 2-2v-8.668l-2 2V19z"/>
+</svg>
--- a/radar-app/src/icons/filter.svg
+++ b/radar-app/src/icons/filter.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="m20.31,2.31c-.3-.56-.76-.83-1.4-.83H3.01c-.83,0-1.4.5-1.5,1.3,0,.07.03.2.07.23,2.1,2.4,4.19,4.72,6.32,7.09.1.1.13.2.13.37v6.55c0,.97.47,1.7,1.33,2.13.6.3,1.23.5,1.83.76.5.2.97.4,1.46.56.5.17.97-.07,1.13-.5.07-.17.1-.4.1-.6v-8.88c0-.13.03-.23.13-.33.76-.86,1.56-1.73,2.33-2.59,1.33-1.5,2.7-2.99,4.02-4.49.03-.03.1-.13.1-.2-.07-.2-.07-.4-.17-.56h0Zm-2,.86c-1.66,1.83-3.29,3.66-4.96,5.49-.03.03-.43.43-.93.9v9.21c-.07-.03-.13-.03-.17-.07-.7-.27-1.4-.56-2.1-.83-.43-.17-.63-.5-.63-.97v-7.35c-.47-.47-.86-.83-.9-.86-1.73-1.86-3.39-3.76-5.09-5.62-.03-.03-.07-.07-.1-.13h15.07c-.1.1-.13.17-.2.23h0Z" stroke-width="0"/></svg>
--- a/radar-app/src/icons/overview.svg
+++ b/radar-app/src/icons/overview.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="m5.67,1c-1.45,0-2.67,1.22-2.67,2.67v15.11c0,1.23,1,2.22,2.22,2.22h13.11c.35,0,.67-.32.67-.67V5.67c0-.39-.29-.67-.67-.67-.64,0-1.33-.69-1.33-1.33s.69-1.33,1.33-1.33c.35,0,.67-.31.67-.67s-.31-.67-.67-.67c0,0-12.67,0-12.67,0Zm0,1.33h10.37c-.23.39-.37.85-.37,1.33s.14.94.37,1.33H5.67c-.64,0-1.33-.69-1.33-1.33s.69-1.33,1.33-1.33Zm-1.33,3.63c.39.23.85.37,1.33.37h12v13.33H5.22c-.48,0-.88-.37-.89-.86,0-.01,0-.02,0-.03V5.97h0Zm2.44,2.81c-.37.01-.65.32-.64.69.01.35.29.63.64.64h8.44c.37-.01.65-.32.64-.69-.01-.35-.29-.63-.64-.64H6.78Zm0,3.56c-.37,0-.67.3-.67.67,0,.37.3.67.67.67h8.44c.37,0,.67-.3.67-.67,0-.37-.3-.67-.67-.67H6.78Zm0,3.56c-.37.01-.65.32-.64.69.01.35.29.63.64.64h8.44c.37-.01.65-.32.64-.69-.01-.35-.29-.63-.64-.64H6.78Z" fill-rule="evenodd" stroke-width="0"/></svg>
--- a/radar-app/src/icons/pie.svg
+++ b/radar-app/src/icons/pie.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="m9.71.38h-.64v2.61C4.22,3.32.38,7.36.38,12.29s4.19,9.33,9.33,9.33,8.97-3.84,9.3-8.69h2.61v-.64C21.62,5.72,16.28.38,9.71.38Zm0,19.95c-4.44,0-8.05-3.61-8.05-8.05s3.26-7.69,7.4-8.02v8.66h8.66c-.33,4.14-3.8,7.4-8.02,7.4h0Zm9.33-8.69h-8.69V1.69c5.34.32,9.63,4.61,9.95,9.96,0,0-1.27,0-1.27,0Z" fill-rule="evenodd" stroke-width="0"/></svg>
--- a/radar-app/src/icons/question.svg
+++ b/radar-app/src/icons/question.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="m11,22C4.9,22,0,17,0,11S4.9,0,11,0h0c6,0,11,4.9,11,11s-5,11-11,11Zm0-20.5h0C5.8,1.5,1.5,5.7,1.5,11s4.2,9.5,9.5,9.5,9.5-4.2,9.5-9.5S16.2,1.5,11,1.5" stroke-width="0"/><path d="m11,16.65c-.7,0-1.2-.5-1.2-1.2h0c0-.7.6-1.2,1.2-1.2s1.2.6,1.2,1.2-.5,1.2-1.2,1.2h0Zm2.8-6.9c-.1.2-.3.4-.4.5l-.4.4c-.2.1-.3.3-.4.4l-.3.3c-.2.3-.3.6-.3,1v.7h-1.8v-1c0-.3,0-.6.2-.9.2-.3.4-.6.7-.8l1.1-1.1c.2-.3.4-.6.4-1s-.1-.7-.4-.9c-.3-.2-.6-.4-1-.4s-.7.1-1,.4-.4.6-.5,1h-2c.1-.8.5-1.6,1.1-2.2.7-.5,1.5-.8,2.3-.8s1.6.2,2.3.8c.6.5.9,1.2.9,2.1,0,.5-.2,1-.5,1.5h0Z" fill-rule="evenodd" stroke-width="0"/></svg>
--- a/radar-app/src/icons/search.svg
+++ b/radar-app/src/icons/search.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="m20.6,18.31l-4.01-4.01c2.44-3.37,2.15-8.11-.89-11.14-1.61-1.62-3.81-2.53-6.09-2.52-2.28,0-4.48.91-6.09,2.52-3.36,3.36-3.36,8.82,0,12.18,0,0,0,0,0,0,1.61,1.62,3.81,2.53,6.09,2.52,1.78,0,3.55-.55,5.05-1.64l4.01,4.01c.26.26.61.4.96.4.75,0,1.36-.61,1.36-1.36,0-.36-.14-.71-.4-.96h0Zm-15.73-4.32c-2.62-2.62-2.62-6.87,0-9.49,1.26-1.26,2.96-1.97,4.74-1.97,1.79,0,3.48.7,4.74,1.97,2.62,2.62,2.62,6.87,0,9.49-1.26,1.26-2.96,1.97-4.74,1.97-1.78,0-3.49-.7-4.74-1.97Z" fill-rule="evenodd" stroke-width="0"/></svg>
--- a/radar-app/src/icons/social-facebook.svg
+++ b/radar-app/src/icons/social-facebook.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z" />
+</svg>
--- a/radar-app/src/icons/social-github.svg
+++ b/radar-app/src/icons/social-github.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
+</svg>
--- a/radar-app/src/icons/social-gitlab.svg
+++ b/radar-app/src/icons/social-gitlab.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+  <g id="b">
+    <path
+      d="M487.75,200.06l-.7-1.78L419.55,22.09c-1.37-3.45-3.81-6.38-6.95-8.37-6.44-4-14.69-3.55-20.66,1.11-2.88,2.34-4.98,5.52-5.99,9.09l-45.58,139.46h-184.58L110.2,23.93c-.99-3.59-3.09-6.78-5.99-9.12-5.97-4.66-14.22-5.11-20.66-1.11-3.13,1.99-5.56,4.92-6.95,8.37L8.96,198.18l-.67,1.78c-19.96,52.17-3.01,111.25,41.58,144.89l.23.18.62.44,102.84,77.01,50.88,38.51,30.99,23.4c7.45,5.66,17.76,5.66,25.21,0l30.99-23.4,50.88-38.51,103.46-77.48.26-.21c44.49-33.64,61.41-92.62,41.53-144.73Z" stroke-width="0"/>
+  </g>
+</svg>
--- a/radar-app/src/icons/social-instagram.svg
+++ b/radar-app/src/icons/social-instagram.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
+</svg>
--- a/radar-app/src/icons/social-linkedin.svg
+++ b/radar-app/src/icons/social-linkedin.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z" />
+</svg>
--- a/radar-app/src/icons/social-x.svg
+++ b/radar-app/src/icons/social-x.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/>
+</svg>
--- a/radar-app/src/icons/social-xing.svg
+++ b/radar-app/src/icons/social-xing.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8.3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1.2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z" />
+</svg>
--- a/radar-app/src/icons/social-youtube.svg
+++ b/radar-app/src/icons/social-youtube.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/>
+</svg>
--- a/radar-app/src/icons/tag.svg
+++ b/radar-app/src/icons/tag.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg version="1.1" viewBox="0 0 30 30" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M23,3h-6c-0.512,0-1.024,0.195-1.414,0.586l-12,12c-0.781,0.781-0.781,2.047,0,2.828l8,8c0.781,0.781,2.047,0.781,2.828,0  c0.391-0.391,11.609-11.609,12-12C26.805,14.024,27,13.512,27,13V7C27,4.791,25.209,3,23,3z M23,9c-1.105,0-2-0.895-2-2  c0-1.105,0.895-2,2-2s2,0.895,2,2C25,8.105,24.105,9,23,9z"/></svg>
--- a/radar-app/src/lib/config.ts
+++ b/radar-app/src/lib/config.ts
@@ -0,0 +1,31 @@
+import defaultConfig from "../../data/config.default.json";
+import _userConfig from "../../data/config.json";
+
+type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;
+
+type Config = typeof defaultConfig;
+type UserConfig = DeepPartial<typeof defaultConfig>;
+
+const userConfig = _userConfig as UserConfig;
+const config = { ...defaultConfig, ...userConfig } as Config;
+
+if (userConfig.colors)
+  config.colors = { ...defaultConfig.colors, ...userConfig.colors };
+
+if (userConfig.labels)
+  config.labels = { ...defaultConfig.labels, ...userConfig.labels };
+
+if (userConfig.toggles)
+  config.toggles = { ...defaultConfig.toggles, ...userConfig.toggles };
+
+if (userConfig.fuzzySearch)
+  config.fuzzySearch = {
+    ...defaultConfig.fuzzySearch,
+    ...userConfig.fuzzySearch,
+  };
+
+export default config;
--- a/radar-app/src/lib/data.ts
+++ b/radar-app/src/lib/data.ts
@@ -0,0 +1,131 @@
+import data from "../../data/data.json";
+import config from "./config";
+
+import { format } from "@/lib/format";
+import { Flag, Item, Quadrant, Ring } from "@/lib/types";
+import { assetUrl } from "@/lib/utils";
+
+export function getLabel(key: keyof typeof config.labels) {
+  return config.labels[key] || "";
+}
+
+export function getToggle(key: keyof typeof config.toggles) {
+  return config.toggles[key] || false;
+}
+
+export function getSections() {
+  return config.sections;
+}
+
+export function getAppName() {
+  return getLabel("title");
+}
+
+export function getLogoUrl() {
+  return assetUrl(config.logoFile);
+}
+
+export function getJsUrl(): string {
+  if (!config.jsFile) return "";
+  return assetUrl(config.jsFile);
+}
+
+export function getChartConfig() {
+  return config.chart;
+}
+
+export function getColors() {
+  return config.colors;
+}
+
+export function getFlags() {
+  return config.flags;
+}
+
+export function getFlag(flag: Flag) {
+  return config.flags[flag];
+}
+
+export const getFuzzySearchConfig = () => {
+  return config.fuzzySearch;
+};
+
+export function getRings(): Ring[] {
+  return config.rings;
+}
+
+export function getRing(id: string): Ring | undefined {
+  return getRings().find((r) => r.id === id);
+}
+
+export function getReleases(): string[] {
+  return data.releases;
+}
+
+export function getSocialLinks() {
+  return config.social;
+}
+
+export function getTags(): string[] {
+  return data.tags;
+}
+
+export function getEditUrl(props: { id: string; release: string }) {
+  if (!config.editUrl) return "";
+  return format(config.editUrl, props);
+}
+
+export function getQuadrants(): Quadrant[] {
+  return config.quadrants.map((q, i) => ({ ...q, position: i + 1 }));
+}
+
+export function getQuadrant(id: string): Quadrant | undefined {
+  return getQuadrants().find((q) => q.id === id);
+}
+
+export function getItems(quadrant?: string, featured?: boolean): Item[] {
+  return data.items.filter((item) => {
+    if (quadrant && item.quadrant !== quadrant) return false;
+    return !(featured && !item.featured);
+  }) as Item[];
+}
+
+export function getImprintUrl() {
+  return config.imprint;
+}
+
+export function getAbsoluteUrl(path: string = "/") {
+  return `${config.baseUrl}${path}`;
+}
+
+export function getItem(id: string): Item | undefined {
+  return data.items.find((item) => item.id === id) as Item;
+}
+
+export const sortByFeaturedAndTitle = (a: Item, b: Item) =>
+  Number(b.featured) - Number(a.featured) || a.title.localeCompare(b.title);
+
+export const groupItemsByRing = (items: Item[]) => {
+  const showEmptyRings = getToggle("showEmptyRings");
+  return getRings().reduce(
+    (acc, ring) => {
+      const ringItems = items.filter((item) => item.ring === ring.id);
+      if (ringItems.length || showEmptyRings) acc[ring.id] = ringItems;
+      return acc;
+    },
+    {} as { [ringId: string]: Item[] },
+  );
+};
+
+export const groupItemsByQuadrant = (items: Item[]) => {
+  return getQuadrants().reduce(
+    (acc, quadrant) => {
+      const quadrantItems = items.filter(
+        (item) => item.quadrant === quadrant.id,
+      );
+      if (quadrantItems.length) acc[quadrant.id] = quadrantItems;
+      return acc;
+    },
+    {} as { [quadrantId: string]: Item[] },
+  );
+};
--- a/radar-app/src/lib/format.ts
+++ b/radar-app/src/lib/format.ts
@@ -0,0 +1,23 @@
+import { getAppName } from "@/lib/data";
+
+// Replaces placeholders in a string with values from a context object
+// e.g. format("Hello {name}.", {name: "World"}) => "Hello World."
+export function format(text: string, context: Record<string, any>): string {
+  return text.replace(/{(\w+)}/g, (match, key) => {
+    return context[key] || match;
+  });
+}
+
+// Format the title of the page
+export function formatTitle(...title: string[]): string {
+  return [...title, getAppName()].join(" | ");
+}
+
+// Formats a release (2024-02-14) to a date (February 2024)
+export function formatRelease(release: string): string {
+  const date = new Date(release);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    year: "numeric",
+  });
+}
--- a/radar-app/src/lib/types.ts
+++ b/radar-app/src/lib/types.ts
@@ -0,0 +1,45 @@
+export enum Flag {
+  New = "new",
+  Changed = "changed",
+  Default = "default",
+}
+
+export type Release = string;
+
+export interface Revision {
+  release: Release;
+  ring: string;
+  body?: string;
+}
+
+export interface Item {
+  id: string;
+  title: string;
+  info?: string;
+  body: string;
+  featured: boolean;
+  ring: string;
+  quadrant: string;
+  flag: Flag;
+  tags?: string[];
+  release: Release;
+  revisions?: Revision[];
+  position: [x: number, y: number];
+}
+
+export interface Ring {
+  id: string;
+  title: string;
+  description: string;
+  color: string;
+  radius?: number;
+  strokeWidth?: number;
+}
+
+export interface Quadrant {
+  id: string;
+  title: string;
+  description: string;
+  color: string;
+  position: number;
+}
--- a/radar-app/src/lib/utils.ts
+++ b/radar-app/src/lib/utils.ts
@@ -0,0 +1,14 @@
+import { type ClassValue, clsx } from "clsx";
+
+import config from "../../next.config.js";
+
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs);
+}
+
+export function assetUrl(path: string) {
+  if (/^https?:/.test(path)) return path;
+  if (!config.basePath) return path;
+  if (!path.startsWith("/")) path = "/" + path;
+  return `${config.basePath}${path}`;
+}
--- a/radar-app/src/pages/404.tsx
+++ b/radar-app/src/pages/404.tsx
@@ -0,0 +1,22 @@
+import Head from "next/head";
+import Link from "next/link";
+
+import Search from "@/components/Icons/Search";
+import { formatTitle } from "@/lib/format";
+
+export default function Custom404() {
+  return (
+    <>
+      <Head>
+        <title>{formatTitle("404 - Page Not Found")}</title>
+      </Head>
+      <div style={{ textAlign: "center", margin: "0 auto" }}>
+        <Search width={150} style={{ display: "inline-block" }} />
+        <h1>404 - Page Not Found</h1>
+        <p>
+          <Link href="/">Return to homepage</Link>
+        </p>
+      </div>
+    </>
+  );
+}
--- a/radar-app/src/pages/[quadrant]/[id].module.css
+++ b/radar-app/src/pages/[quadrant]/[id].module.css
@@ -0,0 +1,24 @@
+.content {
+  margin-bottom: 60px;
+}
+
+.ringAndQuadrant {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--border);
+}
+
+@media (min-width: 1024px) {
+  .layout {
+    display: flex;
+  }
+  .sidebar {
+    width: 360px;
+    padding: 110px 0 0 60px;
+  }
+  .content {
+    flex: 1;
+  }
+}
--- a/radar-app/src/pages/[quadrant]/[id].tsx
+++ b/radar-app/src/pages/[quadrant]/[id].tsx
@@ -0,0 +1,75 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useMemo } from "react";
+
+import styles from "./[id].module.css";
+
+import { RingBadge } from "@/components/Badge/Badge";
+import { ItemDetail } from "@/components/ItemDetail/ItemDetail";
+import { ItemList } from "@/components/ItemList/ItemList";
+import { QuadrantLink } from "@/components/QuadrantLink/QuadrantLink";
+import {
+  getItem,
+  getItems,
+  getLabel,
+  getQuadrant,
+  sortByFeaturedAndTitle,
+} from "@/lib/data";
+import { formatTitle } from "@/lib/format";
+import { CustomPage } from "@/pages/_app";
+
+const ItemPage: CustomPage = () => {
+  const { query } = useRouter();
+  const quadrant = getQuadrant(query.quadrant as string);
+  const item = getItem(query.id as string);
+
+  const relatedItems = useMemo(() => {
+    return getItems()
+      .filter((i) => i.quadrant === quadrant?.id && i.ring == item?.ring)
+      .sort(sortByFeaturedAndTitle);
+  }, [quadrant?.id, item?.ring]);
+
+  if (!quadrant || !item) return null;
+
+  return (
+    <>
+      <Head>
+        <title>{formatTitle(item.title, quadrant.title)}</title>
+        <meta name="description" content={quadrant.description} />
+      </Head>
+
+      <div className={styles.layout}>
+        <section className={styles.content}>
+          <ItemDetail item={item} />
+        </section>
+        <aside className={styles.sidebar}>
+          <h3>{quadrant.title}</h3>
+          <div className={styles.ringAndQuadrant}>
+            <RingBadge ring={item.ring} />
+            <QuadrantLink
+              quadrant={quadrant}
+              label={getLabel("quadrantOverview")}
+            />
+          </div>
+
+          <ItemList items={relatedItems} activeId={item.id} />
+        </aside>
+      </div>
+    </>
+  );
+};
+
+export default ItemPage;
+
+export const getStaticPaths = async () => {
+  const items = getItems();
+  const paths = items.map((item) => ({
+    params: { quadrant: item.quadrant, id: item.id },
+  }));
+
+  return { paths, fallback: false };
+};
+
+export const getStaticProps = async () => {
+  return { props: {} };
+};
--- a/radar-app/src/pages/[quadrant]/index.tsx
+++ b/radar-app/src/pages/[quadrant]/index.tsx
@@ -0,0 +1,52 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useMemo } from "react";
+
+import { RingList } from "@/components/RingList/RingList";
+import {
+  getItems,
+  getQuadrant,
+  getQuadrants,
+  sortByFeaturedAndTitle,
+} from "@/lib/data";
+import { formatTitle } from "@/lib/format";
+import { CustomPage } from "@/pages/_app";
+
+const QuadrantPage: CustomPage = () => {
+  const { query } = useRouter();
+  const quadrant = getQuadrant(query.quadrant as string);
+  const items = useMemo(
+    () => quadrant?.id && getItems(quadrant.id).sort(sortByFeaturedAndTitle),
+    [quadrant?.id],
+  );
+  if (!quadrant || !items) return null;
+
+  return (
+    <>
+      <Head>
+        <title>{formatTitle(quadrant.title)}</title>
+        <meta name="description" content={quadrant.description} />
+      </Head>
+
+      <h1>{quadrant.title}</h1>
+      <h2>{quadrant.description}</h2>
+
+      <RingList items={items} />
+    </>
+  );
+};
+
+export default QuadrantPage;
+
+export const getStaticPaths = async () => {
+  const quadrants = getQuadrants();
+  const paths = quadrants.map((quadrant) => ({
+    params: { quadrant: quadrant.id },
+  }));
+
+  return { paths, fallback: false };
+};
+
+export const getStaticProps = async () => {
+  return { props: {} };
+};
--- a/radar-app/src/pages/_app.tsx
+++ b/radar-app/src/pages/_app.tsx
@@ -0,0 +1,37 @@
+import { NextPage } from "next";
+import type { AppProps } from "next/app";
+import Head from "next/head";
+import Script from "next/script";
+
+import { Layout, type LayoutClass } from "@/components/Layout/Layout";
+import { getJsUrl } from "@/lib/data";
+import { formatTitle } from "@/lib/format";
+import { assetUrl } from "@/lib/utils";
+import "@/styles/_globals.css";
+import "@/styles/_hljs.css";
+import "@/styles/custom.css";
+
+export type CustomPage<P = {}, IP = P> = NextPage<P, IP> & {
+  layoutClass?: LayoutClass;
+};
+
+type CustomAppProps = AppProps & {
+  Component: CustomPage;
+};
+
+export default function App({ Component, pageProps, router }: CustomAppProps) {
+  const jsUrl = getJsUrl();
+  return (
+    <>
+      <Head>
+        <title>{formatTitle()}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href={assetUrl("/favicon.ico")} />
+      </Head>
+      <Layout layoutClass={Component.layoutClass}>
+        <Component {...pageProps} />
+        {jsUrl && <Script src={jsUrl} />}
+      </Layout>
+    </>
+  );
+}
--- a/radar-app/src/pages/_document.tsx
+++ b/radar-app/src/pages/_document.tsx
@@ -0,0 +1,27 @@
+import { Head, Html, Main, NextScript } from "next/document";
+import { CSSProperties, useMemo } from "react";
+
+import { getColors } from "@/lib/data";
+
+export default function Document() {
+  const style = useMemo(() => {
+    const cssVariables: Record<string, any> = {};
+    const colors = getColors();
+
+    Object.entries(colors).forEach(([key, value]) => {
+      cssVariables[`--${key}`] = value;
+    });
+
+    return cssVariables as CSSProperties;
+  }, []);
+
+  return (
+    <Html lang="en" style={style}>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
--- a/radar-app/src/pages/help-and-about-tech-radar.tsx
+++ b/radar-app/src/pages/help-and-about-tech-radar.tsx
@@ -0,0 +1,20 @@
+import Head from "next/head";
+
+import about from "../../data/about.json";
+
+import { formatTitle } from "@/lib/format";
+import { CustomPage } from "@/pages/_app";
+
+const HelpAndAbout: CustomPage = () => {
+  return (
+    <>
+      <Head>
+        <title>{formatTitle("Help and About")}</title>
+      </Head>
+
+      <div dangerouslySetInnerHTML={{ __html: about.body }} />
+    </>
+  );
+};
+
+export default HelpAndAbout;
--- a/radar-app/src/pages/index.tsx
+++ b/radar-app/src/pages/index.tsx
@@ -0,0 +1,85 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+
+import { QuadrantList } from "@/components/QuadrantList/QuadrantList";
+import { Radar } from "@/components/Radar/Radar";
+import { Tags } from "@/components/Tags/Tags";
+import {
+  getAppName,
+  getChartConfig,
+  getItems,
+  getLabel,
+  getQuadrants,
+  getReleases,
+  getRings,
+  getSections,
+  getTags,
+  getToggle,
+} from "@/lib/data";
+import { CustomPage } from "@/pages/_app";
+
+const Home: CustomPage = () => {
+  const router = useRouter();
+  const tag = router.query.tag as string | undefined;
+  const appName = getAppName();
+  const metaDescription = getLabel("metaDescription");
+  const chartConfig = getChartConfig();
+  const sections = getSections();
+  const version = getReleases().length;
+  const rings = getRings();
+  const quadrants = getQuadrants();
+  const tags = getTags();
+  const items = getItems(undefined, true).filter(
+    (item) => !tag || item.tags?.includes(tag),
+  );
+
+  return (
+    <>
+      <Head>
+        {metaDescription && (
+          <meta name="description" content={metaDescription} />
+        )}
+      </Head>
+
+      <h1>
+        {appName}{" "}
+        <span style={{ color: "var(--highlight)", whiteSpace: "nowrap" }}>
+          Version #{version}
+        </span>
+      </h1>
+      {sections.map((section) => {
+        switch (section) {
+          case "radar":
+            return (
+              getToggle("showChart") && (
+                <Radar
+                  key={section}
+                  size={chartConfig.size}
+                  quadrants={quadrants}
+                  rings={rings}
+                  items={items}
+                />
+              )
+            );
+          case "tags":
+            return (
+              getToggle("showTagFilter") &&
+              tags.length > 0 && (
+                <Tags key={section} tags={tags} activeTag={tag} />
+              )
+            );
+          case "list":
+            return (
+              getToggle("showQuadrantList") && (
+                <QuadrantList key={section} items={items} />
+              )
+            );
+          default:
+            return null;
+        }
+      })}
+    </>
+  );
+};
+
+export default Home;
--- a/radar-app/src/pages/overview.tsx
+++ b/radar-app/src/pages/overview.tsx
@@ -0,0 +1,84 @@
+import Fuse from "fuse.js";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useCallback, useMemo } from "react";
+
+import { Filter } from "@/components/Filter/Filter";
+import { ItemList } from "@/components/ItemList/ItemList";
+import { getItems, getLabel } from "@/lib/data";
+import { getFuzzySearchConfig } from "@/lib/data";
+import { formatTitle } from "@/lib/format";
+import { CustomPage } from "@/pages/_app";
+
+const Overview: CustomPage = () => {
+  const title = getLabel("pageOverview");
+  const router = useRouter();
+  const ring = router.query.ring as string | undefined;
+  const query = (router.query.query as string) || "";
+
+  const onRingChange = useCallback(
+    (ring: string) => {
+      router.push({ query: { ...router.query, ring, query } });
+    },
+    [router, query],
+  );
+
+  const onQueryChange = useCallback(
+    (query: string) => {
+      router.replace({ query: { ...router.query, ring, query } });
+    },
+    [router, ring],
+  );
+
+  const { items, index } = useMemo(() => {
+    const items = getItems().filter((item) => !ring || item.ring === ring);
+    const index = new Fuse(items, {
+      ...getFuzzySearchConfig(),
+      keys: [
+        {
+          name: "title",
+          weight: 1.5,
+        },
+        {
+          name: "tags",
+          weight: 1,
+        },
+        {
+          name: "body",
+          weight: 0.9,
+        },
+        {
+          name: "revision.body",
+          weight: 0.7,
+        },
+      ],
+    });
+
+    return { items, index };
+  }, [ring]);
+
+  const results = useMemo(() => {
+    if (!query) return items;
+    return index.search(query).map((result) => result.item);
+  }, [query, index, items]);
+
+  return (
+    <>
+      <Head>
+        <title>{formatTitle(title)}</title>
+      </Head>
+
+      <h1>{title}</h1>
+      <Filter
+        query={query}
+        ring={ring}
+        onRingChange={onRingChange}
+        onQueryChange={onQueryChange}
+      />
+
+      <ItemList items={results} size="large" hideRing={!!ring} />
+    </>
+  );
+};
+
+export default Overview;
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149.6 64.73"><path d="M25.87,0h-1.77v7.24C10.65,8.15,0,19.35,0,33.02s11.62,25.87,25.87,25.87,24.87-10.65,25.79-24.1h7.24v-1.77C58.89,14.81,44.09,0,25.87,0ZM25.87,55.32c-12.31,0-22.32-10.01-22.32-22.32S12.59,11.67,24.07,10.76v24.01h24.01c-.92,11.48-10.54,20.52-22.24,20.52h0l.03.03ZM51.74,31.22h-24.1V3.63c14.81.89,26.7,12.78,27.59,27.62h-3.52l.03-.03Z" fill="#fff" fill-rule="evenodd" stroke-width="0"/><path d="M78.09,10.41h-6.09v16.5h-1.5V10.41h-6.08v-1.27h13.67v1.27Z" fill="#fff" stroke-width="0"/><path d="M90.78,18.39h-8.31v7.25h9.56v1.27h-11.06V9.14h11v1.27h-9.5v6.71h8.31v1.27Z" fill="#fff" stroke-width="0"/><path d="M107.77,21.37c-.2,1.87-.87,3.3-2.01,4.3-1.13.99-2.65,1.49-4.53,1.49-1.32,0-2.48-.33-3.5-.99-1.01-.66-1.8-1.59-2.35-2.8-.55-1.21-.83-2.59-.84-4.14v-2.31c0-1.58.28-2.98.83-4.2.55-1.22,1.35-2.16,2.39-2.83,1.04-.66,2.23-1,3.58-1,1.9,0,3.41.51,4.51,1.54,1.1,1.03,1.74,2.45,1.92,4.26h-1.51c-.38-3.02-2.01-4.53-4.92-4.53-1.61,0-2.9.6-3.85,1.81s-1.43,2.87-1.43,5v2.17c0,2.05.46,3.69,1.4,4.91.93,1.22,2.19,1.83,3.78,1.83s2.75-.38,3.55-1.13c.8-.75,1.29-1.88,1.48-3.39h1.51Z" fill="#fff" stroke-width="0"/><path d="M124.59,26.91h-1.51v-8.52h-10.16v8.52h-1.5V9.14h1.5v7.98h10.16v-7.98h1.51v17.77Z" fill="#fff" stroke-width="0"/><path d="M71.73,41.62h-2.32v6.29h-4.28v-17.77h6.99c2.11,0,3.76.47,4.94,1.4,1.19.93,1.78,2.26,1.78,3.96,0,1.24-.25,2.26-.75,3.07-.5.81-1.28,1.47-2.35,1.98l3.71,7.18v.18h-4.59l-3.14-6.29ZM69.41,38.33h2.71c.81,0,1.43-.21,1.84-.64.41-.43.62-1.03.62-1.79s-.21-1.37-.62-1.81-1.03-.65-1.83-.65h-2.71v4.9Z" fill="#fff" stroke-width="0"/><path d="M91.53,44.59h-5.87l-1.03,3.32h-4.58l6.52-17.77h4.03l6.57,17.77h-4.6l-1.04-3.32ZM86.69,41.28h3.82l-1.92-6.16-1.9,6.16Z" fill="#fff" stroke-width="0"/><path d="M98.47,47.91v-17.77h5.73c1.57,0,2.98.36,4.24,1.07,1.25.71,2.23,1.72,2.94,3.01s1.06,2.75,1.07,4.36v.82c0,1.63-.34,3.09-1.03,4.38-.69,1.29-1.66,2.3-2.91,3.03-1.25.73-2.64,1.1-4.18,1.1h-5.85ZM102.75,33.44v11.17h1.49c1.23,0,2.17-.44,2.83-1.31.66-.87.99-2.17.99-3.9v-.77c0-1.72-.33-3.01-.99-3.88-.66-.87-1.62-1.31-2.88-1.31h-1.44Z" fill="#fff" stroke-width="0"/><path d="M124.47,44.59h-5.87l-1.03,3.32h-4.58l6.52-17.77h4.03l6.57,17.77h-4.6l-1.04-3.32ZM119.62,41.28h3.82l-1.92-6.16-1.9,6.16Z" fill="#fff" stroke-width="0"/><path d="M138.01,41.62h-2.32v6.29h-4.28v-17.77h7c2.11,0,3.75.47,4.94,1.4,1.19.93,1.78,2.26,1.78,3.96,0,1.24-.25,2.26-.75,3.07-.5.81-1.28,1.47-2.35,1.98l3.71,7.18v.18h-4.59l-3.14-6.29ZM135.69,38.33h2.71c.81,0,1.43-.21,1.84-.64.41-.43.62-1.03.62-1.79s-.21-1.37-.62-1.81c-.41-.44-1.03-.65-1.83-.65h-2.71v4.9Z" fill="#fff" stroke-width="0"/></svg>
				`@@ -0,0 +1 @@`
				<?xml version="1.0" ?><svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M12.8455 5.21137C12.4531 4.59003 11.5469 4.59003 11.1545 5.21137L2.78316 18.466C2.36261 19.1319 2.84109 20 3.62865 20H20.3713C21.1589 20 21.6374 19.1319 21.2168 18.466L12.8455 5.21137ZM9.46353 4.14338C10.6408 2.27935 13.3592 2.27936 14.5365 4.14339L22.9078 17.398C24.1695 19.3956 22.734 22 20.3713 22H3.62865C1.26598 22 -0.169465 19.3956 1.09218 17.398L9.46353 4.14338ZM13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17ZM10.6941 10.1644L11.4178 14.5068C11.4652 14.7914 11.7115 15 12 15C12.2885 15 12.5348 14.7914 12.5822 14.5068L13.3059 10.1644C13.4075 9.55487 12.9375 9 12.3195 9H11.6805C11.0625 9 10.5925 9.55487 10.6941 10.1644Z" fill-rule="evenodd"/></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421" viewBox="0 0 30 21"><path d="M4.012 11.427h24.704a1.134 1.134 0 0 0 0-2.267H3.729l7.224-7.225A1.133 1.133 0 1 0 9.35.332L.332 9.35a1.134 1.134 0 0 0-.106 1.481c.099.182.245.335.423.439l8.701 8.701a1.133 1.133 0 1 0 1.603-1.603l-6.941-6.941Z" style="fill:#fff"/></svg>`
				`@@ -0,0 +1 @@`
				`<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="m18.7,1.4l-7.68,7.73L3.35,1.41c-.54-.54-1.4-.54-1.89,0-.54.54-.54,1.41,0,1.89l7.67,7.73-7.73,7.67c-.54.54-.54,1.41,0,1.89.54.54,1.41.54,1.89,0l7.73-7.68,7.68,7.68c.54.54,1.41.54,1.89,0,.49-.54.54-1.41,0-1.89l-7.68-7.68,7.68-7.67c.54-.54.54-1.4,0-1.89-.48-.54-1.35-.54-1.89-.06Z" fill-rule="evenodd" stroke-width="0"/></svg>`
				`@@ -0,0 +1 @@`
				`<?xml version="1.0" ?><svg version="1.1" viewBox="0 0 30 30" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M23,3h-6c-0.512,0-1.024,0.195-1.414,0.586l-12,12c-0.781,0.781-0.781,2.047,0,2.828l8,8c0.781,0.781,2.047,0.781,2.828,0 c0.391-0.391,11.609-11.609,12-12C26.805,14.024,27,13.512,27,13V7C27,4.791,25.209,3,23,3z M23,9c-1.105,0-2-0.895-2-2 c0-1.105,0.895-2,2-2s2,0.895,2,2C25,8.105,24.105,9,23,9z"/></svg>`