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

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>
+  );
+}

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

@@ -1,36 +1,42 @@
-# DigitalAgency Template Theming
-
-This template is preset-first. It’s wrapped with `PresetThemeVars` to set a template-wide emerald palette. Shared components read variables with safe token fallbacks. Use local overrides sparingly (e.g., a specific CTA state).
-
-## Where it’s wired
-
-- Wrapper: `components/templates/digitalagency/PresetThemeVars.tsx`
-- Page: `app/templates/digitalagency/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`, plus active variants
-- 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. Override on a specific section only when needed:
-
-```tsx
-<section className="[--btn-ring:theme(colors.emerald.600)]">
-  <CTA />
-</section>
-```
-
-## Outline buttons
-
-Always set `--btn-bg:transparent` and keep a border width class present when overriding outline colors.
-
-## Should preset components be refactored?
-
-Not mandatory. As you touch presets, prefer removing hard-coded color classes and let the var contract style them. Keep structure (spacing, layout, motion) classes.
+# DigitalAgency Template Theming
+
+This template is preset-first. It’s wrapped with `PresetThemeVars` to set a template-wide emerald palette. Shared components read variables with safe token fallbacks. Use local overrides sparingly (e.g., a specific CTA state).
+
+## Where it’s wired
+
+Template paths depend on your router:
+
+- App Router:
+  - Wrapper: `app/templates/digitalagency/PresetThemeVars.tsx`
+  - Page: `app/templates/digitalagency/page.tsx`
+- Pages Router:
+  - Wrapper: `components/templates/digitalagency/PresetThemeVars.tsx`
+  - Page: `pages/templates/digitalagency/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`, plus active variants
+- 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. Override on a specific section only when needed:
+
+```tsx
+<section className="[--btn-ring:theme(colors.emerald.600)]">
+  <CTA />
+</section>
+```
+
+## Outline buttons
+
+Always set `--btn-bg:transparent` and keep a border width class present when overriding outline colors.
+
+## Should preset components be refactored?
+
+Not mandatory. As you touch presets, prefer removing hard-coded color classes and let the var contract style them. Keep structure (spacing, layout, motion) classes.

package/dist/kits/blocks/app/templates/digitalagency/components/About.tsx

@@ -1,99 +1,71 @@
-"use client";
-
-import React from "react";
-import { About as SharedAbout } from "@/components/sections/About";
-
-export function About() {
-  return (
-    <SharedAbout
-      // Content
-      aboutSubheadingText="About Us"
-      aboutHeadingText="Your Success Is Our Mission"
-      aboutContentText="With 50+ successful projects and 5 years of experience, we specialize in creating digital solutions that drive real business growth. Our team combines creative design with data-driven strategy."
-      aboutTextAlign="center"
-      // Stats
-      showStats={true}
-      animateStats={true}
-      aboutStats={[
-        { value: "2.5", suffix: "k+", label: "Leads Generated" },
-        { value: "4.8", suffix: "%", label: "Avg. CTR" },
-        { value: "92", suffix: "%", label: "Client Retention" },
-        { value: "12", suffix: "M", label: "Ad Spend Managed" },
-      ]}
-      // Slots / styling
-      section={{
-        className: "py-16 md:py-20 lg:py-24 bg-white dark:bg-gray-800",
-      }}
-      container={{
-        className: "max-w-7xl mx-auto px-6",
-      }}
-      inner={{
-        className: "flex flex-col gap-12",
-      }}
-      contentContainer={{
-        className: "max-w-4xl mx-auto",
-      }}
-      contentStack={{
-        className: "flex flex-col gap-6",
-      }}
-      subheading={{
-        className:
-          "text-sm font-semibold font-poppins uppercase tracking-wider text-[var(--about-accent)]",
-      }}
-      heading={{
-        className:
-          "text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-[var(--heading-fg)]",
-      }}
-      content={{
-        className:
-          "text-xl md:text-2xl max-w-3xl mx-auto leading-relaxed text-[var(--subheading-fg)]",
-      }}
-      statsSection={{
-        className:
-          "bg-card p-8 rounded-xl shadow-lg mx-auto max-w-5xl w-full border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
-      }}
-      statsGrid={{
-        className: "grid grid-cols-2 md:grid-cols-4 gap-8 justify-items-center",
-      }}
-      statItem={{
-        className: "flex flex-col items-center gap-2",
-      }}
-      statNumber={{
-        className:
-          "text-4xl md:text-5xl font-bold font-poppins leading-none text-[var(--about-accent)]",
-      }}
-      statLabel={{
-        className:
-          "text-sm font-medium font-inter text-center text-[var(--card-muted-fg)]",
-      }}
-    />
-  );
-}
-
-// "use client";
-
-// import React from "react";
-// import { About as SharedAbout } from "@/components/sections/About";
-
-// export function About() {
-//   return (
-//     <SharedAbout
-//       aboutHeadingText="Your Success Is Our Mission"
-//       aboutContentText="With 50+ successful projects and 5 years of experience, we specialize in creating digital solutions that drive real business growth. Our team combines creative design with data-driven strategy."
-//       aboutTextAlign="center"
-//       showStats={true}
-//       section={{
-//         className: "py-16 md:py-20 lg:py-24 bg-white dark:bg-gray-800",
-//       }}
-//       heading={{
-//         className: "text-4xl md:text-5xl lg:text-6xl font-bold text-foreground",
-//       }}
-//       content={{
-//         className:
-//           "text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed",
-//       }}
-//     />
-//   );
-// }
-
-// export default About;
+"use client";
+
+import React from "react";
+import { About as SharedAbout } from "@/components/sections/About";
+
+export function About() {
+  return (
+    <SharedAbout
+      // Content
+      aboutSubheadingText="About Us"
+      aboutHeadingText="Your Success Is Our Mission"
+      aboutContentText="With 50+ successful projects and 5 years of experience, we specialize in creating digital solutions that drive real business growth. Our team combines creative design with data-driven strategy."
+      aboutTextAlign="center"
+      // Stats
+      showStats={true}
+      animateStats={true}
+      aboutStats={[
+        { value: "2.5", suffix: "k+", label: "Leads Generated" },
+        { value: "4.8", suffix: "%", label: "Avg. CTR" },
+        { value: "92", suffix: "%", label: "Client Retention" },
+        { value: "12", suffix: "M", label: "Ad Spend Managed" },
+      ]}
+      // Slots / styling
+      section={{
+        className: "py-16 md:py-20 lg:py-24 bg-white dark:bg-gray-800",
+      }}
+      container={{
+        className: "max-w-7xl mx-auto px-6",
+      }}
+      inner={{
+        className: "flex flex-col gap-12",
+      }}
+      contentContainer={{
+        className: "max-w-4xl mx-auto",
+      }}
+      contentStack={{
+        className: "flex flex-col gap-6",
+      }}
+      subheading={{
+        className:
+          "text-sm font-semibold font-poppins uppercase tracking-wider text-[var(--about-accent)]",
+      }}
+      heading={{
+        className:
+          "text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-[var(--heading-fg)]",
+      }}
+      content={{
+        className:
+          "text-xl md:text-2xl max-w-3xl mx-auto leading-relaxed text-[var(--subheading-fg)]",
+      }}
+      statsSection={{
+        className:
+          "bg-card p-8 rounded-xl shadow-lg mx-auto max-w-5xl w-full border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
+      }}
+      statsGrid={{
+        className: "grid grid-cols-2 md:grid-cols-4 gap-8 justify-items-center",
+      }}
+      statItem={{
+        className: "flex flex-col items-center gap-2",
+      }}
+      statNumber={{
+        className:
+          "text-4xl md:text-5xl font-bold font-poppins leading-none text-[var(--about-accent)]",
+      }}
+      statLabel={{
+        className:
+          "text-sm font-medium font-inter text-center text-[var(--card-muted-fg)]",
+      }}
+    />
+  );
+}

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

@@ -1,74 +1,40 @@
-"use client";
-
-import React from "react";
-import { CTA as SharedCTA } from "@/components/sections/CTA";
-
-export function CTA() {
-  return (
-    <SharedCTA
-      // Background colors moved to the section slot
-      section={{
-        className:
-          "bg-sky-50 dark:bg-gray-900 text-foreground [--heading-fg:rgb(17,24,39)] dark:[--heading-fg:white] [--subheading-fg:rgba(17,24,39,0.8)] dark:[--subheading-fg:rgba(255,255,255,0.85)] [--description-fg:rgba(17,24,39,0.75)] dark:[--description-fg:rgba(255,255,255,0.75)]",
-      }}
-      // Layout/height/centering handled by the container slot
-      container={{
-        className:
-          "mx-auto flex h-[32vh] w-full max-w-6xl flex-col items-center justify-center overflow-hidden px-4 pb-8",
-      }}
-      // Heading mapped to the new headingText slot
-      headingText={{
-        text: "Ready To Transform Your Business?",
-        className:
-          "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins leading-tight",
-      }}
-      // Use actionsWrapper for spacing instead of margin on the button
-      actionsWrapper={{
-        className:
-          "mt-6 flex flex-col items-center gap-3 sm:flex-row [--btn-ring:rgba(192,38,211,0.35)] dark:[--btn-ring:rgba(192,38,211,0.45)]",
-      }}
-      // Primary CTA mapped to ctaButton + ctaButtonStyle
-      ctaButton={{ label: "Get Your Free Quote", href: "#contact" }}
-      ctaButtonStyle={{
-        variant: "default",
-        size: "lg",
-        className:
-          "font-poppins shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 [--btn-bg:#c026d3] dark:[--btn-bg:#c026d3] [--btn-hover-bg:#a21caf] dark:[--btn-hover-bg:#a21caf] [--btn-fg:#ffffff] dark:[--btn-fg:#ffffff] hover:[--btn-hover-fg:#ffffff] dark:hover:[--btn-hover-fg:#ffffff] [--btn-border:transparent]",
-      }}
-      // Preserve the previous top margin on the heading
-      spacing={{ topMargin: "mt-[8vh]" }}
-    />
-  );
-}
-
-// "use client";
-
-// import React from "react";
-// import { CTA as SharedCTA } from "@/components/sections/CTA";
-
-// export function CTA() {
-//   return (
-//     <SharedCTA
-//       heading={{
-//         text: "Ready To Transform Your Business?",
-//         className:
-//           "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins leading-tight",
-//       }}
-//       section={{
-//         className:
-//           "flex h-[32vh] flex-col items-center overflow-hidden bg-fuchsia-50 dark:bg-gray-900",
-//       }}
-//       button={{
-//         text: "Get Your Free Quote",
-//         href: "#contact",
-//         variant: "default",
-//         size: "lg",
-//         className:
-//           "mt-6 bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-poppins shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-//       }}
-//       spacing={{ topMargin: "mt-[8vh]" }}
-//     />
-//   );
-// }
-
-// export default CTA;
+"use client";
+
+import React from "react";
+import { CTA as SharedCTA } from "@/components/sections/CTA";
+
+export function CTA() {
+  return (
+    <SharedCTA
+      // Background colors
+      section={{
+        className:
+          "bg-sky-50 dark:bg-gray-900 text-foreground [--heading-fg:rgb(17,24,39)] dark:[--heading-fg:white] [--subheading-fg:rgba(17,24,39,0.8)] dark:[--subheading-fg:rgba(255,255,255,0.85)] [--description-fg:rgba(17,24,39,0.75)] dark:[--description-fg:rgba(255,255,255,0.75)]",
+      }}
+      // Layout/height/centering handled by the container slot
+      container={{
+        className:
+          "mx-auto flex h-[32vh] w-full max-w-6xl flex-col items-center justify-center overflow-hidden px-4 pb-8",
+      }}
+      // Heading text
+      headingText={{
+        text: "Ready To Transform Your Business?",
+        className:
+          "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins leading-tight",
+      }}
+      // Use actionsWrapper for spacing instead of margin on the button
+      actionsWrapper={{
+        className:
+          "mt-6 flex flex-col items-center gap-3 sm:flex-row [--btn-ring:rgba(192,38,211,0.35)] dark:[--btn-ring:rgba(192,38,211,0.45)]",
+      }}
+      ctaButton={{ label: "Get Your Free Quote", href: "#contact" }}
+      ctaButtonStyle={{
+        variant: "default",
+        size: "lg",
+        className:
+          "font-poppins shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 [--btn-bg:#c026d3] dark:[--btn-bg:#c026d3] [--btn-hover-bg:#a21caf] dark:[--btn-hover-bg:#a21caf] [--btn-fg:#ffffff] dark:[--btn-fg:#ffffff] hover:[--btn-hover-fg:#ffffff] dark:hover:[--btn-hover-fg:#ffffff] [--btn-border:transparent]",
+      }}
+      spacing={{ topMargin: "mt-[8vh]" }}
+    />
+  );
+}