@nextworks/blocks-sections 0.1.0-alpha.0

package/README.md

@@ -0,0 +1,44 @@
+# @nextworks/blocks-sections
+
+Reusable page sections for marketing / SaaS sites, built on top of `@nextworks/blocks-core`.
+
+Examples include:
+
+- Navbar, Hero, Features, Pricing, Testimonials
+- FAQ, Contact, Newsletter
+- Portfolio, Services, Team, Trust badges
+
+## Installation
+
+```bash
+npm install @nextworks/blocks-sections @nextworks/blocks-core
+# or
+pnpm add @nextworks/blocks-sections @nextworks/blocks-core
+# or
+yarn add @nextworks/blocks-sections @nextworks/blocks-core
+```
+
+## Usage
+
+```tsx
+import { Navbar, Hero, Features, Pricing } from "@nextworks/blocks-sections";
+
+export default function Page() {
+  return (
+    <>
+      <Navbar />
+      <Hero />
+      <Features />
+      <Pricing />
+    </>
+  );
+}
+```
+
+These components assume you have a Tailwind + React + Next.js setup and that you wrap your app with the appropriate theme provider from `@nextworks/blocks-core`.
+
+For a copy-based workflow (files under `components/` and `app/` in your own app), use the CLI:
+
+```bash
+npx nextworks add blocks
+```

package/dist/components/About.d.ts

@@ -0,0 +1,93 @@
+import React from "react";
+/**
+ * Data used to render a single statistic in the About section.
+ *
+ * @remarks
+ * Typical examples include counts like projects completed or years of
+ * experience. The suffix lets you append symbols such as "+", "%", or "/7".
+ *
+ * @public
+ */
+export interface AboutStatData {
+    /** The main numeric/text value (e.g., "50") */
+    value?: string;
+    /** Short label describing the stat (e.g., "Successful Projects") */
+    label?: string;
+    /** Optional suffix appended to the value (e.g., "+") */
+    suffix?: string;
+}
+/**
+ * Props for the About section component.
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides (section, container,
+ *   inner, contentContainer, contentStack, subheading, heading, content,
+ *   statsSection, statsGrid, statItem, statNumber, statLabel). Consumer
+ *   classes are merged after defaults via cn().
+ * - Layout: text alignment can be set via aboutTextAlign.
+ * - Motion: animateStats enables a count-up animation for numeric stats on first viewport visibility.
+ * - Accessibility: rendered as a semantic <section> with aria-label.
+ */
+interface AboutProps {
+    /** Main heading text displayed in the section header. @defaultValue "Your Success Is Our Mission" */
+    aboutHeadingText?: string;
+    /** Optional subheading text displayed above the heading. */
+    aboutSubheadingText?: string;
+    /** Primary paragraph/content body. @defaultValue a short marketing blurb */
+    aboutContentText?: string;
+    /** Optional list of statistics to render below the content. @defaultValue defaultStatsData */
+    aboutStats?: AboutStatData[];
+    /** Optional top-level class to override the section root */
+    className?: string;
+    /** Slot-style overrides */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    inner?: {
+        className?: string;
+    };
+    contentContainer?: {
+        className?: string;
+    };
+    contentStack?: {
+        className?: string;
+    };
+    subheading?: {
+        className?: string;
+    };
+    heading?: {
+        className?: string;
+    };
+    content?: {
+        className?: string;
+    };
+    statsSection?: {
+        className?: string;
+    };
+    statsGrid?: {
+        className?: string;
+    };
+    statItem?: {
+        className?: string;
+    };
+    statNumber?: {
+        className?: string;
+    };
+    statLabel?: {
+        className?: string;
+    };
+    /** Controls text alignment at various breakpoints. @defaultValue "center" */
+    aboutTextAlign?: "left" | "center" | "right";
+    /** Whether to render the stats block at the bottom. @defaultValue true */
+    showStats?: boolean;
+    /** Enable count-up animation for numeric stats when they enter the viewport. @defaultValue false */
+    animateStats?: boolean;
+    /** ARIA label for the section. @defaultValue "About section" */
+    ariaLabel?: string;
+}
+export declare function About({ aboutHeadingText, aboutSubheadingText, aboutContentText, aboutStats, className, section, container, inner, contentContainer, contentStack, subheading, heading, content, statsSection, statsGrid, statItem, statNumber, statLabel, aboutTextAlign, showStats, animateStats, ariaLabel, }: AboutProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=About.d.ts.map

package/dist/components/About.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"About.d.ts","sourceRoot":"","sources":["../../src/components/About.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;GAQG;AACH,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;GAWG;AACH,UAAU,UAAU;IAClB,qGAAqG;IACrG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8FAA8F;IAC9F,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAE7B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,gBAAgB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,QAAQ,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAEnC,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC7C,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oGAAoG;IACpG,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6FD,wBAAgB,KAAK,CAAC,EACpB,gBAAgD,EAChD,mBAAmB,EACnB,gBAAyJ,EACzJ,UAA6B,EAC7B,SAAS,EACT,OAAyD,EACzD,SAAmD,EACnD,KAA6C,EAC7C,gBAAqD,EACrD,YAAmD,EACnD,UAGC,EACD,OAEC,EACD,OAGC,EACD,YAGC,EACD,SAEC,EACD,QAA4D,EAC5D,UAEC,EACD,SAGC,EACD,cAAyB,EACzB,SAAgB,EAChB,YAAoB,EACpB,SAA2B,GAC5B,EAAE,UAAU,qBAoFZ"}

package/dist/components/About.js

@@ -0,0 +1,129 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * Default statistics displayed if no aboutStats are provided.
+ */
+const defaultStatsData = [
+    { value: "50", label: "Successful Projects", suffix: "+" },
+    { value: "5", label: "Years Experience", suffix: "+" },
+    { value: "100", label: "Happy Clients", suffix: "%" },
+    { value: "24", label: "Support Hours", suffix: "/7" },
+];
+/**
+ * About section with a heading, optional subheading/content, and an optional
+ * stats block.
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides. Consumer classes are
+ *   merged after defaults via cn().
+ * - Layout: control text alignment with aboutTextAlign.
+ * - Accessibility: rendered as a semantic <section> with aria-label.
+ *
+ * @example
+ * <About
+ *   aboutHeadingText="Your Success Is Our Mission"
+ *   aboutContentText="We build digital products that convert."
+ *   aboutStats={[{ value: "50", label: "Successful Projects", suffix: "+" }]}
+ * />
+ */
+/**
+ * About section with a heading, optional subheading/content, and an optional
+ * stats block.
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides. Consumer classes are
+ *   merged after defaults via cn().
+ * - Layout: control text alignment with aboutTextAlign.
+ * - Accessibility: rendered as a semantic <section> with aria-label.
+ *
+ * @example
+ * <About
+ *   aboutHeadingText="Your Success Is Our Mission"
+ *   aboutContentText="We build digital products that convert."
+ *   aboutStats={[{ value: "50", label: "Successful Projects", suffix: "+" }]}
+ * />
+ */
+/**
+ * Animated count-up for integers using requestAnimationFrame.
+ * Eases out and runs once when shouldStart becomes true.
+ */
+function AnimatedCount({ end, shouldStart, duration = 1500, }) {
+    const [value, setValue] = React.useState(0);
+    const [done, setDone] = React.useState(false);
+    const prefersReduced = React.useMemo(() => {
+        if (typeof window === "undefined")
+            return false;
+        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }, []);
+    React.useEffect(() => {
+        if (prefersReduced)
+            return; // show end value immediately below
+        if (!shouldStart || done)
+            return;
+        let raf;
+        const startTs = performance.now();
+        const tick = (now) => {
+            const progress = Math.min((now - startTs) / duration, 1);
+            const eased = 1 - Math.pow(1 - progress, 3);
+            const next = Math.round(eased * end);
+            setValue(next);
+            if (progress < 1) {
+                raf = requestAnimationFrame(tick);
+            }
+            else {
+                setDone(true);
+            }
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [shouldStart, end, duration, done, prefersReduced]);
+    if (prefersReduced)
+        return _jsx(_Fragment, { children: end });
+    return _jsx(_Fragment, { children: value });
+}
+export function About({ aboutHeadingText = "Your Success Is Our Mission", aboutSubheadingText, aboutContentText = "With 50+ successful projects and 5 years of experience, we specialize in creating digital solutions that drive real business growth.", aboutStats = defaultStatsData, className, section = { className: "py-20 bg-muted text-foreground" }, 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 text-primary uppercase tracking-wider",
+}, heading = {
+    className: "text-3xl font-bold font-poppins text-foreground leading-tight",
+}, content = {
+    className: "text-lg font-inter text-foreground leading-relaxed opacity-90 max-w-3xl",
+}, statsSection = {
+    className: "bg-card p-8 rounded-xl shadow-lg mx-auto max-w-5xl w-full border border-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 font-bold font-poppins text-foreground leading-none",
+}, statLabel = {
+    className: "text-sm font-medium font-inter text-foreground text-center opacity-80",
+}, aboutTextAlign = "center", showStats = true, animateStats = false, ariaLabel = "About section", }) {
+    const textAlignClasses = {
+        left: "text-left",
+        right: "text-right",
+        center: "text-center",
+    };
+    const statsSectionRef = React.useRef(null);
+    const [shouldStartCount, setShouldStartCount] = React.useState(false);
+    React.useEffect(() => {
+        if (!animateStats)
+            return;
+        if (!statsSectionRef.current)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    setShouldStartCount(true);
+                    observer.disconnect();
+                    break;
+                }
+            }
+        }, { threshold: 0.3 });
+        observer.observe(statsSectionRef.current);
+        return () => observer.disconnect();
+    }, [animateStats]);
+    return (_jsx("section", { className: cn(section.className, className), "aria-label": ariaLabel, children: _jsx("div", { className: cn(container.className), children: _jsxs("div", { className: cn(inner.className), children: [_jsx("div", { className: cn(contentContainer.className, textAlignClasses[aboutTextAlign]), children: _jsxs("div", { className: cn(contentStack.className), children: [aboutSubheadingText && (_jsx("div", { className: cn(subheading.className), children: aboutSubheadingText })), _jsx("h2", { className: cn(heading.className), children: aboutHeadingText }), _jsx("p", { className: cn(content.className), children: aboutContentText })] }) }), showStats && (aboutStats === null || aboutStats === void 0 ? void 0 : aboutStats.length) ? (_jsx("div", { ref: statsSectionRef, className: cn(statsSection.className), children: _jsx("div", { className: cn(statsGrid.className), children: aboutStats.map((s, i) => {
+                                var _a;
+                                return (_jsxs("div", { className: cn(statItem.className), children: [_jsxs("div", { className: cn(statNumber.className), children: [animateStats && Number.isFinite(Number(s.value)) ? (_jsx(AnimatedCount, { end: Number(s.value), shouldStart: shouldStartCount })) : (s.value), s.suffix] }), _jsx("div", { className: cn(statLabel.className), children: s.label })] }, `${(_a = s.label) !== null && _a !== void 0 ? _a : "stat"}-${i}`));
+                            }) }) })) : null] }) }) }));
+}

package/dist/components/About.jsx

@@ -0,0 +1,153 @@
+"use client";
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * Default statistics displayed if no aboutStats are provided.
+ */
+const defaultStatsData = [
+    { value: "50", label: "Successful Projects", suffix: "+" },
+    { value: "5", label: "Years Experience", suffix: "+" },
+    { value: "100", label: "Happy Clients", suffix: "%" },
+    { value: "24", label: "Support Hours", suffix: "/7" },
+];
+/**
+ * About section with a heading, optional subheading/content, and an optional
+ * stats block.
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides. Consumer classes are
+ *   merged after defaults via cn().
+ * - Layout: control text alignment with aboutTextAlign.
+ * - Accessibility: rendered as a semantic <section> with aria-label.
+ *
+ * @example
+ * <About
+ *   aboutHeadingText="Your Success Is Our Mission"
+ *   aboutContentText="We build digital products that convert."
+ *   aboutStats={[{ value: "50", label: "Successful Projects", suffix: "+" }]}
+ * />
+ */
+/**
+ * About section with a heading, optional subheading/content, and an optional
+ * stats block.
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides. Consumer classes are
+ *   merged after defaults via cn().
+ * - Layout: control text alignment with aboutTextAlign.
+ * - Accessibility: rendered as a semantic <section> with aria-label.
+ *
+ * @example
+ * <About
+ *   aboutHeadingText="Your Success Is Our Mission"
+ *   aboutContentText="We build digital products that convert."
+ *   aboutStats={[{ value: "50", label: "Successful Projects", suffix: "+" }]}
+ * />
+ */
+/**
+ * Animated count-up for integers using requestAnimationFrame.
+ * Eases out and runs once when shouldStart becomes true.
+ */
+function AnimatedCount({ end, shouldStart, duration = 1500, }) {
+    const [value, setValue] = React.useState(0);
+    const [done, setDone] = React.useState(false);
+    const prefersReduced = React.useMemo(() => {
+        if (typeof window === "undefined")
+            return false;
+        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }, []);
+    React.useEffect(() => {
+        if (prefersReduced)
+            return; // show end value immediately below
+        if (!shouldStart || done)
+            return;
+        let raf;
+        const startTs = performance.now();
+        const tick = (now) => {
+            const progress = Math.min((now - startTs) / duration, 1);
+            const eased = 1 - Math.pow(1 - progress, 3);
+            const next = Math.round(eased * end);
+            setValue(next);
+            if (progress < 1) {
+                raf = requestAnimationFrame(tick);
+            }
+            else {
+                setDone(true);
+            }
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [shouldStart, end, duration, done, prefersReduced]);
+    if (prefersReduced)
+        return <>{end}</>;
+    return <>{value}</>;
+}
+export function About({ aboutHeadingText = "Your Success Is Our Mission", aboutSubheadingText, aboutContentText = "With 50+ successful projects and 5 years of experience, we specialize in creating digital solutions that drive real business growth.", aboutStats = defaultStatsData, className, section = { className: "py-20 bg-muted text-foreground" }, 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 text-primary uppercase tracking-wider",
+}, heading = {
+    className: "text-3xl font-bold font-poppins text-foreground leading-tight",
+}, content = {
+    className: "text-lg font-inter text-foreground leading-relaxed opacity-90 max-w-3xl",
+}, statsSection = {
+    className: "bg-card p-8 rounded-xl shadow-lg mx-auto max-w-5xl w-full border border-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 font-bold font-poppins text-foreground leading-none",
+}, statLabel = {
+    className: "text-sm font-medium font-inter text-foreground text-center opacity-80",
+}, aboutTextAlign = "center", showStats = true, animateStats = false, ariaLabel = "About section", }) {
+    const textAlignClasses = {
+        left: "text-left",
+        right: "text-right",
+        center: "text-center",
+    };
+    const statsSectionRef = React.useRef(null);
+    const [shouldStartCount, setShouldStartCount] = React.useState(false);
+    React.useEffect(() => {
+        if (!animateStats)
+            return;
+        if (!statsSectionRef.current)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    setShouldStartCount(true);
+                    observer.disconnect();
+                    break;
+                }
+            }
+        }, { threshold: 0.3 });
+        observer.observe(statsSectionRef.current);
+        return () => observer.disconnect();
+    }, [animateStats]);
+    return (<section className={cn(section.className, className)} aria-label={ariaLabel}>
+      <div className={cn(container.className)}>
+        <div className={cn(inner.className)}>
+          <div className={cn(contentContainer.className, textAlignClasses[aboutTextAlign])}>
+            <div className={cn(contentStack.className)}>
+              {aboutSubheadingText && (<div className={cn(subheading.className)}>
+                  {aboutSubheadingText}
+                </div>)}
+              <h2 className={cn(heading.className)}>{aboutHeadingText}</h2>
+              <p className={cn(content.className)}>{aboutContentText}</p>
+            </div>
+          </div>
+          {showStats && (aboutStats === null || aboutStats === void 0 ? void 0 : aboutStats.length) ? (<div ref={statsSectionRef} className={cn(statsSection.className)}>
+              <div className={cn(statsGrid.className)}>
+                {aboutStats.map((s, i) => {
+                var _a;
+                return (<div key={`${(_a = s.label) !== null && _a !== void 0 ? _a : "stat"}-${i}`} className={cn(statItem.className)}>
+                    <div className={cn(statNumber.className)}>
+                      {animateStats && Number.isFinite(Number(s.value)) ? (<AnimatedCount end={Number(s.value)} shouldStart={shouldStartCount}/>) : (s.value)}
+                      {s.suffix}
+                    </div>
+                    <div className={cn(statLabel.className)}>{s.label}</div>
+                  </div>);
+            })}
+              </div>
+            </div>) : null}
+        </div>
+      </div>
+    </section>);
+}

package/dist/components/CTA.d.ts

@@ -0,0 +1,118 @@
+import React from "react";
+/**
+ * Props for the CTA section component.
+ *
+ * @remarks
+ * Uses a slot-style API for Tailwind className overrides. Each slot's
+ * className is merged with component defaults via cn().
+ *
+ * Prefer customizing spacing via headingText.className and other slot
+ * classNames rather than legacy spacing props.
+ *
+ * @public
+ */
+interface CTAProps {
+    /**
+     * Optional id for the section.
+     * @defaultValue "cta"
+     */
+    id?: string;
+    /** Optional top-level class to override the section root */
+    className?: string;
+    /** Styling configuration objects (slot-style pattern like Navbar) */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    contentWrapper?: {
+        className?: string;
+    };
+    headingText?: {
+        text?: string;
+        className?: string;
+    };
+    subheadingText?: {
+        text?: string;
+        className?: string;
+    };
+    descriptionText?: {
+        text?: string;
+        className?: string;
+    };
+    actionsWrapper?: {
+        className?: string;
+    };
+    /**
+     * Primary CTA config or null to hide it (mirrors Navbar ctaButton pattern)
+     * Example: { label: "Get Started", href: "#contact" }
+     */
+    ctaButton?: {
+        label: string;
+        href: string;
+    } | null;
+    /** Primary CTA button styles */
+    ctaButtonStyle?: {
+        unstyled?: boolean;
+        style?: React.CSSProperties;
+        variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+        size?: "default" | "sm" | "lg" | "icon";
+        className?: string;
+    };
+    /** Optional wrapper slot for the primary CTA */
+    ctaButtonWrapper?: {
+        className?: string;
+    };
+    /** Optional secondary action */
+    secondaryButton?: {
+        label: string;
+        href: string;
+    } | null;
+    /** Secondary CTA button styles */
+    secondaryButtonStyle?: {
+        unstyled?: boolean;
+        style?: React.CSSProperties;
+        variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+        size?: "default" | "sm" | "lg" | "icon";
+        className?: string;
+    };
+    /** Optional wrapper slot for the secondary CTA */
+    secondaryButtonWrapper?: {
+        className?: string;
+    };
+    /**
+     * Legacy spacing hook applied to the heading.
+     * @deprecated Prefer margin utilities via headingText.className
+     */
+    spacing?: {
+        topMargin?: string;
+    };
+    /** Accessibility */
+    ariaLabel?: string;
+    role?: string;
+}
+/**
+ * Call-to-Action section with a heading, optional subheading/description,
+ * and up to two actions (primary and secondary).
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides (section, container,
+ *   contentWrapper, headingText, subheadingText, descriptionText, actionsWrapper,
+ *   ctaButtonStyle, secondaryButtonStyle). Consumer classes are merged after
+ *   defaults via cn().
+ * - Accessibility: rendered as a semantic <section> with aria-label. The role
+ *   defaults to "region" but can be customized with the role prop.
+ * - Motion: subtle hover lift effects on buttons are included by default.
+ *
+ * @example
+ * <CTA
+ *   headingText={{ text: "Join The Launch Today!" }}
+ *   descriptionText={{ text: "Start your free trial in minutes." }}
+ *   ctaButton={{ label: "Sign Up", href: "#contact" }}
+ *   secondaryButton={{ label: "Learn More", href: "#features" }}
+ * />
+ */
+export declare function CTA({ id, className, section, container, contentWrapper, headingText, subheadingText, descriptionText, actionsWrapper, ctaButton, ctaButtonStyle, ctaButtonWrapper, secondaryButton, secondaryButtonStyle, secondaryButtonWrapper, spacing, ariaLabel, role, }: CTAProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CTA.d.ts.map

package/dist/components/CTA.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTA.d.ts","sourceRoot":"","sources":["../../src/components/CTA.tsx"],"names":[],"mappings":"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"}

package/dist/components/CTA.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Button } from "@nextworks/blocks-core";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * Call-to-Action section with a heading, optional subheading/description,
+ * and up to two actions (primary and secondary).
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides (section, container,
+ *   contentWrapper, headingText, subheadingText, descriptionText, actionsWrapper,
+ *   ctaButtonStyle, secondaryButtonStyle). Consumer classes are merged after
+ *   defaults via cn().
+ * - Accessibility: rendered as a semantic <section> with aria-label. The role
+ *   defaults to "region" but can be customized with the role prop.
+ * - Motion: subtle hover lift effects on buttons are included by default.
+ *
+ * @example
+ * <CTA
+ *   headingText={{ text: "Join The Launch Today!" }}
+ *   descriptionText={{ text: "Start your free trial in minutes." }}
+ *   ctaButton={{ label: "Sign Up", href: "#contact" }}
+ *   secondaryButton={{ label: "Learn More", href: "#features" }}
+ * />
+ */
+export function CTA({ id = "cta", className, section = {
+    className: "bg-background text-foreground",
+}, container = {
+    className: "mx-auto flex min-h-[42vh] w-full max-w-6xl flex-col items-center justify-center overflow-hidden px-4 pb-7",
+}, contentWrapper = {
+    className: "flex w-full flex-col items-center text-center",
+}, headingText = {
+    text: "Join The Launch Today!",
+    className: "text-3xl font-bold leading-[1.1] text-primary sm:text-4xl md:text-5xl text-[var(--heading-fg)]",
+}, subheadingText = {
+    text: "",
+    className: "mt-2 text-lg font-medium text-muted-foreground sm:text-xl text-[var(--subheading-fg)]",
+}, descriptionText = {
+    text: "",
+    className: "mt-3 max-w-2xl text-base text-foreground/80 sm:text-lg text-[var(--description-fg)]",
+}, actionsWrapper = {
+    className: "mt-6 flex flex-col items-center gap-3 sm:flex-row",
+}, ctaButton = { label: "Sign Up Now", href: "#contact" }, ctaButtonStyle = {
+    variant: "default",
+    size: "default",
+    className: "shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+}, ctaButtonWrapper = { className: "" }, secondaryButton = null, secondaryButtonStyle = {
+    variant: "outline",
+    size: "default",
+    className: "transition-transform duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+}, secondaryButtonWrapper = { className: "" }, spacing = { topMargin: "mt-0 sm:mt-12" }, 
+// spacing = { topMargin: "mt-[17vh]" },
+ariaLabel = "Call to action section", role = "region", }) {
+    // default class for actions wrapper (keeps a gap and responsive row layout)
+    const actionsWrapperDefault = "mt-6 flex flex-col items-center gap-3 sm:flex-row";
+    return (_jsx("section", { id: id, role: role, "aria-label": ariaLabel, className: cn("w-full", section.className, className), children: _jsx("div", { className: cn(container.className), children: _jsxs("div", { className: cn(contentWrapper.className), children: [(headingText === null || headingText === void 0 ? void 0 : headingText.text) ? (_jsx("h2", { className: cn("text-center", spacing === null || spacing === void 0 ? void 0 : spacing.topMargin, headingText.className), children: headingText.text })) : null, (subheadingText === null || subheadingText === void 0 ? void 0 : subheadingText.text) ? (_jsx("p", { className: cn(subheadingText.className), children: subheadingText.text })) : null, (descriptionText === null || descriptionText === void 0 ? void 0 : descriptionText.text) ? (_jsx("p", { className: cn(descriptionText.className), children: descriptionText.text })) : null, _jsxs("div", { className: cn(actionsWrapperDefault, actionsWrapper.className), children: [ctaButton && (_jsx(Button, { asChild: true, unstyled: ctaButtonStyle.unstyled, variant: ctaButtonStyle.variant, size: ctaButtonStyle.size, className: cn(ctaButtonWrapper.className, ctaButtonStyle.className), style: ctaButtonStyle.style, children: _jsx(Link, { href: ctaButton.href, "aria-label": ctaButton.label, children: ctaButton.label }) })), secondaryButton && (_jsx(Button, { asChild: true, unstyled: secondaryButtonStyle.unstyled, variant: secondaryButtonStyle.variant, size: secondaryButtonStyle.size, className: cn(secondaryButtonWrapper.className, secondaryButtonStyle.className), style: secondaryButtonStyle.style, children: _jsx(Link, { href: secondaryButton.href, "aria-label": secondaryButton.label, children: secondaryButton.label }) }))] })] }) }) }));
+}