feature/homepage (#1)

* feat(homepage): implement banner section

* feat(homepage): add 2 sections in homepage

---------

Co-authored-by: Hoang Nguyen <hoangnt@inspirelab.vn>

next.config.ts

@@ -1,26 +1,30 @@
-import withBundleAnalyzer from '@next/bundle-analyzer';
+// import withBundleAnalyzer from '@next/bundle-analyzer';
 import { withSentryConfig } from '@sentry/nextjs';
-import createNextIntlPlugin from 'next-intl/plugin';
+// import createNextIntlPlugin from 'next-intl/plugin';
 import './src/libs/Env';
 
-const withNextIntl = createNextIntlPlugin('./src/libs/i18n.ts');
+// const withNextIntl = createNextIntlPlugin('./src/libs/i18n.ts');
 
-const bundleAnalyzer = withBundleAnalyzer({
-  enabled: process.env.ANALYZE === 'true',
-});
+// const bundleAnalyzer = withBundleAnalyzer({
+//   enabled: process.env.ANALYZE === 'true',
+// });
+
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+        port: '',
+        pathname: '**',
+      },
+    ],
+  },
+};
 
 /** @type {import('next').NextConfig} */
 export default withSentryConfig(
-  bundleAnalyzer(
-    withNextIntl({
-      eslint: {
-        dirs: ['.'],
-      },
-      poweredByHeader: false,
-      reactStrictMode: true,
-      serverExternalPackages: ['@electric-sql/pglite'],
-    }),
-  ),
+  nextConfig,
   {
     // For all available options, see:
     // https://github.com/getsentry/sentry-webpack-plugin#options

package-lock.json

@@ -17,7 +17,10 @@
         "@sentry/nextjs": "^8.43.0",
         "@spotlightjs/spotlight": "^2.7.0",
         "@t3-oss/env-nextjs": "^0.11.1",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "drizzle-orm": "^0.38.0",
+        "lucide-react": "^0.474.0",
         "next": "^15.1.0",
         "next-intl": "^3.26.0",
         "pg": "^8.13.1",
@@ -26,6 +29,7 @@
         "react": "19.0.0",
         "react-dom": "19.0.0",
         "react-hook-form": "^7.54.0",
+        "tailwind-merge": "^2.6.0",
         "zod": "^3.24.0"
       },
       "devDependencies": {
@@ -13920,6 +13924,17 @@
       "integrity": "sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA==",
       "license": "MIT"
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -14243,6 +14258,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -24792,6 +24815,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.474.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.474.0.tgz",
+      "integrity": "sha512-CmghgHkh0OJNmxGKWc0qfPJCYHASPMVSyGY8fj3xgk4v84ItqDg64JNKFZn5hC6E0vHi6gxnbCgwhyVB09wQtA==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/luxon": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.3.0.tgz",
@@ -27030,7 +27061,6 @@
     },
     "node_modules/npm/node_modules/@isaacs/cliui": {
       "version": "8.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27047,7 +27077,6 @@
     },
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/ansi-regex": {
       "version": "6.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -27059,13 +27088,11 @@
     },
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/emoji-regex": {
       "version": "9.2.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width": {
       "version": "5.1.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -27082,7 +27109,6 @@
     },
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi": {
       "version": "7.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -27097,7 +27123,6 @@
     },
     "node_modules/npm/node_modules/@isaacs/fs-minipass": {
       "version": "4.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27109,13 +27134,11 @@
     },
     "node_modules/npm/node_modules/@isaacs/string-locale-compare": {
       "version": "1.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/@npmcli/agent": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27131,7 +27154,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/arborist": {
       "version": "8.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27180,7 +27202,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/config": {
       "version": "9.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27199,7 +27220,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/fs": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27211,7 +27231,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/git": {
       "version": "6.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27231,7 +27250,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/installed-package-contents": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27247,7 +27265,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/map-workspaces": {
       "version": "4.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27262,7 +27279,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/metavuln-calculator": {
       "version": "8.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27278,7 +27294,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/metavuln-calculator/node_modules/pacote": {
       "version": "20.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27309,7 +27324,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/name-from-folder": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -27318,7 +27332,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/node-gyp": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -27327,7 +27340,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/package-json": {
       "version": "6.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27345,7 +27357,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/promise-spawn": {
       "version": "8.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27357,7 +27368,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/query": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27369,7 +27379,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/redact": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -27378,7 +27387,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/run-script": {
       "version": "9.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27395,17 +27403,14 @@
     },
     "node_modules/npm/node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=14"
       }
     },
     "node_modules/npm/node_modules/@sigstore/protobuf-specs": {
       "version": "0.3.2",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "engines": {
@@ -27414,7 +27419,6 @@
     },
     "node_modules/npm/node_modules/@sigstore/tuf": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -27427,7 +27431,6 @@
     },
     "node_modules/npm/node_modules/@tufjs/canonical-json": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -27436,7 +27439,6 @@
     },
     "node_modules/npm/node_modules/abbrev": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -27445,7 +27447,6 @@
     },
     "node_modules/npm/node_modules/agent-base": {
       "version": "7.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -27457,7 +27458,6 @@
     },
     "node_modules/npm/node_modules/aggregate-error": {
       "version": "3.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -27470,7 +27470,6 @@
     },
     "node_modules/npm/node_modules/ansi-regex": {
       "version": "5.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -27479,7 +27478,6 @@
     },
     "node_modules/npm/node_modules/ansi-styles": {
       "version": "6.2.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -27491,25 +27489,21 @@
     },
     "node_modules/npm/node_modules/aproba": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/archy": {
       "version": "1.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/balanced-match": {
       "version": "1.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/bin-links": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27525,7 +27519,6 @@
     },
     "node_modules/npm/node_modules/binary-extensions": {
       "version": "2.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -27537,7 +27530,6 @@
     },
     "node_modules/npm/node_modules/brace-expansion": {
       "version": "2.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -27546,7 +27538,6 @@
     },
     "node_modules/npm/node_modules/cacache": {
       "version": "19.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27569,7 +27560,6 @@
     },
     "node_modules/npm/node_modules/cacache/node_modules/chownr": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -27578,7 +27568,6 @@
     },
     "node_modules/npm/node_modules/cacache/node_modules/minizlib": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -27591,7 +27580,6 @@
     },
     "node_modules/npm/node_modules/cacache/node_modules/mkdirp": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "bin": {
@@ -27606,7 +27594,6 @@
     },
     "node_modules/npm/node_modules/cacache/node_modules/p-map": {
       "version": "7.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -27618,7 +27605,6 @@
     },
     "node_modules/npm/node_modules/cacache/node_modules/tar": {
       "version": "7.4.3",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27635,7 +27621,6 @@
     },
     "node_modules/npm/node_modules/cacache/node_modules/yallist": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -27644,7 +27629,6 @@
     },
     "node_modules/npm/node_modules/chalk": {
       "version": "5.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -27656,7 +27640,6 @@
     },
     "node_modules/npm/node_modules/chownr": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -27665,7 +27648,6 @@
     },
     "node_modules/npm/node_modules/ci-info": {
       "version": "4.1.0",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -27680,7 +27662,6 @@
     },
     "node_modules/npm/node_modules/cidr-regex": {
       "version": "4.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -27692,7 +27673,6 @@
     },
     "node_modules/npm/node_modules/clean-stack": {
       "version": "2.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -27701,7 +27681,6 @@
     },
     "node_modules/npm/node_modules/cli-columns": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -27714,7 +27693,6 @@
     },
     "node_modules/npm/node_modules/cmd-shim": {
       "version": "7.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -27723,7 +27701,6 @@
     },
     "node_modules/npm/node_modules/color-convert": {
       "version": "2.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -27735,19 +27712,16 @@
     },
     "node_modules/npm/node_modules/color-name": {
       "version": "1.1.4",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/common-ancestor-path": {
       "version": "1.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/cross-spawn": {
       "version": "7.0.6",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -27761,7 +27735,6 @@
     },
     "node_modules/npm/node_modules/cross-spawn/node_modules/which": {
       "version": "2.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27776,7 +27749,6 @@
     },
     "node_modules/npm/node_modules/cssesc": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "bin": {
@@ -27788,7 +27760,6 @@
     },
     "node_modules/npm/node_modules/debug": {
       "version": "4.3.7",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -27805,7 +27776,6 @@
     },
     "node_modules/npm/node_modules/diff": {
       "version": "5.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-3-Clause",
       "engines": {
@@ -27814,29 +27784,24 @@
     },
     "node_modules/npm/node_modules/eastasianwidth": {
       "version": "0.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/emoji-regex": {
       "version": "8.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/encoding": {
       "version": "0.1.13",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "iconv-lite": "^0.6.2"
       }
     },
     "node_modules/npm/node_modules/env-paths": {
       "version": "2.2.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -27845,19 +27810,16 @@
     },
     "node_modules/npm/node_modules/err-code": {
       "version": "2.0.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/exponential-backoff": {
       "version": "3.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0"
     },
     "node_modules/npm/node_modules/fastest-levenshtein": {
       "version": "1.0.16",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -27866,7 +27828,6 @@
     },
     "node_modules/npm/node_modules/foreground-child": {
       "version": "3.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27882,7 +27843,6 @@
     },
     "node_modules/npm/node_modules/fs-minipass": {
       "version": "3.0.3",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27894,7 +27854,6 @@
     },
     "node_modules/npm/node_modules/glob": {
       "version": "10.4.5",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27914,13 +27873,11 @@
     },
     "node_modules/npm/node_modules/graceful-fs": {
       "version": "4.2.11",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/hosted-git-info": {
       "version": "8.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27932,13 +27889,11 @@
     },
     "node_modules/npm/node_modules/http-cache-semantics": {
       "version": "4.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause"
     },
     "node_modules/npm/node_modules/http-proxy-agent": {
       "version": "7.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -27951,7 +27906,6 @@
     },
     "node_modules/npm/node_modules/https-proxy-agent": {
       "version": "7.0.5",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -27964,10 +27918,8 @@
     },
     "node_modules/npm/node_modules/iconv-lite": {
       "version": "0.6.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -27977,7 +27929,6 @@
     },
     "node_modules/npm/node_modules/ignore-walk": {
       "version": "7.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -27989,7 +27940,6 @@
     },
     "node_modules/npm/node_modules/imurmurhash": {
       "version": "0.1.4",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -27998,7 +27948,6 @@
     },
     "node_modules/npm/node_modules/indent-string": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -28007,7 +27956,6 @@
     },
     "node_modules/npm/node_modules/ini": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -28016,7 +27964,6 @@
     },
     "node_modules/npm/node_modules/init-package-json": {
       "version": "7.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28034,7 +27981,6 @@
     },
     "node_modules/npm/node_modules/ip-address": {
       "version": "9.0.5",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -28047,7 +27993,6 @@
     },
     "node_modules/npm/node_modules/ip-regex": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -28059,7 +28004,6 @@
     },
     "node_modules/npm/node_modules/is-cidr": {
       "version": "5.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -28071,7 +28015,6 @@
     },
     "node_modules/npm/node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -28080,13 +28023,11 @@
     },
     "node_modules/npm/node_modules/isexe": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/jackspeak": {
       "version": "3.4.3",
-      "dev": true,
       "inBundle": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
@@ -28101,13 +28042,11 @@
     },
     "node_modules/npm/node_modules/jsbn": {
       "version": "1.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/json-parse-even-better-errors": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -28116,7 +28055,6 @@
     },
     "node_modules/npm/node_modules/json-stringify-nice": {
       "version": "1.1.4",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "funding": {
@@ -28125,7 +28063,6 @@
     },
     "node_modules/npm/node_modules/jsonparse": {
       "version": "1.3.1",
-      "dev": true,
       "engines": [
         "node >= 0.2.0"
       ],
@@ -28134,19 +28071,16 @@
     },
     "node_modules/npm/node_modules/just-diff": {
       "version": "6.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/just-diff-apply": {
       "version": "5.5.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/libnpmaccess": {
       "version": "9.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28159,7 +28093,6 @@
     },
     "node_modules/npm/node_modules/libnpmdiff": {
       "version": "7.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28178,7 +28111,6 @@
     },
     "node_modules/npm/node_modules/libnpmexec": {
       "version": "9.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28199,7 +28131,6 @@
     },
     "node_modules/npm/node_modules/libnpmfund": {
       "version": "6.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28211,7 +28142,6 @@
     },
     "node_modules/npm/node_modules/libnpmhook": {
       "version": "11.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28224,7 +28154,6 @@
     },
     "node_modules/npm/node_modules/libnpmorg": {
       "version": "7.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28237,7 +28166,6 @@
     },
     "node_modules/npm/node_modules/libnpmpack": {
       "version": "8.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28252,7 +28180,6 @@
     },
     "node_modules/npm/node_modules/libnpmpublish": {
       "version": "10.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28271,7 +28198,6 @@
     },
     "node_modules/npm/node_modules/libnpmsearch": {
       "version": "8.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28283,7 +28209,6 @@
     },
     "node_modules/npm/node_modules/libnpmteam": {
       "version": "7.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28296,7 +28221,6 @@
     },
     "node_modules/npm/node_modules/libnpmversion": {
       "version": "7.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28312,13 +28236,11 @@
     },
     "node_modules/npm/node_modules/lru-cache": {
       "version": "10.4.3",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/make-fetch-happen": {
       "version": "14.0.3",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28340,7 +28262,6 @@
     },
     "node_modules/npm/node_modules/make-fetch-happen/node_modules/negotiator": {
       "version": "1.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -28349,7 +28270,6 @@
     },
     "node_modules/npm/node_modules/minimatch": {
       "version": "9.0.5",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28364,7 +28284,6 @@
     },
     "node_modules/npm/node_modules/minipass": {
       "version": "7.1.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -28373,7 +28292,6 @@
     },
     "node_modules/npm/node_modules/minipass-collect": {
       "version": "2.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28385,7 +28303,6 @@
     },
     "node_modules/npm/node_modules/minipass-fetch": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -28402,7 +28319,6 @@
     },
     "node_modules/npm/node_modules/minipass-fetch/node_modules/minizlib": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -28415,7 +28331,6 @@
     },
     "node_modules/npm/node_modules/minipass-flush": {
       "version": "1.0.5",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28427,7 +28342,6 @@
     },
     "node_modules/npm/node_modules/minipass-flush/node_modules/minipass": {
       "version": "3.3.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28439,7 +28353,6 @@
     },
     "node_modules/npm/node_modules/minipass-pipeline": {
       "version": "1.2.4",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28451,7 +28364,6 @@
     },
     "node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": {
       "version": "3.3.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28463,7 +28375,6 @@
     },
     "node_modules/npm/node_modules/minipass-sized": {
       "version": "1.0.3",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28475,7 +28386,6 @@
     },
     "node_modules/npm/node_modules/minipass-sized/node_modules/minipass": {
       "version": "3.3.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28487,7 +28397,6 @@
     },
     "node_modules/npm/node_modules/minizlib": {
       "version": "2.1.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -28500,7 +28409,6 @@
     },
     "node_modules/npm/node_modules/minizlib/node_modules/minipass": {
       "version": "3.3.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28512,7 +28420,6 @@
     },
     "node_modules/npm/node_modules/mkdirp": {
       "version": "1.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "bin": {
@@ -28524,13 +28431,11 @@
     },
     "node_modules/npm/node_modules/ms": {
       "version": "2.1.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/mute-stream": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -28539,7 +28444,6 @@
     },
     "node_modules/npm/node_modules/node-gyp": {
       "version": "11.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -28563,7 +28467,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/chownr": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -28572,7 +28475,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/minizlib": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -28585,7 +28487,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/mkdirp": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "bin": {
@@ -28600,7 +28501,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/tar": {
       "version": "7.4.3",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28617,7 +28517,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/yallist": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "BlueOak-1.0.0",
       "engines": {
@@ -28626,7 +28525,6 @@
     },
     "node_modules/npm/node_modules/nopt": {
       "version": "8.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28641,7 +28539,6 @@
     },
     "node_modules/npm/node_modules/nopt/node_modules/abbrev": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -28650,7 +28547,6 @@
     },
     "node_modules/npm/node_modules/normalize-package-data": {
       "version": "7.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -28664,7 +28560,6 @@
     },
     "node_modules/npm/node_modules/npm-audit-report": {
       "version": "6.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -28673,7 +28568,6 @@
     },
     "node_modules/npm/node_modules/npm-bundled": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28685,7 +28579,6 @@
     },
     "node_modules/npm/node_modules/npm-install-checks": {
       "version": "7.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -28697,7 +28590,6 @@
     },
     "node_modules/npm/node_modules/npm-normalize-package-bin": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -28706,7 +28598,6 @@
     },
     "node_modules/npm/node_modules/npm-package-arg": {
       "version": "12.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28721,7 +28612,6 @@
     },
     "node_modules/npm/node_modules/npm-packlist": {
       "version": "9.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28733,7 +28623,6 @@
     },
     "node_modules/npm/node_modules/npm-pick-manifest": {
       "version": "10.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28748,7 +28637,6 @@
     },
     "node_modules/npm/node_modules/npm-profile": {
       "version": "11.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28761,7 +28649,6 @@
     },
     "node_modules/npm/node_modules/npm-registry-fetch": {
       "version": "18.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28780,7 +28667,6 @@
     },
     "node_modules/npm/node_modules/npm-registry-fetch/node_modules/minizlib": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -28793,7 +28679,6 @@
     },
     "node_modules/npm/node_modules/npm-user-validate": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
       "engines": {
@@ -28802,7 +28687,6 @@
     },
     "node_modules/npm/node_modules/p-map": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -28817,13 +28701,11 @@
     },
     "node_modules/npm/node_modules/package-json-from-dist": {
       "version": "1.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "BlueOak-1.0.0"
     },
     "node_modules/npm/node_modules/pacote": {
       "version": "19.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28854,7 +28736,6 @@
     },
     "node_modules/npm/node_modules/parse-conflict-json": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28868,7 +28749,6 @@
     },
     "node_modules/npm/node_modules/path-key": {
       "version": "3.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -28877,7 +28757,6 @@
     },
     "node_modules/npm/node_modules/path-scurry": {
       "version": "1.11.1",
-      "dev": true,
       "inBundle": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
@@ -28893,7 +28772,6 @@
     },
     "node_modules/npm/node_modules/postcss-selector-parser": {
       "version": "6.1.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -28906,7 +28784,6 @@
     },
     "node_modules/npm/node_modules/proc-log": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -28915,7 +28792,6 @@
     },
     "node_modules/npm/node_modules/proggy": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -28924,7 +28800,6 @@
     },
     "node_modules/npm/node_modules/promise-all-reject-late": {
       "version": "1.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "funding": {
@@ -28933,7 +28808,6 @@
     },
     "node_modules/npm/node_modules/promise-call-limit": {
       "version": "3.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "funding": {
@@ -28942,13 +28816,11 @@
     },
     "node_modules/npm/node_modules/promise-inflight": {
       "version": "1.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/promise-retry": {
       "version": "2.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -28961,7 +28833,6 @@
     },
     "node_modules/npm/node_modules/promzard": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28973,7 +28844,6 @@
     },
     "node_modules/npm/node_modules/qrcode-terminal": {
       "version": "0.12.0",
-      "dev": true,
       "inBundle": true,
       "bin": {
         "qrcode-terminal": "bin/qrcode-terminal.js"
@@ -28981,7 +28851,6 @@
     },
     "node_modules/npm/node_modules/read": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -28993,7 +28862,6 @@
     },
     "node_modules/npm/node_modules/read-cmd-shim": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -29002,7 +28870,6 @@
     },
     "node_modules/npm/node_modules/read-package-json-fast": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -29015,7 +28882,6 @@
     },
     "node_modules/npm/node_modules/retry": {
       "version": "0.12.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -29024,7 +28890,6 @@
     },
     "node_modules/npm/node_modules/rimraf": {
       "version": "5.0.10",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -29039,14 +28904,11 @@
     },
     "node_modules/npm/node_modules/safer-buffer": {
       "version": "2.1.2",
-      "dev": true,
       "inBundle": true,
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/npm/node_modules/semver": {
       "version": "7.6.3",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "bin": {
@@ -29058,7 +28920,6 @@
     },
     "node_modules/npm/node_modules/shebang-command": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29070,7 +28931,6 @@
     },
     "node_modules/npm/node_modules/shebang-regex": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -29079,7 +28939,6 @@
     },
     "node_modules/npm/node_modules/signal-exit": {
       "version": "4.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -29091,7 +28950,6 @@
     },
     "node_modules/npm/node_modules/sigstore": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -29108,7 +28966,6 @@
     },
     "node_modules/npm/node_modules/sigstore/node_modules/@sigstore/bundle": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -29120,7 +28977,6 @@
     },
     "node_modules/npm/node_modules/sigstore/node_modules/@sigstore/core": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "engines": {
@@ -29129,7 +28985,6 @@
     },
     "node_modules/npm/node_modules/sigstore/node_modules/@sigstore/sign": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -29146,7 +29001,6 @@
     },
     "node_modules/npm/node_modules/sigstore/node_modules/@sigstore/verify": {
       "version": "2.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -29160,7 +29014,6 @@
     },
     "node_modules/npm/node_modules/smart-buffer": {
       "version": "4.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -29170,7 +29023,6 @@
     },
     "node_modules/npm/node_modules/socks": {
       "version": "2.8.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29184,7 +29036,6 @@
     },
     "node_modules/npm/node_modules/socks-proxy-agent": {
       "version": "8.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29198,7 +29049,6 @@
     },
     "node_modules/npm/node_modules/spdx-correct": {
       "version": "3.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -29208,7 +29058,6 @@
     },
     "node_modules/npm/node_modules/spdx-correct/node_modules/spdx-expression-parse": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29218,13 +29067,11 @@
     },
     "node_modules/npm/node_modules/spdx-exceptions": {
       "version": "2.5.0",
-      "dev": true,
       "inBundle": true,
       "license": "CC-BY-3.0"
     },
     "node_modules/npm/node_modules/spdx-expression-parse": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29234,19 +29081,16 @@
     },
     "node_modules/npm/node_modules/spdx-license-ids": {
       "version": "3.0.20",
-      "dev": true,
       "inBundle": true,
       "license": "CC0-1.0"
     },
     "node_modules/npm/node_modules/sprintf-js": {
       "version": "1.1.3",
-      "dev": true,
       "inBundle": true,
       "license": "BSD-3-Clause"
     },
     "node_modules/npm/node_modules/ssri": {
       "version": "12.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -29258,7 +29102,6 @@
     },
     "node_modules/npm/node_modules/string-width": {
       "version": "4.2.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29273,7 +29116,6 @@
     "node_modules/npm/node_modules/string-width-cjs": {
       "name": "string-width",
       "version": "4.2.3",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29287,7 +29129,6 @@
     },
     "node_modules/npm/node_modules/strip-ansi": {
       "version": "6.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29300,7 +29141,6 @@
     "node_modules/npm/node_modules/strip-ansi-cjs": {
       "name": "strip-ansi",
       "version": "6.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29312,7 +29152,6 @@
     },
     "node_modules/npm/node_modules/supports-color": {
       "version": "9.4.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -29324,7 +29163,6 @@
     },
     "node_modules/npm/node_modules/tar": {
       "version": "6.2.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -29341,7 +29179,6 @@
     },
     "node_modules/npm/node_modules/tar/node_modules/fs-minipass": {
       "version": "2.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -29353,7 +29190,6 @@
     },
     "node_modules/npm/node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
       "version": "3.3.6",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -29365,7 +29201,6 @@
     },
     "node_modules/npm/node_modules/tar/node_modules/minipass": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -29374,19 +29209,16 @@
     },
     "node_modules/npm/node_modules/text-table": {
       "version": "0.2.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/tiny-relative-date": {
       "version": "1.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/treeverse": {
       "version": "3.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -29395,7 +29227,6 @@
     },
     "node_modules/npm/node_modules/tuf-js": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29409,7 +29240,6 @@
     },
     "node_modules/npm/node_modules/tuf-js/node_modules/@tufjs/models": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29422,7 +29252,6 @@
     },
     "node_modules/npm/node_modules/unique-filename": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -29434,7 +29263,6 @@
     },
     "node_modules/npm/node_modules/unique-slug": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -29446,13 +29274,11 @@
     },
     "node_modules/npm/node_modules/util-deprecate": {
       "version": "1.0.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/validate-npm-package-license": {
       "version": "3.0.4",
-      "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -29462,7 +29288,6 @@
     },
     "node_modules/npm/node_modules/validate-npm-package-license/node_modules/spdx-expression-parse": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29472,7 +29297,6 @@
     },
     "node_modules/npm/node_modules/validate-npm-package-name": {
       "version": "6.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -29481,13 +29305,11 @@
     },
     "node_modules/npm/node_modules/walk-up-path": {
       "version": "3.0.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/which": {
       "version": "5.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -29502,7 +29324,6 @@
     },
     "node_modules/npm/node_modules/which/node_modules/isexe": {
       "version": "3.1.1",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -29511,7 +29332,6 @@
     },
     "node_modules/npm/node_modules/wrap-ansi": {
       "version": "8.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29529,7 +29349,6 @@
     "node_modules/npm/node_modules/wrap-ansi-cjs": {
       "name": "wrap-ansi",
       "version": "7.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29546,7 +29365,6 @@
     },
     "node_modules/npm/node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
       "version": "4.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29561,7 +29379,6 @@
     },
     "node_modules/npm/node_modules/wrap-ansi/node_modules/ansi-regex": {
       "version": "6.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -29573,13 +29390,11 @@
     },
     "node_modules/npm/node_modules/wrap-ansi/node_modules/emoji-regex": {
       "version": "9.2.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/wrap-ansi/node_modules/string-width": {
       "version": "5.1.2",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29596,7 +29411,6 @@
     },
     "node_modules/npm/node_modules/wrap-ansi/node_modules/strip-ansi": {
       "version": "7.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -29611,7 +29425,6 @@
     },
     "node_modules/npm/node_modules/write-file-atomic": {
       "version": "6.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -29624,7 +29437,6 @@
     },
     "node_modules/npm/node_modules/yallist": {
       "version": "4.0.0",
-      "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
@@ -36154,6 +35966,15 @@
       "dev": true,
       "license": "0BSD"
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
+      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.16",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz",

package.json

@@ -36,7 +36,10 @@
     "@sentry/nextjs": "^8.43.0",
     "@spotlightjs/spotlight": "^2.7.0",
     "@t3-oss/env-nextjs": "^0.11.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "drizzle-orm": "^0.38.0",
+    "lucide-react": "^0.474.0",
     "next": "^15.1.0",
     "next-intl": "^3.26.0",
     "pg": "^8.13.1",
@@ -45,6 +48,7 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-hook-form": "^7.54.0",
+    "tailwind-merge": "^2.6.0",
     "zod": "^3.24.0"
   },
   "devDependencies": {

src/app/[locale]/(auth)/(center)/layout.tsx

@@ -1,15 +0,0 @@
-import { setRequestLocale } from 'next-intl/server';
-
-export default async function CenteredLayout(props: {
-  children: React.ReactNode;
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await props.params;
-  setRequestLocale(locale);
-
-  return (
-    <div className="flex min-h-screen items-center justify-center">
-      {props.children}
-    </div>
-  );
-}

src/app/[locale]/(auth)/(center)/sign-in/[[...sign-in]]/page.tsx

@@ -1,29 +0,0 @@
-import { getI18nPath } from '@/utils/Helpers';
-import { SignIn } from '@clerk/nextjs';
-import { getTranslations, setRequestLocale } from 'next-intl/server';
-
-type ISignInPageProps = {
-  params: Promise<{ locale: string }>;
-};
-
-export async function generateMetadata(props: ISignInPageProps) {
-  const { locale } = await props.params;
-  const t = await getTranslations({
-    locale,
-    namespace: 'SignIn',
-  });
-
-  return {
-    title: t('meta_title'),
-    description: t('meta_description'),
-  };
-}
-
-export default async function SignInPage(props: ISignInPageProps) {
-  const { locale } = await props.params;
-  setRequestLocale(locale);
-
-  return (
-    <SignIn path={getI18nPath('/sign-in', locale)} />
-  );
-};

src/app/[locale]/(auth)/(center)/sign-up/[[...sign-up]]/page.tsx

@@ -1,29 +0,0 @@
-import { getI18nPath } from '@/utils/Helpers';
-import { SignUp } from '@clerk/nextjs';
-import { getTranslations, setRequestLocale } from 'next-intl/server';
-
-type ISignUpPageProps = {
-  params: Promise<{ locale: string }>;
-};
-
-export async function generateMetadata(props: ISignUpPageProps) {
-  const { locale } = await props.params;
-  const t = await getTranslations({
-    locale,
-    namespace: 'SignUp',
-  });
-
-  return {
-    title: t('meta_title'),
-    description: t('meta_description'),
-  };
-}
-
-export default async function SignUpPage(props: ISignUpPageProps) {
-  const { locale } = await props.params;
-  setRequestLocale(locale);
-
-  return (
-    <SignUp path={getI18nPath('/sign-up', locale)} />
-  );
-};

src/app/[locale]/(auth)/dashboard/layout.tsx

@@ -1,59 +0,0 @@
-import { LocaleSwitcher } from '@/components/LocaleSwitcher';
-import { BaseTemplate } from '@/templates/BaseTemplate';
-import { SignOutButton } from '@clerk/nextjs';
-import { getTranslations, setRequestLocale } from 'next-intl/server';
-import Link from 'next/link';
-
-export default async function DashboardLayout(props: {
-  children: React.ReactNode;
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await props.params;
-  setRequestLocale(locale);
-  const t = await getTranslations({
-    locale,
-    namespace: 'DashboardLayout',
-  });
-
-  return (
-    <BaseTemplate
-      leftNav={(
-        <>
-          <li>
-            <Link
-              href="/dashboard/"
-              className="border-none text-gray-700 hover:text-gray-900"
-            >
-              {t('dashboard_link')}
-            </Link>
-          </li>
-          <li>
-            <Link
-              href="/dashboard/user-profile/"
-              className="border-none text-gray-700 hover:text-gray-900"
-            >
-              {t('user_profile_link')}
-            </Link>
-          </li>
-        </>
-      )}
-      rightNav={(
-        <>
-          <li>
-            <SignOutButton>
-              <button className="border-none text-gray-700 hover:text-gray-900" type="button">
-                {t('sign_out')}
-              </button>
-            </SignOutButton>
-          </li>
-
-          <li>
-            <LocaleSwitcher />
-          </li>
-        </>
-      )}
-    >
-      {props.children}
-    </BaseTemplate>
-  );
-}

src/app/[locale]/(auth)/dashboard/page.tsx

@@ -1,24 +0,0 @@
-import { Hello } from '@/components/Hello';
-import { getTranslations } from 'next-intl/server';
-
-export async function generateMetadata(props: {
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await props.params;
-  const t = await getTranslations({
-    locale,
-    namespace: 'Dashboard',
-  });
-
-  return {
-    title: t('meta_title'),
-  };
-}
-
-export default function Dashboard() {
-  return (
-    <div className="py-5 [&_p]:my-6">
-      <Hello />
-    </div>
-  );
-}

src/app/[locale]/(auth)/dashboard/user-profile/[[...user-profile]]/page.tsx

@@ -1,32 +0,0 @@
-import { getI18nPath } from '@/utils/Helpers';
-import { UserProfile } from '@clerk/nextjs';
-import { getTranslations, setRequestLocale } from 'next-intl/server';
-
-type IUserProfilePageProps = {
-  params: Promise<{ locale: string }>;
-};
-
-export async function generateMetadata(props: IUserProfilePageProps) {
-  const { locale } = await props.params;
-  const t = await getTranslations({
-    locale,
-    namespace: 'UserProfile',
-  });
-
-  return {
-    title: t('meta_title'),
-  };
-}
-
-export default async function UserProfilePage(props: IUserProfilePageProps) {
-  const { locale } = await props.params;
-  setRequestLocale(locale);
-
-  return (
-    <div className="my-6 -ml-16">
-      <UserProfile
-        path={getI18nPath('/dashboard/user-profile', locale)}
-      />
-    </div>
-  );
-};

src/app/[locale]/(auth)/layout.tsx

@@ -1,41 +0,0 @@
-import { routing } from '@/libs/i18nNavigation';
-import { enUS, frFR } from '@clerk/localizations';
-import { ClerkProvider } from '@clerk/nextjs';
-import { setRequestLocale } from 'next-intl/server';
-
-export default async function AuthLayout(props: {
-  children: React.ReactNode;
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await props.params;
-  setRequestLocale(locale);
-  let clerkLocale = enUS;
-  let signInUrl = '/sign-in';
-  let signUpUrl = '/sign-up';
-  let dashboardUrl = '/dashboard';
-  let afterSignOutUrl = '/';
-
-  if (locale === 'fr') {
-    clerkLocale = frFR;
-  }
-
-  if (locale !== routing.defaultLocale) {
-    signInUrl = `/${locale}${signInUrl}`;
-    signUpUrl = `/${locale}${signUpUrl}`;
-    dashboardUrl = `/${locale}${dashboardUrl}`;
-    afterSignOutUrl = `/${locale}${afterSignOutUrl}`;
-  }
-
-  return (
-    <ClerkProvider
-      localization={clerkLocale}
-      signInUrl={signInUrl}
-      signUpUrl={signUpUrl}
-      signInFallbackRedirectUrl={dashboardUrl}
-      signUpFallbackRedirectUrl={dashboardUrl}
-      afterSignOutUrl={afterSignOutUrl}
-    >
-      {props.children}
-    </ClerkProvider>
-  );
-}

src/app/[locale]/(marketing)/about/page.tsx

@@ -1,54 +0,0 @@
-import { getTranslations, setRequestLocale } from 'next-intl/server';
-import Image from 'next/image';
-
-type IAboutProps = {
-  params: Promise<{ slug: string; locale: string }>;
-};
-
-export async function generateMetadata(props: IAboutProps) {
-  const { locale } = await props.params;
-  const t = await getTranslations({
-    locale,
-    namespace: 'About',
-  });
-
-  return {
-    title: t('meta_title'),
-    description: t('meta_description'),
-  };
-}
-
-export default async function About(props: IAboutProps) {
-  const { locale } = await props.params;
-  setRequestLocale(locale);
-  const t = await getTranslations({
-    locale,
-    namespace: 'About',
-  });
-
-  return (
-    <>
-      <p>{t('about_paragraph')}</p>
-
-      <div className="mt-2 text-center text-sm">
-        {`${t('translation_powered_by')} `}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://l.crowdin.com/next-js"
-        >
-          Crowdin
-        </a>
-      </div>
-
-      <a href="https://l.crowdin.com/next-js">
-        <Image
-          className="mx-auto mt-2"
-          src="/assets/images/crowdin-dark.png"
-          alt="Crowdin Translation Management System"
-          width={128}
-          height={26}
-        />
-      </a>
-    </>
-  );
-};

src/app/[locale]/(marketing)/api/counter/route.ts

@@ -1,35 +0,0 @@
-import { db } from '@/libs/DB';
-import { logger } from '@/libs/Logger';
-import { counterSchema } from '@/models/Schema';
-import { CounterValidation } from '@/validations/CounterValidation';
-import { sql } from 'drizzle-orm';
-import { headers } from 'next/headers';
-import { NextResponse } from 'next/server';
-
-export const PUT = async (request: Request) => {
-  const json = await request.json();
-  const parse = CounterValidation.safeParse(json);
-
-  if (!parse.success) {
-    return NextResponse.json(parse.error.format(), { status: 422 });
-  }
-
-  // `x-e2e-random-id` is used for end-to-end testing to make isolated requests
-  // The default value is 0 when there is no `x-e2e-random-id` header
-  const id = Number((await headers()).get('x-e2e-random-id')) ?? 0;
-
-  const count = await db
-    .insert(counterSchema)
-    .values({ id, count: parse.data.increment })
-    .onConflictDoUpdate({
-      target: counterSchema.id,
-      set: { count: sql`${counterSchema.count} + ${parse.data.increment}` },
-    })
-    .returning();
-
-  logger.info('Counter has been incremented');
-
-  return NextResponse.json({
-    count: count[0]?.count,
-  });
-};

src/app/[locale]/(marketing)/counter/page.tsx

@@ -1,59 +0,0 @@
-import { CounterForm } from '@/components/CounterForm';
-import { CurrentCount } from '@/components/CurrentCount';
-import { useTranslations } from 'next-intl';
-import { getTranslations } from 'next-intl/server';
-import Image from 'next/image';
-import { Suspense } from 'react';
-
-export async function generateMetadata(props: {
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await props.params;
-  const t = await getTranslations({
-    locale,
-    namespace: 'Counter',
-  });
-
-  return {
-    title: t('meta_title'),
-    description: t('meta_description'),
-  };
-}
-
-export default function Counter() {
-  const t = useTranslations('Counter');
-
-  return (
-    <>
-      <CounterForm />
-
-      <div className="mt-3">
-        <Suspense fallback={<p>{t('loading_counter')}</p>}>
-          <CurrentCount />
-        </Suspense>
-      </div>
-
-      <div className="mt-5 text-center text-sm">
-        {`${t('security_powered_by')} `}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://launch.arcjet.com/Q6eLbRE"
-        >
-          Arcjet
-        </a>
-      </div>
-
-      <a
-        href="https://launch.arcjet.com/Q6eLbRE"
-      >
-        <Image
-          className="mx-auto mt-2"
-          src="/assets/images/arcjet-light.svg"
-          alt="Arcjet"
-          width={128}
-          height={38}
-        />
-      </a>
-    </>
-  );
-};

src/app/[locale]/(marketing)/layout.tsx

@@ -1,96 +0,0 @@
-import { DemoBanner } from '@/components/DemoBanner';
-import { LocaleSwitcher } from '@/components/LocaleSwitcher';
-import { BaseTemplate } from '@/templates/BaseTemplate';
-import { getTranslations, setRequestLocale } from 'next-intl/server';
-import Link from 'next/link';
-
-export default async function Layout(props: {
-  children: React.ReactNode;
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await props.params;
-  setRequestLocale(locale);
-  const t = await getTranslations({
-    locale,
-    namespace: 'RootLayout',
-  });
-
-  return (
-    <>
-      <DemoBanner />
-      <BaseTemplate
-        leftNav={(
-          <>
-            <li>
-              <Link
-                href="/"
-                className="border-none text-gray-700 hover:text-gray-900"
-              >
-                {t('home_link')}
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="/about/"
-                className="border-none text-gray-700 hover:text-gray-900"
-              >
-                {t('about_link')}
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="/counter/"
-                className="border-none text-gray-700 hover:text-gray-900"
-              >
-                {t('counter_link')}
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="/portfolio/"
-                className="border-none text-gray-700 hover:text-gray-900"
-              >
-                {t('portfolio_link')}
-              </Link>
-            </li>
-            <li>
-              <a
-                className="border-none text-gray-700 hover:text-gray-900"
-                href="https://github.com/ixartz/Next-js-Boilerplate"
-              >
-                GitHub
-              </a>
-            </li>
-          </>
-        )}
-        rightNav={(
-          <>
-            <li>
-              <Link
-                href="/sign-in/"
-                className="border-none text-gray-700 hover:text-gray-900"
-              >
-                {t('sign_in_link')}
-              </Link>
-            </li>
-
-            <li>
-              <Link
-                href="/sign-up/"
-                className="border-none text-gray-700 hover:text-gray-900"
-              >
-                {t('sign_up_link')}
-              </Link>
-            </li>
-
-            <li>
-              <LocaleSwitcher />
-            </li>
-          </>
-        )}
-      >
-        <div className="py-5 text-xl [&_p]:my-6">{props.children}</div>
-      </BaseTemplate>
-    </>
-  );
-}

src/app/[locale]/(marketing)/page.tsx

@@ -1,120 +0,0 @@
-import { Sponsors } from '@/components/Sponsors';
-import { getTranslations, setRequestLocale } from 'next-intl/server';
-
-type IIndexProps = {
-  params: Promise<{ locale: string }>;
-};
-
-export async function generateMetadata(props: IIndexProps) {
-  const { locale } = await props.params;
-  const t = await getTranslations({
-    locale,
-    namespace: 'Index',
-  });
-
-  return {
-    title: t('meta_title'),
-    description: t('meta_description'),
-  };
-}
-
-export default async function Index(props: IIndexProps) {
-  const { locale } = await props.params;
-  setRequestLocale(locale);
-  const t = await getTranslations({
-    locale,
-    namespace: 'Index',
-  });
-
-  return (
-    <>
-      <p>
-        {`Follow `}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://twitter.com/ixartz"
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          @Ixartz on Twitter
-        </a>
-        {` for updates and more information about the boilerplate.`}
-      </p>
-      <h2 className="mt-5 text-2xl font-bold">
-        Boilerplate Code for Your Next.js Project with Tailwind CSS
-      </h2>
-      <p className="text-base">
-        Next.js Boilerplate is a developer-friendly starter code for Next.js projects, built with Tailwind CSS and TypeScript.
-        {' '}
-        <span role="img" aria-label="zap">
-          ⚡️
-        </span>
-        {' '}
-        Designed with developer experience in mind, it includes:
-      </p>
-      <ul className="mt-3 text-base">
-        <li>🚀 Next.js with App Router support</li>
-        <li>🔥 TypeScript for type checking</li>
-        <li>💎 Tailwind CSS integration</li>
-        <li>
-          🔒 Authentication with
-          {' '}
-          <a
-            className="font-bold text-blue-700 hover:border-b-2 hover:border-blue-700"
-            href="https://clerk.com?utm_source=github&amp;utm_medium=sponsorship&amp;utm_campaign=nextjs-boilerplate"
-          >
-            Clerk
-          </a>
-          {' '}
-          (includes passwordless, social, and multi-factor auth)
-        </li>
-        <li>📦 ORM with DrizzleORM (PostgreSQL, SQLite, MySQL support)</li>
-        <li>
-          🌐 Multi-language support (i18n) with next-intl and
-          {' '}
-          <a
-            className="font-bold text-blue-700 hover:border-b-2 hover:border-blue-700"
-            href="https://l.crowdin.com/next-js"
-          >
-            Crowdin
-          </a>
-        </li>
-        <li>🔴 Form handling (React Hook Form) and validation (Zod)</li>
-        <li>📏 Linting and formatting (ESLint, Prettier)</li>
-        <li>🦊 Git hooks and commit linting (Husky, Commitlint)</li>
-        <li>🦺 Testing suite (Vitest, React Testing Library, Playwright)</li>
-        <li>🎉 Storybook for UI development</li>
-        <li>
-          🚨 Error monitoring (
-          <a
-            className="font-bold text-blue-700 hover:border-b-2 hover:border-blue-700"
-            href="https://sentry.io/for/nextjs/?utm_source=github&amp;utm_medium=paid-community&amp;utm_campaign=general-fy25q1-nextjs&amp;utm_content=github-banner-nextjsboilerplate-logo"
-          >
-            Sentry
-          </a>
-          ) and logging (Pino.js)
-        </li>
-        <li>🖥️ Monitoring as Code (Checkly)</li>
-        <li>
-          🔐 Security and bot protection (
-          <a
-            className="font-bold text-blue-700 hover:border-b-2 hover:border-blue-700"
-            href="https://launch.arcjet.com/Q6eLbRE"
-          >
-            Arcjet
-          </a>
-          )
-        </li>
-        <li>🤖 SEO optimization (metadata, JSON-LD, Open Graph tags)</li>
-        <li>⚙️ Development tools (VSCode config, bundler analyzer, changelog generation)</li>
-      </ul>
-      <p className="text-base">
-        Our sponsors&apos; exceptional support has made this project possible.
-        Their services integrate seamlessly with the boilerplate, and we
-        recommend trying them out.
-      </p>
-      <h2 className="mt-5 text-2xl font-bold">{t('sponsors_title')}</h2>
-      <Sponsors />
-    </>
-  );
-};

src/app/[locale]/(marketing)/portfolio/[slug]/page.tsx

@@ -1,71 +0,0 @@
-import { routing } from '@/libs/i18nNavigation';
-import { getTranslations, setRequestLocale } from 'next-intl/server';
-import Image from 'next/image';
-
-type IPortfolioDetailProps = {
-  params: Promise<{ slug: string; locale: string }>;
-};
-
-export function generateStaticParams() {
-  return routing.locales
-    .map(locale =>
-      Array.from(Array.from({ length: 6 }).keys()).map(elt => ({
-        slug: `${elt}`,
-        locale,
-      })),
-    )
-    .flat(1);
-}
-
-export async function generateMetadata(props: IPortfolioDetailProps) {
-  const { locale, slug } = await props.params;
-  const t = await getTranslations({
-    locale,
-    namespace: 'PortfolioSlug',
-  });
-
-  return {
-    title: t('meta_title', { slug }),
-    description: t('meta_description', { slug }),
-  };
-}
-
-export default async function PortfolioDetail(props: IPortfolioDetailProps) {
-  const { locale, slug } = await props.params;
-  setRequestLocale(locale);
-  const t = await getTranslations({
-    locale,
-    namespace: 'PortfolioSlug',
-  });
-
-  return (
-    <>
-      <h1 className="capitalize">{t('header', { slug })}</h1>
-      <p>{t('content')}</p>
-
-      <div className="mt-5 text-center text-sm">
-        {`${t('log_management_powered_by')} `}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://betterstack.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate"
-        >
-          Better Stack
-        </a>
-      </div>
-
-      <a
-        href="https://betterstack.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate"
-      >
-        <Image
-          className="mx-auto mt-2"
-          src="/assets/images/better-stack-dark.png"
-          alt="Better Stack"
-          width={128}
-          height={22}
-        />
-      </a>
-    </>
-  );
-};
-
-export const dynamicParams = false;

src/app/[locale]/(marketing)/portfolio/page.tsx

@@ -1,76 +0,0 @@
-import { getTranslations, setRequestLocale } from 'next-intl/server';
-import Image from 'next/image';
-import Link from 'next/link';
-
-type IPortfolioProps = {
-  params: Promise<{ locale: string }>;
-};
-
-export async function generateMetadata(props: IPortfolioProps) {
-  const { locale } = await props.params;
-  const t = await getTranslations({
-    locale,
-    namespace: 'Portfolio',
-  });
-
-  return {
-    title: t('meta_title'),
-    description: t('meta_description'),
-  };
-}
-
-export default async function Portfolio(props: IPortfolioProps) {
-  const { locale } = await props.params;
-  setRequestLocale(locale);
-  const t = await getTranslations({
-    locale,
-    namespace: 'Portfolio',
-  });
-
-  return (
-    <>
-      <p>{t('presentation')}</p>
-
-      <div className="grid grid-cols-1 justify-items-start gap-3 md:grid-cols-2 xl:grid-cols-3">
-        {Array.from(Array.from({ length: 6 }).keys()).map(elt => (
-          <Link
-            className="hover:text-blue-700"
-            key={elt}
-            href={`/portfolio/${elt}`}
-          >
-            {t('portfolio_name', { name: elt })}
-          </Link>
-        ))}
-      </div>
-
-      <div className="mt-5 text-center text-sm">
-        {`${t('error_reporting_powered_by')} `}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
-        >
-          Sentry
-        </a>
-        {` - ${t('coverage_powered_by')} `}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://about.codecov.io/codecov-free-trial/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
-        >
-          Codecov
-        </a>
-      </div>
-
-      <a
-        href="https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
-      >
-        <Image
-          className="mx-auto mt-2"
-          src="/assets/images/sentry-dark.png"
-          alt="Sentry"
-          width={128}
-          height={38}
-        />
-      </a>
-    </>
-  );
-};

src/app/[locale]/layout.tsx

@@ -1,102 +0,0 @@
-import type { Metadata } from 'next';
-import { DemoBadge } from '@/components/DemoBadge';
-import arcjet, { detectBot, request } from '@/libs/Arcjet';
-import { Env } from '@/libs/Env';
-import { routing } from '@/libs/i18nNavigation';
-import { NextIntlClientProvider } from 'next-intl';
-import { getMessages, setRequestLocale } from 'next-intl/server';
-import { notFound } from 'next/navigation';
-import '@/styles/global.css';
-
-export const metadata: Metadata = {
-  icons: [
-    {
-      rel: 'apple-touch-icon',
-      url: '/apple-touch-icon.png',
-    },
-    {
-      rel: 'icon',
-      type: 'image/png',
-      sizes: '32x32',
-      url: '/favicon-32x32.png',
-    },
-    {
-      rel: 'icon',
-      type: 'image/png',
-      sizes: '16x16',
-      url: '/favicon-16x16.png',
-    },
-    {
-      rel: 'icon',
-      url: '/favicon.ico',
-    },
-  ],
-};
-
-export function generateStaticParams() {
-  return routing.locales.map(locale => ({ locale }));
-}
-
-// Improve security with Arcjet
-const aj = arcjet.withRule(
-  detectBot({
-    mode: 'LIVE',
-    // Block all bots except the following
-    allow: [
-      // See https://docs.arcjet.com/bot-protection/identifying-bots
-      'CATEGORY:SEARCH_ENGINE', // Allow search engines
-      'CATEGORY:PREVIEW', // Allow preview links to show OG images
-      'CATEGORY:MONITOR', // Allow uptime monitoring services
-    ],
-  }),
-);
-
-export default async function RootLayout(props: {
-  children: React.ReactNode;
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await props.params;
-
-  if (!routing.locales.includes(locale)) {
-    notFound();
-  }
-
-  setRequestLocale(locale);
-
-  // Verify the request with Arcjet
-  if (Env.ARCJET_KEY) {
-    const req = await request();
-    const decision = await aj.protect(req);
-
-    // These errors are handled by the global error boundary, but you could also
-    // redirect or show a custom error page
-    if (decision.isDenied()) {
-      if (decision.reason.isBot()) {
-        throw new Error('No bots allowed');
-      }
-
-      throw new Error('Access denied');
-    }
-  }
-
-  // Using internationalization in Client Components
-  const messages = await getMessages();
-
-  // The `suppressHydrationWarning` attribute in <body> is used to prevent hydration errors caused by Sentry Overlay,
-  // which dynamically adds a `style` attribute to the body tag.
-
-  return (
-    <html lang={locale}>
-      <body suppressHydrationWarning>
-        <NextIntlClientProvider
-          locale={locale}
-          messages={messages}
-        >
-          {props.children}
-
-          <DemoBadge />
-        </NextIntlClientProvider>
-      </body>
-    </html>
-  );
-}

src/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from 'next';
+import { Navbar } from '@/components/Navbar';
+import { isDevMode } from '@/utils/Helpers';
+import { Inter, Outfit } from 'next/font/google';
+import '../styles/global.css';
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-sans',
+});
+
+// Use Outfit from Google Fonts instead of Cal Sans
+const outfit = Outfit({
+  subsets: ['latin'],
+  variable: '--font-heading',
+});
+
+export const metadata: Metadata = {
+  title: 'X-App',
+  description: 'A clone of Jan.ai built with Next.js and Tailwind CSS',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.variable} ${outfit.variable} font-sans antialiased`} suppressHydrationWarning={isDevMode}>
+        <Navbar />
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,15 @@
+import { AnnouncementBanner } from '@/components/homepage/AnnouncementBanner';
+import { CustomizationSection } from '@/components/homepage/CustomizationSection';
+import { FeaturesSection } from '@/components/homepage/FeatureSection';
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col">
+      <div className="flex-1 space-y-16 pb-8 pt-20 md:pb-12 md:pt-24 lg:py-32">
+        <AnnouncementBanner />
+        <FeaturesSection />
+        <CustomizationSection />
+      </div>
+    </main>
+  );
+}

src/components/CounterForm.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import type { z } from 'zod';
-import { CounterValidation } from '@/validations/CounterValidation';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { useForm } from 'react-hook-form';
-
-export const CounterForm = () => {
-  const t = useTranslations('CounterForm');
-  const form = useForm<z.infer<typeof CounterValidation>>({
-    resolver: zodResolver(CounterValidation),
-    defaultValues: {
-      increment: 0,
-    },
-  });
-  const router = useRouter();
-
-  const handleIncrement = form.handleSubmit(async (data) => {
-    await fetch(`/api/counter`, {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
-    });
-
-    form.reset();
-    router.refresh();
-  });
-
-  return (
-    <form onSubmit={handleIncrement}>
-      <p>{t('presentation')}</p>
-      <div>
-        <label className="text-sm font-bold text-gray-700" htmlFor="increment">
-          {t('label_increment')}
-          <input
-            id="increment"
-            type="number"
-            className="ml-2 w-32 appearance-none rounded border px-2 py-1 text-sm leading-tight text-gray-700 focus:outline-none focus:ring focus:ring-blue-300/50"
-            {...form.register('increment')}
-          />
-        </label>
-
-        {form.formState.errors.increment?.message && (
-          <div className="my-2 text-xs italic text-red-500">{form.formState.errors.increment?.message}</div>
-        )}
-      </div>
-
-      <div className="mt-2">
-        <button
-          className="rounded bg-blue-500 px-5 py-1 font-bold text-white hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300/50 disabled:pointer-events-none disabled:opacity-50"
-          type="submit"
-          disabled={form.formState.isSubmitting}
-        >
-          {t('button_increment')}
-        </button>
-      </div>
-    </form>
-  );
-};

src/components/CurrentCount.tsx

@@ -1,26 +0,0 @@
-import { db } from '@/libs/DB';
-import { logger } from '@/libs/Logger';
-import { counterSchema } from '@/models/Schema';
-import { eq } from 'drizzle-orm';
-import { getTranslations } from 'next-intl/server';
-import { headers } from 'next/headers';
-
-export const CurrentCount = async () => {
-  const t = await getTranslations('CurrentCount');
-
-  // `x-e2e-random-id` is used for end-to-end testing to make isolated requests
-  // The default value is 0 when there is no `x-e2e-random-id` header
-  const id = Number((await headers()).get('x-e2e-random-id')) ?? 0;
-  const result = await db.query.counterSchema.findMany({
-    where: eq(counterSchema.id, id),
-  });
-  const count = result[0]?.count ?? 0;
-
-  logger.info('Counter fetched successfully');
-
-  return (
-    <div>
-      {t('count', { count })}
-    </div>
-  );
-};

src/components/DemoBadge.tsx

@@ -1,12 +0,0 @@
-export const DemoBadge = () => (
-  <div className="fixed bottom-0 right-20 z-10">
-    <a
-      href="https://github.com/ixartz/Next-js-Boilerplate"
-    >
-      <div className="rounded-md bg-gray-900 px-3 py-2 font-semibold text-gray-100">
-        <span className="text-gray-500">Demo of</span>
-        {` Next.js Boilerplate`}
-      </div>
-    </a>
-  </div>
-);

src/components/DemoBanner.tsx

@@ -1,9 +0,0 @@
-import Link from 'next/link';
-
-export const DemoBanner = () => (
-  <div className="sticky top-0 z-50 bg-gray-900 p-4 text-center text-lg font-semibold text-gray-100 [&_a:hover]:text-indigo-500 [&_a]:text-fuchsia-500">
-    Live Demo of Next.js Boilerplate -
-    {' '}
-    <Link href="/sign-up">Explore the Authentication</Link>
-  </div>
-);

src/components/Hello.tsx

@@ -1,30 +0,0 @@
-import { currentUser } from '@clerk/nextjs/server';
-import { getTranslations } from 'next-intl/server';
-import { Sponsors } from './Sponsors';
-
-export const Hello = async () => {
-  const t = await getTranslations('Dashboard');
-  const user = await currentUser();
-
-  return (
-    <>
-      <p>
-        {`👋 `}
-        {t('hello_message', { email: user?.emailAddresses[0]?.emailAddress })}
-      </p>
-      <p>
-        {t.rich('alternative_message', {
-          url: () => (
-            <a
-              className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-              href="https://nextjs-boilerplate.com/pro-saas-starter-kit"
-            >
-              Next.js Boilerplate SaaS
-            </a>
-          ),
-        })}
-      </p>
-      <Sponsors />
-    </>
-  );
-};

src/components/LocaleSwitcher.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import type { ChangeEventHandler } from 'react';
-import { routing, usePathname } from '@/libs/i18nNavigation';
-import { useLocale } from 'next-intl';
-import { useRouter } from 'next/navigation';
-
-export const LocaleSwitcher = () => {
-  const router = useRouter();
-  const pathname = usePathname();
-  const locale = useLocale();
-
-  const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
-    router.push(`/${event.target.value}${pathname}`);
-    router.refresh();
-  };
-
-  return (
-    <select
-      defaultValue={locale}
-      onChange={handleChange}
-      className="border border-gray-300 font-medium focus:outline-none focus-visible:ring"
-      aria-label="lang-switcher"
-    >
-      {routing.locales.map(elt => (
-        <option key={elt} value={elt}>
-          {elt.toUpperCase()}
-        </option>
-      ))}
-    </select>
-  );
-};

src/components/Navbar.tsx

@@ -0,0 +1,44 @@
+'use client';
+import { Button, Input } from '@/components/atoms';
+import { Search, Settings } from 'lucide-react';
+import Link from 'next/link';
+
+export function Navbar() {
+  return (
+    <nav className="fixed top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-14 items-center">
+        <div className="mr-4 flex items-center gap-2">
+          <span className="text-xl">👋</span>
+          <Link href="/" className="font-semibold">
+            Jan
+          </Link>
+        </div>
+
+        <div className="flex items-center gap-6 text-sm">
+          <Link href="/documentation" className="hover:text-foreground/80">
+            Documentation
+          </Link>
+          <Link href="/changelog" className="hover:text-foreground/80">
+            Changelog
+          </Link>
+          <Link href="/about" className="hover:text-foreground/80">
+            About
+          </Link>
+        </div>
+
+        <div className="ml-auto flex items-center gap-4">
+          <div className="relative w-64">
+            <Search className="absolute left-2 top-2.5 size-4 text-muted-foreground" />
+            <Input placeholder="Search documentation..." className="pl-8" />
+          </div>
+          <Link href="/blog" className="hover:text-foreground/80">
+            Blog
+          </Link>
+          <Button variant="ghost" size="icon">
+            <Settings className="size-5" />
+          </Button>
+        </div>
+      </div>
+    </nav>
+  );
+}

src/components/Sponsors.tsx

@@ -1,115 +0,0 @@
-/* eslint-disable react-dom/no-unsafe-target-blank */
-import Image from 'next/image';
-
-export const Sponsors = () => (
-  <table className="border-collapse">
-    <tbody>
-      <tr className="h-56">
-        <td className="border-2 border-gray-300 p-3">
-          <a
-            href="https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate"
-            target="_blank"
-            rel="noopener"
-          >
-            <Image
-              src="/assets/images/clerk-logo-dark.png"
-              alt="Clerk – Authentication & User Management for Next.js"
-              width={260}
-              height={224}
-            />
-          </a>
-        </td>
-        <td className="border-2 border-gray-300 p-3">
-          <a href="https://l.crowdin.com/next-js" target="_blank" rel="noopener">
-            <Image
-              src="/assets/images/crowdin-dark.png"
-              alt="Crowdin"
-              width={260}
-              height={224}
-            />
-          </a>
-        </td>
-        <td className="border-2 border-gray-300 p-3">
-          <a
-            href="https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
-            target="_blank"
-            rel="noopener"
-          >
-            <Image
-              src="/assets/images/sentry-dark.png"
-              alt="Sentry"
-              width={260}
-              height={224}
-            />
-          </a>
-        </td>
-      </tr>
-      <tr className="h-56">
-        <td className="border-2 border-gray-300 p-3">
-          <a href="https://launch.arcjet.com/Q6eLbRE">
-            <Image
-              src="/assets/images/arcjet-light.svg"
-              alt="Arcjet"
-              width={260}
-              height={224}
-            />
-          </a>
-        </td>
-        <td className="border-2 border-gray-300 p-3">
-          <a
-            href="https://posthog.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate"
-            target="_blank"
-            rel="noopener"
-          >
-            <Image
-              src="https://posthog.com/brand/posthog-logo.svg"
-              alt="PostHog"
-              width={260}
-              height={224}
-            />
-          </a>
-        </td>
-        <td className="border-2 border-gray-300 p-3">
-          <a
-            href="https://betterstack.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate"
-            target="_blank"
-            rel="noopener"
-          >
-            <Image
-              src="/assets/images/better-stack-dark.png"
-              alt="Better Stack"
-              width={260}
-              height={224}
-            />
-          </a>
-        </td>
-      </tr>
-      <tr className="h-56">
-        <td className="border-2 border-gray-300 p-3">
-          <a
-            href="https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate"
-            target="_blank"
-            rel="noopener"
-          >
-            <Image
-              src="/assets/images/checkly-logo-light.png"
-              alt="Checkly"
-              width={260}
-              height={224}
-            />
-          </a>
-        </td>
-        <td className="border-2 border-gray-300 p-3">
-          <a href="https://nextjs-boilerplate.com/pro-saas-starter-kit">
-            <Image
-              src="/assets/images/nextjs-boilerplate-saas.png"
-              alt="Next.js SaaS Boilerplate"
-              width={260}
-              height={224}
-            />
-          </a>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-);

src/components/atoms/Badge/index.tsx

@@ -0,0 +1,29 @@
+import type * as React from 'react';
+import { cn } from '@/utils/Helpers';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type BadgeProps = {} & React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { Badge, badgeVariants };

src/components/atoms/Button/index.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable react-refresh/only-export-components */
+import { cn } from '@/utils/Helpers';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ButtonHTMLAttributes, type FC, memo, type PropsWithChildren, type Ref } from 'react';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ButtonProps = {
+  className?: string;
+  ref?: Ref<HTMLButtonElement> ;
+} & PropsWithChildren & ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'>;
+
+const Button: FC<ButtonProps> = memo(({
+  className = '',
+  variant,
+  size,
+  children = null,
+  ref,
+  ...rest
+}) => {
+  return (
+    <button className={cn(buttonVariants({ variant, size, className }))} type="button" {...rest} ref={ref}>{children}</button>
+  );
+});
+
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

src/components/atoms/Card/index.tsx

@@ -0,0 +1,33 @@
+import { cn } from '@/utils/Helpers';
+import * as React from 'react';
+
+const Card = ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & { ref?: React.RefObject<HTMLDivElement> }) => (
+  <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...props} />
+);
+Card.displayName = 'Card';
+
+const CardHeader = ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & { ref: React.RefObject<HTMLDivElement> }) => (
+  <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = ({ ref, className, ...props }: React.HTMLAttributes<HTMLHeadingElement> & { ref: React.RefObject<HTMLParagraphElement> }) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = ({ ref, className, ...props }: React.HTMLAttributes<HTMLParagraphElement> & { ref: React.RefObject<HTMLParagraphElement> }) => (
+  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & { ref?: React.RefObject<HTMLDivElement> }) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />;
+CardContent.displayName = 'CardContent';
+
+const CardFooter = ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & { ref: React.RefObject<HTMLDivElement> }) => (
+  <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

src/components/atoms/Input/index.tsx

@@ -0,0 +1,29 @@
+import { cn } from '@/utils/Helpers';
+import { type FC, type InputHTMLAttributes, memo, type Ref } from 'react';
+
+type InputProps = {
+  className?: string;
+  placeholder?: string;
+  ref?: Ref<HTMLInputElement> ;
+} & InputHTMLAttributes<HTMLInputElement> & Omit<InputHTMLAttributes<HTMLInputElement>, 'className'>;
+
+const Input: FC<InputProps> = memo(({
+  className = '',
+  placeholder = '',
+  ref,
+  ...rest
+}) => {
+  const baseClassName = `flex h-9 w-full rounded-md border border-input 
+  bg-background px-3 py-1 text-sm shadow-sm transition-colors 
+  file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground 
+  focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring 
+  disabled:cursor-not-allowed disabled:opacity-50`;
+
+  return (
+    <input className={cn(baseClassName, className)} placeholder={placeholder} {...rest} ref={ref} />
+  );
+});
+
+Input.displayName = 'Input';
+
+export { Input };

src/components/atoms/index.ts

@@ -0,0 +1,4 @@
+export { Badge } from './Badge';
+export { Button } from './Button';
+export * from './Card';
+export { Input } from './Input';

src/components/homepage/AnnouncementBanner.tsx

@@ -0,0 +1,56 @@
+import { Badge, Button } from '@/components/atoms';
+import { ChevronDown, Download } from 'lucide-react';
+import Image from 'next/image';
+
+export function AnnouncementBanner() {
+  return (
+    <>
+      <div className="container flex flex-col items-center gap-4 text-center">
+        <Badge className="rounded-lg" variant="secondary">
+          NEW
+          {' '}
+          <span className="mx-1">+</span>
+          {' '}
+          v0.5.14 is now live on GitHub. Check it out!
+        </Badge>
+
+        <span className="text-4xl">❝</span>
+
+        <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
+          Chat with AI
+          <br />
+          without privacy concerns
+        </h1>
+
+        <p className="max-w-2xl leading-normal text-muted-foreground sm:text-xl sm:leading-8">
+          Jan is an open source ChatGPT-alternative that runs 100% offline.
+        </p>
+
+        <div className="space-y-4">
+          <Button className="h-11 px-8" size="lg">
+            <Download className="mr-2 size-4" />
+            Download for Windows
+            <ChevronDown className="ml-2 size-4" />
+          </Button>
+          <p className="text-xs text-muted-foreground">
+            <span className="font-semibold text-yellow-500">2.5M+</span>
+            {' '}
+            downloads | Free & Open Source
+          </p>
+        </div>
+      </div>
+
+      <div className="container">
+        <div className="relative mx-auto aspect-video max-w-5xl overflow-hidden rounded-xl border bg-background shadow-xl">
+          <Image
+            src="https://sjc.microlink.io/-ax0tIqUfnMYpO1Y6sFNuRcGN_Oe6cQwpzrnQR5q5pzkpfA29UGKZ228lDnpeQCpNANORBcNBmQgFoOtLn18vw.jpeg"
+            alt="Jan AI Interface"
+            fill
+            className="object-cover"
+            priority
+          />
+        </div>
+      </div>
+    </>
+  );
+}

src/components/homepage/CustomizationSection.tsx

@@ -0,0 +1,57 @@
+import { Badge, Card } from '@/components/atoms';
+import Image from 'next/image';
+
+export function CustomizationSection() {
+  return (
+    <section className="container space-y-16 py-24">
+      <div className="space-y-4 text-center">
+        <h2 className="font-heading text-4xl md:text-5xl lg:text-6xl">Highly Customizable</h2>
+        <p className="text-xl text-muted-foreground">Customize Jan to match your needs and preferences.</p>
+      </div>
+
+      <div className="grid gap-8 md:grid-cols-2">
+        {/* Assistants & Memory Card */}
+        <Card className="space-y-4 p-6">
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <h3 className="text-2xl font-semibold">Assistants & Memory</h3>
+              <Badge variant="secondary" className="bg-blue-100 text-blue-700 hover:bg-blue-100">
+                Coming Soon
+              </Badge>
+            </div>
+            <p className="text-muted-foreground">
+              Create personalized AI assistants that remember your conversations and execute specific tasks across your
+              systems.
+            </p>
+          </div>
+
+          <Image
+            src="https://jan.ai/assets/images/homepage/assistant-light.png"
+            alt="App Screenshot Feature"
+            width={800}
+            height={800}
+            className="object-contain"
+          />
+        </Card>
+
+        {/* Extensions Card */}
+        <Card className="space-y-4 p-6">
+          <div className="space-y-2">
+            <h3 className="text-2xl font-semibold">Extensions</h3>
+            <p className="text-muted-foreground">
+              Customize Jan with Extensions, that range from Cloud AI connectors, tools, data connectors.
+            </p>
+          </div>
+
+          <Image
+            src="https://jan.ai/assets/images/homepage/extension-light.png"
+            alt="App Screenshot Feature"
+            width={800}
+            height={800}
+            className="object-contain"
+          />
+        </Card>
+      </div>
+    </section>
+  );
+}

src/components/homepage/FeatureSection.tsx

@@ -0,0 +1,73 @@
+import { Badge } from '@/components/atoms';
+import { Cloud, FileText, Grid, MessageCircle, Server } from 'lucide-react';
+import Image from 'next/image';
+
+const features = [
+  {
+    number: '01',
+    title: 'Chat with AI',
+    description: 'Ask your questions, brainstorm, and learn from the AI running on your device to be more productive.',
+    icon: MessageCircle,
+  },
+  {
+    number: '02',
+    title: 'Model Hub',
+    description: 'Access and manage various AI models directly from your device.',
+    icon: Grid,
+  },
+  {
+    number: '03',
+    title: 'Connect to Cloud AIs',
+    description: 'Seamlessly integrate with cloud-based AI services when needed.',
+    icon: Cloud,
+  },
+  {
+    number: '04',
+    title: 'Local API Server',
+    description: 'Run your own API server locally for complete control and privacy.',
+    icon: Server,
+  },
+  {
+    number: '05',
+    title: 'Chat with your files',
+    description: 'Interact with your documents and files using natural language.',
+    icon: FileText,
+    experimental: true,
+  },
+];
+
+export function FeaturesSection() {
+  return (
+    <section className="container space-y-16 py-24">
+      <h2 className="font-heading text-4xl md:text-5xl lg:text-6xl">Features</h2>
+
+      <div className="grid items-start gap-8 lg:grid-cols-2">
+        <div className="space-y-8">
+          {features.map(feature => (
+            <div key={feature.number} className="flex items-center gap-4">
+              <div className="font-heading text-3xl text-muted-foreground/50">{feature.number}</div>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-xl font-semibold">{feature.title}</h3>
+                  {feature.experimental && (
+                    <Badge variant="secondary" className="text-xs">
+                      Experimental
+                    </Badge>
+                  )}
+                </div>
+                <p className="text-muted-foreground">{feature.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <Image
+          src="https://jan.ai/assets/images/homepage/features01.png"
+          alt="App Screenshot Feature"
+          width={800}
+          height={800}
+        />
+      </div>
+    </section>
+  );
+}

src/middleware.ts

@@ -1,55 +0,0 @@
-import type { NextFetchEvent, NextRequest } from 'next/server';
-import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
-import createMiddleware from 'next-intl/middleware';
-import { routing } from './libs/i18nNavigation';
-
-const intlMiddleware = createMiddleware(routing);
-
-const isProtectedRoute = createRouteMatcher([
-  '/dashboard(.*)',
-  '/:locale/dashboard(.*)',
-]);
-
-const isAuthPage = createRouteMatcher([
-  '/sign-in(.*)',
-  '/:locale/sign-in(.*)',
-  '/sign-up(.*)',
-  '/:locale/sign-up(.*)',
-]);
-
-export default function middleware(
-  request: NextRequest,
-  event: NextFetchEvent,
-) {
-  // Run Clerk middleware only when it's necessary
-  if (
-    isAuthPage(request) || isProtectedRoute(request)
-  ) {
-    return clerkMiddleware(async (auth, req) => {
-      if (isProtectedRoute(req)) {
-        const locale
-          = req.nextUrl.pathname.match(/(\/.*)\/dashboard/)?.at(1) ?? '';
-
-        const signInUrl = new URL(`${locale}/sign-in`, req.url);
-
-        await auth.protect({
-          // `unauthenticatedUrl` is needed to avoid error: "Unable to find `next-intl` locale because the middleware didn't run on this request"
-          unauthenticatedUrl: signInUrl.toString(),
-        });
-      }
-
-      return intlMiddleware(req);
-    })(request, event);
-  }
-
-  return intlMiddleware(request);
-}
-
-export const config = {
-  matcher: [
-    // Skip Next.js internals and all static files, unless found in search params
-    '/((?!_next|monitoring|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
-    // Always run for API routes
-    '/(api|trpc)(.*)',
-  ],
-};

src/styles/global.css

@@ -1,3 +1,73 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    /* Font */
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --font-heading: 'Cal Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+      sans-serif;
+
+    /* Colors */
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}

src/utils/Helpers.ts

@@ -1,4 +1,6 @@
 import { routing } from '@/libs/i18nNavigation';
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export const getBaseUrl = () => {
   if (process.env.NEXT_PUBLIC_APP_URL) {
@@ -26,3 +28,9 @@ export const getI18nPath = (url: string, locale: string) => {
 
   return `/${locale}${url}`;
 };
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export const isDevMode = process.env.NODE_ENV !== 'production';

tailwind.config.ts

@@ -1,9 +1,63 @@
 import type { Config } from 'tailwindcss';
 
-export default {
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+const config = {
+  darkMode: ['class'],
+  content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}'],
   theme: {
-    extend: {},
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      fontFamily: {
+        heading: ['var(--font-heading)', 'sans-serif'],
+      },
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
   },
   plugins: [],
 } satisfies Config;
+
+export default config;