diff --git a/.prettierrc.mjs b/.prettierrc.mjs
index 7e619305dc..8f019a8916 100644
--- a/.prettierrc.mjs
+++ b/.prettierrc.mjs
@@ -1,11 +1,16 @@
 /** @type {import("prettier").Config} */
 export default {
-  plugins: ["prettier-plugin-astro"],
+  singleQuote: true,
+  plugins: [
+    'prettier-plugin-astro',
+    'prettier-plugin-tailwindcss',
+    'prettier-plugin-astro-organize-imports',
+  ],
   overrides: [
     {
-      files: "*.astro",
+      files: '*.astro',
       options: {
-        parser: "astro",
+        parser: 'astro',
       },
     },
   ],
diff --git a/package-lock.json b/package-lock.json
index f1fa15fe8a..fc74194812 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "astro": "^4.16.10",
         "astro-icon": "^1.1.2",
         "astro-seo": "^0.8.4",
+        "class-variance-authority": "^0.7.0",
         "htmx.org": "^2.0.3",
         "markdown-it": "^14.0.0",
         "node-html-parser": "^6.1.13",
@@ -32,7 +33,9 @@
         "@iconify-json/simple-icons": "^1.2.11",
         "@iconify/tailwind": "^1.1.3",
         "prettier": "^3.3.3",
-        "prettier-plugin-astro": "^0.14.1"
+        "prettier-plugin-astro": "^0.14.1",
+        "prettier-plugin-astro-organize-imports": "^0.4.11",
+        "prettier-plugin-tailwindcss": "^0.6.8"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1627,192 +1630,234 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz",
-      "integrity": "sha512-WTWD8PfoSAJ+qL87lE7votj3syLavxunWhzCnx3XFxFiI/BA/r3X7MUM8dVrH8rb2r4AiO8jJsr3ZjdaftmnfA==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.26.0.tgz",
+      "integrity": "sha512-gJNwtPDGEaOEgejbaseY6xMFu+CPltsc8/T+diUTTbOQLqD+bnrJq9ulH6WD69TqwqWmrfRAtUv30cCFZlbGTQ==",
       "cpu": [
         "arm"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.0.tgz",
-      "integrity": "sha512-a1sR2zSK1B4eYkiZu17ZUZhmUQcKjk2/j9Me2IDjk1GHW7LB5Z35LEzj9iJch6gtUfsnvZs1ZNyDW2oZSThrkA==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.26.0.tgz",
+      "integrity": "sha512-YJa5Gy8mEZgz5JquFruhJODMq3lTHWLm1fOy+HIANquLzfIOzE9RA5ie3JjCdVb9r46qfAQY/l947V0zfGJ0OQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.0.tgz",
-      "integrity": "sha512-zOnKWLgDld/svhKO5PD9ozmL6roy5OQ5T4ThvdYZLpiOhEGY+dp2NwUmxK0Ld91LrbjrvtNAE0ERBwjqhZTRAA==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.26.0.tgz",
+      "integrity": "sha512-ErTASs8YKbqTBoPLp/kA1B1Um5YSom8QAc4rKhg7b9tyyVqDBlQxy7Bf2wW7yIlPGPg2UODDQcbkTlruPzDosw==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.0.tgz",
-      "integrity": "sha512-7doS8br0xAkg48SKE2QNtMSFPFUlRdw9+votl27MvT46vo44ATBmdZdGysOevNELmZlfd+NEa0UYOA8f01WSrg==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.26.0.tgz",
+      "integrity": "sha512-wbgkYDHcdWW+NqP2mnf2NOuEbOLzDblalrOWcPyY6+BRbVhliavon15UploG7PpBRQ2bZJnbmh8o3yLoBvDIHA==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ]
     },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.26.0.tgz",
+      "integrity": "sha512-Y9vpjfp9CDkAG4q/uwuhZk96LP11fBz/bYdyg9oaHYhtGZp7NrbkQrj/66DYMMP2Yo/QPAsVHkV891KyO52fhg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.26.0.tgz",
+      "integrity": "sha512-A/jvfCZ55EYPsqeaAt/yDAG4q5tt1ZboWMHEvKAH9Zl92DWvMIbnZe/f/eOXze65aJaaKbL+YeM0Hz4kLQvdwg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.0.tgz",
-      "integrity": "sha512-pWJsfQjNWNGsoCq53KjMtwdJDmh/6NubwQcz52aEwLEuvx08bzcy6tOUuawAOncPnxz/3siRtd8hiQ32G1y8VA==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.26.0.tgz",
+      "integrity": "sha512-paHF1bMXKDuizaMODm2bBTjRiHxESWiIyIdMugKeLnjuS1TCS54MF5+Y5Dx8Ui/1RBPVRE09i5OUlaLnv8OGnA==",
       "cpu": [
         "arm"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.0.tgz",
-      "integrity": "sha512-efRIANsz3UHZrnZXuEvxS9LoCOWMGD1rweciD6uJQIx2myN3a8Im1FafZBzh7zk1RJ6oKcR16dU3UPldaKd83w==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.26.0.tgz",
+      "integrity": "sha512-cwxiHZU1GAs+TMxvgPfUDtVZjdBdTsQwVnNlzRXC5QzIJ6nhfB4I1ahKoe9yPmoaA/Vhf7m9dB1chGPpDRdGXg==",
       "cpu": [
         "arm"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.0.tgz",
-      "integrity": "sha512-ZrPhydkTVhyeGTW94WJ8pnl1uroqVHM3j3hjdquwAcWnmivjAwOYjTEAuEDeJvGX7xv3Z9GAvrBkEzCgHq9U1w==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.26.0.tgz",
+      "integrity": "sha512-4daeEUQutGRCW/9zEo8JtdAgtJ1q2g5oHaoQaZbMSKaIWKDQwQ3Yx0/3jJNmpzrsScIPtx/V+1AfibLisb3AMQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.0.tgz",
-      "integrity": "sha512-cfaupqd+UEFeURmqNP2eEvXqgbSox/LHOyN9/d2pSdV8xTrjdg3NgOFJCtc1vQ/jEke1qD0IejbBfxleBPHnPw==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.26.0.tgz",
+      "integrity": "sha512-eGkX7zzkNxvvS05ROzJ/cO/AKqNvR/7t1jA3VZDi2vRniLKwAWxUr85fH3NsvtxU5vnUUKFHKh8flIBdlo2b3Q==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.0.tgz",
-      "integrity": "sha512-ZKPan1/RvAhrUylwBXC9t7B2hXdpb/ufeu22pG2psV7RN8roOfGurEghw1ySmX/CmDDHNTDDjY3lo9hRlgtaHg==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.26.0.tgz",
+      "integrity": "sha512-Odp/lgHbW/mAqw/pU21goo5ruWsytP7/HCC/liOt0zcGG0llYWKrd10k9Fj0pdj3prQ63N5yQLCLiE7HTX+MYw==",
       "cpu": [
         "ppc64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.0.tgz",
-      "integrity": "sha512-H1eRaCwd5E8eS8leiS+o/NqMdljkcb1d6r2h4fKSsCXQilLKArq6WS7XBLDu80Yz+nMqHVFDquwcVrQmGr28rg==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.26.0.tgz",
+      "integrity": "sha512-MBR2ZhCTzUgVD0OJdTzNeF4+zsVogIR1U/FsyuFerwcqjZGvg2nYe24SAHp8O5sN8ZkRVbHwlYeHqcSQ8tcYew==",
       "cpu": [
         "riscv64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.0.tgz",
-      "integrity": "sha512-zJ4hA+3b5tu8u7L58CCSI0A9N1vkfwPhWd/puGXwtZlsB5bTkwDNW/+JCU84+3QYmKpLi+XvHdmrlwUwDA6kqw==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.26.0.tgz",
+      "integrity": "sha512-YYcg8MkbN17fMbRMZuxwmxWqsmQufh3ZJFxFGoHjrE7bv0X+T6l3glcdzd7IKLiwhT+PZOJCblpnNlz1/C3kGQ==",
       "cpu": [
         "s390x"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.0.tgz",
-      "integrity": "sha512-e2hrvElFIh6kW/UNBQK/kzqMNY5mO+67YtEh9OA65RM5IJXYTWiXjX6fjIiPaqOkBthYF1EqgiZ6OXKcQsM0hg==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.26.0.tgz",
+      "integrity": "sha512-ZuwpfjCwjPkAOxpjAEjabg6LRSfL7cAJb6gSQGZYjGhadlzKKywDkCUnJ+KEfrNY1jH5EEoSIKLCb572jSiglA==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.0.tgz",
-      "integrity": "sha512-1vvmgDdUSebVGXWX2lIcgRebqfQSff0hMEkLJyakQ9JQUbLDkEaMsPTLOmyccyC6IJ/l3FZuJbmrBw/u0A0uCQ==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.26.0.tgz",
+      "integrity": "sha512-+HJD2lFS86qkeF8kNu0kALtifMpPCZU80HvwztIKnYwym3KnA1os6nsX4BGSTLtS2QVAGG1P3guRgsYyMA0Yhg==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.0.tgz",
-      "integrity": "sha512-s5oFkZ/hFcrlAyBTONFY1TWndfyre1wOMwU+6KCpm/iatybvrRgmZVM+vCFwxmC5ZhdlgfE0N4XorsDpi7/4XQ==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.26.0.tgz",
+      "integrity": "sha512-WUQzVFWPSw2uJzX4j6YEbMAiLbs0BUysgysh8s817doAYhR5ybqTI1wtKARQKo6cGop3pHnrUJPFCsXdoFaimQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.0.tgz",
-      "integrity": "sha512-G9+TEqRnAA6nbpqyUqgTiopmnfgnMkR3kMukFBDsiyy23LZvUCpiUwjTRx6ezYCjJODXrh52rBR9oXvm+Fp5wg==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.26.0.tgz",
+      "integrity": "sha512-D4CxkazFKBfN1akAIY6ieyOqzoOoBV1OICxgUblWxff/pSjCA2khXlASUx7mK6W1oP4McqhgcCsu6QaLj3WMWg==",
       "cpu": [
         "ia32"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.0.tgz",
-      "integrity": "sha512-2jsCDZwtQvRhejHLfZ1JY6w6kEuEtfF9nzYsZxzSlNVKDX+DpsDJ+Rbjkm74nvg2rdx0gwBS+IMdvwJuq3S9pQ==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.26.0.tgz",
+      "integrity": "sha512-2x8MO1rm4PGEP0xWbubJW5RtbNLk3puzAMaLQd3B3JHVw4KcHlmXcO+Wewx9zCoo7EUFiMlu/aZbCJ7VjMzAag==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -1931,9 +1976,10 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "license": "MIT"
     },
     "node_modules/@types/estree-jsx": {
       "version": "1.0.5",
@@ -2776,6 +2822,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
+    "node_modules/class-variance-authority/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/cli-boxes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
@@ -6443,6 +6510,109 @@
         "node": "^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/prettier-plugin-astro-organize-imports": {
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-astro-organize-imports/-/prettier-plugin-astro-organize-imports-0.4.11.tgz",
+      "integrity": "sha512-qJQZ7qgnTVmk8ALe1SXpCVGa2QNanhsKn6ivfGQqWH8SCgQY1/poxLVras0Q4fqRBugR3xPRGxovODk1tmkbwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@astrojs/compiler": "^2.8.0",
+        "typescript": "^5.4.5"
+      },
+      "peerDependencies": {
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-tailwindcss": "*"
+      },
+      "peerDependenciesMeta": {
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-tailwindcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.8.tgz",
+      "integrity": "sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
@@ -6881,11 +7051,12 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.0.tgz",
-      "integrity": "sha512-vo+S/lfA2lMS7rZ2Qoubi6I5hwZwzXeUIctILZLbHI+laNtvhhOIon2S1JksA5UEDQ7l3vberd0fxK44lTYjbQ==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.26.0.tgz",
+      "integrity": "sha512-ilcl12hnWonG8f+NxU6BlgysVA0gvY2l8N0R84S1HcINbW20bvwuCngJkkInV6LXhwRpucsW5k1ovDwEdBVrNg==",
+      "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.5"
+        "@types/estree": "1.0.6"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -6895,22 +7066,24 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.21.0",
-        "@rollup/rollup-android-arm64": "4.21.0",
-        "@rollup/rollup-darwin-arm64": "4.21.0",
-        "@rollup/rollup-darwin-x64": "4.21.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.21.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.21.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.21.0",
-        "@rollup/rollup-linux-arm64-musl": "4.21.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.21.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.21.0",
-        "@rollup/rollup-linux-x64-gnu": "4.21.0",
-        "@rollup/rollup-linux-x64-musl": "4.21.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.21.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.21.0",
-        "@rollup/rollup-win32-x64-msvc": "4.21.0",
+        "@rollup/rollup-android-arm-eabi": "4.26.0",
+        "@rollup/rollup-android-arm64": "4.26.0",
+        "@rollup/rollup-darwin-arm64": "4.26.0",
+        "@rollup/rollup-darwin-x64": "4.26.0",
+        "@rollup/rollup-freebsd-arm64": "4.26.0",
+        "@rollup/rollup-freebsd-x64": "4.26.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.26.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.26.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.26.0",
+        "@rollup/rollup-linux-arm64-musl": "4.26.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.26.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.26.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.26.0",
+        "@rollup/rollup-linux-x64-gnu": "4.26.0",
+        "@rollup/rollup-linux-x64-musl": "4.26.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.26.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.26.0",
+        "@rollup/rollup-win32-x64-msvc": "4.26.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -7601,7 +7774,6 @@
       "version": "5.4.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
       "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/package.json b/package.json
index de5e3771a7..ac968bb6ac 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "astro": "^4.16.10",
     "astro-icon": "^1.1.2",
     "astro-seo": "^0.8.4",
+    "class-variance-authority": "^0.7.0",
     "htmx.org": "^2.0.3",
     "markdown-it": "^14.0.0",
     "node-html-parser": "^6.1.13",
@@ -39,9 +40,11 @@
   },
   "devDependencies": {
     "@iconify-json/mdi": "^1.2.1",
-    "@iconify/tailwind": "^1.1.3",
     "@iconify-json/simple-icons": "^1.2.11",
+    "@iconify/tailwind": "^1.1.3",
     "prettier": "^3.3.3",
-    "prettier-plugin-astro": "^0.14.1"
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-astro-organize-imports": "^0.4.11",
+    "prettier-plugin-tailwindcss": "^0.6.8"
   }
 }
diff --git a/src/layouts/Footer.astro b/src/components/Footer.astro
similarity index 51%
rename from src/layouts/Footer.astro
rename to src/components/Footer.astro
index 1b94bba9a9..23a479ba88 100644
--- a/src/layouts/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,27 +1,28 @@
 ---
-import { Icon } from "astro-icon/components";
-import { Image } from "astro:assets";
-import { getEntry } from "astro:content";
-import flakeWhite from "../assets/image/flake-white.svg";
-import Container from "../components/layout/Container.astro";
-import InlineSVG from "../components/util/InlineSVG.astro";
-const footerMenu = await getEntry("menus", "footer");
+import { Icon } from 'astro-icon/components';
+import { getEntry } from 'astro:content';
+
+import Container from '@/components/layout/Container.astro';
+import InlineSVG from '@/components/util/InlineSVG.astro';
+import Link from '@/components/util/Link.astro';
+
+const footerMenu = await getEntry('menus', 'footer');
 ---
 
 <footer>
-  <div class="bg-nix-blue-darker text-white font-light clear-both">
+  <div class="clear-both bg-nix-blue-darker text-white">
     <Container>
-      <div class="flex flex-col sm:flex-row flex-wrap py-8 gap-y-8">
+      <div class="flex flex-col flex-wrap gap-y-8 py-14 sm:flex-row">
         {
           footerMenu.data.sections.map((menu) => (
             <div class="basis-1/2 lg:basis-1/4">
-              <h4 class="text-xl font-bold font-heading text-nix-blue mb-4">
+              <h4 class="mb-4 font-heading text-xl font-bold text-nix-blue">
                 {menu.name}
               </h4>
-              <ul class="space-y-2 font-extralight">
+              <ul class="space-y-2">
                 {menu.items.map((item) => (
                   <li>
-                    <a href={item.link}>{item.name}</a>
+                    <Link href={item.link}>{item.name}</Link>
                   </li>
                 ))}
               </ul>
@@ -29,20 +30,20 @@ const footerMenu = await getEntry("menus", "footer");
           ))
         }
       </div>
+
       <hr class="border-nix-blue-light" />
-      <div
-        class="flex flex-col lg:flex-row flex-wrap py-8 gap-8 lg:gap-0 font-extralight"
-      >
-        <div class="basis-1/2 flex flex-row flex flex-row gap-2">
+
+      <div class="flex flex-col flex-wrap gap-4 py-4 lg:flex-row lg:gap-0">
+        <div class="flex basis-1/2 flex-row gap-2">
           <InlineSVG
             src="/src/assets/image/flake-white.svg"
-            class="inline-block w-16 h-16"
+            class="inline-block h-14 w-14"
           />
           <div class="flex flex-col justify-center">
             <div>
-              Copyright © {new Date().getFullYear()} NixOS contributors
+              Copyright &copy; {new Date().getFullYear()} NixOS contributors
             </div>
-            <a
+            <Link
               href="https://github.com/NixOS/nixos-homepage/blob/master/LICENSES/CC-BY-SA-4.0.txt"
             >
               <abbr
@@ -50,27 +51,28 @@ const footerMenu = await getEntry("menus", "footer");
               >
                 CC-BY-SA-4.0
               </abbr>
-            </a>
+            </Link>
           </div>
         </div>
-        <hr class="lg:hidden border-nix-blue-light" />
+
+        <hr class="border-nix-blue-light lg:hidden" />
+
         <div
-          class="basis-1/2 flex flex-row justify-between lg:justify-end gap-4 font-extralight"
+          class="flex basis-1/2 flex-row justify-between gap-4 lg:justify-end"
         >
           <h4 class="my-auto">Connect with us:</h4>
-          <div class="my-auto flex flex-row gap-3">
+          <div class="my-auto flex flex-row gap-4">
             {
               footerMenu.data.social.map((item) => (
-                <a
+                <Link
                   href={item.link}
                   aria-label={`Connect with us on ${item.name}`}
                 >
                   <Icon
-                    alt={item.name}
-                    class="w-7 h-7"
+                    class="h-5 w-5"
                     name={`simple-icons:${item.name.toLowerCase()}`}
                   />
-                </a>
+                </Link>
               ))
             }
           </div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000000..5978458d3e
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,89 @@
+---
+import { Icon } from 'astro-icon/components';
+import { getEntry } from 'astro:content';
+
+import Container from '@/components/layout/Container.astro';
+import InlineSVG from '@/components/util/InlineSVG.astro';
+import Link from '@/components/util/Link.astro';
+
+const headerMenu = await getEntry('menus', 'header');
+const currentTopRoute = `/${Astro.url.pathname.split('/')[1]}`;
+
+const navbarItemStyle = `text-center text-nix-blue-dark md:text-black md:hover:border-b-nix-blue-light border-b-4`;
+const navbarItemInactiveStyle = `border-b-nix-blue-extralight md:border-b-transparent bg-nix-blue-extralight md:bg-transparent`;
+const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-white md:text-black md:bg-transparent font-bold`;
+---
+
+<header role="banner" class="sticky top-0 z-50 bg-white text-black drop-shadow">
+  <Container class="flex flex-col justify-between md:flex-row md:items-center">
+    <div class="my-2 flex items-center justify-between gap-2 text-4xl">
+      <Link href="/" class="flex select-none items-center gap-2">
+        <InlineSVG
+          class="h-12 w-auto"
+          src="/src/assets/image/nixos-logo-notext.svg"
+          alt="Nixos Logo"
+        />
+        <InlineSVG
+          class="block h-12 w-auto md:hidden xl:block"
+          src="/src/assets/image/nixos-logo-text.svg"
+          alt="Nixos Logo Text"
+        />
+      </Link>
+
+      <button
+        aria-label="Main Navigation Toggle"
+        class="block rounded-lg bg-nix-blue-light p-4 md:hidden"
+        id="navigation-toggle"
+      >
+        <span class="mb-1.5 block h-1 w-8 bg-white"></span>
+        <span class="mb-1.5 block h-1 w-8 bg-white"></span>
+        <span class="block h-1 w-8 bg-white"></span>
+      </button>
+    </div>
+
+    <nav
+      id="navbar-menu"
+      class="flex flex-col gap-0.5 pb-4 font-medium leading-none md:flex md:flex-row md:gap-5 md:pb-0"
+      role="menubar"
+      aria-label="Main Navigation"
+    >
+      {
+        headerMenu.data.items.map((item) => (
+          <Link
+            class:list={[
+              'pb-6 pt-7',
+              navbarItemStyle,
+              currentTopRoute === item.link
+                ? navbarItemActiveStyle
+                : navbarItemInactiveStyle,
+            ]}
+            href={item.link}
+          >
+            {item.name}
+          </Link>
+        ))
+      }
+      <Link
+        class={`pt-7 pb-6 md:pt-5 md:pb-3 ${navbarItemStyle} ${navbarItemInactiveStyle}`}
+        href="https://search.nixos.org"
+        arial-label="Nixos package and options search"
+      >
+        <Icon class="hidden h-8 w-8 text-nix-blue md:block" name="mdi:search" />
+        <span class="inline-block md:hidden">Search</span>
+      </Link>
+    </nav>
+  </Container>
+</header>
+
+<script>
+  const navigationToggle = document.getElementById('navigation-toggle');
+  const navbarMenu = document.getElementById('navbar-menu');
+
+  function toggleMenu() {
+    navbarMenu.classList.toggle('hidden');
+    navbarMenu.classList.toggle('flex');
+  }
+  toggleMenu();
+
+  navigationToggle.addEventListener('click', () => toggleMenu());
+</script>
diff --git a/src/components/layout/CodeBlock.astro b/src/components/layout/CodeBlock.astro
index 49424a74cb..1c52bdccde 100644
--- a/src/components/layout/CodeBlock.astro
+++ b/src/components/layout/CodeBlock.astro
@@ -1,19 +1,19 @@
 ---
 interface Props {
   lines: Array<{ shellPrompt: string; code: string }>;
-  type?: "code" | "storepath";
+  type?: 'code' | 'storepath';
 }
 
-const { lines, type = "code" } = Astro.props;
+const { lines, type = 'code' } = Astro.props;
 ---
 
 <pre
   class:list={[
-    "border-1 bg-[#3a3a3a] px-4 py-4 rounded-3xl my-2 mb-4 overflow-x-auto",
-    { "bg-[#3a3a3a] text-white": type === "code" },
+    'my-2 mb-4 overflow-x-auto rounded border bg-[#3a3a3a] px-4 py-4',
+    { 'bg-[#3a3a3a] text-white': type === 'code' },
     {
-      "font-mono font-[500] bg-nix-blue-extralight border-nix-blue-extralight text-black shadow-inner":
-        type === "storepath",
+      'border-nix-blue-extralight bg-nix-blue-extralight font-mono font-[500] text-black shadow-inner':
+        type === 'storepath',
     },
   ]}>
 {lines.map((line, idx, {length}) => {
diff --git a/src/components/layout/CodeInline.astro b/src/components/layout/CodeInline.astro
index a5de2f1c5b..1c3afa4b75 100644
--- a/src/components/layout/CodeInline.astro
+++ b/src/components/layout/CodeInline.astro
@@ -2,6 +2,6 @@
 
 ---
 
-<code class="text-nix-orange-dark bg-neutral-100 py-1 px-2 border-1 rounded-lg"
-  ><slot /></code
->
+<code class="bg-neutral-100 rounded-lg border px-2 py-1 text-nix-orange-dark">
+  <slot />
+</code>
diff --git a/src/components/layout/Divider.astro b/src/components/layout/Divider.astro
index 28c97e6568..34b0c3d28b 100644
--- a/src/components/layout/Divider.astro
+++ b/src/components/layout/Divider.astro
@@ -1,35 +1,35 @@
 ---
-import InlineSVG from "../util/InlineSVG.astro";
+import InlineSVG from '@/components/util/InlineSVG.astro';
 
 interface Props {
-  style?: "slope" | "landing_search_bottom";
+  style?: 'slope' | 'landing_search_bottom';
   mirrorX?: boolean;
   mirrorY?: boolean;
 }
 
 const styleMap = {
-  slope: "/src/assets/image/divider/slope_down.svg",
-  landing_search_bottom: "/src/assets/image/divider/landing_search_bottom.svg",
+  slope: '/src/assets/image/divider/slope_down.svg',
+  landing_search_bottom: '/src/assets/image/divider/landing_search_bottom.svg',
 };
 
 const heightMap = {
-  slope: "h-16",
-  landing_search_bottom: "h-16 md:h-48",
+  slope: 'h-16',
+  landing_search_bottom: 'h-16 md:h-48',
 };
 
-const { style = "slope", mirrorX = false, mirrorY = false } = Astro.props;
+const { style = 'slope', mirrorX = false, mirrorY = false } = Astro.props;
 ---
 
 <InlineSVG
   role="separator"
   src={styleMap[style]}
   class:list={[
-    "block left-0 right-0 h-16 w-full",
+    'left-0 right-0 block h-16 w-full',
     heightMap[style],
-    mirrorY ? "translate-y-[1px]" : "translate-y-[-1px]",
+    mirrorY ? 'translate-y-[1px]' : 'translate-y-[-1px]',
     {
-      "-scale-x-100": mirrorX,
-      "-scale-y-100": mirrorY,
+      '-scale-x-100': mirrorX,
+      '-scale-y-100': mirrorY,
     },
   ]}
   aria-hidden="true"
diff --git a/src/components/layout/PageHeader.astro b/src/components/layout/PageHeader.astro
index 14f85efecb..425e4bbbf6 100644
--- a/src/components/layout/PageHeader.astro
+++ b/src/components/layout/PageHeader.astro
@@ -1,31 +1,32 @@
 ---
+import Container from '@/components/layout/Container.astro';
+import Link from '@/components/util/Link.astro';
+
 interface Props {
   text?: string;
   subtext?: string;
   parentPath?: string;
 }
 
-const { text = "", subtext, parentPath = undefined }: Props = Astro.props;
-
-import Container from "./Container.astro";
+const { text = '', subtext, parentPath = undefined }: Props = Astro.props;
 ---
 
 <div
-  class="inline-svg-header-nixdarkblue bg-bottom bg-no-repeat bg-cover py-24 hidden md:block"
+  class="hidden bg-cover bg-bottom bg-no-repeat py-24 inline-svg-header-nixdarkblue md:block"
 >
-  <Container class="text-white grid grid-cols-3">
-    <div class="flex flex-col gap-4 col-span-2">
+  <Container class="grid grid-cols-3 text-white">
+    <div class="col-span-2 flex flex-col gap-4">
       {
         parentPath && (
-          <a
+          <Link
             href={parentPath}
-            class="!text-white -mb-4 -mt-6 invisible md:visible"
+            class="invisible -mb-4 -mt-6 !text-white md:visible"
           >
-            <span class="text-nixblue">←</span> Back
-          </a>
+            <span>←</span> Back
+          </Link>
         )
       }
-      <h1 class="text-4xl font-bold font-heading text-left">
+      <h1 class="text-left font-heading text-4xl font-bold">
         {text}
       </h1>
       {subtext && <p class="text text-left">{subtext}</p>}
@@ -35,7 +36,7 @@ import Container from "./Container.astro";
 
 <div class="bg-nix-blue text-white md:hidden">
   <Container class="px-12 py-16">
-    <h1 class="text-3xl font-bold text-center">
+    <h1 class="text-center text-3xl font-bold">
       {text}
     </h1>
   </Container>
diff --git a/src/components/layout/SponsorLogo.astro b/src/components/layout/SponsorLogo.astro
index 25bb38b205..969d3a2b77 100644
--- a/src/components/layout/SponsorLogo.astro
+++ b/src/components/layout/SponsorLogo.astro
@@ -1,4 +1,7 @@
 ---
+import Card from '@/components/ui/Card.astro';
+import Link from '@/components/util/Link.astro';
+
 const {
   class: extraClasses,
   href: externalLink,
@@ -7,10 +10,10 @@ const {
 } = Astro.props;
 ---
 
-<div
-  class=`flex min-h-24 xl:min-h-20 flex-col justify-center bg-white p-4 rounded-lg ${extraClasses}`
+<Card
+  class=`flex min-h-24 xl:min-h-20 flex-col justify-center bg-white ${extraClasses}`
 >
-  <a href={externalLink}>
+  <Link href={externalLink}>
     <img class="h-full w-full" src={imageSource} alt={altText} />
-  </a>
-</div>
+  </Link>
+</Card>
diff --git a/src/components/layout/StorePathBlock.astro b/src/components/layout/StorePathBlock.astro
index 4d0fd6336f..9e4a486f81 100644
--- a/src/components/layout/StorePathBlock.astro
+++ b/src/components/layout/StorePathBlock.astro
@@ -1,11 +1,11 @@
 ---
-import CodeBlock from "./CodeBlock.astro";
+import CodeBlock from '@/components/layout/CodeBlock.astro';
 
 interface Props {
   path: string;
 }
 
-const { path = "/" } = Astro.props;
+const { path = '/' } = Astro.props;
 ---
 
-<CodeBlock lines={[{ shellPrompt: "", code: path }]} type="storepath" />
+<CodeBlock lines={[{ shellPrompt: '', code: path }]} type="storepath" />
diff --git a/src/components/layout/Tabs.astro b/src/components/layout/Tabs.astro
index bb075705e3..13055d9857 100644
--- a/src/components/layout/Tabs.astro
+++ b/src/components/layout/Tabs.astro
@@ -1,9 +1,9 @@
 ---
-import crypto from "node:crypto";
+import crypto from 'node:crypto';
 
-export interface Props extends astroHTML.JSX.HTMLAttributes {}
+import Container from '@/components/layout/Container.astro';
 
-import Container from "./Container.astro";
+export interface Props extends astroHTML.JSX.HTMLAttributes {}
 
 const props = Astro.props as Props;
 /* ·········································································· */
@@ -11,13 +11,13 @@ const props = Astro.props as Props;
 const tabs: string[] = [];
 const panels: string[] = [];
 
-let inlineStyles = "";
+let inlineStyles = '';
 
 {
   let index = 0;
   const classes: string[] = [];
   Object.entries(Astro.slots).forEach(([name]) => {
-    if (name.startsWith("tab")) {
+    if (name.startsWith('tab')) {
       index += 1;
 
       tabs.push(name);
@@ -25,7 +25,7 @@ let inlineStyles = "";
       panels.push(name);
     }
   });
-  inlineStyles += classes.join(",\n");
+  inlineStyles += classes.join(',\n');
 }
 inlineStyles +=
   ` {` +
@@ -50,10 +50,10 @@ const uid = crypto.randomUUID();
 </style>
 
 <script>
-  const buttons = document.querySelectorAll(["input.tab-selector"]);
+  const buttons = document.querySelectorAll(['input.tab-selector']);
 
   buttons.forEach((button) => {
-    button.addEventListener("click", function (event) {
+    button.addEventListener('click', function (event) {
       const radioMatch = Array.from(this.classList).find((value) =>
         /^radio-\d+$/.test(value),
       );
@@ -64,79 +64,79 @@ const uid = crypto.randomUUID();
         `div[panels-id='${this.name}'] div.panel`,
       );
 
-      panels.forEach((panel) => panel.classList.remove("panel-visible"));
+      panels.forEach((panel) => panel.classList.remove('panel-visible'));
 
       const panel = document.querySelector(
         `div[panels-id='${this.name}'] div.panel-${radioIdx}`,
       );
 
-      panel.classList.add("panel-visible");
+      panel.classList.add('panel-visible');
 
       Array.from(this.parentNode.parentNode.children).forEach((tab) =>
-        tab.classList.remove("bg-white"),
+        tab.classList.remove('bg-white'),
       );
-      this.parentNode.classList.add("bg-white");
+      this.parentNode.classList.add('bg-white');
     });
   });
 
   // show the first panel
   document
-    .querySelectorAll(".panels div:first-child")
-    .forEach((panel) => panel.classList.add("panel-visible"));
+    .querySelectorAll('.panels div:first-child')
+    .forEach((panel) => panel.classList.add('panel-visible'));
 
   // style the background of the first tab
   document
-    .querySelectorAll(".tab-bar .tab-wrapper:first-child")
-    .forEach((tab) => tab.classList.add("bg-white"));
+    .querySelectorAll('.tab-bar .tab-wrapper:first-child')
+    .forEach((tab) => tab.classList.add('bg-white'));
 </script>
 
 <div
-  {...{ ...props, class: undefined, "class:list": undefined }}
-  class:list={["tabs", props["class:list"], props.class]}
+  {...{ ...props, class: undefined, 'class:list': undefined }}
+  class:list={['tabs', props['class:list'], props.class]}
 >
   <style set:html={inlineStyles}></style>
 
-  <Container class="grid lg:grid-cols-[30%_auto] gap-8 px-12 pt-8 w-full">
-    <nav class:list={["tab-bar"]}>
+  <Container class="grid w-full gap-8 px-12 pt-8 lg:grid-cols-[30%_auto]">
+    <nav class:list={['tab-bar']}>
       <Container
-        class="grid md:grid-cols-1 gap-0 !px-0 py-8 bg-nix-blue-extralight rounded-3xl"
+        class="grid gap-0 rounded-3xl bg-nix-blue-extralight !px-0 py-8 md:grid-cols-1"
       >
         {
           tabs.map(async (name, idx) => {
             const index = idx + 1;
-            if (name.startsWith("tab")) {
+            if (name.startsWith('tab')) {
               const render = await Astro.slots.render(name);
               return (
-                <div class:list={["tab-wrapper", `tab-${index}`]}>
+                <div class:list={['tab-wrapper', `tab-${index}`]}>
                   <input
                     class:list={[
-                      "radio",
+                      'radio',
                       `radio-${index}`,
-                      "tab-selector",
-                      "peer",
-                      "absolute",
-                      "w-0",
-                      "h-0",
-                      "overflow-hidden",
-                      "whitespace-nowrap",
+                      'tab-selector',
+                      'peer',
+                      'absolute',
+                      'w-0',
+                      'h-0',
+                      'overflow-hidden',
+                      'whitespace-nowrap',
                     ]}
                     type="radio"
                     name={uid}
-                    checked={name.endsWith("active") || index === 1}
+                    checked={name.endsWith('active') || index === 1}
                     id={`${uid}-${index}`}
                   />
                   <label
                     class:list={[
-                      "tab",
-                      "text-nix-blue-light",
-                      "text-lg",
-                      "font-bold",
-                      "peer-checked:text-nix-blue",
-                      "py-12",
-                      "px-8",
-                      "w-full",
-                      "justify-start",
-                      "content-center",
+                      'tab',
+                      'text-nix-blue-light',
+                      'text-lg',
+                      'font-bold',
+                      'peer-checked:text-nix-blue',
+                      'py-12',
+                      'px-8',
+                      'w-full',
+                      'justify-start',
+                      'content-center',
                     ]}
                     for={`${uid}-${index}`}
                   >
@@ -151,11 +151,11 @@ const uid = crypto.randomUUID();
       </Container>
     </nav>
 
-    <div class:list={["panels"]} panels-id={uid}>
+    <div class:list={['panels']} panels-id={uid}>
       {
         panels.map(async (name, index) => (
           <div
-            class:list={["panel", `panel-${index + 1}`, "w-full"]}
+            class:list={['panel', `panel-${index + 1}`, 'w-full']}
             set:html={await Astro.slots.render(name)}
             hidden
             invisible
diff --git a/src/components/pages/blog/BlogListEntry.astro b/src/components/pages/blog/BlogListEntry.astro
index 2f55dbefa5..c2392fed08 100644
--- a/src/components/pages/blog/BlogListEntry.astro
+++ b/src/components/pages/blog/BlogListEntry.astro
@@ -1,23 +1,22 @@
 ---
-import { generatePathFromPost, createExcerpt } from "../../../lib/utils";
+import Link from '@/components/util/Link.astro';
+import { createExcerpt, generatePathFromPost } from '@/lib/utils';
 
 const { post } = Astro.props;
 ---
 
-<article
-  data-category={post.slug.split("/")[0]}
-  class="font-light"
-  aria-hidden="false"
->
-  <a href={generatePathFromPost(post)}>
+<article data-category={post.slug.split('/')[0]} aria-hidden="false">
+  <Link href={generatePathFromPost(post)}>
     <h2
-      class="text-4xl leading-tight text-nix-blue font-heading font-ned, composition in a document, page, applicaextrabold"
+      class="font-ned, composition in a document, page, applicaextrabold font-heading text-4xl leading-tight text-nix-blue"
     >
       {post.data.title}
     </h2>
-  </a>
-  <p class="text-gray-700 text-xs mb-2">
-    - Published on {post.data.date ? post.data.date.toDateString() : ""}
+  </Link>
+
+  <p class="mb-2 text-xs text-gray-700">
+    - Published on {post.data.date ? post.data.date.toDateString() : ''}
   </p>
-  <p class="font-extralight">{createExcerpt(post.body)}...</p>
+
+  <p>{createExcerpt(post.body)}...</p>
 </article>
diff --git a/src/components/pages/blog/BlogMenuItem.astro b/src/components/pages/blog/BlogMenuItem.astro
new file mode 100644
index 0000000000..a2e3122796
--- /dev/null
+++ b/src/components/pages/blog/BlogMenuItem.astro
@@ -0,0 +1,69 @@
+---
+import Card from '@/components/ui/Card.astro';
+import InlineSVG from '@/components/util/InlineSVG.astro';
+import Link from '@/components/util/Link.astro';
+
+const { menuItem } = Astro.props;
+---
+
+<div class="flex flex-row gap-4 md:flex-col">
+  <div class="flex-1">
+    <input
+      name="category"
+      type="checkbox"
+      role="checkbox"
+      id={`check-${menuItem.id}`}
+      value={menuItem.id}
+      class="peer h-0 w-0 opacity-0"
+      checked
+    />
+
+    <Card
+      as="label"
+      for={`check-${menuItem.id}`}
+      class={`
+        before:block
+        before:absolute
+        before:h-8
+        before:w-8
+        before:icon-[mdi--checkbox-blank-outline]
+        md:before:top-2
+        md:before:right-2
+        before:right-4
+        peer-checked:before:block
+        peer-checked:before:absolute
+        peer-checked:before:h-8
+        peer-checked:before:w-8
+        peer-checked:before:icon-[mdi--checkbox-marked-outline]
+        relative p-4 md:p-8 gap-2 w-full md:w-auto text-nix-blue border-1 fill-nix-blue hover:fill-white border-nix-blue flex md:flex-col items-center hover:bg-nix-blue-hover hover:text-white cursor-pointer peer-checked:bg-nix-blue peer-checked:text-white peer-checked:fill-white hover:peer-checked:border-nix-blue-hover hover:peer-checked:bg-nix-blue-hover peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2
+      `}
+    >
+      <InlineSVG src={menuItem.icon} class="w-12 md:w-24" />
+      <span>{menuItem.title}</span>
+    </Card>
+  </div>
+
+  <div class="pt-6 md:hidden">
+    <Card
+      as="label"
+      class="relative flex w-full cursor-pointer items-center gap-2 border-1 border-nix-blue fill-nix-blue p-4 text-nix-blue hover:bg-nix-blue-hover hover:fill-white hover:text-white peer-checked:bg-nix-blue peer-checked:fill-white peer-checked:text-white hover:peer-checked:border-nix-blue-hover hover:peer-checked:bg-nix-blue-hover peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2 md:w-auto md:flex-col"
+    >
+      <Link href={'/blog/' + menuItem.id + '-rss.xml'}>
+        <InlineSVG
+          src="/src/assets/image/blog-menu/rss.svg"
+          class="inline-block h-12 w-12"
+        />
+      </Link>
+    </Card>
+  </div>
+
+  <div class="rss-small hidden flex-row justify-center md:flex">
+    <Link href={'/blog/' + menuItem.id + '-rss.xml'}>
+      <InlineSVG
+        src="/src/assets/image/blog-menu/rss.svg"
+        class="inline-block h-4 w-4"
+      />
+      rss
+    </Link>
+  </div>
+</div>
diff --git a/src/components/pages/community/Foundation.astro b/src/components/pages/community/Foundation.astro
new file mode 100644
index 0000000000..dd80deff8f
--- /dev/null
+++ b/src/components/pages/community/Foundation.astro
@@ -0,0 +1,86 @@
+---
+import { Image } from 'astro:assets';
+
+import nixosFoundationLogo from '@/assets/image/nixos-foundation-logo.svg';
+import Container from '@/components/layout/Container.astro';
+import Link from '@/components/util/Link.astro';
+
+const { teams = [] } = Astro.props;
+---
+
+<Container class="mb-16 mt-8 grid md:grid-cols-2" id="foundation">
+  <div class="pb-4 text-center md:pb-0">
+    <div class="flex flex-col items-center justify-center">
+      <Image
+        src={nixosFoundationLogo}
+        alt="NixOS Foundation Logo"
+        class="h-72"
+      />
+    </div>
+
+    <div class="mb-4 mt-4 inline-block text-left">
+      <h2 class="font-heading text-3xl font-bold text-nix-blue md:text-center">
+        Board members:
+      </h2>
+
+      <ul class="mx-auto mt-2 list-disc pl-8 md:w-72 md:pl-10">
+        {
+          teams
+            .filter((team) => team.slug.split('_')[1] === 'foundation-board')[0]
+            .data.members.map((member) => (
+              <li class="mb-1">
+                {member.name}
+                {member.title && (
+                  <>
+                    &mdash;
+                    {member.title}
+                  </>
+                )}
+              </li>
+            ))
+        }
+      </ul>
+    </div>
+  </div>
+
+  <div class="space-y-4 leading-relaxed">
+    <h2 class="font-heading text-3xl font-bold text-nix-blue">The mission!</h2>
+
+    <p>
+      The mission of the foundation is to support the Nix ecosystem's
+      infrastructure, and projects implementing the purely functional deployment
+      model.
+    </p>
+
+    <p>
+      In particular, the foundation supports Nix, Nixpkgs, NixOS, and operates:
+    </p>
+
+    <ul class="ml-4 list-disc">
+      <li>
+        <Link href="https://cache.nixos.org"> cache.nixos.org</Link>
+        - the NixOS binary cache, containing over 120TB of prebuilt Nix packages.
+      </li>
+      <li>
+        <Link href="https://hydra.nixos.org"> hydra.nixos.org</Link>
+        - a Nix build farm, consisting of hundreds of macOS, x86-64 (Linux) and aarch64
+        (Linux) build cores. Hydra executes over 350,000 builds each week.
+      </li>
+      <li>
+        <Link href="/community/event-funding"> Event Funding</Link>
+      </li>
+    </ul>
+
+    <p>
+      The NixOS Foundation is a registered non-profit organisation at the
+      Chamber of commerce (Kamer van Koophandel) in Utrecht, The Netherlands.
+      The KvK number is <code>63520583</code>.
+    </p>
+
+    <p>
+      You can contact the foundation by writing an email to <Link
+        href="mailto:foundation@nixos.org">foundation@nixos.org</Link
+      >.
+    </p>
+  </div>
+</Container>
diff --git a/src/components/pages/community/Meetups.astro b/src/components/pages/community/Meetups.astro
new file mode 100644
index 0000000000..484ab9ef84
--- /dev/null
+++ b/src/components/pages/community/Meetups.astro
@@ -0,0 +1,62 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Link from '@/components/util/Link.astro';
+
+const { meetups } = Astro.props;
+---
+
+<Container>
+  <h2 class="mt-8 font-heading text-4xl font-bold text-nix-blue">Meetups</h2>
+
+  <div
+    class="mt-4 grid auto-cols-fr bg-[url(/images/world-map.svg)] bg-contain bg-no-repeat text-center text-lg md:grid-flow-col"
+  >
+    <div>
+      <h3 class="mt-4 font-heading text-2xl font-bold text-nix-blue md:mt-2">
+        America
+      </h3>
+
+      <ul class="mt-2 space-y-4">
+        {
+          meetups.data.america.map((meetup) => (
+            <li>
+              <Link href={meetup.href}>{meetup.location}</Link>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+
+    <div>
+      <h3 class="mt-4 font-heading text-2xl font-bold text-nix-blue md:mt-2">
+        Europe
+      </h3>
+
+      <ul class="mt-2 space-y-4">
+        {
+          meetups.data.europe.map((meetup) => (
+            <li>
+              <Link href={meetup.href}>{meetup.location}</Link>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+
+    <div>
+      <h3 class="mt-4 font-heading text-2xl font-bold text-nix-blue md:mt-2">
+        Asia
+      </h3>
+
+      <ul class="mt-2 space-y-4">
+        {
+          meetups.data.asia.map((meetup) => (
+            <li>
+              <Link href={meetup.href}>{meetup.location}</Link>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+  </div>
+</Container>
diff --git a/src/components/pages/community/NixCon.astro b/src/components/pages/community/NixCon.astro
new file mode 100644
index 0000000000..c68a664a20
--- /dev/null
+++ b/src/components/pages/community/NixCon.astro
@@ -0,0 +1,122 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Divider from '@/components/layout/Divider.astro';
+import Card from '@/components/ui/Card.astro';
+import Link from '@/components/util/Link.astro';
+import NixConEntry from './NixConEntry.astro';
+
+const nixcons = [
+  {
+    title: 'NixCon 2024 - Berlin',
+    date: '25-27 October 2024',
+    href: 'https://2024.nixcon.org/',
+    description:
+      "NixCon is a community-oriented conference for contributors and users of Nix and NixOS. It's about sharing experiences, inspiring people and discussing future development.",
+    imagePath: '/images/nixcon/nixcon.2024.svg',
+  },
+  {
+    title: 'NixCon 2023 - Darmstadt',
+    date: '8-10 September 2023',
+    href: 'https://2023.nixcon.org/',
+    description:
+      "NixCon is a community-oriented conference for contributors and users of Nix and NixOS. It's about sharing experiences, inspiring people and discussing future development.",
+    imagePath: '/images/nixcon/nixcon.2023.svg',
+  },
+  {
+    title: 'NixCon 2022 - Paris',
+    date: '20-22 October 2022',
+    href: 'https://2022.nixcon.org/',
+    description:
+      "NixCon is a community-oriented conference for contributors and users of Nix and NixOS. It's about sharing experiences, inspiring people and discussing future development.",
+    imagePath: '/images/nixcon/nixcon.2022.svg',
+  },
+  {
+    title: 'NixCon 2020 - Online',
+    date: '16-18 October 2020',
+    href: 'https://2019.nixcon.org/',
+    description:
+      "NixCon is a community-oriented conference for contributors and users of Nix and NixOS. It's about sharing experiences, inspiring people and discussing future development.",
+    imagePath: '/images/nixcon/nixcon.2020.svg',
+  },
+  {
+    title: 'NixCon 2019 - Brno',
+    date: '25-27 October 2019',
+    href: 'https://2019.nixcon.org/',
+    description:
+      'NixCon is becoming a regular gathering that everybody expects to happen. This year we met at Brno, Czech Republic. This was the biggest conference so far.',
+    imagePath: '/images/nixcon/nixcon.2019.svg',
+  },
+  {
+    title: 'NixCon 2018 - London',
+    date: '25-27 October 2018',
+    href: 'https://nixcon2018.org/',
+    description:
+      'For the first time a Nix conference outside the Germany. London was the first conference that was not run over the weekend, but during the week.',
+    imagePath: '/images/nixcon/nixcon.2018.svg',
+  },
+  {
+    title: 'NixCon 2017 - Munich',
+    date: '28-31 October 2017',
+    href: 'http://nixcon2017.org/',
+    description:
+      'After a year of a break, Nix community gathered at TNG Technology Consulting in Munich.',
+  },
+  {
+    title: 'NixCon 2015 - Berlin',
+    date: '14-17 November 2015',
+    href: 'https://conf.nixos.org/',
+    description:
+      'Taking place in a Berlin-style converted loft, it was the first NixOS conference. It was the first time Nix community came together in such numbers. In two days there were many interesting talks.',
+  },
+];
+---
+
+<Divider mirrorY />
+
+<div class="bg-nix-blue py-8 text-white">
+  <Container>
+    <h2 class="font-heading text-4xl font-bold">NixCon</h2>
+
+    <p class="mb-4 mt-2 text-xl font-bold">
+      The
+      <Link class="!text-white" href="/community/teams/nixcon">NixCon Team</Link
+      >
+      organizes a conference once a year.
+    </p>
+
+    <div class="grid gap-4 md:grid-cols-3">
+      <Card class="col-span-2 bg-nix-blue-dark md:col-span-1">
+        <h3 class="mb-4 font-heading text-3xl font-bold">Next Conference</h3>
+
+        <NixConEntry
+          imagePath={nixcons[0].imagePath}
+          title={nixcons[0].title}
+          date={nixcons[0].date}
+          description={nixcons[0].description}
+          href={nixcons[0].href}
+        />
+      </Card>
+
+      <div class="col-span-2 md:py-4">
+        <h3 class="font-heading text-3xl font-bold">Previous Conferences</h3>
+
+        <div class="mt-4 grid gap-4 md:grid-cols-2">
+          {
+            nixcons
+              .slice(1)
+              .map((nixcon) => (
+                <NixConEntry
+                  title={nixcon.title}
+                  date={nixcon.date}
+                  description={nixcon.description}
+                  href={nixcon.href}
+                />
+              ))
+          }
+        </div>
+      </div>
+    </div>
+  </Container>
+</div>
+
+<Divider />
diff --git a/src/components/pages/community/NixConEntry.astro b/src/components/pages/community/NixConEntry.astro
index ec8cd97411..1ad4785ea8 100644
--- a/src/components/pages/community/NixConEntry.astro
+++ b/src/components/pages/community/NixConEntry.astro
@@ -1,5 +1,8 @@
 ---
-import { Image } from "astro:assets";
+import { Image } from 'astro:assets';
+
+import Card from '@/components/ui/Card.astro';
+import Link from '@/components/util/Link.astro';
 
 interface Props {
   title: string;
@@ -12,23 +15,21 @@ interface Props {
 const { title, date, description, href, imagePath = null } = Astro.props;
 ---
 
-<a
-  href={href}
-  target="_blank"
-  rel="noopener noreferrer"
-  class="!no-underline !text-white font-extralight flex flex-col gap-1"
->
+<Link href={href} class="flex flex-col gap-1 !text-white !no-underline">
   {
     imagePath && (
-      <div class="flex justify-center bg-white rounded-xl mb-4 p-4 h-48">
+      <Card class="mb-4 flex h-48 justify-center bg-white shadow-none">
         <Image src={imagePath} alt={`${title} Logo`} width="200" height="200" />
-      </div>
+      </Card>
     )
   }
-  <h4 class="text-lg font-bold font-heading">{title}</h4>
-  <div class="text-sm">{date}</div>
+  <div class="mb-2">
+    <h4 class="font-heading text-lg font-bold">{title}</h4>
+    <p class="text-xs font-medium">{date}</p>
+  </div>
+
   <div class="leading-relaxed">{description}</div>
-  <div class="!text-white text-right font-bold">
+  <div class="text-right font-bold">
     <span class="underline">Read more...</span>
   </div>
-</a>
+</Link>
diff --git a/src/components/pages/community/OfficialCommunityLink.astro b/src/components/pages/community/OfficialCommunityLink.astro
index c143e6f725..43881e0873 100644
--- a/src/components/pages/community/OfficialCommunityLink.astro
+++ b/src/components/pages/community/OfficialCommunityLink.astro
@@ -1,48 +1,52 @@
 ---
-import { Icon } from "astro-icon/components";
+import { Icon } from 'astro-icon/components';
+
+import Card from '@/components/ui/Card.astro';
+import Link from '@/components/util/Link.astro';
 
 interface Props {
   href: string;
   iconName: string;
   name?: string;
   description?: string;
-  type?: "full" | "mobile_icon_desktop_name" | "icon";
+  type?: 'full' | 'mobile_icon_desktop_name' | 'icon';
   class?: string;
 }
 
 const {
   href,
   iconName,
-  name = "",
-  description = "",
-  type = "full",
+  name = '',
+  description = '',
+  type = 'full',
   class: extraClasses,
 } = Astro.props;
 ---
 
-<li
+<Card
+  as="li"
   class:list={[
-    "bg-nix-blue flex-1 rounded-xl p-4 hover:bg-nix-blue-dark transition-all cursor-pointer",
-    type === "icon" && "flex flex-col items-center justify-center",
+    'flex-1 cursor-pointer bg-nix-blue transition-colors hover:bg-nix-blue-hover',
+    type === 'icon' && 'flex flex-col items-center justify-center',
     extraClasses,
   ]}
 >
-  <a href={href} class="!no-underline !text-white">
+  <Link href={href} class="!text-white !no-underline">
     <div
       class:list={[
-        "flex gap-2 text-xl font-bold",
-        (type !== "full" || description === "") && "h-full",
-        type === "mobile_icon_desktop_name" &&
-          "flex-col md:flex-row items-center justify-center md:justify-start",
+        'flex gap-2 text-xl font-bold',
+        (type !== 'full' || description === '') && 'h-full',
+        type === 'mobile_icon_desktop_name' &&
+          'flex-col items-center justify-center md:flex-row md:justify-start',
       ]}
     >
-      <Icon name={iconName} alt={"logo of " + name} class="w-8 h-8" />
+      <Icon name={iconName} class="h-8 w-8" />
       {
-        type !== "icon" && (
+        type !== 'icon' && (
           <span
             class:list={[
-              "leading-8 ml-2",
-              type === "mobile_icon_desktop_name" && "hidden md:block",
+              'ml-2 leading-8',
+              type === 'mobile_icon_desktop_name' && 'hidden md:block',
             ]}
           >
             {name}
@@ -51,9 +55,9 @@ const {
       }
     </div>
     {
-      description !== "" && type === "full" && (
+      description !== '' && type === 'full' && (
         <div class="mt-2">{description}</div>
       )
     }
-  </a>
-</li>
+  </Link>
+</Card>
diff --git a/src/components/pages/community/RFCProcess.astro b/src/components/pages/community/RFCProcess.astro
new file mode 100644
index 0000000000..c8a33c36a1
--- /dev/null
+++ b/src/components/pages/community/RFCProcess.astro
@@ -0,0 +1,151 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Button from '@/components/ui/Button.astro';
+import RfcDiagram from '@/components/ui/RfcDiagram.astro';
+---
+
+<Container>
+  <div class="mt-16 flex flex-wrap-reverse gap-8 leading-loose">
+    <div class="flex flex-1 flex-col items-start justify-center gap-8">
+      <h2 class="text-4xl font-bold leading-none text-nix-blue">RFC Process</h2>
+
+      <p>
+        The "RFC" (request for comments) process is intended to provide a
+        consistent and controlled path for new features to enter the Nix
+        language, packages and OS, so that all community can be confident about
+        the direction the ecosystem is evolving in.
+      </p>
+
+      <Button color="green" size="lg" href="https://github.com/NixOS/rfcs"
+        >Learn more</Button
+      >
+    </div>
+
+    <div class="flex-0 mt-2 w-full md:w-3/6 md:max-w-2xl">
+      <RfcDiagram />
+    </div>
+  </div>
+</Container>
+
+<script>
+  const boxes = document
+    .getElementById('rfc-diagram')
+    .getElementsByTagName('rect');
+  const diagram = document.getElementById('rfc-diagram');
+  const durationMiliseconds = 1500;
+  const baseActivationClasses = ['stroke-nix-blue'];
+  const successActivationClasses = ['stroke-nix-green'];
+  const failureActivationClasses = ['stroke-nix-orange', 'opacity-50'];
+  const fadedActivationClasses = ['opacity-50'];
+  const timeline = [
+    {
+      element: boxes[9], // New Submission
+      index: 0,
+      classes: baseActivationClasses,
+    },
+    {
+      element: boxes[8], // Nomination Phase
+      index: 1,
+      classes: baseActivationClasses,
+    },
+    {
+      element: boxes[7], // Discussion Phase
+      index: 2,
+      classes: baseActivationClasses,
+    },
+    {
+      element: boxes[0], // Final Comment Phase
+      index: 3,
+      classes: baseActivationClasses,
+    },
+    {
+      element: boxes[3], // Submission Rejected
+      index: 4,
+      classes: failureActivationClasses,
+    },
+    {
+      element: boxes[1], // New Submission 2
+      index: 4,
+      classes: fadedActivationClasses,
+    },
+    {
+      element: boxes[5], // FCP Canceled
+      index: 4,
+      classes: failureActivationClasses,
+    },
+    {
+      element: boxes[2], // Refine Submission
+      index: 4,
+      classes: fadedActivationClasses,
+    },
+    {
+      element: boxes[4], // Submission Accepted
+      index: 4,
+      classes: successActivationClasses,
+    },
+  ];
+  let isAnimating = false;
+
+  timeline.forEach((box) => {
+    box.element.classList.add('transition-all', 'duration-500', 'ease-in');
+  });
+
+  let highestIndex = 0;
+  timeline.forEach((box) => {
+    if (box.index > highestIndex) {
+      highestIndex = box.index;
+    }
+  });
+
+  function triggerAnimation() {
+    // prevent multiple animations at the same time
+    if (isAnimating) {
+      return;
+    }
+    isAnimating = true;
+    setTimeout(
+      () => {
+        isAnimating = false;
+      },
+      (highestIndex + 1) * durationMiliseconds,
+    );
+
+    // trigger animation on each box
+    timeline.forEach((box) => {
+      setTimeout(() => {
+        box.element.classList.add(...box.classes);
+      }, box.index * durationMiliseconds);
+    });
+  }
+
+  const activatorObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (isAnimating || !entry.isIntersecting) {
+          return;
+        }
+        triggerAnimation();
+      });
+    },
+    {
+      threshold: 1,
+    },
+  );
+  const deactivatorObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (isAnimating || entry.isIntersecting) {
+          return;
+        }
+        timeline.forEach((box) => {
+          box.element.classList.remove(...box.classes);
+        });
+      });
+    },
+    {
+      threshold: 0,
+    },
+  );
+  activatorObserver.observe(diagram);
+  deactivatorObserver.observe(diagram);
+</script>
diff --git a/src/components/pages/community/Teams.astro b/src/components/pages/community/Teams.astro
new file mode 100644
index 0000000000..ae50fbd7e8
--- /dev/null
+++ b/src/components/pages/community/Teams.astro
@@ -0,0 +1,47 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Divider from '@/components/layout/Divider.astro';
+import Button from '@/components/ui/Button.astro';
+
+const { teams = [] } = Astro.props;
+---
+
+<div class="mt-8">
+  <Divider mirrorY />
+</div>
+
+<div class="bg-nix-blue py-8">
+  <Container>
+    <h2 class="mt-8 text-4xl font-bold text-white" id="governance-teams">
+      Teams
+    </h2>
+
+    <ul class="mt-8 flex flex-wrap justify-stretch gap-x-6 gap-y-16">
+      {
+        teams.map((team) => (
+          <li class="flex flex-grow basis-72 flex-col items-center gap-2 text-center text-white md:items-start md:text-left [&>a]:inline-block">
+            <img
+              src={`/images/teams/${team.slug.split('_')[1]}.svg`}
+              alt={`${team.data.name} Logo`}
+              class="mb-2 h-16"
+            />
+
+            <div>
+              <h3 class="font-heading text-2xl font-bold">{team.data.name}</h3>
+              <p class="mb-2 grow leading-relaxed">{team.data.description}</p>
+            </div>
+
+            <Button
+              color="green"
+              href={'/community/teams/' + team.slug.split('_')[1]}
+            >
+              Read more
+            </Button>
+          </li>
+        ))
+      }
+    </ul>
+  </Container>
+</div>
+
+<Divider />
diff --git a/src/components/pages/community/UnofficialCommunityLink.astro b/src/components/pages/community/UnofficialCommunityLink.astro
index c2ea97e8d2..912a7cf1f4 100644
--- a/src/components/pages/community/UnofficialCommunityLink.astro
+++ b/src/components/pages/community/UnofficialCommunityLink.astro
@@ -1,45 +1,49 @@
 ---
-import { Icon } from "astro-icon/components";
+import { Icon } from 'astro-icon/components';
+
+import Card from '@/components/ui/Card.astro';
+import Link from '@/components/util/Link.astro';
 
 interface Props {
   href: string;
   iconName: string;
   name?: string;
   description?: string;
-  type?: "full" | "mobile_icon_desktop_name" | "icon";
+  type?: 'full' | 'mobile_icon_desktop_name' | 'icon';
 }
 
 const {
   href,
   iconName,
-  name = "",
-  description = "",
-  type = "full",
+  name = '',
+  description = '',
+  type = 'full',
 } = Astro.props;
 ---
 
-<li
+<Card
+  as="li"
   class:list={[
-    "bg-white border-2 border-nix-blue hover:bg-nix-blue-extralight flex-1 rounded-xl p-4 transition-all cursor-pointer",
-    type === "icon" && "flex flex-col items-center justify-center",
+    'flex-1 cursor-pointer border-2 border-nix-blue bg-white transition-all hover:bg-nix-blue-extralight',
+    type === 'icon' && 'flex flex-col items-center justify-center',
   ]}
 >
-  <a href={href} class="!no-underline !text-nix-blue">
+  <Link href={href} class="!text-nix-blue !no-underline">
     <div
       class:list={[
-        "flex gap-2 text-xl font-bold",
-        (type !== "full" || description === "") && "h-full",
-        type === "mobile_icon_desktop_name" &&
-          "flex-col md:flex-row items-center justify-center md:justify-start",
+        'flex gap-2 text-xl font-bold',
+        (type !== 'full' || description === '') && 'h-full',
+        type === 'mobile_icon_desktop_name' &&
+          'flex-col items-center justify-center md:flex-row md:justify-start',
       ]}
     >
-      <Icon name={iconName} alt={"logo of " + name} class="w-8 h-8" />
+      <Icon name={iconName} class="h-8 w-8" />
       {
-        type !== "icon" && (
+        type !== 'icon' && (
           <span
             class:list={[
-              "leading-8 ml-2",
-              type === "mobile_icon_desktop_name" && "hidden md:block",
+              'ml-2 leading-8',
+              type === 'mobile_icon_desktop_name' && 'hidden md:block',
             ]}
           >
             {name}
@@ -48,9 +52,9 @@ const {
       }
     </div>
     {
-      description !== "" && type === "full" && (
+      description !== '' && type === 'full' && (
         <div class="mt-2">{description}</div>
       )
     }
-  </a>
-</li>
+  </Link>
+</Card>
diff --git a/src/components/pages/community/WhereToTalk.astro b/src/components/pages/community/WhereToTalk.astro
new file mode 100644
index 0000000000..c587b8492d
--- /dev/null
+++ b/src/components/pages/community/WhereToTalk.astro
@@ -0,0 +1,194 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Link from '@/components/util/Link.astro';
+import OfficialCommunityLink from './OfficialCommunityLink.astro';
+import UnofficialCommunityLink from './UnofficialCommunityLink.astro';
+
+const platformsMain = [
+  {
+    href: 'https://discourse.nixos.org/',
+    name: 'Discourse',
+    iconName: 'simple-icons:discourse',
+    description:
+      'Our official forum is the right place to get help from other users and discuss the development of the projects. There are also Announcements, Job offers and Events.',
+  },
+  {
+    href: 'https://matrix.to/#/#community:nixos.org',
+    name: 'Matrix space',
+    iconName: 'simple-icons:matrix',
+    description:
+      'Real-time help, development chat, and off-topic community discussion takes place on Matrix.',
+  },
+  {
+    href: 'https://github.com/NixOS/',
+    name: 'Github',
+    iconName: 'simple-icons:github',
+    description:
+      'Official organization page on Github, where you can find nix, nixpkgs, and other repositories.',
+  },
+];
+
+const socialMediaMain = [
+  {
+    href: 'https://chaos.social/@nixos_org',
+    name: 'Mastodon',
+    iconName: 'simple-icons:mastodon',
+  },
+  {
+    href: 'https://twitter.com/nixos_org',
+    name: 'Twitter',
+    iconName: 'simple-icons:twitter',
+  },
+  {
+    href: 'https://www.linkedin.com/company/nixos-foundation/',
+    name: 'LinkedIn',
+    iconName: 'simple-icons:linkedin',
+  },
+  {
+    href: 'https://www.youtube.com/channel/UC3vIimi9q4AT8EgxYp_dWIw',
+    name: 'YouTube',
+    iconName: 'simple-icons:youtube',
+  },
+];
+
+const calendarsMain = [
+  {
+    href: 'https://calendar.google.com/calendar/u/0/embed?src=b9o52fobqjak8oq8lfkhg3t0qg@group.calendar.google.com',
+    name: 'Official NixOS Calendar',
+    iconName: 'mdi:calendar',
+  },
+  {
+    href: 'https://discourse.nixos.org/t/community-calendar/18589',
+    name: 'Community Calendar',
+    iconName: 'mdi:calendar',
+  },
+] as const;
+
+const platformsOutside = [
+  {
+    href: 'https://stackoverflow.com/questions/tagged/nix+or+nixpkgs+or+nixos+or+nixops',
+    name: 'Stackoverflow',
+    iconName: 'simple-icons:stackoverflow',
+  },
+  {
+    href: 'https://discord.gg/BqdJJFER4H',
+    name: 'Discord',
+    iconName: 'simple-icons:discord',
+  },
+  {
+    href: 'https://www.reddit.com/r/NixOS/',
+    name: 'Reddit',
+    iconName: 'simple-icons:reddit',
+  },
+];
+---
+
+<Container>
+  <h2 class="mt-8 font-heading text-4xl font-bold leading-none text-nix-blue">
+    Where to talk?
+  </h2>
+
+  <p class="mt-2 leading-relaxed">
+    The Nix community is spread across various platforms. Here are the official
+    and unofficial spaces where you can find help, discuss development, and chat
+    with other users.
+  </p>
+
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+    <div class="md:col-span-2">
+      <h3 class="mt-4 font-heading text-3xl font-bold text-nix-blue">
+        Official spaces
+      </h3>
+
+      <p class="text-gray-700">
+        These spaces are monitored and moderated by the NixOS Moderation Team.
+        This means they are moderated in such a way that they follow the
+        standards and moral values of our community. You can find out more about
+        our moderation team <Link href="/community/teams/moderation">here</Link
+        >.
+      </p>
+
+      <ul class="mt-4 grid grid-cols-1 flex-wrap gap-4 md:grid-cols-2">
+        {
+          platformsMain.map((platform, i) => (
+            <OfficialCommunityLink
+              href={platform.href}
+              name={platform.name}
+              iconName={platform.iconName}
+              description={platform.description}
+              class={i === 0 && 'md:col-span-2'}
+            />
+          ))
+        }
+      </ul>
+    </div>
+
+    <div class="col-span-1">
+      <h3 class="mt-4 font-heading text-3xl font-bold text-nix-blue">
+        Official social-media
+      </h3>
+      <p class="text-gray-700">
+        These spaces are maintained by our NixOS Marketing Team though not
+        monitored and not moderated by the NixOS Moderation Team.
+      </p>
+
+      <ul class="mt-4 grid grid-cols-1 flex-wrap gap-4">
+        {
+          socialMediaMain.map((platform) => (
+            <OfficialCommunityLink
+              href={platform.href}
+              name={platform.name}
+              iconName={platform.iconName}
+            />
+          ))
+        }
+      </ul>
+    </div>
+
+    <div class="md:col-span-3">
+      <h3 class="mt-4 font-heading text-3xl font-bold text-nix-blue">
+        Our calendars
+      </h3>
+
+      <p class="text-gray-700">
+        We use these calendars to schedule events, meetings, and other.
+      </p>
+
+      <ul class="mt-4 grid flex-wrap gap-4 md:grid-cols-3">
+        {
+          calendarsMain.map((platform) => (
+            <OfficialCommunityLink
+              href={platform.href}
+              name={platform.name}
+              iconName={platform.iconName}
+            />
+          ))
+        }
+      </ul>
+    </div>
+  </div>
+
+  <h3 class="mt-6 font-heading text-3xl font-bold text-nix-blue">
+    Unofficial spaces
+  </h3>
+
+  <p class="text-gray-700">
+    These spaces are not monitored and not moderated by the NixOS Moderation
+    Team. Please be aware that different moral values and rules may apply in
+    these spaces. The NixOS moderation team may advise moderators in these
+    spaces, though does not control or enforce our community values.
+  </p>
+
+  <ul class="mt-4 grid grid-cols-1 flex-wrap gap-4 md:grid-cols-3">
+    {
+      platformsOutside.map((platform) => (
+        <UnofficialCommunityLink
+          href={platform.href}
+          name={platform.name}
+          iconName={platform.iconName}
+          type="mobile_icon_desktop_name"
+        />
+      ))
+    }
+  </ul>
+</Container>
diff --git a/src/components/pages/community/teams/MembersDisplay.astro b/src/components/pages/community/teams/MembersDisplay.astro
index e066bc20b9..b4b13e2753 100644
--- a/src/components/pages/community/teams/MembersDisplay.astro
+++ b/src/components/pages/community/teams/MembersDisplay.astro
@@ -1,22 +1,28 @@
 ---
+import Card from '@/components/ui/Card.astro';
+import Link from '@/components/util/Link.astro';
+
 const {
-  title = "Members",
+  title = 'Members',
   isSubteam = false,
   members,
   contact,
   class: extraClasses,
 } = Astro.props;
+
 const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
 ---
 
-<aside
+<Card
+  as="aside"
   class:list={[
-    !isSubteam && "bg-nix-blue-extralight rounded-xl px-4 py-3 w-full",
+    !isSubteam && 'w-full bg-nix-blue-extralight shadow-none',
     extraClasses,
   ]}
 >
   <h2 class={titleClasses}>{title}</h2>
-  <ul class="mt-2 list-disc ml-4 font-light">
+
+  <ul class="ml-4 mt-2 list-disc">
     {
       members.map((member) => (
         <li class="mb-1 last:mb-0">
@@ -24,18 +30,18 @@ const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
           {member.discourse && (
             <>
               (
-              <a href={"https://discourse.nixos.org/u/" + member.discourse}>
+              <Link href={'https://discourse.nixos.org/u/' + member.discourse}>
                 @{member.discourse}
-              </a>
+              </Link>
               )
             </>
           )}
           {member.github && (
             <>
               (
-              <a href={"https://github.com/" + member.github}>
+              <Link href={'https://github.com/' + member.github}>
                 @{member.github}
-              </a>
+              </Link>
               )
             </>
           )}
@@ -52,17 +58,18 @@ const titleClasses = `text-3xl font-heading font-bold text-nix-blue`;
   {
     contact && (
       <>
-        <h2 class="text-3xl font-heading font-bold text-nix-blue mt-4">
+        <h2 class="mt-4 font-heading text-3xl font-bold text-nix-blue">
           Contact
         </h2>
-        <ul class="mt-2 list-disc ml-4">
+
+        <ul class="ml-4 mt-2 list-disc">
           {contact.map((contact) => (
             <li class="mb-1 last:mb-0">
-              <a href={contact.href}>{contact.name}</a>
+              <Link href={contact.href}>{contact.name}</Link>
             </li>
           ))}
         </ul>
       </>
     )
   }
-</aside>
+</Card>
diff --git a/src/components/pages/donate/Acknowledgements.astro b/src/components/pages/donate/Acknowledgements.astro
new file mode 100644
index 0000000000..ccf209d042
--- /dev/null
+++ b/src/components/pages/donate/Acknowledgements.astro
@@ -0,0 +1,73 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Divider from '@/components/layout/Divider.astro';
+import SponsorLogo from '@/components/layout/SponsorLogo.astro';
+import Link from '@/components/util/Link.astro';
+
+const { sponsors } = Astro.props;
+---
+
+<Divider style="slope" mirrorY />
+
+<div class="bg-nix-blue py-16 text-white">
+  <Container class="grid gap-8 px-12 md:grid-cols-2">
+    <div class="flex flex-col justify-center">
+      <div
+        class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+      >
+        {
+          sponsors.data.items.map((item) => (
+            <SponsorLogo
+              class={item.class}
+              href={item.href}
+              src={item.src}
+              alt={item.alt}
+            />
+          ))
+        }
+      </div>
+    </div>
+
+    <div class="acknowledgements-section flex flex-col justify-center gap-4">
+      <h2 class="font-heading text-3xl font-bold sm:pb-2 sm:text-4xl">
+        Acknowledgements
+      </h2>
+
+      <p>
+        The Nix package manager was developed by
+        <Link href="https://edolstra.github.io/">Eelco Dolstra</Link>
+        as part of his PhD research in the
+        <Link href="https://www.nwo.nl/en/projects/638001201"
+          >TraCE project</Link
+        >, funded by the
+        <Link href="http://www.jacquard.nl/">Jacquard programme</Link>
+        of the
+        <Link href="http://www.nwo.nl/"
+          >Netherlands Organisation for Scientific Research</Link
+        >
+        (NWO) and SERC. The first prototype of NixOS was developed by
+        <Link href="http://www.tjaldur.nl/">Armijn Hemel</Link>
+        as his master’s thesis project. Hydra, the Nix-based continuous build system,
+        was developed as part of the LaQuSo Buildfarm project, funded by
+        <Link href="https://www.4tu.nl/nirict/">NIRICT</Link>
+        and
+        <Link href="http://www.laquso.com/">LaQuSo</Link>.
+      </p>
+
+      <p>
+        The following companies and institutes have supported the development of
+        NixOS and hosting for its infrastructure. We are very grateful for that!
+        If you would like to support us as well, please contact
+        <Link href="mailto:foundation@nixos.org">The NixOS Foundation</Link>.
+      </p>
+    </div>
+  </Container>
+</div>
+
+<style>
+  .acknowledgements-section {
+    a {
+      @apply text-white;
+    }
+  }
+</style>
diff --git a/src/components/pages/donate/Donations.astro b/src/components/pages/donate/Donations.astro
new file mode 100644
index 0000000000..5dfbf8c2d3
--- /dev/null
+++ b/src/components/pages/donate/Donations.astro
@@ -0,0 +1,72 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Button from '@/components/ui/Button.astro';
+import Card from '@/components/ui/Card.astro';
+---
+
+<Container class="grid gap-8 px-12 py-16 md:grid-cols-2">
+  <div class="flex flex-col gap-4">
+    <h2 class="pb-2 font-heading text-3xl font-bold text-nix-blue">
+      Donate using Open Collective
+    </h2>
+
+    <p>
+      NixOS Foundation is using
+      <a href="https://opencollective.com/">Open Collective</a>
+      to manage the finances so everyone can see where money comes from and where
+      money goes.
+    </p>
+
+    <p>
+      With Open Collective you can make a <strong>single</strong> or <strong
+        >recurring</strong
+      > contribution by credit card transfer.
+    </p>
+
+    <p>Thank you!</p>
+
+    <div class="flex flex-col justify-stretch gap-4 md:flex-row">
+      <Button
+        color="semidarkblue"
+        size="sm"
+        href="https://opencollective.com/nixos#support"
+      >
+        Contribute
+      </Button>
+    </div>
+  </div>
+
+  <div class="flex flex-col justify-center gap-4">
+    <h2 class="pb-2 text-3xl font-bold text-nix-blue">
+      Donate with SEPA bank transfer
+    </h2>
+
+    <p>
+      The NixOS Foundation also accepts donations via SEPA bank transfer. Please
+      send payments to:
+    </p>
+
+    <Card
+      as="pre"
+      class="whitespace-pre-line bg-nix-blue-extralight font-mono font-bold text-nix-blue-darker shadow-none"
+    >
+      {
+        `Stichting NixOS Foundation, Utrecht, The Netherlands
+
+        IBAN: NL13 BUNQ 2061 2530 32
+        BIC: BUNQNL2AXXX`
+      }
+    </Card>
+
+    <p class="text-xs font-medium">
+      Please add your name and purpose (donation) in the description of the
+      transfer.
+      <i>
+        If you would like to support us with amounts above 2000 euro per year,
+        please contact us at
+        <a href="mailto:foundation@nixos.org">foundation@nixos.org</a>
+        , as this will have tax implications.
+      </i>
+    </p>
+  </div>
+</Container>
diff --git a/src/components/pages/donate/Merchandise.astro b/src/components/pages/donate/Merchandise.astro
new file mode 100644
index 0000000000..89c0978463
--- /dev/null
+++ b/src/components/pages/donate/Merchandise.astro
@@ -0,0 +1,35 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Divider from '@/components/layout/Divider.astro';
+import Button from '@/components/ui/Button.astro';
+---
+
+<Divider style="slope" mirrorX mirrorY />
+
+<div class="bg-nix-blue py-16 text-white md:px-12 md:py-16">
+  <Container class="grid gap-8 md:grid-cols-2 md:px-12">
+    <div class="flex flex-col gap-4">
+      <img src="/images/donate/merch.svg" class="h-64 md:h-full" />
+    </div>
+
+    <div class="flex flex-col justify-center gap-4">
+      <h2 class="max-w-96 font-heading text-4xl font-bold leading-tight">
+        NixOS T-shirts, mugs and more...
+      </h2>
+
+      <p>Donate to NixOS foundation by purchasing NixOS merchandise.</p>
+
+      <div class="flex flex-col justify-stretch gap-4 md:flex-row">
+        <Button
+          color="green"
+          size="sm"
+          href="https://www.redbubble.com/people/mogorman/shop"
+        >
+          Go to the shop (RedBubble)
+        </Button>
+      </div>
+    </div>
+  </Container>
+</div>
+
+<Divider style="slope" mirrorX />
diff --git a/src/components/pages/download/DownloadAccordion.astro b/src/components/pages/download/DownloadAccordion.astro
index 503ac11d0b..2ac63d1ec7 100644
--- a/src/components/pages/download/DownloadAccordion.astro
+++ b/src/components/pages/download/DownloadAccordion.astro
@@ -1,10 +1,10 @@
 ---
-import { getCollection } from "astro:content";
+import { getCollection } from 'astro:content';
 
-const { family = "nix" } = Astro.props;
+const { family = 'nix' } = Astro.props;
 const accordionId = `download-${family}-accordion`;
 
-let downloadOptions = (await getCollection("download")).filter(
+let downloadOptions = (await getCollection('download')).filter(
   (option) => option.data.family === family,
 );
 ---
@@ -15,8 +15,8 @@ let downloadOptions = (await getCollection("download")).filter(
       downloadOptions.map(async (option) => {
         const { Content } = await option.render();
         const needsInstallInfix =
-          option.data.family === "nix" && option.data.platform !== "more";
-        const optionId = `${option.data.family}-${needsInstallInfix ? "install-" : ""}${option.data.platform}`;
+          option.data.family === 'nix' && option.data.platform !== 'more';
+        const optionId = `${option.data.family}-${needsInstallInfix ? 'install-' : ''}${option.data.platform}`;
 
         return (
           <>
@@ -25,20 +25,7 @@ let downloadOptions = (await getCollection("download")).filter(
                 id={`${optionId}-trigger`}
                 aria-expanded="true"
                 aria-controls={optionId}
-                class:list={[
-                  "bg-nix-blue-extralight",
-                  "flex",
-                  "text-nix-blue-dark",
-                  "text-lg",
-                  "font-bold",
-                  "py-6",
-                  "px-8",
-                  "w-full",
-                  "rounded-2xl",
-                  "justify-start",
-                  "content-start",
-                  "my-4",
-                ]}
+                class="my-4 flex w-full content-start justify-start rounded-lg bg-nix-blue-extralight px-8 py-4 text-lg font-bold text-nix-blue-dark"
               >
                 {option.data.title}
               </button>
@@ -47,7 +34,7 @@ let downloadOptions = (await getCollection("download")).filter(
               id={optionId}
               role="region"
               aria-labelledby={`${optionId}-trigger`}
-              class="block"
+              class="block scroll-mt-44 md:scroll-mt-52"
             >
               <article>
                 <Content />
@@ -62,31 +49,31 @@ let downloadOptions = (await getCollection("download")).filter(
 
 <script define:vars={{ id: accordionId }}>
   const acc = document.getElementById(id);
-  const panels = acc.querySelectorAll("[role=region]");
-  const triggers = acc.querySelectorAll("[aria-expanded]");
-  const menuContainer = acc.querySelector(".download-accordion-menu");
+  const panels = acc.querySelectorAll('[role=region]');
+  const triggers = acc.querySelectorAll('[aria-expanded]');
+  const menuContainer = acc.querySelector('.download-accordion-menu');
 
   let activePanel = panels[0];
 
-  if (id === "download-nix-accordion") {
+  if (id === 'download-nix-accordion') {
     const userPlatform = navigator.userAgent.toLowerCase();
-    let os = "linux";
-    if (userPlatform.includes("macintosh")) {
-      os = "macos";
-    } else if (userPlatform.includes("windows")) {
-      os = "windows";
+    let os = 'linux';
+    if (userPlatform.includes('macintosh')) {
+      os = 'macos';
+    } else if (userPlatform.includes('windows')) {
+      os = 'windows';
     }
     activePanel = acc.querySelector(`#nix-install-${os}`);
   }
 
   let currentWindowWidth = window.innerWidth;
-  const accContentArea = acc.appendChild(document.createElement("div"));
-  accContentArea.classList.add("col-span-2", "mt-4", "px-8");
+  const accContentArea = acc.appendChild(document.createElement('div'));
+  accContentArea.classList.add('col-span-2', 'mt-4', 'px-8');
   menuContainer.classList.add(
-    "md:bg-nix-blue-extralight",
-    "md:py-8",
-    "md:rounded-2xl",
-    "self-start",
+    'md:bg-nix-blue-extralight',
+    'md:py-4',
+    'md:rounded-lg',
+    'self-start',
   );
 
   if (window.innerWidth > 768) {
@@ -95,7 +82,7 @@ let downloadOptions = (await getCollection("download")).filter(
     enterMobileMode();
   }
 
-  window.addEventListener("resize", () => {
+  window.addEventListener('resize', () => {
     if (window.innerWidth > 768 && currentWindowWidth <= 768) {
       enterDesktopMode();
     } else if (window.innerWidth <= 768 && currentWindowWidth > 768) {
@@ -105,11 +92,11 @@ let downloadOptions = (await getCollection("download")).filter(
   });
 
   acc.classList.add(
-    "md:grid",
-    "md:grid-cols-1",
-    "md:grid-cols-3",
-    "gap-4",
-    "md:py-8",
+    'md:grid',
+    'md:grid-cols-1',
+    'md:grid-cols-3',
+    'gap-4',
+    'md:py-8',
   );
 
   if (window.location.hash) {
@@ -144,19 +131,19 @@ let downloadOptions = (await getCollection("download")).filter(
 
   function togglePanelVisibility(panel, trigger, visible = false) {
     if (visible) {
-      panel.classList.remove("hidden");
-      panel.classList.add("block");
-      trigger.setAttribute("aria-expanded", "true");
+      panel.classList.remove('hidden');
+      panel.classList.add('block');
+      trigger.setAttribute('aria-expanded', 'true');
     } else {
-      panel.classList.remove("block");
-      panel.classList.add("hidden");
-      trigger.setAttribute("aria-expanded", "false");
+      panel.classList.remove('block');
+      panel.classList.add('hidden');
+      trigger.setAttribute('aria-expanded', 'false');
     }
   }
 
   function togglePanel(e) {
     const panel = acc.querySelector(
-      `#${e.target.getAttribute("aria-controls")}`,
+      `#${e.target.getAttribute('aria-controls')}`,
     );
     if (panel === activePanel) {
       return;
@@ -171,27 +158,27 @@ let downloadOptions = (await getCollection("download")).filter(
   }
 
   for (let i = 0; i < triggers.length; i++) {
-    triggers[i].addEventListener("click", togglePanel);
+    triggers[i].addEventListener('click', togglePanel);
     triggers[i].classList.add(
-      "md:my-0",
-      "md:text-nix-blue-light",
-      "md:rounded-none",
-      "md:aria-expanded:bg-white",
-      "md:aria-expanded:text-nix-blue-dark",
-      "before:icon-[mdi--arrow-up-drop-circle]",
-      "before:block",
-      "before:absolute",
-      "before:h-8",
-      "before:w-8",
-      "before:right-10",
-      "before:md:hidden",
-      "aria-expanded:before:block",
-      "aria-expanded:before:absolute",
-      "aria-expanded:before:h-8",
-      "aria-expanded:before:w-8",
-      "aria-expanded:before:right-10",
-      "aria-expanded:before:md:hidden",
-      "aria-expanded:before:icon-[mdi--arrow-down-drop-circle]",
+      'md:my-0',
+      'md:text-nix-blue-light',
+      'md:rounded-none',
+      'md:aria-expanded:bg-white',
+      'md:aria-expanded:text-nix-blue-dark',
+      'before:icon-[mdi--arrow-up-drop-circle]',
+      'before:block',
+      'before:absolute',
+      'before:h-8',
+      'before:w-8',
+      'before:right-10',
+      'before:md:hidden',
+      'aria-expanded:before:block',
+      'aria-expanded:before:absolute',
+      'aria-expanded:before:h-8',
+      'aria-expanded:before:w-8',
+      'aria-expanded:before:right-10',
+      'aria-expanded:before:md:hidden',
+      'aria-expanded:before:icon-[mdi--arrow-down-drop-circle]',
     );
   }
 
diff --git a/src/components/pages/download/DownloadHeader.astro b/src/components/pages/download/DownloadHeader.astro
index 44480515d8..100ba3fefa 100644
--- a/src/components/pages/download/DownloadHeader.astro
+++ b/src/components/pages/download/DownloadHeader.astro
@@ -1,5 +1,5 @@
 ---
-import Container from "../../layout/Container.astro";
+import Card from '@/components/ui/Card.astro';
 
 interface Props {
   title: string;
@@ -10,23 +10,22 @@ interface Props {
 const { title, subTitle, currentVersion } = Astro.props;
 ---
 
-<Container class="grid grid-cols-2 bg-nix-blue text-white py-8 md:py-6 mt-16">
-  <h1 class="text-3xl font-heading font-bold leading-none self-center">
+<Card class="mt-16 flex items-center justify-between bg-nix-blue text-white">
+  <h2 class="font-heading text-3xl font-bold">
     {title}
     <span class="hidden lg:inline">
       {subTitle}
     </span>
-  </h1>
-  <div class="flex flex-col justify-center self-center">
-    <div class="text-end">
-      <h2 class="text-2xl font-bold font-heading pb-2 hidden md:inline">
-        Current version
-      </h2>
-      <a
-        href="#"
-        class="!text-white !no-underline font-bold text-2xl text-center bg-nix-green rounded-2xl px-4 py-2"
-        >{currentVersion}</a
-      >
-    </div>
+  </h2>
+
+  <div>
+    <span class="hidden font-heading text-2xl font-bold md:inline">
+      Current version
+    </span>
+    <span
+      class="rounded-lg bg-nix-green px-2 py-1 text-center text-2xl font-bold"
+    >
+      {currentVersion}
+    </span>
   </div>
-</Container>
+</Card>
diff --git a/src/components/pages/explore/Timeline.astro b/src/components/pages/explore/Timeline.astro
index 9f43bdd152..4607117127 100644
--- a/src/components/pages/explore/Timeline.astro
+++ b/src/components/pages/explore/Timeline.astro
@@ -1,7 +1,7 @@
 ---
 interface Props {
-  number: string;
-  imageLocation?: "left" | "right";
+  number: number;
+  imageLocation?: 'left' | 'right';
   imageSrc: string;
   heading: string;
   subHeading: string;
@@ -12,25 +12,25 @@ interface Props {
 
 const {
   number = 0,
-  imageLocation = "left",
+  imageLocation = 'left',
   imageSrc,
   ...textProps
 } = Astro.props;
 
-import TimelineCenter from "./TimelineCenter.astro";
-import TimelineText from "./TimelineText.astro";
+import TimelineCenter from './TimelineCenter.astro';
+import TimelineText from './TimelineText.astro';
 
-const textCommonClasses = "flex flex-col justify-start font-extralight gap-4";
-const imageCommonClasses = "px-12 mx-auto my-12 w-10/12 md:w-full";
+const textCommonClasses = 'flex flex-col justify-start gap-4';
+const imageCommonClasses = 'px-12 mx-auto my-12 w-10/12 md:w-full';
 ---
 
 {
-  imageLocation === "left" ? (
+  imageLocation === 'left' ? (
     <>
       <div class="justify-self-center md:justify-self-end">
         <img src={imageSrc} class:list={[imageCommonClasses]} />
       </div>
-      <div class:list={[textCommonClasses, "text-left", "relative"]}>
+      <div class:list={[textCommonClasses, 'text-left', 'relative']}>
         <TimelineCenter number={number} />
         <TimelineText location="right" {...textProps} />
       </div>
@@ -40,13 +40,13 @@ const imageCommonClasses = "px-12 mx-auto my-12 w-10/12 md:w-full";
       <div
         class:list={[
           textCommonClasses,
-          "order-last md:order-first",
-          "text-left md:text-right",
+          'order-last md:order-first',
+          'text-left md:text-right',
         ]}
       >
         <TimelineText location="left" {...textProps} />
       </div>
-      <div class="justify-self-center md:justify-self-start relative">
+      <div class="relative justify-self-center md:justify-self-start">
         <TimelineCenter number={number} />
         <img src={imageSrc} class:list={[imageCommonClasses]} />
       </div>
diff --git a/src/components/pages/explore/TimelineCenter.astro b/src/components/pages/explore/TimelineCenter.astro
index fcb6313bbc..0d86fe1e92 100644
--- a/src/components/pages/explore/TimelineCenter.astro
+++ b/src/components/pages/explore/TimelineCenter.astro
@@ -1,15 +1,15 @@
 ---
 interface Props {
-  number: string;
+  number: number;
 }
 
 const { number = 0 } = Astro.props;
 ---
 
-<div class="absolute hidden md:block w-1 h-full bg-nix-blue top-0 left-[-3rem]">
+<div class="absolute left-[-3rem] top-0 hidden h-full w-1 bg-nix-blue md:block">
 </div>
 <div
-  class="absolute hidden md:block text-white text-center leading-[4rem] rounded-[2rem] font-bold text-[3rem] w-[4rem] h-[4rem] bg-nix-green top-0 left-[-5rem]"
+  class="absolute left-[-5rem] top-0 hidden h-[4rem] w-[4rem] rounded-[2rem] bg-nix-green text-center text-[3rem] font-bold leading-[4rem] text-white md:block"
 >
   {number}
 </div>
diff --git a/src/components/pages/explore/TimelineText.astro b/src/components/pages/explore/TimelineText.astro
index 46644d4e4f..a69526c560 100644
--- a/src/components/pages/explore/TimelineText.astro
+++ b/src/components/pages/explore/TimelineText.astro
@@ -1,11 +1,13 @@
 ---
+import Tag from '@/components/ui/Tag.astro';
+
 interface Props {
   heading: string;
   subHeading: string;
   tags: Array<{ href: string | null; text: string }>;
   paragraphs: string[];
   emphasis?: string | null;
-  location?: "left" | "right";
+  location?: 'left' | 'right';
 }
 
 const {
@@ -14,22 +16,20 @@ const {
   tags,
   paragraphs,
   emphasis = null,
-  location = "left",
+  location = 'left',
 } = Astro.props;
-
-import Tag from "../../ui/Tag.astro";
 ---
 
-<h2 class="text-[2rem] leading-[2.2rem] font-heading font-bold text-nix-blue">
+<h2 class="font-heading text-[2rem] font-bold leading-[2.2rem] text-nix-blue">
   {heading}
 </h2>
-<p class="text-xl leading-[2.2rem] font-bold text-neutral-500">{subHeading}</p>
+<p class="text-neutral-500 text-xl font-bold leading-[2.2rem]">{subHeading}</p>
 <div
   class="flex flex-wrap gap-1"
   class:list={[
     {
-      "justify-start md:justify-end": location === "left",
-      "justify-start": location === "right",
+      'justify-start md:justify-end': location === 'left',
+      'justify-start': location === 'right',
     },
   ]}
 >
diff --git a/src/components/pages/home/Examples.astro b/src/components/pages/home/Examples.astro
new file mode 100644
index 0000000000..6d538d3719
--- /dev/null
+++ b/src/components/pages/home/Examples.astro
@@ -0,0 +1,35 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Asciinema from '@/components/ui/Asciinema.astro';
+
+const { demos } = Astro.props;
+---
+
+<section class="py-16 lg:py-20">
+  <Container>
+    <h2
+      class="w-full pb-2 text-center font-heading text-4xl font-bold text-nix-blue"
+    >
+      Examples
+    </h2>
+
+    <div class="grid items-center gap-6 md:grid-cols-2">
+      {
+        demos.data.map((demo) => {
+          return (
+            <div class="flex flex-col items-start gap-2">
+              <Asciinema
+                title={demo.title}
+                class="w-full self-center drop-shadow-lg md:self-start"
+                src={demo.file}
+                settings={{
+                  poster: 'npt:0:00:30',
+                }}
+              />
+            </div>
+          );
+        })
+      }
+    </div>
+  </Container>
+</section>
diff --git a/src/components/pages/home/Features.astro b/src/components/pages/home/Features.astro
new file mode 100644
index 0000000000..4fd3e6a439
--- /dev/null
+++ b/src/components/pages/home/Features.astro
@@ -0,0 +1,34 @@
+---
+import Container from '@/components/layout/Container.astro';
+import InlineSVG from '@/components/util/InlineSVG.astro';
+
+const { landingFeatures = [] } = Astro.props;
+---
+
+<section
+  class="bg-[39%_100%] bg-no-repeat pb-48 pt-16 inline-svg-landing-search-top md:bg-bottom md:pt-32"
+>
+  <Container class="grid gap-8 md:grid-cols-3 md:gap-6">
+    {
+      landingFeatures.map(async (feature) => {
+        const { Content } = await feature.render();
+        return (
+          <div class="flex flex-col text-center">
+            <InlineSVG
+              src={feature.data.img}
+              class="mx-auto mb-6 h-24 w-auto"
+            />
+
+            <h2 class="mb-2 font-heading text-3xl font-bold leading-none text-nix-blue">
+              {feature.data.title}
+            </h2>
+
+            <div class="leading-relaxed">
+              <Content />
+            </div>
+          </div>
+        );
+      })
+    }
+  </Container>
+</section>
diff --git a/src/components/pages/home/Hero.astro b/src/components/pages/home/Hero.astro
new file mode 100644
index 0000000000..a6bccf91c3
--- /dev/null
+++ b/src/components/pages/home/Hero.astro
@@ -0,0 +1,47 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Asciinema from '@/components/ui/Asciinema.astro';
+import Button from '@/components/ui/Button.astro';
+import Card from '@/components/ui/Card.astro';
+---
+
+<section
+  class="bg-nix-blue bg-cover bg-left bg-no-repeat py-16 inline-svg-hero lg:py-20"
+>
+  <Container class="grid grid-cols-1 gap-8 text-white lg:grid-cols-2">
+    <div class="mx-0 my-auto flex flex-col gap-4">
+      <h1 class="font-heading text-5xl font-bold leading-none">
+        Declarative builds<br class="hidden md:inline-block" /> and deployments.
+      </h1>
+
+      <p class="text-lg leading-7">
+        Nix is a tool that takes a unique approach to package management and
+        system configuration. Learn how to make reproducible, declarative and
+        reliable systems.
+      </p>
+
+      <div
+        class="flex flex-col justify-center gap-4 md:flex-row lg:justify-stretch"
+      >
+        <Button href="/download" color="green" size="lg">Download</Button>
+        <Button href="/learn" color="lightblue" size="lg">Get started</Button>
+      </div>
+    </div>
+
+    <Card class="bg-white/40 backdrop-blur-sm">
+      <Asciinema
+        src="/demos/cover.cast"
+        settings={{
+          cols: 84,
+          poster: 'npt:0:01:22',
+          markers: [
+            [11.5, 'Ad-Hoc development environments'],
+            [41.5, 'Declarative development environments'],
+            [85.0, 'Build docker image with Nix'],
+            [122.0, 'Build minimal docker image with Nix'],
+          ],
+        }}
+      />
+    </Card>
+  </Container>
+</section>
diff --git a/src/components/pages/home/SearchPackages.astro b/src/components/pages/home/SearchPackages.astro
new file mode 100644
index 0000000000..76ecc93660
--- /dev/null
+++ b/src/components/pages/home/SearchPackages.astro
@@ -0,0 +1,45 @@
+---
+import Container from '@/components/layout/Container.astro';
+import NixosSearchInput from '@/components/ui/NixosSearchInput.astro';
+---
+
+<section
+  class={`
+    relative
+    after:block
+    after:bg-[url(/divider/landing_search_bottom.svg)]
+    after:bsolute
+    after:left-0
+    after:bottom-0
+    after:w-full
+    after:bg-divider
+    after:overflow-hidden
+    after:bg-[60%_100%]
+    after:bg-no-repeat
+    after:h-[30rem]
+    after:-mb-16
+    after:-mt-48
+  `}
+>
+  <div class="bg-nix-blue-extralight pt-4">
+    <Container
+      class="flex w-full flex-col items-center justify-center gap-4 pb-8 pt-8"
+    >
+      <h2
+        class="pb-0 text-center font-heading text-4xl font-bold leading-tight text-nix-blue md:w-2/3"
+      >
+        Choose from Thousands of Packages
+      </h2>
+      <p class="pb-2 text-center text-2xl leading-relaxed md:w-5/6">
+        The Nix Packages collection (<a
+          class="font-bold !text-nix-blue"
+          href="#">Nixpkgs</a
+        >) is a set of <span class="font-bold text-nix-green"
+          >over 100 000 packages</span
+        >
+        for the Nix package manager.
+      </p>
+      <NixosSearchInput collection="packages" withSubmit />
+    </Container>
+  </div>
+</section>
diff --git a/src/components/pages/learn/LearningFeatures.astro b/src/components/pages/learn/LearningFeatures.astro
new file mode 100644
index 0000000000..4d8990a118
--- /dev/null
+++ b/src/components/pages/learn/LearningFeatures.astro
@@ -0,0 +1,40 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Button from '@/components/ui/Button.astro';
+import Card from '@/components/ui/Card.astro';
+import InlineSVG from '@/components/util/InlineSVG.astro';
+
+const learningFeatures = [
+  {
+    imgUrl: '/src/assets/image/learn/installGfx.svg',
+    title: 'Install Nix',
+    color: 'green',
+    url: '/download#download-nix',
+  },
+  {
+    imgUrl: '/src/assets/image/learn/firstStepsGfx.svg',
+    title: 'First steps with Nix',
+    color: 'orange',
+    url: 'https://nix.dev/tutorials/first-steps/',
+  },
+  {
+    imgUrl: '/src/assets/image/learn/howItWorksGfx.svg',
+    title: 'How Nix works',
+    color: 'lightblue',
+    url: '/guides/how-nix-works',
+  },
+] as const;
+---
+
+<Container class="grid gap-4 py-16 md:grid-cols-3">
+  {
+    learningFeatures.map((feature) => (
+      <Card class="flex flex-col justify-center gap-8 border-2 border-nix-blue p-8">
+        <InlineSVG src={feature.imgUrl} class="h-28" />
+        <Button size="lg" color={feature.color} href={feature.url}>
+          {feature.title}
+        </Button>
+      </Card>
+    ))
+  }
+</Container>
diff --git a/src/components/pages/learn/LearningManuals.astro b/src/components/pages/learn/LearningManuals.astro
new file mode 100644
index 0000000000..48e6ea26d0
--- /dev/null
+++ b/src/components/pages/learn/LearningManuals.astro
@@ -0,0 +1,37 @@
+---
+import { getCollection } from 'astro:content';
+
+import Container from '@/components/layout/Container.astro';
+import Button from '@/components/ui/Button.astro';
+import Card from '@/components/ui/Card.astro';
+import InlineSVG from '@/components/util/InlineSVG.astro';
+
+const learningManuals = await getCollection('learning-manuals');
+---
+
+<Container class="grid items-start gap-4 py-16 md:grid-cols-3">
+  {
+    learningManuals.map(async (manual) => {
+      const { Content } = await manual.render();
+      return (
+        <Card class="flex flex-col items-center justify-start gap-4 border-2 border-nix-blue">
+          <article>
+            <InlineSVG
+              src="/src/assets/image/doc-icon.svg"
+              class="img-noadjust float-left inline h-20 w-20 pr-6"
+            />
+            <h2 class="mb-4 font-heading text-3xl font-bold leading-none text-nix-blue">
+              {manual.data.title}
+            </h2>
+            <div class="leading-relaxed">
+              <Content />
+            </div>
+          </article>
+          <Button size="sm-mobfull" color="green" href={manual.data.url}>
+            Full {manual.data.title}
+          </Button>
+        </Card>
+      );
+    })
+  }
+</Container>
diff --git a/src/components/pages/learn/LearningResources.astro b/src/components/pages/learn/LearningResources.astro
new file mode 100644
index 0000000000..ff6e800d4e
--- /dev/null
+++ b/src/components/pages/learn/LearningResources.astro
@@ -0,0 +1,53 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Divider from '@/components/layout/Divider.astro';
+import Button from '@/components/ui/Button.astro';
+
+const learningResources = [
+  {
+    title: 'The Nix hour',
+    description:
+      'A weekly beginner-oriented interactive video lecture on all things Nix. Running since October 2022.',
+    url: 'https://www.youtube.com/playlist?list=PLyzwHTVJlRc8yjlx4VR4LU5A5O44og9in',
+    buttonText: 'Watch on Youtube',
+  },
+  {
+    title: 'NixOS Wiki',
+    description: 'A user-maintained wiki for Nix and NixOS',
+    url: 'https://wiki.nixos.org/',
+    buttonText: 'Check the wiki',
+  },
+  {
+    title: 'Nix Pills',
+    description:
+      'A low-level tutorial on building software packages with Nix, showing in detail how Nixpkgs is constructed.',
+    url: '/guides/nix-pills',
+    buttonText: 'Take the Pills',
+  },
+] as const;
+---
+
+<Divider style="slope" mirrorY />
+
+<div class="bg-nix-blue py-8 text-white md:px-8">
+  <Container>
+    <h2 class="pb-8 font-heading text-4xl font-extrabold">
+      Other learning resources
+    </h2>
+    <div class="grid gap-12 pb-12 md:grid-cols-3 md:gap-4">
+      {
+        learningResources.map((item) => (
+          <div class="flex flex-col items-start">
+            <h3 class="mb-2 font-heading text-2xl font-extrabold">
+              {item.title}
+            </h3>
+            <p class="mb-4 leading-relaxed">{item.description}</p>
+            <Button size="sm-mobfull" color="orange" href={item.url}>
+              {item.buttonText}
+            </Button>
+          </div>
+        ))
+      }
+    </div>
+  </Container>
+</div>
diff --git a/src/components/pages/learn/LearningSearch.astro b/src/components/pages/learn/LearningSearch.astro
new file mode 100644
index 0000000000..d320a643c8
--- /dev/null
+++ b/src/components/pages/learn/LearningSearch.astro
@@ -0,0 +1,25 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Divider from '@/components/layout/Divider.astro';
+import NixosSearchInput from '@/components/ui/NixosSearchInput.astro';
+---
+
+<Divider style="slope" mirrorY mirrorX />
+
+<div class="bg-nix-blue py-8 text-white md:px-8">
+  <Container>
+    <h2 class="pb-8 font-heading text-4xl font-extrabold">Search</h2>
+    <div class="grid gap-4 md:grid-cols-2">
+      <div>
+        <h3 class="mb-4 font-heading text-2xl font-extrabold">Nix packages</h3>
+        <NixosSearchInput color="white" size="sm-full" collection="packages" />
+      </div>
+      <div>
+        <h3 class="mb-4 font-heading text-2xl font-extrabold">NixOS options</h3>
+        <NixosSearchInput color="white" size="sm-full" collection="options" />
+      </div>
+    </div>
+  </Container>
+</div>
+
+<Divider style="slope" mirrorX />
diff --git a/src/components/pages/values/ValuesIntroduction.astro b/src/components/pages/values/ValuesIntroduction.astro
new file mode 100644
index 0000000000..758b5885c5
--- /dev/null
+++ b/src/components/pages/values/ValuesIntroduction.astro
@@ -0,0 +1,71 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Quotation from '@/components/ui/Quotation.astro';
+import Link from '@/components/util/Link.astro';
+---
+
+<Container class="mt-16 space-y-4 leading-relaxed">
+  <h2
+    class="mt-4 font-heading text-4xl font-bold text-nix-blue"
+    id="community-values-intro"
+  >
+    Introduction
+    <Link href="#community-values-intro" class="text-lg">🔗</Link>
+  </h2>
+
+  <Quotation>
+    <p>
+      Communities form when different people unite around a common purpose.
+      Shared values guide decision making, and community goals supersede
+      individual interests and agendas.
+    </p>
+
+    <p class="py-2 text-right italic">
+      <Link href="https://opensource.com/open-source-way" class="text-lg"
+        >The Open Source Way</Link
+      >
+    </p>
+  </Quotation>
+
+  <p class="mt-2 leading-relaxed">
+    Our common purpose is to develop, propagate, and promote the adoption of the <Link
+      href="https://edolstra.github.io/pubs/phd-thesis.pdf"
+      >purely functional software deployment model</Link
+    >. Our values help us achieve this purpose by guiding decisionmaking across
+    the community, keeping us moving in a common direction. This document
+    captures our core values so that they can be shared and referenced by
+    everyone in the community.
+  </p>
+
+  <h3
+    class="mt-4 font-heading text-3xl font-bold text-nix-blue"
+    id="community-values-whatis"
+  >
+    What is a value?
+    <Link href="#community-values-whatis" class="text-lg">🔗</Link>
+  </h3>
+
+  <p class="mt-2 leading-relaxed">
+    Values are <span class="italic">not</span> a Code of Conduct, they do not define
+    governance structures, and they do not provide specific policies. Instead, values
+    inform the decisions we make about these things. A good test for <Link
+      href="https://medium.com/the-u-s-digital-service/our-values-1fc02b53598"
+      >whether something is a value</Link
+    > is:
+  </p>
+
+  <Quotation>
+    If a statement can be invoked by anyone in an organization, and cause a
+    decision to be re-evaluated or changed, without regard to anyone’s rank or
+    title, then you have a bona fide [i.e. genuine] value. If it doesn’t work
+    that way, then it’s not a value.
+  </Quotation>
+
+  <p class="mt-2 leading-relaxed">
+    To apply in many situations, values must be high-level, abstract concepts.
+    Therefore, in the text below, each value is presented as a heading followed
+    by an elaboration of its meaning. This is meant as a starting point for
+    interpretation, not a comprehensive definition. The heading and the
+    elaboration have equal importance.
+  </p>
+</Container>
diff --git a/src/components/pages/values/ValuesList.astro b/src/components/pages/values/ValuesList.astro
new file mode 100644
index 0000000000..0e0663590d
--- /dev/null
+++ b/src/components/pages/values/ValuesList.astro
@@ -0,0 +1,138 @@
+---
+import Container from '@/components/layout/Container.astro';
+import Divider from '@/components/layout/Divider.astro';
+import Citation from '@/components/ui/Citation.astro';
+import Link from '@/components/util/Link.astro';
+---
+
+<Divider mirrorY />
+
+<div class="bg-nix-blue py-8 text-white">
+  <Container>
+    <h2
+      class="text-nix-white mt-4 font-heading text-3xl font-bold"
+      id="community-values-values"
+    >
+      The values
+      <Link href="#community-values-values" class="text-lg">🔗</Link>
+    </h2>
+
+    <h3
+      class="text-nix-white mt-4 font-heading text-2xl font-bold"
+      id="community-values-respect"
+    >
+      Respect and civility
+      <Link href="#community-values-respect" class="text-lg">🔗</Link>
+    </h3>
+
+    <p>
+      We treat each other with respect and civility. No matter one's individual
+      identity, circumstances, level of contribution to the project, or status,
+      everyone has the right to respect, and everyone has the duty to treat
+      others with respect. We prioritise project health over individual
+      interests. People with higher visibility within the project or towards the
+      public are subject to higher expectations for their conduct.
+    </p>
+
+    <h3
+      class="text-nix-white mt-4 font-heading text-2xl font-bold"
+      id="community-values-people"
+    >
+      People come first
+      <Link href="#community-values-people" class="text-lg">🔗</Link>
+    </h3>
+
+    <p>
+      We are here, first and foremost, as individuals working together. Our
+      priority here is to work on Nix projects for the benefit of all their
+      contributors and users. We value building excellent software with a
+      vibrant and diverse community. Individuals gain trust and status by doing
+      the work. Organisations gain prestige by funding the work of individuals
+      and providing resources to support the project.
+    </p>
+
+    <h3
+      class="text-nix-white mt-4 font-heading text-2xl font-bold"
+      id="community-values-choice"
+    >
+      Free software and choice over lock-in
+      <Link href="#community-values-choice" class="text-lg">🔗</Link>
+    </h3>
+
+    <p>
+      Nix projects are and will always remain <Link
+        href="https://www.gnu.org/philosophy/free-sw.en.html"
+        >free software</Link
+      >. We value working together with the broader free software community.
+      Free software is our priority, but we also support our users' needs to use
+      non-free software, when practical.
+    </p>
+
+    <h3
+      class="text-nix-white mt-4 font-heading text-2xl font-bold"
+      id="community-values-decisionmaking"
+    >
+      Distribute decisionmaking widely
+      <Link href="#community-values-decisionmaking" class="text-lg">🔗</Link>
+    </h3>
+
+    <p>
+      We are a synthesis of varied but overlapping communities. We rely on
+      distributed approaches: asynchronous communication, clear ownership,
+      deep-dive taskforces, and local decisionmaking. We focus our attention on
+      working together on our shared goals and working separately in a
+      non-interfering way when our goals are independent. We build trust
+      primarily by working together on Nix projects.
+    </p>
+
+    <h3
+      class="text-nix-white mt-4 font-heading text-2xl font-bold"
+      id="community-values-automation"
+    >
+      Automation over process and toil
+      <Link href="#community-values-automation" class="text-lg">🔗</Link>
+      <Citation id={1} onBlueBackground>
+        <Link
+          href="https://web.archive.org/web/20240717145635/https://sre.google/sre-book/eliminating-toil/"
+          >Toil</Link
+        > is work that tends to be manual, repetitive, automatable, interrupt-driven,
+        devoid of enduring value, and scaling linearly with growth.
+      </Citation>
+    </h3>
+
+    <p>
+      We are a global community, and disseminating information and maintaining
+      processes can be difficult. We are also a large project with a lot of hard
+      and repetitive work. Therefore, we value automation over toil, while
+      recognizing that not all toil can be automated. Automation reduces toil,
+      but people are still accountable. Adding new toil needs a very strong
+      justification. We build automation and processes that make the best use of
+      our contributors' limited time and energy.
+    </p>
+
+    <h3
+      class="text-nix-white mt-4 font-heading text-2xl font-bold"
+      id="community-values-stability"
+    >
+      Stable evolution over stagnation or chaos
+      <Link href="#community-values-stability" class="text-lg">🔗</Link>
+    </h3>
+
+    <p>
+      Openness to new ideas and evolution is part of what made Nix great. We
+      continue to foster that evolution while encouraging development of
+      re-usable building blocks and well-defined, stable interfaces. We value
+      experimenting with designs and concepts, and folding successful
+      experiments back into continuous improvement for stable components. The
+      larger the impact an action has, the more care and discussion is warranted
+      before taking the action. Our leaders have a duty to find, support, and
+      promote new contributors — and eventually step aside for new leaders.
+    </p>
+  </Container>
+</div>
+
+<style>
+  .bg-nix-blue a {
+    @apply text-white hover:text-gray-100;
+  }
+</style>
diff --git a/src/components/ui/Asciinema.astro b/src/components/ui/Asciinema.astro
index 10a55653b4..0016cb32da 100644
--- a/src/components/ui/Asciinema.astro
+++ b/src/components/ui/Asciinema.astro
@@ -1,6 +1,6 @@
 ---
-import "asciinema-player/dist/bundle/asciinema-player.css";
-import { AsciinemaSettings } from "asciinema-player";
+import { AsciinemaSettings } from 'asciinema-player';
+import 'asciinema-player/dist/bundle/asciinema-player.css';
 
 interface Props {
   src: string;
@@ -15,31 +15,31 @@ const defaultSettings = {
   autoPlay: false,
   loop: true,
   controls: true,
-  fit: "width",
-  terminalFontFamily: "Fira Code Variable",
+  fit: 'width',
+  terminalFontFamily: 'Fira Code Variable',
 };
 
 const {
   src,
   settings = {},
-  class: extraClasses = "",
+  class: extraClasses = '',
   title = undefined,
 }: Props = Astro.props;
 
-const demoId = "asciinema-demo-" + src.split("/").pop().split(".")[0];
+const demoId = 'asciinema-demo-' + src.split('/').pop().split('.')[0];
 ---
 
 <>
   {
     title && (
       <a href={`#${demoId}`} class="!no-underline" id={`${demoId}-link`}>
-        <h3 class="text-nix-blue text-xl font-heading font-bold">{title}</h3>
+        <h3 class="font-heading text-xl font-bold text-nix-blue">{title}</h3>
       </a>
     )
   }
   <asciinema-player
     id={demoId}
-    class={extraClasses}
+    class:list={[title && 'scroll-mt-32', extraClasses]}
     data-src={src}
     data-title={title}
     data-settings={JSON.stringify({ ...defaultSettings, ...settings })}
@@ -48,7 +48,7 @@ const demoId = "asciinema-demo-" + src.split("/").pop().split(".")[0];
 </>
 
 <script>
-  import * as AsciinemaPlayer from "asciinema-player";
+  import * as AsciinemaPlayer from 'asciinema-player';
   class Asciinema extends HTMLElement {
     constructor() {
       super();
@@ -59,21 +59,21 @@ const demoId = "asciinema-demo-" + src.split("/").pop().split(".")[0];
         settings.autoPlay = true;
       }
 
-      document.fonts.load("1em " + settings.terminalFontFamily).then(() => {
+      document.fonts.load('1em ' + settings.terminalFontFamily).then(() => {
         const player = AsciinemaPlayer.create(src, this, settings);
-      });
 
-      if (this.dataset.title) {
-        document
-          .getElementById(`${this.id}-link`)
-          .addEventListener("click", (e) => {
-            player.play();
-          });
-      }
+        if (this.dataset.title) {
+          document
+            .getElementById(`${this.id}-link`)
+            .addEventListener('click', () => {
+              player.play();
+            });
+        }
+      });
     }
   }
 
-  customElements.define("asciinema-player", Asciinema);
+  customElements.define('asciinema-player', Asciinema);
 </script>
 
 <style is:global>
diff --git a/src/components/ui/Banner.astro b/src/components/ui/Banner.astro
index 124bd6d2ee..d57e98c3c2 100644
--- a/src/components/ui/Banner.astro
+++ b/src/components/ui/Banner.astro
@@ -1,26 +1,27 @@
 ---
-const { class: extraClasses, wrapperClasses, id = null } = Astro.props;
+import Container from '@/components/layout/Container.astro';
 
-import Container from "../layout/Container.astro";
+const { class: extraClasses, wrapperClasses, id = null } = Astro.props;
 ---
 
 <div
+  id={id}
   class:list={[
-    "clickable bg-nix-blue-extralight font-bold font-heading text-nix-blue-dark",
+    'clickable cursor-pointer bg-nix-blue-extralight font-heading font-bold text-nix-blue-dark',
     wrapperClasses,
   ]}
 >
-  <Container class:list={["p-4", extraClasses]}>
+  <Container class:list={['p-4', extraClasses]}>
     <slot />
   </Container>
 </div>
 
 <script>
-  let clickables = document.querySelectorAll(".clickable");
+  const clickables = document.querySelectorAll('.clickable');
+
   clickables.forEach((clickable) => {
-    clickable.classList.add("cursor-pointer");
-    clickable.addEventListener("click", () => {
-      clickable.querySelector("a, button").click();
+    clickable.addEventListener('click', () => {
+      (clickable.querySelector('a, button') as HTMLElement).click();
     });
   });
 </script>
diff --git a/src/components/ui/Button.astro b/src/components/ui/Button.astro
index 71a179f3bc..82f9814b6e 100644
--- a/src/components/ui/Button.astro
+++ b/src/components/ui/Button.astro
@@ -1,11 +1,32 @@
 ---
-import SHA from "./SHA.astro";
+import { cva, type VariantProps } from 'class-variance-authority';
 
-interface Props {
-  color?: "orange" | "green" | "lightblue" | "semidarkblue";
-  size?: "sm" | "lg" | "lg-full" | "sm-mobfull";
+import SHA from '@/components/ui/SHA.astro';
+import Link from '@/components/util/Link.astro';
+
+export const buttonVariants = cva(
+  'font-bold text-white drop-shadow transition-colors',
+  {
+    variants: {
+      color: {
+        orange: 'bg-nix-orange hover:bg-nix-orange-hover',
+        lightblue: 'bg-nix-blue-light hover:bg-nix-blue-light-hover',
+        semidarkblue: 'bg-nix-blue-dark hover:bg-nix-blue-dark-hover',
+        green: 'bg-nix-green hover:bg-nix-green-hover',
+      },
+      size: {
+        sm: 'px-10 py-2.5 rounded-3xl text-center',
+        'sm-mobfull': 'px-8 py-2.5 rounded-3xl md:w-auto w-full text-center',
+        lg: 'px-10 py-2.5 md:px-14 md:py-4 rounded-full text-center w-full md:w-auto',
+        'lg-full': 'text-center py-4 block rounded-2xl',
+      },
+    },
+  },
+);
+
+interface Props extends VariantProps<typeof buttonVariants> {
   href?: string | null;
-  type?: "button" | "submit" | "reset";
+  type?: 'button' | 'submit' | 'reset';
   classList?: string[];
   shaHref?: string | null;
   shaClassList?: string[];
@@ -13,52 +34,40 @@ interface Props {
   label?: string;
 }
 
-const colorMap = {
-  orange: "bg-nix-orange",
-  lightblue: "bg-nix-blue-light",
-  semidarkblue: "bg-nix-blue-dark",
-  green: "bg-nix-green",
-};
-
-const sizeMap = {
-  sm: "px-10 py-2.5 rounded-3xl text-center",
-  "sm-mobfull": "px-8 py-2.5 rounded-3xl md:w-auto w-full text-center",
-  lg: "px-10 py-2.5 md:px-14 md:py-4 rounded-full md:rounded-2xl text-center w-full md:w-auto",
-  "lg-full": "text-center py-4 block rounded-2xl",
-};
-
 const {
-  color = "orange",
-  size = "sm",
+  color = 'orange',
+  size = 'sm',
   href = null,
-  type = "button",
+  type = 'button',
   classList = [],
   shaHref = null,
   shaClassList = [],
-  shaText = "",
+  shaText = '',
   label,
 } = Astro.props;
-
-const localClassList = `${colorMap[color]} font-bold ${sizeMap[size]} text-white drop-shadow`;
 ---
 
 {
   href ? (
     <>
-      <a
+      <Link
         href={href}
-        class:list={["!text-white !no-underline", localClassList, classList]}
+        class:list={[
+          '!text-white !no-underline',
+          buttonVariants({ color, size }),
+          classList,
+        ]}
       >
         {label || <slot />}
-      </a>
+      </Link>
       {shaHref && (
-        <SHA href={shaHref} classList={shaClassList}>
+        <SHA href={shaHref} class:list={shaClassList}>
           {shaText}
         </SHA>
       )}
     </>
   ) : (
-    <button type={type} class={localClassList}>
+    <button type={type} class={buttonVariants({ color, size })}>
       <slot />
     </button>
   )
diff --git a/src/components/ui/Card.astro b/src/components/ui/Card.astro
new file mode 100644
index 0000000000..e37287b5fc
--- /dev/null
+++ b/src/components/ui/Card.astro
@@ -0,0 +1,13 @@
+---
+import type { HTMLTag } from 'astro/types';
+
+interface Props {
+  as?: HTMLTag;
+}
+
+const { as: Element = 'div', class: extraClasses, ...props } = Astro.props;
+---
+
+<Element class:list={['rounded-lg p-4 shadow-lg', extraClasses]} {...props}>
+  <slot />
+</Element>
diff --git a/src/components/ui/Citation.astro b/src/components/ui/Citation.astro
index eedbfe12e0..430322ef27 100644
--- a/src/components/ui/Citation.astro
+++ b/src/components/ui/Citation.astro
@@ -12,16 +12,16 @@ const { id, onBlueBackground } = Astro.props;
     <summary class="inline-block cursor-pointer">
       <sup
         class:list={[
-          onBlueBackground && "text-white hover:text-gray-100",
-          !onBlueBackground && "text-nix-blue hover:text-nix-blue",
+          onBlueBackground && 'text-white hover:text-gray-100',
+          !onBlueBackground && 'text-nix-blue hover:text-nix-blue',
         ]}>[{id}]</sup
       >
     </summary>
     <div
       class:list={[
-        "absolute border border-gray-300 p-2 mt-1 rounded shadow-lg max-w-sm text-sm",
-        !onBlueBackground && "!bg-white",
-        onBlueBackground && "!bg-nix-blue-darker",
+        'absolute mt-1 max-w-sm rounded border border-gray-300 p-2 text-sm shadow-lg',
+        !onBlueBackground && '!bg-white',
+        onBlueBackground && '!bg-nix-blue-darker',
       ]}
     >
       <slot />
@@ -40,14 +40,14 @@ const { id, onBlueBackground } = Astro.props;
 
 <script>
   // Optional: Close other open details when one is opened
-  document.addEventListener("click", (event) => {
+  document.addEventListener('click', (event) => {
     if (
       event.target instanceof HTMLElement &&
-      event.target.tagName === "SUMMARY"
+      event.target.tagName === 'SUMMARY'
     ) {
-      document.querySelectorAll("details[open]").forEach((detail) => {
+      document.querySelectorAll('details[open]').forEach((detail) => {
         if (detail !== event.target.parentElement) {
-          detail.removeAttribute("open");
+          detail.removeAttribute('open');
         }
       });
     }
diff --git a/src/components/ui/Input.astro b/src/components/ui/Input.astro
index ca0c32b42a..b046b84bb8 100644
--- a/src/components/ui/Input.astro
+++ b/src/components/ui/Input.astro
@@ -1,49 +1,59 @@
 ---
-import { Icon } from "astro-icon/components";
+import { Icon } from 'astro-icon/components';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-interface Props {
-  color?: "nix-blue" | "white";
-  size?: "sm" | "lg" | "sm-full";
-  icon?: "search" | null;
+export const inputVariants = cva(
+  'text-normal rounded-full placeholder-gray-400',
+  {
+    variants: {
+      color: {
+        'nix-blue': 'placeholder-grey-200 text-nix-blue',
+        white:
+          'border-white bg-transparent text-white placeholder-nix-blue-extralight',
+      },
+      size: {
+        sm: '',
+        lg: 'w-full border-2 py-3 pl-11 pr-4 text-xl md:w-[30rem]',
+        'sm-full': 'w-full border-1 px-10 py-2 md:pl-11',
+      },
+    },
+  },
+);
+
+interface Props extends VariantProps<typeof inputVariants> {
+  icon?: 'search' | null;
   placeholder?: string;
   name?: string;
 }
 
 const {
-  color = "nix-blue",
-  size = "lg",
+  color = 'nix-blue',
+  size = 'lg',
   icon = null,
-  placeholder = "",
+  placeholder = '',
   name = null,
 } = Astro.props;
 ---
 
 <div class="relative">
   <Icon
-    alt="Search"
     class:list={[
-      "h-8 w-8 absolute",
+      'absolute h-8 w-8',
       {
-        "text-nix-blue": color === "nix-blue",
-        "text-white": color === "white",
-        "top-3.5 left-3 md:block": size === "lg",
-        "top-1.5 left-2.5": size === "sm-full",
+        'text-nix-blue': color === 'nix-blue',
+        'text-white': color === 'white',
+        'left-3 top-3.5 md:block': size === 'lg',
+        'left-2.5 top-1.5': size === 'sm-full',
       },
     ]}
     name="mdi:search"
   />
   <input
     type="text"
-    class="outline-nix-blue-light outline-2 focus:outline focus:border-nix-blue-light"
+    class="outline-2 outline-nix-blue-light focus:border-nix-blue-light focus:outline"
     class:list={[
-      "rounded-full placeholder-gray-400 text-normal",
-      {
-        "text-nix-blue placeholder-grey-200": color === "nix-blue",
-        "border-white text-white placeholder-nix-blue-extralight bg-transparent":
-          color === "white",
-        "w-full py-3 text-xl pl-11 pr-4 md:w-[30rem] border-2": size === "lg",
-        "px-10 md:pl-11 py-2 w-full border-1": size === "sm-full",
-      },
+      'text-normal rounded-full placeholder-gray-400',
+      inputVariants({ color, size }),
     ]}
     name={name}
     placeholder={placeholder}
diff --git a/src/components/ui/NixosSearchInput.astro b/src/components/ui/NixosSearchInput.astro
index d64740b23f..feeafc351c 100644
--- a/src/components/ui/NixosSearchInput.astro
+++ b/src/components/ui/NixosSearchInput.astro
@@ -1,24 +1,24 @@
 ---
-import Button from "./Button.astro";
-import Input from "./Input.astro";
+import type { VariantProps } from 'class-variance-authority';
 
-interface Props {
-  color?: "nix-blue" | "white";
-  size?: "sm" | "lg" | "sm-full";
-  collection?: "packages" | "options";
+import Button from '@/components/ui/Button.astro';
+import Input, { inputVariants } from '@/components/ui/Input.astro';
+
+interface Props extends VariantProps<typeof inputVariants> {
+  collection?: 'packages' | 'options';
   withSubmit?: boolean;
   withSubmitClass?: string;
 }
 
 const collectionMap = {
-  packages: "Nix packages",
-  options: "NixOS options",
+  packages: 'Nix packages',
+  options: 'NixOS options',
 };
 
 const {
-  color = "nix-blue",
-  size = "lg",
-  collection = "packages",
+  color = 'nix-blue',
+  size = 'lg',
+  collection = 'packages',
   withSubmit = false,
 } = Astro.props;
 ---
@@ -28,7 +28,7 @@ const {
   action={`https://search.nixos.org/${collection}`}
   class:list={[
     {
-      "flex flex-col items-stretch md:items-center justify-center gap-6 w-full md:w-auto":
+      'flex w-full flex-col items-stretch justify-center gap-6 md:w-auto md:items-center':
         withSubmit,
     },
   ]}
diff --git a/src/components/ui/Quotation.astro b/src/components/ui/Quotation.astro
index 7316133175..a47be16bd2 100644
--- a/src/components/ui/Quotation.astro
+++ b/src/components/ui/Quotation.astro
@@ -1,11 +1,11 @@
 ---
+import Card from './Card.astro';
+
 export interface Props {}
 
 const {} = Astro.props;
 ---
 
-<div
-  class="bg-nix-blue-extralight text-nix-blue-darker font-bold p-8 rounded-3xl"
->
+<Card class="bg-nix-blue-extralight font-bold text-nix-blue-darker shadow-none">
   <slot />
-</div>
+</Card>
diff --git a/src/components/ui/SHA.astro b/src/components/ui/SHA.astro
index 878daff3a3..02dac225c1 100644
--- a/src/components/ui/SHA.astro
+++ b/src/components/ui/SHA.astro
@@ -1,14 +1,15 @@
 ---
-interface Props {
-  href?: string;
-  classList?: string[];
-}
+import type { HTMLAttributes } from 'astro/types';
 
-const { href = "#", classList = [] } = Astro.props;
+import Link from '@/components/util/Link.astro';
+
+interface Props extends HTMLAttributes<'a'> {}
+
+const { href = '#', ...props } = Astro.props;
 ---
 
 <span class="mx-[0.5rem] hidden md:inline">
-  <a href={href} class:list={[classList]}>
+  <Link href={href} {...props}>
     <slot />
-  </a>
+  </Link>
 </span>
diff --git a/src/components/ui/Tag.astro b/src/components/ui/Tag.astro
index 0129938cf4..7e73fe79b8 100644
--- a/src/components/ui/Tag.astro
+++ b/src/components/ui/Tag.astro
@@ -1,39 +1,43 @@
 ---
-interface Props {
-  color?: "orange" | "darkgreen" | "lightblue" | "darkblue";
-  outline?: boolean;
-  classList?: string[];
-  href?: string | null;
-}
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import Link from '@/components/util/Link.astro';
 
-const {
-  color = "darkblue",
-  classList = [],
-  href = null,
-  outline = false,
-} = Astro.props;
+export const tagVariants = cva(
+  'border py-[0.125rem] px-[0.5rem] inline-block w-fit rounded-md font-bold leading-none !no-underline text-sm',
+  {
+    variants: {
+      color: {
+        orange: 'bg-nix-orange !text-white',
+        'outline-orange': 'bg-transparent border-nix-orange text-nix-orange',
+        darkgreen: 'bg-nix-green-dark !text-white',
+        'outline-darkgreen':
+          'bg-transparent border-nix-green-dark text-nix-green-dark',
+        lightblue: 'bg-nix-blue-light !text-white',
+        'outline-lightblue':
+          'bg-transparent border-nix-blue-light text-nix-blue-light',
+        darkblue: 'bg-nix-blue !text-white',
+        'outline-darkblue': 'bg-transparent border-nix-blue text-nix-blue',
+      },
+    },
+  },
+);
 
-const colorMap = {
-  orange: outline ? "bg-transparent border-nix-orange" : "bg-nix-orange",
-  lightblue: outline
-    ? "bg-transparent border-nix-blue-light"
-    : "bg-nix-blue-light",
-  darkblue: outline ? "bg-transparent border-nix-blue" : "bg-nix-blue",
-  darkgreen: outline
-    ? "bg-transparent border-nix-green-dark"
-    : "bg-nix-green-dark",
-};
+interface Props extends VariantProps<typeof tagVariants> {
+  class?: string;
+  href?: string | null;
+}
 
-const localClassList = `${colorMap[color]} ${outline ? "border-1 !text-black py-[0.125rem]" : "border-0 !text-white py-[0.25rem]"} inline-block w-fit rounded-lg font-bold !no-underline text-sm px-[0.5rem]`;
+const { color = 'darkblue', class: extraClasses, href = null } = Astro.props;
 ---
 
 {
   href ? (
-    <a href={href} class:list={[localClassList, classList]}>
+    <Link href={href} class:list={[tagVariants({ color }), extraClasses]}>
       <slot />
-    </a>
+    </Link>
   ) : (
-    <span href={href} class:list={[localClassList, classList]}>
+    <span class:list={[tagVariants({ color }), extraClasses]}>
       <slot />
     </span>
   )
diff --git a/src/components/util/Link.astro b/src/components/util/Link.astro
new file mode 100644
index 0000000000..e05c3fd148
--- /dev/null
+++ b/src/components/util/Link.astro
@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'a'> {}
+
+const { href, ...props } = Astro.props;
+
+let linkProps = { href, ...props };
+
+if (!!href && href.toString().startsWith('http')) {
+  linkProps = { ...linkProps, target: '_blank', rel: 'noopener noreferrer' };
+}
+---
+
+<a {...linkProps}>
+  <slot />
+</a>
diff --git a/src/content/menus/footer.yaml b/src/content/menus/footer.yaml
index 2632249dba..92d976b20a 100644
--- a/src/content/menus/footer.yaml
+++ b/src/content/menus/footer.yaml
@@ -34,8 +34,8 @@ sections:
 social:
   - name: Mastodon
     link: https://chaos.social/@nixos_org
-  - name: Twitter
-    link: https://twitter.com/nixos_org
+  - name: X
+    link: https://x.com/nixos_org
   - name: Youtube
     link: https://www.youtube.com/channel/UC3vIimi9q4AT8EgxYp_dWIw
   - name: GitHub
diff --git a/src/layouts/Header.astro b/src/layouts/Header.astro
deleted file mode 100644
index 2b185e59f7..0000000000
--- a/src/layouts/Header.astro
+++ /dev/null
@@ -1,99 +0,0 @@
----
-import { Icon } from "astro-icon/components";
-import { getEntry } from "astro:content";
-import Container from "../components/layout/Container.astro";
-import InlineSVG from "../components/util/InlineSVG.astro";
-const headerMenu = await getEntry("menus", "header");
-
-const currentTopRoute = `/${Astro.url.pathname.split("/")[1]}`;
-
-const navbarItemStyle = `text-center text-nix-blue-dark md:text-black md:hover:border-b-nix-blue-light border-b-4`;
-const navbarItemInactiveStyle = `border-b-nix-blue-extralight md:border-b-transparent bg-nix-blue-extralight md:bg-transparent`;
-const navbarItemActiveStyle = `border-b-nix-blue-light bg-nix-blue-light text-white md:text-black md:bg-transparent font-bold`;
----
-
-<header
-  role="banner"
-  class="bg-white text-black font-extralight drop-shadow-md"
->
-  <Container class="flex flex-col md:flex-row justify-between md:items-center">
-    <div
-      class="text-4xl font-normal gap-2 flex justify-between md:justify-start items-center my-2"
-    >
-      <a
-        href="/"
-        class="select-none gap-2 flex justify-between md:justify-start items-center"
-      >
-        <InlineSVG
-          class="h-16 w-auto"
-          src="/src/assets/image/nixos-logo-notext.svg"
-          alt="Nixos Logo"
-        />
-        <InlineSVG
-          class="h-16 block md:hidden xl:block w-auto"
-          src="/src/assets/image/nixos-logo-text.svg"
-          alt="Nixos Logo Text"
-        />
-      </a>
-      <button
-        aria-label="Main Navigation Toggle"
-        class="bg-nix-blue-light block md:hidden p-4 rounded-lg"
-        id="navigation-toggle"
-      >
-        <span class="bg-white block w-8 h-1 mb-1.5"></span>
-        <span class="bg-white block w-8 h-1 mb-1.5"></span>
-        <span class="bg-white block w-8 h-1"></span>
-      </button>
-    </div>
-    <nav
-      aria-label="Main Navigation"
-      role="menubar"
-      class="flex pb-4 md:pb-0 flex-col md:flex-row gap-0.5 md:gap-5 md:flex"
-      id="navbar-menu"
-    >
-      {
-        headerMenu.data.items.map((item) => (
-          <a
-            class:list={[
-              "pt-8 pb-6",
-              navbarItemStyle,
-              currentTopRoute === item.link
-                ? navbarItemActiveStyle
-                : navbarItemInactiveStyle,
-            ]}
-            href={item.link}
-          >
-            {item.name}
-          </a>
-        ))
-      }
-      <a
-        target="_blank"
-        rel="noreferrer noopener"
-        class={`pt-8 md:pt-7 pb-6 ${navbarItemStyle} ${navbarItemInactiveStyle}`}
-        href="https://search.nixos.org"
-        arial-label="Nixos package and options search"
-      >
-        <Icon
-          alt="Search"
-          class="h-8 w-8 text-nix-blue hidden md:block"
-          name="mdi:search"
-        />
-        <span class="inline-block md:hidden">Search</span>
-      </a>
-    </nav>
-  </Container>
-</header>
-
-<script lang="ts">
-  const navigationToggle = document.getElementById("navigation-toggle");
-  const navbarMenu = document.getElementById("navbar-menu");
-
-  function toggleMenu() {
-    navbarMenu.classList.toggle("hidden");
-    navbarMenu.classList.toggle("flex");
-  }
-  toggleMenu();
-
-  navigationToggle.addEventListener("click", () => toggleMenu());
-</script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 480fd77c4f..acb62262e3 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,57 +1,57 @@
 ---
-import { SEO } from "astro-seo";
+import { SEO } from 'astro-seo';
+import { getImage } from 'astro:assets';
+import { getEntry } from 'astro:content';
 
-import Header from "./Header.astro";
-import Footer from "./Footer.astro";
+import '@/styles/base.css';
 
-import "../styles/base.css";
-import { getImage } from "astro:assets";
+import Footer from '@/components/Footer.astro';
+import Header from '@/components/Header.astro';
 
-import faviconSvgSrc from "../assets/image/flake-blue.svg";
-import { getEntry } from "astro:content";
+import faviconSvgSrc from '@/assets/image/flake-blue.svg';
 
 const {
-  title = "Nix &amp; NixOS | Declarative builds and deployments",
-  description = "Nix is a tool that takes a unique approach to package management and system configuration. Learn how to make reproducible, declarative and reliable systems.",
+  title = 'Nix &amp; NixOS | Declarative builds and deployments',
+  description = 'Nix is a tool that takes a unique approach to package management and system configuration. Learn how to make reproducible, declarative and reliable systems.',
 } = Astro.props;
 
-const blogMenu = await getEntry("menus", "blog");
+const blogMenu = await getEntry('menus', 'blog');
 
-const faviconSvg = await getImage({ src: faviconSvgSrc, format: "svg" });
+const faviconSvg = await getImage({ src: faviconSvgSrc, format: 'svg' });
 
 const headLinks = [
   {
-    rel: "sitemap",
-    href: "/sitemap-index.xml",
+    rel: 'sitemap',
+    href: '/sitemap-index.xml',
   },
   {
-    rel: "icon",
+    rel: 'icon',
     href: faviconSvg.src,
-    type: "image/svg+xml",
+    type: 'image/svg+xml',
   },
   {
-    rel: "alternate",
-    type: "application/rss+xml",
-    title: "Complete RSS Feed",
-    href: "/blog/feed.xml",
+    rel: 'alternate',
+    type: 'application/rss+xml',
+    title: 'Complete RSS Feed',
+    href: '/blog/feed.xml',
   },
 ];
 
 const headFeedLinks = blogMenu.data.map((e) => {
   return {
-    rel: "alternate",
-    type: "application/rss+xml",
+    rel: 'alternate',
+    type: 'application/rss+xml',
     title: `${e.title} RSS Feed`,
     href: `/blog/${e.id}-rss.xml`,
   };
 });
 ---
 
-<html lang="en">
+<html lang="en" class="scroll-smooth">
   <head>
     <SEO
       title={title}
-      titleTemplate={Astro.url.pathname === "/" ? title : "%s | Nix & NixOS"}
+      titleTemplate={Astro.url.pathname === '/' ? title : '%s | Nix & NixOS'}
       titleDefault={title}
       description={description}
       charset="utf-8"
@@ -59,43 +59,47 @@ const headFeedLinks = blogMenu.data.map((e) => {
         link: headLinks.concat(headFeedLinks),
         meta: [
           {
-            name: "viewport",
-            content: "width=device-width",
+            name: 'viewport',
+            content: 'width=device-width',
           },
           {
-            name: "generator",
+            name: 'generator',
             content: Astro.generator,
           },
           {
-            name: "google-site-verification",
-            content: "ir-07nYvo3u3x_VmkTO1wCfYJ8uC-SrVBGR7hZgqPSE",
+            name: 'google-site-verification',
+            content: 'ir-07nYvo3u3x_VmkTO1wCfYJ8uC-SrVBGR7hZgqPSE',
           },
           {
-            httpEquiv: "Content-Type",
-            content: "text/html; charset=utf-8",
+            httpEquiv: 'Content-Type',
+            content: 'text/html; charset=utf-8',
           },
         ],
       }}
     />
   </head>
-  <body class="min-h-screen flex flex-col bg-white text-gray-950">
+
+  <body class="flex min-h-screen flex-col bg-white text-gray-950">
     <Header />
+
     <main class="flex-1">
       <slot />
     </main>
+
     <Footer />
+
     <script>
-      import "htmx.org";
+      import 'htmx.org';
 
       // Fonts
-      import "@fontsource-variable/overpass";
-      import "@fontsource-variable/fira-code";
-      import "@fontsource-variable/roboto-flex/wdth.css";
+      import '@fontsource-variable/overpass';
+      import '@fontsource-variable/fira-code';
+      import '@fontsource-variable/roboto-flex/wdth.css';
     </script>
 
     <style>
       @font-face {
-        font-family: "Roboto Flex Variable";
+        font-family: 'Roboto Flex Variable';
       }
     </style>
   </body>
diff --git a/src/layouts/MDXLayout.astro b/src/layouts/MDXLayout.astro
index 7ff4acbe25..f60d1a9c86 100644
--- a/src/layouts/MDXLayout.astro
+++ b/src/layouts/MDXLayout.astro
@@ -1,9 +1,9 @@
 ---
-import type { MarkdownLayoutProps } from "astro";
+import type { MarkdownLayoutProps } from 'astro';
 
-import Layout from "./Layout.astro";
-import PageHeader from "../components/layout/PageHeader.astro";
-import Container from "../components/layout/Container.astro";
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
+import Layout from './Layout.astro';
 
 type Props = MarkdownLayoutProps<{
   title: string;
diff --git a/src/pages/404.astro b/src/pages/404.astro
index ce1523086d..2af4a2b060 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,20 +1,22 @@
 ---
-import Container from "../components/layout/Container.astro";
-import Layout from "../layouts/Layout.astro";
+import Layout from '@/layouts/Layout.astro';
+import Container from '@/components/layout/Container.astro';
 ---
 
 <Layout title="Not Found">
   <Container>
     <h1
-      class="mt-10 text-4xl text-nix-blue font-heading font-extrabold leading-none mb-4"
+      class="mb-4 mt-10 font-heading text-4xl font-extrabold leading-none text-nix-blue"
     >
       Not found
     </h1>
+
     <p class="font-light">
       The requested content<span id="signpost"></span> could not be found.
     </p>
+
     <script is:inline>
-      document.getElementById("signpost").innerHTML =
+      document.getElementById('signpost').innerHTML =
         ` at <code>${window.location.pathname}</code>`;
     </script>
   </Container>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 4fb6abb9e6..b29a9e2632 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -1,14 +1,14 @@
 ---
-import { getCollection, getEntry } from "astro:content";
-import Container from "../components/layout/Container.astro";
-import PageHeader from "../components/layout/PageHeader.astro";
-import Layout from "../layouts/Layout.astro";
-import Icon from "astro-icon";
-import BlogListEntry from "../components/pages/blog/BlogListEntry.astro";
-import BlogList from "../components/pages/blog/BlogList.astro";
-import InlineSVG from "../components/util/InlineSVG.astro";
+import { getCollection, getEntry } from 'astro:content';
 
-const posts = await getCollection("blog");
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
+import BlogList from '@/components/pages/blog/BlogList.astro';
+import BlogListEntry from '@/components/pages/blog/BlogListEntry.astro';
+import BlogMenuItem from '@/components/pages/blog/BlogMenuItem.astro';
+import Layout from '@/layouts/Layout.astro';
+
+const posts = await getCollection('blog');
 posts
   .sort((a, b) => {
     const dateA = new Date(a.data.date);
@@ -16,16 +16,41 @@ posts
     return dateA > dateB ? -1 : 1;
   })
   .reverse();
-const blogMenu = await getEntry("menus", "blog");
+const blogMenu = await getEntry('menus', 'blog');
 ---
 
+<Layout title="Blog">
+  <PageHeader text="Blog" />
+
+  <Container class="py-8">
+    <p class="mb-2 text-center text-2xl text-nix-blue">
+      Click boxes to filter content
+    </p>
+
+    <div
+      role="group"
+      class="flex flex-col justify-center pb-8 md:flex-row md:items-center md:gap-4"
+    >
+      {blogMenu.data.map((menuItem) => <BlogMenuItem menuItem={menuItem} />)}
+    </div>
+
+    <BlogList />
+
+    {
+      posts.reverse().map(async (post) => {
+        return <BlogListEntry post={post} />;
+      })
+    }
+  </Container>
+</Layout>
+
 <script>
-  const articles = document.querySelectorAll("article");
+  const articles = document.querySelectorAll('article');
   let categories = [];
 
   function refreshCategories() {
     let categoryCheckboxes = Array.prototype.slice.call(
-      document.getElementsByName("category"),
+      document.getElementsByName('category'),
     );
     categories = categoryCheckboxes.map((checkbox) => {
       return checkbox.checked ? checkbox.value : null;
@@ -35,15 +60,15 @@ const blogMenu = await getEntry("menus", "blog");
   function refreshArticles() {
     articles.forEach((article) => {
       const isInQuery = categories.includes(article.dataset.category);
-      article.ariaHidden = !isInQuery ? "true" : "false";
-      if (!isInQuery) article.classList.add("hidden");
-      else article.classList.remove("hidden");
+      article.ariaHidden = !isInQuery ? 'true' : 'false';
+      if (!isInQuery) article.classList.add('hidden');
+      else article.classList.remove('hidden');
     });
   }
 
-  document.getElementsByName("category").forEach((checkbox) => {
-    checkbox.addEventListener("change", (e) => {
-      const id = e.target.value;
+  document.getElementsByName('category').forEach((checkbox) => {
+    checkbox.addEventListener('change', (e) => {
+      // const id = e.target.value;
       refreshCategories();
       refreshArticles();
     });
@@ -52,86 +77,3 @@ const blogMenu = await getEntry("menus", "blog");
   refreshCategories();
   refreshArticles();
 </script>
-
-<Layout title="Blog">
-  <PageHeader text="Blog" />
-  <Container class="py-8">
-    <p class="text-nix-blue font-light text-2xl text-center mb-2">
-      Click boxes to filter content
-    </p>
-    <div
-      role="group"
-      class="flex flex-col md:flex-row justify-center md:items-center md:gap-4 pb-8"
-    >
-      {
-        blogMenu.data.map((e) => (
-          <div class="flex flex-row md:flex-col gap-4">
-            <div class="flex-1">
-              <input
-                name="category"
-                type="checkbox"
-                role="checkbox"
-                id={`check-${e.id}`}
-                value={e.id}
-                class="peer h-0 w-0 opacity-0"
-                checked
-              />
-              <label
-                for={`check-${e.id}`}
-                class="
-            before:block
-            before:absolute
-            before:h-8
-            before:w-8
-            before:icon-[mdi--checkbox-blank-outline]
-            md:before:top-2
-            md:before:right-2
-            before:right-4
-            peer-checked:before:block
-            peer-checked:before:absolute
-            peer-checked:before:h-8
-            peer-checked:before:w-8
-            peer-checked:before:icon-[mdi--checkbox-marked-outline]
-            relative p-4 md:p-8 gap-2 w-full md:w-auto text-nix-blue border-1 fill-nix-blue hover:fill-white border-nix-blue rounded-2xl flex md:flex-col items-center hover:bg-nix-blue-darker hover:text-white cursor-pointer peer-checked:bg-nix-blue peer-checked:text-white peer-checked:fill-white hover:peer-checked:border-nix-blue-darker hover:peer-checked:bg-nix-blue-darker peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2"
-              >
-                <InlineSVG src={e.icon} class="w-12 md:w-24" />
-                <span class="font-light">{e.title}</span>
-              </label>
-            </div>
-            <div class="md:hidden pt-6">
-              <label
-                class="
-            relative p-4 md:p-8 gap-2 w-full md:w-auto text-nix-blue border-1 fill-nix-blue hover:fill-white border-nix-blue rounded-2xl flex md:flex-col items-center hover:bg-nix-blue-darker hover:text-white cursor-pointer peer-checked:bg-nix-blue peer-checked:text-white peer-checked:fill-white hover:peer-checked:border-nix-blue-darker hover:peer-checked:bg-nix-blue-darker peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2"
-              >
-                <a href={"/blog/" + e.id + "-rss.xml"}>
-                  <InlineSVG
-                    src="/src/assets/image/blog-menu/rss.svg"
-                    class="inline-block w-12 h-12"
-                  />
-                </a>
-              </label>
-            </div>
-            <div
-              class="hidden md:flex flex-row rss-small"
-              style="justify-content: center"
-            >
-              <a href={"/blog/" + e.id + "-rss.xml"}>
-                <InlineSVG
-                  src="/src/assets/image/blog-menu/rss.svg"
-                  class="inline-block w-4 h-4"
-                />
-                rss
-              </a>
-            </div>
-          </div>
-        ))
-      }
-    </div>
-    <BlogList />
-    {
-      posts.reverse().map(async (post) => {
-        return <BlogListEntry post={post} />;
-      })
-    }
-  </Container>
-</Layout>
diff --git a/src/pages/blog/[category].astro b/src/pages/blog/[category].astro
index 80b48d2b77..5ca364bc77 100644
--- a/src/pages/blog/[category].astro
+++ b/src/pages/blog/[category].astro
@@ -1,16 +1,17 @@
 ---
-import { getCollection } from "astro:content";
-import Container from ".././../components/layout/Container.astro";
-import PageHeader from "../../components/layout/PageHeader.astro";
-import Layout from "../../layouts/Layout.astro";
-import BlogListEntry from "../../components/pages/blog/BlogListEntry.astro";
-import BlogList from "../../components/pages/blog/BlogList.astro";
+import { getCollection } from 'astro:content';
+
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
+import BlogList from '@/components/pages/blog/BlogList.astro';
+import BlogListEntry from '@/components/pages/blog/BlogListEntry.astro';
+import Layout from '@/layouts/Layout.astro';
 
 export async function getStaticPaths() {
-  const blogEntries = await getCollection("blog");
+  const blogEntries = await getCollection('blog');
 
   const filteredEntries = blogEntries.reduce((groups, entry) => {
-    const category = entry.slug.split("/")[0];
+    const category = entry.slug.split('/')[0];
     if (!groups[category]) {
       groups[category] = {
         params: {
@@ -36,6 +37,7 @@ const upperCaseCategory = category.charAt(0).toUpperCase() + category.slice(1);
 
 <Layout title={`Blog/${upperCaseCategory}`}>
   <PageHeader text={`Blog / ${upperCaseCategory}`} />
+
   <Container class="py-8">
     <BlogList />
     {
diff --git a/src/pages/blog/[category]/[year].astro b/src/pages/blog/[category]/[year].astro
index 682f6f31c2..cac20df7d7 100644
--- a/src/pages/blog/[category]/[year].astro
+++ b/src/pages/blog/[category]/[year].astro
@@ -1,16 +1,17 @@
 ---
-import { getCollection } from "astro:content";
-import Container from "../../../components/layout/Container.astro";
-import PageHeader from "../../../components/layout/PageHeader.astro";
-import Layout from "../../../layouts/Layout.astro";
-import BlogListEntry from "../../../components/pages/blog/BlogListEntry.astro";
-import BlogList from "../../../components/pages/blog/BlogList.astro";
+import { getCollection } from 'astro:content';
+
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
+import BlogList from '@/components/pages/blog/BlogList.astro';
+import BlogListEntry from '@/components/pages/blog/BlogListEntry.astro';
+import Layout from '@/layouts/Layout.astro';
 
 export async function getStaticPaths() {
-  const blogEntries = await getCollection("blog");
+  const blogEntries = await getCollection('blog');
 
   const filteredEntries = blogEntries.reduce((groups, entry) => {
-    const category = entry.slug.split("/")[0];
+    const category = entry.slug.split('/')[0];
     const postYear = new Date(entry.data.date).getFullYear();
     if (!groups[category + postYear]) {
       groups[category + postYear] = {
@@ -38,6 +39,7 @@ const upperCaseCategory = category.charAt(0).toUpperCase() + category.slice(1);
 
 <Layout title={`Blog/${upperCaseCategory}/${year}`}>
   <PageHeader text={`Blog / ${upperCaseCategory} / ${year}`} />
+
   <Container class="py-8">
     <BlogList />
     {
diff --git a/src/pages/blog/[category]/[year]/[id].astro b/src/pages/blog/[category]/[year]/[id].astro
index e71efcc980..4cee6f0ff9 100644
--- a/src/pages/blog/[category]/[year]/[id].astro
+++ b/src/pages/blog/[category]/[year]/[id].astro
@@ -1,17 +1,17 @@
 ---
-import { getCollection } from "astro:content";
-import Container from "../../../../components/layout/Container.astro";
-import PageHeader from "../../../../components/layout/PageHeader.astro";
-import Layout from "../../../../layouts/Layout.astro";
-import { generatePathFromPost } from "../../../../lib/utils";
+import { getCollection } from 'astro:content';
+
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
+import Layout from '@/layouts/Layout.astro';
 
 export async function getStaticPaths() {
-  const blogEntries = await getCollection("blog");
+  const blogEntries = await getCollection('blog');
   return blogEntries.map((entry) => ({
     params: {
-      category: entry.slug.split("/")[0],
+      category: entry.slug.split('/')[0],
       year: new Date(entry.data.date).getFullYear(),
-      id: entry.slug.split("/").pop().split("_").pop(),
+      id: entry.slug.split('/').pop().split('_').pop(),
     },
     props: { entry },
   }));
@@ -28,8 +28,9 @@ const { Content } = await entry.render();
       ? `Published on ${entry.data.date.toDateString()}`
       : null}
   />
-  <Container class="flex flex-col gap-8 mt-8 mb-4">
-    <article class="text-light-bold">
+
+  <Container class="mb-4 mt-8 flex flex-col gap-8">
+    <article>
       <Content />
     </article>
   </Container>
diff --git a/src/pages/community.astro b/src/pages/community.astro
index df61bddeef..d8e58b8e3f 100644
--- a/src/pages/community.astro
+++ b/src/pages/community.astro
@@ -1,171 +1,27 @@
 ---
-import { getEntry, getCollection } from "astro:content";
-import { Image } from "astro:assets";
-
-import Layout from "../layouts/Layout.astro";
-import PageHeader from "../components/layout/PageHeader.astro";
-import Container from "../components/layout/Container.astro";
-import Divider from "../components/layout/Divider.astro";
-import Button from "../components/ui/Button.astro";
-import Banner from "../components/ui/Banner.astro";
-import RfcDiagram from "../components/ui/RfcDiagram.astro";
-import NixConEntry from "../components/pages/community/NixConEntry.astro";
-import OfficialCommunityLink from "../components/pages/community/OfficialCommunityLink.astro";
-import UnofficialCommunityLink from "../components/pages/community/UnofficialCommunityLink.astro";
-
-const meetups = await getEntry("community", "meetups");
-const teams = await getCollection("teams");
-
-const nixcons = [
-  {
-    title: "NixCon 2024 - Berlin",
-    date: "25-27 October 2024",
-    href: "https://2024.nixcon.org/",
-    description:
-      "NixCon is a community-oriented conference for contributors and users of Nix and NixOS. It's about sharing experiences, inspiring people and discussing future development.",
-    imagePath: "/images/nixcon/nixcon.2024.svg",
-  },
-  {
-    title: "NixCon 2023 - Darmstadt",
-    date: "8-10 September 2023",
-    href: "https://2023.nixcon.org/",
-    description:
-      "NixCon is a community-oriented conference for contributors and users of Nix and NixOS. It's about sharing experiences, inspiring people and discussing future development.",
-    imagePath: "/images/nixcon/nixcon.2023.svg",
-  },
-  {
-    title: "NixCon 2022 - Paris",
-    date: "20-22 October 2022",
-    href: "https://2022.nixcon.org/",
-    description:
-      "NixCon is a community-oriented conference for contributors and users of Nix and NixOS. It's about sharing experiences, inspiring people and discussing future development.",
-    imagePath: "/images/nixcon/nixcon.2022.svg",
-  },
-  {
-    title: "NixCon 2020 - Online",
-    date: "16-18 October 2020",
-    href: "https://2019.nixcon.org/",
-    description:
-      "NixCon is a community-oriented conference for contributors and users of Nix and NixOS. It's about sharing experiences, inspiring people and discussing future development.",
-    imagePath: "/images/nixcon/nixcon.2020.svg",
-  },
-  {
-    title: "NixCon 2019 - Brno",
-    date: "25-27 October 2019",
-    href: "https://2019.nixcon.org/",
-    description:
-      "NixCon is becoming a regular gathering that everybody expects to happen. This year we met at Brno, Czech Republic. This was the biggest conference so far.",
-    imagePath: "/images/nixcon/nixcon.2019.svg",
-  },
-  {
-    title: "NixCon 2018 - London",
-    date: "25-27 October 2018",
-    href: "https://nixcon2018.org/",
-    description:
-      "For the first time a Nix conference outside the Germany. London was the first conference that was not run over the weekend, but during the week.",
-    imagePath: "/images/nixcon/nixcon.2018.svg",
-  },
-  {
-    title: "NixCon 2017 - Munich",
-    date: "28-31 October 2017",
-    href: "http://nixcon2017.org/",
-    description:
-      "After a year of a break, Nix community gathered at TNG Technology Consulting in Munich.",
-  },
-  {
-    title: "NixCon 2015 - Berlin",
-    date: "14-17 November 2015",
-    href: "https://conf.nixos.org/",
-    description:
-      "Taking place in a Berlin-style converted loft, it was the first NixOS conference. It was the first time Nix community came together in such numbers. In two days there were many interesting talks.",
-  },
-];
-
-const platformsMain = [
-  {
-    href: "https://discourse.nixos.org/",
-    name: "Discourse",
-    iconName: "simple-icons:discourse",
-    description:
-      "Our official forum is the right place to get help from other users and discuss the development of the projects. There are also Announcements, Job offers and Events.",
-  },
-  {
-    href: "https://matrix.to/#/#community:nixos.org",
-    name: "Matrix space",
-    iconName: "simple-icons:matrix",
-    description:
-      "Real-time help, development chat, and off-topic community discussion takes place on Matrix.",
-  },
-  {
-    href: "https://github.com/NixOS/",
-    name: "Github",
-    iconName: "simple-icons:github",
-    description:
-      "Official organization page on Github, where you can find nix, nixpkgs, and other repositories.",
-  },
-];
-
-const socialMediaMain = [
-  {
-    href: "https://chaos.social/@nixos_org",
-    name: "Mastodon",
-    iconName: "simple-icons:mastodon",
-  },
-  {
-    href: "https://twitter.com/nixos_org",
-    name: "Twitter",
-    iconName: "simple-icons:twitter",
-  },
-  {
-    href: "https://www.linkedin.com/company/nixos-foundation/",
-    name: "LinkedIn",
-    iconName: "simple-icons:linkedin",
-  },
-  {
-    href: "https://www.youtube.com/channel/UC3vIimi9q4AT8EgxYp_dWIw",
-    name: "YouTube",
-    iconName: "simple-icons:youtube",
-  },
-];
-
-const calendarsMain = [
-  {
-    href: "https://calendar.google.com/calendar/u/0/embed?src=b9o52fobqjak8oq8lfkhg3t0qg@group.calendar.google.com",
-    name: "Official NixOS Calendar",
-    iconName: "mdi:calendar",
-  },
-  {
-    href: "https://discourse.nixos.org/t/community-calendar/18589",
-    name: "Community Calendar",
-    iconName: "mdi:calendar",
-  },
-] as const;
-
-const platformsOutside = [
-  {
-    href: "https://stackoverflow.com/questions/tagged/nix+or+nixpkgs+or+nixos+or+nixops",
-    name: "Stackoverflow",
-    iconName: "simple-icons:stackoverflow",
-  },
-  {
-    href: "https://discord.gg/BqdJJFER4H",
-    name: "Discord",
-    iconName: "simple-icons:discord",
-  },
-  {
-    href: "https://www.reddit.com/r/NixOS/",
-    name: "Reddit",
-    iconName: "simple-icons:reddit",
-  },
-];
-
-import nixosFoundationLogo from "../assets/image/nixos-foundation-logo.svg";
+import { getCollection, getEntry } from 'astro:content';
+
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
+import Foundation from '@/components/pages/community/Foundation.astro';
+import Meetups from '@/components/pages/community/Meetups.astro';
+import NixCon from '@/components/pages/community/NixCon.astro';
+import RFCProcess from '@/components/pages/community/RFCProcess.astro';
+import Teams from '@/components/pages/community/Teams.astro';
+import WhereToTalk from '@/components/pages/community/WhereToTalk.astro';
+import Banner from '@/components/ui/Banner.astro';
+import Link from '@/components/util/Link.astro';
+import Layout from '@/layouts/Layout.astro';
+
+const meetups = await getEntry('community', 'meetups');
+const teams = await getCollection('teams');
 ---
 
 <Layout title="Community">
   <PageHeader text="Community" />
-  <Container class="font-extralight leading-relaxed space-y-4 mt-16">
-    <p class="text-lg font-bold text-gray-700">
+
+  <Container class="mt-16 space-y-4 leading-relaxed">
+    <p class="text-xl font-bold text-gray-700">
       Nix and NixOS are developed and used by a diverse and welcoming community
       from all around the world.
     </p>
@@ -183,459 +39,28 @@ import nixosFoundationLogo from "../assets/image/nixos-foundation-logo.svg";
     </p>
     <p>
       Instances of abusive, harassing, or otherwise unacceptable behavior may be
-      reported by contacting the project team at <a
-        href="mailto:community@nixos.org">community@nixos.org</a
+      reported by contacting the project team at <Link
+        href="mailto:community@nixos.org">community@nixos.org</Link
       >. The project team is obligated to maintain confidentiality with regard
       to the reporter of an incident.
     </p>
   </Container>
-  <Container>
-    <h2 class="text-4xl font-bold font-heading leading-none text-nix-blue mt-8">
-      Where to talk?
-    </h2>
-    <p class="font-extralight leading-relaxed mt-2">
-      The Nix community is spread across various platforms. Here are the
-      official and unofficial spaces where you can find help, discuss
-      development, and chat with other users.
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="md:col-span-2">
-          <h3 class="text-3xl font-bold font-heading text-nix-blue mt-4">
-            Official spaces
-          </h3>
-          <p class="text-gray-700">
-            These spaces are monitored and moderated by the NixOS Moderation
-            Team. This means they are moderated in such a way that they follow
-            the standards and moral values of our community. You can find out
-            more about our moderation team <a href="/community/teams/moderation"
-              >here</a
-            >.
-
-            <ul class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 flex-wrap">
-              {
-                platformsMain.map((platform, i) => (
-                  <OfficialCommunityLink
-                    href={platform.href}
-                    name={platform.name}
-                    iconName={platform.iconName}
-                    description={platform.description}
-                    class={i === 0 && "md:col-span-2"}
-                  />
-                ))
-              }
-            </ul>
-          </p>
-        </div>
-        <div class="col-span-1">
-          <h3 class="text-3xl font-bold font-heading text-nix-blue mt-4">
-            Official social-media
-          </h3>
-          <p class="text-gray-700">
-            These spaces are maintained by our NixOS Marketing Team though not
-            monitored and not moderated by the NixOS Moderation Team.
 
-            <ul class="grid grid-cols-1 gap-4 mt-4 flex-wrap">
-              {
-                socialMediaMain.map((platform) => (
-                  <OfficialCommunityLink
-                    href={platform.href}
-                    name={platform.name}
-                    iconName={platform.iconName}
-                  />
-                ))
-              }
-            </ul>
-          </p>
-        </div>
-        <div class="md:col-span-3">
-          <h3 class="text-3xl font-bold font-heading text-nix-blue mt-4">
-            Our calendars
-          </h3>
-          <p class="text-gray-700">
-            We use these calendars to schedule events, meetings, and other.
-            <ul class="grid md:grid-cols-3 gap-4 mt-4 flex-wrap">
-              {
-                calendarsMain.map((platform) => (
-                  <OfficialCommunityLink
-                    href={platform.href}
-                    name={platform.name}
-                    iconName={platform.iconName}
-                  />
-                ))
-              }
-            </ul>
-          </p>
-        </div>
-      </div>
-      <h3 class="text-3xl font-bold font-heading text-nix-blue mt-6">
-        Unofficial spaces
-      </h3>
-      <p class="text-gray-700">
-        These spaces are not monitored and not moderated by the NixOS Moderation
-        Team. Please be aware that different moral values and rules may apply in
-        these spaces. The NixOS moderation team may advise moderators in these
-        spaces, though does not control or enforce our community values.
+  <WhereToTalk />
 
-        <ul class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4 flex-wrap">
-          {
-            platformsOutside.map((platform) => (
-              <UnofficialCommunityLink
-                href={platform.href}
-                name={platform.name}
-                iconName={platform.iconName}
-                description={platform.description}
-                type="mobile_icon_desktop_name"
-              />
-            ))
-          }
-        </ul>
-      </p>
-    </p>
-  </Container>
   <Banner wrapperClasses="my-8">
-    If you are looking for professional help, <a
-      href="/community/commercial-support">check out companies</a
+    If you are looking for professional help, <Link
+      href="/community/commercial-support">check out companies</Link
     > that offer Nix related services.
   </Banner>
-  <Divider mirrorY />
-  <div class="bg-nix-blue text-white py-8">
-    <Container>
-      <h2 class="text-4xl font-bold font-heading">NixCon</h2>
-      <p class="mt-2 text-xl font-bold mb-4">
-        The
-        <a class="!text-white" href="/community/teams/nixcon">NixCon Team</a>
-        organizes a conference once a year.
-      </p>
-      <div class="grid md:grid-cols-3 gap-4">
-        <div class="col-span-2 md:col-span-1 bg-nix-blue-dark p-4 rounded-xl">
-          <h3 class="text-3xl font-heading font-bold mb-4">Next Conference</h3>
-          <NixConEntry
-            imagePath={nixcons[0].imagePath}
-            title={nixcons[0].title}
-            date={nixcons[0].date}
-            description={nixcons[0].description}
-            href={nixcons[0].href}
-          />
-        </div>
-        <div class="col-span-2 md:py-4">
-          <h3 class="text-3xl font-heading font-bold">Previous Conferences</h3>
-          <div class="grid md:grid-cols-2 gap-4 mt-4">
-            {
-              nixcons
-                .slice(1)
-                .map((nixcon) => (
-                  <NixConEntry
-                    title={nixcon.title}
-                    date={nixcon.date}
-                    description={nixcon.description}
-                    href={nixcon.href}
-                  />
-                ))
-            }
-          </div>
-        </div>
-      </div>
-    </Container>
-  </div>
-  <Divider />
-  <Container>
-    <h2 class="text-4xl font-bold font-heading text-nix-blue mt-8">Meetups</h2>
-    <div
-      class="mt-4 grid md:grid-flow-col auto-cols-fr font-extralight text-center text-lg bg-[url(/images/world-map.svg)] bg-contain bg-no-repeat"
-    >
-      <div>
-        <h3 class="mt-4 md:mt-2 font-bold font-heading text-2xl text-nix-blue">
-          America
-        </h3>
-        <ul class="mt-2 space-y-4">
-          {
-            meetups.data.america.map((meetup) => (
-              <li>
-                <a href={meetup.href}>{meetup.location}</a>
-              </li>
-            ))
-          }
-        </ul>
-      </div>
-      <div>
-        <h3 class="mt-4 md:mt-2 font-bold font-heading text-2xl text-nix-blue">
-          Europe
-        </h3>
-        <ul class="mt-2 space-y-4">
-          {
-            meetups.data.europe.map((meetup) => (
-              <li>
-                <a href={meetup.href}>{meetup.location}</a>
-              </li>
-            ))
-          }
-        </ul>
-      </div>
-      <div>
-        <h3 class="mt-4 md:mt-2 font-bold font-heading text-2xl text-nix-blue">
-          Asia
-        </h3>
-        <ul class="mt-2 space-y-4">
-          {
-            meetups.data.asia.map((meetup) => (
-              <li>
-                <a href={meetup.href}>{meetup.location}</a>
-              </li>
-            ))
-          }
-        </ul>
-      </div>
-    </div>
-    <div
-      class="flex flex-wrap-reverse gap-8 font-extralight leading-loose mt-16"
-    >
-      <div class="flex-1 flex flex-col items-start gap-8 justify-center">
-        <h2 class="text-4xl font-bold text-nix-blue leading-none">
-          RFC Process
-        </h2>
-        <p>
-          The "RFC" (request for comments) process is intended to provide a
-          consistent and controlled path for new features to enter the Nix
-          language, packages and OS, so that all community can be confident
-          about the direction the ecosystem is evolving in.
-        </p>
-        <Button color="green" size="lg" href="https://github.com/NixOS/rfcs"
-          >Learn more</Button
-        >
-      </div>
-      <div class="flex-0 md:max-w-2xl w-full md:w-3/6 mt-2">
-        <RfcDiagram />
-      </div>
-    </div>
-  </Container>
-  <div class="mt-8">
-    <Divider mirrorY />
-  </div>
-  <div class="bg-nix-blue py-8">
-    <Container>
-      <h2 class="text-4xl font-bold text-white mt-8" id="governance-teams">
-        Teams
-      </h2>
-      <ul class="flex flex-wrap gap-x-6 gap-y-16 mt-8 justify-stretch">
-        {
-          teams.map((team) => (
-            <li class="text-white [&>a]:inline-block basis-72 flex-grow flex flex-col items-center text-center md:items-start md:text-left gap-2">
-              <img
-                src={`/images/teams/${team.slug.split("_")[1]}.svg`}
-                alt={`${team.data.name} Logo`}
-                class="h-24"
-              />
-              <h3 class="text-2xl font-bold font-heading">{team.data.name}</h3>
-              <p class="font-extralight leading-relaxed grow mb-2">
-                {team.data.description}
-              </p>
-              <Button
-                color="green"
-                href={"/community/teams/" + team.slug.split("_")[1]}
-              >
-                Read more
-              </Button>
-            </li>
-          ))
-        }
-      </ul>
-    </Container>
-  </div>
-  <Divider />
-  <Container class="grid md:grid-cols-2 mb-16 mt-8" id="foundation">
-    <div class="md:pb-0 text-center pb-4">
-      <div class="flex flex-col items-center justify-center">
-        <Image
-          src={nixosFoundationLogo}
-          alt="NixOS Foundation Logo"
-          class="h-72"
-        />
-      </div>
-      <div class="text-left inline-block mb-4 mt-4">
-        <h2
-          class="md:text-center text-3xl text-nix-blue font-bold font-heading"
-        >
-          Board members:
-        </h2>
-        <ul class="mt-2 md:w-72 mx-auto pl-8 md:pl-10 list-disc">
-          {
-            teams
-              .filter(
-                (team) => team.slug.split("_")[1] === "foundation-board",
-              )[0]
-              .data.members.map((member) => (
-                <li class="mb-1">
-                  {member.name}
-                  {member.title && (
-                    <>
-                      &mdash;
-                      {member.title}
-                    </>
-                  )}
-                </li>
-              ))
-          }
-        </ul>
-      </div>
-    </div>
-    <div class="space-y-4 font-extralight leading-relaxed">
-      <h2 class="text-3xl text-nix-blue font-heading font-bold">
-        The mission!
-      </h2>
-      <p>
-        The mission of the foundation is to support the Nix ecosystem's
-        infrastructure, and projects implementing the purely functional
-        deployment model.
-      </p>
-      <p>
-        In particular, the foundation supports Nix, Nixpkgs, NixOS, and
-        operates:
-      </p>
-      <ul class="list-disc ml-4">
-        <li>
-          <a href="https://cache.nixos.org"> cache.nixos.org</a>
-          - the NixOS binary cache, containing over 120TB of prebuilt Nix packages.
-        </li>
-        <li>
-          <a href="https://hydra.nixos.org"> hydra.nixos.org</a>
-          - a Nix build farm, consisting of hundreds of macOS, x86-64 (Linux) and
-          aarch64 (Linux) build cores. Hydra executes over 350,000 builds each week.
-        </li>
-        <li>
-          <a href="/community/event-funding"> Event Funding</a>
-        </li>
-      </ul>
-      <p>
-        The NixOS Foundation is a registered non-profit organisation at the
-        Chamber of commerce (Kamer van Koophandel) in Utrecht, The Netherlands.
-        The KvK number is <code>63520583</code>.
-      </p>
-      <p>
-        You can contact the foundation by writing an email to <a
-          href="mailto:foundation@nixos.org">foundation@nixos.org</a
-        >.
-      </p>
-    </div>
-  </Container>
-</Layout>
-<script>
-  const boxes = document
-    .getElementById("rfc-diagram")
-    .getElementsByTagName("rect");
-  const diagram = document.getElementById("rfc-diagram");
-  const durationMiliseconds = 1500;
-  const baseActivationClasses = ["stroke-nix-blue"];
-  const successActivationClasses = ["stroke-nix-green"];
-  const failureActivationClasses = ["stroke-nix-orange", "opacity-50"];
-  const fadedActivationClasses = ["opacity-50"];
-  const timeline = [
-    {
-      element: boxes[9], // New Submission
-      index: 0,
-      classes: baseActivationClasses,
-    },
-    {
-      element: boxes[8], // Nomination Phase
-      index: 1,
-      classes: baseActivationClasses,
-    },
-    {
-      element: boxes[7], // Discussion Phase
-      index: 2,
-      classes: baseActivationClasses,
-    },
-    {
-      element: boxes[0], // Final Comment Phase
-      index: 3,
-      classes: baseActivationClasses,
-    },
-    {
-      element: boxes[3], // Submission Rejected
-      index: 4,
-      classes: failureActivationClasses,
-    },
-    {
-      element: boxes[1], // New Submission 2
-      index: 4,
-      classes: fadedActivationClasses,
-    },
-    {
-      element: boxes[5], // FCP Canceled
-      index: 4,
-      classes: failureActivationClasses,
-    },
-    {
-      element: boxes[2], // Refine Submission
-      index: 4,
-      classes: fadedActivationClasses,
-    },
-    {
-      element: boxes[4], // Submission Accepted
-      index: 4,
-      classes: successActivationClasses,
-    },
-  ];
-  let isAnimating = false;
 
-  timeline.forEach((box) => {
-    box.element.classList.add("transition-all", "duration-500", "ease-in");
-  });
+  <NixCon />
 
-  let highestIndex = 0;
-  timeline.forEach((box) => {
-    if (box.index > highestIndex) {
-      highestIndex = box.index;
-    }
-  });
+  <Meetups meetups={meetups} />
 
-  function triggerAnimation() {
-    // prevent multiple animations at the same time
-    if (isAnimating) {
-      return;
-    }
-    isAnimating = true;
-    setTimeout(
-      () => {
-        isAnimating = false;
-      },
-      (highestIndex + 1) * durationMiliseconds,
-    );
+  <RFCProcess />
 
-    // trigger animation on each box
-    timeline.forEach((box) => {
-      setTimeout(() => {
-        box.element.classList.add(...box.classes);
-      }, box.index * durationMiliseconds);
-    });
-  }
+  <Teams teams={teams} />
 
-  const activatorObserver = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (isAnimating || !entry.isIntersecting) {
-          return;
-        }
-        triggerAnimation();
-      });
-    },
-    {
-      threshold: 1,
-    },
-  );
-  const deactivatorObserver = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (isAnimating || entry.isIntersecting) {
-          return;
-        }
-        timeline.forEach((box) => {
-          box.element.classList.remove(...box.classes);
-        });
-      });
-    },
-    {
-      threshold: 0,
-    },
-  );
-  activatorObserver.observe(diagram);
-  deactivatorObserver.observe(diagram);
-</script>
+  <Foundation teams={teams} />
+</Layout>
diff --git a/src/pages/community/commercial-support.astro b/src/pages/community/commercial-support.astro
index a7318c3793..724a21f261 100644
--- a/src/pages/community/commercial-support.astro
+++ b/src/pages/community/commercial-support.astro
@@ -1,12 +1,13 @@
 ---
-import { getEntry, getCollection } from "astro:content";
+import { getEntry } from 'astro:content';
 
-import Layout from "../../layouts/Layout.astro";
-import PageHeader from "../../components/layout/PageHeader.astro";
-import Container from "../../components/layout/Container.astro";
-import Button from "../../components/ui/Button.astro";
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
+import Card from '@/components/ui/Card.astro';
+import Link from '@/components/util/Link.astro';
+import Layout from '@/layouts/Layout.astro';
 
-const companies = await getEntry("community", "commercial-support");
+const companies = await getEntry('community', 'commercial-support');
 
 function shuffleArray(array) {
   // source: https://stackoverflow.com/a/2450976
@@ -29,35 +30,41 @@ function shuffleArray(array) {
 
 <Layout title="Community">
   <PageHeader text="Commercial support" />
+
   <Container>
-    <p class="text-center font-bold text-gray-600 text-xl">
+    <p class="text-center text-xl font-bold text-gray-600">
       Consulting companies available for professional support.
     </p>
-    <p class="text-center mt-2">
-      Please <a
+
+    <p class="mt-2 text-center">
+      Please <Link
         href="https://github.com/NixOS/nixos-homepage/edit/main/src/content/community/commercial-support.yaml"
-        >submit a pull request</a
+        >submit a pull request</Link
       > to add your company. The list is randomized at each page load.
     </p>
-    <ul class="flex flex-row flex-wrap m-4 gap-4">
+
+    <ul class="m-4 flex flex-row flex-wrap gap-4">
       {
         shuffleArray(companies.data).map((company) => (
-          <li class="basis-72 xl:basis-80 border border-nix-blue text-nix-blue font-light rounded-xl flex-grow p-4">
-            <a href={company.href} class="!no-underline space-y-4">
+          <Card
+            as="li"
+            class="flex-grow basis-72 border border-nix-blue text-nix-blue xl:basis-80"
+          >
+            <Link href={company.href} class="space-y-4 !no-underline">
               <img
                 src={company.logo}
-                alt={company.name + " logo"}
-                class="h-80 object-contain mx-auto"
+                alt={company.name + ' logo'}
+                class="mx-auto h-80 object-contain"
               />
               <h3 class="text-4xl font-bold">{company.name}</h3>
               <ul>
                 {company.locations.map((location) => (
-                  <li class="list-disc list-inside">{location}</li>
+                  <li class="list-inside list-disc">{location}</li>
                 ))}
               </ul>
               <p>{company.description}</p>
-            </a>
-          </li>
+            </Link>
+          </Card>
         ))
       }
     </ul>
diff --git a/src/pages/community/teams/[...slug].astro b/src/pages/community/teams/[...slug].astro
index 09ee3c939c..3d9539ebb6 100644
--- a/src/pages/community/teams/[...slug].astro
+++ b/src/pages/community/teams/[...slug].astro
@@ -1,15 +1,15 @@
 ---
-import { getCollection } from "astro:content";
+import { getCollection } from 'astro:content';
 
-import Layout from "../../../layouts/Layout.astro";
-import PageHeader from "../../../components/layout/PageHeader.astro";
-import Container from "../../../components/layout/Container.astro";
-import MembersDisplay from "../../../components/pages/community/teams/MembersDisplay.astro";
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
+import MembersDisplay from '@/components/pages/community/teams/MembersDisplay.astro';
+import Layout from '@/layouts/Layout.astro';
 
 export async function getStaticPaths() {
-  const teamEntries = await getCollection("teams");
+  const teamEntries = await getCollection('teams');
   return teamEntries.map((entry) => ({
-    params: { slug: entry.slug.split("_")[1] },
+    params: { slug: entry.slug.split('_')[1] },
     props: { entry },
   }));
 }
@@ -20,30 +20,31 @@ const { Content } = await entry.render();
 
 <Layout title={entry.data.name}>
   <PageHeader text={entry.data.name} parentPath="/community" />
+
   <Container class="my-8">
     <MembersDisplay
       class="float-right mb-4 ml-4 sm:w-1/2 md:max-w-96"
       members={entry.data.members}
       contact={entry.data.contact}
     />
+
     <article>
       <Content />
     </article>
+
     {
       entry.data.subteams && entry.data.subteams.length > 0 && (
-        <>
-          <div class="flex gap-4 flex-wrap pt-4">
-            {entry.data.subteams.map((subteam) => (
-              <MembersDisplay
-                key={subteam.name}
-                title={subteam.name}
-                class="mb-4"
-                members={subteam.members}
-                isSubteam
-              />
-            ))}
-          </div>
-        </>
+        <div class="flex flex-wrap gap-4 pt-4">
+          {entry.data.subteams.map((subteam) => (
+            <MembersDisplay
+              key={subteam.name}
+              title={subteam.name}
+              class="mb-4"
+              members={subteam.members}
+              isSubteam
+            />
+          ))}
+        </div>
       )
     }
   </Container>
diff --git a/src/pages/donate.astro b/src/pages/donate.astro
index f224345187..360a2d14a7 100644
--- a/src/pages/donate.astro
+++ b/src/pages/donate.astro
@@ -1,32 +1,30 @@
 ---
-import { getEntry } from "astro:content";
+import { getEntry } from 'astro:content';
 
-import Layout from "../layouts/Layout.astro";
-import Container from "../components/layout/Container.astro";
-import PageHeader from "../components/layout/PageHeader.astro";
-import SponsorLogo from "../components/layout/SponsorLogo.astro";
-import Button from "../components/ui/Button.astro";
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
+import Acknowledgements from '@/components/pages/donate/Acknowledgements.astro';
+import Donations from '@/components/pages/donate/Donations.astro';
+import Merchandise from '@/components/pages/donate/Merchandise.astro';
+import InlineSVG from '@/components/util/InlineSVG.astro';
+import Link from '@/components/util/Link.astro';
+import Layout from '@/layouts/Layout.astro';
 
-import Divider from "../components/layout/Divider.astro";
-import InlineSVG from "../components/util/InlineSVG.astro";
-
-const sponsors = await getEntry("sponsors", "info");
+const sponsors = await getEntry('sponsors', 'info');
 ---
 
 <Layout title="Donate">
   <PageHeader text="Donate" />
 
   <Container class="grid px-12 pt-16">
-    <p class="text-xl font-bold text-gray-500">
+    <p class="text-xl font-bold text-gray-700">
       The NixOS infrastructure, development and events are funded by its users
       and sponsors.
     </p>
   </Container>
 
-  <Container class="grid md:grid-cols-2 gap-8 px-12 pt-8 pb-20">
-    <div
-      class="flex flex-col justify-center font-extralight gap-4 leading-relaxed"
-    >
+  <Container class="grid gap-8 px-12 pb-20 pt-8 md:grid-cols-2">
+    <div class="flex flex-col justify-center gap-4">
       <p>
         Maintaining our build farm and binary cache is very expensive. We depend
         on your support to ensure the continuous operation and expansion of the
@@ -35,9 +33,10 @@ const sponsors = await getEntry("sponsors", "info");
       <p>
         Please consider donating a small amount every month to contribute to
         sustainable funding. Donations are handled by a nonprofit organization,
-        the <a href="/community#foundation">NixOS Foundation</a>.
+        the <Link href="/community#foundation">NixOS Foundation</Link>.
       </p>
     </div>
+
     <div class="flex flex-col items-center justify-center">
       <InlineSVG
         src="/src/assets/image/nixos-foundation-logo.svg"
@@ -45,141 +44,10 @@ const sponsors = await getEntry("sponsors", "info");
       />
     </div>
   </Container>
-  <Divider style="slope" mirrorX mirrorY />
-  <div class="bg-nix-blue py-16 md:py-16 md:px-12 text-white">
-    <Container class="grid md:grid-cols-2 gap-8 md:px-12">
-      <div class="flex flex-col gap-4">
-        <img src="/images/donate/merch.svg" class="h-64 md:h-full" />
-      </div>
-      <div class="flex flex-col justify-center gap-4">
-        <h1 class="text-4xl leading-tight font-bold font-heading max-w-96">
-          NixOS T-shirts, mugs and more...
-        </h1>
-        <p class="font-extralight">
-          Donate to NixOS foundation by purchasing NixOS merchandise.
-        </p>
-        <div class="flex flex-col md:flex-row justify-stretch gap-4">
-          <Button
-            color="green"
-            size="sm"
-            href="https://www.redbubble.com/people/mogorman/shop"
-          >
-            Go to the shop (RedBubble)
-          </Button>
-        </div>
-      </div>
-    </Container>
-  </div>
-  <Divider style="slope" mirrorX />
-  <Container class="grid md:grid-cols-2 gap-8 py-16 px-12">
-    <div class="flex flex-col gap-4">
-      <h2 class="text-3xl font-bold font-heading text-nix-blue pb-2">
-        Donate using Open Collective
-      </h2>
-      <p class="font-extralight leading-relaxed">
-        NixOS Foundation is using
-        <a href="https://opencollective.com/">Open Collective</a>
-        to manage the finances so everyone can see where money comes from and where
-        money goes.
-      </p>
-      <p class="font-extralight text-light-bold leading-relaxed">
-        With Open Collective you can make a <strong>single</strong> or <strong
-          >recurring</strong
-        > contribution by credit card transfer.
-      </p>
-      <p class="font-extralight leading-relaxed">Thank you!</p>
-      <div class="flex flex-col md:flex-row justify-stretch gap-4">
-        <Button
-          color="semidarkblue"
-          size="sm"
-          href="https://opencollective.com/nixos#support"
-        >
-          Contribute
-        </Button>
-      </div>
-    </div>
-    <div class="flex flex-col gap-4 justify-center">
-      <h2 class="text-3xl font-bold text-nix-blue pb-2">
-        Donate with SEPA bank transfer
-      </h2>
-      <p class="font-extralight">
-        The NixOS Foundation also accepts donations via SEPA bank transfer.
-        Please send payments to:
-      </p>
-      <pre
-        class="font-mono bg-nix-blue-extralight text-nix-blue-darker font-bold whitespace-pre-line p-8 rounded-3xl">
-Stichting NixOS Foundation, Utrecht, The Netherlands
 
-IBAN: NL13 BUNQ 2061 2530 32
-BIC:  BUNQNL2AXXX</pre>
-      <p class="text-xs font-extralight leading-relaxed">
-        Please add your name and purpose (donation) in the description of the
-        transfer.
-        <i>
-          If you would like to support us with amounts above 2000 euro per year,
-          please contact us at
-          <a href="mailto:foundation@nixos.org">foundation@nixos.org</a>
-          , as this will have tax implications.
-        </i>
-      </p>
-    </div>
-  </Container>
-  <Divider style="slope" mirrorY />
-  <div class="bg-nix-blue py-16 text-white">
-    <Container class="grid md:grid-cols-2 gap-8 px-12">
-      <div class="flex flex-col justify-center">
-        <div
-          class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
-        >
-          {
-            sponsors.data.items.map((item) => (
-              <SponsorLogo
-                class={item.class}
-                href={item.href}
-                src={item.src}
-                alt={item.alt}
-              />
-            ))
-          }
-        </div>
-      </div>
-      <div class="flex flex-col gap-4 justify-center">
-        <h2 class="text-3xl sm:text-4xl font-bold font-heading sm:pb-2">
-          Acknowledgements
-        </h2>
-        <p class="font-extralight">
-          The Nix package manager was developed by
-          <a href="https://edolstra.github.io/" class="!text-white"
-            >Eelco Dolstra</a
-          >
-          as part of his PhD research in the
-          <a href="https://www.nwo.nl/en/projects/638001201" class="!text-white"
-            >TraCE project</a
-          >, funded by the
-          <a href="http://www.jacquard.nl/" class="!text-white"
-            >Jacquard programme</a
-          >
-          of the
-          <a href="http://www.nwo.nl/" class="!text-white"
-            >Netherlands Organisation for Scientific Research</a
-          >
-          (NWO) and SERC. The first prototype of NixOS was developed by
-          <a href="http://www.tjaldur.nl/" class="!text-white">Armijn Hemel</a>
-          as his master’s thesis project. Hydra, the Nix-based continuous build system,
-          was developed as part of the LaQuSo Buildfarm project, funded by
-          <a href="https://www.4tu.nl/nirict/" class="!text-white">NIRICT</a>
-          and
-          <a href="http://www.laquso.com/" class="!text-white">LaQuSo</a>.
-        </p>
-        <p class="font-light">
-          The following companies and institutes have supported the development
-          of NixOS and hosting for its infrastructure. We are very grateful for
-          that! If you would like to support us as well, please contact
-          <a href="mailto:foundation@nixos.org" class="!text-white"
-            >The NixOS Foundation</a
-          >.
-        </p>
-      </div>
-    </Container>
-  </div>
+  <Merchandise />
+
+  <Donations />
+
+  <Acknowledgements sponsors={sponsors} />
 </Layout>
diff --git a/src/pages/download.astro b/src/pages/download.astro
index 131c1304c4..59e6104df4 100644
--- a/src/pages/download.astro
+++ b/src/pages/download.astro
@@ -1,10 +1,9 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import PageHeader from "../components/layout/PageHeader.astro";
-import DownloadHeader from "../components/pages/download/DownloadHeader.astro";
-import DownloadAccordion from "../components/pages/download/DownloadAccordion.astro";
-
-import Container from "../components/layout/Container.astro";
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
+import DownloadAccordion from '@/components/pages/download/DownloadAccordion.astro';
+import DownloadHeader from '@/components/pages/download/DownloadHeader.astro';
+import Layout from '@/layouts/Layout.astro';
 
 const NIX_VERSION = import.meta.env.NIX_STABLE_VERSION;
 const NIXOS_VERSION = import.meta.env.NIXOS_STABLE_SERIES;
@@ -12,20 +11,20 @@ const NIXOS_VERSION = import.meta.env.NIXOS_STABLE_SERIES;
 
 <Layout title="Download">
   <PageHeader text="Download" />
-  <DownloadHeader
-    title="Nix"
-    subTitle=": the package manager"
-    currentVersion={NIX_VERSION}
-  />
+
   <Container>
+    <DownloadHeader
+      title="Nix"
+      subTitle=": the package manager"
+      currentVersion={NIX_VERSION}
+    />
     <DownloadAccordion family="nix" />
-  </Container>
-  <DownloadHeader
-    title="NixOS"
-    subTitle=": the Linux distribution"
-    currentVersion={NIXOS_VERSION}
-  />
-  <Container>
+
+    <DownloadHeader
+      title="NixOS"
+      subTitle=": the Linux distribution"
+      currentVersion={NIXOS_VERSION}
+    />
     <DownloadAccordion family="nixos" />
   </Container>
 </Layout>
diff --git a/src/pages/explore.astro b/src/pages/explore.astro
index 05f0d3f1c4..108b686425 100644
--- a/src/pages/explore.astro
+++ b/src/pages/explore.astro
@@ -1,32 +1,31 @@
 ---
-import { getEntry } from "astro:content";
+import { getEntry } from 'astro:content';
 
-import Layout from "../layouts/Layout.astro";
-import Container from "../components/layout/Container.astro";
-import PageHeader from "../components/layout/PageHeader.astro";
+import Container from '@/components/layout/Container.astro';
+import PageHeader from '@/components/layout/PageHeader.astro';
+import Timeline from '@/components/pages/explore/Timeline.astro';
+import Layout from '@/layouts/Layout.astro';
 
-import Timeline from "../components/pages/explore/Timeline.astro";
-
-const exploreInfo = await getEntry("explore", "info");
+const exploreInfo = await getEntry('explore', 'info');
 ---
 
 <Layout title="Explore">
   <PageHeader text="Explore" />
 
   <Container class="py-16">
-    <h1 class="text-2xl text-center font-extralight text-neutral-500">
+    <p class="text-center text-xl font-bold text-gray-700">
       Find out why so many developers, system administrators and other
       enthusiasts use Nix and cannot imagine a world without it.
-    </h1>
+    </p>
   </Container>
 
   <Container class="pb-16">
     {
       exploreInfo.data.content.map((item, idx) => {
-        const side = idx % 2 ? "right" : "left";
-        const flexColDir = idx % 2 ? "flex-col-reverse" : "flex-col";
+        const side = idx % 2 ? 'right' : 'left';
+        const flexColDir = idx % 2 ? 'flex-col-reverse' : 'flex-col';
         return (
-          <div class="!px-0 grid md:grid-cols-2 gap-x-[6rem]">
+          <div class="grid gap-x-[6rem] !px-0 md:grid-cols-2">
             <Timeline number={idx + 1} imageLocation={side} {...item} />
           </div>
         );
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cb9a82ee8a..5d0ec02941 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,20 +1,19 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import Container from "../components/layout/Container.astro";
-import Button from "../components/ui/Button.astro";
-import NixosSearchInput from "../components/ui/NixosSearchInput.astro";
-import { getCollection, getEntry } from "astro:content";
-import { Image } from "astro:assets";
-import { generatePathFromPost, createExcerpt } from "../lib/utils";
+import { getCollection, getEntry } from 'astro:content';
 
-import Asciinema from "../components/ui/Asciinema.astro";
-import Divider from "../components/layout/Divider.astro";
-import Banner from "../components/ui/Banner.astro";
-import InlineSVG from "../components/util/InlineSVG.astro";
+import Layout from '@/layouts/Layout.astro';
+import Button from '@/components/ui/Button.astro';
+import Banner from '@/components/ui/Banner.astro';
+import Hero from '@/components/pages/home/Hero.astro';
+import Features from '@/components/pages/home/Features.astro';
+import SearchPackages from '@/components/pages/home/SearchPackages.astro';
+import Examples from '@/components/pages/home/Examples.astro';
 
-const landingFeatures = await getCollection("landing-features");
-const demos = await getEntry("landing", "demos");
-const posts = await getCollection("blog");
+import { generatePathFromPost } from '@/lib/utils';
+
+const landingFeatures = await getCollection('landing-features');
+const demos = await getEntry('landing', 'demos');
+const posts = await getCollection('blog');
 posts
   .sort((a, b) => {
     const dateA = new Date(a.data.date);
@@ -22,152 +21,24 @@ posts
     return dateA > dateB ? -1 : 1;
   })
   .filter((p) => {
-    return p.slug.split("/")?.[0] === "announcements";
+    return p.slug.split('/')?.[0] === 'announcements';
   })
   .reverse();
 ---
 
 <Layout>
   <Banner
-    class="flex flex-col md:flex-row items-center justify-between gap-1 text-lg font-heading"
+    class="flex flex-col items-center justify-between gap-1 text-lg md:flex-row"
   >
-    <b>{posts[0].data.title}</b>
+    <p>{posts[0].data.title}</p>
     <Button href={generatePathFromPost(posts[0])}>Announcement</Button>
   </Banner>
-  <div class="bg-nix-blue inline-svg-hero bg-cover bg-no-repeat bg-left">
-    <Container
-      class="text-white grid grid-cols-1 lg:grid-cols-2 gap-8 py-16 lg:py-24"
-    >
-      <div class="flex flex-col gap-4 my-auto mx-0">
-        <h1 class="text-5xl font-heading font-bold leading-none">
-          Declarative builds<br class="hidden md:inline-block" /> and deployments.
-        </h1>
-        <p class="text-lg font-extralight leading-7">
-          Nix is a tool that takes a unique approach to package management and
-          system configuration. Learn how to make reproducible, declarative and
-          reliable systems.
-        </p>
-        <div
-          class="flex flex-col md:flex-row justify-center lg:justify-stretch gap-4 text-center"
-        >
-          <Button href="/download" color="green" size="lg">Download</Button>
-          <Button href="/learn" color="lightblue" size="lg">Get started</Button>
-        </div>
-      </div>
-      <div
-        class="bg-[#121314]
-          border-white
-          border-[1rem]
-          rounded-3xl
-          drop-shadow-md
-          min-h-[300px]"
-      >
-        <Asciinema
-          src="/demos/cover.cast"
-          settings={{
-            cols: 84,
-            poster: "npt:0:01:22",
-            markers: [
-              [11.5, "Ad-Hoc development environments"],
-              [41.5, "Declarative development environments"],
-              [85.0, "Build docker image with Nix"],
-              [122.0, "Build minimal docker image with Nix"],
-            ],
-          }}
-        />
-      </div>
-    </Container>
-  </div>
-  <div
-    class="inline-svg-landing-search-top bg-[39%_100%] md:bg-bottom bg-no-repeat pb-48 pt-16"
-  >
-    <Container class="grid md:grid-cols-3 gap-8 md:gap-4">
-      {
-        landingFeatures.map(async (feature) => {
-          const { Content } = await feature.render();
-          return (
-            <div class="text-center flex flex-col">
-              <InlineSVG
-                src={feature.data.img}
-                class="w-auto h-32 mx-auto mb-6"
-              />
-              <h2 class="text-3xl text-nix-blue font-heading font-bold leading-none mb-2">
-                {feature.data.title}
-              </h2>
-              <div class="leading-loose text-light-bold">
-                <Content />
-              </div>
-            </div>
-          );
-        })
-      }
-    </Container>
-  </div>
-  <div
-    class="relative
-  after:block
-  after:bg-[url(/divider/landing_search_bottom.svg)]
-  after:bsolute
-  after:left-0
-  after:bottom-0
-  after:w-full
-  after:bg-divider
-  after:overflow-hidden
-  after:bg-[60%_100%]
-  after:bg-no-repeat
-  after:h-[30rem]
-  after:-mb-16
-  after:-mt-48"
-  >
-    <div class="bg-nix-blue-extralight pt-4">
-      <Container
-        class="flex justify-center pb-8 flex-col w-full items-center gap-4 pt-8"
-      >
-        <h2
-          class="text-4xl text-center md:w-2/3 text-nix-blue leading-tight font-heading font-bold pb-0"
-        >
-          Choose from Thousands of Packages
-        </h2>
-        <p
-          class="font-extralight leading-relaxed text-2xl md:w-5/6 text-center pb-2"
-        >
-          The Nix Packages collection (<a
-            class="font-bold !text-nix-blue"
-            href="#">Nixpkgs</a
-          >) is a set of <span class="text-nix-green font-bold"
-            >over 100 000 packages</span
-          >
-          for the Nix package manager.
-        </p>
-        <NixosSearchInput collection="packages" withSubmit />
-      </Container>
-    </div>
-  </div>
-  <div>
-    <Container>
-      <h2
-        class="text-4xl text-center w-full text-nix-blue font-heading font-bold pb-2"
-      >
-        Examples
-      </h2>
-      <div class="grid md:grid-cols-2 items-center gap-4 pb-8">
-        {
-          demos.data.map((demo) => {
-            return (
-              <div class="flex flex-col items-start gap-2 overflow-hidden">
-                <Asciinema
-                  title={demo.title}
-                  class="w-full self-center md:self-start"
-                  src={demo.file}
-                  settings={{
-                    poster: "npt:0:00:30",
-                  }}
-                />
-              </div>
-            );
-          })
-        }
-      </div>
-    </Container>
-  </div>
+
+  <Hero />
+
+  <Features landingFeatures={landingFeatures} />
+
+  <SearchPackages />
+
+  <Examples demos={demos} />
 </Layout>
diff --git a/src/pages/learn.astro b/src/pages/learn.astro
index d4e3924ac2..7c8abb3e30 100644
--- a/src/pages/learn.astro
+++ b/src/pages/learn.astro
@@ -1,145 +1,20 @@
 ---
-import Container from "../components/layout/Container.astro";
-import PageHeader from "../components/layout/PageHeader.astro";
-import Layout from "../layouts/Layout.astro";
-import { getCollection, getEntry } from "astro:content";
-import Button from "../components/ui/Button.astro";
-import Divider from "../components/layout/Divider.astro";
-import NixosSearchInput from "../components/ui/NixosSearchInput.astro";
-import InlineSVG from "../components/util/InlineSVG.astro";
-const learningManuals = await getCollection("learning-manuals");
-
-const learningFeatures = [
-  {
-    imgUrl: "/src/assets/image/learn/installGfx.svg",
-    title: "Install Nix",
-    color: "green",
-    url: "/download#download-nix",
-  },
-  {
-    imgUrl: "/src/assets/image/learn/firstStepsGfx.svg",
-    title: "First steps with Nix",
-    color: "orange",
-    url: "https://nix.dev/tutorials/first-steps/",
-  },
-  {
-    imgUrl: "/src/assets/image/learn/howItWorksGfx.svg",
-    title: "How Nix works",
-    color: "lightblue",
-    url: "/guides/how-nix-works",
-  },
-] as const;
-
-const learningResources = [
-  {
-    title: "The Nix hour",
-    description:
-      "A weekly beginner-oriented interactive video lecture on all things Nix. Running since October 2022.",
-    url: "https://www.youtube.com/playlist?list=PLyzwHTVJlRc8yjlx4VR4LU5A5O44og9in",
-    buttonText: "Watch on Youtube",
-  },
-  {
-    title: "NixOS Wiki",
-    description: "A user-maintained wiki for Nix and NixOS",
-    url: "https://wiki.nixos.org/",
-    buttonText: "Check the wiki",
-  },
-  {
-    title: "Nix Pills",
-    description:
-      "A low-level tutorial on building software packages with Nix, showing in detail how Nixpkgs is constructed.",
-    url: "/guides/nix-pills",
-    buttonText: "Take the Pills",
-  },
-] as const;
+import PageHeader from '@/components/layout/PageHeader.astro';
+import LearningFeatures from '@/components/pages/learn/LearningFeatures.astro';
+import LearningManuals from '@/components/pages/learn/LearningManuals.astro';
+import LearningResources from '@/components/pages/learn/LearningResources.astro';
+import LearningSearch from '@/components/pages/learn/LearningSearch.astro';
+import Layout from '@/layouts/Layout.astro';
 ---
 
 <Layout title="Learn Nix | Nix & NixOS">
   <PageHeader text="Learn" />
-  <Container class="grid md:grid-cols-3 py-16 gap-4">
-    {
-      learningFeatures.map((feature) => (
-        <div class="border-0.5 border-nix-blue-darker rounded-2xl p-8 flex flex-col justify-center gap-8">
-          <InlineSVG src={feature.imgUrl} class="h-28" />
-          <Button size="lg-full" color={feature.color} href={feature.url}>
-            {feature.title}
-          </Button>
-        </div>
-      ))
-    }
-  </Container>
-  <Divider style="slope" mirrorY mirrorX />
-  <div class="bg-nix-blue text-white py-8 md:px-8">
-    <Container>
-      <h2 class="text-4xl font-extrabold font-heading pb-8">Search</h2>
-      <div class="grid md:grid-cols-2 gap-4">
-        <div>
-          <h3 class="text-2xl font-extrabold font-heading mb-4">
-            Nix packages
-          </h3>
-          <NixosSearchInput
-            color="white"
-            size="sm-full"
-            collection="packages"
-          />
-        </div>
-        <div>
-          <h3 class="text-2xl font-extrabold font-heading mb-4">
-            NixOS options
-          </h3>
-          <NixosSearchInput color="white" size="sm-full" collection="options" />
-        </div>
-      </div>
-    </Container>
-  </div>
-  <Divider style="slope" mirrorX />
-  <Container class="grid md:grid-cols-3 py-16 gap-4 items-start">
-    {
-      learningManuals.map(async (manual) => {
-        const { Content } = await manual.render();
-        return (
-          <div class="border-0.5 border-nix-blue-darker rounded-2xl p-4 flex flex-col gap-4 justify-start items-center">
-            <article>
-              <InlineSVG
-                src="/src/assets/image/doc-icon.svg"
-                class="h-20 w-20 float-left inline pr-6 img-noadjust"
-              />
-              <h2 class="text-3xl text-nix-blue font-heading font-bold leading-none mb-4">
-                {manual.data.title}
-              </h2>
-              <div class="leading-relaxed font-extralight">
-                <Content />
-              </div>
-            </article>
-            <Button size="sm-mobfull" color="green" href={manual.data.url}>
-              Full {manual.data.title}
-            </Button>
-          </div>
-        );
-      })
-    }
-  </Container>
-  <Divider style="slope" mirrorY />
-  <div class="bg-nix-blue text-white py-8 md:px-8">
-    <Container>
-      <h2 class="text-4xl font-heading font-extrabold pb-8">
-        Other learning resources
-      </h2>
-      <div class="grid md:grid-cols-3 gap-12 md:gap-4 pb-12">
-        {
-          learningResources.map((item) => (
-            <div class="flex flex-col items-start">
-              <h3 class="text-2xl font-extrabold mb-2 font-heading">
-                {item.title}
-              </h3>
-              <p class="mb-4 font-light leading-relaxed">{item.description}</p>
-              <Button size="sm-mobfull" color="orange" href={item.url}>
-                {item.buttonText}
-              </Button>
-            </div>
-          ))
-        }
-      </div>
-    </Container>
-  </div>
+
+  <LearningFeatures />
+
+  <LearningSearch />
+
+  <LearningManuals />
+
+  <LearningResources />
 </Layout>
diff --git a/src/pages/values.astro b/src/pages/values.astro
index 88000b663a..dc643ae187 100644
--- a/src/pages/values.astro
+++ b/src/pages/values.astro
@@ -1,212 +1,14 @@
 ---
-import { getEntry, getCollection } from "astro:content";
-
-import Layout from "../layouts/Layout.astro";
-import PageHeader from "../components/layout/PageHeader.astro";
-import Container from "../components/layout/Container.astro";
-import Divider from "../components/layout/Divider.astro";
-
-import Citation from "../components/ui/Citation.astro";
-import Quotation from "../components/ui/Quotation.astro";
+import PageHeader from '@/components/layout/PageHeader.astro';
+import ValuesIntroduction from '@/components/pages/values/ValuesIntroduction.astro';
+import ValuesList from '@/components/pages/values/ValuesList.astro';
+import Layout from '@/layouts/Layout.astro';
 ---
 
 <Layout title="Values">
   <PageHeader text="Values" />
-  <Container class="font-extralight leading-relaxed space-y-4 mt-16">
-    <h2
-      class="text-4xl font-bold font-heading text-nix-blue mt-4"
-      id="community-values-intro"
-    >
-      Introduction
-      <a href="#community-values-intro" class="text-lg">🔗</a>
-    </h2>
-
-    <Quotation>
-      <p>
-        Communities form when different people unite around a common purpose.
-        Shared values guide decision making, and community goals supersede
-        individual interests and agendas.
-      </p>
-
-      <p class="text-right py-2 italic">
-        <a href="https://opensource.com/open-source-way" class="text-lg"
-          >The Open Source Way</a
-        >
-      </p>
-    </Quotation>
-
-    <p class="font-extralight leading-relaxed mt-2">
-      Our common purpose is to develop, propagate, and promote the adoption of
-      the <a href="https://edolstra.github.io/pubs/phd-thesis.pdf"
-        >purely functional software deployment model</a
-      >. Our values help us achieve this purpose by guiding decisionmaking
-      across the community, keeping us moving in a common direction. This
-      document captures our core values so that they can be shared and
-      referenced by everyone in the community.
-    </p>
-
-    <h3
-      class="text-3xl font-bold font-heading text-nix-blue mt-4"
-      id="community-values-whatis"
-    >
-      What is a value?
-      <a href="#community-values-whatis" class="text-lg">🔗</a>
-    </h3>
-
-    <p class="font-extralight leading-relaxed mt-2">
-      Values are <span class="italic">not</span> a Code of Conduct, they do not define
-      governance structures, and they do not provide specific policies. Instead,
-      values inform the decisions we make about these things. A good test for <a
-        href="https://medium.com/the-u-s-digital-service/our-values-1fc02b53598"
-        >whether something is a value</a
-      > is:
-    </p>
-
-    <Quotation>
-      If a statement can be invoked by anyone in an organization, and cause a
-      decision to be re-evaluated or changed, without regard to anyone’s rank or
-      title, then you have a bona fide [i.e. genuine] value. If it doesn’t work
-      that way, then it’s not a value.
-    </Quotation>
-
-    <p class="font-extralight leading-relaxed mt-2">
-      To apply in many situations, values must be high-level, abstract concepts.
-      Therefore, in the text below, each value is presented as a heading
-      followed by an elaboration of its meaning. This is meant as a starting
-      point for interpretation, not a comprehensive definition. The heading and
-      the elaboration have equal importance.
-    </p>
-  </Container>
-  <Divider mirrorY />
-
-  <div class="bg-nix-blue text-white py-8">
-    <Container>
-      <h2
-        class="text-3xl font-bold font-heading text-nix-white mt-4"
-        id="community-values-values"
-      >
-        The values
-        <a href="#community-values-values" class="text-lg">🔗</a>
-      </h2>
-
-      <h3
-        class="text-2xl font-bold font-heading text-nix-white mt-4"
-        id="community-values-respect"
-      >
-        Respect and civility
-        <a href="#community-values-respect" class="text-lg">🔗</a>
-      </h3>
 
-      <p>
-        We treat each other with respect and civility. No matter one's
-        individual identity, circumstances, level of contribution to the
-        project, or status, everyone has the right to respect, and everyone has
-        the duty to treat others with respect. We prioritise project health over
-        individual interests. People with higher visibility within the project
-        or towards the public are subject to higher expectations for their
-        conduct.
-      </p>
+  <ValuesIntroduction />
 
-      <h3
-        class="text-2xl font-bold font-heading text-nix-white mt-4"
-        id="community-values-people"
-      >
-        People come first
-        <a href="#community-values-people" class="text-lg">🔗</a>
-      </h3>
-
-      <p>
-        We are here, first and foremost, as individuals working together. Our
-        priority here is to work on Nix projects for the benefit of all their
-        contributors and users. We value building excellent software with a
-        vibrant and diverse community. Individuals gain trust and status by
-        doing the work. Organisations gain prestige by funding the work of
-        individuals and providing resources to support the project.
-      </p>
-
-      <h3
-        class="text-2xl font-bold font-heading text-nix-white mt-4"
-        id="community-values-choice"
-      >
-        Free software and choice over lock-in
-        <a href="#community-values-choice" class="text-lg">🔗</a>
-      </h3>
-
-      <p>
-        Nix projects are and will always remain <a
-          href="https://www.gnu.org/philosophy/free-sw.en.html">free software</a
-        >. We value working together with the broader free software community.
-        Free software is our priority, but we also support our users' needs to
-        use non-free software, when practical.
-      </p>
-
-      <h3
-        class="text-2xl font-bold font-heading text-nix-white mt-4"
-        id="community-values-decisionmaking"
-      >
-        Distribute decisionmaking widely
-        <a href="#community-values-decisionmaking" class="text-lg">🔗</a>
-      </h3>
-
-      <p>
-        We are a synthesis of varied but overlapping communities. We rely on
-        distributed approaches: asynchronous communication, clear ownership,
-        deep-dive taskforces, and local decisionmaking. We focus our attention
-        on working together on our shared goals and working separately in a
-        non-interfering way when our goals are independent. We build trust
-        primarily by working together on Nix projects.
-      </p>
-
-      <h3
-        class="text-2xl font-bold font-heading text-nix-white mt-4"
-        id="community-values-automation"
-      >
-        Automation over process and toil
-        <a href="#community-values-automation" class="text-lg">🔗</a>
-        <Citation id={1} onBlueBackground>
-          <a
-            href="https://web.archive.org/web/20240717145635/https://sre.google/sre-book/eliminating-toil/"
-            >Toil</a
-          > is work that tends to be manual, repetitive, automatable, interrupt-driven,
-          devoid of enduring value, and scaling linearly with growth.
-        </Citation>
-      </h3>
-
-      <p>
-        We are a global community, and disseminating information and maintaining
-        processes can be difficult. We are also a large project with a lot of
-        hard and repetitive work. Therefore, we value automation over toil,
-        while recognizing that not all toil can be automated. Automation reduces
-        toil, but people are still accountable. Adding new toil needs a very
-        strong justification. We build automation and processes that make the
-        best use of our contributors' limited time and energy.
-      </p>
-
-      <h3
-        class="text-2xl font-bold font-heading text-nix-white mt-4"
-        id="community-values-stability"
-      >
-        Stable evolution over stagnation or chaos
-        <a href="#community-values-stability" class="text-lg">🔗</a>
-      </h3>
-
-      <p>
-        Openness to new ideas and evolution is part of what made Nix great. We
-        continue to foster that evolution while encouraging development of
-        re-usable building blocks and well-defined, stable interfaces. We value
-        experimenting with designs and concepts, and folding successful
-        experiments back into continuous improvement for stable components. The
-        larger the impact an action has, the more care and discussion is
-        warranted before taking the action. Our leaders have a duty to find,
-        support, and promote new contributors — and eventually step aside for
-        new leaders.
-      </p>
-    </Container>
-  </div>
+  <ValuesList />
 </Layout>
-
-<style>
-  .bg-nix-blue a {
-    @apply text-white hover:text-gray-100;
-  }
-</style>
diff --git a/src/styles/base.css b/src/styles/base.css
index 8c8bf849a9..c921100ca9 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -5,29 +5,21 @@
 
 @layer base {
   main a:-webkit-any-link {
-    @apply underline decoration-1 underline-offset-4 text-nix-blue-dark;
+    @apply text-nix-blue-dark underline decoration-1 underline-offset-4;
   }
 
   main a:any-link {
-    @apply underline decoration-1 underline-offset-4 text-nix-blue-dark;
+    @apply text-nix-blue-dark underline decoration-1 underline-offset-4;
   }
 }
 
 @layer components {
-  .text-light-bold {
-    @apply font-extralight;
-  }
-
-  .text-light-bold strong {
-    @apply font-extrabold;
-  }
-
   article {
-    @apply leading-7 font-light;
+    @apply leading-7;
   }
 
   article ol {
-    @apply list-decimal list-outside mb-2 ml-6;
+    @apply mb-2 ml-6 list-outside list-decimal;
   }
 
   article ol > li {
@@ -35,7 +27,7 @@
   }
 
   article ul {
-    @apply list-disc list-outside mb-2 ml-6;
+    @apply mb-2 ml-6 list-outside list-disc;
   }
 
   article ul > li {
@@ -43,7 +35,7 @@
   }
 
   article ul > li > ul {
-    @apply list-circle list-outside mt-1;
+    @apply mt-1 list-outside list-circle;
   }
 
   article ul > li > p:first-child {
@@ -55,7 +47,7 @@
   }
 
   article ul.inlinelist {
-    @apply list-none flex flex-col ml-0 mb-0;
+    @apply mb-0 ml-0 flex list-none flex-col;
   }
 
   article ul.inlinelist ul {
@@ -66,10 +58,10 @@
     @apply inline-block;
   }
   article ul.inlinelist li::after {
-    content: ", ";
+    content: ', ';
   }
   article ul.inlinelist li:last-child::after {
-    content: "";
+    content: '';
   }
 
   article b,
@@ -78,7 +70,7 @@
   }
 
   article h3 {
-    @apply text-2xl font-bold text-nix-blue mb-4;
+    @apply mb-4 text-2xl font-bold text-nix-blue;
   }
 
   article p {
@@ -90,15 +82,15 @@
   }
 
   article code {
-    @apply bg-gray-100 border-1 border-gray-300 px-1 pt-1 pb-1 rounded text-black font-mono font-[500];
+    @apply rounded border-1 border-gray-300 bg-gray-100 px-1 pb-1 pt-1 font-mono font-medium text-black;
   }
 
   article pre {
-    @apply border-1 bg-[#3a3a3a] border-[#3a3a3a] px-4 py-4 rounded-3xl my-2 mb-4 overflow-x-auto;
+    @apply my-2 mb-4 overflow-x-auto rounded border-1 border-[#3a3a3a] bg-[#3a3a3a] px-4 py-4;
   }
 
   article pre code {
-    @apply bg-transparent border-none w-full p-0;
+    @apply w-full border-none bg-transparent p-0;
   }
 
   article .astro-code {
@@ -106,11 +98,11 @@
   }
 
   article img:not(.img-noadjust) {
-    @apply float-right inline ml-8 h-48 w-auto;
+    @apply float-right ml-8 inline h-48 w-auto;
   }
 
   article blockquote {
-    @apply border-l-4 border-nix-blue-darker px-4 mb-4 bg-nix-blue-extralight pt-2;
+    @apply mb-4 border-l-4 border-nix-blue-darker bg-nix-blue-extralight px-4 pt-2;
   }
 
   article h1,
@@ -119,7 +111,7 @@
   article h4,
   article h5,
   article h6 {
-    @apply font-bold font-heading text-nix-blue leading-tight;
+    @apply font-heading font-bold leading-tight text-nix-blue;
   }
 
   article h1:not(:first-child),
@@ -132,18 +124,18 @@
   }
 
   article h1 {
-    @apply text-4xl mb-2;
+    @apply mb-2 text-4xl;
   }
 
   article h2 {
-    @apply text-3xl mb-2;
+    @apply mb-2 text-3xl;
   }
 
   article h3 {
-    @apply text-2xl mb-2;
+    @apply mb-2 text-2xl;
   }
 
   article h4 {
-    @apply text-xl mb-2;
+    @apply mb-2 text-xl;
   }
 }
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7548ca82f8..1553ccc29f 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,33 +1,36 @@
 const { addDynamicIconSelectors } = require('@iconify/tailwind');
-const plugin = require('tailwindcss/plugin')
+const plugin = require('tailwindcss/plugin');
 const fs = require('node:fs');
+const path = require('node:path');
 const parser = require('node-html-parser');
 const svgo = require('svgo');
-const colors = require('tailwindcss/colors')
+const colors = require('tailwindcss/colors');
 
-const defaultTheme = require("tailwindcss/defaultTheme");
+const defaultTheme = require('tailwindcss/defaultTheme');
 
 const inlineSvgs = {
-  'hero': './src/assets/image/hero-bg.svg',
+  hero: './src/assets/image/hero-bg.svg',
   'landing-search-top': './src/assets/image/divider/landing_search_top.svg',
   'header-nixdarkblue': './src/assets/image/divider/header_nixdarkblue.svg',
-}
-
-const shadow = {
-  md: '0 8px 2px rgba(0,0,0,0.2)',
-  DEFAULT: '0 4px 1px rgba(0,0,0,0.2)',
-  inner: 'inset 0 0 1rem 0 rgba(0,0,0,0.1)',
-  none: 'none',
 };
 
+// const shadow = {
+//   md: "0 8px 2px rgba(0,0,0,0.2)",
+//   DEFAULT: "0 4px 1px rgba(0,0,0,0.2)",
+//   inner: "inset 0 0 1rem 0 rgba(0,0,0,0.1)",
+//   none: "none",
+// };
+
 function inlineSvg({ svg }) {
-  const file = fs.readFileSync(svg, "utf8");
+  const filePath = path.resolve(__dirname, svg);
+  const file = fs.readFileSync(filePath, 'utf8');
   const stringified = parser.parse(file).toString();
+
   const optimized = svgo.optimize(stringified, {
     multipass: true,
     plugins: [
       {
-        name: "preset-default",
+        name: 'preset-default',
         params: {
           overrides: {
             removeViewBox: false,
@@ -37,76 +40,83 @@ function inlineSvg({ svg }) {
       },
     ],
   });
+
   const base64 = Buffer.from(optimized.data).toString('base64');
-  return "data:image/svg+xml;base64," + base64;
+
+  return 'data:image/svg+xml;base64,' + base64;
 }
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
-    "./node_modules/asciinema-player/**/*.js"
+    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+    './node_modules/asciinema-player/**/*.js',
   ],
   theme: {
     fontFamily: {
-      sans: ["Roboto Flex Variable", ...defaultTheme.fontFamily.sans],
-      serif: ["Overpass Variable", ...defaultTheme.fontFamily.serif],
-      heading: ["Overpass Variable", ...defaultTheme.fontFamily.sans],
-      mono: ["Fira Code Variable", ...defaultTheme.fontFamily.mono],
+      sans: ['Roboto Flex Variable', ...defaultTheme.fontFamily.sans],
+      serif: ['Overpass Variable', ...defaultTheme.fontFamily.serif],
+      heading: ['Overpass Variable', ...defaultTheme.fontFamily.sans],
+      mono: ['Fira Code Variable', ...defaultTheme.fontFamily.mono],
     },
     colors: {
-      "nix-blue": {
-        "extralight": "#f2f8fd", // nixlighterblue
-        "lighter": "#e6ecf5", // nixlighterblue-dimmed
-        "light": "#7ebae4", // nixlightblue
-        DEFAULT: "#5277c3", // nixdarkblue
-        "dark": "#405D99", // nixsemidarkblue
-        "darker": "#27385d", // nixdarkerblue
+      'nix-blue': {
+        extralight: '#f2f8fd', // nixlighterblue
+        lighter: '#e6ecf5', // nixlighterblue-dimmed
+        light: '#7ebae4', // nixlightblue
+        'light-hover': '#69a6d1',
+        DEFAULT: '#5277c3', // nixdarkblue
+        hover: '#466cb9',
+        dark: '#405D99', // nixsemidarkblue
+        'dark-hover': '#4e73bc',
+        darker: '#27385d', // nixdarkerblue
       },
-      "nix-orange": {
-        "lighter": "#fff5e1", // nixlightorange
-        DEFAULT: "#ffab0d", // nixorange
-        "dark": "#ff8657", // nixdarkorange
-        "darker": "#cc3900", // nixdarkerorange
+      'nix-orange': {
+        lighter: '#fff5e1', // nixlightorange
+        DEFAULT: '#ffab0d', // nixorange
+        hover: '#ec9d0c',
+        dark: '#ff8657', // nixdarkorange
+        darker: '#cc3900', // nixdarkerorange
       },
-      "nix-green": {
-        DEFAULT: "#6ad541", // nixgreen
-        "dark": "#51ba29", // nixdarkgreen
+      'nix-green': {
+        DEFAULT: '#6ad541', // nixgreen
+        hover: '#64c53d',
+        dark: '#51ba29', // nixdarkgreen
       },
-      "gray": colors.gray,
-      "white": colors.white,
-      "black": colors.black,
-      "transparent": colors.transparent,
+      gray: colors.gray,
+      white: colors.white,
+      black: colors.black,
+      transparent: colors.transparent,
     },
-    boxShadow: shadow,
-    dropShadow: shadow,
+    // boxShadow: shadow,
+    // dropShadow: shadow,
     extend: {
       borderWidth: {
-        '0.5': '0.5px',
-        '1': '1px'
+        0.5: '0.5px',
+        1: '1px',
       },
       listStyleType: {
-        "circle": "circle",
+        circle: 'circle',
       },
       textDecorationThickness: {
-        '0.5': '0.5px'
+        0.5: '0.5px',
       },
       backgroundSize: {
-        'divider': 'auto 100%',
+        divider: 'auto 100%',
       },
     },
     screens: {
-      'sm': '480px',
-      'md': '768px',
-      'lg': '992px',
-      'xl': '1200px',
+      sm: '480px',
+      md: '768px',
+      lg: '992px',
+      xl: '1200px',
     },
     fontSize: {
-      'xs': '0.75rem',
-      'sm': '0.875rem',
-      'base': '1rem',
-      'lg': '1.2rem',
-      'xl': '1.4rem',
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.2rem',
+      xl: '1.4rem',
       '2xl': '1.625rem',
       '3xl': '1.953rem',
       '4xl': '2.441rem',
@@ -118,16 +128,16 @@ module.exports = {
   },
   plugins: [
     addDynamicIconSelectors(),
-    plugin(function({ addUtilities }) {
-      res = {}
+    plugin(function ({ addUtilities }) {
+      res = {};
 
       for (const [key, value] of Object.entries(inlineSvgs)) {
         res[`.inline-svg-${key}`] = {
           'background-image': `url(${inlineSvg({ svg: value })})`,
-        }
+        };
       }
 
-      addUtilities(res)
-    })
+      addUtilities(res);
+    }),
   ],
-}
+};
diff --git a/tsconfig.json b/tsconfig.json
index d78f81ec4e..0d27f4510c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,10 @@
 {
-  "extends": "astro/tsconfigs/base"
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "result-demos", "result-manuals", "result-pills"]
 }