nextworks 0.2.0-alpha.11 → 0.2.0-alpha.13

package/dist/kits/blocks/app/templates/digitalagency/README.md

@@ -1,42 +1,42 @@
-# DigitalAgency Template Theming
-
-This template is preset-first. It’s wrapped with `PresetThemeVars` to set a template-wide emerald palette. Shared components read variables with safe token fallbacks. Use local overrides sparingly (e.g., a specific CTA state).
-
-## Where it’s wired
-
-Template paths depend on your router:
-
-- App Router:
-  - Wrapper: `app/templates/digitalagency/PresetThemeVars.tsx`
-  - Page: `app/templates/digitalagency/page.tsx`
-- Pages Router:
-  - Wrapper: `components/templates/digitalagency/PresetThemeVars.tsx`
-  - Page: `pages/templates/digitalagency/index.tsx`
-
-## Core variables
-
-- Buttons: `--btn-bg`, `--btn-fg`, `--btn-hover-bg`, `--btn-hover-fg`, `--btn-border`, `--btn-ring`
-- Inputs/Textareas: `--input-bg`, `--input-fg`, `--input-placeholder`, `--input-border`, `--input-focus-ring`, `--input-ring-offset`
-- Cards: `--card-bg`, `--card-fg`, `--card-title-fg`, `--card-muted-fg`, `--card-border`, `--card-shadow`
-- Badges/Chips: `--badge-bg`, `--badge-fg`, `--badge-border`, plus active variants
-- Headings: `--heading-fg`, `--subheading-fg`, `--description-fg`
-- Footer: `--footer-bg`, `--footer-fg`, `--footer-heading-fg`, `--footer-link-fg`, `--footer-link-hover-fg`, `--footer-link-hover-bg`, `--footer-muted-fg`, `--footer-border`
-- Table: `--table-fg`, `--table-muted-fg`, `--table-head-fg`, `--table-border`, `--table-row-hover-bg`
-
-## Per-section overrides
-
-This template should be styled primarily by PresetThemeVars. Override on a specific section only when needed:
-
-```tsx
-<section className="[--btn-ring:theme(colors.emerald.600)]">
-  <CTA />
-</section>
-```
-
-## Outline buttons
-
-Always set `--btn-bg:transparent` and keep a border width class present when overriding outline colors.
-
-## Should preset components be refactored?
-
-Not mandatory. As you touch presets, prefer removing hard-coded color classes and let the var contract style them. Keep structure (spacing, layout, motion) classes.
+# DigitalAgency Template Theming
+
+This template is preset-first. It’s wrapped with `PresetThemeVars` to set a template-wide emerald palette. Shared components read variables with safe token fallbacks. Use local overrides sparingly (e.g., a specific CTA state).
+
+## Where it’s wired
+
+Template paths depend on your router:
+
+- App Router:
+  - Wrapper: `app/templates/digitalagency/PresetThemeVars.tsx`
+  - Page: `app/templates/digitalagency/page.tsx`
+- Pages Router:
+  - Wrapper: `components/templates/digitalagency/PresetThemeVars.tsx`
+  - Page: `pages/templates/digitalagency/index.tsx`
+
+## Core variables
+
+- Buttons: `--btn-bg`, `--btn-fg`, `--btn-hover-bg`, `--btn-hover-fg`, `--btn-border`, `--btn-ring`
+- Inputs/Textareas: `--input-bg`, `--input-fg`, `--input-placeholder`, `--input-border`, `--input-focus-ring`, `--input-ring-offset`
+- Cards: `--card-bg`, `--card-fg`, `--card-title-fg`, `--card-muted-fg`, `--card-border`, `--card-shadow`
+- Badges/Chips: `--badge-bg`, `--badge-fg`, `--badge-border`, plus active variants
+- Headings: `--heading-fg`, `--subheading-fg`, `--description-fg`
+- Footer: `--footer-bg`, `--footer-fg`, `--footer-heading-fg`, `--footer-link-fg`, `--footer-link-hover-fg`, `--footer-link-hover-bg`, `--footer-muted-fg`, `--footer-border`
+- Table: `--table-fg`, `--table-muted-fg`, `--table-head-fg`, `--table-border`, `--table-row-hover-bg`
+
+## Per-section overrides
+
+This template should be styled primarily by PresetThemeVars. Override on a specific section only when needed:
+
+```tsx
+<section className="[--btn-ring:theme(colors.emerald.600)]">
+  <CTA />
+</section>
+```
+
+## Outline buttons
+
+Always set `--btn-bg:transparent` and keep a border width class present when overriding outline colors.
+
+## Should preset components be refactored?
+
+Not mandatory. As you touch presets, prefer removing hard-coded color classes and let the var contract style them. Keep structure (spacing, layout, motion) classes.

package/dist/kits/blocks/app/templates/digitalagency/components/Pricing.tsx

@@ -1,114 +1,114 @@
-"use client";
-
-import React from "react";
-import { Pricing as SharedPricing } from "@/components/sections/Pricing";
-
-const AgencyPricingData = [
-  {
-    pricingPlanHeaderText: "Starter",
-    pricingPlanPrice: "$2,999",
-    pricingPlanFeatures: [
-      "5-page custom website",
-      "Mobile-responsive design",
-      "Basic SEO optimization",
-      "Contact form integration",
-      "2 rounds of revisions",
-      "1 month post-launch support",
-    ],
-    pricingPlanCTALabel: "Get Started",
-    pricingPlanCTAHref: "#contact",
-  },
-  {
-    pricingPlanHeaderText: "Professional",
-    pricingPlanPrice: "$5,999",
-    pricingPlanFeatures: [
-      "10-page custom website",
-      "Advanced responsive design",
-      "Comprehensive SEO setup",
-      "CMS integration",
-      "Analytics & tracking setup",
-      "Social media integration",
-      "3 rounds of revisions",
-      "3 months ongoing support",
-    ],
-    pricingPlanCTALabel: "Most Popular",
-    pricingPlanCTAHref: "#contact",
-    isPopular: true,
-  },
-  {
-    pricingPlanHeaderText: "Enterprise",
-    pricingPlanPrice: "Custom Quote",
-    pricingPlanFeatures: [
-      "Unlimited pages",
-      "Custom functionality",
-      "E-commerce integration",
-      "Advanced SEO strategy",
-      "Performance optimization",
-      "Third-party integrations",
-      "Priority support",
-      "Dedicated project manager",
-      "6 months ongoing support",
-    ],
-    pricingPlanCTALabel: "Contact Sales",
-    pricingPlanCTAHref: "#contact",
-  },
-];
-
-export function Pricing() {
-  return (
-    <section id="pricing">
-      <SharedPricing
-        pricingPlans={AgencyPricingData}
-        pricingHeadingText="Choose Your Plan"
-        section={{
-          className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-800",
-        }}
-        container={{
-          className: "max-w-7xl mx-auto px-6",
-        }}
-        heading={{
-          className:
-            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-center text-gray-800 dark:text-white mb-8",
-        }}
-        grid={{
-          className:
-            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8",
-        }}
-        card={{
-          className:
-            "relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200",
-        }}
-        header={{
-          className:
-            "p-6 text-center border-b border-gray-200 dark:border-gray-700",
-        }}
-        title={{
-          className:
-            "text-xl font-bold font-poppins text-gray-800 dark:text-white mb-2",
-        }}
-        price={{
-          className:
-            "text-3xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400 mb-4",
-        }}
-        features={{
-          className: "p-6 space-y-3 font-inter",
-        }}
-        featureItem={{
-          className:
-            "flex items-center text-gray-600 dark:text-gray-300 text-sm",
-        }}
-        cta={{
-          variant: "default",
-          size: "lg",
-          className:
-            "w-full bg-fuchsia-600 hover:bg-fuchsia-700 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 text-white hover:text-white font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5",
-        }}
-        popularBadge={{
-          className:
-            "absolute -top-3 left-1/2 transform -translate-x-1/2 bg-fuchsia-600 text-white px-4 py-1 rounded-full text-sm font-medium",
-        }}
-        ariaLabel="Pricing section"
-      />
-    </section>
-  );
-}
+"use client";
+
+import React from "react";
+import { Pricing as SharedPricing } from "@/components/sections/Pricing";
+
+const AgencyPricingData = [
+  {
+    pricingPlanHeaderText: "Starter",
+    pricingPlanPrice: "$2,999",
+    pricingPlanFeatures: [
+      "5-page custom website",
+      "Mobile-responsive design",
+      "Basic SEO optimization",
+      "Contact form integration",
+      "2 rounds of revisions",
+      "1 month post-launch support",
+    ],
+    pricingPlanCTALabel: "Get Started",
+    pricingPlanCTAHref: "#contact",
+  },
+  {
+    pricingPlanHeaderText: "Professional",
+    pricingPlanPrice: "$5,999",
+    pricingPlanFeatures: [
+      "10-page custom website",
+      "Advanced responsive design",
+      "Comprehensive SEO setup",
+      "CMS integration",
+      "Analytics & tracking setup",
+      "Social media integration",
+      "3 rounds of revisions",
+      "3 months ongoing support",
+    ],
+    pricingPlanCTALabel: "Most Popular",
+    pricingPlanCTAHref: "#contact",
+    isPopular: true,
+  },
+  {
+    pricingPlanHeaderText: "Enterprise",
+    pricingPlanPrice: "Custom Quote",
+    pricingPlanFeatures: [
+      "Unlimited pages",
+      "Custom functionality",
+      "E-commerce integration",
+      "Advanced SEO strategy",
+      "Performance optimization",
+      "Third-party integrations",
+      "Priority support",
+      "Dedicated project manager",
+      "6 months ongoing support",
+    ],
+    pricingPlanCTALabel: "Contact Sales",
+    pricingPlanCTAHref: "#contact",
+  },
+];
+
+export function Pricing() {
+  return (
+    <section id="pricing">
+      <SharedPricing
+        pricingPlans={AgencyPricingData}
+        pricingHeadingText="Choose Your Plan"
+        section={{
+          className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-800",
+        }}
+        container={{
+          className: "max-w-7xl mx-auto px-6",
+        }}
+        heading={{
+          className:
+            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-center text-gray-800 dark:text-white mb-8",
+        }}
+        grid={{
+          className:
+            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8",
+        }}
+        card={{
+          className:
+            "relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200",
+        }}
+        header={{
+          className:
+            "p-6 text-center border-b border-gray-200 dark:border-gray-700",
+        }}
+        title={{
+          className:
+            "text-xl font-bold font-poppins text-gray-800 dark:text-white mb-2",
+        }}
+        price={{
+          className:
+            "text-3xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400 mb-4",
+        }}
+        features={{
+          className: "p-6 space-y-3 font-inter",
+        }}
+        featureItem={{
+          className:
+            "flex items-center text-gray-600 dark:text-gray-300 text-sm",
+        }}
+        cta={{
+          variant: "default",
+          size: "lg",
+          className:
+            "w-full bg-fuchsia-600 hover:bg-fuchsia-700 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 text-white hover:text-white font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5",
+        }}
+        popularBadge={{
+          className:
+            "absolute -top-3 left-1/2 transform -translate-x-1/2 bg-fuchsia-600 text-white px-4 py-1 rounded-full text-sm font-medium",
+        }}
+        ariaLabel="Pricing section"
+      />
+    </section>
+  );
+}

package/dist/kits/blocks/app/templates/digitalagency/components/Process.tsx

@@ -1,59 +1,59 @@
-"use client";
-
-import React from "react";
-import { ProcessTimeline } from "@/components/sections/ProcessTimeline";
-
-const agencySteps = [
-  {
-    stepNumber: 1,
-    title: "Discovery Call",
-    description: "Understanding your goals and requirements",
-    icon: "🔍",
-  },
-  {
-    stepNumber: 2,
-    title: "Strategy & Design",
-    description: "Custom mockups and project roadmap",
-    icon: "🎨",
-  },
-  {
-    stepNumber: 3,
-    title: "Development",
-    description: "Building your site with regular updates",
-    icon: "⚡",
-  },
-  {
-    stepNumber: 4,
-    title: "Launch & Support",
-    description: "Going live with ongoing maintenance",
-    icon: "🚀",
-  },
-];
-
-export function Process() {
-  return (
-    <section id="process">
-      <ProcessTimeline
-        steps={agencySteps}
-        heading="How We Work"
-        subheading="Our proven 4-step process ensures your project delivers real results, on time and within budget."
-        section={{
-          className:
-            "py-16 md:py-20 bg-fuchsia-50 dark:bg-gray-900 [--process-step-bg:theme(colors.fuchsia.600)] [--process-step-fg:theme(colors.white)] [--process-connector:theme(colors.gray.300)] dark:[--process-connector:theme(colors.gray.600)]",
-        }}
-        container={{ className: "max-w-6xl mx-auto px-6" }}
-        headingStyle={{
-          className:
-            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white leading-tight",
-        }}
-        subheadingStyle={{
-          className:
-            "text-xl md:text-2xl font-inter text-gray-600 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed",
-        }}
-        connectingLine={undefined}
-        stepCircle={undefined}
-        ariaLabel="Process timeline section"
-      />
-    </section>
-  );
-}
+"use client";
+
+import React from "react";
+import { ProcessTimeline } from "@/components/sections/ProcessTimeline";
+
+const agencySteps = [
+  {
+    stepNumber: 1,
+    title: "Discovery Call",
+    description: "Understanding your goals and requirements",
+    icon: "🔍",
+  },
+  {
+    stepNumber: 2,
+    title: "Strategy & Design",
+    description: "Custom mockups and project roadmap",
+    icon: "🎨",
+  },
+  {
+    stepNumber: 3,
+    title: "Development",
+    description: "Building your site with regular updates",
+    icon: "⚡",
+  },
+  {
+    stepNumber: 4,
+    title: "Launch & Support",
+    description: "Going live with ongoing maintenance",
+    icon: "🚀",
+  },
+];
+
+export function Process() {
+  return (
+    <section id="process">
+      <ProcessTimeline
+        steps={agencySteps}
+        heading="How We Work"
+        subheading="Our proven 4-step process ensures your project delivers real results, on time and within budget."
+        section={{
+          className:
+            "py-16 md:py-20 bg-fuchsia-50 dark:bg-gray-900 [--process-step-bg:theme(colors.fuchsia.600)] [--process-step-fg:theme(colors.white)] [--process-connector:theme(colors.gray.300)] dark:[--process-connector:theme(colors.gray.600)]",
+        }}
+        container={{ className: "max-w-6xl mx-auto px-6" }}
+        headingStyle={{
+          className:
+            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white leading-tight",
+        }}
+        subheadingStyle={{
+          className:
+            "text-xl md:text-2xl font-inter text-gray-600 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed",
+        }}
+        connectingLine={undefined}
+        stepCircle={undefined}
+        ariaLabel="Process timeline section"
+      />
+    </section>
+  );
+}

package/dist/kits/blocks/app/templates/digitalagency/components/Services.tsx

@@ -1,55 +1,55 @@
-"use client";
-
-import React from "react";
-import { ServicesGrid } from "@/components/sections/ServicesGrid";
-
-const defaultServicesData = [
-  {
-    icon: "💻",
-    title: "Web Design & Development",
-    description:
-      "Custom websites that capture your brand and convert visitors into customers",
-  },
-  {
-    icon: "📈",
-    title: "SEO & Digital Marketing",
-    description:
-      "Get found on Google and drive qualified traffic to your website",
-  },
-  {
-    icon: "🛒",
-    title: "E-commerce Solutions",
-    description: "Online stores that maximize sales and customer experience",
-  },
-  {
-    icon: "🎨",
-    title: "Brand Identity & Design",
-    description: "Logo, branding, and visual identity that makes you stand out",
-  },
-];
-
-export function Services() {
-  return (
-    <section id="services">
-      <ServicesGrid
-        enableMotion={true}
-        section={{
-          className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-900",
-        }}
-        container={{ className: "max-w-6xl mx-auto px-6" }}
-        heading={{
-          className:
-            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white text-center mb-8 md:mb-12",
-        }}
-        grid={{ className: "grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8" }}
-        card={{
-          className:
-            "bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300",
-        }}
-        servicesData={defaultServicesData}
-        sectionHeading="Our Services"
-        ariaLabel="Services section"
-      />
-    </section>
-  );
-}
+"use client";
+
+import React from "react";
+import { ServicesGrid } from "@/components/sections/ServicesGrid";
+
+const defaultServicesData = [
+  {
+    icon: "💻",
+    title: "Web Design & Development",
+    description:
+      "Custom websites that capture your brand and convert visitors into customers",
+  },
+  {
+    icon: "📈",
+    title: "SEO & Digital Marketing",
+    description:
+      "Get found on Google and drive qualified traffic to your website",
+  },
+  {
+    icon: "🛒",
+    title: "E-commerce Solutions",
+    description: "Online stores that maximize sales and customer experience",
+  },
+  {
+    icon: "🎨",
+    title: "Brand Identity & Design",
+    description: "Logo, branding, and visual identity that makes you stand out",
+  },
+];
+
+export function Services() {
+  return (
+    <section id="services">
+      <ServicesGrid
+        enableMotion={true}
+        section={{
+          className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-900",
+        }}
+        container={{ className: "max-w-6xl mx-auto px-6" }}
+        heading={{
+          className:
+            "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white text-center mb-8 md:mb-12",
+        }}
+        grid={{ className: "grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8" }}
+        card={{
+          className:
+            "bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300",
+        }}
+        servicesData={defaultServicesData}
+        sectionHeading="Our Services"
+        ariaLabel="Services section"
+      />
+    </section>
+  );
+}

package/dist/kits/blocks/app/templates/digitalagency/components/Team.tsx

@@ -1,28 +1,28 @@
-"use client";
-
-import React from "react";
-import { Team as SharedTeam } from "@/components/sections/Team";
-
-export function Team() {
-  return (
-    <SharedTeam
-      section={{
-        className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-900",
-      }}
-      card={{ className: "dark:bg-gray-800" }}
-      heading={{
-        className:
-          "text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--heading-fg)]",
-      }}
-      subheading={{
-        className:
-          "text-xl md:text-2xl text-[var(--subheading-fg)] max-w-2xl mx-auto leading-relaxed",
-      }}
-      role={{
-        className:
-          "text-md font-semibold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
-      }}
-      ariaLabel="Team section"
-    />
-  );
-}
+"use client";
+
+import React from "react";
+import { Team as SharedTeam } from "@/components/sections/Team";
+
+export function Team() {
+  return (
+    <SharedTeam
+      section={{
+        className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-900",
+      }}
+      card={{ className: "dark:bg-gray-800" }}
+      heading={{
+        className:
+          "text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--heading-fg)]",
+      }}
+      subheading={{
+        className:
+          "text-xl md:text-2xl text-[var(--subheading-fg)] max-w-2xl mx-auto leading-relaxed",
+      }}
+      role={{
+        className:
+          "text-md font-semibold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
+      }}
+      ariaLabel="Team section"
+    />
+  );
+}