npm - nextworks - Versions diffs - 0.0.1 → 0.1.0-alpha.0 - Mend

nextworks 0.0.1 → 0.1.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (277) hide show

package/dist/kits/auth-core/scripts/seed-demo.mjs ADDED Viewed

@@ -0,0 +1,40 @@
+import bcrypt from "bcryptjs";
+import { PrismaClient } from "@prisma/client";
+const prisma = new PrismaClient();
+async function main() {
+  const email = process.env.SEED_ADMIN_EMAIL || "admin@example.com";
+  const password = process.env.SEED_ADMIN_PASSWORD || "password123";
+  const hashed = await bcrypt.hash(password, 10);
+  let user = await prisma.user.findUnique({ where: { email } });
+  if (!user) {
+    user = await prisma.user.create({
+      data: { email, name: "Seed Admin", password: hashed, role: "admin" },
+    });
+    console.log("Created admin user:", email);
+  } else {
+    user = await prisma.user.update({ where: { email }, data: { role: "admin", password: hashed } });
+    console.log("Updated admin user:", email);
+  }
+  const postsData = [
+    { title: "Welcome to Nextworks", content: "This is a seeded post.", authorId: user.id, published: true },
+    { title: "Seeded Demo Post", content: "Another seeded post.", authorId: user.id, published: false },
+  ];
+  for (const p of postsData) {
+    const existing = await prisma.post.findFirst({ where: { title: p.title } });
+    if (existing) await prisma.post.update({ where: { id: existing.id }, data: p });
+    else await prisma.post.create({ data: p });
+  }
+  console.log("Seeded posts.");
+}
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+}).finally(async () => await prisma.$disconnect());

package/dist/kits/auth-core/types/next-auth.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+// Copyright (c) 2025 Jakob Bro Liebe Hansen
+// SPDX-License-Identifier: MIT
+import NextAuth, { DefaultSession } from "next-auth";
+declare module "next-auth" {
+  interface Session {
+    user: {
+      id: string;
+      email: string;
+      name?: string | null;
+      image?: string | null;
+      role?: string;
+    } & DefaultSession["user"];
+  }
+}
+declare module "next-auth/jwt" {
+  interface JWT {
+    id: string;
+    name: string;
+    email: string;
+    role?: string;
+  }
+}

package/dist/kits/blocks/README.md ADDED Viewed

@@ -0,0 +1,53 @@
+Blocks kit (cli/kits/blocks)
+This folder contains the files that the CLI copies into a target Next.js project when installing the "blocks" kit.
+What the kit includes
+- UI primitive components (Button, Input, Card, Form primitives, Checkbox, Switch, Toaster)
+- Sections and templates (About, CTA, Contact, Hero variants, Navbar, Pricing, Features, etc.)
+- Theme and provider utilities (theme-provider, enhanced-theme-provider, lib/themes)
+- app/globals.css and placeholder assets used by templates
+Files included are defined in `cli/cli_manifests/blocks_manifest.json` in the Nextworks repository. When updating this kit inside the repo, keep that manifest and this kit folder in sync.
+Post-install notes
+1. Install dependencies copied by the kit (the CLI will merge package-deps.json into your package.json):
+   npm install
+2. Wrap your app with the AppProviders wrapper in app/layout.tsx to enable fonts, presets, CSS variable injection, session provider, and the app toaster. Example:
+   // at the top of app/layout.tsx
+   import "./globals.css"; // optional if you already import it elsewhere in your project
+   import AppProviders from "@/components/app-providers";
+   export default function RootLayout({ children }) {
+   return (
+   <html lang="en">
+   <body>
+   <AppProviders>
+   {children}
+   </AppProviders>
+   </body>
+   </html>
+   );
+   }
+   Notes:
+   - AppProviders imports globals.css for you, so you don't strictly need to import it separately, but ensure you have the file copied into your project (app/globals.css).
+   - If you prefer to only use the EnhancedThemeProvider, you can still import it directly from "@/components/enhanced-theme-provider".
+3. Ensure `app/globals.css` exists in your project and that Tailwind is configured.
+4. Placeholder assets are located under `public/placeholders`. These should already have been copied by the CLI; if you move files around, keep the paths aligned or update the template image references.
+Publishing notes (for maintainers)
+- This kit is UI-only and has no server/api or prisma files.
+- The manifest file `cli/cli_manifests/blocks_manifest.json` is used by the CLI to determine which files to copy when you build and publish the `nextworks` CLI.
+CLI behavior (for maintainers)
+- The CLI copies the files listed in `cli/cli_manifests/blocks_manifest.json`. Keep that manifest and this kit folder in sync when editing the Nextworks repo.

package/dist/kits/blocks/app/globals.css ADDED Viewed

@@ -0,0 +1,175 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@custom-variant dark (&:is(.dark *));
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --font-outfit: var(--font-outfit);
+  --font-inter: var(--font-inter);
+  --font-poppins: var(--font-poppins);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  /* Switch thumb color by default (light theme): dark thumb on very light tracks */
+  --switch-thumb: oklch(0.145 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --switch-thumb: oklch(0.985 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    /* Fallback to avoid horizontal layout shift between pages with and without scrollbars */
+    overflow-y: scroll;
+  }
+  html {
+    scroll-behavior: smooth;
+    /* Reserve gutter space for the scrollbar to prevent content from shifting */
+    scrollbar-gutter: stable;
+  }
+}
+/* Font utility classes */
+.font-poppins {
+  font-family: var(--font-poppins), var(--font-sans);
+}
+.font-inter {
+  font-family: var(--font-inter), var(--font-sans);
+}
+/* Hero pattern overlay */
+.hero-pattern {
+  position: relative;
+}
+.hero-pattern::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
+  background-size: 28px 28px;
+  opacity: 0.5;
+}
+/* Monochrome gallery only for 'default' and 'monochrome' theme variants */
+html[data-theme-variant="default"] .component-gallery,
+html[data-theme-variant="monochrome"] .component-gallery,
+html[data-theme-variant="default"] [data-radix-portal],
+html[data-theme-variant="monochrome"] [data-radix-portal] {
+  filter: grayscale(1);
+}
+/* Explicitly removes filter for other variants */
+html:not([data-theme-variant="default"]):not([data-theme-variant="monochrome"])
+  .component-gallery,
+html:not([data-theme-variant="default"]):not([data-theme-variant="monochrome"])
+  [data-radix-portal] {
+  filter: none;
+}

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

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

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

@@ -0,0 +1,36 @@
+# 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.

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

@@ -0,0 +1,99 @@
+"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;

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

@@ -0,0 +1,74 @@
+"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;