@windrun-huaiin/third-ui 6.2.0 → 6.2.1

package/dist/main/server.js

@@ -104,121 +104,7 @@ function cn(...inputs) {
 
 // src/main/gallery.tsx
 var import_image = __toESM(require("next/image"));
-
-// src/main/gallery-interactive.tsx
-var import_react = require("react");
-function GalleryInteractive({ data }) {
-  const [imageErrors, setImageErrors] = (0, import_react.useState)(/* @__PURE__ */ new Set());
-  const [downloadingItems, setDownloadingItems] = (0, import_react.useState)(/* @__PURE__ */ new Set());
-  const cdnProxyUrl = process.env.NEXT_PUBLIC_STYLE_CDN_PROXY_URL;
-  (0, import_react.useEffect)(() => {
-    data.items.forEach((item, index) => {
-      const downloadButton = document.querySelector(`[data-gallery-download="${item.id}"]`);
-      const imageElement = document.querySelector(`[data-gallery-image="${item.id}"]`);
-      if (downloadButton) {
-        const handleDownload = () => __async(null, null, function* () {
-          var _a;
-          if (downloadingItems.has(item.id)) {
-            return;
-          }
-          setDownloadingItems((prev) => new Set(prev).add(item.id));
-          try {
-            if (!cdnProxyUrl) {
-              throw new Error("CDN proxy URL not configured");
-            }
-            const originalUrl = new URL(item.url);
-            const filename = originalUrl.pathname.substring(1);
-            const proxyUrl = `${cdnProxyUrl}/${encodeURIComponent(filename)}`;
-            const urlExtension = (_a = item.url.split(".").pop()) == null ? void 0 : _a.toLowerCase();
-            let extension = ".webp";
-            if (urlExtension && ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(urlExtension)) {
-              extension = `.${urlExtension}`;
-            }
-            const response = yield fetch(proxyUrl);
-            if (!response.ok) {
-              throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-            }
-            const blob = yield response.blob();
-            const blobUrl = URL.createObjectURL(blob);
-            const a = document.createElement("a");
-            a.href = blobUrl;
-            a.download = `${data.downloadPrefix}-${index + 1}${extension}`;
-            a.style.display = "none";
-            document.body.appendChild(a);
-            a.click();
-            setTimeout(() => {
-              document.body.removeChild(a);
-              URL.revokeObjectURL(blobUrl);
-            }, 100);
-          } catch (error) {
-            console.error("Download failed:", error);
-          } finally {
-            setDownloadingItems((prev) => {
-              const newSet = new Set(prev);
-              newSet.delete(item.id);
-              return newSet;
-            });
-          }
-        });
-        downloadButton.addEventListener("click", handleDownload);
-      }
-      if (imageElement) {
-        const handleImageError = () => {
-          setImageErrors((prev) => new Set(prev).add(item.id));
-          imageElement.src = data.defaultImgUrl;
-        };
-        imageElement.addEventListener("error", handleImageError);
-      }
-    });
-    const updateDownloadStates = () => {
-      data.items.forEach((item) => {
-        const downloadButton = document.querySelector(`[data-gallery-download="${item.id}"]`);
-        if (downloadButton) {
-          const isDownloading = downloadingItems.has(item.id);
-          if (isDownloading) {
-            downloadButton.disabled = true;
-            downloadButton.classList.add("bg-black/30", "text-white/50");
-            downloadButton.classList.remove("bg-black/50", "hover:bg-black/70", "text-white/80", "hover:text-white");
-            downloadButton.innerHTML = `
-              <svg class="h-5 w-5 text-white animate-spin" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-              </svg>
-            `;
-          } else {
-            downloadButton.disabled = false;
-            downloadButton.classList.remove("bg-black/30", "text-white/50");
-            downloadButton.classList.add("bg-black/50", "hover:bg-black/70", "text-white/80", "hover:text-white");
-            downloadButton.innerHTML = `
-              <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-            `;
-          }
-        }
-      });
-    };
-    updateDownloadStates();
-    return () => {
-      data.items.forEach((item) => {
-        var _a, _b;
-        const downloadButton = document.querySelector(`[data-gallery-download="${item.id}"]`);
-        const imageElement = document.querySelector(`[data-gallery-image="${item.id}"]`);
-        if (downloadButton) {
-          const newButton = downloadButton.cloneNode(true);
-          (_a = downloadButton.parentNode) == null ? void 0 : _a.replaceChild(newButton, downloadButton);
-        }
-        if (imageElement) {
-          const newImage = imageElement.cloneNode(true);
-          (_b = imageElement.parentNode) == null ? void 0 : _b.replaceChild(newImage, imageElement);
-        }
-      });
-    };
-  }, [data, downloadingItems, imageErrors, cdnProxyUrl]);
-  return null;
-}
-
-// src/main/gallery.tsx
+var import_main = require("@third-ui/main");
 var import_jsx_runtime = require("react/jsx-runtime");
 function Gallery(_0) {
   return __async(this, arguments, function* ({ locale, sectionClassName, button }) {
@@ -278,7 +164,7 @@ function Gallery(_0) {
         item.id
       )) }),
       button && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-center mt-12", children: button }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GalleryInteractive, { data })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_main.GalleryInteractive, { data })
     ] });
   });
 }
@@ -287,7 +173,7 @@ function Gallery(_0) {
 var import_server3 = require("next-intl/server");
 
 // ../base-ui/src/assets/github.tsx
-var import_react2 = __toESM(require("react"), 1);
+var import_react = __toESM(require("react"), 1);
 
 // ../base-ui/src/lib/theme-util.ts
 var themeIconColor = process.env.NEXT_PUBLIC_STYLE_ICON_COLOR || "text-purple-500";
@@ -296,7 +182,7 @@ var themeSvgIconSize = process.env.NEXT_PUBLIC_STYLE_SVG_ICON_SIZE || 18;
 
 // ../base-ui/src/assets/github.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var GitHubIcon = import_react2.default.forwardRef(
+var GitHubIcon = import_react.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -324,9 +210,9 @@ GitHubIcon.displayName = "GitHub";
 var github_default = GitHubIcon;
 
 // ../base-ui/src/assets/d8.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var D8Icon = import_react3.default.forwardRef(
+var D8Icon = import_react2.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -369,9 +255,9 @@ D8Icon.displayName = "D8";
 var d8_default = D8Icon;
 
 // ../base-ui/src/assets/clerk.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var ClerkIcon = import_react4.default.forwardRef(
+var ClerkIcon = import_react3.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -400,9 +286,9 @@ ClerkIcon.displayName = "Clerk";
 var clerk_default = ClerkIcon;
 
 // ../base-ui/src/assets/iterm.tsx
-var import_react5 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var ItermIcon = import_react5.default.forwardRef(
+var ItermIcon = import_react4.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -431,9 +317,9 @@ ItermIcon.displayName = "Iterm";
 var iterm_default = ItermIcon;
 
 // ../base-ui/src/assets/markdown.tsx
-var import_react6 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var MarkdownIcon = import_react6.default.forwardRef(
+var MarkdownIcon = import_react5.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -461,9 +347,9 @@ MarkdownIcon.displayName = "Markdown";
 var markdown_default = MarkdownIcon;
 
 // ../base-ui/src/assets/mdx.tsx
-var import_react7 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var MDXIcon = import_react7.default.forwardRef(
+var MDXIcon = import_react6.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -587,9 +473,9 @@ MDXIcon.displayName = "MDX";
 var mdx_default = MDXIcon;
 
 // ../base-ui/src/assets/html.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var HtmlIcon = import_react8.default.forwardRef(
+var HtmlIcon = import_react7.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -616,9 +502,9 @@ HtmlIcon.displayName = "Html";
 var html_default = HtmlIcon;
 
 // ../base-ui/src/assets/json.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var JsonIcon = import_react9.default.forwardRef(
+var JsonIcon = import_react8.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -645,9 +531,9 @@ JsonIcon.displayName = "Json";
 var json_default = JsonIcon;
 
 // ../base-ui/src/assets/xml.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var XMLIcon = import_react10.default.forwardRef(
+var XMLIcon = import_react9.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -675,9 +561,9 @@ XMLIcon.displayName = "XML";
 var xml_default = XMLIcon;
 
 // ../base-ui/src/assets/yaml.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var YamlIcon = import_react11.default.forwardRef(
+var YamlIcon = import_react10.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -705,9 +591,9 @@ YamlIcon.displayName = "Yaml";
 var yaml_default = YamlIcon;
 
 // ../base-ui/src/assets/csv.tsx
-var import_react12 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var CSVIcon = import_react12.default.forwardRef(
+var CSVIcon = import_react11.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -761,9 +647,9 @@ CSVIcon.displayName = "CSV";
 var csv_default = CSVIcon;
 
 // ../base-ui/src/assets/txt.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var TxtIcon = import_react13.default.forwardRef(
+var TxtIcon = import_react12.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -791,9 +677,9 @@ TxtIcon.displayName = "Txt";
 var txt_default = TxtIcon;
 
 // ../base-ui/src/assets/java.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var JavaIcon = import_react14.default.forwardRef(
+var JavaIcon = import_react13.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -822,9 +708,9 @@ JavaIcon.displayName = "Java";
 var java_default = JavaIcon;
 
 // ../base-ui/src/assets/sql.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var SQLIcon = import_react15.default.forwardRef(
+var SQLIcon = import_react14.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -870,9 +756,9 @@ SQLIcon.displayName = "SQL";
 var sql_default = SQLIcon;
 
 // ../base-ui/src/assets/log.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var LogIcon = import_react16.default.forwardRef(
+var LogIcon = import_react15.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
@@ -911,9 +797,9 @@ LogIcon.displayName = "Log";
 var log_default = LogIcon;
 
 // ../base-ui/src/assets/mac.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var MACIcon = import_react17.default.forwardRef(
+var MACIcon = import_react16.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -942,9 +828,9 @@ MACIcon.displayName = "MAC";
 var mac_default = MACIcon;
 
 // ../base-ui/src/assets/bitcoin.tsx
-var import_react18 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var BitcoinIcon = import_react18.default.forwardRef(
+var BitcoinIcon = import_react17.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -973,9 +859,9 @@ BitcoinIcon.displayName = "BTC";
 var bitcoin_default = BitcoinIcon;
 
 // ../base-ui/src/assets/css.tsx
-var import_react19 = __toESM(require("react"), 1);
+var import_react18 = __toESM(require("react"), 1);
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var CSSIcon = import_react19.default.forwardRef(
+var CSSIcon = import_react18.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -1002,9 +888,9 @@ CSSIcon.displayName = "CSS";
 var css_default = CSSIcon;
 
 // ../base-ui/src/assets/mermaid.tsx
-var import_react20 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var MermaidIcon = import_react20.default.forwardRef(
+var MermaidIcon = import_react19.default.forwardRef(
   // Memmaid need special size for good view
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
@@ -1034,9 +920,9 @@ MermaidIcon.displayName = "Mmd";
 var mermaid_default = MermaidIcon;
 
 // ../base-ui/src/assets/last-updated.tsx
-var import_react21 = __toESM(require("react"), 1);
+var import_react20 = __toESM(require("react"), 1);
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var LastUpdatedIcon = import_react21.default.forwardRef(
+var LastUpdatedIcon = import_react20.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -1064,9 +950,9 @@ LastUpdatedIcon.displayName = "LastUpdated";
 var last_updated_default = LastUpdatedIcon;
 
 // ../base-ui/src/assets/snippets.tsx
-var import_react22 = __toESM(require("react"), 1);
+var import_react21 = __toESM(require("react"), 1);
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var SnippetsIcon = import_react22.default.forwardRef(
+var SnippetsIcon = import_react21.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -1093,9 +979,9 @@ SnippetsIcon.displayName = "Snippets";
 var snippets_default = SnippetsIcon;
 
 // ../base-ui/src/assets/test.tsx
-var import_react23 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var TestIcon = import_react23.default.forwardRef(
+var TestIcon = import_react22.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -1123,9 +1009,9 @@ TestIcon.displayName = "Test";
 var test_default = TestIcon;
 
 // ../base-ui/src/assets/diff.tsx
-var import_react24 = __toESM(require("react"), 1);
+var import_react23 = __toESM(require("react"), 1);
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var DiffIcon = import_react24.default.forwardRef(
+var DiffIcon = import_react23.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
@@ -1155,9 +1041,9 @@ DiffIcon.displayName = "Diff";
 var diff_default = DiffIcon;
 
 // ../base-ui/src/assets/dpa.tsx
-var import_react25 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var DPAIcon = import_react25.default.forwardRef(
+var DPAIcon = import_react24.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -1184,9 +1070,9 @@ DPAIcon.displayName = "DPA";
 var dpa_default = DPAIcon;
 
 // ../base-ui/src/assets/subp.tsx
-var import_react26 = __toESM(require("react"), 1);
+var import_react25 = __toESM(require("react"), 1);
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var SubPIcon = import_react26.default.forwardRef(
+var SubPIcon = import_react25.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -1215,9 +1101,9 @@ SubPIcon.displayName = "SubP";
 var subp_default = SubPIcon;
 
 // ../base-ui/src/assets/t3p.tsx
-var import_react27 = __toESM(require("react"), 1);
+var import_react26 = __toESM(require("react"), 1);
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var T3PIcon = import_react27.default.forwardRef(
+var T3PIcon = import_react26.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -1244,9 +1130,9 @@ T3PIcon.displayName = "T3P";
 var t3p_default = T3PIcon;
 
 // ../base-ui/src/assets/http.tsx
-var import_react28 = __toESM(require("react"), 1);
+var import_react27 = __toESM(require("react"), 1);
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var HttpIcon = import_react28.default.forwardRef(
+var HttpIcon = import_react27.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -1274,9 +1160,9 @@ HttpIcon.displayName = "Http";
 var http_default = HttpIcon;
 
 // ../base-ui/src/assets/scheme.tsx
-var import_react29 = __toESM(require("react"), 1);
+var import_react28 = __toESM(require("react"), 1);
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var SchemeIcon = import_react29.default.forwardRef(
+var SchemeIcon = import_react28.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -1303,9 +1189,9 @@ SchemeIcon.displayName = "Scheme";
 var scheme_default = SchemeIcon;
 
 // ../base-ui/src/assets/faq.tsx
-var import_react30 = __toESM(require("react"), 1);
+var import_react29 = __toESM(require("react"), 1);
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var FAQIcon = import_react30.default.forwardRef(
+var FAQIcon = import_react29.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
@@ -1334,9 +1220,9 @@ FAQIcon.displayName = "FAQ";
 var faq_default = FAQIcon;
 
 // ../base-ui/src/assets/faqb.tsx
-var import_react31 = __toESM(require("react"), 1);
+var import_react30 = __toESM(require("react"), 1);
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var FAQBIcon = import_react31.default.forwardRef(
+var FAQBIcon = import_react30.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
@@ -1372,9 +1258,9 @@ FAQBIcon.displayName = "FAQB";
 var faqb_default = FAQBIcon;
 
 // ../base-ui/src/assets/faqs.tsx
-var import_react32 = __toESM(require("react"), 1);
+var import_react31 = __toESM(require("react"), 1);
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var FAQSIcon = import_react32.default.forwardRef(
+var FAQSIcon = import_react31.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { color = "currentColor", className } = _b, props = __objRest(_b, ["color", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
@@ -1562,7 +1448,7 @@ __export(limited_lucide_icons_exports, {
 });
 
 // ../../node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/createLucideIcon.js
-var import_react34 = require("react");
+var import_react33 = require("react");
 
 // ../../node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
@@ -1586,7 +1472,7 @@ var hasA11yProp = (props) => {
 };
 
 // ../../node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/Icon.js
-var import_react33 = require("react");
+var import_react32 = require("react");
 
 // ../../node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
@@ -1602,7 +1488,7 @@ var defaultAttributes = {
 };
 
 // ../../node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/Icon.js
-var Icon = (0, import_react33.forwardRef)(
+var Icon = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       color = "currentColor",
@@ -1621,7 +1507,7 @@ var Icon = (0, import_react33.forwardRef)(
       "children",
       "iconNode"
     ]);
-    return (0, import_react33.createElement)(
+    return (0, import_react32.createElement)(
       "svg",
       __spreadValues(__spreadValues(__spreadProps(__spreadValues({
         ref
@@ -1633,7 +1519,7 @@ var Icon = (0, import_react33.forwardRef)(
         className: mergeClasses("lucide", className)
       }), !children && !hasA11yProp(rest) && { "aria-hidden": "true" }), rest),
       [
-        ...iconNode.map(([tag, attrs]) => (0, import_react33.createElement)(tag, attrs)),
+        ...iconNode.map(([tag, attrs]) => (0, import_react32.createElement)(tag, attrs)),
         ...Array.isArray(children) ? children : [children]
       ]
     );
@@ -1642,10 +1528,10 @@ var Icon = (0, import_react33.forwardRef)(
 
 // ../../node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
-  const Component2 = (0, import_react34.forwardRef)(
+  const Component2 = (0, import_react33.forwardRef)(
     (_a, ref) => {
       var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-      return (0, import_react34.createElement)(Icon, __spreadValues({
+      return (0, import_react33.createElement)(Icon, __spreadValues({
         ref,
         iconNode,
         className: mergeClasses(
@@ -2872,7 +2758,7 @@ var __iconNode111 = [
 var Zap = createLucideIcon("zap", __iconNode111);
 
 // ../base-ui/src/components/global-icon.tsx
-var import_react35 = __toESM(require("react"), 1);
+var import_react34 = __toESM(require("react"), 1);
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var tempStyledLimitedIcons = {};
 for (const iconNameKey in limited_lucide_icons_exports) {
@@ -2942,44 +2828,19 @@ function getGlobalIcon(iconKey, createElement3) {
     }
     const FallbackIcon = globalLucideIcons[DEFAULT_FALLBACK_ICON];
     if (createElement3) {
-      return import_react35.default.createElement(FallbackIcon);
+      return import_react34.default.createElement(FallbackIcon);
     }
     return FallbackIcon;
   }
   if (createElement3) {
-    return import_react35.default.createElement(Icon2);
+    return import_react34.default.createElement(Icon2);
   }
   return Icon2;
 }
 
-// src/main/rich-text-expert.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var defaultTagRenderers = {
-  // text Stong
-  strong: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("strong", { children: chunks }),
-  // text Emphasis
-  em: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("em", { children: chunks }),
-  // text Underline
-  u: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("u", { children: chunks }),
-  // text Mark
-  mark: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("mark", { className: "bg-purple-300 dark:bg-purple-500 text-neutral-800 dark:text-neutral-300 px-1 rounded", children: chunks }),
-  // text Delete
-  del: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("del", { children: chunks }),
-  // text Subscript
-  sub: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("sub", { children: chunks }),
-  // text Superscript
-  sup: (chunks) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("sup", { children: chunks })
-};
-function createRichTextRenderer(customRenderers) {
-  const renderers = __spreadValues(__spreadValues({}, defaultTagRenderers), customRenderers);
-  return function richText2(t, key) {
-    return t.rich(key, renderers);
-  };
-}
-var richText = createRichTextRenderer();
-
 // src/main/usage.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_rich_text_expert = require("@third-ui/main/rich-text-expert");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Usage(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -2990,29 +2851,29 @@ function Usage(_0) {
     const data = {
       title: t("title"),
       eyesOn: t("eyesOn"),
-      description: richText(t, "description"),
+      description: (0, import_rich_text_expert.richText)(t, "description"),
       steps: steps.map((step, index) => ({
         id: `usage-step-${index}`,
         title: step.title,
-        description: richText(t, `steps.${index}.description`),
+        description: (0, import_rich_text_expert.richText)(t, `steps.${index}.description`),
         iconKey: step.iconKey,
         stepNumber: index + 1
       }))
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("section", { id: "usage", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("section", { id: "usage", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: [
         data.title,
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-purple-500", children: data.eyesOn })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-purple-500", children: data.eyesOn })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap", children: data.description }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.steps.map((step) => {
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap", children: data.description }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.steps.map((step) => {
         const Icon2 = getGlobalIcon(step.iconKey);
-        return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { "data-usage-step": step.id, className: "flex items-start", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-shrink-0 mr-4", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon2, { className: "w-8 h-8 text-purple-500" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: `${step.stepNumber}. ${step.title}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-gray-700 dark:text-gray-300", children: step.description })
+        return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { "data-usage-step": step.id, className: "flex items-start", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-shrink-0 mr-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon2, { className: "w-8 h-8 text-purple-500" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: `${step.stepNumber}. ${step.title}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-gray-700 dark:text-gray-300", children: step.description })
           ] })
         ] }, step.id);
       }) }) })
@@ -3022,7 +2883,8 @@ function Usage(_0) {
 
 // src/main/features.tsx
 var import_server4 = require("next-intl/server");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_rich_text_expert2 = require("@third-ui/main/rich-text-expert");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Features(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -3033,32 +2895,32 @@ function Features(_0) {
     const data = {
       title: t("title"),
       eyesOn: t("eyesOn"),
-      description: richText(t, "description"),
+      description: (0, import_rich_text_expert2.richText)(t, "description"),
       items: featureItems.map((feature, index) => ({
         id: `feature-item-${index}`,
         title: feature.title,
-        description: richText(t, `items.${index}.description`),
+        description: (0, import_rich_text_expert2.richText)(t, `items.${index}.description`),
         iconKey: feature.iconKey
       }))
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { id: "features", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-18", sectionClassName), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("section", { id: "features", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-18", sectionClassName), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: [
         data.title,
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-purple-500", children: data.eyesOn })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-purple-500", children: data.eyesOn })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap", children: data.description }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.items.map((feature) => {
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap", children: data.description }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: data.items.map((feature) => {
         const Icon2 = getGlobalIcon(feature.iconKey);
-        return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "div",
           {
             "data-feature-id": feature.id,
             className: "bg-white dark:bg-gray-800/60 p-8 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-4xl mb-4 flex items-center justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon2, { className: "w-8 h-8" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100", children: feature.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-gray-700 dark:text-gray-300", children: feature.description })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-4xl mb-4 flex items-center justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon2, { className: "w-8 h-8" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100", children: feature.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-gray-700 dark:text-gray-300", children: feature.description })
             ]
           },
           feature.id
@@ -3070,7 +2932,8 @@ function Features(_0) {
 
 // src/main/tips.tsx
 var import_server5 = require("next-intl/server");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_rich_text_expert3 = require("@third-ui/main/rich-text-expert");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Tips(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -3081,7 +2944,7 @@ function Tips(_0) {
     const processedSections = sections.map((section, index) => ({
       id: `tip-section-${index}`,
       title: section.title,
-      description: richText(t, `sections.${index}.description`)
+      description: (0, import_rich_text_expert3.richText)(t, `sections.${index}.description`)
     }));
     const midPoint = Math.ceil(processedSections.length / 2);
     const leftColumn = processedSections.slice(0, midPoint);
@@ -3092,15 +2955,15 @@ function Tips(_0) {
       leftColumn,
       rightColumn
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("section", { id: "tips", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-16", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { id: "tips", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-16", children: [
         data.title,
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-purple-500", children: data.eyesOn })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-purple-500", children: data.eyesOn })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-12 bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [data.leftColumn, data.rightColumn].map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "space-y-8", children: column.map((tip) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { "data-tip-id": tip.id, className: "space-y-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-2xl font-semibold", children: tip.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "", children: tip.description })
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-12 bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [data.leftColumn, data.rightColumn].map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "space-y-8", children: column.map((tip) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { "data-tip-id": tip.id, className: "space-y-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h3", { className: "text-2xl font-semibold", children: tip.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "", children: tip.description })
       ] }, tip.id)) }, colIndex)) })
     ] });
   });
@@ -3108,52 +2971,9 @@ function Tips(_0) {
 
 // src/main/faq.tsx
 var import_server6 = require("next-intl/server");
-
-// src/main/faq-interactive.tsx
-var import_react36 = require("react");
-function FAQInteractive({ data }) {
-  const [openStates, setOpenStates] = (0, import_react36.useState)({});
-  (0, import_react36.useEffect)(() => {
-    data.items.forEach((item) => {
-      const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
-      const contentDiv = document.querySelector(`[data-faq-content="${item.id}"]`);
-      const iconSvg = document.querySelector(`[data-faq-icon="${item.id}"]`);
-      if (toggleButton && contentDiv && iconSvg) {
-        const handleClick = () => {
-          const isOpen = openStates[item.id] || false;
-          const newOpenState = !isOpen;
-          setOpenStates((prev) => __spreadProps(__spreadValues({}, prev), {
-            [item.id]: newOpenState
-          }));
-          if (newOpenState) {
-            contentDiv.classList.remove("hidden");
-            toggleButton.setAttribute("aria-expanded", "true");
-            iconSvg.style.transform = "rotate(90deg)";
-          } else {
-            contentDiv.classList.add("hidden");
-            toggleButton.setAttribute("aria-expanded", "false");
-            iconSvg.style.transform = "rotate(0deg)";
-          }
-        };
-        toggleButton.addEventListener("click", handleClick);
-      }
-    });
-    return () => {
-      data.items.forEach((item) => {
-        var _a;
-        const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
-        if (toggleButton) {
-          const newButton = toggleButton.cloneNode(true);
-          (_a = toggleButton.parentNode) == null ? void 0 : _a.replaceChild(newButton, toggleButton);
-        }
-      });
-    };
-  }, [data, openStates]);
-  return null;
-}
-
-// src/main/faq.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_rich_text_expert4 = require("@third-ui/main/rich-text-expert");
+var import_main2 = require("@third-ui/main");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function FAQ(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -3163,31 +2983,31 @@ function FAQ(_0) {
     const rawItems = t.raw("items");
     const data = {
       title: t("title"),
-      description: richText(t, "description"),
+      description: (0, import_rich_text_expert4.richText)(t, "description"),
       items: rawItems.map((item, index) => ({
         id: `faq-item-${index}`,
         question: item.question,
-        answer: richText(t, `items.${index}.answer`)
+        answer: (0, import_rich_text_expert4.richText)(t, `items.${index}.answer`)
       }))
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("section", { id: "faq", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: data.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto", children: data.description }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "space-y-6", children: data.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("section", { id: "faq", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: data.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto", children: data.description }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "space-y-6", children: data.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
         "div",
         {
           "data-faq-id": item.id,
           className: "bg-white dark:bg-gray-800/60 p-6 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
               "button",
               {
                 className: "w-full flex items-center justify-between text-left focus:outline-none",
                 "data-faq-toggle": item.id,
                 "aria-expanded": "false",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }),
-                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }),
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                     "svg",
                     {
                       className: "w-6 h-6 text-gray-400 ml-2 transition-transform duration-200",
@@ -3195,13 +3015,13 @@ function FAQ(_0) {
                       fill: "none",
                       stroke: "currentColor",
                       viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "div",
               {
                 className: "mt-4 text-gray-700 dark:text-gray-300 text-base hidden",
@@ -3213,14 +3033,15 @@ function FAQ(_0) {
         },
         item.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FAQInteractive, { data })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_main2.FAQInteractive, { data })
     ] });
   });
 }
 
 // src/main/seo-content.tsx
 var import_server7 = require("next-intl/server");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_rich_text_expert5 = require("@third-ui/main/rich-text-expert");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function SeoContent(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -3232,30 +3053,30 @@ function SeoContent(_0) {
       title: t("title"),
       eyesOn: t("eyesOn"),
       description: t("description"),
-      intro: richText(t, "intro"),
+      intro: (0, import_rich_text_expert5.richText)(t, "intro"),
       sections: rawSections.map((section, index) => ({
         id: `seo-section-${index}`,
         title: section.title,
-        content: richText(t, `sections.${index}.content`)
+        content: (0, import_rich_text_expert5.richText)(t, `sections.${index}.content`)
       })),
-      conclusion: richText(t, "conclusion")
+      conclusion: (0, import_rich_text_expert5.richText)(t, "conclusion")
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("section", { id: "seo", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("section", { id: "seo", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [
         data.title,
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-purple-500", children: data.eyesOn })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-purple-500", children: data.eyesOn })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: data.description }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "space-y-10", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: data.intro }),
-          data.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { "data-seo-section": section.id, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h2", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: section.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: data.description }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "bg-gray-50 dark:bg-gray-800/60 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 md:p-12 shadow-sm dark:shadow-none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "space-y-10", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: data.intro }),
+          data.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { "data-seo-section": section.id, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: section.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })
           ] }, section.id))
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: data.conclusion })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: data.conclusion })
       ] })
     ] });
   });
@@ -3263,306 +3084,9 @@ function SeoContent(_0) {
 
 // src/main/cta.tsx
 var import_server8 = require("next-intl/server");
-
-// ../base-ui/src/ui/button.tsx
-var React35 = __toESM(require("react"), 1);
-
-// ../../node_modules/.pnpm/@radix-ui+react-slot@1.2.3_@types+react@19.1.2_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.mjs
-var React34 = __toESM(require("react"), 1);
-
-// ../../node_modules/.pnpm/@radix-ui+react-compose-refs@1.1.2_@types+react@19.1.2_react@19.1.0/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-var React33 = __toESM(require("react"), 1);
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    return ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    let hasCleanup = false;
-    const cleanups = refs.map((ref) => {
-      const cleanup = setRef(ref, node);
-      if (!hasCleanup && typeof cleanup == "function") {
-        hasCleanup = true;
-      }
-      return cleanup;
-    });
-    if (hasCleanup) {
-      return () => {
-        for (let i = 0; i < cleanups.length; i++) {
-          const cleanup = cleanups[i];
-          if (typeof cleanup == "function") {
-            cleanup();
-          } else {
-            setRef(refs[i], null);
-          }
-        }
-      };
-    }
-  };
-}
-
-// ../../node_modules/.pnpm/@radix-ui+react-slot@1.2.3_@types+react@19.1.2_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.mjs
-var import_jsx_runtime40 = require("react/jsx-runtime");
-// @__NO_SIDE_EFFECTS__
-function createSlot(ownerName) {
-  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React34.forwardRef((props, forwardedRef) => {
-    const _a = props, { children } = _a, slotProps = __objRest(_a, ["children"]);
-    const childrenArray = React34.Children.toArray(children);
-    const slottable = childrenArray.find(isSlottable);
-    if (slottable) {
-      const newElement = slottable.props.children;
-      const newChildren = childrenArray.map((child) => {
-        if (child === slottable) {
-          if (React34.Children.count(newElement) > 1) return React34.Children.only(null);
-          return React34.isValidElement(newElement) ? newElement.props.children : null;
-        } else {
-          return child;
-        }
-      });
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SlotClone, __spreadProps(__spreadValues({}, slotProps), { ref: forwardedRef, children: React34.isValidElement(newElement) ? React34.cloneElement(newElement, void 0, newChildren) : null }));
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SlotClone, __spreadProps(__spreadValues({}, slotProps), { ref: forwardedRef, children }));
-  });
-  Slot2.displayName = `${ownerName}.Slot`;
-  return Slot2;
-}
-var Slot = /* @__PURE__ */ createSlot("Slot");
-// @__NO_SIDE_EFFECTS__
-function createSlotClone(ownerName) {
-  const SlotClone = React34.forwardRef((props, forwardedRef) => {
-    const _a = props, { children } = _a, slotProps = __objRest(_a, ["children"]);
-    if (React34.isValidElement(children)) {
-      const childrenRef = getElementRef(children);
-      const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React34.Fragment) {
-        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
-      }
-      return React34.cloneElement(children, props2);
-    }
-    return React34.Children.count(children) > 1 ? React34.Children.only(null) : null;
-  });
-  SlotClone.displayName = `${ownerName}.SlotClone`;
-  return SlotClone;
-}
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
-function isSlottable(child) {
-  return React34.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
-}
-function mergeProps(slotProps, childProps) {
-  const overrideProps = __spreadValues({}, childProps);
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (slotPropValue && childPropValue) {
-        overrideProps[propName] = (...args) => {
-          const result = childPropValue(...args);
-          slotPropValue(...args);
-          return result;
-        };
-      } else if (slotPropValue) {
-        overrideProps[propName] = slotPropValue;
-      }
-    } else if (propName === "style") {
-      overrideProps[propName] = __spreadValues(__spreadValues({}, slotPropValue), childPropValue);
-    } else if (propName === "className") {
-      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
-    }
-  }
-  return __spreadValues(__spreadValues({}, slotProps), overrideProps);
-}
-function getElementRef(element) {
-  var _a, _b;
-  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
-  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.ref;
-  }
-  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
-  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  if (mayWarn) {
-    return element.props.ref;
-  }
-  return element.props.ref || element.ref;
-}
-
-// ../base-ui/src/ui/button.tsx
-var import_class_variance_authority = require("class-variance-authority");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React35.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, variant, size, asChild = false, loading = false, children } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild", "loading", "children"]);
-    const Comp = asChild ? Slot : "button";
-    if (asChild) {
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        Comp,
-        __spreadProps(__spreadValues({
-          className: cn(buttonVariants({ variant, size, className })),
-          ref,
-          disabled: loading || props.disabled
-        }, props), {
-          children
-        })
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-      Comp,
-      __spreadProps(__spreadValues({
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        disabled: loading || props.disabled
-      }, props), {
-        children: [
-          children,
-          loading && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(globalLucideIcons.Loader2, { className: "ml-2 h-4 w-4 animate-spin" })
-        ]
-      })
-    );
-  }
-);
-Button.displayName = "Button";
-
-// src/fuma/mdx/gradient-button.tsx
-var import_link2 = __toESM(require("next/link"));
-var import_react37 = __toESM(require("react"));
-var import_jsx_runtime42 = require("react/jsx-runtime");
-function GradientButton({
-  title,
-  icon,
-  align = "left",
-  disabled = false,
-  className = "",
-  href,
-  openInNewTab = true,
-  onClick,
-  loadingText,
-  preventDoubleClick = true
-}) {
-  const [isLoading, setIsLoading] = (0, import_react37.useState)(false);
-  const actualLoadingText = loadingText || (title == null ? void 0 : title.toString().trim()) || "Loading...";
-  const getAlignmentClass = () => {
-    switch (align) {
-      case "center":
-        return "justify-center";
-      case "right":
-        return "justify-end";
-      default:
-        return "justify-start";
-    }
-  };
-  const handleClick = (e) => __async(null, null, function* () {
-    if (disabled || isLoading) {
-      e.preventDefault();
-      return;
-    }
-    if (onClick) {
-      e.preventDefault();
-      if (preventDoubleClick) {
-        setIsLoading(true);
-      }
-      try {
-        yield onClick();
-      } catch (error) {
-        console.error("GradientButton onClick error:", error);
-      } finally {
-        if (preventDoubleClick) {
-          setIsLoading(false);
-        }
-      }
-    }
-  });
-  const isDisabled = disabled || isLoading;
-  const displayTitle = isLoading ? actualLoadingText : title;
-  const displayIcon = isLoading ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(globalLucideIcons.Loader2, { className: "h-4 w-4 text-white animate-spin" }) : icon ? import_react37.default.cloneElement(icon, {
-    className: "h-4 w-4 text-white"
-  }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(globalLucideIcons.ArrowRight, { className: "h-4 w-4 text-white" });
-  const buttonContent = onClick ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: displayIcon }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ml-1", children: displayTitle })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: displayTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ml-1", children: displayIcon })
-  ] });
-  const buttonClassName = `
-    bg-gradient-to-r 
-    from-purple-400 to-pink-500 
-    hover:from-purple-500 hover:to-pink-600
-    dark:from-purple-500 dark:to-pink-600 
-    dark:hover:from-purple-600 dark:hover:to-pink-700
-    text-white text-base font-bold shadow-lg hover:shadow-xl
-    transition-all duration-300
-    rounded-full
-    ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}
-    ${className}
-  `;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `flex flex-col sm:flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (
-    // for click
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      Button,
-      {
-        size: "lg",
-        className: buttonClassName,
-        onClick: handleClick,
-        disabled: isDisabled,
-        children: buttonContent
-      }
-    )
-  ) : (
-    // for Link
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      Button,
-      {
-        asChild: true,
-        size: "lg",
-        className: buttonClassName,
-        disabled: isDisabled,
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          import_link2.default,
-          __spreadProps(__spreadValues({
-            href: href || "#",
-            className: "no-underline hover:no-underline"
-          }, openInNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {}), {
-            onClick: isDisabled ? (e) => e.preventDefault() : void 0,
-            children: buttonContent
-          })
-        )
-      }
-    )
-  ) });
-}
-
-// src/main/cta.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_gradient_button = require("@third-ui/fuma/mdx/gradient-button");
+var import_rich_text_expert6 = require("@third-ui/main/rich-text-expert");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function CTA(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -3572,25 +3096,25 @@ function CTA(_0) {
     const data = {
       title: t("title"),
       eyesOn: t("eyesOn"),
-      description1: richText(t, "description1"),
+      description1: (0, import_rich_text_expert6.richText)(t, "description1"),
       description2: t("description2"),
       button: t("button"),
       url: t("url")
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("section", { id: "cta", className: cn("px-16 py-20 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "\n        bg-gradient-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]\n        dark:bg-gradient-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]\n        rounded-2xl p-12 text-center\n        bg-[length:200%_auto] animate-cta-gradient-wave\n        ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold mb-6", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("section", { id: "cta", className: cn("px-16 py-20 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "\n        bg-gradient-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]\n        dark:bg-gradient-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]\n        rounded-2xl p-12 text-center\n        bg-[length:200%_auto] animate-cta-gradient-wave\n        ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold mb-6", children: [
         data.title,
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-purple-400", children: data.eyesOn }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-purple-400", children: data.eyesOn }),
         "?"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("p", { className: "text-2xl mx-auto mb-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "text-2xl mx-auto mb-8", children: [
         data.description1,
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("br", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-purple-400", children: data.description2 })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("br", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-purple-400", children: data.description2 })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-        GradientButton,
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        import_gradient_button.GradientButton,
         {
           title: data.button,
           href: data.url,
@@ -3603,8 +3127,8 @@ function CTA(_0) {
 
 // src/main/footer.tsx
 var import_server9 = require("next-intl/server");
-var import_link3 = __toESM(require("next/link"));
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_link2 = __toESM(require("next/link"));
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function Footer(_0) {
   return __async(this, arguments, function* ({ locale }) {
     const tFooter = yield (0, import_server9.getTranslations)({ locale, namespace: "footer" });
@@ -3616,243 +3140,40 @@ function Footer(_0) {
       company: tFooter("company"),
       copyright: tFooter("copyright", { year: (/* @__PURE__ */ new Date()).getFullYear(), name: tFooter("company") })
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "mb-10 w-full mx-auto border-t-purple-700/80 border-t-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center justify-center space-x-6 text-xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_link3.default, { href: `/${locale}/legal/terms`, className: "flex items-center space-x-1 hover:underline", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(globalLucideIcons.ReceiptText, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: data.terms })
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "mb-10 w-full mx-auto border-t-purple-700/80 border-t-1", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-center space-x-6 text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_link2.default, { href: `/${locale}/legal/terms`, className: "flex items-center space-x-1 hover:underline", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(globalLucideIcons.ReceiptText, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: data.terms })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_link3.default, { href: `/${locale}/legal/privacy`, className: "flex items-center space-x-1 hover:underline", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(globalLucideIcons.ShieldUser, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: data.privacy })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_link2.default, { href: `/${locale}/legal/privacy`, className: "flex items-center space-x-1 hover:underline", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(globalLucideIcons.ShieldUser, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: data.privacy })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "relative group", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "absolute left-2/3 -translate-x-1/4 bottom-full mb-1 hidden group-hover:block bg-zinc-600 text-white text-xs rounded px-3 py-1 whitespace-nowrap z-10 shadow-lg", children: data.email }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative group", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute left-2/3 -translate-x-1/4 bottom-full mb-1 hidden group-hover:block bg-zinc-600 text-white text-xs rounded px-3 py-1 whitespace-nowrap z-10 shadow-lg", children: data.email }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
             "a",
             {
               href: `mailto:${data.email}`,
               className: "flex items-center space-x-1 underline cursor-pointer px-2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(globalLucideIcons.Mail, { className: "h-3.5 w-3.5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: data.contactUs })
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(globalLucideIcons.Mail, { className: "h-3.5 w-3.5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: data.contactUs })
               ]
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "text-xs text-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: data.copyright }) })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-xs text-center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: data.copyright }) })
     ] }) }) });
   });
 }
 
 // src/main/price-plan.tsx
 var import_server10 = require("next-intl/server");
-
-// src/main/price-plan-interactive.tsx
-var import_react38 = require("react");
-var import_navigation = require("next/navigation");
-var import_jsx_runtime45 = require("react/jsx-runtime");
-function PricePlanInteractive({ data }) {
-  const [billingKey, setBillingKey] = (0, import_react38.useState)(data.billingSwitch.defaultKey);
-  const [tooltip, setTooltip] = (0, import_react38.useState)({ show: false, content: "", x: 0, y: 0 });
-  const router = (0, import_navigation.useRouter)();
-  (0, import_react38.useEffect)(() => {
-    const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
-    const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
-    const handleBillingSwitch = (newBillingKey) => {
-      setBillingKey(newBillingKey);
-      updatePrices(newBillingKey);
-      updateDiscountInfo(newBillingKey);
-      updateButtonStyles(newBillingKey);
-    };
-    if (monthlyButton) {
-      monthlyButton.addEventListener("click", () => handleBillingSwitch("monthly"));
-    }
-    if (yearlyButton) {
-      yearlyButton.addEventListener("click", () => handleBillingSwitch("yearly"));
-    }
-    data.plans.forEach((plan) => {
-      var _a;
-      (_a = plan.features) == null ? void 0 : _a.forEach((feature, i) => {
-        if (feature == null ? void 0 : feature.tooltip) {
-          const tooltipTrigger = document.querySelector(`[data-tooltip-trigger="${plan.key}-${i}"]`);
-          if (tooltipTrigger) {
-            const handleMouseEnter = (e) => {
-              setTooltip({
-                show: true,
-                content: feature.tooltip,
-                x: e.clientX,
-                y: e.clientY
-              });
-            };
-            const handleMouseMove = (e) => {
-              setTooltip((prev) => __spreadProps(__spreadValues({}, prev), { x: e.clientX, y: e.clientY }));
-            };
-            const handleMouseLeave = () => {
-              setTooltip((prev) => __spreadProps(__spreadValues({}, prev), { show: false }));
-            };
-            tooltipTrigger.addEventListener("mouseenter", handleMouseEnter);
-            tooltipTrigger.addEventListener("mousemove", handleMouseMove);
-            tooltipTrigger.addEventListener("mouseleave", handleMouseLeave);
-          }
-        }
-      });
-    });
-    data.plans.forEach((plan) => {
-      var _a;
-      const planButton = document.querySelector(`[data-plan-button="${plan.key}"]`);
-      if (planButton && !((_a = plan.button) == null ? void 0 : _a.disabled)) {
-        planButton.addEventListener("click", () => {
-          router.push("/");
-        });
-      }
-    });
-    return () => {
-      var _a, _b;
-      if (monthlyButton) {
-        const newButton = monthlyButton.cloneNode(true);
-        (_a = monthlyButton.parentNode) == null ? void 0 : _a.replaceChild(newButton, monthlyButton);
-      }
-      if (yearlyButton) {
-        const newButton = yearlyButton.cloneNode(true);
-        (_b = yearlyButton.parentNode) == null ? void 0 : _b.replaceChild(newButton, yearlyButton);
-      }
-      data.plans.forEach((plan) => {
-        var _a2;
-        (_a2 = plan.features) == null ? void 0 : _a2.forEach((_feature, i) => {
-          var _a3;
-          const tooltipTrigger = document.querySelector(`[data-tooltip-trigger="${plan.key}-${i}"]`);
-          if (tooltipTrigger) {
-            const newTrigger = tooltipTrigger.cloneNode(true);
-            (_a3 = tooltipTrigger.parentNode) == null ? void 0 : _a3.replaceChild(newTrigger, tooltipTrigger);
-          }
-        });
-      });
-    };
-  }, [data, router]);
-  const updatePrices = (newBillingKey) => {
-    const currentBilling = data.pricePlanConfig.billingOptions.find((opt) => opt.key === newBillingKey) || data.pricePlanConfig.billingOptions[0];
-    const currentBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === newBillingKey) || data.billingSwitch.options[0];
-    data.plans.forEach((plan) => {
-      const priceContainer = document.querySelector(`[data-price-container="${plan.key}"]`);
-      const priceValue = data.pricePlanConfig.prices[plan.key];
-      if (priceContainer) {
-        const priceValueElement = document.querySelector(`[data-price-value="${plan.key}"]`);
-        const priceUnitElement = document.querySelector(`[data-price-unit="${plan.key}"]`);
-        const priceOriginalElement = document.querySelector(`[data-price-original="${plan.key}"]`);
-        const priceDiscountElement = document.querySelector(`[data-price-discount="${plan.key}"]`);
-        const priceSubtitleElement = document.querySelector(`[data-price-subtitle="${plan.key}"]`);
-        if (typeof priceValue !== "number" || isNaN(priceValue)) {
-          if (priceValueElement) priceValueElement.textContent = String(priceValue);
-          if (priceSubtitleElement) priceSubtitleElement.textContent = plan.showBillingSubTitle === false ? "" : (currentBillingDisplay == null ? void 0 : currentBillingDisplay.subTitle) || "";
-        } else {
-          const originValue = Number(priceValue);
-          const discount = currentBilling.discount;
-          const hasDiscount = discount !== 0;
-          const saleValue = originValue * (1 - discount);
-          const formatPrice = (v) => Number(v.toFixed(2)).toString();
-          const showNaN = saleValue < 0;
-          if (priceValueElement) {
-            priceValueElement.textContent = `${data.currency}${showNaN ? "NaN" : hasDiscount ? formatPrice(saleValue) : formatPrice(originValue)}`;
-          }
-          if (priceUnitElement) {
-            priceUnitElement.textContent = currentBillingDisplay.unit || "";
-          }
-          if (hasDiscount) {
-            if (priceOriginalElement) {
-              priceOriginalElement.textContent = `${data.currency}${showNaN ? "NaN" : formatPrice(originValue)}`;
-              priceOriginalElement.style.display = "inline";
-            }
-            if (priceDiscountElement && currentBillingDisplay.discountText) {
-              const discountText = currentBillingDisplay.discountText.replace("{percent}", String(Math.round(Math.abs(discount) * 100)));
-              priceDiscountElement.textContent = discountText;
-              priceDiscountElement.style.display = "inline";
-            }
-          } else {
-            if (priceOriginalElement) priceOriginalElement.style.display = "none";
-            if (priceDiscountElement) priceDiscountElement.style.display = "none";
-          }
-          if (priceSubtitleElement) {
-            priceSubtitleElement.textContent = plan.showBillingSubTitle === false ? "" : (currentBillingDisplay == null ? void 0 : currentBillingDisplay.subTitle) || "";
-          }
-        }
-      }
-    });
-  };
-  const updateDiscountInfo = (newBillingKey) => {
-    const discountInfoElement = document.querySelector("[data-discount-info]");
-    if (discountInfoElement) {
-      const opt = data.billingSwitch.options.find((opt2) => opt2.key === newBillingKey);
-      const bOpt = data.pricePlanConfig.billingOptions.find((opt2) => opt2.key === newBillingKey);
-      if (opt && bOpt && opt.discountText && bOpt.discount !== 0) {
-        const discountText = opt.discountText.replace("{percent}", String(Math.round(Math.abs(bOpt.discount) * 100)));
-        discountInfoElement.innerHTML = `
-          <span class="px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap">
-            ${discountText}
-          </span>
-        `;
-      } else {
-        discountInfoElement.innerHTML = "";
-      }
-    }
-  };
-  const updateButtonStyles = (newBillingKey) => {
-    const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
-    const yearlyButton = document.querySelector('[data-billing-button="yearly"]');
-    if (monthlyButton) {
-      if (newBillingKey === "monthly") {
-        monthlyButton.className = cn(
-          "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
-          "text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm"
-        );
-      } else {
-        monthlyButton.className = cn(
-          "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
-          "text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full"
-        );
-      }
-    }
-    if (yearlyButton) {
-      if (newBillingKey === "yearly") {
-        yearlyButton.className = cn(
-          "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
-          "text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm"
-        );
-      } else {
-        yearlyButton.className = cn(
-          "min-w-[120px] px-6 py-2 font-medium transition text-lg relative",
-          "text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full"
-        );
-      }
-    }
-  };
-  const Tooltip = ({ show, content, x, y }) => {
-    if (!show) return null;
-    const style = {
-      position: "fixed",
-      left: Math.max(8, x),
-      top: Math.max(8, y),
-      zIndex: 9999,
-      maxWidth: 200,
-      transform: "translateY(-50%)",
-      pointerEvents: "none",
-      whiteSpace: "pre-line"
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      "div",
-      {
-        style,
-        className: "bg-gray-700 dark:bg-gray-200 text-gray-100 dark:text-gray-800 text-xs leading-relaxed px-3 py-2 rounded-lg shadow-lg border border-gray-300 dark:border-gray-600 backdrop-blur-sm",
-        children: content
-      }
-    );
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Tooltip, __spreadValues({}, tooltip));
-}
-
-// src/main/price-plan.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_main3 = require("@third-ui/main");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function PricePlan(_0) {
   return __async(this, arguments, function* ({
     locale,
@@ -3894,9 +3215,9 @@ function PricePlan(_0) {
       const currentBillingDisplay = data.billingSwitch.options.find((opt) => opt.key === billingKey) || defaultBillingDisplay;
       const billingSubTitle = (currentBillingDisplay == null ? void 0 : currentBillingDisplay.subTitle) || "";
       if (typeof priceValue !== "number" || isNaN(priceValue)) {
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-end gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: priceValue }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: cn("text-xs text-gray-700 dark:text-gray-300 font-medium", plan.showBillingSubTitle === false && "opacity-0 select-none"), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? "" : billingSubTitle }) })
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex items-end gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: priceValue }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cn("text-xs text-gray-700 dark:text-gray-300 font-medium", plan.showBillingSubTitle === false && "opacity-0 select-none"), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? "" : billingSubTitle }) })
         ] });
       }
       const originValue = Number(priceValue);
@@ -3910,32 +3231,32 @@ function PricePlan(_0) {
         discountText = currentBillingDisplay.discountText.replace("{percent}", String(Math.round(Math.abs(discount) * 100)));
       }
       const showNaN = saleValue < 0;
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-end gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-start w-full", "data-price-container": plan.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-end gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": plan.key, children: [
             data.currency,
             showNaN ? "NaN" : hasDiscount ? formatPrice(saleValue) : formatPrice(originValue)
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": plan.key, children: unit })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": plan.key, children: unit })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: [
-          hasDiscount && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "text-base text-gray-400 line-through", "data-price-original": plan.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2 min-h-[24px] mt-1", children: [
+          hasDiscount && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "text-base text-gray-400 line-through", "data-price-original": plan.key, children: [
               data.currency,
               showNaN ? "NaN" : formatPrice(originValue)
             ] }),
-            discountText && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "px-2 py-0.5 text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": plan.key, children: discountText })
+            discountText && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "px-2 py-0.5 text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": plan.key, children: discountText })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: cn("text-xs text-gray-700 dark:text-gray-300 font-medium", plan.showBillingSubTitle === false && "opacity-0 select-none"), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? "" : billingSubTitle })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cn("text-xs text-gray-700 dark:text-gray-300 font-medium", plan.showBillingSubTitle === false && "opacity-0 select-none"), "data-price-subtitle": plan.key, children: plan.showBillingSubTitle === false ? "" : billingSubTitle })
         ] })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("section", { id: "pricing", className: cn("px-4 py-10 md:px-16 md:py-16 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-8 text-base md:text-lg mx-auto", children: data.subtitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center relative mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1", "data-billing-switch": true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("section", { id: "pricing", className: cn("px-4 py-10 md:px-16 md:py-16 mx-auto max-w-7xl scroll-mt-10", sectionClassName), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-3", children: data.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-8 text-base md:text-lg mx-auto", children: data.subtitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex items-center relative mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full p-1", "data-billing-switch": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "button",
             {
               className: cn(
@@ -3947,7 +3268,7 @@ function PricePlan(_0) {
               children: ((_a = data.billingSwitch.options.find((opt) => opt.key === "monthly")) == null ? void 0 : _a.name) || "Monthly"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "button",
             {
               className: cn(
@@ -3960,19 +3281,19 @@ function PricePlan(_0) {
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "h-8 flex items-center justify-center mb-3", "data-discount-info": true, children: (() => {
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "h-8 flex items-center justify-center mb-3", "data-discount-info": true, children: (() => {
           const opt = data.billingSwitch.options.find((opt2) => opt2.key === data.billingSwitch.defaultKey);
           const bOpt = billingOptions.find((opt2) => opt2.key === data.billingSwitch.defaultKey);
           if (!(opt && bOpt && opt.discountText && bOpt.discount !== 0)) return null;
-          return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap", children: opt.discountText.replace(
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap", children: opt.discountText.replace(
             "{percent}",
             String(Math.round(Math.abs(bOpt.discount) * 100))
           ) });
         })() })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: data.plans.map((plan, _idx) => {
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: data.plans.map((plan, _idx) => {
         var _a2, _b2, _c;
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           "div",
           {
             "data-price-plan": plan.key,
@@ -3983,29 +3304,29 @@ function PricePlan(_0) {
             ),
             style: { minHeight: maxFeaturesCount * 100 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }),
-                plan.titleTags && plan.titleTags.map((tag, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i))
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }),
+                plan.titleTags && plan.titleTags.map((tag, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i))
               ] }),
               renderPrice(plan),
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("ul", { className: "flex-1 mb-6 mt-4", children: getFeatureRows(plan).map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("li", { className: "flex items-center gap-2 mb-2 min-h-[28px]", "data-feature-item": `${plan.key}-${i}`, children: [
-                feature ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200 mr-1", children: feature.icon ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: feature.icon }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "font-bold", children: "\u2713" }) }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\xA0" }),
-                feature && feature.tag && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "px-1 py-0.5 text-[6px] rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 font-semibold align-middle", children: feature.tag }),
-                feature ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("ul", { className: "flex-1 mb-6 mt-4", children: getFeatureRows(plan).map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("li", { className: "flex items-center gap-2 mb-2 min-h-[28px]", "data-feature-item": `${plan.key}-${i}`, children: [
+                feature ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200 mr-1", children: feature.icon ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: feature.icon }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "font-bold", children: "\u2713" }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\xA0" }),
+                feature && feature.tag && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "px-1 py-0.5 text-[6px] rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 font-semibold align-middle", children: feature.tag }),
+                feature ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "relative group cursor-pointer text-sm text-gray-800 dark:text-gray-200", children: [
                   feature.description,
-                  feature.tooltip && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                  feature.tooltip && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                     "span",
                     {
                       className: "ml-1 align-middle inline-flex",
                       "data-tooltip-trigger": `${plan.key}-${i}`,
                       "data-tooltip-content": feature.tooltip,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
                     }
                   )
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: "\xA0" })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "\xA0" })
               ] }, i)) }),
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 "button",
                 {
                   className: cn(
@@ -4023,7 +3344,7 @@ function PricePlan(_0) {
           plan.key
         );
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PricePlanInteractive, { data })
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_main3.PricePlanInteractive, { data })
     ] });
   });
 }