@mdxui/named 7.0.0 → 8.1.0

package/dist/index.js

@@ -1,4 +1,4 @@
-// src/components/hero/hero.tsx
+// src/templates/studio/components/hero/hero.tsx
 import Image from "next/image";
 import { HiChevronRight } from "react-icons/hi";
 
@@ -70,6 +70,26 @@ import { twMerge } from "tailwind-merge";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var isRenderableSrc = (s) => /^(https?:)?\/\//i.test(s.trim()) || /^data:image\//i.test(s.trim());
+var BRAND_LABELS = {
+  github: "GitHub",
+  gitlab: "GitLab",
+  linkedin: "LinkedIn",
+  youtube: "YouTube",
+  whatsapp: "WhatsApp",
+  hubspot: "HubSpot",
+  quickbooks: "QuickBooks",
+  typescript: "TypeScript",
+  javascript: "JavaScript",
+  postgresql: "PostgreSQL",
+  mongodb: "MongoDB",
+  graphql: "GraphQL",
+  openai: "OpenAI"
+};
+var brandLabel = (s) => {
+  const t = s.trim();
+  return BRAND_LABELS[t.toLowerCase()] ?? t.charAt(0).toUpperCase() + t.slice(1);
+};
 
 // src/shared/marquee/marquee.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -111,29 +131,41 @@ function Marquee({
   );
 }
 
-// src/components/hero/hero.tsx
-import { Button } from "@mdxui/primitives";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var isRenderableSrc = (s) => /^(https?:)?\/\//i.test(s.trim()) || /^data:image\//i.test(s.trim());
-var BRAND_LABELS = {
-  github: "GitHub",
-  gitlab: "GitLab",
-  linkedin: "LinkedIn",
-  youtube: "YouTube",
-  whatsapp: "WhatsApp",
-  hubspot: "HubSpot",
-  quickbooks: "QuickBooks",
-  typescript: "TypeScript",
-  javascript: "JavaScript",
-  postgresql: "PostgreSQL",
-  mongodb: "MongoDB",
-  graphql: "GraphQL",
-  openai: "OpenAI"
+// src/templates/studio/ui/button/button.tsx
+import * as React from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var baseClasses = "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all duration-200 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-4 [&_svg]:shrink-0 cursor-pointer";
+var variantClasses = {
+  default: "btn-gradient-dark text-(--color-btn-primary-fg) shadow-md hover:shadow-lg rounded-full",
+  secondary: "bg-(--color-surface-raised) text-(--color-fg) border border-(--color-border) shadow-sm hover:shadow-md rounded-full",
+  outline: "border border-(--color-border) bg-transparent text-(--color-fg) hover:bg-(--color-hover) rounded-full",
+  ghost: "text-(--color-fg) hover:bg-(--color-hover) rounded-full",
+  link: "text-(--color-fg) underline-offset-4 hover:underline",
+  accent: "bg-(--color-accent-strong) text-(--color-accent-fg) shadow-md hover:opacity-90 hover:shadow-lg rounded-full"
 };
-var brandLabel = (s) => {
-  const t = s.trim();
-  return BRAND_LABELS[t.toLowerCase()] ?? t.charAt(0).toUpperCase() + t.slice(1);
+var sizeClasses = {
+  default: "h-12 px-6 py-3 text-base",
+  sm: "h-10 px-4 py-2 text-sm",
+  lg: "h-14 px-8 py-4 text-lg",
+  icon: "h-12 w-12"
 };
+var Button = React.forwardRef(
+  ({ className, variant = "default", size = "default", asChild = false, children, ...props }, ref) => {
+    const classes = cn(baseClasses, variantClasses[variant], sizeClasses[size], className);
+    if (asChild && React.isValidElement(children)) {
+      const child = children;
+      return React.cloneElement(child, {
+        ...props,
+        className: cn(classes, child.props.className)
+      });
+    }
+    return /* @__PURE__ */ jsx3("button", { ref, className: classes, ...props, children });
+  }
+);
+Button.displayName = "Button";
+
+// src/templates/studio/components/hero/hero.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 function Hero({
   badgeEmoji = "",
   badgeText = "Meet Priya",
@@ -159,10 +191,10 @@ function Hero({
   className
 }) {
   const hasHeroImage = !!rightImageSrc && isRenderableSrc(rightImageSrc);
-  return /* @__PURE__ */ jsx3("section", { className: cn("relative py-12 md:py-16 px-6 lg:px-12 bg-background", className), children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto p-0 sm:p-16 rounded-none sm:rounded-3xl md:[background:linear-gradient(180deg,var(--card)_0%,transparent_83.55%)]", children: [
+  return /* @__PURE__ */ jsx4("section", { className: cn("relative py-12 md:py-16 px-6 lg:px-12 bg-background", className), children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto p-0 sm:p-16 rounded-none sm:rounded-3xl md:[background:linear-gradient(180deg,var(--card)_0%,transparent_83.55%)]", children: [
     /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:gap-16 items-start mb-16 lg:mb-20", hasHeroImage && "lg:grid-cols-2"), children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-6 lg:pt-8", children: [
-        /* @__PURE__ */ jsx3(ScrollReveal, { direction: "down", delay: 0.1, children: /* @__PURE__ */ jsx3("div", { className: "inline-block", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx4(ScrollReveal, { direction: "down", delay: 0.1, children: /* @__PURE__ */ jsx4("div", { className: "inline-block", children: /* @__PURE__ */ jsxs(
           "a",
           {
             href: badgeHref,
@@ -170,19 +202,19 @@ function Hero({
             rel: "noopener noreferrer",
             className: "inline-flex items-center gap-2.5 px-4 py-2 rounded-full transition-colors border border-border bg-card",
             children: [
-              /* @__PURE__ */ jsx3("span", { className: "text-base", children: badgeEmoji }),
-              /* @__PURE__ */ jsx3("p", { className: "font-normal text-sm tracking-wide leading-snug text-foreground uppercase", children: badgeText })
+              /* @__PURE__ */ jsx4("span", { className: "text-base", children: badgeEmoji }),
+              /* @__PURE__ */ jsx4("p", { className: "font-normal text-sm tracking-wide leading-snug text-foreground uppercase", children: badgeText })
             ]
           }
         ) }) }),
-        /* @__PURE__ */ jsx3(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsx3("h1", { className: "font-halant font-normal text-[clamp(56px,6vw,72px)] leading-tight tracking-tight text-foreground", children: heading }) }),
-        /* @__PURE__ */ jsx3(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx3("p", { className: "text-lg leading-relaxed max-w-lg", children: description }) }),
-        /* @__PURE__ */ jsx3(ScrollReveal, { direction: "up", delay: 0.4, trigger: "mount", children: /* @__PURE__ */ jsx3("div", { className: "flex flex-col sm:flex-row gap-3 pt-4", children: /* @__PURE__ */ jsx3(Button, { asChild: true, variant: ctaVariant, children: /* @__PURE__ */ jsxs("a", { href: ctaHref, children: [
+        /* @__PURE__ */ jsx4(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsx4("h1", { className: "font-halant font-normal text-[clamp(56px,6vw,72px)] leading-tight tracking-tight text-foreground", children: heading }) }),
+        /* @__PURE__ */ jsx4(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx4("p", { className: "text-lg leading-relaxed max-w-lg", children: description }) }),
+        /* @__PURE__ */ jsx4(ScrollReveal, { direction: "up", delay: 0.4, trigger: "mount", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col sm:flex-row gap-3 pt-4", children: /* @__PURE__ */ jsx4(Button, { asChild: true, variant: ctaVariant, children: /* @__PURE__ */ jsxs("a", { href: ctaHref, children: [
           ctaText,
-          /* @__PURE__ */ jsx3(HiChevronRight, { className: "w-4 h-4" })
+          /* @__PURE__ */ jsx4(HiChevronRight, { className: "w-4 h-4" })
         ] }) }) }) })
       ] }),
-      hasHeroImage && /* @__PURE__ */ jsx3(ScrollReveal, { direction: "right", delay: 0.2, children: /* @__PURE__ */ jsx3("div", { className: "relative flex justify-center lg:justify-end", children: /* @__PURE__ */ jsx3("div", { className: "relative w-full max-w-lg", children: /* @__PURE__ */ jsx3("div", { className: "relative w-full aspect-square", children: /* @__PURE__ */ jsx3(
+      hasHeroImage && /* @__PURE__ */ jsx4(ScrollReveal, { direction: "right", delay: 0.2, children: /* @__PURE__ */ jsx4("div", { className: "relative flex justify-center lg:justify-end", children: /* @__PURE__ */ jsx4("div", { className: "relative w-full max-w-lg", children: /* @__PURE__ */ jsx4("div", { className: "relative w-full aspect-square", children: /* @__PURE__ */ jsx4(
         Image,
         {
           src: rightImageSrc,
@@ -196,24 +228,24 @@ function Hero({
       ) }) }) }) })
     ] }),
     /* @__PURE__ */ jsxs(ScrollReveal, { direction: "up", delay: 0.4, trigger: "mount", children: [
-      /* @__PURE__ */ jsx3("div", { className: "mt-12", children: /* @__PURE__ */ jsx3("p", { className: "text-base text-muted-foreground text-center", children: marqueeTitle }) }),
+      /* @__PURE__ */ jsx4("div", { className: "mt-12", children: /* @__PURE__ */ jsx4("p", { className: "text-base text-muted-foreground text-center", children: marqueeTitle }) }),
       /* @__PURE__ */ jsxs("div", { className: "relative mt-4 sm:mt-6", children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "div",
           {
             className: "pointer-events-none absolute inset-y-0 left-0 w-20 sm:w-28 z-10",
             style: { background: "linear-gradient(to right, var(--background), transparent)" }
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "div",
           {
             className: "pointer-events-none absolute inset-y-0 right-0 w-20 sm:w-28 z-10",
             style: { background: "linear-gradient(to left, var(--background), transparent)" }
           }
         ),
-        /* @__PURE__ */ jsx3(Marquee, { className: "relative z-0 py-2 [--gap:1.25rem] sm:[--gap:3rem]", children: marqueeImages.map(
-          (src, i) => isRenderableSrc(src) ? /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(Marquee, { className: "relative z-0 py-2 [--gap:1.25rem] sm:[--gap:3rem]", children: marqueeImages.map(
+          (src, i) => isRenderableSrc(src) ? /* @__PURE__ */ jsx4(
             "img",
             {
               src,
@@ -221,7 +253,7 @@ function Hero({
               className: "h-16 w-16 rounded-xl bg-card p-2 object-contain"
             },
             `${src}-${i}`
-          ) : /* @__PURE__ */ jsx3(
+          ) : /* @__PURE__ */ jsx4(
             "span",
             {
               className: "flex h-16 items-center whitespace-nowrap rounded-xl bg-card px-4 text-sm font-semibold tracking-tight text-foreground/70",
@@ -235,61 +267,43 @@ function Hero({
   ] }) });
 }
 
-// src/components/features/features.tsx
+// src/templates/studio/components/features/features.tsx
 import { CheckCircle } from "lucide-react";
 
 // src/shared/code-window/code-window.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-function CodeWindow({ code, className }) {
-  const highlightCode = (code2) => {
-    const lines = code2.split("\n");
-    const result = [];
-    let prevWasComment = false;
-    let prevWasCode = false;
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      const isComment = line.trim().startsWith("//");
-      const isEmpty = line.trim() === "";
-      const isCode = !isComment && !isEmpty;
-      if (isComment && prevWasCode) {
-        result.push(/* @__PURE__ */ jsx4("div", { className: "h-5" }, `space-before-${i}`));
-      }
-      if (prevWasComment && isCode) {
-        result.push(/* @__PURE__ */ jsx4("div", { className: "h-5" }, `space-after-${i}`));
-      }
-      if (isEmpty) {
-        result.push(/* @__PURE__ */ jsx4("div", { className: "h-5" }, i));
-        prevWasComment = false;
-        prevWasCode = false;
-        continue;
-      }
-      if (isComment) {
-        result.push(
-          /* @__PURE__ */ jsx4("div", { className: "text-[#7d8590]", children: line }, i)
-        );
-        prevWasComment = true;
-        prevWasCode = false;
-        continue;
-      }
-      let highlighted = line;
-      highlighted = highlighted.replace(
-        /\$\.(\w+)\.(\w+)/g,
-        '<span class="text-[#79c0ff]">$</span>.<span class="text-[#d2a8ff]">$1</span>.<span class="text-[#ffa657]">$2</span>'
-      );
-      highlighted = highlighted.replace(/(\w+):/g, '<span class="text-[#79c0ff]">$1</span>:');
-      highlighted = highlighted.replace(/'([^']*)'/g, `<span class="text-[#a5d6ff]">'$1'</span>`);
-      highlighted = highlighted.replace(/\b(\d+)\b/g, '<span class="text-[#79c0ff]">$1</span>');
-      result.push(/* @__PURE__ */ jsx4("div", { dangerouslySetInnerHTML: { __html: highlighted } }, i));
-      prevWasComment = false;
-      prevWasCode = true;
-    }
-    return result;
-  };
-  return /* @__PURE__ */ jsx4("div", { className: `w-full h-full bg-[#0d1117] rounded-lg overflow-hidden ${className ?? ""}`, children: /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-auto p-6 lg:p-8", children: /* @__PURE__ */ jsx4("pre", { className: "text-sm lg:text-sm leading-relaxed font-mono text-[#e6edf3]", children: highlightCode(code) }) }) });
+import { useEffect, useState } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function CodeWindow({
+  code,
+  language = "typescript",
+  themes = "github-dark-default",
+  className
+}) {
+  const [html, setHtml] = useState(null);
+  const themesKey = typeof themes === "string" ? themes : `${themes.light}/${themes.dark}`;
+  useEffect(() => {
+    let alive = true;
+    import("shiki").then(
+      ({ codeToHtml }) => codeToHtml(
+        code,
+        typeof themes === "string" ? { lang: language, theme: themes } : { lang: language, themes, defaultColor: "light" }
+      )
+    ).then((out) => {
+      if (alive) setHtml(out);
+    }).catch(() => {
+    });
+    return () => {
+      alive = false;
+    };
+  }, [code, language, themesKey]);
+  return /* @__PURE__ */ jsx5("div", { className: cn("w-full h-full overflow-auto font-mono", className), children: html ? (
+    // biome-ignore lint/security/noDangerouslySetInnerHtml: shiki output; input is escaped by shiki
+    /* @__PURE__ */ jsx5("div", { dangerouslySetInnerHTML: { __html: html } })
+  ) : /* @__PURE__ */ jsx5("pre", { className: "m-0 whitespace-pre", children: /* @__PURE__ */ jsx5("code", { children: code }) }) });
 }
 
-// src/components/features/features.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+// src/templates/studio/components/features/features.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultFeatures = [
   {
     title: "Automatic Issue Triage",
@@ -362,30 +376,37 @@ $.Priya.statusReport({
   }
 ];
 function Features({ heading = "How It Works", description = "Priya handles the repetitive work so you can focus on what matters. Here's how she automates your entire product workflow.", features = defaultFeatures, className }) {
-  return /* @__PURE__ */ jsx5("section", { id: "features", className: cn("flex justify-center items-center pb-0 md:pb-10 bg-background", className), children: /* @__PURE__ */ jsxs2("div", { className: "features-gradient flex flex-col items-center w-full relative overflow-visible gap-16 h-min max-w-[1400px] py-10 sm:py-20", style: { borderRadius: "var(--radius-section, 36px)" }, children: [
-    /* @__PURE__ */ jsx5(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs2("div", { className: "text-center w-full px-4 md:px-6 space-y-4", children: [
-      /* @__PURE__ */ jsx5("h2", { className: "font-halant font-normal text-[clamp(32px,4vw,40px)] leading-tight text-foreground", children: heading }),
-      /* @__PURE__ */ jsx5("p", { className: "text-base md:text-lg text-muted-foreground max-w-2xl mx-auto", children: description })
+  return /* @__PURE__ */ jsx6("section", { id: "features", className: cn("flex justify-center items-center pb-0 md:pb-10 bg-background", className), children: /* @__PURE__ */ jsxs2("div", { className: "features-gradient flex flex-col items-center w-full relative overflow-visible gap-16 h-min max-w-[1400px] py-10 sm:py-20", style: { borderRadius: "var(--radius-section, 36px)" }, children: [
+    /* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs2("div", { className: "text-center w-full px-4 md:px-6 space-y-4", children: [
+      /* @__PURE__ */ jsx6("h2", { className: "font-halant font-normal text-[clamp(32px,4vw,40px)] leading-tight text-foreground", children: heading }),
+      /* @__PURE__ */ jsx6("p", { className: "text-base md:text-lg text-muted-foreground max-w-2xl mx-auto", children: description })
     ] }) }),
-    /* @__PURE__ */ jsx5("div", { className: "w-full px-4 lg:px-18 space-y-10", children: features.map((feature, index) => /* @__PURE__ */ jsx5(ScrollReveal, { direction: "up", delay: index * 0.1, children: /* @__PURE__ */ jsxs2("div", { className: "grid md:grid-cols-2 overflow-hidden bg-card w-full rounded-3xl feature-card-shadow opacity-100 border border-border", children: [
+    /* @__PURE__ */ jsx6("div", { className: "w-full px-4 lg:px-18 space-y-10", children: features.map((feature, index) => /* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: index * 0.1, children: /* @__PURE__ */ jsxs2("div", { className: "grid md:grid-cols-2 overflow-hidden bg-card w-full rounded-3xl feature-card-shadow opacity-100 border border-border", children: [
       /* @__PURE__ */ jsxs2("div", { className: "flex flex-col px-4 py-8 lg:px-8 lg:py-12 xl:px-12 xl:py-20", children: [
-        /* @__PURE__ */ jsx5("div", { className: "mb-4", children: /* @__PURE__ */ jsx5("span", { className: "inline-flex size-10 items-center justify-center rounded-lg font-mono text-sm font-medium bg-card dark:bg-muted border border-border dark:border-border text-foreground", children: feature.badge }) }),
-        /* @__PURE__ */ jsx5("h3", { className: "mb-3 text-2xl font-medium sm:mb-5 md:text-3xl text-foreground", children: feature.title }),
-        /* @__PURE__ */ jsx5("div", { className: "mb-8 text-sm sm:mb-10 md:text-base text-muted-foreground", children: feature.description }),
-        /* @__PURE__ */ jsx5("ul", { className: "space-y-2 sm:space-y-3", children: feature.items.map((item, itemIndex) => /* @__PURE__ */ jsxs2("li", { className: "flex gap-x-3 items-start", children: [
-          /* @__PURE__ */ jsx5(CheckCircle, { className: "mt-1 size-4 shrink-0 text-primary" }),
-          /* @__PURE__ */ jsx5("p", { className: "text-sm md:text-base text-foreground", children: item.text })
+        /* @__PURE__ */ jsx6("div", { className: "mb-4", children: /* @__PURE__ */ jsx6("span", { className: "inline-flex size-10 items-center justify-center rounded-lg font-mono text-sm font-medium bg-card dark:bg-muted border border-border dark:border-border text-foreground", children: feature.badge }) }),
+        /* @__PURE__ */ jsx6("h3", { className: "mb-3 text-2xl font-medium sm:mb-5 md:text-3xl text-foreground", children: feature.title }),
+        /* @__PURE__ */ jsx6("div", { className: "mb-8 text-sm sm:mb-10 md:text-base text-muted-foreground", children: feature.description }),
+        /* @__PURE__ */ jsx6("ul", { className: "space-y-2 sm:space-y-3", children: feature.items.map((item, itemIndex) => /* @__PURE__ */ jsxs2("li", { className: "flex gap-x-3 items-start", children: [
+          /* @__PURE__ */ jsx6(CheckCircle, { className: "mt-1 size-4 shrink-0 text-primary" }),
+          /* @__PURE__ */ jsx6("p", { className: "text-sm md:text-base text-foreground", children: item.text })
         ] }, itemIndex)) })
       ] }),
-      /* @__PURE__ */ jsx5("div", { className: "relative order-last md:order-last h-96 md:h-[500px] p-4 md:p-8 lg:p-10", children: /* @__PURE__ */ jsx5(CodeWindow, { code: feature.code }) })
+      /* @__PURE__ */ jsx6("div", { className: "relative order-last md:order-last h-96 md:h-[500px] p-4 md:p-8 lg:p-10", children: /* @__PURE__ */ jsx6(
+        CodeWindow,
+        {
+          code: feature.code,
+          language: feature.language,
+          themes: "github-dark-default",
+          className: "bg-[#0d1117] rounded-lg p-6 lg:p-8 text-sm leading-relaxed text-[#e6edf3]"
+        }
+      ) })
     ] }) }, index)) })
   ] }) });
 }
 
-// src/components/pricing/pricing.tsx
+// src/templates/studio/components/pricing/pricing.tsx
 import { Check } from "lucide-react";
-import { Button as Button2 } from "@mdxui/primitives";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultFeatures2 = [
   { text: "Automated backups" },
   { text: "24/7 support" },
@@ -411,41 +432,40 @@ function Pricing({
   securityNote = "Priya only accesses GitHub Issues and Projects\u2014she cannot read your code or secrets.",
   className
 }) {
-  return /* @__PURE__ */ jsx6("section", { id: "pricing", className: cn(`pt-12 md:pt-16 pb-10 sm:pb-20 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs3("div", { className: "max-w-7xl mx-auto p-6 sm:p-16 rounded-none sm:rounded-3xl pricing-gradient", children: [
-    /* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs3("div", { className: "text-center my-16 sm:my-12", children: [
-      /* @__PURE__ */ jsx6("h2", { className: "font-halant font-normal text-[clamp(32px,4vw,40px)] leading-tight text-foreground mb-4", children: heading }),
-      /* @__PURE__ */ jsx6("p", { className: "text-base text-muted-foreground max-w-2xl mx-auto", children: subheading })
+  return /* @__PURE__ */ jsx7("section", { id: "pricing", className: cn(`pt-12 md:pt-16 pb-10 sm:pb-20 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs3("div", { className: "max-w-7xl mx-auto p-6 sm:p-16 rounded-none sm:rounded-3xl pricing-gradient", children: [
+    /* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs3("div", { className: "text-center my-16 sm:my-12", children: [
+      /* @__PURE__ */ jsx7("h2", { className: "font-halant font-normal text-[clamp(32px,4vw,40px)] leading-tight text-foreground mb-4", children: heading }),
+      /* @__PURE__ */ jsx7("p", { className: "text-base text-muted-foreground max-w-2xl mx-auto", children: subheading })
     ] }) }),
-    /* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsxs3("div", { className: "bg-card mx-auto flex w-full md:max-w-md lg:max-w-3xl flex-col rounded-3xl border border-border feature-card-shadow p-6 md:p-8 px-6", children: [
+    /* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.2, children: /* @__PURE__ */ jsxs3("div", { className: "bg-card mx-auto flex w-full md:max-w-md lg:max-w-3xl flex-col rounded-3xl border border-border feature-card-shadow p-6 md:p-8 px-6", children: [
       /* @__PURE__ */ jsxs3("div", { className: "text-center", children: [
         /* @__PURE__ */ jsxs3("div", { className: "flex justify-start sm:justify-center items-baseline", children: [
-          /* @__PURE__ */ jsx6("span", { className: "text-3xl font-semibold text-foreground", children: price }),
-          /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground ml-2 text-sm", children: priceUnit })
+          /* @__PURE__ */ jsx7("span", { className: "text-3xl font-semibold text-foreground", children: price }),
+          /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground ml-2 text-sm", children: priceUnit })
         ] }),
-        trialText && /* @__PURE__ */ jsx6("p", { className: "text-left sm:text-center text-muted-foreground mt-3 text-sm", children: trialText }),
-        /* @__PURE__ */ jsx6(Button2, { asChild: true, variant: "default", className: "mt-5 w-full md:w-64", children: /* @__PURE__ */ jsx6("a", { href: ctaHref, children: ctaText }) })
+        trialText && /* @__PURE__ */ jsx7("p", { className: "text-left sm:text-center text-muted-foreground mt-3 text-sm", children: trialText }),
+        /* @__PURE__ */ jsx7(Button, { asChild: true, variant: "default", className: "mt-5 w-full md:w-64", children: /* @__PURE__ */ jsx7("a", { href: ctaHref, children: ctaText }) })
       ] }),
       /* @__PURE__ */ jsxs3("div", { className: "mt-8", children: [
-        /* @__PURE__ */ jsx6("p", { className: "text-left sm:text-center text-lg font-semibold text-foreground mb-4", children: featuresHeading }),
-        /* @__PURE__ */ jsx6("ul", { className: "grid gap-y-3 gap-x-6 md:grid-cols-2 lg:grid-cols-3 ", children: features.map((feature, index) => /* @__PURE__ */ jsxs3("li", { className: "flex items-start text-left", children: [
-          /* @__PURE__ */ jsx6(Check, { className: "text-primary mr-2 size-4 shrink-0" }),
-          /* @__PURE__ */ jsx6("span", { className: "text-foreground text-sm", children: feature.text })
+        /* @__PURE__ */ jsx7("p", { className: "text-left sm:text-center text-lg font-semibold text-foreground mb-4", children: featuresHeading }),
+        /* @__PURE__ */ jsx7("ul", { className: "grid gap-y-3 gap-x-6 md:grid-cols-2 lg:grid-cols-3 ", children: features.map((feature, index) => /* @__PURE__ */ jsxs3("li", { className: "flex items-start text-left", children: [
+          /* @__PURE__ */ jsx7(Check, { className: "text-primary mr-2 size-4 shrink-0" }),
+          /* @__PURE__ */ jsx7("span", { className: "text-foreground text-sm", children: feature.text })
         ] }, index)) })
       ] })
     ] }) }),
-    securityNote && /* @__PURE__ */ jsx6(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx6("div", { className: "text-center mt-8", children: /* @__PURE__ */ jsxs3("p", { className: "text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx6("strong", { children: "Your code stays private." }),
+    securityNote && /* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.3, children: /* @__PURE__ */ jsx7("div", { className: "text-center mt-8", children: /* @__PURE__ */ jsxs3("p", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx7("strong", { children: "Your code stays private." }),
       " ",
       securityNote
     ] }) }) })
   ] }) });
 }
 
-// src/components/pricing/pricing-tiers.tsx
+// src/templates/studio/components/pricing/pricing-tiers.tsx
 import { Check as Check2 } from "lucide-react";
 import Image2 from "next/image";
-import { Button as Button3 } from "@mdxui/primitives";
-import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultTiers = [
   {
     title: "Business",
@@ -487,59 +507,58 @@ function PricingTiers({
   securityNote = "Priya only accesses GitHub Issues and Projects\u2014she cannot read your code or secrets.",
   className
 }) {
-  return /* @__PURE__ */ jsx7("section", { id: "pricing", className: cn(`pt-12 md:pt-16 pb-10 sm:pb-20 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs4("div", { className: "max-w-7xl mx-auto p-6 sm:p-16 rounded-none sm:rounded-3xl pricing-gradient", children: [
-    /* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs4("div", { className: "text-center my-16 sm:my-12", children: [
-      /* @__PURE__ */ jsx7("h2", { className: "font-halant font-normal text-[clamp(32px,4vw,52px)] leading-tight text-foreground mb-4", children: heading }),
-      /* @__PURE__ */ jsx7("p", { className: "text-base text-muted-foreground max-w-2xl mx-auto", children: subheading })
+  return /* @__PURE__ */ jsx8("section", { id: "pricing", className: cn(`pt-12 md:pt-16 pb-10 sm:pb-20 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs4("div", { className: "max-w-7xl mx-auto p-6 sm:p-16 rounded-none sm:rounded-3xl pricing-gradient", children: [
+    /* @__PURE__ */ jsx8(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs4("div", { className: "text-center my-16 sm:my-12", children: [
+      /* @__PURE__ */ jsx8("h2", { className: "font-halant font-normal text-[clamp(32px,4vw,52px)] leading-tight text-foreground mb-4", children: heading }),
+      /* @__PURE__ */ jsx8("p", { className: "text-base text-muted-foreground max-w-2xl mx-auto", children: subheading })
     ] }) }),
-    /* @__PURE__ */ jsx7("ul", { className: "grid gap-6 lg:grid-cols-3 lg:items-stretch", children: tiers.map((tier, index) => /* @__PURE__ */ jsx7("li", { className: tier.featured ? "lg:col-span-2 flex" : "lg:col-span-1 flex", children: /* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.2 + index * 0.1, className: "w-full", children: /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8("ul", { className: "grid gap-6 lg:grid-cols-3 lg:items-stretch", children: tiers.map((tier, index) => /* @__PURE__ */ jsx8("li", { className: tier.featured ? "lg:col-span-2 flex" : "lg:col-span-1 flex", children: /* @__PURE__ */ jsx8(ScrollReveal, { direction: "up", delay: 0.2 + index * 0.1, className: "w-full", children: /* @__PURE__ */ jsx8(
       "div",
       {
         className: tier.featured ? "bg-card flex w-full h-full flex-col-reverse rounded-3xl border border-border feature-card-shadow md:flex-row" : "bg-card w-full h-full rounded-3xl border border-border feature-card-shadow p-6 md:p-8",
         children: tier.featured ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-          tier.image && /* @__PURE__ */ jsx7("div", { className: "hidden xl:block xl:w-1/2 pl-6 md:pl-8 py-6 md:py-8", children: /* @__PURE__ */ jsx7("div", { className: "h-full rounded-lg overflow-hidden relative min-h-96", children: /* @__PURE__ */ jsx7(Image2, { src: tier.image, alt: tier.imageAlt || tier.title, fill: true, className: "object-cover", sizes: "(max-width: 1280px) 0vw, 50vw" }) }) }),
-          /* @__PURE__ */ jsxs4("div", { className: "flex flex-col p-6 md:p-8 xl:w-1/2", children: [
+          tier.image && isRenderableSrc(tier.image) && /* @__PURE__ */ jsx8("div", { className: "hidden xl:block xl:w-1/2 pl-6 md:pl-8 py-6 md:py-8", children: /* @__PURE__ */ jsx8("div", { className: "h-full rounded-lg overflow-hidden relative min-h-96", children: /* @__PURE__ */ jsx8(Image2, { src: tier.image, alt: tier.imageAlt || tier.title, fill: true, className: "object-cover", sizes: "(max-width: 1280px) 0vw, 50vw" }) }) }),
+          /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col p-6 md:p-8", tier.image && isRenderableSrc(tier.image) && "xl:w-1/2"), children: [
             /* @__PURE__ */ jsxs4("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx7("p", { className: "text-lg font-semibold text-foreground", children: tier.title }),
-              /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground mt-3", children: tier.description }),
+              /* @__PURE__ */ jsx8("p", { className: "text-lg font-semibold text-foreground", children: tier.title }),
+              /* @__PURE__ */ jsx8("p", { className: "text-muted-foreground mt-3", children: tier.description }),
               /* @__PURE__ */ jsxs4("div", { className: "mt-6 flex items-baseline", children: [
-                /* @__PURE__ */ jsx7("span", { className: "text-3xl font-semibold text-foreground", children: tier.price }),
-                /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground ml-2 text-sm", children: tier.priceUnit })
+                /* @__PURE__ */ jsx8("span", { className: "text-3xl font-semibold text-foreground", children: tier.price }),
+                /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground ml-2 text-sm", children: tier.priceUnit })
               ] }),
-              /* @__PURE__ */ jsx7(Button3, { asChild: true, variant: tier.ctaVariant === "primary" ? "default" : "secondary", className: "mt-5 w-full sm:w-auto", children: /* @__PURE__ */ jsx7("a", { href: tier.ctaHref || "#", children: tier.ctaText }) })
+              /* @__PURE__ */ jsx8(Button, { asChild: true, variant: tier.ctaVariant === "primary" ? "default" : "secondary", className: "mt-5 w-full sm:w-auto", children: /* @__PURE__ */ jsx8("a", { href: tier.ctaHref || "#", children: tier.ctaText }) })
             ] }),
-            /* @__PURE__ */ jsx7("div", { className: "mt-8", children: /* @__PURE__ */ jsx7("ul", { className: "space-y-2", children: tier.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start", children: [
-              /* @__PURE__ */ jsx7(Check2, { className: "text-primary mr-2 size-4 shrink-0" }),
-              /* @__PURE__ */ jsx7("span", { className: "text-foreground text-sm", children: feature.text })
+            /* @__PURE__ */ jsx8("div", { className: "mt-8", children: /* @__PURE__ */ jsx8("ul", { className: "space-y-2", children: tier.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start", children: [
+              /* @__PURE__ */ jsx8(Check2, { className: "text-primary mr-2 size-4 shrink-0" }),
+              /* @__PURE__ */ jsx8("span", { className: "text-foreground text-sm", children: feature.text })
             ] }, featureIndex)) }) })
           ] })
-        ] }) : /* @__PURE__ */ jsx7("div", { className: "flex h-full flex-col", children: /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx7("p", { className: "text-lg font-semibold text-foreground", children: tier.title }),
-          /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground mt-3", children: tier.description }),
+        ] }) : /* @__PURE__ */ jsx8("div", { className: "flex h-full flex-col", children: /* @__PURE__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsx8("p", { className: "text-lg font-semibold text-foreground", children: tier.title }),
+          /* @__PURE__ */ jsx8("p", { className: "text-muted-foreground mt-3", children: tier.description }),
           /* @__PURE__ */ jsxs4("div", { className: "mt-6 flex items-baseline", children: [
-            /* @__PURE__ */ jsx7("span", { className: "text-3xl font-semibold text-foreground", children: tier.price }),
-            /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground ml-2 text-sm", children: tier.priceUnit })
+            /* @__PURE__ */ jsx8("span", { className: "text-3xl font-semibold text-foreground", children: tier.price }),
+            /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground ml-2 text-sm", children: tier.priceUnit })
           ] }),
-          /* @__PURE__ */ jsx7(Button3, { asChild: true, variant: tier.ctaVariant === "primary" ? "default" : "secondary", className: "mt-5 w-full sm:w-auto", children: /* @__PURE__ */ jsx7("a", { href: tier.ctaHref || "#", children: tier.ctaText }) }),
-          /* @__PURE__ */ jsx7("div", { className: "mt-8", children: /* @__PURE__ */ jsx7("ul", { className: "space-y-2", children: tier.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start", children: [
-            /* @__PURE__ */ jsx7(Check2, { className: "text-primary mr-2 size-4 shrink-0" }),
-            /* @__PURE__ */ jsx7("span", { className: "text-foreground text-sm", children: feature.text })
+          /* @__PURE__ */ jsx8(Button, { asChild: true, variant: tier.ctaVariant === "primary" ? "default" : "secondary", className: "mt-5 w-full sm:w-auto", children: /* @__PURE__ */ jsx8("a", { href: tier.ctaHref || "#", children: tier.ctaText }) }),
+          /* @__PURE__ */ jsx8("div", { className: "mt-8", children: /* @__PURE__ */ jsx8("ul", { className: "space-y-2", children: tier.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start", children: [
+            /* @__PURE__ */ jsx8(Check2, { className: "text-primary mr-2 size-4 shrink-0" }),
+            /* @__PURE__ */ jsx8("span", { className: "text-foreground text-sm", children: feature.text })
           ] }, featureIndex)) }) })
         ] }) })
       }
     ) }) }, index)) }),
-    securityNote && /* @__PURE__ */ jsx7(ScrollReveal, { direction: "up", delay: 0.4, children: /* @__PURE__ */ jsx7("div", { className: "text-center mt-8", children: /* @__PURE__ */ jsxs4("p", { className: "text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx7("strong", { children: "Your code stays private." }),
+    securityNote && /* @__PURE__ */ jsx8(ScrollReveal, { direction: "up", delay: 0.4, children: /* @__PURE__ */ jsx8("div", { className: "text-center mt-8", children: /* @__PURE__ */ jsxs4("p", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx8("strong", { children: "Your code stays private." }),
       " ",
       securityNote
     ] }) }) })
   ] }) });
 }
 
-// src/components/cta/cta.tsx
+// src/templates/studio/components/cta/cta.tsx
 import { HiArrowRight } from "react-icons/hi";
-import { Button as Button4 } from "@mdxui/primitives";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaultButtons = [
   {
     text: "Get Started",
@@ -550,19 +569,19 @@ var defaultButtons = [
 ];
 function CTA({ heading = "Ready to Save 15 Hours Per Week?", subheading = "Setup with Github \u2013 takes 5 minutes.", buttons = defaultButtons, backgroundColor: _backgroundColor, className }) {
   const bgClass = "bg-card";
-  return /* @__PURE__ */ jsx8("section", { className: cn(`py-20 md:py-32 px-4 md:px-6 ${bgClass}`, className), children: /* @__PURE__ */ jsx8("div", { className: "max-w-3xl mx-auto text-center", children: /* @__PURE__ */ jsx8(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsx8("h2", { className: "font-halant font-normal text-foreground text-[clamp(32px,5vw,52px)] leading-tight tracking-tight", children: heading }),
-    /* @__PURE__ */ jsx8("p", { className: "max-w-2xl mx-auto text-[clamp(16px,2vw,18px)] leading-relaxed text-muted-foreground", children: subheading }),
-    /* @__PURE__ */ jsx8("div", { className: "flex flex-col sm:flex-row gap-3 justify-center items-center pt-4", children: buttons.map((button, index) => /* @__PURE__ */ jsx8(Button4, { asChild: true, variant: button.variant === "primary" ? "default" : "secondary", children: /* @__PURE__ */ jsxs5("a", { href: button.href, children: [
+  return /* @__PURE__ */ jsx9("section", { className: cn(`py-20 md:py-32 px-4 md:px-6 ${bgClass}`, className), children: /* @__PURE__ */ jsx9("div", { className: "max-w-3xl mx-auto text-center", children: /* @__PURE__ */ jsx9(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx9("h2", { className: "font-halant font-normal text-foreground text-[clamp(32px,5vw,52px)] leading-tight tracking-tight", children: heading }),
+    /* @__PURE__ */ jsx9("p", { className: "max-w-2xl mx-auto text-[clamp(16px,2vw,18px)] leading-relaxed text-muted-foreground", children: subheading }),
+    /* @__PURE__ */ jsx9("div", { className: "flex flex-col sm:flex-row gap-3 justify-center items-center pt-4", children: buttons.map((button, index) => /* @__PURE__ */ jsx9(Button, { asChild: true, variant: button.variant === "primary" ? "default" : "secondary", children: /* @__PURE__ */ jsxs5("a", { href: button.href, children: [
       button.text,
-      button.showArrow && /* @__PURE__ */ jsx8(HiArrowRight, { className: "w-4 h-4" })
+      button.showArrow && /* @__PURE__ */ jsx9(HiArrowRight, { className: "w-4 h-4" })
     ] }) }, index)) })
   ] }) }) }) });
 }
 
-// src/components/faq/faq.tsx
+// src/templates/studio/components/faq/faq.tsx
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@mdxui/primitives";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var defaultFaqs = [
   {
     question: "How do I get started?",
@@ -590,22 +609,21 @@ var defaultFaqs = [
   }
 ];
 function FAQ({ heading = "FAQs", faqs = defaultFaqs, backgroundColor = "bg-background", className }) {
-  return /* @__PURE__ */ jsx9("section", { id: "faq", className: cn(`py-20 px-6 lg:px-12 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs6("div", { className: "max-w-4xl mx-auto", children: [
-    /* @__PURE__ */ jsx9(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsx9("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsx9("h2", { className: "font-halant font-normal text-[clamp(32px,4vw,52px)] leading-tight text-foreground mb-4", children: heading }) }) }),
-    /* @__PURE__ */ jsx9(Accordion, { type: "single", collapsible: true, className: "space-y-4", children: faqs.map((faq, index) => /* @__PURE__ */ jsx9(ScrollReveal, { direction: "up", delay: 0.15 + index * 0.05, children: /* @__PURE__ */ jsxs6(AccordionItem, { value: `item-${index}`, className: "rounded-xl px-4 sm:px-6 border border-border bg-card shadow-sm", children: [
-      /* @__PURE__ */ jsx9(AccordionTrigger, { className: "hover:no-underline py-5 text-base font-medium text-foreground", children: faq.question }),
-      /* @__PURE__ */ jsx9(AccordionContent, { className: "pb-5 text-sm text-muted-foreground leading-relaxed", children: faq.answer })
+  return /* @__PURE__ */ jsx10("section", { id: "faq", className: cn(`py-20 px-6 lg:px-12 ${backgroundColor}`, className), children: /* @__PURE__ */ jsxs6("div", { className: "max-w-4xl mx-auto", children: [
+    /* @__PURE__ */ jsx10(ScrollReveal, { direction: "up", delay: 0.1, children: /* @__PURE__ */ jsx10("div", { className: "text-center mb-12", children: /* @__PURE__ */ jsx10("h2", { className: "font-halant font-normal text-[clamp(32px,4vw,52px)] leading-tight text-foreground mb-4", children: heading }) }) }),
+    /* @__PURE__ */ jsx10(Accordion, { type: "single", collapsible: true, className: "space-y-4", children: faqs.map((faq, index) => /* @__PURE__ */ jsx10(ScrollReveal, { direction: "up", delay: 0.15 + index * 0.05, children: /* @__PURE__ */ jsxs6(AccordionItem, { value: `item-${index}`, className: "rounded-xl px-4 sm:px-6 border border-border bg-card shadow-sm", children: [
+      /* @__PURE__ */ jsx10(AccordionTrigger, { className: "hover:no-underline py-5 text-base font-medium text-foreground", children: faq.question }),
+      /* @__PURE__ */ jsx10(AccordionContent, { className: "pb-5 text-sm text-foreground/70 leading-relaxed", children: faq.answer })
     ] }) }, index)) })
   ] }) });
 }
 
-// src/components/navigation/navigation.tsx
-import { useState, useEffect } from "react";
+// src/templates/studio/components/navigation/navigation.tsx
+import { useState as useState2, useEffect as useEffect2 } from "react";
 import Link from "next/link";
 import { Menu, X } from "lucide-react";
 import { motion as motion2, AnimatePresence } from "motion/react";
-import { Button as Button5 } from "@mdxui/primitives";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function Navigation({
   logo = "Priya",
   logoHref = "/",
@@ -622,9 +640,9 @@ function Navigation({
   sticky = true,
   showScrollEffect = true
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [isScrolled, setIsScrolled] = useState(false);
-  useEffect(() => {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState2(false);
+  const [isScrolled, setIsScrolled] = useState2(false);
+  useEffect2(() => {
     if (!showScrollEffect) return;
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 10);
@@ -645,7 +663,7 @@ function Navigation({
     "7xl": "max-w-7xl",
     full: "max-w-full"
   }[maxWidth];
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "nav",
     {
       className: cn(
@@ -656,12 +674,12 @@ function Navigation({
       ),
       children: /* @__PURE__ */ jsxs7("div", { className: cn(maxWidthClass, "mx-auto px-6 lg:px-12 py-4"), children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx10("div", { className: "flex items-center", children: /* @__PURE__ */ jsx10(Link, { href: logoHref, className: "flex items-center", children: typeof logo === "string" ? /* @__PURE__ */ jsx10("span", { className: "text-3xl font-base text-foreground", children: logo }) : logo }) }),
-          links && links.length > 0 && /* @__PURE__ */ jsx10("div", { className: "hidden lg:flex items-center gap-8", children: links.map((link) => /* @__PURE__ */ jsx10("a", { href: link.href, className: "text-sm text-foreground hover:opacity-60 transition-opacity", children: link.label }, link.href)) }),
-          ctaText && ctaHref && /* @__PURE__ */ jsx10("div", { className: "hidden lg:flex items-center", children: /* @__PURE__ */ jsx10(Button5, { asChild: true, variant: ctaVariant, children: /* @__PURE__ */ jsx10("a", { href: ctaHref, children: ctaText }) }) }),
-          /* @__PURE__ */ jsx10("button", { className: "lg:hidden p-2 text-foreground", onClick: () => setMobileMenuOpen(!mobileMenuOpen), "aria-label": "Toggle menu", children: mobileMenuOpen ? /* @__PURE__ */ jsx10(X, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx10(Menu, { className: "w-6 h-6" }) })
+          /* @__PURE__ */ jsx11("div", { className: "flex items-center", children: /* @__PURE__ */ jsx11(Link, { href: logoHref, className: "flex items-center", children: typeof logo === "string" ? /* @__PURE__ */ jsx11("span", { className: "text-3xl font-base text-foreground font-halant", children: logo }) : logo }) }),
+          links && links.length > 0 && /* @__PURE__ */ jsx11("div", { className: "hidden lg:flex items-center gap-8", children: links.map((link) => /* @__PURE__ */ jsx11("a", { href: link.href, className: "text-sm text-foreground hover:opacity-60 transition-opacity", children: link.label }, link.href)) }),
+          ctaText && ctaHref && /* @__PURE__ */ jsx11("div", { className: "hidden lg:flex items-center", children: /* @__PURE__ */ jsx11(Button, { asChild: true, variant: ctaVariant, children: /* @__PURE__ */ jsx11("a", { href: ctaHref, children: ctaText }) }) }),
+          /* @__PURE__ */ jsx11("button", { className: "lg:hidden p-2 text-foreground", onClick: () => setMobileMenuOpen(!mobileMenuOpen), "aria-label": "Toggle menu", children: mobileMenuOpen ? /* @__PURE__ */ jsx11(X, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx11(Menu, { className: "w-6 h-6" }) })
         ] }),
-        /* @__PURE__ */ jsx10(AnimatePresence, { children: mobileMenuOpen && /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(AnimatePresence, { children: mobileMenuOpen && /* @__PURE__ */ jsx11(
           motion2.div,
           {
             initial: { opacity: 0, height: 0 },
@@ -669,9 +687,9 @@ function Navigation({
             exit: { opacity: 0, height: 0 },
             transition: { duration: 0.3, ease: "easeInOut" },
             className: "lg:hidden overflow-hidden",
-            children: /* @__PURE__ */ jsx10("div", { className: "mt-4 py-4 rounded-xl bg-card", children: /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-4 px-6", children: [
-              links.map((link) => /* @__PURE__ */ jsx10("a", { href: link.href, className: "py-2 text-foreground hover:opacity-70 transition-colors", onClick: () => setMobileMenuOpen(false), children: link.label }, link.href)),
-              ctaText && ctaHref && /* @__PURE__ */ jsx10(Button5, { asChild: true, variant: ctaVariant, className: "mt-2", onClick: () => setMobileMenuOpen(false), children: /* @__PURE__ */ jsx10("a", { href: ctaHref, children: ctaText }) })
+            children: /* @__PURE__ */ jsx11("div", { className: "mt-4 py-4 rounded-xl bg-card", children: /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-4 px-6", children: [
+              links.map((link) => /* @__PURE__ */ jsx11("a", { href: link.href, className: "py-2 text-foreground hover:opacity-70 transition-colors", onClick: () => setMobileMenuOpen(false), children: link.label }, link.href)),
+              ctaText && ctaHref && /* @__PURE__ */ jsx11(Button, { asChild: true, variant: ctaVariant, className: "mt-2", onClick: () => setMobileMenuOpen(false), children: /* @__PURE__ */ jsx11("a", { href: ctaHref, children: ctaText }) })
             ] }) })
           }
         ) })
@@ -680,20 +698,44 @@ function Navigation({
   );
 }
 
-// src/components/footer/footer.tsx
+// src/templates/studio/components/footer/footer.tsx
 import Link2 from "next/link";
 import { FaGithub, FaXTwitter } from "react-icons/fa6";
 import { SiNpm } from "react-icons/si";
 import { FaArrowRight } from "react-icons/fa6";
-import { Input } from "@mdxui/primitives";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// src/templates/studio/ui/input/input.tsx
+import * as React2 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Input = React2.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx12(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-11 w-full rounded-md border border-(--color-border) bg-transparent px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-(--color-fg) placeholder:text-(--color-fg-muted) focus-visible:outline-none focus-visible:border-(--color-border-strong) focus-visible:ring-1 focus-visible:ring-(--color-ring) disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/templates/studio/components/footer/footer.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function Footer({
   logo = "Priya",
   description = "Your AI Product Manager for GitHub. Automate issue triage, sprint planning, and backlog grooming.",
   socialLinks = [
     { href: "https://github.com", icon: FaGithub, label: "GitHub" },
     { href: "https://npmjs.com", icon: SiNpm, label: "npm" },
-    { href: "https://twitter.com", icon: FaXTwitter, label: "X (Twitter)" }
+    // X always points at the .do brand account (do-design-agency HARD rule);
+    // GitHub/npm stay product-specific overrides.
+    { href: "https://x.com/dotdo_ai", icon: FaXTwitter, label: "X (Twitter)" }
   ],
   quickLinks = [
     { href: "/#pricing", label: "Pricing" },
@@ -716,213 +758,68 @@ function Footer({
     }
     form.reset();
   };
-  return /* @__PURE__ */ jsx11("footer", { className: cn("py-16 px-6 lg:px-12 bg-card text-card-foreground", className), children: /* @__PURE__ */ jsxs8("div", { className: "max-w-7xl mx-auto", children: [
+  return /* @__PURE__ */ jsx13("footer", { className: cn("py-16 px-6 lg:px-12 bg-[#111011] text-white", className), children: /* @__PURE__ */ jsxs8("div", { className: "max-w-7xl mx-auto", children: [
     /* @__PURE__ */ jsxs8("div", { className: "grid md:grid-cols-5 gap-12 mb-12", children: [
       /* @__PURE__ */ jsxs8("div", { className: "md:col-span-2", children: [
-        /* @__PURE__ */ jsx11(Link2, { href: "/", className: "inline-block mb-4", children: /* @__PURE__ */ jsx11("div", { className: "text-3xl font-base text-card-foreground", children: logo }) }),
-        /* @__PURE__ */ jsx11("p", { className: "max-w-md text-sm leading-relaxed text-muted-foreground mb-6", children: description }),
-        /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-4", children: socialLinks.map((link) => {
+        /* @__PURE__ */ jsx13(Link2, { href: "/", className: "inline-block mb-4", children: /* @__PURE__ */ jsx13("div", { className: "text-3xl font-base text-white font-halant", children: logo }) }),
+        /* @__PURE__ */ jsx13("p", { className: "max-w-md text-sm leading-relaxed text-white/70 mb-6", children: description }),
+        /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-4", children: socialLinks.map((link) => {
           const Icon = link.icon;
-          return /* @__PURE__ */ jsx11(
+          return /* @__PURE__ */ jsx13(
             Link2,
             {
               href: link.href,
               target: "_blank",
               rel: "noopener noreferrer",
-              className: "text-muted-foreground transition-colors hover:text-card-foreground",
+              className: "text-white/70 transition-colors hover:text-white",
               "aria-label": link.label,
-              children: /* @__PURE__ */ jsx11(Icon, { className: "w-5 h-5" })
+              children: /* @__PURE__ */ jsx13(Icon, { className: "w-5 h-5" })
             },
             link.label
           );
         }) })
       ] }),
       /* @__PURE__ */ jsxs8("div", { children: [
-        /* @__PURE__ */ jsx11("h3", { className: "font-semibold text-base mb-4 text-card-foreground", children: "Quick Links" }),
-        /* @__PURE__ */ jsx11("ul", { className: "space-y-2", children: quickLinks.map((link) => /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(Link2, { href: link.href, className: "text-sm text-muted-foreground transition-colors hover:text-card-foreground", children: link.label }) }, link.label)) })
+        /* @__PURE__ */ jsx13("h3", { className: "font-semibold text-base mb-4 text-white", children: "Quick Links" }),
+        /* @__PURE__ */ jsx13("ul", { className: "space-y-2", children: quickLinks.map((link) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(Link2, { href: link.href, className: "text-sm text-white/70 transition-colors hover:text-white", children: link.label }) }, link.label)) })
       ] }),
-      /* @__PURE__ */ jsx11("div", { className: "w-full md:col-span-2 md:flex md:flex-col md:items-end", children: /* @__PURE__ */ jsxs8("div", { className: "w-full md:max-w-sm", children: [
-        /* @__PURE__ */ jsx11("h3", { className: "font-semibold text-base mb-4 text-card-foreground", children: contactTitle }),
+      /* @__PURE__ */ jsx13("div", { className: "w-full md:col-span-2 md:flex md:flex-col md:items-end", children: /* @__PURE__ */ jsxs8("div", { className: "w-full md:max-w-sm", children: [
+        /* @__PURE__ */ jsx13("h3", { className: "font-semibold text-base mb-4 text-white", children: contactTitle }),
         /* @__PURE__ */ jsxs8("form", { onSubmit: handleEmailSubmit, className: "relative", children: [
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx13(
             Input,
             {
               type: "email",
               name: "email",
               placeholder: emailPlaceholder,
               required: true,
-              className: "w-full bg-muted border-border text-card-foreground placeholder:text-muted-foreground pr-12"
+              className: "w-full bg-white/10 border-white/20 text-white placeholder:text-white/50 pr-12"
             }
           ),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "submit",
-              className: "absolute right-1 top-1/2 -translate-y-1/2 bg-card text-foreground hover:bg-card active:bg-card active:text-card-foreground px-3 py-3 rounded-md transition-colors",
+              className: "absolute right-1 top-1/2 -translate-y-1/2 bg-white text-gray-900 hover:bg-white/90 active:bg-[#111011] active:text-white px-3 py-3 rounded-md transition-colors",
               "aria-label": "Submit email",
-              children: /* @__PURE__ */ jsx11(FaArrowRight, { className: "w-3 h-3" })
+              children: /* @__PURE__ */ jsx13(FaArrowRight, { className: "w-3 h-3" })
             }
           )
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx11("div", { className: "border-t border-border pt-8", children: /* @__PURE__ */ jsx11("div", { className: "flex flex-col md:flex-row justify-between items-center gap-4", children: /* @__PURE__ */ jsx11("p", { className: "text-sm text-muted-foreground", children: copyrightText }) }) })
+    /* @__PURE__ */ jsx13("div", { className: "border-t border-white/10 pt-8", children: /* @__PURE__ */ jsx13("div", { className: "flex flex-col md:flex-row justify-between items-center gap-4", children: /* @__PURE__ */ jsx13("p", { className: "text-sm text-white/60", children: copyrightText }) }) })
   ] }) });
 }
-
-// src/shared/animated-beam/animated-beam.tsx
-import { useEffect as useEffect2, useId, useState as useState2 } from "react";
-import { motion as motion3 } from "motion/react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-function AnimatedBeam({
-  className,
-  containerRef,
-  fromRef,
-  toRef,
-  curvature = 0,
-  reverse = false,
-  duration = Math.random() * 3 + 4,
-  delay = 0,
-  pathColor = "gray",
-  pathWidth = 2,
-  pathOpacity = 0.2,
-  gradientStartColor = "#ffaa40",
-  gradientStopColor = "#9c40ff",
-  startXOffset = 0,
-  startYOffset = 0,
-  endXOffset = 0,
-  endYOffset = 0
-}) {
-  const id = useId();
-  const [pathD, setPathD] = useState2("");
-  const [svgDimensions, setSvgDimensions] = useState2({ width: 0, height: 0 });
-  const gradientCoordinates = reverse ? {
-    x1: ["90%", "-10%"],
-    x2: ["100%", "0%"],
-    y1: ["0%", "0%"],
-    y2: ["0%", "0%"]
-  } : {
-    x1: ["10%", "110%"],
-    x2: ["0%", "100%"],
-    y1: ["0%", "0%"],
-    y2: ["0%", "0%"]
-  };
-  useEffect2(() => {
-    const updatePath = () => {
-      if (containerRef.current && fromRef.current && toRef.current) {
-        const containerRect = containerRef.current.getBoundingClientRect();
-        const rectA = fromRef.current.getBoundingClientRect();
-        const rectB = toRef.current.getBoundingClientRect();
-        const svgWidth = containerRect.width;
-        const svgHeight = containerRect.height;
-        setSvgDimensions({ width: svgWidth, height: svgHeight });
-        const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
-        const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
-        const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
-        const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
-        const controlY = startY - curvature;
-        const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;
-        setPathD(d);
-      }
-    };
-    const resizeObserver = new ResizeObserver(() => {
-      updatePath();
-    });
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-    updatePath();
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset]);
-  return /* @__PURE__ */ jsxs9(
-    "svg",
-    {
-      fill: "none",
-      width: svgDimensions.width,
-      height: svgDimensions.height,
-      xmlns: "http://www.w3.org/2000/svg",
-      className: cn("pointer-events-none absolute top-0 left-0 transform-gpu stroke-2", className),
-      viewBox: `0 0 ${svgDimensions.width} ${svgDimensions.height}`,
-      children: [
-        /* @__PURE__ */ jsx12("path", { d: pathD, stroke: pathColor, strokeWidth: pathWidth, strokeOpacity: pathOpacity, strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx12("path", { d: pathD, strokeWidth: pathWidth, stroke: `url(#${id})`, strokeOpacity: "1", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx12("defs", { children: /* @__PURE__ */ jsxs9(
-          motion3.linearGradient,
-          {
-            className: "transform-gpu",
-            id,
-            gradientUnits: "userSpaceOnUse",
-            initial: {
-              x1: "0%",
-              x2: "0%",
-              y1: "0%",
-              y2: "0%"
-            },
-            animate: {
-              x1: gradientCoordinates.x1,
-              x2: gradientCoordinates.x2,
-              y1: gradientCoordinates.y1,
-              y2: gradientCoordinates.y2
-            },
-            transition: {
-              delay,
-              duration,
-              ease: [0.16, 1, 0.3, 1],
-              repeat: Infinity,
-              repeatDelay: 0
-            },
-            children: [
-              /* @__PURE__ */ jsx12("stop", { stopColor: gradientStartColor, stopOpacity: "0" }),
-              /* @__PURE__ */ jsx12("stop", { stopColor: gradientStartColor }),
-              /* @__PURE__ */ jsx12("stop", { offset: "32.5%", stopColor: gradientStopColor }),
-              /* @__PURE__ */ jsx12("stop", { offset: "100%", stopColor: gradientStopColor, stopOpacity: "0" })
-            ]
-          }
-        ) })
-      ]
-    }
-  );
-}
-
-// src/shared/grid-pattern/grid-pattern.tsx
-import { useId as useId2 } from "react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-function GridPattern({
-  width = 40,
-  height = 40,
-  x = -1,
-  y = -1,
-  strokeDasharray = "0",
-  squares,
-  className,
-  ...props
-}) {
-  const id = useId2();
-  return /* @__PURE__ */ jsxs10(
-    "svg",
-    {
-      "aria-hidden": "true",
-      className: cn("pointer-events-none absolute inset-0 h-full w-full fill-muted-foreground/20 stroke-muted-foreground/20", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx13("defs", { children: /* @__PURE__ */ jsx13("pattern", { id, width, height, patternUnits: "userSpaceOnUse", x, y, children: /* @__PURE__ */ jsx13("path", { d: `M.5 ${height}V.5H${width}`, fill: "none", strokeDasharray }) }) }),
-        /* @__PURE__ */ jsx13("rect", { width: "100%", height: "100%", strokeWidth: 0, fill: `url(#${id})` }),
-        squares && /* @__PURE__ */ jsx13("svg", { x, y, className: "overflow-visible", children: squares.map(([sx, sy]) => /* @__PURE__ */ jsx13("rect", { strokeWidth: "0", width: width - 1, height: height - 1, x: sx * width + 1, y: sy * height + 1 }, `${sx}-${sy}`)) })
-      ]
-    }
-  );
-}
 export {
-  AnimatedBeam,
+  Button,
   CTA,
   CodeWindow,
   FAQ,
   Features,
   Footer,
-  GridPattern,
   Hero,
+  Input,
   Marquee,
   Navigation,
   Pricing,