nextworks 0.2.0-alpha.11 → 0.2.0-alpha.13

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

@@ -1,104 +1,105 @@
-# Blocks kit
-
-This folder is the **Blocks kit** installed by the Nextworks CLI. It’s copied into your Next.js project so you can edit everything locally (shadcn-style): components, sections, templates, and theme utilities.
-
-If you’re reading this inside your app repo, you’ll also find companion docs at:
-
-- `.nextworks/docs/BLOCKS_QUICKSTART.md` (start here)
-- `.nextworks/docs/THEME_GUIDE.md`
-
----
-
-## What this adds to your project
-
-Depending on install flags, Blocks adds:
-
-- **UI primitives** under `components/ui/**` (Button, Input, Card, Select, Checkbox, Switch, Toaster, etc.)
-- **Reusable marketing sections** under `components/sections/**` (Navbar, Hero variants, Features, Pricing, Testimonials, FAQ, Contact, Footer, …)
-- **Full page templates** under a router-native path (see below)
-- **Theme + provider utilities** under `components/**` and `lib/**`
-- **Global styles**: `app/globals.css` and `app/tw-animate.css`
-- **Placeholder images** under `public/placeholders/**`
-
----
-
-## Install commands / options
-
-> ```bash
-> npx nextworks@latest add blocks --templates
-> ```
-
-Blocks supports these install shapes:
-
-- `npx nextworks@latest add blocks --ui-only` → core UI primitives only
-- `npx nextworks@latest add blocks --sections` → core + sections
-- `npx nextworks@latest add blocks --templates` → core + sections + templates (recommended)
-
----
-
-## After install: what to run
-
-1. Install merged dependencies:
-
-   ```bash
-   npm install
-   ```
-
-2. Start dev:
-
-   ```bash
-   npm run dev
-   ```
-
-3. Visit template routes (when templates are installed):
-   - `/templates/productlaunch`
-   - `/templates/saasdashboard`
-   - `/templates/digitalagency`
-   - `/templates/gallery`
-
----
-
-## Where templates live (App Router vs Pages Router)
-
-Templates are installed in a router-native location:
-
-- **App Router:**
-  - `app/templates/<template>/page.tsx`
-  - `app/templates/<template>/**`
-
-- **Pages Router:**
-  - route entry file: `pages/templates/<template>/index.tsx`
-  - supporting template files: `components/templates/<template>/**` (kept outside `pages/` so helpers are not treated as routable pages)
-
----
-
-## Required wiring (providers + CSS)
-
-Blocks expects your app to be wrapped in the kit’s local `AppProviders`.
-
-- **App Router:** patched in `app/layout.tsx`
-- **Pages Router:** patched in `pages/_app.tsx` (and may create/update `pages/_document.tsx`)
-
-The CLI normally patches this automatically.
-
-Notes:
-
-- Pages Router installs also ensure CSS imports exist in `pages/_app.tsx`:
-  - `../app/globals.css`
-  - `../app/tw-animate.css`
-- The kit’s `components/app-providers.*` wrappers are **local kit providers** (they wrap the kit-local `BlocksAppProviders`) so providers/hooks resolve to the same React context instance under Turbopack/HMR.
-
----
-
-## What to edit first
-
-- Want to change the look/branding quickly? Start with:
-  - `.nextworks/docs/THEME_GUIDE.md`
-  - `lib/themes.ts`
-  - each template’s `PresetThemeVars` file
-
-- Want to customize a section (Navbar/Hero/etc.)?
-  - edit files directly under `components/sections/**`
-
-- Want to customize a template page?
-  - edit the template route file (see paths above) and its local components.
+# Blocks kit
+
+This folder is the **Blocks kit** installed by the Nextworks CLI. It’s copied into your Next.js project so you can edit everything locally (shadcn-style): components, sections, templates, and theme utilities.
+
+If you’re reading this inside your app repo, you’ll also find companion docs at:
+
+- `.nextworks/docs/BLOCKS_QUICKSTART.md` (start here)
+- `.nextworks/docs/THEME_GUIDE.md`
+
+---
+
+## What this adds to your project
+
+Depending on install flags, Blocks adds:
+
+- **UI primitives** under `components/ui/**` (Button, Input, Card, Select, Checkbox, Switch, Toaster, etc.)
+- **Reusable marketing sections** under `components/sections/**` (Navbar, Hero variants, Features, Pricing, Testimonials, FAQ, Contact, Footer, …)
+- **Full page templates** under a router-native path (see below)
+- **Theme + provider utilities** under `components/**` and `lib/**`
+- **Global styles**: `app/globals.css` and `app/tw-animate.css`
+- **Placeholder images** under `public/placeholders/**`
+
+---
+
+## Install commands / options
+
+> ```bash
+> npx nextworks@latest add blocks --templates
+> ```
+
+Blocks supports these install shapes:
+
+- `npx nextworks@latest add blocks --ui-only` → core UI primitives only
+- `npx nextworks@latest add blocks --sections` → core + sections
+- `npx nextworks@latest add blocks --templates` → core + sections + templates (recommended)
+
+---
+
+## After install: what to run
+
+1. Install merged dependencies:
+
+   ```bash
+   npm install
+   ```
+
+2. Start dev:
+
+   ```bash
+   npm run dev
+   ```
+
+3. Visit template routes (when templates are installed):
+   - `/templates/productlaunch`
+   - `/templates/saasdashboard`
+   - `/templates/digitalagency`
+   - `/templates/aiworkflow`
+   - `/templates/gallery`
+
+---
+
+## Where templates live (App Router vs Pages Router)
+
+Templates are installed in a router-native location:
+
+- **App Router:**
+  - `app/templates/<template>/page.tsx`
+  - `app/templates/<template>/**`
+
+- **Pages Router:**
+  - route entry file: `pages/templates/<template>/index.tsx`
+  - supporting template files: `components/templates/<template>/**` (kept outside `pages/` so helpers are not treated as routable pages)
+
+---
+
+## Required wiring (providers + CSS)
+
+Blocks expects your app to be wrapped in the kit’s local `AppProviders`.
+
+- **App Router:** patched in `app/layout.tsx`
+- **Pages Router:** patched in `pages/_app.tsx` (and may create/update `pages/_document.tsx`)
+
+The CLI normally patches this automatically.
+
+Notes:
+
+- Pages Router installs also ensure CSS imports exist in `pages/_app.tsx`:
+  - `../app/globals.css`
+  - `../app/tw-animate.css`
+- The kit’s `components/app-providers.*` wrappers are **local kit providers** (they wrap the kit-local `BlocksAppProviders`) so providers/hooks resolve to the same React context instance under Turbopack/HMR.
+
+---
+
+## What to edit first
+
+- Want to change the look/branding quickly? Start with:
+  - `.nextworks/docs/THEME_GUIDE.md`
+  - `lib/themes.ts`
+  - each template’s `PresetThemeVars` file
+
+- Want to customize a section (Navbar/Hero/etc.)?
+  - edit files directly under `components/sections/**`
+
+- Want to customize a template page?
+  - edit the template route file (see paths above) and its local components.

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

@@ -31,7 +31,7 @@ Fonts are instead configured directly in your app’s router entrypoint (the CLI
 If you ever see a font-related Turbopack error after upgrades or manual edits, re-run:
 
 ```bash
-npx nextworks@latest add blocks --sections --templates
+npx nextworks@latest add blocks --templates
 ```
 
 to re-apply the router entrypoint patch, and ensure your entrypoint contains a valid

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

@@ -0,0 +1,58 @@
+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>
+  );
+}

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

@@ -0,0 +1,46 @@
+# AIWorkflow Template Theming
+
+This template is preset-first. It wraps the page with `PresetThemeVars` and composes the route from template-local wrappers around shared Nextworks sections.
+
+## Where it’s wired
+
+Template paths depend on your router:
+
+- App Router:
+  - Wrapper: `app/templates/aiworkflow/PresetThemeVars.tsx`
+  - Page: `app/templates/aiworkflow/page.tsx`
+- Pages Router:
+  - Wrapper: `components/templates/aiworkflow/PresetThemeVars.tsx`
+  - Page: `pages/templates/aiworkflow/index.tsx`
+
+## Composition pattern
+
+The page is composed from local wrappers such as:
+
+- `components/Navbar.tsx`
+- `components/Hero.tsx`
+- `components/Features.tsx`
+- `components/ProcessTimeline.tsx`
+- `components/Testimonials.tsx`
+- `components/Pricing.tsx`
+- `components/FAQ.tsx`
+- `components/CTA.tsx`
+- `components/Contact.tsx`
+- `components/Footer.tsx`
+- `components/TrustBadges.tsx`
+
+The local `Hero.tsx` wraps the shared `HeroProductDemo` section with AI workflow-specific copy, scenarios, CTAs, and styling.
+
+## Core variables
+
+- Buttons: `--btn-bg`, `--btn-fg`, `--btn-hover-bg`, `--btn-hover-fg`, `--btn-border`, `--btn-ring`
+- Inputs/Textareas: `--input-bg`, `--input-fg`, `--input-placeholder`, `--input-border`, `--input-focus-ring`, `--input-ring-offset`
+- Cards: `--card-bg`, `--card-fg`, `--card-title-fg`, `--card-muted-fg`, `--card-border`, `--card-shadow`
+- Badges/Chips: `--badge-bg`, `--badge-fg`, `--badge-border`, active: `--badge-active-*`
+- Headings: `--heading-fg`, `--subheading-fg`, `--description-fg`
+- Footer: `--footer-bg`, `--footer-fg`, `--footer-heading-fg`, `--footer-link-fg`, `--footer-link-hover-fg`, `--footer-link-hover-bg`, `--footer-muted-fg`, `--footer-border`
+- Table: `--table-fg`, `--table-muted-fg`, `--table-head-fg`, `--table-border`, `--table-row-hover-bg`
+
+## Per-section overrides
+
+Prefer the shared preset variables first. Only add local overrides when a section needs a distinct accent or contrast treatment.

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { CTA as SharedCTA } from "@/components/sections/CTA";
+
+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)]",
+      }}
+      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",
+      }}
+      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={{
+        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)]",
+      }}
+      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"
+    />
+  );
+}

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

@@ -0,0 +1,105 @@
+"use client";
+
+import React from "react";
+import {
+  Contact as SharedContact,
+  ContactField,
+} from "@/components/sections/Contact";
+
+const contactFields: ContactField[] = [
+  {
+    id: "name",
+    label: "Full name",
+    placeholder: "Jordan Lee",
+    required: true,
+    type: "text",
+  },
+  {
+    id: "email",
+    label: "Work email",
+    placeholder: "jordan@company.com",
+    required: true,
+    type: "email",
+  },
+  {
+    id: "company",
+    label: "Company",
+    placeholder: "Acme Inc.",
+    required: true,
+    type: "text",
+  },
+  {
+    id: "workflow",
+    label: "Workflow to automate",
+    placeholder: "Approvals, onboarding, launches, support escalations…",
+    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.",
+    required: true,
+    type: "textarea",
+  },
+];
+
+export function Contact() {
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    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%)]",
+      }}
+      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",
+      }}
+      subheaderText={{
+        className:
+          "mx-auto mt-3 max-w-2xl font-inter text-base leading-7 text-[var(--subheading-fg)]",
+      }}
+      form={{
+        className:
+          "rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] p-6 shadow-[var(--card-shadow)] md:p-8",
+      }}
+      fieldsWrapper={{ className: "space-y-5" }}
+      field={{ className: "space-y-2" }}
+      label={{
+        className:
+          "block font-inter text-sm font-medium text-[var(--card-title-fg)]",
+      }}
+      input={{
+        className:
+          "w-full rounded-md border-[var(--input-border)] bg-[var(--input-bg)] p-3 font-inter text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-2 focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
+      }}
+      textarea={{
+        className:
+          "min-h-[130px] w-full resize-vertical rounded-md border-[var(--input-border)] bg-[var(--input-bg)] p-3 font-inter text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-2 focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
+      }}
+      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}
+    />
+  );
+}

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

@@ -0,0 +1,63 @@
+"use client";
+
+import { FAQ as SharedFAQ } from "@/components/sections/FAQ";
+
+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: "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: "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: "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: "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.",
+        },
+        {
+          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.",
+        },
+      ]}
+      section={{ className: "bg-background px-5 py-16" }}
+      container={{ className: "max-w-6xl mx-auto" }}
+      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"
+    />
+  );
+}

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { Features as SharedFeatures } from "@/components/sections/Features";
+
+const featuresData = [
+  {
+    imageSrc: "/placeholders/saas_dashboard/projectBoard.png",
+    imageAlt: "Workflow builder and orchestration canvas",
+    headingText: "Design workflows from plain-language requests",
+    subheadingText:
+      "AI turns a request into a structured workflow with triggers, conditions, tool actions, and approval checkpoints.",
+  },
+  {
+    imageSrc: "/placeholders/saas_dashboard/analytics.png",
+    imageAlt: "Live execution feed and analytics dashboard",
+    headingText: "See every step as it runs",
+    subheadingText:
+      "Track execution state, latency, retries, and downstream updates in a live run feed your team can actually follow.",
+  },
+  {
+    imageSrc: "/placeholders/saas_dashboard/chat.png",
+    imageAlt: "Approval inbox and team collaboration interface",
+    headingText: "Route approvals only where they matter",
+    subheadingText:
+      "Let policy decide when humans need to review while routine decisions stay automated and fully auditable.",
+  },
+];
+
+export function Features() {
+  return (
+    <SharedFeatures
+      sectionHeading="One system for requests, approvals, execution, and visibility"
+      sectionSubheading="Compose AI-assisted workflows that pull in context, coordinate teams, and keep every system in sync."
+      featuresData={featuresData}
+      section={{ className: "bg-background py-18 md:py-22 lg:py-24" }}
+      container={{ className: "max-w-7xl mx-auto px-6 md:px-8 lg:px-10" }}
+      header={{ className: "mb-12 text-center md:mb-14" }}
+      heading={{
+        className:
+          "font-outfit text-3xl font-semibold text-[var(--heading-fg)] md:text-4xl lg:text-5xl",
+      }}
+      subheading={{
+        className:
+          "mx-auto max-w-3xl font-inter text-base leading-7 text-[var(--subheading-fg)] md:text-lg",
+      }}
+      grid={{
+        className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3",
+      }}
+      card={{
+        className:
+          "h-full rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] text-[var(--card-fg)] shadow-[var(--card-shadow)] transition-all duration-300 hover:-translate-y-1 hover:shadow-xl",
+      }}
+      image={{ className: "h-52 w-full object-cover" }}
+      cardHeading={{
+        className:
+          "font-inter text-xl font-semibold leading-tight text-[var(--card-title-fg)]",
+      }}
+      cardSubheading={{
+        className:
+          "font-inter text-sm leading-6 text-[var(--card-muted-fg)] md:text-base",
+      }}
+      ariaLabel="AI workflow features"
+    />
+  );
+}