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

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

@@ -18,7 +18,7 @@ const defaultProps = {
     ariaLabel: "Nexus Digital main navigation",
     // Allow page-level layout overrides if needed
     className: "",
-    // Style slots (preserve original look; add defaults for new slots)
+    // 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 " +

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

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

@@ -0,0 +1,104 @@
+"use client";
+import React from "react";
+import { PortfolioSimple } from "@nextworks/blocks-sections";
+// Default portfolio data without images - Digital Marketing Agency focused
+const defaultProjects = [
+    {
+        id: 1,
+        title: "TechStartup Growth Campaign",
+        category: "Digital Marketing",
+        industry: "Technology",
+        result: "+300% Leads",
+        description: "Comprehensive digital marketing campaign that increased qualified leads by 300% through targeted SEO, social media marketing, and conversion optimization strategies.",
+        tags: ["SEO", "Social Media", "PPC", "Analytics"],
+        color: "blue",
+        url: "#",
+    },
+    {
+        id: 2,
+        title: "E-Commerce Brand Launch",
+        category: "Brand Marketing",
+        industry: "Retail",
+        result: "+250% Revenue",
+        description: "Complete brand launch and digital marketing strategy for a new e-commerce platform, resulting in 250% revenue growth within the first 6 months.",
+        tags: ["Brand Strategy", "Content Marketing", "Influencer", "Email"],
+        color: "green",
+        url: "#",
+    },
+    {
+        id: 3,
+        title: "Healthcare Practice Expansion",
+        category: "Local Marketing",
+        industry: "Healthcare",
+        result: "+180% Patients",
+        description: "Local SEO and digital marketing campaign that helped a healthcare practice expand to three new locations and increase patient acquisition by 180%.",
+        tags: ["Local SEO", "Google Ads", "Reputation", "Content"],
+        color: "purple",
+        url: "#",
+    },
+    {
+        id: 4,
+        title: "SaaS Product Launch",
+        category: "B2B Marketing",
+        industry: "Software",
+        result: "+400% Signups",
+        description: "Strategic B2B marketing campaign for a SaaS product launch, achieving 400% increase in trial signups through targeted content marketing and account-based marketing.",
+        tags: ["B2B Strategy", "Content", "LinkedIn Ads", "Webinars"],
+        color: "indigo",
+        url: "#",
+    },
+    {
+        id: 5,
+        title: "Restaurant Chain Rebrand",
+        category: "Brand Marketing",
+        industry: "Food & Beverage",
+        result: "+220% Foot Traffic",
+        description: "Complete rebrand and digital marketing transformation for a restaurant chain, resulting in 220% increase in foot traffic and 150% growth in online orders.",
+        tags: ["Rebranding", "Social Media", "Local SEO", "Delivery"],
+        color: "red",
+        url: "#",
+    },
+    {
+        id: 6,
+        title: "Fitness App User Acquisition",
+        category: "Mobile Marketing",
+        industry: "Health & Fitness",
+        result: "+500% Downloads",
+        description: "Mobile-first marketing campaign that achieved 500% increase in app downloads through app store optimization, influencer partnerships, and targeted social media advertising.",
+        tags: ["ASO", "Influencer", "Social Ads", "Retention"],
+        color: "yellow",
+        url: "#",
+    },
+];
+const defaultFilters = [
+    "All Projects",
+    "Digital Marketing",
+    "Brand Marketing",
+    "B2B Marketing",
+    "Local Marketing",
+    "Mobile Marketing",
+];
+// Portfolio Preset Component
+export function Portfolio() {
+    return (<section id="portfolio">
+      <PortfolioSimple enableMotion={true} projects={defaultProjects} filters={defaultFilters} sectionTitle="Our Portfolio" sectionSubtitle="Discover our successful projects that have transformed businesses across various industries with innovative digital solutions." ctaTitle="Ready to Start Your Project?" ctaDescription="Let's work together to create something amazing that drives real results for your business." section={{
+            className: "py-16 md:py-24 bg-background",
+        }} title={{
+            className: "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-[var(--heading-fg)]",
+        }} subtitle={{
+            className: "text-xl md:text-2xl font-inter text-[var(--subheading-fg)] max-w-2xl mx-auto leading-relaxed",
+        }} ctaTitleStyle={{
+            className: "text-2xl md:text-3xl font-bold text-[var(--heading-fg)]",
+        }} ctaDescriptionStyle={{
+            className: "text-lg md:text-xl text-[var(--subheading-fg)] max-w-md mx-auto",
+        }} tagStyle={{
+            className: "px-2 py-1 text-xs rounded-full border-[var(--badge-border)] text-[var(--badge-fg)] bg-[var(--badge-bg)]",
+        }} ctaSection={{
+            className: "space-y-6 text-center mt-16 pt-12 border-t border-[var(--footer-border)]",
+        }} cta1Label="Start Your Project" cta1Href="#contact" cta2Label="View All Projects" cta2Href="#portfolio" cta1Button={{
+            className: "h-10 px-6 flex items-center justify-center font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 [--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)]",
+        }} cta2Button={{
+            className: "h-10 px-6 flex items-center justify-center font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 border-2 [--btn-bg:transparent] [--btn-fg:theme(colors.fuchsia.700)] [--btn-border:theme(colors.fuchsia.600)] hover:[--btn-hover-bg:theme(colors.fuchsia.600)] hover:[--btn-hover-fg:theme(colors.white)] dark:[--btn-fg:theme(colors.fuchsia.400)] dark:[--btn-border:theme(colors.fuchsia.500)] dark:hover:[--btn-hover-bg:theme(colors.fuchsia.500)] dark:hover:[--btn-hover-fg:theme(colors.white)]",
+        }} ariaLabel="Portfolio showcase section"/>
+    </section>);
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+type Props = React.PropsWithChildren<{
+    className?: string;
+}>;
+/**
+ * Gallery template token-bridge wrapper.
+ *
+ * Maps component-level CSS variables (btn, input, card, etc.) to the
+ * EnhancedThemeProvider token variables applied on :root (e.g., --primary,
+ * --foreground, --card, --ring).
+ * Colors are driven by the selected Color Theme, not a fixed preset palette.
+ */
+export declare function PresetThemeVars({ className, children }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=PresetThemeVars.d.ts.map

package/dist/templates/gallery/PresetThemeVars.jsx

@@ -5,8 +5,8 @@ import { cn } from "@nextworks/blocks-core";
  *
  * Maps component-level CSS variables (btn, input, card, etc.) to the
  * EnhancedThemeProvider token variables applied on :root (e.g., --primary,
- * --foreground, --card, --ring). This preserves the original Gallery behavior:
- * colors are driven by the selected Color Theme, not a fixed preset palette.
+ * --foreground, --card, --ring).
+ * Colors are driven by the selected Color Theme, not a fixed preset palette.
  */
 export function PresetThemeVars({ className, children }) {
     return (<div className={cn(

package/dist/templates/gallery/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../src/templates/gallery/page.tsx"],"names":[],"mappings":"AA6BA,MAAM,CAAC,OAAO,UAAU,OAAO,gCAqR9B"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../src/templates/gallery/page.tsx"],"names":[],"mappings":"AA2BA,MAAM,CAAC,OAAO,UAAU,OAAO,gCAqR9B"}