@nextworks/blocks-templates 0.1.0-alpha.0

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

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Footer as SharedFooter } from "@nextworks/blocks-sections";
+const agencyNavLinks = [
+    {
+        heading: "Services",
+        links: [
+            { name: "Web Design & Development", href: "#services" },
+            { name: "SEO & Digital Marketing", href: "#services" },
+            { name: "E-commerce Solutions", href: "#services" },
+            { name: "Brand Identity & Design", href: "#services" },
+        ],
+    },
+    {
+        heading: "Company",
+        links: [
+            { name: "About Us", href: "#about" },
+            { name: "Our Work", href: "#portfolio" },
+            { name: "Process", href: "#process" },
+            { name: "Contact", href: "#contact" },
+        ],
+    },
+    {
+        heading: "Resources",
+        links: [
+            { name: "Free Consultation", href: "#contact" },
+            { name: "Case Studies", href: "#portfolio" },
+            { name: "Get Quote", href: "#pricing" },
+            { name: "Privacy Policy", href: "#privacy" },
+        ],
+    },
+];
+/**
+ * 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 function Footer() {
+    return (_jsx(SharedFooter, { footerBrandName: "Nexus Digital", footerNavLinks: agencyNavLinks, ariaLabel: "Footer section", section: {
+            className: "w-full bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white",
+        }, container: { className: "max-w-7xl mx-auto px-6" }, brand: {
+            className: "text-2xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
+        }, brandWrapper: {
+            className: "flex flex-col items-start text-left lg:pr-8",
+        }, navSection: {
+            className: "flex flex-col lg:flex-row items-start justify-center gap-8 lg:gap-12 pt-6.5 pb-8",
+        }, navGroup: { className: "flex flex-col items-start text-left pt-1.5" }, navHeading: {
+            className: "font-bold font-poppins text-gray-800 dark:text-white mb-3 text-sm uppercase tracking-wider",
+        }, navLink: {
+            className: "text-gray-600 dark:text-gray-400 hover:text-fuchsia-600 dark:hover:text-fuchsia-400 transition-colors duration-200 text-sm mb-2 block font-inter",
+        }, socialSection: {
+            className: "flex items-center justify-center gap-4 py-4",
+        }, socialLink: {
+            className: "text-gray-600 dark:text-gray-400 hover:text-fuchsia-600 dark:hover:text-fuchsia-400 transition-colors duration-200 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-800",
+        }, socialIcon: { className: "h-5 w-5" }, copyright: {
+            className: "text-center text-xs text-gray-600 dark:text-gray-400 py-4 border-t border-gray-200 dark:border-gray-800 font-inter",
+        } }));
+}

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

@@ -0,0 +1,58 @@
+"use client";
+import React from "react";
+import { Footer as SharedFooter } from "@nextworks/blocks-sections";
+const agencyNavLinks = [
+    {
+        heading: "Services",
+        links: [
+            { name: "Web Design & Development", href: "#services" },
+            { name: "SEO & Digital Marketing", href: "#services" },
+            { name: "E-commerce Solutions", href: "#services" },
+            { name: "Brand Identity & Design", href: "#services" },
+        ],
+    },
+    {
+        heading: "Company",
+        links: [
+            { name: "About Us", href: "#about" },
+            { name: "Our Work", href: "#portfolio" },
+            { name: "Process", href: "#process" },
+            { name: "Contact", href: "#contact" },
+        ],
+    },
+    {
+        heading: "Resources",
+        links: [
+            { name: "Free Consultation", href: "#contact" },
+            { name: "Case Studies", href: "#portfolio" },
+            { name: "Get Quote", href: "#pricing" },
+            { name: "Privacy Policy", href: "#privacy" },
+        ],
+    },
+];
+/**
+ * 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 function Footer() {
+    return (<SharedFooter footerBrandName="Nexus Digital" footerNavLinks={agencyNavLinks} ariaLabel="Footer section" section={{
+            className: "w-full bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white",
+        }} container={{ className: "max-w-7xl mx-auto px-6" }} brand={{
+            className: "text-2xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
+        }} brandWrapper={{
+            className: "flex flex-col items-start text-left lg:pr-8",
+        }} navSection={{
+            className: "flex flex-col lg:flex-row items-start justify-center gap-8 lg:gap-12 pt-6.5 pb-8",
+        }} navGroup={{ className: "flex flex-col items-start text-left pt-1.5" }} navHeading={{
+            className: "font-bold font-poppins text-gray-800 dark:text-white mb-3 text-sm uppercase tracking-wider",
+        }} navLink={{
+            className: "text-gray-600 dark:text-gray-400 hover:text-fuchsia-600 dark:hover:text-fuchsia-400 transition-colors duration-200 text-sm mb-2 block font-inter",
+        }} socialSection={{
+            className: "flex items-center justify-center gap-4 py-4",
+        }} socialLink={{
+            className: "text-gray-600 dark:text-gray-400 hover:text-fuchsia-600 dark:hover:text-fuchsia-400 transition-colors duration-200 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-800",
+        }} socialIcon={{ className: "h-5 w-5" }} copyright={{
+            className: "text-center text-xs text-gray-600 dark:text-gray-400 py-4 border-t border-gray-200 dark:border-gray-800 font-inter",
+        }}/>);
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * Upgraded HeroNew preset for the digital agency template,
+ * wired to the shared HeroSplit with slots + cn API.
+ */
+export declare function Hero(): React.JSX.Element;
+//# sourceMappingURL=Hero.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../../src/templates/digitalagency/components/Hero.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;GAGG;AACH,wBAAgB,IAAI,sBA+EnB"}

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

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HeroSplit } from "@nextworks/blocks-sections";
+import { NetworkPattern } from "../components/NetworkPattern";
+/**
+ * Upgraded HeroNew preset for the digital agency template,
+ * wired to the shared HeroSplit with slots + cn API.
+ */
+export function Hero() {
+    return (_jsx("section", { id: "home", className: "bg-white dark:bg-black", children: _jsx(HeroSplit, { section: {
+                className: "relative bg-gradient-to-br from-violet-600 to-fuchsia-600 px-6 pt-8 pb-16 md:pt-12 md:pb-20 text-white hero-pattern",
+            }, heading: {
+                text: "Digital Innovation That Drives Growth",
+                className: "text-5xl md:text-5xl lg:text-7xl font-extrabold leading-tight text-white font-poppins",
+            }, subheading: {
+                text: "We craft exceptional digital experiences that transform businesses. From cutting-edge web applications to AI-powered solutions, we turn your vision into reality.",
+                className: "mt-6 text-xl md:text-1xl text-white/90 max-w-3xl font-inter font-medium leading-relaxed",
+            }, cta1: {
+                label: "Start Your Project",
+                href: "#contact",
+                variant: "default",
+                size: "lg",
+                className: [
+                    "font-poppins font-semibold px-8 py-3 shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 text-lg",
+                    "[--btn-bg:theme(colors.fuchsia.600)]",
+                    "hover:[--btn-hover-bg:theme(colors.fuchsia.700)]",
+                    "[--btn-fg:theme(colors.white)]",
+                    "hover:[--btn-hover-fg:theme(colors.white)]",
+                ].join(" "),
+            }, cta2: {
+                label: "Explore Solutions",
+                href: "#services",
+                variant: "outline",
+                size: "lg",
+                className: [
+                    "font-poppins font-semibold px-8 py-3 text-lg shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
+                    "border-2", // match previous thickness
+                    // set colors via vars
+                    "[--btn-fg:oklch(0.51_0.18_341)]", // fuchsia-700-ish
+                    "[--btn-border:oklch(0.97_0.01_0)]", // white/90 approx
+                    "[--btn-bg:oklch(0.97_0.01_0_/0.9)]",
+                    "hover:[--btn-hover-bg:oklch(1_0_0)]", // white
+                    "hover:[--btn-hover-fg:oklch(0.51_0.18_341)]",
+                    // dark: make it a light outline with white text
+                    "dark:[--btn-fg:oklch(1_0_0)]",
+                    "dark:[--btn-border:oklch(1_0_0_/0.9)]",
+                    "dark:[--btn-bg:transparent]",
+                    "dark:hover:[--btn-hover-bg:oklch(1_0_0))]",
+                ].join(" "),
+            }, image: {
+                src: undefined,
+                alt: "Digital innovation network visualization",
+                className: "object-contain",
+            }, imageLayout: "full-bleed", fallback: _jsx(NetworkPattern, {}), imageContainer: { className: "mt-10 sm:mt-10 md:mt-0 md:mr-0 lg:mr-7" }, 
+            // imageContainer={{
+            //   className:
+            //     "relative w-full min-h-[16rem] h-[20rem] md:h-[28rem] lg:h-[32rem] self-start mt-20 lg:mt-0 mb-10 lg:mb-0",
+            // }}
+            textContainer: {
+                className: "flex-1 px-5 lg:px-8 lg:self-start pt-0 md:pt-2 lg:pt-4",
+            }, buttonsContainer: {
+                className: [
+                    "gap-4 mt-8 sm:flex-col lg:flex-row",
+                    "[--btn-ring:oklch(1_0_0)]", // white ring to match on purple bg
+                ].join(" "),
+            }, 
+            // buttonsContainer={{ className: "flex gap-4 mt-8" }}
+            textAlign: "center", ariaLabel: "Digital innovation that drives growth hero section" }) }));
+}

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

@@ -0,0 +1,71 @@
+"use client";
+import React from "react";
+import { HeroSplit } from "@nextworks/blocks-sections";
+import { NetworkPattern } from "../components/NetworkPattern";
+/**
+ * Upgraded HeroNew preset for the digital agency template,
+ * wired to the shared HeroSplit with slots + cn API.
+ */
+export function Hero() {
+    return (<section id="home" className="bg-white dark:bg-black">
+      <HeroSplit section={{
+            className: "relative bg-gradient-to-br from-violet-600 to-fuchsia-600 px-6 pt-8 pb-16 md:pt-12 md:pb-20 text-white hero-pattern",
+        }} heading={{
+            text: "Digital Innovation That Drives Growth",
+            className: "text-5xl md:text-5xl lg:text-7xl font-extrabold leading-tight text-white font-poppins",
+        }} subheading={{
+            text: "We craft exceptional digital experiences that transform businesses. From cutting-edge web applications to AI-powered solutions, we turn your vision into reality.",
+            className: "mt-6 text-xl md:text-1xl text-white/90 max-w-3xl font-inter font-medium leading-relaxed",
+        }} cta1={{
+            label: "Start Your Project",
+            href: "#contact",
+            variant: "default",
+            size: "lg",
+            className: [
+                "font-poppins font-semibold px-8 py-3 shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 text-lg",
+                "[--btn-bg:theme(colors.fuchsia.600)]",
+                "hover:[--btn-hover-bg:theme(colors.fuchsia.700)]",
+                "[--btn-fg:theme(colors.white)]",
+                "hover:[--btn-hover-fg:theme(colors.white)]",
+            ].join(" "),
+        }} cta2={{
+            label: "Explore Solutions",
+            href: "#services",
+            variant: "outline",
+            size: "lg",
+            className: [
+                "font-poppins font-semibold px-8 py-3 text-lg shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
+                "border-2", // match previous thickness
+                // set colors via vars
+                "[--btn-fg:oklch(0.51_0.18_341)]", // fuchsia-700-ish
+                "[--btn-border:oklch(0.97_0.01_0)]", // white/90 approx
+                "[--btn-bg:oklch(0.97_0.01_0_/0.9)]",
+                "hover:[--btn-hover-bg:oklch(1_0_0)]", // white
+                "hover:[--btn-hover-fg:oklch(0.51_0.18_341)]",
+                // dark: make it a light outline with white text
+                "dark:[--btn-fg:oklch(1_0_0)]",
+                "dark:[--btn-border:oklch(1_0_0_/0.9)]",
+                "dark:[--btn-bg:transparent]",
+                "dark:hover:[--btn-hover-bg:oklch(1_0_0))]",
+            ].join(" "),
+        }} image={{
+            src: undefined,
+            alt: "Digital innovation network visualization",
+            className: "object-contain",
+        }} imageLayout="full-bleed" fallback={<NetworkPattern />} imageContainer={{ className: "mt-10 sm:mt-10 md:mt-0 md:mr-0 lg:mr-7" }} 
+    // imageContainer={{
+    //   className:
+    //     "relative w-full min-h-[16rem] h-[20rem] md:h-[28rem] lg:h-[32rem] self-start mt-20 lg:mt-0 mb-10 lg:mb-0",
+    // }}
+    textContainer={{
+            className: "flex-1 px-5 lg:px-8 lg:self-start pt-0 md:pt-2 lg:pt-4",
+        }} buttonsContainer={{
+            className: [
+                "gap-4 mt-8 sm:flex-col lg:flex-row",
+                "[--btn-ring:oklch(1_0_0)]", // white ring to match on purple bg
+            ].join(" "),
+        }} 
+    // buttonsContainer={{ className: "flex gap-4 mt-8" }}
+    textAlign="center" ariaLabel="Digital innovation that drives growth hero section"/>
+    </section>);
+}

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

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
+/**
+ * Digital Agency preset Navbar (Nexus Digital)
+ *
+ * - Preserves original branding, colors, and blur effect
+ * - No CTA button (ctaButton = null)
+ * - Fuchsia hover/focus accents for links and toggles
+ * - Exposes the full Shared Navbar API via shallow-merge overrides
+ *
+ * Example overrides:
+ * <Navbar
+ *   links={{ className: "hover:text-emerald-600" }}
+ *   container={{ className: "max-w-6xl mx-auto" }}
+ * />
+ */
+type SharedNavbarProps = ComponentProps<typeof SharedNavbar>;
+type PresetOverrides = Partial<SharedNavbarProps>;
+export declare function Navbar(overrides?: PresetOverrides): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Navbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../../src/templates/digitalagency/components/Navbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAGpE;;;;;;;;;;;;;GAaG;AACH,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,KAAK,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;AA2FlD,wBAAgB,MAAM,CAAC,SAAS,GAAE,eAAoB,+BAOrD"}

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

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
+import { BrandNodeGradientRing } from "@nextworks/blocks-core";
+const defaultProps = {
+    brand: "Nexus Digital",
+    brandNode: (_jsx(BrandNodeGradientRing, { gradient: "conic-gradient(#7c3aed, #ec4899, #7c3aed)" })),
+    menuItems: [
+        { label: "Home", href: "#home" },
+        { label: "Services", href: "#services" },
+        { label: "Portfolio", href: "#portfolio" },
+        { label: "Pricing", href: "#pricing" },
+        { label: "Contact", href: "#contact" },
+    ],
+    ctaButton: null,
+    showColorModeToggle: true,
+    navHeight: "h-16",
+    sticky: true,
+    ariaLabel: "Nexus Digital main navigation",
+    // Allow page-level layout overrides if needed
+    className: "",
+    // Style slots (preserve original look; add defaults for new slots)
+    nav: {
+        className: "bg-white/80 dark:bg-gray-900/80 backdrop-blur border-b border-gray-200 dark:border-gray-800 " +
+            "text-gray-800 dark:text-white " +
+            // Accent variables for this preset (read by toggle, links, mobile links)
+            "[--navbar-accent:theme(colors.fuchsia.600)] dark:[--navbar-accent:theme(colors.fuchsia.400)] " +
+            "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.gray.900)] " +
+            "[--navbar-hover-bg:theme(colors.fuchsia.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.24 0.07 330) 20%, transparent)] " +
+            "[--navbar-ring:theme(colors.fuchsia.500)] dark:[--navbar-ring:theme(colors.fuchsia.400)] " +
+            "[--navbar-border:theme(colors.gray.200)] dark:[--navbar-border:theme(colors.gray.800)]",
+    },
+    brandText: {
+        className: "text-2xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
+    },
+    links: {
+        className: "text-sm font-inter font-medium text-gray-700 dark:text-gray-200 " +
+            "hover:text-fuchsia-600 dark:hover:text-fuchsia-400 " +
+            "focus:ring-[var(--navbar-ring)]",
+    },
+    // CTA hidden by default; styled to match theme if enabled later
+    ctaButtonStyle: {
+        variant: "default",
+        size: "default",
+        className: "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 " +
+            "bg-fuchsia-600 text-white hover:bg-fuchsia-700 " +
+            "dark:bg-fuchsia-500 dark:hover:bg-fuchsia-400",
+    },
+    mobileMenu: {
+        className: "border-t border-gray-200 dark:border-gray-800",
+    },
+    container: {
+        className: "max-w-7xl mx-auto",
+    },
+    brandWrapper: {
+        className: "",
+    },
+    desktopMenu: {
+        className: "hidden items-center space-x-1 md:flex lg:space-x-6",
+    },
+    toggleButton: {
+        className: "md:hidden flex items-center justify-center rounded-md p-2 transition-colors " +
+            "hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900/20 " +
+            "focus:outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400",
+    },
+    colorModeWrapper: {
+        className: "ml-2",
+    },
+    // With variables above, ThemeToggle can rely on them; explicit override optional
+    // themeToggle: { ... }
+    ctaButtonWrapper: {
+        className: "ml-2",
+    },
+    mobileMenuInner: {
+        className: "space-y-2 px-4 pt-2 pb-4",
+    },
+    // Mobile links will read --navbar-hover-bg; explicit class optional
+    mobileLinks: {
+        className: "hover:bg-[var(--navbar-hover-bg)]",
+    },
+};
+export function Navbar(overrides = {}) {
+    // Shallow-merge: providing a slot object replaces that slot entirely.
+    const props = Object.assign(Object.assign({}, defaultProps), overrides);
+    return _jsx(SharedNavbar, Object.assign({}, props));
+}

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

@@ -0,0 +1,85 @@
+"use client";
+import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
+import { BrandNodeGradientRing } from "@nextworks/blocks-core";
+const defaultProps = {
+    brand: "Nexus Digital",
+    brandNode: (<BrandNodeGradientRing gradient="conic-gradient(#7c3aed, #ec4899, #7c3aed)"/>),
+    menuItems: [
+        { label: "Home", href: "#home" },
+        { label: "Services", href: "#services" },
+        { label: "Portfolio", href: "#portfolio" },
+        { label: "Pricing", href: "#pricing" },
+        { label: "Contact", href: "#contact" },
+    ],
+    ctaButton: null,
+    showColorModeToggle: true,
+    navHeight: "h-16",
+    sticky: true,
+    ariaLabel: "Nexus Digital main navigation",
+    // Allow page-level layout overrides if needed
+    className: "",
+    // Style slots (preserve original look; add defaults for new slots)
+    nav: {
+        className: "bg-white/80 dark:bg-gray-900/80 backdrop-blur border-b border-gray-200 dark:border-gray-800 " +
+            "text-gray-800 dark:text-white " +
+            // Accent variables for this preset (read by toggle, links, mobile links)
+            "[--navbar-accent:theme(colors.fuchsia.600)] dark:[--navbar-accent:theme(colors.fuchsia.400)] " +
+            "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.gray.900)] " +
+            "[--navbar-hover-bg:theme(colors.fuchsia.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.24 0.07 330) 20%, transparent)] " +
+            "[--navbar-ring:theme(colors.fuchsia.500)] dark:[--navbar-ring:theme(colors.fuchsia.400)] " +
+            "[--navbar-border:theme(colors.gray.200)] dark:[--navbar-border:theme(colors.gray.800)]",
+    },
+    brandText: {
+        className: "text-2xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
+    },
+    links: {
+        className: "text-sm font-inter font-medium text-gray-700 dark:text-gray-200 " +
+            "hover:text-fuchsia-600 dark:hover:text-fuchsia-400 " +
+            "focus:ring-[var(--navbar-ring)]",
+    },
+    // CTA hidden by default; styled to match theme if enabled later
+    ctaButtonStyle: {
+        variant: "default",
+        size: "default",
+        className: "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 " +
+            "bg-fuchsia-600 text-white hover:bg-fuchsia-700 " +
+            "dark:bg-fuchsia-500 dark:hover:bg-fuchsia-400",
+    },
+    mobileMenu: {
+        className: "border-t border-gray-200 dark:border-gray-800",
+    },
+    container: {
+        className: "max-w-7xl mx-auto",
+    },
+    brandWrapper: {
+        className: "",
+    },
+    desktopMenu: {
+        className: "hidden items-center space-x-1 md:flex lg:space-x-6",
+    },
+    toggleButton: {
+        className: "md:hidden flex items-center justify-center rounded-md p-2 transition-colors " +
+            "hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900/20 " +
+            "focus:outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400",
+    },
+    colorModeWrapper: {
+        className: "ml-2",
+    },
+    // With variables above, ThemeToggle can rely on them; explicit override optional
+    // themeToggle: { ... }
+    ctaButtonWrapper: {
+        className: "ml-2",
+    },
+    mobileMenuInner: {
+        className: "space-y-2 px-4 pt-2 pb-4",
+    },
+    // Mobile links will read --navbar-hover-bg; explicit class optional
+    mobileLinks: {
+        className: "hover:bg-[var(--navbar-hover-bg)]",
+    },
+};
+export function Navbar(overrides = {}) {
+    // Shallow-merge: providing a slot object replaces that slot entirely.
+    const props = Object.assign(Object.assign({}, defaultProps), overrides);
+    return <SharedNavbar {...props}/>;
+}

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

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * NetworkPattern
+ * Tailwind-based animated network background for hero fallbacks.
+ * Lightweight and dependency-free (no Chakra).
+ */
+export declare const NetworkPattern: React.FC;
+//# sourceMappingURL=NetworkPattern.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkPattern.d.ts","sourceRoot":"","sources":["../../../../src/templates/digitalagency/components/NetworkPattern.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EA+RlC,CAAC"}

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

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * NetworkPattern
+ * Tailwind-based animated network background for hero fallbacks.
+ * Lightweight and dependency-free (no Chakra).
+ */
+export const NetworkPattern = () => {
+    return (
+    // <div className="relative h-full w-full">
+    _jsxs("div", { className: "relative h-full w-full overflow-hidden", children: [_jsxs("div", { className: "pointer-events-none absolute inset-0 -z-10 overflow-hidden", children: [_jsx("div", { className: "absolute -top-16 -left-16 h-72 w-72 rounded-full bg-blue-500/25 blur-3xl" }), _jsx("div", { className: "absolute right-0 bottom-0 h-80 w-80 rounded-full bg-cyan-400/25 blur-3xl" }), _jsx("div", { className: "absolute top-14 right-1/3 h-56 w-56 rounded-full bg-indigo-500/15 blur-3xl" }), _jsx("div", { className: "absolute -bottom-10 left-1/4 h-64 w-64 rounded-full bg-sky-500/10 blur-3xl" })] }), _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 900 520", className: "absolute top-0 left-0 [transform:scale(1.12)]", children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "nodeGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#3B82F6", stopOpacity: 1 }), _jsx("stop", { offset: "100%", stopColor: "#2563EB", stopOpacity: 1 })] }), _jsxs("linearGradient", { id: "lineGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: "#60A5FA", stopOpacity: 0.28 }), _jsx("stop", { offset: "50%", stopColor: "#3B82F6", stopOpacity: 0.6 }), _jsx("stop", { offset: "100%", stopColor: "#60A5FA", stopOpacity: 0.28 })] })] }), _jsxs("g", { className: "opacity-30", children: [Array.from({ length: 18 }).map((_, i) => (_jsx("line", { x1: i * 50, y1: 0, x2: i * 50, y2: 520, stroke: "#e5e7eb", strokeWidth: "0.5" }, `v-${i}`))), Array.from({ length: 12 }).map((_, i) => (_jsx("line", { x1: 0, y1: i * 45, x2: 900, y2: i * 45, stroke: "#e5e7eb", strokeWidth: "0.5" }, `h-${i}`)))] }), _jsxs("g", { children: [_jsx("line", { x1: "120", y1: "80", x2: "320", y2: "180", stroke: "url(#lineGradient)", strokeWidth: "2" }), _jsx("line", { x1: "320", y1: "180", x2: "600", y2: "140", stroke: "url(#lineGradient)", strokeWidth: "2" }), _jsx("line", { x1: "600", y1: "140", x2: "720", y2: "340", stroke: "url(#lineGradient)", strokeWidth: "2" }), _jsx("line", { x1: "320", y1: "180", x2: "420", y2: "420", stroke: "url(#lineGradient)", strokeWidth: "2" }), _jsx("line", { x1: "120", y1: "80", x2: "220", y2: "320", stroke: "url(#lineGradient)", strokeWidth: "2" }), _jsx("line", { x1: "220", y1: "320", x2: "420", y2: "420", stroke: "url(#lineGradient)", strokeWidth: "2" }), _jsx("line", { x1: "60", y1: "260", x2: "120", y2: "80", stroke: "url(#lineGradient)", strokeWidth: "1.5" }), _jsx("line", { x1: "420", y1: "420", x2: "580", y2: "470", stroke: "url(#lineGradient)", strokeWidth: "1.5" }), _jsx("line", { x1: "600", y1: "140", x2: "780", y2: "80", stroke: "url(#lineGradient)", strokeWidth: "1.5" }), _jsx("line", { x1: "320", y1: "180", x2: "540", y2: "260", stroke: "url(#lineGradient)", strokeWidth: "1.5" }), _jsx("line", { x1: "220", y1: "320", x2: "540", y2: "260", stroke: "url(#lineGradient)", strokeWidth: "1.5" })] }), _jsxs("g", { children: [_jsx("circle", { cx: "320", cy: "180", r: "12", fill: "url(#nodeGradient)", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "12;15;12", dur: "3s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "600", cy: "140", r: "10", fill: "url(#nodeGradient)", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "10;13;10", dur: "3.5s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "120", cy: "80", r: "8", fill: "#3B82F6", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "8;11;8", dur: "4s", begin: "1s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "420", cy: "420", r: "8", fill: "#3B82F6", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "8;11;8", dur: "4.5s", begin: "2.5s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "720", cy: "340", r: "8", fill: "#3B82F6", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "8;11;8", dur: "3.8s", begin: "1.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "220", cy: "320", r: "8", fill: "#3B82F6", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "8;11;8", dur: "4.2s", begin: "0.5s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "60", cy: "260", r: "5", fill: "#60A5FA", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "5;7;5", dur: "5s", begin: "3s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "580", cy: "470", r: "5", fill: "#60A5FA", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "5;7;5", dur: "5.5s", begin: "4s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "780", cy: "80", r: "5", fill: "#60A5FA", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "5;7;5", dur: "4.8s", begin: "2s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "200", cy: "100", r: "3", fill: "#93C5FD" }), _jsx("circle", { cx: "380", cy: "200", r: "3", fill: "#93C5FD" }), _jsx("circle", { cx: "150", cy: "320", r: "3", fill: "#93C5FD" }), _jsx("circle", { cx: "500", cy: "260", r: "3", fill: "#93C5FD" }), _jsx("circle", { cx: "660", cy: "220", r: "3", fill: "#93C5FD" }), _jsx("circle", { cx: "740", cy: "420", r: "3", fill: "#93C5FD" })] })] }), _jsx("style", { children: `
+        .pulse-node {
+          filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.3));
+        }
+
+        @keyframes slow-pan {
+          0% {
+            transform: scale(1.08) translateY(0px);
+          }
+          50% {
+            transform: scale(1.1) translateY(-6px);
+          }
+          100% {
+            transform: scale(1.08) translateY(0px);
+          }
+        }
+
+        svg {
+          animation: slow-pan 18s ease-in-out infinite;
+        }
+
+        @media (max-width: 768px) {
+          svg {
+            transform: scale(1.15);
+          }
+        }
+      ` })] }));
+};