From 2153c2fa212d71dcc8c6139a250626a11399465d Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Mon, 27 Oct 2025 21:46:58 -0300
Subject: [PATCH 01/10] style(catalog): setup tailwind

---
 package-lock.json | 673 +++++++++++++++++++++++++++++++++++++++++-----
 package.json      |   4 +-
 vite.config.js    |   6 +-
 3 files changed, 614 insertions(+), 69 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 95bf19b..fe92e60 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,16 @@
 {
   "name": "mod-catalog",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mod-catalog",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "dependencies": {
+        "@tailwindcss/vite": "^4.1.16",
         "pinia": "^2.0.28",
+        "tailwindcss": "^4.1.16",
         "vue": "^3.2.45"
       },
       "devDependencies": {
@@ -1084,7 +1086,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1101,7 +1102,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1118,7 +1118,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1135,7 +1134,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1152,7 +1150,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1169,7 +1166,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1186,7 +1182,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1203,7 +1198,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1220,7 +1214,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1237,7 +1230,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1254,7 +1246,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1271,7 +1262,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1288,7 +1278,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1305,7 +1294,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1322,7 +1310,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1339,7 +1326,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1356,7 +1342,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1373,7 +1358,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1390,7 +1374,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1407,7 +1390,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1424,7 +1406,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1441,7 +1422,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1458,7 +1438,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1475,7 +1454,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1492,7 +1470,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1509,7 +1486,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1867,7 +1843,6 @@
       "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==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1878,7 +1853,6 @@
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
       "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -1889,7 +1863,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1905,7 +1878,6 @@
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -2077,7 +2049,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2091,7 +2062,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2105,7 +2075,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2119,7 +2088,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2133,7 +2101,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2147,7 +2114,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2161,7 +2127,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2175,7 +2140,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2189,7 +2153,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2203,7 +2166,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2217,7 +2179,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2231,7 +2192,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2245,7 +2205,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2259,7 +2218,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2273,7 +2231,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2287,7 +2244,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2301,7 +2257,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2315,7 +2270,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2329,7 +2283,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2343,7 +2296,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2357,7 +2309,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2371,13 +2322,323 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.16.tgz",
+      "integrity": "sha512-BX5iaSsloNuvKNHRN3k2RcCuTEgASTo77mofW0vmeHkfrDWaoFAFvNHpEgtu0eqyypcyiBkDWzSMxJhp3AUVcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.19",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.16"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.16.tgz",
+      "integrity": "sha512-2OSv52FRuhdlgyOQqgtQHuCgXnS8nFSYRp2tJ+4WZXKgTxqPy7SMSls8c3mPT5pkZ17SBToGM5LHEJBO7miEdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-x64": "4.1.16",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.16",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.16",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.16",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.16",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.16"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.16.tgz",
+      "integrity": "sha512-8+ctzkjHgwDJ5caq9IqRSgsP70xhdhJvm+oueS/yhD5ixLhqTw9fSL1OurzMUhBwE5zK26FXLCz2f/RtkISqHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.16.tgz",
+      "integrity": "sha512-C3oZy5042v2FOALBZtY0JTDnGNdS6w7DxL/odvSny17ORUnaRKhyTse8xYi3yKGyfnTUOdavRCdmc8QqJYwFKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.16.tgz",
+      "integrity": "sha512-vjrl/1Ub9+JwU6BP0emgipGjowzYZMjbWCDqwA2Z4vCa+HBSpP4v6U2ddejcHsolsYxwL5r4bPNoamlV0xDdLg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.16.tgz",
+      "integrity": "sha512-TSMpPYpQLm+aR1wW5rKuUuEruc/oOX3C7H0BTnPDn7W/eMw8W+MRMpiypKMkXZfwH8wqPIRKppuZoedTtNj2tg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.16.tgz",
+      "integrity": "sha512-p0GGfRg/w0sdsFKBjMYvvKIiKy/LNWLWgV/plR4lUgrsxFAoQBFrXkZ4C0w8IOXfslB9vHK/JGASWD2IefIpvw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.16.tgz",
+      "integrity": "sha512-DoixyMmTNO19rwRPdqviTrG1rYzpxgyYJl8RgQvdAQUzxC1ToLRqtNJpU/ATURSKgIg6uerPw2feW0aS8SNr/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.16.tgz",
+      "integrity": "sha512-H81UXMa9hJhWhaAUca6bU2wm5RRFpuHImrwXBUvPbYb+3jo32I9VIwpOX6hms0fPmA6f2pGVlybO6qU8pF4fzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.16.tgz",
+      "integrity": "sha512-ZGHQxDtFC2/ruo7t99Qo2TTIvOERULPl5l0K1g0oK6b5PGqjYMga+FcY1wIUnrUxY56h28FxybtDEla+ICOyew==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.16.tgz",
+      "integrity": "sha512-Oi1tAaa0rcKf1Og9MzKeINZzMLPbhxvm7rno5/zuP1WYmpiG0bEHq4AcRUiG2165/WUzvxkW4XDYCscZWbTLZw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.16.tgz",
+      "integrity": "sha512-B01u/b8LteGRwucIBmCQ07FVXLzImWESAIMcUU6nvFt/tYsQ6IHz8DmZ5KtvmwxD+iTYBtM1xwoGXswnlu9v0Q==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.7",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.5.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.5.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.0.7",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@tybys/wasm-util": "^0.10.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.1",
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.16.tgz",
+      "integrity": "sha512-zX+Q8sSkGj6HKRTMJXuPvOcP8XfYON24zJBRPlszcH1Np7xuHXhWn8qfFjIujVzvH3BHU+16jBXwgpl20i+v9A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.16.tgz",
+      "integrity": "sha512-m5dDFJUEejbFqP+UXVstd4W/wnxA4F61q8SoL+mqTypId2T2ZpuxosNSgowiCnLp2+Z+rivdU0AqpfgiD7yCBg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.16.tgz",
+      "integrity": "sha512-bbguNBcDxsRmi9nnlWJxhfDWamY3lmcyACHcdO1crxfzuLpOhHLLtEIN/nCbbAtj5rchUgQD17QVAKi1f7IsKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.16",
+        "@tailwindcss/oxide": "4.1.16",
+        "tailwindcss": "4.1.16"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
     "node_modules/@types/chai": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.2.tgz",
@@ -2409,7 +2670,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json-schema": {
@@ -2423,7 +2683,7 @@
       "version": "24.7.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.7.0.tgz",
       "integrity": "sha512-IbKooQVqUBrlzWTi79E8Fw78l8k1RNtlDDNWsFZs7XonuQSJ8oNYfEeclhprUldXISRMLzBpILuKgPlIxm+/Yw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.14.0"
@@ -4080,6 +4340,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -4177,6 +4446,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -4356,7 +4638,6 @@
       "version": "0.25.10",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.10.tgz",
       "integrity": "sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -4819,7 +5100,6 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -4941,7 +5221,6 @@
       "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,
@@ -5195,7 +5474,6 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/graphemer": {
@@ -5983,7 +6261,6 @@
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
@@ -6203,6 +6480,255 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -7070,7 +7596,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -7378,7 +7903,6 @@
       "version": "4.52.4",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz",
       "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -8039,6 +8563,25 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
+      "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/test-exclude": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-7.0.1.tgz",
@@ -8092,7 +8635,6 @@
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -8369,7 +8911,7 @@
       "version": "7.14.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.14.0.tgz",
       "integrity": "sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unicorn-magic": {
@@ -8448,7 +8990,6 @@
       "version": "7.1.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.9.tgz",
       "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
diff --git a/package.json b/package.json
index 7b12f1a..3ddd73c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mod-catalog",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "private": true,
   "scripts": {
@@ -15,7 +15,9 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.16",
     "pinia": "^2.0.28",
+    "tailwindcss": "^4.1.16",
     "vue": "^3.2.45"
   },
   "devDependencies": {
diff --git a/vite.config.js b/vite.config.js
index e433825..270ebfe 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,7 @@ import { defineConfig, loadEnv } from "vite";
 import { federation } from "@module-federation/vite";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
+import tailwindcss from "@tailwindcss/vite";
 import path from "path";
 
 export default defineConfig(async ({ mode }) => {
@@ -33,6 +34,9 @@ export default defineConfig(async ({ mode }) => {
       },
     },
     plugins: [
+      vue(),
+      vueJsx(),
+      tailwindcss(),
       federation({
         name: "catalog",
         filename: "remoteEntry.js",
@@ -41,8 +45,6 @@ export default defineConfig(async ({ mode }) => {
         },
         shared: {},
       }),
-      vue(),
-      vueJsx(),
     ],
     test: {
       globals: true,

From eaa66bdd8b1821edb5bd5b65c657f708b355ff66 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Mon, 27 Oct 2025 23:12:40 -0300
Subject: [PATCH 02/10] style: add header component

---
 package.json              |  1 +
 src/components/Header.vue | 51 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 src/components/Header.vue

diff --git a/package.json b/package.json
index 3ddd73c..39f1d91 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.16",
+    "lucide-vue-next": "^0.548.0",
     "pinia": "^2.0.28",
     "tailwindcss": "^4.1.16",
     "vue": "^3.2.45"
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..c2cce61
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,51 @@
+<template>
+	<header class="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0f]/80 backdrop-blur-xl border-b border-white/5">
+		<div class="flex items-center justify-between px-8 py-4">
+			<div class="flex items-center gap-8">
+				<button @click="() => onPageChange('home')" class="flex items-center gap-2">
+					<div class="relative">
+						<Play class="w-8 h-8 fill-current" :style="{ color: '#71BEDB' }" />
+						<div class="absolute inset-0 blur-xl opacity-50" :style="{ backgroundColor: '#71BEDB' }"></div>
+					</div>
+					<span class="text-2xl tracking-tight">
+						<span :style="{ color: '#71BEDB' }">Modu</span>Flix
+					</span>
+				</button>
+
+				<nav class="hidden md:flex items-center gap-6">
+					<button @click="() => onPageChange('home')"
+						:class="['transition-colors', currentPage == 'home' ? 'text-white' : 'text-gray-400 hover:text-white']">
+						Início
+					</button>
+				</nav>
+			</div>
+
+			<div class="flex items-center gap-4">
+				<button class="p-2 hover:bg-white/10 rounded-full transition-colors">
+					<Search class="w-5 h-5" />
+				</button>
+				<button class="p-2 hover:bg-white/10 rounded-full transition-colors">
+					<User class="w-5 h-5" />
+				</button>
+			</div>
+		</div>
+	</header>
+</template>
+<script setup>
+import { Play, Search, User } from "lucide-vue-next";
+
+defineProps({
+	currentPage: {
+		type: String,
+		default: 'home'
+	},
+	onPageChange: {
+		type: Function
+
+	},
+	onSearchOpen: {
+		type: Function,
+	}
+});
+
+</script>
\ No newline at end of file

From e45114c8a228c658c5330a1a05d74cb7bf705b67 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Mon, 27 Oct 2025 23:58:12 -0300
Subject: [PATCH 03/10] style: create hero component

---
 src/components/Hero.vue | 83 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/components/Hero.vue

diff --git a/src/components/Hero.vue b/src/components/Hero.vue
new file mode 100644
index 0000000..a701714
--- /dev/null
+++ b/src/components/Hero.vue
@@ -0,0 +1,83 @@
+<template>
+	<section class="relative h-[85vh] flex items-end pt-20 pb-16">
+		<div class="absolute inset-0 z-0">
+			<img
+				src="https://images.unsplash.com/photo-1595623654300-b27329804025?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0ZWNobm9sb2d5JTIwY29kaW5nfGVufDF8fHx8MTc2MTA3Njc4NHww&ixlib=rb-4.1.0&q=80&w=1080"
+				alt="Featured content" class="w-full h-full object-cover" />
+			<div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0f] via-[#0a0a0f]/60 to-transparent" />
+			<div class="absolute inset-0 bg-gradient-to-r from-[#0a0a0f] via-transparent to-transparent" />
+			<div class="absolute inset-0 bg-gradient-to-b from-[#0a0a0f]/40 via-transparent to-transparent" />
+
+			<div class="absolute inset-0 opacity-40">
+				<div class="absolute top-0 left-0 w-96 h-96 rounded-full filter blur-[120px] animate-pulse" :style="{
+					backgroundColor: '#71BEDB'
+				}" />
+				<div class="absolute bottom-0 right-0 w-96 h-96 rounded-full filter blur-[120px] animate-pulse" :style="{
+					backgroundColor: '#f4f468', animationDelay: '1s'
+				}" />
+			</div>
+		</div>
+
+		<div class="relative z-10 px-8 max-w-3xl">
+			<div class="inline-flex items-center gap-2 px-4 py-2 backdrop-blur-md rounded-full border border-white/10 mb-4"
+				:style="{ background: 'linear-gradient(120deg, rgba(113, 190, 219, 0.3) 30%, rgba(244, 244, 104, 0.3))' }">
+				<span class="w-2 h-2 rounded-full animate-pulse" :style="{ backgroundColor: '#71BEDB' }" />
+				<span class="text-sm">Novidade</span>
+			</div>
+
+			<h1 class="mb-4 text-6xl md:text-7xl lg:text-8xl tracking-tight text-transparent bg-clip-text"
+				:style="{ backgroundImage: 'linear-gradient(120deg, #71bedb 30%, #f4f468)' }">
+				Microfrontends
+			</h1>
+			<h2 class="mb-6 text-3xl md:text-4xl lg:text-5xl tracking-tight text-gray-200">
+				Arquitetura do Futuro
+			</h2>
+
+			<p class="mb-8 max-w-xl text-gray-300 text-lg">
+				Aprenda como construir aplicações escaláveis e modulares usando a arquitetura de microfrontends.
+				Do básico ao avançado, com exemplos práticos e estudos de caso reais.
+			</p>
+
+			<div class="flex items-center gap-6 mb-8 text-sm">
+				<span class="text-green-400">98% relevante</span>
+				<span class="text-gray-400">45 min</span>
+				<span class="px-2 py-1 border border-gray-600 rounded text-gray-400">2025</span>
+			</div>
+
+			<div class="flex items-center gap-4">
+				<button
+					class="px-8 py-4 rounded-lg transition-all duration-300 flex items-center gap-3 shadow-xl hover:scale-105"
+					:style="{
+						backgroundImage: 'linear-gradient(120deg, #71bedb 30%, #f4f468)',
+						boxShadow: '0 20px 25px -5px rgba(113, 190, 219, 0.3), 0 10px 10px -5px rgba(113, 190, 219, 0.2)'
+					}" :mouseenter="(e: any) => e.currentTarget.style.boxShadow = '0 20px 25px -5px rgba(113, 190, 219, 0.5), 0 10px 10px - 5px rgba(113, 190, 219, 0.3)'"
+					:mouseleave="(e: any) => e.currentTarget.style.boxShadow = '0 20px 25px -5px rgba(113, 190, 219, 0.3), 0 10px 10px - 5px rgba(113, 190, 219, 0.2)'">
+					<Play class="w-6 h-6 fill-current" />
+					<span class="text-lg text-black">Assistir Agora</span>
+				</button>
+				<button
+					class="px-8 py-4 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-lg transition-all duration-300 flex items-center gap-3 border hover:border-[#71BEDB]/50"
+					:style="{ borderColor: 'rgba(113, 190, 219, 0.2)' }">
+					<Info class="w-6 h-6" />
+					<span class="text-lg">Mais Informações</span>
+				</button>
+			</div>
+		</div>
+
+		<div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0f] to-transparent z-5" />
+	</section>
+</template>
+<script setup lang="ts">
+import { Info, Play } from 'lucide-vue-next';
+
+
+defineEmits<{
+	onPlay: {
+		type: Function,
+	}
+	onShowDetails: {
+		type: Function,
+	}
+}>();
+
+</script>
\ No newline at end of file

From d2714dfa6e389eb7645dcf74715cfe42b4203ac7 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 28 Oct 2025 00:57:01 -0300
Subject: [PATCH 04/10] style: adjust hero background

---
 src/components/Hero.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Hero.vue b/src/components/Hero.vue
index a701714..ab0fce1 100644
--- a/src/components/Hero.vue
+++ b/src/components/Hero.vue
@@ -10,10 +10,10 @@
 
 			<div class="absolute inset-0 opacity-40">
 				<div class="absolute top-0 left-0 w-96 h-96 rounded-full filter blur-[120px] animate-pulse" :style="{
-					backgroundColor: '#71BEDB'
+					backgroundColor: '#71BEDB30'
 				}" />
 				<div class="absolute bottom-0 right-0 w-96 h-96 rounded-full filter blur-[120px] animate-pulse" :style="{
-					backgroundColor: '#f4f468', animationDelay: '1s'
+					backgroundColor: '#f4f46830', animationDelay: '1s'
 				}" />
 			</div>
 		</div>

From 359af293332537d84979c402e28ed78dc02660d5 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 28 Oct 2025 00:57:40 -0300
Subject: [PATCH 05/10] style: create component VideoCard

---
 src/components/VideoCard.vue | 66 ++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/components/VideoCard.vue

diff --git a/src/components/VideoCard.vue b/src/components/VideoCard.vue
new file mode 100644
index 0000000..ce4a653
--- /dev/null
+++ b/src/components/VideoCard.vue
@@ -0,0 +1,66 @@
+<template>
+	<div class="group relative cursor-pointer transition-all duration-300 ease-out" @mouseenter="() => isHovered = true"
+		@mouseleave="() => isHovered = false">
+		<div
+			class="relative aspect-video rounded-lg overflow-hidden bg-gradient-to-br from-violet-900/20 to-cyan-900/20 border border-white/5">
+			<img :src="thumbnail" :alt="title"
+				class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" />
+
+			<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60" />
+
+			<div class="absolute top-2 right-2 px-2 py-1 bg-black/70 backdrop-blur-sm rounded text-xs">
+				{{ duration }}
+			</div>
+
+			<div class="absolute top-2 left-2 px-2 py-1 backdrop-blur-sm rounded text-xs" :style="{
+				backgroundColor: 'rgba(113, 190, 219, 0.8)'
+			}">
+				{{ category }}
+			</div>
+
+
+			<div v-if="isHovered"
+				class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent flex items-end p-4 animate-in fade-in duration-200">
+				<div class="w-full">
+					<h4 class="mb-3 line-clamp-2">{{ title }}</h4>
+					<div class="flex items-center gap-2">
+						<button class="px-4 py-2 rounded-lg transition-all duration-300 flex items-center gap-2 shadow-lg" :style="{
+							backgroundImage: 'linear-gradient(120deg, #71bedb 30%, #f4f468)',
+							boxShadow: '0 10px 15px -3px rgba(113, 190, 219, 0.3)'
+						}" @mouseenter="(e: any) => e.currentTarget.style.boxShadow = '0 10px 15px -3px rgba(113, 190, 219, 0.5)'"
+							@mouseleave="(e: any) => e.currentTarget.style.boxShadow = '0 10px 15px -3px rgba(113, 190, 219, 0.3)'">
+							<Play class="w-4 h-4 text-black" />
+							<span class="text-sm text-black">Assistir</span>
+						</button>
+						<button class="p-2 bg-white/10 hover:bg-white/20 rounded-full backdrop-blur-sm transition-colors">
+							<Plus class="w-4 h-4" />
+						</button>
+						<button class="p-2 bg-white/10 hover:bg-white/20 rounded-full backdrop-blur-sm transition-colors">
+							<ThumbsUp class="w-4 h-4" />
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Play, Plus, ThumbsUp } from 'lucide-vue-next';
+import { ref } from 'vue';
+
+interface VideoCardProps {
+	id: string;
+	title: string;
+	thumbnail: string;
+	duration: string;
+	category: string;
+}
+
+const isHovered = ref(false);
+
+const props = defineProps<VideoCardProps>();
+
+const { title, thumbnail, duration, category } = props;
+
+</script>
\ No newline at end of file

From 6968ba049fb427ea2aaa5917b65d57b7d088a896 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 28 Oct 2025 00:58:42 -0300
Subject: [PATCH 06/10] style: add VideoCarousel component

---
 package-lock.json                |  39 +++++++
 package.json                     |   1 +
 src/App.vue                      | 173 ++++++++++++++++++++++++++++++-
 src/components/VideoCarousel.vue | 166 +++++++++++++++++++++++++++++
 4 files changed, 377 insertions(+), 2 deletions(-)
 create mode 100644 src/components/VideoCarousel.vue

diff --git a/package-lock.json b/package-lock.json
index fe92e60..ea9cf83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.2.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.16",
+        "embla-carousel-vue": "^8.6.0",
+        "lucide-vue-next": "^0.548.0",
         "pinia": "^2.0.28",
         "tailwindcss": "^4.1.16",
         "vue": "^3.2.45"
@@ -4439,6 +4441,34 @@
       "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/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -6848,6 +6878,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-vue-next": {
+      "version": "0.548.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.548.0.tgz",
+      "integrity": "sha512-VtL3HkoPOhrhBkJdLWm6JY1kmCetsri1lvoaenem5PQagO2cjR1sNENNnuLJHzl/l0IcFg8RKJyiHt2GZtvj2A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.19",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
diff --git a/package.json b/package.json
index 39f1d91..dc90465 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.16",
+    "embla-carousel-vue": "^8.6.0",
     "lucide-vue-next": "^0.548.0",
     "pinia": "^2.0.28",
     "tailwindcss": "^4.1.16",
diff --git a/src/App.vue b/src/App.vue
index e7ff6fa..04377b7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,174 @@
+<script setup lang="ts">
+import Header from './components/Header.vue';
+import Hero from './components/Hero.vue';
+import VideoCarousel from './components/VideoCarousel.vue';
+
+
+const featuredArchitectures = [
+	{
+		id: '1',
+		title: 'Module Federation: Compartilhando Código Entre Microfrontends',
+		thumbnail: 'https://images.unsplash.com/photo-1431576901776-e539bd916ba2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzb2Z0d2FyZSUyMGFyY2hpdGVjdHVyZXxlbnwxfHx8fDE3NjExMDIyNDF8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '32 min',
+		category: 'Arquitetura',
+	},
+	{
+		id: '2',
+		title: 'Comunicação entre Microfrontends: Event Bus e Context',
+		thumbnail: 'https://images.unsplash.com/photo-1642229407420-a659dac2f029?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtaWNyb3NlcnZpY2VzJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjExMDIyNDJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '28 min',
+		category: 'Comunicação',
+	},
+	{
+		id: '3',
+		title: 'Design System Distribuído para Microfrontends',
+		thumbnail: 'https://images.unsplash.com/photo-1593720213428-28a5b9e94613?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmcm9udGVuZCUyMGRldmVsb3BtZW50fGVufDF8fHx8MTc2MTEwMjI0Mnww&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '41 min',
+		category: 'Design',
+	},
+	{
+		id: '4',
+		title: 'Deploy e CI/CD para Arquitetura Microfrontend',
+		thumbnail: 'https://images.unsplash.com/photo-1667984390538-3dea7a3fe33d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjbG91ZCUyMGNvbXB1dGluZ3xlbnwxfHx8fDE3NjEwODM0MDl8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '36 min',
+		category: 'DevOps',
+	},
+	{
+		id: '5',
+		title: 'Micro Frontend com Single-SPA Framework',
+		thumbnail: 'https://images.unsplash.com/photo-1457305237443-44c3d5a30b89?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3ZWIlMjBkZXZlbG9wbWVudHxlbnwxfHx8fDE3NjEwNTI3ODh8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '52 min',
+		category: 'Framework',
+	},
+	{
+		id: '6',
+		title: 'Estratégias de Roteamento em Microfrontends',
+		thumbnail: 'https://images.unsplash.com/photo-1515879218367-8466d910aaa4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9ncmFtbWluZyUyMGNvZGV8ZW58MXx8fHwxNzYxMDE0NjQ3fDA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '24 min',
+		category: 'Roteamento',
+	},
+];
+
+const practicalMicrofrontends = [
+	{
+		id: '7',
+		title: 'Construindo um E-commerce com Microfrontends',
+		thumbnail: 'https://images.unsplash.com/photo-1558181445-eca4774b2a37?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkZXZlbG9wZXIlMjB3b3Jrc3BhY2V8ZW58MXx8fHwxNzYxMDgzODM3fDA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '1h 15min',
+		category: 'Prático',
+	},
+	{
+		id: '8',
+		title: 'Gerenciamento de Estado Global em Microfrontends',
+		thumbnail: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkaWdpdGFsJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjEwMDg4ODJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '38 min',
+		category: 'Estado',
+	},
+	{
+		id: '9',
+		title: 'Performance e Otimização em Arquitetura Distribuída',
+		thumbnail: 'https://images.unsplash.com/photo-1644261766628-3af7203be678?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcGklMjBpbnRlZ3JhdGlvbnxlbnwxfHx8fDE3NjEwMTU1Mzh8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '45 min',
+		category: 'Performance',
+	},
+	{
+		id: '10',
+		title: 'Testes End-to-End em Microfrontends',
+		thumbnail: 'https://images.unsplash.com/photo-1519662978799-2f05096d3636?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBhcmNoaXRlY3R1cmV8ZW58MXx8fHwxNzYxMDQ1MDQzfDA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '33 min',
+		category: 'Testes',
+	},
+	{
+		id: '11',
+		title: 'Monitoramento e Observabilidade de Microfrontends',
+		thumbnail: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkYXRhJTIwdmlzdWFsaXphdGlvbnxlbnwxfHx8fDE3NjEwMDg1NjZ8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '29 min',
+		category: 'Monitoramento',
+	},
+	{
+		id: '12',
+		title: 'Migração de Monolito para Microfrontends',
+		thumbnail: 'https://images.unsplash.com/photo-1595623654300-b27329804025?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0ZWNobm9sb2d5JTIwY29kaW5nfGVufDF8fHx8MTc2MTA3Njc4NHww&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '58 min',
+		category: 'Migração',
+	},
+];
+
+const advancedPatterns = [
+	{
+		id: '13',
+		title: 'Micro Frontends com React e Vue no Mesmo Projeto',
+		thumbnail: 'https://images.unsplash.com/photo-1593720213428-28a5b9e94613?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmcm9udGVuZCUyMGRldmVsb3BtZW50fGVufDF8fHx8MTc2MTEwMjI0Mnww&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '42 min',
+		category: 'Avançado',
+	},
+	{
+		id: '14',
+		title: 'Server-Side Rendering em Microfrontends',
+		thumbnail: 'https://images.unsplash.com/photo-1667984390538-3dea7a3fe33d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjbG91ZCUyMGNvbXB1dGluZ3xlbnwxfHx8fDE3NjEwODM0MDl8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '51 min',
+		category: 'SSR',
+	},
+	{
+		id: '15',
+		title: 'Edge Computing e Microfrontends',
+		thumbnail: 'https://images.unsplash.com/photo-1642229407420-a659dac2f029?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtaWNyb3NlcnZpY2VzJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjExMDIyNDJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '37 min',
+		category: 'Edge',
+	},
+	{
+		id: '16',
+		title: 'Segurança e Autenticação Distribuída',
+		thumbnail: 'https://images.unsplash.com/photo-1515879218367-8466d910aaa4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9ncmFtbWluZyUyMGNvZGV8ZW58MXx8fHwxNzYxMDE0NjQ3fDA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '44 min',
+		category: 'Segurança',
+	},
+	{
+		id: '17',
+		title: 'GraphQL Federation em Microfrontends',
+		thumbnail: 'https://images.unsplash.com/photo-1644261766628-3af7203be678?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcGklMjBpbnRlZ3JhdGlvbnxlbnwxfHx8fDE3NjEwMTU1Mzh8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '39 min',
+		category: 'GraphQL',
+	},
+	{
+		id: '18',
+		title: 'Micro Frontends em Aplicações Mobile',
+		thumbnail: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxkaWdpdGFsJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjEwMDg4ODJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '48 min',
+		category: 'Mobile',
+	},
+];
+</script>
+
 <template>
-	<div class="catalog">
-		<h1>Catalog Views</h1>
+	<div class="dark min-h-screen bg-[#0a0a0f] text-white overflow-x-hidden">
+		<div class="fixed inset-0 z-0 opacity-30">
+			<div class="absolute top-1/4 -left-48 w-96 h-96 rounded-full filter blur-[150px] animate-pulse" :style="{
+				backgroundColor: '#71BEDB'
+			}" />
+			<div class=" absolute top-1/2 right-0 w-96 h-96 rounded-full filter blur-[150px] animate-pulse" :style="{
+				backgroundColor: '#f4f468', animationDelay: '2s'
+			}" />
+			<div class="absolute bottom-1/4 left-1/3 w-96 h-96 rounded-full filter blur-[150px] animate-pulse" :style="{
+				backgroundColor: '#71BEDB', animationDelay: '4s'
+			}" />
+		</div>
+
+		<div class="relative z-10">
+			<Header />
+			<main class="z-10">
+				<Hero />
+				<VideoCarousel class="mt-4" title="Arquiteturas em Destaque" :videos="featuredArchitectures" />
+				<VideoCarousel title="Microfrontends na Prática" :videos="practicalMicrofrontends" />
+				<VideoCarousel title="Padrões Avançados" :videos="advancedPatterns" />
+			</main>
+
+		</div>
+
+		<!-- <SearchModal open={searchOpen} onOpenChange={setSearchOpen} /> -->
+		<!-- <VideoInfoModal open={infoOpen} onOpenChange={setInfoOpen} /> -->
 	</div>
 </template>
+<style>
+@import "tailwindcss";
+</style>
\ No newline at end of file
diff --git a/src/components/VideoCarousel.vue b/src/components/VideoCarousel.vue
new file mode 100644
index 0000000..123260c
--- /dev/null
+++ b/src/components/VideoCarousel.vue
@@ -0,0 +1,166 @@
+<template>
+	<div class="mb-12">
+		<h2 class="px-8 mb-4 text-transparent bg-clip-text"
+			:style="{ backgroundImage: 'linear-gradient(120deg, #71bedb 30%, #f4f468)' }">
+			{{ title }}
+		</h2>
+
+		<div class="relative px-8" ref="emblaWrapperRef">
+
+			<button
+				class="absolute left-4 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-full bg-black/60 backdrop-blur-md p-2 hover:bg-black/80 disabled:opacity-30 disabled:cursor-not-allowed"
+				:disabled="!canPrev" @click="prev" aria-label="Previous">
+				<ChevronLeft class="w-6 h-6" />
+			</button>
+
+			<button
+				class="absolute right-4 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-full bg-black/60 backdrop-blur-md p-2 hover:bg-black/80 disabled:opacity-30 disabled:cursor-not-allowed"
+				:disabled="!canNext" @click="next" aria-label="Next">
+				<ChevronRight class="w-6 h-6" />
+			</button>
+
+			<div class="overflow-hidden" ref="emblaRef">
+				<div class="flex gap-4 will-change-transform select-none touch-pan-y" style="backface-visibility:hidden">
+					<div v-for="video in videos" :key="video.id" class="px-2 flex-shrink-0 min-w-0" :style="{
+						flex: `0 0 calc(100% / var(--slides-per-view, ${slidesPerView}))`,
+						maxWidth: `calc(100% / var(--slides-per-view, ${slidesPerView}))`,
+					}">
+						<VideoCard v-bind="video" />
+					</div>
+				</div>
+			</div>
+		</div>
+
+	</div>
+</template>
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import VideoCard from './VideoCard.vue';
+import emblaCarouselVue from 'embla-carousel-vue';
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next';
+
+interface Video {
+	id: string;
+	title: string;
+	thumbnail: string;
+	duration: string;
+	category: string;
+}
+
+interface VideoCarouselProps {
+	title: string;
+	videos: Video[];
+}
+
+const props = defineProps<VideoCarouselProps>();
+
+const { title, videos } = props;
+
+const [emblaRef, emblaApi] = emblaCarouselVue({
+	loop: false,
+	align: 'start',
+})
+
+const canPrev = ref(false)
+const canNext = ref(false)
+const slidesPerView = ref(5)
+const slidesToScroll = ref(3)
+
+const emblaRootEl = ref<HTMLElement | null>(null)
+const emblaWrapperRef = ref<HTMLElement | null>(null)
+
+function updateButtons() {
+	if (!emblaApi.value) return
+	canPrev.value = emblaApi.value.canScrollPrev()
+	canNext.value = emblaApi.value.canScrollNext()
+}
+
+function prev() {
+	const api = emblaApi.value
+	if (!api) return
+
+	const targetIndex = api.selectedScrollSnap() - slidesToScroll.value
+	api.scrollTo(targetIndex)
+	updateButtons()
+}
+
+function next() {
+	const api = emblaApi.value
+	if (!api) return
+
+	const targetIndex = api.selectedScrollSnap() + slidesToScroll.value
+	api.scrollTo(targetIndex)
+	updateButtons()
+}
+
+
+function applyResponsiveConfig() {
+	const w = window.innerWidth
+
+	let show = 5
+	let scroll = 3
+
+	if (w < 1536) {
+		show = 4
+		scroll = 2
+	}
+	if (w < 1280) {
+		show = 3
+		scroll = 2
+	}
+	if (w < 768) {
+		show = 2
+		scroll = 1
+	}
+	if (w < 640) {
+		show = 1
+		scroll = 1
+	}
+
+	slidesPerView.value = show
+	slidesToScroll.value = scroll
+
+	if (emblaRootEl.value) {
+		emblaRootEl.value.style.setProperty(
+			'--slides-per-view',
+			String(show)
+		)
+	}
+}
+onMounted(() => {
+	emblaRootEl.value = emblaWrapperRef.value as HTMLElement | null
+
+	applyResponsiveConfig()
+
+	window.addEventListener('resize', applyResponsiveConfig)
+
+	if (emblaApi.value) {
+		updateButtons()
+
+		emblaApi.value.on('select', updateButtons)
+		emblaApi.value.on('reInit', () => {
+			applyResponsiveConfig()
+			updateButtons()
+		})
+	}
+
+	watch(
+		emblaApi,
+		(api) => {
+			if (!api) return
+			updateButtons()
+			api.on('select', updateButtons)
+			api.on('reInit', () => {
+				applyResponsiveConfig()
+				updateButtons()
+			})
+		},
+		{ immediate: false }
+	)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', applyResponsiveConfig)
+})
+
+</script>
\ No newline at end of file

From 7c7ed9c297615b84a0b89b1e9287f0e3e153d202 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 28 Oct 2025 02:10:35 -0300
Subject: [PATCH 07/10] feat: create component VideoDetailsDialog

---
 src/App.vue                           |  13 +-
 src/components/Hero.vue               |   4 +-
 src/components/VideoDetailsDialog.vue | 323 ++++++++++++++++++++++++++
 3 files changed, 336 insertions(+), 4 deletions(-)
 create mode 100644 src/components/VideoDetailsDialog.vue

diff --git a/src/App.vue b/src/App.vue
index 04377b7..d074f03 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+
 import Header from './components/Header.vue';
 import Hero from './components/Hero.vue';
 import VideoCarousel from './components/VideoCarousel.vue';
+import VideoDetailsDialog from './components/VideoDetailsDialog.vue';
+
 
+const modalDetailOpen = ref(false);
 
 const featuredArchitectures = [
 	{
@@ -138,6 +143,10 @@ const advancedPatterns = [
 		category: 'Mobile',
 	},
 ];
+
+function handleShowDetails() {
+	modalDetailOpen.value = true;
+}
 </script>
 
 <template>
@@ -157,7 +166,7 @@ const advancedPatterns = [
 		<div class="relative z-10">
 			<Header />
 			<main class="z-10">
-				<Hero />
+				<Hero @on-show-details="handleShowDetails" />
 				<VideoCarousel class="mt-4" title="Arquiteturas em Destaque" :videos="featuredArchitectures" />
 				<VideoCarousel title="Microfrontends na Prática" :videos="practicalMicrofrontends" />
 				<VideoCarousel title="Padrões Avançados" :videos="advancedPatterns" />
@@ -166,7 +175,7 @@ const advancedPatterns = [
 		</div>
 
 		<!-- <SearchModal open={searchOpen} onOpenChange={setSearchOpen} /> -->
-		<!-- <VideoInfoModal open={infoOpen} onOpenChange={setInfoOpen} /> -->
+		<VideoDetailsDialog v-model:open="modalDetailOpen" />
 	</div>
 </template>
 <style>
diff --git a/src/components/Hero.vue b/src/components/Hero.vue
index ab0fce1..cde4487 100644
--- a/src/components/Hero.vue
+++ b/src/components/Hero.vue
@@ -57,7 +57,7 @@
 				</button>
 				<button
 					class="px-8 py-4 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-lg transition-all duration-300 flex items-center gap-3 border hover:border-[#71BEDB]/50"
-					:style="{ borderColor: 'rgba(113, 190, 219, 0.2)' }">
+					:style="{ borderColor: 'rgba(113, 190, 219, 0.2)' }" @click="emit('onShowDetails')">
 					<Info class="w-6 h-6" />
 					<span class="text-lg">Mais Informações</span>
 				</button>
@@ -71,7 +71,7 @@
 import { Info, Play } from 'lucide-vue-next';
 
 
-defineEmits<{
+const emit = defineEmits<{
 	onPlay: {
 		type: Function,
 	}
diff --git a/src/components/VideoDetailsDialog.vue b/src/components/VideoDetailsDialog.vue
new file mode 100644
index 0000000..5b62e47
--- /dev/null
+++ b/src/components/VideoDetailsDialog.vue
@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import {
+	Play,
+	Star,
+	Calendar,
+	Clock,
+	Users,
+	Plus,
+	ThumbsUp,
+	X,
+} from 'lucide-vue-next'
+import VideoCard from './VideoCard.vue'
+
+const props = defineProps<{
+	open: boolean
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:open', value: boolean): void
+}>()
+
+const internalOpen = ref(props.open)
+
+watch(
+	() => props.open,
+	(val) => {
+		internalOpen.value = val
+	}
+)
+
+function closeDialog() {
+	internalOpen.value = false
+	emit('update:open', false)
+}
+
+
+function handleOverlayClick(e: MouseEvent) {
+	if (e.target === e.currentTarget) {
+		closeDialog()
+	}
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === 'Escape') {
+		closeDialog()
+	}
+}
+
+onMounted(() => {
+	window.addEventListener('keydown', handleKeydown)
+})
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', handleKeydown)
+})
+
+const relatedVideos = [
+	{
+		id: '2',
+		title: 'Comunicação entre Microfrontends: Event Bus e Context',
+		thumbnail:
+			'https://images.unsplash.com/photo-1642229407420-a659dac2f029?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtaWNyb3NlcnZpY2VzJTIwdGVjaG5vbG9neXxlbnwxfHx8fDE3NjExMDIyNDJ8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '28 min',
+		category: 'Comunicação',
+	},
+	{
+		id: '3',
+		title: 'Design System Distribuído para Microfrontends',
+		thumbnail:
+			'https://images.unsplash.com/photo-1593720213428-28a5b9e94613?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmcm9udGVuZCUyMGRldmVsb3BtZW50fGVufDF8fHx8MTc2MTEwMjI0Mnww&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '41 min',
+		category: 'Design',
+	},
+	{
+		id: '5',
+		title: 'Micro Frontend com Single-SPA Framework',
+		thumbnail:
+			'https://images.unsplash.com/photo-1457305237443-44c3d5a30b89?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3ZWIlMjBkZXZlbG9wbWVudHxlbnwxfHx8fDE3NjEwNTI3ODh8MA&ixlib=rb-4.1.0&q=80&w=1080',
+		duration: '52 min',
+		category: 'Framework',
+	},
+]
+</script>
+
+<template>
+	<transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0" enter-to-class="opacity-100"
+		leave-active-class="duration-150 ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">
+		<div v-if="internalOpen" class="fixed inset-0 z-[1000] flex items-center justify-center">
+			<div class="fixed inset-0 bg-black/50" @click="handleOverlayClick" />
+
+			<transition enter-active-class="duration-200 ease-out" enter-from-class="opacity-0 scale-95"
+				enter-to-class="opacity-100 scale-100" leave-active-class="duration-150 ease-in"
+				leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+				<div v-if="internalOpen"
+					class="relative z-[1001] grid w-full max-w-[calc(100%-2rem)] sm:max-w-5xl rounded-lg border border-white/10 bg-[#0a0a0f]/95 backdrop-blur-2xl text-white shadow-lg overflow-hidden max-h-[90vh]">
+
+					<button class="absolute right-6 top-4 z-20 p-2 bg-white/10 hover:bg-white/20 rounded-full backdrop-blur-sm transition-colors opacity-70 transition-opacity hover:opacity-100
+                   focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:ring-offset-2
+                   focus:ring-offset-zinc-900
+                   flex items-center justify-center" @click="closeDialog" aria-label="Fechar">
+						<X class="w-4 h-4 shrink-0 pointer-events-none" />
+					</button>
+
+					<div class="video-detail-scroll overflow-y-auto max-h-[90vh]">
+						<div class="relative w-full h-[400px]">
+							<img
+								src="https://images.unsplash.com/photo-1431576901776-e539bd916ba2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzb2Z0d2FyZSUyMGFyY2hpdGVjdHVyZXxlbnwxfHx8fDE3NjExMDIyNDF8MA&ixlib=rb-4.1.0&q=80&w=1080"
+								alt="Module Federation" class="w-full h-full object-cover" />
+							<div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0f] via-[#0a0a0f]/50 to-transparent" />
+							<div
+								class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black/30 backdrop-blur-sm">
+								<button
+									class="p-6 rounded-full bg-white/20 hover:bg-white/30 backdrop-blur-md transition-all duration-300 hover:scale-110">
+									<Play class="w-12 h-12 fill-current" />
+								</button>
+							</div>
+						</div>
+
+						<div class="p-8 -mt-20 relative z-10">
+							<div class="mb-6">
+								<div
+									class="inline-flex items-center gap-2 px-3 py-1 backdrop-blur-md rounded-full border border-white/10 mb-3"
+									:style="{
+										background:
+											'linear-gradient(120deg, rgba(113, 190, 219, 0.3) 30%, rgba(244, 244, 104, 0.3))',
+									}">
+									<span class="w-2 h-2 rounded-full animate-pulse" :style="{ backgroundColor: '#71BEDB' }" />
+									<span class="text-sm">Em destaque</span>
+								</div>
+
+								<h2 class="mb-4 text-transparent bg-clip-text" :style="{
+									backgroundImage:
+										'linear-gradient(120deg, #71bedb 30%, #f4f468)',
+								}">
+									Module Federation: Compartilhando Código Entre
+									Microfrontends
+								</h2>
+
+								<div class="flex flex-wrap items-center gap-4 mb-6">
+									<div class="flex items-center gap-2 text-sm">
+										<Star class="w-4 h-4" :style="{ color: '#f4f468' }" fill="#f4f468" />
+										<span class="text-gray-300">4.9</span>
+									</div>
+									<div class="flex items-center gap-2 text-sm text-gray-400">
+										<Calendar class="w-4 h-4" />
+										<span>2024</span>
+									</div>
+									<div class="flex items-center gap-2 text-sm text-gray-400">
+										<Clock class="w-4 h-4" />
+										<span>32 minutos</span>
+									</div>
+									<div class="flex items-center gap-2 text-sm text-gray-400">
+										<Users class="w-4 h-4" />
+										<span>15.2K visualizações</span>
+									</div>
+								</div>
+
+								<div class="flex items-center gap-3 mb-8">
+									<button
+										class="px-8 py-3 rounded-lg transition-all duration-300 flex items-center gap-3 shadow-xl hover:scale-105"
+										:style="{
+											backgroundImage:
+												'linear-gradient(120deg, #71bedb 30%, #f4f468)',
+											boxShadow:
+												'0 20px 25px -5px rgba(113, 190, 219, 0.3), 0 10px 10px -5px rgba(113, 190, 219, 0.2)',
+										}" @mouseenter="
+											(e: any) =>
+											(e.currentTarget.style.boxShadow =
+												'0 20px 25px -5px rgba(113, 190, 219, 0.5), 0 10px 10px -5px rgba(113, 190, 219, 0.3)')
+										" @mouseleave="
+											(e: any) =>
+											(e.currentTarget.style.boxShadow =
+												'0 20px 25px -5px rgba(113, 190, 219, 0.3), 0 10px 10px -5px rgba(113, 190, 219, 0.2)')
+										">
+										<Play class="w-5 h-5 fill-current text-black" />
+										<span class="text-black">Assistir Agora</span>
+									</button>
+
+									<button
+										class="p-3 bg-white/10 hover:bg-white/20 border border-white/10 hover:border-[#71BEDB]/50 rounded-lg transition-all duration-300">
+										<Plus class="w-5 h-5" />
+									</button>
+
+									<button
+										class="p-3 bg-white/10 hover:bg-white/20 border border-white/10 hover:border-[#71BEDB]/50 rounded-lg transition-all duration-300">
+										<ThumbsUp class="w-5 h-5" />
+									</button>
+								</div>
+							</div>
+
+							<div class="mb-8">
+								<h3 class="mb-3 text-gray-200">Sinopse</h3>
+								<p class="text-gray-400 leading-relaxed mb-4">
+									Aprenda a implementar Module Federation, uma das técnicas
+									mais poderosas para compartilhamento de código entre
+									microfrontends. Este curso aborda desde conceitos básicos
+									até implementações avançadas, incluindo compartilhamento
+									dinâmico de módulos, versionamento e estratégias de deploy.
+								</p>
+								<p class="text-gray-400 leading-relaxed">
+									Você vai dominar a configuração do Webpack Module
+									Federation, entender como criar hosts e remotes,
+									implementar lazy loading de componentes compartilhados e
+									gerenciar dependências entre diferentes aplicações.
+								</p>
+							</div>
+
+							<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 p-6 bg-white/5 rounded-lg border border-white/10">
+								<div>
+									<h4 class="mb-3 text-gray-300">Instrutor</h4>
+									<p class="text-gray-400">Dr. Marcus Silva</p>
+								</div>
+								<div>
+									<h4 class="mb-3 text-gray-300">Nível</h4>
+									<p class="text-gray-400">
+										Intermediário - Avançado
+									</p>
+								</div>
+								<div>
+									<h4 class="mb-3 text-gray-300">Tecnologias</h4>
+									<div class="flex flex-wrap gap-2">
+										<span class="px-3 py-1 rounded-full text-xs border" :style="{
+											backgroundColor:
+												'rgba(113, 190, 219, 0.1)',
+											borderColor:
+												'rgba(113, 190, 219, 0.3)',
+											color: '#71BEDB',
+										}">
+											Webpack
+										</span>
+										<span class="px-3 py-1 rounded-full text-xs border" :style="{
+											backgroundColor:
+												'rgba(113, 190, 219, 0.1)',
+											borderColor:
+												'rgba(113, 190, 219, 0.3)',
+											color: '#71BEDB',
+										}">
+											React
+										</span>
+										<span class="px-3 py-1 rounded-full text-xs border" :style="{
+											backgroundColor:
+												'rgba(113, 190, 219, 0.1)',
+											borderColor:
+												'rgba(113, 190, 219, 0.3)',
+											color: '#71BEDB',
+										}">
+											TypeScript
+										</span>
+										<span class="px-3 py-1 rounded-full text-xs border" :style="{
+											backgroundColor:
+												'rgba(113, 190, 219, 0.1)',
+											borderColor:
+												'rgba(113, 190, 219, 0.3)',
+											color: '#71BEDB',
+										}">
+											Module Federation
+										</span>
+									</div>
+								</div>
+								<div>
+									<h4 class="mb-3 text-gray-300">
+										O que você vai aprender
+									</h4>
+									<ul class="space-y-2 text-gray-400 text-sm">
+										<li class="flex items-start gap-2">
+											<span class="mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0"
+												:style="{ backgroundColor: '#71BEDB' }" />
+											<span>Configuração de Module
+												Federation</span>
+										</li>
+										<li class="flex items-start gap-2">
+											<span class="mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0"
+												:style="{ backgroundColor: '#71BEDB' }" />
+											<span>Compartilhamento de componentes</span>
+										</li>
+										<li class="flex items-start gap-2">
+											<span class="mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0"
+												:style="{ backgroundColor: '#71BEDB' }" />
+											<span>Gestão de dependências</span>
+										</li>
+									</ul>
+								</div>
+							</div>
+
+							<div>
+								<h3 class="mb-4 text-gray-200">
+									Vídeos Relacionados
+								</h3>
+								<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+									<VideoCard v-for="video in relatedVideos" :key="video.id" v-bind="video" />
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</transition>
+		</div>
+	</transition>
+</template>
+<style>
+.video-detail-scroll {
+	scrollbar-width: thin;
+	scrollbar-color: rgba(113, 190, 219, 0.4) transparent;
+}
+
+.video-detail-scroll::-webkit-scrollbar {
+	width: 6px;
+}
+
+.video-detail-scroll::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.video-detail-scroll::-webkit-scrollbar-thumb {
+	background-color: rgba(113, 190, 219, 0.4);
+	border-radius: 9999px;
+	border: 1px solid rgba(10, 10, 15, 0.8);
+}
+
+.video-detail-scroll::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(113, 190, 219, 0.6);
+}
+</style>
\ No newline at end of file

From 8286af41bf2c8986da030e33509f8f3a1b65d9f9 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 28 Oct 2025 12:02:49 -0300
Subject: [PATCH 08/10] feat: add account exit

---
 .husky/pre-commit                     |  1 +
 eslint.config.js                      |  2 +
 src/components/Header.vue             | 91 ++++++++++++++++++++++++---
 src/components/Hero.vue               | 10 +--
 src/components/VideoDetailsDialog.vue | 34 +++++-----
 5 files changed, 105 insertions(+), 33 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index e69de29..10da9ff 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npm run build
\ No newline at end of file
diff --git a/eslint.config.js b/eslint.config.js
index f4575c4..e9d6258 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -20,6 +20,8 @@ export default defineConfig([
     rules: {
       semi: "error",
       "prefer-const": "error",
+      "no-undef": "off",
+      "@typescript-eslint/no-explicit-any": "off",
     },
   },
   {
diff --git a/src/components/Header.vue b/src/components/Header.vue
index c2cce61..629bfa1 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -24,28 +24,105 @@
 				<button class="p-2 hover:bg-white/10 rounded-full transition-colors">
 					<Search class="w-5 h-5" />
 				</button>
-				<button class="p-2 hover:bg-white/10 rounded-full transition-colors">
-					<User class="w-5 h-5" />
-				</button>
+				<div class="relative" ref="profileMenuRef">
+					<button @click="toggleProfileMenu"
+						class="p-2 hover:bg-white/10 rounded-full transition-colors flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-white/20">
+						<User class="w-5 h-5" />
+					</button>
+
+					<transition name="fade" appear>
+						<div v-if="isProfileMenuOpen"
+							class="absolute right-0 mt-2 w-64 rounded-xl border border-white/10 bg-[#0a0a0f]/90 backdrop-blur-xl shadow-2xl shadow-black/40 overflow-hidden">
+							<div class="px-4 py-3 bg-white/5">
+								<div class="flex items-center gap-3">
+									<div
+										class="w-10 h-10 rounded-full bg-gradient-to-br from-[#71BEDB] to-cyan-500/70 flex items-center justify-center text-[#0a0a0f] font-semibold">
+										{{ initials }}
+									</div>
+									<div class="min-w-0">
+										<p class="text-sm text-white truncate">{{ userName }}</p>
+										<p class="text-xs text-gray-400 truncate">ID: {{ userId }}</p>
+									</div>
+								</div>
+							</div>
+							<div class="py-1">
+								<button @click="handleExit"
+									class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 transition-colors">
+									Sair
+								</button>
+							</div>
+						</div>
+					</transition>
+				</div>
 			</div>
 		</div>
 	</header>
 </template>
-<script setup>
+<script setup lang="ts">
 import { Play, Search, User } from "lucide-vue-next";
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 
-defineProps({
+const props = defineProps({
+	userName: { type: String, default: 'Usuário' },
+	userId: { type: String, default: '0000' },
 	currentPage: {
 		type: String,
 		default: 'home'
 	},
 	onPageChange: {
-		type: Function
-
+		type: Function,
+		default: () => {}
 	},
 	onSearchOpen: {
 		type: Function,
+		default: () => {}
+	}
+});
+
+const isProfileMenuOpen = ref(false);
+const profileMenuRef = ref(null);
+
+const toggleProfileMenu = () => {
+	isProfileMenuOpen.value = !isProfileMenuOpen.value;
+};
+
+const closeProfileMenu = () => {
+	isProfileMenuOpen.value = false;
+};
+
+const onGlobalClick = (event: MouseEvent) => {
+	const root = profileMenuRef.value as any;
+	if (!root) return;
+	if (!root.contains(event.target as Node)) {
+		closeProfileMenu();
+	}
+};
+
+const onEscape = (event: KeyboardEvent) => {
+	if (event.key === 'Escape') closeProfileMenu();
+};
+
+const handleExit = () => {
+	if ((window as any)?.shellNavigate) {
+		(window as any).shellNavigate("/");
 	}
+	closeProfileMenu();
+};
+
+const initials = computed(() => {
+	const parts = (props.userName || '').trim().split(/\s+/);
+	const letters = parts.slice(0, 2).map((p: string) => p[0]?.toUpperCase() || '').join('');
+	return letters || 'U';
+});
+
+onMounted(() => {
+	document.addEventListener('click', onGlobalClick);
+	document.addEventListener('keydown', onEscape);
+});
+
+onBeforeUnmount(() => {
+	document.removeEventListener('click', onGlobalClick);
+	document.removeEventListener('keydown', onEscape);
 });
 
 </script>
\ No newline at end of file
diff --git a/src/components/Hero.vue b/src/components/Hero.vue
index cde4487..f9d416e 100644
--- a/src/components/Hero.vue
+++ b/src/components/Hero.vue
@@ -70,14 +70,6 @@
 <script setup lang="ts">
 import { Info, Play } from 'lucide-vue-next';
 
-
-const emit = defineEmits<{
-	onPlay: {
-		type: Function,
-	}
-	onShowDetails: {
-		type: Function,
-	}
-}>();
+const emit = defineEmits(['onShowDetails']);
 
 </script>
\ No newline at end of file
diff --git a/src/components/VideoDetailsDialog.vue b/src/components/VideoDetailsDialog.vue
index 5b62e47..198f2fd 100644
--- a/src/components/VideoDetailsDialog.vue
+++ b/src/components/VideoDetailsDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import {
 	Play,
 	Star,
@@ -9,50 +9,50 @@ import {
 	Plus,
 	ThumbsUp,
 	X,
-} from 'lucide-vue-next'
-import VideoCard from './VideoCard.vue'
+} from 'lucide-vue-next';
+import VideoCard from './VideoCard.vue';
 
 const props = defineProps<{
 	open: boolean
-}>()
+}>();
 
 const emit = defineEmits<{
 	(e: 'update:open', value: boolean): void
-}>()
+}>();
 
-const internalOpen = ref(props.open)
+const internalOpen = ref(props.open);
 
 watch(
 	() => props.open,
 	(val) => {
-		internalOpen.value = val
+		internalOpen.value = val;
 	}
-)
+);
 
 function closeDialog() {
-	internalOpen.value = false
-	emit('update:open', false)
+	internalOpen.value = false;
+	emit('update:open', false);
 }
 
 
 function handleOverlayClick(e: MouseEvent) {
 	if (e.target === e.currentTarget) {
-		closeDialog()
+		closeDialog();
 	}
 }
 
 function handleKeydown(e: KeyboardEvent) {
 	if (e.key === 'Escape') {
-		closeDialog()
+		closeDialog();
 	}
 }
 
 onMounted(() => {
-	window.addEventListener('keydown', handleKeydown)
-})
+	window.addEventListener('keydown', handleKeydown);
+});
 onBeforeUnmount(() => {
-	window.removeEventListener('keydown', handleKeydown)
-})
+	window.removeEventListener('keydown', handleKeydown);
+});
 
 const relatedVideos = [
 	{
@@ -79,7 +79,7 @@ const relatedVideos = [
 		duration: '52 min',
 		category: 'Framework',
 	},
-]
+];
 </script>
 
 <template>

From 24ead54f670fb02b8466c180c41a3021a7e34d65 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 28 Oct 2025 16:42:43 -0300
Subject: [PATCH 09/10] fix: lint VideoCarousel component

---
 src/components/VideoCarousel.vue | 104 +++++++++++++++----------------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/src/components/VideoCarousel.vue b/src/components/VideoCarousel.vue
index 123260c..9cf6f77 100644
--- a/src/components/VideoCarousel.vue
+++ b/src/components/VideoCarousel.vue
@@ -59,108 +59,108 @@ const { title, videos } = props;
 const [emblaRef, emblaApi] = emblaCarouselVue({
 	loop: false,
 	align: 'start',
-})
+});
 
-const canPrev = ref(false)
-const canNext = ref(false)
-const slidesPerView = ref(5)
-const slidesToScroll = ref(3)
+const canPrev = ref(false);
+const canNext = ref(false);
+const slidesPerView = ref(5);
+const slidesToScroll = ref(3);
 
-const emblaRootEl = ref<HTMLElement | null>(null)
-const emblaWrapperRef = ref<HTMLElement | null>(null)
+const emblaRootEl = ref<HTMLElement | null>(null);
+const emblaWrapperRef = ref<HTMLElement | null>(null);
 
 function updateButtons() {
-	if (!emblaApi.value) return
-	canPrev.value = emblaApi.value.canScrollPrev()
-	canNext.value = emblaApi.value.canScrollNext()
+	if (!emblaApi.value) return;
+	canPrev.value = emblaApi.value.canScrollPrev();
+	canNext.value = emblaApi.value.canScrollNext();
 }
 
 function prev() {
-	const api = emblaApi.value
-	if (!api) return
+	const api = emblaApi.value;
+	if (!api) return;
 
-	const targetIndex = api.selectedScrollSnap() - slidesToScroll.value
-	api.scrollTo(targetIndex)
-	updateButtons()
+	const targetIndex = api.selectedScrollSnap() - slidesToScroll.value;
+	api.scrollTo(targetIndex);
+	updateButtons();
 }
 
 function next() {
-	const api = emblaApi.value
-	if (!api) return
+	const api = emblaApi.value;
+	if (!api) return;
 
-	const targetIndex = api.selectedScrollSnap() + slidesToScroll.value
-	api.scrollTo(targetIndex)
-	updateButtons()
+	const targetIndex = api.selectedScrollSnap() + slidesToScroll.value;
+	api.scrollTo(targetIndex);
+	updateButtons();
 }
 
 
 function applyResponsiveConfig() {
-	const w = window.innerWidth
+	const w = window.innerWidth;
 
-	let show = 5
-	let scroll = 3
+	let show = 5;
+	let scroll = 3;
 
 	if (w < 1536) {
-		show = 4
-		scroll = 2
+		show = 4;
+		scroll = 2;
 	}
 	if (w < 1280) {
-		show = 3
-		scroll = 2
+		show = 3;
+		scroll = 2;
 	}
 	if (w < 768) {
-		show = 2
-		scroll = 1
+		show = 2;
+		scroll = 1;
 	}
 	if (w < 640) {
-		show = 1
-		scroll = 1
+		show = 1;
+		scroll = 1;
 	}
 
-	slidesPerView.value = show
-	slidesToScroll.value = scroll
+	slidesPerView.value = show;
+	slidesToScroll.value = scroll;
 
 	if (emblaRootEl.value) {
 		emblaRootEl.value.style.setProperty(
 			'--slides-per-view',
 			String(show)
-		)
+		);
 	}
 }
 onMounted(() => {
-	emblaRootEl.value = emblaWrapperRef.value as HTMLElement | null
+	emblaRootEl.value = emblaWrapperRef.value as HTMLElement | null;
 
-	applyResponsiveConfig()
+	applyResponsiveConfig();
 
-	window.addEventListener('resize', applyResponsiveConfig)
+	window.addEventListener('resize', applyResponsiveConfig);
 
 	if (emblaApi.value) {
-		updateButtons()
+		updateButtons();
 
-		emblaApi.value.on('select', updateButtons)
+		emblaApi.value.on('select', updateButtons);
 		emblaApi.value.on('reInit', () => {
-			applyResponsiveConfig()
-			updateButtons()
-		})
+			applyResponsiveConfig();
+			updateButtons();
+		});
 	}
 
 	watch(
 		emblaApi,
 		(api) => {
-			if (!api) return
-			updateButtons()
-			api.on('select', updateButtons)
+			if (!api) return;
+			updateButtons();
+			api.on('select', updateButtons);
 			api.on('reInit', () => {
-				applyResponsiveConfig()
-				updateButtons()
-			})
+				applyResponsiveConfig();
+				updateButtons();
+			});
 		},
 		{ immediate: false }
-	)
-})
+	);
+});
 
 onBeforeUnmount(() => {
-	window.removeEventListener('resize', applyResponsiveConfig)
-})
+	window.removeEventListener('resize', applyResponsiveConfig);
+});
 
 </script>
\ No newline at end of file

From d9b94f333af788c331e9aadd2d2cdf8a7917cab7 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Tue, 28 Oct 2025 16:47:15 -0300
Subject: [PATCH 10/10] feat: setup bridge vue

---
 index.html        |   2 +-
 package-lock.json | 107 ++++++++++++++++++++++++++++++++++++++--------
 package.json      |   1 +
 src/export-app.ts |   7 +++
 vite.config.js    |   6 ++-
 5 files changed, 102 insertions(+), 21 deletions(-)
 create mode 100644 src/export-app.ts

diff --git a/index.html b/index.html
index cdd3531..4008deb 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
 	<meta charset="UTF-8" />
 	<link rel="icon" href="/favicon.ico" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<title>Catalog</title>
+	<title>Moduflix - Inicio</title>
 </head>
 
 <body>
diff --git a/package-lock.json b/package-lock.json
index ea9cf83..37a567a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "mod-catalog",
       "version": "0.2.0",
       "dependencies": {
+        "@module-federation/bridge-vue3": "^0.21.2",
         "@tailwindcss/vite": "^4.1.16",
         "embla-carousel-vue": "^8.6.0",
         "lucide-vue-next": "^0.548.0",
@@ -1886,14 +1887,83 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@module-federation/bridge-shared": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@module-federation/bridge-shared/-/bridge-shared-0.21.2.tgz",
+      "integrity": "sha512-qcpvx6KUgVNHVHuTOPU8e6lgRunxHiB4zqZkpMSb0MA8R+yuJturVZ7bz4Byydqy2ozCJjne/rWMg0Uo/Eh54A==",
+      "license": "MIT"
+    },
+    "node_modules/@module-federation/bridge-vue3": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@module-federation/bridge-vue3/-/bridge-vue3-0.21.2.tgz",
+      "integrity": "sha512-Fs1mX/X0Vz7ZXQCsxqobKRrzGvEuYtUyf7YPGvxXXcjrcvpG/lSje7ORXgtx/oXM+g1xyAhg7qOsoo6etHQ7xQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@module-federation/bridge-shared": "0.21.2",
+        "@module-federation/runtime": "0.21.2",
+        "@module-federation/sdk": "0.21.2"
+      },
+      "peerDependencies": {
+        "vue": "=3",
+        "vue-router": "=4"
+      }
+    },
     "node_modules/@module-federation/error-codes": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@module-federation/error-codes/-/error-codes-0.21.2.tgz",
+      "integrity": "sha512-mGbPAAApgjmQUl4J7WAt20aV04a26TyS21GDEpOGXFEQG5FqmZnSJ6FqB8K19HgTKioBT1+fF/Ctl5bGGao/EA==",
+      "license": "MIT"
+    },
+    "node_modules/@module-federation/runtime": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@module-federation/runtime/-/runtime-0.21.2.tgz",
+      "integrity": "sha512-97jlOx4RAnAHMBTfgU5FBK6+V/pfT6GNX0YjSf8G+uJ3lFy74Y6kg/BevEkChTGw5waCLAkw/pw4LmntYcNN7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@module-federation/error-codes": "0.21.2",
+        "@module-federation/runtime-core": "0.21.2",
+        "@module-federation/sdk": "0.21.2"
+      }
+    },
+    "node_modules/@module-federation/runtime-core": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@module-federation/runtime-core/-/runtime-core-0.21.2.tgz",
+      "integrity": "sha512-LtDnccPxjR8Xqa3daRYr1cH/6vUzK3mQSzgvnfsUm1fXte5syX4ftWw3Eu55VdqNY3yREFRn77AXdu9PfPEZRw==",
+      "license": "MIT",
+      "dependencies": {
+        "@module-federation/error-codes": "0.21.2",
+        "@module-federation/sdk": "0.21.2"
+      }
+    },
+    "node_modules/@module-federation/sdk": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@module-federation/sdk/-/sdk-0.21.2.tgz",
+      "integrity": "sha512-t2vHSJ1a9zjg7LLJoEghcytNLzeFCqOat5TbXTav5dgU0xXw82Cf0EfLrxiJL6uUpgbtyvUdqqa2DVAvMPjiiA==",
+      "license": "MIT"
+    },
+    "node_modules/@module-federation/vite": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@module-federation/vite/-/vite-1.8.1.tgz",
+      "integrity": "sha512-Vr5PkhwjQpmZyr7JAjQuM38C+n6234iAB3kFA78DmkUDqS9c77DVq9Q5EYDD1Bpk1od6drsxcyMgzuvdhN78vw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@module-federation/runtime": "^0.17.1",
+        "@rollup/pluginutils": "^5.1.0",
+        "defu": "^6.1.4",
+        "estree-walker": "^2",
+        "magic-string": "^0.30.11",
+        "pathe": "^1.1.2"
+      }
+    },
+    "node_modules/@module-federation/vite/node_modules/@module-federation/error-codes": {
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/@module-federation/error-codes/-/error-codes-0.17.1.tgz",
       "integrity": "sha512-n6Elm4qKSjwAPxLUGtwnl7qt4y1dxB8OpSgVvXBIzqI9p27a3ZXshLPLnumlpPg1Qudaj8sLnSnFtt9yGpt5yQ==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@module-federation/runtime": {
+    "node_modules/@module-federation/vite/node_modules/@module-federation/runtime": {
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/@module-federation/runtime/-/runtime-0.17.1.tgz",
       "integrity": "sha512-vKEN32MvUbpeuB/s6UXfkHDZ9N5jFyDDJnj83UTJ8n4N1jHIJu9VZ6Yi4/Ac8cfdvU8UIK9bIbfVXWbUYZUDsw==",
@@ -1905,7 +1975,7 @@
         "@module-federation/sdk": "0.17.1"
       }
     },
-    "node_modules/@module-federation/runtime-core": {
+    "node_modules/@module-federation/vite/node_modules/@module-federation/runtime-core": {
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/@module-federation/runtime-core/-/runtime-core-0.17.1.tgz",
       "integrity": "sha512-LCtIFuKgWPQ3E+13OyrVpuTPOWBMI/Ggwsq1Q874YeT8Px28b8tJRCj09DjyRFyhpSPyV/uG80T6iXPAUoLIfQ==",
@@ -1916,28 +1986,13 @@
         "@module-federation/sdk": "0.17.1"
       }
     },
-    "node_modules/@module-federation/sdk": {
+    "node_modules/@module-federation/vite/node_modules/@module-federation/sdk": {
       "version": "0.17.1",
       "resolved": "https://registry.npmjs.org/@module-federation/sdk/-/sdk-0.17.1.tgz",
       "integrity": "sha512-nlUcN6UTEi+3HWF+k8wPy7gH0yUOmCT+xNatihkIVR9REAnr7BUvHFGlPJmx7WEbLPL46+zJUbtQHvLzXwFhng==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@module-federation/vite": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@module-federation/vite/-/vite-1.8.1.tgz",
-      "integrity": "sha512-Vr5PkhwjQpmZyr7JAjQuM38C+n6234iAB3kFA78DmkUDqS9c77DVq9Q5EYDD1Bpk1od6drsxcyMgzuvdhN78vw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@module-federation/runtime": "^0.17.1",
-        "@rollup/pluginutils": "^5.1.0",
-        "defu": "^6.1.4",
-        "estree-walker": "^2",
-        "magic-string": "^0.30.11",
-        "pathe": "^1.1.2"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -9327,6 +9382,22 @@
         "node": ">=10"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.3.tgz",
+      "integrity": "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.1.1.tgz",
diff --git a/package.json b/package.json
index dc90465..92651b0 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@module-federation/bridge-vue3": "^0.21.2",
     "@tailwindcss/vite": "^4.1.16",
     "embla-carousel-vue": "^8.6.0",
     "lucide-vue-next": "^0.548.0",
diff --git a/src/export-app.ts b/src/export-app.ts
new file mode 100644
index 0000000..4d5498f
--- /dev/null
+++ b/src/export-app.ts
@@ -0,0 +1,7 @@
+import { createBridgeComponent } from "@module-federation/bridge-vue3";
+import App from "./App.vue";
+
+export default createBridgeComponent({
+	rootComponent: App,
+	appOptions: () => {},
+});
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 270ebfe..63412c1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -41,9 +41,11 @@ export default defineConfig(async ({ mode }) => {
         name: "catalog",
         filename: "remoteEntry.js",
         exposes: {
-          "./Catalog": "./src/App.vue",
+          "./Catalog": "./src/export-app.ts",
+        },
+        shared: {
+          vue: { singleton: true, eager: true },
         },
-        shared: {},
       }),
     ],
     test: {