nextworks 0.2.0-alpha.11 → 0.2.0-alpha.13

package/dist/kits/blocks/app/templates/productlaunch/components/Testimonials.tsx

@@ -1,90 +1,90 @@
-"use client";
-
-import { Testimonials as SharedTestimonials } from "@/components/sections/Testimonials";
-
-/**
- * Product Launch preset for Testimonials
- *
- */
-export function Testimonials() {
-  const testimonials = [
-    {
-      testimonialText:
-        "IntelliOpAI has completely transformed our workflow. The AI-powered automation saves us 40+ hours per week, and the accuracy is incredible.",
-      testimonialAuthor: " - Sarah Johnson, CEO at TechCorp",
-      testimonialAuthorInitials: "SJ",
-    },
-    {
-      testimonialText:
-        "The machine learning capabilities are outstanding. We've seen a 300% increase in productivity since implementing their AI solutions.",
-      testimonialAuthor: " - Michael Chen, CTO at InnovateLab",
-      testimonialAuthorInitials: "MC",
-    },
-    {
-      testimonialText:
-        "Game-changing technology! The AI insights have helped us make better decisions and scale our business faster than ever before.",
-      testimonialAuthor: " - Emily Rodriguez, VP Operations at GrowthCo",
-      testimonialAuthorInitials: "ER",
-    },
-    {
-      testimonialText:
-        "The implementation was seamless and the results exceeded our expectations. Our team loves working with the AI-powered tools.",
-      testimonialAuthor: " - David Kim, Head of Engineering at StartupXYZ",
-      testimonialAuthorInitials: "DK",
-    },
-    {
-      testimonialText:
-        "IntelliOpAI's natural language processing capabilities have revolutionized how we handle customer support. Response times improved by 80%.",
-      testimonialAuthor:
-        " - Lisa Wang, Customer Success Director at ServicePro",
-      testimonialAuthorInitials: "LW",
-    },
-    {
-      testimonialText:
-        "The predictive analytics features are phenomenal. We can now forecast trends and make data-driven decisions with confidence.",
-      testimonialAuthor:
-        " - James Thompson, Data Science Lead at AnalyticsPlus",
-      testimonialAuthorInitials: "JT",
-    },
-  ];
-
-  return (
-    <SharedTestimonials
-      id="testimonials"
-      testimonials={testimonials}
-      testimonialSectionHeader="What Our AI Customers Say"
-      section={{
-        className: "py-20 md:py-24 lg:py-28 bg-gray-50 dark:bg-gray-900",
-      }}
-      container={{ className: "max-w-7xl mx-auto px-6 md:px-8 lg:px-12" }}
-      header={{ className: "text-center mb-16" }}
-      heading={{
-        className:
-          "text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 dark:text-white text-center font-outfit",
-      }}
-      grid={{
-        className:
-          "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10",
-      }}
-      card={{
-        className:
-          "bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-500/10 group border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-600",
-      }}
-      content={{ className: "flex flex-col space-y-6" }}
-      text={{
-        className:
-          "text-gray-700 dark:text-gray-300 text-base md:text-lg leading-relaxed italic font-inter group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300",
-      }}
-      author={{
-        className:
-          "text-gray-600 dark:text-gray-400 text-sm md:text-base font-medium font-inter",
-      }}
-      avatar={{
-        className:
-          "w-16 h-16 bg-gradient-to-br from-purple-600 to-purple-700 text-white rounded-full flex items-center justify-center text-xl font-bold shadow-lg group-hover:scale-110 transition-transform duration-300",
-      }}
-      avatarText={{ className: "text-white font-bold" }}
-      ariaLabel="Customer testimonials for IntelliOpAI"
-    />
-  );
-}
+"use client";
+
+import { Testimonials as SharedTestimonials } from "@/components/sections/Testimonials";
+
+/**
+ * Product Launch preset for Testimonials
+ *
+ */
+export function Testimonials() {
+  const testimonials = [
+    {
+      testimonialText:
+        "IntelliOpAI has completely transformed our workflow. The AI-powered automation saves us 40+ hours per week, and the accuracy is incredible.",
+      testimonialAuthor: " - Sarah Johnson, CEO at TechCorp",
+      testimonialAuthorInitials: "SJ",
+    },
+    {
+      testimonialText:
+        "The machine learning capabilities are outstanding. We've seen a 300% increase in productivity since implementing their AI solutions.",
+      testimonialAuthor: " - Michael Chen, CTO at InnovateLab",
+      testimonialAuthorInitials: "MC",
+    },
+    {
+      testimonialText:
+        "Game-changing technology! The AI insights have helped us make better decisions and scale our business faster than ever before.",
+      testimonialAuthor: " - Emily Rodriguez, VP Operations at GrowthCo",
+      testimonialAuthorInitials: "ER",
+    },
+    {
+      testimonialText:
+        "The implementation was seamless and the results exceeded our expectations. Our team loves working with the AI-powered tools.",
+      testimonialAuthor: " - David Kim, Head of Engineering at StartupXYZ",
+      testimonialAuthorInitials: "DK",
+    },
+    {
+      testimonialText:
+        "IntelliOpAI's natural language processing capabilities have revolutionized how we handle customer support. Response times improved by 80%.",
+      testimonialAuthor:
+        " - Lisa Wang, Customer Success Director at ServicePro",
+      testimonialAuthorInitials: "LW",
+    },
+    {
+      testimonialText:
+        "The predictive analytics features are phenomenal. We can now forecast trends and make data-driven decisions with confidence.",
+      testimonialAuthor:
+        " - James Thompson, Data Science Lead at AnalyticsPlus",
+      testimonialAuthorInitials: "JT",
+    },
+  ];
+
+  return (
+    <SharedTestimonials
+      id="testimonials"
+      testimonials={testimonials}
+      testimonialSectionHeader="What Our AI Customers Say"
+      section={{
+        className: "py-20 md:py-24 lg:py-28 bg-gray-50 dark:bg-gray-900",
+      }}
+      container={{ className: "max-w-7xl mx-auto px-6 md:px-8 lg:px-12" }}
+      header={{ className: "text-center mb-16" }}
+      heading={{
+        className:
+          "text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 dark:text-white text-center font-outfit",
+      }}
+      grid={{
+        className:
+          "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10",
+      }}
+      card={{
+        className:
+          "bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-500/10 group border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-600",
+      }}
+      content={{ className: "flex flex-col space-y-6" }}
+      text={{
+        className:
+          "text-gray-700 dark:text-gray-300 text-base md:text-lg leading-relaxed italic font-inter group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300",
+      }}
+      author={{
+        className:
+          "text-gray-600 dark:text-gray-400 text-sm md:text-base font-medium font-inter",
+      }}
+      avatar={{
+        className:
+          "w-16 h-16 bg-gradient-to-br from-purple-600 to-purple-700 text-white rounded-full flex items-center justify-center text-xl font-bold shadow-lg group-hover:scale-110 transition-transform duration-300",
+      }}
+      avatarText={{ className: "text-white font-bold" }}
+      ariaLabel="Customer testimonials for IntelliOpAI"
+    />
+  );
+}

package/dist/kits/blocks/app/templates/productlaunch/components/TrustBadges.tsx

@@ -1,76 +1,76 @@
-"use client";
-
-import { TrustBadges as SharedTrustBadges } from "@/components/sections/TrustBadges";
-
-/**
- * Product Launch preset for TrustBadges
- */
-export function TrustBadges() {
-  const badges = [
-    {
-      badgeText: "50,000+ AI Models",
-      badgeDescription: "Powered by",
-      badgeIcon: "🤖",
-    },
-    {
-      badgeText: "99.9% Accuracy",
-      badgeDescription: "AI Performance",
-      badgeIcon: "🎯",
-    },
-    {
-      badgeText: "SOC 2 Type II",
-      badgeDescription: "Enterprise Security",
-      badgeIcon: "🔒",
-    },
-    {
-      badgeText: "24/7 Support",
-      badgeDescription: "Always Available",
-      badgeIcon: "⚡",
-    },
-    {
-      badgeText: "Fortune 500",
-      badgeDescription: "Trusted by",
-      badgeIcon: "🏆",
-    },
-  ];
-
-  return (
-    <SharedTrustBadges
-      id="trust-badges"
-      badges={badges}
-      trustBadgesSectionHeader="Trusted by Industry Leaders"
-      section={{
-        className:
-          "py-12 md:py-16 bg-gradient-to-r from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 border-t border-b border-gray-200 dark:border-gray-700",
-      }}
-      container={{ className: "max-w-7xl mx-auto px-6 md:px-8 lg:px-12" }}
-      header={{ className: "text-center mb-12" }}
-      heading={{
-        className:
-          "text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 dark:text-white font-outfit",
-      }}
-      badgesContainer={{
-        className:
-          "flex flex-col sm:flex-row justify-center items-center gap-8 md:gap-12 lg:gap-16 flex-wrap",
-      }}
-      badge={{
-        className: "flex flex-col items-center text-center min-w-[180px] group",
-      }}
-      badgeContent={{ className: "flex flex-col items-center space-y-3" }}
-      icon={{
-        className:
-          "text-3xl md:text-4xl mb-3 group-hover:scale-105 transition-transform duration-500 ease-out",
-      }}
-      description={{
-        className:
-          "text-xs md:text-sm font-medium text-gray-600 dark:text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors duration-500 ease-out",
-      }}
-      text={{
-        className:
-          "text-base md:text-lg font-bold text-gray-900 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-500 ease-out font-outfit",
-      }}
-      layout="horizontal"
-      ariaLabel="Trust badges for IntelliOpAI"
-    />
-  );
-}
+"use client";
+
+import { TrustBadges as SharedTrustBadges } from "@/components/sections/TrustBadges";
+
+/**
+ * Product Launch preset for TrustBadges
+ */
+export function TrustBadges() {
+  const badges = [
+    {
+      badgeText: "50,000+ AI Models",
+      badgeDescription: "Powered by",
+      badgeIcon: "🤖",
+    },
+    {
+      badgeText: "99.9% Accuracy",
+      badgeDescription: "AI Performance",
+      badgeIcon: "🎯",
+    },
+    {
+      badgeText: "SOC 2 Type II",
+      badgeDescription: "Enterprise Security",
+      badgeIcon: "🔒",
+    },
+    {
+      badgeText: "24/7 Support",
+      badgeDescription: "Always Available",
+      badgeIcon: "⚡",
+    },
+    {
+      badgeText: "Fortune 500",
+      badgeDescription: "Trusted by",
+      badgeIcon: "🏆",
+    },
+  ];
+
+  return (
+    <SharedTrustBadges
+      id="trust-badges"
+      badges={badges}
+      trustBadgesSectionHeader="Trusted by Industry Leaders"
+      section={{
+        className:
+          "py-12 md:py-16 bg-gradient-to-r from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 border-t border-b border-gray-200 dark:border-gray-700",
+      }}
+      container={{ className: "max-w-7xl mx-auto px-6 md:px-8 lg:px-12" }}
+      header={{ className: "text-center mb-12" }}
+      heading={{
+        className:
+          "text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 dark:text-white font-outfit",
+      }}
+      badgesContainer={{
+        className:
+          "flex flex-col sm:flex-row justify-center items-center gap-8 md:gap-12 lg:gap-16 flex-wrap",
+      }}
+      badge={{
+        className: "flex flex-col items-center text-center min-w-[180px] group",
+      }}
+      badgeContent={{ className: "flex flex-col items-center space-y-3" }}
+      icon={{
+        className:
+          "text-3xl md:text-4xl mb-3 group-hover:scale-105 transition-transform duration-500 ease-out",
+      }}
+      description={{
+        className:
+          "text-xs md:text-sm font-medium text-gray-600 dark:text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors duration-500 ease-out",
+      }}
+      text={{
+        className:
+          "text-base md:text-lg font-bold text-gray-900 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-500 ease-out font-outfit",
+      }}
+      layout="horizontal"
+      ariaLabel="Trust badges for IntelliOpAI"
+    />
+  );
+}

package/dist/kits/blocks/app/templates/productlaunch/page.tsx

@@ -1,43 +1,43 @@
-import { Navbar } from "./components/Navbar";
-import { CTA } from "./components/CTA";
-import { Hero } from "./components/Hero";
-import { About } from "./components/About";
-import { Pricing } from "./components/Pricing";
-import { ProcessTimeline } from "./components/ProcessTimeline";
-import { FAQ } from "./components/FAQ";
-import { Contact } from "./components/Contact";
-import { Footer } from "./components/Footer";
-import { Testimonials } from "./components/Testimonials";
-import { TrustBadges } from "./components/TrustBadges";
-import { Features } from "./components/Features";
-
-export default function ProductLaunchPage() {
-  return (
-    // <PresetThemeVars>
-    <>
-      <Navbar />
-      <section id="home">
-        <Hero />
-      </section>
-      <TrustBadges />
-      <About />
-      <section id="features">
-        <Features />
-        <ProcessTimeline />
-      </section>
-      <Testimonials />
-      <CTA />
-      <section id="pricing">
-        <Pricing />
-      </section>
-      <section id="faq">
-        <FAQ />
-      </section>
-      <section id="contact">
-        <Contact />
-      </section>
-      <Footer />
-    </>
-    // </PresetThemeVars>
-  );
-}
+import { Navbar } from "./components/Navbar";
+import { CTA } from "./components/CTA";
+import { Hero } from "./components/Hero";
+import { About } from "./components/About";
+import { Pricing } from "./components/Pricing";
+import { ProcessTimeline } from "./components/ProcessTimeline";
+import { FAQ } from "./components/FAQ";
+import { Contact } from "./components/Contact";
+import { Footer } from "./components/Footer";
+import { Testimonials } from "./components/Testimonials";
+import { TrustBadges } from "./components/TrustBadges";
+import { Features } from "./components/Features";
+
+export default function ProductLaunchPage() {
+  return (
+    // <PresetThemeVars>
+    <>
+      <Navbar />
+      <section id="home">
+        <Hero />
+      </section>
+      <TrustBadges />
+      <About />
+      <section id="features">
+        <Features />
+        <ProcessTimeline />
+      </section>
+      <Testimonials />
+      <CTA />
+      <section id="pricing">
+        <Pricing />
+      </section>
+      <section id="faq">
+        <FAQ />
+      </section>
+      <section id="contact">
+        <Contact />
+      </section>
+      <Footer />
+    </>
+    // </PresetThemeVars>
+  );
+}

package/dist/kits/blocks/app/templates/saasdashboard/PresetThemeVars.tsx

@@ -1,80 +1,80 @@
-import React from "react";
-import { cn } from "@/lib/utils";
-
-type Props = React.PropsWithChildren<{ className?: string }>;
-
-/**
- * SaaSDashboard template theme variables wrapper.
- * Sky/blue leaning palette; adjust values to your preset branding.
- */
-export function PresetThemeVars({ className, children }: Props) {
-  return (
-    <div
-      className={cn(
-        // Shared button ring
-        "[--btn-ring:theme(colors.sky.500)] dark:[--btn-ring:theme(colors.sky.400)]",
-
-        // Inputs
-        "[--input-bg:theme(colors.white)] dark:[--input-bg:theme(colors.gray.900)]",
-        "[--input-fg:theme(colors.gray.900)] dark:[--input-fg:theme(colors.gray.100)]",
-        "[--input-placeholder:theme(colors.gray.400)] dark:[--input-placeholder:theme(colors.gray.500)]",
-        "[--input-border:theme(colors.sky.200)] dark:[--input-border:theme(colors.sky.700)]",
-        "[--input-focus-ring:theme(colors.sky.500)] dark:[--input-focus-ring:theme(colors.sky.400)]",
-        "[--input-ring-offset:theme(colors.white)] dark:[--input-ring-offset:theme(colors.gray.900)]",
-
-        // Cards
-        "[--card-bg:theme(colors.white)] dark:[--card-bg:theme(colors.gray.900)]",
-        "[--card-fg:theme(colors.gray.900)] dark:[--card-fg:theme(colors.gray.100)]",
-        "[--card-title-fg:theme(colors.gray.900)] dark:[--card-title-fg:theme(colors.gray.100)]",
-        "[--card-muted-fg:theme(colors.gray.500)] dark:[--card-muted-fg:theme(colors.gray.400)]",
-        "[--card-border:theme(colors.gray.200)] dark:[--card-border:theme(colors.gray.800)]",
-        "[--card-shadow:0_6px_20px_rgba(0,0,0,0.06)]",
-
-        // Badges/Chips
-        "[--badge-bg:theme(colors.sky.50)] dark:[--badge-bg:theme(colors.sky.950)]",
-        "[--badge-fg:theme(colors.sky.700)] dark:[--badge-fg:theme(colors.sky.300)]",
-        "[--badge-border:theme(colors.sky.200)] dark:[--badge-border:theme(colors.sky.800)]",
-        "[--badge-active-bg:theme(colors.sky.600)] dark:[--badge-active-bg:theme(colors.sky.500)]",
-        "[--badge-active-fg:theme(colors.white)] dark:[--badge-active-fg:theme(colors.white)]",
-        "[--badge-active-border:theme(colors.sky.700)] dark:[--badge-active-border:theme(colors.sky.400)]",
-
-        // Headings/Subheadings
-        "[--heading-fg:theme(colors.gray.900)] dark:[--heading-fg:theme(colors.gray.100)]",
-        "[--subheading-fg:theme(colors.gray.600)] dark:[--subheading-fg:theme(colors.gray.300)]",
-        "[--description-fg:theme(colors.gray.700)] dark:[--description-fg:theme(colors.gray.200)]",
-
-        // Hero background (optional)
-        "[--hero-bg:theme(colors.white)] dark:[--hero-bg:theme(colors.slate.950)]",
-
-        // Footer
-        "[--footer-bg:transparent] dark:[--footer-bg:transparent]",
-        "[--footer-fg:theme(colors.gray.800)] dark:[--footer-fg:theme(colors.gray.100)]",
-        "[--footer-heading-fg:theme(colors.gray.900)] dark:[--footer-heading-fg:theme(colors.gray.100)]",
-        "[--footer-link-fg:theme(colors.gray.700)] dark:[--footer-link-fg:theme(colors.gray.300)]",
-        "[--footer-link-hover-fg:theme(colors.sky.700)] dark:[--footer-link-hover-fg:theme(colors.sky.400)]",
-        "[--footer-link-hover-bg:theme(colors.sky.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.18_0.05_235)_20%,transparent)]",
-        "[--footer-muted-fg:theme(colors.gray.500)] dark:[--footer-muted-fg:theme(colors.gray.400)]",
-        "[--footer-border:theme(colors.gray.200)] dark:[--footer-border:theme(colors.gray.800)]",
-
-        // Table (optional)
-        "[--table-fg:inherit]",
-        "[--table-muted-fg:theme(colors.gray.500)] dark:[--table-muted-fg:theme(colors.gray.400)]",
-        "[--table-head-fg:theme(colors.gray.700)] dark:[--table-head-fg:theme(colors.gray.300)]",
-        "[--table-border:theme(colors.gray.200)] dark:[--table-border:theme(colors.gray.800)]",
-        "[--table-row-hover-bg:theme(colors.gray.50)] dark:[--table-row-hover-bg:theme(colors.gray.900)]",
-
-        // FAQ specific (optional overrides; fall back to --btn-* and --card-*)
-        "[--faq-btn-bg:var(--btn-bg)] dark:[--faq-btn-bg:var(--btn-bg)]",
-        "[--faq-btn-fg:var(--btn-fg)] dark:[--faq-btn-fg:var(--btn-fg)]",
-        "[--faq-btn-hover-bg:var(--btn-hover-bg)] dark:[--faq-btn-hover-bg:var(--btn-hover-bg)]",
-        "[--faq-btn-hover-fg:var(--btn-hover-fg)] dark:[--faq-btn-hover-fg:var(--btn-hover-fg)]",
-        "[--faq-answer-bg:var(--card-bg)] dark:[--faq-answer-bg:var(--card-bg)]",
-        "[--faq-answer-fg:var(--card-fg)] dark:[--faq-answer-fg:var(--card-fg)]",
-
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-}
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type Props = React.PropsWithChildren<{ className?: string }>;
+
+/**
+ * SaaSDashboard template theme variables wrapper.
+ * Sky/blue leaning palette; adjust values to your preset branding.
+ */
+export function PresetThemeVars({ className, children }: Props) {
+  return (
+    <div
+      className={cn(
+        // Shared button ring
+        "[--btn-ring:theme(colors.sky.500)] dark:[--btn-ring:theme(colors.sky.400)]",
+
+        // Inputs
+        "[--input-bg:theme(colors.white)] dark:[--input-bg:theme(colors.gray.900)]",
+        "[--input-fg:theme(colors.gray.900)] dark:[--input-fg:theme(colors.gray.100)]",
+        "[--input-placeholder:theme(colors.gray.400)] dark:[--input-placeholder:theme(colors.gray.500)]",
+        "[--input-border:theme(colors.sky.200)] dark:[--input-border:theme(colors.sky.700)]",
+        "[--input-focus-ring:theme(colors.sky.500)] dark:[--input-focus-ring:theme(colors.sky.400)]",
+        "[--input-ring-offset:theme(colors.white)] dark:[--input-ring-offset:theme(colors.gray.900)]",
+
+        // Cards
+        "[--card-bg:theme(colors.white)] dark:[--card-bg:theme(colors.gray.900)]",
+        "[--card-fg:theme(colors.gray.900)] dark:[--card-fg:theme(colors.gray.100)]",
+        "[--card-title-fg:theme(colors.gray.900)] dark:[--card-title-fg:theme(colors.gray.100)]",
+        "[--card-muted-fg:theme(colors.gray.500)] dark:[--card-muted-fg:theme(colors.gray.400)]",
+        "[--card-border:theme(colors.gray.200)] dark:[--card-border:theme(colors.gray.800)]",
+        "[--card-shadow:0_6px_20px_rgba(0,0,0,0.06)]",
+
+        // Badges/Chips
+        "[--badge-bg:theme(colors.sky.50)] dark:[--badge-bg:theme(colors.sky.950)]",
+        "[--badge-fg:theme(colors.sky.700)] dark:[--badge-fg:theme(colors.sky.300)]",
+        "[--badge-border:theme(colors.sky.200)] dark:[--badge-border:theme(colors.sky.800)]",
+        "[--badge-active-bg:theme(colors.sky.600)] dark:[--badge-active-bg:theme(colors.sky.500)]",
+        "[--badge-active-fg:theme(colors.white)] dark:[--badge-active-fg:theme(colors.white)]",
+        "[--badge-active-border:theme(colors.sky.700)] dark:[--badge-active-border:theme(colors.sky.400)]",
+
+        // Headings/Subheadings
+        "[--heading-fg:theme(colors.gray.900)] dark:[--heading-fg:theme(colors.gray.100)]",
+        "[--subheading-fg:theme(colors.gray.600)] dark:[--subheading-fg:theme(colors.gray.300)]",
+        "[--description-fg:theme(colors.gray.700)] dark:[--description-fg:theme(colors.gray.200)]",
+
+        // Hero background (optional)
+        "[--hero-bg:theme(colors.white)] dark:[--hero-bg:theme(colors.slate.950)]",
+
+        // Footer
+        "[--footer-bg:transparent] dark:[--footer-bg:transparent]",
+        "[--footer-fg:theme(colors.gray.800)] dark:[--footer-fg:theme(colors.gray.100)]",
+        "[--footer-heading-fg:theme(colors.gray.900)] dark:[--footer-heading-fg:theme(colors.gray.100)]",
+        "[--footer-link-fg:theme(colors.gray.700)] dark:[--footer-link-fg:theme(colors.gray.300)]",
+        "[--footer-link-hover-fg:theme(colors.sky.700)] dark:[--footer-link-hover-fg:theme(colors.sky.400)]",
+        "[--footer-link-hover-bg:theme(colors.sky.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.18_0.05_235)_20%,transparent)]",
+        "[--footer-muted-fg:theme(colors.gray.500)] dark:[--footer-muted-fg:theme(colors.gray.400)]",
+        "[--footer-border:theme(colors.gray.200)] dark:[--footer-border:theme(colors.gray.800)]",
+
+        // Table (optional)
+        "[--table-fg:inherit]",
+        "[--table-muted-fg:theme(colors.gray.500)] dark:[--table-muted-fg:theme(colors.gray.400)]",
+        "[--table-head-fg:theme(colors.gray.700)] dark:[--table-head-fg:theme(colors.gray.300)]",
+        "[--table-border:theme(colors.gray.200)] dark:[--table-border:theme(colors.gray.800)]",
+        "[--table-row-hover-bg:theme(colors.gray.50)] dark:[--table-row-hover-bg:theme(colors.gray.900)]",
+
+        // FAQ specific (optional overrides; fall back to --btn-* and --card-*)
+        "[--faq-btn-bg:var(--btn-bg)] dark:[--faq-btn-bg:var(--btn-bg)]",
+        "[--faq-btn-fg:var(--btn-fg)] dark:[--faq-btn-fg:var(--btn-fg)]",
+        "[--faq-btn-hover-bg:var(--btn-hover-bg)] dark:[--faq-btn-hover-bg:var(--btn-hover-bg)]",
+        "[--faq-btn-hover-fg:var(--btn-hover-fg)] dark:[--faq-btn-hover-fg:var(--btn-hover-fg)]",
+        "[--faq-answer-bg:var(--card-bg)] dark:[--faq-answer-bg:var(--card-bg)]",
+        "[--faq-answer-fg:var(--card-fg)] dark:[--faq-answer-fg:var(--card-fg)]",
+
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}