nextworks 0.2.0-alpha.13 → 0.2.0-alpha.15

package/README.md

@@ -204,7 +204,9 @@ This copies:
 After this step you should be able to start your dev server and visit:
 
 - `/` (if wired as the home page), or
-- `/templates/productlaunch`, `/templates/saasdashboard`, `/templates/digitalagency`, `/templates/aiworkflow`
+- `/templates/productlaunch`, `/templates/saasdashboard`, `/templates/digitalagency`, `/templates/aiworkflow`, `/templates/gallery`
+
+The current **AI Workflow** template ships with an **AI coding agent** story. It is intended to be adapted for other AI workflow/product stories as more variants are added.
 
 ---
 

package/dist/cli_manifests/blocks_manifest.json

@@ -62,6 +62,7 @@
         "components/sections/product-demo/KnowledgePanel.tsx",
         "components/sections/product-demo/RunConsolePanel.tsx",
         "components/sections/product-demo/types.ts",
+        "components/sections/product-demo/TaskListPanel.tsx",
         "components/sections/product-demo/WorkflowStudioPanel.tsx",
         "components/sections/Newsletter.tsx",
         "components/sections/PortfolioSimple.tsx",
@@ -144,6 +145,10 @@
         "app/templates/aiworkflow/components/ProcessTimeline.tsx",
         "app/templates/aiworkflow/components/Testimonials.tsx",
         "app/templates/aiworkflow/components/TrustBadges.tsx",
+        "app/templates/aiworkflow/themes/default.tsx",
+        "public/placeholders/aiworkflow/live.svg",
+        "public/placeholders/aiworkflow/review.svg",
+        "public/placeholders/aiworkflow/task.svg",
         "public/placeholders/gallery/hero-pexels-broken-9945014.avif",
         "public/placeholders/gallery/pexels-googledeepmind-25626431.jpg",
         "public/placeholders/gallery/pexels-googledeepmind-25626432.jpg",

package/dist/kits/blocks/.nextworks/docs/BLOCKS_QUICKSTART.md

@@ -38,6 +38,8 @@ Then visit:
 - `http://localhost:3000/templates/aiworkflow`
 - `http://localhost:3000/templates/gallery`
 
+The current **AI Workflow** template ships with an **AI coding agent** story, but you can adapt it for other AI workflow/product stories.
+
 If those load and look styled, you’re in good shape.
 
 ---

package/dist/kits/blocks/.nextworks/docs/BLOCKS_README.md

@@ -57,6 +57,8 @@ Blocks supports these install shapes:
    - `/templates/aiworkflow`
    - `/templates/gallery`
 
+   The current **AI Workflow** template ships with an **AI coding agent** story, but the structure is intended to be reusable for other AI workflow/product stories too.
+
 ---
 
 ## Where templates live (App Router vs Pages Router)

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

@@ -1,58 +1 @@
-import React from "react";
-import { cn } from "@/lib/utils";
-
-type Props = React.PropsWithChildren<{ className?: string }>;
-
-export function PresetThemeVars({ className, children }: Props) {
-  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/kits/blocks/app/templates/aiworkflow/README.md

@@ -2,6 +2,8 @@
 
 This template is preset-first. It wraps the page with `PresetThemeVars` and composes the route from template-local wrappers around shared Nextworks sections.
 
+The current shipped story is an **AI coding agent**, but the template structure is intended to be reusable for other AI workflow/product stories as more variants are added.
+
 ## Where it’s wired
 
 Template paths depend on your router:

package/dist/kits/blocks/app/templates/aiworkflow/components/CTA.tsx

@@ -7,38 +7,38 @@ export function CTA() {
     <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)]",
+          "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.",
+        text: "Ship code changes with an agent in the loop.",
         className:
-          "font-outfit text-3xl font-semibold leading-tight text-white md:text-4xl lg:text-5xl",
+          "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.",
+        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-white/80 md:text-lg",
+          "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 workflow demo", href: "#contact" }}
+      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)]",
+          "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]",
+          "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 workflow call to action"
+      ariaLabel="AI coding agent call to action"
     />
   );
 }

package/dist/kits/blocks/app/templates/aiworkflow/components/Contact.tsx

@@ -10,28 +10,28 @@ const contactFields: ContactField[] = [
   {
     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",
   },
@@ -39,7 +39,7 @@ const contactFields: ContactField[] = [
     id: "message",
     label: "What should the workflow coordinate?",
     placeholder:
-      "Tell us which systems, approvals, or handoffs are slowing the team down.",
+      "Tell us which files, checks, or handoffs are slowing the team down.",
     required: true,
     type: "textarea",
   },
@@ -54,20 +54,19 @@ export function Contact() {
   return (
     <SharedContact
       id="contact"
-      ariaLabel="AI workflow contact section"
+      ariaLabel="AI coding agent contact section"
       fields={contactFields}
-      contactHeaderText="Bring your messiest workflow."
-      contactSubHeaderText="We’ll map the approvals, systems, and execution steps that AI can automate first."
+      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-[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%)]",
+        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",
+          "font-outfit text-3xl font-semibold !text-[var(--heading-fg)] md:text-4xl",
       }}
       subheaderText={{
         className:
@@ -96,9 +95,9 @@ export function Contact() {
         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)]",
+          "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="Request a demo"
+      submitButtonText="Book an agent demo"
       onSubmit={handleFormSubmit}
     />
   );

package/dist/kits/blocks/app/templates/aiworkflow/components/FAQ.tsx

@@ -8,56 +8,59 @@ export function FAQ() {
       faqSectionHeaderText="Frequently asked questions"
       faqData={[
         {
-          question: "What kinds of workflows can I automate?",
+          question: "What kinds of coding tasks can the agent handle?",
           answer:
-            "Teams use FlowPilot AI for intake routing, approvals, CRM and ticket updates, launch coordination, support escalations, and other repeatable cross-tool processes.",
+            "Teams use FlowPilot AI for bug fixes, refactors, routine maintenance, release prep, and other repeatable code changes.",
         },
         {
-          question: "How do approvals work?",
+          question: "How do reviews and 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.",
+            "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?",
+          question: "Can the agent use our codebase and docs?",
           answer:
-            "Yes. The knowledge layer can reference playbooks, policies, runbooks, and other connected sources so actions stay grounded in current context.",
+            "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?",
+          question: "Will we be able to audit every change?",
           answer:
-            "Yes. Each workflow run records decisions, approvals, tool updates, and execution logs so teams can trace what happened and why.",
+            "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.",
+            "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.",
+            "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" }}
+      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" }}
+      item={{ className: "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",
+          "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(--card-bg)] text-[var(--card-fg)] shadow-sm",
-      }}
-      answerText={{
-        className: "font-inter text-sm leading-7 text-[var(--card-fg)]",
+          "overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--faq-answer-bg)] text-[var(--faq-answer-fg)] shadow-sm",
       }}
-      ariaLabel="AI workflow frequently asked questions"
+      answerText={{ className: "font-inter text-sm leading-7" }}
+      allowMultipleOpen={true}
+      ariaLabel="AI coding agent frequently asked questions"
     />
   );
 }