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

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

@@ -0,0 +1,90 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { Navbar as SharedNavbar } from "@/components/sections/Navbar";
+
+type SharedNavbarProps = ComponentProps<typeof SharedNavbar>;
+type PresetOverrides = Partial<SharedNavbarProps>;
+
+const defaultProps: SharedNavbarProps = {
+  brand: "FlowPilot AI",
+  brandNode: (
+    <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-400 via-sky-500 to-violet-500 font-bold text-slate-950 shadow-sm ring-1 ring-white/40">
+      FP
+    </div>
+  ),
+  menuItems: [
+    { label: "Home", href: "#home" },
+    { label: "Features", href: "#features" },
+    { label: "Pricing", href: "#pricing" },
+    { label: "FAQ", href: "#faq" },
+    { label: "Contact", href: "#contact" },
+  ],
+  ctaButton: null,
+  showColorModeToggle: true,
+  navHeight: "h-16",
+  sticky: true,
+  ariaLabel: "FlowPilot AI main navigation",
+  className: "",
+  nav: {
+    className:
+      "border-b border-slate-200/80 bg-white/80 text-slate-900 backdrop-blur supports-[backdrop-filter]:bg-white/80 " +
+      "dark:border-slate-800 dark:bg-slate-950/75 dark:text-white supports-[backdrop-filter]:dark:bg-slate-950/75 " +
+      "[--navbar-accent:theme(colors.cyan.600)] dark:[--navbar-accent:theme(colors.cyan.400)] " +
+      "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.slate.950)] " +
+      "[--navbar-hover-bg:theme(colors.cyan.50)] dark:[--navbar-hover-bg:color-mix(in_oklab,oklch(0.24_0.06_230)_24%,transparent)] " +
+      "[--navbar-ring:theme(colors.cyan.500)] dark:[--navbar-ring:theme(colors.cyan.400)] " +
+      "[--navbar-border:theme(colors.slate.200)] dark:[--navbar-border:theme(colors.slate.800)]",
+  },
+  brandText: {
+    className:
+      "text-xl font-semibold font-outfit text-slate-950 dark:text-white",
+  },
+  links: {
+    className:
+      "text-sm font-medium font-inter text-slate-700 hover:text-cyan-700 focus:ring-[var(--navbar-ring)] dark:text-slate-200 dark:hover:text-cyan-300",
+  },
+  ctaButtonStyle: {
+    variant: "default",
+    size: "default",
+    className:
+      "shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg",
+  },
+  mobileMenu: {
+    className: "border-t border-slate-200 dark:border-slate-800",
+  },
+  container: {
+    className: "max-w-7xl mx-auto",
+  },
+  brandWrapper: {
+    className: "",
+  },
+  desktopMenu: {
+    className: "hidden items-center space-x-1 md:flex lg:space-x-6",
+  },
+  toggleButton: {
+    className:
+      "md:hidden flex items-center justify-center rounded-md p-2 transition-colors hover:bg-cyan-50 dark:hover:bg-cyan-950/30 focus:outline-none focus:ring-2 focus:ring-cyan-500 dark:focus:ring-cyan-400",
+  },
+  colorModeWrapper: {
+    className: "ml-2",
+  },
+  ctaButtonWrapper: {
+    className: "ml-2",
+  },
+  mobileMenuInner: {
+    className: "space-y-2 px-4 pt-2 pb-4",
+  },
+  mobileLinks: {
+    className: "hover:bg-[var(--navbar-hover-bg)]",
+  },
+};
+
+export function Navbar(overrides: PresetOverrides = {}) {
+  const props: SharedNavbarProps = {
+    ...defaultProps,
+    ...overrides,
+  };
+
+  return <SharedNavbar {...props} />;
+}

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

@@ -0,0 +1,86 @@
+"use client";
+
+import { Pricing as SharedPricing } from "@/components/sections/Pricing";
+
+export function Pricing() {
+  return (
+    <SharedPricing
+      id="pricing"
+      pricingHeadingText="Pricing for teams automating real operational work"
+      pricingPlans={[
+        {
+          pricingPlanHeaderText: "Starter",
+          pricingPlanPrice: "$49/mo",
+          pricingPlanFeatures: [
+            "3 active workflows",
+            "Slack and email intake",
+            "Shared approval inbox",
+            "Core analytics",
+          ],
+          pricingPlanCTALabel: "Start free",
+          pricingPlanCTAHref: "#contact",
+        },
+        {
+          pricingPlanHeaderText: "Growth",
+          pricingPlanPrice: "$149/mo",
+          pricingPlanFeatures: [
+            "Unlimited workflows",
+            "CRM and project tool sync",
+            "Advanced approval routing",
+            "Live execution dashboards",
+            "Role-based governance",
+          ],
+          pricingPlanCTALabel: "Book a demo",
+          pricingPlanCTAHref: "#contact",
+          isPopular: true,
+        },
+        {
+          pricingPlanHeaderText: "Enterprise",
+          pricingPlanPrice: "Custom",
+          pricingPlanFeatures: [
+            "Private deployment options",
+            "Custom policy and knowledge connectors",
+            "SSO and audit exports",
+            "Dedicated onboarding",
+            "Priority support",
+          ],
+          pricingPlanCTALabel: "Talk to sales",
+          pricingPlanCTAHref: "#contact",
+        },
+      ]}
+      section={{ className: "bg-background pt-18 pb-16" }}
+      container={{ className: "max-w-7xl mx-auto px-6" }}
+      heading={{
+        className:
+          "mb-4 text-center font-outfit text-3xl font-semibold text-[var(--heading-fg)] md:text-4xl lg:text-5xl",
+      }}
+      grid={{ className: "mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" }}
+      card={{
+        className:
+          "relative 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",
+      }}
+      title={{
+        className:
+          "font-inter text-xl font-semibold text-[var(--card-title-fg)]",
+      }}
+      price={{
+        className:
+          "font-outfit text-3xl font-semibold text-[var(--card-title-fg)]",
+      }}
+      featureItem={{
+        className: "font-inter text-sm text-[var(--card-muted-fg)] md:text-base",
+      }}
+      cta={{
+        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)]",
+      }}
+      popularBadge={{
+        className:
+          "absolute -top-3 left-1/2 -translate-x-1/2 rounded-full border border-[var(--badge-active-border)] bg-[var(--badge-active-bg)] px-4 py-1 text-xs font-semibold text-[var(--badge-active-fg)]",
+      }}
+      ariaLabel="AI workflow pricing"
+    />
+  );
+}

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

@@ -0,0 +1,103 @@
+"use client";
+
+import { ProcessTimeline as SharedProcessTimeline } from "@/components/sections/ProcessTimeline";
+
+export function ProcessTimeline() {
+  return (
+    <SharedProcessTimeline
+      steps={[
+        {
+          stepNumber: 1,
+          title: "Capture the request",
+          description:
+            "AI turns messages, tickets, and forms into structured workflow inputs with clear intent and metadata.",
+          icon: "✉️",
+        },
+        {
+          stepNumber: 2,
+          title: "Ground the decision",
+          description:
+            "Policies, playbooks, and account context are pulled in before the workflow takes action.",
+          icon: "🧠",
+        },
+        {
+          stepNumber: 3,
+          title: "Route approvals and actions",
+          description:
+            "Human review appears only when thresholds or policy require it, while approved actions continue automatically.",
+          icon: "✅",
+        },
+        {
+          stepNumber: 4,
+          title: "Sync every tool",
+          description:
+            "CRM records, project tasks, team updates, and audit logs stay aligned from one execution graph.",
+          icon: "🔄",
+        },
+      ]}
+      heading="From request to completed workflow in four clear stages"
+      subheading="Keep AI automation visible, governed, and operational across the systems your team already uses."
+      section={{
+        className:
+          "bg-[linear-gradient(180deg,rgba(248,250,252,1)_0%,rgba(240,249,255,0.7)_100%)] py-18 md:py-22 dark:bg-[linear-gradient(180deg,rgba(2,6,23,1)_0%,rgba(8,47,73,0.4)_100%)]",
+      }}
+      container={{ className: "max-w-6xl mx-auto px-6 md:px-10" }}
+      header={{ className: "mb-16 text-center" }}
+      headingStyle={{
+        className:
+          "font-outfit text-3xl font-semibold text-[var(--heading-fg)] md:text-4xl lg:text-5xl",
+      }}
+      subheadingStyle={{
+        className:
+          "mx-auto max-w-3xl font-inter text-base leading-7 text-[var(--subheading-fg)] md:text-lg",
+      }}
+      timelineContainer={{ className: "mx-auto w-full max-w-5xl" }}
+      desktopTimeline={{
+        className: "relative hidden w-full justify-between lg:flex",
+      }}
+      connectingLine={{
+        className:
+          "absolute left-16 right-16 top-8 h-px bg-gradient-to-r from-cyan-200 via-sky-400 to-violet-400 dark:from-cyan-900 dark:via-cyan-500 dark:to-violet-500",
+      }}
+      stepContainer={{
+        className: "relative z-10 flex max-w-56 flex-1 flex-col items-center gap-5",
+      }}
+      stepCircle={{
+        className:
+          "flex h-16 w-16 items-center justify-center rounded-full bg-slate-950 text-white shadow-lg shadow-cyan-500/10 dark:bg-cyan-400 dark:text-slate-950",
+      }}
+      stepNumber={{ className: "font-outfit text-2xl font-bold" }}
+      stepIcon={{ className: "text-3xl" }}
+      stepContent={{ className: "space-y-3 text-center" }}
+      stepTitle={{
+        className:
+          "font-inter text-lg font-semibold text-[var(--card-title-fg)]",
+      }}
+      stepDescription={{
+        className:
+          "font-inter text-sm leading-6 text-[var(--card-muted-fg)]",
+      }}
+      mobileTimeline={{ className: "flex w-full flex-col gap-8 lg:hidden" }}
+      mobileStep={{ className: "relative flex items-start" }}
+      mobileVerticalLine={{
+        className:
+          "absolute bottom-[-2rem] left-8 top-16 w-px bg-cyan-300 dark:bg-cyan-700",
+      }}
+      mobileStepCircle={{
+        className:
+          "mr-6 flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-slate-950 text-white shadow-lg dark:bg-cyan-400 dark:text-slate-950",
+      }}
+      mobileStepContent={{ className: "flex-1 space-y-3 pt-2" }}
+      mobileStepIcon={{ className: "text-3xl" }}
+      mobileStepTitle={{
+        className:
+          "font-inter text-lg font-semibold text-[var(--card-title-fg)]",
+      }}
+      mobileStepDescription={{
+        className:
+          "font-inter text-sm leading-6 text-[var(--card-muted-fg)]",
+      }}
+      ariaLabel="AI workflow process timeline"
+    />
+  );
+}

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { Testimonials as SharedTestimonials } from "@/components/sections/Testimonials";
+
+export function Testimonials() {
+  return (
+    <SharedTestimonials
+      testimonialSectionHeader="Operators, RevOps, and IT teams keep the loop closed"
+      testimonials={[
+        {
+          testimonialText:
+            "We replaced manual intake, Slack follow-up, and CRM updates with one workflow that now runs end-to-end in minutes.",
+          testimonialAuthor: "- Maya Chen, RevOps Lead at Northstar",
+          testimonialAuthorInitials: "MC",
+        },
+        {
+          testimonialText:
+            "Approvals used to stall launches for hours. Now legal only sees the exceptions and everyone else gets live status automatically.",
+          testimonialAuthor: "- Daniel Ruiz, GTM Systems Manager",
+          testimonialAuthorInitials: "DR",
+        },
+        {
+          testimonialText:
+            "The audit trail made adoption easy. Teams trust the automations because every action is grounded, visible, and recoverable.",
+          testimonialAuthor: "- Priya Patel, Director of Operations",
+          testimonialAuthorInitials: "PP",
+        },
+      ]}
+      section={{ className: "bg-background py-18 px-6 md:py-22" }}
+      container={{ className: "max-w-7xl mx-auto" }}
+      header={{ className: "mb-12 text-center" }}
+      heading={{
+        className:
+          "font-outfit text-3xl font-semibold text-[var(--heading-fg)] md:text-4xl",
+      }}
+      grid={{ className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" }}
+      card={{
+        className:
+          "rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] p-6 text-[var(--card-fg)] shadow-[var(--card-shadow)] transition-transform duration-200 hover:-translate-y-1",
+      }}
+      text={{
+        className: "font-inter text-base italic leading-7 text-[var(--card-fg)]",
+      }}
+      author={{
+        className:
+          "font-inter text-sm font-medium text-[var(--card-muted-fg)]",
+      }}
+      avatar={{
+        className:
+          "flex h-12 w-12 items-center justify-center rounded-full border border-[var(--badge-border)] bg-[var(--badge-bg)] text-[var(--badge-fg)]",
+      }}
+      avatarText={{ className: "font-inter text-sm font-bold" }}
+      ariaLabel="AI workflow customer testimonials"
+    />
+  );
+}

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

@@ -0,0 +1,59 @@
+"use client";
+
+import { TrustBadges as SharedTrustBadges } from "@/components/sections/TrustBadges";
+
+export function TrustBadges() {
+  return (
+    <SharedTrustBadges
+      id="trust-badges"
+      trustBadgesSectionHeader="Teams replacing manual ops with AI workflows"
+      badges={[
+        {
+          badgeText: "72% faster routing",
+          badgeDescription: "Workflow handoffs",
+          badgeIcon: "⚡",
+        },
+        {
+          badgeText: "40+ integrations",
+          badgeDescription: "Connected systems",
+          badgeIcon: "🔌",
+        },
+        {
+          badgeText: "SOC 2 ready",
+          badgeDescription: "Security posture",
+          badgeIcon: "🔒",
+        },
+        {
+          badgeText: "Full audit trail",
+          badgeDescription: "Approvals + logs",
+          badgeIcon: "🧾",
+        },
+      ]}
+      section={{
+        className:
+          "border-y border-slate-200/80 bg-white/70 py-10 dark:border-slate-800 dark:bg-slate-950/60",
+      }}
+      container={{ className: "max-w-7xl mx-auto px-6 md:px-8 lg:px-12" }}
+      header={{ className: "mb-10 text-center" }}
+      heading={{
+        className:
+          "font-outfit text-2xl font-semibold text-[var(--heading-fg)] md:text-3xl",
+      }}
+      badgesContainer={{
+        className: "flex flex-wrap items-center justify-center gap-8 md:gap-12",
+      }}
+      badge={{ className: "min-w-[170px] text-center" }}
+      badgeContent={{ className: "flex flex-col items-center gap-3" }}
+      icon={{ className: "text-3xl" }}
+      description={{
+        className: "text-sm font-inter text-[var(--card-muted-fg)]",
+      }}
+      text={{
+        className:
+          "font-inter text-base font-semibold text-[var(--card-title-fg)]",
+      }}
+      layout="horizontal"
+      ariaLabel="AI workflow trust badges"
+    />
+  );
+}

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

@@ -0,0 +1,43 @@
+import { Navbar } from "./components/Navbar";
+import { Hero } from "./components/Hero";
+import { TrustBadges } from "./components/TrustBadges";
+import { Features } from "./components/Features";
+import { ProcessTimeline } from "./components/ProcessTimeline";
+import { Testimonials } from "./components/Testimonials";
+import { Pricing } from "./components/Pricing";
+import { FAQ } from "./components/FAQ";
+import { CTA } from "./components/CTA";
+import { Contact } from "./components/Contact";
+import { Footer } from "./components/Footer";
+
+import { PresetThemeVars } from "./PresetThemeVars";
+
+export default function AIWorkflowTemplatePage() {
+  return (
+    <PresetThemeVars>
+      <div>
+        <Navbar />
+        <section id="home">
+          <Hero />
+        </section>
+        <TrustBadges />
+        <section id="features">
+          <Features />
+          <ProcessTimeline />
+        </section>
+        <Testimonials />
+        <section id="pricing">
+          <Pricing />
+        </section>
+        <section id="faq">
+          <FAQ />
+        </section>
+        <CTA />
+        <section id="contact">
+          <Contact />
+        </section>
+        <Footer />
+      </div>
+    </PresetThemeVars>
+  );
+}

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

@@ -1,80 +1,80 @@
-import React from "react";
-import { cn } from "@/lib/utils";
-
-type Props = React.PropsWithChildren<{ className?: string }>;
-
-/**
- * DigitalAgency template theme variables wrapper.
- * Emerald-leaning palette; adjust to match your preset exactly.
- */
-export function PresetThemeVars({ className, children }: Props) {
-  return (
-    <div
-      className={cn(
-        // Shared button ring
-        "[--btn-ring:theme(colors.emerald.500)] dark:[--btn-ring:theme(colors.emerald.400)]",
-
-        // Inputs
-        "[--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.emerald.200)] dark:[--input-border:theme(colors.emerald.700)]",
-        "[--input-focus-ring:theme(colors.emerald.500)] dark:[--input-focus-ring:theme(colors.emerald.400)]",
-        "[--input-ring-offset:theme(colors.white)] dark:[--input-ring-offset:theme(colors.gray.900)]",
-
-        // Cards
-        "[--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
-        "[--badge-bg:theme(colors.emerald.50)] dark:[--badge-bg:theme(colors.emerald.950)]",
-        "[--badge-fg:theme(colors.emerald.700)] dark:[--badge-fg:theme(colors.emerald.300)]",
-        "[--badge-border:theme(colors.emerald.200)] dark:[--badge-border:theme(colors.emerald.800)]",
-        "[--badge-active-bg:theme(colors.emerald.600)] dark:[--badge-active-bg:theme(colors.emerald.500)]",
-        "[--badge-active-fg:theme(colors.white)] dark:[--badge-active-fg:theme(colors.white)]",
-        "[--badge-active-border:theme(colors.emerald.700)] dark:[--badge-active-border:theme(colors.emerald.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)]",
-
-        // Process timeline
-        "[--process-step-bg:theme(colors.fuchsia.600)] dark:[--process-step-bg:theme(colors.fuchsia.500)]",
-        "[--process-step-fg:theme(colors.white)] dark:[--process-step-fg:theme(colors.white)]",
-        "[--process-connector:theme(colors.gray.300)] dark:[--process-connector:theme(colors.gray.600)]",
-
-        // Portfolio metrics color
-        "[--metric-fg:theme(colors.fuchsia.600)] dark:[--metric-fg:theme(colors.fuchsia.400)]",
-
-        // 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.emerald.700)] dark:[--footer-link-hover-fg:theme(colors.emerald.400)]",
-        "[--footer-link-hover-bg:theme(colors.emerald.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.17_0.05_152)_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)]",
-
-        // About section accent
-        "[--about-accent:theme(colors.fuchsia.600)] dark:[--about-accent:theme(colors.fuchsia.400)]",
-
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-}
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type Props = React.PropsWithChildren<{ className?: string }>;
+
+/**
+ * DigitalAgency template theme variables wrapper.
+ * Emerald-leaning palette; adjust to match your preset exactly.
+ */
+export function PresetThemeVars({ className, children }: Props) {
+  return (
+    <div
+      className={cn(
+        // Shared button ring
+        "[--btn-ring:theme(colors.emerald.500)] dark:[--btn-ring:theme(colors.emerald.400)]",
+
+        // Inputs
+        "[--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.emerald.200)] dark:[--input-border:theme(colors.emerald.700)]",
+        "[--input-focus-ring:theme(colors.emerald.500)] dark:[--input-focus-ring:theme(colors.emerald.400)]",
+        "[--input-ring-offset:theme(colors.white)] dark:[--input-ring-offset:theme(colors.gray.900)]",
+
+        // Cards
+        "[--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
+        "[--badge-bg:theme(colors.emerald.50)] dark:[--badge-bg:theme(colors.emerald.950)]",
+        "[--badge-fg:theme(colors.emerald.700)] dark:[--badge-fg:theme(colors.emerald.300)]",
+        "[--badge-border:theme(colors.emerald.200)] dark:[--badge-border:theme(colors.emerald.800)]",
+        "[--badge-active-bg:theme(colors.emerald.600)] dark:[--badge-active-bg:theme(colors.emerald.500)]",
+        "[--badge-active-fg:theme(colors.white)] dark:[--badge-active-fg:theme(colors.white)]",
+        "[--badge-active-border:theme(colors.emerald.700)] dark:[--badge-active-border:theme(colors.emerald.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)]",
+
+        // Process timeline
+        "[--process-step-bg:theme(colors.fuchsia.600)] dark:[--process-step-bg:theme(colors.fuchsia.500)]",
+        "[--process-step-fg:theme(colors.white)] dark:[--process-step-fg:theme(colors.white)]",
+        "[--process-connector:theme(colors.gray.300)] dark:[--process-connector:theme(colors.gray.600)]",
+
+        // Portfolio metrics color
+        "[--metric-fg:theme(colors.fuchsia.600)] dark:[--metric-fg:theme(colors.fuchsia.400)]",
+
+        // 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.emerald.700)] dark:[--footer-link-hover-fg:theme(colors.emerald.400)]",
+        "[--footer-link-hover-bg:theme(colors.emerald.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.17_0.05_152)_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)]",
+
+        // About section accent
+        "[--about-accent:theme(colors.fuchsia.600)] dark:[--about-accent:theme(colors.fuchsia.400)]",
+
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}