@nextworks/blocks-templates 0.2.0-alpha.6 → 0.2.0-alpha.8

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.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.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.map

@@ -1 +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,sBA4DtB"}
+{"version":3,"file":"Contact.d.ts","sourceRoot":"","sources":["../../../../src/templates/digitalagency/components/Contact.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA2D1B,wBAAgB,OAAO,sBA4DtB"}

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

@@ -0,0 +1,89 @@
+"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());
+    };
+    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
+    fieldsWrapper={{ className: "space-y-4" }} field={{ className: "space-y-2" }} 
+    // Label + inputs
+    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 (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";
+/**
+ * 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.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" },
+        ],
+    },
+];
+/**
+ * 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";
+/**
+ * Hero 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.jsx

@@ -0,0 +1,71 @@
+"use client";
+import React from "react";
+import { HeroSplit } from "@nextworks/blocks-sections";
+import { NetworkPattern } from "../components/NetworkPattern";
+/**
+ * Hero 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,20 @@
+import type { ComponentProps } from "react";
+import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
+/**
+ * Digital Agency preset Navbar (Nexus Digital)
+ *
+ * - No CTA button (ctaButton = null)
+ * - Fuchsia hover/focus accents for links and toggles
+ * - Exposes the 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

@@ -1 +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"}
+{"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;;;;;;;;;;;;GAYG;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.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
+    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,7 @@
+import React from "react";
+/**
+ * NetworkPattern
+ * Tailwind-based animated network background for hero fallbacks.
+ */
+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;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EA8RlC,CAAC"}

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

@@ -0,0 +1,125 @@
+"use client";
+import React from "react";
+/**
+ * NetworkPattern
+ * Tailwind-based animated network background for hero fallbacks.
+ */
+export const NetworkPattern = () => {
+    return (<div className="relative h-full w-full overflow-hidden">
+      {/* Ambient gradient blobs behind the network */}
+      <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
+        <div className="absolute -top-16 -left-16 h-72 w-72 rounded-full bg-blue-500/25 blur-3xl"/>
+        <div className="absolute right-0 bottom-0 h-80 w-80 rounded-full bg-cyan-400/25 blur-3xl"/>
+        <div className="absolute top-14 right-1/3 h-56 w-56 rounded-full bg-indigo-500/15 blur-3xl"/>
+        <div className="absolute -bottom-10 left-1/4 h-64 w-64 rounded-full bg-sky-500/10 blur-3xl"/>
+      </div>
+
+      {/* Main SVG network pattern */}
+      <svg width="100%" height="100%" viewBox="0 0 900 520" className="absolute top-0 left-0 [transform:scale(1.12)]">
+        <defs>
+          <linearGradient id="nodeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#3B82F6" stopOpacity={1}/>
+            <stop offset="100%" stopColor="#2563EB" stopOpacity={1}/>
+          </linearGradient>
+
+          <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="#60A5FA" stopOpacity={0.28}/>
+            <stop offset="50%" stopColor="#3B82F6" stopOpacity={0.6}/>
+            <stop offset="100%" stopColor="#60A5FA" stopOpacity={0.28}/>
+          </linearGradient>
+        </defs>
+
+        {/* Subtle grid for depth */}
+        <g className="opacity-30">
+          {Array.from({ length: 18 }).map((_, i) => (<line key={`v-${i}`} x1={i * 50} y1={0} x2={i * 50} y2={520} stroke="#e5e7eb" strokeWidth="0.5"/>))}
+          {Array.from({ length: 12 }).map((_, i) => (<line key={`h-${i}`} x1={0} y1={i * 45} x2={900} y2={i * 45} stroke="#e5e7eb" strokeWidth="0.5"/>))}
+        </g>
+
+        {/* Connection Lines */}
+        <g>
+          <line x1="120" y1="80" x2="320" y2="180" stroke="url(#lineGradient)" strokeWidth="2"/>
+          <line x1="320" y1="180" x2="600" y2="140" stroke="url(#lineGradient)" strokeWidth="2"/>
+          <line x1="600" y1="140" x2="720" y2="340" stroke="url(#lineGradient)" strokeWidth="2"/>
+          <line x1="320" y1="180" x2="420" y2="420" stroke="url(#lineGradient)" strokeWidth="2"/>
+          <line x1="120" y1="80" x2="220" y2="320" stroke="url(#lineGradient)" strokeWidth="2"/>
+          <line x1="220" y1="320" x2="420" y2="420" stroke="url(#lineGradient)" strokeWidth="2"/>
+
+          <line x1="60" y1="260" x2="120" y2="80" stroke="url(#lineGradient)" strokeWidth="1.5"/>
+          <line x1="420" y1="420" x2="580" y2="470" stroke="url(#lineGradient)" strokeWidth="1.5"/>
+          <line x1="600" y1="140" x2="780" y2="80" stroke="url(#lineGradient)" strokeWidth="1.5"/>
+          <line x1="320" y1="180" x2="540" y2="260" stroke="url(#lineGradient)" strokeWidth="1.5"/>
+          <line x1="220" y1="320" x2="540" y2="260" stroke="url(#lineGradient)" strokeWidth="1.5"/>
+        </g>
+
+        {/* Network Nodes */}
+        <g>
+          <circle cx="320" cy="180" r="12" fill="url(#nodeGradient)" className="pulse-node">
+            <animate attributeName="r" values="12;15;12" dur="3s" repeatCount="indefinite"/>
+          </circle>
+          <circle cx="600" cy="140" r="10" fill="url(#nodeGradient)" className="pulse-node">
+            <animate attributeName="r" values="10;13;10" dur="3.5s" repeatCount="indefinite"/>
+          </circle>
+
+          <circle cx="120" cy="80" r="8" fill="#3B82F6" className="pulse-node">
+            <animate attributeName="r" values="8;11;8" dur="4s" begin="1s" repeatCount="indefinite"/>
+          </circle>
+          <circle cx="420" cy="420" r="8" fill="#3B82F6" className="pulse-node">
+            <animate attributeName="r" values="8;11;8" dur="4.5s" begin="2.5s" repeatCount="indefinite"/>
+          </circle>
+          <circle cx="720" cy="340" r="8" fill="#3B82F6" className="pulse-node">
+            <animate attributeName="r" values="8;11;8" dur="3.8s" begin="1.8s" repeatCount="indefinite"/>
+          </circle>
+          <circle cx="220" cy="320" r="8" fill="#3B82F6" className="pulse-node">
+            <animate attributeName="r" values="8;11;8" dur="4.2s" begin="0.5s" repeatCount="indefinite"/>
+          </circle>
+
+          <circle cx="60" cy="260" r="5" fill="#60A5FA" className="pulse-node">
+            <animate attributeName="r" values="5;7;5" dur="5s" begin="3s" repeatCount="indefinite"/>
+          </circle>
+          <circle cx="580" cy="470" r="5" fill="#60A5FA" className="pulse-node">
+            <animate attributeName="r" values="5;7;5" dur="5.5s" begin="4s" repeatCount="indefinite"/>
+          </circle>
+          <circle cx="780" cy="80" r="5" fill="#60A5FA" className="pulse-node">
+            <animate attributeName="r" values="5;7;5" dur="4.8s" begin="2s" repeatCount="indefinite"/>
+          </circle>
+
+          {/* Extra tiny detail nodes */}
+          <circle cx="200" cy="100" r="3" fill="#93C5FD"/>
+          <circle cx="380" cy="200" r="3" fill="#93C5FD"/>
+          <circle cx="150" cy="320" r="3" fill="#93C5FD"/>
+          <circle cx="500" cy="260" r="3" fill="#93C5FD"/>
+          <circle cx="660" cy="220" r="3" fill="#93C5FD"/>
+          <circle cx="740" cy="420" r="3" fill="#93C5FD"/>
+        </g>
+      </svg>
+
+      {/* Component-scoped CSS for subtle effects */}
+      <style>{`
+        .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);
+          }
+        }
+      `}</style>
+    </div>);
+};