From 63ee16636963320955ce09957d00b1d611d1626b Mon Sep 17 00:00:00 2001
From: Shanidhya01 <luckykumar0011s@gmail.com>
Date: Wed, 10 Jun 2026 10:24:38 +0530
Subject: [PATCH 1/2] feat: implement article details page with related
 articles

---
 web/package-lock.json                         | 1538 +++++++++--------
 web/src/app/articles/[id]/page.tsx            |   70 +
 web/src/app/articles/page.tsx                 |  131 ++
 web/src/app/page.tsx                          |    7 +-
 .../articles/AccessibilityControls.tsx        |  132 ++
 .../articles/ArticleBreadcrumbs.tsx           |   82 +
 .../components/articles/ArticleContent.tsx    |  331 ++++
 web/src/components/articles/ArticleHero.tsx   |   98 ++
 web/src/components/articles/ArticleMeta.tsx   |   66 +
 .../components/articles/ArticlePageClient.tsx |  201 +++
 .../components/articles/GlossaryProvider.tsx  |   72 +
 .../articles/ReadingProgressBar.tsx           |   45 +
 .../components/articles/RelatedArticles.tsx   |  158 ++
 web/src/lib/article-data.ts                   |  416 +++++
 web/src/types/article.ts                      |   89 +
 15 files changed, 2672 insertions(+), 764 deletions(-)
 create mode 100644 web/src/app/articles/[id]/page.tsx
 create mode 100644 web/src/app/articles/page.tsx
 create mode 100644 web/src/components/articles/AccessibilityControls.tsx
 create mode 100644 web/src/components/articles/ArticleBreadcrumbs.tsx
 create mode 100644 web/src/components/articles/ArticleContent.tsx
 create mode 100644 web/src/components/articles/ArticleHero.tsx
 create mode 100644 web/src/components/articles/ArticleMeta.tsx
 create mode 100644 web/src/components/articles/ArticlePageClient.tsx
 create mode 100644 web/src/components/articles/GlossaryProvider.tsx
 create mode 100644 web/src/components/articles/ReadingProgressBar.tsx
 create mode 100644 web/src/components/articles/RelatedArticles.tsx
 create mode 100644 web/src/lib/article-data.ts
 create mode 100644 web/src/types/article.ts

diff --git a/web/package-lock.json b/web/package-lock.json
index 80e05fd1..3fb1742c 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -43,6 +43,7 @@
         "@types/react-dom": "^19",
         "eslint": "^9",
         "eslint-config-next": "16.2.6",
+        "knip": "^5.0.0",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -368,12 +369,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/@babel/core/node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
     "node_modules/@babel/core/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -721,12 +716,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/@babel/plugin-transform-typescript/node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
     "node_modules/@babel/plugin-transform-typescript/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -989,12 +978,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/@babel/preset-typescript/node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
     "node_modules/@babel/runtime": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
@@ -1365,18 +1348,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@dotenvx/dotenvx/node_modules/picomatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/@dotenvx/dotenvx/node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -2914,15 +2885,6 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "license": "ISC"
     },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/zod": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
-      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/@modelcontextprotocol/sdk/node_modules/zod-to-json-schema": {
       "version": "3.25.2",
       "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.25.2.tgz",
@@ -2952,57 +2914,6 @@
         "fast-glob": "3.3.1"
       }
     },
-    "node_modules/@next/eslint-plugin-next/node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@next/eslint-plugin-next/node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -3020,29 +2931,6 @@
         "node": ">=8.6.0"
       }
     },
-    "node_modules/@next/eslint-plugin-next/node_modules/fastq": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
-      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@next/eslint-plugin-next/node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -3056,122 +2944,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/@next/eslint-plugin-next/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/picomatch": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/@next/eslint-plugin-next/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
     "node_modules/@next/swc-darwin-arm64": {
       "version": "16.2.6",
       "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.6.tgz",
@@ -3300,39 +3072,409 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@radix-ui/primitive": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
-      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
-      "license": "MIT"
-    },
-    "node_modules/@radix-ui/react-accessible-icon": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
-      "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-visually-hidden": "1.2.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
       },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
+      "engines": {
+        "node": ">= 8"
       }
     },
-    "node_modules/@radix-ui/react-accordion": {
-      "version": "1.2.12",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
-      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@oxc-resolver/binding-android-arm-eabi": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-android-arm-eabi/-/binding-android-arm-eabi-11.20.0.tgz",
+      "integrity": "sha512-IjfWOXRgJFNdORDl+Uf1aibNgZY2guOD3zmOhx1BGVb/MIiqlFTdmjpQNplSN58lhWehnX4UNqC3QwpUo8pjJg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-android-arm64": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-android-arm64/-/binding-android-arm64-11.20.0.tgz",
+      "integrity": "sha512-QqslZAuFQG8Q9xm7JuIn8JUbvywhSBMVhuQHtYW+auirZJloS41oxUUaBXk7uUhZJgp44c5zQLeVvmFaDQB+2Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-darwin-arm64": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-darwin-arm64/-/binding-darwin-arm64-11.20.0.tgz",
+      "integrity": "sha512-MUcavykj2ewlR+kc5arpg4tC2RvzJkUxWtNv74pf7lcNk00GpIpN43vXMj+j6r4eMmfZhlb8hueKoIb8e9kAGQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-darwin-x64": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-darwin-x64/-/binding-darwin-x64-11.20.0.tgz",
+      "integrity": "sha512-BGB16nRUK5Etiv//ihPyzj8Lj1px0mhh4YIfe0FDf045ywknfSm0GEbiRESpr6Q4K82AvnyaRIhhluHByvS4bg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-freebsd-x64": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-freebsd-x64/-/binding-freebsd-x64-11.20.0.tgz",
+      "integrity": "sha512-JZgtePaqj3qmD5XFHJaSLWzHRxQu0LaPkdoM1KJXYADvAaa83ijXHclV3ej3CueeW0wxfIAbGCZVP45J0CA7uQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-arm-gnueabihf": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-11.20.0.tgz",
+      "integrity": "sha512-hOQ/p3ry3v3SchUBXicrrnszaI/UmYzM4wtS4RGfwgVUX7a+HbyQSzJ5aOzu+o6XZkFkS3ZXN4PZAzhOb77OSg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-arm-musleabihf": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-11.20.0.tgz",
+      "integrity": "sha512-2ArPksaw0AqeuGBfoS715VF+JvJQAhD2niWgjE5hVO+L+nAfikVQopvngCMX9x4BD8itWoQ3dnikrQyl5Ho5Jg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-arm64-gnu": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-11.20.0.tgz",
+      "integrity": "sha512-0bJnmYFp62JdZ4nVMDUZ/C58BCZOCcqgKtnUlp7L9Ojf/czIN+3j72YlLPeWLkzlr6SlYvIQA4SGV/HyO0d+qg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-arm64-musl": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm64-musl/-/binding-linux-arm64-musl-11.20.0.tgz",
+      "integrity": "sha512-wKHHzPKZo7Ufhv/Bt6yxT7FOgnIgW4gwXcJUipkShGp68W3wGVqvr1Sr0fY65lN0Oy6y41+g2kIDvkgZaMMUkw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-ppc64-gnu": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-11.20.0.tgz",
+      "integrity": "sha512-RN8goF7Ie0B79L4i4G6OeBocTgSC56vJbQ65VJje+oXnldVpLnOU7j/AQ/dP94TcCS+Yh6WG8u3Qt4ETteXFNQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-riscv64-gnu": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-11.20.0.tgz",
+      "integrity": "sha512-5l1yU6/xQEqLZRzxqmMxJfWPslpwCmBsdDGaBvABPehxquCXDC7dd7oraNdKSJUMDXSM7VvVj8H2D2FTjU7oWw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-riscv64-musl": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-11.20.0.tgz",
+      "integrity": "sha512-xHEvkbgz6UC+A3JOyDQy76LkUaxsNSfIr3/GV8slwZsnuooJiIB34gzJfsyvR4JdCYNUUPsRJc/w/oWkODu+hg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-s390x-gnu": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-11.20.0.tgz",
+      "integrity": "sha512-aWPDUUmSeyHvlW+SoEUd+JIJsQhVhu6a5tBpDRMu058naPAchTgAVGCFy35zjbnFlt0i8hLWziff6HX0D3LU4g==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-x64-gnu": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-x64-gnu/-/binding-linux-x64-gnu-11.20.0.tgz",
+      "integrity": "sha512-x2YeSimvhJjKLVD8KSu8f/rqU1potcdEMkApIPJqjZWN7c2Fpt4g2X32WDg1p+XDAmyT7nuQGe0vnhvXeLbH+g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-x64-musl": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-x64-musl/-/binding-linux-x64-musl-11.20.0.tgz",
+      "integrity": "sha512-kcRLEIxpZefeYfLChjpgFf3ilBzRDZ+yobMrpRsQlSrxuFGtm3U6PMU7AaEpMqo3NfDGVyJJseAjnRLzMFHjwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-openharmony-arm64": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-openharmony-arm64/-/binding-openharmony-arm64-11.20.0.tgz",
+      "integrity": "sha512-HHcfnApSZGtKhTiHqe8OZruOZe5XuFQH5/E0Yhj3u8fnFvzkM4/k6WjacUf4SvA0SPEAbfbgYmVPuo0VX/fIBQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-wasm32-wasi": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-wasm32-wasi/-/binding-wasm32-wasi-11.20.0.tgz",
+      "integrity": "sha512-Tn0y1XOFYHNfK1wp1Z5QK8Rcld/bsOwRISQXfqAZ5IBpv8Gz1IvV39fUWNprqNdRizgcvFhOzWwFun2zkJsyBg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.10.0",
+        "@emnapi/runtime": "1.10.0",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-resolver/binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@oxc-resolver/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@oxc-resolver/binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@oxc-resolver/binding-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
+      "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@oxc-resolver/binding-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
+      "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@oxc-resolver/binding-win32-arm64-msvc": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-11.20.0.tgz",
+      "integrity": "sha512-qPi25YNPe4YenS8MgsQU2+bIFHxxpLx1LVna2444cEHqNPhNjvWf9zqj4aWE43H9LpAsTmkkAlA3eL5ElBU3mA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-win32-x64-msvc": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-win32-x64-msvc/-/binding-win32-x64-msvc-11.20.0.tgz",
+      "integrity": "sha512-Wb14jWEW8huH6It9F6sXd9vrYmIS7pMrgkU6sxpLxkP+9z+wRgs71hUEhRpcn8FOXAFa27FVWfY2tRpbfTzfLw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
+      "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.3",
@@ -6468,16 +6610,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/@tailwindcss/node/node_modules/jiti": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
-      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jiti": "lib/jiti-cli.mjs"
-      }
-    },
     "node_modules/@tailwindcss/node/node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -7156,6 +7288,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.28.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
@@ -7213,12 +7357,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/browserslist/node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
     "node_modules/browserslist/node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -7565,12 +7703,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/cosmiconfig/node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
     "node_modules/cosmiconfig/node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -8346,19 +8478,6 @@
         "url": "https://opencollective.com/napi-postinstall"
       }
     },
-    "node_modules/eslint-config-next/node_modules/picomatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/eslint-config-next/node_modules/resolve-pkg-maps": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
@@ -11317,16 +11436,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/eslint-plugin-import/node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/eslint-plugin-import/node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -13813,16 +13922,6 @@
         "hermes-estree": "0.25.1"
       }
     },
-    "node_modules/eslint-plugin-react-hooks/node_modules/zod": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
-      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/eslint-plugin-react-hooks/node_modules/zod-validation-error": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
@@ -16150,6 +16249,53 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "license": "MIT"
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fd-package-json": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fd-package-json/-/fd-package-json-2.0.0.tgz",
+      "integrity": "sha512-jKmm9YtsNXN789RS/0mSzOC1NUq9mkVd65vbSSVsKdjGvYXBuE4oWe2QOEoFeRmJg+lPuZxpmrfFclNhoRMneQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "walk-up-path": "^4.0.0"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -16201,6 +16347,18 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -16289,6 +16447,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/formatly": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/formatly/-/formatly-0.3.0.tgz",
+      "integrity": "sha512-9XNj/o4wrRFyhSMJOvsuyMwy8aUfBaZ1VrqHVfohyXf0Sw0e+yfKG+xZaY3arGCOMdwFsqObtzVOc1gU9KiT9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fd-package-json": "^2.0.0"
+      },
+      "bin": {
+        "formatly": "bin/index.mjs"
+      },
+      "engines": {
+        "node": ">=18.3.0"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "12.40.0",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz",
@@ -16458,6 +16632,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -16474,6 +16667,49 @@
         "node": ">=6"
       }
     },
+    "node_modules/knip": {
+      "version": "5.88.1",
+      "resolved": "https://registry.npmjs.org/knip/-/knip-5.88.1.tgz",
+      "integrity": "sha512-tpy5o7zu1MjawVkLPuahymVJekYY3kYjvzcoInhIchgePxTlo+api90tBv2KfhAIe5uXh+mez1tAfmbv8/TiZg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/webpro"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/knip"
+        }
+      ],
+      "license": "ISC",
+      "dependencies": {
+        "@nodelib/fs.walk": "^1.2.3",
+        "fast-glob": "^3.3.3",
+        "formatly": "^0.3.0",
+        "jiti": "^2.6.0",
+        "minimist": "^1.2.8",
+        "oxc-resolver": "^11.19.1",
+        "picocolors": "^1.1.1",
+        "picomatch": "^4.0.1",
+        "smol-toml": "^1.5.2",
+        "strip-json-comments": "5.0.3",
+        "unbash": "^2.2.0",
+        "yaml": "^2.8.2",
+        "zod": "^4.1.11"
+      },
+      "bin": {
+        "knip": "bin/knip.js",
+        "knip-bun": "bin/knip-bun.js"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18",
+        "typescript": ">=5.0.4 <7"
+      }
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -16490,6 +16726,40 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -16528,6 +16798,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/motion-dom": {
       "version": "12.40.0",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz",
@@ -16910,12 +17189,6 @@
       "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
       "license": "MIT"
     },
-    "node_modules/msw/node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
     "node_modules/msw/node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -17197,12 +17470,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/next/node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -17828,6 +18095,55 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/oxc-resolver": {
+      "version": "11.20.0",
+      "resolved": "https://registry.npmjs.org/oxc-resolver/-/oxc-resolver-11.20.0.tgz",
+      "integrity": "sha512-CblytBiV/a/ZXY34dsVU2NxhIOxMXst8CvDCtyBelVITgd7PLrKzbEbA6oKLdPjvDKDzCiW48qzmzZ+mYaqn+g==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxc-resolver/binding-android-arm-eabi": "11.20.0",
+        "@oxc-resolver/binding-android-arm64": "11.20.0",
+        "@oxc-resolver/binding-darwin-arm64": "11.20.0",
+        "@oxc-resolver/binding-darwin-x64": "11.20.0",
+        "@oxc-resolver/binding-freebsd-x64": "11.20.0",
+        "@oxc-resolver/binding-linux-arm-gnueabihf": "11.20.0",
+        "@oxc-resolver/binding-linux-arm-musleabihf": "11.20.0",
+        "@oxc-resolver/binding-linux-arm64-gnu": "11.20.0",
+        "@oxc-resolver/binding-linux-arm64-musl": "11.20.0",
+        "@oxc-resolver/binding-linux-ppc64-gnu": "11.20.0",
+        "@oxc-resolver/binding-linux-riscv64-gnu": "11.20.0",
+        "@oxc-resolver/binding-linux-riscv64-musl": "11.20.0",
+        "@oxc-resolver/binding-linux-s390x-gnu": "11.20.0",
+        "@oxc-resolver/binding-linux-x64-gnu": "11.20.0",
+        "@oxc-resolver/binding-linux-x64-musl": "11.20.0",
+        "@oxc-resolver/binding-openharmony-arm64": "11.20.0",
+        "@oxc-resolver/binding-wasm32-wasi": "11.20.0",
+        "@oxc-resolver/binding-win32-arm64-msvc": "11.20.0",
+        "@oxc-resolver/binding-win32-x64-msvc": "11.20.0"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
@@ -17905,12 +18221,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/postcss/node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
     "node_modules/postcss/node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -17948,6 +18258,26 @@
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
       "license": "MIT"
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/radix-ui": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz",
@@ -18296,6 +18626,39 @@
       "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
       "license": "MIT"
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/shadcn": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/shadcn/-/shadcn-4.10.0.tgz",
@@ -18341,111 +18704,6 @@
         "shadcn": "dist/index.js"
       }
     },
-    "node_modules/shadcn/node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/shadcn/node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/shadcn/node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/shadcn/node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shadcn/node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/shadcn/node_modules/fastq": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
-      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/shadcn/node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shadcn/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/shadcn/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
     "node_modules/shadcn/node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -18458,102 +18716,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/shadcn/node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/shadcn/node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/shadcn/node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/shadcn/node_modules/picomatch": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/shadcn/node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/shadcn/node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/shadcn/node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
     "node_modules/shadcn/node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -18563,18 +18725,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/shadcn/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
     "node_modules/shadcn/node_modules/tsconfig-paths": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
@@ -19148,7 +19298,20 @@
         "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=10"
+      }
+    },
+    "node_modules/smol-toml": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.6.1.tgz",
+      "integrity": "sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyyynthia"
       }
     },
     "node_modules/sonner": {
@@ -19214,6 +19377,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.3.tgz",
+      "integrity": "sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -19266,49 +19442,26 @@
       "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
       "license": "MIT"
     },
-    "node_modules/ts-morph": {
-      "version": "26.0.0",
-      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-26.0.0.tgz",
-      "integrity": "sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==",
-      "license": "MIT",
-      "dependencies": {
-        "@ts-morph/common": "~0.27.0",
-        "code-block-writer": "^13.0.3"
-      }
-    },
-    "node_modules/ts-morph/node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "license": "MIT",
       "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
+        "is-number": "^7.0.0"
       },
       "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/ts-morph/node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
+        "node": ">=8.0"
       }
     },
-    "node_modules/ts-morph/node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+    "node_modules/ts-morph": {
+      "version": "26.0.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-26.0.0.tgz",
+      "integrity": "sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==",
       "license": "MIT",
       "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
+        "@ts-morph/common": "~0.27.0",
+        "code-block-writer": "^13.0.3"
       }
     },
     "node_modules/ts-morph/node_modules/@ts-morph/common": {
@@ -19343,104 +19496,12 @@
         "node": "18 || 20 || >=22"
       }
     },
-    "node_modules/ts-morph/node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/ts-morph/node_modules/code-block-writer": {
       "version": "13.0.3",
       "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.3.tgz",
       "integrity": "sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==",
       "license": "MIT"
     },
-    "node_modules/ts-morph/node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/ts-morph/node_modules/fastq": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
-      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/ts-morph/node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ts-morph/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/ts-morph/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/ts-morph/node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/ts-morph/node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
     "node_modules/ts-morph/node_modules/minimatch": {
       "version": "10.2.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
@@ -19462,83 +19523,6 @@
       "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
       "license": "MIT"
     },
-    "node_modules/ts-morph/node_modules/picomatch": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/ts-morph/node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/ts-morph/node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/ts-morph/node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/ts-morph/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -19892,19 +19876,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/typescript-eslint/node_modules/picomatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/typescript-eslint/node_modules/semver": {
       "version": "7.8.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.2.tgz",
@@ -19948,6 +19919,16 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/unbash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unbash/-/unbash-2.2.0.tgz",
+      "integrity": "sha512-X2wH19RAPZE3+ldGicOkoj/SIA83OIxcJ6Cuaw23hf8Xc6fQpvZXY0SftE2JgS0QhYLUG4uwodSI3R53keyh7w==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
@@ -20187,6 +20168,41 @@
       "engines": {
         "node": ">=12"
       }
+    },
+    "node_modules/walk-up-path": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/walk-up-path/-/walk-up-path-4.0.0.tgz",
+      "integrity": "sha512-3hu+tD8YzSLGuFYtPRb48vdhKMi0KQV5sn+uWr8+7dMEq/2G/dtLrdDinkLjqq5TIbIBjYJ4Ax/n3YiaW7QM8A==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
+      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/web/src/app/articles/[id]/page.tsx b/web/src/app/articles/[id]/page.tsx
new file mode 100644
index 00000000..d5dadfd7
--- /dev/null
+++ b/web/src/app/articles/[id]/page.tsx
@@ -0,0 +1,70 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { getArticleById, getRelatedArticles, articles } from "@/lib/article-data";
+import ArticlePageClient from "@/components/articles/ArticlePageClient";
+
+interface PageProps {
+  params: Promise<{ id: string }>;
+}
+
+// Pre-generate static paths for all known articles at build time
+export async function generateStaticParams() {
+  return articles.map((article) => ({ id: article.id }));
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { id } = await params;
+  const article = getArticleById(id);
+
+  if (!article) {
+    return {
+      title: "Article Not Found | UltimateHealth",
+      description: "The requested article could not be found.",
+    };
+  }
+
+  return {
+    title: `${article.title} | UltimateHealth`,
+    description: article.excerpt,
+    keywords: article.tags.join(", "),
+    authors: [{ name: article.author.name }],
+    openGraph: {
+      title: article.title,
+      description: article.excerpt,
+      type: "article",
+      publishedTime: article.publishedAt,
+      modifiedTime: article.updatedAt,
+      authors: [article.author.name],
+      tags: article.tags,
+      ...(article.imageUrl
+        ? { images: [{ url: article.imageUrl, alt: article.imageAlt }] }
+        : {}),
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: article.title,
+      description: article.excerpt,
+      ...(article.imageUrl ? { images: [article.imageUrl] } : {}),
+    },
+  };
+}
+
+/**
+ * Article detail page.
+ * Resolves the article by [id], generates rich metadata, and delegates
+ * rendering to the client-side ArticlePageClient component.
+ */
+export default async function ArticlePage({ params }: PageProps) {
+  const { id } = await params;
+  const article = getArticleById(id);
+
+  if (!article) {
+    notFound();
+  }
+
+  const relatedArticles = getRelatedArticles(id, 3);
+
+  return (
+    <ArticlePageClient article={article} relatedArticles={relatedArticles} />
+  );
+}
diff --git a/web/src/app/articles/page.tsx b/web/src/app/articles/page.tsx
new file mode 100644
index 00000000..ba3b8e18
--- /dev/null
+++ b/web/src/app/articles/page.tsx
@@ -0,0 +1,131 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { format, parseISO } from "date-fns";
+import { withBasePath } from "@/lib/basePath";
+import { articles } from "@/lib/article-data";
+import type { Article } from "@/types/article";
+
+export const metadata: Metadata = {
+  title: "Health Articles | UltimateHealth",
+  description:
+    "Browse evidence-based health and wellness articles written by medical professionals on UltimateHealth.",
+};
+
+export default function ArticlesPage() {
+  return (
+    <main className="min-h-screen bg-white">
+      {/* ── Header ── */}
+      <header className="border-b border-gray-100">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
+          <Link
+            href={withBasePath("/")}
+            className="font-extrabold text-lg"
+            style={{ background: "linear-gradient(135deg,#667eea,#764ba2)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}
+          >
+            UltimateHealth
+          </Link>
+          <Link
+            href={withBasePath("/medical-glossary")}
+            className="text-sm font-semibold text-slate-600 hover:text-[#667eea] transition-colors"
+          >
+            Medical Glossary
+          </Link>
+        </div>
+      </header>
+
+      {/* ── Hero ── */}
+      <section className="bg-gradient-to-br from-[#667eea] to-[#764ba2] py-16 px-4">
+        <div className="max-w-3xl mx-auto text-center">
+          <p className="text-xs font-bold uppercase tracking-widest text-white/70 mb-3">
+            Health Knowledge Hub
+          </p>
+          <h1 className="text-4xl sm:text-5xl font-extrabold text-white leading-tight mb-4">
+            Health Articles
+          </h1>
+          <p className="text-lg text-white/85 max-w-xl mx-auto">
+            Evidence-based articles written by medical professionals — covering
+            cardiovascular health, nutrition, mental wellness, and more.
+          </p>
+        </div>
+      </section>
+
+      {/* ── Articles grid ── */}
+      <section className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
+        <p className="text-sm text-slate-500 mb-8">
+          {articles.length} articles
+        </p>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {articles.map((article) => (
+            <ArticleCard key={article.id} article={article} />
+          ))}
+        </div>
+      </section>
+
+      {/* ── Footer ── */}
+      <footer className="border-t border-gray-100 py-8 text-center text-sm text-slate-400">
+        <Link href={withBasePath("/")} className="hover:text-[#667eea] transition-colors">
+          ← Back to UltimateHealth
+        </Link>
+      </footer>
+    </main>
+  );
+}
+
+function ArticleCard({ article }: { article: Article }) {
+  const date = format(parseISO(article.publishedAt), "MMM d, yyyy");
+
+  return (
+    <Link
+      href={withBasePath(`/articles/${article.id}`)}
+      className="group flex flex-col bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
+    >
+      {/* Thumbnail / gradient */}
+      <div className="relative aspect-video overflow-hidden bg-gradient-to-br from-[#667eea]/20 to-[#764ba2]/30 flex items-center justify-center">
+        <span className="text-5xl opacity-60" aria-hidden="true">
+          {CATEGORY_ICONS[article.category] ?? "📋"}
+        </span>
+        <span className="absolute top-3 left-3 text-[10px] font-bold uppercase tracking-widest text-white bg-black/35 backdrop-blur-sm px-2.5 py-1 rounded-full">
+          {article.category}
+        </span>
+      </div>
+
+      {/* Body */}
+      <div className="flex flex-col flex-1 p-5">
+        <h2 className="font-bold text-[#1a202c] leading-snug line-clamp-2 mb-2 group-hover:text-[#667eea] transition-colors text-base">
+          {article.title}
+        </h2>
+        <p className="text-sm text-slate-500 line-clamp-2 leading-relaxed flex-1 mb-4">
+          {article.excerpt}
+        </p>
+
+        <div className="flex items-center justify-between text-xs text-slate-400 pt-3 border-t border-gray-50">
+          <div className="flex items-center gap-2">
+            <span
+              className="w-6 h-6 rounded-full flex items-center justify-center text-white font-bold text-[10px]"
+              style={{ background: article.author.avatarColor }}
+            >
+              {article.author.avatarInitials}
+            </span>
+            <span>{article.author.name}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <time dateTime={article.publishedAt}>{date}</time>
+            <span>·</span>
+            <span>{article.readingTime}</span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+const CATEGORY_ICONS: Record<string, string> = {
+  "Cardiovascular Health": "❤️",
+  "Diabetes Management": "🩺",
+  "Mental Health": "🧠",
+  Nutrition: "🥗",
+  "Sleep Health": "😴",
+  Fitness: "🏃",
+  Wellness: "✨",
+};
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 36afad89..89a93449 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -509,10 +509,10 @@ const moveSlider = (ref: RefObject<HTMLDivElement | null>, dir: number) => {
               </a>
             </li>
             <li>
-              <a href="https://uhsocial.in/docs" target="_blank" rel="noreferrer" className="nav-link-item">
+              <Link href={withBasePath("/articles")} className="nav-link-item">
                 <i className="fas fa-file-lines nav-item-icon" aria-hidden="true"></i>
                 <span className="nav-item-text">Read Articles</span>
-              </a>
+              </Link>
             </li>
             <li>
               <Link href={withBasePath("/medical-glossary")} className="nav-link-item">
@@ -543,7 +543,7 @@ const moveSlider = (ref: RefObject<HTMLDivElement | null>, dir: number) => {
           <a href="#screenshots" onClick={() => setMobileMenuOpen(false)}>Screenshots</a>
           <a href="#features" onClick={() => setMobileMenuOpen(false)}>Platform Highlights</a>
           <a href="#programs" onClick={() => setMobileMenuOpen(false)}>Community Programs</a>
-          <a href="https://uhsocial.in/docs" target="_blank" rel="noreferrer">Read Articles</a>
+          <Link href={withBasePath("/articles")} onClick={() => setMobileMenuOpen(false)}>Read Articles</Link>
           <Link href={withBasePath("/medical-glossary")} onClick={() => setMobileMenuOpen(false)}>Medical Glossary</Link>
           <Link href={withBasePath("/contribute")} onClick={() => setMobileMenuOpen(false)}>Join Us to Contribute</Link>
           <a href="#downloads" onClick={() => setMobileMenuOpen(false)}>Login / Register</a>
@@ -926,6 +926,7 @@ const moveSlider = (ref: RefObject<HTMLDivElement | null>, dir: number) => {
             <a href="#programs">Programs</a>
             <a href="#screenshots">Screenshots</a>
             <a href="#contact">Contact</a>
+            <Link href={withBasePath("/articles")}>Health Articles</Link>
             <Link href={withBasePath("/contribute")}>Join Us &amp; Contribute</Link>
           </div>
 
diff --git a/web/src/components/articles/AccessibilityControls.tsx b/web/src/components/articles/AccessibilityControls.tsx
new file mode 100644
index 00000000..026ecefc
--- /dev/null
+++ b/web/src/components/articles/AccessibilityControls.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { useState } from "react";
+
+export type FontSize = "sm" | "md" | "lg";
+
+interface AccessibilityControlsProps {
+  fontSize: FontSize;
+  onFontSizeChange: (size: FontSize) => void;
+}
+
+const FONT_OPTIONS: { value: FontSize; label: string; ariaLabel: string; textClass: string }[] = [
+  { value: "sm", label: "A", ariaLabel: "Small text", textClass: "text-xs" },
+  { value: "md", label: "A", ariaLabel: "Default text size", textClass: "text-sm" },
+  { value: "lg", label: "A", ariaLabel: "Large text", textClass: "text-base" },
+];
+
+/**
+ * Floating accessibility control panel for article reading preferences.
+ *
+ * FUTURE expansion hooks:
+ * - High contrast mode toggle
+ * - Text-to-speech playback controls
+ * - Line spacing adjustment
+ * - Font family switch (serif / sans-serif)
+ * - Bookmark current reading position
+ */
+export default function AccessibilityControls({
+  fontSize,
+  onFontSizeChange,
+}: AccessibilityControlsProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div
+      className="fixed bottom-6 right-6 z-40 flex flex-col items-end gap-2"
+      aria-label="Accessibility settings"
+    >
+      {/* Control panel */}
+      {isOpen && (
+        <div
+          role="dialog"
+          aria-label="Article accessibility options"
+          className="bg-white rounded-2xl shadow-xl border border-gray-100 p-4 w-[220px] animate-in fade-in slide-in-from-bottom-2 duration-200"
+        >
+          {/* Text size */}
+          <div>
+            <p className="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-2">
+              Text Size
+            </p>
+            <div
+              className="flex gap-1.5 items-end"
+              role="group"
+              aria-label="Select text size"
+            >
+              {FONT_OPTIONS.map((opt) => (
+                <button
+                  key={opt.value}
+                  onClick={() => onFontSizeChange(opt.value)}
+                  aria-pressed={fontSize === opt.value}
+                  aria-label={opt.ariaLabel}
+                  className={[
+                    "flex-1 py-2 rounded-xl border-2 font-bold transition-all duration-150",
+                    opt.textClass,
+                    fontSize === opt.value
+                      ? "border-[#667eea] bg-[#667eea]/10 text-[#667eea]"
+                      : "border-gray-200 text-gray-500 hover:border-gray-300",
+                  ].join(" ")}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Divider */}
+          <hr className="my-3 border-gray-100" />
+
+          {/* Future features — placeholders */}
+          <div className="space-y-2">
+            <button
+              disabled
+              title="Coming soon"
+              className="w-full flex items-center gap-2.5 text-left px-1 py-1 rounded text-xs text-gray-400 cursor-not-allowed"
+            >
+              <span aria-hidden="true">🔊</span>
+              <span>Text to Speech</span>
+              <span className="ml-auto text-[10px] bg-gray-100 text-gray-400 px-1.5 py-0.5 rounded">
+                Soon
+              </span>
+            </button>
+            <button
+              disabled
+              title="Coming soon"
+              className="w-full flex items-center gap-2.5 text-left px-1 py-1 rounded text-xs text-gray-400 cursor-not-allowed"
+            >
+              <span aria-hidden="true">🔖</span>
+              <span>Bookmark Article</span>
+              <span className="ml-auto text-[10px] bg-gray-100 text-gray-400 px-1.5 py-0.5 rounded">
+                Soon
+              </span>
+            </button>
+            <button
+              disabled
+              title="Coming soon"
+              className="w-full flex items-center gap-2.5 text-left px-1 py-1 rounded text-xs text-gray-400 cursor-not-allowed"
+            >
+              <span aria-hidden="true">🌙</span>
+              <span>High Contrast</span>
+              <span className="ml-auto text-[10px] bg-gray-100 text-gray-400 px-1.5 py-0.5 rounded">
+                Soon
+              </span>
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Toggle button */}
+      <button
+        onClick={() => setIsOpen((o) => !o)}
+        aria-label={isOpen ? "Close accessibility settings" : "Open accessibility settings"}
+        aria-expanded={isOpen}
+        aria-haspopup="dialog"
+        className="w-12 h-12 bg-white rounded-full shadow-md border border-gray-200 flex items-center justify-center hover:shadow-lg hover:border-[#667eea]/30 transition-all duration-150 focus-visible:ring-2 focus-visible:ring-[#667eea]"
+      >
+        <span className="text-lg" aria-hidden="true">
+          ♿
+        </span>
+      </button>
+    </div>
+  );
+}
diff --git a/web/src/components/articles/ArticleBreadcrumbs.tsx b/web/src/components/articles/ArticleBreadcrumbs.tsx
new file mode 100644
index 00000000..5b30412c
--- /dev/null
+++ b/web/src/components/articles/ArticleBreadcrumbs.tsx
@@ -0,0 +1,82 @@
+import Link from "next/link";
+import { withBasePath } from "@/lib/basePath";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+interface ArticleBreadcrumbsProps {
+  category: string;
+  title: string;
+  /** Optional direct link to category listing page */
+  categoryHref?: string;
+}
+
+/**
+ * Renders accessible breadcrumb navigation and a "Back to Articles" link.
+ * Uses the existing Breadcrumb UI component system for consistency.
+ *
+ * Navigation path: Home > Articles > Category > Article Title
+ */
+export default function ArticleBreadcrumbs({
+  category,
+  title,
+  categoryHref,
+}: ArticleBreadcrumbsProps) {
+  return (
+    <nav aria-label="Page navigation" className="space-y-2">
+      {/* Back link */}
+      <Link
+        href={withBasePath("/articles")}
+        className="inline-flex items-center gap-1.5 text-sm font-medium text-[#667eea] hover:text-[#5568d3] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#667eea] rounded"
+      >
+        <i className="fas fa-arrow-left text-xs" aria-hidden="true" />
+        Back to Articles
+      </Link>
+
+      {/* Breadcrumb trail */}
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href={withBasePath("/")}>Home</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+
+          <BreadcrumbSeparator />
+
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href={withBasePath("/articles")}>Articles</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+
+          <BreadcrumbSeparator />
+
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href={categoryHref ?? withBasePath("/articles")}>
+                {category}
+              </Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+
+          <BreadcrumbSeparator />
+
+          <BreadcrumbItem>
+            <BreadcrumbPage
+              className="max-w-[160px] sm:max-w-[260px] truncate"
+              title={title}
+            >
+              {title}
+            </BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    </nav>
+  );
+}
diff --git a/web/src/components/articles/ArticleContent.tsx b/web/src/components/articles/ArticleContent.tsx
new file mode 100644
index 00000000..fc4afcc2
--- /dev/null
+++ b/web/src/components/articles/ArticleContent.tsx
@@ -0,0 +1,331 @@
+"use client";
+
+import Image from "next/image";
+import type { ReactNode } from "react";
+import type {
+  ContentBlock,
+  CalloutVariant,
+  HeadingLevel,
+  RichContent,
+} from "@/types/article";
+import { GlossaryTooltip } from "@/components/ui/glossary-tooltip";
+import { useGlossary } from "./GlossaryProvider";
+
+// ─── Glossary term highlighting ───────────────────────────────────────────────
+
+/**
+ * Returns true if the string contains HTML tags.
+ * Paragraphs with HTML tags use dangerouslySetInnerHTML; plain text gets
+ * glossary term highlighting injected as React nodes.
+ */
+function hasHtmlTags(str: string): boolean {
+  return /<[a-z][\s\S]*>/i.test(str);
+}
+
+/**
+ * Splits plain text around known glossary terms and wraps each match in a
+ * GlossaryTooltip. Matching is case-insensitive.
+ *
+ * FUTURE: Extend to support fuzzy matching, plural forms, and term stemming.
+ */
+function applyGlossaryHighlighting(
+  text: string,
+  glossary: Map<string, string>
+): ReactNode {
+  if (glossary.size === 0 || !text) return text;
+
+  const keys = [...glossary.keys()];
+  const escaped = keys.map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+  const regex = new RegExp(`(${escaped.join("|")})`, "gi");
+  const parts = text.split(regex);
+
+  if (parts.length === 1) return text;
+
+  return parts.map((part, i) => {
+    const matchedKey = keys.find(
+      (k) => k.toLowerCase() === part.toLowerCase()
+    );
+    if (matchedKey) {
+      return (
+        <GlossaryTooltip
+          key={i}
+          term={matchedKey}
+          definition={glossary.get(matchedKey)!}
+        >
+          {part}
+        </GlossaryTooltip>
+      );
+    }
+    return part;
+  });
+}
+
+// ─── Callout configuration ────────────────────────────────────────────────────
+
+interface CalloutConfig {
+  icon: string;
+  bgClass: string;
+  borderClass: string;
+  iconBgClass: string;
+  titleClass: string;
+  textClass: string;
+}
+
+const CALLOUT_CONFIG: Record<CalloutVariant, CalloutConfig> = {
+  tip: {
+    icon: "💡",
+    bgClass: "bg-emerald-50",
+    borderClass: "border-emerald-200",
+    iconBgClass: "bg-emerald-100",
+    titleClass: "text-emerald-800",
+    textClass: "text-emerald-700",
+  },
+  note: {
+    icon: "📝",
+    bgClass: "bg-blue-50",
+    borderClass: "border-blue-200",
+    iconBgClass: "bg-blue-100",
+    titleClass: "text-blue-800",
+    textClass: "text-blue-700",
+  },
+  warning: {
+    icon: "⚠️",
+    bgClass: "bg-amber-50",
+    borderClass: "border-amber-200",
+    iconBgClass: "bg-amber-100",
+    titleClass: "text-amber-800",
+    textClass: "text-amber-700",
+  },
+  info: {
+    icon: "ℹ️",
+    bgClass: "bg-sky-50",
+    borderClass: "border-sky-200",
+    iconBgClass: "bg-sky-100",
+    titleClass: "text-sky-800",
+    textClass: "text-sky-700",
+  },
+};
+
+// ─── Block renderers ──────────────────────────────────────────────────────────
+
+const HEADING_CLASSES: Record<HeadingLevel, string> = {
+  2: "text-2xl md:text-3xl font-bold text-[#1a202c] mt-12 mb-5 pb-2 border-b border-gray-100 scroll-mt-20",
+  3: "text-xl md:text-2xl font-semibold text-[#2d3748] mt-9 mb-3 scroll-mt-20",
+  4: "text-lg md:text-xl font-semibold text-[#4a5568] mt-7 mb-2 scroll-mt-20",
+};
+
+const HEADING_TAGS: Record<HeadingLevel, "h2" | "h3" | "h4"> = {
+  2: "h2",
+  3: "h3",
+  4: "h4",
+};
+
+interface ArticleContentProps {
+  content: RichContent;
+}
+
+/**
+ * Renders a structured article's rich content blocks into accessible, typographically
+ * optimised HTML. Integrates with GlossaryProvider to auto-highlight known health
+ * terms in plain-text paragraphs with interactive tooltip definitions.
+ *
+ * Supported block types:
+ *   heading | paragraph | image | blockquote | callout | list | divider
+ *
+ * FUTURE integration hooks (no refactor required):
+ *   - Text-to-speech: wrap rendered output in a SpeechProvider
+ *   - AI explanations: wrap callouts or headings with ExplainButton
+ *   - Reading position tracking: add IntersectionObserver per heading block
+ */
+export default function ArticleContent({ content }: ArticleContentProps) {
+  const { terms } = useGlossary();
+
+  if (!content.blocks.length) {
+    return (
+      <p className="text-[#718096] italic text-center py-12">
+        Article content is loading…
+      </p>
+    );
+  }
+
+  return (
+    <section aria-label="Article body">
+      {content.blocks.map((block, index) =>
+        renderBlock(block, index, terms)
+      )}
+    </section>
+  );
+}
+
+function renderBlock(
+  block: ContentBlock,
+  index: number,
+  glossary: Map<string, string>
+): ReactNode {
+  switch (block.type) {
+    case "heading": {
+      const Tag = HEADING_TAGS[block.level];
+      return (
+        <Tag
+          key={index}
+          id={block.id}
+          className={HEADING_CLASSES[block.level]}
+        >
+          {/* Anchor link for direct section linking */}
+          <a
+            href={`#${block.id}`}
+            className="group relative no-underline text-inherit hover:text-[#667eea] transition-colors"
+            aria-label={`Section: ${block.text}`}
+          >
+            {block.text}
+            <span
+              className="absolute -left-6 top-0 bottom-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity text-[#667eea] text-sm"
+              aria-hidden="true"
+            >
+              #
+            </span>
+          </a>
+        </Tag>
+      );
+    }
+
+    case "paragraph": {
+      const isHtml = hasHtmlTags(block.html);
+      return (
+        <p
+          key={index}
+          className="text-[#374151] leading-[1.875] mb-6"
+        >
+          {isHtml ? (
+            /* HTML paragraphs (inline bold, italics, links) are safe — data is controlled */
+            <span dangerouslySetInnerHTML={{ __html: block.html }} />
+          ) : (
+            /* Plain text paragraphs receive glossary term highlighting */
+            applyGlossaryHighlighting(block.html, glossary)
+          )}
+        </p>
+      );
+    }
+
+    case "image": {
+      return (
+        <figure key={index} className="my-10 -mx-4 sm:mx-0">
+          <div className="relative aspect-video overflow-hidden sm:rounded-2xl bg-gray-100 shadow-md">
+            <Image
+              src={block.src}
+              alt={block.alt}
+              fill
+              className="object-cover"
+              loading="lazy"
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 740px, 740px"
+            />
+          </div>
+          {block.caption && (
+            <figcaption className="text-sm text-center text-[#718096] mt-3 px-4 leading-relaxed italic">
+              {block.caption}
+            </figcaption>
+          )}
+        </figure>
+      );
+    }
+
+    case "blockquote": {
+      return (
+        <blockquote
+          key={index}
+          className="relative my-10 pl-6 pr-4 py-5 border-l-4 border-[#667eea] rounded-r-2xl bg-gradient-to-r from-[#667eea]/8 to-[#764ba2]/4"
+        >
+          <p className="text-lg italic text-[#4a5568] leading-relaxed mb-0">
+            &ldquo;{block.text}&rdquo;
+          </p>
+          {block.attribution && (
+            <footer className="mt-3 text-sm text-[#718096] font-medium not-italic">
+              — {block.attribution}
+            </footer>
+          )}
+        </blockquote>
+      );
+    }
+
+    case "callout": {
+      const cfg = CALLOUT_CONFIG[block.variant];
+      return (
+        <aside
+          key={index}
+          role="note"
+          aria-label={`${block.variant}: ${block.title}`}
+          className={[
+            "my-8 rounded-2xl border p-5 flex gap-4",
+            cfg.bgClass,
+            cfg.borderClass,
+          ].join(" ")}
+        >
+          {/* Icon */}
+          <div
+            className={[
+              "w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0 text-lg mt-0.5",
+              cfg.iconBgClass,
+            ].join(" ")}
+            aria-hidden="true"
+          >
+            {cfg.icon}
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <h4 className={`font-bold text-sm mb-1.5 ${cfg.titleClass}`}>
+              {block.title}
+            </h4>
+            <p className={`text-sm leading-relaxed ${cfg.textClass}`}>
+              {block.text}
+            </p>
+          </div>
+        </aside>
+      );
+    }
+
+    case "list": {
+      const isOrdered = block.listType === "ordered";
+      const Wrapper = isOrdered ? "ol" : "ul";
+
+      return (
+        <Wrapper key={index} className="my-6 space-y-3">
+          {block.items.map((item, i) => (
+            <li key={i} className="flex gap-3 items-start text-[#374151] leading-[1.75]">
+              {isOrdered ? (
+                <span
+                  className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold text-[#667eea] bg-[#667eea]/10 flex-shrink-0 mt-0.5"
+                  aria-hidden="true"
+                >
+                  {i + 1}
+                </span>
+              ) : (
+                <span
+                  className="w-2 h-2 rounded-full bg-[#667eea] flex-shrink-0 mt-2.5"
+                  aria-hidden="true"
+                />
+              )}
+              <span
+                className="flex-1"
+                dangerouslySetInnerHTML={{ __html: item }}
+              />
+            </li>
+          ))}
+        </Wrapper>
+      );
+    }
+
+    case "divider": {
+      return (
+        <hr
+          key={index}
+          className="my-14 border-none h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent"
+          aria-hidden="true"
+        />
+      );
+    }
+
+    default:
+      return null;
+  }
+}
diff --git a/web/src/components/articles/ArticleHero.tsx b/web/src/components/articles/ArticleHero.tsx
new file mode 100644
index 00000000..2acde272
--- /dev/null
+++ b/web/src/components/articles/ArticleHero.tsx
@@ -0,0 +1,98 @@
+import Image from "next/image";
+import type { Article } from "@/types/article";
+import ArticleMeta from "./ArticleMeta";
+
+interface ArticleHeroProps {
+  article: Article;
+}
+
+/**
+ * Full-width hero section for an article page.
+ *
+ * Desktop layout:
+ *   [Full-width hero image]
+ *   [Category badge]
+ *   [H1 Title]
+ *   [Subtitle]
+ *   [Author • Date • Reading time]
+ *   [Tags]
+ *
+ * Mobile: Identical structure, stacked vertically with adjusted typography.
+ */
+export default function ArticleHero({ article }: ArticleHeroProps) {
+  return (
+    <header>
+      {/* ── Hero image ── */}
+      <div className="relative w-full overflow-hidden bg-gradient-to-br from-[#667eea] to-[#764ba2] aspect-[16/9] md:aspect-[21/9] md:mx-auto md:max-w-none">
+        {article.imageUrl ? (
+          <Image
+            src={article.imageUrl}
+            alt={article.imageAlt}
+            fill
+            priority
+            sizes="100vw"
+            className="object-cover"
+          />
+        ) : (
+          /* Gradient placeholder when no hero image is provided */
+          <div
+            className="absolute inset-0 flex flex-col items-center justify-center gap-4"
+            aria-hidden="true"
+          >
+            <span className="text-6xl opacity-40">❤️</span>
+          </div>
+        )}
+        {/* Bottom gradient overlay for smooth transition */}
+        <div
+          className="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/20"
+          aria-hidden="true"
+        />
+      </div>
+
+      {/* ── Article metadata ── */}
+      <div className="max-w-[860px] mx-auto px-4 sm:px-6 mt-8 pb-2">
+        {/* Category badge */}
+        <div className="mb-4">
+          <span className="inline-block text-xs font-bold uppercase tracking-widest text-[#667eea] bg-[#667eea]/10 px-3 py-1.5 rounded-full border border-[#667eea]/20">
+            {article.category}
+          </span>
+        </div>
+
+        {/* Title — semantic H1, only one per page */}
+        <h1 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-[#1a202c] leading-[1.15] tracking-tight mb-4">
+          {article.title}
+        </h1>
+
+        {/* Subtitle */}
+        {article.subtitle && (
+          <p className="text-lg sm:text-xl text-[#4a5568] leading-relaxed mb-8 font-light">
+            {article.subtitle}
+          </p>
+        )}
+
+        {/* Author, date, reading time */}
+        <ArticleMeta article={article} />
+
+        {/* Tags */}
+        {article.tags.length > 0 && (
+          <div className="flex flex-wrap gap-2 mt-6" aria-label="Article tags">
+            {article.tags.map((tag) => (
+              <span
+                key={tag}
+                className="text-xs text-[#718096] bg-gray-50 border border-gray-200 px-3 py-1 rounded-full hover:bg-gray-100 transition-colors cursor-default"
+              >
+                #{tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Visual separator */}
+        <div
+          className="mt-10 h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent"
+          aria-hidden="true"
+        />
+      </div>
+    </header>
+  );
+}
diff --git a/web/src/components/articles/ArticleMeta.tsx b/web/src/components/articles/ArticleMeta.tsx
new file mode 100644
index 00000000..0b36fa24
--- /dev/null
+++ b/web/src/components/articles/ArticleMeta.tsx
@@ -0,0 +1,66 @@
+import { format, parseISO } from "date-fns";
+import type { Article } from "@/types/article";
+
+interface ArticleMetaProps {
+  article: Article;
+  className?: string;
+}
+
+/**
+ * Displays author information, publication date, and reading time for an article.
+ * Uses initials-based avatar since user profile images are loaded from the mobile API.
+ */
+export default function ArticleMeta({ article, className = "" }: ArticleMetaProps) {
+  const formattedDate = format(parseISO(article.publishedAt), "MMMM d, yyyy");
+  const updatedDate = article.updatedAt
+    ? format(parseISO(article.updatedAt), "MMMM d, yyyy")
+    : null;
+
+  return (
+    <div
+      className={`flex flex-wrap items-center gap-x-5 gap-y-3 ${className}`}
+    >
+      {/* Author avatar + name/role */}
+      <div className="flex items-center gap-3">
+        <div
+          className="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 select-none"
+          style={{ background: article.author.avatarColor }}
+          aria-hidden="true"
+        >
+          {article.author.avatarInitials}
+        </div>
+        <div className="leading-tight">
+          <p className="text-sm font-semibold text-[#2d3748]">
+            {article.author.name}
+          </p>
+          <p className="text-xs text-[#718096]">{article.author.role}</p>
+        </div>
+      </div>
+
+      {/* Vertical divider (desktop only) */}
+      <div
+        className="hidden sm:block h-8 w-px bg-gray-200 flex-shrink-0"
+        aria-hidden="true"
+      />
+
+      {/* Publication date */}
+      <div className="flex items-center gap-1.5 text-sm text-[#718096]">
+        <i className="fas fa-calendar-alt text-xs" aria-hidden="true" />
+        <time dateTime={article.publishedAt} className="font-medium">
+          {formattedDate}
+        </time>
+        {updatedDate && (
+          <span className="text-xs text-[#718096]/60 ml-1">
+            (Updated {updatedDate})
+          </span>
+        )}
+      </div>
+
+      {/* Reading time */}
+      <div className="flex items-center gap-1.5 text-sm text-[#718096]">
+        <i className="fas fa-clock text-xs" aria-hidden="true" />
+        <span className="font-medium">{article.readingTime}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/articles/ArticlePageClient.tsx b/web/src/components/articles/ArticlePageClient.tsx
new file mode 100644
index 00000000..2128aaf0
--- /dev/null
+++ b/web/src/components/articles/ArticlePageClient.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import { useState, type CSSProperties } from "react";
+import Link from "next/link";
+import type { Article } from "@/types/article";
+import { withBasePath } from "@/lib/basePath";
+import { defaultGlossaryTerms } from "@/lib/article-data";
+import { GlossaryProvider } from "./GlossaryProvider";
+import ReadingProgressBar from "./ReadingProgressBar";
+import ArticleBreadcrumbs from "./ArticleBreadcrumbs";
+import ArticleHero from "./ArticleHero";
+import ArticleContent from "./ArticleContent";
+import RelatedArticles from "./RelatedArticles";
+import AccessibilityControls, { type FontSize } from "./AccessibilityControls";
+
+const FONT_SIZE_MAP: Record<FontSize, number> = {
+  sm: 16,
+  md: 18,
+  lg: 20,
+};
+
+interface ArticlePageClientProps {
+  article: Article;
+  relatedArticles: Article[];
+}
+
+/**
+ * Client-side article detail page shell.
+ * Owns interactive state (font size, glossary context) and composes all
+ * article sub-components into the final page layout.
+ */
+export default function ArticlePageClient({
+  article,
+  relatedArticles,
+}: ArticlePageClientProps) {
+  const [fontSize, setFontSize] = useState<FontSize>("md");
+
+  return (
+    <GlossaryProvider terms={defaultGlossaryTerms}>
+      {/* Sticky reading progress indicator */}
+      <ReadingProgressBar />
+
+      {/* Skip navigation for keyboard / screen reader users */}
+      <a
+        href="#article-body"
+        className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-80 focus:bg-white focus:px-4 focus:py-2 focus:rounded-lg focus:shadow-lg focus:text-[#667eea] focus:font-semibold focus:border focus:border-[#667eea]/30"
+      >
+        Skip to article content
+      </a>
+
+      <div className="min-h-screen bg-white">
+        {/* ── Sticky top navigation bar ── */}
+        <div className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100 shadow-sm">
+          <div className="max-w-275 mx-auto px-4 sm:px-6 lg:px-8 py-3">
+            <ArticleBreadcrumbs
+              category={article.category}
+              title={article.title}
+            />
+          </div>
+        </div>
+
+        <main>
+          {/* ── Hero: image + title + metadata ── */}
+          <ArticleHero article={article} />
+
+          {/* ── Article body ── */}
+          <div
+            id="article-body"
+            className="max-w-185 mx-auto px-4 sm:px-6 py-12"
+          >
+            <article
+              aria-label={article.title}
+              className="[font-size:var(--article-font-size)]"
+              style={{ "--article-font-size": `${FONT_SIZE_MAP[fontSize]}px` } as CSSProperties}
+            >
+              <ArticleContent content={article.content} />
+            </article>
+
+            {/* ── Article footer: share + attribution ── */}
+            <ArticleFooter article={article} />
+          </div>
+        </main>
+
+        {/* ── Related articles ── */}
+        <RelatedArticles articles={relatedArticles} />
+
+        {/* ── Platform footer ── */}
+        <ArticlePageFooter />
+      </div>
+
+      {/* ── Floating accessibility controls ── */}
+      <AccessibilityControls
+        fontSize={fontSize}
+        onFontSizeChange={setFontSize}
+      />
+    </GlossaryProvider>
+  );
+}
+
+// ─── Article footer (post-content) ───────────────────────────────────────────
+
+function ArticleFooter({ article }: { article: Article }) {
+  return (
+    <footer className="mt-16 pt-10 border-t border-gray-100">
+      {/* Author card */}
+      <div className="flex items-start gap-4 p-6 bg-[#f7fafc] rounded-2xl border border-gray-100">
+        <div
+          className="w-14 h-14 rounded-full flex items-center justify-center text-white text-lg font-bold shrink-0 [background:var(--avatar-bg)]"
+          style={{ "--avatar-bg": article.author.avatarColor } as CSSProperties}
+          aria-hidden="true"
+        >
+          {article.author.avatarInitials}
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-xs font-bold uppercase tracking-widest text-[#667eea] mb-1">
+            About the Author
+          </p>
+          <h3 className="font-bold text-[#1a202c] text-lg leading-tight mb-0.5">
+            {article.author.name}
+          </h3>
+          <p className="text-sm text-[#718096]">{article.author.role}</p>
+          <p className="text-sm text-[#4a5568] mt-2 leading-relaxed">
+            A contributing expert to the UltimateHealth platform, committed to
+            delivering evidence-based health information accessible to everyone.
+          </p>
+        </div>
+      </div>
+
+      {/* Tags */}
+      {article.tags.length > 0 && (
+        <div className="mt-8">
+          <p className="text-xs font-bold uppercase tracking-widest text-[#718096] mb-3">
+            Topics
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {article.tags.map((tag) => (
+              <Link
+                key={tag}
+                href={withBasePath(`/articles?tag=${encodeURIComponent(tag)}`)}
+                className="text-sm text-[#667eea] bg-[#667eea]/8 border border-[#667eea]/20 px-4 py-1.5 rounded-full hover:bg-[#667eea]/15 transition-colors font-medium"
+              >
+                #{tag}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Back link */}
+      <div className="mt-10 flex justify-center">
+        <Link
+          href={withBasePath("/articles")}
+          className="inline-flex items-center gap-2 text-sm font-semibold text-[#667eea] hover:text-[#5568d3] transition-colors border border-[#667eea]/30 rounded-full px-6 py-2.5 hover:bg-[#667eea]/5"
+        >
+          <i className="fas fa-arrow-left text-xs" aria-hidden="true" />
+          Back to All Articles
+        </Link>
+      </div>
+    </footer>
+  );
+}
+
+// ─── Minimal page-level footer ────────────────────────────────────────────────
+
+function ArticlePageFooter() {
+  return (
+    <div className="bg-[#0f172a] text-[#64748b] py-8">
+      <div className="max-w-275 mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm">
+        <div className="flex items-center gap-2">
+          <Link
+            href={withBasePath("/")}
+            className="font-bold text-white hover:text-[#667eea] transition-colors"
+          >
+            UltimateHealth
+          </Link>
+          <span>— Open-source health knowledge for everyone</span>
+        </div>
+        <div className="flex items-center gap-4">
+          <Link
+            href={withBasePath("/medical-glossary")}
+            className="hover:text-[#94a3b8] transition-colors"
+          >
+            Medical Glossary
+          </Link>
+          <Link
+            href={withBasePath("/contribute")}
+            className="hover:text-[#94a3b8] transition-colors"
+          >
+            Contribute
+          </Link>
+          <Link
+            href={withBasePath("/")}
+            className="hover:text-[#94a3b8] transition-colors"
+          >
+            Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/articles/GlossaryProvider.tsx b/web/src/components/articles/GlossaryProvider.tsx
new file mode 100644
index 00000000..53d43727
--- /dev/null
+++ b/web/src/components/articles/GlossaryProvider.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type ReactNode,
+} from "react";
+import { defaultGlossaryTerms } from "@/lib/article-data";
+
+export interface GlossaryContextValue {
+  /** Map of term → definition for the current article context */
+  terms: Map<string, string>;
+  getDefinition: (term: string) => string | undefined;
+}
+
+const GlossaryContext = createContext<GlossaryContextValue | null>(null);
+
+interface GlossaryProviderProps {
+  children: ReactNode;
+  /** Optional override for the glossary terms. Defaults to the platform-wide health glossary. */
+  terms?: Record<string, string>;
+}
+
+/**
+ * GlossaryProvider supplies glossary term definitions to the article content tree.
+ * Wrap the article page with this provider to enable interactive tooltip definitions
+ * for medical and health terminology.
+ *
+ * FUTURE: This provider is also the integration point for:
+ * - AI-powered term explanations (stream definitions on hover)
+ * - User-created personal glossary entries
+ * - Term frequency analytics for content quality scoring
+ */
+export function GlossaryProvider({
+  children,
+  terms = defaultGlossaryTerms,
+}: GlossaryProviderProps) {
+  const glossaryMap = useMemo(
+    () => new Map(Object.entries(terms)),
+    [terms]
+  );
+
+  const value = useMemo<GlossaryContextValue>(
+    () => ({
+      terms: glossaryMap,
+      getDefinition: (term: string) => glossaryMap.get(term),
+    }),
+    [glossaryMap]
+  );
+
+  return (
+    <GlossaryContext.Provider value={value}>
+      {children}
+    </GlossaryContext.Provider>
+  );
+}
+
+/**
+ * Access the glossary context from within article content components.
+ * Returns an empty glossary when called outside a GlossaryProvider (safe fallback).
+ */
+export function useGlossary(): GlossaryContextValue {
+  const ctx = useContext(GlossaryContext);
+  if (!ctx) {
+    return {
+      terms: new Map(),
+      getDefinition: () => undefined,
+    };
+  }
+  return ctx;
+}
diff --git a/web/src/components/articles/ReadingProgressBar.tsx b/web/src/components/articles/ReadingProgressBar.tsx
new file mode 100644
index 00000000..3274e24a
--- /dev/null
+++ b/web/src/components/articles/ReadingProgressBar.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * Sticky reading progress bar fixed to the very top of the viewport.
+ * Tracks scroll progress through the entire document.
+ *
+ * FUTURE: Can be enhanced to track progress through a specific content
+ * element ref for more precise article-only tracking.
+ */
+export default function ReadingProgressBar() {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const updateProgress = () => {
+      const scrollTop = window.scrollY;
+      const docScrollable =
+        document.documentElement.scrollHeight - window.innerHeight;
+      const pct =
+        docScrollable > 0 ? (scrollTop / docScrollable) * 100 : 0;
+      setProgress(Math.min(100, Math.max(0, pct)));
+    };
+
+    window.addEventListener("scroll", updateProgress, { passive: true });
+    updateProgress();
+    return () => window.removeEventListener("scroll", updateProgress);
+  }, []);
+
+  return (
+    <div
+      role="progressbar"
+      aria-label="Article reading progress"
+      aria-valuenow={Math.round(progress)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      className="fixed top-0 left-0 z-[70] h-[3px] transition-[width] duration-100 will-change-[width]"
+      style={{
+        width: `${progress}%`,
+        background: "linear-gradient(90deg, #667eea 0%, #764ba2 100%)",
+        boxShadow: "0 0 6px rgba(102, 126, 234, 0.6)",
+      }}
+    />
+  );
+}
diff --git a/web/src/components/articles/RelatedArticles.tsx b/web/src/components/articles/RelatedArticles.tsx
new file mode 100644
index 00000000..bcabebda
--- /dev/null
+++ b/web/src/components/articles/RelatedArticles.tsx
@@ -0,0 +1,158 @@
+import { type CSSProperties } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { format, parseISO } from "date-fns";
+import type { Article } from "@/types/article";
+import { withBasePath } from "@/lib/basePath";
+
+interface RelatedArticlesProps {
+  articles: Article[];
+}
+
+/**
+ * Related articles section displayed below the main article content.
+ *
+ * Layout:
+ *   Desktop  (>1024px) : 3-column grid
+ *   Tablet   (768–1024) : 2-column grid
+ *   Mobile   (<768px)  : Single-column stack
+ */
+export default function RelatedArticles({ articles }: RelatedArticlesProps) {
+  if (!articles.length) return null;
+
+  return (
+    <aside aria-labelledby="related-articles-heading">
+      <div className="border-t border-gray-100 bg-[#f7fafc]">
+        <div className="max-w-275 mx-auto px-4 sm:px-6 lg:px-8 py-16">
+          {/* Section heading */}
+          <div className="mb-10">
+            <p className="text-xs font-bold uppercase tracking-widest text-[#667eea] mb-2">
+              Continue Reading
+            </p>
+            <h2
+              id="related-articles-heading"
+              className="text-2xl sm:text-3xl font-extrabold text-[#1a202c]"
+            >
+              Related Articles
+            </h2>
+          </div>
+
+          {/* Cards grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {articles.map((article) => (
+              <RelatedArticleCard key={article.id} article={article} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+/** Category-to-icon mapping for gradient placeholder cards */
+const CATEGORY_ICONS: Record<string, string> = {
+  "Cardiovascular Health": "❤️",
+  "Diabetes Management": "🩺",
+  "Mental Health": "🧠",
+  Nutrition: "🥗",
+  "Sleep Health": "😴",
+  Fitness: "🏃",
+  Wellness: "✨",
+};
+
+function getCategoryIcon(category: string): string {
+  return CATEGORY_ICONS[category] ?? "📋";
+}
+
+interface RelatedArticleCardProps {
+  article: Article;
+}
+
+function RelatedArticleCard({ article }: RelatedArticleCardProps) {
+  const formattedDate = format(parseISO(article.publishedAt), "MMM d, yyyy");
+  const icon = getCategoryIcon(article.category);
+  const articleUrl = withBasePath(`/articles/${article.id}`);
+
+  return (
+    <article className="relative group flex flex-col bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 focus-within:ring-2 focus-within:ring-[#667eea]">
+      {/* Thumbnail */}
+      <div className="relative aspect-video overflow-hidden shrink-0">
+        {article.imageUrl ? (
+          <Image
+            src={article.imageUrl}
+            alt={article.imageAlt}
+            fill
+            loading="lazy"
+            sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+            className="object-cover group-hover:scale-105 transition-transform duration-500"
+          />
+        ) : (
+          /* Gradient placeholder — background derived from author theme colour */
+          <div
+            className="absolute inset-0 flex flex-col items-center justify-center gap-2 [background:linear-gradient(135deg,var(--card-from)_0%,var(--card-to)_100%)]"
+            style={{
+              "--card-from": `${article.author.avatarColor}30`,
+              "--card-to": `${article.author.avatarColor}60`,
+            } as React.CSSProperties}
+            aria-hidden="true"
+          >
+            <span className="text-5xl opacity-70">{icon}</span>
+          </div>
+        )}
+
+        {/* Category badge overlay */}
+        <div className="absolute top-3 left-3">
+          <span className="text-[10px] font-bold uppercase tracking-widest text-white bg-black/40 backdrop-blur-sm px-2.5 py-1 rounded-full">
+            {article.category}
+          </span>
+        </div>
+      </div>
+
+      {/* Card body */}
+      <div className="flex flex-col flex-1 p-5">
+        {/* Title */}
+        <h3 className="font-bold text-[#1a202c] leading-snug line-clamp-2 mb-2 group-hover:text-[#667eea] transition-colors text-base">
+          <Link
+            href={articleUrl}
+            className="focus-visible:outline-none"
+            aria-label={`Read article: ${article.title}`}
+          >
+            {/* Extend click area to whole card */}
+            <span className="absolute inset-0" aria-hidden="true" />
+            {article.title}
+          </Link>
+        </h3>
+
+        {/* Excerpt */}
+        <p className="text-sm text-[#718096] line-clamp-2 leading-relaxed mb-4 flex-1">
+          {article.excerpt}
+        </p>
+
+        {/* Footer: author + date + reading time */}
+        <div className="flex items-center justify-between gap-2 pt-4 border-t border-gray-50">
+          <div className="flex items-center gap-2 min-w-0">
+            <div
+              className="w-6 h-6 rounded-full flex items-center justify-center text-white text-[10px] font-bold shrink-0 [background:var(--avatar-color)]"
+              style={{ "--avatar-color": article.author.avatarColor } as React.CSSProperties}
+              aria-hidden="true"
+            >
+              {article.author.avatarInitials}
+            </div>
+            <span className="text-xs text-[#718096] truncate">
+              {article.author.name}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-2 text-xs text-[#718096] shrink-0">
+            <time dateTime={article.publishedAt}>{formattedDate}</time>
+            <span aria-hidden="true">·</span>
+            <span className="flex items-center gap-1">
+              <i className="fas fa-clock text-[10px]" aria-hidden="true" />
+              {article.readingTime}
+            </span>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/web/src/lib/article-data.ts b/web/src/lib/article-data.ts
new file mode 100644
index 00000000..2d643a3b
--- /dev/null
+++ b/web/src/lib/article-data.ts
@@ -0,0 +1,416 @@
+import type { Article } from "@/types/article";
+
+/** Health and medical terms available for interactive glossary tooltips */
+export const defaultGlossaryTerms: Record<string, string> = {
+  cardiovascular:
+    "Relating to the heart and blood vessels that make up the circulatory system.",
+  hypertension:
+    "A condition in which blood pressure is consistently 130/80 mmHg or higher, increasing risk of heart disease and stroke.",
+  atherosclerosis:
+    "A disease in which plaque builds up inside the arteries, narrowing them and reducing blood flow over time.",
+  triglycerides:
+    "A type of fat (lipid) found in the blood. Elevated levels are associated with increased cardiovascular risk.",
+  dyslipidemia:
+    "Abnormal levels of lipids — including cholesterol and triglycerides — in the bloodstream.",
+  "endothelial function":
+    "The ability of the inner lining of blood vessels (endothelium) to regulate blood flow and vascular health.",
+  "omega-3 fatty acids":
+    "Essential polyunsaturated fats found in fatty fish and certain plant foods with documented anti-inflammatory and cardiovascular benefits.",
+  cortisol:
+    "The body's primary stress hormone, released by the adrenal glands. Chronically elevated cortisol can raise blood pressure and blood sugar.",
+  "insulin resistance":
+    "A condition in which cells don't respond effectively to insulin, forcing the pancreas to produce more. Precursor to type 2 diabetes.",
+  inflammation:
+    "The body's immune response to injury or infection. Chronic low-grade inflammation is linked to cardiovascular disease, diabetes, and other conditions.",
+};
+
+export const articles: Article[] = [
+  // ─── Featured article (full content) ─────────────────────────────────────
+  {
+    id: "cardiovascular-health-guide",
+    title:
+      "Understanding Heart Health: A Comprehensive Guide to Cardiovascular Wellness",
+    subtitle:
+      "Evidence-based strategies for protecting your most vital organ through lifestyle, nutrition, and proactive care",
+    excerpt:
+      "Learn how to protect your cardiovascular system with proven lifestyle strategies, dietary choices, and early warning signs you should never ignore.",
+    imageUrl: "/assets/ultimate-health-about.jpeg",
+    imageAlt:
+      "Healthcare professionals reviewing cardiovascular health data and diagnostic information",
+    author: {
+      name: "Dr. Sarah Mitchell",
+      role: "Cardiologist, MD",
+      avatarInitials: "SM",
+      avatarColor: "#667eea",
+    },
+    publishedAt: "2026-01-15",
+    updatedAt: "2026-04-02",
+    readingTime: "12 min read",
+    category: "Cardiovascular Health",
+    tags: [
+      "heart health",
+      "cardiovascular",
+      "prevention",
+      "diet",
+      "hypertension",
+      "cholesterol",
+    ],
+    content: {
+      blocks: [
+        {
+          type: "paragraph",
+          html: "Cardiovascular disease remains the leading cause of death globally, accounting for approximately 17.9 million deaths each year. Yet the majority of cardiovascular conditions are preventable through informed lifestyle choices, early detection, and consistent medical care.",
+        },
+        {
+          type: "paragraph",
+          html: "In this comprehensive guide, we explore the science behind heart health, the modifiable risk factors you can address today, and the evidence-based strategies that cardiologists recommend to their patients.",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "what-is-cardiovascular-health",
+          text: "What Is Cardiovascular Health?",
+        },
+        {
+          type: "paragraph",
+          html: "Cardiovascular health refers to the overall condition of your heart and blood vessels. A healthy cardiovascular system efficiently pumps oxygenated blood throughout your body, nourishes every organ and tissue, and removes metabolic waste products.",
+        },
+        {
+          type: "paragraph",
+          html: "The cardiovascular system consists of three primary components: the <strong>heart</strong> (a muscular pump), the <strong>blood vessels</strong> (arteries, veins, and capillaries), and <strong>blood</strong> itself. When any of these components become compromised, serious health consequences can follow.",
+        },
+        {
+          type: "image",
+          src: "/assets/article-detail-screen.jpeg",
+          alt: "UltimateHealth app showing cardiovascular health tracking and monitoring features",
+          caption:
+            "The UltimateHealth app provides tools to monitor and track your cardiovascular health metrics over time. (Placeholder — production images from API)",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "risk-factors",
+          text: "Key Risk Factors for Cardiovascular Disease",
+        },
+        {
+          type: "paragraph",
+          html: "Understanding your risk factors is the first step toward prevention. Risk factors fall into two categories: those you cannot change (age, genetics, family history), and those you can actively modify through lifestyle and medical intervention.",
+        },
+        {
+          type: "heading",
+          level: 3,
+          id: "modifiable-risk-factors",
+          text: "Modifiable Risk Factors",
+        },
+        {
+          type: "list",
+          listType: "unordered",
+          items: [
+            "<strong>Hypertension (High Blood Pressure)</strong> — Consistently elevated blood pressure damages arterial walls over time, accelerating atherosclerosis and increasing risk of heart attack and stroke.",
+            "<strong>High LDL Cholesterol</strong> — Elevated LDL cholesterol contributes to plaque buildup in arteries, narrowing them and restricting blood flow to the heart and brain.",
+            "<strong>Type 2 Diabetes</strong> — Chronically high blood glucose damages blood vessels and nerves, significantly elevating cardiovascular risk across all organs.",
+            "<strong>Physical Inactivity</strong> — A sedentary lifestyle weakens the heart muscle and promotes weight gain, hypertension, and insulin resistance simultaneously.",
+            "<strong>Smoking and Tobacco Use</strong> — Nicotine and other tobacco compounds directly damage blood vessel linings and dramatically promote clot formation.",
+            "<strong>Poor Diet</strong> — Diets high in saturated fats, trans fats, sodium, and refined sugars contribute to multiple cardiovascular risk factors at once.",
+            "<strong>Excess Weight and Obesity</strong> — Being overweight strains the heart and correlates strongly with hypertension, diabetes, and dyslipidemia.",
+          ],
+        },
+        {
+          type: "callout",
+          variant: "warning",
+          title: "Know Your Numbers",
+          text: 'High blood pressure and elevated cholesterol often cause no noticeable symptoms. Regular health screenings — at least once a year — are essential for detecting these "silent" risk factors early. Target blood pressure: below 120/80 mmHg. Target LDL cholesterol: below 100 mg/dL for most adults.',
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "role-of-diet",
+          text: "The Critical Role of Diet in Heart Health",
+        },
+        {
+          type: "paragraph",
+          html: "Decades of nutritional research have consistently shown that dietary patterns profoundly influence cardiovascular outcomes. The <strong>Mediterranean diet</strong>, the <strong>DASH diet</strong>, and whole-food plant-based eating patterns have the strongest evidence base for reducing cardiovascular disease risk.",
+        },
+        {
+          type: "blockquote",
+          text: "Let food be thy medicine and medicine be thy food. The evidence is now overwhelming: what we eat is among the most powerful influences on cardiovascular health we have.",
+          attribution: "Dr. Dean Ornish, preventive medicine physician and researcher",
+        },
+        {
+          type: "heading",
+          level: 3,
+          id: "heart-healthy-foods",
+          text: "Heart-Healthy Foods to Prioritize",
+        },
+        {
+          type: "list",
+          listType: "ordered",
+          items: [
+            "<strong>Fatty fish</strong> (salmon, sardines, mackerel) — Rich in omega-3 fatty acids that reduce triglycerides and systemic inflammation.",
+            "<strong>Leafy greens</strong> (spinach, kale, arugula) — Provide nitrates that lower blood pressure and antioxidants that protect arterial health.",
+            "<strong>Berries</strong> (blueberries, strawberries) — Contain flavonoids linked to reduced blood pressure and improved endothelial function.",
+            "<strong>Whole grains</strong> (oats, quinoa, brown rice) — Lower LDL cholesterol and support healthy blood sugar regulation through soluble fiber.",
+            "<strong>Nuts and seeds</strong> (walnuts, flaxseeds, chia seeds) — Provide healthy unsaturated fats, fiber, and plant sterols that naturally lower cholesterol.",
+            "<strong>Legumes</strong> (lentils, chickpeas, black beans) — Excellent source of soluble fiber and plant protein with minimal saturated fat.",
+            "<strong>Olive oil</strong> — High in monounsaturated fats and polyphenols that reduce inflammation and improve cholesterol profiles.",
+          ],
+        },
+        {
+          type: "callout",
+          variant: "tip",
+          title: "Simple Dietary Swap",
+          text: "Replace refined grains with whole grains, and swap saturated fats (butter, red meat) for unsaturated fats (olive oil, avocado, nuts). These two changes alone can meaningfully reduce your LDL cholesterol within 8–12 weeks without any medication.",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "exercise-heart-health",
+          text: "Exercise and Heart Health",
+        },
+        {
+          type: "paragraph",
+          html: "Regular physical activity is one of the most powerful interventions for cardiovascular health. Exercise strengthens the heart muscle, lowers blood pressure, improves cholesterol profiles, reduces inflammation, and supports healthy body weight — addressing multiple risk factors simultaneously.",
+        },
+        {
+          type: "paragraph",
+          html: "The American Heart Association recommends at least <strong>150 minutes of moderate-intensity aerobic activity</strong> per week, or <strong>75 minutes of vigorous activity</strong>, combined with two sessions of muscle-strengthening exercises targeting all major muscle groups.",
+        },
+        {
+          type: "callout",
+          variant: "note",
+          title: "Starting an Exercise Program",
+          text: "If you have existing cardiovascular conditions or have been sedentary for a long time, consult your physician before beginning a new exercise regimen. A gradual approach — starting with 10–15 minute walks and progressively increasing duration and intensity — is safe and sustainable for most people.",
+        },
+        {
+          type: "heading",
+          level: 3,
+          id: "types-of-exercise",
+          text: "Types of Exercise for Heart Health",
+        },
+        {
+          type: "list",
+          listType: "unordered",
+          items: [
+            "<strong>Aerobic exercise</strong> — Walking, jogging, swimming, cycling. Directly strengthens the heart muscle and improves cardiovascular efficiency.",
+            "<strong>Resistance training</strong> — Weightlifting, bodyweight exercises. Improves insulin resistance, body composition, and resting metabolic rate.",
+            "<strong>High-Intensity Interval Training (HIIT)</strong> — Short bursts of intense activity followed by recovery periods. Highly time-efficient with strong cardiovascular and metabolic benefits.",
+            "<strong>Yoga and stretching</strong> — Reduces psychological stress, improves flexibility, and may lower blood pressure through parasympathetic nervous system activation.",
+          ],
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "stress-and-sleep",
+          text: "Stress, Sleep, and Your Heart",
+        },
+        {
+          type: "paragraph",
+          html: "Chronic psychological stress activates the fight-or-flight response, elevating cortisol and adrenaline levels that increase blood pressure and heart rate. Over time, unmanaged stress contributes directly to hypertension, inflammation, and unhealthy coping behaviors such as overeating, smoking, and alcohol consumption.",
+        },
+        {
+          type: "paragraph",
+          html: "Sleep deprivation is equally damaging. Adults sleeping fewer than 6 hours nightly have significantly higher risk of hypertension, obesity, diabetes, and cardiac events. The American Heart Association now formally recognizes <strong>healthy sleep</strong> (7–9 hours of quality sleep per night) as a core pillar of cardiovascular health alongside diet and exercise.",
+        },
+        {
+          type: "callout",
+          variant: "info",
+          title: "Evidence-Based Stress Reduction",
+          text: "Effective stress management techniques include mindfulness meditation (even 10 minutes daily measurably reduces cortisol), progressive muscle relaxation, diaphragmatic breathing exercises, regular social connection, and time in nature. These approaches have direct, measurable cardiovascular benefits — not merely subjective relief.",
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "warning-signs",
+          text: "Warning Signs That Require Immediate Attention",
+        },
+        {
+          type: "paragraph",
+          html: "Recognizing the warning signs of a cardiac emergency can save your life or the life of someone nearby. The following symptoms warrant <strong>immediate emergency medical care</strong> — call emergency services; do not drive yourself to the hospital.",
+        },
+        {
+          type: "list",
+          listType: "unordered",
+          items: [
+            "<strong>Chest pain, pressure, tightness, or discomfort</strong> — May radiate to the left arm, jaw, neck, or back. Can feel like squeezing or heaviness.",
+            "<strong>Sudden shortness of breath</strong> — Especially when occurring at rest or with minimal physical exertion.",
+            "<strong>Unexplained sweating, nausea, or lightheadedness</strong> — Common heart attack symptoms, particularly prevalent in women and diabetic patients.",
+            "<strong>Sudden numbness or weakness on one side of the body</strong> — Including the face, arm, or leg — classic stroke warning signs.",
+            '<strong>Sudden severe headache</strong> — Often described as "the worst headache of my life" and may indicate hemorrhagic stroke.',
+            "<strong>Heart palpitations with dizziness or fainting</strong> — May indicate a dangerous cardiac arrhythmia requiring urgent evaluation.",
+          ],
+        },
+        {
+          type: "callout",
+          variant: "warning",
+          title: "Emergency Action Required",
+          text: 'If you or someone nearby experiences these symptoms, call emergency services (911 in the US) immediately. Every minute of delay during a heart attack causes additional irreversible heart muscle damage. "Time is muscle" — early treatment dramatically improves survival and recovery outcomes.',
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "preventive-care",
+          text: "Preventive Screenings and Regular Monitoring",
+        },
+        {
+          type: "paragraph",
+          html: "Proactive monitoring is essential for cardiovascular health, especially as we age. Work with your healthcare provider to establish a personalized schedule for the following evidence-based screenings:",
+        },
+        {
+          type: "list",
+          listType: "ordered",
+          items: [
+            "<strong>Blood pressure</strong> — At least annually for all adults; more frequently if hypertensive, on medications, or at elevated risk.",
+            "<strong>Lipid panel</strong> — Every 4–6 years for average-risk adults; annually for those with known dyslipidemia or cardiovascular history.",
+            "<strong>Blood glucose / HbA1c</strong> — Every 3 years from age 35–45; annually with risk factors for insulin resistance or diabetes.",
+            "<strong>Body weight and BMI</strong> — Regular monitoring helps identify gradual weight gain before it compounds other risks.",
+            "<strong>Electrocardiogram (ECG)</strong> — Baseline assessment at age 40, or earlier if symptomatic or with significant family history.",
+            "<strong>Coronary artery calcium (CAC) score</strong> — Recommended for intermediate-risk adults to guide treatment and lifestyle decisions.",
+          ],
+        },
+        {
+          type: "divider",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "conclusion",
+          text: "The Bottom Line",
+        },
+        {
+          type: "paragraph",
+          html: "Cardiovascular disease is not inevitable. The evidence is unambiguous: most cases are preventable through consistent, intentional attention to lifestyle — a nutrient-dense diet, regular physical activity, effective stress management, quality sleep, and avoiding tobacco.",
+        },
+        {
+          type: "paragraph",
+          html: "Begin with small, sustainable changes rather than attempting an overnight transformation. Adding one serving of vegetables per day, taking a 20-minute walk, or practicing five minutes of mindful breathing are meaningful steps that compound into significant health benefits over months and years.",
+        },
+        {
+          type: "paragraph",
+          html: "Partner with your healthcare provider, know your numbers, and treat your cardiovascular health as the long-term investment it truly is. Your heart has worked tirelessly for you every second of your life — it deserves your focused, informed attention.",
+        },
+      ],
+    },
+  },
+
+  // ─── Related articles (metadata only — full content served by API) ─────────
+  {
+    id: "managing-type-2-diabetes",
+    title: "Managing Type 2 Diabetes: Lifestyle Changes That Transform Outcomes",
+    subtitle:
+      "How diet, exercise, and self-monitoring can help you achieve better blood sugar control",
+    excerpt:
+      "Evidence-based lifestyle strategies that help people with type 2 diabetes achieve tighter blood sugar control, reduce medication dependence, and improve long-term quality of life.",
+    imageUrl: null,
+    imageAlt: "Person monitoring blood glucose with a modern continuous glucose monitor",
+    author: {
+      name: "Dr. James Park",
+      role: "Endocrinologist, MD, PhD",
+      avatarInitials: "JP",
+      avatarColor: "#764ba2",
+    },
+    publishedAt: "2026-02-08",
+    readingTime: "9 min read",
+    category: "Diabetes Management",
+    tags: ["diabetes", "blood sugar", "insulin resistance", "lifestyle", "nutrition"],
+    content: { blocks: [] },
+  },
+  {
+    id: "sleep-and-heart-health",
+    title: "The Sleep-Heart Connection: Why Rest Is Non-Negotiable",
+    subtitle:
+      "New research recognizes sleep quality as a pillar of cardiovascular health equal to diet and exercise",
+    excerpt:
+      "Sleep deprivation silently damages the cardiovascular system in measurable ways. Discover the science behind the sleep-heart connection and practical strategies for restorative rest.",
+    imageUrl: null,
+    imageAlt:
+      "Peaceful sleeping environment representing the connection between quality sleep and heart health",
+    author: {
+      name: "Dr. Priya Nair",
+      role: "Sleep Medicine Specialist",
+      avatarInitials: "PN",
+      avatarColor: "#10b981",
+    },
+    publishedAt: "2026-03-12",
+    readingTime: "7 min read",
+    category: "Cardiovascular Health",
+    tags: ["sleep", "heart health", "cardiovascular", "wellness", "sleep apnea"],
+    content: { blocks: [] },
+  },
+  {
+    id: "stress-and-your-heart",
+    title: "Stress and Your Heart: The Hidden Cardiovascular Risk Factor",
+    subtitle:
+      "Chronic stress is as damaging as smoking for your heart — here is what the science reveals",
+    excerpt:
+      "Understand how chronic psychological stress affects cardiovascular health at the cellular level and discover evidence-based techniques to protect your heart.",
+    imageUrl: null,
+    imageAlt:
+      "Abstract representation of psychological stress and its physiological impact on the heart",
+    author: {
+      name: "Dr. Emily Torres",
+      role: "Psychiatrist & Integrative Medicine Specialist",
+      avatarInitials: "ET",
+      avatarColor: "#f59e0b",
+    },
+    publishedAt: "2026-03-28",
+    readingTime: "8 min read",
+    category: "Mental Health",
+    tags: ["stress", "heart health", "cortisol", "mental health", "prevention"],
+    content: { blocks: [] },
+  },
+  {
+    id: "plant-based-diet-and-heart",
+    title: "Plant-Based Diet and Heart Disease: What the Latest Research Shows",
+    subtitle:
+      "Comprehensive review of how plant-forward eating patterns protect the cardiovascular system",
+    excerpt:
+      "The scientific evidence is compelling: plant-based dietary patterns consistently and significantly reduce cardiovascular disease risk across diverse populations.",
+    imageUrl: null,
+    imageAlt:
+      "Vibrant colorful array of heart-healthy plant-based whole foods",
+    author: {
+      name: "Dr. Sarah Mitchell",
+      role: "Cardiologist, MD",
+      avatarInitials: "SM",
+      avatarColor: "#667eea",
+    },
+    publishedAt: "2026-04-10",
+    readingTime: "10 min read",
+    category: "Cardiovascular Health",
+    tags: [
+      "plant-based diet",
+      "heart health",
+      "Mediterranean diet",
+      "nutrition",
+      "cholesterol",
+    ],
+    content: { blocks: [] },
+  },
+];
+
+export function getArticleById(id: string): Article | undefined {
+  return articles.find((a) => a.id === id);
+}
+
+export function getRelatedArticles(articleId: string, count = 3): Article[] {
+  const article = getArticleById(articleId);
+  if (!article) return articles.filter((a) => a.id !== articleId).slice(0, count);
+
+  return articles
+    .filter((a) => a.id !== articleId)
+    .sort((a, b) => {
+      const scoreA =
+        (a.category === article.category ? 2 : 0) +
+        (a.author.name === article.author.name ? 1 : 0) +
+        a.tags.filter((t) => article.tags.includes(t)).length;
+      const scoreB =
+        (b.category === article.category ? 2 : 0) +
+        (b.author.name === article.author.name ? 1 : 0) +
+        b.tags.filter((t) => article.tags.includes(t)).length;
+      return scoreB - scoreA;
+    })
+    .slice(0, count);
+}
diff --git a/web/src/types/article.ts b/web/src/types/article.ts
new file mode 100644
index 00000000..6f3f963b
--- /dev/null
+++ b/web/src/types/article.ts
@@ -0,0 +1,89 @@
+export type CalloutVariant = "tip" | "note" | "warning" | "info";
+export type HeadingLevel = 2 | 3 | 4;
+export type ListType = "ordered" | "unordered";
+
+export interface HeadingBlock {
+  type: "heading";
+  level: HeadingLevel;
+  text: string;
+  /** Anchor ID for in-page navigation links */
+  id: string;
+}
+
+export interface ParagraphBlock {
+  type: "paragraph";
+  /** Supports inline HTML: <strong>, <em>, <a href="...">. Plain text enables glossary term highlighting. */
+  html: string;
+}
+
+export interface ImageBlock {
+  type: "image";
+  src: string;
+  alt: string;
+  caption?: string;
+}
+
+export interface BlockquoteBlock {
+  type: "blockquote";
+  text: string;
+  attribution?: string;
+}
+
+export interface CalloutBlock {
+  type: "callout";
+  variant: CalloutVariant;
+  title: string;
+  text: string;
+}
+
+export interface ListBlock {
+  type: "list";
+  listType: ListType;
+  /** Each item may contain inline HTML for bold, italics, links */
+  items: string[];
+}
+
+export interface DividerBlock {
+  type: "divider";
+}
+
+export type ContentBlock =
+  | HeadingBlock
+  | ParagraphBlock
+  | ImageBlock
+  | BlockquoteBlock
+  | CalloutBlock
+  | ListBlock
+  | DividerBlock;
+
+export interface RichContent {
+  blocks: ContentBlock[];
+}
+
+export interface ArticleAuthor {
+  name: string;
+  role: string;
+  /** Two-letter initials shown in the avatar circle */
+  avatarInitials: string;
+  /** CSS color value for the avatar background */
+  avatarColor: string;
+}
+
+export interface Article {
+  id: string;
+  title: string;
+  subtitle?: string;
+  /** Short description used in listings and meta tags */
+  excerpt: string;
+  content: RichContent;
+  imageUrl: string | null;
+  imageAlt: string;
+  author: ArticleAuthor;
+  /** ISO 8601 date string, e.g. "2026-01-15" */
+  publishedAt: string;
+  updatedAt?: string;
+  /** Human-readable duration, e.g. "12 min read" */
+  readingTime: string;
+  category: string;
+  tags: string[];
+}

From 483e266f6b1eb8f237f3772bb9437aa44f541fcc Mon Sep 17 00:00:00 2001
From: Shanidhya01 <luckykumar0011s@gmail.com>
Date: Fri, 12 Jun 2026 15:10:16 +0530
Subject: [PATCH 2/2] Add sample content for related articles

---
 web/src/lib/article-data.ts | 228 +++++++++++++++++++++++++++++++++++-
 1 file changed, 224 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/article-data.ts b/web/src/lib/article-data.ts
index 2d643a3b..7aa6681b 100644
--- a/web/src/lib/article-data.ts
+++ b/web/src/lib/article-data.ts
@@ -315,7 +315,62 @@ export const articles: Article[] = [
     readingTime: "9 min read",
     category: "Diabetes Management",
     tags: ["diabetes", "blood sugar", "insulin resistance", "lifestyle", "nutrition"],
-    content: { blocks: [] },
+    content: {
+      blocks: [
+        {
+          type: "paragraph",
+          html: "Type 2 diabetes management works best when daily choices and clinical care move in the same direction. The goal is not perfection; it is steady improvement in blood glucose patterns, energy, and long-term risk reduction.",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "blood-sugar-basics",
+          text: "Blood Sugar Basics",
+        },
+        {
+          type: "paragraph",
+          html: "After meals, carbohydrates are broken down into glucose. Insulin helps move that glucose from the bloodstream into cells. With insulin resistance, the same amount of insulin has less effect, so blood glucose can remain elevated for longer.",
+        },
+        {
+          type: "callout",
+          variant: "info",
+          title: "Sample Data Note",
+          text: "This article uses realistic placeholder guidance for local testing until production article content is served by the API.",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "daily-habits",
+          text: "Daily Habits That Move the Needle",
+        },
+        {
+          type: "list",
+          listType: "unordered",
+          items: [
+            "<strong>Build balanced plates</strong> with vegetables, lean protein, high-fiber carbohydrates, and unsaturated fats.",
+            "<strong>Walk after meals</strong> for 10-20 minutes to improve post-meal glucose handling.",
+            "<strong>Prioritize sleep</strong> because short sleep can worsen insulin resistance and appetite regulation.",
+            "<strong>Track patterns</strong> rather than isolated readings; trends are more useful for decision-making.",
+          ],
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "monitoring",
+          text: "Monitoring With Context",
+        },
+        {
+          type: "paragraph",
+          html: "Finger-stick meters, continuous glucose monitors, and HbA1c tests each answer different questions. Use them with your care team to understand fasting levels, post-meal spikes, medication response, and progress over time.",
+        },
+        {
+          type: "callout",
+          variant: "warning",
+          title: "Do Not Adjust Medication Alone",
+          text: "Lifestyle changes can meaningfully affect glucose levels. Work with a licensed clinician before changing insulin, sulfonylureas, or other prescribed medications.",
+        },
+      ],
+    },
   },
   {
     id: "sleep-and-heart-health",
@@ -337,7 +392,63 @@ export const articles: Article[] = [
     readingTime: "7 min read",
     category: "Cardiovascular Health",
     tags: ["sleep", "heart health", "cardiovascular", "wellness", "sleep apnea"],
-    content: { blocks: [] },
+    content: {
+      blocks: [
+        {
+          type: "paragraph",
+          html: "Sleep is not just recovery time for the mind. During healthy sleep, blood pressure dips, heart rate settles, inflammation is regulated, and metabolic systems recalibrate for the next day.",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "why-sleep-matters",
+          text: "Why Sleep Matters for the Heart",
+        },
+        {
+          type: "paragraph",
+          html: "Consistently short or fragmented sleep can raise sympathetic nervous system activity. Over time, that may contribute to hypertension, insulin resistance, weight gain, and higher cardiovascular risk.",
+        },
+        {
+          type: "image",
+          src: "/assets/article-home-screen.jpeg",
+          alt: "UltimateHealth article screen used as placeholder content artwork",
+          caption:
+            "Placeholder image for local article testing; production content can replace this with topic-specific media.",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "sleep-apnea",
+          text: "Sleep Apnea Is Often Missed",
+        },
+        {
+          type: "paragraph",
+          html: "Loud snoring, gasping, morning headaches, dry mouth, and daytime sleepiness can point to obstructive sleep apnea. Because apnea repeatedly lowers oxygen during sleep, it can place extra strain on the cardiovascular system.",
+        },
+        {
+          type: "callout",
+          variant: "note",
+          title: "When to Ask for Screening",
+          text: "If you snore loudly, wake unrefreshed, or have resistant high blood pressure, ask your clinician whether a sleep study is appropriate.",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "better-rest",
+          text: "Practical Steps for Better Rest",
+        },
+        {
+          type: "list",
+          listType: "ordered",
+          items: [
+            "Keep wake time consistent, including weekends.",
+            "Get morning light exposure to anchor your circadian rhythm.",
+            "Limit alcohol close to bedtime because it fragments sleep architecture.",
+            "Keep the room cool, dark, and quiet.",
+          ],
+        },
+      ],
+    },
   },
   {
     id: "stress-and-your-heart",
@@ -359,7 +470,61 @@ export const articles: Article[] = [
     readingTime: "8 min read",
     category: "Mental Health",
     tags: ["stress", "heart health", "cortisol", "mental health", "prevention"],
-    content: { blocks: [] },
+    content: {
+      blocks: [
+        {
+          type: "paragraph",
+          html: "Stress becomes a cardiovascular problem when the body's alarm system stays switched on. Short bursts of stress are normal; persistent stress can keep blood pressure, heart rate, cortisol, and inflammation higher than the body is built to tolerate.",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "stress-response",
+          text: "The Stress Response",
+        },
+        {
+          type: "paragraph",
+          html: "When the brain detects threat, it activates the sympathetic nervous system and the hypothalamic-pituitary-adrenal axis. This helps in emergencies, but repeated activation can nudge cardiovascular risk factors in the wrong direction.",
+        },
+        {
+          type: "blockquote",
+          text: "The aim is not to remove every stressor. The aim is to build reliable recovery into the day.",
+          attribution: "UltimateHealth clinical review sample",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "hidden-patterns",
+          text: "Hidden Patterns That Increase Risk",
+        },
+        {
+          type: "list",
+          listType: "unordered",
+          items: [
+            "<strong>Stress eating</strong> can increase sodium, refined carbohydrate, and saturated fat intake.",
+            "<strong>Skipped movement</strong> removes one of the body's most effective pressure-release tools.",
+            "<strong>Late-night screen time</strong> can compress sleep and weaken next-day resilience.",
+            "<strong>Social withdrawal</strong> may remove protective support during difficult periods.",
+          ],
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "recovery-tools",
+          text: "Recovery Tools That Are Easy to Start",
+        },
+        {
+          type: "paragraph",
+          html: "A five-minute breathing break, a short walk, journaling, therapy, and regular connection with trusted people can all reduce stress load. The best tool is the one you can repeat on an ordinary day.",
+        },
+        {
+          type: "callout",
+          variant: "tip",
+          title: "Two-Minute Reset",
+          text: "Try six slow breaths per minute for two minutes. Keep the exhale slightly longer than the inhale to encourage a calmer physiological state.",
+        },
+      ],
+    },
   },
   {
     id: "plant-based-diet-and-heart",
@@ -387,7 +552,62 @@ export const articles: Article[] = [
       "nutrition",
       "cholesterol",
     ],
-    content: { blocks: [] },
+    content: {
+      blocks: [
+        {
+          type: "paragraph",
+          html: "A plant-forward diet emphasizes vegetables, fruits, legumes, whole grains, nuts, seeds, and minimally processed foods. It does not have to be all-or-nothing to support better cardiovascular markers.",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "what-plant-forward-means",
+          text: "What Plant-Forward Means",
+        },
+        {
+          type: "paragraph",
+          html: "Plant-forward eating can include fully vegan patterns, vegetarian patterns, Mediterranean-style meals, or simply a higher proportion of plants on the plate. The common thread is fiber-rich, nutrient-dense food replacing more processed choices.",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "heart-benefits",
+          text: "Potential Heart Benefits",
+        },
+        {
+          type: "list",
+          listType: "unordered",
+          items: [
+            "<strong>Soluble fiber</strong> from oats, beans, lentils, and fruit can help lower LDL cholesterol.",
+            "<strong>Unsaturated fats</strong> from nuts, seeds, avocado, and olive oil support healthier lipid patterns.",
+            "<strong>Potassium-rich foods</strong> such as leafy greens and legumes can support blood pressure control.",
+            "<strong>Lower energy density</strong> may make weight management easier without strict calorie counting.",
+          ],
+        },
+        {
+          type: "callout",
+          variant: "note",
+          title: "Plan the Plate",
+          text: "A practical plate is half non-starchy vegetables, one quarter protein-rich plants, and one quarter whole grains or starchy vegetables.",
+        },
+        {
+          type: "heading",
+          level: 2,
+          id: "common-gaps",
+          text: "Common Nutrition Gaps",
+        },
+        {
+          type: "paragraph",
+          html: "People eating mostly or entirely plant-based should pay attention to vitamin B12, iron, iodine, calcium, vitamin D, omega-3 fatty acids, and total protein. A clinician or registered dietitian can help personalize the plan.",
+        },
+        {
+          type: "callout",
+          variant: "tip",
+          title: "Start Small",
+          text: "Begin with one plant-forward meal you already enjoy, such as lentil soup, bean chili, tofu stir-fry, or oatmeal with nuts and berries.",
+        },
+      ],
+    },
   },
 ];