@windrun-huaiin/third-ui 5.11.5 → 5.12.0

package/dist/main/index.js

@@ -2754,9 +2754,268 @@ function getGlobalIcon(iconKey, createElement8) {
   return Icon2;
 }
 
+// ../lib/src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
 // src/main/gallery.tsx
 var import_next_intl = require("next-intl");
 var import_image = __toESM(require("next/image"));
+var import_react35 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function Gallery({ sectionClassName, button }) {
+  const t = (0, import_next_intl.useTranslations)("gallery");
+  const galleryItems = t.raw("prompts");
+  const defaultImgUrl = t.raw("defaultImgUrl");
+  const [imageErrors, setImageErrors] = (0, import_react35.useState)(/* @__PURE__ */ new Set());
+  const handleDownload = (item, index) => __async(null, null, function* () {
+    var _a;
+    try {
+      const response = yield fetch(item.url, {
+        method: "GET",
+        // CORS mode declaration
+        mode: "cors"
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const blob = yield response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const contentType = response.headers.get("content-type");
+      let extension = ".webp";
+      if (contentType) {
+        switch (contentType) {
+          case "image/jpeg":
+          case "image/jpg":
+            extension = ".jpg";
+            break;
+          case "image/png":
+            extension = ".png";
+            break;
+          case "image/gif":
+            extension = ".gif";
+            break;
+          case "image/webp":
+            extension = ".webp";
+            break;
+          case "image/svg+xml":
+            extension = ".svg";
+            break;
+          default:
+            const urlExtension = (_a = item.url.split(".").pop()) == null ? void 0 : _a.toLowerCase();
+            if (urlExtension && ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(urlExtension)) {
+              extension = `.${urlExtension}`;
+            }
+        }
+      }
+      const downloadPrefix = t("downloadPrefix");
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${downloadPrefix}-${index + 1}${extension}`;
+      a.style.display = "none";
+      document.body.appendChild(a);
+      a.click();
+      setTimeout(() => {
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      }, 100);
+    } catch (error) {
+      console.error("Download failed:", error);
+    }
+  });
+  const handleImageError = (index) => {
+    setImageErrors((prev) => new Set(prev).add(index));
+  };
+  const getImageSrc = (item, index) => {
+    return imageErrors.has(index) ? defaultImgUrl : item.url;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("section", { id: "gallery", className: cn("container mx-auto px-4 py-20 scroll-mt-20", sectionClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-6", children: [
+      t("titleL"),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-purple-500", children: t("eyesOn") }),
+      " ",
+      t("titleR")
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-center max-w-2xl mx-auto mb-16", children: t("description") }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: galleryItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "group relative overflow-hidden rounded-xl", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        import_image.default,
+        {
+          src: getImageSrc(item, index),
+          alt: item.altMsg,
+          width: 600,
+          height: 600,
+          className: "w-full h-80 object-cover transition duration-300 group-hover:scale-105",
+          onError: () => handleImageError(index)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute inset-0 flex items-end justify-end p-4 opacity-0 group-hover:opacity-100 transition duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "button",
+        {
+          onClick: () => handleDownload(item, index),
+          className: "bg-black/50 hover:bg-black/70 p-2 rounded-full text-white/80 hover:text-white transition-all duration-300",
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(globalLucideIcons.Download, { className: "h-5 w-5 text-white" })
+        }
+      ) })
+    ] }, index)) }),
+    button && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-center mt-12", children: button })
+  ] });
+}
+
+// src/main/usage.tsx
+var import_next_intl2 = require("next-intl");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function Usage({ sectionClassName }) {
+  const t = (0, import_next_intl2.useTranslations)("usage");
+  const steps = t.raw("steps");
+  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: [
+      t("title"),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-purple-500", children: t("eyesOn") })
+    ] }),
+    /* @__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: t("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: steps.map((step, idx) => {
+      const Icon2 = getGlobalIcon(step.iconKey);
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { 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: `${idx + 1}. ${step.title}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-gray-700 dark:text-gray-300", children: step.description })
+        ] })
+      ] }, idx);
+    }) }) })
+  ] });
+}
+
+// src/main/features.tsx
+var import_next_intl3 = require("next-intl");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function Features({ sectionClassName }) {
+  const t = (0, import_next_intl3.useTranslations)("features");
+  const featureItems = t.raw("items");
+  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: [
+      t("title"),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-purple-500", children: t("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: t("description") }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: featureItems.map((feature, index) => {
+      const Icon2 = getGlobalIcon(feature.iconKey);
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        "div",
+        {
+          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_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 })
+          ]
+        },
+        index
+      );
+    }) })
+  ] });
+}
+
+// src/main/tips.tsx
+var import_next_intl4 = require("next-intl");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function Tips({ sectionClassName }) {
+  const t = (0, import_next_intl4.useTranslations)("tips");
+  const sections = t.raw("sections");
+  const midPoint = Math.ceil(sections.length / 2);
+  const leftColumn = sections.slice(0, midPoint);
+  const rightColumn = sections.slice(midPoint);
+  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: [
+      t("title"),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-purple-500", children: t("eyesOn") })
+    ] }),
+    /* @__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: [leftColumn, rightColumn].map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "space-y-8", children: column.map((tip, tipIndex) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { 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 })
+    ] }, tipIndex)) }, colIndex)) })
+  ] });
+}
+
+// src/main/faq.tsx
+var import_react36 = require("react");
+var import_next_intl5 = require("next-intl");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function FAQ({ sectionClassName }) {
+  const t = (0, import_next_intl5.useTranslations)("faq");
+  const items = t.raw("items");
+  const [openArr, setOpenArr] = (0, import_react36.useState)(() => items.map(() => false));
+  const handleToggle = (idx) => {
+    setOpenArr((prev) => {
+      const next = [...prev];
+      next[idx] = !next[idx];
+      return next;
+    });
+  };
+  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: t("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: t("description") }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "space-y-6", children: items.map((item, idx) => {
+      const isOpen = openArr[idx];
+      const Icon2 = isOpen ? globalLucideIcons.ChevronDown : globalLucideIcons.ChevronRight;
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        "div",
+        {
+          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_runtime37.jsxs)(
+              "button",
+              {
+                className: "w-full flex items-center justify-between text-left focus:outline-none",
+                onClick: () => handleToggle(idx),
+                "aria-expanded": isOpen,
+                children: [
+                  /* @__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)(Icon2, { className: "w-6 h-6 text-gray-400 ml-2 transition-transform duration-200" })
+                ]
+              }
+            ),
+            isOpen && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mt-4 text-gray-700 dark:text-gray-300 text-base", children: item.answer })
+          ]
+        },
+        idx
+      );
+    }) })
+  ] });
+}
+
+// src/main/seo-content.tsx
+var import_next_intl6 = require("next-intl");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function SeoContent({ sectionClassName }) {
+  const t = (0, import_next_intl6.useTranslations)("seoContent");
+  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)("h1", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [
+      t("title"),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-purple-500", children: t("eyesOn") })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: t("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: t("intro") }),
+        t.raw("sections").map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { 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 })
+        ] }, index))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: t("conclusion") })
+    ] })
+  ] });
+}
 
 // ../base-ui/src/ui/button.tsx
 var React35 = __toESM(require("react"), 1);
@@ -2802,7 +3061,7 @@ function useComposedRefs(...refs) {
 }
 
 // ../../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_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
@@ -2820,9 +3079,9 @@ function createSlot(ownerName) {
           return child;
         }
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SlotClone, __spreadProps(__spreadValues({}, slotProps), { ref: forwardedRef, children: React34.isValidElement(newElement) ? React34.cloneElement(newElement, void 0, newChildren) : null }));
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SlotClone, __spreadProps(__spreadValues({}, slotProps), { ref: forwardedRef, children: React34.isValidElement(newElement) ? React34.cloneElement(newElement, void 0, newChildren) : null }));
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SlotClone, __spreadProps(__spreadValues({}, slotProps), { ref: forwardedRef, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SlotClone, __spreadProps(__spreadValues({}, slotProps), { ref: forwardedRef, children }));
   });
   Slot22.displayName = `${ownerName}.Slot`;
   return Slot22;
@@ -2849,7 +3108,7 @@ var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
 // @__NO_SIDE_EFFECTS__
 function createSlottable(ownerName) {
   const Slottable2 = ({ children }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children });
   };
   Slottable2.displayName = `${ownerName}.Slottable`;
   Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
@@ -2899,16 +3158,7 @@ function getElementRef(element) {
 
 // ../base-ui/src/ui/button.tsx
 var import_class_variance_authority = require("class-variance-authority");
-
-// ../lib/src/utils.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
-
-// ../base-ui/src/ui/button.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime40 = 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",
   {
@@ -2939,7 +3189,7 @@ var Button = React35.forwardRef(
     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_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         Comp,
         __spreadProps(__spreadValues({
           className: cn(buttonVariants({ variant, size, className })),
@@ -2950,7 +3200,7 @@ var Button = React35.forwardRef(
         })
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       Comp,
       __spreadProps(__spreadValues({
         className: cn(buttonVariants({ variant, size, className })),
@@ -2959,7 +3209,7 @@ var Button = React35.forwardRef(
       }, props), {
         children: [
           children,
-          loading && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(globalLucideIcons.Loader2, { className: "ml-2 h-4 w-4 animate-spin" })
+          loading && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(globalLucideIcons.Loader2, { className: "ml-2 h-4 w-4 animate-spin" })
         ]
       })
     );
@@ -2969,8 +3219,8 @@ Button.displayName = "Button";
 
 // src/fuma/mdx/gradient-button.tsx
 var import_link2 = __toESM(require("next/link"));
-var import_react35 = __toESM(require("react"));
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react37 = __toESM(require("react"));
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function GradientButton({
   title,
   icon,
@@ -2983,7 +3233,7 @@ function GradientButton({
   loadingText,
   preventDoubleClick = true
 }) {
-  const [isLoading, setIsLoading] = (0, import_react35.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react37.useState)(false);
   const actualLoadingText = loadingText || (title == null ? void 0 : title.toString().trim()) || "Loading...";
   const getAlignmentClass = () => {
     switch (align) {
@@ -3018,15 +3268,15 @@ function GradientButton({
   });
   const isDisabled = disabled || isLoading;
   const displayTitle = isLoading ? actualLoadingText : title;
-  const displayIcon = isLoading ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(globalLucideIcons.Loader2, { className: "h-4 w-4 text-white animate-spin" }) : icon ? import_react35.default.cloneElement(icon, {
+  const displayIcon = isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime35.jsx)(globalLucideIcons.ArrowRight, { className: "h-4 w-4 text-white" });
-  const buttonContent = onClick ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: displayIcon }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ml-1", children: displayTitle })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: displayTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ml-1", children: displayIcon })
+  }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(globalLucideIcons.ArrowRight, { className: "h-4 w-4 text-white" });
+  const buttonContent = onClick ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: displayIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ml-1", children: displayTitle })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: displayTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ml-1", children: displayIcon })
   ] });
   const buttonClassName = `
     bg-gradient-to-r 
@@ -3040,9 +3290,9 @@ function GradientButton({
     ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}
     ${className}
   `;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `flex flex-col sm:flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: `flex flex-col sm:flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (
     // for click
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Button,
       {
         size: "lg",
@@ -3054,14 +3304,14 @@ function GradientButton({
     )
   ) : (
     // for Link
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Button,
       {
         asChild: true,
         size: "lg",
         className: buttonClassName,
         disabled: isDisabled,
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           import_link2.default,
           __spreadProps(__spreadValues({
             href: href || "#",
@@ -3076,228 +3326,6 @@ function GradientButton({
   ) });
 }
 
-// src/main/gallery.tsx
-var import_react36 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-function Gallery({ sectionClassName }) {
-  const t = (0, import_next_intl.useTranslations)("gallery");
-  const galleryItems = t.raw("prompts");
-  const defaultImgUrl = t.raw("defaultImgUrl");
-  const [imageErrors, setImageErrors] = (0, import_react36.useState)(/* @__PURE__ */ new Set());
-  const handleDownload = (item, index) => __async(null, null, function* () {
-    try {
-      const response = yield fetch(item.url);
-      const blob = yield response.blob();
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `reve-image-${index + 1}.webp`;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
-    } catch (error) {
-      console.error("Download failed:", error);
-    }
-  });
-  const handleImageError = (index) => {
-    setImageErrors((prev) => new Set(prev).add(index));
-  };
-  const getImageSrc = (item, index) => {
-    return imageErrors.has(index) ? defaultImgUrl : item.url;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { id: "gallery", className: cn("container mx-auto px-4 py-20 scroll-mt-20", sectionClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-6", children: [
-      t("titleL"),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-purple-500", children: t("eyesOn") }),
-      " ",
-      t("titleR")
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-center max-w-2xl mx-auto mb-16", children: t("description") }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: galleryItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "group relative overflow-hidden rounded-xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        import_image.default,
-        {
-          src: getImageSrc(item, index),
-          alt: item.altMsg,
-          width: 600,
-          height: 600,
-          className: "w-full h-80 object-cover transition duration-300 group-hover:scale-105",
-          onError: () => handleImageError(index)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute inset-0 flex items-end justify-end p-4 opacity-0 group-hover:opacity-100 transition duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        "button",
-        {
-          onClick: () => handleDownload(item, index),
-          className: "bg-black/50 hover:bg-black/70 p-2 rounded-full text-white/80 hover:text-white transition-all duration-300",
-          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(globalLucideIcons.Download, { className: "h-5 w-5 text-white" })
-        }
-      ) })
-    ] }, index)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-center mt-12", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      GradientButton,
-      {
-        title: t("button"),
-        href: "https://preview.reve.art/",
-        align: "center"
-      }
-    ) })
-  ] });
-}
-
-// src/main/usage.tsx
-var import_next_intl2 = require("next-intl");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-function Usage({ sectionClassName }) {
-  const t = (0, import_next_intl2.useTranslations)("usage");
-  const steps = t.raw("steps");
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("section", { id: "usage", 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-4", children: [
-      t("title"),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-purple-500", children: t("eyesOn") })
-    ] }),
-    /* @__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 whitespace-nowrap", children: t("description") }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: steps.map((step, idx) => {
-      const Icon2 = getGlobalIcon(step.iconKey);
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-start", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-shrink-0 mr-4", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon2, { className: "w-8 h-8 text-purple-500" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100 flex items-center", children: `${idx + 1}. ${step.title}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-gray-700 dark:text-gray-300", children: step.description })
-        ] })
-      ] }, idx);
-    }) }) })
-  ] });
-}
-
-// src/main/features.tsx
-var import_next_intl3 = require("next-intl");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-function Features({ sectionClassName }) {
-  const t = (0, import_next_intl3.useTranslations)("features");
-  const featureItems = t.raw("items");
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("section", { id: "features", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-18", sectionClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: [
-      t("title"),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-purple-500", children: t("eyesOn") })
-    ] }),
-    /* @__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 whitespace-nowrap", children: t("description") }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12", children: featureItems.map((feature, index) => {
-      const Icon2 = getGlobalIcon(feature.iconKey);
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
-        "div",
-        {
-          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_runtime38.jsx)("div", { className: "text-4xl mb-4 flex items-center justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon2, { className: "w-8 h-8" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100", children: feature.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-gray-700 dark:text-gray-300", children: feature.description })
-          ]
-        },
-        index
-      );
-    }) })
-  ] });
-}
-
-// src/main/tips.tsx
-var import_next_intl4 = require("next-intl");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-function Tips({ sectionClassName }) {
-  const t = (0, import_next_intl4.useTranslations)("tips");
-  const sections = t.raw("sections");
-  const midPoint = Math.ceil(sections.length / 2);
-  const leftColumn = sections.slice(0, midPoint);
-  const rightColumn = sections.slice(midPoint);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("section", { id: "tips", 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-16", children: [
-      t("title"),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-purple-500", children: t("eyesOn") })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.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: [leftColumn, rightColumn].map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "space-y-8", children: column.map((tip, tipIndex) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { className: "text-2xl font-semibold", children: tip.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "", children: tip.description })
-    ] }, tipIndex)) }, colIndex)) })
-  ] });
-}
-
-// src/main/faq.tsx
-var import_react37 = require("react");
-var import_next_intl5 = require("next-intl");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-function FAQ({ sectionClassName }) {
-  const t = (0, import_next_intl5.useTranslations)("faq");
-  const items = t.raw("items");
-  const [openArr, setOpenArr] = (0, import_react37.useState)(() => items.map(() => false));
-  const handleToggle = (idx) => {
-    setOpenArr((prev) => {
-      const next = [...prev];
-      next[idx] = !next[idx];
-      return next;
-    });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("section", { id: "faq", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: t("title") }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto", children: t("description") }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "space-y-6", children: items.map((item, idx) => {
-      const isOpen = openArr[idx];
-      const Icon2 = isOpen ? globalLucideIcons.ChevronDown : globalLucideIcons.ChevronRight;
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-        "div",
-        {
-          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_runtime40.jsxs)(
-              "button",
-              {
-                className: "w-full flex items-center justify-between text-left focus:outline-none",
-                onClick: () => handleToggle(idx),
-                "aria-expanded": isOpen,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }),
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon2, { className: "w-6 h-6 text-gray-400 ml-2 transition-transform duration-200" })
-                ]
-              }
-            ),
-            isOpen && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "mt-4 text-gray-700 dark:text-gray-300 text-base", children: item.answer })
-          ]
-        },
-        idx
-      );
-    }) })
-  ] });
-}
-
-// src/main/seo-content.tsx
-var import_next_intl6 = require("next-intl");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-function SeoContent({ sectionClassName }) {
-  const t = (0, import_next_intl6.useTranslations)("seoContent");
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("section", { id: "seo", className: cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("h1", { className: "text-3xl md:text-4xl font-bold text-center mb-8", children: [
-      t("title"),
-      " ",
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-purple-500", children: t("eyesOn") })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-lg", children: t("description") }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsxs)("div", { className: "space-y-10", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-gray-600 dark:text-gray-400 text-lg", children: t("intro") }),
-        t.raw("sections").map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)("p", { className: "text-gray-700 dark:text-gray-300", children: section.content })
-        ] }, index))
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mt-10 text-gray-600 dark:text-gray-400 text-lg", children: t("conclusion") })
-    ] })
-  ] });
-}
-
 // src/main/cta.tsx
 var import_next_intl7 = require("next-intl");
 var import_jsx_runtime42 = require("react/jsx-runtime");