@mdxui/named 8.0.0 → 8.1.0

package/dist/view/index.js

@@ -1373,15 +1373,610 @@ function ExecutiveView({ content, brandName, hostname }) {
   ] });
 }
 
-// src/view/view.tsx
+// src/templates/gallery/components/navigation.tsx
+import { useState as useState4, useEffect as useEffect4 } from "react";
+import Link5 from "next/link";
+import { Menu as Menu3, X as X3 } from "lucide-react";
+
+// src/templates/gallery/ui/button.tsx
+import * as React4 from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
+var baseClasses3 = "inline-flex items-center justify-center gap-2 whitespace-nowrap uppercase tracking-[0.14em] font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-ring) disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0 cursor-pointer rounded-[4px]";
+var variantClasses3 = {
+  default: "bg-(--color-btn-primary-to) text-(--color-btn-primary-fg) hover:bg-(--color-accent)",
+  bone: "bg-(--color-placard) text-(--color-accent-field) hover:bg-(--color-accent-fg)",
+  secondary: "bg-transparent text-(--color-fg) border border-(--color-border-strong) hover:bg-(--color-hover)"
+};
+var sizeClasses3 = {
+  default: "h-11 px-6 text-xs",
+  sm: "h-9 px-4 text-[11px]"
+};
+var GalButton = React4.forwardRef(
+  ({ className, variant = "default", size = "default", asChild = false, children, ...props }, ref) => {
+    const classes = cn(baseClasses3, variantClasses3[variant], sizeClasses3[size], className);
+    if (asChild && React4.isValidElement(children)) {
+      const child = children;
+      return React4.cloneElement(child, {
+        ...props,
+        className: cn(classes, child.props.className)
+      });
+    }
+    return /* @__PURE__ */ jsx25("button", { ref, className: classes, ...props, children });
+  }
+);
+GalButton.displayName = "GalButton";
+
+// src/templates/gallery/ui/placard.tsx
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+function GalLabel({ children, className }) {
+  return /* @__PURE__ */ jsx26("span", { className: cn("gal-label block text-(--color-fg-muted)", className), children });
+}
+function GalDiamond({ className }) {
+  return /* @__PURE__ */ jsx26(
+    "span",
+    {
+      className: cn("inline-block size-[5px] rotate-45 bg-(--color-accent-strong)", className),
+      "aria-hidden": "true"
+    }
+  );
+}
+function GalSectionHead({ heading, statement, className }) {
+  return /* @__PURE__ */ jsxs19("div", { className: cn("grid gap-y-8 md:grid-cols-12 md:gap-x-6", className), children: [
+    /* @__PURE__ */ jsx26("div", { className: "md:col-span-7", children: /* @__PURE__ */ jsx26("h2", { className: "text-[clamp(40px,5.5vw,76px)] text-(--color-fg)", children: heading }) }),
+    statement && /* @__PURE__ */ jsx26("div", { className: "md:col-span-4 md:col-start-9 md:self-end", children: /* @__PURE__ */ jsx26("p", { className: "max-w-[40ch] text-base leading-relaxed text-(--color-fg-soft)", children: statement }) })
+  ] });
+}
+
+// src/templates/gallery/components/navigation.tsx
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+function GalNavigation({
+  logo = "Priya",
+  logoHref = "/",
+  links = [
+    { label: "Features", href: "#features" },
+    { label: "Pricing", href: "#pricing" },
+    { label: "FAQ", href: "#faq" }
+  ],
+  ctaText = "Hire me",
+  ctaHref = "#pricing",
+  className
+}) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState4(false);
+  const [isScrolled, setIsScrolled] = useState4(false);
+  useEffect4(() => {
+    const handleScroll = () => setIsScrolled(window.scrollY > 10);
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  return /* @__PURE__ */ jsx27(
+    "nav",
+    {
+      className: cn(
+        "sticky top-0 z-50 w-full border-b bg-(--color-surface) transition-[border-color] duration-200",
+        isScrolled ? "border-(--color-border-strong)" : "border-(--color-border)",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs20("div", { className: "mx-auto max-w-6xl px-6 py-5 lg:px-10", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs20(Link5, { href: logoHref, className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx27("span", { className: "gal-display text-xl font-[560] tracking-[-0.01em] text-(--color-fg)", children: logo }),
+            /* @__PURE__ */ jsx27(GalDiamond, {})
+          ] }),
+          /* @__PURE__ */ jsx27("div", { className: "hidden items-center gap-10 lg:flex", children: links.map((link) => /* @__PURE__ */ jsx27(
+            "a",
+            {
+              href: link.href,
+              className: "gal-label text-(--color-fg-muted) transition-colors hover:text-(--color-fg)",
+              children: link.label
+            },
+            link.href
+          )) }),
+          ctaText && ctaHref && /* @__PURE__ */ jsx27("div", { className: "hidden items-center lg:flex", children: /* @__PURE__ */ jsx27(GalButton, { asChild: true, variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx27("a", { href: ctaHref, children: ctaText }) }) }),
+          /* @__PURE__ */ jsx27(
+            "button",
+            {
+              className: "p-2 text-(--color-fg) lg:hidden",
+              onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+              "aria-label": "Toggle menu",
+              children: mobileMenuOpen ? /* @__PURE__ */ jsx27(X3, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx27(Menu3, { className: "h-5 w-5" })
+            }
+          )
+        ] }),
+        mobileMenuOpen && /* @__PURE__ */ jsx27("div", { className: "mt-5 border-t border-(--color-border) lg:hidden", children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col py-2", children: [
+          links.map((link) => /* @__PURE__ */ jsx27(
+            "a",
+            {
+              href: link.href,
+              className: "gal-label border-b border-(--color-border) py-4 text-(--color-fg) last:border-b-0",
+              onClick: () => setMobileMenuOpen(false),
+              children: link.label
+            },
+            link.href
+          )),
+          ctaText && ctaHref && /* @__PURE__ */ jsx27(
+            GalButton,
+            {
+              asChild: true,
+              variant: "secondary",
+              size: "sm",
+              className: "mt-4 self-start",
+              onClick: () => setMobileMenuOpen(false),
+              children: /* @__PURE__ */ jsx27("a", { href: ctaHref, children: ctaText })
+            }
+          )
+        ] }) })
+      ] })
+    }
+  );
+}
+
+// src/templates/gallery/components/hero.tsx
+import { HiArrowRight as HiArrowRight4 } from "react-icons/hi";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+function GalHero({
+  presenter = "Priya",
+  badgeText,
+  heading = "Your AI Product Manager for GitHub",
+  description = "Priya triages issues, plans sprints, and grooms your backlog automatically. You focus on building.",
+  ctaText = "Get Started",
+  ctaHref = "#pricing",
+  secondaryCtaText,
+  secondaryCtaHref,
+  marqueeTitle = "Tools I work with",
+  marqueeImages = [],
+  className
+}) {
+  const tools = marqueeImages.filter(
+    (s) => !/^(https?:)?\/\//i.test(s.trim()) && !s.trim().startsWith("data:")
+  );
+  return /* @__PURE__ */ jsxs21("section", { className: cn("gal-wash bg-(--color-surface)", className), children: [
+    /* @__PURE__ */ jsxs21("div", { className: "mx-auto max-w-6xl px-6 lg:px-10", children: [
+      /* @__PURE__ */ jsx28(ScrollReveal, { direction: "none", trigger: "mount", children: /* @__PURE__ */ jsx28("div", { className: "pt-8 md:pt-16 md:text-center", children: /* @__PURE__ */ jsx28(GalLabel, { className: "text-(--color-fg)", children: badgeText ?? presenter }) }) }),
+      /* @__PURE__ */ jsx28(ScrollReveal, { direction: "up", trigger: "mount", children: /* @__PURE__ */ jsx28("h1", { className: "max-w-[16ch] pt-8 text-[clamp(46px,6.5vw,96px)] text-(--color-fg) md:mx-auto md:pt-14 md:text-center", children: heading }) }),
+      /* @__PURE__ */ jsx28("div", { className: "pt-7 pb-16 md:pt-12 md:pb-32", children: /* @__PURE__ */ jsxs21(ScrollReveal, { direction: "up", delay: 0.12, trigger: "mount", children: [
+        /* @__PURE__ */ jsx28("p", { className: "max-w-[52ch] text-lg leading-relaxed text-(--color-fg-soft) md:mx-auto md:text-center md:text-xl", children: description }),
+        /* @__PURE__ */ jsxs21("div", { className: "mt-9 flex flex-col gap-3 sm:flex-row md:justify-center", children: [
+          /* @__PURE__ */ jsx28(GalButton, { asChild: true, children: /* @__PURE__ */ jsxs21("a", { href: ctaHref, children: [
+            ctaText,
+            /* @__PURE__ */ jsx28(HiArrowRight4, { className: "h-3.5 w-3.5" })
+          ] }) }),
+          secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ jsx28(GalButton, { asChild: true, variant: "secondary", children: /* @__PURE__ */ jsx28("a", { href: secondaryCtaHref, children: secondaryCtaText }) })
+        ] })
+      ] }) })
+    ] }),
+    tools.length > 0 && /* @__PURE__ */ jsx28("div", { className: "border-t border-b border-(--color-border)", "aria-label": marqueeTitle, children: /* @__PURE__ */ jsx28(Marquee, { className: "py-3.5 [--duration:48s] [--gap:3rem]", children: tools.map((tool, i) => /* @__PURE__ */ jsxs21(
+      "span",
+      {
+        className: "gal-label flex items-center gap-x-12 whitespace-nowrap text-(--color-fg-muted)",
+        children: [
+          brandLabel(tool),
+          /* @__PURE__ */ jsx28(GalDiamond, { className: "size-1" })
+        ]
+      },
+      `${tool}-${i}`
+    )) }) })
+  ] });
+}
+
+// src/templates/gallery/components/features.tsx
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+var catalogueNo = (badge) => {
+  const n = parseInt(badge, 10);
+  return Number.isNaN(n) ? badge : String(n);
+};
+function GalFeatures({
+  heading = "How It Works",
+  description,
+  features = [],
+  className
+}) {
+  return /* @__PURE__ */ jsx29("section", { id: "features", className: cn("bg-(--color-surface)", className), children: /* @__PURE__ */ jsxs22("div", { className: "mx-auto max-w-6xl px-6 py-28 md:py-40 lg:px-10", children: [
+    /* @__PURE__ */ jsx29(ScrollReveal, { direction: "up", children: /* @__PURE__ */ jsx29(
+      GalSectionHead,
+      {
+        heading,
+        statement: description
+      }
+    ) }),
+    /* @__PURE__ */ jsx29("div", { className: "mt-24 space-y-28 md:mt-36 md:space-y-44", children: features.map((feature, index) => {
+      const reversed = index % 2 === 1;
+      const language = feature.language ?? "typescript";
+      return /* @__PURE__ */ jsx29(ScrollReveal, { direction: "up", children: /* @__PURE__ */ jsxs22("article", { className: "grid items-center gap-y-10 md:grid-cols-12 md:gap-x-10", children: [
+        feature.code && /* @__PURE__ */ jsx29("div", { className: cn("md:col-span-7", reversed && "md:order-2"), children: /* @__PURE__ */ jsx29("div", { className: "rounded-[2px] md:border md:border-(--color-vitrine-border) md:bg-(--color-placard) md:p-1.5 md:shadow-(--shadow-lg)", children: /* @__PURE__ */ jsx29(
+          CodeWindow,
+          {
+            code: feature.code,
+            language,
+            className: "rounded-[2px] bg-(--color-vitrine) p-6 text-left text-xs leading-relaxed text-(--color-vitrine-fg) md:p-8"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx29(
+          "div",
+          {
+            className: cn(
+              feature.code ? "md:col-span-5" : "md:col-span-7",
+              reversed && "md:order-1"
+            ),
+            children: /* @__PURE__ */ jsxs22("div", { className: "rounded-[4px] border border-(--color-placard-border) bg-(--color-placard) p-7 text-(--color-placard-fg) shadow-(--shadow-md) md:p-9", children: [
+              /* @__PURE__ */ jsx29("div", { className: "border-b border-(--color-placard-border) pb-4", children: /* @__PURE__ */ jsxs22("span", { className: "gal-no text-2xl text-(--color-accent-strong)", children: [
+                "No. ",
+                catalogueNo(feature.badge)
+              ] }) }),
+              /* @__PURE__ */ jsx29("h3", { className: "mt-6 text-2xl font-semibold tracking-[-0.01em] text-(--color-placard-fg)", children: feature.title }),
+              /* @__PURE__ */ jsx29("p", { className: "mt-5 text-sm leading-relaxed text-(--color-placard-soft)", children: feature.description }),
+              feature.items.length > 0 && /* @__PURE__ */ jsx29("ul", { className: "mt-7 space-y-3 border-t border-(--color-placard-border) pt-5", children: feature.items.map((item, itemIndex) => /* @__PURE__ */ jsxs22(
+                "li",
+                {
+                  className: "flex items-baseline gap-3 text-sm text-(--color-placard-fg)",
+                  children: [
+                    /* @__PURE__ */ jsx29(GalDiamond, { className: "shrink-0 -translate-y-px" }),
+                    item.text
+                  ]
+                },
+                itemIndex
+              )) })
+            ] })
+          }
+        )
+      ] }) }, index);
+    }) })
+  ] }) });
+}
+
+// src/templates/gallery/components/pricing.tsx
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+function GalPricing({
+  heading = "Simple, transparent pricing",
+  subheading,
+  price = "$16",
+  priceUnit = "/ month",
+  trialText,
+  ctaText = "Get Started",
+  ctaHref = "#contact",
+  featuresHeading = "What's included",
+  features = [],
+  securityNote,
+  className
+}) {
+  return /* @__PURE__ */ jsx30("section", { id: "pricing", className: cn("bg-(--color-surface)", className), children: /* @__PURE__ */ jsxs23("div", { className: "mx-auto max-w-6xl px-6 py-28 md:py-40 lg:px-10", children: [
+    /* @__PURE__ */ jsx30(ScrollReveal, { direction: "up", children: /* @__PURE__ */ jsx30(GalSectionHead, { heading, statement: subheading }) }),
+    /* @__PURE__ */ jsx30(ScrollReveal, { direction: "up", children: /* @__PURE__ */ jsx30("div", { className: "mt-20 rounded-[4px] border border-(--color-placard-border) bg-(--color-placard) p-8 text-(--color-placard-fg) shadow-(--shadow-md) md:mt-28 md:p-12", children: /* @__PURE__ */ jsxs23("div", { className: "grid gap-y-10 md:grid-cols-12 md:gap-x-10", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "md:col-span-5", children: [
+        /* @__PURE__ */ jsxs23("div", { className: "flex items-baseline gap-2.5", children: [
+          /* @__PURE__ */ jsx30("span", { className: "gal-display text-7xl font-[560] tracking-[-0.02em] text-(--color-placard-fg) md:text-8xl", children: price }),
+          /* @__PURE__ */ jsx30("span", { className: "text-sm text-(--color-placard-muted)", children: priceUnit })
+        ] }),
+        trialText && /* @__PURE__ */ jsx30("p", { className: "mt-4 text-sm text-(--color-placard-soft)", children: trialText }),
+        /* @__PURE__ */ jsx30("div", { className: "mt-9", children: /* @__PURE__ */ jsx30(GalButton, { asChild: true, children: /* @__PURE__ */ jsx30("a", { href: ctaHref, children: ctaText }) }) })
+      ] }),
+      /* @__PURE__ */ jsxs23("div", { className: "md:col-span-6 md:col-start-7", children: [
+        /* @__PURE__ */ jsx30(GalLabel, { className: "text-(--color-placard-muted)", children: featuresHeading }),
+        /* @__PURE__ */ jsx30("ul", { className: "mt-5 columns-1 gap-x-10 sm:columns-2", children: features.map((feature, index) => /* @__PURE__ */ jsx30(
+          "li",
+          {
+            className: "break-inside-avoid border-t border-(--color-placard-border) py-3 text-sm text-(--color-placard-fg)",
+            children: feature.text
+          },
+          index
+        )) })
+      ] })
+    ] }) }) }),
+    securityNote && /* @__PURE__ */ jsx30("div", { className: "mt-14 border-t border-(--color-border) pt-6", children: /* @__PURE__ */ jsx30("p", { className: "max-w-[70ch] text-xs leading-relaxed text-(--color-fg-muted)", children: securityNote }) })
+  ] }) });
+}
+
+// src/templates/gallery/components/pricing-tiers.tsx
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+function GalPricingTiers({
+  heading = "Simple, transparent pricing",
+  subheading,
+  tiers = [],
+  securityNote,
+  className
+}) {
+  return /* @__PURE__ */ jsx31("section", { id: "pricing", className: cn("bg-(--color-surface)", className), children: /* @__PURE__ */ jsxs24("div", { className: "mx-auto max-w-6xl px-6 py-28 md:py-40 lg:px-10", children: [
+    /* @__PURE__ */ jsx31(ScrollReveal, { direction: "up", children: /* @__PURE__ */ jsx31(
+      GalSectionHead,
+      {
+        heading,
+        statement: subheading
+      }
+    ) }),
+    /* @__PURE__ */ jsx31("div", { className: "mt-20 grid gap-8 md:mt-28 md:grid-cols-2", children: tiers.map((tier, index) => {
+      const featured = !!tier.featured;
+      return /* @__PURE__ */ jsx31(ScrollReveal, { direction: "up", delay: index * 0.06, children: /* @__PURE__ */ jsxs24(
+        "div",
+        {
+          className: cn(
+            "flex h-full flex-col rounded-[4px] p-8 md:p-10",
+            featured ? "bg-(--color-accent-field) text-(--color-accent-fg) shadow-(--shadow-xl)" : "border border-(--color-placard-border) bg-(--color-placard) text-(--color-placard-fg) shadow-(--shadow-md)"
+          ),
+          children: [
+            /* @__PURE__ */ jsx31(
+              "h3",
+              {
+                className: cn(
+                  "text-2xl font-semibold tracking-[-0.01em]",
+                  featured ? "text-(--color-accent-fg)" : "text-(--color-placard-fg)"
+                ),
+                children: tier.title
+              }
+            ),
+            /* @__PURE__ */ jsx31(
+              "p",
+              {
+                className: cn(
+                  "mt-3 max-w-[44ch] text-sm leading-relaxed",
+                  featured ? "text-(--color-accent-fg)/80" : "text-(--color-placard-soft)"
+                ),
+                children: tier.description
+              }
+            ),
+            /* @__PURE__ */ jsxs24("div", { className: "mt-10 flex items-baseline gap-2.5", children: [
+              /* @__PURE__ */ jsx31(
+                "span",
+                {
+                  className: cn(
+                    "gal-display text-7xl font-[560] tracking-[-0.02em] md:text-8xl",
+                    featured ? "text-(--color-accent-fg)" : "text-(--color-placard-fg)"
+                  ),
+                  children: tier.price
+                }
+              ),
+              /* @__PURE__ */ jsx31(
+                "span",
+                {
+                  className: cn(
+                    "text-sm",
+                    featured ? "text-(--color-accent-fg)/70" : "text-(--color-placard-muted)"
+                  ),
+                  children: tier.priceUnit
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx31("div", { className: "mt-9", children: tier.ctaVariant === "secondary" ? /* @__PURE__ */ jsx31(
+              GalButton,
+              {
+                asChild: true,
+                variant: "secondary",
+                className: cn(
+                  "w-full sm:w-auto",
+                  featured ? "border-(--color-accent-fg)/40 text-(--color-accent-fg) hover:bg-(--color-accent-fg)/10" : "border-(--color-placard-fg)/35 text-(--color-placard-fg) hover:bg-(--color-placard-fg)/5"
+                ),
+                children: /* @__PURE__ */ jsx31("a", { href: tier.ctaHref || "#", children: tier.ctaText })
+              }
+            ) : featured ? /* @__PURE__ */ jsx31(GalButton, { asChild: true, variant: "bone", className: "w-full sm:w-auto", children: /* @__PURE__ */ jsx31("a", { href: tier.ctaHref || "#", children: tier.ctaText }) }) : /* @__PURE__ */ jsx31(GalButton, { asChild: true, className: "w-full sm:w-auto", children: /* @__PURE__ */ jsx31("a", { href: tier.ctaHref || "#", children: tier.ctaText }) }) }),
+            /* @__PURE__ */ jsx31("ul", { className: "mt-10 flex-1", children: tier.features.map((feature, featureIndex) => /* @__PURE__ */ jsx31(
+              "li",
+              {
+                className: cn(
+                  "border-t py-3 text-sm first:border-t-0",
+                  featured ? "border-(--color-accent-fg)/20 text-(--color-accent-fg)/90" : "border-(--color-placard-border) text-(--color-placard-fg)"
+                ),
+                children: feature.text
+              },
+              featureIndex
+            )) })
+          ]
+        }
+      ) }, index);
+    }) }),
+    securityNote && /* @__PURE__ */ jsx31("div", { className: "mt-14 border-t border-(--color-border) pt-6", children: /* @__PURE__ */ jsx31("p", { className: "max-w-[70ch] text-xs leading-relaxed text-(--color-fg-muted)", children: securityNote }) })
+  ] }) });
+}
+
+// src/templates/gallery/components/faq.tsx
+import {
+  Accordion as Accordion3,
+  AccordionContent as AccordionContent3,
+  AccordionItem as AccordionItem3,
+  AccordionTrigger as AccordionTrigger3
+} from "@mdxui/primitives";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+function GalFAQ({ heading = "FAQs", faqs = [], className }) {
+  return /* @__PURE__ */ jsx32("section", { id: "faq", className: cn("bg-(--color-surface)", className), children: /* @__PURE__ */ jsxs25("div", { className: "mx-auto max-w-6xl px-6 py-28 md:py-40 lg:px-10", children: [
+    /* @__PURE__ */ jsx32(ScrollReveal, { direction: "up", children: /* @__PURE__ */ jsx32(
+      GalSectionHead,
+      {
+        heading
+      }
+    ) }),
+    /* @__PURE__ */ jsx32(Accordion3, { type: "single", collapsible: true, className: "mt-16 border-t border-(--color-border) md:mt-24", children: faqs.map((faq, index) => /* @__PURE__ */ jsxs25(
+      AccordionItem3,
+      {
+        value: `item-${index}`,
+        className: "rounded-none border-b border-(--color-border)",
+        children: [
+          /* @__PURE__ */ jsx32(AccordionTrigger3, { className: "gap-6 py-7 text-base font-medium text-(--color-fg) hover:no-underline", children: /* @__PURE__ */ jsxs25("span", { className: "flex items-baseline gap-6 text-left", children: [
+            /* @__PURE__ */ jsxs25("span", { className: "gal-no shrink-0 text-sm text-(--color-accent-strong)", "aria-hidden": "true", children: [
+              "No. ",
+              index + 1
+            ] }),
+            faq.question
+          ] }) }),
+          /* @__PURE__ */ jsx32(AccordionContent3, { className: "max-w-[62ch] pb-8 pl-18 text-sm leading-relaxed text-(--color-fg-soft)", children: faq.answer })
+        ]
+      },
+      index
+    )) })
+  ] }) });
+}
+
+// src/templates/gallery/components/cta.tsx
+import { HiArrowRight as HiArrowRight5 } from "react-icons/hi";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+function GalCTA({
+  heading = "Ready to Save 15 Hours Per Week?",
+  subheading,
+  buttons = [{ text: "Get Started", href: "#pricing", variant: "primary", showArrow: true }],
+  hostname,
+  className
+}) {
+  return /* @__PURE__ */ jsx33("section", { className: cn("bg-(--color-accent-field) text-(--color-accent-fg)", className), children: /* @__PURE__ */ jsx33("div", { className: "mx-auto max-w-6xl px-6 py-24 md:py-36 lg:px-10", children: /* @__PURE__ */ jsxs26(ScrollReveal, { direction: "up", children: [
+    hostname && /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx33(GalDiamond, { className: "bg-(--color-accent-fg)" }),
+      /* @__PURE__ */ jsx33("span", { className: "gal-label text-(--color-accent-fg)/70", children: hostname })
+    ] }),
+    /* @__PURE__ */ jsxs26("div", { className: "grid items-end gap-y-12 pt-10 md:grid-cols-12 md:gap-x-6 md:pt-14", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "md:col-span-8", children: [
+        /* @__PURE__ */ jsx33("h2", { className: "max-w-[15ch] text-[clamp(44px,6.5vw,96px)] text-(--color-accent-fg)", children: heading }),
+        subheading && /* @__PURE__ */ jsx33("p", { className: "mt-6 max-w-[44ch] text-lg leading-relaxed text-(--color-accent-fg)/80 md:text-xl", children: subheading })
+      ] }),
+      /* @__PURE__ */ jsx33("div", { className: "md:col-span-4 md:flex md:justify-end", children: /* @__PURE__ */ jsx33("div", { className: "flex flex-col gap-3 sm:flex-row", children: buttons.map(
+        (button, index) => button.variant === "primary" || !button.variant ? /* @__PURE__ */ jsx33(GalButton, { asChild: true, variant: "bone", children: /* @__PURE__ */ jsxs26("a", { href: button.href, children: [
+          button.text,
+          button.showArrow && /* @__PURE__ */ jsx33(HiArrowRight5, { className: "h-3.5 w-3.5" })
+        ] }) }, index) : /* @__PURE__ */ jsx33(
+          GalButton,
+          {
+            asChild: true,
+            variant: "secondary",
+            className: "border-(--color-accent-fg)/40 text-(--color-accent-fg) hover:bg-(--color-accent-fg)/10",
+            children: /* @__PURE__ */ jsxs26("a", { href: button.href, children: [
+              button.text,
+              button.showArrow && /* @__PURE__ */ jsx33(HiArrowRight5, { className: "h-3.5 w-3.5" })
+            ] })
+          },
+          index
+        )
+      ) }) })
+    ] })
+  ] }) }) });
+}
+
+// src/templates/gallery/components/footer.tsx
+import Link6 from "next/link";
+import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+function GalFooter({
+  logo = "Priya",
+  description = "Your AI Product Manager for GitHub. Automate issue triage, sprint planning, and backlog grooming.",
+  quickLinks = [
+    { label: "Features", href: "/#features" },
+    { label: "Pricing", href: "/#pricing" },
+    { label: "FAQ", href: "/#faq" }
+  ],
+  socialLinks = [
+    { label: "GitHub", href: "https://github.com" },
+    { label: "npm", href: "https://npmjs.com" },
+    { label: "X", href: "https://x.com/dotdo_ai" }
+  ],
+  copyrightText = "Priya.do \xA9 2025. All rights reserved.",
+  className
+}) {
+  return /* @__PURE__ */ jsx34("footer", { className: cn("border-t border-(--color-border) bg-(--color-surface)", className), children: /* @__PURE__ */ jsx34("div", { className: "mx-auto max-w-6xl px-6 py-20 md:py-28 lg:px-10", children: /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center text-center", children: [
+    /* @__PURE__ */ jsx34(GalDiamond, { className: "size-2" }),
+    /* @__PURE__ */ jsx34(Link6, { href: "/", className: "mt-6 inline-block", children: /* @__PURE__ */ jsx34("span", { className: "gal-display text-4xl font-[560] tracking-[-0.015em] text-(--color-fg) md:text-5xl", children: logo }) }),
+    /* @__PURE__ */ jsx34("p", { className: "mt-5 max-w-[52ch] text-sm leading-relaxed text-(--color-fg-muted)", children: description }),
+    /* @__PURE__ */ jsx34(
+      "nav",
+      {
+        className: "mt-12 flex flex-wrap items-center justify-center gap-x-5 gap-y-4",
+        "aria-label": "Footer",
+        children: [...quickLinks, ...socialLinks].map((link, index, all) => {
+          const external = /^https?:\/\//.test(link.href);
+          return /* @__PURE__ */ jsxs27("span", { className: "flex items-center gap-x-5", children: [
+            /* @__PURE__ */ jsx34(
+              Link6,
+              {
+                href: link.href,
+                ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+                className: "gal-label text-(--color-fg-soft) transition-colors hover:text-(--color-fg)",
+                children: link.label
+              }
+            ),
+            index < all.length - 1 && /* @__PURE__ */ jsx34(GalDiamond, { className: "size-1" })
+          ] }, `${link.label}-${index}`);
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx34("div", { className: "mt-14 w-full max-w-md border-t border-(--color-border) pt-6", children: /* @__PURE__ */ jsx34("p", { className: "text-xs leading-relaxed text-(--color-fg-muted)", children: copyrightText }) })
+  ] }) }) });
+}
+
+// src/templates/gallery/view.tsx
+import { Fragment as Fragment4, jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+function GalleryView({ content, brandName, hostname }) {
+  const { hero, features, pricing, faq, cta } = content;
+  return /* @__PURE__ */ jsxs28(Fragment4, { children: [
+    /* @__PURE__ */ jsx35(GalNavigation, { logo: brandName }),
+    /* @__PURE__ */ jsxs28("main", { children: [
+      /* @__PURE__ */ jsx35(
+        GalHero,
+        {
+          presenter: brandName,
+          badgeText: hero.badgeText,
+          heading: hero.heading,
+          description: hero.description,
+          ctaText: hero.ctaText,
+          ctaHref: hero.ctaHref,
+          secondaryCtaText: hero.secondaryCtaText,
+          secondaryCtaHref: hero.secondaryCtaHref,
+          marqueeTitle: hero.marqueeTitle,
+          marqueeImages: hero.marqueeImages
+        }
+      ),
+      /* @__PURE__ */ jsx35(
+        GalFeatures,
+        {
+          heading: features.heading,
+          description: features.description,
+          features: features.features
+        }
+      ),
+      pricing.variant === "single" ? /* @__PURE__ */ jsx35(
+        GalPricing,
+        {
+          heading: pricing.heading,
+          subheading: pricing.subheading,
+          price: pricing.price,
+          priceUnit: pricing.priceUnit,
+          trialText: pricing.trialText,
+          ctaText: pricing.ctaText,
+          ctaHref: pricing.ctaHref,
+          featuresHeading: pricing.featuresHeading,
+          features: pricing.features,
+          securityNote: pricing.securityNote
+        }
+      ) : /* @__PURE__ */ jsx35(
+        GalPricingTiers,
+        {
+          heading: pricing.heading,
+          subheading: pricing.subheading,
+          tiers: pricing.tiers,
+          securityNote: pricing.securityNote
+        }
+      ),
+      /* @__PURE__ */ jsx35(GalFAQ, { heading: faq.heading, faqs: faq.faqs }),
+      /* @__PURE__ */ jsx35(
+        GalCTA,
+        {
+          heading: cta.heading,
+          subheading: cta.subheading,
+          buttons: cta.buttons,
+          hostname
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx35(
+      GalFooter,
+      {
+        logo: brandName,
+        description: hero.description,
+        copyrightText: `${hostname} \xA9 ${(/* @__PURE__ */ new Date()).getFullYear()}. All rights reserved.`
+      }
+    )
+  ] });
+}
+
+// src/view/view.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
 function NamedAgentView({ content, theme, mode, brandName, hostname, template = "studio" }) {
   return (
     // texture={false}: DialectShell's NoiseTexture grain defaults on for the
     // agent dialects, but the named baseline renders NO overlay — the fixed
     // full-viewport speckle layer sits over every pixel and subtly shifts the
     // whole palette off the baseline values.
-    /* @__PURE__ */ jsx25(DialectShell, { theme, mode, texture: false, children: /* @__PURE__ */ jsx25("div", { "data-dialect": "named", "data-template": template, children: template === "executive" ? /* @__PURE__ */ jsx25(ExecutiveView, { content, brandName, hostname }) : /* @__PURE__ */ jsx25(StudioView, { content, brandName, hostname }) }) })
+    /* @__PURE__ */ jsx36(DialectShell, { theme, mode, texture: false, children: /* @__PURE__ */ jsx36("div", { "data-dialect": "named", "data-template": template, children: template === "executive" ? /* @__PURE__ */ jsx36(ExecutiveView, { content, brandName, hostname }) : template === "gallery" ? /* @__PURE__ */ jsx36(GalleryView, { content, brandName, hostname }) : /* @__PURE__ */ jsx36(StudioView, { content, brandName, hostname }) }) })
   );
 }
 var view_default = NamedAgentView;