nextworks 0.0.1 → 0.1.0-alpha.0

package/dist/kits/blocks/app/templates/digitalagency/components/Team.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+import { Team as SharedTeam } from "@/components/sections/Team";
+
+export function Team() {
+  return (
+    <SharedTeam
+      section={{
+        className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-900",
+      }}
+      card={{ className: "dark:bg-gray-800" }}
+      heading={{
+        className:
+          "text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--heading-fg)]",
+      }}
+      subheading={{
+        className:
+          "text-xl md:text-2xl text-[var(--subheading-fg)] max-w-2xl mx-auto leading-relaxed",
+      }}
+      role={{
+        className:
+          "text-md font-semibold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
+      }}
+      ariaLabel="Team section"
+    />
+  );
+}

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

@@ -0,0 +1,65 @@
+"use client";
+
+import React from "react";
+import { Testimonials as SharedTestimonials } from "@/components/sections/Testimonials";
+
+export function Testimonials() {
+  return (
+    <section id="testimonials">
+      <SharedTestimonials
+        testimonialSectionHeader="What Our Customers Say"
+        section={{
+          className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-800",
+        }}
+        container={{ className: "max-w-7xl mx-auto px-6" }}
+        header={{ className: "text-center mb-12 md:mb-16" }}
+        heading={{
+          className:
+            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white",
+        }}
+        grid={{
+          className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8",
+        }}
+        card={{
+          className:
+            "bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md transition-transform duration-200 hover:-translate-y-1 border border-fuchsia-200/60 dark:border-fuchsia-800/40",
+        }}
+        text={{
+          className:
+            "text-gray-700 dark:text-gray-300 text-base leading-relaxed italic font-inter",
+        }}
+        author={{
+          className:
+            "text-gray-600 dark:text-gray-400 text-sm font-medium font-poppins",
+        }}
+        avatar={{
+          className:
+            "w-12 h-12 bg-fuchsia-600 text-white rounded-full flex items-center justify-center text-lg font-bold",
+        }}
+        avatarText={{
+          className: "text-white font-bold",
+        }}
+        testimonials={[
+          {
+            testimonialText:
+              "Nexus Digital transformed our online presence completely.",
+            testimonialAuthor: "- Sarah Chen, CEO of TechFlow",
+            testimonialAuthorInitials: "SC",
+          },
+          {
+            testimonialText: "The team delivered beyond expectations.",
+            testimonialAuthor: "- Marcus Rodriguez, GreenLeaf Wellness",
+            testimonialAuthorInitials: "MR",
+          },
+          {
+            testimonialText:
+              "Professional, fast, and results-driven. They understood our vision and brought it to life perfectly.",
+            testimonialAuthor: "- Jennifer Walsh, UrbanFit",
+            testimonialAuthorInitials: "JW",
+          },
+        ]}
+        ariaLabel="Testimonials section"
+      />
+    </section>
+  );
+}

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

@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+import { Navbar } from "./components/Navbar";
+import { Hero } from "./components/Hero";
+import { Services } from "./components/Services";
+import { Testimonials } from "./components/Testimonials";
+import { Process } from "./components/Process";
+import { Portfolio } from "./components/Portfolio";
+import { About } from "./components/About";
+import { Team } from "./components/Team";
+import { Pricing } from "./components/Pricing";
+import { CTA } from "./components/CTA";
+import { Contact } from "./components/Contact";
+import { Footer } from "./components/Footer";
+
+import { PresetThemeVars } from "./PresetThemeVars";
+
+export default function Page() {
+  return (
+    <PresetThemeVars>
+      <main>
+        <Navbar />
+        <Hero />
+        <Services />
+        <Portfolio />
+        <Testimonials />
+        <Process />
+        <About />
+        <Team />
+        <Pricing />
+        <CTA />
+        <Contact />
+        <Footer />
+      </main>
+    </PresetThemeVars>
+  );
+}

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

@@ -0,0 +1,85 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type Props = React.PropsWithChildren<{ className?: string }>;
+
+/**
+ * Gallery template token-bridge wrapper.
+ *
+ * Maps component-level CSS variables (btn, input, card, etc.) to the
+ * EnhancedThemeProvider token variables applied on :root (e.g., --primary,
+ * --foreground, --card, --ring). This preserves the original Gallery behavior:
+ * colors are driven by the selected Color Theme, not a fixed preset palette.
+ */
+export function PresetThemeVars({ className, children }: Props) {
+  return (
+    <div
+      className={cn(
+        // Buttons (leave bg/fg unset by default so tokenized variants can apply; set ring here)
+        "[--btn-ring:var(--ring)]",
+
+        // Inputs
+        "[--input-bg:var(--background)]",
+        "[--input-fg:var(--foreground)]",
+        "[--input-placeholder:var(--muted-foreground)]",
+        "[--input-border:var(--input)]",
+        "[--input-focus-ring:var(--ring)]",
+        "[--input-ring-offset:var(--background)]",
+
+        // Cards
+        "[--card-bg:var(--card)]",
+        "[--card-fg:var(--card-foreground)]",
+        "[--card-title-fg:var(--foreground)]",
+        "[--card-muted-fg:var(--muted-foreground)]",
+        "[--card-border:var(--border)]",
+        "[--card-shadow:0_6px_20px_rgba(0,0,0,0.06)]",
+
+        // Badges/Chips (align to accent; active uses primary)
+        "[--badge-bg:var(--accent)]",
+        "[--badge-fg:var(--accent-foreground)]",
+        "[--badge-border:var(--border)]",
+        "[--badge-active-bg:var(--primary)]",
+        "[--badge-active-fg:var(--primary-foreground)]",
+        "[--badge-active-border:var(--primary)]",
+
+        // Typography helpers
+        "[--heading-fg:var(--foreground)]",
+        "[--subheading-fg:var(--muted-foreground)]",
+        "[--description-fg:var(--foreground)]",
+
+        // Process timeline
+        "[--process-step-bg:var(--primary)]",
+        "[--process-step-fg:var(--primary-foreground)]",
+        "[--process-connector:var(--border)]",
+
+        // Footer
+        "[--footer-bg:transparent]",
+        "[--footer-fg:var(--foreground)]",
+        "[--footer-heading-fg:var(--foreground)]",
+        "[--footer-link-fg:var(--muted-foreground)]",
+        "[--footer-link-hover-fg:var(--primary)]",
+        "[--footer-link-hover-bg:color-mix(in oklab, var(--primary) 12%, transparent)]",
+        "[--footer-muted-fg:var(--muted-foreground)]",
+        "[--footer-border:var(--border)]",
+
+        // Table (optional)
+        "[--table-fg:inherit]",
+        "[--table-muted-fg:var(--muted-foreground)]",
+        "[--table-head-fg:var(--foreground)]",
+        "[--table-border:var(--border)]",
+        "[--table-row-hover-bg:var(--muted)]",
+
+        // Navbar
+        "[--navbar-toggle-bg:var(--background)]",
+        "[--navbar-hover-bg:color-mix(in oklab, var(--primary) 12%, transparent)]",
+        "[--navbar-ring:var(--ring)]",
+        "[--navbar-border:var(--border)]",
+        "[--navbar-accent:var(--foreground)]",
+
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,303 @@
+// - /app/templates/gallery/page.tsx
+
+"use client";
+
+import { About } from "@/components/sections/About";
+import { Contact } from "@/components/sections/Contact";
+import { CTA } from "@/components/sections/CTA";
+import { FAQ } from "@/components/sections/FAQ";
+import { Features } from "@/components/sections/Features";
+import { Footer } from "@/components/sections/Footer";
+import { HeroMotion } from "@/components/sections/HeroMotion";
+import { HeroOverlay } from "@/components/sections/HeroOverlay";
+import { HeroSplit } from "@/components/sections/HeroSplit";
+import { Navbar } from "@/components/sections/Navbar";
+import { Newsletter } from "@/components/sections/Newsletter";
+import { PortfolioSimple } from "@/components/sections/PortfolioSimple";
+import { Pricing } from "@/components/sections/Pricing";
+import { ProcessTimeline } from "@/components/sections/ProcessTimeline";
+import { ServicesGrid } from "@/components/sections/ServicesGrid";
+import { Team } from "@/components/sections/Team";
+import { Testimonials } from "@/components/sections/Testimonials";
+import { ThemeSelector } from "@/components/ui/theme-selector";
+import { TrustBadges } from "@/components/sections/TrustBadges";
+import { PresetThemeVars } from "./PresetThemeVars";
+
+export default function Gallery() {
+  const defaultFeaturesData = [
+    {
+      imageSrc: "/placeholders/gallery/pexels-googledeepmind-25626431.jpg",
+      imageAlt: "Advanced Analytics Dashboard",
+      headingText: "Advanced Analytics",
+      subheadingText:
+        "Get deep insights into your business performance with our comprehensive analytics dashboard that tracks key metrics and provides actionable recommendations.",
+    },
+    {
+      imageSrc: "/placeholders/gallery/pexels-googledeepmind-25626432.jpg",
+      imageAlt: "Real-time Collaboration Tools",
+      headingText: "Real-time Collaboration",
+      subheadingText:
+        "Work seamlessly with your team using our real-time collaboration tools that keep everyone in sync and boost productivity across all projects.",
+    },
+    {
+      imageSrc: "/placeholders/gallery/pexels-googledeepmind-25626434.jpg",
+      imageAlt: "Secure Data Management",
+      headingText: "Secure Data Management",
+      subheadingText:
+        "Protect your sensitive information with enterprise-grade security features including encryption, access controls, and compliance monitoring.",
+    },
+    {
+      imageSrc: "/placeholders/gallery/pexels-googledeepmind-25626436.jpg",
+      imageAlt: "Mobile-First Design",
+      headingText: "Mobile-First Design",
+      subheadingText:
+        "Access your data and manage your workflow from anywhere with our responsive, mobile-optimized interface that works perfectly on all devices.",
+    },
+  ];
+
+  const BrandNode = (
+    <>
+      <ThemeSelector ariaLabel="Demo: Color theme" label="" className="mr-2" />
+
+      {/* <ThemeSelector /> */}
+      <div className="flex h-7 w-7 items-center justify-center rounded-md bg-gradient-to-br from-zinc-900 via-zinc-700 to-zinc-500 text-xs font-bold text-white shadow-sm dark:from-zinc-100 dark:via-zinc-300 dark:to-zinc-500 dark:text-zinc-900">
+        NW
+      </div>
+    </>
+  );
+
+  return (
+    <PresetThemeVars>
+      <div className="component-gallery">
+        {/* Navigation */}
+        <Navbar
+          container={{ className: "max-w-7xl mx-auto" }}
+          mobileMenu={{
+            className: "border-t border-border md:block lg:hidden",
+          }}
+          desktopMenu={{
+            className:
+              "hidden md:hidden lg:flex items-center space-x-1 lg:space-x-0",
+          }}
+          id="site-navigation"
+          brand="Nextworks"
+          brandNode={BrandNode}
+          menuItems={[
+            { label: "Hero", href: "#hero-sections" },
+            { label: "Trust", href: "#trust" },
+            { label: "Features", href: "#features" },
+            { label: "About", href: "#about-process" },
+            { label: "Work", href: "#portfolio-team" },
+            { label: "Testimonials", href: "#testimonials" },
+            { label: "Pricing", href: "#pricing" },
+            { label: "FAQ", href: "#faq" },
+            { label: "CTA", href: "#cta" },
+            { label: "Contact", href: "#contact" },
+          ]}
+          links={{
+            className:
+              "text-base font-normal text-foreground hover:text-gray-500 dark:hover:text-gray-400 transition-colors",
+          }}
+          ctaButton={null}
+        />
+        {/* Hero Sections */}
+        <div id="hero-sections">
+          <HeroMotion
+            actions={{
+              className:
+                "mt-8 flex items-center justify-center gap-3 [--btn-ring:var(--ring)]",
+            }}
+            primaryButtonStyle={{
+              size: "lg",
+              variant: "default",
+              className:
+                "[--btn-bg:var(--primary)] [--btn-fg:var(--primary-foreground)] " +
+                "hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_88%,black)] " +
+                "hover:[--btn-hover-fg:var(--primary-foreground)]",
+            }}
+            secondaryButtonStyle={{
+              size: "lg",
+              variant: "outline",
+              className:
+                "border [&:where(button)]:border " +
+                "[--btn-bg:transparent] dark:[--btn-bg:transparent] " +
+                "[--btn-fg:var(--primary)] dark:[--btn-fg:var(--primary)] " +
+                "[--btn-border:var(--primary)] dark:[--btn-border:var(--primary)] " +
+                "hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_15%,transparent)] " +
+                "dark:hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_18%,transparent)] " +
+                "hover:[--btn-hover-fg:var(--primary)] dark:hover:[--btn-hover-fg:var(--primary)]",
+            }}
+            primaryCta={{ label: "Get Started", href: "#hero-sections" }}
+            secondaryCta={{ label: "See Demo", href: "#hero-sections" }}
+          />
+          <HeroOverlay
+            heading="Forecast The Next Move"
+            subheading="Predict demand, personalize journeys, and scale impact with AI-guided insights your team can use today."
+            cta1={{
+              label: "Try It Free",
+              href: "#hero-sections",
+              className:
+                "[--btn-bg:var(--primary)] [--btn-fg:var(--primary-foreground)] " +
+                "hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_88%,black)] " +
+                "hover:[--btn-hover-fg:var(--primary-foreground)]",
+            }}
+            cta2={{
+              label: "See Demo",
+              href: "#hero-sections",
+              // Outline CTA should be transparent bg, primary fg/border, with subtle hover bg
+              className:
+                "border [&:where(button)]:border " +
+                "[--btn-bg:transparent] dark:[--btn-bg:transparent] " +
+                "[--btn-fg:var(--primary)] dark:[--btn-fg:var(--primary)] " +
+                "[--btn-border:var(--primary)] dark:[--btn-border:var(--primary)] " +
+                "hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_15%,transparent)] " +
+                "dark:hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_18%,transparent)] " +
+                "hover:[--btn-hover-fg:var(--primary)] dark:hover:[--btn-hover-fg:var(--primary)]",
+            }}
+            // Set ring color on the CTA container so both buttons share it
+            ctaContainer={{
+              className:
+                "flex flex-col sm:flex-row gap-4 mt-6 justify-center items-center [--btn-ring:var(--ring)]",
+            }}
+            image={{
+              src: "/placeholders/gallery/hero-pexels-broken-9945014.avif",
+            }}
+          />
+          <HeroSplit
+            heading="Confident Decisions, On Demand"
+            subheading="Reliable data when you need it."
+            cta1={{
+              label: "Start Free Trial",
+              href: "#hero-sections",
+              className:
+                "[--btn-bg:var(--primary)] [--btn-fg:var(--primary-foreground)] " +
+                "hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_88%,black)] " +
+                "hover:[--btn-hover-fg:var(--primary-foreground)]",
+            }}
+            cta2={{
+              label: "View Sample Report",
+              href: "#hero-sections",
+              className:
+                "border [&:where(button)]:border " +
+                "[--btn-bg:transparent] dark:[--btn-bg:transparent] " +
+                "[--btn-fg:var(--primary)] dark:[--btn-fg:var(--primary)] " +
+                "[--btn-border:var(--primary)] dark:[--btn-border:var(--primary)] " +
+                "hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_15%,transparent)] " +
+                "dark:hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_18%,transparent)] " +
+                "hover:[--btn-hover-fg:var(--primary)] dark:hover:[--btn-hover-fg:var(--primary)]",
+            }}
+            buttonsContainer={{
+              className:
+                "flex flex-col md:flex-row gap-4 mt-6 [--btn-ring:var(--ring)]",
+            }}
+            image={{
+              src: "/placeholders/gallery/hero-pexels-broken-9945014.avif",
+            }}
+            imageLayout="full-bleed"
+          />
+          {/*  */}
+        </div>
+        {/* Trust & Social Proof */}
+        <div id="trust" className="scroll-mt-16">
+          <TrustBadges />
+        </div>
+        {/* Features & Services */}
+        <div id="features" className="scroll-mt-16">
+          <Features featuresData={defaultFeaturesData}></Features>
+          <ServicesGrid />
+        </div>
+        {/* About & Process */}
+        <div id="about-process" className="scroll-mt-16">
+          <About animateStats={false} />
+          <ProcessTimeline />
+        </div>
+        {/* Portfolio & Team */}
+        <div id="portfolio-team" className="scroll-mt-16">
+          <PortfolioSimple />
+          <Team />
+        </div>
+        {/* Testimonials */}
+        <div id="testimonials" className="scroll-mt-16">
+          <Testimonials />
+        </div>
+        {/* Pricing */}
+        <div id="pricing" className="scroll-mt-16">
+          <Pricing />
+        </div>
+        {/* FAQ */}
+        <div id="faq" className="scroll-mt-16">
+          <FAQ
+            questionButton={{
+              className:
+                // Distinct, theme-driven gradient tile + brand ring/border
+                "bg-gradient-to-r " +
+                "from-[var(--primary)] to-[color-mix(in_oklab,var(--primary)_88%,black)] " +
+                "hover:from-[color-mix(in_oklab,var(--primary)_92%,black)] " +
+                "hover:to-[color-mix(in_oklab,var(--primary)_95%,black)] " +
+                "text-[var(--primary-foreground)] p-5 cursor-pointer rounded-lg " +
+                "transition-all duration-200 flex items-center justify-between " +
+                "shadow-lg hover:shadow-xl hover:-translate-y-0.5 " +
+                // define ring/border vars and ensure a visible border if tokens apply
+                "[--btn-ring:var(--ring)] [--btn-border:var(--primary)] border [&:where(button)]:border",
+            }}
+            answer={{
+              className:
+                "bg-gradient-to-r " +
+                "from-[var(--secondary)] to-[color-mix(in_oklab,var(--secondary)_90%,white)] ",
+            }}
+          />
+        </div>
+        {/* Call to Action */}
+        <div id="cta" className="scroll-mt-16">
+          <CTA
+            ctaButton={{ label: "Sign Up Now", href: "#contact" }}
+            actionsWrapper={{
+              className:
+                "mt-6 flex flex-col items-center gap-3 sm:flex-row [--btn-ring:var(--ring)]",
+            }}
+            ctaButtonStyle={{
+              variant: "default",
+              size: "default",
+              className:
+                "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 " +
+                "[--btn-bg:var(--primary)] [--btn-fg:var(--primary-foreground)] " +
+                "hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_88%,black)] " +
+                "hover:[--btn-hover-fg:var(--primary-foreground)]",
+            }}
+          />
+        </div>
+        {/* Contact */}
+        <div id="contact" className="scroll-mt-16">
+          <Contact
+            submitButtonStyle={{
+              variant: "default",
+              size: "lg",
+              className:
+                "w-full shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 " +
+                // Match FAQ question button gradient + brand ring/border
+                "bg-gradient-to-r " +
+                "from-[var(--primary)] to-[color-mix(in_oklab,var(--primary)_88%,black)] " +
+                "hover:from-[color-mix(in_oklab,var(--primary)_92%,black)] " +
+                "hover:to-[color-mix(in_oklab,var(--primary)_95%,black)] " +
+                "text-[var(--primary-foreground)] " +
+                "[--btn-ring:var(--ring)] [--btn-border:var(--primary)] border [&:where(button)]:border",
+            }}
+          />
+        </div>
+        {/* Newsletter */}
+        <div id="newsletter" className="scroll-mt-16">
+          <Newsletter
+            button={{
+              className:
+                "!bg-[var(--primary)] hover:!bg-[color-mix(in_oklab,var(--primary)_90%,transparent)] !text-[var(--primary-foreground)] hover:!text-[var(--primary-background)]",
+            }}
+          />
+        </div>
+        {/* Footer */}
+        <div id="footer">
+          <Footer />
+        </div>
+      </div>
+    </PresetThemeVars>
+  );
+}

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

@@ -0,0 +1,74 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type Props = React.PropsWithChildren<{ className?: string }>;
+
+/**
+ * ProductLaunch template theme variables wrapper.
+ *
+ * Sets a small CSS variable contract consumed by shared components
+ * (Buttons, Inputs, Cards, Badges, Footer, Table, etc.).
+ *
+ * You can override any variable per-section by re-declaring it on
+ * that section/container.
+ */
+export function PresetThemeVars({ className, children }: Props) {
+  return (
+    <div
+      className={cn(
+        // Button ring shared across template
+        "[--btn-ring:theme(colors.purple.500)] dark:[--btn-ring:theme(colors.purple.400)]",
+
+        // Inputs (Contact)
+        "[--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.purple.200)] dark:[--input-border:theme(colors.purple.700)]",
+        "[--input-focus-ring:theme(colors.purple.500)] dark:[--input-focus-ring:theme(colors.purple.400)]",
+        "[--input-ring-offset:theme(colors.white)] dark:[--input-ring-offset:theme(colors.gray.900)]",
+
+        // Cards (Features, ServicesGrid, Pricing, Testimonials, etc.)
+        "[--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 (Portfolio filters/tags, Pricing badge, Testimonials avatar)
+        "[--badge-bg:theme(colors.purple.50)] dark:[--badge-bg:theme(colors.purple.950)]",
+        "[--badge-fg:theme(colors.purple.700)] dark:[--badge-fg:theme(colors.purple.300)]",
+        "[--badge-border:theme(colors.purple.200)] dark:[--badge-border:theme(colors.purple.800)]",
+        "[--badge-active-bg:theme(colors.purple.600)] dark:[--badge-active-bg:theme(colors.purple.500)]",
+        "[--badge-active-fg:theme(colors.white)] dark:[--badge-active-fg:theme(colors.white)]",
+        "[--badge-active-border:theme(colors.purple.700)] dark:[--badge-active-border:theme(colors.purple.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)]",
+
+        // 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.purple.700)] dark:[--footer-link-hover-fg:theme(colors.purple.400)]",
+        "[--footer-link-hover-bg:theme(colors.purple.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.17_0.05_324)_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)]",
+
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/dist/kits/blocks/app/templates/productlaunch/README.md

@@ -0,0 +1,55 @@
+# ProductLaunch Template Theming
+
+This template intentionally does NOT wrap the page with PresetThemeVars. It serves as the component-level styling example where individual preset components set CSS variables locally on their slots (buttons, cards, inputs, etc.).
+
+Shared components read these variables with token fallbacks, so if a var is not set, design tokens still apply safely.
+
+## Where to look
+
+- Page: `app/templates/productlaunch/page.tsx` (PresetThemeVars is commented out)
+- Components: `app/templates/productlaunch/components/*` (slots use Tailwind arbitrary properties like `[--btn-bg:...]` to set vars locally)
+
+## Core variables
+
+- Buttons: `--btn-bg`, `--btn-fg`, `--btn-hover-bg`, `--btn-hover-fg`, `--btn-border`, `--btn-ring`
+- Inputs/Textareas: `--input-bg`, `--input-fg`, `--input-placeholder`, `--input-border`, `--input-focus-ring`, `--input-ring-offset`
+- Cards: `--card-bg`, `--card-fg`, `--card-title-fg`, `--card-muted-fg`, `--card-border`, `--card-shadow`
+- Badges/Chips: `--badge-bg`, `--badge-fg`, `--badge-border`, plus active: `--badge-active-bg`, `--badge-active-fg`, `--badge-active-border`
+- Headings: `--heading-fg`, `--subheading-fg`, `--description-fg`
+- Footer: `--footer-bg`, `--footer-fg`, `--footer-heading-fg`, `--footer-link-fg`, `--footer-link-hover-fg`, `--footer-link-hover-bg`, `--footer-muted-fg`, `--footer-border`
+- Table: `--table-fg`, `--table-muted-fg`, `--table-head-fg`, `--table-border`, `--table-row-hover-bg`
+
+## Per-section overrides (examples)
+
+Because this template is component-first, most styling is set directly in the component props. You can still scope vars on a section wrapper when it’s convenient:
+
+```tsx
+<section className="[--btn-ring:theme(colors.purple.600)] dark:[--btn-ring:theme(colors.purple.500)]">
+  <CTA />
+</section>
+```
+
+Contact input borders example:
+
+```tsx
+<section className="[--input-border:theme(colors.purple.200)] dark:[--input-border:theme(colors.purple.700)]">
+  <Contact />
+</section>
+```
+
+## Outline buttons
+
+When styling outline buttons, set `--btn-bg:transparent` and keep a border width class (e.g., `border` or `border-2`).
+
+```tsx
+<Button
+  variant="outline"
+  className="border [--btn-bg:transparent] [--btn-border:theme(colors.purple.600)] [--btn-fg:theme(colors.purple.600)] hover:[--btn-hover-bg:theme(colors.purple.50)] hover:[--btn-hover-fg:theme(colors.purple.600)]"
+>
+  Outline
+</Button>
+```
+
+## Do I need to refactor preset components?
+
+Not required. This template is intentionally left as an example of component-level styling. Over time, you can still deduplicate color classes by relying on the shared var contract while keeping structure/spacing classes.