@nextworks/blocks-templates 0.2.0-alpha.12 → 0.2.0-alpha.14

package/README.md

@@ -7,8 +7,11 @@ Included templates (subject to change):
 - Product launch
 - SaaS dashboard
 - Digital agency
+- AI workflow
 - Gallery
 
+The current **AI Workflow** template ships with an **AI coding agent** story, but it is intended to be adapted for other AI workflow/product stories over time.
+
 ## Recommended: install via the nextworks CLI
 
 Most developers should install Blocks via the **nextworks** CLI (copy-in / shadcn-style) rather than consuming this package directly.

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

@@ -1,7 +1,2 @@
-import React from "react";
-type Props = React.PropsWithChildren<{
-    className?: string;
-}>;
-export declare function PresetThemeVars({ className, children }: Props): React.JSX.Element;
-export {};
+export { PresetThemeVars } from "./themes/default";
 //# sourceMappingURL=PresetThemeVars.d.ts.map

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

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

package/dist/templates/aiworkflow/PresetThemeVars.jsx

@@ -1,9 +1,3 @@
 // AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
 // Do not edit this file directly. Edit the kit source instead.
-import React from "react";
-import { cn } from "@nextworks/blocks-core";
-export function PresetThemeVars({ className, children }) {
-    return (<div className={cn("[--btn-ring:theme(colors.cyan.500)] dark:[--btn-ring:theme(colors.cyan.400)]", "[--input-bg:theme(colors.white)] dark:[--input-bg:theme(colors.slate.950)]", "[--input-fg:theme(colors.slate.900)] dark:[--input-fg:theme(colors.slate.100)]", "[--input-placeholder:theme(colors.slate.400)] dark:[--input-placeholder:theme(colors.slate.500)]", "[--input-border:theme(colors.cyan.200)] dark:[--input-border:theme(colors.cyan.900)]", "[--input-focus-ring:theme(colors.cyan.500)] dark:[--input-focus-ring:theme(colors.cyan.400)]", "[--input-ring-offset:theme(colors.white)] dark:[--input-ring-offset:theme(colors.slate.950)]", "[--card-bg:theme(colors.white)] dark:[--card-bg:theme(colors.slate.900)]", "[--card-fg:theme(colors.slate.900)] dark:[--card-fg:theme(colors.slate.100)]", "[--card-title-fg:theme(colors.slate.950)] dark:[--card-title-fg:theme(colors.white)]", "[--card-muted-fg:theme(colors.slate.600)] dark:[--card-muted-fg:theme(colors.slate.300)]", "[--card-border:theme(colors.slate.200)] dark:[--card-border:theme(colors.slate.800)]", "[--card-shadow:0_10px_30px_rgba(8,15,30,0.08)]", "[--badge-bg:theme(colors.cyan.50)] dark:[--badge-bg:theme(colors.cyan.950)]", "[--badge-fg:theme(colors.cyan.700)] dark:[--badge-fg:theme(colors.cyan.200)]", "[--badge-border:theme(colors.cyan.200)] dark:[--badge-border:theme(colors.cyan.800)]", "[--badge-active-bg:theme(colors.cyan.500)] dark:[--badge-active-bg:theme(colors.cyan.500)]", "[--badge-active-fg:theme(colors.slate.950)] dark:[--badge-active-fg:theme(colors.slate.950)]", "[--badge-active-border:theme(colors.cyan.600)] dark:[--badge-active-border:theme(colors.cyan.400)]", "[--heading-fg:theme(colors.slate.950)] dark:[--heading-fg:theme(colors.white)]", "[--subheading-fg:theme(colors.slate.600)] dark:[--subheading-fg:theme(colors.slate.300)]", "[--description-fg:theme(colors.slate.700)] dark:[--description-fg:theme(colors.slate.200)]", "[--footer-bg:transparent] dark:[--footer-bg:transparent]", "[--footer-fg:theme(colors.slate.800)] dark:[--footer-fg:theme(colors.slate.100)]", "[--footer-heading-fg:theme(colors.slate.950)] dark:[--footer-heading-fg:theme(colors.white)]", "[--footer-link-fg:theme(colors.slate.700)] dark:[--footer-link-fg:theme(colors.slate.300)]", "[--footer-link-hover-fg:theme(colors.cyan.700)] dark:[--footer-link-hover-fg:theme(colors.cyan.300)]", "[--footer-link-hover-bg:theme(colors.cyan.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.25_0.06_230)_24%,transparent)]", "[--footer-muted-fg:theme(colors.slate.500)] dark:[--footer-muted-fg:theme(colors.slate.400)]", "[--footer-border:theme(colors.slate.200)] dark:[--footer-border:theme(colors.slate.800)]", "[--table-fg:inherit]", "[--table-muted-fg:theme(colors.slate.500)] dark:[--table-muted-fg:theme(colors.slate.400)]", "[--table-head-fg:theme(colors.slate.700)] dark:[--table-head-fg:theme(colors.slate.300)]", "[--table-border:theme(colors.slate.200)] dark:[--table-border:theme(colors.slate.800)]", "[--table-row-hover-bg:theme(colors.slate.50)] dark:[--table-row-hover-bg:theme(colors.slate.900)]", className)}>
-      {children}
-    </div>);
-}
+export { PresetThemeVars } from "./themes/default";

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

@@ -4,22 +4,22 @@
 import { CTA as SharedCTA } from "@nextworks/blocks-sections";
 export function CTA() {
     return (<SharedCTA section={{
-            className: "bg-[linear-gradient(135deg,theme(colors.slate.950)_0%,theme(colors.cyan.950)_55%,theme(colors.violet.950)_100%)] [--heading-fg:white] [--subheading-fg:rgba(255,255,255,0.82)] [--description-fg:rgba(255,255,255,0.78)]",
+            className: "bg-[var(--cta-section-bg)] px-6 py-16 [--cta-heading-fg:theme(colors.slate.950)] dark:[--cta-heading-fg:theme(colors.white)] [--cta-subheading-fg:theme(colors.slate.600)] dark:[--cta-subheading-fg:rgba(255,255,255,0.82)] [--cta-description-fg:theme(colors.slate.700)] dark:[--cta-description-fg:rgba(255,255,255,0.74)]",
         }} container={{
             className: "flex min-h-[22rem] w-full flex-col items-center justify-center px-6 py-16 text-center",
         }} headingText={{
-            text: "Automate the work between your tools, teams, and approvals.",
-            className: "font-outfit text-3xl font-semibold leading-tight text-white md:text-4xl lg:text-5xl",
+            text: "Ship code changes with an agent in the loop.",
+            className: "font-outfit text-3xl font-semibold leading-tight text-[var(--cta-heading-fg)] md:text-4xl lg:text-5xl",
         }} subheadingText={{
-            text: "See how an AI workflow automation layer can turn requests into governed execution without losing visibility.",
-            className: "mx-auto mt-4 max-w-2xl font-inter text-base leading-7 text-white/80 md:text-lg",
-        }} actionsWrapper={{ className: "mt-8 flex flex-col gap-3 sm:flex-row" }} ctaButton={{ label: "Book a workflow demo", href: "#contact" }} ctaButtonStyle={{
+            text: "Move from issue to patch to preview without leaving one workspace.",
+            className: "mx-auto mt-4 max-w-2xl font-inter text-base leading-7 text-[var(--cta-subheading-fg)] md:text-lg",
+        }} actionsWrapper={{ className: "mt-8 flex flex-col gap-3 sm:flex-row" }} ctaButton={{ label: "Book a coding demo", href: "#contact" }} ctaButtonStyle={{
             variant: "default",
             size: "lg",
-            className: "font-inter font-semibold [--btn-bg:theme(colors.cyan.400)] [--btn-fg:theme(colors.slate.950)] [--btn-border:transparent] hover:[--btn-hover-bg:theme(colors.cyan.300)] hover:[--btn-hover-fg:theme(colors.slate.950)]",
+            className: "font-inter font-semibold [--btn-bg:var(--cta-primary-bg)] [--btn-fg:var(--cta-primary-fg)] [--btn-border:var(--cta-primary-border)] hover:[--btn-hover-bg:var(--cta-primary-hover-bg)] hover:[--btn-hover-fg:var(--cta-primary-hover-fg)]",
         }} secondaryButton={{ label: "Review pricing", href: "#pricing" }} secondaryButtonStyle={{
             variant: "outline",
             size: "lg",
-            className: "border [--btn-bg:transparent] [--btn-fg:white] [--btn-border:rgba(255,255,255,0.55)] hover:[--btn-hover-bg:rgba(255,255,255,0.08)] hover:[--btn-hover-fg:white]",
-        }} ariaLabel="AI workflow call to action"/>);
+            className: "border [--btn-bg:var(--cta-secondary-bg)] [--btn-fg:var(--cta-secondary-fg)] [--btn-border:var(--cta-secondary-border)] hover:[--btn-hover-bg:var(--cta-secondary-hover-bg)] hover:[--btn-hover-fg:var(--cta-secondary-hover-fg)]",
+        }} ariaLabel="AI coding agent call to action"/>);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Contact.d.ts","sourceRoot":"","sources":["../../../../src/templates/aiworkflow/components/Contact.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6C1B,wBAAgB,OAAO,sBAyDtB"}
+{"version":3,"file":"Contact.d.ts","sourceRoot":"","sources":["../../../../src/templates/aiworkflow/components/Contact.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6C1B,wBAAgB,OAAO,sBAwDtB"}

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

@@ -7,35 +7,35 @@ const contactFields = [
     {
         id: "name",
         label: "Full name",
-        placeholder: "Jordan Lee",
+        placeholder: "Avery Chen",
         required: true,
         type: "text",
     },
     {
         id: "email",
         label: "Work email",
-        placeholder: "jordan@company.com",
+        placeholder: "avery@company.com",
         required: true,
         type: "email",
     },
     {
         id: "company",
         label: "Company",
-        placeholder: "Acme Inc.",
+        placeholder: "Northstar Labs",
         required: true,
         type: "text",
     },
     {
         id: "workflow",
         label: "Workflow to automate",
-        placeholder: "Approvals, onboarding, launches, support escalations…",
+        placeholder: "Bug fixes, refactors, releases, or repo cleanup…",
         required: true,
         type: "text",
     },
     {
         id: "message",
         label: "What should the workflow coordinate?",
-        placeholder: "Tell us which systems, approvals, or handoffs are slowing the team down.",
+        placeholder: "Tell us which files, checks, or handoffs are slowing the team down.",
         required: true,
         type: "textarea",
     },
@@ -45,10 +45,10 @@ export function Contact() {
         e.preventDefault();
         const data = Object.fromEntries(new FormData(e.currentTarget).entries());
     };
-    return (<SharedContact id="contact" ariaLabel="AI workflow contact section" fields={contactFields} contactHeaderText="Bring your messiest workflow." contactSubHeaderText="We’ll map the approvals, systems, and execution steps that AI can automate first." className="w-full" section={{
-            className: "bg-[linear-gradient(180deg,rgba(241,245,249,1)_0%,rgba(224,242,254,0.55)_100%)] px-6 py-16 dark:bg-[linear-gradient(180deg,rgba(2,6,23,1)_0%,rgba(8,47,73,0.45)_100%)]",
+    return (<SharedContact id="contact" ariaLabel="AI coding agent contact section" fields={contactFields} contactHeaderText="Bring your messiest codebase issue." contactSubHeaderText="We’ll map the reads, edits, checks, and reviews the agent should handle first." className="w-full" section={{
+            className: "bg-[var(--contact-section-bg)] px-6 py-16",
         }} container={{ className: "mx-auto max-w-4xl" }} headerWrapper={{ className: "mb-8 text-center" }} headerText={{
-            className: "font-outfit text-3xl font-semibold text-[var(--heading-fg)] md:text-4xl",
+            className: "font-outfit text-3xl font-semibold !text-[var(--heading-fg)] md:text-4xl",
         }} subheaderText={{
             className: "mx-auto mt-3 max-w-2xl font-inter text-base leading-7 text-[var(--subheading-fg)]",
         }} form={{
@@ -62,6 +62,6 @@ export function Contact() {
         }} submitButtonWrapper={{ className: "pt-2" }} submitButtonStyle={{
             variant: "default",
             size: "lg",
-            className: "w-full font-inter font-semibold [--btn-bg:theme(colors.cyan.500)] [--btn-fg:theme(colors.slate.950)] [--btn-border:transparent] hover:[--btn-hover-bg:theme(colors.cyan.400)] hover:[--btn-hover-fg:theme(colors.slate.950)]",
-        }} submitButtonText="Request a demo" onSubmit={handleFormSubmit}/>);
+            className: "w-full font-inter font-semibold [--btn-bg:var(--contact-submit-bg)] [--btn-fg:var(--contact-submit-fg)] [--btn-border:var(--contact-submit-border)] hover:[--btn-hover-bg:var(--contact-submit-hover-bg)] hover:[--btn-hover-fg:var(--contact-submit-hover-fg)]",
+        }} submitButtonText="Book an agent demo" onSubmit={handleFormSubmit}/>);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../../../src/templates/aiworkflow/components/FAQ.tsx"],"names":[],"mappings":"AAOA,wBAAgB,GAAG,gCA0DlB"}
+{"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../../../src/templates/aiworkflow/components/FAQ.tsx"],"names":[],"mappings":"AAOA,wBAAgB,GAAG,gCA6DlB"}

package/dist/templates/aiworkflow/components/FAQ.jsx

@@ -5,36 +5,36 @@ import { FAQ as SharedFAQ } from "@nextworks/blocks-sections";
 export function FAQ() {
     return (<SharedFAQ faqSectionHeaderText="Frequently asked questions" faqData={[
             {
-                question: "What kinds of workflows can I automate?",
-                answer: "Teams use FlowPilot AI for intake routing, approvals, CRM and ticket updates, launch coordination, support escalations, and other repeatable cross-tool processes.",
+                question: "What kinds of coding tasks can the agent handle?",
+                answer: "Teams use FlowPilot AI for bug fixes, refactors, routine maintenance, release prep, and other repeatable code changes.",
             },
             {
-                question: "How do approvals work?",
-                answer: "You define thresholds and policy rules once. The workflow requests human approval only when conditions match, while lower-risk steps continue automatically.",
+                question: "How do reviews and approvals work?",
+                answer: "You define the rules once. The agent keeps moving on low-risk work and pauses only when a review or approval is required.",
             },
             {
-                question: "Can AI use our internal documentation and policies?",
-                answer: "Yes. The knowledge layer can reference playbooks, policies, runbooks, and other connected sources so actions stay grounded in current context.",
+                question: "Can the agent use our codebase and docs?",
+                answer: "Yes. It can read repo files, docs, and internal notes so changes stay grounded in current project context.",
             },
             {
-                question: "Will we be able to audit every action?",
-                answer: "Yes. Each workflow run records decisions, approvals, tool updates, and execution logs so teams can trace what happened and why.",
+                question: "Will we be able to audit every change?",
+                answer: "Yes. Each run records reads, edits, approvals, and output so teams can trace what changed and why.",
             },
             {
                 question: "Do we need engineering support to start?",
-                answer: "Most teams start with business-owned workflows using existing integrations and preset patterns. Engineering can extend the system later when needed.",
+                answer: "Most teams start with a few high-signal tasks, then expand the agent into more of the codebase as confidence grows.",
             },
             {
                 question: "Which tools can it connect to?",
-                answer: "The template story assumes common systems such as Slack, CRM platforms, ticketing tools, docs, and project trackers, with more connectors added as needed.",
+                answer: "The template story assumes common tools like GitHub, docs, issue trackers, CI, and chat, with more connectors added as needed.",
             },
-        ]} section={{ className: "bg-background px-5 py-16" }} container={{ className: "max-w-6xl mx-auto" }} heading={{
+        ]} section={{
+            className: "bg-[linear-gradient(180deg,#eef3f8_0%,#f6f8fb_48%,#eef3f8_100%)] px-5 py-16 dark:bg-[linear-gradient(180deg,#171717_0%,#121212_18%,#1d1d1d_46%,#131313_76%,#1b1b1b_100%)]",
+        }} container={{ className: "mx-auto max-w-6xl" }} heading={{
             className: "mb-8 text-center font-outfit text-3xl font-semibold text-[var(--heading-fg)] md:text-4xl",
-        }} grid={{ className: "grid grid-cols-1 gap-5 lg:grid-cols-2" }} item={{ className: "mb-0 w-full" }} questionButton={{
-            className: "flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 bg-white p-5 font-inter font-semibold text-slate-900 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-cyan-300 hover:bg-cyan-50 dark:border-slate-800 dark:bg-slate-900 dark:text-white dark:hover:border-cyan-700 dark:hover:bg-cyan-950/40",
-        }} answer={{
-            className: "overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] text-[var(--card-fg)] shadow-sm",
-        }} answerText={{
-            className: "font-inter text-sm leading-7 text-[var(--card-fg)]",
-        }} ariaLabel="AI workflow frequently asked questions"/>);
+        }} grid={{ className: "grid grid-cols-1 gap-5 lg:grid-cols-2" }} item={{ className: "w-full" }} questionButton={{
+            className: "flex cursor-pointer items-center justify-between rounded-xl border border-[var(--card-border)] bg-[var(--faq-btn-bg)] p-5 font-inter font-semibold text-[var(--faq-btn-fg)] shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-[var(--faq-btn-hover-bg)] hover:text-[var(--faq-btn-hover-fg)] [--btn-border:var(--card-border)]",
+        }} questionText={{ className: "font-inter text-base" }} answer={{
+            className: "overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--faq-answer-bg)] text-[var(--faq-answer-fg)] shadow-sm",
+        }} answerText={{ className: "font-inter text-sm leading-7" }} allowMultipleOpen={true} ariaLabel="AI coding agent frequently asked questions"/>);
 }

package/dist/templates/aiworkflow/components/FeatureMockups.d.ts

@@ -0,0 +1,5 @@
+export declare function TaskToCodeMockup(): import("react").JSX.Element;
+export declare function TranscriptDiffMockup(): import("react").JSX.Element;
+export declare function ReviewQueueMockup(): import("react").JSX.Element;
+export declare function FeatureMockupsPreview(): import("react").JSX.Element;
+//# sourceMappingURL=FeatureMockups.d.ts.map

package/dist/templates/aiworkflow/components/FeatureMockups.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureMockups.d.ts","sourceRoot":"","sources":["../../../../src/templates/aiworkflow/components/FeatureMockups.tsx"],"names":[],"mappings":"AA+FA,wBAAgB,gBAAgB,gCA0J/B;AAED,wBAAgB,oBAAoB,gCA4InC;AAED,wBAAgB,iBAAiB,gCAiKhC;AAED,wBAAgB,qBAAqB,gCAQpC"}