@nextworks/blocks-templates 0.1.0-alpha.0

package/README.md

@@ -0,0 +1,42 @@
+# @nextworks/blocks-templates
+
+Pre-assembled page templates built from Nextworks Blocks sections and core components.
+
+Included templates (subject to change):
+
+- Product launch
+- SaaS dashboard
+- Digital agency
+- Gallery
+
+## Installation
+
+```bash
+npm install @nextworks/blocks-templates @nextworks/blocks-sections @nextworks/blocks-core
+# or
+pnpm add @nextworks/blocks-templates @nextworks/blocks-sections @nextworks/blocks-core
+# or
+yarn add @nextworks/blocks-templates @nextworks/blocks-sections @nextworks/blocks-core
+```
+
+## Usage
+
+```tsx
+import { ProductLaunchPage } from "@nextworks/blocks-templates";
+
+export default function Page() {
+  return <ProductLaunchPage />;
+}
+```
+
+These templates assume:
+
+- Next.js App Router
+- Tailwind CSS
+- The theme provider and global styles from `@nextworks/blocks-core` are set up.
+
+If you prefer working with source files copied into your app (instead of consuming compiled templates), use the `nextworks` CLI:
+
+```bash
+npx nextworks add blocks
+```

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * as ProductLaunch from "./templates/productlaunch/Page";
+export * as SaaSDashboard from "./templates/saasdashboard/Page";
+export * as DigitalAgency from "./templates/digitalagency/Page";
+export * as GalleryTemplate from "./templates/gallery/page";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,gCAAgC,CAAC;AAChE,OAAO,KAAK,aAAa,MAAM,gCAAgC,CAAC;AAChE,OAAO,KAAK,aAAa,MAAM,gCAAgC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export * as ProductLaunch from "./templates/productlaunch/Page";
+export * as SaaSDashboard from "./templates/saasdashboard/Page";
+export * as DigitalAgency from "./templates/digitalagency/Page";
+export * as GalleryTemplate from "./templates/gallery/page";

package/dist/templates/digitalagency/Page.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function DigitalAgency(): React.JSX.Element;
+//# sourceMappingURL=Page.d.ts.map

package/dist/templates/digitalagency/Page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/templates/digitalagency/Page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,wBAAgB,aAAa,sBAmB5B"}

package/dist/templates/digitalagency/Page.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Navbar } from "./components/Navbar";
+import { Hero } from "./components/Hero";
+import { Services } from "./components/Services";
+import { Testimonials } from "./components/Testimonials";
+import { Process } from "./components/Process";
+import { Portfolio } from "./components/Portfolio";
+import { About } from "./components/About";
+import { Team } from "./components/Team";
+import { Pricing } from "./components/Pricing";
+import { CTA } from "./components/CTA";
+import { Contact } from "./components/Contact";
+import { Footer } from "./components/Footer";
+import { PresetThemeVars } from "./PresetThemeVars";
+export function DigitalAgency() {
+    return (_jsx(PresetThemeVars, { children: _jsxs("main", { children: [_jsx(Navbar, {}), _jsx(Hero, {}), _jsx(Services, {}), _jsx(Portfolio, {}), _jsx(Testimonials, {}), _jsx(Process, {}), _jsx(About, {}), _jsx(Team, {}), _jsx(Pricing, {}), _jsx(CTA, {}), _jsx(Contact, {}), _jsx(Footer, {})] }) }));
+}

package/dist/templates/digitalagency/Page.jsx

@@ -0,0 +1,33 @@
+"use client";
+import React from "react";
+import { Navbar } from "./components/Navbar";
+import { Hero } from "./components/Hero";
+import { Services } from "./components/Services";
+import { Testimonials } from "./components/Testimonials";
+import { Process } from "./components/Process";
+import { Portfolio } from "./components/Portfolio";
+import { About } from "./components/About";
+import { Team } from "./components/Team";
+import { Pricing } from "./components/Pricing";
+import { CTA } from "./components/CTA";
+import { Contact } from "./components/Contact";
+import { Footer } from "./components/Footer";
+import { PresetThemeVars } from "./PresetThemeVars";
+export function DigitalAgency() {
+    return (<PresetThemeVars>
+      <main>
+        <Navbar />
+        <Hero />
+        <Services />
+        <Portfolio />
+        <Testimonials />
+        <Process />
+        <About />
+        <Team />
+        <Pricing />
+        <CTA />
+        <Contact />
+        <Footer />
+      </main>
+    </PresetThemeVars>);
+}

package/dist/templates/digitalagency/PresetThemeVars.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type Props = React.PropsWithChildren<{
+    className?: string;
+}>;
+/**
+ * DigitalAgency template theme variables wrapper.
+ * Emerald-leaning palette; adjust to match your preset exactly.
+ */
+export declare function PresetThemeVars({ className, children }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=PresetThemeVars.d.ts.map

package/dist/templates/digitalagency/PresetThemeVars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetThemeVars.d.ts","sourceRoot":"","sources":["../../../src/templates/digitalagency/PresetThemeVars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE7D;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,KAAK,qBAsE7D"}

package/dist/templates/digitalagency/PresetThemeVars.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * DigitalAgency template theme variables wrapper.
+ * Emerald-leaning palette; adjust to match your preset exactly.
+ */
+export function PresetThemeVars({ className, children }) {
+    return (_jsx("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: children }));
+}

package/dist/templates/digitalagency/PresetThemeVars.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * DigitalAgency template theme variables wrapper.
+ * Emerald-leaning palette; adjust to match your preset exactly.
+ */
+export function PresetThemeVars({ className, children }) {
+    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/templates/digitalagency/components/About.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function About(): React.JSX.Element;
+//# sourceMappingURL=About.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"About.d.ts","sourceRoot":"","sources":["../../../../src/templates/digitalagency/components/About.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,KAAK,sBAiEpB"}

package/dist/templates/digitalagency/components/About.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { About as SharedAbout } from "@nextworks/blocks-sections";
+export function About() {
+    return (_jsx(SharedAbout
+    // Content
+    , { 
+        // 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/templates/digitalagency/components/About.jsx

@@ -0,0 +1,43 @@
+"use client";
+import React from "react";
+import { About as SharedAbout } from "@nextworks/blocks-sections";
+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/templates/digitalagency/components/CTA.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function CTA(): React.JSX.Element;
+//# sourceMappingURL=CTA.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CTA.d.ts","sourceRoot":"","sources":["../../../../src/templates/digitalagency/components/CTA.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,GAAG,sBAoClB"}

package/dist/templates/digitalagency/components/CTA.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CTA as SharedCTA } from "@nextworks/blocks-sections";
+export function CTA() {
+    return (_jsx(SharedCTA
+    // Background colors moved to the section slot
+    , { 
+        // 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]" } }));
+}

package/dist/templates/digitalagency/components/CTA.jsx

@@ -0,0 +1,31 @@
+"use client";
+import React from "react";
+import { CTA as SharedCTA } from "@nextworks/blocks-sections";
+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]" }}/>);
+}

package/dist/templates/digitalagency/components/Contact.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare function Contact(): React.JSX.Element;
+//# sourceMappingURL=Contact.d.ts.map

package/dist/templates/digitalagency/components/Contact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Contact.d.ts","sourceRoot":"","sources":["../../../../src/templates/digitalagency/components/Contact.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2D1B,wBAAgB,OAAO,sBA6DtB"}

package/dist/templates/digitalagency/components/Contact.js

@@ -0,0 +1,91 @@
+// app/templates/digitalagency/componets/Contact.tsx
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Contact as SharedContact, } from "@nextworks/blocks-sections";
+const agencyContactFormData = [
+    {
+        id: "name",
+        label: "Your Full Name",
+        placeholder: "John Smith",
+        required: true,
+        type: "text",
+    },
+    {
+        id: "email",
+        label: "Email Address",
+        placeholder: "john@yourcompany.com",
+        required: true,
+        type: "email",
+    },
+    {
+        id: "phone",
+        label: "Phone Number",
+        placeholder: "+1 (555) 123-4567",
+        required: false,
+        type: "tel",
+    },
+    {
+        id: "company",
+        label: "Company Name",
+        placeholder: "Your Company LLC",
+        required: false,
+        type: "text",
+    },
+    {
+        id: "projectType",
+        label: "Service Interested In",
+        placeholder: "e.g. Web Design, SEO, E-commerce, Branding",
+        required: false,
+        type: "text",
+    },
+    {
+        id: "budget",
+        label: "Project Budget (Optional)",
+        placeholder: "e.g. $3,000 - $6,000",
+        required: false,
+        type: "text",
+    },
+    {
+        id: "message",
+        label: "Project Details",
+        placeholder: "Tell us about your project goals, timeline, and any specific requirements...",
+        required: true,
+        type: "textarea",
+    },
+];
+export function Contact() {
+    const handleFormSubmit = (e) => {
+        e.preventDefault();
+        const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+        console.log("Contact form submitted:", data);
+    };
+    return (_jsx(SharedContact, { id: "contact", fields: agencyContactFormData, contactHeaderText: "Let\u2019s Talk Strategy", contactSubHeaderText: "We\u2019re here to help you grow \u2014 tell us how!", 
+        // Root and layout
+        className: "w-full", section: { className: "py-16 px-4 bg-fuchsia-600 dark:bg-fuchsia-600" }, container: { className: "mx-auto max-w-4xl" }, 
+        // Header slots (new)
+        headerWrapper: { className: "mb-8 text-center" }, headerText: {
+            className: "text-4xl md:text-5xl font-bold font-poppins text-white tracking-tight",
+        }, subheaderText: {
+            className: "mt-3 text-lg md:text-xl font-inter text-white/90 px-4 md:px-14",
+        }, 
+        // Form container
+        form: {
+            className: "bg-card p-8 rounded-lg shadow-md border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
+        }, 
+        // Fields wrapper and field item (new)
+        fieldsWrapper: { className: "space-y-4" }, field: { className: "space-y-2" }, 
+        // Label + inputs (new)
+        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 (new split between wrapper/style/text)
+        submitButtonWrapper: { className: "pt-2" }, submitButtonStyle: {
+            variant: "default",
+            size: "lg",
+            className: "w-full bg-fuchsia-700 hover:bg-fuchsia-800 text-white font-poppins font-medium shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
+        }, submitButtonText: "Schedule Free Consultation", onSubmit: handleFormSubmit, ariaLabel: "Agency contact section" }));
+}

package/dist/templates/digitalagency/components/Contact.jsx

@@ -0,0 +1,91 @@
+// app/templates/digitalagency/componets/Contact.tsx
+"use client";
+import React from "react";
+import { Contact as SharedContact, } from "@nextworks/blocks-sections";
+const agencyContactFormData = [
+    {
+        id: "name",
+        label: "Your Full Name",
+        placeholder: "John Smith",
+        required: true,
+        type: "text",
+    },
+    {
+        id: "email",
+        label: "Email Address",
+        placeholder: "john@yourcompany.com",
+        required: true,
+        type: "email",
+    },
+    {
+        id: "phone",
+        label: "Phone Number",
+        placeholder: "+1 (555) 123-4567",
+        required: false,
+        type: "tel",
+    },
+    {
+        id: "company",
+        label: "Company Name",
+        placeholder: "Your Company LLC",
+        required: false,
+        type: "text",
+    },
+    {
+        id: "projectType",
+        label: "Service Interested In",
+        placeholder: "e.g. Web Design, SEO, E-commerce, Branding",
+        required: false,
+        type: "text",
+    },
+    {
+        id: "budget",
+        label: "Project Budget (Optional)",
+        placeholder: "e.g. $3,000 - $6,000",
+        required: false,
+        type: "text",
+    },
+    {
+        id: "message",
+        label: "Project Details",
+        placeholder: "Tell us about your project goals, timeline, and any specific requirements...",
+        required: true,
+        type: "textarea",
+    },
+];
+export function Contact() {
+    const handleFormSubmit = (e) => {
+        e.preventDefault();
+        const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+        console.log("Contact form submitted:", data);
+    };
+    return (<SharedContact id="contact" fields={agencyContactFormData} contactHeaderText="Let’s Talk Strategy" contactSubHeaderText="We’re here to help you grow — tell us how!" 
+    // Root and layout
+    className="w-full" section={{ className: "py-16 px-4 bg-fuchsia-600 dark:bg-fuchsia-600" }} container={{ className: "mx-auto max-w-4xl" }} 
+    // Header slots (new)
+    headerWrapper={{ className: "mb-8 text-center" }} headerText={{
+            className: "text-4xl md:text-5xl font-bold font-poppins text-white tracking-tight",
+        }} subheaderText={{
+            className: "mt-3 text-lg md:text-xl font-inter text-white/90 px-4 md:px-14",
+        }} 
+    // Form container
+    form={{
+            className: "bg-card p-8 rounded-lg shadow-md border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
+        }} 
+    // Fields wrapper and field item (new)
+    fieldsWrapper={{ className: "space-y-4" }} field={{ className: "space-y-2" }} 
+    // Label + inputs (new)
+    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 (new split between wrapper/style/text)
+    submitButtonWrapper={{ className: "pt-2" }} submitButtonStyle={{
+            variant: "default",
+            size: "lg",
+            className: "w-full bg-fuchsia-700 hover:bg-fuchsia-800 text-white font-poppins font-medium shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
+        }} submitButtonText="Schedule Free Consultation" onSubmit={handleFormSubmit} ariaLabel="Agency contact section"/>);
+}

package/dist/templates/digitalagency/components/Footer.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * Upgraded preset Footer for the Digital Agency template
+ * - Uses the shared Footer slot API
+ * - Keeps brand distinct, flush-left; aligns top with nav headers
+ */
+export declare function Footer(): React.JSX.Element;
+//# sourceMappingURL=Footer.d.ts.map

package/dist/templates/digitalagency/components/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../../src/templates/digitalagency/components/Footer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkC1B;;;;GAIG;AACH,wBAAgB,MAAM,sBA6CrB"}