diff --git a/apps/website-vue/.gitignore b/apps/website-vue/.gitignore
new file mode 100644
index 0000000..9d8ee03
--- /dev/null
+++ b/apps/website-vue/.gitignore
@@ -0,0 +1,7 @@
+node_modules/
+dist/
+dist-ssr/
+*.local
+.DS_Store
+.vite/
+*.log
diff --git a/apps/website-vue/PORTING_GUIDE.md b/apps/website-vue/PORTING_GUIDE.md
new file mode 100644
index 0000000..c64e848
--- /dev/null
+++ b/apps/website-vue/PORTING_GUIDE.md
@@ -0,0 +1,79 @@
+# React → Vue port conventions (gigafibre website)
+
+We are porting the React site at `../website` (React 18 + Vite + Tailwind 3 + shadcn/ui + Radix)
+to this Vue 3 app (`../website-vue`, Vue 3 `<script setup>` + Vite + Tailwind 3 + shadcn-vue + reka-ui).
+**Goal: pixel-identical output.** The Tailwind config, CSS tokens, fonts and custom utilities are already
+copied verbatim, so **keep the exact same Tailwind class strings** on every element.
+
+## The golden rule
+Copy the JSX markup and its `className` strings **unchanged** into the Vue `<template>` (rename `className`→`class`).
+The visual result comes from those classes; do not "improve" or restructure them.
+
+## Mechanical mappings
+| React | Vue |
+|---|---|
+| `className="..."` | `class="..."` |
+| `className={cn(a, b)}` | `:class="cn(a, b)"` (import `cn` from `@/lib/utils`) |
+| `{expr}` in JSX text | `{{ expr }}` |
+| `{items.map(x => <Card .../>)}` | `<Card v-for="x in items" :key="x.id" ... />` |
+| `{cond && <X/>}` | `<X v-if="cond" />` |
+| `{cond ? <A/> : <B/>}` | `<A v-if="cond" /> <B v-else />` |
+| `onClick={fn}` | `@click="fn"` |
+| `onChange={e => setX(e.target.value)}` | `v-model="x"` on inputs |
+| `useState(v)` | `const x = ref(v)` (`.value` in script, bare in template) |
+| `useEffect(fn, [])` | `onMounted(fn)` |
+| `useEffect(fn, [dep])` | `watch(() => dep, fn)` |
+| `<Link to="/x">` (react-router) | `<RouterLink to="/x">` |
+| `useNavigate()` → `navigate("/x")` | `const router = useRouter(); router.push("/x")` |
+| `useLocation()` | `const route = useRoute()` |
+| lucide-react `import { Wifi } from "lucide-react"` | `import { Wifi } from "lucide-vue-next"` (same icon names) |
+| `<Icon className="h-5 w-5" />` | `<Icon class="h-5 w-5" />` |
+| framer-motion `<motion.div initial=... animate=... />` | `<div v-motion :initial="..." :enter="...">` (from `@vueuse/motion`); `whileInView` → `:visible-once="..."` |
+| `AnimatePresence` | usually a `<Transition>` or just `v-if` — keep it simple, match the visual |
+| Toasts: `useToast()` / `toast(...)` (shadcn) | `import { useToast } from "@/components/ui/toast/use-toast"` (same API) |
+| `sonner` `toast()` | `import { toast } from "vue-sonner"` |
+| react-hook-form + zod | `vee-validate` + `zod` via `@/components/ui/form`, OR for simple cases just `ref`s + manual zod `.safeParse` |
+
+## shadcn-vue components
+Import from the folder index, e.g. `import { Button } from "@/components/ui/button"`,
+`import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"`.
+Component/prop names and the `variant`/`size` props match shadcn/ui. Slots replace React children.
+`asChild` exists in reka-ui too. Available under `src/components/ui/`: accordion, alert, alert-dialog,
+aspect-ratio, avatar, badge, breadcrumb, button, calendar, card, carousel, checkbox, collapsible, command,
+context-menu, dialog, drawer, dropdown-menu, form, hover-card, input, label, menubar, navigation-menu,
+pagination, popover, progress, radio-group, resizable, scroll-area, select, separator, sheet, skeleton,
+slider, sonner, switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip.
+
+## Structure of a ported page
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { RouterLink } from "vue-router";
+import { Button } from "@/components/ui/button";
+import { Wifi } from "lucide-vue-next";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+// ...page-local data/state
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+    <!-- exact JSX markup, className→class -->
+    <Footer />
+  </div>
+</template>
+```
+
+## Do / Don't
+- DO keep every Tailwind class string identical to the React source.
+- DO keep the same DOM structure, headings, copy (French text) and image URLs.
+- DO reuse `Header`, `Footer`, `BusinessPageLayout`, `GlassCard`, `Logo` from `@/components/...`.
+- DON'T add new colors, spacing, or restyle. DON'T invent content.
+- DON'T pull in new deps; everything needed is installed.
+- If a React file uses `input-otp` (not in the shadcn-vue registry), use a plain grouped `Input` set or note it.
+- If something can't be perfectly matched, leave a `<!-- TODO(port): ... -->` and keep the closest visual.
+
+## Assets
+Static files live in `public/` and resolve under `/next/...` (Vite `base: '/next/'`). Copy any images the
+React app references from `../website/public` into `./public` (same relative paths).
diff --git a/apps/website-vue/components.json b/apps/website-vue/components.json
new file mode 100644
index 0000000..ccace39
--- /dev/null
+++ b/apps/website-vue/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "composables": "@/composables",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/apps/website-vue/env.d.ts b/apps/website-vue/env.d.ts
new file mode 100644
index 0000000..fc81239
--- /dev/null
+++ b/apps/website-vue/env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/apps/website-vue/index.html b/apps/website-vue/index.html
new file mode 100644
index 0000000..53d8750
--- /dev/null
+++ b/apps/website-vue/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Aperçu /next : ne PAS indexer tant que la refonte n'a pas remplacé le site à la racine (évite le duplicate-content SEO). -->
+    <meta name="robots" content="noindex, nofollow" />
+    <link rel="icon" href="/next/favicon.ico" type="image/x-icon" />
+    <title>Targo</title>
+    <meta name="description" content="TARGO – Internet fibre optique, télévision HD et téléphonie résidentielle. 100% fibre locale au Québec." />
+    <meta name="author" content="TARGO Communications" />
+
+    <meta property="og:title" content="TARGO – Internet fibre optique locale" />
+    <meta property="og:description" content="Internet fibre optique, télévision HD et téléphonie résidentielle. 100% fibre locale au Québec." />
+    <meta property="og:type" content="website" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/website-vue/package-lock.json b/apps/website-vue/package-lock.json
new file mode 100644
index 0000000..5f12808
--- /dev/null
+++ b/apps/website-vue/package-lock.json
@@ -0,0 +1,4138 @@
+{
+  "name": "gigafibre-website-vue",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "gigafibre-website-vue",
+      "version": "0.0.0",
+      "dependencies": {
+        "@lucide/vue": "^1.23.0",
+        "@supabase/supabase-js": "^2.110.0",
+        "@tanstack/vue-query": "^5.101.2",
+        "@vee-validate/zod": "^4.15.1",
+        "@vueuse/core": "^12.8.2",
+        "@vueuse/motion": "^3.0.3",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "embla-carousel-vue": "^8.6.0",
+        "fflate": "^0.8.3",
+        "html2pdf.js": "^0.10.3",
+        "lucide-vue-next": "^0.462.0",
+        "reka-ui": "^2.10.1",
+        "tailwind-merge": "^2.6.0",
+        "vaul-vue": "^0.4.1",
+        "vee-validate": "^4.15.1",
+        "vue": "^3.5.13",
+        "vue-router": "^4.5.0",
+        "vue-sonner": "^1.3.2",
+        "zod": "^3.25.76"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^5.2.1",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.49",
+        "tailwindcss": "^3.4.17",
+        "tailwindcss-animate": "^1.0.7",
+        "typescript": "^5.7.2",
+        "vite": "^5.4.11",
+        "vue-tsc": "^2.1.10"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.11.tgz",
+      "integrity": "sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.6",
+        "@floating-ui/utils": "^0.2.11",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@internationalized/date": {
+      "version": "3.12.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.2.tgz",
+      "integrity": "sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.7.tgz",
+      "integrity": "sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@lucide/vue": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/@lucide/vue/-/vue-1.23.0.tgz",
+      "integrity": "sha512-9SIYeY5K+R1iv8F8JUKMGSL7Pck/86BJ8djtZz/lnYsoHtKFUj1H2z6+PvKnC/8blZ8tqTDeDXAoTKobuX80hg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nuxt/kit": {
+      "version": "3.21.8",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.21.8.tgz",
+      "integrity": "sha512-kg63DUPY5AHPn+9XM7u8rYcdWHXjzwfUscgRDuiC5YUciQ+xdLRhdwXelYFxEAx2nxJHossliiQXbMm/Fleivw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "c12": "^3.3.4",
+        "consola": "^3.4.2",
+        "defu": "^6.1.7",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.8",
+        "ignore": "^7.0.5",
+        "jiti": "^2.7.0",
+        "klona": "^2.0.6",
+        "knitwork": "^1.3.0",
+        "mlly": "^1.8.2",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.1",
+        "rc9": "^3.0.1",
+        "scule": "^1.3.0",
+        "semver": "^7.8.0",
+        "tinyglobby": "^0.2.16",
+        "ufo": "^1.6.4",
+        "unctx": "^2.5.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.2.tgz",
+      "integrity": "sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.2.tgz",
+      "integrity": "sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.2.tgz",
+      "integrity": "sha512-v39RCCvj4He82I9sFmk+M1VZ0PLM9sfsLVikjfx2hYBNALhrrOR2D3JjQA6AhlaSOgcR+RzrKY7e1+bT6SUO/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.2.tgz",
+      "integrity": "sha512-yl0y2vq3S3lHeuXhEdss6TWfKW8vkujImO12tn4ZkG/4oghr09LvdYm2RElVjokTQiUvDUGXLGsYeLqUMCKpGA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.2.tgz",
+      "integrity": "sha512-tT4pvt4qXD+vEoezupCWi+a1F0vvDiksiHc+PxRlYTOH1I6/X4id9jPxTP+Fg+545euaFT1jJVs4CEdHZAU1vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.2.tgz",
+      "integrity": "sha512-6nU5F2wCW+qvCBhTn1pdIU3bzsIoF7EUwsCDRxilWGprQR6yd508YnH9+OKFCwpfS8pjZqDUmnCAr7exax0XCg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.2.tgz",
+      "integrity": "sha512-n1GJHPOvpIfhi3TmrCeh6S6URt9BFCt0KQE3qvexyGCTAKpR4Lg+eWvNZEqu7epxwus/8ElT3hacYEucm49SZg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.2.tgz",
+      "integrity": "sha512-JqgflS8wEB+UXV/vS1RpRbifGBeN4D5lz8D8oOFbFZw4vedvdOgCFAjfBmIMdW3yL10XpQQ0Ambepw6MXrhOnA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.2.tgz",
+      "integrity": "sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.2.tgz",
+      "integrity": "sha512-HVu2bp0zhvJ8xHEV9+UUs7S90VadmBSY3LcIMvozbPo4AuMGDWlz3ymHLHZPX4hR67TKTt8Qp5PJ5RBg/i+RMQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.2.tgz",
+      "integrity": "sha512-mQqqAV8QaoSgr9I2fKDLY2BAVvmKjWoGiu/cSYQonsLvtqwEn1E4QYfnCOcp5zoEqNhsDYin1s6jx/VJmrxlZg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.2.tgz",
+      "integrity": "sha512-IxKLoxCQ2IWi6bT2akyDUBGsOImDKB+sPp4EsTmwFQ/fMwpCKm8uLSSgP/Kx/QYUgKis6SEZ5/Nlhup0DIA0PQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.2.tgz",
+      "integrity": "sha512-Mk5ha2RQSgyFfmYYLkBpPnUk8D8FriBxesO1u9O75X0mHgXL1UQcH5Itl2lurWL2tj0RxV9b9tJgipac0hRY9A==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.2.tgz",
+      "integrity": "sha512-CjvEnqJL/0/TQ3TXX3OPIJ/kmBellrWd4heXUmHeJlTnmwjKpSJzoehLaL6Xk0ZnMHBu9dZuFADNOrtjF4v+2w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.2.tgz",
+      "integrity": "sha512-1SiZbzwdkaDURsew/tSOrooKiYy7EQGT6m8ufavAi9NEyQb/6VuIxFXAL1fqa4iZe3g4NbNk4P7J32z2tw5Mgg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.2.tgz",
+      "integrity": "sha512-nQts12zJ3NQRoE6uYljOH89v7szzLDvG2JD/vsX+vGXU8w/At1GowTZ5/7qeFQ8m7L55rpR8Okugnuo5bgjy2Q==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.2.tgz",
+      "integrity": "sha512-E9/ll019jhPIJgpzfZoIkBGhcz+kKNgVWYRY0zr9srBdPPFVpvOKW8VaJKUbeK+eZXyQF9ltME+Kk6affeaPgg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.2.tgz",
+      "integrity": "sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.2.tgz",
+      "integrity": "sha512-uNN83XxQrRAh/w0/pmAfibcwyb6YWt4gP+dpnQKPVJshAloQ785ii8CT8ZCIxkGg9opVsvAlGhFitSm6D1Jjpg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.2.tgz",
+      "integrity": "sha512-srjEIxSH3LRnJN6THczDHWQplqEMFiAJrTab0msUryh9kwNpkICf3Ea6q6MN/2cZwRFUNx5w+h6Hpi4QuHS6Zg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.2.tgz",
+      "integrity": "sha512-8hOJnxgbyObnCm5AlRA3A931xX19xq80RjVTKgJOvEKWqJruP/Uf12IbAOaDjjEXYRewwHLfmF0YRIdK3OwKWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.2.tgz",
+      "integrity": "sha512-mmF4AY1i0hG/bLWUctUq59gtmgaSIRa3cu/A3JFRp/sCNEme2bgDEiDS22P9FbnJB8NJNF4jPJiSP5RHQpUTDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.2.tgz",
+      "integrity": "sha512-DZgkknc6jhHrk46V25vbAM0zZkyP0nSDkJB8/dRkLTxv470dOmWDqGoEJl/9A0dFfS7yE3REOwNDxpHwSLSt0Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.2.tgz",
+      "integrity": "sha512-T6xr6ucWSFto+VGajA8YH26LdpHRuP4YLHEKAtCWvJDOlnmWcDZVCI2Jmjr+IFHDlt2zRaTAKE4tfjTaWLgJBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.2.tgz",
+      "integrity": "sha512-BfzEnDJOt9T8M989/lA37EcJgat01wLRnoi5dQf3QzOH7jzpqTAzdDbVfRljVr5r+jzKqpbHeyOfAaXxAd0PAA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.110.0",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.110.0.tgz",
+      "integrity": "sha512-Mi288WCTp6wxMFCOu/UgzgHEXODjdl2uVTLqK11eanzGZaldU3RyP8Am+ZbNuVzFP+5+iOvppxzv7N5Ym84xTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/@supabase/auth-js/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.110.0",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.110.0.tgz",
+      "integrity": "sha512-Fde5wlY8ZZy+9yqrWlQHo8MacSyUBArBEtN2boB4thJQigPnQD/cc61qZN0n3I1L0gwhWtHYwIMnOBKxSvF6Hw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/@supabase/functions-js/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/@supabase/phoenix": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@supabase/phoenix/-/phoenix-0.4.4.tgz",
+      "integrity": "sha512-Gt0pqoXuIqX/8dvG0OKp/wMCobXNH3klNbUPBNyOfN0YA1IswrM3HyWFMOPk1Jy+BRaIyDPcFx4jLBwHNmlyfQ==",
+      "license": "MIT"
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.110.0",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.110.0.tgz",
+      "integrity": "sha512-ZbC1QZL3jcvBUfVKjJbgRM27G4Mg3Zzqdm44m5pJafe1e52Cli793EOnwQucomBAGEUDd03Nzaf7XV3ji/XexQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.110.0",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.110.0.tgz",
+      "integrity": "sha512-Wn2AWpneZuDFTkp/65tqctvoh+3JvyTjMam8sTMqVWy5BgkU8zAvFwilPYPPPhkINeKF8NAJKP7FclJ2iGCUMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/phoenix": "0.4.4",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/@supabase/realtime-js/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.110.0",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.110.0.tgz",
+      "integrity": "sha512-71+gU3HrhiylAhftY6FmO5PPdcsScnVcS766CVD+vTYK9qTDLbrx8FhgBYbqGm3iV/wkTfzrNJfjGsMeFRkJRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "iceberg-js": "^0.8.1",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/@supabase/storage-js/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.110.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.110.0.tgz",
+      "integrity": "sha512-8yI84VJiEVW4zxZpLUmxXmjzQ7O2St9X/ymzlBETDHTURPWG3LmvbSiibq+7dqAJmyoUfxZnSfXeM4HCM8s4XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.110.0",
+        "@supabase/functions-js": "2.110.0",
+        "@supabase/postgrest-js": "2.110.0",
+        "@supabase/realtime-js": "2.110.0",
+        "@supabase/storage-js": "2.110.0"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@swc/helpers/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/@tanstack/match-sorter-utils": {
+      "version": "8.19.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
+      "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
+      "license": "MIT",
+      "dependencies": {
+        "remove-accents": "0.5.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.101.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.2.tgz",
+      "integrity": "sha512-hH5MLoJhF7KaIGd7q3xTXGXvslI+GYlM1Z/35aSHHWaCJWB7XvTSHYuV3eM7tw+aE0mT/xMro4M4Q9rCGHT0lw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.17.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.17.3.tgz",
+      "integrity": "sha512-8Np/TFELpI0ySuJoVmjvOrQYXH/8sTX0Biv9szhFhY39xOdAAY+smrMxjxOum/ux3eM8MUJQsEJ0/R0UpvC8dw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-query": {
+      "version": "5.101.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.101.2.tgz",
+      "integrity": "sha512-nFXKNK4dI/PnKNejyIkQmmobBsJWWXTPcpjPvkgFLkpFPz9DcmqIiKIAF2Pa7MZCipH62/+bt2sxEIA0wNEeOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/match-sorter-utils": "^8.19.4",
+        "@tanstack/query-core": "5.101.2",
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.2",
+        "vue": "^2.6.0 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tanstack/vue-query/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.13.31",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.31.tgz",
+      "integrity": "sha512-wZMEoSf852jQqaf3Ika1J7PiBae6341LNy/2CxmIyn0XKDQXMuK41wVX+xp6G0yx8jyR95Ef+Tdr13DK7mbJtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.17.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
+    "node_modules/@vee-validate/zod": {
+      "version": "4.15.1",
+      "resolved": "https://registry.npmjs.org/@vee-validate/zod/-/zod-4.15.1.tgz",
+      "integrity": "sha512-329Z4TDBE5Vx0FdbA8S4eR9iGCFFUNGbxjpQ20ff5b5wGueScjocUIx9JHPa79LTG06RnlUR4XogQsjN4tecKA==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^4.8.3",
+        "vee-validate": "4.15.1"
+      },
+      "peerDependencies": {
+        "zod": "^3.24.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
+      "integrity": "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.15.tgz",
+      "integrity": "sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.15"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.15.tgz",
+      "integrity": "sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.15.tgz",
+      "integrity": "sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.15",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.39.tgz",
+      "integrity": "sha512-16KBTEXAJCpDr0mwlw+AZyhu8iyC7R3S2vBwsI7QnWJU6X3WKc9VKeNEZpiMdZ569qWhz9574L3vV55qRL0Vtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@vue/shared": "3.5.39",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.39.tgz",
+      "integrity": "sha512-oQPigALqYbNxTNPvNgSOe+czwVExfbVF02lz8jP0S3AXJiu3jxYDygNUiqSep4ezzW8XgnubqH63My2A7JR/vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.39",
+        "@vue/shared": "3.5.39"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.39.tgz",
+      "integrity": "sha512-d0ki86iOyN8LoZPBmk5SJWNwHP19CnDDCfuo//+2WJa2g5Ke0Jay983PIBIcSSzldC68I8DrD5GrHV3OSDfodg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@vue/compiler-core": "3.5.39",
+        "@vue/compiler-dom": "3.5.39",
+        "@vue/compiler-ssr": "3.5.39",
+        "@vue/shared": "3.5.39",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.15",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.39.tgz",
+      "integrity": "sha512-Ce7/wvwMHai74bdszfXExdazFigYnlF9zgCmEQUcM1j0fOymlouZ7XilTYNo8oUjhlnjYOZbGrcYKuqjz89Ucw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.39",
+        "@vue/shared": "3.5.39"
+      }
+    },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.10.tgz",
+      "integrity": "sha512-3WNi2Kq4tbpVbmhml7RiphmAt0279oh3fKNeWMQIrltfX8Q91b4i5PL8DtyNKdwmcsGrV4fg+erwWOmD05CLIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.10",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-kit/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.10.tgz",
+      "integrity": "sha512-wOPslzB8vTvpxwdaOcR2qAbwmuSP0L+rhpoC6Cf56V3Jip+HWb7PQQXOUPgBNQARpXsbQX/+mvi8kKucmBGRwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
+    "node_modules/@vue/language-core": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.12.tgz",
+      "integrity": "sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.15",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^1.0.3",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.39.tgz",
+      "integrity": "sha512-TpsuBJ9gGlZa5d23XcM2y8EXanz9dZeVDQBXRwzy46ItgvM+rWpzs+UVM0wcRLxGvcav0HE5jz2gNL53xlRAog==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.39"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.39.tgz",
+      "integrity": "sha512-9GLtNyRvPAUMbX+7ono0RC2j0guo2LXVi8LvcmAooImACUKm0oFf0jjwbX8/H0AE/t1nxhAkn8RSl9PMCzzxZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.39",
+        "@vue/shared": "3.5.39"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.39.tgz",
+      "integrity": "sha512-7Y6aAGboKcXAZ3ECuUy7RrS5yy2r47dhTp2SKaJmYxjopImaVFaNa5Ne66NwGovsrxVAl5S5rwc7m22UG7Lmww==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.39",
+        "@vue/runtime-core": "3.5.39",
+        "@vue/shared": "3.5.39",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.39.tgz",
+      "integrity": "sha512-yZSakiAGw85rZfG7UM8akMnIF+FmeiNk47uvHf2nVBBSe+dIKUhZuZq9+XgJhbV3nS5Z4ALH23/MpXofW+mbcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.39",
+        "@vue/shared": "3.5.39"
+      },
+      "peerDependencies": {
+        "vue": "3.5.39"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.39.tgz",
+      "integrity": "sha512-l1rrBtBfTnmxvtsvdQDXltUUy8S1Y+ZaqdfUzmAnJkTd8Z8rv5v/ytW+TKiqEOWyHPoqtPlNFSs0lhRmYVSHVA==",
+      "license": "MIT"
+    },
+    "node_modules/@vueuse/core": {
+      "version": "12.8.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.8.2.tgz",
+      "integrity": "sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "12.8.2",
+        "@vueuse/shared": "12.8.2",
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "12.8.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.8.2.tgz",
+      "integrity": "sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/motion": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@vueuse/motion/-/motion-3.0.3.tgz",
+      "integrity": "sha512-4B+ITsxCI9cojikvrpaJcLXyq0spj3sdlzXjzesWdMRd99hhtFI6OJ/1JsqwtF73YooLe0hUn/xDR6qCtmn5GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vueuse/core": "^13.0.0",
+        "@vueuse/shared": "^13.0.0",
+        "defu": "^6.1.4",
+        "framesync": "^6.1.2",
+        "popmotion": "^11.0.5",
+        "style-value-types": "^5.1.2"
+      },
+      "optionalDependencies": {
+        "@nuxt/kit": "^3.13.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
+    "node_modules/@vueuse/motion/node_modules/@vueuse/core": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.9.0.tgz",
+      "integrity": "sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.9.0",
+        "@vueuse/shared": "13.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/motion/node_modules/@vueuse/metadata": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.9.0.tgz",
+      "integrity": "sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/motion/node_modules/@vueuse/shared": {
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.9.0.tgz",
+      "integrity": "sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "12.8.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.8.2.tgz",
+      "integrity": "sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
+      "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/alien-signals": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-1.0.13.tgz",
+      "integrity": "sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.5.2",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.2.tgz",
+      "integrity": "sha512-rD5t5DwOjJdmSORcTq64j8MawTC+tbQ+HHqjR4NDumamy/ambn1UJrlKL+KdwujWxMkFjPM3pPHOEA9tl4767Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.4",
+        "caniuse-lite": "^1.0.30001799",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.42",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.42.tgz",
+      "integrity": "sha512-c/jurFrDLyui7o1J86yLkRu4LMsTYcBohveus7/I2Hzdn9KIP2bdJPTue/lR1KH46enoPbD77GKeSYNdyPoD3Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
+      "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.5",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.5.tgz",
+      "integrity": "sha512-Cu2E6QejHWzuDMTkuwgpABFgDfZrXLQq5V13YOACZx4mFAG4IwGTbTfHPMr4WtxlHoXSM8FIuRwYYCz5XiabaQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.42",
+        "caniuse-lite": "^1.0.30001800",
+        "electron-to-chromium": "^1.5.387",
+        "node-releases": "^2.0.50",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/c12": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.4.tgz",
+      "integrity": "sha512-cM0ApFQSBXuourJejzwv/AuPRvAxordTyParRVcHjjtXirtkzM0uK2L9TTn9s0cXZbG7E55jCivRQzoxYmRAlA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "chokidar": "^5.0.0",
+        "confbox": "^0.2.4",
+        "defu": "^6.1.6",
+        "dotenv": "^17.3.1",
+        "exsolve": "^1.0.8",
+        "giget": "^3.2.0",
+        "jiti": "^2.6.1",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "perfect-debounce": "^2.1.0",
+        "pkg-types": "^2.3.0",
+        "rc9": "^3.0.1"
+      },
+      "peerDependencies": {
+        "magicast": "*"
+      },
+      "peerDependenciesMeta": {
+        "magicast": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001802",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001802.tgz",
+      "integrity": "sha512-vmv8ub2xwTNmljSKf82mtCk5JH7hC+YgzLj3P5zotvA0tPQ9016tdNNOG8WRca1IxOnhSsivB+J0z5FeE5LOUw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/citty": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
+      "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "consola": "^3.2.3"
+      }
+    },
+    "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==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/confbox": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/consola": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
+      "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/defu": {
+      "version": "6.1.7",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz",
+      "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
+      "license": "MIT"
+    },
+    "node_modules/destr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
+      "integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/dompurify": {
+      "version": "3.4.11",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.11.tgz",
+      "integrity": "sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
+      "integrity": "sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.387",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.387.tgz",
+      "integrity": "sha512-TaxwufTFDufvPEoXdhwVrA3UdFWBeWGkYoJ1K8ldF1xe6gKfth6iRNS5lTQ5JPNOHdGQm8PT1QYKUqFLCiUefQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/embla-carousel": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+      "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
+    "node_modules/embla-carousel-vue": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-vue/-/embla-carousel-vue-8.6.0.tgz",
+      "integrity": "sha512-v8UO5UsyLocZnu/LbfQA7Dn2QHuZKurJY93VUmZYP//QRWoCWOsionmvLLAlibkET3pGPs7++03VhJKbWD7vhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.37"
+      }
+    },
+    "node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/errx": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/errx/-/errx-0.1.0.tgz",
+      "integrity": "sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "license": "MIT"
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/exsolve": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.1.0.tgz",
+      "integrity": "sha512-D+42+T12DdIlJM3uepa55qGiL3sYdLBOxIl2ifQCzCHz4c7eiolaHsi3BIqEr7JxBzxv2pYZQX9kw16ziMcEmw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "license": "MIT"
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/framesync": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz",
+      "integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.4.0"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/giget": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-3.3.0.tgz",
+      "integrity": "sha512-gzi2D96p+AMfDcmJHGDj3KJ9NRiwvlFAU5yfa3ROwWZmFUjX4P43x3BcyRaOMMLto1vUo7C+86+MFhYTl6Ryiw==",
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "giget": "dist/cli.mjs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "license": "MIT"
+    },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/html2pdf.js": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.10.3.tgz",
+      "integrity": "sha512-RcB1sh8rs5NT3jgbN5zvvTmkmZrsUrxpZ/RI8TMbvuReNZAdJZG5TMfA2TBP6ZXxpXlWf9NB/ciLXVb6W2LbRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es6-promise": "^4.2.5",
+        "html2canvas": "^1.0.0",
+        "jspdf": "^3.0.0"
+      }
+    },
+    "node_modules/iceberg-js": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
+      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/jspdf": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.4.tgz",
+      "integrity": "sha512-dc6oQ8y37rRcHn316s4ngz/nOjayLF/FFxBF4V9zamQKRqXxyiH1zagkCdktdWhtoQId5K20xt1lB90XzkB+hQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/knitwork": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/knitwork/-/knitwork-1.3.0.tgz",
+      "integrity": "sha512-4LqMNoONzR43B1W0ek0fhXMsDNW/zxa1NdFAVMY+k28pgZLovR4G3PB5MrpTxCy1QaZCqNoiaKPr5w5qZHfSNw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lucide-vue-next": {
+      "version": "0.462.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.462.0.tgz",
+      "integrity": "sha512-3H+GzhWA+qAW29EpJr/vCtPJK209zejoqsy6pCWSC6niPnywQeOA/yxl/WPQ38ODo3h7r0iGjpMKl8g/LS3+JA==",
+      "deprecated": "Package deprecated. Please use @lucide/vue instead.",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
+    "node_modules/mlly": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "acorn": "^8.16.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.3"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.15",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
+      "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.50",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.50.tgz",
+      "integrity": "sha512-J6l92tKHX6w8Jy5nO1Vuc01NoIiRGi/d6qBKVxh+IQ8Cr3b6HbVNfKiF8ZpFKufTwpwxMmce2W3iQZ861ZRyTg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/ohash": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
+      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
+      "license": "MIT"
+    },
+    "node_modules/pako": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.2.0.tgz",
+      "integrity": "sha512-zJq6RP/5q+TO2OpFV3FHzlPnFjmkb7Nc99a5SNjJE+uu/PkpChs+NIZSSzbBoD+6kjiISXjfYdwj1ZRQ81dz/w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "(MIT AND Zlib)"
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/perfect-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
+      "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
+      "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "confbox": "^0.2.4",
+        "exsolve": "^1.0.8",
+        "pathe": "^2.0.3"
+      }
+    },
+    "node_modules/popmotion": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz",
+      "integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==",
+      "license": "MIT",
+      "dependencies": {
+        "framesync": "6.1.2",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.1.2",
+        "tslib": "2.4.0"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.16",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz",
+      "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
+      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "node_modules/rc9": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-3.0.1.tgz",
+      "integrity": "sha512-gMDyleLWVE+i6Sgtc0QbbY6pEKqYs97NGi6isHQPqYlLemPoO8dxQ3uGi0f4NiP98c+jMW6cG1Kx9dDwfvqARQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "defu": "^6.1.6",
+        "destr": "^2.0.5"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/reka-ui": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.10.1.tgz",
+      "integrity": "sha512-drcOQ4rQtDYAcGCsyQBqQg8QQ+H3B+zDaMJU0h8KPEPMa7g9BHu3zcOi4OB39XJSWizceFoNO0Z9tctSGLOXqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.13",
+        "@floating-ui/vue": "^1.1.6",
+        "@internationalized/date": "^3.5.0",
+        "@internationalized/number": "^3.5.0",
+        "@tanstack/vue-virtual": "^3.12.0",
+        "@vueuse/core": "^14.1.0",
+        "@vueuse/shared": "^14.1.0",
+        "aria-hidden": "^1.2.4",
+        "defu": "^6.1.5",
+        "ohash": "^2.0.11"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/zernonia"
+      },
+      "peerDependencies": {
+        "vue": ">= 3.4.0"
+      }
+    },
+    "node_modules/reka-ui/node_modules/@vueuse/core": {
+      "version": "14.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.3.0.tgz",
+      "integrity": "sha512-aHfz47g0ZhMtTVHmIzMVpJy8ePhhOy68GY5bv110+5DVtZ+W7BsOx+m61UNQqfrWyPztIHIanWa3E2tib3NFIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.3.0",
+        "@vueuse/shared": "14.3.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/reka-ui/node_modules/@vueuse/metadata": {
+      "version": "14.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.3.0.tgz",
+      "integrity": "sha512-BwxmbAzwAVF50+MW57GXOUEV61nFBGnlBvrTqj49PqWJu3uw7hdu72ztXeZ33RdZtDY6kO+bfCAE1PCn88Tktw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/reka-ui/node_modules/@vueuse/shared": {
+      "version": "14.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.3.0.tgz",
+      "integrity": "sha512-bZpge9eSXwa4ToSiqJ7j6KRwhAsneMFoSz3LMWKQDkqimm3D/tbFlrklrs/IOqC8tEcYmXQZJ6N0UrjhBirVCg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/remove-accents": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz",
+      "integrity": "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.9"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.62.2",
+        "@rollup/rollup-android-arm64": "4.62.2",
+        "@rollup/rollup-darwin-arm64": "4.62.2",
+        "@rollup/rollup-darwin-x64": "4.62.2",
+        "@rollup/rollup-freebsd-arm64": "4.62.2",
+        "@rollup/rollup-freebsd-x64": "4.62.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.62.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.62.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.62.2",
+        "@rollup/rollup-linux-arm64-musl": "4.62.2",
+        "@rollup/rollup-linux-loong64-gnu": "4.62.2",
+        "@rollup/rollup-linux-loong64-musl": "4.62.2",
+        "@rollup/rollup-linux-ppc64-gnu": "4.62.2",
+        "@rollup/rollup-linux-ppc64-musl": "4.62.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.62.2",
+        "@rollup/rollup-linux-riscv64-musl": "4.62.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.62.2",
+        "@rollup/rollup-linux-x64-gnu": "4.62.2",
+        "@rollup/rollup-linux-x64-musl": "4.62.2",
+        "@rollup/rollup-openbsd-x64": "4.62.2",
+        "@rollup/rollup-openharmony-arm64": "4.62.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.62.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.62.2",
+        "@rollup/rollup-win32-x64-gnu": "4.62.2",
+        "@rollup/rollup-win32-x64-msvc": "4.62.2",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
+    "node_modules/style-value-types": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.1.2.tgz",
+      "integrity": "sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "2.4.0"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/tailwind-merge": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
+      "integrity": "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "license": "0BSD"
+    },
+    "node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/ufo": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/unctx": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/unctx/-/unctx-2.5.0.tgz",
+      "integrity": "sha512-p+Rz9x0R7X+CYDkT+Xg8/GhpcShTlU8n+cf9OtOEf7zEQsNcCZO1dPKNRDqvUTaq+P32PMMkxWHwfrxkqfqAYg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21",
+        "unplugin": "^2.3.11"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
+      "integrity": "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "acorn": "^8.15.0",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unplugin/node_modules/picomatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/untyped": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/untyped/-/untyped-2.0.0.tgz",
+      "integrity": "sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "citty": "^0.1.6",
+        "defu": "^6.1.4",
+        "jiti": "^2.4.2",
+        "knitwork": "^1.2.0",
+        "scule": "^1.3.0"
+      },
+      "bin": {
+        "untyped": "dist/cli.mjs"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
+    "node_modules/vaul-vue": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/vaul-vue/-/vaul-vue-0.4.1.tgz",
+      "integrity": "sha512-A6jOWOZX5yvyo1qMn7IveoWN91mJI5L3BUKsIwkg6qrTGgHs1Sb1JF/vyLJgnbN1rH4OOOxFbtqL9A46bOyGUQ==",
+      "dependencies": {
+        "@vueuse/core": "^10.8.0",
+        "reka-ui": "^2.0.0",
+        "vue": "^3.4.5"
+      },
+      "peerDependencies": {
+        "reka-ui": "^2.0.0",
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/vaul-vue/node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
+    "node_modules/vaul-vue/node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/vaul-vue/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul-vue/node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/vaul-vue/node_modules/@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/vaul-vue/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vee-validate": {
+      "version": "4.15.1",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.15.1.tgz",
+      "integrity": "sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.5.2",
+        "type-fest": "^4.8.3"
+      },
+      "peerDependencies": {
+        "vue": "^3.4.26"
+      }
+    },
+    "node_modules/vee-validate/node_modules/@vue/devtools-api": {
+      "version": "7.7.10",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.10.tgz",
+      "integrity": "sha512-KxtEpUOOpFz/qOGRrAwA36QF7DqIA+FXgCYit9mk9wjbaZt0sXOFz81ElOZtKA4HbWHUdwNjZHBFsFFyp5BZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.10"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue": {
+      "version": "3.5.39",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.39.tgz",
+      "integrity": "sha512-xmZCYabFGcirU8r0fTuvl/LICc1OU620rnqepaJDL/a141ZigkG7AyaxQLdqJ02ZRYzWe6YPaDHeQx7MfknQfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.39",
+        "@vue/compiler-sfc": "3.5.39",
+        "@vue/runtime-dom": "3.5.39",
+        "@vue/server-renderer": "3.5.39",
+        "@vue/shared": "3.5.39"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/vue-sonner": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/vue-sonner/-/vue-sonner-1.3.2.tgz",
+      "integrity": "sha512-UbZ48E9VIya3ToiRHAZUbodKute/z/M1iT8/3fU8zEbwBRE11AKuHikssv18LMk2gTTr6eMQT4qf6JoLHWuj/A==",
+      "license": "MIT"
+    },
+    "node_modules/vue-tsc": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.12.tgz",
+      "integrity": "sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "2.4.15",
+        "@vue/language-core": "2.2.12"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    }
+  }
+}
diff --git a/apps/website-vue/package.json b/apps/website-vue/package.json
new file mode 100644
index 0000000..d3b35e8
--- /dev/null
+++ b/apps/website-vue/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "gigafibre-website-vue",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@lucide/vue": "^1.23.0",
+    "@supabase/supabase-js": "^2.110.0",
+    "@tanstack/vue-query": "^5.101.2",
+    "@vee-validate/zod": "^4.15.1",
+    "@vueuse/core": "^12.8.2",
+    "@vueuse/motion": "^3.0.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-vue": "^8.6.0",
+    "fflate": "^0.8.3",
+    "html2pdf.js": "^0.10.3",
+    "lucide-vue-next": "^0.462.0",
+    "reka-ui": "^2.10.1",
+    "tailwind-merge": "^2.6.0",
+    "vaul-vue": "^0.4.1",
+    "vee-validate": "^4.15.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue-sonner": "^1.3.2",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vue-tsc": "^2.1.10"
+  }
+}
diff --git a/apps/website-vue/postcss.config.js b/apps/website-vue/postcss.config.js
new file mode 100644
index 0000000..2aa7205
--- /dev/null
+++ b/apps/website-vue/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/website-vue/public/favicon.ico b/apps/website-vue/public/favicon.ico
new file mode 100644
index 0000000..51f242f
Binary files /dev/null and b/apps/website-vue/public/favicon.ico differ
diff --git a/apps/website-vue/public/placeholder.svg b/apps/website-vue/public/placeholder.svg
new file mode 100644
index 0000000..e763910
--- /dev/null
+++ b/apps/website-vue/public/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/apps/website-vue/public/robots.txt b/apps/website-vue/public/robots.txt
new file mode 100644
index 0000000..6018e70
--- /dev/null
+++ b/apps/website-vue/public/robots.txt
@@ -0,0 +1,14 @@
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Twitterbot
+Allow: /
+
+User-agent: facebookexternalhit
+Allow: /
+
+User-agent: *
+Allow: /
diff --git a/apps/website-vue/src/App.vue b/apps/website-vue/src/App.vue
new file mode 100644
index 0000000..02cef26
--- /dev/null
+++ b/apps/website-vue/src/App.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// Miroir de App.tsx : TooltipProvider global + toasts (shadcn + sonner) + RouterView.
+// ScrollToTop est géré par le scrollBehavior du router.
+import { TooltipProvider } from "reka-ui";
+import { Toaster } from "@/components/ui/toast";
+import { Toaster as Sonner } from "@/components/ui/sonner";
+</script>
+
+<template>
+  <TooltipProvider>
+    <Toaster />
+    <Sonner />
+    <RouterView />
+  </TooltipProvider>
+</template>
diff --git a/apps/website-vue/src/assets/hero-family-3d.png b/apps/website-vue/src/assets/hero-family-3d.png
new file mode 100644
index 0000000..1abc36b
Binary files /dev/null and b/apps/website-vue/src/assets/hero-family-3d.png differ
diff --git a/apps/website-vue/src/assets/hero-family.jpg b/apps/website-vue/src/assets/hero-family.jpg
new file mode 100644
index 0000000..c689c30
Binary files /dev/null and b/apps/website-vue/src/assets/hero-family.jpg differ
diff --git a/apps/website-vue/src/assets/hero-family.png b/apps/website-vue/src/assets/hero-family.png
new file mode 100644
index 0000000..14c0b36
Binary files /dev/null and b/apps/website-vue/src/assets/hero-family.png differ
diff --git a/apps/website-vue/src/assets/hero-family.svg b/apps/website-vue/src/assets/hero-family.svg
new file mode 100644
index 0000000..f3982fb
--- /dev/null
+++ b/apps/website-vue/src/assets/hero-family.svg
@@ -0,0 +1,114 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 280" fill="none">
+  <!-- Couch -->
+  <rect x="30" y="175" width="300" height="55" rx="10" fill="#d4c4a8"/>
+  <rect x="40" y="158" width="280" height="25" rx="6" fill="#e8dcc8"/>
+  <ellipse cx="40" cy="190" rx="15" ry="28" fill="#d4c4a8"/>
+  <ellipse cx="320" cy="190" rx="15" ry="28" fill="#d4c4a8"/>
+  <rect x="55" y="230" width="6" height="12" rx="2" fill="#242a28"/>
+  <rect x="299" y="230" width="6" height="12" rx="2" fill="#242a28"/>
+  
+  <!-- Dad (right side) -->
+  <g transform="translate(230, 75)">
+    <!-- Body -->
+    <rect x="12" y="50" width="36" height="48" rx="6" fill="#242a28"/>
+    <!-- Head -->
+    <circle cx="30" cy="28" r="22" fill="#f5d0c5"/>
+    <!-- Hair -->
+    <path d="M10 22 Q10 6 30 6 Q50 6 50 22" fill="#242a28"/>
+    <!-- Eyes -->
+    <circle cx="22" cy="26" r="2.5" fill="#242a28"/>
+    <circle cx="38" cy="26" r="2.5" fill="#242a28"/>
+    <!-- Smile -->
+    <path d="M23 38 Q30 44 37 38" stroke="#242a28" stroke-width="2" fill="none" stroke-linecap="round"/>
+    <!-- Arms -->
+    <rect x="2" y="55" width="12" height="6" rx="3" fill="#242a28"/>
+    <rect x="46" y="55" width="12" height="6" rx="3" fill="#242a28"/>
+    <!-- Hands -->
+    <circle cx="0" cy="58" r="6" fill="#f5d0c5"/>
+    <circle cx="60" cy="58" r="6" fill="#f5d0c5"/>
+    <!-- Legs -->
+    <rect x="16" y="98" width="10" height="32" rx="4" fill="#242a28"/>
+    <rect x="34" y="98" width="10" height="32" rx="4" fill="#242a28"/>
+  </g>
+  
+  <!-- Mom (left side) -->
+  <g transform="translate(70, 80)">
+    <!-- Body -->
+    <rect x="12" y="48" width="36" height="45" rx="6" fill="#ffffff" stroke="#e0e0e0"/>
+    <!-- Head -->
+    <circle cx="30" cy="26" r="21" fill="#f5d0c5"/>
+    <!-- Hair -->
+    <path d="M10 30 Q6 12 30 6 Q54 12 50 30 Q48 18 30 16 Q12 18 10 30" fill="#3d2314"/>
+    <path d="M10 30 Q8 48 15 58" stroke="#3d2314" stroke-width="5" fill="none" stroke-linecap="round"/>
+    <path d="M50 30 Q52 48 45 58" stroke="#3d2314" stroke-width="5" fill="none" stroke-linecap="round"/>
+    <!-- Eyes -->
+    <circle cx="22" cy="24" r="2" fill="#242a28"/>
+    <circle cx="38" cy="24" r="2" fill="#242a28"/>
+    <!-- Smile -->
+    <path d="M23 35 Q30 40 37 35" stroke="#242a28" stroke-width="2" fill="none" stroke-linecap="round"/>
+    <!-- Arms -->
+    <rect x="46" y="52" width="12" height="5" rx="2.5" fill="#f5d0c5"/>
+    <rect x="2" y="52" width="12" height="5" rx="2.5" fill="#f5d0c5"/>
+    <!-- Hands -->
+    <circle cx="60" cy="54" r="5" fill="#f5d0c5"/>
+    <circle cx="0" cy="54" r="5" fill="#f5d0c5"/>
+    <!-- Legs -->
+    <rect x="16" y="93" width="10" height="28" rx="4" fill="#242a28"/>
+    <rect x="34" y="93" width="10" height="28" rx="4" fill="#242a28"/>
+  </g>
+  
+  <!-- Child 1 (boy, center-left) -->
+  <g transform="translate(135, 105)">
+    <!-- Body -->
+    <rect x="8" y="36" width="28" height="32" rx="5" fill="#22c55e"/>
+    <!-- Head -->
+    <circle cx="22" cy="18" r="16" fill="#f5d0c5"/>
+    <!-- Hair -->
+    <path d="M8 14 Q8 4 22 4 Q36 4 36 14" fill="#242a28"/>
+    <!-- Eyes -->
+    <circle cx="16" cy="16" r="2" fill="#242a28"/>
+    <circle cx="28" cy="16" r="2" fill="#242a28"/>
+    <!-- Smile -->
+    <path d="M17 26 Q22 30 27 26" stroke="#242a28" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+    <!-- Arms -->
+    <rect x="34" y="40" width="10" height="4" rx="2" fill="#22c55e"/>
+    <rect x="0" y="40" width="10" height="4" rx="2" fill="#22c55e"/>
+    <!-- Hands -->
+    <circle cx="46" cy="42" r="4" fill="#f5d0c5"/>
+    <circle cx="-2" cy="42" r="4" fill="#f5d0c5"/>
+    <!-- Legs -->
+    <rect x="11" y="68" width="8" height="22" rx="3" fill="#242a28"/>
+    <rect x="25" y="68" width="8" height="22" rx="3" fill="#242a28"/>
+  </g>
+  
+  <!-- Child 2 (girl, center-right) -->
+  <g transform="translate(180, 108)">
+    <!-- Body/Dress -->
+    <rect x="8" y="34" width="28" height="30" rx="5" fill="#ffffff" stroke="#e0e0e0"/>
+    <!-- Head -->
+    <circle cx="22" cy="16" r="15" fill="#f5d0c5"/>
+    <!-- Hair -->
+    <path d="M8 14 Q8 2 22 2 Q36 2 36 14" fill="#3d2314"/>
+    <path d="M8 14 Q6 24 10 30" stroke="#3d2314" stroke-width="4" fill="none" stroke-linecap="round"/>
+    <path d="M36 14 Q38 24 34 30" stroke="#3d2314" stroke-width="4" fill="none" stroke-linecap="round"/>
+    <!-- Eyes -->
+    <circle cx="16" cy="14" r="2" fill="#242a28"/>
+    <circle cx="28" cy="14" r="2" fill="#242a28"/>
+    <!-- Smile -->
+    <path d="M17 23 Q22 27 27 23" stroke="#242a28" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+    <!-- Arms -->
+    <rect x="34" y="38" width="10" height="4" rx="2" fill="#f5d0c5"/>
+    <rect x="0" y="38" width="10" height="4" rx="2" fill="#f5d0c5"/>
+    <!-- Hands -->
+    <circle cx="46" cy="40" r="4" fill="#f5d0c5"/>
+    <circle cx="-2" cy="40" r="4" fill="#f5d0c5"/>
+    <!-- Legs -->
+    <rect x="11" y="64" width="8" height="20" rx="3" fill="#242a28"/>
+    <rect x="25" y="64" width="8" height="20" rx="3" fill="#242a28"/>
+  </g>
+  
+  <!-- Decorative dots -->
+  <circle cx="50" cy="55" r="4" fill="#22c55e" opacity="0.5"/>
+  <circle cx="310" cy="45" r="5" fill="#22c55e" opacity="0.4"/>
+  <circle cx="180" cy="35" r="3" fill="#22c55e" opacity="0.3"/>
+</svg>
\ No newline at end of file
diff --git a/apps/website-vue/src/assets/hero-living-room-3d.png b/apps/website-vue/src/assets/hero-living-room-3d.png
new file mode 100644
index 0000000..b563e42
Binary files /dev/null and b/apps/website-vue/src/assets/hero-living-room-3d.png differ
diff --git a/apps/website-vue/src/assets/pain-buffering.png b/apps/website-vue/src/assets/pain-buffering.png
new file mode 100644
index 0000000..3c9e118
Binary files /dev/null and b/apps/website-vue/src/assets/pain-buffering.png differ
diff --git a/apps/website-vue/src/assets/pain-business.png b/apps/website-vue/src/assets/pain-business.png
new file mode 100644
index 0000000..032e840
Binary files /dev/null and b/apps/website-vue/src/assets/pain-business.png differ
diff --git a/apps/website-vue/src/assets/solution-business.png b/apps/website-vue/src/assets/solution-business.png
new file mode 100644
index 0000000..46decad
Binary files /dev/null and b/apps/website-vue/src/assets/solution-business.png differ
diff --git a/apps/website-vue/src/assets/solution-connected.png b/apps/website-vue/src/assets/solution-connected.png
new file mode 100644
index 0000000..817cab5
Binary files /dev/null and b/apps/website-vue/src/assets/solution-connected.png differ
diff --git a/apps/website-vue/src/assets/targo-bureaux.jpg b/apps/website-vue/src/assets/targo-bureaux.jpg
new file mode 100644
index 0000000..5006d99
Binary files /dev/null and b/apps/website-vue/src/assets/targo-bureaux.jpg differ
diff --git a/apps/website-vue/src/assets/targo-logo-green.svg b/apps/website-vue/src/assets/targo-logo-green.svg
new file mode 100644
index 0000000..a3e9f51
--- /dev/null
+++ b/apps/website-vue/src/assets/targo-logo-green.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 326.39 70.35"><defs><style>.cls-1{fill:#019547;}</style></defs><path class="cls-1" d="M25.83,15H8.41a4.14,4.14,0,0,1-3.89-2.71L0,1.18H66.59L62.07,12.27A4.14,4.14,0,0,1,58.18,15H40.76V69.19H25.81Z"/><path class="cls-1" d="M90.74.68h18.55a5.63,5.63,0,0,1,5.63,5.6l.26,62.91H99.55L99.76,54H71.87L66.41,65.51a6.45,6.45,0,0,1-5.84,3.68H49.35L73.53,12.11A18.7,18.7,0,0,1,90.74.68M100,40.73l.07-26h-8a6.75,6.75,0,0,0-6.26,4.18L76.73,40.73Z"/><path class="cls-1" d="M124.51,6.81a5.64,5.64,0,0,1,5.65-5.65H155.6c8.64,0,15.37,2.44,19.81,6.91,3.81,3.78,5.84,9.14,5.84,15.53v.18c0,11-5.92,17.87-14.59,21.1l16.61,24.29h-14a6.51,6.51,0,0,1-5.39-2.87L151.21,47.41H139.44V69.17h-15Zm30.12,27.41c7.28,0,11.45-3.89,11.45-9.62v-.21c0-6.42-4.46-9.7-11.74-9.7H139.46V34.22Z"/><path class="cls-1" d="M184.74,35.37v-.18C184.74,15.85,199.8,0,220.4,0,232.65,0,240,3.31,247.13,9.33l-6.28,7.57a5.18,5.18,0,0,1-6.84,1,23.71,23.71,0,0,0-14.11-4.13c-10.88,0-19.52,9.62-19.52,21.18v.19c0,12.43,8.54,21.57,20.6,21.57a24,24,0,0,0,14.09-4.07V42.91h-8.68A6.41,6.41,0,0,1,220,36.53V30h29.54V59.52a44,44,0,0,1-29,10.78c-21.18,0-35.74-14.8-35.74-34.93"/><path class="cls-1" d="M254.09,35.37v-.18C254.09,15.85,269.33,0,290.33,0s36.06,15.66,36.06,35v.18c0,19.34-15.27,35.19-36.24,35.19s-36.06-15.64-36.06-35m56.63,0v-.18c0-11.67-8.54-21.39-20.6-21.39S269.73,23.34,269.73,35v.18c0,11.67,8.54,21.37,20.6,21.37S310.72,47,310.72,35.37"/></svg>
diff --git a/apps/website-vue/src/assets/targo-logo-white.svg b/apps/website-vue/src/assets/targo-logo-white.svg
new file mode 100644
index 0000000..b833436
--- /dev/null
+++ b/apps/website-vue/src/assets/targo-logo-white.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 326.39 70.35"><defs><style>.cls-1{fill:#ffffff;}</style></defs><path class="cls-1" d="M25.83,15H8.41a4.14,4.14,0,0,1-3.89-2.71L0,1.18H66.59L62.07,12.27A4.14,4.14,0,0,1,58.18,15H40.76V69.19H25.81Z"/><path class="cls-1" d="M90.74.68h18.55a5.63,5.63,0,0,1,5.63,5.6l.26,62.91H99.55L99.76,54H71.87L66.41,65.51a6.45,6.45,0,0,1-5.84,3.68H49.35L73.53,12.11A18.7,18.7,0,0,1,90.74.68M100,40.73l.07-26h-8a6.75,6.75,0,0,0-6.26,4.18L76.73,40.73Z"/><path class="cls-1" d="M124.51,6.81a5.64,5.64,0,0,1,5.65-5.65H155.6c8.64,0,15.37,2.44,19.81,6.91,3.81,3.78,5.84,9.14,5.84,15.53v.18c0,11-5.92,17.87-14.59,21.1l16.61,24.29h-14a6.51,6.51,0,0,1-5.39-2.87L151.21,47.41H139.44V69.17h-15Zm30.12,27.41c7.28,0,11.45-3.89,11.45-9.62v-.21c0-6.42-4.46-9.7-11.74-9.7H139.46V34.22Z"/><path class="cls-1" d="M184.74,35.37v-.18C184.74,15.85,199.8,0,220.4,0,232.65,0,240,3.31,247.13,9.33l-6.28,7.57a5.18,5.18,0,0,1-6.84,1,23.71,23.71,0,0,0-14.11-4.13c-10.88,0-19.52,9.62-19.52,21.18v.19c0,12.43,8.54,21.57,20.6,21.57a24,24,0,0,0,14.09-4.07V42.91h-8.68A6.41,6.41,0,0,1,220,36.53V30h29.54V59.52a44,44,0,0,1-29,10.78c-21.18,0-35.74-14.8-35.74-34.93"/><path class="cls-1" d="M254.09,35.37v-.18C254.09,15.85,269.33,0,290.33,0s36.06,15.66,36.06,35v.18c0,19.34-15.27,35.19-36.24,35.19s-36.06-15.64-36.06-35m56.63,0v-.18c0-11.67-8.54-21.39-20.6-21.39S269.73,23.34,269.73,35v.18c0,11.67,8.54,21.37,20.6,21.37S310.72,47,310.72,35.37"/></svg>
\ No newline at end of file
diff --git a/apps/website-vue/src/assets/targo-logo.png b/apps/website-vue/src/assets/targo-logo.png
new file mode 100644
index 0000000..acccf07
Binary files /dev/null and b/apps/website-vue/src/assets/targo-logo.png differ
diff --git a/apps/website-vue/src/assets/targo-technician-avatar.png b/apps/website-vue/src/assets/targo-technician-avatar.png
new file mode 100644
index 0000000..7530789
Binary files /dev/null and b/apps/website-vue/src/assets/targo-technician-avatar.png differ
diff --git a/apps/website-vue/src/components/AvailabilityDialog.vue b/apps/website-vue/src/components/AvailabilityDialog.vue
new file mode 100644
index 0000000..b93171a
--- /dev/null
+++ b/apps/website-vue/src/components/AvailabilityDialog.vue
@@ -0,0 +1,413 @@
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } from "vue";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+  Search,
+  MapPin,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  ArrowLeft,
+  Zap,
+  Mail,
+  Phone,
+  Send,
+} from "lucide-vue-next";
+import { z } from "zod";
+
+// Address search via our own API (no Supabase dependency)
+const API_BASE = import.meta.env.VITE_API_BASE || "";
+
+const phoneClean = (v: string) => v.replace(/[\s\-().]/g, "");
+
+const contactSchema = z.union([
+  z.string().trim().email().max(254),
+  z.string().trim().transform(phoneClean).pipe(
+    z.string().regex(/^\+?1?\d{10,11}$/, "Numéro invalide"),
+  ),
+]);
+
+const CONTACT_COOLDOWN_MS = 5000;
+
+interface AddressResult {
+  id: number;
+  address_full: string;
+  numero: string;
+  rue: string;
+  ville: string;
+  code_postal: string;
+  longitude: number;
+  latitude: number;
+  fiber_available: boolean;
+  zone_tarifaire: number;
+  max_speed: number;
+  similarity_score: number;
+}
+
+type Step = "search" | "result";
+
+const props = defineProps<{ open: boolean }>();
+const emit = defineEmits<{ "update:open": [value: boolean] }>();
+
+const openModel = computed({
+  get: () => props.open,
+  set: (v: boolean) => emit("update:open", v),
+});
+
+const query = ref("");
+const results = ref<AddressResult[]>([]);
+const searching = ref(false);
+const selected = ref<AddressResult | null>(null);
+const step = ref<Step>("search");
+const checking = ref(false);
+const contactValue = ref("");
+const contactSent = ref(false);
+const sendingContact = ref(false);
+const contactError = ref("");
+let lastSubmit = 0;
+let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+// Reset on close
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) {
+      setTimeout(() => {
+        query.value = "";
+        results.value = [];
+        selected.value = null;
+        step.value = "search";
+        contactValue.value = "";
+        contactSent.value = false;
+      }, 300);
+    }
+  },
+);
+
+// Cleanup debounce on unmount
+onUnmounted(() => {
+  if (debounceTimer) clearTimeout(debounceTimer);
+});
+
+const searchAddresses = async (term: string) => {
+  if (term.length < 3) {
+    results.value = [];
+    return;
+  }
+  searching.value = true;
+  try {
+    const res = await fetch(API_BASE + "/rpc/search_addresses", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ search_term: term, result_limit: 8 }),
+    });
+    if (res.ok) {
+      const data = await res.json();
+      results.value = data as AddressResult[];
+    }
+  } finally {
+    searching.value = false;
+  }
+};
+
+const handleQueryChange = (value: string) => {
+  query.value = value;
+  if (debounceTimer) clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => searchAddresses(value), 350);
+};
+
+const handleValidate = async (address: AddressResult) => {
+  selected.value = address;
+  checking.value = true;
+  step.value = "result";
+
+  // Log the search (fire and forget)
+  try {
+    console.log("[Search]", query.value, "→", address.address_full, address.fiber_available);
+  } catch (e) {
+    console.error("Log search error:", e);
+  }
+
+  // Small delay for UX
+  await new Promise((r) => setTimeout(r, 800));
+  checking.value = false;
+};
+
+const handleContactSubmit = async () => {
+  if (!contactValue.value.trim() || !selected.value) return;
+
+  // Rate limit
+  const now = Date.now();
+  if (now - lastSubmit < CONTACT_COOLDOWN_MS) {
+    contactError.value = "Veuillez patienter quelques secondes.";
+    return;
+  }
+
+  // Validate contact
+  const result = contactSchema.safeParse(contactValue.value.trim());
+  if (!result.success) {
+    contactError.value = "Veuillez entrer un courriel ou numéro de mobile valide.";
+    return;
+  }
+  contactError.value = "";
+  sendingContact.value = true;
+  lastSubmit = now;
+
+  const validContact = result.data;
+
+  // Send lead notification via Mailjet
+  try {
+    await fetch(API_BASE + "/rpc/lead", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        contact: validContact,
+        address: selected.value.address_full,
+        fiber_available: selected.value.fiber_available,
+        max_speed: selected.value.max_speed || 0,
+      }),
+    });
+  } catch (e) {
+    console.error("Lead send error:", e);
+  }
+
+  sendingContact.value = false;
+  contactSent.value = true;
+};
+
+const speedLabel = (speed: number) => {
+  if (!speed || speed === 0) return "1.5 Gbit/s";
+  if (speed >= 1000) return `${(speed / 1000).toFixed(1)} Gbit/s`;
+  return `${speed} Mbit/s`;
+};
+
+const backToSearch = () => {
+  step.value = "search";
+  selected.value = null;
+  contactSent.value = false;
+  contactValue.value = "";
+};
+</script>
+
+<template>
+  <Dialog v-model:open="openModel">
+    <DialogContent class="sm:max-w-lg max-h-[85vh] overflow-hidden flex flex-col top-[8%] translate-y-0 sm:top-[50%] sm:translate-y-[-50%]">
+      <DialogHeader>
+        <DialogTitle class="flex items-center gap-2 text-xl">
+          <Zap class="w-5 h-5 text-targo-green" />
+          Vérifier la disponibilité
+        </DialogTitle>
+        <DialogDescription>
+          Entrez votre adresse pour vérifier si la fibre optique est disponible
+        </DialogDescription>
+      </DialogHeader>
+
+      <Transition mode="out-in">
+        <div
+          v-if="step === 'search'"
+          key="search"
+          v-motion
+          :initial="{ opacity: 0, x: -20 }"
+          :enter="{ opacity: 1, x: 0 }"
+          :leave="{ opacity: 0, x: -20 }"
+          class="space-y-4 flex-1 overflow-hidden flex flex-col"
+        >
+          <!-- Search input -->
+          <div class="relative">
+            <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder="Ex: 1933 Avenue Goulet, Montréal"
+              :model-value="query"
+              class="pl-10"
+              autofocus
+              @update:model-value="(v) => handleQueryChange(String(v))"
+            />
+            <Loader2 v-if="searching" class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-muted-foreground" />
+          </div>
+
+          <!-- Results list -->
+          <div class="flex-1 overflow-y-auto space-y-1 max-h-[50vh]">
+            <p v-if="results.length === 0 && query.length >= 3 && !searching" class="text-sm text-muted-foreground text-center py-8">
+              Aucune adresse trouvée
+            </p>
+            <button
+              v-for="addr in results"
+              :key="addr.id"
+              class="w-full text-left p-3 rounded-lg border border-border hover:border-targo-green hover:bg-targo-green/5 transition-all duration-200 group"
+              @click="handleValidate(addr)"
+            >
+              <div class="flex items-start gap-3">
+                <MapPin class="w-4 h-4 mt-0.5 text-muted-foreground group-hover:text-targo-green shrink-0" />
+                <div class="min-w-0">
+                  <p class="text-sm font-medium truncate">
+                    {{ addr.address_full }}
+                  </p>
+                  <p class="text-xs text-muted-foreground">
+                    {{ addr.ville }} {{ addr.code_postal }}
+                  </p>
+                </div>
+                <span v-if="addr.fiber_available" class="ml-auto shrink-0 text-[10px] font-bold uppercase tracking-wider text-targo-green bg-targo-green/10 px-2 py-0.5 rounded-full">
+                  Fibre
+                </span>
+              </div>
+            </button>
+          </div>
+        </div>
+
+        <div
+          v-else-if="step === 'result' && selected"
+          key="result"
+          v-motion
+          :initial="{ opacity: 0, x: 20 }"
+          :enter="{ opacity: 1, x: 0 }"
+          :leave="{ opacity: 0, x: 20 }"
+          class="space-y-6"
+        >
+          <div v-if="checking" class="flex flex-col items-center py-12 gap-4">
+            <Loader2 class="w-10 h-10 animate-spin text-targo-green" />
+            <p class="text-sm text-muted-foreground">
+              Vérification en cours…
+            </p>
+          </div>
+          <!-- ✅ AVAILABLE -->
+          <div v-else-if="selected.fiber_available" class="space-y-6">
+            <div class="text-center space-y-3">
+              <div class="w-16 h-16 rounded-full bg-targo-green/10 flex items-center justify-center mx-auto">
+                <CheckCircle2 class="w-8 h-8 text-targo-green" />
+              </div>
+              <h3 class="text-xl font-bold text-foreground">
+                Félicitations !
+              </h3>
+              <p class="text-muted-foreground text-sm">
+                Le service est disponible à votre adresse jusqu'à{{ " " }}
+                <span class="font-bold text-targo-green">
+                  {{ speedLabel(selected.max_speed) }}
+                </span>
+              </p>
+              <div class="bg-primary/5 border border-primary/20 rounded-xl p-4 mt-2">
+                <p class="text-xs text-muted-foreground mb-1">Votre forfait</p>
+                <p class="text-2xl font-bold text-primary font-display">
+                  À partir de 39<sup class="text-sm">,95</sup>$/mois
+                </p>
+              </div>
+              <p class="text-xs text-muted-foreground bg-muted/50 rounded-lg p-3">
+                <MapPin class="inline w-3 h-3 mr-1" />
+                {{ selected.address_full }}
+              </p>
+            </div>
+
+            <div v-if="!contactSent" class="space-y-3">
+              <p class="text-sm font-medium text-center">
+                Inscrivez votre courriel ou numéro de mobile pour
+                démarrer votre abonnement
+              </p>
+              <div class="space-y-1">
+                <div class="flex gap-2">
+                  <Input
+                    placeholder="courriel ou mobile"
+                    :model-value="contactValue"
+                    class="flex-1"
+                    :maxlength="254"
+                    @update:model-value="(v) => { contactValue = String(v); contactError = ''; }"
+                  />
+                  <Button
+                    :disabled="!contactValue.trim() || sendingContact"
+                    class="gradient-targo"
+                    @click="handleContactSubmit"
+                  >
+                    <Loader2 v-if="sendingContact" class="w-4 h-4 animate-spin" />
+                    <Send v-else class="w-4 h-4" />
+                  </Button>
+                </div>
+                <p v-if="contactError" class="text-xs text-destructive">{{ contactError }}</p>
+              </div>
+            </div>
+            <div v-else class="text-center text-sm text-targo-green font-medium bg-targo-green/10 rounded-lg p-4">
+              <CheckCircle2 class="w-5 h-5 mx-auto mb-2" />
+              Merci ! Nous vous contacterons très bientôt.
+            </div>
+          </div>
+          <!-- ❌ NOT AVAILABLE -->
+          <div v-else class="space-y-6">
+            <div class="text-center space-y-3">
+              <div class="w-16 h-16 rounded-full bg-destructive/10 flex items-center justify-center mx-auto">
+                <XCircle class="w-8 h-8 text-destructive" />
+              </div>
+              <h3 class="text-xl font-bold text-foreground">
+                Adresse non confirmée
+              </h3>
+              <p class="text-muted-foreground text-sm">
+                Nous n'arrivons pas à confirmer la disponibilité pour
+                votre adresse.
+              </p>
+              <p class="text-xs text-muted-foreground bg-muted/50 rounded-lg p-3">
+                <MapPin class="inline w-3 h-3 mr-1" />
+                {{ selected.address_full }}
+              </p>
+            </div>
+
+            <div class="space-y-4">
+              <div class="flex items-center justify-center gap-4 text-sm">
+                <a
+                  href="tel:18558882746"
+                  class="flex items-center gap-2 text-targo-green hover:underline font-medium"
+                >
+                  <Phone class="w-4 h-4" />
+                  1-855-888-2746
+                </a>
+              </div>
+
+              <div class="text-center text-xs text-muted-foreground">
+                ou inscrivez votre courriel et nous vous contacterons
+              </div>
+
+              <div v-if="!contactSent" class="space-y-1">
+                <div class="flex gap-2">
+                  <Input
+                    placeholder="votre courriel"
+                    :model-value="contactValue"
+                    class="flex-1"
+                    :maxlength="254"
+                    @update:model-value="(v) => { contactValue = String(v); contactError = ''; }"
+                  />
+                  <Button
+                    :disabled="!contactValue.trim() || sendingContact"
+                    variant="outline"
+                    class="border-targo-green text-targo-green hover:bg-targo-green/5"
+                    @click="handleContactSubmit"
+                  >
+                    <Loader2 v-if="sendingContact" class="w-4 h-4 animate-spin" />
+                    <Mail v-else class="w-4 h-4" />
+                  </Button>
+                </div>
+                <p v-if="contactError" class="text-xs text-destructive">{{ contactError }}</p>
+              </div>
+              <div v-else class="text-center text-sm text-targo-green font-medium bg-targo-green/10 rounded-lg p-4">
+                <CheckCircle2 class="w-5 h-5 mx-auto mb-2" />
+                Merci ! Nous vous contacterons très bientôt.
+              </div>
+            </div>
+          </div>
+
+          <Button
+            variant="ghost"
+            size="sm"
+            class="w-full"
+            @click="backToSearch"
+          >
+            <ArrowLeft class="w-4 h-4 mr-2" />
+            Rechercher une autre adresse
+          </Button>
+        </div>
+      </Transition>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/website-vue/src/components/ProtectedAdminRoute.vue b/apps/website-vue/src/components/ProtectedAdminRoute.vue
new file mode 100644
index 0000000..050f879
--- /dev/null
+++ b/apps/website-vue/src/components/ProtectedAdminRoute.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// Vue port of React ProtectedAdminRoute.
+// Usage: wrap an admin page's content, e.g. in AdminImport.vue:
+//   <ProtectedAdminRoute><AdminImportContent /></ProtectedAdminRoute>
+// It redirects to /admin/login (router.replace) when the user is not an admin.
+// (See report for the alternative router navigation-guard wiring.)
+import { ref, watch, onMounted, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+import { supabase } from "@/integrations/supabase/client";
+import { Loader2 } from "lucide-vue-next";
+
+const router = useRouter();
+
+const loading = ref(true);
+const authorized = ref(false);
+let initialCheckDone = false;
+let unsubscribe: (() => void) | undefined;
+
+const checkAdmin = async (userId: string) => {
+  const { data: roleRow } = await supabase
+    .from("user_roles")
+    .select("role")
+    .eq("user_id", userId)
+    .eq("role", "admin")
+    .maybeSingle();
+  authorized.value = !!roleRow;
+  loading.value = false;
+};
+
+onMounted(() => {
+  // Listen to auth state changes — but ignore null session until initial check is done
+  const { data } = supabase.auth.onAuthStateChange((_event, session) => {
+    if (session?.user) {
+      initialCheckDone = true;
+      checkAdmin(session.user.id);
+    } else if (initialCheckDone) {
+      // Only redirect if we already confirmed the initial state
+      authorized.value = false;
+      loading.value = false;
+    }
+  });
+  unsubscribe = () => data.subscription.unsubscribe();
+
+  // Initial session check — this is the source of truth
+  supabase.auth.getSession().then(({ data: { session } }) => {
+    initialCheckDone = true;
+    if (session?.user) {
+      checkAdmin(session.user.id);
+    } else {
+      authorized.value = false;
+      loading.value = false;
+    }
+  });
+});
+
+onUnmounted(() => {
+  unsubscribe?.();
+});
+
+// Redirect once we know the user is not authorized (equivalent of <Navigate to="/admin/login" replace />)
+watch([loading, authorized], ([l, a]) => {
+  if (!l && !a) {
+    router.replace("/admin/login");
+  }
+});
+</script>
+
+<template>
+  <div v-if="loading" class="min-h-screen flex items-center justify-center">
+    <Loader2 class="w-8 h-8 animate-spin text-muted-foreground" />
+  </div>
+  <slot v-else-if="authorized" />
+</template>
diff --git a/apps/website-vue/src/components/SearchDialog.vue b/apps/website-vue/src/components/SearchDialog.vue
new file mode 100644
index 0000000..4ddef56
--- /dev/null
+++ b/apps/website-vue/src/components/SearchDialog.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import { searchItems, type SearchItem } from "@/lib/searchData";
+import { useRouter } from "vue-router";
+import { Search, Monitor, Briefcase, HelpCircle, FileText, Globe } from "lucide-vue-next";
+
+const props = defineProps<{ open: boolean }>();
+const emit = defineEmits<{ "update:open": [value: boolean] }>();
+
+const router = useRouter();
+
+const runCommand = (command: () => unknown) => {
+  emit("update:open", false);
+  command();
+};
+
+const getIcon = (type: string) => {
+  switch (type) {
+    case "Page":
+      return Monitor;
+    case "Business":
+      return Briefcase;
+    case "Support":
+      return HelpCircle;
+    case "Legal":
+      return FileText;
+    default:
+      return Search;
+  }
+};
+
+const onSelect = (item: SearchItem) => {
+  if (item.url.startsWith("http")) {
+    runCommand(() => window.open(item.url, "_blank"));
+  } else {
+    runCommand(() => router.push(item.url));
+  }
+};
+
+const pages = searchItems.filter((item) => item.type === "Page");
+const business = searchItems.filter((item) => item.type === "Business");
+const support = searchItems.filter((item) => item.type === "Support");
+
+const openModel = computed({
+  get: () => props.open,
+  set: (v: boolean) => emit("update:open", v),
+});
+</script>
+
+<template>
+  <CommandDialog v-model:open="openModel">
+    <CommandInput placeholder="Rechercher une page ou un service..." />
+    <CommandList>
+      <CommandEmpty>Aucun résultat trouvé.</CommandEmpty>
+
+      <CommandGroup v-if="pages.length > 0" heading="Pages Principales">
+        <CommandItem
+          v-for="item in pages"
+          :key="item.id"
+          :value="`${item.title} ${item.keywords?.join(' ')}`"
+          @select="onSelect(item)"
+        >
+          <component :is="getIcon(item.type)" class="mr-2 h-4 w-4" />
+          <span>{{ item.title }}</span>
+          <Globe v-if="item.id === 'client-portal'" class="ml-auto h-4 w-4 text-muted-foreground" />
+        </CommandItem>
+      </CommandGroup>
+
+      <CommandSeparator />
+
+      <CommandGroup v-if="business.length > 0" heading="Solutions Affaires">
+        <CommandItem
+          v-for="item in business"
+          :key="item.id"
+          :value="`${item.title} ${item.keywords?.join(' ')}`"
+          @select="onSelect(item)"
+        >
+          <component :is="getIcon(item.type)" class="mr-2 h-4 w-4" />
+          <span>{{ item.title }}</span>
+        </CommandItem>
+      </CommandGroup>
+
+      <CommandSeparator />
+
+      <CommandGroup v-if="support.length > 0" heading="Support & Aide">
+        <CommandItem
+          v-for="item in support"
+          :key="item.id"
+          :value="`${item.title} ${item.keywords?.join(' ')}`"
+          @select="onSelect(item)"
+        >
+          <component :is="getIcon(item.type)" class="mr-2 h-4 w-4" />
+          <span>{{ item.title }}</span>
+          <Globe v-if="item.id === 'client-portal'" class="ml-auto h-4 w-4 text-muted-foreground" />
+        </CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </CommandDialog>
+</template>
diff --git a/apps/website-vue/src/components/Speedometer.vue b/apps/website-vue/src/components/Speedometer.vue
new file mode 100644
index 0000000..8ae4197
--- /dev/null
+++ b/apps/website-vue/src/components/Speedometer.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+
+const props = withDefaults(
+  defineProps<{ speed: string; size?: number }>(),
+  { size: 140 },
+);
+
+const animatedValue = ref(0);
+
+// Parse speed to get a normalized value (0-1) for indicator position
+// Uses logarithmic curve: fast climb for lower speeds, diminishing impact for higher speeds
+const getSpeedValue = (speedStr: string): number => {
+  const lower = speedStr.toLowerCase();
+  let mbps: number;
+
+  if (lower.includes("gbps")) {
+    mbps = parseFloat(speedStr) * 1000; // Convert Gbps to Mbps
+  } else {
+    mbps = parseFloat(speedStr);
+  }
+
+  // Logarithmic curve: log(1 + x * k) / log(1 + k)
+  // Higher k = faster climb for lower speeds, compressed difference at higher speeds
+  const maxSpeed = 3500;
+  const k = 50; // Higher value for more aggressive lower speed progression
+  const normalized = Math.min(mbps / maxSpeed, 1);
+
+  return Math.log(1 + normalized * k) / Math.log(1 + k);
+};
+
+const targetValue = computed(() => getSpeedValue(props.speed));
+
+// Animate on mount
+onMounted(() => {
+  const duration = 1200;
+  const startTime = performance.now();
+
+  const animate = (currentTime: number) => {
+    const elapsed = currentTime - startTime;
+    const progress = Math.min(elapsed / duration, 1);
+
+    // Ease-out cubic for smooth deceleration
+    const eased = 1 - Math.pow(1 - progress, 3);
+    animatedValue.value = eased * targetValue.value;
+
+    if (progress < 1) {
+      requestAnimationFrame(animate);
+    }
+  };
+
+  requestAnimationFrame(animate);
+});
+
+// Parse speed into number and unit
+const speedNumber = computed(() => parseFloat(props.speed));
+const speedUnit = computed(() =>
+  props.speed.toLowerCase().includes("gbps") ? "Gbps" : "Mbps",
+);
+
+const strokeWidth = 14;
+const radius = computed(() => (props.size - strokeWidth) / 2);
+const center = computed(() => props.size / 2);
+
+// Arc path for the gauge
+const polarToCartesian = (cx: number, cy: number, r: number, angleDeg: number) => {
+  const rad = ((angleDeg - 90) * Math.PI) / 180;
+  return {
+    x: cx + r * Math.cos(rad),
+    y: cy + r * Math.sin(rad),
+  };
+};
+
+const describeArc = (cx: number, cy: number, r: number, startAngle: number, endAngle: number) => {
+  const start = polarToCartesian(cx, cy, r, endAngle);
+  const end = polarToCartesian(cx, cy, r, startAngle);
+  const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+  return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`;
+};
+
+// Full arc from -135 to 135 (270 degrees)
+const arcPath = computed(() => describeArc(center.value, center.value, radius.value, -135, 135));
+
+// Filled arc based on animated value
+const filledAngle = computed(() => -135 + animatedValue.value * 270);
+const filledArcPath = computed(() =>
+  describeArc(center.value, center.value, radius.value, -135, filledAngle.value),
+);
+
+// Position for the indicator circle
+const indicatorPos = computed(() =>
+  polarToCartesian(center.value, center.value, radius.value, filledAngle.value),
+);
+
+const uniqueId = computed(() => `speedGradient-${props.speed.replace(/\s/g, "-")}`);
+
+// Gradient with lighter green tones
+const colors = { start: "#34d399", mid: "#4ade80", end: "#86efac" };
+</script>
+
+<template>
+  <div class="relative flex flex-col items-center" :style="{ width: `${size}px`, height: `${size * 0.7}px` }">
+    <svg
+      :viewBox="`0 0 ${size} ${size}`"
+      :width="size"
+      :height="size * 0.7"
+      class="overflow-visible"
+    >
+      <defs>
+        <linearGradient :id="uniqueId" x1="0%" y1="100%" x2="100%" y2="0%">
+          <stop offset="0%" :stop-color="colors.start" />
+          <stop offset="50%" :stop-color="colors.mid" />
+          <stop offset="100%" :stop-color="colors.end" />
+        </linearGradient>
+        <filter :id="`shadow-${uniqueId}`" x="-50%" y="-50%" width="200%" height="200%">
+          <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.35" />
+        </filter>
+      </defs>
+
+      <!-- Background arc (grey) -->
+      <path
+        :d="arcPath"
+        fill="none"
+        stroke="hsl(var(--muted))"
+        :stroke-width="strokeWidth"
+        stroke-linecap="round"
+      />
+
+      <!-- Colored gradient arc -->
+      <path
+        :d="filledArcPath"
+        fill="none"
+        :stroke="`url(#${uniqueId})`"
+        :stroke-width="strokeWidth / 2"
+        stroke-linecap="round"
+      />
+
+      <!-- Indicator circle with shadow -->
+      <g :filter="`url(#shadow-${uniqueId})`">
+        <circle
+          :cx="indicatorPos.x"
+          :cy="indicatorPos.y"
+          :r="10"
+          fill="hsl(var(--muted))"
+        />
+        <circle
+          :cx="indicatorPos.x"
+          :cy="indicatorPos.y"
+          :r="8"
+          fill="white"
+        />
+      </g>
+
+      <!-- Speed number - large -->
+      <text
+        :x="center"
+        :y="center"
+        text-anchor="middle"
+        dominant-baseline="middle"
+        class="fill-primary font-bold"
+        :style="{ fontSize: `${size * 0.35}px`, letterSpacing: '-0.05em' }"
+      >
+        {{ speedNumber }}
+      </text>
+
+      <!-- Speed unit - small -->
+      <text
+        :x="center"
+        :y="center + size * 0.20"
+        text-anchor="middle"
+        class="fill-muted-foreground font-medium"
+        :style="{ fontSize: `${size * 0.12}px` }"
+      >
+        {{ speedUnit }}
+      </text>
+    </svg>
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/layout/BusinessPageLayout.vue b/apps/website-vue/src/components/layout/BusinessPageLayout.vue
new file mode 100644
index 0000000..110aa1d
--- /dev/null
+++ b/apps/website-vue/src/components/layout/BusinessPageLayout.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { Component } from "vue";
+import { RouterLink } from "vue-router";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Button } from "@/components/ui/button";
+import { ArrowRight, Phone } from "lucide-vue-next";
+
+defineProps<{
+  title: string;
+  subtitle?: string;
+  description: string;
+  icon?: Component;
+  heroImage?: string;
+}>();
+</script>
+
+<template>
+  <div class="min-h-screen bg-targo-dark text-white selection:bg-targo-green selection:text-white">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="relative pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden">
+      <!-- Background Elements -->
+      <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-targo-green/20 via-targo-dark to-targo-dark" />
+      <div class="absolute top-0 left-0 w-full h-full bg-[url('/grid-pattern.svg')] opacity-5" />
+
+      <div class="container relative mx-auto px-4">
+        <div
+          v-motion
+          :initial="{ opacity: 0, y: 30 }"
+          :enter="{ opacity: 1, y: 0, transition: { duration: 800, ease: 'easeOut' } }"
+          class="max-w-4xl mx-auto text-center"
+        >
+          <RouterLink
+            to="/business"
+            class="inline-flex items-center text-targo-green-light hover:text-white transition-colors mb-8 text-sm font-medium tracking-wide uppercase"
+          >
+            ← Retour aux solutions affaires
+          </RouterLink>
+
+          <div
+            v-if="icon"
+            v-motion
+            :initial="{ scale: 0.8, opacity: 0 }"
+            :enter="{ scale: 1, opacity: 1, transition: { delay: 200, duration: 500 } }"
+            class="w-20 h-20 bg-targo-green/10 rounded-2xl flex items-center justify-center mx-auto mb-8 border border-targo-green/20 backdrop-blur-sm shadow-[0_0_30px_rgba(0,200,83,0.2)]"
+          >
+            <component :is="icon" class="h-10 w-10 text-targo-green" />
+          </div>
+
+          <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 font-display tracking-tight">
+            {{ title }} <span class="text-transparent bg-clip-text bg-gradient-to-r from-targo-green to-targo-green-light">{{ subtitle }}</span>
+          </h1>
+
+          <p class="text-lg md:text-xl text-gray-400 mb-10 max-w-3xl mx-auto leading-relaxed">
+            {{ description }}
+          </p>
+
+          <div
+            v-motion
+            :initial="{ opacity: 0, y: 20 }"
+            :enter="{ opacity: 1, y: 0, transition: { delay: 400, duration: 500 } }"
+            class="flex flex-col sm:flex-row gap-4 justify-center"
+          >
+            <Button size="lg" class="bg-targo-green hover:bg-targo-green-dark text-white font-bold text-lg px-8 py-6 rounded-xl shadow-lg shadow-targo-green/20 transition-all hover:scale-105">
+              Demander une soumission
+              <ArrowRight class="ml-2 h-5 w-5" />
+            </Button>
+            <Button size="lg" variant="outline" class="text-lg px-8 py-6 border-white/10 bg-white/5 text-white hover:bg-white/10 hover:text-white rounded-xl backdrop-blur-sm transition-all hover:scale-105">
+              <Phone class="mr-2 h-5 w-5" />
+              1-855-888-2746
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <slot />
+
+    <div class="border-t border-white/5">
+      <Footer />
+    </div>
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/layout/Footer.vue b/apps/website-vue/src/components/layout/Footer.vue
new file mode 100644
index 0000000..869cea3
--- /dev/null
+++ b/apps/website-vue/src/components/layout/Footer.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Phone, Mail, MapPin } from "lucide-vue-next";
+import targoLogo from "@/assets/targo-logo.png";
+
+const currentYear = new Date().getFullYear();
+</script>
+
+<template>
+  <footer class="bg-targo-dark text-white pt-24 pb-12 border-t border-white/5 relative overflow-hidden">
+    <!-- Decorative background element -->
+    <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-targo-green/5 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/2 pointer-events-none" />
+
+    <div class="container">
+      <div class="grid md:grid-cols-4 gap-12 mb-12">
+        <!-- Brand -->
+        <div class="md:col-span-1 space-y-6">
+          <img :src="targoLogo" alt="Targo - 100% Fibre" class="h-10 mb-2 brightness-0 invert" />
+          <p class="text-white/60 text-sm leading-relaxed max-w-xs">La puissance de la fibre locale.
+La fiabilité, la performance et l'expertise à proximité pour propulser vos communications.</p>
+        </div>
+
+        <!-- Quick links -->
+        <div>
+          <h4 class="font-display font-bold mb-6 text-lg">Services</h4>
+          <ul class="space-y-3 text-sm text-white/60">
+            <li><a href="/internet" class="hover:text-targo-green transition-colors">Internet</a></li>
+            <li><a href="/television" class="hover:text-targo-green transition-colors">Télévision</a></li>
+            <li><a href="/telephone" class="hover:text-targo-green transition-colors">Téléphone</a></li>
+            <li><a href="/support" class="hover:text-targo-green transition-colors">Support</a></li>
+          </ul>
+        </div>
+
+        <!-- Company -->
+        <div>
+          <h4 class="font-display font-bold mb-6 text-lg">Plus</h4>
+          <ul class="space-y-3 text-sm text-white/60">
+            <li><a href="#apropos" class="hover:text-targo-green transition-colors">À propos</a></li>
+            <li><a href="#contact" class="hover:text-targo-green transition-colors">Contact</a></li>
+            <li><a href="https://store.targo.ca/clients" class="hover:text-targo-green transition-colors">Mon compte</a></li>
+            <li><a href="/politique-de-confidentialite" class="hover:text-targo-green transition-colors">Politique de confidentialité</a></li>
+          </ul>
+        </div>
+
+        <!-- Contact -->
+        <div>
+          <h4 class="font-sans font-bold mb-8 text-white uppercase tracking-widest text-xs">Nous joindre</h4>
+          <ul class="space-y-5 text-sm">
+            <li class="flex items-center gap-4 group">
+              <div class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center group-hover:bg-targo-green group-hover:text-white transition-all duration-300">
+                <Phone class="w-5 h-5" />
+              </div>
+              <div class="flex flex-col">
+                <span class="text-white/50 text-[10px] uppercase font-bold tracking-wider">Appelez-nous</span>
+                <span class="text-white/80 font-medium group-hover:text-targo-green transition-colors">514-448-0773</span>
+              </div>
+            </li>
+            <li class="flex items-center gap-4 group">
+              <div class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center group-hover:bg-targo-green group-hover:text-white transition-all duration-300">
+                <Mail class="w-5 h-5" />
+              </div>
+              <div class="flex flex-col">
+                <span class="text-white/50 text-[10px] uppercase font-bold tracking-wider">Écrivez-nous</span>
+                <span class="text-white/80 font-medium group-hover:text-targo-green transition-colors">support@targo.ca</span>
+              </div>
+            </li>
+            <li class="flex items-start gap-4 group">
+              <div class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center group-hover:bg-targo-green group-hover:text-white transition-all duration-300 mt-1">
+                <MapPin class="w-5 h-5" />
+              </div>
+              <div class="flex flex-col">
+                <span class="text-white/50 text-[10px] uppercase font-bold tracking-wider">Visitez-nous</span>
+                <span class="text-white/80 font-medium leading-relaxed group-hover:text-targo-green transition-colors">
+                  1867 chemin de la rivière<br />Ste-Clotilde, Québec
+                </span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- Bottom -->
+      <div class="pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
+        <p class="text-xs text-white/40 font-medium">
+          © {{ currentYear }} TARGO Communications. Tous droits réservés.
+        </p>
+        <div class="flex items-center gap-8 text-xs font-semibold uppercase tracking-wider text-white/40">
+          <a href="/accessibilite" class="hover:text-targo-green transition-all">Plan d'accessibilité</a>
+          <a href="/politique-de-confidentialite" class="hover:text-targo-green transition-all">Conditions d'utilisation</a>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/apps/website-vue/src/components/layout/Header.vue b/apps/website-vue/src/components/layout/Header.vue
new file mode 100644
index 0000000..e245e52
--- /dev/null
+++ b/apps/website-vue/src/components/layout/Header.vue
@@ -0,0 +1,369 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from "vue";
+import { RouterLink } from "vue-router";
+import {
+  Menu, X, Phone, Mail, ChevronDown, Search, User,
+  Wifi, PhoneCall, Building2, Signal, Server, Network,
+  Cable, Cloud, Shield, Settings, Laptop, Globe,
+} from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import SearchDialog from "@/components/SearchDialog.vue";
+import targoLogo from "@/assets/targo-logo.png";
+
+// Business menu items with icons and descriptions
+const businessMenuItems = [
+  {
+    category: "CONNECTIVITÉ",
+    items: [
+      { label: "Internet affaires", href: "/business/internet", icon: Globe, description: "Connexion fibre haute vitesse pour entreprises" },
+      { label: "SD-WAN", href: "/business/sd-wan", icon: Network, description: "Réseau intelligent multi-sites" },
+      { label: "Réseaux inter-sites", href: "/business/reseau-inter-sites", icon: Cable, description: "Liaisons dédiées entre vos succursales" },
+    ],
+  },
+  {
+    category: "COMMUNICATIONS",
+    items: [
+      { label: "Téléphonie IP", href: "/business/telephonie", icon: PhoneCall, description: "Système téléphonique cloud complet" },
+      { label: "Liaisons SIP", href: "/business/sip", icon: Phone, description: "Trunks SIP pour votre PBX" },
+      { label: "Amplification cellulaire", href: "/business/amplification-cellulaire", icon: Signal, description: "Signal mobile amplifié partout" },
+    ],
+  },
+  {
+    category: "INFRASTRUCTURE",
+    items: [
+      { label: "Services cloud", href: "/business/cloud", icon: Cloud, description: "Hébergement et sauvegarde sécurisés" },
+      { label: "Virtualisation", href: "/business/virtualisation", icon: Server, description: "Infrastructure virtualisée sur mesure" },
+      { label: "Microsoft 365", href: "/business/microsoft-365", icon: Laptop, description: "Suite Microsoft pour entreprises" },
+    ],
+  },
+  {
+    category: "SERVICES",
+    items: [
+      { label: "WiFi commercial", href: "/business/wifi", icon: Wifi, description: "WiFi haute densité pour commerces" },
+      { label: "Câblage structuré", href: "/business/cablage", icon: Cable, description: "Installation réseau professionnelle" },
+      { label: "Services gérés", href: "/business/services-geres", icon: Settings, description: "Gestion TI complète externalisée" },
+      { label: "Sécurité DDoS", href: "/business/securite", icon: Shield, description: "Protection contre les cyberattaques" },
+      { label: "Multilogement", href: "/business/multilogement", icon: Building2, description: "Solutions pour immeubles résidentiels" },
+    ],
+  },
+];
+
+interface NavLink {
+  label: string;
+  href: string;
+  isMegaMenu?: boolean;
+  submenu?: { label: string; href: string }[];
+}
+
+const navLinks: NavLink[] = [
+  { label: "Internet", href: "/internet" },
+  { label: "Télévision", href: "/television" },
+  { label: "Téléphone", href: "/telephone" },
+  { label: "Affaires", href: "/business", isMegaMenu: true },
+  {
+    label: "À propos",
+    href: "/support",
+    submenu: [
+      { label: "Actualités", href: "/actualites" },
+      { label: "Support", href: "/support" },
+    ],
+  },
+];
+
+const businessMenuItemsFlat = businessMenuItems.flatMap((cat) => cat.items);
+
+const isMenuOpen = ref(false);
+const isSearchOpen = ref(false);
+const isScrolled = ref(false);
+
+const handleScroll = () => {
+  isScrolled.value = window.scrollY > 20;
+};
+
+const down = (e: KeyboardEvent) => {
+  if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+    e.preventDefault();
+    isSearchOpen.value = !isSearchOpen.value;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+  document.addEventListener("keydown", down);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+  document.removeEventListener("keydown", down);
+  document.body.style.overflow = "";
+});
+
+// Lock body scroll when mobile menu is open
+watch(isMenuOpen, (open) => {
+  if (open) {
+    document.body.style.overflow = "hidden";
+  } else {
+    document.body.style.overflow = "";
+  }
+});
+</script>
+
+<template>
+  <header :class="`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${isScrolled ? 'bg-white/90 backdrop-blur-xl shadow-2xl py-0' : 'bg-white py-0'}`">
+    <SearchDialog v-model:open="isSearchOpen" />
+    <!-- Top bar -->
+    <div
+      v-motion
+      :animate="{ height: isScrolled ? 0 : 'auto', opacity: isScrolled ? 0 : 1, transition: { duration: 300 } }"
+      class="bg-targo-green text-white py-2 px-4 shadow-md z-50 relative overflow-hidden hidden md:block"
+    >
+      <div class="container flex items-center justify-between text-xs font-semibold uppercase tracking-wider">
+        <div class="flex items-center gap-8">
+          <a href="tel:514.448.0773" class="flex items-center gap-2 hover:text-white/80 transition-colors">
+            <Phone class="w-3.5 h-3.5" />
+            <span>514.448.0773</span>
+          </a>
+          <a href="mailto:support@targo.ca" class="flex items-center gap-2 hover:text-white/80 transition-colors">
+            <Mail class="w-3.5 h-3.5" />
+            <span>support@targo.ca</span>
+          </a>
+        </div>
+        <span class="opacity-90">La puissance de la fibre locale</span>
+      </div>
+    </div>
+
+    <!-- Main nav -->
+    <nav :class="`container py-4 transition-all duration-300 ${isScrolled ? 'py-2' : 'py-4'}`">
+      <div class="flex items-center justify-between">
+        <!-- Logo -->
+        <RouterLink to="/" class="flex items-center group">
+          <img
+            :src="targoLogo"
+            alt="Targo - 100% Fibre"
+            class="transition-transform group-hover:scale-105 flex-shrink-0 object-contain"
+            :style="{ height: isScrolled ? '32px' : '40px', width: 'auto' }"
+          />
+        </RouterLink>
+
+        <!-- Desktop nav -->
+        <div class="hidden md:flex items-center gap-8">
+          <template v-for="link in navLinks" :key="link.href">
+            <Popover v-if="link.isMegaMenu">
+              <PopoverTrigger class="flex items-center gap-1 text-gray-700 hover:text-targo-green transition-colors font-medium text-sm lg:text-base outline-none">
+                {{ link.label }}
+                <ChevronDown class="h-4 w-4" />
+              </PopoverTrigger>
+              <PopoverContent
+                class="w-[800px] p-6 bg-white border-gray-100 shadow-2xl rounded-xl"
+                align="center"
+                :side-offset="20"
+              >
+                <div class="grid grid-cols-4 gap-6">
+                  <div v-for="category in businessMenuItems" :key="category.category" class="space-y-3">
+                    <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider">
+                      {{ category.category }}
+                    </h4>
+                    <div class="space-y-1">
+                      <RouterLink
+                        v-for="item in category.items"
+                        :key="item.href"
+                        :to="item.href"
+                        class="group flex items-start gap-3 p-2 rounded-lg hover:bg-gray-50 transition-colors"
+                      >
+                        <div class="w-8 h-8 rounded-md bg-targo-green/10 flex items-center justify-center flex-shrink-0 group-hover:bg-targo-green/20 transition-colors">
+                          <component :is="item.icon" class="w-4 h-4 text-targo-green" />
+                        </div>
+                        <div class="min-w-0">
+                          <div class="font-medium text-gray-900 text-sm group-hover:text-targo-green transition-colors">
+                            {{ item.label }}
+                          </div>
+                          <div class="text-xs text-gray-500 line-clamp-2">
+                            {{ item.description }}
+                          </div>
+                        </div>
+                      </RouterLink>
+                    </div>
+                  </div>
+                </div>
+                <div class="mt-6 pt-4 border-t border-gray-100">
+                  <RouterLink
+                    to="/business"
+                    class="inline-flex items-center text-sm font-medium text-targo-green hover:text-targo-green/80 transition-colors"
+                  >
+                    Voir toutes les solutions affaires
+                    <ChevronDown class="w-4 h-4 ml-1 rotate-[-90deg]" />
+                  </RouterLink>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <DropdownMenu v-else-if="link.submenu">
+              <DropdownMenuTrigger class="flex items-center gap-1 text-gray-700 hover:text-targo-green transition-colors font-medium text-sm lg:text-base outline-none">
+                {{ link.label }}
+                <ChevronDown class="h-4 w-4" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent class="bg-white border-gray-100 text-gray-800 shadow-xl">
+                <DropdownMenuItem
+                  v-for="sublink in link.submenu"
+                  :key="sublink.href"
+                  class="focus:bg-gray-50 focus:text-targo-green cursor-pointer"
+                  as-child
+                >
+                  <RouterLink :to="sublink.href" class="w-full">
+                    {{ sublink.label }}
+                  </RouterLink>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <RouterLink
+              v-else
+              :to="link.href"
+              class="text-gray-700 hover:text-targo-green transition-colors font-medium text-sm lg:text-base"
+            >
+              {{ link.label }}
+            </RouterLink>
+          </template>
+        </div>
+
+        <!-- CTA -->
+        <div class="hidden md:flex items-center gap-4">
+          <Button
+            variant="ghost"
+            size="icon"
+            class="text-gray-700 hover:text-black hover:bg-black/5"
+            @click="isSearchOpen = true"
+          >
+            <Search class="w-5 h-5" />
+          </Button>
+          <Button variant="outline" class="border-gray-200 text-gray-700 bg-transparent hover:bg-gray-100 hover:text-black backdrop-blur-sm" as-child>
+            <a href="https://store.targo.ca/clients" target="_blank" rel="noopener noreferrer">Mon compte</a>
+          </Button>
+          <Button class="gradient-targo text-white shadow-lg shadow-targo-green/20 glow-targo border-none" as-child>
+            <a href="/#contact">Nous joindre</a>
+          </Button>
+        </div>
+
+        <!-- Mobile menu button -->
+        <div class="flex items-center gap-2 md:hidden">
+          <button
+            class="p-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
+            aria-label="Search"
+            @click="isSearchOpen = true"
+          >
+            <Search class="w-6 h-6" />
+          </button>
+          <button
+            class="p-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
+            aria-label="Toggle menu"
+            @click="isMenuOpen = !isMenuOpen"
+          >
+            <X v-if="isMenuOpen" class="w-6 h-6" />
+            <Menu v-else class="w-6 h-6" />
+          </button>
+        </div>
+      </div>
+
+      <!-- Mobile menu -->
+      <Transition>
+        <div
+          v-if="isMenuOpen"
+          v-motion
+          :initial="{ height: 0, opacity: 0 }"
+          :enter="{ height: '100vh', opacity: 1 }"
+          :leave="{ height: 0, opacity: 0 }"
+          class="md:hidden overflow-y-auto bg-white absolute left-0 right-0 top-full px-6 shadow-2xl border-t border-gray-100 z-50"
+        >
+          <div class="flex flex-col gap-6 py-10">
+            <div
+              v-for="(link, idx) in navLinks"
+              :key="link.href"
+              v-motion
+              :initial="{ x: -20, opacity: 0 }"
+              :enter="{ x: 0, opacity: 1, transition: { delay: idx * 50 } }"
+            >
+              <div v-if="link.isMegaMenu" class="flex flex-col gap-4">
+                <span class="text-gray-900 font-bold text-lg">{{ link.label }}</span>
+                <div class="grid grid-cols-2 gap-3">
+                  <RouterLink
+                    v-for="item in businessMenuItemsFlat"
+                    :key="item.href"
+                    :to="item.href"
+                    class="flex items-center gap-2 text-gray-600 hover:text-targo-green transition-colors text-sm"
+                    @click="isMenuOpen = false"
+                  >
+                    <component :is="item.icon" class="w-4 h-4 text-targo-green" />
+                    {{ item.label }}
+                  </RouterLink>
+                </div>
+              </div>
+              <div v-else-if="link.submenu" class="flex flex-col gap-4">
+                <span class="text-gray-900 font-bold text-lg">{{ link.label }}</span>
+                <div class="pl-4 flex flex-col gap-4 py-2 border-l-2 border-targo-green/20">
+                  <RouterLink
+                    v-for="sublink in link.submenu"
+                    :key="sublink.href"
+                    :to="sublink.href"
+                    class="text-gray-600 hover:text-targo-green transition-colors text-base"
+                    @click="isMenuOpen = false"
+                  >
+                    {{ sublink.label }}
+                  </RouterLink>
+                </div>
+              </div>
+              <RouterLink
+                v-else
+                :to="link.href"
+                class="text-gray-900 hover:text-targo-green transition-colors font-bold text-lg"
+                @click="isMenuOpen = false"
+              >
+                {{ link.label }}
+              </RouterLink>
+            </div>
+
+            <div
+              v-motion
+              :initial="{ y: 20, opacity: 0 }"
+              :enter="{ y: 0, opacity: 1, transition: { delay: 300 } }"
+              class="flex flex-col gap-4 pt-10 border-t border-gray-100"
+            >
+              <Button variant="outline" class="w-full border-gray-200 text-gray-700 hover:bg-gray-50 bg-white h-14 text-lg font-semibold shadow-sm" as-child>
+                <a href="https://store.targo.ca/clients" target="_blank" rel="noopener noreferrer">
+                  <User class="w-5 h-5 mr-2" />
+                  Mon compte
+                </a>
+              </Button>
+              <Button class="w-full gradient-targo text-white h-14 text-lg font-bold glow-targo border-none" as-child>
+                <a href="/#contact">Nous joindre</a>
+              </Button>
+
+              <div class="flex flex-col gap-3 mt-4 text-gray-500">
+                <a href="tel:514.448.0773" class="flex items-center gap-3">
+                  <div class="w-10 h-10 rounded-full bg-targo-green/10 flex items-center justify-center">
+                    <Phone class="w-5 h-5 text-targo-green" />
+                  </div>
+                  <span class="font-semibold text-gray-900">514.448.0773</span>
+                </a>
+                <a href="mailto:support@targo.ca" class="flex items-center gap-3">
+                  <div class="w-10 h-10 rounded-full bg-targo-green/10 flex items-center justify-center">
+                    <Mail class="w-5 h-5 text-targo-green" />
+                  </div>
+                  <span class="font-semibold text-gray-900">support@targo.ca</span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </nav>
+  </header>
+</template>
diff --git a/apps/website-vue/src/components/sections/About.vue b/apps/website-vue/src/components/sections/About.vue
new file mode 100644
index 0000000..9443366
--- /dev/null
+++ b/apps/website-vue/src/components/sections/About.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { Users, MapPin, Building2, Heart } from "lucide-vue-next";
+import targoBureaux from "@/assets/targo-bureaux.jpg";
+
+const features = [{
+  icon: MapPin,
+  title: "Fibre 100% locale",
+  description: "Un réseau fibre optique indépendant, conçu et géré localement pour notre communauté."
+}, {
+  icon: Users,
+  title: "Service personnalisé",
+  description: "Une équipe dévouée qui connaît chaque client. Un service humain, proche de vous."
+}, {
+  icon: Building2,
+  title: "Économie locale",
+  description: "Nous créons des emplois de qualité et soutenons les organismes et écoles de la région."
+}, {
+  icon: Heart,
+  title: "Engagement communautaire",
+  description: "Fiers partenaires des événements locaux, nous redonnons à notre communauté."
+}];
+</script>
+
+<template>
+  <section id="apropos" class="py-20 md:py-32">
+    <div class="container">
+      <div class="grid lg:grid-cols-2 gap-16 items-center">
+        <!-- Image/Visual side -->
+        <div class="relative">
+          <div class="relative rounded-3xl overflow-hidden aspect-[4/3]">
+            <img
+              :src="targoBureaux"
+              alt="Bureaux TARGO à Sainte-Clotilde"
+              class="w-full h-full object-cover"
+            />
+          </div>
+
+          <!-- Stats card -->
+          <div class="absolute -bottom-6 -left-6 bg-card p-6 rounded-2xl shadow-xl border border-border">
+            <div class="font-display text-4xl font-bold text-primary mb-1">Ste-Clotilde</div>
+            <div class="text-muted-foreground">Québec, Canada</div>
+          </div>
+        </div>
+
+        <!-- Content side -->
+        <div class="space-y-8">
+          <div>
+            <span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
+              À propos
+            </span>
+            <h2 class="font-display text-4xl md:text-5xl font-bold mb-6">
+              100% fibre <span class="text-gradient-targo">locale</span>
+            </h2>
+            <p class="text-muted-foreground text-lg mb-4">
+              Fondée il y a 20 ans par un citoyen local, TARGO est née pour connecter les citoyens d'ici,
+              à une époque où les grands fournisseurs ne s'y intéressaient pas. Au fil des années, nous avons
+              branché des milliers de familles et d'entreprises de la région, en offrant une connexion fiable
+              et des prix stables.
+            </p>
+            <p class="text-muted-foreground">
+              En choisissant TARGO, vous soutenez un service local qui réinvestit chaque année plus de
+              100 000 $ dans la communauté et favorise l'embauche de talents d'ici, incluant des emplois
+              d'été et des postes liés à l'innovation.
+            </p>
+          </div>
+
+          <!-- Features grid -->
+          <div class="grid sm:grid-cols-2 gap-6 pt-4">
+            <div v-for="feature in features" :key="feature.title" class="flex gap-4">
+              <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
+                <component :is="feature.icon" class="w-6 h-6 text-primary" />
+              </div>
+              <div>
+                <h3 class="font-display font-semibold mb-1">{{ feature.title }}</h3>
+                <p class="text-sm text-muted-foreground">{{ feature.description }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/website-vue/src/components/sections/Clients.vue b/apps/website-vue/src/components/sections/Clients.vue
new file mode 100644
index 0000000..d1d923d
--- /dev/null
+++ b/apps/website-vue/src/components/sections/Clients.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const clients = [
+  "La Prairie",
+  "Parc Safari",
+  "Vegpro Int'l",
+  "IGA",
+  "Sobeys",
+  "ASFC Canada",
+];
+</script>
+
+<template>
+  <section class="py-16 border-y border-border bg-muted/30">
+    <div class="container">
+      <div class="text-center mb-12">
+        <h3 class="font-display text-2xl font-bold mb-2">
+          Des milliers de clients font notre référence
+        </h3>
+        <p class="text-muted-foreground">
+          TARGO est devenue incontournable pour les communications de plusieurs milliers de clients
+        </p>
+      </div>
+
+      <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
+        <div
+          v-for="client in clients"
+          :key="client"
+          class="px-6 py-3 bg-card rounded-lg border border-border text-muted-foreground font-medium hover:text-primary hover:border-primary/50 transition-colors"
+        >
+          {{ client }}
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/website-vue/src/components/sections/Contact.vue b/apps/website-vue/src/components/sections/Contact.vue
new file mode 100644
index 0000000..fdbc0a0
--- /dev/null
+++ b/apps/website-vue/src/components/sections/Contact.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { Phone, Mail, MapPin, Clock, Send } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { ref } from "vue";
+import { useToast } from "@/components/ui/toast/use-toast";
+
+const contactInfo = [
+  {
+    icon: Phone,
+    label: "Téléphone",
+    value: "1-855-88-TARGO",
+    subValue: "514-448-0773",
+  },
+  {
+    icon: Mail,
+    label: "Courriel",
+    value: "support@targo.ca",
+  },
+  {
+    icon: MapPin,
+    label: "Adresse",
+    value: "1867 chemin de la rivière",
+    subValue: "Ste-Clotilde, Québec J0L 1W0",
+  },
+  {
+    icon: Clock,
+    label: "Heures d'ouverture",
+    value: "Lun-Ven: 8h00 – 20h00",
+    subValue: "Sam-Dim: 8h00 – 16h00",
+  },
+];
+
+const { toast } = useToast();
+const formData = ref({
+  name: "",
+  address: "",
+  postalCode: "",
+  email: "",
+  phone: "",
+  message: "",
+});
+
+const sending = ref(false);
+
+const handleSubmit = async () => {
+  sending.value = true;
+  try {
+    await fetch("/rpc/contact", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(formData.value),
+    });
+    toast({
+      title: "Message envoyé!",
+      description: "Nous vous répondrons dans les plus brefs délais.",
+    });
+    formData.value = { name: "", address: "", postalCode: "", email: "", phone: "", message: "" };
+  } catch {
+    toast({ title: "Erreur", description: "Impossible d'envoyer. Réessayez ou appelez-nous.", variant: "destructive" });
+  }
+  sending.value = false;
+};
+</script>
+
+<template>
+  <section id="contact" class="py-20 md:py-32 bg-secondary/30">
+    <div class="container">
+      <div class="text-center max-w-2xl mx-auto mb-16">
+        <span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
+          Contactez-nous
+        </span>
+        <h2 class="font-display text-4xl md:text-5xl font-bold mb-4">
+          On aime <span class="text-gradient-targo">aider</span>
+        </h2>
+        <p class="text-muted-foreground text-lg">
+          Nous vous invitons à nous contacter pour bien évaluer votre situation
+          et vous faire profiter des meilleurs forfaits.
+        </p>
+      </div>
+
+      <div class="grid lg:grid-cols-5 gap-12">
+        <!-- Contact form -->
+        <div class="lg:col-span-3">
+          <form @submit.prevent="handleSubmit" class="bg-card rounded-3xl p-8 shadow-lg border border-border">
+            <div class="grid sm:grid-cols-2 gap-6 mb-6">
+              <div class="space-y-2">
+                <label for="name" class="text-sm font-medium">Nom</label>
+                <Input
+                  id="name"
+                  name="name"
+                  placeholder="Votre nom"
+                  v-model="formData.name"
+                  required
+                />
+              </div>
+              <div class="space-y-2">
+                <label for="email" class="text-sm font-medium">Courriel</label>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  placeholder="votre@courriel.com"
+                  v-model="formData.email"
+                  required
+                />
+              </div>
+            </div>
+
+            <div class="grid sm:grid-cols-2 gap-6 mb-6">
+              <div class="space-y-2">
+                <label for="address" class="text-sm font-medium">Adresse (où le service est livré)</label>
+                <Input
+                  id="address"
+                  name="address"
+                  placeholder="123 rue Principale"
+                  v-model="formData.address"
+                  required
+                />
+              </div>
+              <div class="space-y-2">
+                <label for="postalCode" class="text-sm font-medium">Code postal</label>
+                <Input
+                  id="postalCode"
+                  name="postalCode"
+                  placeholder="J0L 1W0"
+                  v-model="formData.postalCode"
+                  required
+                />
+              </div>
+            </div>
+
+            <div class="space-y-2 mb-6">
+              <label for="phone" class="text-sm font-medium">Téléphone</label>
+              <Input
+                id="phone"
+                name="phone"
+                type="tel"
+                placeholder="514-000-0000"
+                v-model="formData.phone"
+              />
+            </div>
+
+            <div class="space-y-2 mb-6">
+              <label for="message" class="text-sm font-medium">Message</label>
+              <Textarea
+                id="message"
+                name="message"
+                placeholder="Comment pouvons-nous vous aider?"
+                :rows="4"
+                v-model="formData.message"
+                required
+              />
+            </div>
+
+            <Button type="submit" size="lg" class="w-full gradient-targo">
+              <Send class="w-5 h-5 mr-2" />
+              Envoyer
+            </Button>
+          </form>
+        </div>
+
+        <!-- Contact info -->
+        <div class="lg:col-span-2 space-y-6">
+          <div v-for="item in contactInfo" :key="item.label" class="flex gap-4 p-4 bg-card rounded-2xl border border-border">
+            <div class="w-12 h-12 rounded-xl gradient-targo flex items-center justify-center flex-shrink-0">
+              <component :is="item.icon" class="w-6 h-6 text-primary-foreground" />
+            </div>
+            <div>
+              <div class="text-sm text-muted-foreground mb-1">{{ item.label }}</div>
+              <div class="font-medium">{{ item.value }}</div>
+              <div v-if="item.subValue" class="text-sm text-muted-foreground">{{ item.subValue }}</div>
+            </div>
+          </div>
+
+          <div class="p-6 bg-primary/10 rounded-2xl">
+            <div class="font-display font-semibold mb-2">Surveillance 24/7/365</div>
+            <p class="text-sm text-muted-foreground">
+              Notre équipe surveille le réseau et répond aux urgences 24 heures sur 24,
+              7 jours sur 7, toute l'année.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/website-vue/src/components/sections/Hero.vue b/apps/website-vue/src/components/sections/Hero.vue
new file mode 100644
index 0000000..4eb1323
--- /dev/null
+++ b/apps/website-vue/src/components/sections/Hero.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { ArrowRight, Shield, Zap, Clock } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import heroFamily from "@/assets/hero-family-3d.png";
+import AvailabilityDialog from "@/components/AvailabilityDialog.vue";
+
+const availOpen = ref(false);
+</script>
+
+<template>
+  <section id="accueil" class="relative pt-48 pb-24 md:pt-56 md:pb-40 overflow-hidden bg-white">
+    <!-- Decorative background gradients -->
+    <div class="absolute top-0 left-1/4 w-[600px] h-[600px] bg-targo-green/5 rounded-full blur-[120px] -translate-y-1/2 pointer-events-none" />
+    <div class="absolute bottom-0 right-0 w-[800px] h-[800px] bg-targo-green/5 rounded-full blur-[150px] translate-y-1/2 translate-x-1/2 pointer-events-none" />
+
+
+
+    <div class="container relative">
+      <div class="grid lg:grid-cols-2 gap-12 items-center">
+        <!-- Content -->
+        <div class="space-y-10 relative z-10">
+          <div
+            v-motion
+            :initial="{ opacity: 0, y: 20 }"
+            :enter="{ opacity: 1, y: 0, transition: { duration: 600 } }"
+            class="inline-flex items-center gap-3 px-4 py-2 bg-targo-green/10 rounded-full text-targo-green-dark font-bold text-xs uppercase tracking-widest"
+          >
+            <div class="w-2 h-2 rounded-full bg-targo-green animate-pulse" />
+            <span>Réseau 100% Fibre Optique Locale</span>
+          </div>
+          <div class="space-y-4">
+            <h1
+              v-motion
+              :initial="{ opacity: 0, x: -30 }"
+              :enter="{ opacity: 1, x: 0, transition: { duration: 800, delay: 200 } }"
+              class="font-display text-6xl md:text-7xl lg:text-8xl font-black leading-[0.9] tracking-tighter text-foreground"
+            >
+              Le futur est
+              <br />
+              <span class="text-gradient-targo">branché ici.</span>
+            </h1>
+
+            <p
+              v-motion
+              :initial="{ opacity: 0 }"
+              :enter="{ opacity: 1, transition: { duration: 1000, delay: 400 } }"
+              class="text-xl text-muted-foreground max-w-lg leading-relaxed font-sans"
+            >
+              Vitesse Gigabit, fiabilité absolue et service régional.
+              Découvrez la puissance de la fibre optique de nouvelle génération.
+            </p>
+          </div>
+
+          <div
+            v-motion
+            :initial="{ opacity: 0, y: 30 }"
+            :enter="{ opacity: 1, y: 0, transition: { duration: 600, delay: 600 } }"
+            class="flex flex-col sm:flex-row gap-4"
+          >
+            <Button size="lg" class="gradient-targo text-lg px-8 py-7 glow-targo group h-16 sm:h-auto">
+              Voir nos forfaits
+              <ArrowRight class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
+            </Button>
+            <Button size="lg" variant="outline" @click="availOpen = true" class="text-lg px-8 py-7 border-2 border-border text-foreground hover:border-targo-green hover:text-targo-green hover:bg-targo-green/5 h-16 sm:h-auto transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
+              Vérifier la disponibilité
+            </Button>
+            <AvailabilityDialog v-model:open="availOpen" />
+          </div>
+
+          <!-- Trust indicators -->
+          <div
+            v-motion
+            :initial="{ opacity: 0 }"
+            :enter="{ opacity: 1, transition: { duration: 1000, delay: 800 } }"
+            class="grid grid-cols-3 gap-8 pt-8 border-t border-border"
+          >
+            <div class="space-y-1">
+              <div class="font-display text-4xl font-black text-foreground">20+</div>
+              <div class="text-[10px] uppercase font-bold tracking-widest text-muted-foreground">Années d'expertise</div>
+            </div>
+            <div class="space-y-1">
+              <div class="font-display text-4xl font-black text-foreground">10k+</div>
+              <div class="text-[10px] uppercase font-bold tracking-widest text-muted-foreground">Clients satisfaits</div>
+            </div>
+            <div class="space-y-1">
+              <div class="font-display text-4xl font-black text-foreground">7j/7</div>
+              <div class="text-[10px] uppercase font-bold tracking-widest text-muted-foreground">Support Local</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Visual -->
+        <div class="relative hidden lg:block">
+          <div
+            v-motion
+            :initial="{ opacity: 0, scale: 0.9, x: 50 }"
+            :enter="{ opacity: 1, scale: 1, x: 0, transition: { duration: 1000, delay: 300 } }"
+            class="relative w-full max-w-xl mx-auto"
+          >
+            <div class="relative">
+              <img :src="heroFamily" alt="Famille heureuse profitant de la télévision et d'Internet" class="w-full h-auto object-cover" />
+            </div>
+
+            <!-- Floating Elements (Glassmorphism) -->
+            <div
+              v-motion
+              :initial="{ y: 0 }"
+              :enter="{ y: [0, -10, 0], transition: { duration: 4000, repeat: Infinity, ease: 'easeInOut' } }"
+              class="absolute -top-6 -left-6 glass-card px-6 py-4 rounded-3xl z-20"
+            >
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl bg-targo-green/20 flex items-center justify-center">
+                  <Zap class="w-5 h-5 text-targo-green" />
+                </div>
+                <div>
+                  <div class="text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Vitesse</div>
+                  <div class="font-display font-black text-foreground">Gigabit+</div>
+                </div>
+              </div>
+            </div>
+
+            <div
+              v-motion
+              :initial="{ y: 0 }"
+              :enter="{ y: [0, 10, 0], transition: { duration: 5000, repeat: Infinity, ease: 'easeInOut' } }"
+              class="absolute top-1/2 -right-10 glass-card px-6 py-4 rounded-3xl z-20"
+            >
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl bg-targo-green/20 flex items-center justify-center">
+                  <Shield class="w-5 h-5 text-targo-green" />
+                </div>
+                <div>
+                  <div class="text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Réseau</div>
+                  <div class="font-display font-black text-foreground">Sécurisé</div>
+                </div>
+              </div>
+            </div>
+
+            <div
+              v-motion
+              :initial="{ x: 0 }"
+              :enter="{ x: [0, 5, 0], transition: { duration: 6000, repeat: Infinity, ease: 'easeInOut' } }"
+              class="absolute -bottom-6 left-1/4 glass-card px-6 py-4 rounded-3xl z-20"
+            >
+              <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl bg-targo-green/20 flex items-center justify-center">
+                  <Clock class="w-5 h-5 text-targo-green" />
+                </div>
+                <div class="flex items-center gap-2">
+                  <div class="text-[10px] uppercase font-bold text-muted-foreground tracking-wider">Support</div>
+                  <div class="font-display font-black text-foreground">Local 7j/7</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/website-vue/src/components/sections/Pricing.vue b/apps/website-vue/src/components/sections/Pricing.vue
new file mode 100644
index 0000000..e8ed8b7
--- /dev/null
+++ b/apps/website-vue/src/components/sections/Pricing.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { CheckCircle, ArrowRight } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+
+interface PricingTier {
+  name: string;
+  price: string;
+  description: string;
+  features: string[];
+  popular?: boolean;
+  promo?: string;
+}
+
+withDefaults(defineProps<{
+  title?: string;
+  subtitle?: string;
+  tiers: PricingTier[];
+}>(), {
+  title: "Nos forfaits",
+  subtitle: "Simple et transparent",
+});
+</script>
+
+<template>
+  <section class="py-16 md:py-24 bg-muted/30">
+    <div class="container mx-auto px-4">
+      <div v-if="title || subtitle" class="text-center max-w-2xl mx-auto mb-12">
+        <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4 font-display">{{ title }}</h2>
+        <p class="text-muted-foreground">{{ subtitle }}</p>
+      </div>
+
+      <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+        <Card
+          v-for="(tier, index) in tiers"
+          :key="index"
+          :class="`relative ${tier.popular ? 'border-primary border-2 shadow-xl' : ''}`"
+        >
+          <span v-if="tier.popular" class="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium">
+            Recommandé
+          </span>
+
+          <CardHeader class="text-center pt-8">
+            <CardTitle class="text-2xl">{{ tier.name }}</CardTitle>
+            <CardDescription>{{ tier.description }}</CardDescription>
+            <div class="mt-4">
+              <span class="text-4xl font-bold text-primary">{{ tier.price }}</span>
+              <span class="text-muted-foreground text-sm">/mois</span>
+            </div>
+          </CardHeader>
+
+          <CardContent>
+            <ul class="space-y-3 mb-6">
+              <li v-for="(feature, i) in tier.features" :key="i" class="flex items-start gap-3 text-sm text-muted-foreground">
+                <CheckCircle class="w-5 h-5 text-primary flex-shrink-0" />
+                <span>{{ feature }}</span>
+              </li>
+            </ul>
+
+            <Button
+              class="w-full"
+              :variant="tier.popular ? 'default' : 'outline'"
+              as-child
+            >
+              <a href="/#contact">Choisir ce forfait <ArrowRight class="w-4 h-4 ml-2" /></a>
+            </Button>
+            <p v-if="tier.promo" class="text-xs text-primary text-center font-medium mt-4">
+              {{ tier.promo }}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/apps/website-vue/src/components/sections/Services.vue b/apps/website-vue/src/components/sections/Services.vue
new file mode 100644
index 0000000..2d6ecdb
--- /dev/null
+++ b/apps/website-vue/src/components/sections/Services.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { Wifi, Tv, Phone, ArrowRight, Check } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { RouterLink } from "vue-router";
+
+const services = [{
+  icon: Wifi,
+  title: "Internet",
+  description: "La meilleure connexion sur la fibre",
+  price: 39.95,
+  unit: "/mois",
+  features: ["Vitesse jusqu'à 1.5 Gbps", "Données illimitées", "WiFi et support inclus"],
+  popular: true,
+  link: "/internet"
+}, {
+  icon: Tv,
+  title: "Télévision",
+  description: "La télé allumée par la fibre",
+  price: 25,
+  unit: "/mois +tx",
+  features: ["80+ chaînes HD", "Récepteur fourni", "Enregistrement numérique"],
+  popular: false,
+  link: "/television"
+}, {
+  icon: Phone,
+  title: "Téléphone",
+  description: "Ligne résidentielle, tout inclus",
+  price: 10,
+  unit: "/mois +tx",
+  features: ["Appels illimités", "Canada et États-Unis", "Afficheur inclus"],
+  popular: false,
+  link: "/telephone"
+}];
+
+const centsOf = (price: number) => ((price % 1) * 100).toFixed(0).padStart(2, "0");
+</script>
+
+<template>
+  <section id="services" class="py-24 md:py-40 bg-gradient-to-br from-secondary via-background to-secondary relative overflow-hidden">
+    <!-- Decorative background gradients -->
+    <div class="absolute top-1/2 left-0 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] -translate-x-1/2 pointer-events-none" />
+
+    <div class="container">
+      <!-- Section header -->
+      <div class="text-center max-w-2xl mx-auto mb-16">
+        <span
+          v-motion
+          :initial="{ opacity: 0, y: 10 }"
+          :visible-once="{ opacity: 1, y: 0 }"
+          class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4"
+        >
+          Nos solutions fibre
+        </span>
+        <h2
+          v-motion
+          :initial="{ opacity: 0, y: 20 }"
+          :visible-once="{ opacity: 1, y: 0, transition: { delay: 100 } }"
+          class="font-display text-4xl md:text-5xl font-bold mb-6"
+        >
+          Des forfaits pour <span class="text-gradient-targo">tous les besoins</span>
+        </h2>
+        <p
+          v-motion
+          :initial="{ opacity: 0 }"
+          :visible-once="{ opacity: 1, transition: { delay: 200 } }"
+          class="text-muted-foreground text-lg leading-relaxed"
+        >
+          Internet haute vitesse, télévision HD et téléphonie résidentielle.
+          Le tout alimenté par notre réseau 100% fibre optique régional.
+        </p>
+      </div>
+
+      <!-- Service cards -->
+      <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+        <div
+          v-for="(service, index) in services"
+          :key="service.title"
+          v-motion
+          :initial="{ opacity: 0, y: 30 }"
+          :visible-once="{ opacity: 1, y: 0, transition: { delay: index * 100 } }"
+        >
+          <Card :class="`relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 ${
+            service.popular ? 'border-primary shadow-lg ring-2 ring-primary/20' : ''
+          }`">
+            <div v-if="service.popular" class="absolute top-4 right-4 z-10 px-3 py-1 gradient-targo text-primary-foreground text-xs font-medium rounded-full">
+              Populaire
+            </div>
+
+            <CardContent class="p-8 flex flex-col h-full">
+              <div :class="`w-14 h-14 rounded-2xl flex items-center justify-center mb-6 ${
+                service.popular ? 'gradient-targo text-primary-foreground' : 'bg-primary/10 text-primary'
+              }`">
+                <component :is="service.icon" class="w-7 h-7" />
+              </div>
+
+              <h3 class="font-display text-2xl font-bold mb-2">{{ service.title }}</h3>
+              <p class="text-muted-foreground text-sm mb-6 min-h-[40px]">{{ service.description }}</p>
+
+              <div class="flex items-baseline gap-1">
+                <span class="font-display text-5xl font-bold text-primary">
+                  ${{ Math.floor(service.price) }}
+                  <sup class="text-2xl">.{{ centsOf(service.price) }}</sup>
+                </span>
+                <span class="text-muted-foreground text-sm">{{ service.unit }}</span>
+              </div>
+              <p class="text-sm text-muted-foreground mb-4">à partir de</p>
+
+              <ul class="space-y-3 mb-8 flex-grow mt-4">
+                <li v-for="feature in service.features" :key="feature" class="flex items-center gap-3">
+                  <div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+                    <Check class="w-3 h-3 text-primary" />
+                  </div>
+                  <span class="text-sm text-muted-foreground">{{ feature }}</span>
+                </li>
+              </ul>
+
+              <div class="mt-auto">
+                <Button
+                  as-child
+                  :class="`w-full ${service.popular ? 'gradient-targo' : ''}`"
+                  :variant="service.popular ? 'default' : 'outline'"
+                >
+                  <RouterLink :to="service.link">
+                    Voir les détails
+                    <ArrowRight class="w-4 h-4 ml-2" />
+                  </RouterLink>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      <!-- Note -->
+      <p class="text-center text-sm text-muted-foreground mt-12 max-w-2xl mx-auto">
+        Les technologies et promotions disponibles varient parfois entre deux voisins.
+        Contactez-nous pour évaluer votre situation et obtenir le meilleur forfait pour vous.
+      </p>
+    </div>
+  </section>
+</template>
diff --git a/apps/website-vue/src/components/ui/GlassCard.vue b/apps/website-vue/src/components/ui/GlassCard.vue
new file mode 100644
index 0000000..406a002
--- /dev/null
+++ b/apps/website-vue/src/components/ui/GlassCard.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(
+  defineProps<{ class?: string; hoverEffect?: boolean }>(),
+  { hoverEffect: true },
+);
+</script>
+
+<template>
+  <div
+    v-motion
+    :initial="{ opacity: 0, y: 20 }"
+    :visible-once="{ opacity: 1, y: 0, transition: { duration: 500 } }"
+    :hovered="props.hoverEffect ? { scale: 1.02, transition: { duration: 200 } } : {}"
+    :class="cn(
+      'relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-6 backdrop-blur-md shadow-xl',
+      props.class,
+    )"
+  >
+    <div class="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none" />
+    <div class="relative z-10">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/Logo.vue b/apps/website-vue/src/components/ui/Logo.vue
new file mode 100644
index 0000000..de2bbb7
--- /dev/null
+++ b/apps/website-vue/src/components/ui/Logo.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{ class?: string; variant?: "default" | "white" }>(),
+  { class: "h-10", variant: "default" },
+);
+</script>
+
+<template>
+  <svg
+    viewBox="0 0 400 120"
+    :class="$props.class"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+  >
+    <path
+      d="M40 20 H100 M70 20 V100"
+      :stroke="variant === 'white' ? 'white' : '#00C853'"
+      stroke-width="12"
+      stroke-linecap="round"
+    />
+    <path
+      d="M120 100 L150 20 L180 100 M135 70 H165"
+      :stroke="variant === 'white' ? 'white' : '#00C853'"
+      stroke-width="12"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M200 100 V20 H250 A30 30 0 0 1 250 80 H200 M250 80 L280 100"
+      :stroke="variant === 'white' ? 'white' : '#00C853'"
+      stroke-width="12"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M300 20 H360 V100 H300 V60 H350"
+      :stroke="variant === 'white' ? 'white' : '#00C853'"
+      stroke-width="12"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M380 60 A40 40 0 1 1 380 59"
+      :stroke="variant === 'white' ? 'white' : '#00C853'"
+      stroke-width="12"
+      stroke-linecap="round"
+    />
+  </svg>
+</template>
diff --git a/apps/website-vue/src/components/ui/accordion/Accordion.vue b/apps/website-vue/src/components/ui/accordion/Accordion.vue
new file mode 100644
index 0000000..6f233fc
--- /dev/null
+++ b/apps/website-vue/src/components/ui/accordion/Accordion.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from "reka-ui"
+import {
+  AccordionRoot,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/accordion/AccordionContent.vue b/apps/website-vue/src/components/ui/accordion/AccordionContent.vue
new file mode 100644
index 0000000..fccb734
--- /dev/null
+++ b/apps/website-vue/src/components/ui/accordion/AccordionContent.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AccordionContent } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>
diff --git a/apps/website-vue/src/components/ui/accordion/AccordionItem.vue b/apps/website-vue/src/components/ui/accordion/AccordionItem.vue
new file mode 100644
index 0000000..0866cf1
--- /dev/null
+++ b/apps/website-vue/src/components/ui/accordion/AccordionItem.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AccordionItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    v-bind="forwardedProps"
+    :class="cn('border-b', props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/accordion/AccordionTrigger.vue b/apps/website-vue/src/components/ui/accordion/AccordionTrigger.vue
new file mode 100644
index 0000000..4fa20cd
--- /dev/null
+++ b/apps/website-vue/src/components/ui/accordion/AccordionTrigger.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import {
+  AccordionHeader,
+  AccordionTrigger,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown
+          class="h-4 w-4 shrink-0 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>
diff --git a/apps/website-vue/src/components/ui/accordion/index.ts b/apps/website-vue/src/components/ui/accordion/index.ts
new file mode 100644
index 0000000..b18018b
--- /dev/null
+++ b/apps/website-vue/src/components/ui/accordion/index.ts
@@ -0,0 +1,4 @@
+export { default as Accordion } from "./Accordion.vue"
+export { default as AccordionContent } from "./AccordionContent.vue"
+export { default as AccordionItem } from "./AccordionItem.vue"
+export { default as AccordionTrigger } from "./AccordionTrigger.vue"
diff --git a/apps/website-vue/src/components/ui/alert-dialog/AlertDialog.vue b/apps/website-vue/src/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 0000000..ff9accb
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
+import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/alert-dialog/AlertDialogAction.vue b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 0000000..09cf6fc
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogAction } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/apps/website-vue/src/components/ui/alert-dialog/AlertDialogCancel.vue b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 0000000..e261894
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogCancel } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/apps/website-vue/src/components/ui/alert-dialog/AlertDialogContent.vue b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 0000000..539d8f5
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/alert-dialog/AlertDialogDescription.vue b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 0000000..d7cb621
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { AlertDialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogDescription,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/apps/website-vue/src/components/ui/alert-dialog/AlertDialogFooter.vue b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 0000000..c764e73
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/alert-dialog/AlertDialogHeader.vue b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 0000000..b5e5540
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/alert-dialog/AlertDialogTitle.vue b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 0000000..b829392
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/apps/website-vue/src/components/ui/alert-dialog/AlertDialogTrigger.vue b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 0000000..f104dcc
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from "reka-ui"
+import { AlertDialogTrigger } from "reka-ui"
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/alert-dialog/index.ts b/apps/website-vue/src/components/ui/alert-dialog/index.ts
new file mode 100644
index 0000000..cf1b45d
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "./AlertDialog.vue"
+export { default as AlertDialogAction } from "./AlertDialogAction.vue"
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
+export { default as AlertDialogContent } from "./AlertDialogContent.vue"
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
diff --git a/apps/website-vue/src/components/ui/alert/Alert.vue b/apps/website-vue/src/components/ui/alert/Alert.vue
new file mode 100644
index 0000000..9feea31
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert/Alert.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AlertVariants } from "."
+import { cn } from "@/lib/utils"
+import { alertVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: AlertVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/alert/AlertDescription.vue b/apps/website-vue/src/components/ui/alert/AlertDescription.vue
new file mode 100644
index 0000000..afeaa01
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert/AlertDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/alert/AlertTitle.vue b/apps/website-vue/src/components/ui/alert/AlertTitle.vue
new file mode 100644
index 0000000..1f98d11
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert/AlertTitle.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>
diff --git a/apps/website-vue/src/components/ui/alert/index.ts b/apps/website-vue/src/components/ui/alert/index.ts
new file mode 100644
index 0000000..1106fd0
--- /dev/null
+++ b/apps/website-vue/src/components/ui/alert/index.ts
@@ -0,0 +1,24 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Alert } from "./Alert.vue"
+export { default as AlertDescription } from "./AlertDescription.vue"
+export { default as AlertTitle } from "./AlertTitle.vue"
+
+export const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/apps/website-vue/src/components/ui/aspect-ratio/AspectRatio.vue b/apps/website-vue/src/components/ui/aspect-ratio/AspectRatio.vue
new file mode 100644
index 0000000..e8f239a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/aspect-ratio/AspectRatio.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AspectRatioProps } from "reka-ui"
+import { AspectRatio } from "reka-ui"
+
+const props = defineProps<AspectRatioProps>()
+</script>
+
+<template>
+  <AspectRatio v-bind="props">
+    <slot />
+  </AspectRatio>
+</template>
diff --git a/apps/website-vue/src/components/ui/aspect-ratio/index.ts b/apps/website-vue/src/components/ui/aspect-ratio/index.ts
new file mode 100644
index 0000000..e658f55
--- /dev/null
+++ b/apps/website-vue/src/components/ui/aspect-ratio/index.ts
@@ -0,0 +1 @@
+export { default as AspectRatio } from "./AspectRatio.vue"
diff --git a/apps/website-vue/src/components/ui/avatar/Avatar.vue b/apps/website-vue/src/components/ui/avatar/Avatar.vue
new file mode 100644
index 0000000..cf99fb5
--- /dev/null
+++ b/apps/website-vue/src/components/ui/avatar/Avatar.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AvatarVariants } from "."
+import { AvatarRoot } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { avatarVariant } from "."
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes["class"]
+  size?: AvatarVariants["size"]
+  shape?: AvatarVariants["shape"]
+}>(), {
+  size: "sm",
+  shape: "circle",
+})
+</script>
+
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/avatar/AvatarFallback.vue b/apps/website-vue/src/components/ui/avatar/AvatarFallback.vue
new file mode 100644
index 0000000..c00c6a0
--- /dev/null
+++ b/apps/website-vue/src/components/ui/avatar/AvatarFallback.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from "reka-ui"
+import { AvatarFallback } from "reka-ui"
+
+const props = defineProps<AvatarFallbackProps>()
+</script>
+
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
diff --git a/apps/website-vue/src/components/ui/avatar/AvatarImage.vue b/apps/website-vue/src/components/ui/avatar/AvatarImage.vue
new file mode 100644
index 0000000..390f224
--- /dev/null
+++ b/apps/website-vue/src/components/ui/avatar/AvatarImage.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from "reka-ui"
+import { AvatarImage } from "reka-ui"
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover">
+    <slot />
+  </AvatarImage>
+</template>
diff --git a/apps/website-vue/src/components/ui/avatar/index.ts b/apps/website-vue/src/components/ui/avatar/index.ts
new file mode 100644
index 0000000..da44253
--- /dev/null
+++ b/apps/website-vue/src/components/ui/avatar/index.ts
@@ -0,0 +1,25 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Avatar } from "./Avatar.vue"
+export { default as AvatarFallback } from "./AvatarFallback.vue"
+export { default as AvatarImage } from "./AvatarImage.vue"
+
+export const avatarVariant = cva(
+  "inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden",
+  {
+    variants: {
+      size: {
+        sm: "h-10 w-10 text-xs",
+        base: "h-16 w-16 text-2xl",
+        lg: "h-32 w-32 text-5xl",
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-md",
+      },
+    },
+  },
+)
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>
diff --git a/apps/website-vue/src/components/ui/badge/Badge.vue b/apps/website-vue/src/components/ui/badge/Badge.vue
new file mode 100644
index 0000000..0374568
--- /dev/null
+++ b/apps/website-vue/src/components/ui/badge/Badge.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { BadgeVariants } from "."
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "."
+
+const props = defineProps<{
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/badge/index.ts b/apps/website-vue/src/components/ui/badge/index.ts
new file mode 100644
index 0000000..98a768d
--- /dev/null
+++ b/apps/website-vue/src/components/ui/badge/index.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Badge } from "./Badge.vue"
+
+export const badgeVariants = cva(
+  "inline-flex gap-1 items-center rounded-full 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 hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/apps/website-vue/src/components/ui/breadcrumb/Breadcrumb.vue b/apps/website-vue/src/components/ui/breadcrumb/Breadcrumb.vue
new file mode 100644
index 0000000..b4fc008
--- /dev/null
+++ b/apps/website-vue/src/components/ui/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>
diff --git a/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 0000000..5bb8fa7
--- /dev/null
+++ b/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { MoreHorizontal } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
diff --git a/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbItem.vue b/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 0000000..dcdd26e
--- /dev/null
+++ b/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbLink.vue b/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 0000000..d61232f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbList.vue b/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 0000000..06ba68f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ol
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
diff --git a/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbPage.vue b/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 0000000..64e61b9
--- /dev/null
+++ b/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbSeparator.vue b/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 0000000..086c746
--- /dev/null
+++ b/apps/website-vue/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { ChevronRight } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
diff --git a/apps/website-vue/src/components/ui/breadcrumb/index.ts b/apps/website-vue/src/components/ui/breadcrumb/index.ts
new file mode 100644
index 0000000..f4eafdc
--- /dev/null
+++ b/apps/website-vue/src/components/ui/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from "./Breadcrumb.vue"
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
+export { default as BreadcrumbList } from "./BreadcrumbList.vue"
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"
diff --git a/apps/website-vue/src/components/ui/button/Button.vue b/apps/website-vue/src/components/ui/button/Button.vue
new file mode 100644
index 0000000..3330ec9
--- /dev/null
+++ b/apps/website-vue/src/components/ui/button/Button.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/apps/website-vue/src/components/ui/button/index.ts b/apps/website-vue/src/components/ui/button/index.ts
new file mode 100644
index 0000000..92a950c
--- /dev/null
+++ b/apps/website-vue/src/components/ui/button/index.ts
@@ -0,0 +1,37 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Button } from "./Button.vue"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-10 px-4 py-2",
+        "sm": "h-9 rounded-md px-3",
+        "lg": "h-11 rounded-md px-8",
+        "icon": "h-10 w-10",
+        "icon-sm": "size-9",
+        "icon-lg": "size-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/apps/website-vue/src/components/ui/calendar/Calendar.vue b/apps/website-vue/src/components/ui/calendar/Calendar.vue
new file mode 100644
index 0000000..d112cf3
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/Calendar.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { CalendarRootEmits, CalendarRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "."
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/calendar/CalendarCell.vue b/apps/website-vue/src/components/ui/calendar/CalendarCell.vue
new file mode 100644
index 0000000..d11a211
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/CalendarCell.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { CalendarCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
diff --git a/apps/website-vue/src/components/ui/calendar/CalendarCellTrigger.vue b/apps/website-vue/src/components/ui/calendar/CalendarCellTrigger.vue
new file mode 100644
index 0000000..6a38084
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { CalendarCellTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCellTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-9 w-9 p-0 font-normal',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/calendar/CalendarGrid.vue b/apps/website-vue/src/components/ui/calendar/CalendarGrid.vue
new file mode 100644
index 0000000..5f52519
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/CalendarGrid.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { CalendarGridProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarGrid, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
diff --git a/apps/website-vue/src/components/ui/calendar/CalendarGridBody.vue b/apps/website-vue/src/components/ui/calendar/CalendarGridBody.vue
new file mode 100644
index 0000000..4fe36d7
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/CalendarGridBody.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { CalendarGridBodyProps } from "reka-ui"
+import { CalendarGridBody } from "reka-ui"
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>
diff --git a/apps/website-vue/src/components/ui/calendar/CalendarGridHead.vue b/apps/website-vue/src/components/ui/calendar/CalendarGridHead.vue
new file mode 100644
index 0000000..9f96027
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/CalendarGridHead.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { CalendarGridHeadProps } from "reka-ui"
+import { CalendarGridHead } from "reka-ui"
+
+const props = defineProps<CalendarGridHeadProps>()
+</script>
+
+<template>
+  <CalendarGridHead v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>
diff --git a/apps/website-vue/src/components/ui/calendar/CalendarGridRow.vue b/apps/website-vue/src/components/ui/calendar/CalendarGridRow.vue
new file mode 100644
index 0000000..ae99082
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/CalendarGridRow.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { CalendarGridRowProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarGridRow, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>
diff --git a/apps/website-vue/src/components/ui/calendar/CalendarHeadCell.vue b/apps/website-vue/src/components/ui/calendar/CalendarHeadCell.vue
new file mode 100644
index 0000000..3703c92
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/CalendarHeadCell.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { CalendarHeadCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeadCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeadCell>
+</template>
diff --git a/apps/website-vue/src/components/ui/calendar/CalendarHeader.vue b/apps/website-vue/src/components/ui/calendar/CalendarHeader.vue
new file mode 100644
index 0000000..706f78b
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/CalendarHeader.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { CalendarHeaderProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeader, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeader>
+</template>
diff --git a/apps/website-vue/src/components/ui/calendar/CalendarHeading.vue b/apps/website-vue/src/components/ui/calendar/CalendarHeading.vue
new file mode 100644
index 0000000..3b84ee8
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/CalendarHeading.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { CalendarHeadingProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeading, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes["class"] }>()
+
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
diff --git a/apps/website-vue/src/components/ui/calendar/CalendarNextButton.vue b/apps/website-vue/src/components/ui/calendar/CalendarNextButton.vue
new file mode 100644
index 0000000..ae8861c
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/CalendarNextButton.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import { CalendarNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="h-4 w-4" />
+    </slot>
+  </CalendarNext>
+</template>
diff --git a/apps/website-vue/src/components/ui/calendar/CalendarPrevButton.vue b/apps/website-vue/src/components/ui/calendar/CalendarPrevButton.vue
new file mode 100644
index 0000000..43e32a0
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/CalendarPrevButton.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeft } from "lucide-vue-next"
+import { CalendarPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="h-4 w-4" />
+    </slot>
+  </CalendarPrev>
+</template>
diff --git a/apps/website-vue/src/components/ui/calendar/index.ts b/apps/website-vue/src/components/ui/calendar/index.ts
new file mode 100644
index 0000000..f222de0
--- /dev/null
+++ b/apps/website-vue/src/components/ui/calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as Calendar } from "./Calendar.vue"
+export { default as CalendarCell } from "./CalendarCell.vue"
+export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue"
+export { default as CalendarGrid } from "./CalendarGrid.vue"
+export { default as CalendarGridBody } from "./CalendarGridBody.vue"
+export { default as CalendarGridHead } from "./CalendarGridHead.vue"
+export { default as CalendarGridRow } from "./CalendarGridRow.vue"
+export { default as CalendarHeadCell } from "./CalendarHeadCell.vue"
+export { default as CalendarHeader } from "./CalendarHeader.vue"
+export { default as CalendarHeading } from "./CalendarHeading.vue"
+export { default as CalendarNextButton } from "./CalendarNextButton.vue"
+export { default as CalendarPrevButton } from "./CalendarPrevButton.vue"
diff --git a/apps/website-vue/src/components/ui/card/Card.vue b/apps/website-vue/src/components/ui/card/Card.vue
new file mode 100644
index 0000000..db8c07a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/card/Card.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/card/CardContent.vue b/apps/website-vue/src/components/ui/card/CardContent.vue
new file mode 100644
index 0000000..4c4dfc7
--- /dev/null
+++ b/apps/website-vue/src/components/ui/card/CardContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/card/CardDescription.vue b/apps/website-vue/src/components/ui/card/CardDescription.vue
new file mode 100644
index 0000000..02bddba
--- /dev/null
+++ b/apps/website-vue/src/components/ui/card/CardDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>
diff --git a/apps/website-vue/src/components/ui/card/CardFooter.vue b/apps/website-vue/src/components/ui/card/CardFooter.vue
new file mode 100644
index 0000000..fad3928
--- /dev/null
+++ b/apps/website-vue/src/components/ui/card/CardFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/card/CardHeader.vue b/apps/website-vue/src/components/ui/card/CardHeader.vue
new file mode 100644
index 0000000..119700c
--- /dev/null
+++ b/apps/website-vue/src/components/ui/card/CardHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/card/CardTitle.vue b/apps/website-vue/src/components/ui/card/CardTitle.vue
new file mode 100644
index 0000000..d0c0ea7
--- /dev/null
+++ b/apps/website-vue/src/components/ui/card/CardTitle.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>
diff --git a/apps/website-vue/src/components/ui/card/index.ts b/apps/website-vue/src/components/ui/card/index.ts
new file mode 100644
index 0000000..e5c7cb2
--- /dev/null
+++ b/apps/website-vue/src/components/ui/card/index.ts
@@ -0,0 +1,6 @@
+export { default as Card } from "./Card.vue"
+export { default as CardContent } from "./CardContent.vue"
+export { default as CardDescription } from "./CardDescription.vue"
+export { default as CardFooter } from "./CardFooter.vue"
+export { default as CardHeader } from "./CardHeader.vue"
+export { default as CardTitle } from "./CardTitle.vue"
diff --git a/apps/website-vue/src/components/ui/carousel/Carousel.vue b/apps/website-vue/src/components/ui/carousel/Carousel.vue
new file mode 100644
index 0000000..30138a9
--- /dev/null
+++ b/apps/website-vue/src/components/ui/carousel/Carousel.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from "./interface"
+import { cn } from "@/lib/utils"
+import { useProvideCarousel } from "./useCarousel"
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+  orientation: "horizontal",
+})
+
+const emits = defineEmits<CarouselEmits>()
+
+const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
+
+defineExpose({
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+})
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft"
+  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight"
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    scrollPrev()
+
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    scrollNext()
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="cn('relative', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/carousel/CarouselContent.vue b/apps/website-vue/src/components/ui/carousel/CarouselContent.vue
new file mode 100644
index 0000000..5f43e7e
--- /dev/null
+++ b/apps/website-vue/src/components/ui/carousel/CarouselContent.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import { cn } from "@/lib/utils"
+import { useCarousel } from "./useCarousel"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<WithClassAsProps>()
+
+const { carouselRef, orientation } = useCarousel()
+</script>
+
+<template>
+  <div ref="carouselRef" class="overflow-hidden">
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          props.class,
+        )"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/carousel/CarouselItem.vue b/apps/website-vue/src/components/ui/carousel/CarouselItem.vue
new file mode 100644
index 0000000..71e3cf5
--- /dev/null
+++ b/apps/website-vue/src/components/ui/carousel/CarouselItem.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import { cn } from "@/lib/utils"
+import { useCarousel } from "./useCarousel"
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/carousel/CarouselNext.vue b/apps/website-vue/src/components/ui/carousel/CarouselNext.vue
new file mode 100644
index 0000000..f6e093f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/carousel/CarouselNext.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import { ArrowRight } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+import { Button } from '@/components/ui/button'
+import { useCarousel } from "./useCarousel"
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation, canScrollNext, scrollNext } = useCarousel()
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollNext"
+    :class="cn(
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
+      orientation === 'horizontal'
+        ? '-right-12 top-1/2 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    variant="outline"
+    @click="scrollNext"
+  >
+    <slot>
+      <ArrowRight class="h-4 w-4 text-current" />
+      <span class="sr-only">Next Slide</span>
+    </slot>
+  </Button>
+</template>
diff --git a/apps/website-vue/src/components/ui/carousel/CarouselPrevious.vue b/apps/website-vue/src/components/ui/carousel/CarouselPrevious.vue
new file mode 100644
index 0000000..7cecb3b
--- /dev/null
+++ b/apps/website-vue/src/components/ui/carousel/CarouselPrevious.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import { ArrowLeft } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+import { Button } from '@/components/ui/button'
+import { useCarousel } from "./useCarousel"
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollPrev"
+    :class="cn(
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
+      orientation === 'horizontal'
+        ? '-left-12 top-1/2 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    variant="outline"
+    @click="scrollPrev"
+  >
+    <slot>
+      <ArrowLeft class="h-4 w-4 text-current" />
+      <span class="sr-only">Previous Slide</span>
+    </slot>
+  </Button>
+</template>
diff --git a/apps/website-vue/src/components/ui/carousel/index.ts b/apps/website-vue/src/components/ui/carousel/index.ts
new file mode 100644
index 0000000..154bfcb
--- /dev/null
+++ b/apps/website-vue/src/components/ui/carousel/index.ts
@@ -0,0 +1,10 @@
+export { default as Carousel } from "./Carousel.vue"
+export { default as CarouselContent } from "./CarouselContent.vue"
+export { default as CarouselItem } from "./CarouselItem.vue"
+export { default as CarouselNext } from "./CarouselNext.vue"
+export { default as CarouselPrevious } from "./CarouselPrevious.vue"
+export type {
+  UnwrapRefCarouselApi as CarouselApi,
+} from "./interface"
+
+export { useCarousel } from "./useCarousel"
diff --git a/apps/website-vue/src/components/ui/carousel/interface.ts b/apps/website-vue/src/components/ui/carousel/interface.ts
new file mode 100644
index 0000000..74eaf36
--- /dev/null
+++ b/apps/website-vue/src/components/ui/carousel/interface.ts
@@ -0,0 +1,26 @@
+import type useEmblaCarousel from "embla-carousel-vue"
+import type {
+  EmblaCarouselVueType,
+} from "embla-carousel-vue"
+import type { HTMLAttributes, UnwrapRef } from "vue"
+
+type CarouselApi = EmblaCarouselVueType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
+
+export interface CarouselProps {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+}
+
+export interface CarouselEmits {
+  (e: "init-api", payload: UnwrapRefCarouselApi): void
+}
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes["class"]
+}
diff --git a/apps/website-vue/src/components/ui/carousel/useCarousel.ts b/apps/website-vue/src/components/ui/carousel/useCarousel.ts
new file mode 100644
index 0000000..32e35ca
--- /dev/null
+++ b/apps/website-vue/src/components/ui/carousel/useCarousel.ts
@@ -0,0 +1,56 @@
+import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from "./interface"
+import { createInjectionState } from "@vueuse/core"
+import emblaCarouselVue from "embla-carousel-vue"
+import { onMounted, ref } from "vue"
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({
+    opts,
+    orientation,
+    plugins,
+  }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue({
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    }, plugins)
+
+    function scrollPrev() {
+      emblaApi.value?.scrollPrev()
+    }
+    function scrollNext() {
+      emblaApi.value?.scrollNext()
+    }
+
+    const canScrollNext = ref(false)
+    const canScrollPrev = ref(false)
+
+    function onSelect(api: CarouselApi) {
+      canScrollNext.value = api?.canScrollNext() || false
+      canScrollPrev.value = api?.canScrollPrev() || false
+    }
+
+    onMounted(() => {
+      if (!emblaApi.value)
+        return
+
+      emblaApi.value?.on("init", onSelect)
+      emblaApi.value?.on("reInit", onSelect)
+      emblaApi.value?.on("select", onSelect)
+
+      emits("init-api", emblaApi.value)
+    })
+
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+  },
+)
+
+function useCarousel() {
+  const carouselState = useInjectCarousel()
+
+  if (!carouselState)
+    throw new Error("useCarousel must be used within a <Carousel />")
+
+  return carouselState
+}
+
+export { useCarousel, useProvideCarousel }
diff --git a/apps/website-vue/src/components/ui/checkbox/Checkbox.vue b/apps/website-vue/src/components/ui/checkbox/Checkbox.vue
new file mode 100644
index 0000000..f612895
--- /dev/null
+++ b/apps/website-vue/src/components/ui/checkbox/Checkbox.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+         props.class)"
+  >
+    <CheckboxIndicator class="grid place-content-center text-current">
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/checkbox/index.ts b/apps/website-vue/src/components/ui/checkbox/index.ts
new file mode 100644
index 0000000..3391a85
--- /dev/null
+++ b/apps/website-vue/src/components/ui/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.vue"
diff --git a/apps/website-vue/src/components/ui/collapsible/Collapsible.vue b/apps/website-vue/src/components/ui/collapsible/Collapsible.vue
new file mode 100644
index 0000000..77d575e
--- /dev/null
+++ b/apps/website-vue/src/components/ui/collapsible/Collapsible.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui"
+import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/collapsible/CollapsibleContent.vue b/apps/website-vue/src/components/ui/collapsible/CollapsibleContent.vue
new file mode 100644
index 0000000..56fab10
--- /dev/null
+++ b/apps/website-vue/src/components/ui/collapsible/CollapsibleContent.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleContentProps } from "reka-ui"
+import { CollapsibleContent } from "reka-ui"
+
+const props = defineProps<CollapsibleContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+    <slot />
+  </CollapsibleContent>
+</template>
diff --git a/apps/website-vue/src/components/ui/collapsible/CollapsibleTrigger.vue b/apps/website-vue/src/components/ui/collapsible/CollapsibleTrigger.vue
new file mode 100644
index 0000000..05bc3f1
--- /dev/null
+++ b/apps/website-vue/src/components/ui/collapsible/CollapsibleTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleTriggerProps } from "reka-ui"
+import { CollapsibleTrigger } from "reka-ui"
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/collapsible/index.ts b/apps/website-vue/src/components/ui/collapsible/index.ts
new file mode 100644
index 0000000..86a031d
--- /dev/null
+++ b/apps/website-vue/src/components/ui/collapsible/index.ts
@@ -0,0 +1,3 @@
+export { default as Collapsible } from "./Collapsible.vue"
+export { default as CollapsibleContent } from "./CollapsibleContent.vue"
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue"
diff --git a/apps/website-vue/src/components/ui/command/Command.vue b/apps/website-vue/src/components/ui/command/Command.vue
new file mode 100644
index 0000000..3e9a8b2
--- /dev/null
+++ b/apps/website-vue/src/components/ui/command/Command.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui"
+import { reactive, ref, watch } from "vue"
+import { cn } from "@/lib/utils"
+import { provideCommandContext } from "."
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
+  modelValue: "",
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: "base" })
+const filterState = reactive({
+  search: "",
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>
+
+<template>
+  <ListboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/command/CommandDialog.vue b/apps/website-vue/src/components/ui/command/CommandDialog.vue
new file mode 100644
index 0000000..bccd25c
--- /dev/null
+++ b/apps/website-vue/src/components/ui/command/CommandDialog.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { useForwardPropsEmits } from "reka-ui"
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+import Command from "./Command.vue"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/website-vue/src/components/ui/command/CommandEmpty.vue b/apps/website-vue/src/components/ui/command/CommandEmpty.vue
new file mode 100644
index 0000000..d4d156f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+import { useCommand } from "."
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>
+
+<template>
+  <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </Primitive>
+</template>
diff --git a/apps/website-vue/src/components/ui/command/CommandGroup.vue b/apps/website-vue/src/components/ui/command/CommandGroup.vue
new file mode 100644
index 0000000..99df3a4
--- /dev/null
+++ b/apps/website-vue/src/components/ui/command/CommandGroup.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted } from "vue"
+import { cn } from "@/lib/utils"
+import { provideCommandGroupContext, useCommand } from "."
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes["class"]
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
diff --git a/apps/website-vue/src/components/ui/command/CommandInput.vue b/apps/website-vue/src/components/ui/command/CommandInput.vue
new file mode 100644
index 0000000..4f7e84a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/command/CommandInput.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ListboxFilterProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Search } from "lucide-vue-next"
+import { ListboxFilter, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { useCommand } from "."
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      auto-focus
+      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/command/CommandItem.vue b/apps/website-vue/src/components/ui/command/CommandItem.vue
new file mode 100644
index 0000000..c6088e2
--- /dev/null
+++ b/apps/website-vue/src/components/ui/command/CommandItem.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit, useCurrentElement } from "@vueuse/core"
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted, ref } from "vue"
+import { cn } from "@/lib/utils"
+import { useCommand, useCommandGroup } from "."
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? props?.value!.toString())
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
+  >
+    <slot />
+  </ListboxItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/command/CommandList.vue b/apps/website-vue/src/components/ui/command/CommandList.vue
new file mode 100644
index 0000000..d94b969
--- /dev/null
+++ b/apps/website-vue/src/components/ui/command/CommandList.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxContent, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ListboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>
diff --git a/apps/website-vue/src/components/ui/command/CommandSeparator.vue b/apps/website-vue/src/components/ui/command/CommandSeparator.vue
new file mode 100644
index 0000000..799319b
--- /dev/null
+++ b/apps/website-vue/src/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/apps/website-vue/src/components/ui/command/CommandShortcut.vue b/apps/website-vue/src/components/ui/command/CommandShortcut.vue
new file mode 100644
index 0000000..6d95d73
--- /dev/null
+++ b/apps/website-vue/src/components/ui/command/CommandShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/apps/website-vue/src/components/ui/command/index.ts b/apps/website-vue/src/components/ui/command/index.ts
new file mode 100644
index 0000000..af18933
--- /dev/null
+++ b/apps/website-vue/src/components/ui/command/index.ts
@@ -0,0 +1,25 @@
+import type { Ref } from "vue"
+import { createContext } from "reka-ui"
+
+export { default as Command } from "./Command.vue"
+export { default as CommandDialog } from "./CommandDialog.vue"
+export { default as CommandEmpty } from "./CommandEmpty.vue"
+export { default as CommandGroup } from "./CommandGroup.vue"
+export { default as CommandInput } from "./CommandInput.vue"
+export { default as CommandItem } from "./CommandItem.vue"
+export { default as CommandList } from "./CommandList.vue"
+export { default as CommandSeparator } from "./CommandSeparator.vue"
+export { default as CommandShortcut } from "./CommandShortcut.vue"
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>("Command")
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>("CommandGroup")
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenu.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenu.vue
new file mode 100644
index 0000000..50e8fa3
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenu.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuRootEmits, ContextMenuRootProps } from "reka-ui"
+import { ContextMenuRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<ContextMenuRootProps>()
+const emits = defineEmits<ContextMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRoot v-bind="forwarded">
+    <slot />
+  </ContextMenuRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuCheckboxItem.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
new file mode 100644
index 0000000..c1d3ded
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Check class="h-4 w-4" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuCheckboxItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuContent.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuContent.vue
new file mode 100644
index 0000000..586d264
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuContent.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ContextMenuContentEmits, ContextMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ContextMenuContent,
+  ContextMenuPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ContextMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      v-bind="forwarded"
+      :class="cn(
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )"
+    >
+      <slot />
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuGroup.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuGroup.vue
new file mode 100644
index 0000000..5e166b5
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuGroup.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ContextMenuGroupProps } from "reka-ui"
+import { ContextMenuGroup } from "reka-ui"
+
+const props = defineProps<ContextMenuGroupProps>()
+</script>
+
+<template>
+  <ContextMenuGroup v-bind="props">
+    <slot />
+  </ContextMenuGroup>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuItem.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuItem.vue
new file mode 100644
index 0000000..9ce70b5
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuItem.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ContextMenuItemEmits, ContextMenuItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ContextMenuItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+const emits = defineEmits<ContextMenuItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </ContextMenuItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuLabel.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuLabel.vue
new file mode 100644
index 0000000..0e413b9
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuLabel.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ContextMenuLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ContextMenuLabel } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ContextMenuLabel
+    v-bind="delegatedProps"
+    :class="
+      cn('px-2 py-1.5 text-sm font-semibold text-foreground',
+         inset && 'pl-8', props.class,
+      )"
+  >
+    <slot />
+  </ContextMenuLabel>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuPortal.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuPortal.vue
new file mode 100644
index 0000000..438e527
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuPortal.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ContextMenuPortalProps } from "reka-ui"
+import { ContextMenuPortal } from "reka-ui"
+
+const props = defineProps<ContextMenuPortalProps>()
+</script>
+
+<template>
+  <ContextMenuPortal v-bind="props">
+    <slot />
+  </ContextMenuPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuRadioGroup.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuRadioGroup.vue
new file mode 100644
index 0000000..209c37b
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuRadioGroup.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from "reka-ui"
+import {
+  ContextMenuRadioGroup,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<ContextMenuRadioGroupProps>()
+const emits = defineEmits<ContextMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </ContextMenuRadioGroup>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuRadioItem.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuRadioItem.vue
new file mode 100644
index 0000000..7f1f82c
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuRadioItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Circle } from "lucide-vue-next"
+import {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ContextMenuRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuRadioItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuSeparator.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuSeparator.vue
new file mode 100644
index 0000000..4940ba9
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuSeparator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ContextMenuSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ContextMenuSeparator,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ContextMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuShortcut.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuShortcut.vue
new file mode 100644
index 0000000..6d95d73
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuSub.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuSub.vue
new file mode 100644
index 0000000..ab4b906
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuSub.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { ContextMenuSubEmits, ContextMenuSubProps } from "reka-ui"
+import {
+  ContextMenuSub,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<ContextMenuSubProps>()
+const emits = defineEmits<ContextMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuSub v-bind="forwarded">
+    <slot />
+  </ContextMenuSub>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuSubContent.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuSubContent.vue
new file mode 100644
index 0000000..84df41d
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuSubContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ContextMenuSubContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuSubContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </ContextMenuSubContent>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuSubTrigger.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuSubTrigger.vue
new file mode 100644
index 0000000..a09032f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuSubTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ContextMenuSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import {
+  ContextMenuSubTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </ContextMenuSubTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/ContextMenuTrigger.vue b/apps/website-vue/src/components/ui/context-menu/ContextMenuTrigger.vue
new file mode 100644
index 0000000..dcbd0bb
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/ContextMenuTrigger.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { ContextMenuTriggerProps } from "reka-ui"
+import { ContextMenuTrigger, useForwardProps } from "reka-ui"
+
+const props = defineProps<ContextMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <ContextMenuTrigger v-bind="forwardedProps">
+    <slot />
+  </ContextMenuTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/context-menu/index.ts b/apps/website-vue/src/components/ui/context-menu/index.ts
new file mode 100644
index 0000000..5919fd3
--- /dev/null
+++ b/apps/website-vue/src/components/ui/context-menu/index.ts
@@ -0,0 +1,14 @@
+export { default as ContextMenu } from "./ContextMenu.vue"
+export { default as ContextMenuCheckboxItem } from "./ContextMenuCheckboxItem.vue"
+export { default as ContextMenuContent } from "./ContextMenuContent.vue"
+export { default as ContextMenuGroup } from "./ContextMenuGroup.vue"
+export { default as ContextMenuItem } from "./ContextMenuItem.vue"
+export { default as ContextMenuLabel } from "./ContextMenuLabel.vue"
+export { default as ContextMenuRadioGroup } from "./ContextMenuRadioGroup.vue"
+export { default as ContextMenuRadioItem } from "./ContextMenuRadioItem.vue"
+export { default as ContextMenuSeparator } from "./ContextMenuSeparator.vue"
+export { default as ContextMenuShortcut } from "./ContextMenuShortcut.vue"
+export { default as ContextMenuSub } from "./ContextMenuSub.vue"
+export { default as ContextMenuSubContent } from "./ContextMenuSubContent.vue"
+export { default as ContextMenuSubTrigger } from "./ContextMenuSubTrigger.vue"
+export { default as ContextMenuTrigger } from "./ContextMenuTrigger.vue"
diff --git a/apps/website-vue/src/components/ui/dialog/Dialog.vue b/apps/website-vue/src/components/ui/dialog/Dialog.vue
new file mode 100644
index 0000000..47b0968
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dialog/Dialog.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/dialog/DialogClose.vue b/apps/website-vue/src/components/ui/dialog/DialogClose.vue
new file mode 100644
index 0000000..0295976
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dialog/DialogClose.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/apps/website-vue/src/components/ui/dialog/DialogContent.vue b/apps/website-vue/src/components/ui/dialog/DialogContent.vue
new file mode 100644
index 0000000..4bc0a1c
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dialog/DialogContent.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+      >
+        <X class="w-4 h-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/dialog/DialogDescription.vue b/apps/website-vue/src/components/ui/dialog/DialogDescription.vue
new file mode 100644
index 0000000..062c3a5
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dialog/DialogDescription.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/apps/website-vue/src/components/ui/dialog/DialogFooter.vue b/apps/website-vue/src/components/ui/dialog/DialogFooter.vue
new file mode 100644
index 0000000..5f481e5
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dialog/DialogFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/dialog/DialogHeader.vue b/apps/website-vue/src/components/ui/dialog/DialogHeader.vue
new file mode 100644
index 0000000..33aa003
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dialog/DialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/dialog/DialogScrollContent.vue b/apps/website-vue/src/components/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 0000000..59a32ec
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/dialog/DialogTitle.vue b/apps/website-vue/src/components/ui/dialog/DialogTitle.vue
new file mode 100644
index 0000000..1de56de
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dialog/DialogTitle.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-lg font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/apps/website-vue/src/components/ui/dialog/DialogTrigger.vue b/apps/website-vue/src/components/ui/dialog/DialogTrigger.vue
new file mode 100644
index 0000000..a4fc3ee
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/dialog/index.ts b/apps/website-vue/src/components/ui/dialog/index.ts
new file mode 100644
index 0000000..c9c577f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"
diff --git a/apps/website-vue/src/components/ui/drawer/Drawer.vue b/apps/website-vue/src/components/ui/drawer/Drawer.vue
new file mode 100644
index 0000000..6cf4a82
--- /dev/null
+++ b/apps/website-vue/src/components/ui/drawer/Drawer.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue"
+import { useForwardPropsEmits } from "reka-ui"
+import { DrawerRoot } from "vaul-vue"
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+  shouldScaleBackground: true,
+})
+
+const emits = defineEmits<DrawerRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerRoot v-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/drawer/DrawerContent.vue b/apps/website-vue/src/components/ui/drawer/DrawerContent.vue
new file mode 100644
index 0000000..15cd43a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/drawer/DrawerContent.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { useForwardPropsEmits } from "reka-ui"
+import { DrawerContent, DrawerPortal } from "vaul-vue"
+import { cn } from "@/lib/utils"
+import DrawerOverlay from "./DrawerOverlay.vue"
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      v-bind="forwarded" :class="cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        props.class,
+      )"
+    >
+      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/drawer/DrawerDescription.vue b/apps/website-vue/src/components/ui/drawer/DrawerDescription.vue
new file mode 100644
index 0000000..d343419
--- /dev/null
+++ b/apps/website-vue/src/components/ui/drawer/DrawerDescription.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { DrawerDescriptionProps } from "vaul-vue"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DrawerDescription } from "vaul-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DrawerDescription v-bind="delegatedProps" :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </DrawerDescription>
+</template>
diff --git a/apps/website-vue/src/components/ui/drawer/DrawerFooter.vue b/apps/website-vue/src/components/ui/drawer/DrawerFooter.vue
new file mode 100644
index 0000000..9773691
--- /dev/null
+++ b/apps/website-vue/src/components/ui/drawer/DrawerFooter.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/drawer/DrawerHeader.vue b/apps/website-vue/src/components/ui/drawer/DrawerHeader.vue
new file mode 100644
index 0000000..48a7d4f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/drawer/DrawerHeader.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/drawer/DrawerOverlay.vue b/apps/website-vue/src/components/ui/drawer/DrawerOverlay.vue
new file mode 100644
index 0000000..6ce99dc
--- /dev/null
+++ b/apps/website-vue/src/components/ui/drawer/DrawerOverlay.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DrawerOverlay } from "vaul-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DrawerOverlay v-bind="delegatedProps" :class="cn('fixed inset-0 z-50 bg-black/80', props.class)" />
+</template>
diff --git a/apps/website-vue/src/components/ui/drawer/DrawerTitle.vue b/apps/website-vue/src/components/ui/drawer/DrawerTitle.vue
new file mode 100644
index 0000000..04a582c
--- /dev/null
+++ b/apps/website-vue/src/components/ui/drawer/DrawerTitle.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { DrawerTitleProps } from "vaul-vue"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DrawerTitle } from "vaul-vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DrawerTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DrawerTitle v-bind="delegatedProps" :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </DrawerTitle>
+</template>
diff --git a/apps/website-vue/src/components/ui/drawer/index.ts b/apps/website-vue/src/components/ui/drawer/index.ts
new file mode 100644
index 0000000..d59dff4
--- /dev/null
+++ b/apps/website-vue/src/components/ui/drawer/index.ts
@@ -0,0 +1,8 @@
+export { default as Drawer } from "./Drawer.vue"
+export { default as DrawerContent } from "./DrawerContent.vue"
+export { default as DrawerDescription } from "./DrawerDescription.vue"
+export { default as DrawerFooter } from "./DrawerFooter.vue"
+export { default as DrawerHeader } from "./DrawerHeader.vue"
+export { default as DrawerOverlay } from "./DrawerOverlay.vue"
+export { default as DrawerTitle } from "./DrawerTitle.vue"
+export { DrawerClose, DrawerPortal, DrawerTrigger } from "vaul-vue"
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenu.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenu.vue
new file mode 100644
index 0000000..bf38258
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenu.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui"
+import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 0000000..fcbad83
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class=" cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check class="w-4 h-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 0000000..99f35fa
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuGroup.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
new file mode 100644
index 0000000..80c581a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from "reka-ui"
+import { DropdownMenuGroup } from "reka-ui"
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuItem.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 0000000..98d1aa9
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuLabel.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 0000000..f86fbdd
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuLabel, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
new file mode 100644
index 0000000..1c31a65
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui"
+import {
+  DropdownMenuRadioGroup,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 0000000..f88430a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Circle } from "lucide-vue-next"
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
new file mode 100644
index 0000000..15864fa
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuSeparator,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
new file mode 100644
index 0000000..9367641
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuSub.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuSub.vue
new file mode 100644
index 0000000..2a31a10
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui"
+import {
+  DropdownMenuSub,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 0000000..d6d0ced
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuSubContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 0000000..c3764f5
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import {
+  DropdownMenuSubTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </DropdownMenuSubTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
new file mode 100644
index 0000000..ada9a0a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from "reka-ui"
+import { DropdownMenuTrigger, useForwardProps } from "reka-ui"
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/dropdown-menu/index.ts b/apps/website-vue/src/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..955fe3a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from "./DropdownMenu.vue"
+
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue"
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue"
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue"
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue"
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue"
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue"
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue"
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue"
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue"
+export { default as DropdownMenuSub } from "./DropdownMenuSub.vue"
+export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue"
+export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue"
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue"
+export { DropdownMenuPortal } from "reka-ui"
diff --git a/apps/website-vue/src/components/ui/form/FormControl.vue b/apps/website-vue/src/components/ui/form/FormControl.vue
new file mode 100644
index 0000000..0ebfad1
--- /dev/null
+++ b/apps/website-vue/src/components/ui/form/FormControl.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { Slot } from "reka-ui"
+import { useFormField } from "./useFormField"
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>
diff --git a/apps/website-vue/src/components/ui/form/FormDescription.vue b/apps/website-vue/src/components/ui/form/FormDescription.vue
new file mode 100644
index 0000000..f34123f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/form/FormDescription.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { useFormField } from "./useFormField"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/apps/website-vue/src/components/ui/form/FormItem.vue b/apps/website-vue/src/components/ui/form/FormItem.vue
new file mode 100644
index 0000000..efe6c37
--- /dev/null
+++ b/apps/website-vue/src/components/ui/form/FormItem.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { useId } from "reka-ui"
+import { provide } from "vue"
+import { cn } from "@/lib/utils"
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/form/FormLabel.vue b/apps/website-vue/src/components/ui/form/FormLabel.vue
new file mode 100644
index 0000000..e4280a3
--- /dev/null
+++ b/apps/website-vue/src/components/ui/form/FormLabel.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { LabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Label } from '@/components/ui/label'
+import { useFormField } from "./useFormField"
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    :class="cn(
+      error && 'text-destructive',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/apps/website-vue/src/components/ui/form/FormMessage.vue b/apps/website-vue/src/components/ui/form/FormMessage.vue
new file mode 100644
index 0000000..b43d01b
--- /dev/null
+++ b/apps/website-vue/src/components/ui/form/FormMessage.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { ErrorMessage } from "vee-validate"
+import { toValue } from "vue"
+import { useFormField } from "./useFormField"
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    as="p"
+    :name="toValue(name)"
+    class="text-sm font-medium text-destructive"
+  />
+</template>
diff --git a/apps/website-vue/src/components/ui/form/index.ts b/apps/website-vue/src/components/ui/form/index.ts
new file mode 100644
index 0000000..b16bfee
--- /dev/null
+++ b/apps/website-vue/src/components/ui/form/index.ts
@@ -0,0 +1,7 @@
+export { default as FormControl } from "./FormControl.vue"
+export { default as FormDescription } from "./FormDescription.vue"
+export { default as FormItem } from "./FormItem.vue"
+export { default as FormLabel } from "./FormLabel.vue"
+export { default as FormMessage } from "./FormMessage.vue"
+export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+export { Form, Field as FormField } from "vee-validate"
diff --git a/apps/website-vue/src/components/ui/form/injectionKeys.ts b/apps/website-vue/src/components/ui/form/injectionKeys.ts
new file mode 100644
index 0000000..42542a9
--- /dev/null
+++ b/apps/website-vue/src/components/ui/form/injectionKeys.ts
@@ -0,0 +1,4 @@
+import type { InjectionKey } from "vue"
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>
diff --git a/apps/website-vue/src/components/ui/form/useFormField.ts b/apps/website-vue/src/components/ui/form/useFormField.ts
new file mode 100644
index 0000000..62d86c2
--- /dev/null
+++ b/apps/website-vue/src/components/ui/form/useFormField.ts
@@ -0,0 +1,30 @@
+import { FieldContextKey } from "vee-validate"
+import { computed, inject } from "vue"
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+
+  if (!fieldContext)
+    throw new Error("useFormField should be used within <FormField>")
+
+  const { name, errorMessage: error, meta } = fieldContext
+  const id = fieldItemContext
+
+  const fieldState = {
+    valid: computed(() => meta.valid),
+    isDirty: computed(() => meta.dirty),
+    isTouched: computed(() => meta.touched),
+    error,
+  }
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
diff --git a/apps/website-vue/src/components/ui/hover-card/HoverCard.vue b/apps/website-vue/src/components/ui/hover-card/HoverCard.vue
new file mode 100644
index 0000000..4dbcc70
--- /dev/null
+++ b/apps/website-vue/src/components/ui/hover-card/HoverCard.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HoverCardRootEmits, HoverCardRootProps } from "reka-ui"
+import { HoverCardRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot v-bind="forwarded">
+    <slot />
+  </HoverCardRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/hover-card/HoverCardContent.vue b/apps/website-vue/src/components/ui/hover-card/HoverCardContent.vue
new file mode 100644
index 0000000..541f6f4
--- /dev/null
+++ b/apps/website-vue/src/components/ui/hover-card/HoverCardContent.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  HoverCardContent,
+  HoverCardPortal,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/hover-card/HoverCardTrigger.vue b/apps/website-vue/src/components/ui/hover-card/HoverCardTrigger.vue
new file mode 100644
index 0000000..11a5dca
--- /dev/null
+++ b/apps/website-vue/src/components/ui/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HoverCardTriggerProps } from "reka-ui"
+import { HoverCardTrigger } from "reka-ui"
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/hover-card/index.ts b/apps/website-vue/src/components/ui/hover-card/index.ts
new file mode 100644
index 0000000..49b2930
--- /dev/null
+++ b/apps/website-vue/src/components/ui/hover-card/index.ts
@@ -0,0 +1,3 @@
+export { default as HoverCard } from "./HoverCard.vue"
+export { default as HoverCardContent } from "./HoverCardContent.vue"
+export { default as HoverCardTrigger } from "./HoverCardTrigger.vue"
diff --git a/apps/website-vue/src/components/ui/input/Input.vue b/apps/website-vue/src/components/ui/input/Input.vue
new file mode 100644
index 0000000..170f1f7
--- /dev/null
+++ b/apps/website-vue/src/components/ui/input/Input.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes["class"]
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-foreground file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+</template>
diff --git a/apps/website-vue/src/components/ui/input/index.ts b/apps/website-vue/src/components/ui/input/index.ts
new file mode 100644
index 0000000..9976b86
--- /dev/null
+++ b/apps/website-vue/src/components/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue"
diff --git a/apps/website-vue/src/components/ui/label/Label.vue b/apps/website-vue/src/components/ui/label/Label.vue
new file mode 100644
index 0000000..a746407
--- /dev/null
+++ b/apps/website-vue/src/components/ui/label/Label.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { LabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Label } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/apps/website-vue/src/components/ui/label/index.ts b/apps/website-vue/src/components/ui/label/index.ts
new file mode 100644
index 0000000..036e35c
--- /dev/null
+++ b/apps/website-vue/src/components/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from "./Label.vue"
diff --git a/apps/website-vue/src/components/ui/menubar/Menubar.vue b/apps/website-vue/src/components/ui/menubar/Menubar.vue
new file mode 100644
index 0000000..176edee
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/Menubar.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { MenubarRootEmits, MenubarRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  MenubarRoot,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<MenubarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'flex h-10 items-center gap-x-1 rounded-md border bg-background p-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </MenubarRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarCheckboxItem.vue b/apps/website-vue/src/components/ui/menubar/MenubarCheckboxItem.vue
new file mode 100644
index 0000000..68b503f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarCheckboxItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import {
+  MenubarCheckboxItem,
+  MenubarItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<MenubarCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarCheckboxItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <Check class="w-4 h-4" />
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarCheckboxItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarContent.vue b/apps/website-vue/src/components/ui/menubar/MenubarContent.vue
new file mode 100644
index 0000000..f97cf5c
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarContent.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { MenubarContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  MenubarContent,
+  MenubarPortal,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<MenubarContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "start",
+    alignOffset: -4,
+    sideOffset: 8,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarGroup.vue b/apps/website-vue/src/components/ui/menubar/MenubarGroup.vue
new file mode 100644
index 0000000..51340c9
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarGroup.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { MenubarGroupProps } from "reka-ui"
+import { MenubarGroup } from "reka-ui"
+
+const props = defineProps<MenubarGroupProps>()
+</script>
+
+<template>
+  <MenubarGroup v-bind="props">
+    <slot />
+  </MenubarGroup>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarItem.vue b/apps/website-vue/src/components/ui/menubar/MenubarItem.vue
new file mode 100644
index 0000000..a4f8a10
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarItem.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { MenubarItemEmits, MenubarItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  MenubarItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarItemProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const emits = defineEmits<MenubarItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </MenubarItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarLabel.vue b/apps/website-vue/src/components/ui/menubar/MenubarLabel.vue
new file mode 100644
index 0000000..3600a5b
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarLabel.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { MenubarLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { MenubarLabel } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+</script>
+
+<template>
+  <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
+    <slot />
+  </MenubarLabel>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarMenu.vue b/apps/website-vue/src/components/ui/menubar/MenubarMenu.vue
new file mode 100644
index 0000000..80c3182
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarMenu.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { MenubarMenuProps } from "reka-ui"
+import { MenubarMenu } from "reka-ui"
+
+const props = defineProps<MenubarMenuProps>()
+</script>
+
+<template>
+  <MenubarMenu v-bind="props">
+    <slot />
+  </MenubarMenu>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarRadioGroup.vue b/apps/website-vue/src/components/ui/menubar/MenubarRadioGroup.vue
new file mode 100644
index 0000000..736b941
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarRadioGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from "reka-ui"
+import {
+  MenubarRadioGroup,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<MenubarRadioGroupProps>()
+
+const emits = defineEmits<MenubarRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarRadioGroup v-bind="forwarded">
+    <slot />
+  </MenubarRadioGroup>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarRadioItem.vue b/apps/website-vue/src/components/ui/menubar/MenubarRadioItem.vue
new file mode 100644
index 0000000..582e208
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarRadioItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { MenubarRadioItemEmits, MenubarRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Circle } from "lucide-vue-next"
+import {
+  MenubarItemIndicator,
+  MenubarRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<MenubarRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarRadioItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarSeparator.vue b/apps/website-vue/src/components/ui/menubar/MenubarSeparator.vue
new file mode 100644
index 0000000..5f7fcb1
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarSeparator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { MenubarSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { MenubarSeparator, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-muted', props.class)" v-bind="forwardedProps" />
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarShortcut.vue b/apps/website-vue/src/components/ui/menubar/MenubarShortcut.vue
new file mode 100644
index 0000000..6d95d73
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarSub.vue b/apps/website-vue/src/components/ui/menubar/MenubarSub.vue
new file mode 100644
index 0000000..45aacfb
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarSub.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { MenubarSubEmits } from "reka-ui"
+import { MenubarSub, useForwardPropsEmits } from "reka-ui"
+
+interface MenubarSubRootProps {
+  defaultOpen?: boolean
+  open?: boolean
+}
+
+const props = defineProps<MenubarSubRootProps>()
+const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarSub v-bind="forwarded">
+    <slot />
+  </MenubarSub>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarSubContent.vue b/apps/website-vue/src/components/ui/menubar/MenubarSubContent.vue
new file mode 100644
index 0000000..84aa603
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarSubContent.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { MenubarSubContentEmits, MenubarSubContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  MenubarPortal,
+  MenubarSubContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarSubContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarSubContent>
+  </MenubarPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarSubTrigger.vue b/apps/website-vue/src/components/ui/menubar/MenubarSubTrigger.vue
new file mode 100644
index 0000000..713515e
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarSubTrigger.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { MenubarSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import { MenubarSubTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </MenubarSubTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/MenubarTrigger.vue b/apps/website-vue/src/components/ui/menubar/MenubarTrigger.vue
new file mode 100644
index 0000000..bdbfcd4
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/MenubarTrigger.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { MenubarTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { MenubarTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </MenubarTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/menubar/index.ts b/apps/website-vue/src/components/ui/menubar/index.ts
new file mode 100644
index 0000000..bebbb78
--- /dev/null
+++ b/apps/website-vue/src/components/ui/menubar/index.ts
@@ -0,0 +1,15 @@
+export { default as Menubar } from "./Menubar.vue"
+export { default as MenubarCheckboxItem } from "./MenubarCheckboxItem.vue"
+export { default as MenubarContent } from "./MenubarContent.vue"
+export { default as MenubarGroup } from "./MenubarGroup.vue"
+export { default as MenubarItem } from "./MenubarItem.vue"
+export { default as MenubarLabel } from "./MenubarLabel.vue"
+export { default as MenubarMenu } from "./MenubarMenu.vue"
+export { default as MenubarRadioGroup } from "./MenubarRadioGroup.vue"
+export { default as MenubarRadioItem } from "./MenubarRadioItem.vue"
+export { default as MenubarSeparator } from "./MenubarSeparator.vue"
+export { default as MenubarShortcut } from "./MenubarShortcut.vue"
+export { default as MenubarSub } from "./MenubarSub.vue"
+export { default as MenubarSubContent } from "./MenubarSubContent.vue"
+export { default as MenubarSubTrigger } from "./MenubarSubTrigger.vue"
+export { default as MenubarTrigger } from "./MenubarTrigger.vue"
diff --git a/apps/website-vue/src/components/ui/navigation-menu/NavigationMenu.vue b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenu.vue
new file mode 100644
index 0000000..48d0931
--- /dev/null
+++ b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenu.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuRoot,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import NavigationMenuViewport from "./NavigationMenuViewport.vue"
+
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="forwarded"
+    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
+  >
+    <slot />
+    <NavigationMenuViewport />
+  </NavigationMenuRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuContent.vue b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuContent.vue
new file mode 100644
index 0000000..35729f9
--- /dev/null
+++ b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuContent.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuContent
+    v-bind="forwarded"
+    :class="cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      props.class,
+    )"
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>
diff --git a/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuIndicator.vue b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuIndicator.vue
new file mode 100644
index 0000000..80bfdf4
--- /dev/null
+++ b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NavigationMenuIndicatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuIndicator, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    v-bind="forwardedProps"
+    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
+  >
+    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuIndicator>
+</template>
diff --git a/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuItem.vue b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuItem.vue
new file mode 100644
index 0000000..0d3b9c7
--- /dev/null
+++ b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuItem.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { NavigationMenuItemProps } from "reka-ui"
+import { NavigationMenuItem } from "reka-ui"
+
+const props = defineProps<NavigationMenuItemProps>()
+</script>
+
+<template>
+  <NavigationMenuItem v-bind="props">
+    <slot />
+  </NavigationMenuItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuLink.vue b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuLink.vue
new file mode 100644
index 0000000..e8240b9
--- /dev/null
+++ b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuLink.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "reka-ui"
+import {
+  NavigationMenuLink,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<NavigationMenuLinkProps>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <NavigationMenuLink v-bind="forwarded">
+    <slot />
+  </NavigationMenuLink>
+</template>
diff --git a/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuList.vue b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuList.vue
new file mode 100644
index 0000000..4c175f0
--- /dev/null
+++ b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuList.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { NavigationMenuListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuList, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center gap-x-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>
diff --git a/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
new file mode 100644
index 0000000..893750a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { NavigationMenuTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import {
+  NavigationMenuTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { navigationMenuTriggerStyle } from "."
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    v-bind="forwardedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
+  >
+    <slot />
+    <ChevronDown
+      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuViewport.vue b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuViewport.vue
new file mode 100644
index 0000000..a82028d
--- /dev/null
+++ b/apps/website-vue/src/components/ui/navigation-menu/NavigationMenuViewport.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { NavigationMenuViewportProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  NavigationMenuViewport,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="absolute left-0 top-full flex justify-center">
+    <NavigationMenuViewport
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center relative mt-1.5 h-(--reka-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/navigation-menu/index.ts b/apps/website-vue/src/components/ui/navigation-menu/index.ts
new file mode 100644
index 0000000..e7efa86
--- /dev/null
+++ b/apps/website-vue/src/components/ui/navigation-menu/index.ts
@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority"
+
+export { default as NavigationMenu } from "./NavigationMenu.vue"
+export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
+export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
+export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
+export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
+export { default as NavigationMenuList } from "./NavigationMenuList.vue"
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
+export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
+
+export const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+)
diff --git a/apps/website-vue/src/components/ui/pagination/Pagination.vue b/apps/website-vue/src/components/ui/pagination/Pagination.vue
new file mode 100644
index 0000000..d410b24
--- /dev/null
+++ b/apps/website-vue/src/components/ui/pagination/Pagination.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { PaginationRootEmits, PaginationRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationRootProps & {
+  class?: HTMLAttributes["class"]
+}>()
+const emits = defineEmits<PaginationRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PaginationRoot
+    v-slot="slotProps"
+    data-slot="pagination"
+    v-bind="forwarded"
+    :class="cn('mx-auto flex w-full justify-center', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </PaginationRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/pagination/PaginationContent.vue b/apps/website-vue/src/components/ui/pagination/PaginationContent.vue
new file mode 100644
index 0000000..5150b49
--- /dev/null
+++ b/apps/website-vue/src/components/ui/pagination/PaginationContent.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { PaginationListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationList } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <PaginationList
+    v-slot="slotProps"
+    data-slot="pagination-content"
+    v-bind="delegatedProps"
+    :class="cn('flex flex-row items-center gap-1', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </PaginationList>
+</template>
diff --git a/apps/website-vue/src/components/ui/pagination/PaginationEllipsis.vue b/apps/website-vue/src/components/ui/pagination/PaginationEllipsis.vue
new file mode 100644
index 0000000..cc9e002
--- /dev/null
+++ b/apps/website-vue/src/components/ui/pagination/PaginationEllipsis.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PaginationEllipsisProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { MoreHorizontal } from "lucide-vue-next"
+import { PaginationEllipsis } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <PaginationEllipsis
+    data-slot="pagination-ellipsis"
+    v-bind="delegatedProps"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+      <span class="sr-only">More pages</span>
+    </slot>
+  </PaginationEllipsis>
+</template>
diff --git a/apps/website-vue/src/components/ui/pagination/PaginationFirst.vue b/apps/website-vue/src/components/ui/pagination/PaginationFirst.vue
new file mode 100644
index 0000000..e437091
--- /dev/null
+++ b/apps/website-vue/src/components/ui/pagination/PaginationFirst.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationFirstProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeftIcon } from "lucide-vue-next"
+import { PaginationFirst, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationFirstProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationFirst
+    data-slot="pagination-first"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <ChevronLeftIcon />
+      <span class="hidden sm:block">First</span>
+    </slot>
+  </PaginationFirst>
+</template>
diff --git a/apps/website-vue/src/components/ui/pagination/PaginationItem.vue b/apps/website-vue/src/components/ui/pagination/PaginationItem.vue
new file mode 100644
index 0000000..bc03720
--- /dev/null
+++ b/apps/website-vue/src/components/ui/pagination/PaginationItem.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { PaginationListItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { reactiveOmit } from "@vueuse/core"
+import { PaginationListItem } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationListItemProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+  isActive?: boolean
+}>(), {
+  size: "icon",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size", "isActive")
+</script>
+
+<template>
+  <PaginationListItem
+    data-slot="pagination-item"
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      props.class)"
+  >
+    <slot />
+  </PaginationListItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/pagination/PaginationLast.vue b/apps/website-vue/src/components/ui/pagination/PaginationLast.vue
new file mode 100644
index 0000000..9e8087d
--- /dev/null
+++ b/apps/website-vue/src/components/ui/pagination/PaginationLast.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationLastProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRightIcon } from "lucide-vue-next"
+import { PaginationLast, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationLastProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationLast
+    data-slot="pagination-last"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <span class="hidden sm:block">Last</span>
+      <ChevronRightIcon />
+    </slot>
+  </PaginationLast>
+</template>
diff --git a/apps/website-vue/src/components/ui/pagination/PaginationNext.vue b/apps/website-vue/src/components/ui/pagination/PaginationNext.vue
new file mode 100644
index 0000000..da5ccfb
--- /dev/null
+++ b/apps/website-vue/src/components/ui/pagination/PaginationNext.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRightIcon } from "lucide-vue-next"
+import { PaginationNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationNextProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationNext
+    data-slot="pagination-next"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <span class="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </slot>
+  </PaginationNext>
+</template>
diff --git a/apps/website-vue/src/components/ui/pagination/PaginationPrevious.vue b/apps/website-vue/src/components/ui/pagination/PaginationPrevious.vue
new file mode 100644
index 0000000..d705c53
--- /dev/null
+++ b/apps/website-vue/src/components/ui/pagination/PaginationPrevious.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PaginationPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeftIcon } from "lucide-vue-next"
+import { PaginationPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationPrevProps & {
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  size: "default",
+})
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationPrev
+    data-slot="pagination-previous"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'gap-1 px-2.5 sm:pr-2.5', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <ChevronLeftIcon />
+      <span class="hidden sm:block">Previous</span>
+    </slot>
+  </PaginationPrev>
+</template>
diff --git a/apps/website-vue/src/components/ui/pagination/index.ts b/apps/website-vue/src/components/ui/pagination/index.ts
new file mode 100644
index 0000000..51ae7fd
--- /dev/null
+++ b/apps/website-vue/src/components/ui/pagination/index.ts
@@ -0,0 +1,8 @@
+export { default as Pagination } from "./Pagination.vue"
+export { default as PaginationContent } from "./PaginationContent.vue"
+export { default as PaginationEllipsis } from "./PaginationEllipsis.vue"
+export { default as PaginationFirst } from "./PaginationFirst.vue"
+export { default as PaginationItem } from "./PaginationItem.vue"
+export { default as PaginationLast } from "./PaginationLast.vue"
+export { default as PaginationNext } from "./PaginationNext.vue"
+export { default as PaginationPrevious } from "./PaginationPrevious.vue"
diff --git a/apps/website-vue/src/components/ui/popover/Popover.vue b/apps/website-vue/src/components/ui/popover/Popover.vue
new file mode 100644
index 0000000..18a762a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/popover/Popover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/popover/PopoverContent.vue b/apps/website-vue/src/components/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000..701e4c6
--- /dev/null
+++ b/apps/website-vue/src/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/popover/PopoverTrigger.vue b/apps/website-vue/src/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..185b117
--- /dev/null
+++ b/apps/website-vue/src/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/popover/index.ts b/apps/website-vue/src/components/ui/popover/index.ts
new file mode 100644
index 0000000..2490908
--- /dev/null
+++ b/apps/website-vue/src/components/ui/popover/index.ts
@@ -0,0 +1,3 @@
+export { default as Popover } from "./Popover.vue"
+export { default as PopoverContent } from "./PopoverContent.vue"
+export { default as PopoverTrigger } from "./PopoverTrigger.vue"
diff --git a/apps/website-vue/src/components/ui/progress/Progress.vue b/apps/website-vue/src/components/ui/progress/Progress.vue
new file mode 100644
index 0000000..c4f973b
--- /dev/null
+++ b/apps/website-vue/src/components/ui/progress/Progress.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      class="h-full w-full flex-1 bg-primary transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/progress/index.ts b/apps/website-vue/src/components/ui/progress/index.ts
new file mode 100644
index 0000000..8598b96
--- /dev/null
+++ b/apps/website-vue/src/components/ui/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.vue"
diff --git a/apps/website-vue/src/components/ui/radio-group/RadioGroup.vue b/apps/website-vue/src/components/ui/radio-group/RadioGroup.vue
new file mode 100644
index 0000000..3869f85
--- /dev/null
+++ b/apps/website-vue/src/components/ui/radio-group/RadioGroup.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RadioGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    :class="cn('grid gap-2', props.class)"
+    v-bind="forwarded"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/radio-group/RadioGroupItem.vue b/apps/website-vue/src/components/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 0000000..dc895bc
--- /dev/null
+++ b/apps/website-vue/src/components/ui/radio-group/RadioGroupItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Circle } from "lucide-vue-next"
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'peer aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      class="flex items-center justify-center"
+    >
+      <Circle class="h-2.5 w-2.5 fill-current text-current" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/radio-group/index.ts b/apps/website-vue/src/components/ui/radio-group/index.ts
new file mode 100644
index 0000000..7cb0e3b
--- /dev/null
+++ b/apps/website-vue/src/components/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from "./RadioGroup.vue"
+export { default as RadioGroupItem } from "./RadioGroupItem.vue"
diff --git a/apps/website-vue/src/components/ui/resizable/ResizableHandle.vue b/apps/website-vue/src/components/ui/resizable/ResizableHandle.vue
new file mode 100644
index 0000000..1ba7af1
--- /dev/null
+++ b/apps/website-vue/src/components/ui/resizable/ResizableHandle.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { GripVertical } from "lucide-vue-next"
+import { SplitterResizeHandle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes["class"], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
+    <template v-if="props.withHandle">
+      <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>
diff --git a/apps/website-vue/src/components/ui/resizable/ResizablePanelGroup.vue b/apps/website-vue/src/components/ui/resizable/ResizablePanelGroup.vue
new file mode 100644
index 0000000..a555d40
--- /dev/null
+++ b/apps/website-vue/src/components/ui/resizable/ResizablePanelGroup.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SplitterGroup, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
+    <slot />
+  </SplitterGroup>
+</template>
diff --git a/apps/website-vue/src/components/ui/resizable/index.ts b/apps/website-vue/src/components/ui/resizable/index.ts
new file mode 100644
index 0000000..c2826b7
--- /dev/null
+++ b/apps/website-vue/src/components/ui/resizable/index.ts
@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from "./ResizableHandle.vue"
+export { default as ResizablePanelGroup } from "./ResizablePanelGroup.vue"
+export { SplitterPanel as ResizablePanel } from "reka-ui"
diff --git a/apps/website-vue/src/components/ui/scroll-area/ScrollArea.vue b/apps/website-vue/src/components/ui/scroll-area/ScrollArea.vue
new file mode 100644
index 0000000..ee774a5
--- /dev/null
+++ b/apps/website-vue/src/components/ui/scroll-area/ScrollArea.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaViewport,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import ScrollBar from "./ScrollBar.vue"
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/scroll-area/ScrollBar.vue b/apps/website-vue/src/components/ui/scroll-area/ScrollBar.vue
new file mode 100644
index 0000000..37fd931
--- /dev/null
+++ b/apps/website-vue/src/components/ui/scroll-area/ScrollBar.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(), {
+  orientation: "vertical",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         props.class)"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>
diff --git a/apps/website-vue/src/components/ui/scroll-area/index.ts b/apps/website-vue/src/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..c416759
--- /dev/null
+++ b/apps/website-vue/src/components/ui/scroll-area/index.ts
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from "./ScrollArea.vue"
+export { default as ScrollBar } from "./ScrollBar.vue"
diff --git a/apps/website-vue/src/components/ui/select/Select.vue b/apps/website-vue/src/components/ui/select/Select.vue
new file mode 100644
index 0000000..416fefd
--- /dev/null
+++ b/apps/website-vue/src/components/ui/select/Select.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from "reka-ui"
+import { SelectRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/select/SelectContent.vue b/apps/website-vue/src/components/ui/select/SelectContent.vue
new file mode 100644
index 0000000..b39b42f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/select/SelectContent.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { SelectScrollDownButton, SelectScrollUpButton } from "."
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    position: "popper",
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width)')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/select/SelectGroup.vue b/apps/website-vue/src/components/ui/select/SelectGroup.vue
new file mode 100644
index 0000000..5e08945
--- /dev/null
+++ b/apps/website-vue/src/components/ui/select/SelectGroup.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectGroup } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/apps/website-vue/src/components/ui/select/SelectItem.vue b/apps/website-vue/src/components/ui/select/SelectItem.vue
new file mode 100644
index 0000000..c4596a7
--- /dev/null
+++ b/apps/website-vue/src/components/ui/select/SelectItem.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { SelectItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import {
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/select/SelectItemText.vue b/apps/website-vue/src/components/ui/select/SelectItemText.vue
new file mode 100644
index 0000000..3339d52
--- /dev/null
+++ b/apps/website-vue/src/components/ui/select/SelectItemText.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectItemTextProps } from "reka-ui"
+import { SelectItemText } from "reka-ui"
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/apps/website-vue/src/components/ui/select/SelectLabel.vue b/apps/website-vue/src/components/ui/select/SelectLabel.vue
new file mode 100644
index 0000000..c751840
--- /dev/null
+++ b/apps/website-vue/src/components/ui/select/SelectLabel.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { SelectLabel } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/apps/website-vue/src/components/ui/select/SelectScrollDownButton.vue b/apps/website-vue/src/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000..c999e65
--- /dev/null
+++ b/apps/website-vue/src/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import { SelectScrollDownButton, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/apps/website-vue/src/components/ui/select/SelectScrollUpButton.vue b/apps/website-vue/src/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000..4906cc8
--- /dev/null
+++ b/apps/website-vue/src/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronUp } from "lucide-vue-next"
+import { SelectScrollUpButton, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/apps/website-vue/src/components/ui/select/SelectSeparator.vue b/apps/website-vue/src/components/ui/select/SelectSeparator.vue
new file mode 100644
index 0000000..89c12ea
--- /dev/null
+++ b/apps/website-vue/src/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectSeparator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/apps/website-vue/src/components/ui/select/SelectTrigger.vue b/apps/website-vue/src/components/ui/select/SelectTrigger.vue
new file mode 100644
index 0000000..1667365
--- /dev/null
+++ b/apps/website-vue/src/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/select/SelectValue.vue b/apps/website-vue/src/components/ui/select/SelectValue.vue
new file mode 100644
index 0000000..d8bba4d
--- /dev/null
+++ b/apps/website-vue/src/components/ui/select/SelectValue.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectValueProps } from "reka-ui"
+import { SelectValue } from "reka-ui"
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/apps/website-vue/src/components/ui/select/index.ts b/apps/website-vue/src/components/ui/select/index.ts
new file mode 100644
index 0000000..96eae60
--- /dev/null
+++ b/apps/website-vue/src/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from "./Select.vue"
+export { default as SelectContent } from "./SelectContent.vue"
+export { default as SelectGroup } from "./SelectGroup.vue"
+export { default as SelectItem } from "./SelectItem.vue"
+export { default as SelectItemText } from "./SelectItemText.vue"
+export { default as SelectLabel } from "./SelectLabel.vue"
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue"
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue"
+export { default as SelectSeparator } from "./SelectSeparator.vue"
+export { default as SelectTrigger } from "./SelectTrigger.vue"
+export { default as SelectValue } from "./SelectValue.vue"
diff --git a/apps/website-vue/src/components/ui/separator/Separator.vue b/apps/website-vue/src/components/ui/separator/Separator.vue
new file mode 100644
index 0000000..3daf562
--- /dev/null
+++ b/apps/website-vue/src/components/ui/separator/Separator.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<
+  SeparatorProps & { class?: HTMLAttributes["class"] }
+>(), {
+  orientation: "horizontal",
+  decorative: true,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border',
+        props.orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
+        props.class,
+      )
+    "
+  />
+</template>
diff --git a/apps/website-vue/src/components/ui/separator/index.ts b/apps/website-vue/src/components/ui/separator/index.ts
new file mode 100644
index 0000000..4407287
--- /dev/null
+++ b/apps/website-vue/src/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue"
diff --git a/apps/website-vue/src/components/ui/sheet/Sheet.vue b/apps/website-vue/src/components/ui/sheet/Sheet.vue
new file mode 100644
index 0000000..47b0968
--- /dev/null
+++ b/apps/website-vue/src/components/ui/sheet/Sheet.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/sheet/SheetClose.vue b/apps/website-vue/src/components/ui/sheet/SheetClose.vue
new file mode 100644
index 0000000..0295976
--- /dev/null
+++ b/apps/website-vue/src/components/ui/sheet/SheetClose.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/apps/website-vue/src/components/ui/sheet/SheetContent.vue b/apps/website-vue/src/components/ui/sheet/SheetContent.vue
new file mode 100644
index 0000000..567b017
--- /dev/null
+++ b/apps/website-vue/src/components/ui/sheet/SheetContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { SheetVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { sheetVariants } from "."
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"]
+  side?: SheetVariants["side"]
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "side")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <X class="w-4 h-4 text-muted-foreground" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/sheet/SheetDescription.vue b/apps/website-vue/src/components/ui/sheet/SheetDescription.vue
new file mode 100644
index 0000000..455c2f4
--- /dev/null
+++ b/apps/website-vue/src/components/ui/sheet/SheetDescription.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/apps/website-vue/src/components/ui/sheet/SheetFooter.vue b/apps/website-vue/src/components/ui/sheet/SheetFooter.vue
new file mode 100644
index 0000000..5f481e5
--- /dev/null
+++ b/apps/website-vue/src/components/ui/sheet/SheetFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/sheet/SheetHeader.vue b/apps/website-vue/src/components/ui/sheet/SheetHeader.vue
new file mode 100644
index 0000000..f97d24a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/sheet/SheetHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/sheet/SheetTitle.vue b/apps/website-vue/src/components/ui/sheet/SheetTitle.vue
new file mode 100644
index 0000000..5870787
--- /dev/null
+++ b/apps/website-vue/src/components/ui/sheet/SheetTitle.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/apps/website-vue/src/components/ui/sheet/SheetTrigger.vue b/apps/website-vue/src/components/ui/sheet/SheetTrigger.vue
new file mode 100644
index 0000000..a4fc3ee
--- /dev/null
+++ b/apps/website-vue/src/components/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/sheet/index.ts b/apps/website-vue/src/components/ui/sheet/index.ts
new file mode 100644
index 0000000..a370633
--- /dev/null
+++ b/apps/website-vue/src/components/ui/sheet/index.ts
@@ -0,0 +1,32 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Sheet } from "./Sheet.vue"
+export { default as SheetClose } from "./SheetClose.vue"
+export { default as SheetContent } from "./SheetContent.vue"
+export { default as SheetDescription } from "./SheetDescription.vue"
+export { default as SheetFooter } from "./SheetFooter.vue"
+export { default as SheetHeader } from "./SheetHeader.vue"
+export { default as SheetTitle } from "./SheetTitle.vue"
+export { default as SheetTrigger } from "./SheetTrigger.vue"
+
+export const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+            "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>
diff --git a/apps/website-vue/src/components/ui/skeleton/Skeleton.vue b/apps/website-vue/src/components/ui/skeleton/Skeleton.vue
new file mode 100644
index 0000000..4e0697e
--- /dev/null
+++ b/apps/website-vue/src/components/ui/skeleton/Skeleton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+interface SkeletonProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
+</template>
diff --git a/apps/website-vue/src/components/ui/skeleton/index.ts b/apps/website-vue/src/components/ui/skeleton/index.ts
new file mode 100644
index 0000000..e5ce72c
--- /dev/null
+++ b/apps/website-vue/src/components/ui/skeleton/index.ts
@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.vue"
diff --git a/apps/website-vue/src/components/ui/slider/Slider.vue b/apps/website-vue/src/components/ui/slider/Slider.vue
new file mode 100644
index 0000000..591805f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/slider/Slider.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    :class="cn(
+      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack class="relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary">
+      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
+    </SliderTrack>
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      class="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+    />
+  </SliderRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/slider/index.ts b/apps/website-vue/src/components/ui/slider/index.ts
new file mode 100644
index 0000000..f7a7b09
--- /dev/null
+++ b/apps/website-vue/src/components/ui/slider/index.ts
@@ -0,0 +1 @@
+export { default as Slider } from "./Slider.vue"
diff --git a/apps/website-vue/src/components/ui/sonner/Sonner.vue b/apps/website-vue/src/components/ui/sonner/Sonner.vue
new file mode 100644
index 0000000..f59f005
--- /dev/null
+++ b/apps/website-vue/src/components/ui/sonner/Sonner.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import type { ToasterProps } from "vue-sonner"
+import { reactiveOmit } from "@vueuse/core"
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-vue-next"
+import { Toaster as Sonner } from "vue-sonner"
+
+const props = defineProps<ToasterProps>()
+const delegatedProps = reactiveOmit(props, "toastOptions")
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    :toast-options="{
+      classes: {
+        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton:
+          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton:
+          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+      },
+    }"
+    v-bind="delegatedProps"
+  >
+    <template #success-icon>
+      <CircleCheckIcon class="size-4" />
+    </template>
+    <template #info-icon>
+      <InfoIcon class="size-4" />
+    </template>
+    <template #warning-icon>
+      <TriangleAlertIcon class="size-4" />
+    </template>
+    <template #error-icon>
+      <OctagonXIcon class="size-4" />
+    </template>
+    <template #loading-icon>
+      <div>
+        <Loader2Icon class="size-4 animate-spin" />
+      </div>
+    </template>
+    <template #close-icon>
+      <XIcon class="size-4" />
+    </template>
+  </Sonner>
+</template>
diff --git a/apps/website-vue/src/components/ui/sonner/index.ts b/apps/website-vue/src/components/ui/sonner/index.ts
new file mode 100644
index 0000000..6673112
--- /dev/null
+++ b/apps/website-vue/src/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./Sonner.vue"
diff --git a/apps/website-vue/src/components/ui/switch/Switch.vue b/apps/website-vue/src/components/ui/switch/Switch.vue
new file mode 100644
index 0000000..3b0eaea
--- /dev/null
+++ b/apps/website-vue/src/components/ui/switch/Switch.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SwitchRoot,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/switch/index.ts b/apps/website-vue/src/components/ui/switch/index.ts
new file mode 100644
index 0000000..cc081f3
--- /dev/null
+++ b/apps/website-vue/src/components/ui/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.vue"
diff --git a/apps/website-vue/src/components/ui/table/Table.vue b/apps/website-vue/src/components/ui/table/Table.vue
new file mode 100644
index 0000000..26c7c45
--- /dev/null
+++ b/apps/website-vue/src/components/ui/table/Table.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/apps/website-vue/src/components/ui/table/TableBody.vue b/apps/website-vue/src/components/ui/table/TableBody.vue
new file mode 100644
index 0000000..fadb9a7
--- /dev/null
+++ b/apps/website-vue/src/components/ui/table/TableBody.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>
diff --git a/apps/website-vue/src/components/ui/table/TableCaption.vue b/apps/website-vue/src/components/ui/table/TableCaption.vue
new file mode 100644
index 0000000..a2bf57f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/table/TableCaption.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>
diff --git a/apps/website-vue/src/components/ui/table/TableCell.vue b/apps/website-vue/src/components/ui/table/TableCell.vue
new file mode 100644
index 0000000..4a86e3a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/table/TableCell.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/apps/website-vue/src/components/ui/table/TableEmpty.vue b/apps/website-vue/src/components/ui/table/TableEmpty.vue
new file mode 100644
index 0000000..9519328
--- /dev/null
+++ b/apps/website-vue/src/components/ui/table/TableEmpty.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+import TableCell from "./TableCell.vue"
+import TableRow from "./TableRow.vue"
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes["class"]
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/apps/website-vue/src/components/ui/table/TableFooter.vue b/apps/website-vue/src/components/ui/table/TableFooter.vue
new file mode 100644
index 0000000..7f3bf64
--- /dev/null
+++ b/apps/website-vue/src/components/ui/table/TableFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+    <slot />
+  </tfoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/table/TableHead.vue b/apps/website-vue/src/components/ui/table/TableHead.vue
new file mode 100644
index 0000000..ddf635c
--- /dev/null
+++ b/apps/website-vue/src/components/ui/table/TableHead.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
+    <slot />
+  </th>
+</template>
diff --git a/apps/website-vue/src/components/ui/table/TableHeader.vue b/apps/website-vue/src/components/ui/table/TableHeader.vue
new file mode 100644
index 0000000..66e1e60
--- /dev/null
+++ b/apps/website-vue/src/components/ui/table/TableHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>
diff --git a/apps/website-vue/src/components/ui/table/TableRow.vue b/apps/website-vue/src/components/ui/table/TableRow.vue
new file mode 100644
index 0000000..036db30
--- /dev/null
+++ b/apps/website-vue/src/components/ui/table/TableRow.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+    <slot />
+  </tr>
+</template>
diff --git a/apps/website-vue/src/components/ui/table/index.ts b/apps/website-vue/src/components/ui/table/index.ts
new file mode 100644
index 0000000..3be308b
--- /dev/null
+++ b/apps/website-vue/src/components/ui/table/index.ts
@@ -0,0 +1,9 @@
+export { default as Table } from "./Table.vue"
+export { default as TableBody } from "./TableBody.vue"
+export { default as TableCaption } from "./TableCaption.vue"
+export { default as TableCell } from "./TableCell.vue"
+export { default as TableEmpty } from "./TableEmpty.vue"
+export { default as TableFooter } from "./TableFooter.vue"
+export { default as TableHead } from "./TableHead.vue"
+export { default as TableHeader } from "./TableHeader.vue"
+export { default as TableRow } from "./TableRow.vue"
diff --git a/apps/website-vue/src/components/ui/tabs/Tabs.vue b/apps/website-vue/src/components/ui/tabs/Tabs.vue
new file mode 100644
index 0000000..edddccc
--- /dev/null
+++ b/apps/website-vue/src/components/ui/tabs/Tabs.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from "reka-ui"
+import { TabsRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/tabs/TabsContent.vue b/apps/website-vue/src/components/ui/tabs/TabsContent.vue
new file mode 100644
index 0000000..c3b555f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/tabs/TabsContent.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { TabsContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsContent } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsContent
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
diff --git a/apps/website-vue/src/components/ui/tabs/TabsList.vue b/apps/website-vue/src/components/ui/tabs/TabsList.vue
new file mode 100644
index 0000000..19d766e
--- /dev/null
+++ b/apps/website-vue/src/components/ui/tabs/TabsList.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsListProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsList } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>
diff --git a/apps/website-vue/src/components/ui/tabs/TabsTrigger.vue b/apps/website-vue/src/components/ui/tabs/TabsTrigger.vue
new file mode 100644
index 0000000..3e43d53
--- /dev/null
+++ b/apps/website-vue/src/components/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TabsTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      props.class,
+    )"
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/tabs/index.ts b/apps/website-vue/src/components/ui/tabs/index.ts
new file mode 100644
index 0000000..7f99b7f
--- /dev/null
+++ b/apps/website-vue/src/components/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.vue"
+export { default as TabsContent } from "./TabsContent.vue"
+export { default as TabsList } from "./TabsList.vue"
+export { default as TabsTrigger } from "./TabsTrigger.vue"
diff --git a/apps/website-vue/src/components/ui/textarea/Textarea.vue b/apps/website-vue/src/components/ui/textarea/Textarea.vue
new file mode 100644
index 0000000..8c380ff
--- /dev/null
+++ b/apps/website-vue/src/components/ui/textarea/Textarea.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+</template>
diff --git a/apps/website-vue/src/components/ui/textarea/index.ts b/apps/website-vue/src/components/ui/textarea/index.ts
new file mode 100644
index 0000000..8ce91e9
--- /dev/null
+++ b/apps/website-vue/src/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from "./Textarea.vue"
diff --git a/apps/website-vue/src/components/ui/toast/Toast.vue b/apps/website-vue/src/components/ui/toast/Toast.vue
new file mode 100644
index 0000000..038a320
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toast/Toast.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ToastRootEmits } from "reka-ui"
+import type { ToastProps } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { ToastRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { toastVariants } from "."
+
+const props = defineProps<ToastProps>()
+
+const emits = defineEmits<ToastRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToastRoot
+    v-bind="forwarded"
+    :class="cn(toastVariants({ variant }), props.class)"
+    @update:open="onOpenChange"
+  >
+    <slot />
+  </ToastRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/toast/ToastAction.vue b/apps/website-vue/src/components/ui/toast/ToastAction.vue
new file mode 100644
index 0000000..e3528a8
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toast/ToastAction.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ToastActionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ToastAction } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ToastActionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+    <slot />
+  </ToastAction>
+</template>
diff --git a/apps/website-vue/src/components/ui/toast/ToastClose.vue b/apps/website-vue/src/components/ui/toast/ToastClose.vue
new file mode 100644
index 0000000..286aa65
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toast/ToastClose.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ToastCloseProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import { ToastClose } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ToastCloseProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
+    <X class="h-4 w-4" />
+  </ToastClose>
+</template>
diff --git a/apps/website-vue/src/components/ui/toast/ToastDescription.vue b/apps/website-vue/src/components/ui/toast/ToastDescription.vue
new file mode 100644
index 0000000..1d54627
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toast/ToastDescription.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ToastDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ToastDescription } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="delegatedProps">
+    <slot />
+  </ToastDescription>
+</template>
diff --git a/apps/website-vue/src/components/ui/toast/ToastProvider.vue b/apps/website-vue/src/components/ui/toast/ToastProvider.vue
new file mode 100644
index 0000000..5dc66cc
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toast/ToastProvider.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ToastProviderProps } from "reka-ui"
+import { ToastProvider } from "reka-ui"
+
+const props = defineProps<ToastProviderProps>()
+</script>
+
+<template>
+  <ToastProvider v-bind="props">
+    <slot />
+  </ToastProvider>
+</template>
diff --git a/apps/website-vue/src/components/ui/toast/ToastTitle.vue b/apps/website-vue/src/components/ui/toast/ToastTitle.vue
new file mode 100644
index 0000000..f0d1329
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toast/ToastTitle.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ToastTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ToastTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ToastTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold', props.class)">
+    <slot />
+  </ToastTitle>
+</template>
diff --git a/apps/website-vue/src/components/ui/toast/ToastViewport.vue b/apps/website-vue/src/components/ui/toast/ToastViewport.vue
new file mode 100644
index 0000000..71a35e1
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toast/ToastViewport.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ToastViewportProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ToastViewport } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ToastViewportProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+</template>
diff --git a/apps/website-vue/src/components/ui/toast/Toaster.vue b/apps/website-vue/src/components/ui/toast/Toaster.vue
new file mode 100644
index 0000000..cf217d9
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toast/Toaster.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { isVNode } from "vue"
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "."
+import { useToast } from "./use-toast"
+
+const { toasts } = useToast()
+</script>
+
+<template>
+  <ToastProvider>
+    <Toast v-for="toast in toasts" :key="toast.id" v-bind="toast">
+      <div class="grid gap-1">
+        <ToastTitle v-if="toast.title">
+          {{ toast.title }}
+        </ToastTitle>
+        <template v-if="toast.description">
+          <ToastDescription v-if="isVNode(toast.description)">
+            <component :is="toast.description" />
+          </ToastDescription>
+          <ToastDescription v-else>
+            {{ toast.description }}
+          </ToastDescription>
+        </template>
+        <ToastClose />
+      </div>
+      <component :is="toast.action" />
+    </Toast>
+    <ToastViewport />
+  </ToastProvider>
+</template>
diff --git a/apps/website-vue/src/components/ui/toast/index.ts b/apps/website-vue/src/components/ui/toast/index.ts
new file mode 100644
index 0000000..894345d
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toast/index.ts
@@ -0,0 +1,39 @@
+import type { ToastRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+
+export { default as Toast } from "./Toast.vue"
+export { default as ToastAction } from "./ToastAction.vue"
+export { default as ToastClose } from "./ToastClose.vue"
+export { default as ToastDescription } from "./ToastDescription.vue"
+export { default as Toaster } from "./Toaster.vue"
+export { default as ToastProvider } from "./ToastProvider.vue"
+export { default as ToastTitle } from "./ToastTitle.vue"
+export { default as ToastViewport } from "./ToastViewport.vue"
+export { toast, useToast } from "./use-toast"
+
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--reka-toast-swipe-end-x) data-[swipe=move]:translate-x-(--reka-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+                    "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+type ToastVariants = VariantProps<typeof toastVariants>
+
+export interface ToastProps extends ToastRootProps {
+  class?: HTMLAttributes["class"]
+  variant?: ToastVariants["variant"]
+  onOpenChange?: ((value: boolean) => void) | undefined
+}
diff --git a/apps/website-vue/src/components/ui/toast/use-toast.ts b/apps/website-vue/src/components/ui/toast/use-toast.ts
new file mode 100644
index 0000000..b804c51
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toast/use-toast.ts
@@ -0,0 +1,165 @@
+import type { Component, VNode } from "vue"
+import type { ToastProps } from "."
+import { computed, ref } from "vue"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+export type StringOrVNode
+  = | string
+    | VNode
+    | (() => VNode)
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: string
+  description?: StringOrVNode
+  action?: Component
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action
+  = | {
+    type: ActionType["ADD_TOAST"]
+    toast: ToasterToast
+  }
+  | {
+    type: ActionType["UPDATE_TOAST"]
+    toast: Partial<ToasterToast>
+  }
+  | {
+    type: ActionType["DISMISS_TOAST"]
+    toastId?: ToasterToast["id"]
+  }
+  | {
+    type: ActionType["REMOVE_TOAST"]
+    toastId?: ToasterToast["id"]
+  }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+function addToRemoveQueue(toastId: string) {
+  if (toastTimeouts.has(toastId))
+    return
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: actionTypes.REMOVE_TOAST,
+      toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+const state = ref<State>({
+  toasts: [],
+})
+
+function dispatch(action: Action) {
+  switch (action.type) {
+    case actionTypes.ADD_TOAST:
+      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)
+      break
+
+    case actionTypes.UPDATE_TOAST:
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === action.toast.id ? { ...t, ...action.toast } : t,
+      )
+      break
+
+    case actionTypes.DISMISS_TOAST: {
+      const { toastId } = action
+
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      }
+      else {
+        state.value.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === toastId || toastId === undefined
+          ? {
+              ...t,
+              open: false,
+            }
+          : t,
+      )
+      break
+    }
+
+    case actionTypes.REMOVE_TOAST:
+      if (action.toastId === undefined)
+        state.value.toasts = []
+      else
+        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)
+
+      break
+  }
+}
+
+function useToast() {
+  return {
+    toasts: computed(() => state.value.toasts),
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
+  }
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast(props: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: actionTypes.UPDATE_TOAST,
+      toast: { ...props, id },
+    })
+
+  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })
+
+  dispatch({
+    type: actionTypes.ADD_TOAST,
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open: boolean) => {
+        if (!open)
+          dismiss()
+      },
+    },
+  })
+
+  return {
+    id,
+    dismiss,
+    update,
+  }
+}
+
+export { toast, useToast }
diff --git a/apps/website-vue/src/components/ui/toggle-group/ToggleGroup.vue b/apps/website-vue/src/components/ui/toggle-group/ToggleGroup.vue
new file mode 100644
index 0000000..a236833
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toggle-group/ToggleGroup.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority"
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { toggleVariants } from '@/components/ui/toggle'
+import { reactiveOmit } from "@vueuse/core"
+import { ToggleGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { provide } from "vue"
+import { cn } from "@/lib/utils"
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupRootProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleGroupVariants["variant"]
+  size?: ToggleGroupVariants["size"]
+}>()
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide("toggleGroup", {
+  variant: props.variant,
+  size: props.size,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot v-slot="slotProps" v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
+    <slot v-bind="slotProps" />
+  </ToggleGroupRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/toggle-group/ToggleGroupItem.vue b/apps/website-vue/src/components/ui/toggle-group/ToggleGroupItem.vue
new file mode 100644
index 0000000..06db458
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toggle-group/ToggleGroupItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { VariantProps } from "class-variance-authority"
+import type { ToggleGroupItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ToggleGroupItem, useForwardProps } from "reka-ui"
+import { inject } from "vue"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from '@/components/ui/toggle'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleGroupVariants["variant"]
+  size?: ToggleGroupVariants["size"]
+}>()
+
+const context = inject<ToggleGroupVariants>("toggleGroup")
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-slot="slotProps"
+    v-bind="forwardedProps" :class="cn(toggleVariants({
+      variant: context?.variant || variant,
+      size: context?.size || size,
+    }), props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupItem>
+</template>
diff --git a/apps/website-vue/src/components/ui/toggle-group/index.ts b/apps/website-vue/src/components/ui/toggle-group/index.ts
new file mode 100644
index 0000000..c6ce2fc
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toggle-group/index.ts
@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./ToggleGroup.vue"
+export { default as ToggleGroupItem } from "./ToggleGroupItem.vue"
diff --git a/apps/website-vue/src/components/ui/toggle/Toggle.vue b/apps/website-vue/src/components/ui/toggle/Toggle.vue
new file mode 100644
index 0000000..5f1cc15
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toggle/Toggle.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ToggleVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Toggle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "."
+
+const props = withDefaults(defineProps<ToggleProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ToggleVariants["variant"]
+  size?: ToggleVariants["size"]
+}>(), {
+  variant: "default",
+  size: "default",
+  disabled: false,
+})
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "size", "variant")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <Toggle
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </Toggle>
+</template>
diff --git a/apps/website-vue/src/components/ui/toggle/index.ts b/apps/website-vue/src/components/ui/toggle/index.ts
new file mode 100644
index 0000000..fcf2389
--- /dev/null
+++ b/apps/website-vue/src/components/ui/toggle/index.ts
@@ -0,0 +1,28 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Toggle } from "./Toggle.vue"
+
+export const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>
diff --git a/apps/website-vue/src/components/ui/tooltip/Tooltip.vue b/apps/website-vue/src/components/ui/tooltip/Tooltip.vue
new file mode 100644
index 0000000..c828de0
--- /dev/null
+++ b/apps/website-vue/src/components/ui/tooltip/Tooltip.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from "reka-ui"
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>
diff --git a/apps/website-vue/src/components/ui/tooltip/TooltipContent.vue b/apps/website-vue/src/components/ui/tooltip/TooltipContent.vue
new file mode 100644
index 0000000..e033496
--- /dev/null
+++ b/apps/website-vue/src/components/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
diff --git a/apps/website-vue/src/components/ui/tooltip/TooltipProvider.vue b/apps/website-vue/src/components/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 0000000..6d19b8a
--- /dev/null
+++ b/apps/website-vue/src/components/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from "reka-ui"
+import { TooltipProvider } from "reka-ui"
+
+const props = defineProps<TooltipProviderProps>()
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
diff --git a/apps/website-vue/src/components/ui/tooltip/TooltipTrigger.vue b/apps/website-vue/src/components/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 0000000..26424de
--- /dev/null
+++ b/apps/website-vue/src/components/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from "reka-ui"
+import { TooltipTrigger } from "reka-ui"
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>
diff --git a/apps/website-vue/src/components/ui/tooltip/index.ts b/apps/website-vue/src/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..8f8d514
--- /dev/null
+++ b/apps/website-vue/src/components/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue"
+export { default as TooltipContent } from "./TooltipContent.vue"
+export { default as TooltipProvider } from "./TooltipProvider.vue"
+export { default as TooltipTrigger } from "./TooltipTrigger.vue"
diff --git a/apps/website-vue/src/index.css b/apps/website-vue/src/index.css
new file mode 100644
index 0000000..26ee809
--- /dev/null
+++ b/apps/website-vue/src/index.css
@@ -0,0 +1,179 @@
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Targo Green Theme */
+    --background: 0 0% 100%;
+    --foreground: 160 10% 15%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 160 10% 15%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 160 10% 15%;
+
+    /* Targo primary green */
+    --primary: 142 70% 45%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 145 40% 96%;
+    --secondary-foreground: 160 10% 15%;
+
+    --muted: 145 20% 96%;
+    --muted-foreground: 160 10% 45%;
+
+    --accent: 142 70% 45%;
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 145 20% 90%;
+    --input: 145 20% 90%;
+    --ring: 142 70% 45%;
+
+    --radius: 0.75rem;
+
+    /* Custom colors */
+    --targo-green: 142 70% 45%;
+    --targo-green-light: 142 60% 55%;
+    --targo-green-dark: 142 75% 35%;
+    --targo-gray: 160 5% 50%;
+    --targo-dark: 228 15% 13%;
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 160 10% 26%;
+    --sidebar-primary: 142 70% 45%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 145 40% 95%;
+    --sidebar-accent-foreground: 160 10% 15%;
+    --sidebar-border: 145 20% 91%;
+    --sidebar-ring: 142 70% 45%;
+  }
+
+  .dark {
+    --background: 160 15% 8%;
+    --foreground: 145 20% 95%;
+
+    --card: 160 15% 12%;
+    --card-foreground: 145 20% 95%;
+
+    --popover: 160 15% 10%;
+    --popover-foreground: 145 20% 95%;
+
+    --primary: 142 70% 50%;
+    --primary-foreground: 160 15% 8%;
+
+    --secondary: 160 15% 18%;
+    --secondary-foreground: 145 20% 95%;
+
+    --muted: 160 15% 18%;
+    --muted-foreground: 145 15% 65%;
+
+    --accent: 142 70% 50%;
+    --accent-foreground: 160 15% 8%;
+
+    --destructive: 0 62.8% 45%;
+    --destructive-foreground: 145 20% 95%;
+
+    --border: 160 15% 20%;
+    --input: 160 15% 20%;
+    --ring: 142 70% 50%;
+
+    --targo-green: 142 70% 50%;
+    --targo-green-light: 142 60% 60%;
+    --targo-green-dark: 142 75% 40%;
+
+    --sidebar-background: 160 15% 10%;
+    --sidebar-foreground: 145 20% 95%;
+    --sidebar-primary: 142 70% 50%;
+    --sidebar-primary-foreground: 160 15% 8%;
+    --sidebar-accent: 160 15% 15%;
+    --sidebar-accent-foreground: 145 20% 95%;
+    --sidebar-border: 160 15% 18%;
+    --sidebar-ring: 142 70% 50%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: "Space Grotesk", sans-serif;
+  }
+}
+
+@layer utilities {
+  .gradient-targo {
+    background: linear-gradient(135deg, hsl(var(--targo-green)) 0%, hsl(var(--targo-green-dark)) 100%);
+    background-size: 200% 200%;
+    animation: gradient-shift 8s ease infinite;
+  }
+
+  @keyframes gradient-shift {
+    0% {
+      background-position: 0% 50%;
+    }
+
+    50% {
+      background-position: 100% 50%;
+    }
+
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  .glass-card {
+    @apply bg-white/70 backdrop-blur-md border border-white/20 shadow-xl;
+  }
+
+  .glass-card-dark {
+    @apply bg-targo-dark/40 backdrop-blur-md border border-white/10 shadow-2xl;
+  }
+
+  .text-gradient-targo {
+    background: linear-gradient(135deg, hsl(var(--targo-green)) 0%, hsl(var(--targo-green-light)) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    @apply font-bold;
+  }
+
+  .glow-targo {
+    box-shadow: 0 0 30px hsl(var(--targo-green) / 0.2);
+    transition: box-shadow 0.3s ease;
+  }
+
+  .glow-targo:hover {
+    box-shadow: 0 0 50px hsl(var(--targo-green) / 0.4);
+  }
+
+  .fiber-line {
+    background: linear-gradient(90deg, transparent 0%, hsl(var(--targo-green) / 0.3) 50%, transparent 100%);
+    height: 1px;
+  }
+}
+
+@layer base {
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    scroll-behavior: smooth;
+  }
+}
diff --git a/apps/website-vue/src/integrations/supabase/client.ts b/apps/website-vue/src/integrations/supabase/client.ts
new file mode 100644
index 0000000..e99123f
--- /dev/null
+++ b/apps/website-vue/src/integrations/supabase/client.ts
@@ -0,0 +1,19 @@
+// This file is automatically generated. Do not edit it directly.
+// TODO(port): `@supabase/supabase-js` is not yet a dependency of website-vue.
+// Add it (`npm i @supabase/supabase-js`) before using this client, and re-add the
+// generated `./types` (Database) if type-safety is desired.
+import { createClient } from "@supabase/supabase-js";
+
+const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL;
+const SUPABASE_PUBLISHABLE_KEY = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY;
+
+// Import the supabase client like this:
+// import { supabase } from "@/integrations/supabase/client";
+
+export const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, {
+  auth: {
+    storage: localStorage,
+    persistSession: true,
+    autoRefreshToken: true,
+  },
+});
diff --git a/apps/website-vue/src/lib/searchData.ts b/apps/website-vue/src/lib/searchData.ts
new file mode 100644
index 0000000..4f3d71d
--- /dev/null
+++ b/apps/website-vue/src/lib/searchData.ts
@@ -0,0 +1,194 @@
+export type SearchItem = {
+    id: string;
+    title: string;
+    url: string;
+    type: "Page" | "Business" | "Support" | "Legal";
+    keywords?: string[];
+    description?: string;
+};
+
+export const searchItems: SearchItem[] = [
+    // Main Pages
+    {
+        id: "home",
+        title: "Accueil",
+        url: "/",
+        type: "Page",
+        keywords: ["home", "index", "start"],
+        description: "Page d'accueil Targo"
+    },
+    {
+        id: "internet",
+        title: "Internet Résidentiel",
+        url: "/internet",
+        type: "Page",
+        keywords: ["wifi", "fibre", "vitesse", "résidentiel"],
+        description: "Nos forfaits internet illimités"
+    },
+    {
+        id: "television",
+        title: "Télévision",
+        url: "/television",
+        type: "Page",
+        keywords: ["tv", "chaînes", "câble", "hd", "4k"],
+        description: "Forfaits télévision et chaînes à la carte"
+    },
+    {
+        id: "telephone",
+        title: "Téléphonie Résidentielle",
+        url: "/telephone",
+        type: "Page",
+        keywords: ["téléphone", "ligne", "fixe", "appel"],
+        description: "Téléphonie résidentielle fiable"
+    },
+
+    // Business Pages
+    {
+        id: "business",
+        title: "Solutions Affaires",
+        url: "/business",
+        type: "Business",
+        keywords: ["entreprise", "business", "pro", "commercial"],
+        description: "Solutions pour entreprises"
+    },
+    {
+        id: "business-telephonie",
+        title: "Téléphonie IP Affaires",
+        url: "/business/telephonie",
+        type: "Business",
+        keywords: ["voip", "ip", "pbx", "nuage"],
+        description: "Systèmes téléphoniques pour entreprises"
+    },
+    {
+        id: "business-internet",
+        title: "Internet Affaires",
+        url: "/business/internet",
+        type: "Business",
+        keywords: ["fibre", "dedié", "symétrique"],
+        description: "Connexion internet haute performance pour entreprises"
+    },
+    {
+        id: "business-multilogement",
+        title: "Multilogement & RPA",
+        url: "/business/multilogement",
+        type: "Business",
+        keywords: ["immeuble", "condo", "résidence", "aînés"],
+        description: "Solutions pour multilogements et résidences"
+    },
+    {
+        id: "business-amplification",
+        title: "Amplification Cellulaire",
+        url: "/business/amplification-cellulaire",
+        type: "Business",
+        keywords: ["mobile", "signal", "réseau", "couverture"],
+        description: "Amélioration du signal cellulaire en entreprise"
+    },
+    {
+        id: "business-virtualisation",
+        title: "Virtualisation",
+        url: "/business/virtualisation",
+        type: "Business",
+        keywords: ["vm", "serveur", "virtuel"],
+        description: "Solutions de virtualisation"
+    },
+    {
+        id: "business-reseau",
+        title: "Réseaux Inter-sites",
+        url: "/business/reseau-inter-sites",
+        type: "Business",
+        keywords: ["mpls", "vpn", "site", "lan", "wan"],
+        description: "Interconnexion de sites d'entreprise"
+    },
+    {
+        id: "business-wifi",
+        title: "WiFi Commercial",
+        url: "/business/wifi",
+        type: "Business",
+        keywords: ["sans fil", "hotspot", "guest"],
+        description: "Solutions WiFi gérées pour entreprises"
+    },
+    {
+        id: "business-cablage",
+        title: "Câblage Structuré",
+        url: "/business/cablage",
+        type: "Business",
+        keywords: ["ethernet", "fibre", "cat6", "installation"],
+        description: "Installation de câblage structuré"
+    },
+    {
+        id: "business-microsoft",
+        title: "Microsoft 365",
+        url: "/business/microsoft-365",
+        type: "Business",
+        keywords: ["office", "teams", "outlook", "licence"],
+        description: "Licences et gestion Microsoft 365"
+    },
+    {
+        id: "business-sdwan",
+        title: "SD-WAN",
+        url: "/business/sd-wan",
+        type: "Business",
+        keywords: ["wan", "réseau", "gestion", "optimisation"],
+        description: "Solutions SD-WAN pour entreprises"
+    },
+    {
+        id: "business-sip",
+        title: "Trunking SIP",
+        url: "/business/sip",
+        type: "Business",
+        keywords: ["sip", "trunk", "voip"],
+        description: "Lignes SIP pour IP-PBX"
+    },
+    {
+        id: "business-cloud",
+        title: "Services Cloud",
+        url: "/business/cloud",
+        type: "Business",
+        keywords: ["nuage", "hébergement", "serveur"],
+        description: "Solutions d'infrastructure cloud"
+    },
+    {
+        id: "business-vpn",
+        title: "VPN Entreprise",
+        url: "/business/vpn",
+        type: "Business",
+        keywords: ["sécurité", "télétravail", "accès à distance"],
+        description: "Accès distant sécurisé"
+    },
+    {
+        id: "business-securite",
+        title: "Sécurité Réseau",
+        url: "/business/securite",
+        type: "Business",
+        keywords: ["firewall", "pare-feu", "cybersécurité", "menace"],
+        description: "Protection et sécurité des réseaux"
+    },
+
+    // Support & Info
+    {
+        id: "support",
+        title: "Support Technique",
+        url: "/support",
+        type: "Support",
+        keywords: ["aide", "contact", "problème", "panne"],
+        description: "Obtenez de l'aide rapidement"
+    },
+    {
+        id: "actualites",
+        title: "Actualités",
+        url: "/actualites",
+        type: "Support",
+        keywords: ["nouvelles", "blog", "presse"],
+        description: "Dernières nouvelles de Targo"
+    },
+
+    // External
+    {
+        id: "client-portal",
+        title: "Espace Client",
+        url: "https://store.targo.ca/clients",
+        type: "Support",
+        keywords: ["login", "connexion", "facture", "compte"],
+        description: "Accédez à votre compte client"
+    }
+];
diff --git a/apps/website-vue/src/lib/utils.ts b/apps/website-vue/src/lib/utils.ts
new file mode 100644
index 0000000..365058c
--- /dev/null
+++ b/apps/website-vue/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/apps/website-vue/src/main.ts b/apps/website-vue/src/main.ts
new file mode 100644
index 0000000..4da3bc6
--- /dev/null
+++ b/apps/website-vue/src/main.ts
@@ -0,0 +1,12 @@
+import { createApp } from "vue";
+import { VueQueryPlugin } from "@tanstack/vue-query";
+import { MotionPlugin } from "@vueuse/motion";
+import App from "./App.vue";
+import router from "./router";
+import "./index.css";
+
+createApp(App)
+  .use(router)
+  .use(VueQueryPlugin)
+  .use(MotionPlugin)
+  .mount("#app");
diff --git a/apps/website-vue/src/pages/Accessibilite.vue b/apps/website-vue/src/pages/Accessibilite.vue
new file mode 100644
index 0000000..b90b072
--- /dev/null
+++ b/apps/website-vue/src/pages/Accessibilite.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+</script>
+
+<template>
+  <Header />
+  <main class="min-h-screen bg-background pt-32 pb-20">
+    <div class="max-w-3xl mx-auto px-6">
+      <div class="mb-4">
+        <RouterLink to="/" class="text-sm text-muted-foreground hover:text-targo-green transition-colors">← Retour à l'accueil</RouterLink>
+      </div>
+      <h1 class="text-3xl font-display font-bold mb-8">Plan sur l'accessibilité</h1>
+      <p class="text-sm text-muted-foreground mb-8">Targo Communications Inc.</p>
+
+      <div class="prose prose-gray dark:prose-invert max-w-none space-y-6">
+        <section>
+          <h2 class="text-xl font-bold mt-8 mb-3">1. Engagement de l'organisation</h2>
+          <p>Chez Targo Communications Inc., nous croyons que l'accessibilité est un droit fondamental. Nous nous engageons à identifier, prévenir et éliminer les obstacles afin de créer un environnement inclusif pour nos employés, clients et partenaires.</p>
+        </section>
+
+        <section>
+          <h2 class="text-xl font-bold mt-8 mb-3">2. Domaines visés par la Loi canadienne sur l'accessibilité</h2>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">a. Emploi</h3>
+          <ul class="list-disc pl-6 space-y-1">
+            <li>Adapter les processus de recrutement pour permettre l'accès aux candidats en situation de handicap.</li>
+            <li>Offrir des mesures d'adaptation en milieu de travail (ex. : horaires flexibles, outils technologiques).</li>
+          </ul>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">b. Environnement bâti</h3>
+          <ul class="list-disc pl-6 space-y-1">
+            <li>S'assurer que les bureaux, salles de réunion et espaces communs soient accessibles (signalisation claire, toilettes accessibles).</li>
+            <li>Procéder à une évaluation annuelle de l'accessibilité physique des lieux.</li>
+          </ul>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">c. Technologies de l'information et de la communication</h3>
+          <ul class="list-disc pl-6 space-y-1">
+            <li>Rendre notre site Web conforme aux normes WCAG 2.1 AA.</li>
+            <li>Fournir des documents accessibles (PDF balisés, options de lecture audio ou texte agrandi).</li>
+          </ul>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">d. Communication</h3>
+          <ul class="list-disc pl-6 space-y-1">
+            <li>Utiliser un langage clair et inclusif dans toutes nos communications.</li>
+            <li>Offrir des formats alternatifs sur demande.</li>
+          </ul>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">e. Livraison de services</h3>
+          <ul class="list-disc pl-6 space-y-1">
+            <li>Former le personnel pour offrir un service respectueux et inclusif.</li>
+            <li>Prévoir des canaux de communication accessibles pour le soutien à la clientèle.</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2 class="text-xl font-bold mt-8 mb-3">3. Consultation</h2>
+          <p>Nous prévoyons consulter régulièrement des personnes en situation de handicap et des organisations représentatives pour améliorer notre accessibilité.</p>
+        </section>
+
+        <section>
+          <h2 class="text-xl font-bold mt-8 mb-3">4. Suivi et mise à jour</h2>
+          <ul class="list-disc pl-6 space-y-1">
+            <li>Ce plan est révisé chaque année.</li>
+            <li>Un rapport d'avancement sera publié tous les 3 ans conformément à la loi.</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2 class="text-xl font-bold mt-8 mb-3">5. Personne-ressource</h2>
+          <p>Pour toute question ou suggestion concernant ce plan :</p>
+          <p class="mt-2">
+            Responsable de l'accessibilité<br />
+            <a href="mailto:accessibilite@targo.ca" class="text-targo-green hover:underline">accessibilite@targo.ca</a><br />
+            <a href="tel:5144480773" class="text-targo-green hover:underline">514-448-0773 poste 105</a>
+          </p>
+        </section>
+      </div>
+    </div>
+  </main>
+  <Footer />
+</template>
diff --git a/apps/website-vue/src/pages/Actualites.vue b/apps/website-vue/src/pages/Actualites.vue
new file mode 100644
index 0000000..af1ab55
--- /dev/null
+++ b/apps/website-vue/src/pages/Actualites.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Calendar, MapPin, Phone, Mail, Zap, Users, Building2 } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <Header />
+    <main class="pt-32 pb-20">
+      <!-- Hero Section -->
+      <section class="container mb-16">
+        <div class="text-center mb-12">
+          <span class="inline-block px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
+            Actualités
+          </span>
+          <h1 class="text-4xl md:text-5xl font-bold text-foreground mb-4">
+            Les nouvelles de <span class="text-primary">TARGO</span>
+          </h1>
+          <p class="text-muted-foreground text-lg max-w-2xl mx-auto">
+            Suivez notre évolution et découvrez comment nous transformons la connectivité dans notre région.
+          </p>
+        </div>
+      </section>
+
+      <!-- Featured Article -->
+      <section class="container mb-16">
+        <article class="bg-card border border-border rounded-2xl overflow-hidden shadow-lg">
+          <div class="bg-gradient-to-r from-primary to-primary/80 p-8 text-primary-foreground">
+            <div class="flex items-center gap-2 text-sm mb-4 opacity-90">
+              <Calendar class="w-4 h-4" />
+              <span>Décembre 2025</span>
+            </div>
+            <h2 class="text-3xl md:text-4xl font-bold mb-4">
+              TARGO célèbre ses 20 ans avec le lancement du service 3.5 Gigabit
+            </h2>
+            <p class="text-lg opacity-90">
+              Un nouveau sommet de performance dans la région
+            </p>
+          </div>
+
+          <div class="p-8 md:p-12 space-y-8">
+            <div class="prose prose-lg max-w-none">
+              <p class="text-foreground/90 leading-relaxed text-lg">
+                Pionnière du déploiement d'Internet haute vitesse dans la région depuis 2005, <strong class="text-primary">TARGO</strong> souligne son 20ᵉ anniversaire en annonçant le lancement d'un service Internet résidentiel atteignant <strong>3.5 gigabits par seconde</strong>, établissant un nouveau sommet de performance dans la région. Cette avancée place plusieurs municipalités parmi les mieux desservies au pays en matière de connectivité.
+              </p>
+
+              <div class="grid md:grid-cols-3 gap-6 my-10">
+                <div class="bg-primary/5 border border-primary/20 rounded-xl p-6 text-center">
+                  <Zap class="w-10 h-10 text-primary mx-auto mb-3" />
+                  <div class="text-3xl font-bold text-primary mb-1">3.5 Gbps</div>
+                  <div class="text-muted-foreground text-sm">Vitesse disponible</div>
+                </div>
+                <div class="bg-primary/5 border border-primary/20 rounded-xl p-6 text-center">
+                  <MapPin class="w-10 h-10 text-primary mx-auto mb-3" />
+                  <div class="text-3xl font-bold text-primary mb-1">3</div>
+                  <div class="text-muted-foreground text-sm">Municipalités en janvier</div>
+                </div>
+                <div class="bg-primary/5 border border-primary/20 rounded-xl p-6 text-center">
+                  <Building2 class="w-10 h-10 text-primary mx-auto mb-3" />
+                  <div class="text-3xl font-bold text-primary mb-1">8 Gbps</div>
+                  <div class="text-muted-foreground text-sm">À venir bientôt</div>
+                </div>
+              </div>
+
+              <p class="text-foreground/90 leading-relaxed">
+                Les secteurs de <strong>Saint-Chrysostôme</strong>, <strong>Saint-Rémi</strong> et <strong>Sainte-Clotilde</strong> seront les premiers à profiter de cette mise à niveau dès la fin de l'année, suivis d'autres municipalités à partir de janvier 2026. L'entreprise prévoit ensuite des forfaits allant jusqu'à 8 gigabits, des vitesses comparables aux zones les plus avancées de Montréal et Toronto.
+              </p>
+
+              <h3 class="text-2xl font-bold text-foreground mt-10 mb-4 flex items-center gap-3">
+                <span class="w-2 h-8 bg-primary rounded-full"></span>
+                Une fibre véritable jusque dans la maison
+              </h3>
+              <p class="text-foreground/90 leading-relaxed">
+                Sur le plan technique, TARGO se distingue en déployant une <strong>vraie fibre optique</strong>, transportant la vitesse de la lumière jusqu'à la résidence. Alors que plusieurs fournisseurs continuent de proposer des offres « fibre hybride » reposant sur une terminaison en câble de cuivre, TARGO adopte le standard <strong>XGS-PON</strong>, nettement plus avancé que l'EPON utilisé par certains concurrents.
+              </p>
+              <p class="text-foreground/90 leading-relaxed">
+                Cette technologie assure un meilleur temps de réponse, une stabilité supérieure et une capacité de transfert beaucoup plus élevée que les autres réseaux.
+              </p>
+
+              <h3 class="text-2xl font-bold text-foreground mt-10 mb-4 flex items-center gap-3">
+                <span class="w-2 h-8 bg-primary rounded-full"></span>
+                Un joueur vraiment local qui dérange les géants
+              </h3>
+              <p class="text-foreground/90 leading-relaxed">
+                Déjà choisie par de nombreux résidents et par plusieurs organisations majeures de la région, TARGO renforce son avance technologique. L'entreprise réaffirme par ailleurs son engagement envers la communauté locale. Elle demeure <strong>détenue à 100 % par un propriétaire de la région</strong>, contrairement aux affirmations trompeuses véhiculées par des représentants concurrents lors de récentes visites porte-à-porte à Saint-Anicet, laissant croire qu'elle serait devenue américaine.
+              </p>
+              <p class="text-foreground/90 leading-relaxed">
+                Selon l'entreprise, cette indépendance dérange, car elle génère des avantages inégalés pour la région. Les revenus générés localement sont réinvestis dans la communauté, alors que les abonnements versés aux grands groupes sont redistribués à des actionnaires situés hors de la région ou à l'étranger, privant ainsi les municipalités locales de millions de dollars chaque année.
+              </p>
+              <p class="text-foreground/90 leading-relaxed">
+                Pour plusieurs citoyens, choisir un fournisseur local n'est pas seulement une question de vitesse ou de prix, mais aussi une décision dont les retombées profitent directement aux familles et aux entreprises du secteur. Également, avec près de <strong>100 000 $ par an</strong> versés en location d'infrastructures aux commissions scolaires locales, TARGO contribue indirectement au financement de services destinés aux élèves d'ici.
+              </p>
+
+              <h3 class="text-2xl font-bold text-foreground mt-10 mb-4 flex items-center gap-3">
+                <span class="w-2 h-8 bg-primary rounded-full"></span>
+                Proximité et service axé sur les gens d'ici
+              </h3>
+              <p class="text-foreground/90 leading-relaxed">
+                TARGO accorde aussi une grande importance au temps de ses clients. L'équipe vise un <strong>délai d'attente téléphonique sous les trente secondes</strong> et offre la possibilité de rencontrer le personnel directement à ses bureaux de Sainte-Clotilde, une proximité rarement offerte par les grands fournisseurs.
+              </p>
+              <p class="text-foreground/90 leading-relaxed">
+                Avec l'arrivée du service fibre 3.5 Gigabit et le lancement prochain de forfaits allant jusqu'à 8 gigabits, TARGO s'impose comme l'un des acteurs technologiques les plus avancés au Québec, autant en milieu rural qu'en zone urbaine. Son enracinement local et son expertise régionale en font la meilleure alternative indépendante aux grands réseaux nationaux et à leurs filiales.
+              </p>
+            </div>
+
+            <!-- Contact CTA -->
+            <div class="bg-muted/50 border border-border rounded-xl p-8 mt-10">
+              <h4 class="text-xl font-bold text-foreground mb-4">
+                Pour connaître les disponibilités
+              </h4>
+              <p class="text-muted-foreground mb-6">
+                Contactez notre équipe pour vérifier si le service est disponible dans votre secteur.
+              </p>
+              <div class="flex flex-col sm:flex-row gap-4">
+                <Button class="gradient-targo" as-child>
+                  <a href="tel:1-855-888-2746" class="flex items-center gap-2">
+                    <Phone class="w-4 h-4" />
+                    1-855-888-2746
+                  </a>
+                </Button>
+                <Button variant="outline" class="border-primary text-primary hover:bg-primary hover:text-primary-foreground" as-child>
+                  <a href="mailto:support@targo.ca" class="flex items-center gap-2">
+                    <Mail class="w-4 h-4" />
+                    support@targo.ca
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </article>
+      </section>
+
+      <!-- Origin Story -->
+      <section class="container">
+        <article class="bg-card border border-border rounded-2xl overflow-hidden">
+          <div class="p-8 md:p-12">
+            <div class="flex items-center gap-2 text-sm text-muted-foreground mb-4">
+              <Calendar class="w-4 h-4" />
+              <span>Notre histoire - 2005</span>
+            </div>
+            <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">
+              Comment tout a commencé
+            </h2>
+            <div class="flex items-start gap-6">
+              <div class="hidden md:block">
+                <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center">
+                  <Users class="w-8 h-8 text-primary" />
+                </div>
+              </div>
+              <div class="prose prose-lg max-w-none">
+                <p class="text-foreground/90 leading-relaxed text-lg">Tout a commencé en <strong>2005</strong>. Ghislain Guinois, de l'entreprise Western Harvest, n'arrivait plus à transmettre ses documents à la FDA pour exporter ses fruits et légumes : à chaque tentative, l'accès commuté de son entreprise le laissait tomber. À bout de solutions, il a contacté Louis-Paul.</p>
+                <p class="text-foreground/90 leading-relaxed text-lg">Pour Ghislain comme pour bien d'autres agriculteurs et exportateurs de la région confrontés au même problème, c'était devenu une question de survie. Louis-Paul a travaillé de longues heures chaque jour pour mettre au point un système de relais capable de réacheminer le signal Internet jusqu'à son entreprise.</p>
+                <p class="text-muted-foreground italic mt-6">
+                  C'est ainsi qu'est née la mission de TARGO : offrir une connectivité fiable aux entreprises et aux résidents de notre région, là où les grands fournisseurs ne voyaient aucun intérêt à investir.</p>
+              </div>
+            </div>
+          </div>
+        </article>
+      </section>
+    </main>
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/AdminImport.vue b/apps/website-vue/src/pages/AdminImport.vue
new file mode 100644
index 0000000..1d36b39
--- /dev/null
+++ b/apps/website-vue/src/pages/AdminImport.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import ProtectedAdminRoute from "@/components/ProtectedAdminRoute.vue";
+import ImportCard from "./admin-import/ImportCard.vue";
+import CsvSplitter from "./admin-import/CsvSplitter.vue";
+import { CHUNK_SIZE } from "./admin-import/helpers";
+</script>
+
+<template>
+  <ProtectedAdminRoute>
+    <div class="min-h-screen bg-background">
+      <div class="container max-w-3xl py-12 space-y-8">
+        <div>
+          <h1 class="font-display text-3xl font-bold">Import de données</h1>
+          <p class="text-muted-foreground mt-2">
+            Importez les fichiers CSV d'adresses CTOP et de disponibilité fibre.
+            Les fichiers sont traités par lots de {{ CHUNK_SIZE.toLocaleString("fr-CA") }} lignes.
+          </p>
+          <div class="mt-3 p-3 bg-accent/50 rounded-lg text-sm text-muted-foreground">
+            <strong>Important :</strong> Importez d'abord les adresses, puis la fibre (dépendance FK).
+            Supporte CSV (virgule) et TSV (tabulation). Les doublons sont mis à jour automatiquement (upsert).
+          </div>
+        </div>
+
+        <div class="space-y-6">
+          <ImportCard
+            type="addresses"
+            label="1. Adresses CTOP"
+            description="Fichier CSV/TSV des adresses du Québec (identifiant_unique_adresse, adresse_formatee, etc.)"
+          />
+          <ImportCard
+            type="fiber"
+            label="2. Disponibilité fibre"
+            description="Fichier CSV/TSV de couverture fibre (uuidadresse, zone_tarifaire, max_speed, etc.)"
+          />
+        </div>
+
+        <div class="border-t border-border pt-6">
+          <h2 class="text-xl font-semibold mb-4">Outils</h2>
+          <CsvSplitter />
+        </div>
+      </div>
+    </div>
+  </ProtectedAdminRoute>
+</template>
diff --git a/apps/website-vue/src/pages/AdminLogin.vue b/apps/website-vue/src/pages/AdminLogin.vue
new file mode 100644
index 0000000..6f2144c
--- /dev/null
+++ b/apps/website-vue/src/pages/AdminLogin.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { supabase } from "@/integrations/supabase/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2, LogIn } from "lucide-vue-next";
+import { useToast } from "@/components/ui/toast/use-toast";
+
+const email = ref("");
+const password = ref("");
+const loading = ref(false);
+const router = useRouter();
+const { toast } = useToast();
+
+const handleLogin = async (e: Event) => {
+  e.preventDefault();
+  loading.value = true;
+
+  const { error } = await supabase.auth.signInWithPassword({ email: email.value, password: password.value });
+
+  if (error) {
+    // If user doesn't exist, try signup
+    if (error.message.includes("Invalid login")) {
+      const { error: signUpError } = await supabase.auth.signUp({
+        email: email.value,
+        password: password.value,
+        options: { emailRedirectTo: window.location.origin },
+      });
+      if (signUpError) {
+        toast({ title: "Erreur", description: signUpError.message, variant: "destructive" });
+        loading.value = false;
+        return;
+      }
+      toast({ title: "Compte créé", description: "Connexion en cours..." });
+      // Auto-confirm is on, so sign in immediately
+      const { error: loginErr } = await supabase.auth.signInWithPassword({ email: email.value, password: password.value });
+      if (loginErr) {
+        toast({ title: "Erreur", description: loginErr.message, variant: "destructive" });
+        loading.value = false;
+        return;
+      }
+    } else {
+      toast({ title: "Erreur", description: error.message, variant: "destructive" });
+      loading.value = false;
+      return;
+    }
+  }
+
+  router.push("/admin/import");
+  loading.value = false;
+};
+</script>
+
+<template>
+  <div class="min-h-screen bg-background flex items-center justify-center">
+    <div class="w-full max-w-sm space-y-6 p-6">
+      <div class="text-center space-y-2">
+        <h1 class="font-display text-2xl font-bold">Administration</h1>
+        <p class="text-sm text-muted-foreground">Connectez-vous pour accéder à l'import</p>
+      </div>
+      <form @submit="handleLogin" class="space-y-4">
+        <div class="space-y-2">
+          <Label for="email">Courriel</Label>
+          <Input
+            id="email"
+            type="email"
+            v-model="email"
+            placeholder="admin@targo.ca"
+            required
+          />
+        </div>
+        <div class="space-y-2">
+          <Label for="password">Mot de passe</Label>
+          <Input
+            id="password"
+            type="password"
+            v-model="password"
+            placeholder="••••••••"
+            required
+            :minlength="6"
+          />
+        </div>
+        <Button type="submit" class="w-full" :disabled="loading">
+          <Loader2 v-if="loading" class="w-4 h-4 animate-spin mr-2" />
+          <LogIn v-else class="w-4 h-4 mr-2" />
+          Se connecter
+        </Button>
+      </form>
+    </div>
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/BrandGuidelines.vue b/apps/website-vue/src/pages/BrandGuidelines.vue
new file mode 100644
index 0000000..422f049
--- /dev/null
+++ b/apps/website-vue/src/pages/BrandGuidelines.vue
@@ -0,0 +1,952 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  Wifi, Tv, Phone, Server, Cloud, Shield, Network, Radio, Signal,
+  Laptop, Cable, Link2, GlobeLock, Building2, Headphones, Wrench,
+  Container, Home, CheckCircle2, XCircle, ArrowRight, AlertTriangle,
+  Globe, Mail, MapPin, Waypoints, Printer, Zap,
+} from "lucide-vue-next";
+import targoLogo from "@/assets/targo-logo.png";
+import targoLogoGreen from "@/assets/targo-logo-green.svg";
+import targoLogoWhite from "@/assets/targo-logo-white.svg";
+import targoTechnician from "@/assets/targo-technician-avatar.png";
+import targoBureaux from "@/assets/targo-bureaux.jpg";
+import painBuffering from "@/assets/pain-buffering.png";
+import solutionConnected from "@/assets/solution-connected.png";
+import painBusiness from "@/assets/pain-business.png";
+import solutionBusiness from "@/assets/solution-business.png";
+import ColorSwatch from "./brand-guidelines/ColorSwatch.vue";
+import Section from "./brand-guidelines/Section.vue";
+
+const NAV_ITEMS = [
+  { id: "logo", label: "Logo" },
+  { id: "colors", label: "Couleurs" },
+  { id: "typography", label: "Typographie" },
+  { id: "iconography", label: "Icônes" },
+  { id: "imagery", label: "Imagerie" },
+  { id: "layout", label: "Layout" },
+  { id: "components", label: "Composants" },
+  { id: "animations", label: "Animations" },
+  { id: "tone", label: "Ton & Voix" },
+  { id: "print", label: "Print" },
+  { id: "contact", label: "Contact" },
+];
+
+const RESIDENTIAL_ICONS = [
+  { icon: Wifi, name: "Internet", usage: "Services internet résidentiels" },
+  { icon: Tv, name: "Télévision", usage: "Services TV et IPTV" },
+  { icon: Phone, name: "Téléphonie", usage: "Services téléphoniques" },
+  { icon: Signal, name: "WiFi / Signal", usage: "Couverture et qualité du signal" },
+  { icon: Headphones, name: "Support", usage: "Service à la clientèle" },
+  { icon: Home, name: "Résidentiel", usage: "Section résidentielle" },
+];
+
+const BUSINESS_ICONS = [
+  { icon: Building2, name: "Affaires", usage: "Section entreprise" },
+  { icon: Shield, name: "Sécurité", usage: "Cybersécurité, pare-feu" },
+  { icon: Cloud, name: "Cloud", usage: "Services infonuagiques" },
+  { icon: Network, name: "SD-WAN", usage: "Réseau défini par logiciel" },
+  { icon: Link2, name: "Inter-sites", usage: "Réseaux inter-sites" },
+  { icon: GlobeLock, name: "VPN", usage: "Passerelle VPN" },
+  { icon: Server, name: "Serveurs", usage: "Virtualisation" },
+  { icon: Container, name: "Conteneurs", usage: "Docker / Kubernetes" },
+  { icon: Radio, name: "WiFi géré", usage: "WiFi entreprise" },
+  { icon: Signal, name: "Cellulaire", usage: "Amplification cellulaire" },
+  { icon: Cable, name: "Câblage", usage: "Câblage structuré" },
+  { icon: Laptop, name: "Microsoft 365", usage: "Collaboration cloud" },
+  { icon: Wrench, name: "Services gérés", usage: "MSP / gestion TI" },
+  { icon: Waypoints, name: "Réseaux publics", usage: "Infrastructure publique" },
+];
+
+const PAIN_SOLUTION_ICONS = [
+  { icon: XCircle, name: "XCircle", usage: "Point de douleur / problème", color: "text-red-500" },
+  { icon: CheckCircle2, name: "CheckCircle2", usage: "Solution TARGO", color: "text-[#00C853]" },
+  { icon: AlertTriangle, name: "AlertTriangle", usage: "Avertissement / hausse de prix", color: "text-amber-500" },
+  { icon: ArrowRight, name: "ArrowRight", usage: "CTA / navigation", color: "text-[#00C853]" },
+];
+
+const tocItems = [
+  { num: "01", title: "Logo & Identité" },
+  { num: "02", title: "Palette de couleurs" },
+  { num: "03", title: "Typographie" },
+  { num: "04", title: "Iconographie" },
+  { num: "05", title: "Imagerie & Visuels" },
+  { num: "06", title: "Layout & Structure" },
+  { num: "07", title: "Composants UI" },
+  { num: "08", title: "Animations & Motion" },
+  { num: "09", title: "Ton & Voix" },
+  { num: "10", title: "Documents imprimés" },
+  { num: "11", title: "Coordonnées officielles" },
+];
+
+const typeHierarchy = [
+  { size: "text-4xl", label: "H1 — 36px", example: "Pourquoi des milliers de foyers ont changé?" },
+  { size: "text-2xl", label: "H2 — 24px", example: "Reconnaissez-vous ces situations?" },
+  { size: "text-lg", label: "H3 — 18px", example: "Tous nos services affaires" },
+  { size: "text-base", label: "Body — 16px", example: "Fibre optique jusqu'à 3.5 Gbit/s, sans interruption" },
+  { size: "text-sm", label: "Small — 14px", example: "Installation gratuite • Aucun contrat • Support 7j/7" },
+  { size: "text-xs", label: "Caption — 12px", example: "Services de confiance, tout-en-un, près de chez vous" },
+];
+
+const structureItems = [
+  { label: "Header", desc: "Barre verte + nav principale + CTA. Sticky, se réduit au scroll." },
+  { label: "Hero", desc: "Plein écran. Titre display à gauche, visuel 3D à droite. Stats en bas." },
+  { label: "Sections", desc: "Alternance blanc / gris-50. Spacing: py-16 à py-24." },
+  { label: "Footer", desc: "Fond targo-dark (#1C1E26). Logo inversé, liens, contact." },
+];
+
+const gridItems = [
+  { label: "Conteneur max", value: "1400px", desc: "container, padding: 2rem" },
+  { label: "Grille services", value: "3 colonnes", desc: "md:grid-cols-3, gap-6 à gap-8" },
+  { label: "Grille héro", value: "2 colonnes", desc: "lg:grid-cols-2, texte | visuel" },
+  { label: "Rayon de bordure", value: "0.75rem", desc: "--radius, arrondi généreux" },
+];
+
+const entryAnimations = [
+  { name: "Slide Up", code: "translateY(20px) → 0, opacity 0→1", timing: "0.8s cubic-bezier(0.16, 1, 0.3, 1)", usage: "Sections au scroll" },
+  { name: "Fade In", code: "opacity 0→1", timing: "0.5s ease-out", usage: "Éléments secondaires" },
+  { name: "Scale In", code: "scale(0.9) → 1, opacity 0→1", timing: "1s ease", usage: "Visuels héro" },
+  { name: "Stagger", code: "delay: index × 0.05s", timing: "Séquentiel", usage: "Listes, grilles, menus" },
+];
+
+const continuousAnimations = [
+  { name: "Pulse Glow", code: "opacity 0.5↔1, scale 1↔1.05", timing: "3s ease-in-out infinite", usage: "Indicateurs live (point vert)" },
+  { name: "Float Y", code: "y: 0 → -10 → 0", timing: "4-6s ease-in-out infinite", usage: "Cartes glass flottantes héro" },
+  { name: "Gradient Shift", code: "background-position 0% ↔ 100%", timing: "8s ease infinite", usage: "Boutons gradient-targo" },
+];
+
+const hoverEffects = [
+  { name: "Glow", code: "box-shadow 30px → 50px green/0.4", usage: "Boutons CTA principaux" },
+  { name: "Scale Up", code: "scale(1.02)", usage: "Cartes de service" },
+  { name: "Color Shift", code: "text-gray → text-targo-green", usage: "Liens navigation" },
+];
+
+const doSay = [
+  "« Reconnaissez-vous ces situations? »",
+  "« Pourquoi des milliers de foyers ont changé de fournisseur? »",
+  "« 200+ entreprises ont quitté leur fournisseur pour TARGO »",
+  "« Services de confiance, tout-en-un, près de chez vous »",
+  "« Support 7j/7 »",
+  "« Prêt à changer? »",
+  "« Immeubles, RPA & Hôtels » (pas « Multilogement »)",
+  "« Réseaux publics » (pas « Services gérés »)",
+];
+
+const dontSay = [
+  "Jargon technique sans explication",
+  "Promesses vagues sans chiffres",
+  "Ton corporate froid et distant",
+  "Dénigrement direct des concurrents",
+  "« 24/7 » — on utilise « 7j/7 »",
+  "« Multilogement » → « Immeubles, RPA & Hôtels »",
+  "« Services gérés » → « Réseaux publics »",
+  "Le mot « local » (utiliser « régional »)",
+];
+
+const printAdaptations = [
+  { label: "Polices", value: "Arial / Helvetica", desc: "Compatibilité universelle" },
+  { label: "Format", value: "US Letter (8.5×11)", desc: "Standard nord-américain" },
+  { label: "Marges", value: "0.5 pouce", desc: "Minimum pour impression" },
+  { label: "Couleurs", value: "CMJN", desc: "Convertir #00C853 en C85 M0 J60 K0" },
+];
+
+const docTypes = [
+  { name: "Catalogue dynamique", desc: "Format narratif Pain → Solution. 2+ pages, structure séquentielle." },
+  { name: "Lettre publicitaire", desc: "1 page, structure en-tête + corps + CTA. Logo en haut, barre verte." },
+  { name: "Contrat BLB", desc: "Document formel. En-tête sobre, tableaux structurés, signature." },
+  { name: "Publicité print", desc: "Format condensé. Visuel fort + texte minimal + numéro." },
+];
+
+const commonElements = [
+  { label: "Logo", desc: "En haut à gauche, hauteur ~1cm" },
+  { label: "Coordonnées", desc: "Pied de page : tél, courriel, site" },
+  { label: "Barre verte", desc: "Séparateur horizontal #00C853" },
+  { label: "Slogan", desc: "En pied : « Services de confiance... »" },
+];
+
+const compactServices = [
+  { icon: Wifi, name: "Internet" },
+  { icon: Phone, name: "Téléphonie" },
+  { icon: Shield, name: "Sécurité" },
+  { icon: Cloud, name: "Cloud" },
+];
+
+const activeSection = ref("logo");
+
+const scrollTo = (id: string) => {
+  activeSection.value = id;
+  document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
+};
+
+const handlePrint = () => {
+  window.print();
+};
+</script>
+
+<template>
+  <div class="min-h-screen bg-white">
+    <!-- Sticky Nav -->
+    <nav class="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100 print:hidden">
+      <div class="max-w-6xl mx-auto px-6 flex items-center gap-8 h-16">
+        <img :src="targoLogoGreen" alt="TARGO" class="h-7" />
+        <div class="h-6 w-px bg-gray-200" />
+        <div class="flex gap-1 overflow-x-auto">
+          <button
+            v-for="item in NAV_ITEMS"
+            :key="item.id"
+            @click="scrollTo(item.id)"
+            :class="`px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-colors ${
+              activeSection === item.id
+                ? 'bg-[#00C853] text-white'
+                : 'text-gray-500 hover:text-gray-900 hover:bg-gray-50'
+            }`"
+          >
+            {{ item.label }}
+          </button>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Print Button -->
+    <div class="print:hidden fixed bottom-6 right-6 z-50">
+      <button
+        @click="handlePrint"
+        class="bg-[#00C853] hover:bg-[#00a844] text-white font-medium px-6 py-3 rounded-xl shadow-lg flex items-center gap-2 transition-colors"
+      >
+        <Printer class="w-5 h-5" />
+        Imprimer / PDF
+      </button>
+    </div>
+
+    <!-- ===== COVER PAGE ===== -->
+    <header class="bg-gray-950 text-white min-h-[70vh] flex flex-col justify-center print:min-h-0 print:py-32">
+      <div class="max-w-6xl mx-auto px-6 w-full">
+        <div class="mb-8">
+          <div class="w-16 h-1 bg-[#00C853] mb-8" />
+          <p class="text-xs font-bold uppercase tracking-[0.3em] text-[#00C853] mb-6">Guide de marque</p>
+        </div>
+        <h1 class="flex items-end gap-2 mb-6">
+          <img :src="targoLogoWhite" alt="TARGO" class="h-16 md:h-24" />
+          <span class="text-6xl md:text-8xl font-black text-[#00C853] leading-none mb-1">.</span>
+        </h1>
+        <p class="text-xl md:text-2xl text-gray-400 max-w-xl leading-relaxed font-light">
+          Services de confiance, tout-en-un,<br />près de chez vous.
+        </p>
+        <div class="mt-16 pt-8 border-t border-white/10 flex flex-wrap gap-x-12 gap-y-4 text-sm text-gray-500">
+          <div>
+            <p class="text-[10px] uppercase tracking-widest text-gray-600 mb-1">Version</p>
+            <p class="font-semibold text-white">1.0</p>
+          </div>
+          <div>
+            <p class="text-[10px] uppercase tracking-widest text-gray-600 mb-1">Date</p>
+            <p class="font-semibold text-white">Février 2026</p>
+          </div>
+          <div>
+            <p class="text-[10px] uppercase tracking-widest text-gray-600 mb-1">Statut</p>
+            <p class="font-semibold text-white">Confidentiel</p>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- ===== TABLE DES MATIÈRES (print only) ===== -->
+    <div class="hidden print:block py-16 border-b border-gray-200">
+      <div class="max-w-6xl mx-auto px-6">
+        <h2 class="text-2xl font-bold text-gray-900 font-display mb-8">Table des matières</h2>
+        <div class="grid grid-cols-2 gap-4">
+          <div v-for="item in tocItems" :key="item.num" class="flex items-center gap-4 py-3 border-b border-gray-100">
+            <span class="text-sm font-bold text-[#00C853] font-mono w-8">{{ item.num }}</span>
+            <span class="text-sm text-gray-700">{{ item.title }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <main class="max-w-6xl mx-auto px-6">
+      <!-- ===== 01 LOGO ===== -->
+      <Section id="logo" title="Logo & Identité" subtitle="01 — Identité" :page-break="true">
+        <p class="text-sm text-gray-500 mb-8 max-w-2xl">Le logo TARGO est l'élément central de notre identité. Il doit toujours être utilisé dans sa forme originale SVG, sans modification de proportions, couleurs ou effets.</p>
+
+        <div class="grid md:grid-cols-2 gap-8 mb-10">
+          <!-- Green on white -->
+          <div class="border border-gray-100 rounded-2xl p-10 flex flex-col items-center justify-center bg-white gap-3">
+            <img :src="targoLogoGreen" alt="TARGO Logo vert sur fond clair" class="h-16" />
+            <p class="text-[10px] text-gray-400 font-mono">targo-logo-green.svg</p>
+            <span class="text-[10px] bg-green-50 text-green-700 px-2 py-0.5 rounded-full">✅ Fonds clairs / blancs</span>
+          </div>
+          <!-- White on dark -->
+          <div class="border border-gray-800 rounded-2xl p-10 flex flex-col items-center justify-center bg-gray-950 gap-3">
+            <img :src="targoLogoWhite" alt="TARGO Logo blanc sur fond sombre" class="h-16" />
+            <p class="text-[10px] text-gray-500 font-mono">targo-logo-white.svg</p>
+            <span class="text-[10px] bg-white/10 text-white/70 px-2 py-0.5 rounded-full">✅ Fonds sombres</span>
+          </div>
+        </div>
+        <!-- Additional variants -->
+        <div class="grid md:grid-cols-3 gap-8 mb-10">
+          <div class="bg-[#00C853] rounded-2xl p-10 flex flex-col items-center justify-center gap-3">
+            <img :src="targoLogoWhite" alt="TARGO Logo blanc sur vert" class="h-14" />
+            <span class="text-[10px] bg-white/20 text-white px-2 py-0.5 rounded-full">✅ Sur Targo Green</span>
+          </div>
+          <div class="border border-gray-100 rounded-2xl p-10 flex flex-col items-center justify-center bg-gray-50 gap-3">
+            <img :src="targoLogo" alt="TARGO Logo PNG" class="h-14" />
+            <span class="text-[10px] bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">PNG (fallback)</span>
+          </div>
+          <div class="border border-gray-100 rounded-2xl p-10 flex flex-col items-center justify-center gap-3">
+            <div class="flex items-end gap-1">
+              <img :src="targoLogoWhite" alt="TARGO" class="h-10 brightness-0" />
+              <span class="text-3xl font-black text-[#00C853] leading-none mb-0.5">.</span>
+            </div>
+            <span class="text-[10px] bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">Logo + Point vert (titres)</span>
+          </div>
+        </div>
+
+        <!-- Rules -->
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Règles d'utilisation</h3>
+        <div class="grid md:grid-cols-3 gap-6">
+          <div class="bg-gray-50 rounded-xl p-6">
+            <CheckCircle2 class="w-5 h-5 text-[#00C853] mb-3" />
+            <p class="text-sm font-semibold text-gray-900 mb-1">Respecter les proportions</p>
+            <p class="text-xs text-gray-500">Ne jamais étirer ou déformer le logo. Toujours maintenir le ratio hauteur/largeur original.</p>
+          </div>
+          <div class="bg-gray-50 rounded-xl p-6">
+            <CheckCircle2 class="w-5 h-5 text-[#00C853] mb-3" />
+            <p class="text-sm font-semibold text-gray-900 mb-1">Zone d'exclusion</p>
+            <p class="text-xs text-gray-500">Prévoir un espace minimum égal à la hauteur du « T » autour du logo.</p>
+          </div>
+          <div class="bg-gray-50 rounded-xl p-6">
+            <XCircle class="w-5 h-5 text-red-400 mb-3" />
+            <p class="text-sm font-semibold text-gray-900 mb-1">Ne pas faire</p>
+            <p class="text-xs text-gray-500">Pas de rotation, pas d'ombre portée, pas de dégradé sur le logo, pas de fond complexe.</p>
+          </div>
+        </div>
+      </Section>
+
+      <!-- ===== 02 COULEURS ===== -->
+      <Section id="colors" title="Palette de couleurs" subtitle="02 — Couleurs" :page-break="true">
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Couleurs primaires</h3>
+        <div class="grid grid-cols-2 md:grid-cols-5 gap-6 mb-10">
+          <ColorSwatch name="Targo Green" hex="#00C853" hsl="142° 100% 39%" token="primary" />
+          <ColorSwatch name="Green Light" hex="#69F0AE" hsl="142° 60% 55%" token="targo-green-light" />
+          <ColorSwatch name="Green Dark" hex="#005026" hsl="142° 75% 35%" token="targo-green-dark" />
+          <ColorSwatch name="Targo Dark" hex="#1C1E26" hsl="228° 15% 13%" token="targo-dark" class="ring-gray-800" />
+          <ColorSwatch name="Targo Gray" hex="#64748B" hsl="215° 16% 47%" token="targo-gray" />
+        </div>
+
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Couleurs sémantiques</h3>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-10">
+          <ColorSwatch name="Background" hex="#FFFFFF" hsl="0° 0% 100%" token="background" />
+          <ColorSwatch name="Foreground" hex="#1B2E24" hsl="160° 10% 15%" token="foreground" />
+          <ColorSwatch name="Muted" hex="#F5FAF7" hsl="145° 20% 96%" token="muted" />
+          <ColorSwatch name="Destructive" hex="#EF4444" hsl="0° 84% 60%" token="destructive" />
+        </div>
+
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Couleurs narratives (catalogues)</h3>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-10">
+          <div>
+            <div class="w-full h-20 rounded-xl mb-2 bg-red-500 ring-1 ring-black/5" />
+            <p class="text-sm font-bold text-gray-900">Douleur / Problème</p>
+            <p class="text-xs text-gray-500 font-mono">#EF4444</p>
+            <p class="text-[10px] text-gray-400">XCircle, bordures rouges</p>
+          </div>
+          <div>
+            <div class="w-full h-20 rounded-xl mb-2 bg-[#00C853] ring-1 ring-black/5" />
+            <p class="text-sm font-bold text-gray-900">Solution TARGO</p>
+            <p class="text-xs text-gray-500 font-mono">#00C853</p>
+            <p class="text-[10px] text-gray-400">CheckCircle2, bordures vertes</p>
+          </div>
+          <div>
+            <div class="w-full h-20 rounded-xl mb-2 bg-amber-500 ring-1 ring-black/5" />
+            <p class="text-sm font-bold text-gray-900">Avertissement</p>
+            <p class="text-xs text-gray-500 font-mono">#F59E0B</p>
+            <p class="text-[10px] text-gray-400">AlertTriangle, hausses de prix</p>
+          </div>
+          <div>
+            <div class="w-full h-20 rounded-xl mb-2 bg-gray-900 ring-1 ring-black/5" />
+            <p class="text-sm font-bold text-gray-900">Stats / Confiance</p>
+            <p class="text-xs text-gray-500 font-mono">#111827</p>
+            <p class="text-[10px] text-gray-400">Bannières de statistiques</p>
+          </div>
+        </div>
+
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Dégradés</h3>
+        <div class="grid md:grid-cols-3 gap-6">
+          <div>
+            <div class="w-full h-20 rounded-xl mb-2" :style="{ background: 'linear-gradient(135deg, #00C853, #005026)' }" />
+            <p class="text-sm font-bold text-gray-900">Gradient Targo</p>
+            <p class="text-xs text-gray-500 font-mono">135deg, #00C853 → #005026</p>
+            <p class="text-[10px] text-gray-400">Boutons CTA, header actif</p>
+          </div>
+          <div>
+            <div class="w-full h-20 rounded-xl mb-2 bg-gray-800 border border-white/10" :style="{ background: 'linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)), #1f2937' }" />
+            <p class="text-sm font-bold text-gray-900">Glass Gradient</p>
+            <p class="text-xs text-gray-500 font-mono">white/10 → white/05</p>
+            <p class="text-[10px] text-gray-400">Cartes glassmorphism</p>
+          </div>
+          <div>
+            <div class="w-full h-20 rounded-xl mb-2 bg-gradient-to-r from-[#00C853]/10 to-[#00C853]/5 border border-[#00C853]/20" />
+            <p class="text-sm font-bold text-gray-900">CTA Highlight</p>
+            <p class="text-xs text-gray-500 font-mono">green/10 → green/05</p>
+            <p class="text-[10px] text-gray-400">Cartes d'appel à l'action</p>
+          </div>
+        </div>
+      </Section>
+
+      <!-- ===== 03 TYPOGRAPHIE ===== -->
+      <Section id="typography" title="Typographie" subtitle="03 — Polices" :page-break="true">
+        <div class="grid md:grid-cols-2 gap-10 mb-10">
+          <div>
+            <p class="text-xs font-bold uppercase tracking-widest text-[#00C853] mb-4">Titres & Display</p>
+            <p class="text-5xl font-bold mb-2" :style="{ fontFamily: '\'Space Grotesk\', sans-serif' }">Space Grotesk</p>
+            <p class="text-sm text-gray-500 mb-4">Utilisée pour tous les titres (h1–h6) et textes d'impact. Google Fonts.</p>
+            <div class="space-y-2 border-t border-gray-100 pt-4">
+              <p class="text-3xl font-bold" :style="{ fontFamily: '\'Space Grotesk\'' }">Bold 700 — Titres principaux</p>
+              <p class="text-xl font-semibold" :style="{ fontFamily: '\'Space Grotesk\'' }">Semibold 600 — Sous-titres</p>
+              <p class="text-base font-medium" :style="{ fontFamily: '\'Space Grotesk\'' }">Medium 500 — Labels</p>
+            </div>
+          </div>
+          <div>
+            <p class="text-xs font-bold uppercase tracking-widest text-[#00C853] mb-4">Corps de texte</p>
+            <p class="text-5xl font-bold mb-2" :style="{ fontFamily: '\'Plus Jakarta Sans\', sans-serif' }">Plus Jakarta Sans</p>
+            <p class="text-sm text-gray-500 mb-4">Police principale pour le corps, les paragraphes et l'interface. Google Fonts.</p>
+            <div class="space-y-2 border-t border-gray-100 pt-4">
+              <p class="text-base font-normal">Regular 400 — Corps de texte standard</p>
+              <p class="text-base font-medium">Medium 500 — Texte d'emphase</p>
+              <p class="text-base font-semibold">Semibold 600 — Labels et boutons</p>
+              <p class="text-base font-bold">Bold 700 — Accroches et CTA</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="bg-gray-50 rounded-xl p-6 mb-10">
+          <p class="text-xs font-bold text-gray-700 mb-3">Hiérarchie des tailles</p>
+          <div class="space-y-3">
+            <div v-for="(t, i) in typeHierarchy" :key="i" class="flex items-baseline gap-4">
+              <span class="text-[10px] font-mono text-gray-400 w-28 shrink-0">{{ t.label }}</span>
+              <span :class="`${t.size} text-gray-900`">{{ t.example }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="bg-amber-50 border border-amber-200 rounded-xl p-6">
+          <div class="flex items-start gap-3">
+            <AlertTriangle class="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+            <div>
+              <p class="text-sm font-bold text-gray-900 mb-1">Documents imprimés</p>
+              <p class="text-xs text-gray-600">Pour les documents print (PDF, catalogues physiques), utiliser <span class="font-mono font-bold">Arial / Helvetica</span> pour garantir la compatibilité universelle.</p>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      <!-- ===== 04 ICONOGRAPHIE ===== -->
+      <Section id="iconography" title="Iconographie" subtitle="04 — Icônes" :page-break="true">
+        <p class="text-sm text-gray-500 mb-6">Bibliothèque : <span class="font-mono text-gray-700">lucide-react</span> — Taille par défaut : 24px, stroke: 2px. Couleur accent : <span class="font-mono text-[#00C853]">#00C853</span>.</p>
+
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Services résidentiels</h3>
+        <div class="grid grid-cols-3 md:grid-cols-6 gap-4 mb-10">
+          <div v-for="(item, i) in RESIDENTIAL_ICONS" :key="i" class="flex flex-col items-center gap-2 p-4 bg-gray-50 rounded-xl">
+            <component :is="item.icon" class="w-6 h-6 text-[#00C853]" />
+            <p class="text-xs font-semibold text-gray-900">{{ item.name }}</p>
+            <p class="text-[10px] text-gray-400 text-center">{{ item.usage }}</p>
+          </div>
+        </div>
+
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Services affaires</h3>
+        <div class="grid grid-cols-3 md:grid-cols-7 gap-4 mb-10">
+          <div v-for="(item, i) in BUSINESS_ICONS" :key="i" class="flex flex-col items-center gap-2 p-4 bg-gray-50 rounded-xl">
+            <component :is="item.icon" class="w-6 h-6 text-[#00C853]" />
+            <p class="text-xs font-semibold text-gray-900">{{ item.name }}</p>
+            <p class="text-[10px] text-gray-400 text-center">{{ item.usage }}</p>
+          </div>
+        </div>
+
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Icônes narratives (Pain vs Solution)</h3>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div v-for="(item, i) in PAIN_SOLUTION_ICONS" :key="i" class="flex flex-col items-center gap-2 p-4 bg-gray-50 rounded-xl">
+            <component :is="item.icon" :class="`w-8 h-8 ${item.color}`" />
+            <p class="text-xs font-semibold text-gray-900">{{ item.name }}</p>
+            <p class="text-[10px] text-gray-400 text-center">{{ item.usage }}</p>
+          </div>
+        </div>
+      </Section>
+
+      <!-- ===== 05 IMAGERIE ===== -->
+      <Section id="imagery" title="Imagerie & Visuels" subtitle="05 — Photos & Illustrations" :page-break="true">
+        <div class="grid md:grid-cols-2 gap-8 mb-10">
+          <div>
+            <p class="text-xs font-bold uppercase tracking-widest text-[#00C853] mb-4">Mascotte & Avatar</p>
+            <div class="bg-gray-50 rounded-2xl p-8 flex items-center justify-center mb-3">
+              <img :src="targoTechnician" alt="Technicien TARGO" class="h-40 object-contain" />
+            </div>
+            <p class="text-xs text-gray-500">Technicien 3D cartoon — utilisé dans les héros et communications. Style amical, professionnel et accessible.</p>
+          </div>
+          <div>
+            <p class="text-xs font-bold uppercase tracking-widest text-[#00C853] mb-4">Bureaux TARGO</p>
+            <div class="rounded-2xl overflow-hidden mb-3">
+              <img :src="targoBureaux" alt="Bureaux TARGO" class="w-full h-52 object-cover" />
+            </div>
+            <p class="text-xs text-gray-500">Photo des bureaux — utilisée dans la section « À propos » avec overlay sombre pour lisibilité du texte.</p>
+          </div>
+        </div>
+
+        <p class="text-xs font-bold uppercase tracking-widest text-[#00C853] mb-4">Visuels narratifs (Catalogues dynamiques)</p>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
+          <div>
+            <img :src="painBuffering" alt="Douleur: buffering" class="w-full h-32 object-cover rounded-xl ring-2 ring-red-200 mb-2" />
+            <p class="text-xs font-semibold text-red-600">Douleur résidentielle</p>
+            <p class="text-[10px] text-gray-400">Famille frustrée par le buffering</p>
+          </div>
+          <div>
+            <img :src="solutionConnected" alt="Solution: connectée" class="w-full h-32 object-cover rounded-xl ring-2 ring-green-200 mb-2" />
+            <p class="text-xs font-semibold text-[#00C853]">Solution résidentielle</p>
+            <p class="text-[10px] text-gray-400">Famille heureuse et connectée</p>
+          </div>
+          <div>
+            <img :src="painBusiness" alt="Douleur: business" class="w-full h-32 object-cover rounded-xl ring-2 ring-red-200 mb-2" />
+            <p class="text-xs font-semibold text-red-600">Douleur affaires</p>
+            <p class="text-[10px] text-gray-400">Entreprise en panne réseau</p>
+          </div>
+          <div>
+            <img :src="solutionBusiness" alt="Solution: business" class="w-full h-32 object-cover rounded-xl ring-2 ring-green-200 mb-2" />
+            <p class="text-xs font-semibold text-[#00C853]">Solution affaires</p>
+            <p class="text-[10px] text-gray-400">Entreprise performante avec TARGO</p>
+          </div>
+        </div>
+
+        <div class="bg-gray-50 rounded-xl p-6">
+          <p class="text-xs font-bold text-gray-700 mb-3">Directives visuelles</p>
+          <div class="grid md:grid-cols-3 gap-6">
+            <div class="flex items-start gap-2">
+              <CheckCircle2 class="w-4 h-4 text-[#00C853] shrink-0 mt-0.5" />
+              <p class="text-xs text-gray-600">Fonds propres et épurés, éviter les superpositions de dégradés sur les photos héros</p>
+            </div>
+            <div class="flex items-start gap-2">
+              <CheckCircle2 class="w-4 h-4 text-[#00C853] shrink-0 mt-0.5" />
+              <p class="text-xs text-gray-600">Style 3D cartoon minimaliste pour les illustrations de services résidentiels</p>
+            </div>
+            <div class="flex items-start gap-2">
+              <CheckCircle2 class="w-4 h-4 text-[#00C853] shrink-0 mt-0.5" />
+              <p class="text-xs text-gray-600">Photos réelles pour la section Affaires. Overlay sombre si texte superposé.</p>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      <!-- ===== 06 LAYOUT & STRUCTURE ===== -->
+      <Section id="layout" title="Layout & Structure" subtitle="06 — Mise en page" :page-break="true">
+        <div class="grid md:grid-cols-2 gap-10 mb-10">
+          <div>
+            <h3 class="text-sm font-bold text-gray-700 mb-4">Structure du site</h3>
+            <div class="space-y-3">
+              <div v-for="(item, i) in structureItems" :key="i" class="bg-gray-50 rounded-lg p-4">
+                <p class="text-sm font-bold text-gray-900">{{ item.label }}</p>
+                <p class="text-xs text-gray-500 mt-1">{{ item.desc }}</p>
+              </div>
+            </div>
+          </div>
+          <div>
+            <h3 class="text-sm font-bold text-gray-700 mb-4">Grilles & Conteneur</h3>
+            <div class="space-y-3">
+              <div v-for="(item, i) in gridItems" :key="i" class="bg-gray-50 rounded-lg p-4 flex items-start justify-between">
+                <div>
+                  <p class="text-sm font-bold text-gray-900">{{ item.label }}</p>
+                  <p class="text-xs text-gray-500 mt-1">{{ item.desc }}</p>
+                </div>
+                <span class="text-xs font-mono text-[#00C853] bg-[#00C853]/10 px-2 py-1 rounded shrink-0">{{ item.value }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Navigation principale</h3>
+        <div class="bg-gray-50 rounded-xl p-6 mb-10">
+          <div class="flex items-center gap-6 mb-4">
+            <img :src="targoLogoGreen" alt="TARGO" class="h-8" />
+            <div class="flex gap-4 text-sm font-medium text-gray-600">
+              <span class="text-gray-900">Internet</span>
+              <span>Télévision</span>
+              <span>Téléphone</span>
+              <span class="flex items-center gap-1">Affaires <ArrowRight class="w-3 h-3 rotate-90" /></span>
+              <span>À propos</span>
+            </div>
+            <div class="ml-auto flex gap-2">
+              <span class="text-xs bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-gray-600">Mon compte</span>
+              <span class="text-xs bg-[#00C853] text-white rounded-lg px-3 py-1.5 font-semibold">Nous joindre</span>
+            </div>
+          </div>
+          <p class="text-xs text-gray-400">La barre verte supérieure (514.448.0773 • support@targo.ca) disparaît au scroll. Le header adopte un backdrop-blur avec ombre.</p>
+        </div>
+
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Pattern héro</h3>
+        <div class="border border-gray-200 rounded-xl p-6 bg-white">
+          <div class="grid grid-cols-2 gap-8">
+            <div class="space-y-3">
+              <div class="bg-[#00C853]/10 rounded-full w-fit px-3 py-1 text-[10px] font-bold text-[#00C853] uppercase tracking-wider">Pill Label</div>
+              <div class="h-6 bg-gray-900 rounded w-3/4" />
+              <div class="h-6 bg-[#00C853] rounded w-1/2" />
+              <div class="h-3 bg-gray-200 rounded w-full mt-2" />
+              <div class="h-3 bg-gray-200 rounded w-2/3" />
+              <div class="flex gap-2 mt-4">
+                <div class="h-8 bg-[#00C853] rounded-lg w-24" />
+                <div class="h-8 border-2 border-gray-200 rounded-lg w-28" />
+              </div>
+              <div class="flex gap-6 mt-4 pt-4 border-t border-gray-100">
+                <div class="text-center"><div class="text-lg font-black">20+</div><div class="text-[8px] text-gray-400 uppercase">Années</div></div>
+                <div class="text-center"><div class="text-lg font-black">10k+</div><div class="text-[8px] text-gray-400 uppercase">Clients</div></div>
+                <div class="text-center"><div class="text-lg font-black">7j/7</div><div class="text-[8px] text-gray-400 uppercase">Support</div></div>
+              </div>
+            </div>
+            <div class="bg-gray-50 rounded-xl flex items-center justify-center">
+              <p class="text-xs text-gray-400">Visuel 3D / Photo</p>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      <!-- ===== 07 COMPOSANTS ===== -->
+      <Section id="components" title="Composants UI" subtitle="07 — Système de design" :page-break="true">
+        <!-- Buttons -->
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Boutons</h3>
+        <div class="flex flex-wrap gap-4 mb-4">
+          <button class="bg-[#00C853] hover:bg-[#00a844] text-white font-semibold px-6 py-3 rounded-xl transition-colors">
+            Bouton Primaire
+          </button>
+          <button class="bg-gray-900 hover:bg-gray-800 text-white font-semibold px-6 py-3 rounded-xl transition-colors">
+            Bouton Sombre
+          </button>
+          <button class="border-2 border-gray-200 text-gray-700 hover:bg-gray-50 font-semibold px-6 py-3 rounded-xl transition-colors">
+            Bouton Outline
+          </button>
+          <button class="bg-[#00C853]/10 text-[#00C853] hover:bg-[#00C853]/20 font-semibold px-6 py-3 rounded-xl transition-colors">
+            Bouton Ghost Green
+          </button>
+        </div>
+        <div class="bg-gray-50 rounded-lg p-4 mb-10">
+          <p class="text-xs text-gray-500"><span class="font-bold text-gray-700">Specs :</span> rounded-xl (12px), px-6 py-3, font-semibold. Le bouton primaire utilise le <span class="font-mono">gradient-targo</span> avec effet <span class="font-mono">glow-targo</span> sur les héros.</p>
+        </div>
+
+        <!-- Cards -->
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Cartes</h3>
+        <div class="grid md:grid-cols-3 gap-4 mb-10">
+          <div class="border border-gray-200 rounded-xl p-5 bg-gray-50/50 hover:shadow-md transition-shadow">
+            <div class="flex items-start gap-3 mb-2">
+              <XCircle class="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
+              <p class="text-sm font-semibold text-red-700">Votre film coupe en plein suspense?</p>
+            </div>
+            <div class="flex items-start gap-3">
+              <CheckCircle2 class="w-5 h-5 text-[#00C853] shrink-0 mt-0.5" />
+              <p class="text-sm text-gray-700">Fibre optique jusqu'à 3.5 Gbit/s</p>
+            </div>
+            <p class="text-[10px] text-gray-400 mt-3 font-mono">Pain → Solution Card</p>
+          </div>
+          <div class="bg-gradient-to-r from-[#00C853]/10 to-[#00C853]/5 rounded-xl p-5 border border-[#00C853]/20">
+            <p class="text-sm font-bold text-gray-900 mb-1">CTA Card</p>
+            <p class="text-xs text-gray-600">Installation gratuite • Aucun contrat</p>
+            <div class="flex items-center gap-1 text-[#00C853] font-bold text-sm mt-2">
+              1-855-888-2746 <ArrowRight class="w-4 h-4" />
+            </div>
+            <p class="text-[10px] text-gray-400 mt-3 font-mono">CTA Highlight Card</p>
+          </div>
+          <div class="bg-gray-900 rounded-xl p-5 text-white">
+            <p class="text-sm font-bold mb-1">Stats Card</p>
+            <div class="grid grid-cols-2 gap-3">
+              <div>
+                <p class="text-xl font-black text-[#00C853]">200+</p>
+                <p class="text-[10px] text-gray-400">entreprises migrées</p>
+              </div>
+              <div>
+                <p class="text-xl font-black text-[#00C853]">99.999%</p>
+                <p class="text-[10px] text-gray-400">disponibilité</p>
+              </div>
+            </div>
+            <p class="text-[10px] text-gray-500 mt-3 font-mono">Dark Stats Card</p>
+          </div>
+        </div>
+
+        <!-- Glass card -->
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Glassmorphism</h3>
+        <div class="bg-gray-900 rounded-xl p-8 mb-10">
+          <div class="grid md:grid-cols-2 gap-4">
+            <div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-6 shadow-xl">
+              <div class="flex items-center gap-3 mb-2">
+                <div class="w-10 h-10 rounded-xl bg-[#00C853]/20 flex items-center justify-center">
+                  <Zap class="w-5 h-5 text-[#00C853]" />
+                </div>
+                <div>
+                  <p class="text-[10px] uppercase font-bold text-gray-400 tracking-wider">Vitesse</p>
+                  <p class="font-display font-black text-white">Gigabit+</p>
+                </div>
+              </div>
+              <p class="text-[10px] text-gray-500 font-mono mt-3">glass-card: bg-white/5 backdrop-blur-md border-white/10</p>
+            </div>
+            <div class="bg-white/70 backdrop-blur-md border border-white/20 rounded-2xl p-6 shadow-xl">
+              <div class="flex items-center gap-3 mb-2">
+                <div class="w-10 h-10 rounded-xl bg-[#00C853]/20 flex items-center justify-center">
+                  <Shield class="w-5 h-5 text-[#00C853]" />
+                </div>
+                <div>
+                  <p class="text-[10px] uppercase font-bold text-gray-500 tracking-wider">Réseau</p>
+                  <p class="font-display font-black text-gray-900">Sécurisé</p>
+                </div>
+              </div>
+              <p class="text-[10px] text-gray-400 font-mono mt-3">glass-card light: bg-white/70 backdrop-blur-md</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Section headers -->
+        <h3 class="text-sm font-bold text-gray-700 mb-4">En-têtes de section</h3>
+        <div class="space-y-4 mb-10">
+          <div class="bg-gray-50 rounded-lg p-4">
+            <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-[#00C853] mb-1">Sous-titre numéroté</p>
+            <p class="text-2xl font-bold text-gray-900 font-display">Titre de section</p>
+            <p class="text-[10px] text-gray-400 font-mono mt-2">Pattern: pill uppercase tracking-wider + h2 display bold</p>
+          </div>
+        </div>
+
+        <!-- Service grid mini -->
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Grille de services (compact)</h3>
+        <div class="grid grid-cols-4 gap-2 max-w-lg">
+          <div v-for="(svc, i) in compactServices" :key="i" class="flex items-center gap-1.5 text-xs text-gray-600 bg-gray-50 rounded px-2 py-1.5">
+            <component :is="svc.icon" class="w-3.5 h-3.5 text-[#00C853]" />
+            <span>{{ svc.name }}</span>
+          </div>
+        </div>
+      </Section>
+
+      <!-- ===== 08 ANIMATIONS ===== -->
+      <Section id="animations" title="Animations & Motion" subtitle="08 — Mouvement" :page-break="true">
+        <p class="text-sm text-gray-500 mb-8">Bibliothèque : <span class="font-mono text-gray-700">framer-motion</span>. Les animations renforcent la perception de qualité sans gêner la navigation.</p>
+
+        <div class="grid md:grid-cols-2 gap-8 mb-10">
+          <div>
+            <h3 class="text-sm font-bold text-gray-700 mb-4">Animations d'entrée</h3>
+            <div class="space-y-3">
+              <div v-for="(anim, i) in entryAnimations" :key="i" class="bg-gray-50 rounded-lg p-4">
+                <div class="flex items-center justify-between mb-1">
+                  <p class="text-sm font-bold text-gray-900">{{ anim.name }}</p>
+                  <span class="text-[10px] font-mono text-[#00C853] bg-[#00C853]/10 px-2 py-0.5 rounded">{{ anim.timing }}</span>
+                </div>
+                <p class="text-xs text-gray-500 font-mono">{{ anim.code }}</p>
+                <p class="text-[10px] text-gray-400 mt-1">{{ anim.usage }}</p>
+              </div>
+            </div>
+          </div>
+          <div>
+            <h3 class="text-sm font-bold text-gray-700 mb-4">Animations continues</h3>
+            <div class="space-y-3">
+              <div v-for="(anim, i) in continuousAnimations" :key="i" class="bg-gray-50 rounded-lg p-4">
+                <div class="flex items-center justify-between mb-1">
+                  <p class="text-sm font-bold text-gray-900">{{ anim.name }}</p>
+                  <span class="text-[10px] font-mono text-[#00C853] bg-[#00C853]/10 px-2 py-0.5 rounded">{{ anim.timing }}</span>
+                </div>
+                <p class="text-xs text-gray-500 font-mono">{{ anim.code }}</p>
+                <p class="text-[10px] text-gray-400 mt-1">{{ anim.usage }}</p>
+              </div>
+            </div>
+
+            <h3 class="text-sm font-bold text-gray-700 mb-4 mt-8">Effets au survol</h3>
+            <div class="space-y-3">
+              <div v-for="(anim, i) in hoverEffects" :key="i" class="bg-gray-50 rounded-lg p-4">
+                <p class="text-sm font-bold text-gray-900 mb-1">{{ anim.name }}</p>
+                <p class="text-xs text-gray-500 font-mono">{{ anim.code }}</p>
+                <p class="text-[10px] text-gray-400 mt-1">{{ anim.usage }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="bg-amber-50 border border-amber-200 rounded-xl p-6">
+          <div class="flex items-start gap-3">
+            <AlertTriangle class="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+            <div>
+              <p class="text-sm font-bold text-gray-900 mb-1">Principe</p>
+              <p class="text-xs text-gray-600">Utiliser <span class="font-mono font-bold">viewport: {{ '{ once: true }' }}</span> pour les animations au scroll (ne se joue qu'une fois). Les animations continues sont réservées au héro et aux indicateurs d'état.</p>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      <!-- ===== 09 TON & VOIX ===== -->
+      <Section id="tone" title="Ton & Voix" subtitle="09 — Communication" :page-break="true">
+        <div class="grid md:grid-cols-2 gap-10 mb-10">
+          <div>
+            <h3 class="text-sm font-bold text-[#00C853] mb-3">✅ On dit</h3>
+            <ul class="space-y-3">
+              <li v-for="(text, i) in doSay" :key="i" class="flex items-start gap-2 text-sm text-gray-700">
+                <CheckCircle2 class="w-4 h-4 text-[#00C853] shrink-0 mt-0.5" />
+                {{ text }}
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h3 class="text-sm font-bold text-red-500 mb-3">❌ On ne dit pas</h3>
+            <ul class="space-y-3">
+              <li v-for="(text, i) in dontSay" :key="i" class="flex items-start gap-2 text-sm text-gray-500">
+                <XCircle class="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
+                {{ text }}
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="bg-gray-50 rounded-xl p-6 mb-10">
+          <p class="text-xs font-bold text-gray-700 mb-3">Principes de communication</p>
+          <div class="grid md:grid-cols-3 gap-6">
+            <div>
+              <p class="text-sm font-bold text-gray-900 mb-1">Empathique</p>
+              <p class="text-xs text-gray-500">On comprend les frustrations du client. On pose la question avant de proposer la solution.</p>
+            </div>
+            <div>
+              <p class="text-sm font-bold text-gray-900 mb-1">Comparatif</p>
+              <p class="text-xs text-gray-500">On utilise la preuve sociale (200+ entreprises) et les chiffres concrets (99.999% SLA).</p>
+            </div>
+            <div>
+              <p class="text-sm font-bold text-gray-900 mb-1">Régional</p>
+              <p class="text-xs text-gray-500">On met en avant notre ancrage régional, nos 20 ans d'expertise et notre équipe locale.</p>
+            </div>
+          </div>
+        </div>
+
+        <h3 class="text-sm font-bold text-gray-700 mb-4">Slogan officiel</h3>
+        <div class="bg-gray-950 rounded-xl p-8 text-center">
+          <p class="text-2xl font-display font-bold text-white mb-2">Services de confiance, tout-en-un, près de chez vous<span class="text-[#00C853]">.</span></p>
+          <p class="text-xs text-gray-500 font-mono">Slogan principal — toujours avec le point vert</p>
+        </div>
+      </Section>
+
+      <!-- ===== 10 PRINT ===== -->
+      <Section id="print" title="Documents imprimés" subtitle="10 — Print & Physique" :page-break="true">
+        <p class="text-sm text-gray-500 mb-8 max-w-2xl">Les documents imprimés (catalogues, lettres, contrats) suivent les mêmes principes de marque mais avec des adaptations pour le support physique.</p>
+
+        <div class="grid md:grid-cols-2 gap-8 mb-10">
+          <div>
+            <h3 class="text-sm font-bold text-gray-700 mb-4">Adaptations print</h3>
+            <div class="space-y-3">
+              <div v-for="(item, i) in printAdaptations" :key="i" class="bg-gray-50 rounded-lg p-4 flex items-start justify-between">
+                <div>
+                  <p class="text-sm font-bold text-gray-900">{{ item.label }}</p>
+                  <p class="text-xs text-gray-500 mt-1">{{ item.desc }}</p>
+                </div>
+                <span class="text-xs font-mono text-[#00C853] bg-[#00C853]/10 px-2 py-1 rounded shrink-0">{{ item.value }}</span>
+              </div>
+            </div>
+          </div>
+          <div>
+            <h3 class="text-sm font-bold text-gray-700 mb-4">Types de documents</h3>
+            <div class="space-y-3">
+              <div v-for="(item, i) in docTypes" :key="i" class="bg-gray-50 rounded-lg p-4">
+                <p class="text-sm font-bold text-gray-900">{{ item.name }}</p>
+                <p class="text-xs text-gray-500 mt-1">{{ item.desc }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="bg-gray-50 rounded-xl p-6">
+          <p class="text-xs font-bold text-gray-700 mb-3">Éléments communs à tous les documents</p>
+          <div class="grid md:grid-cols-4 gap-4">
+            <div v-for="(item, i) in commonElements" :key="i" class="flex items-start gap-2">
+              <CheckCircle2 class="w-4 h-4 text-[#00C853] shrink-0 mt-0.5" />
+              <div>
+                <p class="text-xs font-bold text-gray-900">{{ item.label }}</p>
+                <p class="text-[10px] text-gray-500">{{ item.desc }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      <!-- ===== 11 CONTACT ===== -->
+      <Section id="contact" title="Coordonnées officielles" subtitle="11 — Contact">
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
+          <div class="bg-gray-50 rounded-xl p-6 flex items-start gap-4">
+            <Phone class="w-5 h-5 text-[#00C853] shrink-0" />
+            <div>
+              <p class="text-sm font-bold text-gray-900">Téléphone</p>
+              <p class="text-sm text-gray-600">514-448-0773</p>
+              <p class="text-xs text-gray-600 mt-1">1-855-888-2746</p>
+            </div>
+          </div>
+          <div class="bg-gray-50 rounded-xl p-6 flex items-start gap-4">
+            <Mail class="w-5 h-5 text-[#00C853] shrink-0" />
+            <div>
+              <p class="text-sm font-bold text-gray-900">Courriel</p>
+              <p class="text-sm text-gray-600">support@targo.ca</p>
+            </div>
+          </div>
+          <div class="bg-gray-50 rounded-xl p-6 flex items-start gap-4">
+            <Globe class="w-5 h-5 text-[#00C853] shrink-0" />
+            <div>
+              <p class="text-sm font-bold text-gray-900">Site web</p>
+              <p class="text-sm text-gray-600">www.targo.ca</p>
+            </div>
+          </div>
+          <div class="bg-gray-50 rounded-xl p-6 flex items-start gap-4">
+            <MapPin class="w-5 h-5 text-[#00C853] shrink-0" />
+            <div>
+              <p class="text-sm font-bold text-gray-900">Adresse</p>
+              <p class="text-sm text-gray-600">1867 ch. de la rivière</p>
+              <p class="text-xs text-gray-500">Ste-Clotilde, Québec</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="bg-gray-950 rounded-xl p-8 text-center">
+          <img :src="targoLogoWhite" alt="TARGO" class="h-8 mx-auto mb-3" />
+          <p class="text-sm text-gray-400">TARGO Communications — La puissance de la fibre locale.</p>
+        </div>
+      </Section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-gray-950 text-white py-12 mt-16 print:bg-white print:text-black print:py-8 print:mt-4 print:border-t-2 print:border-[#00C853]">
+      <div class="max-w-6xl mx-auto px-6 text-center">
+        <img :src="targoLogoGreen" alt="TARGO" class="h-8 mx-auto mb-4 hidden print:block" />
+        <img :src="targoLogoWhite" alt="TARGO" class="h-8 mx-auto mb-4 print:hidden" />
+        <p class="text-sm text-gray-400 print:text-gray-600">Guide de marque TARGO — Document confidentiel</p>
+        <p class="text-xs text-gray-600 mt-2">© 2026 TARGO Communications. Tous droits réservés.</p>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<style>
+@media print {
+  @page {
+    size: letter;
+    margin: 0.5in;
+  }
+  body {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    font-size: 11px;
+  }
+  nav { display: none !important; }
+  .print-page-break {
+    page-break-before: always;
+  }
+  section {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+  .grid {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+  img {
+    max-width: 100% !important;
+    height: auto !important;
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+  header {
+    page-break-after: always;
+  }
+  h2, h3 {
+    page-break-after: avoid;
+  }
+  .rounded-2xl, .rounded-xl {
+    border-radius: 8px !important;
+  }
+}
+</style>
diff --git a/apps/website-vue/src/pages/Catalogue.vue b/apps/website-vue/src/pages/Catalogue.vue
new file mode 100644
index 0000000..a317413
--- /dev/null
+++ b/apps/website-vue/src/pages/Catalogue.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import {
+  Wifi, Tv, Phone, Server, Cloud, Shield, Network, Radio, Signal,
+  Laptop, Settings, Link2, GlobeLock, Building2, Headphones, Wrench,
+  Container, Box,
+} from "lucide-vue-next";
+import targoLogo from "@/assets/targo-logo.png";
+
+const residentialServices = [
+  {
+    icon: Wifi,
+    title: "Internet",
+    features: ["Fibre à la maison jusqu'à 3.5 Gbit/s", "Modem avec WiFi 7 disponible", "Téléchargement illimité", "Installation gratuite"],
+  },
+  {
+    icon: Tv,
+    title: "Télévision",
+    features: ["100+ chaînes HD/4K", "Enregistrement jusqu'à 600h", "Application mobile", "Chaînes à la carte"],
+  },
+  {
+    icon: Phone,
+    title: "Téléphonie",
+    features: ["Appels illimités Canada/USA", "Afficheur et messagerie", "Renvoi d'appels", "Numéro local inclus"],
+  },
+];
+
+const businessServices = [
+  { icon: Wifi, title: "Internet Affaires", description: "Fibre dédiée jusqu'à 100 Gbit/s avec SLA 99.999% et diversité" },
+  { icon: Phone, title: "Téléphonie IP", description: "Système téléphonique cloud avec fonctions avancées" },
+  { icon: Building2, title: "Multilogement & RPA", description: "Solutions clé en main pour immeubles et résidences" },
+  { icon: Network, title: "SD-WAN", description: "Optimisation et gestion intelligente du réseau" },
+  { icon: Link2, title: "Réseaux Inter-sites", description: "Connexion point-à-point entre vos succursales" },
+  { icon: GlobeLock, title: "Passerelle VPN", description: "Accès distant sécurisé pour télétravailleurs" },
+  { icon: Cloud, title: "Services Cloud", description: "Infrastructure cloud privée et hébergement" },
+  { icon: Shield, title: "Sécurité Réseau", description: "Pare-feu, protection et surveillance 24/7" },
+  { icon: Radio, title: "WiFi Commercial", description: "Couverture sans fil gérée pour entreprises" },
+  { icon: Signal, title: "Amplification Cellulaire", description: "Amélioration du signal mobile en bâtiment" },
+  { icon: Settings, title: "Câblage Structuré", description: "Installation réseau Cat6/Fibre certifiée" },
+  { icon: Laptop, title: "Microsoft 365", description: "Licences et gestion des outils Microsoft" },
+];
+
+const itSupportServices = [
+  { icon: Headphones, title: "Support Technique", description: "Assistance à distance et sur site" },
+  { icon: Wrench, title: "Services Gérés", description: "Surveillance proactive et maintenance" },
+  { icon: Server, title: "Virtualisation", description: "Proxmox VE, VMware, Hyper-V" },
+  { icon: Container, title: "Docker", description: "Conteneurisation d'applications" },
+  { icon: Box, title: "Kubernetes", description: "Orchestration de conteneurs" },
+  { icon: Cloud, title: "Sauvegarde", description: "Proxmox Backup Server, Veeam" },
+];
+</script>
+
+<template>
+  <div class="catalogue-page bg-white text-black min-h-screen">
+    <!-- Header -->
+    <header class="flex items-center justify-between pb-4 mb-6">
+      <img :src="targoLogo" alt="Targo" class="h-12 w-auto" />
+    </header>
+
+    <!-- Residential Services -->
+    <section class="mb-6">
+      <h2 class="text-lg font-bold bg-[#00A651] text-white px-3 py-1.5 mb-3">
+        Services Résidentiels
+      </h2>
+      <div class="grid grid-cols-3 gap-4">
+        <div v-for="(service, index) in residentialServices" :key="index" class="border border-gray-300 rounded p-3">
+          <div class="flex items-center gap-2 mb-2">
+            <component :is="service.icon" class="h-5 w-5 text-[#00A651]" />
+            <h3 class="font-bold text-sm">{{ service.title }}</h3>
+          </div>
+          <ul class="text-xs space-y-1">
+            <li v-for="(feature, i) in service.features" :key="i" class="flex items-start gap-1">
+              <span class="text-[#00A651]">•</span>
+              {{ feature }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- Business Services -->
+    <section class="mb-6">
+      <h2 class="text-lg font-bold bg-[#00A651] text-white px-3 py-1.5 mb-3">
+        Solutions Affaires
+      </h2>
+      <div class="grid grid-cols-4 gap-3">
+        <div v-for="(service, index) in businessServices" :key="index" class="border border-gray-300 rounded p-2">
+          <div class="flex items-center gap-1.5 mb-1">
+            <component :is="service.icon" class="h-4 w-4 text-[#00A651] flex-shrink-0" />
+            <h3 class="font-bold text-xs leading-tight">{{ service.title }}</h3>
+          </div>
+          <p class="text-[10px] text-gray-600 leading-tight">{{ service.description }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- IT Support & Virtualization -->
+    <section class="mb-6">
+      <h2 class="text-lg font-bold bg-[#00A651] text-white px-3 py-1.5 mb-3">
+        Soutien Informatique & Virtualisation
+      </h2>
+      <div class="grid grid-cols-6 gap-3">
+        <div v-for="(service, index) in itSupportServices" :key="index" class="border border-gray-300 rounded p-2 text-center">
+          <component :is="service.icon" class="h-6 w-6 text-[#00A651] mx-auto mb-1" />
+          <h3 class="font-bold text-xs mb-0.5">{{ service.title }}</h3>
+          <p class="text-[9px] text-gray-600 leading-tight">{{ service.description }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="border-t-2 border-[#00A651] pt-4 mt-auto">
+      <div class="flex justify-between items-center text-xs">
+        <div>
+          <p class="text-gray-600">Services de confiance, tout-en-un, près de chez vous</p>
+        </div>
+        <div class="text-right">
+          <p><strong>Téléphone:</strong> 1-855-888-2746</p>
+          <p><strong>Courriel:</strong> support@targo.ca</p>
+          <p><strong>Web:</strong> www.targo.ca</p>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<style>
+@media print {
+  @page {
+    size: letter;
+    margin: 0.5in;
+  }
+  body {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+  .catalogue-page {
+    width: 7.5in;
+    min-height: 10in;
+    padding: 0;
+    margin: 0 auto;
+  }
+}
+
+@media screen {
+  .catalogue-page {
+    width: 8.5in;
+    min-height: 11in;
+    padding: 0.5in;
+    margin: 0 auto;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+}
+</style>
diff --git a/apps/website-vue/src/pages/Catalogue2Pages.vue b/apps/website-vue/src/pages/Catalogue2Pages.vue
new file mode 100644
index 0000000..bf7ad4a
--- /dev/null
+++ b/apps/website-vue/src/pages/Catalogue2Pages.vue
@@ -0,0 +1,417 @@
+<script setup lang="ts">
+import {
+  Wifi, Tv, Phone, Server, Cloud, Shield, Network, Radio, Signal,
+  Laptop, Cable, Link2, GlobeLock, Building2, Headphones, Wrench,
+  Container, Box, Home,
+} from "lucide-vue-next";
+import targoLogo from "@/assets/targo-logo.png";
+
+const residentialServices = [
+  {
+    icon: Wifi,
+    title: "Internet Résidentiel",
+    features: [
+      "Fibre optique à la maison jusqu'à 3.5 Gbit/s",
+      "Modem avec WiFi 7 de dernière génération disponible",
+      "Téléchargement et téléversement illimités",
+      "Installation professionnelle gratuite",
+      "Support technique 7j/7 inclus",
+      "Aucun contrat à long terme requis",
+    ],
+  },
+  {
+    icon: Tv,
+    title: "Télévision",
+    features: [
+      "Plus de 100 chaînes HD et 4K",
+      "Enregistreur numérique jusqu'à 600 heures",
+      "Application mobile pour regarder partout",
+      "Chaînes spécialisées à la carte",
+      "Guide interactif et reprise du début",
+      "Contrôle parental intégré",
+    ],
+  },
+  {
+    icon: Phone,
+    title: "Téléphonie Résidentielle",
+    features: [
+      "Appels illimités Canada et États-Unis",
+      "Afficheur, messagerie vocale et appel en attente",
+      "Renvoi d'appels et boîte vocale par courriel",
+      "Numéro local ou conservation du numéro existant",
+      "Qualité d'appel HD cristalline",
+      "Fonctions avancées sans frais supplémentaires",
+    ],
+  },
+];
+
+const businessServicesPage1 = [
+  {
+    icon: Wifi,
+    title: "Internet Affaires",
+    features: [
+      "Fibre dédiée symétrique jusqu'à 100 Gbit/s",
+      "SLA 99.999% avec diversité de parcours",
+      "Adresses IP fixes et BGP disponibles",
+      "Bande passante garantie et non partagée",
+      "Support prioritaire 24/7",
+    ],
+  },
+  {
+    icon: Phone,
+    title: "Téléphonie IP (SIP/PBX)",
+    features: [
+      "Système téléphonique cloud complet",
+      "Postes illimités et numéros DID",
+      "File d'attente, IVR et centre d'appels",
+      "Intégration CRM et Microsoft Teams",
+      "Portabilité de vos numéros existants",
+    ],
+  },
+  {
+    icon: Building2,
+    title: "Multilogement & RPA",
+    features: [
+      "Solution clé en main pour immeubles",
+      "Résidences pour personnes âgées (RPA)",
+      "WiFi géré dans les aires communes",
+      "Télévision et téléphonie pour résidents",
+      "Facturation centralisée ou individuelle",
+    ],
+  },
+  {
+    icon: Network,
+    title: "SD-WAN",
+    features: [
+      "Optimisation intelligente du trafic réseau",
+      "Agrégation de liens multiples",
+      "Basculement automatique en cas de panne",
+      "Gestion centralisée multi-sites",
+      "Qualité de service (QoS) dynamique",
+    ],
+  },
+  {
+    icon: Link2,
+    title: "Réseaux Inter-sites",
+    features: [
+      "Connexion point-à-point sécurisée",
+      "Liens dédiés entre vos succursales",
+      "Fibre optique ou sans-fil selon le site",
+      "Latence minimale garantie",
+      "Extension transparente de votre LAN",
+    ],
+  },
+  {
+    icon: GlobeLock,
+    title: "Passerelle VPN",
+    features: [
+      "Accès distant sécurisé pour télétravailleurs",
+      "Compatible tous appareils et OS",
+      "Authentification multi-facteurs (MFA)",
+      "Tunnel chiffré de bout en bout",
+      "Gestion centralisée des utilisateurs",
+    ],
+  },
+];
+
+const businessServicesPage2 = [
+  {
+    icon: Cloud,
+    title: "Services Cloud",
+    features: [
+      "Infrastructure cloud privée dédiée",
+      "Hébergement de serveurs virtuels",
+      "Stockage redondant et sécurisé",
+      "Migration et déploiement assistés",
+      "Facturation à l'usage flexible",
+    ],
+  },
+  {
+    icon: Shield,
+    title: "Sécurité Réseau",
+    features: [
+      "Pare-feu nouvelle génération (NGFW)",
+      "Protection contre les menaces avancées",
+      "Surveillance et alertes 24/7",
+      "Analyse du trafic et détection d'intrusion",
+      "Rapports de conformité et audits",
+    ],
+  },
+  {
+    icon: Radio,
+    title: "WiFi Commercial",
+    features: [
+      "Couverture sans fil gérée complète",
+      "Points d'accès professionnels",
+      "Portail captif personnalisable",
+      "Analyses et statistiques d'utilisation",
+      "Segmentation réseau invités/employés",
+    ],
+  },
+  {
+    icon: Signal,
+    title: "Amplification Cellulaire",
+    features: [
+      "Amélioration du signal mobile en bâtiment",
+      "Compatible tous opérateurs",
+      "Installation certifiée ISDE",
+      "Couverture personnalisée selon superficie",
+      "Idéal pour sous-sols et stationnements",
+    ],
+  },
+];
+
+const itSupportServices = [
+  {
+    icon: Headphones,
+    title: "Support Technique",
+    features: [
+      "Assistance à distance et sur site",
+      "Équipe locale et réactive",
+      "Dépannage et résolution rapide",
+      "Support utilisateurs, postes de travail, passerelles et commutateurs",
+    ],
+  },
+  {
+    icon: Wrench,
+    title: "Services Gérés (MSP)",
+    features: [
+      "Surveillance proactive 24/7",
+      "Maintenance préventive planifiée",
+      "Gestion des correctifs et mises à jour",
+      "Rapports mensuels de santé TI",
+    ],
+  },
+  {
+    icon: Cable,
+    title: "Câblage Structuré",
+    features: [
+      "Installation réseau Cat6/Cat6a certifiée",
+      "Fibre optique intérieure et extérieure",
+      "Certification et documentation complète",
+      "Armoires de télécommunications",
+    ],
+  },
+  {
+    icon: Laptop,
+    title: "Microsoft 365",
+    features: [
+      "Licences et déploiement complet",
+      "Migration Exchange et SharePoint",
+      "Configuration sécurité et conformité",
+      "Formation et support utilisateurs",
+    ],
+  },
+];
+
+const virtualizationServices = [
+  {
+    icon: Server,
+    title: "Virtualisation",
+    features: [
+      "Proxmox VE, VMware vSphere, Hyper-V",
+      "Consolidation de serveurs physiques",
+      "Haute disponibilité et clustering",
+      "Migration P2V et V2V",
+    ],
+  },
+  {
+    icon: Container,
+    title: "Docker",
+    features: [
+      "Conteneurisation d'applications",
+      "Docker Compose et Swarm",
+      "Registres privés et CI/CD",
+      "Optimisation des images",
+    ],
+  },
+  {
+    icon: Box,
+    title: "Kubernetes",
+    features: [
+      "Orchestration de conteneurs",
+      "Déploiement K8s on-premise ou cloud",
+      "Helm charts et GitOps",
+      "Monitoring et autoscaling",
+    ],
+  },
+  {
+    icon: Cloud,
+    title: "Sauvegarde & Reprise",
+    features: [
+      "Proxmox Backup Server",
+      "Veeam Backup & Replication",
+      "Rétention personnalisable",
+      "Plan de reprise après sinistre (DRP)",
+    ],
+  },
+];
+
+const page2Services = [...businessServicesPage2, ...itSupportServices, ...virtualizationServices];
+
+const handlePrint = () => {
+  window.print();
+};
+</script>
+
+<template>
+  <div class="catalogue-2pages bg-white text-black">
+    <!-- Print Button - hidden when printing -->
+    <div class="print:hidden fixed top-4 right-4 z-50">
+      <button
+        @click="handlePrint"
+        class="bg-[#00C853] hover:bg-[#00a844] text-white font-medium px-6 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-colors"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="6 9 6 2 18 2 18 9"></polyline>
+          <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
+          <rect x="6" y="14" width="12" height="8"></rect>
+        </svg>
+        Imprimer
+      </button>
+    </div>
+    <!-- ========== PAGE 1 ========== -->
+    <div class="page">
+      <!-- Header -->
+      <header class="flex items-center justify-between pb-4 mb-6">
+        <img :src="targoLogo" alt="TARGO" class="h-10" />
+        <div class="text-right text-sm">
+          <p class="font-bold text-[#00C853]">1-855-888-2746</p>
+          <p class="text-gray-600">www.targo.ca</p>
+        </div>
+      </header>
+
+      <!-- Residential Services -->
+      <section class="mb-6">
+        <h2 class="text-lg font-bold text-gray-900 pb-2 mb-4 border-b-2 border-[#00C853] flex items-center gap-2">
+          <Home class="w-5 h-5 text-[#00C853]" />
+          Services Résidentiels
+        </h2>
+        <div class="grid grid-cols-3 gap-4">
+          <div v-for="(service, index) in residentialServices" :key="index" class="border border-gray-300 rounded-lg p-4">
+            <div class="flex items-center gap-2 mb-3">
+              <component :is="service.icon" class="h-6 w-6 text-[#00C853]" />
+              <h3 class="font-bold text-sm">{{ service.title }}</h3>
+            </div>
+            <ul class="text-xs space-y-1.5">
+              <li v-for="(feature, i) in service.features" :key="i" class="flex items-start gap-2">
+                <span class="text-[#00C853] mt-0.5">✓</span>
+                <span>{{ feature }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <!-- Business Services - Part 1 -->
+      <section class="mb-6">
+        <h2 class="text-lg font-bold text-gray-900 pb-2 mb-4 border-b-2 border-[#00C853] flex items-center gap-2">
+          <Building2 class="w-5 h-5 text-[#00C853]" />
+          Solutions Affaires
+        </h2>
+        <div class="grid grid-cols-3 gap-3">
+          <div v-for="(service, index) in businessServicesPage1" :key="index" class="border border-gray-300 rounded-lg p-3">
+            <div class="flex items-center gap-2 mb-2">
+              <component :is="service.icon" class="h-5 w-5 text-[#00C853]" />
+              <h3 class="font-bold text-xs">{{ service.title }}</h3>
+            </div>
+            <ul class="text-[11px] space-y-1">
+              <li v-for="(feature, i) in service.features" :key="i" class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">•</span>
+                <span>{{ feature }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <!-- Page 1 Footer -->
+      <footer class="border-t border-gray-200 pt-3 mt-auto">
+        <p class="text-center text-xs text-gray-400">Page 1 de 2</p>
+      </footer>
+    </div>
+
+    <!-- ========== PAGE 2 ========== -->
+    <div class="page">
+      <!-- Header -->
+      <header class="flex items-center justify-between pb-4 mb-6">
+        <img :src="targoLogo" alt="TARGO" class="h-8 opacity-70" />
+        <p class="text-sm text-gray-500">Solutions Affaires & TI</p>
+      </header>
+
+      <!-- All Business Services including IT Support & Virtualization -->
+      <section class="mb-5">
+        <div class="grid grid-cols-3 gap-3">
+          <div v-for="(service, index) in page2Services" :key="index" class="border border-gray-300 rounded-lg p-3">
+            <div class="flex items-center gap-2 mb-2">
+              <component :is="service.icon" class="h-5 w-5 text-[#00C853]" />
+              <h3 class="font-bold text-xs">{{ service.title }}</h3>
+            </div>
+            <ul class="text-[11px] space-y-1">
+              <li v-for="(feature, i) in service.features" :key="i" class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">•</span>
+                <span>{{ feature }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <!-- Footer -->
+      <footer class="border-t-2 border-[#00C853] pt-4 mt-auto">
+        <div class="flex justify-between items-center text-xs">
+          <div>
+            <p class="text-gray-600">Services de confiance, tout-en-un, près de chez vous</p>
+          </div>
+          <div class="text-right">
+            <p><strong>Téléphone:</strong> 1-855-888-2746</p>
+            <p><strong>Courriel:</strong> support@targo.ca</p>
+            <p><strong>Web:</strong> www.targo.ca</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style>
+@media print {
+  @page {
+    size: letter;
+    margin: 0.5in;
+  }
+  body {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+  .catalogue-2pages .page {
+    width: 7.5in;
+    height: 10in;
+    padding: 0;
+    margin: 0;
+    page-break-after: always;
+    display: flex;
+    flex-direction: column;
+  }
+  .catalogue-2pages .page:last-child {
+    page-break-after: avoid;
+  }
+}
+
+@media screen {
+  .catalogue-2pages {
+    max-width: 8.5in;
+    margin: 0 auto;
+  }
+  .catalogue-2pages .page {
+    width: 8.5in;
+    min-height: 11in;
+    padding: 0.5in;
+    margin: 0 auto 1rem;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    background: white;
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/apps/website-vue/src/pages/CatalogueDynamique.vue b/apps/website-vue/src/pages/CatalogueDynamique.vue
new file mode 100644
index 0000000..663d8b3
--- /dev/null
+++ b/apps/website-vue/src/pages/CatalogueDynamique.vue
@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import {
+  Wifi, Tv, Phone, Server, Cloud, Shield, Network, Radio, Signal,
+  Laptop, Cable, Link2, GlobeLock, Building2, Headphones, Wrench,
+  Container, Home, XCircle, CheckCircle2, ArrowRight, AlertTriangle,
+} from "lucide-vue-next";
+import targoLogo from "@/assets/targo-logo.png";
+import painBuffering from "@/assets/pain-buffering.png";
+import solutionConnected from "@/assets/solution-connected.png";
+import painBusiness from "@/assets/pain-business.png";
+import solutionBusiness from "@/assets/solution-business.png";
+
+// Pain points data
+const residentialPains = [
+  { pain: "Votre film coupe en plein suspense?", solution: "Fibre optique jusqu'à 3.5 Gbit/s, sans interruption", icon: Wifi },
+  { pain: "Appels qui coupent ou voix robotique?", solution: "Téléphonie HD cristalline, appels illimités Canada/US", icon: Phone },
+  { pain: "100$ de plus chaque année sans raison?", solution: "Prix transparents, aucun contrat à long terme", icon: AlertTriangle },
+  { pain: "3 jours d'attente pour un technicien?", solution: "Support technique local 7j/7, équipe réactive", icon: Headphones },
+  { pain: "WiFi mort dans la chambre des enfants?", solution: "Modem WiFi 7, couverture complète de la maison", icon: Signal },
+  { pain: "Seulement 30 chaînes en HD?", solution: "100+ chaînes HD et 4K, enregistreur 600h inclus", icon: Tv },
+];
+
+const businessPains = [
+  { pain: "Panne internet = entreprise à l'arrêt?", solution: "SLA 99.999%, fibre dédiée avec diversité de parcours", icon: Wifi },
+  { pain: "Système téléphonique désuet et coûteux?", solution: "Téléphonie cloud complète avec intégration Teams", icon: Phone },
+  { pain: "Données sensibles sans protection?", solution: "Pare-feu NGFW, surveillance et alertes 24/7", icon: Shield },
+  { pain: "Aucune visibilité sur votre réseau?", solution: "Services gérés MSP avec rapports mensuels", icon: Wrench },
+  { pain: "Sites distants impossibles à connecter?", solution: "SD-WAN et réseaux inter-sites sécurisés", icon: Network },
+  { pain: "Infrastructure TI vieillissante?", solution: "Cloud privé, virtualisation et conteneurisation", icon: Cloud },
+];
+
+const stats = [
+  { number: "200+", label: "entreprises ont migré vers TARGO" },
+  { number: "20", label: "ans d'expertise locale" },
+  { number: "99.999%", label: "de disponibilité garantie" },
+  { number: "7j/7", label: "support technique inclus" },
+];
+
+const migrationQuote = "Pour différentes raisons, après plusieurs années avec Vidéotron, Cogeco ou Bell, elles préfèrent TARGO.";
+
+const allBusinessServices = [
+  { icon: Wifi, name: "Internet dédié" },
+  { icon: Phone, name: "Téléphonie SIP" },
+  { icon: Building2, name: "Multilogement" },
+  { icon: Network, name: "SD-WAN" },
+  { icon: Link2, name: "Inter-sites" },
+  { icon: GlobeLock, name: "VPN" },
+  { icon: Cloud, name: "Cloud" },
+  { icon: Shield, name: "Sécurité" },
+  { icon: Radio, name: "WiFi géré" },
+  { icon: Signal, name: "Cellulaire" },
+  { icon: Cable, name: "Câblage" },
+  { icon: Laptop, name: "Microsoft 365" },
+  { icon: Server, name: "Virtualisation" },
+  { icon: Container, name: "Docker/K8s" },
+  { icon: Wrench, name: "Services gérés" },
+  { icon: Headphones, name: "Support TI" },
+];
+
+const handlePrint = () => {
+  window.print();
+};
+</script>
+
+<template>
+  <div class="catalogue-dynamique bg-white text-black">
+    <!-- Print Button -->
+    <div class="print:hidden fixed top-4 right-4 z-50">
+      <button
+        @click="handlePrint"
+        class="bg-[#00C853] hover:bg-[#00a844] text-white font-medium px-6 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-colors"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="6 9 6 2 18 2 18 9" />
+          <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
+          <rect x="6" y="14" width="12" height="8" />
+        </svg>
+        Imprimer
+      </button>
+    </div>
+
+    <!-- ========== PAGE 1 — Résidentiel ========== -->
+    <div class="page">
+      <!-- Header -->
+      <header class="flex items-center justify-between pb-3 mb-4">
+        <img :src="targoLogo" alt="TARGO" class="h-10" />
+        <div class="text-right text-sm">
+          <p class="font-bold text-[#00C853]">1-855-888-2746</p>
+          <p class="text-gray-600">www.targo.ca</p>
+        </div>
+      </header>
+
+      <!-- Hero résidentiel — Avant/Après -->
+      <section class="mb-4">
+        <div class="grid grid-cols-2 gap-3 mb-3">
+          <div class="relative rounded-lg overflow-hidden border-2 border-red-200">
+            <img :src="painBuffering" alt="Internet frustrant" class="w-full h-28 object-cover" />
+            <div class="absolute bottom-0 left-0 right-0 bg-red-600/90 text-white text-center py-1.5 text-xs font-bold">
+              😤 Votre fournisseur actuel
+            </div>
+          </div>
+          <div class="relative rounded-lg overflow-hidden border-2 border-green-200">
+            <img :src="solutionConnected" alt="Famille connectée avec TARGO" class="w-full h-28 object-cover" />
+            <div class="absolute bottom-0 left-0 right-0 bg-[#00C853]/90 text-white text-center py-1.5 text-xs font-bold">
+              😊 Avec TARGO
+            </div>
+          </div>
+        </div>
+        <h1 class="text-lg font-black text-center text-gray-900 mb-1">
+          Pourquoi des milliers de foyers ont changé de fournisseur?
+        </h1>
+        <p class="text-xs text-center text-gray-500">Services de confiance, tout-en-un, près de chez vous</p>
+      </section>
+
+      <!-- Pain Points résidentiels -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold text-gray-900 pb-2 mb-3 border-b-2 border-[#00C853] flex items-center gap-2">
+          <Home class="w-4 h-4 text-[#00C853]" />
+          Reconnaissez-vous ces situations?
+        </h2>
+        <div class="grid grid-cols-2 gap-2.5">
+          <div v-for="(item, i) in residentialPains" :key="i" class="border border-gray-200 rounded-lg p-2.5 bg-gray-50/50">
+            <div class="flex items-start gap-2 mb-1.5">
+              <XCircle class="w-4 h-4 text-red-500 shrink-0 mt-0.5" />
+              <p class="text-[11px] font-semibold text-red-700 leading-tight">{{ item.pain }}</p>
+            </div>
+            <div class="flex items-start gap-2">
+              <CheckCircle2 class="w-4 h-4 text-[#00C853] shrink-0 mt-0.5" />
+              <p class="text-[11px] text-gray-700 leading-tight">{{ item.solution }}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Stats -->
+      <section class="mb-4">
+        <div class="bg-gray-900 rounded-lg p-3 grid grid-cols-4 gap-2">
+          <div v-for="(stat, i) in stats" :key="i" class="text-center">
+            <p class="text-lg font-black text-[#00C853]">{{ stat.number }}</p>
+            <p class="text-[9px] text-gray-300 leading-tight">{{ stat.label }}</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- CTA résidentiel -->
+      <section class="bg-gradient-to-r from-[#00C853]/10 to-[#00C853]/5 rounded-lg p-3 border border-[#00C853]/20 mb-3">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-bold text-gray-900">Prêt à changer?</p>
+            <p class="text-[10px] text-gray-600">Installation gratuite • Aucun contrat • Support 7j/7</p>
+          </div>
+          <div class="flex items-center gap-1 text-[#00C853] font-bold text-sm">
+            1-855-888-2746
+            <ArrowRight class="w-4 h-4" />
+          </div>
+        </div>
+      </section>
+
+      <footer class="border-t border-gray-200 pt-2 mt-auto">
+        <p class="text-center text-[10px] text-gray-400">Page 1 de 2 — Solutions Résidentielles</p>
+      </footer>
+    </div>
+
+    <!-- ========== PAGE 2 — Affaires ========== -->
+    <div class="page">
+      <!-- Header -->
+      <header class="flex items-center justify-between pb-3 mb-4">
+        <img :src="targoLogo" alt="TARGO" class="h-8 opacity-80" />
+        <p class="text-xs text-gray-500 font-medium">Solutions Affaires & TI</p>
+      </header>
+
+      <!-- Hero affaires — Avant/Après -->
+      <section class="mb-4">
+        <div class="grid grid-cols-2 gap-3 mb-3">
+          <div class="relative rounded-lg overflow-hidden border-2 border-red-200">
+            <img :src="painBusiness" alt="Entreprise en panne" class="w-full h-28 object-cover" />
+            <div class="absolute bottom-0 left-0 right-0 bg-red-600/90 text-white text-center py-1.5 text-xs font-bold">
+              😰 Sans TARGO
+            </div>
+          </div>
+          <div class="relative rounded-lg overflow-hidden border-2 border-green-200">
+            <img :src="solutionBusiness" alt="Entreprise performante avec TARGO" class="w-full h-28 object-cover" />
+            <div class="absolute bottom-0 left-0 right-0 bg-[#00C853]/90 text-white text-center py-1.5 text-xs font-bold">
+              🚀 Avec TARGO
+            </div>
+          </div>
+        </div>
+        <h2 class="text-base font-black text-center text-gray-900 mb-1">
+          200+ entreprises ont quitté leur fournisseur pour TARGO
+        </h2>
+        <p class="text-[10px] text-center text-gray-500 italic px-6">
+          « {{ migrationQuote }} »
+        </p>
+      </section>
+
+      <!-- Pain Points affaires -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold text-gray-900 pb-2 mb-3 border-b-2 border-[#00C853] flex items-center gap-2">
+          <Building2 class="w-4 h-4 text-[#00C853]" />
+          Votre entreprise mérite mieux
+        </h2>
+        <div class="grid grid-cols-2 gap-2.5">
+          <div v-for="(item, i) in businessPains" :key="i" class="border border-gray-200 rounded-lg p-2.5 bg-gray-50/50">
+            <div class="flex items-start gap-2 mb-1.5">
+              <XCircle class="w-4 h-4 text-red-500 shrink-0 mt-0.5" />
+              <p class="text-[11px] font-semibold text-red-700 leading-tight">{{ item.pain }}</p>
+            </div>
+            <div class="flex items-start gap-2">
+              <CheckCircle2 class="w-4 h-4 text-[#00C853] shrink-0 mt-0.5" />
+              <p class="text-[11px] text-gray-700 leading-tight">{{ item.solution }}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Services complets liste -->
+      <section class="mb-3">
+        <h3 class="text-xs font-bold text-gray-700 mb-2">Tous nos services affaires:</h3>
+        <div class="grid grid-cols-4 gap-1.5">
+          <div v-for="(svc, i) in allBusinessServices" :key="i" class="flex items-center gap-1.5 text-[9px] text-gray-600 bg-gray-50 rounded px-1.5 py-1">
+            <component :is="svc.icon" class="w-3 h-3 text-[#00C853]" />
+            <span>{{ svc.name }}</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- CTA Affaires -->
+      <section class="bg-gray-900 rounded-lg p-4 mb-3">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-bold text-white">Demandez une analyse gratuite de vos besoins</p>
+            <p class="text-[10px] text-gray-400">Un conseiller dédié vous contactera dans les 24h</p>
+          </div>
+          <div class="text-right">
+            <p class="text-[#00C853] font-bold text-sm">1-855-888-2746</p>
+            <p class="text-[10px] text-gray-400">support@targo.ca</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Footer -->
+      <footer class="border-t-2 border-[#00C853] pt-3 mt-auto">
+        <div class="flex justify-between items-center text-[10px]">
+          <p class="text-gray-500">Services de confiance, tout-en-un, près de chez vous</p>
+          <p class="text-gray-500">www.targo.ca</p>
+        </div>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style>
+@media print {
+  @page {
+    size: letter;
+    margin: 0.5in;
+  }
+  body {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+  .catalogue-dynamique .page {
+    width: 7.5in;
+    height: 10in;
+    padding: 0;
+    margin: 0;
+    page-break-after: always;
+    display: flex;
+    flex-direction: column;
+  }
+  .catalogue-dynamique .page:last-child {
+    page-break-after: avoid;
+  }
+}
+
+@media screen {
+  .catalogue-dynamique {
+    max-width: 8.5in;
+    margin: 0 auto;
+  }
+  .catalogue-dynamique .page {
+    width: 8.5in;
+    min-height: 11in;
+    padding: 0.5in;
+    margin: 0 auto 1rem;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    background: white;
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/apps/website-vue/src/pages/ContratBLB.vue b/apps/website-vue/src/pages/ContratBLB.vue
new file mode 100644
index 0000000..aa1a802
--- /dev/null
+++ b/apps/website-vue/src/pages/ContratBLB.vue
@@ -0,0 +1,541 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { FileDown } from "lucide-vue-next";
+// TODO(port): dep html2pdf.js is not installed in website-vue. The React version used it
+// to render #contentRef to a downloadable PDF. Fallback below triggers window.print()
+// (the closest static equivalent) so the "Télécharger PDF" button still works.
+import targoLogo from "@/assets/targo-logo.png";
+
+const contentRef = ref<HTMLDivElement | null>(null);
+
+const handlePrint = () => {
+  window.print();
+};
+
+const handleDownloadPdf = () => {
+  // TODO(port): replace with html2pdf.js once the dependency is available.
+  window.print();
+};
+</script>
+
+<template>
+  <div class="contrat-blb bg-white text-black" ref="contentRef">
+    <!-- Action Buttons - hidden when printing -->
+    <div class="print:hidden fixed top-4 right-4 z-50 flex gap-2">
+      <button
+        @click="handleDownloadPdf"
+        class="bg-[#00C853] hover:bg-[#00a844] text-white font-medium px-6 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-colors"
+      >
+        <FileDown class="w-5 h-5" />
+        Télécharger PDF
+      </button>
+      <button
+        @click="handlePrint"
+        class="bg-white hover:bg-gray-100 text-[#00C853] border-2 border-[#00C853] font-medium px-6 py-2 rounded-lg shadow-lg flex items-center gap-2 transition-colors"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="6 9 6 2 18 2 18 9"></polyline>
+          <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
+          <rect x="6" y="14" width="12" height="8"></rect>
+        </svg>
+        Imprimer
+      </button>
+    </div>
+
+    <!-- ========== PAGE 1 ========== -->
+    <div class="page">
+      <!-- Header -->
+      <header class="flex items-center justify-between pb-4 mb-4 border-b-2 border-[#00C853]">
+        <img :src="targoLogo" alt="Targo" class="h-12 w-auto" />
+        <div class="text-right text-sm">
+          <p class="font-bold text-[#00C853]">1-855-888-2746</p>
+          <p class="text-gray-600">www.targo.ca</p>
+        </div>
+      </header>
+
+      <!-- Title -->
+      <h1 class="text-xl font-bold text-[#00C853] mb-5 text-center border-b-2 border-[#00C853] pb-2">
+        ENTENTE DE SERVICE — INSTALLATION ET FOURNITURE D'INTERNET PAR FIBRE OPTIQUE
+      </h1>
+
+      <!-- Parties -->
+      <section class="mb-4">
+        <p class="font-semibold mb-2">Entre :</p>
+        <div class="grid grid-cols-2 gap-4 text-sm">
+          <div class="border border-gray-300 rounded-lg p-3">
+            <p class="font-bold text-[#00C853] mb-1">TARGO Communications Inc.</p>
+            <p>1867 chemin de la Rivière</p>
+            <p>Sainte-Clotilde-de-Châteauguay (Québec)</p>
+            <p class="mt-2"><span class="font-medium">Représentant :</span> Louis-Paul Bourdon</p>
+            <p class="text-xs text-gray-500 mt-1">(Ci-après désigné "TARGO")</p>
+          </div>
+          <div class="border border-gray-300 rounded-lg p-3">
+            <p class="font-bold text-[#00C853] mb-1">Marc-André Besner</p>
+            <p>75 Venise</p>
+            <p>Coteau-du-Lac (Québec)</p>
+            <p class="mt-2"><span class="font-medium">Client :</span> Marc-André Besner</p>
+            <p class="text-xs text-gray-500 mt-1">(Ci-après désigné "CLIENT")</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Section 1 -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
+          1. OBJET DU CONTRAT
+        </h2>
+        <p class="text-xs mb-1">Ce contrat a pour objet :</p>
+        <ul class="text-xs space-y-1 ml-4">
+          <li class="flex items-start gap-2">
+            <span class="text-[#00C853] font-bold">1.1</span>
+            <span>L'installation d'une infrastructure de fibre optique dans un immeuble résidentiel de 8 logements situé au 2 Carré Morrison, Huntingdon.</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <span class="text-[#00C853] font-bold">1.2</span>
+            <span>La fourniture continue d'un service Internet via cette infrastructure et le support des usagers.</span>
+          </li>
+        </ul>
+      </section>
+
+      <!-- Section 2 -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
+          2. INSTALLATION DE LA FIBRE OPTIQUE
+        </h2>
+
+        <div class="grid grid-cols-2 gap-3">
+          <div class="border border-gray-300 rounded-lg p-2">
+            <h3 class="font-bold text-xs text-[#00C853] mb-1">2.1 Étendue des travaux</h3>
+            <ul class="text-[11px] space-y-0.5">
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">•</span>
+                <span>Tirage de fibre jusqu'au bâtiment (FTTB) ou jusqu'aux unités (FTTH)</span>
+              </li>
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">•</span>
+                <span>Installation de panneaux de distribution, routeurs et points d'accès Wi-Fi</span>
+              </li>
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">•</span>
+                <span>Fourniture de matériel: câblage extérieur, convertisseurs optiques, routeur, boitier télécom</span>
+              </li>
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">•</span>
+                <span>Branchement initial de chaque logement</span>
+              </li>
+            </ul>
+          </div>
+          <div class="space-y-2">
+            <div class="border border-gray-300 rounded-lg p-2">
+              <h3 class="font-bold text-xs text-[#00C853] mb-1">2.2 Délai d'installation</h3>
+              <p class="text-[11px]">Les travaux débuteront dans un délai de 15 jours après la signature et seront complétés pour le <strong>30 avril 2026</strong> (locataire prévu pour le 1 mai).</p>
+            </div>
+            <div class="border border-gray-300 rounded-lg p-2">
+              <h3 class="font-bold text-xs text-[#00C853] mb-1">2.3 Coûts d'installation</h3>
+              <p class="text-[11px]">Frais unique : <strong class="text-[#00C853]">0$</strong> (inclus avec engagement 60 mois).</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Section 3 -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
+          3. SERVICE INTERNET PAR FIBRE
+        </h2>
+        <div class="grid grid-cols-2 gap-3">
+          <div class="border border-gray-300 rounded-lg p-2">
+            <h3 class="font-bold text-xs text-[#00C853] mb-1">3.1 Spécifications techniques</h3>
+            <ul class="text-[11px] space-y-0.5">
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">•</span>
+                <span>Type de service : <strong>Fibre optique symétrique</strong></span>
+              </li>
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">•</span>
+                <span>Débit : <strong>500 Mbps</strong> téléchargement / <strong>500 Mbps</strong> téléversement</span>
+              </li>
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">•</span>
+                <span>Distribution : FTTH Fibre jusqu'à chaque unité, 8 logements</span>
+              </li>
+            </ul>
+          </div>
+          <div class="border border-gray-300 rounded-lg p-2">
+            <h3 class="font-bold text-xs text-[#00C853] mb-1">3.2 Support Technique</h3>
+            <ul class="text-[11px] space-y-0.5">
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">•</span>
+                <span>Assistance <strong>7 jours sur 7</strong></span>
+              </li>
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">•</span>
+                <span>Temps de réponse dans les 24 heures</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <!-- Page 1 Footer -->
+      <footer class="border-t border-gray-200 pt-2 mt-auto">
+        <p class="text-center text-xs text-gray-400">Page 1 de 3</p>
+      </footer>
+    </div>
+
+    <!-- ========== PAGE 2 ========== -->
+    <div class="page">
+      <!-- Header -->
+      <header class="flex items-center justify-between pb-3 mb-4">
+        <img :src="targoLogo" alt="Targo" class="h-10 w-auto opacity-70" />
+        <p class="text-sm text-gray-500">Entente de service - Fibre optique</p>
+      </header>
+
+      <!-- Section 4 -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
+          4. TARIFICATION DU SERVICE
+        </h2>
+        <div class="border border-gray-300 rounded-lg p-2">
+          <ul class="text-[11px] space-y-0.5">
+            <li class="flex items-start gap-1.5">
+              <span class="text-[#00C853]">•</span>
+              <span>Frais mensuels : <strong class="text-[#00C853]">34.95$/logement</strong>, soit <strong>279,60$ + taxes</strong> pour l'immeuble</span>
+            </li>
+            <li class="flex items-start gap-1.5">
+              <span class="text-[#00C853]">•</span>
+              <span>3 premiers mois (mai, juin, juillet) : facturation progressive selon le taux d'occupation</span>
+            </li>
+            <li class="flex items-start gap-1.5">
+              <span class="text-[#00C853]">•</span>
+              <span>Paiement : prélèvement automatique le 1er de chaque mois</span>
+            </li>
+            <li class="flex items-start gap-1.5">
+              <span class="text-[#00C853]">•</span>
+              <span>Données illimitées, aucun frais additionnels</span>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- Section 5 -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
+          5. ENGAGEMENT ET DURÉE
+        </h2>
+        <div class="border border-gray-300 rounded-lg p-2">
+          <ul class="text-[11px] space-y-0.5">
+            <li class="flex items-start gap-1.5">
+              <span class="text-[#00C853]">•</span>
+              <span>Durée : <strong>60 mois</strong>, renouvelable automatiquement</span>
+            </li>
+            <li class="flex items-start gap-1.5">
+              <span class="text-[#00C853]">•</span>
+              <span>Résiliation avant terme : les frais correspondent aux mensualités restantes, + solde des frais d'installations</span>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- Section 6 -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
+          6. OBLIGATION DU CLIENT
+        </h2>
+        <div class="border border-gray-300 rounded-lg p-2">
+          <ul class="text-[11px] space-y-0.5">
+            <li class="flex items-start gap-1.5">
+              <span class="text-[#00C853]">•</span>
+              <span>Accès aux locaux techniques</span>
+            </li>
+            <li class="flex items-start gap-1.5">
+              <span class="text-[#00C853]">•</span>
+              <span>Respect des directives de sécurité</span>
+            </li>
+            <li class="flex items-start gap-1.5">
+              <span class="text-[#00C853]">•</span>
+              <span>Information des locataires sur le réseau (guide fourni au besoin)</span>
+            </li>
+            <li class="flex items-start gap-1.5">
+              <span class="text-[#00C853]">•</span>
+              <span>Installation de la fibre optique entre les unités logement et la salle électrique</span>
+            </li>
+            <li class="flex items-start gap-1.5">
+              <span class="text-[#00C853]">•</span>
+              <span>Installation des câbles réseau dans les appartements</span>
+            </li>
+            <li class="flex items-start gap-1.5">
+              <span class="text-[#00C853]">•</span>
+              <span>Installation des boîtiers télécom dans chaque logement</span>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- Section 7 -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
+          7. ÉQUIPEMENT ET RESPONSABILITÉ DU CLIENT
+        </h2>
+        <div class="border border-gray-300 rounded-lg p-2">
+          <p class="text-[11px]">
+            L'équipement fourni demeure la propriété du Fournisseur. Le client est responsable de l'équipement installé dans chaque logement. En cas de perte, de vol ou de bris résultant d'une utilisation non conforme, des frais de remplacement de <strong>200 $</strong> par équipement seront facturés. L'usure normale est exclue.
+          </p>
+        </div>
+      </section>
+
+      <!-- Section 8 -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
+          8. RESPONSABILITÉ DE TARGO
+        </h2>
+        <div class="border border-gray-300 rounded-lg p-2">
+          <p class="text-[11px]">
+            Le fournisseur est responsable du bon fonctionnement de l'infrastructure installée, mais non responsable des défaillances causées par : le réseau électrique, mauvaise utilisation ou force majeure.
+          </p>
+        </div>
+      </section>
+
+      <!-- Page 2 Footer -->
+      <footer class="border-t border-gray-200 pt-2 mt-auto">
+        <p class="text-center text-xs text-gray-400">Page 2 de 3</p>
+      </footer>
+    </div>
+
+    <!-- ========== PAGE 3 ========== -->
+    <div class="page">
+      <!-- Header -->
+      <header class="flex items-center justify-between pb-3 mb-4">
+        <img :src="targoLogo" alt="Targo" class="h-10 w-auto opacity-70" />
+        <p class="text-sm text-gray-500">Entente de service - Signatures</p>
+      </header>
+
+      <!-- Section 9 -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
+          9. CLAUSE - EXCLUSIVITÉ DU FOURNISSEUR INTERNET
+        </h2>
+        <div class="border border-gray-300 rounded-lg p-2">
+          <p class="text-[11px]">
+            Targo est désigné comme fournisseur exclusif du service Internet pour l'ensemble des unités de logement visées par le présent contrat, et ce, pour toute la durée de l'entente. Aucun service Internet concurrent ne pourra être installé ou offert sans l'autorisation écrite du Fournisseur.
+          </p>
+        </div>
+      </section>
+
+      <!-- Section 10 -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
+          10. LOI APPLICABLE
+        </h2>
+        <div class="border border-gray-300 rounded-lg p-2">
+          <p class="text-[11px]">
+            Ce contrat est régi par les lois du Québec. Tout litige sera soumis aux tribunaux du district judiciaire de l'immeuble.
+          </p>
+        </div>
+      </section>
+
+      <!-- Section 11 -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
+          11. CONDITION FINANCIÈRE ET AVANTAGES
+        </h2>
+        <div class="grid grid-cols-2 gap-3">
+          <div class="border border-gray-300 rounded-lg p-2">
+            <h3 class="font-bold text-xs text-[#00C853] mb-2">Pourquoi choisir Targo Communications?</h3>
+            <ul class="text-[11px] space-y-0.5">
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">✓</span>
+                <span>Directeur de compte dédié</span>
+              </li>
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">✓</span>
+                <span>Tarification avantageuse avec économies pour les locataires</span>
+              </li>
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">✓</span>
+                <span>Amélioration de l'offre locative</span>
+              </li>
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">✓</span>
+                <span>Optimisation de la valeur de l'immeuble</span>
+              </li>
+              <li class="flex items-start gap-1.5">
+                <span class="text-[#00C853]">✓</span>
+                <span>Augmentation possible du loyer de <strong>50$/logement</strong></span>
+              </li>
+            </ul>
+          </div>
+          <div class="border-2 border-[#00C853] rounded-lg p-2 bg-green-50">
+            <h3 class="font-bold text-xs text-[#00C853] mb-2">Sur engagement 60 mois</h3>
+            <table class="text-[11px] w-full">
+              <tbody>
+                <tr>
+                  <td class="py-0.5">Frais d'installation :</td>
+                  <td class="text-right line-through text-gray-400">9 000,00$</td>
+                  <td class="text-right font-bold text-[#00C853]">0$</td>
+                </tr>
+                <tr>
+                  <td class="py-0.5">Équipements :</td>
+                  <td class="text-right line-through text-gray-400">3 992,00$</td>
+                  <td class="text-right font-bold text-[#00C853]">0$</td>
+                </tr>
+                <tr class="border-t border-gray-200">
+                  <td class="pt-1 font-bold" colspan="2">Économie totale :</td>
+                  <td class="pt-1 text-right font-bold text-[#00C853] text-sm">12 992,00$</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      <!-- Section 12 - Signatures -->
+      <section class="mb-4">
+        <h2 class="text-sm font-bold bg-[#00C853] text-white px-3 py-1.5 mb-2">
+          12. SIGNATURES
+        </h2>
+
+        <div class="grid grid-cols-2 gap-4">
+          <!-- TARGO Signature -->
+          <div class="border border-gray-300 rounded-lg p-3">
+            <p class="text-xs font-bold text-[#00C853] mb-3">Pour TARGO Communications Inc.</p>
+            <p class="text-[10px] text-gray-600 mt-3 mb-1">
+              Fait à : <span class="border-b border-gray-400 inline-block w-40"></span>
+            </p>
+            <div class="border-b border-gray-400 h-12 mb-1 mt-4"></div>
+            <p class="text-xs">Louis-Paul Bourdon</p>
+            <p class="text-[10px] text-gray-500">Représentant autorisé</p>
+            <p class="text-[10px] text-gray-600 mt-4">Date : <span class="border-b border-gray-400 inline-block w-36"></span></p>
+          </div>
+
+          <!-- Client Signature -->
+          <div class="border border-gray-300 rounded-lg p-3">
+            <p class="text-xs font-bold text-[#00C853] mb-3">Pour le CLIENT</p>
+            <p class="text-[10px] text-gray-600 mt-3 mb-1">
+              Fait à : <span class="border-b border-gray-400 inline-block w-40"></span>
+            </p>
+            <div class="border-b border-gray-400 h-12 mb-1 mt-4"></div>
+            <p class="text-xs">Marc-André Besner</p>
+            <p class="text-[10px] text-gray-500">Propriétaire</p>
+            <p class="text-[10px] text-gray-600 mt-4">Date : <span class="border-b border-gray-400 inline-block w-36"></span></p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Footer -->
+      <footer class="border-t-2 border-[#00C853] pt-4 mt-auto">
+        <div class="flex justify-between items-center text-xs">
+          <div>
+            <p class="text-gray-600">Services de confiance, tout-en-un, près de chez vous</p>
+          </div>
+          <div class="text-right">
+            <p><strong>Téléphone :</strong> 1-855-888-2746</p>
+            <p><strong>Courriel :</strong> support@targo.ca</p>
+            <p><strong>Web :</strong> www.targo.ca</p>
+          </div>
+        </div>
+        <p class="text-center text-xs text-gray-400 mt-3">Page 3 de 3</p>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style>
+.contrat-blb {
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.4;
+}
+
+@media print {
+  @page {
+    size: letter;
+    margin: 0.4in 0.5in;
+  }
+
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    color-adjust: exact !important;
+  }
+
+  html, body {
+    background: white !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .contrat-blb {
+    background: white !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .contrat-blb .page {
+    width: 100% !important;
+    min-height: auto !important;
+    max-height: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    box-shadow: none !important;
+    page-break-after: always;
+    page-break-inside: avoid;
+    display: flex !important;
+    flex-direction: column !important;
+    background: white !important;
+  }
+
+  .contrat-blb .page:last-child {
+    page-break-after: avoid;
+  }
+
+  .contrat-blb section {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+
+  .contrat-blb header {
+    page-break-after: avoid;
+    break-after: avoid;
+  }
+
+  .contrat-blb footer {
+    margin-top: auto;
+  }
+
+  /* Force green backgrounds to print */
+  .contrat-blb [class*="bg-[#00C853]"],
+  .contrat-blb h2[class*="bg-"] {
+    background-color: #00C853 !important;
+    color: white !important;
+  }
+
+  /* Light green background for savings box */
+  .contrat-blb .bg-green-50 {
+    background-color: #f0fdf4 !important;
+  }
+}
+
+@media screen {
+  .contrat-blb {
+    max-width: 8.5in;
+    margin: 0 auto;
+    padding-bottom: 2rem;
+  }
+  .contrat-blb .page {
+    width: 8.5in;
+    min-height: 11in;
+    padding: 0.5in;
+    margin: 0 auto 1.5rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+    background: white;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border-radius: 4px;
+  }
+}
+
+.html2pdf__page-break {
+  page-break-before: always;
+}
+</style>
diff --git a/apps/website-vue/src/pages/Index.vue b/apps/website-vue/src/pages/Index.vue
new file mode 100644
index 0000000..2ec76c4
--- /dev/null
+++ b/apps/website-vue/src/pages/Index.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import Header from "@/components/layout/Header.vue";
+import Hero from "@/components/sections/Hero.vue";
+import Services from "@/components/sections/Services.vue";
+import About from "@/components/sections/About.vue";
+import Clients from "@/components/sections/Clients.vue";
+import Contact from "@/components/sections/Contact.vue";
+import Footer from "@/components/layout/Footer.vue";
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <Header />
+    <main>
+      <Hero />
+      <Services />
+      <About />
+      <Clients />
+      <Contact />
+    </main>
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/Internet.vue b/apps/website-vue/src/pages/Internet.vue
new file mode 100644
index 0000000..6bdd5e5
--- /dev/null
+++ b/apps/website-vue/src/pages/Internet.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Wifi, Zap, Shield, Clock, ArrowRight, Download, Upload } from "lucide-vue-next";
+import AvailabilityDialog from "@/components/AvailabilityDialog.vue";
+
+const features = [{
+  icon: Zap,
+  title: "100% fibre",
+  description: "Connexion directe en fibre optique jusqu'à votre domicile, sans aucun compromis sur la qualité du signal."
+}, {
+  icon: Shield,
+  title: "Connexion sécurisée",
+  description: "Protection contre les attaques directes avec pare-feu intégré."
+}, {
+  icon: Clock,
+  title: "Support 365",
+  description: "Notre équipe technique locale est disponible pour vous assister par téléphone et par courriel."
+}, {
+  icon: Download,
+  title: "Données illimitées",
+  description: "Aucune limite de téléchargement. Visionnez, jouez et travaillez sans restriction."
+}];
+
+const availabilityOpen = ref(false);
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <Header />
+    <main>
+      <!-- Hero Section -->
+      <section class="pt-40 pb-20 bg-gradient-to-br from-secondary via-background to-secondary">
+        <div class="container">
+          <div class="max-w-3xl mx-auto text-center mb-16">
+            <span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4 animate-fade-in">
+              Internet fibre à la maison
+            </span>
+            <h1 class="font-display text-4xl md:text-6xl font-bold mb-6 animate-fade-in" style="animation-delay: 0.1s">
+              La meilleure connexion <span class="text-gradient-targo">à la vitesse de la lumière</span>
+            </h1>
+            <p class="text-xl text-muted-foreground mb-8 animate-fade-in" style="animation-delay: 0.2s">
+              Connectez votre foyer à la vraie fibre. Performance et fiabilité garanties pour propulser vos communications, du télétravail au divertissement.
+            </p>
+
+            <!-- Key stats -->
+            <div class="grid grid-cols-2 gap-6 max-w-md mx-auto mb-10 animate-fade-in" style="animation-delay: 0.3s">
+              <div class="bg-card border border-border rounded-2xl p-6 text-center">
+                <p class="text-sm text-muted-foreground mb-1">Vitesse jusqu'à</p>
+                <p class="font-display text-4xl font-bold text-primary">
+                  3.5 <span class="text-2xl">Gbps</span>
+                </p>
+              </div>
+              <div class="bg-card border border-border rounded-2xl p-6 text-center">
+                <p class="text-sm text-muted-foreground mb-1">Forfaits à partir de</p>
+                <p class="font-display text-4xl font-bold text-primary leading-none">
+                  <span class="relative">39<span class="text-lg align-top leading-none">,95$</span></span>
+                  <span class="text-base font-normal text-muted-foreground ml-1">/mois</span>
+                </p>
+              </div>
+            </div>
+
+            <div class="flex justify-center animate-fade-in" style="animation-delay: 0.4s; animation-fill-mode: both">
+              <Button size="lg" class="gradient-targo glow-targo text-lg px-10" @click="availabilityOpen = true">
+                Vérifier ma disponibilité
+                <ArrowRight class="w-5 h-5 ml-2" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Speed Showcase -->
+      <section class="py-16 bg-primary text-primary-foreground">
+        <div class="container">
+          <div class="grid md:grid-cols-3 gap-8 text-center">
+            <div>
+              <div class="flex items-center justify-center gap-2 mb-2">
+                <Download class="w-8 h-8" />
+                <span class="font-display text-5xl font-bold">Fibre</span>
+              </div>
+              <p class="text-primary-foreground/80">100%</p>
+            </div>
+            <div>
+              <div class="flex items-center justify-center gap-2 mb-2">
+                <Upload class="w-8 h-8" />
+                <span class="font-display text-5xl font-bold">Illimité</span>
+              </div>
+              <p class="text-primary-foreground/80">Transfert</p>
+            </div>
+            <div>
+              <div class="flex items-center justify-center gap-2 mb-2">
+                <Wifi class="w-8 h-8" />
+                <span class="font-display text-5xl font-bold">WiFi</span>
+              </div>
+              <p class="text-primary-foreground/80">Inclus</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Features -->
+      <section class="py-20 bg-secondary/50">
+        <div class="container">
+          <div class="text-center max-w-2xl mx-auto mb-16">
+            <h2 class="font-display text-4xl font-bold mb-4">Pourquoi choisir TARGO?</h2>
+            <p class="text-muted-foreground text-lg">
+              Un réseau local, un service personnalisé, une qualité incomparable.
+            </p>
+          </div>
+          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <Card v-for="feature in features" :key="feature.title" class="text-center p-6">
+              <CardContent class="p-0">
+                <div class="w-16 h-16 mx-auto mb-4 rounded-2xl gradient-targo flex items-center justify-center">
+                  <component :is="feature.icon" class="w-8 h-8 text-primary-foreground" />
+                </div>
+                <h3 class="font-display text-xl font-bold mb-2">{{ feature.title }}</h3>
+                <p class="text-muted-foreground text-sm">{{ feature.description }}</p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <!-- CTA -->
+      <section class="py-20">
+        <div class="container">
+          <Card class="gradient-targo p-12 text-center text-primary-foreground">
+            <h2 class="font-display text-3xl md:text-4xl font-bold mb-4">Prêt à migrer à la fibre?</h2>
+            <p class="text-xl mb-8 text-primary-foreground/90">
+              Vérifiez la disponibilité à votre adresse en quelques secondes.
+            </p>
+            <Button size="lg" variant="secondary" class="text-primary font-semibold" @click="availabilityOpen = true">
+              Vérifier mon adresse
+              <ArrowRight class="w-5 h-5 ml-2" />
+            </Button>
+          </Card>
+        </div>
+      </section>
+    </main>
+    <Footer />
+
+    <AvailabilityDialog v-model:open="availabilityOpen" />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/NotFound.vue b/apps/website-vue/src/pages/NotFound.vue
new file mode 100644
index 0000000..74cc2c1
--- /dev/null
+++ b/apps/website-vue/src/pages/NotFound.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    console.error("404 Error: User attempted to access non-existent route:", route.path);
+  }
+});
+</script>
+
+<template>
+  <div class="flex min-h-screen items-center justify-center bg-muted">
+    <div class="text-center">
+      <h1 class="mb-4 text-4xl font-bold">404</h1>
+      <p class="mb-4 text-xl text-muted-foreground">Oops! Page not found</p>
+      <a href="/" class="text-primary underline hover:text-primary/90">
+        Return to Home
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/PolitiqueConfidentialite.vue b/apps/website-vue/src/pages/PolitiqueConfidentialite.vue
new file mode 100644
index 0000000..84ec6fb
--- /dev/null
+++ b/apps/website-vue/src/pages/PolitiqueConfidentialite.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+</script>
+
+<template>
+  <Header />
+  <main class="min-h-screen bg-background pt-32 pb-20">
+    <div class="max-w-3xl mx-auto px-6">
+      <div class="mb-4">
+        <RouterLink to="/" class="text-sm text-muted-foreground hover:text-targo-green transition-colors">← Retour à l'accueil</RouterLink>
+      </div>
+      <h1 class="text-3xl font-display font-bold mb-8">Politique de protection des renseignements personnels</h1>
+      <p class="text-sm text-muted-foreground mb-8">TARGO Communications INC</p>
+
+      <div class="prose prose-gray dark:prose-invert max-w-none space-y-6">
+        <p>TARGO Communications INC est l'un des principaux fournisseurs d'accès Internet en milieu rural au Québec. Notre mission est claire : offrir une connectivité performante à des coûts concurrentiels aux collectivités locales souvent ignorées par les grands acteurs des télécommunications.</p>
+        <p>Cette mission s'accompagne d'un engagement ferme envers la protection des renseignements personnels de nos clients. Cette politique constitue un énoncé officiel des principes et des lignes directrices qui orientent nos pratiques en matière de cueillette, d'utilisation, de partage, de conservation et de protection des renseignements personnels.</p>
+
+        <section>
+          <h2 class="text-xl font-bold mt-8 mb-3">Définitions des renseignements personnels</h2>
+          <p>Les renseignements personnels incluent toute information permettant d'identifier un individu, notamment :</p>
+          <ul class="list-disc pl-6 space-y-1">
+            <li>Nom</li>
+            <li>Adresse postale</li>
+            <li>Adresse courriel</li>
+            <li>Numéro de téléphone</li>
+            <li>Informations de facturation (p. ex., numéro de carte de crédit)</li>
+          </ul>
+          <p>Ces renseignements sont protégés par la loi et leur gestion respecte des normes élevées de confidentialité et de sécurité.</p>
+        </section>
+
+        <section>
+          <h2 class="text-xl font-bold mt-8 mb-3">Principes et engagements</h2>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">Transparence</h3>
+          <p>Nous informons clairement nos clients sur la façon dont leurs renseignements personnels sont recueillis, utilisés et partagés, que ce soit par le biais de notre politique de confidentialité, nos conditions générales ou notre site web.</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">Consentement</h3>
+          <p>Nous collectons, utilisons ou partageons les renseignements personnels uniquement avec le consentement préalable de nos clients, sauf en cas d'exceptions légales (p. ex., situations d'urgence).</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">Utilisation limitée</h3>
+          <p>Les renseignements personnels sont utilisés exclusivement aux fins pour lesquelles ils ont été recueillis, conformément à la loi.</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">Conservation et destruction</h3>
+          <p>Les renseignements sont conservés uniquement pour la durée nécessaire à la prestation de nos services ou selon les exigences légales. Ils sont ensuite détruits ou dépersonnalisés de manière sécuritaire.</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">Exactitude</h3>
+          <p>Nous nous engageons à maintenir des renseignements personnels exacts et à jour. Toute correction ou mise à jour est effectuée sur demande ou lorsque nécessaire.</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">Sécurité</h3>
+          <p>Des mesures physiques, technologiques et administratives sont mises en place pour protéger les renseignements personnels contre tout accès non autorisé, perte ou divulgation inappropriée. Ces mêmes standards s'appliquent aux tiers ou fournisseurs ayant accès à ces renseignements.</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">Accès et correction</h3>
+          <p>Sur demande écrite, les clients peuvent accéder aux renseignements les concernant et demander des corrections si nécessaire.</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">Plainte</h3>
+          <p>Tout client peut soumettre une plainte concernant la gestion de ses renseignements personnels. Les plaintes sont examinées de manière sérieuse et rigoureuse.</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">Responsabilité</h3>
+          <p>TARGO Communications INC désigne une personne responsable du respect de cette politique. Cette personne veille à l'application des principes énoncés, à la formation des employés et à la mise en place de pratiques conformes.</p>
+        </section>
+
+        <section>
+          <h2 class="text-xl font-bold mt-8 mb-3">Détails supplémentaires</h2>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">1. Détermination des fins</h3>
+          <p>Les renseignements personnels sont recueillis uniquement pour des fins précises, comme :</p>
+          <ul class="list-disc pl-6 space-y-1">
+            <li>Fournir nos services.</li>
+            <li>Comprendre les besoins des clients.</li>
+            <li>Respecter les exigences légales.</li>
+          </ul>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">2. Consentement</h3>
+          <p>Le consentement est obtenu au moment de la collecte des renseignements, sauf circonstances exceptionnelles.</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">3. Limitation de la collecte</h3>
+          <p>Seuls les renseignements nécessaires sont recueillis, principalement auprès des clients ou d'autres sources autorisées.</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">4. Limitation de l'utilisation et de la conservation</h3>
+          <p>Les renseignements ne sont pas utilisés à d'autres fins que celles prévues, sauf autorisation du client ou exigence légale.</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">5. Sécurité</h3>
+          <p>Nous employons des mesures de protection adaptées à la sensibilité des renseignements.</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">6. Transparence</h3>
+          <p>Les clients sont informés des politiques et des mécanismes pour exercer leurs droits.</p>
+
+          <h3 class="text-lg font-semibold mt-4 mb-2">7. Accès</h3>
+          <p>Tout client peut consulter ses renseignements personnels et en demander la correction sur demande écrite.</p>
+        </section>
+
+        <section>
+          <h2 class="text-xl font-bold mt-8 mb-3">Contact</h2>
+          <p>Pour toute question relative à cette politique :</p>
+          <p class="mt-2">
+            <a href="mailto:support@targo.ca" class="text-targo-green hover:underline">support@targo.ca</a><br />
+            <a href="tel:5144480773" class="text-targo-green hover:underline">514-448-0773</a>
+          </p>
+        </section>
+      </div>
+    </div>
+  </main>
+  <Footer />
+</template>
diff --git a/apps/website-vue/src/pages/PubliciteLettre.vue b/apps/website-vue/src/pages/PubliciteLettre.vue
new file mode 100644
index 0000000..9fdc3e1
--- /dev/null
+++ b/apps/website-vue/src/pages/PubliciteLettre.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import targoLogo from "@/assets/targo-logo.png";
+import { Button } from "@/components/ui/button";
+import { ArrowRight, Phone, Mail } from "lucide-vue-next";
+
+const clients = [
+  "Vegpro International",
+  "Lécuyer Béton",
+  "Cultures Gen V",
+  "Parc Safari",
+  "Uniag",
+  "GRC",
+  "Agence des services frontaliers du Canada",
+  "Groupe ABS",
+  "Sobeys / IGA",
+  "Ciment Québec",
+  "Pavages Maska",
+  "Groupe MPotvin",
+];
+
+const services = [
+  "Internet Fibre dédié",
+  "Téléphonie IP / SIP",
+  "SD-WAN & VPN",
+  "Cloud & Virtualisation",
+  "Cybersécurité",
+  "Wi-Fi géré",
+  "Microsoft 365",
+  "Câblage structuré",
+  "Réseaux inter-sites",
+  "Amplification cellulaire",
+  "Services gérés",
+  "Multilogement",
+];
+
+const handlePrint = () => {
+  window.print();
+};
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <div class="print:hidden">
+      <Header />
+    </div>
+
+    <!-- Print / Download buttons -->
+    <div class="print:hidden container pt-28 pb-4 flex gap-3 justify-end">
+      <Button @click="handlePrint" variant="outline" class="gap-2">
+        <Mail class="w-4 h-4" />
+        Imprimer / PDF
+      </Button>
+    </div>
+
+    <!-- Letter content -->
+    <div class="pub-lettre container max-w-[8.5in] mx-auto pb-16 print:pb-0 print:pt-0 print:max-w-none">
+      <div class="page bg-white rounded-xl shadow-lg print:shadow-none print:rounded-none overflow-hidden">
+
+        <!-- MOBILE: Full green header band -->
+        <div class="print:hidden bg-[#00C853] px-6 md:px-10 py-6 flex items-center justify-between">
+          <img :src="targoLogo" alt="TARGO" class="h-10 brightness-0 invert" />
+          <div class="text-white text-right text-sm font-medium">
+            <p>1-855-888-2746</p>
+            <p>targo.ca</p>
+          </div>
+        </div>
+
+        <!-- PRINT: Simple logo on white -->
+        <div class="hidden print:flex px-10 pt-6 pb-2 items-center justify-between">
+          <img :src="targoLogo" alt="TARGO" class="h-10" />
+          <div class="text-right text-xs text-gray-600">
+            <p>1-855-888-2746</p>
+            <p>targo.ca</p>
+          </div>
+        </div>
+
+        <div class="px-6 md:px-10 py-6 md:py-8 flex flex-col print:px-10 print:py-4" :style="{ minHeight: '9in' }">
+
+          <!-- Hook headline -->
+          <div class="text-center mb-6 md:mb-8">
+            <h1 class="font-display text-2xl md:text-3xl font-bold text-gray-900 leading-tight mb-3">
+              Qu'ont en commun ces<br />
+              <span class="text-[#00C853]">entreprises à succès?</span>
+            </h1>
+          </div>
+
+          <!-- Client grid -->
+          <div class="grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-3 mb-6 md:mb-8 print:grid-cols-3">
+            <div
+              v-for="client in clients"
+              :key="client"
+              class="bg-gray-50 border border-gray-200 rounded-lg px-3 py-2.5 text-center text-xs font-semibold text-gray-700 leading-tight flex items-center justify-center min-h-[44px]"
+            >
+              {{ client }}
+            </div>
+          </div>
+
+          <!-- Answer / Value proposition -->
+          <div class="bg-green-50 border-l-4 border-[#00C853] rounded-r-lg px-4 md:px-6 py-4 md:py-5 mb-6 md:mb-8">
+            <p class="text-sm md:text-base font-semibold text-gray-900 mb-2">
+              Elles bénéficient d'un service évolué et personnalisé qui leur permet :
+            </p>
+            <ul class="space-y-2 text-sm text-gray-700">
+              <li class="flex items-start gap-2">
+                <span class="text-[#00C853] font-bold mt-0.5">✓</span>
+                <span>La <strong>paix d'esprit</strong> grâce à un réseau fibre 100 % local, surveillé 24/7</span>
+              </li>
+              <li class="flex items-start gap-2">
+                <span class="text-[#00C853] font-bold mt-0.5">✓</span>
+                <span>Une <strong>longueur d'avance</strong> par l'innovation que TARGO apporte à chaque solution</span>
+              </li>
+              <li class="flex items-start gap-2">
+                <span class="text-[#00C853] font-bold mt-0.5">✓</span>
+                <span>Un <strong>partenaire unique</strong> pour Internet, téléphonie, cloud, sécurité et plus</span>
+              </li>
+              <li class="flex items-start gap-2">
+                <span class="text-[#00C853] font-bold mt-0.5">✓</span>
+                <span>Un <strong>support humain local</strong>, disponible 7j/7, qui connaît votre réalité</span>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Services summary -->
+          <div class="mb-6 md:mb-8">
+            <h2 class="font-display text-base md:text-lg font-bold text-gray-900 mb-3 md:mb-4 text-center">
+              Des solutions complètes pour votre entreprise
+            </h2>
+            <div class="grid grid-cols-2 md:grid-cols-3 gap-2 text-xs print:grid-cols-3">
+              <div v-for="service in services" :key="service" class="flex items-center gap-1.5 text-gray-700">
+                <span class="w-1.5 h-1.5 rounded-full bg-[#00C853] flex-shrink-0" />
+                {{ service }}
+              </div>
+            </div>
+          </div>
+
+          <!-- Spacer to push CTA down -->
+          <div class="flex-1" />
+
+          <!-- CTA — full color on mobile, muted for print -->
+          <div class="bg-gray-900 text-white rounded-xl px-6 md:px-8 py-5 md:py-6 text-center print:bg-gray-100 print:text-gray-900 print:border print:border-gray-300 print:rounded-lg">
+            <p class="text-base md:text-lg font-bold mb-1 font-display print:text-gray-900">
+              Prêt à passer à la vitesse supérieure?
+            </p>
+            <p class="text-sm text-gray-300 mb-4 print:text-gray-600">
+              Demandez une consultation gratuite et découvrez comment TARGO peut transformer vos communications.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-3 justify-center items-center text-sm">
+              <span class="flex items-center gap-2 font-semibold">
+                <Phone class="w-4 h-4 text-[#00C853]" />
+                1-855-888-2746
+              </span>
+              <span class="hidden sm:inline text-gray-500">|</span>
+              <span class="flex items-center gap-2 font-semibold">
+                <Mail class="w-4 h-4 text-[#00C853]" />
+                support@targo.ca
+              </span>
+              <span class="hidden sm:inline text-gray-500">|</span>
+              <span class="flex items-center gap-2 font-semibold">
+                <ArrowRight class="w-4 h-4 text-[#00C853]" />
+                targo.ca/business
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="print:hidden">
+      <Footer />
+    </div>
+  </div>
+</template>
+
+<style>
+@media print {
+  @page {
+    size: letter;
+    margin: 0.4in 0.5in;
+  }
+
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  html, body {
+    margin: 0 !important;
+    padding: 0 !important;
+    background: white !important;
+  }
+
+  .print\:hidden {
+    display: none !important;
+  }
+
+  .hidden.print\:flex {
+    display: flex !important;
+  }
+
+  .pub-lettre {
+    padding: 0 !important;
+    margin: 0 !important;
+    max-width: none !important;
+  }
+
+  .pub-lettre .page {
+    min-height: auto !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+  }
+
+  /* CTA box for print */
+  .pub-lettre .print\:bg-gray-100 {
+    background-color: #f3f4f6 !important;
+    color: #111827 !important;
+  }
+
+  .pub-lettre .print\:text-gray-900 {
+    color: #111827 !important;
+  }
+
+  .pub-lettre .print\:text-gray-600 {
+    color: #4b5563 !important;
+  }
+}
+</style>
diff --git a/apps/website-vue/src/pages/PublicitePrint.vue b/apps/website-vue/src/pages/PublicitePrint.vue
new file mode 100644
index 0000000..0417172
--- /dev/null
+++ b/apps/website-vue/src/pages/PublicitePrint.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import targoLogo from "@/assets/targo-logo.png";
+import { Phone, Mail, ArrowRight, Printer, Wifi, Network, GlobeLock, Cloud, Shield, Radio, Signal, Laptop, Cable, Link2, Waypoints, Building2, Globe } from "lucide-vue-next";
+
+const clients = [
+  "Vegpro International",
+  "Lécuyer Béton",
+  "Cultures Gen V",
+  "Parc Safari",
+  "Uniag",
+  "GRC",
+  "Agence des services frontaliers du Canada",
+  "Groupe ABS",
+  "Sobeys / IGA",
+  "Ciment Québec",
+  "Pavages Maska",
+  "Groupe MPotvin",
+];
+
+const services = [
+  { icon: Wifi, label: "Internet Fibre dédié" },
+  { icon: Phone, label: "Téléphonie IP / SIP" },
+  { icon: Network, label: "SD-WAN & VPN" },
+  { icon: Cloud, label: "Cloud & Virtualisation" },
+  { icon: Shield, label: "Cybersécurité" },
+  { icon: Radio, label: "Wi-Fi géré" },
+  { icon: Laptop, label: "Microsoft 365" },
+  { icon: Cable, label: "Câblage structuré" },
+  { icon: Link2, label: "Réseaux inter-sites" },
+  { icon: Signal, label: "Amplification cellulaire" },
+  { icon: Waypoints, label: "Réseaux publics" },
+  { icon: Building2, label: "Immeubles, RPA & Hôtels" },
+];
+
+const handlePrint = () => {
+  window.print();
+};
+</script>
+
+<template>
+  <div class="min-h-screen bg-white flex items-start justify-center">
+    <div class="w-[8.5in] mx-auto">
+      <div class="px-10 pt-6 pb-4 flex items-center justify-between border-b border-gray-200">
+        <img :src="targoLogo" alt="TARGO" class="h-10" />
+        <div class="text-right text-xs text-gray-600">
+          <p>1-855-888-2746</p>
+          <p>targo.ca</p>
+        </div>
+      </div>
+
+      <div class="px-10 py-4 flex flex-col">
+        <!-- Hook headline — single line -->
+        <div class="text-center mb-5 mt-4">
+          <h1 class="font-display text-[22px] font-bold text-gray-900 leading-tight">
+            Qu'ont en commun ces <span class="text-[#00C853]">entreprises à succès?</span>
+          </h1>
+        </div>
+
+        <!-- Client grid — compact -->
+        <div class="grid grid-cols-3 gap-x-3 gap-y-1.5 mb-5">
+          <div
+            v-for="client in clients"
+            :key="client"
+            class="bg-gray-50 border border-gray-200 rounded px-2.5 py-1.5 text-center text-[11px] font-semibold text-gray-700 leading-tight flex items-center justify-center"
+          >
+            {{ client }}
+          </div>
+        </div>
+
+        <!-- Transition phrase -->
+        <p class="text-center text-[13px] text-gray-600 mb-3">
+          Pour différentes raisons, après plusieurs années avec <strong>Vidéotron</strong>, <strong>Cogeco</strong> ou <strong>Bell</strong>, elles préfèrent <strong>TARGO</strong>, que ce soit à cause de la fiabilité, la vitesse d'envoi, la prise en charge complète ou le service VIP.
+        </p>
+
+        <!-- Value proposition -->
+        <div class="bg-green-50 border-l-4 border-[#00C853] rounded-r-lg px-5 py-3 mb-5">
+          <ul class="space-y-1 text-[13px] text-gray-700">
+            <li class="flex items-start gap-2">
+              <span class="text-[#00C853] font-bold mt-0.5">✓</span>
+              <span>La <strong>paix d'esprit</strong> grâce à un réseau fibre 100 % local, surveillé 24/7</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <span class="text-[#00C853] font-bold mt-0.5">✓</span>
+              <span>Une <strong>longueur d'avance</strong> par l'innovation que TARGO apporte à chaque solution</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <span class="text-[#00C853] font-bold mt-0.5">✓</span>
+              <span>Un <strong>partenaire unique</strong> pour Internet, téléphonie, cloud, sécurité et plus</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <span class="text-[#00C853] font-bold mt-0.5">✓</span>
+              <span>Un <strong>support humain local</strong>, disponible 7j/7, qui connaît votre réalité</span>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Services -->
+        <div class="mb-5 pt-4 border-t border-gray-200">
+          <h2 class="font-display text-base font-bold text-gray-900 mb-2.5 text-center">
+            Des solutions complètes pour votre entreprise
+          </h2>
+          <div class="grid grid-cols-3 gap-x-3 gap-y-1.5 text-[11px]">
+            <div v-for="service in services" :key="service.label" class="flex items-center gap-1.5 text-gray-700 border border-gray-200 rounded px-2 py-1">
+              <component :is="service.icon" class="w-3.5 h-3.5 text-[#00C853] flex-shrink-0" />
+              {{ service.label }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Reduced spacer -->
+        <div class="flex-1 max-h-4" />
+
+        <!-- CTA -->
+        <div class="bg-gray-100 border border-gray-300 rounded-lg px-6 py-4 text-center">
+          <p class="text-base font-bold mb-1 font-display text-gray-900">
+            Prêt à propulser vos affaires à la vitesse supérieure?
+          </p>
+          <p class="text-sm text-gray-600 mb-3">
+            Demandez une consultation gratuite et découvrez comment TARGO peut transformer vos communications.
+          </p>
+          <div class="flex gap-4 justify-center items-center text-sm">
+            <span class="flex items-center gap-1.5 font-semibold text-gray-900">
+              <Phone class="w-3.5 h-3.5 text-[#00C853]" />
+              1-855-888-2746
+            </span>
+            <span class="text-gray-400">|</span>
+            <span class="flex items-center gap-1.5 font-semibold text-gray-900">
+              <Mail class="w-3.5 h-3.5 text-[#00C853]" />
+              support@targo.ca
+            </span>
+            <span class="text-gray-400">|</span>
+            <span class="flex items-center gap-1.5 font-semibold text-gray-900">
+              <Globe class="w-3.5 h-3.5 text-[#00C853]" />
+              targo.ca
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Print button -->
+    <button
+      @click="handlePrint"
+      class="fixed bottom-6 right-6 bg-[#00C853] text-white rounded-full p-3 shadow-lg hover:bg-[#00B848] transition-colors print:hidden"
+      title="Imprimer"
+    >
+      <Printer class="w-5 h-5" />
+    </button>
+  </div>
+</template>
+
+<style>
+@media print {
+  @page { size: letter; margin: 0.4in 0.5in; }
+  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
+  html, body { margin: 0 !important; padding: 0 !important; background: white !important; }
+}
+</style>
diff --git a/apps/website-vue/src/pages/Support.vue b/apps/website-vue/src/pages/Support.vue
new file mode 100644
index 0000000..2f5341e
--- /dev/null
+++ b/apps/website-vue/src/pages/Support.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Check, Headphones, Clock, Wrench, Shield, ArrowRight, Phone, Mail, MessageCircle, FileQuestion } from "lucide-vue-next";
+
+const supportOptions = [
+  {
+    icon: Phone,
+    title: "Par téléphone",
+    description: "Parlez directement à un technicien",
+    action: "514.448.0773",
+    actionType: "tel",
+  },
+  {
+    icon: Mail,
+    title: "Par courriel",
+    description: "Réponse sous 24 heures",
+    action: "support@targo.ca",
+    actionType: "email",
+  },
+  {
+    icon: MessageCircle,
+    title: "Chat en direct",
+    description: "Assistance immédiate en ligne",
+    action: "Démarrer le chat",
+    actionType: "chat",
+  },
+  {
+    icon: FileQuestion,
+    title: "FAQ & Guides",
+    description: "Trouvez vos réponses rapidement",
+    action: "Consulter la FAQ",
+    actionType: "link",
+  },
+];
+
+const maintenancePlans = [
+  {
+    name: "Support standard",
+    price: 0,
+    note: "Inclus",
+    features: ["Support téléphonique 8h-20h", "Support par courriel", "FAQ et guides en ligne", "Diagnostic à distance"],
+    popular: false,
+  },
+  {
+    name: "Support prioritaire",
+    price: 5,
+    note: "/mois",
+    features: ["Support 24/7", "Temps de réponse garanti", "Technicien dédié", "Interventions prioritaires", "Prêt d'équipement"],
+    popular: true,
+  },
+  {
+    name: "Support entreprise",
+    price: 15,
+    note: "/mois",
+    features: ["Support 24/7 dédié", "SLA garanti 4h", "Gestionnaire de compte", "Maintenance préventive", "Rapports mensuels", "Formation incluse"],
+    popular: false,
+  },
+];
+
+const features = [
+  {
+    icon: Clock,
+    title: "Disponibilité 24/7",
+    description: "Notre équipe de surveillance technique est disponible jour et nuit pour assurer la continuité de vos services.",
+  },
+  {
+    icon: Wrench,
+    title: "Techniciens locaux",
+    description: "Une équipe de techniciens qualifiés basée à Ste-Clotilde, prête à intervenir rapidement chez vous.",
+  },
+  {
+    icon: Shield,
+    title: "Maintenance préventive",
+    description: "Nous surveillons proactivement notre réseau pour prévenir les problèmes avant qu'ils ne surviennent.",
+  },
+  {
+    icon: Headphones,
+    title: "Support courtois",
+    description: "Un service client chaleureux et professionnel, à l'image de notre communauté locale.",
+  },
+];
+
+const faqItems = [
+  {
+    question: "Comment réinitialiser mon routeur?",
+    answer: "Débranchez le routeur pendant 30 secondes, puis rebranchez-le. Attendez 2-3 minutes que les voyants se stabilisent.",
+  },
+  {
+    question: "Ma connexion est lente, que faire?",
+    answer: "Vérifiez d'abord que tous les câbles sont bien branchés. Redémarrez votre routeur. Si le problème persiste, contactez notre support.",
+  },
+  {
+    question: "Comment accéder à mon espace client?",
+    answer: "Rendez-vous sur store.targo.ca/clients et connectez-vous avec vos identifiants. Vous y trouverez vos factures et options de forfait.",
+  },
+  {
+    question: "Puis-je modifier mon forfait en ligne?",
+    answer: "Oui, connectez-vous à votre espace client pour voir les options disponibles ou contactez-nous pour une assistance personnalisée.",
+  },
+];
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <Header />
+    <main class="pt-32">
+      <!-- Hero Section -->
+      <section class="py-20 bg-gradient-to-br from-secondary via-background to-secondary">
+        <div class="container">
+          <div class="max-w-3xl mx-auto text-center">
+            <span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
+              Support technique
+            </span>
+            <h1 class="font-display text-4xl md:text-6xl font-bold mb-6">
+              Une équipe locale <span class="text-gradient-targo">à votre service</span>
+            </h1>
+            <p class="text-xl text-muted-foreground mb-8">
+              Support technique courtois, professionnel et disponible. Notre équipe basée à Ste-Clotilde
+              est là pour vous aider avec tous vos besoins en télécommunications.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button size="lg" class="gradient-targo glow-targo" as-child>
+                <a href="tel:514.448.0773">
+                  <Phone class="w-5 h-5 mr-2" />
+                  514.448.0773
+                </a>
+              </Button>
+              <Button size="lg" variant="outline" class="border-primary text-primary" as-child>
+                <a href="mailto:support@targo.ca">
+                  Envoyer un courriel
+                </a>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Contact Options -->
+      <section class="py-16 bg-primary text-primary-foreground">
+        <div class="container">
+          <div class="grid md:grid-cols-4 gap-6">
+            <Card v-for="option in supportOptions" :key="option.title" class="bg-primary-foreground/10 border-primary-foreground/20 text-primary-foreground">
+              <CardContent class="p-6 text-center">
+                <component :is="option.icon" class="w-10 h-10 mx-auto mb-4" />
+                <h3 class="font-display text-xl font-bold mb-2">{{ option.title }}</h3>
+                <p class="text-primary-foreground/80 text-sm mb-4">{{ option.description }}</p>
+                <span class="font-medium text-sm">{{ option.action }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <!-- Features -->
+      <section class="py-20">
+        <div class="container">
+          <div class="text-center max-w-2xl mx-auto mb-16">
+            <h2 class="font-display text-4xl font-bold mb-4">
+              Pourquoi notre support se démarque
+            </h2>
+            <p class="text-muted-foreground text-lg">
+              Un service régional avec l'expertise d'un grand fournisseur.
+            </p>
+          </div>
+
+          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <Card v-for="feature in features" :key="feature.title" class="text-center p-6">
+              <CardContent class="p-0">
+                <div class="w-16 h-16 mx-auto mb-4 rounded-2xl gradient-targo flex items-center justify-center">
+                  <component :is="feature.icon" class="w-8 h-8 text-primary-foreground" />
+                </div>
+                <h3 class="font-display text-xl font-bold mb-2">{{ feature.title }}</h3>
+                <p class="text-muted-foreground text-sm">{{ feature.description }}</p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <!-- Maintenance Plans -->
+      <section class="py-20 bg-secondary/50">
+        <div class="container">
+          <div class="text-center max-w-2xl mx-auto mb-16">
+            <h2 class="font-display text-4xl font-bold mb-4">
+            Options de support
+            </h2>
+            <p class="text-muted-foreground text-lg">
+              Choisissez le niveau de support qui correspond à vos besoins.
+            </p>
+          </div>
+
+          <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+            <Card
+              v-for="plan in maintenancePlans"
+              :key="plan.name"
+              :class="`relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 ${
+                plan.popular ? 'border-primary shadow-lg ring-2 ring-primary/20' : ''
+              }`"
+            >
+              <div v-if="plan.popular" class="absolute top-4 right-4 px-3 py-1 gradient-targo text-primary-foreground text-xs font-medium rounded-full">
+                Recommandé
+              </div>
+              <CardContent class="p-8">
+                <h3 class="font-display text-2xl font-bold mb-2">{{ plan.name }}</h3>
+                <div class="flex items-baseline gap-1 mb-6">
+                  <span v-if="plan.price === 0" class="font-display text-3xl font-bold text-primary">{{ plan.note }}</span>
+                  <template v-else>
+                    <span class="font-display text-5xl font-bold text-primary">${{ plan.price }}</span>
+                    <span class="text-muted-foreground">{{ plan.note }}</span>
+                  </template>
+                </div>
+                <ul class="space-y-3 mb-8">
+                  <li v-for="feature in plan.features" :key="feature" class="flex items-center gap-3">
+                    <div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+                      <Check class="w-3 h-3 text-primary" />
+                    </div>
+                    <span class="text-sm text-muted-foreground">{{ feature }}</span>
+                  </li>
+                </ul>
+                <Button
+                  :class="`w-full ${plan.popular ? 'gradient-targo' : ''}`"
+                  :variant="plan.popular ? 'default' : 'outline'"
+                >
+                  {{ plan.price === 0 ? "Inclus avec votre forfait" : "Ajouter à mon forfait" }}
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <!-- FAQ -->
+      <section class="py-20">
+        <div class="container">
+          <div class="text-center max-w-2xl mx-auto mb-16">
+            <h2 class="font-display text-4xl font-bold mb-4">
+              Questions fréquentes
+            </h2>
+            <p class="text-muted-foreground text-lg">
+              Trouvez rapidement les réponses à vos questions.
+            </p>
+          </div>
+
+          <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
+            <Card v-for="item in faqItems" :key="item.question" class="p-6">
+              <CardContent class="p-0">
+                <h3 class="font-display text-lg font-bold mb-2">{{ item.question }}</h3>
+                <p class="text-muted-foreground">{{ item.answer }}</p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <!-- CTA -->
+      <section class="py-20">
+        <div class="container">
+          <Card class="gradient-targo p-12 text-center text-primary-foreground">
+            <h2 class="font-display text-3xl md:text-4xl font-bold mb-4">
+              Besoin d'aide maintenant?
+            </h2>
+            <p class="text-xl mb-8 text-primary-foreground/90">
+              Notre équipe est prête à vous aider. Appelez-nous ou envoyez-nous un message.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button size="lg" variant="secondary" class="text-primary font-semibold" as-child>
+                <a href="tel:514.448.0773">
+                  <Phone class="w-5 h-5 mr-2" />
+                  Appeler maintenant
+                </a>
+              </Button>
+              <Button size="lg" variant="outline" class="border-primary-foreground text-primary-foreground hover:bg-primary-foreground/10" as-child>
+                <a href="mailto:support@targo.ca">
+                  <Mail class="w-5 h-5 mr-2" />
+                  Envoyer un courriel
+                </a>
+              </Button>
+            </div>
+          </Card>
+        </div>
+      </section>
+    </main>
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/Telephone.vue b/apps/website-vue/src/pages/Telephone.vue
new file mode 100644
index 0000000..88822d8
--- /dev/null
+++ b/apps/website-vue/src/pages/Telephone.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Check, Phone, PhoneCall, PhoneForwarded, Voicemail, ArrowRight, Globe, Shield } from "lucide-vue-next";
+
+const phonePlans = [{
+  name: "Ligne résidentielle",
+  price: 10,
+  originalPrice: 25,
+  comboNote: "En combo",
+  features: ["Appels illimités Canada/É.-U.", "Afficheur inclus", "Messagerie vocale par courriel", "Appel en attente", "Renvoi d'appel"],
+  popular: true
+}];
+const features = [{
+  icon: Globe,
+  title: "Appels illimités",
+  description: "Appelez partout au Canada et aux États-Unis sans frais supplémentaires."
+}, {
+  icon: PhoneCall,
+  title: "Qualité voix HD",
+  description: "Son cristallin grâce à notre technologie VoIP de dernière génération."
+}, {
+  icon: Voicemail,
+  title: "Messagerie vocale",
+  description: "Recevez vos messages vocaux par courriel ou consultez-les en ligne."
+}, {
+  icon: Shield,
+  title: "Filtrage d'appels",
+  description: "Bloquez les appels indésirables et les télévendeurs automatiquement."
+}];
+const includedFeatures = ["Afficheur", "Appel en attente", "Renvoi d'appel", "Conférence à 3", "Messagerie vocale", "Blocage d'appels", "Messages audio par courriel", "Sonnerie distinctive"];
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <Header />
+    <main class="">
+      <!-- Hero Section -->
+      <section class="pt-40 pb-20 bg-gradient-to-br from-secondary via-background to-secondary">
+        <div class="container">
+          <div class="max-w-3xl mx-auto text-center mb-16">
+            <span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">Téléphonie IP</span>
+            <h1 class="font-display text-4xl md:text-6xl font-bold mb-6">
+              Téléphonie résidentielle <span class="text-gradient-targo">tout inclus</span>
+            </h1>
+            <p class="text-xl text-muted-foreground mb-8">
+              Restez connecté avec vos proches grâce à une ligne résidentielle fiable et cristalline. La puissance de la technologie fibre au service de toutes vos conversations.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in" style="animation-delay: 0.2s; animation-fill-mode: both">
+              <Button size="lg" class="gradient-targo glow-targo">
+                S'abonner maintenant
+                <ArrowRight class="w-5 h-5 ml-2" />
+              </Button>
+              <Button size="lg" variant="outline" class="border-primary text-primary">
+                Transférer mon numéro
+              </Button>
+            </div>
+          </div>
+
+          <!-- Phone Plans Cards in Hero -->
+          <div class="flex justify-center max-w-5xl mx-auto">
+            <Card
+              v-for="(plan, index) in phonePlans"
+              :key="plan.name"
+              :class="`relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-fade-in ${plan.popular ? 'border-primary shadow-lg ring-2 ring-primary/20' : ''} w-full max-w-md`"
+              :style="{ animationDelay: `${0.3 + index * 0.15}s`, animationFillMode: 'both' }"
+            >
+              <div v-if="plan.popular" class="absolute top-4 right-4 px-3 py-1 gradient-targo text-primary-foreground text-xs font-medium rounded-full">
+                Populaire
+              </div>
+              <CardContent class="p-8">
+                <h3 class="font-display text-2xl font-bold mb-2">{{ plan.name }}</h3>
+                <div class="flex items-baseline gap-1 mb-2">
+                  <span class="font-display text-5xl font-bold text-primary">
+                    ${{ Math.floor(plan.price) }}
+                    <sup class="text-2xl">.00</sup>
+                  </span>
+                  <span class="text-muted-foreground">/mois +tx</span>
+                  <span v-if="plan.originalPrice" class="text-muted-foreground line-through text-lg ml-2">
+                    ${{ plan.originalPrice.toFixed(2) }}
+                  </span>
+                </div>
+                <p v-if="plan.comboNote" class="text-sm text-primary font-medium mb-4">{{ plan.comboNote }}</p>
+                <div class="flex items-center gap-2 mb-6 p-3 bg-primary/10 rounded-lg mt-4">
+                  <Phone class="w-5 h-5 text-primary" />
+                  <span class="font-bold text-primary">{{ plan.name }}</span>
+                </div>
+                <ul class="space-y-3 mb-8">
+                  <li v-for="feature in plan.features" :key="feature" class="flex items-center gap-3">
+                    <div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+                      <Check class="w-3 h-3 text-primary" />
+                    </div>
+                    <span class="text-sm text-muted-foreground">{{ feature }}</span>
+                  </li>
+                </ul>
+                <Button
+                  :class="`w-full ${plan.popular ? 'gradient-targo' : ''}`"
+                  :variant="plan.popular ? 'default' : 'outline'"
+                  as-child
+                >
+                  <a href="/#contact">Choisir ce forfait</a>
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <!-- Stats -->
+      <section class="py-16 bg-primary text-primary-foreground">
+        <div class="container">
+          <div class="grid md:grid-cols-3 gap-8 text-center">
+            <div>
+              <div class="flex items-center justify-center gap-2 mb-2">
+                <Phone class="w-8 h-8" />
+                <span class="font-display text-5xl font-bold">$10</span>
+              </div>
+              <p class="text-primary-foreground/80">avec combo Internet</p>
+            </div>
+            <div>
+              <div class="flex items-center justify-center gap-2 mb-2">
+                <PhoneForwarded class="w-8 h-8" />
+                <span class="font-display text-5xl font-bold">Gratuit</span>
+              </div>
+              <p class="text-primary-foreground/80">transfert de numéro</p>
+            </div>
+            <div>
+              <div class="flex items-center justify-center gap-2 mb-2">
+                <Globe class="w-8 h-8" />
+                <span class="font-display text-5xl font-bold">Illimité</span>
+              </div>
+              <p class="text-primary-foreground/80">Canada et États-Unis</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+
+      <!-- Included Features -->
+      <section class="py-20 bg-secondary/50">
+        <div class="container">
+          <div class="text-center max-w-2xl mx-auto mb-16">
+            <h2 class="font-display text-4xl font-bold mb-4">
+              Fonctionnalités incluses
+            </h2>
+            <p class="text-muted-foreground text-lg">
+              Toutes ces fonctionnalités sont incluses gratuitement avec chaque forfait.
+            </p>
+          </div>
+
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
+            <Card v-for="feature in includedFeatures" :key="feature" class="p-4">
+              <CardContent class="p-0 flex items-center gap-3">
+                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+                  <Check class="w-4 h-4 text-primary" />
+                </div>
+                <span class="font-medium">{{ feature }}</span>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <!-- Features -->
+      <section class="py-20">
+        <div class="container">
+          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <Card v-for="feature in features" :key="feature.title" class="text-center p-6">
+              <CardContent class="p-0">
+                <div class="w-16 h-16 mx-auto mb-4 rounded-2xl gradient-targo flex items-center justify-center">
+                  <component :is="feature.icon" class="w-8 h-8 text-primary-foreground" />
+                </div>
+                <h3 class="font-display text-xl font-bold mb-2">{{ feature.title }}</h3>
+                <p class="text-muted-foreground text-sm">{{ feature.description }}</p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <!-- CTA -->
+      <section class="py-20">
+        <div class="container">
+          <Card class="gradient-targo p-12 text-center text-primary-foreground">
+            <h2 class="font-display text-3xl md:text-4xl font-bold mb-4">
+              Conservez votre numéro actuel
+            </h2>
+            <p class="text-xl mb-8 text-primary-foreground/90">
+              Le transfert de votre numéro de téléphone est gratuit et s'effectue en quelques jours.
+            </p>
+            <Button size="lg" variant="secondary" class="text-primary font-semibold">
+              Transférer mon numéro
+              <ArrowRight class="w-5 h-5 ml-2" />
+            </Button>
+          </Card>
+        </div>
+      </section>
+    </main>
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/Television.vue b/apps/website-vue/src/pages/Television.vue
new file mode 100644
index 0000000..64bbe14
--- /dev/null
+++ b/apps/website-vue/src/pages/Television.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Check, Tv, Play, Pause, Rewind, MonitorPlay, ArrowRight } from "lucide-vue-next";
+
+const tvPlans = [
+  {
+    name: "Télé essentiel",
+    channels: "40+",
+    price: 20,
+    features: ["40+ chaînes populaires", "Chaînes HD incluses", "Guide TV interactif", "1 récepteur inclus"],
+    popular: false,
+  },
+  {
+    name: "Télé familial",
+    channels: "80+",
+    price: 25,
+    features: ["80+ chaînes variées", "Toutes les chaînes HD", "Enregistreur numérique", "2 récepteurs inclus", "Replay 7 jours"],
+    popular: true,
+  },
+  {
+    name: "Télé premium",
+    channels: "150+",
+    price: 45,
+    features: ["150+ chaînes premium", "Chaînes spécialisées", "Sports et cinéma inclus", "3 récepteurs inclus", "Replay 30 jours", "VOD incluse"],
+    popular: false,
+  },
+];
+
+const features = [
+  {
+    icon: MonitorPlay,
+    title: "Qualité HD/4K",
+    description: "Image cristalline sur toutes vos chaînes préférées en haute définition.",
+  },
+  {
+    icon: Pause,
+    title: "Pause & reprise",
+    description: "Mettez en pause le direct et reprenez quand vous le souhaitez.",
+  },
+  {
+    icon: Rewind,
+    title: "Replay 7/30 jours",
+    description: "Revenez en arrière et regardez les émissions que vous avez manquées.",
+  },
+  {
+    icon: Play,
+    title: "Vidéo sur demande",
+    description: "Accédez à un catalogue de films et séries à la demande.",
+  },
+];
+
+const channelCategories = [
+  { name: "Nouvelles", count: "12" },
+  { name: "Sports", count: "15" },
+  { name: "Divertissement", count: "25" },
+  { name: "Films", count: "18" },
+  { name: "Enfants", count: "10" },
+  { name: "Documentaires", count: "8" },
+];
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <Header />
+    <main class="">
+      <!-- Hero Section -->
+      <section class="pt-40 pb-20 bg-gradient-to-br from-secondary via-background to-secondary">
+        <div class="container">
+          <div class="max-w-3xl mx-auto text-center">
+            <span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
+              Télévision HD
+            </span>
+            <h1 class="font-display text-4xl md:text-6xl font-bold mb-6">
+              La télé allumée <span class="text-gradient-targo">par la fibre</span>
+            </h1>
+            <p class="text-xl text-muted-foreground mb-8">
+              Vivez une expérience télévisuelle immersive avec la fibre ultra-rapide. Le meilleur du divertissement en haute définition pour propulser vos soirées en famille.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center mb-16 animate-fade-in" style="animation-delay: 0.2s; animation-fill-mode: both">
+              <Button size="lg" class="gradient-targo glow-targo">
+                Voir les forfaits
+                <ArrowRight class="w-5 h-5 ml-2" />
+              </Button>
+              <Button size="lg" variant="outline" class="border-primary text-primary">
+                Chaînes disponibles
+              </Button>
+            </div>
+          </div>
+
+          <!-- TV Plans Cards in Hero -->
+          <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+            <Card
+              v-for="(plan, index) in tvPlans"
+              :key="plan.name"
+              :class="`relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-fade-in ${plan.popular ? 'border-primary shadow-lg ring-2 ring-primary/20' : ''}`"
+              :style="{ animationDelay: `${0.3 + index * 0.15}s`, animationFillMode: 'both' }"
+            >
+              <div v-if="plan.popular" class="absolute top-4 right-4 px-3 py-1 gradient-targo text-primary-foreground text-xs font-medium rounded-full">
+                Populaire
+              </div>
+              <CardContent class="p-8 flex flex-col h-full">
+                <h3 class="font-display text-2xl font-bold mb-2">{{ plan.name }}</h3>
+                <div class="flex items-baseline gap-1 mb-6">
+                  <span class="font-display text-5xl font-bold text-primary">
+                    ${{ Math.floor(plan.price) }}
+                    <sup class="text-2xl">.00</sup>
+                  </span>
+                  <span class="text-muted-foreground">/mois +tx</span>
+                </div>
+                <div class="flex items-center gap-2 mb-6 p-3 bg-primary/10 rounded-lg">
+                  <Tv class="w-5 h-5 text-primary" />
+                  <span class="font-bold text-primary">{{ plan.channels }} chaînes</span>
+                </div>
+                <ul class="space-y-3 mb-8 flex-grow">
+                  <li v-for="feature in plan.features" :key="feature" class="flex items-center gap-3">
+                    <div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+                      <Check class="w-3 h-3 text-primary" />
+                    </div>
+                    <span class="text-sm text-muted-foreground">{{ feature }}</span>
+                  </li>
+                </ul>
+                <div class="mt-auto">
+                  <Button
+                    :class="`w-full ${plan.popular ? 'gradient-targo' : ''}`"
+                    :variant="plan.popular ? 'default' : 'outline'"
+                    as-child
+                  >
+                    <a href="/#contact">Choisir ce forfait</a>
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <!-- Channel Categories -->
+      <section class="py-16 bg-primary text-primary-foreground">
+        <div class="container">
+          <div class="grid grid-cols-2 md:grid-cols-6 gap-6 text-center">
+            <div v-for="category in channelCategories" :key="category.name">
+              <span class="font-display text-4xl font-bold">{{ category.count }}</span>
+              <p class="text-primary-foreground/80">{{ category.name }}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+
+      <!-- Features -->
+      <section class="py-20 bg-secondary/50">
+        <div class="container">
+          <div class="text-center max-w-2xl mx-auto mb-16">
+            <h2 class="font-display text-4xl font-bold mb-4">
+              Fonctionnalités avancées
+            </h2>
+            <p class="text-muted-foreground text-lg">
+              Plus qu'une simple télévision, une expérience interactive complète.
+            </p>
+          </div>
+
+          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <Card v-for="feature in features" :key="feature.title" class="text-center p-6">
+              <CardContent class="p-0">
+                <div class="w-16 h-16 mx-auto mb-4 rounded-2xl gradient-targo flex items-center justify-center">
+                  <component :is="feature.icon" class="w-8 h-8 text-primary-foreground" />
+                </div>
+                <h3 class="font-display text-xl font-bold mb-2">{{ feature.title }}</h3>
+                <p class="text-muted-foreground text-sm">{{ feature.description }}</p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <!-- Combo offer -->
+      <section class="py-20">
+        <div class="container">
+          <Card class="gradient-targo p-12 text-center text-primary-foreground">
+            <h2 class="font-display text-3xl md:text-4xl font-bold mb-4">
+              Économisez avec nos combos
+            </h2>
+            <p class="text-xl mb-8 text-primary-foreground/90">
+              Combinez Internet + Télé + Téléphone et économisez jusqu'à 20% sur votre facture.
+            </p>
+            <Button size="lg" variant="secondary" class="text-primary font-semibold">
+              Voir les combos
+              <ArrowRight class="w-5 h-5 ml-2" />
+            </Button>
+          </Card>
+        </div>
+      </section>
+    </main>
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/admin-import/CsvSplitter.vue b/apps/website-vue/src/pages/admin-import/CsvSplitter.vue
new file mode 100644
index 0000000..be34ef6
--- /dev/null
+++ b/apps/website-vue/src/pages/admin-import/CsvSplitter.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { Loader2, Scissors } from "lucide-vue-next";
+
+const SPLIT_ROWS = 500_000;
+
+const splitting = ref(false);
+const progress = ref({ message: "", current: 0, total: 0, files: 0 });
+const fileInputRef = ref<HTMLInputElement | null>(null);
+let abortRef = false;
+
+const splitFile = async (file: File) => {
+  abortRef = false;
+  splitting.value = true;
+  progress.value = { message: "Lecture en streaming...", current: 0, total: 0, files: 0 };
+
+  const stream = file.stream();
+  const reader = stream.getReader();
+  const decoder = new TextDecoder("utf-8", { fatal: false });
+
+  let header = "";
+  let leftover = "";
+  let currentLines: string[] = [];
+  let totalRows = 0;
+  let fileCount = 0;
+  const baseName = file.name.replace(/\.[^.]+$/, "");
+
+  const flushToFile = (lines: string[]) => {
+    fileCount++;
+    const content = [header, ...lines].join("\n");
+    const blob = new Blob([content], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${baseName}_part${fileCount}.csv`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  try {
+    while (true) {
+      if (abortRef) break;
+      const { done, value } = await reader.read();
+      const chunk = decoder.decode(value, { stream: !done });
+      const text = leftover + chunk;
+      const lines = text.split(/\r?\n/);
+      leftover = done ? "" : (lines.pop() || "");
+
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed) continue;
+
+        if (!header) {
+          // Remove BOM
+          header = trimmed.charCodeAt(0) === 0xfeff ? trimmed.slice(1) : trimmed;
+          continue;
+        }
+
+        currentLines.push(trimmed);
+        totalRows++;
+
+        if (currentLines.length >= SPLIT_ROWS) {
+          flushToFile(currentLines);
+          currentLines = [];
+          progress.value = {
+            message: `Fichier ${fileCount} créé...`,
+            current: totalRows,
+            total: Math.max(totalRows, Math.round(file.size / 300)),
+            files: fileCount,
+          };
+          // Small delay to let browser process the download
+          await new Promise((r) => setTimeout(r, 300));
+        }
+      }
+
+      if (done) break;
+    }
+
+    // Flush remaining
+    if (currentLines.length > 0 && !abortRef) {
+      flushToFile(currentLines);
+    }
+
+    progress.value = {
+      message: `✅ ${fileCount} fichiers créés (${totalRows.toLocaleString("fr-CA")} lignes total)`,
+      current: totalRows,
+      total: totalRows,
+      files: fileCount,
+    };
+  } catch (err: any) {
+    progress.value = {
+      message: `❌ Erreur: ${err.message}`,
+      current: totalRows,
+      total: totalRows,
+      files: fileCount,
+    };
+  }
+
+  splitting.value = false;
+};
+
+const pct = computed(() => (progress.value.total > 0 ? Math.round((progress.value.current / progress.value.total) * 100) : 0));
+
+const onFileChange = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (file) splitFile(file);
+  target.value = "";
+};
+
+const cancelSplit = () => {
+  abortRef = true;
+};
+
+const splitLabel = (SPLIT_ROWS / 1000).toFixed(0);
+</script>
+
+<template>
+  <div class="bg-card border border-border rounded-2xl p-6 space-y-4">
+    <div class="flex items-start gap-4">
+      <div class="w-12 h-12 rounded-xl bg-accent/50 flex items-center justify-center flex-shrink-0">
+        <Scissors class="w-6 h-6 text-muted-foreground" />
+      </div>
+      <div>
+        <h3 class="font-semibold text-lg">Découper un CSV</h3>
+        <p class="text-sm text-muted-foreground">
+          Sépare un gros fichier CSV en plusieurs fichiers de {{ splitLabel }}k lignes
+          pour éviter les timeouts lors de l'import. Utilise le streaming (pas de limite de taille).
+        </p>
+      </div>
+    </div>
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept=".csv,.tsv,.txt"
+      class="hidden"
+      @change="onFileChange"
+    />
+
+    <Button v-if="!splitting && !progress.message" @click="fileInputRef?.click()" class="w-full" variant="outline" size="lg">
+      <Scissors class="w-5 h-5 mr-2" />
+      Sélectionner un CSV à découper
+    </Button>
+
+    <div v-if="splitting" class="space-y-3">
+      <div class="flex items-center gap-2 text-sm text-muted-foreground">
+        <Loader2 class="w-4 h-4 animate-spin" />
+        {{ progress.message }}
+      </div>
+      <Progress :value="pct" class="h-3" />
+      <div class="flex justify-between text-xs text-muted-foreground">
+        <span>{{ progress.current.toLocaleString("fr-CA") }} lignes lues</span>
+        <span>{{ progress.files }} fichiers créés</span>
+      </div>
+      <Button variant="destructive" size="sm" @click="cancelSplit">
+        Annuler
+      </Button>
+    </div>
+
+    <div v-if="!splitting && progress.message" class="space-y-3">
+      <p class="text-sm text-primary font-medium">{{ progress.message }}</p>
+      <p class="text-xs text-muted-foreground">
+        Importez ensuite chaque partie via les cartes ci-dessus.
+      </p>
+      <Button variant="outline" size="sm" @click="progress = { message: '', current: 0, total: 0, files: 0 }">
+        Découper un autre fichier
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/admin-import/ImportCard.vue b/apps/website-vue/src/pages/admin-import/ImportCard.vue
new file mode 100644
index 0000000..1052fe2
--- /dev/null
+++ b/apps/website-vue/src/pages/admin-import/ImportCard.vue
@@ -0,0 +1,814 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick } from "vue";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Progress } from "@/components/ui/progress";
+import { Upload, FileText, Database, CheckCircle2, AlertCircle, Loader2, SkipForward, Globe, Terminal, RefreshCw } from "lucide-vue-next";
+import { supabase } from "@/integrations/supabase/client";
+// TODO(port): dep `fflate` (unzipSync) is not installed in website-vue. ZIP URL imports
+// below throw a clear error at runtime until the dependency is added. CSV/TSV imports and
+// the "Mode autonome" server-side path are unaffected.
+// import { unzipSync } from "fflate";
+import {
+  CHUNK_SIZE, UI_UPDATE_INTERVAL, CHECKPOINT_INTERVAL, GC_PAUSE_INTERVAL,
+  type ImportState, initialState, type Checkpoint,
+  saveCheckpoint, loadCheckpoint, clearCheckpoint, normalizeHeader, FIBER_HEADER_MAP, parseLine,
+} from "./helpers";
+
+const props = defineProps<{
+  type: "addresses" | "fiber";
+  label: string;
+  description: string;
+}>();
+
+const state = ref<ImportState>({ ...initialState });
+const urlInput = ref("https://diffusion.mern.gouv.qc.ca/diffusion/RGQ/Vectoriel/Theme/Local/RQA/CSV/RQA_CSV.zip");
+const urlMode = ref(false);
+const skipRowsInput = ref("");
+const importLogs = ref<string[]>([]);
+const showLogs = ref(false);
+const pendingJob = ref<any>(null);
+let abortRef = false;
+const fileInputRef = ref<HTMLInputElement | null>(null);
+let startTimeRef = 0;
+const logEndRef = ref<HTMLDivElement | null>(null);
+let autoResumeTriggered = false;
+
+let pendingFileRef: File | null = null;
+
+// Check for existing checkpoint on mount
+const checkpoint = ref<Checkpoint | null>(loadCheckpoint(props.type));
+
+const addLog = (msg: string) => {
+  importLogs.value = [...importLogs.value, msg];
+  setTimeout(() => logEndRef.value?.scrollIntoView({ behavior: "smooth" }), 50);
+};
+
+const reset = (keepCheckpoint = false) => {
+  abortRef = true;
+  if (!keepCheckpoint) clearCheckpoint(props.type);
+  pendingFileRef = null;
+  pendingJob.value = null;
+  urlMode.value = false;
+  importLogs.value = [];
+  state.value = { ...initialState };
+};
+
+// Helper to update job in DB
+const updateJob = async (jobId: string, updates: Record<string, any>) => {
+  try {
+    await supabase.from("import_jobs").update({ ...updates, updated_at: new Date().toISOString() }).eq("id", jobId);
+  } catch {}
+};
+
+// Check for incomplete DB jobs on mount (URL imports only)
+onMounted(() => {
+  if (autoResumeTriggered) return;
+  autoResumeTriggered = true;
+
+  const checkPendingJobs = async () => {
+    const { data: session } = await supabase.auth.getSession();
+    if (!session?.session?.user) return;
+
+    const { data: jobs } = await supabase
+      .from("import_jobs")
+      .select("*")
+      .eq("type", props.type)
+      .in("status", ["running", "paused"])
+      .order("updated_at", { ascending: false })
+      .limit(1);
+
+    if (jobs && jobs.length > 0) {
+      const job = jobs[0];
+      pendingJob.value = job;
+      // Restore logs from DB
+      if (job.logs && job.logs.length > 0) {
+        importLogs.value = job.logs;
+        showLogs.value = true;
+      }
+    }
+  };
+  checkPendingJobs();
+});
+
+// URL-based import: loops calling edge function with DB checkpointing
+const processUrl = async (url: string, resumeJobId?: string, resumeSkip?: number, resumeInserted?: number) => {
+  abortRef = false;
+  startTimeRef = Date.now();
+  if (!resumeJobId) {
+    importLogs.value = [];
+  }
+  showLogs.value = true;
+  pendingJob.value = null;
+  addLog(`🚀 Démarrage import ${props.type} depuis URL${resumeSkip ? ` (reprise à ${resumeSkip} lignes)` : ""}...`);
+
+  // Get user id
+  const { data: sessionData } = await supabase.auth.getSession();
+  const userId = sessionData?.session?.user?.id;
+  if (!userId) {
+    addLog("❌ Non authentifié");
+    state.value = { ...state.value, status: "error", errorMessages: ["Non authentifié"] };
+    return;
+  }
+
+  // Create or reuse DB job
+  let jobId = resumeJobId;
+  if (!jobId) {
+    const { data: newJob, error: jobErr } = await supabase
+      .from("import_jobs")
+      .insert({ type: props.type, source_url: url, status: "running", user_id: userId })
+      .select("id")
+      .single();
+    if (jobErr || !newJob) {
+      addLog(`❌ Erreur création job: ${jobErr?.message}`);
+      state.value = { ...state.value, status: "error", errorMessages: [jobErr?.message || "Erreur"] };
+      return;
+    }
+    jobId = newJob.id;
+  } else {
+    await updateJob(jobId, { status: "running" });
+  }
+
+  state.value = {
+    ...initialState,
+    status: "uploading",
+    fileName: url.split("/").pop() || "URL import",
+    totalRows: 0,
+    jobId,
+    processedRows: resumeSkip || 0,
+    insertedRows: resumeInserted || 0,
+  };
+
+  const isZip = url.toLowerCase().includes(".zip");
+  let csvText: string | null = null;
+
+  if (isZip) {
+    // Download and decompress ZIP in the browser
+    addLog(`📥 Téléchargement du fichier ZIP...`);
+    try {
+      const resp = await fetch(url);
+      if (!resp.ok) {
+        addLog(`❌ Erreur téléchargement: ${resp.status} ${resp.statusText}`);
+        await updateJob(jobId!, { status: "error", error_messages: [`Erreur: ${resp.status}`] });
+        state.value = { ...state.value, status: "error", errorMessages: [`Erreur: ${resp.status}`] };
+        return;
+      }
+      const zipData = new Uint8Array(await resp.arrayBuffer());
+      addLog(`📦 ZIP téléchargé (${(zipData.length / 1024 / 1024).toFixed(1)} MB), décompression...`);
+
+      // TODO(port): fflate.unzipSync is unavailable. Restore the import above and replace this throw.
+      throw new Error("Décompression ZIP indisponible (dépendance fflate manquante).");
+      // const files = unzipSync(zipData);
+      // const csvEntry = Object.entries(files).find(([name]) =>
+      //   name.toLowerCase().endsWith(".csv") || name.toLowerCase().endsWith(".tsv") || name.toLowerCase().endsWith(".txt")
+      // );
+      // if (!csvEntry) {
+      //   addLog(`❌ Aucun fichier CSV trouvé dans le ZIP`);
+      //   await updateJob(jobId!, { status: "error", error_messages: ["Aucun CSV dans le ZIP"] });
+      //   state.value = { ...state.value, status: "error", errorMessages: ["Aucun CSV dans le ZIP"] };
+      //   return;
+      // }
+      // addLog(`📄 Fichier extrait: ${csvEntry[0]} (${(csvEntry[1].length / 1024 / 1024).toFixed(1)} MB)`);
+      // csvText = new TextDecoder("utf-8").decode(csvEntry[1]);
+    } catch (err: any) {
+      addLog(`💥 Erreur décompression: ${err.message}`);
+      await updateJob(jobId!, { status: "error", error_messages: [err.message] });
+      state.value = { ...state.value, status: "error", errorMessages: [err.message] };
+      return;
+    }
+  }
+
+  // Now send CSV data in chunks to edge function
+  let skipRows = resumeSkip || 0;
+  let totalInserted = resumeInserted || 0;
+  let totalErrors = 0;
+  const allErrorMessages: string[] = [];
+  const CSV_CHUNK_SIZE = 5 * 1024 * 1024; // 5 MB
+  let chunkCount = 0;
+  const DB_SAVE_INTERVAL = 3; // save to DB every N chunks
+
+  while (!abortRef) {
+    try {
+      // Refresh session before every chunk to prevent expiry
+      await supabase.auth.getSession();
+
+      let body: any;
+      if (csvText) {
+        const chunk = csvText.slice(0, CSV_CHUNK_SIZE);
+        body = { csv_text: chunk, type: props.type, skip_rows: skipRows };
+      } else {
+        body = { url, type: props.type, skip_rows: skipRows };
+      }
+
+      const { data, error } = await supabase.functions.invoke("import-csv-url", { body });
+
+      if (error) {
+        addLog(`❌ Erreur: ${error.message}`);
+        await updateJob(jobId!, { status: "error", error_messages: [error.message], skip_rows: skipRows, total_inserted: totalInserted });
+        state.value = { ...state.value, status: "error", errorMessages: [error.message] };
+        return;
+      }
+
+      if (data) {
+        if (data.logs && Array.isArray(data.logs)) {
+          data.logs.forEach((l: string) => addLog(l));
+        }
+
+        totalInserted += data.inserted || 0;
+        totalErrors += data.errors || 0;
+        skipRows = data.next_skip || skipRows;
+        if (data.errorMessages) {
+          allErrorMessages.push(...data.errorMessages);
+        }
+        chunkCount++;
+
+        addLog(`📊 Chunk ${chunkCount} terminé: +${data.processed || 0} lignes, total inséré: ${totalInserted}, erreurs: ${totalErrors}`);
+
+        state.value = {
+          ...state.value,
+          processedRows: skipRows,
+          insertedRows: totalInserted,
+          errorRows: totalErrors,
+          totalRows: data.done ? skipRows : Math.max(state.value.totalRows, skipRows + 50000),
+          errorMessages: [...new Set(allErrorMessages)].slice(0, 5),
+        };
+
+        // Save checkpoint to DB periodically
+        if (chunkCount % DB_SAVE_INTERVAL === 0) {
+          const recentLogs = importLogs.value.slice(-200); // keep last 200 log lines
+          await updateJob(jobId!, {
+            skip_rows: skipRows,
+            total_inserted: totalInserted,
+            total_errors: totalErrors,
+            error_messages: [...new Set(allErrorMessages)].slice(0, 20),
+            logs: recentLogs,
+          });
+        }
+
+        if (data.done) {
+          addLog(`✅ Import terminé! Total: ${skipRows} lignes, ${totalInserted} insérées, ${totalErrors} erreurs`);
+          await updateJob(jobId!, { status: "done", skip_rows: skipRows, total_inserted: totalInserted, total_errors: totalErrors });
+          state.value = {
+            ...state.value,
+            status: "done",
+            totalRows: skipRows,
+            processedRows: skipRows,
+          };
+          return;
+        }
+
+        // For CSV text mode, trim processed text
+        if (csvText) {
+          const lines = csvText.split("\n");
+          const rowsToRemove = data.processed || 0;
+          const linesToRemove = skipRows === rowsToRemove ? rowsToRemove + 1 : rowsToRemove;
+          csvText = lines.slice(linesToRemove).join("\n");
+          skipRows = 0;
+          if (!csvText.trim()) {
+            addLog(`✅ Import terminé! Total: ${totalInserted} insérées, ${totalErrors} erreurs`);
+            await updateJob(jobId!, { status: "done", total_inserted: totalInserted, total_errors: totalErrors });
+            state.value = { ...state.value, status: "done" };
+            return;
+          }
+        }
+
+        await new Promise((r) => setTimeout(r, 500));
+      }
+    } catch (err: any) {
+      addLog(`💥 Exception: ${err.message}`);
+      // Save progress before dying so we can resume
+      await updateJob(jobId!, { status: "paused", skip_rows: skipRows, total_inserted: totalInserted, total_errors: totalErrors, error_messages: [err.message] });
+      state.value = { ...state.value, status: "error", errorMessages: [`${err.message} — L'import peut être repris automatiquement.`] };
+      return;
+    }
+  }
+
+  // User cancelled — save progress
+  if (abortRef && jobId) {
+    await updateJob(jobId, { status: "paused", skip_rows: skipRows, total_inserted: totalInserted, total_errors: totalErrors });
+  }
+};
+
+const processFile = async (file: File, skipRows = 0) => {
+  abortRef = false;
+  startTimeRef = Date.now();
+  const alreadyInserted = skipRows > 0 ? (loadCheckpoint(props.type)?.insertedRows || 0) : 0;
+  state.value = {
+    ...initialState,
+    status: "parsing",
+    fileName: file.name,
+    resumeFrom: skipRows,
+  };
+
+  // Estimate total rows from file size (rough: ~300 bytes per row for addresses CSV)
+  const estimatedRows = Math.round(file.size / 300);
+  state.value = { ...state.value, totalRows: estimatedRows, status: "uploading" };
+
+  const stream = file.stream();
+  const reader = stream.getReader();
+  const decoder = new TextDecoder("utf-8", { fatal: false });
+
+  let headers: string[] = [];
+  let delimiter = ",";
+  let leftover = "";
+  let isFirstChunk = true;
+  let processedRows = 0;
+  let insertedRows = alreadyInserted;
+  let errorRows = 0;
+  const errorMessages: string[] = [];
+  let pendingRows: Record<string, string>[] = [];
+  let totalRowsRead = 0; // total rows read from file (including skipped)
+
+  const flushBatch = async (rows: Record<string, string>[]) => {
+    if (rows.length === 0 || abortRef) return;
+    try {
+      // Refresh session token before each batch to prevent expiry during long imports
+      await supabase.auth.getSession();
+      const { data, error } = await supabase.functions.invoke("import-csv", {
+        body: { type: props.type, rows },
+      });
+      if (error) {
+        errorRows += rows.length;
+        if (errorMessages.length < 5) errorMessages.push(error.message);
+      } else if (data) {
+        insertedRows += data.inserted || 0;
+        errorRows += data.errors || 0;
+        if (data.errorMessages) {
+          errorMessages.push(...data.errorMessages.slice(0, 3));
+        }
+      }
+    } catch (err: any) {
+      errorRows += rows.length;
+      if (errorMessages.length < 5) errorMessages.push(err.message);
+    }
+    // Throttle UI updates to reduce memory pressure from re-renders
+    if (processedRows % UI_UPDATE_INTERVAL < CHUNK_SIZE) {
+      state.value = {
+        ...state.value,
+        processedRows,
+        insertedRows,
+        errorRows,
+        totalRows: Math.max(state.value.totalRows, processedRows + skipRows),
+        errorMessages: [...new Set(errorMessages)].slice(0, 5),
+      };
+    }
+    // Save checkpoint less frequently
+    if (processedRows % CHECKPOINT_INTERVAL < CHUNK_SIZE) {
+      saveCheckpoint(props.type, {
+        fileName: file.name,
+        fileSize: file.size,
+        processedRows: processedRows + skipRows,
+        insertedRows,
+        timestamp: Date.now(),
+      });
+    }
+  };
+
+  try {
+    while (true) {
+      if (abortRef) break;
+      const { done, value } = await reader.read();
+      const chunk = decoder.decode(value, { stream: !done });
+      const text = leftover + chunk;
+      const lines = text.split(/\r?\n/);
+
+      // Keep last incomplete line for next iteration
+      leftover = done ? "" : (lines.pop() || "");
+
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed) continue;
+
+        if (isFirstChunk && headers.length === 0) {
+          // Remove BOM
+          const cleanLine = trimmed.charCodeAt(0) === 0xfeff ? trimmed.slice(1) : trimmed;
+          // Detect delimiter
+          const tabCount = (cleanLine.match(/\t/g) || []).length;
+          const semiCount = (cleanLine.match(/;/g) || []).length;
+          const commaCount = (cleanLine.match(/,/g) || []).length;
+          delimiter = tabCount >= semiCount && tabCount >= commaCount ? "\t"
+                     : semiCount >= commaCount ? ";" : ",";
+          const candidateHeaders = parseLine(cleanLine, delimiter);
+
+          // Skip title lines that have too few columns (e.g. "adresses postales")
+          if (candidateHeaders.length < 3) {
+            console.log(`[Import] Skipping title line: "${cleanLine}"`);
+            continue;
+          }
+
+          headers = candidateHeaders;
+          console.log(`[Import] Stream - Delimiter: "${delimiter === "\t" ? "TAB" : delimiter}", Headers (${headers.length}):`, headers.join(" | "));
+
+          // For fiber imports, build a mapping from CSV header index to normalized DB column
+          if (props.type === "fiber") {
+            const headerMapping = headers.map((h) => {
+              const norm = normalizeHeader(h);
+              const mapped = FIBER_HEADER_MAP[norm];
+              return mapped ? `${h} → ${mapped}` : `${h} → ❌ UNMAPPED (${norm})`;
+            });
+            console.log(`[Import] Fiber header mapping:`, headerMapping.join(" | "));
+          }
+
+          isFirstChunk = false;
+          continue;
+        }
+
+        const values = parseLine(trimmed, delimiter);
+        const row: Record<string, string> = {};
+        totalRowsRead++;
+
+        // Skip rows that were already processed in a previous run
+        if (totalRowsRead <= skipRows) {
+          if (totalRowsRead % 100000 === 0) {
+            state.value = {
+              ...state.value,
+              status: "uploading",
+              processedRows: 0,
+              totalRows: Math.max(state.value.totalRows, estimatedRows),
+              errorMessages: [`⏩ Saut de ${totalRowsRead.toLocaleString("fr-CA")} lignes déjà importées...`],
+            };
+          }
+          continue;
+        }
+
+        if (props.type === "fiber") {
+          // Use normalized mapping for fiber
+          headers.forEach((h, idx) => {
+            const norm = normalizeHeader(h);
+            const dbCol = FIBER_HEADER_MAP[norm];
+            if (dbCol && dbCol !== "_skip") {
+              row[dbCol] = values[idx] || "";
+            }
+          });
+        } else {
+          headers.forEach((h, idx) => {
+            row[h] = values[idx] || "";
+          });
+        }
+        pendingRows.push(row);
+        processedRows++;
+
+        if (pendingRows.length >= CHUNK_SIZE) {
+          await flushBatch(pendingRows);
+          pendingRows = [];
+          // Periodically pause to let the browser GC reclaim memory
+          if (processedRows % GC_PAUSE_INTERVAL < CHUNK_SIZE) {
+            await new Promise((r) => setTimeout(r, 50));
+          }
+        }
+      }
+
+      if (done) break;
+    }
+
+    // Flush remaining rows
+    if (pendingRows.length > 0) {
+      await flushBatch(pendingRows);
+    }
+  } catch (err: any) {
+    console.error("[Import] Stream error:", err);
+    state.value = {
+      ...state.value,
+      status: "error",
+      errorMessages: [`Erreur de lecture: ${err.message}`],
+    };
+    return;
+  }
+
+  if (!abortRef) {
+    clearCheckpoint(props.type); // Import completed successfully
+  }
+  state.value = {
+    ...state.value,
+    status: abortRef ? "idle" : "done",
+    totalRows: processedRows + skipRows,
+    processedRows,
+    insertedRows,
+    errorRows,
+  };
+};
+
+const progress = computed(() =>
+  state.value.totalRows > 0
+    ? Math.round((state.value.processedRows / state.value.totalRows) * 100)
+    : 0,
+);
+
+const formatNum = (n: number) => n.toLocaleString("fr-CA");
+
+const getStats = () => {
+  if (state.value.processedRows === 0 || state.value.status !== "uploading") return { eta: "", speed: "" };
+  const elapsed = (Date.now() - startTimeRef) / 1000;
+  const rate = state.value.processedRows / elapsed;
+  const remaining = state.value.totalRows - state.value.processedRows;
+  const etaSec = remaining / rate;
+  let eta = "";
+  if (etaSec < 60) eta = `~${Math.round(etaSec)}s restant`;
+  else if (etaSec < 3600) eta = `~${Math.round(etaSec / 60)} min restant`;
+  else {
+    const h = Math.floor(etaSec / 3600);
+    const m = Math.round((etaSec % 3600) / 60);
+    eta = `~${h}h${m.toString().padStart(2, "0")} restant`;
+  }
+  const speed = rate >= 1000
+    ? `${(rate / 1000).toFixed(1)}k lignes/s`
+    : `${Math.round(rate)} lignes/s`;
+  return { eta, speed };
+};
+
+const onFileChange = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (file) {
+    const cp = loadCheckpoint(props.type);
+    if (cp && cp.fileName === file.name && cp.fileSize === file.size) {
+      // Same file — offer to resume
+      pendingFileRef = file;
+      state.value = {
+        ...state.value,
+        status: "resume_prompt",
+        fileName: file.name,
+        resumeFrom: cp.processedRows,
+        insertedRows: cp.insertedRows,
+      };
+    } else {
+      clearCheckpoint(props.type);
+      processFile(file, 0);
+    }
+  }
+  target.value = "";
+};
+
+const startAutonomousJob = async () => {
+  if (!urlInput.value.trim()) return;
+  const { data: sessionData } = await supabase.auth.getSession();
+  const userId = sessionData?.session?.user?.id;
+  if (!userId) { addLog("❌ Non authentifié"); return; }
+  const skipVal = parseInt(skipRowsInput.value || "0") || 0;
+  const { data: newJob, error: jobErr } = await supabase
+    .from("import_jobs")
+    .insert({ type: props.type, source_url: urlInput.value.trim(), status: "queued", user_id: userId, skip_rows: skipVal, total_inserted: skipVal })
+    .select("id")
+    .single();
+  if (jobErr || !newJob) {
+    addLog(`❌ Erreur: ${jobErr?.message}`);
+    return;
+  }
+  addLog(`🤖 Job autonome créé (${newJob.id.slice(0, 8)}…). Skip=${skipVal.toLocaleString()} lignes. Le serveur traitera le fichier automatiquement toutes les 2 minutes.`);
+  showLogs.value = true;
+  pendingJob.value = { ...newJob, type: props.type, source_url: urlInput.value.trim(), status: "queued", skip_rows: skipVal, total_inserted: skipVal };
+};
+
+const ignorePendingJob = async () => {
+  await supabase.from("import_jobs").update({ status: "done" }).eq("id", pendingJob.value.id);
+  pendingJob.value = null;
+};
+
+const dismissCheckpoint = () => {
+  clearCheckpoint(props.type);
+  checkpoint.value = null;
+  state.value = { ...initialState };
+};
+
+// keep nextTick imported/used consistently (no-op guard)
+void nextTick;
+</script>
+
+<template>
+  <div class="bg-card border border-border rounded-2xl p-6 space-y-4">
+    <div class="flex items-start gap-4">
+      <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
+        <Database v-if="type === 'addresses'" class="w-6 h-6 text-primary" />
+        <FileText v-else class="w-6 h-6 text-primary" />
+      </div>
+      <div>
+        <h3 class="font-semibold text-lg">{{ label }}</h3>
+        <p class="text-sm text-muted-foreground">{{ description }}</p>
+      </div>
+    </div>
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept=".csv,.tsv,.txt"
+      class="hidden"
+      @change="onFileChange"
+    />
+
+    <template v-if="state.status === 'idle'">
+      <!-- DB-based resume for URL imports -->
+      <div v-if="pendingJob" class="bg-accent/50 rounded-lg p-3 text-sm space-y-2 border border-primary/20">
+        <div class="flex items-center gap-2">
+          <RefreshCw class="w-4 h-4 text-primary" />
+          <span class="font-medium">Import URL interrompu détecté</span>
+        </div>
+        <p class="text-muted-foreground text-xs">
+          {{ pendingJob.source_url?.split("/").pop() }} — {{ (pendingJob.skip_rows || 0).toLocaleString("fr-CA") }} lignes traitées
+          ({{ (pendingJob.total_inserted || 0).toLocaleString("fr-CA") }} insérées).
+          Statut: <span class="font-medium">{{ pendingJob.status }}</span>.
+          Dernière mise à jour: {{ new Date(pendingJob.updated_at).toLocaleString("fr-CA") }}.
+        </p>
+        <div v-if="pendingJob.error_messages && pendingJob.error_messages.length > 0" class="bg-destructive/10 rounded p-2 text-xs text-destructive">
+          <span class="font-medium">Raison de l'interruption:</span>
+          <ul class="list-disc ml-4 mt-1">
+            <li v-for="(msg, i) in pendingJob.error_messages" :key="i">{{ msg }}</li>
+          </ul>
+        </div>
+        <div v-if="pendingJob.skip_rows === 0 && (!pendingJob.error_messages || pendingJob.error_messages.length === 0)" class="bg-yellow-500/10 rounded p-2 text-xs text-yellow-700">
+          <span class="font-medium">Cause probable:</span> Le navigateur a manqué de mémoire lors du téléchargement ou de la décompression du ZIP (2.7 Go).
+          Essayez depuis un ordinateur de bureau avec plus de RAM, ou utilisez un fichier CSV déjà décompressé.
+        </div>
+        <details v-if="pendingJob.logs && pendingJob.logs.length > 0" class="text-xs">
+          <summary class="cursor-pointer text-muted-foreground hover:text-foreground">Voir les {{ pendingJob.logs.length }} derniers logs</summary>
+          <div class="mt-1 max-h-32 overflow-y-auto bg-background/50 rounded p-2 font-mono text-[10px] space-y-0.5">
+            <div v-for="(log, i) in pendingJob.logs" :key="i">{{ log }}</div>
+          </div>
+        </details>
+        <div class="flex gap-2">
+          <Button size="sm" @click="processUrl(pendingJob.source_url, pendingJob.id, pendingJob.skip_rows || 0, pendingJob.total_inserted || 0)">
+            <RefreshCw class="w-3 h-3 mr-1" />
+            Reprendre l'import
+          </Button>
+          <Button variant="ghost" size="sm" @click="ignorePendingJob">
+            Ignorer
+          </Button>
+        </div>
+      </div>
+      <div v-if="checkpoint" class="bg-accent/50 rounded-lg p-3 text-sm space-y-2">
+        <div class="flex items-center gap-2">
+          <SkipForward class="w-4 h-4 text-primary" />
+          <span class="font-medium">Import fichier interrompu détecté</span>
+        </div>
+        <p class="text-muted-foreground text-xs">
+          {{ checkpoint.fileName }} — {{ checkpoint.processedRows.toLocaleString("fr-CA") }} lignes déjà traitées
+          ({{ checkpoint.insertedRows.toLocaleString("fr-CA") }} insérées).
+          Sélectionnez le même fichier pour reprendre.
+        </p>
+        <Button variant="ghost" size="sm" @click="dismissCheckpoint">
+          Ignorer et recommencer
+        </Button>
+      </div>
+      <div class="flex gap-2">
+        <Button
+          @click="fileInputRef?.click()"
+          class="flex-1"
+          variant="outline"
+          size="lg"
+        >
+          <Upload class="w-5 h-5 mr-2" />
+          Fichier CSV
+        </Button>
+        <Button
+          @click="urlMode = !urlMode"
+          class="flex-1"
+          :variant="urlMode ? 'default' : 'outline'"
+          size="lg"
+        >
+          <Globe class="w-5 h-5 mr-2" />
+          Lien URL
+        </Button>
+      </div>
+      <div v-if="urlMode" class="space-y-2">
+        <Input
+          placeholder="https://exemple.com/fichier.csv ou .zip"
+          v-model="urlInput"
+        />
+        <p class="text-xs text-muted-foreground">
+          Supporte les fichiers CSV et ZIP. Le mode autonome décompresse et traite le fichier entièrement côté serveur — idéal depuis un téléphone.
+        </p>
+        <div class="space-y-2">
+          <div class="flex gap-2 items-center">
+            <label class="text-xs text-muted-foreground whitespace-nowrap">Lignes à sauter :</label>
+            <Input
+              type="number"
+              :min="0"
+              placeholder="0"
+              v-model="skipRowsInput"
+              class="w-32"
+            />
+            <span class="text-xs text-muted-foreground">({{ Number(skipRowsInput || 0).toLocaleString() }})</span>
+          </div>
+          <div class="flex gap-2">
+            <Button
+              @click="() => { if (urlInput.trim()) processUrl(urlInput.trim()); }"
+              :disabled="!urlInput.trim()"
+              class="flex-1"
+              variant="outline"
+            >
+              <Globe class="w-4 h-4 mr-2" />
+              Import navigateur
+            </Button>
+            <Button
+              @click="startAutonomousJob"
+              :disabled="!urlInput.trim()"
+              class="flex-1"
+            >
+              <Database class="w-4 h-4 mr-2" />
+              🤖 Mode autonome
+            </Button>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div v-if="state.status === 'resume_prompt'" class="space-y-3">
+      <div class="flex items-center gap-2 text-primary">
+        <SkipForward class="w-5 h-5" />
+        <span class="font-medium">Reprendre l'import ?</span>
+      </div>
+      <p class="text-sm text-muted-foreground">
+        {{ state.fileName }} — {{ formatNum(state.resumeFrom) }} lignes déjà importées
+        ({{ formatNum(state.insertedRows) }} insérées). Reprendre à partir de la ligne {{ formatNum(state.resumeFrom + 1) }} ?
+      </p>
+      <div class="flex gap-2">
+        <Button @click="() => { if (pendingFileRef) processFile(pendingFileRef, state.resumeFrom); }">
+          <SkipForward class="w-4 h-4 mr-2" />
+          Reprendre
+        </Button>
+        <Button variant="outline" @click="() => { clearCheckpoint(type); if (pendingFileRef) processFile(pendingFileRef, 0); }">
+          Recommencer à zéro
+        </Button>
+        <Button variant="ghost" @click="reset()">
+          Annuler
+        </Button>
+      </div>
+    </div>
+
+    <div v-if="state.status === 'parsing' || state.status === 'uploading'" class="space-y-3">
+      <div class="flex items-center justify-between text-sm">
+        <span class="flex items-center gap-2">
+          <Loader2 class="w-4 h-4 animate-spin" />
+          {{ state.status === 'parsing' ? 'Lecture du fichier...' :
+             state.resumeFrom > 0 ? `Import en cours (reprise après ${formatNum(state.resumeFrom)} lignes)...` : 'Import en cours...' }}
+        </span>
+        <span class="font-mono text-muted-foreground">
+          {{ formatNum(state.processedRows) }} / {{ formatNum(state.totalRows) }}
+        </span>
+      </div>
+      <Progress :value="progress" class="h-3" />
+      <div class="flex justify-between text-xs text-muted-foreground">
+        <span>{{ progress }}% — {{ getStats().eta }}</span>
+        <span>
+          ⚡ {{ getStats().speed }} · ✓ {{ formatNum(state.insertedRows) }} insérées · ✗ {{ formatNum(state.errorRows) }} erreurs
+        </span>
+      </div>
+      <Button variant="destructive" size="sm" @click="reset(true)">
+        Annuler (garder checkpoint)
+      </Button>
+    </div>
+
+    <div v-if="state.status === 'done'" class="space-y-3">
+      <div class="flex items-center gap-2 text-primary">
+        <CheckCircle2 class="w-5 h-5" />
+        <span class="font-medium">Import terminé!</span>
+      </div>
+      <div class="text-sm space-y-1">
+        <p>Fichier : {{ state.fileName }}</p>
+        <p>Total : {{ formatNum(state.totalRows) }} lignes</p>
+        <p>Insérées : {{ formatNum(state.insertedRows) }}</p>
+        <p v-if="state.errorRows > 0" class="text-destructive">Erreurs : {{ formatNum(state.errorRows) }}</p>
+      </div>
+      <div v-if="state.errorMessages.length > 0" class="bg-destructive/10 rounded-lg p-3 text-xs space-y-1">
+        <p v-for="(msg, i) in state.errorMessages" :key="i" class="text-destructive">{{ msg }}</p>
+      </div>
+      <Button variant="outline" @click="reset()">
+        Nouvel import
+      </Button>
+    </div>
+
+    <div v-if="state.status === 'error'" class="space-y-3">
+      <div class="flex items-center gap-2 text-destructive">
+        <AlertCircle class="w-5 h-5" />
+        <span class="font-medium">Erreur</span>
+      </div>
+      <p v-for="(msg, i) in state.errorMessages" :key="i" class="text-sm text-destructive">{{ msg }}</p>
+      <div class="flex gap-2">
+        <Button variant="outline" @click="reset(true)">
+          Sélectionner le fichier pour reprendre
+        </Button>
+        <Button variant="ghost" @click="reset()">
+          Abandonner
+        </Button>
+      </div>
+    </div>
+
+    <!-- Log Panel -->
+    <div v-if="importLogs.length > 0" class="space-y-2">
+      <Button
+        variant="ghost"
+        size="sm"
+        @click="showLogs = !showLogs"
+        class="flex items-center gap-2 text-xs"
+      >
+        <Terminal class="w-4 h-4" />
+        {{ showLogs ? "Masquer" : "Afficher" }} les logs ({{ importLogs.length }})
+      </Button>
+      <div v-if="showLogs" class="bg-muted/50 border border-border rounded-lg p-3 max-h-64 overflow-y-auto font-mono text-xs space-y-0.5">
+        <div v-for="(line, i) in importLogs" :key="i" :class="line.includes('❌') || line.includes('💥') ? 'text-destructive' : line.includes('✅') ? 'text-primary' : 'text-muted-foreground'">
+          {{ line }}
+        </div>
+        <div ref="logEndRef" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/admin-import/helpers.ts b/apps/website-vue/src/pages/admin-import/helpers.ts
new file mode 100644
index 0000000..dda9076
--- /dev/null
+++ b/apps/website-vue/src/pages/admin-import/helpers.ts
@@ -0,0 +1,132 @@
+// Page-local helpers for AdminImport (ported from React AdminImport.tsx).
+// Behavior and env/localStorage keys preserved exactly.
+
+export const CHUNK_SIZE = 5000; // rows per API call — reduced to avoid DB statement timeouts
+export const UI_UPDATE_INTERVAL = 25000; // only update UI every N rows to reduce memory pressure
+export const CHECKPOINT_INTERVAL = 50000; // save checkpoint every N rows
+export const GC_PAUSE_INTERVAL = 100000; // pause to let browser GC every N rows
+
+export interface ImportState {
+  status: "idle" | "parsing" | "uploading" | "done" | "error" | "resume_prompt";
+  fileName: string;
+  totalRows: number;
+  processedRows: number;
+  insertedRows: number;
+  errorRows: number;
+  errorMessages: string[];
+  resumeFrom: number; // rows to skip when resuming
+  jobId: string | null; // DB import_jobs id for URL imports
+}
+
+export const initialState: ImportState = {
+  status: "idle",
+  fileName: "",
+  totalRows: 0,
+  processedRows: 0,
+  insertedRows: 0,
+  errorRows: 0,
+  errorMessages: [],
+  resumeFrom: 0,
+  jobId: null,
+};
+
+export function getCheckpointKey(type: string) {
+  return `import_checkpoint_${type}`;
+}
+
+export interface Checkpoint {
+  fileName: string;
+  fileSize: number;
+  processedRows: number;
+  insertedRows: number;
+  timestamp: number;
+}
+
+export function saveCheckpoint(type: string, cp: Checkpoint) {
+  try { localStorage.setItem(getCheckpointKey(type), JSON.stringify(cp)); } catch {}
+}
+
+export function loadCheckpoint(type: string): Checkpoint | null {
+  try {
+    const raw = localStorage.getItem(getCheckpointKey(type));
+    return raw ? JSON.parse(raw) : null;
+  } catch { return null; }
+}
+
+export function clearCheckpoint(type: string) {
+  try { localStorage.removeItem(getCheckpointKey(type)); } catch {}
+}
+
+export function normalizeHeader(name: string): string {
+  return name
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/[̀-ͯ]/g, "") // Remove accents
+    .replace(/[_\s]+/g, "_")
+    .replace(/[^a-z0-9_]/g, "")
+    .trim();
+}
+
+// Map of normalized header names to expected DB column names for fiber
+export const FIBER_HEADER_MAP: Record<string, string> = {
+  id_placemark: "id_placemark",
+  idplacemark: "id_placemark",
+  id_appart: "id_appart",
+  idappart: "id_appart",
+  uuidadresse: "uuidadresse",
+  idgouvqc: "uuidadresse",
+  id_gouv_qc: "uuidadresse",
+  nom: "nom",
+  civique: "civique",
+  appartement: "appartement",
+  appt: "appartement",
+  apt: "appartement",
+  rue: "rue",
+  ville: "ville",
+  code_postal: "code_postal",
+  codepostal: "code_postal",
+  cp: "code_postal",
+  lien_googlemap: "lien_googlemap",
+  liengooglemap: "lien_googlemap",
+  googlemap: "lien_googlemap",
+  zone_tarifaire: "zone_tarifaire",
+  zonetarifaire: "zone_tarifaire",
+  zone: "zone_tarifaire",
+  max_speed: "max_speed",
+  maxspeed: "max_speed",
+  vitesse: "max_speed",
+  vitesse_max: "max_speed",
+  commentaire: "commentaire",
+  commentaires: "commentaire",
+  comment: "commentaire",
+  lien_map_targo: "_skip",
+  lienmaptargo: "_skip",
+};
+
+export function parseLine(line: string, delimiter: string): string[] {
+  if (delimiter === "\t" || delimiter === ";") {
+    return line.split(delimiter).map((v) => v.trim().replace(/^"|"$/g, ""));
+  }
+  // CSV with potential quoted fields
+  const values: string[] = [];
+  let current = "";
+  let inQuotes = false;
+  for (let i = 0; i < line.length; i++) {
+    const char = line[i];
+    if (char === '"') {
+      if (inQuotes && i + 1 < line.length && line[i + 1] === '"') {
+        current += '"';
+        i++;
+      } else {
+        inQuotes = !inQuotes;
+      }
+    } else if (char === delimiter && !inQuotes) {
+      values.push(current.trim());
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  values.push(current.trim());
+  return values;
+}
diff --git a/apps/website-vue/src/pages/brand-guidelines/ColorSwatch.vue b/apps/website-vue/src/pages/brand-guidelines/ColorSwatch.vue
new file mode 100644
index 0000000..8c4a67b
--- /dev/null
+++ b/apps/website-vue/src/pages/brand-guidelines/ColorSwatch.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Check, Copy } from "lucide-vue-next";
+
+const props = withDefaults(
+  defineProps<{ name: string; hex: string; hsl: string; token?: string; class?: string }>(),
+  { class: "" },
+);
+
+const copied = ref(false);
+const copyHex = () => {
+  navigator.clipboard.writeText(props.hex);
+  copied.value = true;
+  setTimeout(() => (copied.value = false), 1500);
+};
+</script>
+
+<template>
+  <div class="group cursor-pointer print:cursor-default" @click="copyHex">
+    <div :class="`w-full h-20 rounded-xl mb-2 ring-1 ring-black/5 transition-transform group-hover:scale-105 print:group-hover:scale-100 ${props.class}`" :style="{ backgroundColor: hex }" />
+    <p class="text-sm font-bold text-gray-900">{{ name }}</p>
+    <p class="text-xs text-gray-500 font-mono flex items-center gap-1">
+      {{ hex }} <Check v-if="copied" class="w-3 h-3 text-[#00C853]" /><Copy v-else class="w-3 h-3 opacity-0 group-hover:opacity-50 print:hidden" />
+    </p>
+    <p class="text-[10px] text-gray-400 font-mono">{{ hsl }}</p>
+    <p v-if="token" class="text-[10px] text-[#00C853] font-mono mt-0.5">--{{ token }}</p>
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/brand-guidelines/Section.vue b/apps/website-vue/src/pages/brand-guidelines/Section.vue
new file mode 100644
index 0000000..b31bef8
--- /dev/null
+++ b/apps/website-vue/src/pages/brand-guidelines/Section.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{ id: string; title: string; subtitle: string; pageBreak?: boolean }>(),
+  { pageBreak: false },
+);
+</script>
+
+<template>
+  <section :id="id" :class="`py-16 border-b border-gray-100 last:border-b-0 ${pageBreak ? 'print-page-break' : ''}`">
+    <div class="mb-10">
+      <p class="text-xs font-bold uppercase tracking-[0.2em] text-[#00C853] mb-2">{{ subtitle }}</p>
+      <h2 class="text-3xl font-bold text-gray-900 font-display">{{ title }}</h2>
+    </div>
+    <slot />
+  </section>
+</template>
diff --git a/apps/website-vue/src/pages/business/Business.vue b/apps/website-vue/src/pages/business/Business.vue
new file mode 100644
index 0000000..1758560
--- /dev/null
+++ b/apps/website-vue/src/pages/business/Business.vue
@@ -0,0 +1,352 @@
+<script setup lang="ts">
+import {
+  Building2,
+  Phone,
+  Wifi,
+  Shield,
+  Cloud,
+  Server,
+  Users,
+  CheckCircle,
+  ArrowRight,
+  Headphones,
+  Network,
+  Link2,
+  Laptop,
+  GlobeLock,
+  Settings,
+  Radio,
+  Signal,
+  Cable,
+  Mail,
+} from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { RouterLink } from "vue-router";
+
+const businessServices = [
+  {
+    icon: Server,
+    title: "Internet affaires",
+    description: "Connexion fibre optique à la vitesse de vos besoins d'affaires",
+    features: [
+      "Fibre optique jusqu'à 100 Gbit/s",
+      "IP statique incluse",
+      "Garantie de disponibilité 99.99%",
+      "Relève sans fil disponible",
+      "Installation gratuite",
+      "Contrat flexible",
+    ],
+    link: "/business/internet",
+  },
+  {
+    icon: Network,
+    title: "SD-WAN",
+    description: "Notre réseau virtuel pour connectivité intelligente",
+    features: [
+      "Gestion centralisée du réseau",
+      "Connexion multi-sites simplifiée",
+      "Optimisation du trafic en temps réel",
+      "Basculement automatique sans changement d'adresse IP",
+      "Sécurité intégrée",
+      "Surveillance réseau 24/7",
+    ],
+    link: "/business/sd-wan",
+  },
+  {
+    icon: Phone,
+    title: "Téléphonie infonuagique",
+    description: "Solution VoIP évoluée et efficace",
+    features: [
+      "Appels illimités Canada/USA",
+      "Postes physiques et/ou applications mobiles",
+      "Système PBX hébergé",
+      "Réceptionniste virtuelle",
+      "Routage d'appels intelligent",
+      "Messagerie vocale par courriel avec transcription",
+      "Textos intégrés",
+    ],
+    link: "/business/telephonie",
+  },
+  {
+    icon: Radio,
+    title: "Liaisons SIP",
+    description: "La téléphonie d'aujourd'hui - voix et données unifiées",
+    features: [
+      "Lignes SIP en cascade",
+      "Qualité voix HD",
+      "Portabilité des numéros",
+      "Facturation par canal",
+      "Redondance automatique",
+      "Compatible avec vos équipements",
+    ],
+    link: "/business/sip",
+  },
+  {
+    icon: Building2,
+    title: "Internet multilogement",
+    description: "Solutions Internet gérées pour immeubles à logements et RPA",
+    features: [
+      "Augmentez la valeur de votre immeuble",
+      "Revenus récurrents garantis",
+      "Installation clé en main",
+      "Support technique pour locataires",
+      "Surveillance en temps réel",
+      "Tarification gelée",
+    ],
+    link: "/business/multilogement",
+  },
+  {
+    icon: Cloud,
+    title: "Services cloud",
+    description: "L'innovation sans concessions - connexion vers les fournisseurs infonuagiques",
+    features: [
+      "Connexion directe AWS, Azure, GCP",
+      "Latence minimale garantie",
+      "Bande passante dédiée",
+      "Sécurité de niveau entreprise",
+      "Évolutivité à la demande",
+      "Support expert inclus",
+    ],
+    link: "/business/cloud",
+  },
+  {
+    icon: GlobeLock,
+    title: "Passerelle VPN",
+    description: "Rapprochez vos succursales éloignées et vos télétravailleurs",
+    features: [
+      "Connexion sécurisée permanente",
+      "Accès télétravail simplifié",
+      "Chiffrement de bout en bout",
+      "Multi-sites illimités",
+      "Configuration clé en main",
+      "Monitoring en temps réel",
+    ],
+    link: "/business/vpn",
+  },
+  {
+    icon: Shield,
+    title: "Sécurité & protection DDoS",
+    description: "Protégez vos affaires contre les menaces externes",
+    features: [
+      "Protection DDoS avancée",
+      "Pare-feu nouvelle génération",
+      "Détection d'intrusion",
+      "Caméras HD intelligentes",
+      "Surveillance 24/7",
+      "Réponse aux incidents",
+    ],
+    link: "/business/securite",
+  },
+  {
+    icon: Settings,
+    title: "Services gérés",
+    description: "L'extension de votre équipe TI - solutions sur mesure",
+    features: [
+      "Gestion complète de vos TI",
+      "Maintenance proactive",
+      "Mises à jour automatiques",
+      "Support prioritaire 24/7",
+      "Rapports mensuels détaillés",
+      "Conseils stratégiques",
+    ],
+    link: "/business/services-geres",
+  },
+  {
+    icon: Signal,
+    title: "Amplification cellulaire",
+    description: "Améliorez la couverture cellulaire dans vos bâtiments",
+    features: [
+      "Couverture intérieure optimale",
+      "Compatible tous opérateurs",
+      "Installation professionnelle",
+      "Support technique inclus",
+    ],
+    link: "/business/amplification-cellulaire",
+  },
+  {
+    icon: Server,
+    title: "Virtualisation",
+    description: "Infrastructure virtuelle haute performance avec Proxmox",
+    features: [
+      "Serveurs virtuels à la demande",
+      "Haute disponibilité",
+      "Sauvegarde automatique",
+      "Évolutivité instantanée",
+    ],
+    link: "/business/virtualisation",
+  },
+  {
+    icon: Link2,
+    title: "Réseaux inter-sites",
+    description: "Connectez vos succursales avec des liaisons point-à-point",
+    features: ["Connexion fibre dédiée", "Latence minimale", "Bande passante garantie", "Sécurité de bout en bout"],
+    link: "/business/reseau-inter-sites",
+  },
+  {
+    icon: Wifi,
+    title: "WiFi commercial",
+    description: "Solutions WiFi professionnelles pour entreprises",
+    features: ["Couverture complète", "Gestion centralisée", "Portail captif", "Analyse du trafic"],
+    link: "/business/wifi",
+  },
+  {
+    icon: Cable,
+    title: "Câblage structuré",
+    description: "Infrastructure réseau filaire professionnelle",
+    features: [
+      "Câblage fibre et cuivre",
+      "Certification des liens",
+      "Documentation complète",
+      "Garantie de performance",
+    ],
+    link: "/business/cablage",
+  },
+  {
+    icon: Mail,
+    title: "Microsoft 365",
+    description: "Productivité et collaboration dans le cloud",
+    features: ["Courriels professionnels", "Suite Office complète", "Collaboration Teams", "Stockage OneDrive"],
+    link: "/business/microsoft-365",
+  },
+];
+
+const advantages = [
+  {
+    icon: Cloud,
+    title: "Tout-en-un",
+    description: "Internet, téléphonie et sécurité unifiés sur une seule facture",
+  },
+  {
+    icon: Users,
+    title: "Support dédié",
+    description: "Une équipe d'experts disponible 24/7 pour votre entreprise",
+  },
+  {
+    icon: Headphones,
+    title: "Clé en main",
+    description: "Installation, configuration et formation incluses",
+  },
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <span class="inline-block px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium mb-6">
+            Solutions affaires
+          </span>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Des solutions adaptées à vos <span class="text-primary">besoins d'affaires</span>
+          </h1>
+          <p class="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+            Leader en télécommunications : Internet, téléphonie IP et réseaux depuis 2005.
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" class="text-lg px-8" as-child>
+              <a href="/#contact">
+                Demander une soumission
+                <ArrowRight class="ml-2 h-5 w-5" />
+              </a>
+            </Button>
+            <Button size="lg" variant="outline" class="text-lg px-8">
+              1-855-888-2746
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Services Grid -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-12">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">Nos solutions pour entreprises</h2>
+          <p class="text-muted-foreground max-w-2xl mx-auto">
+            Des technologies de pointe pour optimiser la productivité de votre entreprise
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-2 gap-8">
+          <Card
+            v-for="(service, index) in businessServices"
+            :key="index"
+            class="group hover:shadow-xl transition-all duration-300 border-2 hover:border-primary/50"
+          >
+            <CardHeader>
+              <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
+                <component :is="service.icon" class="h-7 w-7 text-primary" />
+              </div>
+              <CardTitle class="text-2xl">{{ service.title }}</CardTitle>
+              <CardDescription class="text-base">{{ service.description }}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <ul class="space-y-3 mb-6">
+                <li v-for="(feature, idx) in service.features" :key="idx" class="flex items-center gap-3">
+                  <CheckCircle class="h-5 w-5 text-primary flex-shrink-0" />
+                  <span class="text-muted-foreground">{{ feature }}</span>
+                </li>
+              </ul>
+              <RouterLink :to="service.link">
+                <Button class="w-full group-hover:bg-primary/90">
+                  En savoir plus
+                  <ArrowRight class="ml-2 h-4 w-4" />
+                </Button>
+              </RouterLink>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages Section -->
+    <section class="py-16 bg-muted/50">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-12">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">Pourquoi choisir TARGO affaires?</h2>
+        </div>
+        <div class="grid md:grid-cols-3 gap-8">
+          <div v-for="(advantage, index) in advantages" :key="index" class="text-center p-6">
+            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+              <component :is="advantage.icon" class="h-8 w-8 text-primary" />
+            </div>
+            <h3 class="text-xl font-semibold text-foreground mb-2">{{ advantage.title }}</h3>
+            <p class="text-muted-foreground">{{ advantage.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-16 md:py-24 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">Prêt à optimiser vos communications?</h2>
+        <p class="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
+          Nos experts analysent vos besoins et vous proposent une solution personnalisée. Économisez jusqu'à 40% sur
+          vos frais de télécommunication.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">Soumission gratuite</a>
+          </Button>
+          <Button
+            size="lg"
+            class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary"
+            as-child
+          >
+            <a href="/#contact">Nous contacter</a>
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessAmplificationCellulaire.vue b/apps/website-vue/src/pages/business/BusinessAmplificationCellulaire.vue
new file mode 100644
index 0000000..78c0a71
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessAmplificationCellulaire.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Signal, Building2, Home, Zap, Settings, Phone, ArrowRight, CheckCircle2 } from "lucide-vue-next";
+
+const features = [
+  "Installation professionnelle et personnalisée",
+  "Compatible avec tous les opérateurs mobiles",
+  "Couverture complète de vos espaces",
+  "Technologie d'amplification intelligente",
+  "Design discret et élégant",
+  "Support technique 24/7",
+  "Garantie complète sur l'équipement",
+  "Service d'entretien inclus",
+];
+
+const advantages = [
+  {
+    icon: Building2,
+    title: "Secteur commercial",
+    description: "Amplificateurs conçus pour les environnements exigeants : bureaux, entrepôts, hôtels. Garantissez une connectivité mobile constante pour vos opérations commerciales.",
+  },
+  {
+    icon: Home,
+    title: "Secteur résidentiel",
+    description: "Dites adieu aux zones mortes et aux appels interrompus. Profitez d'appels clairs et d'une navigation rapide dans toutes les pièces de votre maison.",
+  },
+  {
+    icon: Zap,
+    title: "Technologie avancée",
+    description: "Compatibilité étendue avec tous les réseaux mobiles. La technologie d'amplification intelligente ajuste automatiquement le signal pour maximiser la qualité.",
+  },
+  {
+    icon: Settings,
+    title: "Installation facile",
+    description: "Nos kits d'amplification viennent avec tout le nécessaire pour une installation rapide. Notre équipe de support est toujours prête à vous aider.",
+  },
+];
+
+const howItWorks = [
+  {
+    step: "1",
+    title: "Antenne extérieure",
+    description: "L'antenne extérieure capte le signal cellulaire de l'extérieur de votre bâtiment et l'envoie au booster.",
+  },
+  {
+    step: "2",
+    title: "Amplificateur",
+    description: "L'amplificateur cellulaire amplifie votre signal et l'envoie à votre antenne intérieure.",
+  },
+  {
+    step: "3",
+    title: "Antenne intérieure",
+    description: "L'antenne intérieure distribue votre nouveau signal fort dans toute la zone problématique.",
+  },
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="pt-32 pb-20 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <div class="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
+            <Signal class="h-4 w-4" />
+            Amplification cellulaire
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Tout le monde mérite un <span class="text-primary">bon signal</span>
+          </h1>
+          <p class="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+            Solutions d'amplification cellulaire professionnelles pour le commercial et le résidentiel.
+            Fini les zones mortes et les appels interrompus.
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" class="text-lg px-8" as-child>
+              <a href="/#contact">
+                Demander une soumission
+                <ArrowRight class="ml-2 h-5 w-5" />
+              </a>
+            </Button>
+            <Button size="lg" variant="outline" class="text-lg px-8 border-border text-foreground hover:bg-accent">
+              <Phone class="mr-2 h-5 w-5" />
+              1-855-888-2746
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- How It Works -->
+    <section class="py-20 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-16">
+           <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Comment ça fonctionne
+          </h2>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Chaque amplificateur nécessite une antenne de signal, un câble coaxial et une antenne de distribution.
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+          <Card v-for="(item, index) in howItWorks" :key="index" class="text-center border-2 hover:border-primary/50 transition-colors">
+            <CardContent class="pt-8 pb-6">
+              <div class="w-16 h-16 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">
+                {{ item.step }}
+              </div>
+              <h3 class="text-xl font-semibold mb-3">{{ item.title }}</h3>
+              <p class="text-muted-foreground">{{ item.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-20">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Boostez votre connectivité
+          </h2>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            L'expert en amplification cellulaire pour le commercial et le résidentiel
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+          <Card v-for="(advantage, index) in advantages" :key="index" class="hover:shadow-lg transition-shadow">
+            <CardContent class="p-8">
+              <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
+                <component :is="advantage.icon" class="h-7 w-7 text-primary" />
+              </div>
+              <h3 class="text-xl font-semibold mb-3">{{ advantage.title }}</h3>
+              <p class="text-muted-foreground">{{ advantage.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="py-20 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-5xl mx-auto">
+          <div class="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">
+                Ce qui est inclus
+              </h2>
+              <p class="text-lg text-muted-foreground mb-8">
+                Notre solution complète d'amplification cellulaire comprend tout ce dont vous avez besoin pour une connectivité optimale.
+              </p>
+              <div class="grid sm:grid-cols-2 gap-4">
+                <div v-for="(feature, index) in features" :key="index" class="flex items-center gap-3">
+                  <CheckCircle2 class="h-5 w-5 text-primary flex-shrink-0" />
+                  <span class="text-foreground">{{ feature }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 text-center">
+              <Signal class="h-24 w-24 text-primary mx-auto mb-6" />
+              <h3 class="text-2xl font-bold mb-2">Signal amplifié</h3>
+              <p class="text-muted-foreground">Toutes les barres de signal dans toute votre propriété</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-20 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          Prêt à améliorer votre signal?
+        </h2>
+        <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
+          Contactez nos experts pour une évaluation gratuite de vos besoins en amplification cellulaire.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">Demander une soumission gratuite</a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            <Phone class="mr-2 h-5 w-5" />
+            1-855-888-2746
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessCablage.vue b/apps/website-vue/src/pages/business/BusinessCablage.vue
new file mode 100644
index 0000000..8631f05
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessCablage.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Cable, Layers, Server, Wrench, Clock, Shield, Phone, ArrowRight, CheckCircle2 } from "lucide-vue-next";
+
+const features = [
+  "Installation de fibre optique",
+  "Épissage par fusion",
+  "Câblage cuivre Cat6/Cat6A",
+  "Installation d'armoire data",
+  "Câblage salle serveur",
+  "Tests et certification",
+  "Service avec nacelle",
+  "Maintenance des infrastructures",
+];
+
+const advantages = [
+  {
+    icon: Cable,
+    title: "Fibre optique",
+    description: "Installation professionnelle de fibre optique avec nacelle et fusions. Expérience depuis 2007 pour tous types de réseaux.",
+  },
+  {
+    icon: Layers,
+    title: "Câblage Structuré",
+    description: "Déploiement de réseaux informatiques et télécommunication sur mesure pour toutes vos infrastructures.",
+  },
+  {
+    icon: Wrench,
+    title: "Épissage & Tests",
+    description: "Services d'épissage, terminaison et test de fibres optiques. Expertise sur tous les types de réseaux jusqu'aux dorsales nationales.",
+  },
+  {
+    icon: Clock,
+    title: "Service 24/7",
+    description: "Équipes de garde disponibles 24h/24, 365 jours par an pour intervenir en cas de pannes et urgences.",
+  },
+];
+
+const services = [
+  "Installation d'armoire data",
+  "Câblage salle serveur",
+  "Câble cuivre et fibre optique",
+  "Étude de faisabilité des travaux",
+  "Gestion et maintenance des infrastructures réseaux",
+  "Réparation de fibre optique sur réseau existant",
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="pt-32 pb-20 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <div class="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
+            <Cable class="h-4 w-4" />
+            Réseaux Filaires
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Fibre Optique & <span class="text-primary">Câblage Structuré</span>
+          </h1>
+          <p class="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+            Prestations sur mesure pour l'installation de fibre optique et de câblage structuré.
+            Accélérez la modernisation et la croissance de votre entreprise.
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" class="text-lg px-8" as-child>
+              <a href="/#contact">
+                Demander une soumission
+                <ArrowRight class="ml-2 h-5 w-5" />
+              </a>
+            </Button>
+            <Button size="lg" variant="outline" class="text-lg px-8 border-border text-foreground hover:bg-accent">
+              <Phone class="mr-2 h-5 w-5" />
+              1-855-888-2746
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-20 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Nos Expertises
+          </h2>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Des années d'expérience dans la fourniture de services de câblage réseau
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+          <Card v-for="(advantage, index) in advantages" :key="index" class="hover:shadow-lg transition-shadow">
+            <CardContent class="p-8">
+              <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
+                <component :is="advantage.icon" class="h-7 w-7 text-primary" />
+              </div>
+              <h3 class="text-xl font-semibold mb-3">{{ advantage.title }}</h3>
+              <p class="text-muted-foreground">{{ advantage.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Services -->
+    <section class="py-20">
+      <div class="container mx-auto px-4">
+        <div class="max-w-5xl mx-auto">
+          <div class="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">
+                Nos Prestations
+              </h2>
+              <p class="text-lg text-muted-foreground mb-8">
+                Pour le déploiement de votre réseau informatique et de télécommunication, nous proposons des prestations
+                sur mesure pour l'installation de fibre optique et de câblage structuré.
+              </p>
+              <div class="space-y-4">
+                <div v-for="(service, index) in services" :key="index" class="flex items-center gap-3">
+                  <CheckCircle2 class="h-5 w-5 text-primary flex-shrink-0" />
+                  <span class="text-foreground">{{ service }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 text-center">
+              <Cable class="h-24 w-24 text-primary mx-auto mb-6" />
+              <h3 class="text-2xl font-bold mb-2">Depuis 2007</h3>
+              <p class="text-muted-foreground">Expertise éprouvée au service de votre infrastructure</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="py-20 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-5xl mx-auto">
+          <div class="text-center mb-12">
+            <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+              Services Complets
+            </h2>
+            <p class="text-lg text-muted-foreground">
+              De la conception à la maintenance de vos infrastructures réseau
+            </p>
+          </div>
+          <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-4">
+            <div v-for="(feature, index) in features" :key="index" class="flex items-center gap-3 bg-background p-4 rounded-lg shadow-sm">
+              <CheckCircle2 class="h-5 w-5 text-primary flex-shrink-0" />
+              <span class="text-foreground">{{ feature }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-20 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          Besoin d'une Infrastructure Réseau?
+        </h2>
+        <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
+          Faites-nous part de vos besoins. Un représentant technique se fera un plaisir de vous contacter pour une consultation gratuite.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">Demander une soumission gratuite</a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            <Phone class="mr-2 h-5 w-5" />
+            1-855-888-2746
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessCloud.vue b/apps/website-vue/src/pages/business/BusinessCloud.vue
new file mode 100644
index 0000000..90e2384
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessCloud.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { Cloud, CheckCircle, ArrowRight, Zap, Shield, Globe, Server } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { RouterLink } from "vue-router";
+
+const features = [
+  "Connexion directe AWS, Azure, GCP",
+  "Latence minimale garantie",
+  "Bande passante dédiée",
+  "Sécurité de niveau entreprise",
+  "Évolutivité à la demande",
+  "Support expert inclus",
+  "Monitoring en temps réel",
+  "SLA garanti"
+];
+
+const advantages = [
+  {
+    icon: Globe,
+    title: "Multi-cloud",
+    description: "Connexion directe vers AWS, Microsoft Azure et Google Cloud."
+  },
+  {
+    icon: Zap,
+    title: "Performance",
+    description: "Latence minimale pour vos applications cloud critiques."
+  },
+  {
+    icon: Shield,
+    title: "Sécurité",
+    description: "Connexion privée et sécurisée vers vos environnements cloud."
+  },
+  {
+    icon: Server,
+    title: "Évolutivité",
+    description: "Augmentez votre bande passante à la demande sans délai."
+  }
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <RouterLink to="/business" class="inline-flex items-center text-primary hover:underline mb-6">
+            ← Retour aux solutions affaires
+          </RouterLink>
+          <div class="w-20 h-20 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
+            <Cloud class="h-10 w-10 text-primary" />
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Services <span class="text-primary">Cloud</span>
+          </h1>
+          <p class="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
+            L'innovation sans concessions. Connexion directe vers les principaux fournisseurs infonuagiques.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-16">
+      <div class="container mx-auto px-4">
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+          <div v-for="(advantage, index) in advantages" :key="index" class="text-center">
+            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+              <component :is="advantage.icon" class="h-8 w-8 text-primary" />
+            </div>
+            <h3 class="text-lg font-semibold text-foreground mb-2">{{ advantage.title }}</h3>
+            <p class="text-muted-foreground text-sm">{{ advantage.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="py-16 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-3xl mx-auto">
+          <h2 class="text-3xl font-bold text-center text-foreground mb-8">
+            Ce qui est inclus
+          </h2>
+          <div class="grid md:grid-cols-2 gap-4">
+            <div v-for="(feature, index) in features" :key="index" class="flex items-center gap-3 bg-background p-4 rounded-lg border">
+              <CheckCircle class="h-5 w-5 text-primary flex-shrink-0" />
+              <span class="text-foreground">{{ feature }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-16 md:py-24 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">
+          Prêt à optimiser votre cloud?
+        </h2>
+        <p class="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
+          Connectez-vous directement aux clouds publics avec une latence minimale.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">
+              Demander une soumission
+              <ArrowRight class="ml-2 h-5 w-5" />
+            </a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            1-855-888-2746
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessInternet.vue b/apps/website-vue/src/pages/business/BusinessInternet.vue
new file mode 100644
index 0000000..ee9b980
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessInternet.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { Server, CheckCircle, Zap, Shield, Clock, Wifi, ArrowRight, Phone } from "lucide-vue-next";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { RouterLink } from "vue-router";
+
+const features = [
+  "Fibre optique jusqu'à 10 Gbit/s",
+  "IP statique incluse",
+  "Garantie de disponibilité 99.9%",
+  "Sauvegarde LTE automatique",
+  "Installation gratuite",
+  "Contrat flexible",
+  "Support technique 24/7",
+  "Monitoring proactif"
+];
+
+const advantages = [
+  {
+    icon: Zap,
+    title: "Vitesse maximale",
+    description: "Jusqu'à 10 Gbit/s en fibre optique dédiée pour vos opérations critiques."
+  },
+  {
+    icon: Shield,
+    title: "Fiabilité garantie",
+    description: "SLA de 99.9% avec sauvegarde LTE automatique en cas de panne."
+  },
+  {
+    icon: Clock,
+    title: "Support prioritaire",
+    description: "Équipe technique disponible 24/7 avec temps de réponse garanti."
+  },
+  {
+    icon: Wifi,
+    title: "Wi-Fi professionnel",
+    description: "Solution Wi-Fi entreprise incluse pour une couverture optimale."
+  }
+];
+
+const plans = [
+  {
+    name: "Essentiel",
+    price: "89$",
+    description: "Idéal pour les petits bureaux et le télétravail.",
+    features: ["500 Mbit/s illimité", "Support prioritaire 8h-18h", "1 adresse IP statique", "Routeur Wi-Fi 6 inclus"]
+  },
+  {
+    name: "Performance",
+    price: "119$",
+    description: "La vitesse standard pour les PME en croissance.",
+    popular: true,
+    features: ["1 Gbit/s illimité", "Support prioritaire 24/7", "5 adresses IP statiques", "Routeur Wi-Fi 6E inclus", "Sauvegarde LTE (Option)"]
+  },
+  {
+    name: "Ultimate",
+    price: "249$",
+    description: "Puissance maximale pour les gros transferts.",
+    features: ["10 Gbit/s illimité", "Support dédié 24/7", "Bloc IP /29 inclus", "Borne Wi-Fi Pro incluse", "SLA 99.9% garanti"]
+  }
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <RouterLink
+            to="/business"
+            class="inline-flex items-center text-primary hover:underline mb-6"
+          >
+            ← Retour aux solutions affaires
+          </RouterLink>
+
+          <div class="w-20 h-20 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-8 border border-primary/20">
+            <Server class="h-10 w-10 text-primary" />
+          </div>
+
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Internet <span class="text-primary">Affaires</span>
+          </h1>
+
+          <p class="text-lg md:text-xl text-muted-foreground mb-10 max-w-3xl mx-auto leading-relaxed">
+            Connexion fibre optique dédiée à la vitesse de vos besoins d'affaires. Performance et fiabilité garanties pour propulser votre entreprise.
+          </p>
+
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" class="text-lg px-8" as-child>
+              <a href="/#contact">
+                Demander une soumission
+                <ArrowRight class="ml-2 h-5 w-5" />
+              </a>
+            </Button>
+            <Button size="lg" variant="outline" class="text-lg px-8">
+              <Phone class="mr-2 h-5 w-5" />
+              1-855-888-2746
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Pricing Section -->
+    <section class="py-16 md:py-24 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-12">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">Nos Forfaits Internet</h2>
+          <p class="text-muted-foreground">Des vitesses adaptées à la réalité de votre entreprise</p>
+        </div>
+
+        <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+          <Card v-for="(plan, index) in plans" :key="index" :class="`relative ${plan.popular ? 'border-primary border-2 shadow-xl' : ''}`">
+            <span v-if="plan.popular" class="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium">
+              Recommandé
+            </span>
+            <CardHeader class="text-center pt-8">
+              <CardTitle class="text-2xl">{{ plan.name }}</CardTitle>
+              <CardDescription>{{ plan.description }}</CardDescription>
+              <div class="mt-4">
+                <span class="text-4xl font-bold text-primary">{{ plan.price }}</span>
+                <span class="text-muted-foreground text-sm">/mois</span>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <ul class="space-y-3 mb-6">
+                <li v-for="(feature, idx) in plan.features" :key="idx" class="flex items-center gap-3">
+                  <CheckCircle class="h-5 w-5 text-primary flex-shrink-0" />
+                  <span class="text-muted-foreground">{{ feature }}</span>
+                </li>
+              </ul>
+              <Button class="w-full" :variant="plan.popular ? 'default' : 'outline'" as-child>
+                <a href="/#contact">Choisir ce forfait <ArrowRight class="w-4 h-4 ml-2" /></a>
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-12">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">Pourquoi choisir TARGO?</h2>
+        </div>
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
+          <Card v-for="(advantage, index) in advantages" :key="index" class="text-center p-6">
+            <CardContent class="p-0">
+              <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
+                <component :is="advantage.icon" class="h-7 w-7 text-primary" />
+              </div>
+              <h3 class="text-xl font-bold text-foreground mb-3">{{ advantage.title }}</h3>
+              <p class="text-muted-foreground text-sm leading-relaxed">{{ advantage.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="py-16 md:py-24 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto">
+          <div class="text-center mb-12">
+            <h2 class="text-3xl font-bold text-foreground mb-4 font-display">
+              Ce qui est <span class="text-primary">inclus</span>
+            </h2>
+            <p class="text-muted-foreground">Tout ce dont vous avez besoin pour une connectivité sans compromis</p>
+          </div>
+
+          <div class="grid md:grid-cols-2 gap-4">
+            <div
+              v-for="(feature, index) in features"
+              :key="index"
+              class="flex items-center gap-3 bg-card p-4 rounded-xl border border-border hover:border-primary/30 transition-colors"
+            >
+              <CheckCircle class="h-5 w-5 text-primary flex-shrink-0" />
+              <span class="text-foreground font-medium">{{ feature }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-16 md:py-24 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">Prêt à optimiser votre connexion?</h2>
+        <p class="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
+          Nos experts analysent vos besoins et vous proposent une solution personnalisée.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">Soumission gratuite</a>
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessMicrosoft365.vue b/apps/website-vue/src/pages/business/BusinessMicrosoft365.vue
new file mode 100644
index 0000000..b1b7752
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessMicrosoft365.vue
@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Mail, FileText, Users, Cloud, Shield, Phone, ArrowRight, CheckCircle2, Star } from "lucide-vue-next";
+
+const plans = [
+  {
+    name: "Microsoft 365 Business Basic",
+    price: "8,10",
+    description: "Idéal pour les entreprises qui ont besoin d'un service de courriel professionnel, d'une solution de stockage ainsi que des outils de collaboration.",
+    features: ["Exchange", "OneDrive", "SharePoint", "Teams"],
+    webOnly: true,
+    popular: false,
+  },
+  {
+    name: "Microsoft 365 Apps for Business",
+    price: "11,70",
+    description: "Idéal pour les entreprises qui ont besoin des logiciels Office, solution de stockage et de partage de fichiers en ligne.",
+    features: ["Word", "Excel", "PowerPoint", "OneNote", "OneDrive", "Access (PC)"],
+    webOnly: false,
+    popular: false,
+  },
+  {
+    name: "Microsoft 365 Business Premium",
+    price: "29,80",
+    description: "Solution complète: courriel professionnel, logiciels Office, stockage, partage de fichiers et outils de collaboration.",
+    features: ["Word", "Excel", "PowerPoint", "OneNote", "Exchange", "OneDrive", "SharePoint", "Teams", "Access (PC)"],
+    webOnly: false,
+    popular: true,
+  },
+];
+
+const advantages = [
+  {
+    icon: Mail,
+    title: "Courriels professionnels",
+    description: "Adresses courriel personnalisées avec votre nom de domaine. Boîte aux lettres de 50 Go et protection avancée contre les menaces.",
+  },
+  {
+    icon: Cloud,
+    title: "Stockage cloud",
+    description: "1 To de stockage OneDrive par utilisateur. Accédez à vos fichiers de n'importe où, sur n'importe quel appareil.",
+  },
+  {
+    icon: Users,
+    title: "Collaboration Teams",
+    description: "Réunions vidéo, messagerie instantanée et partage de fichiers. Travaillez ensemble efficacement, où que vous soyez.",
+  },
+  {
+    icon: Shield,
+    title: "Sécurité Avancée",
+    description: "Protection contre les menaces, chiffrement des données et conformité aux normes de l'industrie.",
+  },
+];
+
+const apps = ['Word', 'Excel', 'PowerPoint', 'Outlook', 'Teams', 'OneDrive'];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="pt-32 pb-20 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <div class="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
+            <Mail class="h-4 w-4" />
+            Microsoft 365
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Experts en Solutions <span class="text-primary">Microsoft 365</span>
+          </h1>
+          <p class="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+            Solutions complètes et intégrées conçues pour les TPE et PME.
+            Choisissez la suite de productivité adaptée à votre activité.
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" class="text-lg px-8">
+              Voir les forfaits
+              <ArrowRight class="ml-2 h-5 w-5" />
+            </Button>
+            <Button size="lg" variant="outline" class="text-lg px-8 border-border text-foreground hover:bg-accent">
+              <Phone class="mr-2 h-5 w-5" />
+              1-855-888-2746
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Plans -->
+    <section class="py-20 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Nos Forfaits Microsoft 365
+          </h2>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Prix de volume offert - Abonnement annuel
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+          <Card v-for="(plan, index) in plans" :key="index" :class="`relative hover:shadow-lg transition-shadow ${plan.popular ? 'border-primary border-2' : ''}`">
+            <div v-if="plan.popular" class="absolute -top-3 left-1/2 -translate-x-1/2">
+              <span class="bg-primary text-primary-foreground text-sm font-medium px-4 py-1 rounded-full flex items-center gap-1">
+                <Star class="h-3 w-3" /> Populaire
+              </span>
+            </div>
+            <CardHeader class="text-center pb-4">
+              <CardTitle class="text-xl mb-2">{{ plan.name }}</CardTitle>
+              <div class="flex items-baseline justify-center gap-1">
+                <span class="text-4xl font-bold text-primary">{{ plan.price }}$</span>
+                <span class="text-muted-foreground">/utilisateur/mois</span>
+              </div>
+              <span v-if="plan.webOnly" class="text-sm text-muted-foreground">(Version web et mobile uniquement)</span>
+            </CardHeader>
+            <CardContent>
+              <p class="text-sm text-muted-foreground mb-6">{{ plan.description }}</p>
+              <div class="space-y-3 mb-6">
+                <div v-for="(feature, idx) in plan.features" :key="idx" class="flex items-center gap-2">
+                  <CheckCircle2 class="h-4 w-4 text-primary flex-shrink-0" />
+                  <span class="text-sm">{{ feature }}</span>
+                </div>
+              </div>
+              <Button class="w-full" :variant="plan.popular ? 'default' : 'outline'">
+                Informations | Abonnement
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-20">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Pourquoi Microsoft 365?
+          </h2>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Des outils puissants pour soutenir votre entreprise
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+          <Card v-for="(advantage, index) in advantages" :key="index" class="hover:shadow-lg transition-shadow">
+            <CardContent class="p-8">
+              <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
+                <component :is="advantage.icon" class="h-7 w-7 text-primary" />
+              </div>
+              <h3 class="text-xl font-semibold mb-3">{{ advantage.title }}</h3>
+              <p class="text-muted-foreground">{{ advantage.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Apps Grid -->
+    <section class="py-20 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-5xl mx-auto text-center">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">
+            Applications Incluses
+          </h2>
+          <p class="text-lg text-muted-foreground mb-12">
+            Créez, partagez et collaborez en tout lieu, sur tout appareil
+          </p>
+          <div class="grid grid-cols-3 md:grid-cols-6 gap-8">
+            <div v-for="(app, index) in apps" :key="index" class="flex flex-col items-center gap-3">
+              <div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center">
+                <FileText class="h-8 w-8 text-primary" />
+              </div>
+              <span class="font-medium text-sm">{{ app }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-20 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          Prêt à Moderniser Votre Entreprise?
+        </h2>
+        <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
+          Contactez-nous pour un accompagnement personnalisé dans le choix et la mise en place de votre solution Microsoft 365.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">Demander un accompagnement</a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            <Phone class="mr-2 h-5 w-5" />
+            1-855-888-2746
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessMultilogement.vue b/apps/website-vue/src/pages/business/BusinessMultilogement.vue
new file mode 100644
index 0000000..051ba1a
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessMultilogement.vue
@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import { Building2, Wifi, TrendingUp, Users, Shield, Clock, CheckCircle, ArrowRight, DollarSign, Camera, Settings, Home } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+
+const benefits = [{
+  icon: TrendingUp,
+  title: "Augmentation de valeur",
+  description: "Valorisez votre immeuble à 110% en offrant Internet à vos locataires"
+}, {
+  icon: DollarSign,
+  title: "Revenus récurrents",
+  description: "Générez une source de revenus importante et stable chaque mois"
+}, {
+  icon: Clock,
+  title: "ROI rapide",
+  description: "Retour sur investissement instantané"
+}, {
+  icon: Users,
+  title: "Locataires satisfaits",
+  description: "Logements plus attrayants avec services inclus"
+}, {
+  icon: Settings,
+  title: "Gestion simplifiée",
+  description: "Outil de gestion multilogements pour contrôler tous vos services"
+}, {
+  icon: Shield,
+  title: "Support inclus",
+  description: "Support technique spécialisé pour vos locataires 7/7"
+}];
+const propertyTypes = [{
+  icon: Building2,
+  title: "Immeubles à logements & RPA",
+  description: "Solution idéale pour les propriétaires d'immeubles résidentiels et résidences pour aînés"
+}, {
+  icon: Home,
+  title: "Hôtels, Motels & Campings",
+  description: "Infrastructure fibre et Wi-Fi public pour une expérience client optimale"
+}, {
+  icon: Building2,
+  title: "Centres commerciaux",
+  description: "Infrastructure réseau pour bâtiments et centres commerciaux"
+}];
+const features = ["Options flexibles de services Internet par unité ou forfait global", "Installation rapide et professionnelle", "Tarification mensuelle gelée", "Aucune restriction sur l'utilisation du service", "Connexion de périphériques sans frais (caméra, alarme, IoT)", "Surveillance en temps réel de vos services", "Plusieurs options de branchements disponibles", "Disponible avec ou sans fibre optique", "Équipements adaptés à vos besoins"];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <span class="inline-block px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium mb-6">Solutions Internet géré</span>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Internet géré pour
+            <br />
+            <span class="text-primary">immeubles commerciaux, multilogements, et plus</span>
+          </h1>
+          <p class="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+            Offrez l'accès Internet à vos locataires : une stratégie avantageuse pour eux
+            et rentable pour vous. Générez des revenus tout en valorisant votre immeuble.
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" class="text-lg px-8" as-child>
+              <a href="/#contact">
+                Obtenir une soumission
+                <ArrowRight class="ml-2 h-5 w-5" />
+              </a>
+            </Button>
+            <Button size="lg" variant="outline" class="text-lg px-8 border-border text-foreground hover:bg-accent">
+              1-855-888-2746
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Property Types -->
+    <section class="py-16 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-12">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Pour tous types de propriétés
+          </h2>
+        </div>
+        <div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+          <Card v-for="(type, index) in propertyTypes" :key="index" class="text-center hover:shadow-lg transition-shadow">
+            <CardHeader>
+              <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-4">
+                <component :is="type.icon" class="h-7 w-7 text-primary" />
+              </div>
+              <CardTitle class="text-lg">{{ type.title }}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p class="text-muted-foreground text-sm">{{ type.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Benefits Grid -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-12">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Vos avantages propriétaires
+          </h2>
+          <p class="text-muted-foreground max-w-2xl mx-auto">
+            Transformez votre immeuble en source de revenus avec notre solution clé en main
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <Card v-for="(benefit, index) in benefits" :key="index" class="hover:shadow-lg transition-shadow border-2 hover:border-primary/30">
+            <CardHeader>
+              <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
+                <component :is="benefit.icon" class="h-6 w-6 text-primary" />
+              </div>
+              <CardTitle class="text-xl">{{ benefit.title }}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p class="text-muted-foreground">{{ benefit.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="py-16 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto">
+          <div class="grid md:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 class="text-3xl font-bold text-foreground mb-6">
+                Des options évolutives
+              </h2>
+              <ul class="space-y-4">
+                <li v-for="(feature, index) in features" :key="index" class="flex items-start gap-3">
+                  <CheckCircle class="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
+                  <span class="text-muted-foreground">{{ feature }}</span>
+                </li>
+              </ul>
+            </div>
+            <div class="bg-gradient-to-br from-primary/10 to-secondary/10 rounded-2xl p-8 border">
+              <h3 class="text-2xl font-bold text-foreground mb-4 text-center">
+                Outil de gestion Multilogements
+              </h3>
+              <p class="text-muted-foreground text-center mb-6">
+                Tirez pleinement profit de nombreux avantages, sans tracas,
+                en offrant des services supplémentaires à vos locataires.
+              </p>
+              <ul class="space-y-3">
+                <li class="flex items-center gap-3">
+                  <CheckCircle class="h-5 w-5 text-primary" />
+                  <span class="text-sm text-muted-foreground">Tableau de bord centralisé</span>
+                </li>
+                <li class="flex items-center gap-3">
+                  <CheckCircle class="h-5 w-5 text-primary" />
+                  <span class="text-sm text-muted-foreground">Gestion des locataires</span>
+                </li>
+                <li class="flex items-center gap-3">
+                  <CheckCircle class="h-5 w-5 text-primary" />
+                  <span class="text-sm text-muted-foreground">Facturation automatisée</span>
+                </li>
+                <li class="flex items-center gap-3">
+                  <CheckCircle class="h-5 w-5 text-primary" />
+                  <span class="text-sm text-muted-foreground">Rapports de performance</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Surveillance Section -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto">
+          <div class="grid md:grid-cols-2 gap-12 items-center">
+            <div class="order-2 md:order-1 bg-muted/50 rounded-2xl p-8 flex items-center justify-center">
+              <Camera class="h-32 w-32 text-primary/30" />
+            </div>
+            <div class="order-1 md:order-2">
+              <h2 class="text-3xl font-bold text-foreground mb-4">
+                Centralisation de la surveillance
+              </h2>
+              <p class="text-lg text-muted-foreground mb-6">
+                Optimisez la sécurité et l'efficacité de vos immeubles locatifs grâce à notre expertise.
+              </p>
+              <p class="text-muted-foreground mb-6">
+                Interconnectez plusieurs bâtiments avec notre technologie sans fil pour centraliser
+                la surveillance des équipements. Surveillez vos caméras dans l'ensemble de vos propriétés
+                depuis un seul endroit.
+              </p>
+              <ul class="space-y-3 mb-6">
+                <li class="flex items-center gap-3">
+                  <CheckCircle class="h-5 w-5 text-primary" />
+                  <span class="text-muted-foreground">Accès aux images en tout temps</span>
+                </li>
+                <li class="flex items-center gap-3">
+                  <CheckCircle class="h-5 w-5 text-primary" />
+                  <span class="text-muted-foreground">Gestion centralisée et économique</span>
+                </li>
+                <li class="flex items-center gap-3">
+                  <CheckCircle class="h-5 w-5 text-primary" />
+                  <span class="text-muted-foreground">Environnement plus sûr pour vos locataires</span>
+                </li>
+              </ul>
+              <Button>
+                En savoir plus
+                <ArrowRight class="ml-2 h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-16 md:py-24 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <Building2 class="h-16 w-16 mx-auto mb-6 opacity-80" />
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">
+          Prêt à rentabiliser votre immeuble?
+        </h2>
+        <p class="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
+          Nous sommes en mesure de brancher votre immeuble et de permettre la redistribution
+          à vos locataires, sans aucune contrainte ou restriction.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">Demander une étude gratuite</a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            Programme de financement
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessReseauInterSites.vue b/apps/website-vue/src/pages/business/BusinessReseauInterSites.vue
new file mode 100644
index 0000000..629de8d
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessReseauInterSites.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Radio, Zap, Globe, Building, Gauge, Clock, Phone, ArrowRight, CheckCircle2 } from "lucide-vue-next";
+
+const features = [
+  "Débit jusqu'à 2 Gbps",
+  "Portée jusqu'à 100+ km",
+  "Latence inférieure à 1 ms",
+  "Bande 5 GHz sans licence",
+  "Design d'antenne innovant",
+  "Mode full-duplex FDD",
+  "Installation professionnelle",
+  "Support technique 24/7",
+];
+
+const advantages = [
+  {
+    icon: Building,
+    title: "Connectez Vos Bâtiments",
+    description: "Reliez vos bâtisses entre elles sans câblage. Tous vos appareils sur le même réseau principal, peu importe leur emplacement.",
+  },
+  {
+    icon: Zap,
+    title: "Performance Révolutionnaire",
+    description: "Dépassant les connexions filaires conventionnelles, nos solutions offrent un débit réel jusqu'à 1.2+ Gbps.",
+  },
+  {
+    icon: Clock,
+    title: "Latence Ultra-Faible",
+    description: "Support FDD en mode full-duplex pour une latence inférieure à 1 ms, améliorant l'efficacité de vos liens réseau.",
+  },
+  {
+    icon: Globe,
+    title: "Longue Portée",
+    description: "Conçu comme une dorsale haute performance, opère sur une portée allant jusqu'à 100+ km selon le modèle.",
+  },
+];
+
+const models = [
+  {
+    name: "AF5",
+    band: "Mid-Band 5 GHz",
+    speed: "1.2+ Gbps",
+    range: "100+ km",
+  },
+  {
+    name: "AF5U",
+    band: "High-Band 5 GHz",
+    speed: "1.2+ Gbps",
+    range: "100+ km",
+  },
+  {
+    name: "AF24",
+    band: "24 GHz",
+    speed: "1.4+ Gbps",
+    range: "13+ km",
+  },
+  {
+    name: "AF24HD",
+    band: "24 GHz",
+    speed: "2 Gbps",
+    range: "20+ km",
+  },
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="pt-32 pb-20 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <div class="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
+            <Radio class="h-4 w-4" />
+            Réseaux Inter-Sites
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Connectez Vos Sites avec le <span class="text-primary">Point-à-Point</span>
+          </h1>
+          <p class="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+            Solutions de liaison sans fil haute performance pour relier vos bâtiments. Économisez sur les liens Internet
+            et le câblage avec nos technologies point-à-point.
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" class="text-lg px-8" as-child>
+              <a href="/#contact">
+                Demander une étude
+                <ArrowRight class="ml-2 h-5 w-5" />
+              </a>
+            </Button>
+            <Button size="lg" variant="outline" class="text-lg px-8 border-border text-foreground hover:bg-accent">
+              <Phone class="mr-2 h-5 w-5" />
+              1-855-888-2746
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-20 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Pourquoi le Point-à-Point?
+          </h2>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Idéal pour les entreprises avec plusieurs bâtiments sur un même site
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+          <Card v-for="(advantage, index) in advantages" :key="index" class="hover:shadow-lg transition-shadow">
+            <CardContent class="p-8">
+              <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
+                <component :is="advantage.icon" class="h-7 w-7 text-primary" />
+              </div>
+              <h3 class="text-xl font-semibold mb-3">{{ advantage.title }}</h3>
+              <p class="text-muted-foreground">{{ advantage.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Models Comparison -->
+    <section class="py-20">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Comparaison des Modèles
+          </h2>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Choisissez la solution adaptée à vos besoins de distance et de débit
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
+          <Card v-for="(model, index) in models" :key="index" class="text-center hover:shadow-lg transition-shadow border-2 hover:border-primary/50">
+            <CardContent class="pt-8 pb-6">
+              <div class="w-16 h-16 bg-primary rounded-xl flex items-center justify-center mx-auto mb-6">
+                <Radio class="h-8 w-8 text-primary-foreground" />
+              </div>
+              <h3 class="text-xl font-bold mb-2">{{ model.name }}</h3>
+              <p class="text-sm text-muted-foreground mb-4">{{ model.band }}</p>
+              <div class="space-y-2">
+                <div class="flex items-center justify-center gap-2">
+                  <Gauge class="h-4 w-4 text-primary" />
+                  <span class="font-semibold">{{ model.speed }}</span>
+                </div>
+                <div class="flex items-center justify-center gap-2">
+                  <Globe class="h-4 w-4 text-primary" />
+                  <span class="font-semibold">{{ model.range }}</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="py-20 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-5xl mx-auto">
+          <div class="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">
+                Caractéristiques Techniques
+              </h2>
+              <p class="text-lg text-muted-foreground mb-8">
+                Nos solutions point-à-point utilisent une conception d'antenne à double isolation idéale pour des performances
+                robustes dans les environnements RF les plus difficiles.
+              </p>
+              <div class="grid sm:grid-cols-2 gap-4">
+                <div v-for="(feature, index) in features" :key="index" class="flex items-center gap-3">
+                  <CheckCircle2 class="h-5 w-5 text-primary flex-shrink-0" />
+                  <span class="text-foreground">{{ feature }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 text-center">
+              <Radio class="h-24 w-24 text-primary mx-auto mb-6" />
+              <h3 class="text-2xl font-bold mb-2">Bande 5 GHz</h3>
+              <p class="text-muted-foreground">Opération mondiale sans licence sur les fréquences 5 GHz</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-20 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          Prêt à Connecter Vos Sites?
+        </h2>
+        <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
+          Contactez nos experts pour une étude de faisabilité gratuite et découvrez les économies potentielles.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">Demander une étude gratuite</a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            <Phone class="mr-2 h-5 w-5" />
+            1-855-888-2746
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessSdWan.vue b/apps/website-vue/src/pages/business/BusinessSdWan.vue
new file mode 100644
index 0000000..641d4e9
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessSdWan.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { Network, CheckCircle, ArrowRight, Zap, Shield, Globe, Settings } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { RouterLink } from "vue-router";
+
+const features = [
+  "Gestion centralisée du réseau",
+  "Optimisation du trafic en temps réel",
+  "Basculement automatique",
+  "Connexion multi-sites simplifiée",
+  "Sécurité intégrée",
+  "Monitoring 24/7",
+  "Configuration à distance",
+  "Rapports de performance"
+];
+
+const advantages = [
+  {
+    icon: Globe,
+    title: "Multi-sites unifié",
+    description: "Connectez tous vos sites avec une gestion centralisée et simplifiée."
+  },
+  {
+    icon: Zap,
+    title: "Performance optimale",
+    description: "Routage intelligent du trafic pour des performances maximales."
+  },
+  {
+    icon: Shield,
+    title: "Sécurité intégrée",
+    description: "Chiffrement et protection inclus pour toutes vos connexions."
+  },
+  {
+    icon: Settings,
+    title: "Flexibilité totale",
+    description: "Évoluez facilement selon vos besoins sans changement d'infrastructure."
+  }
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <RouterLink to="/business" class="inline-flex items-center text-primary hover:underline mb-6">
+            ← Retour aux solutions affaires
+          </RouterLink>
+          <div class="w-20 h-20 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
+            <Network class="h-10 w-10 text-primary" />
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            <span class="text-primary">SD-WAN</span>
+          </h1>
+          <p class="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
+            Notre réseau virtuel sans pareil pour une connectivité intelligente. L'alternative moderne au WAN traditionnel.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Description -->
+    <section class="py-16">
+      <div class="container mx-auto px-4">
+        <div class="max-w-3xl mx-auto text-center">
+          <p class="text-lg text-muted-foreground mb-6">
+            La solution SD-WAN fournit une alternative au réseau traditionnel WAN (MPLS). Grâce à notre service SD-WAN, vous dynamisez votre réseau d'affaires et assurez l'évolutivité de votre entreprise.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-16 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+          <div v-for="(advantage, index) in advantages" :key="index" class="text-center">
+            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+              <component :is="advantage.icon" class="h-8 w-8 text-primary" />
+            </div>
+            <h3 class="text-lg font-semibold text-foreground mb-2">{{ advantage.title }}</h3>
+            <p class="text-muted-foreground text-sm">{{ advantage.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="py-16">
+      <div class="container mx-auto px-4">
+        <div class="max-w-3xl mx-auto">
+          <h2 class="text-3xl font-bold text-center text-foreground mb-8">
+            Ce qui est inclus
+          </h2>
+          <div class="grid md:grid-cols-2 gap-4">
+            <div v-for="(feature, index) in features" :key="index" class="flex items-center gap-3 bg-background p-4 rounded-lg border">
+              <CheckCircle class="h-5 w-5 text-primary flex-shrink-0" />
+              <span class="text-foreground">{{ feature }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-16 md:py-24 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">
+          Prêt à moderniser votre réseau?
+        </h2>
+        <p class="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
+          Découvrez comment SD-WAN peut transformer votre connectivité d'entreprise.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">
+              Demander une soumission
+              <ArrowRight class="ml-2 h-5 w-5" />
+            </a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            1-855-888-2746
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessSecurite.vue b/apps/website-vue/src/pages/business/BusinessSecurite.vue
new file mode 100644
index 0000000..beb4569
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessSecurite.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { Shield, CheckCircle, ArrowRight, Zap, Lock, Eye, AlertTriangle } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { RouterLink } from "vue-router";
+
+const features = [
+  "Protection DDoS avancée",
+  "Pare-feu nouvelle génération",
+  "Détection d'intrusion",
+  "Caméras HD intelligentes",
+  "Surveillance 24/7",
+  "Réponse aux incidents",
+  "Alertes en temps réel",
+  "Rapports de sécurité"
+];
+
+const advantages = [
+  {
+    icon: Shield,
+    title: "Protection DDoS",
+    description: "Défense automatique contre les attaques par déni de service."
+  },
+  {
+    icon: Lock,
+    title: "Pare-feu avancé",
+    description: "Protection de nouvelle génération pour votre réseau."
+  },
+  {
+    icon: Eye,
+    title: "Surveillance 24/7",
+    description: "Monitoring continu de votre infrastructure."
+  },
+  {
+    icon: AlertTriangle,
+    title: "Réponse rapide",
+    description: "Intervention immédiate en cas d'incident de sécurité."
+  }
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <RouterLink to="/business" class="inline-flex items-center text-primary hover:underline mb-6">
+            ← Retour aux solutions affaires
+          </RouterLink>
+          <div class="w-20 h-20 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
+            <Shield class="h-10 w-10 text-primary" />
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Sécurité & <span class="text-primary">Protection DDoS</span>
+          </h1>
+          <p class="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
+            Protégez vos affaires contre les menaces externes. Solutions de sécurité intelligentes et sur mesure.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-16">
+      <div class="container mx-auto px-4">
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+          <div v-for="(advantage, index) in advantages" :key="index" class="text-center">
+            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+              <component :is="advantage.icon" class="h-8 w-8 text-primary" />
+            </div>
+            <h3 class="text-lg font-semibold text-foreground mb-2">{{ advantage.title }}</h3>
+            <p class="text-muted-foreground text-sm">{{ advantage.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="py-16 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-3xl mx-auto">
+          <h2 class="text-3xl font-bold text-center text-foreground mb-8">
+            Ce qui est inclus
+          </h2>
+          <div class="grid md:grid-cols-2 gap-4">
+            <div v-for="(feature, index) in features" :key="index" class="flex items-center gap-3 bg-background p-4 rounded-lg border">
+              <CheckCircle class="h-5 w-5 text-primary flex-shrink-0" />
+              <span class="text-foreground">{{ feature }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-16 md:py-24 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">
+          Prêt à sécuriser votre entreprise?
+        </h2>
+        <p class="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
+          Protégez votre infrastructure avec nos solutions de sécurité avancées.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">
+              Demander une soumission
+              <ArrowRight class="ml-2 h-5 w-5" />
+            </a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            1-855-888-2746
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessServicesGeres.vue b/apps/website-vue/src/pages/business/BusinessServicesGeres.vue
new file mode 100644
index 0000000..fd1f882
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessServicesGeres.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { Settings, CheckCircle, ArrowRight, Users, Shield, Zap, Clock, HeadphonesIcon, Wrench } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { RouterLink } from "vue-router";
+
+const managedServices = [
+  {
+    title: "SD-WAN",
+    description: "La solution SD-WAN fournit une alternative au réseau traditionnel WAN. Dynamisez votre réseau d'affaires et assurez l'évolutivité de votre entreprise.",
+    link: "/business/sd-wan"
+  },
+  {
+    title: "Sécurité Nuagique",
+    description: "Nos solutions de sécurité intelligentes et sur mesure vous protègent des menaces externes, sans nuire à la performance de vos infrastructures TI.",
+    link: "/business/securite"
+  },
+  {
+    title: "Réseau local",
+    description: "Transférez l'entièreté ou une partie de la responsabilité de votre infrastructure de réseau local pour vous concentrer sur ce qui importe réellement.",
+    link: "/business/services-geres"
+  },
+  {
+    title: "Solutions sans-fil",
+    description: "Conception de solutions Wi-Fi, 5G, LTE intra-immeuble et liens inter-bâtiment sans fil avec accompagnement personnalisé.",
+    link: "/business/services-geres"
+  },
+  {
+    title: "Communications en nuage",
+    description: "Au bureau, sur la route ou à la maison, notre service de communications en nuage répond à tous vos besoins de communications et de collaboration.",
+    link: "/business/telephonie"
+  }
+];
+
+const advantages = [
+  {
+    icon: Zap,
+    title: "Optimisez les performances",
+    description: "Des solutions sur mesure et gérées bout à bout pour maximiser votre réseau."
+  },
+  {
+    icon: Shield,
+    title: "Simplifiez et réduisez vos coûts",
+    description: "Payez simplement pour ce dont vous avez besoin, sans investissements hasardeux."
+  },
+  {
+    icon: Users,
+    title: "Équipe d'experts",
+    description: "Accès à des ressources qualifiées dans toutes les spécialités à une fraction du prix."
+  },
+  {
+    icon: Clock,
+    title: "Gestion sans tracas",
+    description: "On s'occupe de faire affaire avec les fournisseurs de matériel et logiciels pour vous."
+  }
+];
+
+const includedFeatures = [
+  "Gestion complète de vos TI",
+  "Maintenance proactive",
+  "Mises à jour automatiques",
+  "Support prioritaire 24/7",
+  "Rapports mensuels détaillés",
+  "Conseils stratégiques",
+  "Monitoring en temps réel",
+  "Intervention rapide"
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <RouterLink to="/business" class="inline-flex items-center text-primary hover:underline mb-6">
+            ← Retour aux solutions affaires
+          </RouterLink>
+          <div class="w-20 h-20 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
+            <Settings class="h-10 w-10 text-primary" />
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Services <span class="text-primary">Gérés</span>
+          </h1>
+          <p class="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
+            L'extension de votre équipe TI. Des solutions sur mesure, sans les aléas de la gestion.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Equation Section -->
+    <section class="py-16 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto">
+          <h2 class="text-2xl md:text-3xl font-bold text-center text-foreground mb-8">
+            Pourquoi les services gérés?
+          </h2>
+          <div class="grid md:grid-cols-4 gap-4 items-center text-center">
+            <div class="bg-background p-6 rounded-xl border">
+              <Wrench class="h-8 w-8 text-primary mx-auto mb-3" />
+              <p class="font-medium">Solutions sur mesures</p>
+            </div>
+            <div class="text-3xl font-bold text-primary hidden md:block">+</div>
+            <div class="bg-background p-6 rounded-xl border">
+              <Users class="h-8 w-8 text-primary mx-auto mb-3" />
+              <p class="font-medium">Ressources qualifiées</p>
+            </div>
+            <div class="text-3xl font-bold text-primary hidden md:block">+</div>
+          </div>
+          <div class="grid md:grid-cols-3 gap-4 items-center text-center mt-4">
+            <div class="bg-background p-6 rounded-xl border">
+              <Clock class="h-8 w-8 text-primary mx-auto mb-3" />
+              <p class="font-medium">Flexibilité et visibilité</p>
+            </div>
+            <div class="text-3xl font-bold text-primary">=</div>
+            <div class="bg-primary p-6 rounded-xl text-primary-foreground">
+              <HeadphonesIcon class="h-8 w-8 mx-auto mb-3" />
+              <p class="font-bold text-lg">Tranquillité d'esprit</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Description -->
+    <section class="py-16">
+      <div class="container mx-auto px-4">
+        <div class="max-w-3xl mx-auto text-center">
+          <p class="text-lg text-muted-foreground mb-6">
+            Grâce à nos services gérés, vous maximisez le potentiel de vos ressources internes pour qu'elles puissent se consacrer pleinement à la recherche, à l'innovation et aux projets à valeur ajoutée.
+          </p>
+          <p class="text-lg text-foreground font-medium">
+            Laissez votre équipe TI se consacrer pleinement aux activités stratégiques de l'entreprise, pendant que nous gérons votre connectivité et la maintenance de votre infrastructure réseau.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Services List -->
+    <section class="py-16 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <h2 class="text-3xl md:text-4xl font-bold text-center text-foreground mb-12">
+          Nos services gérés
+        </h2>
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
+          <Card v-for="(service, index) in managedServices" :key="index" class="group hover:shadow-lg transition-all duration-300 hover:border-primary/50">
+            <CardContent class="p-6">
+              <h3 class="text-xl font-semibold text-foreground mb-3">{{ service.title }}</h3>
+              <p class="text-muted-foreground mb-4">{{ service.description }}</p>
+              <RouterLink :to="service.link" class="text-primary hover:underline inline-flex items-center">
+                En savoir plus <ArrowRight class="ml-1 h-4 w-4" />
+              </RouterLink>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-16">
+      <div class="container mx-auto px-4">
+        <h2 class="text-3xl md:text-4xl font-bold text-center text-foreground mb-12">
+          Les avantages
+        </h2>
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+          <div v-for="(advantage, index) in advantages" :key="index" class="text-center">
+            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+              <component :is="advantage.icon" class="h-8 w-8 text-primary" />
+            </div>
+            <h3 class="text-lg font-semibold text-foreground mb-2">{{ advantage.title }}</h3>
+            <p class="text-muted-foreground text-sm">{{ advantage.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="py-16 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-3xl mx-auto">
+          <h2 class="text-3xl font-bold text-center text-foreground mb-8">
+            Ce qui est inclus
+          </h2>
+          <div class="grid md:grid-cols-2 gap-4">
+            <div v-for="(feature, index) in includedFeatures" :key="index" class="flex items-center gap-3 bg-background p-4 rounded-lg border">
+              <CheckCircle class="h-5 w-5 text-primary flex-shrink-0" />
+              <span class="text-foreground">{{ feature }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-16 md:py-24 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">
+          Prêt à simplifier votre gestion TI?
+        </h2>
+        <p class="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
+          Nos experts analysent vos besoins et vous proposent une solution personnalisée.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">
+              Demander une soumission
+              <ArrowRight class="ml-2 h-5 w-5" />
+            </a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            1-855-888-2746
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessSip.vue b/apps/website-vue/src/pages/business/BusinessSip.vue
new file mode 100644
index 0000000..40a9065
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessSip.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { Radio, CheckCircle, ArrowRight, Phone, Zap, Shield, Settings } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { RouterLink } from "vue-router";
+
+const features = [
+  "Lignes SIP illimitées",
+  "Qualité voix HD",
+  "Portabilité des numéros",
+  "Facturation à l'usage",
+  "Redondance automatique",
+  "Compatible avec vos équipements",
+  "Configuration simplifiée",
+  "Support technique inclus"
+];
+
+const advantages = [
+  {
+    icon: Phone,
+    title: "Voix HD",
+    description: "Qualité audio cristalline pour toutes vos communications."
+  },
+  {
+    icon: Zap,
+    title: "Flexibilité",
+    description: "Ajoutez ou retirez des lignes selon vos besoins en temps réel."
+  },
+  {
+    icon: Shield,
+    title: "Fiabilité",
+    description: "Redondance automatique pour une disponibilité maximale."
+  },
+  {
+    icon: Settings,
+    title: "Compatible",
+    description: "Fonctionne avec vos équipements téléphoniques existants."
+  }
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <RouterLink to="/business" class="inline-flex items-center text-primary hover:underline mb-6">
+            ← Retour aux solutions affaires
+          </RouterLink>
+          <div class="w-20 h-20 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
+            <Radio class="h-10 w-10 text-primary" />
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Liaisons <span class="text-primary">SIP</span>
+          </h1>
+          <p class="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
+            La téléphonie d'aujourd'hui - voix et données unifiées. Modernisez vos communications d'entreprise.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-16">
+      <div class="container mx-auto px-4">
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+          <div v-for="(advantage, index) in advantages" :key="index" class="text-center">
+            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+              <component :is="advantage.icon" class="h-8 w-8 text-primary" />
+            </div>
+            <h3 class="text-lg font-semibold text-foreground mb-2">{{ advantage.title }}</h3>
+            <p class="text-muted-foreground text-sm">{{ advantage.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="py-16 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-3xl mx-auto">
+          <h2 class="text-3xl font-bold text-center text-foreground mb-8">
+            Ce qui est inclus
+          </h2>
+          <div class="grid md:grid-cols-2 gap-4">
+            <div v-for="(feature, index) in features" :key="index" class="flex items-center gap-3 bg-background p-4 rounded-lg border">
+              <CheckCircle class="h-5 w-5 text-primary flex-shrink-0" />
+              <span class="text-foreground">{{ feature }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-16 md:py-24 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">
+          Prêt à moderniser votre téléphonie?
+        </h2>
+        <p class="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
+          Obtenez une soumission personnalisée pour vos liaisons SIP.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">
+              Demander une soumission
+              <ArrowRight class="ml-2 h-5 w-5" />
+            </a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            1-855-888-2746
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessTelephony.vue b/apps/website-vue/src/pages/business/BusinessTelephony.vue
new file mode 100644
index 0000000..2b32e79
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessTelephony.vue
@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { Phone, PhoneCall, Voicemail, Users, Smartphone, Clock, CheckCircle, ArrowRight, MessageSquare, PhoneForwarded, Headphones } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+
+const features = [
+  {
+    icon: PhoneCall,
+    title: "Appels illimités",
+    description: "Canada et États-Unis inclus sans frais d'interurbain"
+  },
+  {
+    icon: PhoneForwarded,
+    title: "Transfert intelligent",
+    description: "Redirigez vos appels vers n'importe quel appareil"
+  },
+  {
+    icon: Voicemail,
+    title: "Messagerie vocale",
+    description: "Recevez vos messages par courriel avec transcription"
+  },
+  {
+    icon: Smartphone,
+    title: "Application mobile",
+    description: "Votre ligne professionnelle sur votre cellulaire"
+  },
+  {
+    icon: MessageSquare,
+    title: "Système IVR",
+    description: "Menu vocal automatisé pour orienter vos clients"
+  },
+  {
+    icon: Users,
+    title: "Conférences",
+    description: "Appels de groupe jusqu'à 25 participants"
+  }
+];
+
+const plans = [
+  {
+    name: "Essentiel",
+    price: "19.99",
+    description: "Pour les petites entreprises",
+    features: [
+      "1 ligne téléphonique",
+      "Appels illimités Canada",
+      "Messagerie vocale",
+      "Afficheur inclus",
+      "Support 8h-20h"
+    ]
+  },
+  {
+    name: "Professionnel",
+    price: "34.99",
+    description: "Solution complète",
+    popular: true,
+    features: [
+      "3 lignes téléphoniques",
+      "Appels illimités Canada/USA",
+      "Système IVR inclus",
+      "Application mobile",
+      "Conférence téléphonique",
+      "Support 24/7"
+    ]
+  },
+  {
+    name: "Entreprise",
+    price: "Sur mesure",
+    description: "Pour les grandes organisations",
+    features: [
+      "Lignes illimitées",
+      "Système 3CX complet",
+      "Intégration CRM",
+      "Centre d'appels",
+      "Analytiques avancées",
+      "Gestionnaire de compte dédié"
+    ]
+  }
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <span class="inline-block px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium mb-6">
+            Téléphonie Affaires
+          </span>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Téléphonie IP{{ " " }}
+            <span class="text-primary">infonuagique</span>
+          </h1>
+          <p class="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+            Un réseau de téléphonie simple, abordable et multifonctionnel.
+            Évoluez et multipliez vos communications avec la VoIP professionnelle.
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" class="text-lg px-8">
+              Demander une démo
+              <ArrowRight class="ml-2 h-5 w-5" />
+            </Button>
+            <Button size="lg" variant="outline" class="text-lg px-8 border-border text-foreground hover:bg-accent">
+              <Phone class="mr-2 h-5 w-5" />
+              1-855-888-2746
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Benefits Section -->
+    <section class="py-16 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto">
+          <div class="grid md:grid-cols-2 gap-8 items-center">
+            <div>
+              <h2 class="text-3xl font-bold text-foreground mb-6">
+                Pourquoi passer à la téléphonie IP?
+              </h2>
+              <ul class="space-y-4">
+                <li class="flex items-start gap-3">
+                  <CheckCircle class="h-6 w-6 text-primary flex-shrink-0 mt-0.5" />
+                  <div>
+                    <strong class="text-foreground">Économies significatives</strong>
+                    <p class="text-muted-foreground">Réduisez vos coûts de téléphonie jusqu'à 50%</p>
+                  </div>
+                </li>
+                <li class="flex items-start gap-3">
+                  <CheckCircle class="h-6 w-6 text-primary flex-shrink-0 mt-0.5" />
+                  <div>
+                    <strong class="text-foreground">Flexibilité totale</strong>
+                    <p class="text-muted-foreground">Travaillez de n'importe où avec votre numéro professionnel</p>
+                  </div>
+                </li>
+                <li class="flex items-start gap-3">
+                  <CheckCircle class="h-6 w-6 text-primary flex-shrink-0 mt-0.5" />
+                  <div>
+                    <strong class="text-foreground">Fonctionnalités avancées</strong>
+                    <p class="text-muted-foreground">IVR, conférences, enregistrement d'appels inclus</p>
+                  </div>
+                </li>
+                <li class="flex items-start gap-3">
+                  <CheckCircle class="h-6 w-6 text-primary flex-shrink-0 mt-0.5" />
+                  <div>
+                    <strong class="text-foreground">Évolutivité</strong>
+                    <p class="text-muted-foreground">Ajoutez des lignes en quelques clics</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div class="bg-primary/5 rounded-2xl p-8 border border-primary/20">
+              <div class="text-center">
+                <Phone class="h-16 w-16 text-primary mx-auto mb-4" />
+                <h3 class="text-2xl font-bold text-foreground mb-2">Système 3CX</h3>
+                <p class="text-muted-foreground mb-4">
+                  Plateforme de communication unifiée leader du marché
+                </p>
+                <ul class="text-left space-y-2 text-sm text-muted-foreground">
+                  <li class="flex items-center gap-2">
+                    <CheckCircle class="h-4 w-4 text-primary" />
+                    Vidéoconférence intégrée
+                  </li>
+                  <li class="flex items-center gap-2">
+                    <CheckCircle class="h-4 w-4 text-primary" />
+                    Chat d'équipe
+                  </li>
+                  <li class="flex items-center gap-2">
+                    <CheckCircle class="h-4 w-4 text-primary" />
+                    Intégration CRM
+                  </li>
+                  <li class="flex items-center gap-2">
+                    <CheckCircle class="h-4 w-4 text-primary" />
+                    Tableau de bord analytique
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features Grid -->
+    <section class="py-16 md:py-24">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-12">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Fonctionnalités incluses
+          </h2>
+          <p class="text-muted-foreground max-w-2xl mx-auto">
+            Tout ce dont vous avez besoin pour une communication professionnelle efficace
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <Card v-for="(feature, index) in features" :key="index" class="text-center hover:shadow-lg transition-shadow">
+            <CardHeader>
+              <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-4">
+                <component :is="feature.icon" class="h-6 w-6 text-primary" />
+              </div>
+              <CardTitle class="text-lg">{{ feature.title }}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p class="text-muted-foreground">{{ feature.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Pricing Section -->
+    <section class="py-16 md:py-24 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-12">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Forfaits téléphonie affaires
+          </h2>
+          <p class="text-muted-foreground">
+            Prix par poste de travail, par mois
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+          <Card v-for="(plan, index) in plans" :key="index" :class="`relative ${plan.popular ? 'border-primary border-2 shadow-xl' : ''}`">
+            <span v-if="plan.popular" class="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium">
+              Populaire
+            </span>
+            <CardHeader class="text-center pt-8">
+              <CardTitle class="text-2xl">{{ plan.name }}</CardTitle>
+              <CardDescription>{{ plan.description }}</CardDescription>
+              <div class="mt-4">
+                <span class="text-4xl font-bold text-foreground">{{ plan.price }}</span>
+                <span v-if="plan.price !== 'Sur mesure'" class="text-muted-foreground">$/mois</span>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <ul class="space-y-3 mb-6">
+                <li v-for="(feature, idx) in plan.features" :key="idx" class="flex items-center gap-3">
+                  <CheckCircle class="h-5 w-5 text-primary flex-shrink-0" />
+                  <span class="text-muted-foreground">{{ feature }}</span>
+                </li>
+              </ul>
+              <Button :class="`w-full ${plan.popular ? '' : 'variant-outline'}`" :variant="plan.popular ? 'default' : 'outline'" as-child>
+                <a href="/#contact">
+                  {{ plan.price === "Sur mesure" ? "Nous contacter" : "Souscrire" }}
+                </a>
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-16 md:py-24 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <Headphones class="h-16 w-16 mx-auto mb-6 opacity-80" />
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">
+          Prêt à moderniser votre téléphonie?
+        </h2>
+        <p class="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
+          À partir de 3 postes de travail, il est très avantageux de passer à la téléphonie IP.
+          Contactez-nous pour une analyse personnalisée de vos besoins.
+        </p>
+        <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+          <a href="/#contact">Demander une démo gratuite</a>
+        </Button>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessVirtualisation.vue b/apps/website-vue/src/pages/business/BusinessVirtualisation.vue
new file mode 100644
index 0000000..b4973ba
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessVirtualisation.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Server, Database, Shield, Zap, HardDrive, RefreshCw, Phone, ArrowRight, CheckCircle2 } from "lucide-vue-next";
+
+const features = [
+  "Migration en direct sans interruption",
+  "Haute disponibilité des clusters",
+  "Stockage CEPH ou ZFS intégré",
+  "Interface utilisateur Web intuitive",
+  "Conteneurs Linux (LXC) inclus",
+  "Hyperviseur KVM performant",
+  "Reprise après sinistre intégrée",
+  "Support entreprise disponible",
+];
+
+const advantages = [
+  {
+    icon: Server,
+    title: "Environnement Virtuel Complet",
+    description: "Proxmox VE combine calcul, réseau et stockage dans une seule solution open source pour la virtualisation d'entreprise.",
+  },
+  {
+    icon: Database,
+    title: "Sauvegarde entreprise",
+    description: "Solution de sauvegarde avec déduplication incrémentielle, réduisant la charge réseau et économisant l'espace de stockage.",
+  },
+  {
+    icon: Shield,
+    title: "Sécurité Renforcée",
+    description: "Cryptage fort et méthodes garantissant l'intégrité des données pour des sauvegardes sécurisées même sur des cibles distantes.",
+  },
+  {
+    icon: Zap,
+    title: "Performance optimale",
+    description: "Virtualisez les charges de travail les plus exigeantes Windows et Linux avec une évolutivité dynamique selon vos besoins.",
+  },
+];
+
+const solutions = [
+  {
+    icon: HardDrive,
+    title: "Virtualisation",
+    description: "Plateforme de gestion de serveur complète pour virtualiser votre infrastructure informatique.",
+  },
+  {
+    icon: Database,
+    title: "Sauvegarde",
+    description: "Sauvegarde et restauration de machines virtuelles, conteneurs et hôtes physiques.",
+  },
+  {
+    icon: Shield,
+    title: "Sécurité Courriel",
+    description: "Protection avancée pour vos communications d'entreprise avec filtrage intelligent.",
+  },
+  {
+    icon: RefreshCw,
+    title: "Formations",
+    description: "Maîtrisez les concepts et composants avec nos formations pratiques certifiées.",
+  },
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="pt-32 pb-20 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <div class="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
+            <Server class="h-4 w-4" />
+            Virtualisation d'Entreprise
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Virtualisation <span class="text-primary">Open Source</span>
+          </h1>
+          <p class="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+            Calcul, réseau et stockage dans une seule solution. Construisez un centre de données ouvert et évolutif
+            avec nos solutions de virtualisation.
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" class="text-lg px-8" as-child>
+              <a href="/#contact">
+                Demander une démonstration
+                <ArrowRight class="ml-2 h-5 w-5" />
+              </a>
+            </Button>
+            <Button size="lg" variant="outline" class="text-lg px-8 border-border text-foreground hover:bg-accent">
+              <Phone class="mr-2 h-5 w-5" />
+              1-855-888-2746
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Solutions -->
+    <section class="py-20 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Nos Solutions de Virtualisation
+          </h2>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Une suite complète d'outils pour votre infrastructure virtuelle
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
+          <Card v-for="(solution, index) in solutions" :key="index" class="text-center hover:shadow-lg transition-shadow border-2 hover:border-primary/50">
+            <CardContent class="pt-8 pb-6">
+              <div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-6">
+                <component :is="solution.icon" class="h-8 w-8 text-primary" />
+              </div>
+              <h3 class="text-lg font-semibold mb-3">{{ solution.title }}</h3>
+              <p class="text-sm text-muted-foreground">{{ solution.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-20">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Pourquoi Choisir Nos Solutions
+          </h2>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Flexibilité maximale et fonctionnalités de classe entreprise
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+          <Card v-for="(advantage, index) in advantages" :key="index" class="hover:shadow-lg transition-shadow">
+            <CardContent class="p-8">
+              <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
+                <component :is="advantage.icon" class="h-7 w-7 text-primary" />
+              </div>
+              <h3 class="text-xl font-semibold mb-3">{{ advantage.title }}</h3>
+              <p class="text-muted-foreground">{{ advantage.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="py-20 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-5xl mx-auto">
+          <div class="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">
+                Fonctionnalités Avancées
+              </h2>
+              <p class="text-lg text-muted-foreground mb-8">
+                En combinant deux technologies de virtualisation sur une même plateforme, nous offrons une flexibilité maximale
+                à votre environnement de production.
+              </p>
+              <div class="grid sm:grid-cols-2 gap-4">
+                <div v-for="(feature, index) in features" :key="index" class="flex items-center gap-3">
+                  <CheckCircle2 class="h-5 w-5 text-primary flex-shrink-0" />
+                  <span class="text-foreground">{{ feature }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 text-center">
+              <Server class="h-24 w-24 text-primary mx-auto mb-6" />
+              <h3 class="text-2xl font-bold mb-2">100% Open Source</h3>
+              <p class="text-muted-foreground">Sans coûts de licence, avec support entreprise disponible</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-20 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          Prêt à Virtualiser Votre Infrastructure?
+        </h2>
+        <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
+          Contactez nos experts pour une démonstration gratuite et découvrez comment optimiser vos ressources.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">Demander une démonstration</a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            <Phone class="mr-2 h-5 w-5" />
+            1-855-888-2746
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessVpn.vue b/apps/website-vue/src/pages/business/BusinessVpn.vue
new file mode 100644
index 0000000..94677df
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessVpn.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { Lock, CheckCircle, ArrowRight, Shield, Globe, Users, Zap } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { RouterLink } from "vue-router";
+
+const features = [
+  "Connexion sécurisée permanente",
+  "Accès télétravail simplifié",
+  "Chiffrement de bout en bout",
+  "Multi-sites illimités",
+  "Configuration clé en main",
+  "Monitoring en temps réel",
+  "Support technique 24/7",
+  "Gestion centralisée"
+];
+
+const advantages = [
+  {
+    icon: Shield,
+    title: "Sécurité maximale",
+    description: "Chiffrement de bout en bout pour toutes vos communications."
+  },
+  {
+    icon: Globe,
+    title: "Multi-sites",
+    description: "Connectez toutes vos succursales en un réseau privé sécurisé."
+  },
+  {
+    icon: Users,
+    title: "Télétravail",
+    description: "Accès sécurisé pour vos employés à distance."
+  },
+  {
+    icon: Zap,
+    title: "Performance",
+    description: "Connexion rapide et stable pour vos applications critiques."
+  }
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <RouterLink to="/business" class="inline-flex items-center text-primary hover:underline mb-6">
+            ← Retour aux solutions affaires
+          </RouterLink>
+          <div class="w-20 h-20 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
+            <Lock class="h-10 w-10 text-primary" />
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Passerelle <span class="text-primary">VPN</span>
+          </h1>
+          <p class="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
+            Rapprochez vos succursales éloignées et vos télétravailleurs en toute sécurité.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-16">
+      <div class="container mx-auto px-4">
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
+          <div v-for="(advantage, index) in advantages" :key="index" class="text-center">
+            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+              <component :is="advantage.icon" class="h-8 w-8 text-primary" />
+            </div>
+            <h3 class="text-lg font-semibold text-foreground mb-2">{{ advantage.title }}</h3>
+            <p class="text-muted-foreground text-sm">{{ advantage.description }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="py-16 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="max-w-3xl mx-auto">
+          <h2 class="text-3xl font-bold text-center text-foreground mb-8">
+            Ce qui est inclus
+          </h2>
+          <div class="grid md:grid-cols-2 gap-4">
+            <div v-for="(feature, index) in features" :key="index" class="flex items-center gap-3 bg-background p-4 rounded-lg border">
+              <CheckCircle class="h-5 w-5 text-primary flex-shrink-0" />
+              <span class="text-foreground">{{ feature }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-16 md:py-24 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">
+          Prêt à sécuriser vos connexions?
+        </h2>
+        <p class="text-lg opacity-90 mb-8 max-w-2xl mx-auto">
+          Protégez vos communications d'entreprise avec notre solution VPN.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">
+              Demander une soumission
+              <ArrowRight class="ml-2 h-5 w-5" />
+            </a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            1-855-888-2746
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/pages/business/BusinessWifi.vue b/apps/website-vue/src/pages/business/BusinessWifi.vue
new file mode 100644
index 0000000..8679580
--- /dev/null
+++ b/apps/website-vue/src/pages/business/BusinessWifi.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Header from "@/components/layout/Header.vue";
+import Footer from "@/components/layout/Footer.vue";
+import { Wifi, Building2, Hotel, UtensilsCrossed, Hospital, Store, Clock, Phone, ArrowRight, CheckCircle2 } from "lucide-vue-next";
+
+const features = [
+  "Réseau maillé intelligent",
+  "Connexion sans interruption",
+  "Gestion centralisée depuis le cloud",
+  "Points d'accès discrets",
+  "Couverture multi-étages",
+  "Sécurité WPA3 avancée",
+  "Support technique 24/7/365",
+  "Évolutivité selon vos besoins",
+];
+
+const advantages = [
+  {
+    icon: Building2,
+    title: "Solution Gérée",
+    description: "Notre solution réseau Wi-Fi en bâtiment est gérée depuis notre centre de données. Elle vous libère de l'administration et assure la satisfaction de vos usagers.",
+  },
+  {
+    icon: Wifi,
+    title: "Réseau Maillé",
+    description: "Plusieurs points d'accès communiquent entre eux. Les utilisateurs captent le signal WiFi le plus proche sans déconnexion ni interruption.",
+  },
+  {
+    icon: Clock,
+    title: "Service 24/7",
+    description: "Notre équipe est disponible 24 heures sur 24, 365 jours par an pour vous accompagner et résoudre tout problème rapidement.",
+  },
+];
+
+const sectors = [
+  { icon: Hotel, name: "Hôtels" },
+  { icon: UtensilsCrossed, name: "Restaurants" },
+  { icon: Building2, name: "Condos" },
+  { icon: Store, name: "Commerces" },
+  { icon: Hospital, name: "Cliniques" },
+  { icon: Building2, name: "Bureaux" },
+];
+</script>
+
+<template>
+  <div class="min-h-screen bg-background">
+    <Header />
+
+    <!-- Hero Section -->
+    <section class="pt-32 pb-20 bg-gradient-to-br from-primary/10 via-background to-secondary/10">
+      <div class="container mx-auto px-4">
+        <div class="max-w-4xl mx-auto text-center">
+          <div class="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
+            <Wifi class="h-4 w-4" />
+            WiFi Commercial
+          </div>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">
+            Solution <span class="text-primary">WiFi en Bâtiment</span>
+          </h1>
+          <p class="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+            Offrez un WiFi fiable, robuste et sécuritaire à votre clientèle.
+            Notre solution s'adapte à la superficie de vos espaces.
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" class="text-lg px-8" as-child>
+              <a href="/#contact">
+                Demander une soumission
+                <ArrowRight class="ml-2 h-5 w-5" />
+              </a>
+            </Button>
+            <Button size="lg" variant="outline" class="text-lg px-8 border-border text-foreground hover:bg-accent">
+              <Phone class="mr-2 h-5 w-5" />
+              1-855-888-2746
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sectors -->
+    <section class="py-16 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-12">
+          <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-4">
+            À Qui S'adresse Notre Solution?
+          </h2>
+        </div>
+        <div class="flex flex-wrap justify-center gap-6 max-w-4xl mx-auto">
+          <div v-for="(sector, index) in sectors" :key="index" class="flex items-center gap-3 bg-background px-6 py-3 rounded-full shadow-sm">
+            <component :is="sector.icon" class="h-5 w-5 text-primary" />
+            <span class="font-medium">{{ sector.name }}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- How it Works -->
+    <section class="py-20">
+      <div class="container mx-auto px-4">
+        <div class="max-w-5xl mx-auto">
+          <div class="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">
+                Quelle est la Différence?
+              </h2>
+              <p class="text-lg text-muted-foreground mb-6">
+                <strong>WiFi Conventionnel:</strong> Les ordinateurs se connectent à la source WiFi la plus puissante.
+                En vous éloignant, le signal s'affaiblit, provoquant déconnexions et reconnexions qui interrompent votre expérience.
+              </p>
+              <p class="text-lg text-muted-foreground mb-6">
+                <strong>Solution WiFi en Bâtiment:</strong> Plusieurs points d'accès communiquent entre eux.
+                L'utilisateur "capte" le signal du point d'accès le plus proche sans subir de déconnexion.
+                Le débit est considérablement augmenté.
+              </p>
+              <p class="text-lg text-muted-foreground">
+                Notre réseau maillé permet aux utilisateurs de vivre une expérience transparente dans toute la zone de couverture.
+              </p>
+            </div>
+            <div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 text-center">
+              <Wifi class="h-24 w-24 text-primary mx-auto mb-6" />
+              <h3 class="text-2xl font-bold mb-2">Expérience Transparente</h3>
+              <p class="text-muted-foreground">Connexion continue sans interruption dans tout votre espace</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Advantages -->
+    <section class="py-20 bg-muted/30">
+      <div class="container mx-auto px-4">
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Nos Avantages
+          </h2>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Une solution complète gérée pour vous
+          </p>
+        </div>
+
+        <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+          <Card v-for="(advantage, index) in advantages" :key="index" class="hover:shadow-lg transition-shadow">
+            <CardContent class="p-8 text-center">
+              <div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-6">
+                <component :is="advantage.icon" class="h-8 w-8 text-primary" />
+              </div>
+              <h3 class="text-xl font-semibold mb-3">{{ advantage.title }}</h3>
+              <p class="text-muted-foreground">{{ advantage.description }}</p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section class="py-20">
+      <div class="container mx-auto px-4">
+        <div class="max-w-5xl mx-auto">
+          <div class="text-center mb-12">
+            <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
+              Ce Qui Est Inclus
+            </h2>
+          </div>
+          <div class="grid sm:grid-cols-2 md:grid-cols-4 gap-4">
+            <div v-for="(feature, index) in features" :key="index" class="flex items-center gap-3 bg-muted/50 p-4 rounded-lg">
+              <CheckCircle2 class="h-5 w-5 text-primary flex-shrink-0" />
+              <span class="text-foreground">{{ feature }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-20 bg-primary text-primary-foreground">
+      <div class="container mx-auto px-4 text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-6">
+          Prêt à Bonifier l'Expérience Client?
+        </h2>
+        <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
+          Contactez-nous pour une soumission gratuite et découvrez comment offrir un WiFi fiable à votre clientèle.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <Button size="lg" variant="secondary" class="text-lg px-8" as-child>
+            <a href="/#contact">Demander une soumission gratuite</a>
+          </Button>
+          <Button size="lg" variant="outline" class="text-lg px-8 border-primary-foreground text-primary-foreground hover:bg-primary-foreground hover:text-primary">
+            <Phone class="mr-2 h-5 w-5" />
+            1-855-888-2746
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <Footer />
+  </div>
+</template>
diff --git a/apps/website-vue/src/router/index.ts b/apps/website-vue/src/router/index.ts
new file mode 100644
index 0000000..3e72a07
--- /dev/null
+++ b/apps/website-vue/src/router/index.ts
@@ -0,0 +1,50 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
+
+// Routes = miroir exact du site React (apps/website src/App.tsx). Lazy-loaded.
+const routes: RouteRecordRaw[] = [
+  { path: "/", component: () => import("@/pages/Index.vue") },
+  { path: "/actualites", component: () => import("@/pages/Actualites.vue") },
+  { path: "/catalogue", component: () => import("@/pages/Catalogue.vue") },
+  { path: "/catalogue-2", component: () => import("@/pages/Catalogue2Pages.vue") },
+  { path: "/catalogue-3", component: () => import("@/pages/CatalogueDynamique.vue") },
+  { path: "/internet", component: () => import("@/pages/Internet.vue") },
+  { path: "/television", component: () => import("@/pages/Television.vue") },
+  { path: "/telephone", component: () => import("@/pages/Telephone.vue") },
+  { path: "/support", component: () => import("@/pages/Support.vue") },
+  { path: "/business", component: () => import("@/pages/business/Business.vue") },
+  { path: "/business/telephonie", component: () => import("@/pages/business/BusinessTelephony.vue") },
+  { path: "/business/multilogement", component: () => import("@/pages/business/BusinessMultilogement.vue") },
+  { path: "/business/services-geres", component: () => import("@/pages/business/BusinessServicesGeres.vue") },
+  { path: "/business/internet", component: () => import("@/pages/business/BusinessInternet.vue") },
+  { path: "/business/sd-wan", component: () => import("@/pages/business/BusinessSdWan.vue") },
+  { path: "/business/sip", component: () => import("@/pages/business/BusinessSip.vue") },
+  { path: "/business/cloud", component: () => import("@/pages/business/BusinessCloud.vue") },
+  { path: "/business/vpn", component: () => import("@/pages/business/BusinessVpn.vue") },
+  { path: "/business/securite", component: () => import("@/pages/business/BusinessSecurite.vue") },
+  { path: "/business/amplification-cellulaire", component: () => import("@/pages/business/BusinessAmplificationCellulaire.vue") },
+  { path: "/business/virtualisation", component: () => import("@/pages/business/BusinessVirtualisation.vue") },
+  { path: "/business/reseau-inter-sites", component: () => import("@/pages/business/BusinessReseauInterSites.vue") },
+  { path: "/business/wifi", component: () => import("@/pages/business/BusinessWifi.vue") },
+  { path: "/business/cablage", component: () => import("@/pages/business/BusinessCablage.vue") },
+  { path: "/business/microsoft-365", component: () => import("@/pages/business/BusinessMicrosoft365.vue") },
+  { path: "/contrat-blb", component: () => import("@/pages/ContratBLB.vue") },
+  { path: "/publicite", component: () => import("@/pages/PubliciteLettre.vue") },
+  { path: "/publicite-print", component: () => import("@/pages/PublicitePrint.vue") },
+  { path: "/brand-guidelines", component: () => import("@/pages/BrandGuidelines.vue") },
+  { path: "/admin/login", component: () => import("@/pages/AdminLogin.vue") },
+  { path: "/admin/import", component: () => import("@/pages/AdminImport.vue") },
+  { path: "/accessibilite", component: () => import("@/pages/Accessibilite.vue") },
+  { path: "/politique-de-confidentialite", component: () => import("@/pages/PolitiqueConfidentialite.vue") },
+  { path: "/:pathMatch(.*)*", component: () => import("@/pages/NotFound.vue") },
+];
+
+const router = createRouter({
+  history: createWebHistory("/next/"),
+  routes,
+  // Équivalent du <ScrollToTop /> React : remonte en haut à chaque navigation.
+  scrollBehavior() {
+    return { top: 0 };
+  },
+});
+
+export default router;
diff --git a/apps/website-vue/tailwind.config.ts b/apps/website-vue/tailwind.config.ts
new file mode 100644
index 0000000..ec215fa
--- /dev/null
+++ b/apps/website-vue/tailwind.config.ts
@@ -0,0 +1,167 @@
+import type { Config } from "tailwindcss";
+import animate from "tailwindcss-animate";
+
+// Copié VERBATIM du site React (apps/website) pour un rendu pixel-identique.
+export default {
+  darkMode: ["class"],
+  content: [
+    "./index.html",
+    "./src/**/*.{ts,tsx,vue}",
+  ],
+  prefix: "",
+  theme: {
+  	container: {
+  		center: true,
+  		padding: '2rem',
+  		screens: {
+  			'2xl': '1400px'
+  		}
+  	},
+  	extend: {
+  		fontFamily: {
+  			sans: [
+  				'Plus Jakarta Sans',
+  				'system-ui',
+  				'sans-serif'
+  			],
+  			display: [
+  				'Space Grotesk',
+  				'system-ui',
+  				'sans-serif'
+  			]
+  		},
+  		colors: {
+  			'targo-green': {
+  				DEFAULT: '#00C853',
+  				light: '#69F0AE',
+  				dark: '#005026'
+  			},
+  			'targo-gray': '#64748B',
+  			'targo-dark': '#1C1E26',
+  			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))'
+  			},
+  			sidebar: {
+  				DEFAULT: 'hsl(var(--sidebar-background))',
+  				foreground: 'hsl(var(--sidebar-foreground))',
+  				primary: 'hsl(var(--sidebar-primary))',
+  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+  				accent: 'hsl(var(--sidebar-accent))',
+  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+  				border: 'hsl(var(--sidebar-border))',
+  				ring: 'hsl(var(--sidebar-ring))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			},
+  			'pulse-glow': {
+  				'0%, 100%': {
+  					opacity: '0.5',
+  					transform: 'scale(1)'
+  				},
+  				'50%': {
+  					opacity: '1',
+  					transform: 'scale(1.05)'
+  				}
+  			},
+  			'slide-up': {
+  				from: {
+  					transform: 'translateY(20px)',
+  					opacity: '0'
+  				},
+  				to: {
+  					transform: 'translateY(0)',
+  					opacity: '1'
+  				}
+  			},
+  			'fade-in': {
+  				from: {
+  					opacity: '0'
+  				},
+  				to: {
+  					opacity: '1'
+  				}
+  			},
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--reka-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--reka-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out',
+  			'pulse-glow': 'pulse-glow 3s ease-in-out infinite',
+  			'slide-up': 'slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards',
+  			'fade-in': 'fade-in 0.5s ease-out forwards',
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
+  		},
+  		backgroundImage: {
+  			'glass-gradient': 'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))'
+  		}
+  	}
+  },
+  plugins: [animate],
+} satisfies Config;
diff --git a/apps/website-vue/tsconfig.json b/apps/website-vue/tsconfig.json
new file mode 100644
index 0000000..5bd3f09
--- /dev/null
+++ b/apps/website-vue/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "vite.config.ts", "tailwind.config.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/apps/website-vue/tsconfig.node.json b/apps/website-vue/tsconfig.node.json
new file mode 100644
index 0000000..1b25641
--- /dev/null
+++ b/apps/website-vue/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": false
+  },
+  "include": ["vite.config.ts", "tailwind.config.ts"]
+}
diff --git a/apps/website-vue/vite.config.ts b/apps/website-vue/vite.config.ts
new file mode 100644
index 0000000..f5ea2a5
--- /dev/null
+++ b/apps/website-vue/vite.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+
+// Servi sous www.gigafibre.ca/next pendant la migration (avant de remplacer le site React).
+export default defineConfig({
+  base: "/next/",
+  server: {
+    host: "::",
+    port: 8081,
+  },
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});