nextworks 0.2.0-alpha.2 → 0.2.0-alpha.21

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

@@ -1,80 +1,80 @@
-import React from "react";
-import { cn } from "@/lib/utils";
-
-type Props = React.PropsWithChildren<{ className?: string }>;
-
-/**
- * SaaSDashboard template theme variables wrapper.
- * Sky/blue leaning palette; adjust values to your preset branding.
- */
-export function PresetThemeVars({ className, children }: Props) {
-  return (
-    <div
-      className={cn(
-        // Shared button ring
-        "[--btn-ring:theme(colors.sky.500)] dark:[--btn-ring:theme(colors.sky.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.sky.200)] dark:[--input-border:theme(colors.sky.700)]",
-        "[--input-focus-ring:theme(colors.sky.500)] dark:[--input-focus-ring:theme(colors.sky.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.sky.50)] dark:[--badge-bg:theme(colors.sky.950)]",
-        "[--badge-fg:theme(colors.sky.700)] dark:[--badge-fg:theme(colors.sky.300)]",
-        "[--badge-border:theme(colors.sky.200)] dark:[--badge-border:theme(colors.sky.800)]",
-        "[--badge-active-bg:theme(colors.sky.600)] dark:[--badge-active-bg:theme(colors.sky.500)]",
-        "[--badge-active-fg:theme(colors.white)] dark:[--badge-active-fg:theme(colors.white)]",
-        "[--badge-active-border:theme(colors.sky.700)] dark:[--badge-active-border:theme(colors.sky.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)]",
-
-        // Hero background (optional)
-        "[--hero-bg:theme(colors.white)] dark:[--hero-bg:theme(colors.slate.950)]",
-
-        // 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.sky.700)] dark:[--footer-link-hover-fg:theme(colors.sky.400)]",
-        "[--footer-link-hover-bg:theme(colors.sky.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.18_0.05_235)_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)]",
-
-        // FAQ specific (optional overrides; fall back to --btn-* and --card-*)
-        "[--faq-btn-bg:var(--btn-bg)] dark:[--faq-btn-bg:var(--btn-bg)]",
-        "[--faq-btn-fg:var(--btn-fg)] dark:[--faq-btn-fg:var(--btn-fg)]",
-        "[--faq-btn-hover-bg:var(--btn-hover-bg)] dark:[--faq-btn-hover-bg:var(--btn-hover-bg)]",
-        "[--faq-btn-hover-fg:var(--btn-hover-fg)] dark:[--faq-btn-hover-fg:var(--btn-hover-fg)]",
-        "[--faq-answer-bg:var(--card-bg)] dark:[--faq-answer-bg:var(--card-bg)]",
-        "[--faq-answer-fg:var(--card-fg)] dark:[--faq-answer-fg:var(--card-fg)]",
-
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-}
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type Props = React.PropsWithChildren<{ className?: string }>;
+
+/**
+ * SaaSDashboard template theme variables wrapper.
+ * Sky/blue leaning palette; adjust values to your preset branding.
+ */
+export function PresetThemeVars({ className, children }: Props) {
+  return (
+    <div
+      className={cn(
+        // Shared button ring
+        "[--btn-ring:theme(colors.sky.500)] dark:[--btn-ring:theme(colors.sky.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.sky.200)] dark:[--input-border:theme(colors.sky.700)]",
+        "[--input-focus-ring:theme(colors.sky.500)] dark:[--input-focus-ring:theme(colors.sky.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.sky.50)] dark:[--badge-bg:theme(colors.sky.950)]",
+        "[--badge-fg:theme(colors.sky.700)] dark:[--badge-fg:theme(colors.sky.300)]",
+        "[--badge-border:theme(colors.sky.200)] dark:[--badge-border:theme(colors.sky.800)]",
+        "[--badge-active-bg:theme(colors.sky.600)] dark:[--badge-active-bg:theme(colors.sky.500)]",
+        "[--badge-active-fg:theme(colors.white)] dark:[--badge-active-fg:theme(colors.white)]",
+        "[--badge-active-border:theme(colors.sky.700)] dark:[--badge-active-border:theme(colors.sky.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)]",
+
+        // Hero background (optional)
+        "[--hero-bg:theme(colors.white)] dark:[--hero-bg:theme(colors.slate.950)]",
+
+        // 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.sky.700)] dark:[--footer-link-hover-fg:theme(colors.sky.400)]",
+        "[--footer-link-hover-bg:theme(colors.sky.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.18_0.05_235)_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)]",
+
+        // FAQ specific (optional overrides; fall back to --btn-* and --card-*)
+        "[--faq-btn-bg:var(--btn-bg)] dark:[--faq-btn-bg:var(--btn-bg)]",
+        "[--faq-btn-fg:var(--btn-fg)] dark:[--faq-btn-fg:var(--btn-fg)]",
+        "[--faq-btn-hover-bg:var(--btn-hover-bg)] dark:[--faq-btn-hover-bg:var(--btn-hover-bg)]",
+        "[--faq-btn-hover-fg:var(--btn-hover-fg)] dark:[--faq-btn-hover-fg:var(--btn-hover-fg)]",
+        "[--faq-answer-bg:var(--card-bg)] dark:[--faq-answer-bg:var(--card-bg)]",
+        "[--faq-answer-fg:var(--card-fg)] dark:[--faq-answer-fg:var(--card-fg)]",
+
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -1,38 +1,44 @@
-# SaaSDashboard Template Theming
-
-This template is preset-first. It’s wrapped with `PresetThemeVars` to apply a sky/blue palette across shared components. Use local overrides sparingly (e.g., a CTA hover state unique to a section).
-
-## Where it’s wired
-
-- Wrapper: `components/templates/saasdashboard/PresetThemeVars.tsx`
-- Page: `app/templates/saasdashboard/page.tsx`
-
-## 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
-
-This template should be styled primarily by PresetThemeVars. When a section needs to deviate, set overrides locally and keep them minimal.
-
-Example to emphasize button rings inside Pricing only:
-
-```tsx
-<section className="[--btn-ring:theme(colors.sky.600)]">
-  <Pricing />
-</section>
-```
-
-## Outline buttons
-
-For outline variants: set `--btn-bg:transparent` and keep a border width class.
-
-## Should preset components be refactored?
-
-Not required. Over time, simplify presets by removing redundant color classes in favor of the variables. Structure/motion classes should remain.
+# SaaSDashboard Template Theming
+
+This template is preset-first. It’s wrapped with `PresetThemeVars` to apply a sky/blue palette across shared components.
+
+## Where it’s wired
+
+Template paths depend on your router:
+
+- App Router:
+  - Wrapper: `app/templates/saasdashboard/PresetThemeVars.tsx`
+  - Page: `app/templates/saasdashboard/page.tsx`
+- Pages Router:
+  - Wrapper: `components/templates/saasdashboard/PresetThemeVars.tsx`
+  - Page: `pages/templates/saasdashboard/index.tsx`
+
+## 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
+
+This template should be styled primarily by PresetThemeVars. When a section needs to deviate, set overrides locally and keep them minimal.
+
+Example to emphasize button rings inside Pricing only:
+
+```tsx
+<section className="[--btn-ring:theme(colors.sky.600)]">
+  <Pricing />
+</section>
+```
+
+## Outline buttons
+
+For outline variants: set `--btn-bg:transparent` and keep a border width class.
+
+## Should preset components be refactored?
+
+Not required. Over time, simplify presets by removing redundant color classes in favor of the variables. Structure/motion classes should remain.

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

@@ -1,176 +1,129 @@
-"use client";
-
-import React from "react";
-import {
-  Contact as SharedContact,
-  ContactField,
-} from "@/components/sections/Contact";
-
-const saasContactFormData: ContactField[] = [
-  {
-    id: "name",
-    label: "Full Name",
-    placeholder: "Jane Doe",
-    required: true,
-    type: "text",
-  },
-  {
-    id: "email",
-    label: "Work Email",
-    placeholder: "jane@company.com",
-    required: true,
-    type: "email",
-  },
-  {
-    id: "company",
-    label: "Company",
-    placeholder: "Acme Inc.",
-    required: false,
-    type: "text",
-  },
-  {
-    id: "teamSize",
-    label: "Team Size",
-    placeholder: "e.g. 10–50",
-    required: false,
-    type: "text",
-  },
-  {
-    id: "useCase",
-    label: "Primary Use Case",
-    placeholder: "e.g. Product analytics, Ops dashboards",
-    required: false,
-    type: "text",
-  },
-  {
-    id: "message",
-    label: "What would you like to see in the demo?",
-    placeholder: "Share goals, data sources, timeline…",
-    required: true,
-    type: "textarea",
-  },
-];
-
-export function Contact() {
-  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const data = Object.fromEntries(new FormData(e.currentTarget).entries());
-    console.log("Contact form submitted:", data);
-  };
-
-  return (
-    <div className="relative">
-      {/* Gradient mesh overlay */}
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(60rem_60rem_at_0%_0%,rgba(59,130,246,0.08),transparent_40%),radial-gradient(50rem_50rem_at_100%_100%,rgba(168,85,247,0.06),transparent_40%)] opacity-20"
-      />
-      {/* Fine noise/dots texture */}
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(rgba(255,255,255,0.07)_1px,transparent_1px)] [background-size:14px_14px] opacity-[0.05]"
-      />
-
-      <SharedContact
-        id="contact"
-        ariaLabel="SaaS dashboard contact section"
-        fields={saasContactFormData}
-        contactHeaderText="Ready to See DashFlow in Action?"
-        contactSubHeaderText="Tell us a bit about your team and we'll reach out with a tailored demo."
-        // Root and section
-        className="w-full"
-        section={{
-          className:
-            "py-16 px-6 bg-gradient-to-b from-slate-900/95 via-slate-950 to-slate-900/95 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950",
-        }}
-        container={{ className: "mx-auto max-w-4xl" }}
-        // Header slots
-        headerWrapper={{ className: "mb-10 text-center" }}
-        headerText={{
-          className: "text-3xl font-bold font-inter text-white",
-        }}
-        subheaderText={{
-          className:
-            "mt-3 text-base text-white/90 max-w-2xl mx-auto font-inter",
-        }}
-        // Form container
-        form={{
-          className:
-            "bg-card p-8 rounded-xl shadow-xl border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
-        }}
-        // Fields and inputs
-        fieldsWrapper={{ className: "space-y-4" }}
-        field={{ className: "space-y-2" }}
-        label={{
-          className:
-            "text-card-foreground text-sm font-medium font-poppins block",
-        }}
-        input={{
-          className:
-            "w-full p-3 rounded-md font-inter border-[var(--input-border)] bg-[var(--input-bg)] 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:
-            "w-full p-3 rounded-md resize-vertical min-h-[120px] font-inter border-[var(--input-border)] bg-[var(--input-bg)] 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)]",
-        }}
-        // Submit button (wrapper/style/text split)
-        submitButtonWrapper={{ className: "pt-2" }}
-        submitButtonStyle={{
-          variant: "default",
-          size: "lg",
-          className:
-            "w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-400 text-white font-semibold font-inter shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-        }}
-        submitButtonText="Send Request"
-        onSubmit={handleFormSubmit}
-      />
-    </div>
-  );
-}
-
-// "use client";
-
-// import { Contact as SharedContact } from "@/components/sections/Contact";
-
-// export function Contact() {
-//   return (
-//     <div className="relative">
-//       {/* Gradient mesh overlay */}
-//       <div
-//         aria-hidden
-//         className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(60rem_60rem_at_0%_0%,rgba(59,130,246,0.08),transparent_40%),radial-gradient(50rem_50rem_at_100%_100%,rgba(168,85,247,0.06),transparent_40%)] opacity-20"
-//       />
-//       {/* Fine noise/dots texture */}
-//       <div
-//         aria-hidden
-//         className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(rgba(255,255,255,0.07)_1px,transparent_1px)] [background-size:14px_14px] opacity-[0.05]"
-//       />
-//       <SharedContact
-//         contactHeaderText="Ready to See DashFlow in Action?"
-//         contactSubHeaderText="Tell us a bit about your team and we'll reach out with a tailored demo."
-//         section={{
-//           className:
-//             "py-16 px-6 bg-gradient-to-b from-slate-900/95 via-slate-950 to-slate-900/95 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950",
-//         }}
-//         header={{
-//           className:
-//             "text-3xl font-bold font-inter text-white text-center mb-4",
-//         }}
-//         subheader={{
-//           className:
-//             "text-base text-white/90 text-center mb-10 max-w-2xl mx-auto font-inter",
-//         }}
-//         form={{
-//           className: "bg-white dark:bg-gray-800 p-8 rounded-xl shadow-xl",
-//         }}
-//         submitButton={{
-//           text: "Send Request",
-//           variant: "default",
-//           size: "lg",
-//           className:
-//             "w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold font-inter shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-//         }}
-//       />
-//     </div>
-//   );
-// }
+"use client";
+
+import React from "react";
+import {
+  Contact as SharedContact,
+  ContactField,
+} from "@/components/sections/Contact";
+
+const saasContactFormData: ContactField[] = [
+  {
+    id: "name",
+    label: "Full Name",
+    placeholder: "Jane Doe",
+    required: true,
+    type: "text",
+  },
+  {
+    id: "email",
+    label: "Work Email",
+    placeholder: "jane@company.com",
+    required: true,
+    type: "email",
+  },
+  {
+    id: "company",
+    label: "Company",
+    placeholder: "Acme Inc.",
+    required: false,
+    type: "text",
+  },
+  {
+    id: "teamSize",
+    label: "Team Size",
+    placeholder: "e.g. 10–50",
+    required: false,
+    type: "text",
+  },
+  {
+    id: "useCase",
+    label: "Primary Use Case",
+    placeholder: "e.g. Product analytics, Ops dashboards",
+    required: false,
+    type: "text",
+  },
+  {
+    id: "message",
+    label: "What would you like to see in the demo?",
+    placeholder: "Share goals, data sources, timeline…",
+    required: true,
+    type: "textarea",
+  },
+];
+
+export function Contact() {
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+    console.log("Contact form submitted:", data);
+  };
+
+  return (
+    <div className="relative">
+      {/* Gradient mesh overlay */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(60rem_60rem_at_0%_0%,rgba(59,130,246,0.08),transparent_40%),radial-gradient(50rem_50rem_at_100%_100%,rgba(168,85,247,0.06),transparent_40%)] opacity-20"
+      />
+      {/* Fine noise/dots texture */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(rgba(255,255,255,0.07)_1px,transparent_1px)] [background-size:14px_14px] opacity-[0.05]"
+      />
+
+      <SharedContact
+        id="contact"
+        ariaLabel="SaaS dashboard contact section"
+        fields={saasContactFormData}
+        contactHeaderText="Ready to See DashFlow in Action?"
+        contactSubHeaderText="Tell us a bit about your team and we'll reach out with a tailored demo."
+        // Root and section
+        className="w-full"
+        section={{
+          className:
+            "py-16 px-6 bg-gradient-to-b from-slate-900/95 via-slate-950 to-slate-900/95 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950",
+        }}
+        container={{ className: "mx-auto max-w-4xl" }}
+        // Header slots
+        headerWrapper={{ className: "mb-10 text-center" }}
+        headerText={{
+          className: "text-3xl font-bold font-inter text-white",
+        }}
+        subheaderText={{
+          className:
+            "mt-3 text-base text-white/90 max-w-2xl mx-auto font-inter",
+        }}
+        // Form container
+        form={{
+          className:
+            "bg-card p-8 rounded-xl shadow-xl border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
+        }}
+        // Fields and inputs
+        fieldsWrapper={{ className: "space-y-4" }}
+        field={{ className: "space-y-2" }}
+        label={{
+          className:
+            "text-card-foreground text-sm font-medium font-poppins block",
+        }}
+        input={{
+          className:
+            "w-full p-3 rounded-md font-inter border-[var(--input-border)] bg-[var(--input-bg)] 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:
+            "w-full p-3 rounded-md resize-vertical min-h-[120px] font-inter border-[var(--input-border)] bg-[var(--input-bg)] 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)]",
+        }}
+        // Submit button (wrapper/style/text split)
+        submitButtonWrapper={{ className: "pt-2" }}
+        submitButtonStyle={{
+          variant: "default",
+          size: "lg",
+          className:
+            "w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-400 text-white font-semibold font-inter shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
+        }}
+        submitButtonText="Send Request"
+        onSubmit={handleFormSubmit}
+      />
+    </div>
+  );
+}