@nextworks/blocks-templates 0.2.0-alpha.6 → 0.2.0-alpha.8

package/dist/templates/digitalagency/components/Portfolio.jsx

@@ -0,0 +1,104 @@
+"use client";
+import React from "react";
+import { PortfolioSimple } from "@nextworks/blocks-sections";
+// Default portfolio data without images - Digital Marketing Agency focused
+const defaultProjects = [
+    {
+        id: 1,
+        title: "TechStartup Growth Campaign",
+        category: "Digital Marketing",
+        industry: "Technology",
+        result: "+300% Leads",
+        description: "Comprehensive digital marketing campaign that increased qualified leads by 300% through targeted SEO, social media marketing, and conversion optimization strategies.",
+        tags: ["SEO", "Social Media", "PPC", "Analytics"],
+        color: "blue",
+        url: "#",
+    },
+    {
+        id: 2,
+        title: "E-Commerce Brand Launch",
+        category: "Brand Marketing",
+        industry: "Retail",
+        result: "+250% Revenue",
+        description: "Complete brand launch and digital marketing strategy for a new e-commerce platform, resulting in 250% revenue growth within the first 6 months.",
+        tags: ["Brand Strategy", "Content Marketing", "Influencer", "Email"],
+        color: "green",
+        url: "#",
+    },
+    {
+        id: 3,
+        title: "Healthcare Practice Expansion",
+        category: "Local Marketing",
+        industry: "Healthcare",
+        result: "+180% Patients",
+        description: "Local SEO and digital marketing campaign that helped a healthcare practice expand to three new locations and increase patient acquisition by 180%.",
+        tags: ["Local SEO", "Google Ads", "Reputation", "Content"],
+        color: "purple",
+        url: "#",
+    },
+    {
+        id: 4,
+        title: "SaaS Product Launch",
+        category: "B2B Marketing",
+        industry: "Software",
+        result: "+400% Signups",
+        description: "Strategic B2B marketing campaign for a SaaS product launch, achieving 400% increase in trial signups through targeted content marketing and account-based marketing.",
+        tags: ["B2B Strategy", "Content", "LinkedIn Ads", "Webinars"],
+        color: "indigo",
+        url: "#",
+    },
+    {
+        id: 5,
+        title: "Restaurant Chain Rebrand",
+        category: "Brand Marketing",
+        industry: "Food & Beverage",
+        result: "+220% Foot Traffic",
+        description: "Complete rebrand and digital marketing transformation for a restaurant chain, resulting in 220% increase in foot traffic and 150% growth in online orders.",
+        tags: ["Rebranding", "Social Media", "Local SEO", "Delivery"],
+        color: "red",
+        url: "#",
+    },
+    {
+        id: 6,
+        title: "Fitness App User Acquisition",
+        category: "Mobile Marketing",
+        industry: "Health & Fitness",
+        result: "+500% Downloads",
+        description: "Mobile-first marketing campaign that achieved 500% increase in app downloads through app store optimization, influencer partnerships, and targeted social media advertising.",
+        tags: ["ASO", "Influencer", "Social Ads", "Retention"],
+        color: "yellow",
+        url: "#",
+    },
+];
+const defaultFilters = [
+    "All Projects",
+    "Digital Marketing",
+    "Brand Marketing",
+    "B2B Marketing",
+    "Local Marketing",
+    "Mobile Marketing",
+];
+// Portfolio Preset Component
+export function Portfolio() {
+    return (<section id="portfolio">
+      <PortfolioSimple enableMotion={true} projects={defaultProjects} filters={defaultFilters} sectionTitle="Our Portfolio" sectionSubtitle="Discover our successful projects that have transformed businesses across various industries with innovative digital solutions." ctaTitle="Ready to Start Your Project?" ctaDescription="Let's work together to create something amazing that drives real results for your business." section={{
+            className: "py-16 md:py-24 bg-background",
+        }} title={{
+            className: "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-[var(--heading-fg)]",
+        }} subtitle={{
+            className: "text-xl md:text-2xl font-inter text-[var(--subheading-fg)] max-w-2xl mx-auto leading-relaxed",
+        }} ctaTitleStyle={{
+            className: "text-2xl md:text-3xl font-bold text-[var(--heading-fg)]",
+        }} ctaDescriptionStyle={{
+            className: "text-lg md:text-xl text-[var(--subheading-fg)] max-w-md mx-auto",
+        }} tagStyle={{
+            className: "px-2 py-1 text-xs rounded-full border-[var(--badge-border)] text-[var(--badge-fg)] bg-[var(--badge-bg)]",
+        }} ctaSection={{
+            className: "space-y-6 text-center mt-16 pt-12 border-t border-[var(--footer-border)]",
+        }} cta1Label="Start Your Project" cta1Href="#contact" cta2Label="View All Projects" cta2Href="#portfolio" cta1Button={{
+            className: "h-10 px-6 flex items-center justify-center font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 [--btn-bg:theme(colors.fuchsia.600)] hover:[--btn-hover-bg:theme(colors.fuchsia.700)] [--btn-fg:theme(colors.white)] hover:[--btn-hover-fg:theme(colors.white)]",
+        }} cta2Button={{
+            className: "h-10 px-6 flex items-center justify-center font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 border-2 [--btn-bg:transparent] [--btn-fg:theme(colors.fuchsia.700)] [--btn-border:theme(colors.fuchsia.600)] hover:[--btn-hover-bg:theme(colors.fuchsia.600)] hover:[--btn-hover-fg:theme(colors.white)] dark:[--btn-fg:theme(colors.fuchsia.400)] dark:[--btn-border:theme(colors.fuchsia.500)] dark:hover:[--btn-hover-bg:theme(colors.fuchsia.500)] dark:hover:[--btn-hover-fg:theme(colors.white)]",
+        }} ariaLabel="Portfolio showcase section"/>
+    </section>);
+}

package/dist/templates/gallery/PresetThemeVars.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+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).
+ * Colors are driven by the selected Color Theme, not a fixed preset palette.
+ */
+export declare function PresetThemeVars({ className, children }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=PresetThemeVars.d.ts.map

package/dist/templates/gallery/PresetThemeVars.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * 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).
+ * Colors are driven by the selected Color Theme, not a fixed preset palette.
+ */
+export function PresetThemeVars({ className, children }) {
+    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/templates/gallery/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../src/templates/gallery/page.tsx"],"names":[],"mappings":"AA6BA,MAAM,CAAC,OAAO,UAAU,OAAO,gCAqR9B"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../src/templates/gallery/page.tsx"],"names":[],"mappings":"AA2BA,MAAM,CAAC,OAAO,UAAU,OAAO,gCAqR9B"}

package/dist/templates/gallery/page.jsx

@@ -0,0 +1,215 @@
+"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/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.map

@@ -1 +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"}
+{"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,sBAkEpB"}

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

@@ -0,0 +1,55 @@
+"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={{
+            className: "flex flex-col gap-12",
+        }} contentContainer={{
+            className: "max-w-4xl mx-auto",
+        }} contentStack={{
+            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.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.map

@@ -1 +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,sBAiEtB"}
+{"version":3,"file":"Contact.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/Contact.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwD1B,wBAAgB,OAAO,sBAiEtB"}

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

@@ -0,0 +1,91 @@
+"use client";
+import React from "react";
+import { Contact as SharedContact, } from "@nextworks/blocks-sections";
+/**
+ * A preset Contact component customized for the product launch page,
+ * using the shared Contact.tsx with predefined styles and content.
+ *
+ * Features:
+ * - "Get Started with IntelliOpAI" heading with custom typography
+ * - Purple-themed styling matching the brand
+ * - Custom form fields optimized for product launch
+ * - Responsive design with proper spacing
+ * - Dark mode support with consistent theming
+ * - Clean, modern design with hover effects
+ */
+const productLaunchContactFormData = [
+    {
+        id: "name",
+        label: "Your Full Name",
+        placeholder: "John Doe",
+        required: true,
+        type: "text",
+    },
+    {
+        id: "email",
+        label: "Email Address",
+        placeholder: "you@example.com",
+        required: true,
+        type: "email",
+    },
+    {
+        id: "company",
+        label: "Company Name",
+        placeholder: "Your Company",
+        required: false,
+        type: "text",
+    },
+    {
+        id: "phone",
+        label: "Phone Number",
+        placeholder: "+1 (555) 123-4567",
+        required: false,
+        type: "tel",
+    },
+    {
+        id: "message",
+        label: "Tell us about your project",
+        placeholder: "Describe your business needs and how we can help...",
+        required: true,
+        type: "textarea",
+    },
+];
+export function Contact() {
+    const handleFormSubmit = (e) => {
+        e.preventDefault();
+        const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+    };
+    return (<SharedContact id="contact" fields={productLaunchContactFormData} contactHeaderText="Get Started with IntelliOpAI" contactSubHeaderText="Ready to revolutionize your workflow? Get in touch with our team to learn how our AI solutions can transform your business operations and drive growth." 
+    // Root and layout
+    className="w-full" section={{
+            className: "py-16 px-4 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",
+        }} container={{
+            className: "mx-auto max-w-4xl",
+        }} 
+    // Header slots
+    headerWrapper={{ className: "mb-4 text-center" }} headerText={{
+            className: "text-2xl md:text-3xl lg:text-4xl font-bold font-outfit text-white dark:text-white",
+        }} subheaderText={{
+            className: "text-base md:text-lg text-white dark:text-gray-200 text-center mb-8 px-4 md:px-14 font-inter leading-relaxed",
+        }} 
+    // Form container
+    form={{
+            className: "bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg border border-purple-200 dark:border-purple-300",
+        }} 
+    // Fields wrapper and field item
+    fieldsWrapper={{ className: "space-y-6" }} field={{ className: "space-y-2" }} 
+    // Label + inputs
+    label={{
+            className: "text-gray-700 dark:text-white text-sm font-semibold block font-inter",
+        }} input={{
+            className: "w-full p-3 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-0 focus:border-transparent transition-all duration-200",
+        }} textarea={{
+            className: "w-full p-3 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-0 focus:border-transparent resize-vertical min-h-[120px] transition-all duration-200",
+        }} 
+    // Submit button (split: wrapper/style/text)
+    submitButtonWrapper={{ className: "pt-2" }} submitButtonStyle={{
+            variant: "default",
+            size: "lg",
+            className: "w-full font-semibold text-base shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-0 [--btn-bg:theme(colors.purple.600)] hover:[--btn-hover-bg:theme(colors.purple.700)] [--btn-fg:white] hover:[--btn-hover-fg:white] [--btn-border:transparent]",
+        }} submitButtonText="Start Your AI Journey" onSubmit={handleFormSubmit} ariaLabel="Get started with IntelliOpAI contact form"/>);
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Preset FAQ component for the product launch page.
+ */
+export declare function FAQ(): import("react").JSX.Element;
+//# sourceMappingURL=FAQ.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/FAQ.tsx"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,wBAAgB,GAAG,gCAgFlB"}
+{"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/FAQ.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,wBAAgB,GAAG,gCA2ElB"}