@nextworks/blocks-templates 0.1.0-alpha.0

package/dist/templates/gallery/page.jsx

@@ -0,0 +1,216 @@
+// - /app/templates/gallery/page.tsx
+"use client";
+import { About, Contact, CTA, FAQ, Features, Footer, HeroMotion, HeroOverlay, HeroSplit, Navbar, Newsletter, PortfolioSimple, Pricing, ProcessTimeline, ServicesGrid, Team, Testimonials, TrustBadges, } from "@nextworks/blocks-sections";
+import { ThemeSelector } from "@nextworks/blocks-core";
+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/templates/productlaunch/Page.d.ts

@@ -0,0 +1,2 @@
+export declare function ProductLaunchPage(): import("react").JSX.Element;
+//# sourceMappingURL=Page.d.ts.map

package/dist/templates/productlaunch/Page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/templates/productlaunch/Page.tsx"],"names":[],"mappings":"AAeA,wBAAgB,iBAAiB,gCA6BhC"}

package/dist/templates/productlaunch/Page.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 function ProductLaunchPage() {
+    return (
+    // <PresetThemeVars>
+    _jsxs(_Fragment, { children: [_jsx(Navbar, {}), _jsx("section", { id: "home", children: _jsx(Hero, {}) }), _jsx(TrustBadges, {}), _jsx(About, {}), _jsxs("section", { id: "features", children: [_jsx(Features, {}), _jsx(ProcessTimeline, {})] }), _jsx(Testimonials, {}), _jsx(CTA, {}), _jsx("section", { id: "pricing", children: _jsx(Pricing, {}) }), _jsx("section", { id: "faq", children: _jsx(FAQ, {}) }), _jsx("section", { id: "contact", children: _jsx(Contact, {}) }), _jsx(Footer, {})] })
+    // </PresetThemeVars>
+    );
+}

package/dist/templates/productlaunch/Page.jsx

@@ -0,0 +1,42 @@
+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 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/templates/productlaunch/PresetThemeVars.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+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 declare function PresetThemeVars({ className, children }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=PresetThemeVars.d.ts.map

package/dist/templates/productlaunch/PresetThemeVars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetThemeVars.d.ts","sourceRoot":"","sources":["../../../src/templates/productlaunch/PresetThemeVars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE7D;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,KAAK,qBA2D7D"}

package/dist/templates/productlaunch/PresetThemeVars.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * 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 }) {
+    return (_jsx("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: children }));
+}

package/dist/templates/productlaunch/PresetThemeVars.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * 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 }) {
+    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/templates/productlaunch/components/About.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+/**
+ * A preset About component customized for the product launch page,
+ * using the shared About.tsx with predefined styles and content.
+ *
+ * Features:
+ * - "About IntelliOpAI" heading with custom typography
+ * - Purple-themed styling matching the brand
+ * - Custom stats optimized for AI product launch
+ * - Responsive design with proper spacing
+ * - Dark mode support with consistent theming
+ * - Clean, modern design with hover effects
+ */
+export declare function About(): React.JSX.Element;
+//# sourceMappingURL=About.d.ts.map

package/dist/templates/productlaunch/components/About.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"About.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/About.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;;;;GAWG;AAEH,wBAAgB,KAAK,sBAoEpB"}

package/dist/templates/productlaunch/components/About.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { About as SharedAbout } from "@nextworks/blocks-sections";
+/**
+ * A preset About component customized for the product launch page,
+ * using the shared About.tsx with predefined styles and content.
+ *
+ * Features:
+ * - "About IntelliOpAI" heading with custom typography
+ * - Purple-themed styling matching the brand
+ * - Custom stats optimized for AI product launch
+ * - Responsive design with proper spacing
+ * - Dark mode support with consistent theming
+ * - Clean, modern design with hover effects
+ */
+export function About() {
+    return (_jsx(SharedAbout
+    // Content
+    , { 
+        // Content
+        aboutSubheadingText: "The Future of AI is Here", aboutHeadingText: "About IntelliOpAI", aboutContentText: "IntelliOpAI is pioneering the next generation of artificial intelligence solutions for modern businesses. Founded by AI researchers and industry disruptors, we're building intelligent systems that learn, adapt, and deliver results in real-time. Our breakthrough technology combines deep learning, natural language processing, and predictive analytics to create AI that actually works for your business.", aboutTextAlign: "center", 
+        // Stats
+        showStats: true, animateStats: true, aboutStats: [
+            { value: "10M", suffix: "+", label: "Data Points Processed" },
+            { value: "99.7", suffix: "%", label: "AI Accuracy Rate" },
+            { value: "500", suffix: "+", label: "Early Adopters" },
+            { value: "24", suffix: "/7", label: "AI Innovation" },
+        ], 
+        // Slots / styling
+        section: {
+            className: "py-20 bg-white dark:bg-black text-gray-800 dark:text-white",
+        }, container: {
+            className: "max-w-7xl mx-auto px-6",
+        }, inner: {
+            // New slot styled for this preset
+            className: "flex flex-col gap-12",
+        }, contentContainer: {
+            className: "max-w-4xl mx-auto",
+        }, contentStack: {
+            // New slot styled for this preset
+            className: "flex flex-col gap-6",
+        }, subheading: {
+            className: "text-sm font-semibold text-purple-600 dark:text-purple-400 uppercase tracking-wider font-inter",
+        }, heading: {
+            className: "text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 dark:text-white leading-tight font-outfit",
+        }, content: {
+            className: "text-base md:text-lg text-gray-700 dark:text-gray-200 leading-relaxed opacity-90 max-w-3xl font-inter",
+        }, statsSection: {
+            className: "bg-gradient-to-r from-purple-50 via-white to-purple-50 dark:from-purple-900/20 dark:via-gray-800 dark:to-purple-900/20 p-8 md:p-12 rounded-2xl shadow-xl mx-auto max-w-5xl w-full border border-purple-200 dark:border-purple-800",
+        }, statsGrid: {
+            className: "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 justify-items-center",
+        }, statItem: {
+            className: "flex flex-col items-center gap-3",
+        }, statNumber: {
+            className: "text-2xl md:text-3xl lg:text-4xl font-bold text-purple-600 dark:text-purple-400 leading-none font-outfit",
+        }, statLabel: {
+            className: "text-sm md:text-base font-medium text-gray-700 dark:text-gray-300 text-center opacity-90 font-inter",
+        } }));
+}

package/dist/templates/productlaunch/components/About.jsx

@@ -0,0 +1,57 @@
+"use client";
+import React from "react";
+import { About as SharedAbout } from "@nextworks/blocks-sections";
+/**
+ * A preset About component customized for the product launch page,
+ * using the shared About.tsx with predefined styles and content.
+ *
+ * Features:
+ * - "About IntelliOpAI" heading with custom typography
+ * - Purple-themed styling matching the brand
+ * - Custom stats optimized for AI product launch
+ * - Responsive design with proper spacing
+ * - Dark mode support with consistent theming
+ * - Clean, modern design with hover effects
+ */
+export function About() {
+    return (<SharedAbout 
+    // Content
+    aboutSubheadingText="The Future of AI is Here" aboutHeadingText="About IntelliOpAI" aboutContentText="IntelliOpAI is pioneering the next generation of artificial intelligence solutions for modern businesses. Founded by AI researchers and industry disruptors, we're building intelligent systems that learn, adapt, and deliver results in real-time. Our breakthrough technology combines deep learning, natural language processing, and predictive analytics to create AI that actually works for your business." aboutTextAlign="center" 
+    // Stats
+    showStats={true} animateStats={true} aboutStats={[
+            { value: "10M", suffix: "+", label: "Data Points Processed" },
+            { value: "99.7", suffix: "%", label: "AI Accuracy Rate" },
+            { value: "500", suffix: "+", label: "Early Adopters" },
+            { value: "24", suffix: "/7", label: "AI Innovation" },
+        ]} 
+    // Slots / styling
+    section={{
+            className: "py-20 bg-white dark:bg-black text-gray-800 dark:text-white",
+        }} container={{
+            className: "max-w-7xl mx-auto px-6",
+        }} inner={{
+            // New slot styled for this preset
+            className: "flex flex-col gap-12",
+        }} contentContainer={{
+            className: "max-w-4xl mx-auto",
+        }} contentStack={{
+            // New slot styled for this preset
+            className: "flex flex-col gap-6",
+        }} subheading={{
+            className: "text-sm font-semibold text-purple-600 dark:text-purple-400 uppercase tracking-wider font-inter",
+        }} heading={{
+            className: "text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 dark:text-white leading-tight font-outfit",
+        }} content={{
+            className: "text-base md:text-lg text-gray-700 dark:text-gray-200 leading-relaxed opacity-90 max-w-3xl font-inter",
+        }} statsSection={{
+            className: "bg-gradient-to-r from-purple-50 via-white to-purple-50 dark:from-purple-900/20 dark:via-gray-800 dark:to-purple-900/20 p-8 md:p-12 rounded-2xl shadow-xl mx-auto max-w-5xl w-full border border-purple-200 dark:border-purple-800",
+        }} statsGrid={{
+            className: "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 justify-items-center",
+        }} statItem={{
+            className: "flex flex-col items-center gap-3",
+        }} statNumber={{
+            className: "text-2xl md:text-3xl lg:text-4xl font-bold text-purple-600 dark:text-purple-400 leading-none font-outfit",
+        }} statLabel={{
+            className: "text-sm md:text-base font-medium text-gray-700 dark:text-gray-300 text-center opacity-90 font-inter",
+        }}/>);
+}

package/dist/templates/productlaunch/components/CTA.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function CTA(): React.JSX.Element;
+//# sourceMappingURL=CTA.d.ts.map

package/dist/templates/productlaunch/components/CTA.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTA.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/CTA.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,GAAG,sBA6ClB"}

package/dist/templates/productlaunch/components/CTA.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CTA as SharedCTA } from "@nextworks/blocks-sections";
+export function CTA() {
+    return (_jsx(SharedCTA
+    // Background and theme colors live on the section slot
+    , { 
+        // Background and theme colors live on the section slot
+        section: {
+            className: "bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 dark:from-purple-500 dark:via-purple-600 dark:to-purple-700 [--heading-fg:white] [--subheading-fg:rgba(255,255,255,0.85)] [--description-fg:rgba(255,255,255,0.8)]",
+        }, 
+        // Layout, height, and centering are controlled by the container slot
+        container: {
+            className: "flex h-[45.5vh] w-full flex-col items-center overflow-hidden",
+        }, 
+        // Heading mapped to the new headingText slot
+        headingText: {
+            text: "Join The Launch Today!",
+            className: "text-xl md:text-2xl lg:text-3xl font-bold leading-tight text-white dark:text-white font-outfit",
+        }, 
+        // Use actionsWrapper for spacing instead of margin on the button
+        actionsWrapper: {
+            className: "mt-4 [--btn-ring:rgba(124,58,237,0.35)] dark:[--btn-ring:rgba(124,58,237,0.45)]",
+        }, 
+        // Primary CTA mapped to ctaButton + ctaButtonStyle
+        ctaButton: { label: "Sign Up Now", href: "#contact" }, ctaButtonStyle: {
+            variant: "secondary",
+            size: "lg",
+            className: "text-base md:text-lg font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border-0 [--btn-bg:white] dark:[--btn-bg:white] [--btn-hover-bg:#f3f4f6] dark:[--btn-hover-bg:#e5e7eb] [--btn-fg:#7c3aed] dark:[--btn-fg:#7c3aed] hover:[--btn-hover-fg:#6d28d9] dark:hover:[--btn-hover-fg:#6d28d9] [--btn-border:transparent]",
+        }, 
+        // Secondary CTA using outline style
+        secondaryButton: { label: "Learn More", href: "#features" }, secondaryButtonStyle: {
+            variant: "outline",
+            size: "lg",
+            className: "text-base md:text-lg font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border [--btn-bg:transparent] dark:[--btn-bg:transparent] [--btn-fg:white] [--btn-border:rgba(255,255,255,0.9)] dark:[--btn-border:rgba(255,255,255,0.85)] hover:[--btn-hover-bg:white] hover:[--btn-hover-fg:#7c3aed]",
+        }, 
+        // Preserve the previous top margin on the heading
+        spacing: { topMargin: "mt-[17vh]" }, ariaLabel: "Join the product launch call to action" }));
+}

package/dist/templates/productlaunch/components/CTA.jsx

@@ -0,0 +1,37 @@
+"use client";
+import React from "react";
+import { CTA as SharedCTA } from "@nextworks/blocks-sections";
+export function CTA() {
+    return (<SharedCTA 
+    // Background and theme colors live on the section slot
+    section={{
+            className: "bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 dark:from-purple-500 dark:via-purple-600 dark:to-purple-700 [--heading-fg:white] [--subheading-fg:rgba(255,255,255,0.85)] [--description-fg:rgba(255,255,255,0.8)]",
+        }} 
+    // Layout, height, and centering are controlled by the container slot
+    container={{
+            className: "flex h-[45.5vh] w-full flex-col items-center overflow-hidden",
+        }} 
+    // Heading mapped to the new headingText slot
+    headingText={{
+            text: "Join The Launch Today!",
+            className: "text-xl md:text-2xl lg:text-3xl font-bold leading-tight text-white dark:text-white font-outfit",
+        }} 
+    // Use actionsWrapper for spacing instead of margin on the button
+    actionsWrapper={{
+            className: "mt-4 [--btn-ring:rgba(124,58,237,0.35)] dark:[--btn-ring:rgba(124,58,237,0.45)]",
+        }} 
+    // Primary CTA mapped to ctaButton + ctaButtonStyle
+    ctaButton={{ label: "Sign Up Now", href: "#contact" }} ctaButtonStyle={{
+            variant: "secondary",
+            size: "lg",
+            className: "text-base md:text-lg font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border-0 [--btn-bg:white] dark:[--btn-bg:white] [--btn-hover-bg:#f3f4f6] dark:[--btn-hover-bg:#e5e7eb] [--btn-fg:#7c3aed] dark:[--btn-fg:#7c3aed] hover:[--btn-hover-fg:#6d28d9] dark:hover:[--btn-hover-fg:#6d28d9] [--btn-border:transparent]",
+        }} 
+    // Secondary CTA using outline style
+    secondaryButton={{ label: "Learn More", href: "#features" }} secondaryButtonStyle={{
+            variant: "outline",
+            size: "lg",
+            className: "text-base md:text-lg font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border [--btn-bg:transparent] dark:[--btn-bg:transparent] [--btn-fg:white] [--btn-border:rgba(255,255,255,0.9)] dark:[--btn-border:rgba(255,255,255,0.85)] hover:[--btn-hover-bg:white] hover:[--btn-hover-fg:#7c3aed]",
+        }} 
+    // Preserve the previous top margin on the heading
+    spacing={{ topMargin: "mt-[17vh]" }} ariaLabel="Join the product launch call to action"/>);
+}

package/dist/templates/productlaunch/components/Contact.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function Contact(): React.JSX.Element;
+//# sourceMappingURL=Contact.d.ts.map

package/dist/templates/productlaunch/components/Contact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Contact.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/Contact.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwD1B,wBAAgB,OAAO,sBAkEtB"}