@nextworks/blocks-templates 0.1.0-alpha.8 → 0.2.0-alpha.10

package/README.md

@@ -9,14 +9,22 @@ Included templates (subject to change):
 - Digital agency
 - Gallery
 
-## Installation
+## Recommended: install via the nextworks CLI
+
+Most developers should install Blocks via the **nextworks** CLI (copy-in / shadcn-style) rather than consuming this package directly.
+
+```bash
+npx nextworks@latest add blocks --templates
+```
+
+- npm (CLI): https://www.npmjs.com/package/nextworks
+
+## Direct installation (advanced)
+
+If you want to consume the compiled templates as a package:
 
 ```bash
 npm install @nextworks/blocks-templates @nextworks/blocks-sections @nextworks/blocks-core
-# or
-pnpm add @nextworks/blocks-templates @nextworks/blocks-sections @nextworks/blocks-core
-# or
-yarn add @nextworks/blocks-templates @nextworks/blocks-sections @nextworks/blocks-core
 ```
 
 ## Usage
@@ -31,12 +39,18 @@ export default function Page() {
 
 These templates assume:
 
-- Next.js App Router
 - Tailwind CSS
-- The theme provider and global styles from `@nextworks/blocks-core` are set up.
+- Providers + global styles are set up
 
-If you prefer working with source files copied into your app (instead of consuming compiled templates), use the `nextworks` CLI:
+If you installed via the `nextworks` CLI:
 
-```bash
-npx nextworks add blocks
-```
+- Templates are copied into your app (router-native):
+  - App Router: `app/templates/<template>/**`
+  - Pages Router:
+    - route entry file: `pages/templates/<template>/index.tsx`
+    - supporting template files: `components/templates/<template>/**`
+- The CLI patches your router entrypoint to wire up providers, fonts, and CSS.
+
+If you consume packages directly (advanced):
+
+- These components are primarily authored for the Next.js App Router, and you must wrap your app with the appropriate provider(s) from `@nextworks/blocks-core` and ensure global CSS is loaded.

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

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

package/dist/templates/digitalagency/Page.jsx

@@ -1,4 +1,3 @@
-"use client";
 import React from "react";
 import { Navbar } from "./components/Navbar";
 import { Hero } from "./components/Hero";

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

@@ -1,4 +1,3 @@
-// app/templates/digitalagency/componets/Contact.tsx
 "use client";
 import React from "react";
 import { Contact as SharedContact, } from "@nextworks/blocks-sections";
@@ -71,9 +70,9 @@ export function Contact() {
     form={{
             className: "bg-card p-8 rounded-lg shadow-md border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
         }} 
-    // Fields wrapper and field item (new)
+    // Fields wrapper and field item
     fieldsWrapper={{ className: "space-y-4" }} field={{ className: "space-y-2" }} 
-    // Label + inputs (new)
+    // Label + inputs
     label={{
             className: "text-card-foreground text-sm font-medium font-poppins block",
         }} input={{
@@ -81,7 +80,7 @@ export function Contact() {
         }} textarea={{
             className: "w-full p-3 rounded-md resize-vertical min-h-[120px] font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-2 focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
         }} 
-    // Submit button (new split between wrapper/style/text)
+    // Submit button (split between wrapper/style/text)
     submitButtonWrapper={{ className: "pt-2" }} submitButtonStyle={{
             variant: "default",
             size: "lg",

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

@@ -1,6 +1,6 @@
 import React from "react";
 /**
- * Upgraded preset Footer for the Digital Agency template
+ * Preset Footer for the Digital Agency template
  * - Uses the shared Footer slot API
  * - Keeps brand distinct, flush-left; aligns top with nav headers
  */

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

@@ -31,7 +31,7 @@ const agencyNavLinks = [
     },
 ];
 /**
- * Upgraded preset Footer for the Digital Agency template
+ * Preset Footer for the Digital Agency template
  * - Uses the shared Footer slot API
  * - Keeps brand distinct, flush-left; aligns top with nav headers
  */

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

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

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

@@ -3,7 +3,7 @@ import React from "react";
 import { HeroSplit } from "@nextworks/blocks-sections";
 import { NetworkPattern } from "../components/NetworkPattern";
 /**
- * Upgraded HeroNew preset for the digital agency template,
+ * Hero preset for the digital agency template,
  * wired to the shared HeroSplit with slots + cn API.
  */
 export function Hero() {

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

@@ -3,10 +3,9 @@ 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
+ * - Exposes the Shared Navbar API via shallow-merge overrides
  *
  * Example overrides:
  * <Navbar

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

@@ -2,7 +2,6 @@ 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

@@ -1 +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"}
+{"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

@@ -3,12 +3,9 @@ import React from "react";
 /**
  * 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">
-    <div className="relative h-full w-full overflow-hidden">
+    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"/>

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

@@ -78,7 +78,7 @@ const defaultFilters = [
     "Local Marketing",
     "Mobile Marketing",
 ];
-// Upgraded Portfolio Preset Component
+// 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={{

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

@@ -7,8 +7,8 @@ type Props = React.PropsWithChildren<{
  *
  * 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 declare function PresetThemeVars({ className, children }: Props): React.JSX.Element;
 export {};

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"}

package/dist/templates/gallery/page.jsx

@@ -1,4 +1,3 @@
-// - /app/templates/gallery/page.tsx
 "use client";
 import { About, Contact, CTA, FAQ, Features, Footer, HeroMotion, HeroOverlay, HeroSplit, Navbar, Newsletter, PortfolioSimple, Pricing, ProcessTimeline, ServicesGrid, Team, Testimonials, TrustBadges, } from "@nextworks/blocks-sections";
 import { ThemeSelector } from "@nextworks/blocks-core";
@@ -166,7 +165,7 @@ export default function Gallery() {
                 "text-[var(--primary-foreground)] p-5 cursor-pointer rounded-lg " +
                 "transition-all duration-200 flex items-center justify-between " +
                 "shadow-lg hover:shadow-xl hover:-translate-y-0.5 " +
-                // define ring/border vars and ensure a visible border if tokens apply
+                // Define ring/border vars and ensure a visible border if tokens apply
                 "[--btn-ring:var(--ring)] [--btn-border:var(--primary)] border [&:where(button)]:border",
         }} answer={{
             className: "bg-gradient-to-r " +

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

@@ -1 +1 @@
-{"version":3,"file":"About.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/About.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;;;;GAWG;AAEH,wBAAgB,KAAK,sBAoEpB"}
+{"version":3,"file":"About.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/About.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;;;;GAWG;AAEH,wBAAgB,KAAK,sBAkEpB"}

package/dist/templates/productlaunch/components/About.jsx

@@ -30,12 +30,10 @@ export function About() {
         }} container={{
             className: "max-w-7xl mx-auto px-6",
         }} inner={{
-            // New slot styled for this preset
             className: "flex flex-col gap-12",
         }} contentContainer={{
             className: "max-w-4xl mx-auto",
         }} contentStack={{
-            // New slot styled for this preset
             className: "flex flex-col gap-6",
         }} subheading={{
             className: "text-sm font-semibold text-purple-600 dark:text-purple-400 uppercase tracking-wider font-inter",

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

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

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

@@ -1,4 +1,3 @@
-// app/templates/productlaunch/componnets/Contact.tsx
 "use client";
 import React from "react";
 import { Contact as SharedContact, } from "@nextworks/blocks-sections";

package/dist/templates/productlaunch/components/FAQ.d.ts

@@ -1,7 +1,5 @@
 /**
- * Upgraded preset FAQ component for the product launch page.
- * Now uses the new shared FAQ_new.tsx API while preserving
- * the original styling, content, and accessibility semantics.
+ * Preset FAQ component for the product launch page.
  */
 export declare function FAQ(): import("react").JSX.Element;
 //# sourceMappingURL=FAQ.d.ts.map

package/dist/templates/productlaunch/components/FAQ.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/FAQ.tsx"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,wBAAgB,GAAG,gCAgFlB"}
+{"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/FAQ.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,wBAAgB,GAAG,gCA2ElB"}

package/dist/templates/productlaunch/components/FAQ.jsx

@@ -1,11 +1,8 @@
 "use client";
 import { FAQ as SharedFAQ } from "@nextworks/blocks-sections";
 import { ChevronDown, ChevronUp } from "lucide-react";
-// - org. jsdoc in the bck folder
 /**
- * Upgraded preset FAQ component for the product launch page.
- * Now uses the new shared FAQ_new.tsx API while preserving
- * the original styling, content, and accessibility semantics.
+ * Preset FAQ component for the product launch page.
  */
 export function FAQ() {
     return (<SharedFAQ faqSectionHeaderText="Frequently Asked Questions" faqData={[
@@ -44,14 +41,9 @@ export function FAQ() {
         }} item={{
             className: "mb-6 w-full",
         }} questionButton={{
-            className: 
-            // "bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white p-5 cursor-pointer rounded-lg transition-all duration-200 flex items-center justify-between shadow-lg hover:shadow-xl hover:shadow-purple-500/30 hover:-translate-y-0.5 font-inter ",
-            // your existing classes...
-            "bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white p-5 cursor-pointer rounded-lg transition-all duration-200 flex items-center justify-between shadow-lg hover:shadow-xl hover:shadow-purple-500/30 hover:-translate-y-0.5 font-inter " +
-                // define the ring and border CSS vars you want
+            className: "bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white p-5 cursor-pointer rounded-lg transition-all duration-200 flex items-center justify-between shadow-lg hover:shadow-xl hover:shadow-purple-500/30 hover:-translate-y-0.5 font-inter " +
                 "[--btn-ring:theme(colors.purple.500)] dark:[--btn-ring:theme(colors.purple.400)] " +
                 "[--btn-border:theme(colors.purple.500)] dark:[--btn-border:theme(colors.purple.400)] " +
-                // ensure mouse focus uses your ring color too
                 "focus:ring-[var(--btn-ring)]",
         }} 
     // No extra styles for the question text; inherits from button

package/dist/templates/productlaunch/components/Features.d.ts

@@ -1,6 +1,5 @@
 /**
- * Product Launch preset for Features, wired to the upgraded shared Features component
- * using the slots + cn API. Keeps content and styles consistent with the template.
+ * Product Launch preset for Features, wired to the shared Features component.
  */
 export declare function Features(): import("react").JSX.Element;
 //# sourceMappingURL=Features.d.ts.map

package/dist/templates/productlaunch/components/Features.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Features.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/Features.tsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAgB,QAAQ,gCA2EvB"}
+{"version":3,"file":"Features.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/Features.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,wBAAgB,QAAQ,gCA2EvB"}

package/dist/templates/productlaunch/components/Features.jsx

@@ -1,8 +1,7 @@
 "use client";
 import { Features as SharedFeatures } from "@nextworks/blocks-sections";
 /**
- * Product Launch preset for Features, wired to the upgraded shared Features component
- * using the slots + cn API. Keeps content and styles consistent with the template.
+ * Product Launch preset for Features, wired to the shared Features component.
  */
 export function Features() {
     const featuresData = [

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

@@ -1,5 +1,5 @@
 /**
- * Upgraded preset Footer for the Product Launch template wired to the upgraded shared Footer
+ * Preset Footer for the Product Launch template wired to the shared Footer
  */
 export declare function Footer(): import("react").JSX.Element;
 //# sourceMappingURL=Footer.d.ts.map

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

@@ -2,7 +2,7 @@
 import { Footer as SharedFooter } from "@nextworks/blocks-sections";
 import { Twitter, Linkedin, Github, Youtube, Mail } from "lucide-react";
 /**
- * Upgraded preset Footer for the Product Launch template wired to the upgraded shared Footer
+ * Preset Footer for the Product Launch template wired to the shared Footer
  */
 export function Footer() {
     return (<SharedFooter id="footer" footerBrandName="IntelliOpAI" footerNavLinks={[

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

@@ -1,6 +1,5 @@
 /**
- * Product Launch preset for Hero, wired to the upgraded shared HeroSplit component
- * using the slots + cn API.
+ * Product Launch preset for Hero, wired to the shared HeroSplit component.
  */
 export declare function Hero(): import("react").JSX.Element;
 //# sourceMappingURL=Hero.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/Hero.tsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAgB,IAAI,gCAgFnB"}
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/Hero.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,wBAAgB,IAAI,gCAgFnB"}

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

@@ -1,8 +1,7 @@
 "use client";
 import { HeroSplit as SharedHeroSplit } from "@nextworks/blocks-sections";
 /**
- * Product Launch preset for Hero, wired to the upgraded shared HeroSplit component
- * using the slots + cn API.
+ * Product Launch preset for Hero, wired to the shared HeroSplit component.
  */
 export function Hero() {
     return (<SharedHeroSplit heading={{
@@ -33,22 +32,22 @@ export function Hero() {
             className: [
                 // layout/typography/shadow/transitions
                 "text-base font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 px-8 py-3",
-                // base colors (ensure outline has transparent bg instead of token background)
+                // Base colors (ensure outline has transparent bg instead of token background)
                 "[--btn-bg:transparent]",
                 // CSS variable overrides to control colors while keeping the outline variant structure
                 "[--btn-fg:theme(colors.purple.600)]",
                 "[--btn-border:theme(colors.purple.600)]",
                 "hover:[--btn-hover-bg:theme(colors.purple.50)]",
                 "hover:[--btn-hover-fg:theme(colors.purple.600)]",
-                // dark mode
+                // Dark mode
                 "dark:[--btn-bg:transparent]",
                 "dark:[--btn-fg:theme(colors.purple.500)]",
                 "dark:[--btn-border:theme(colors.purple.500)]",
                 "dark:hover:[--btn-hover-bg:theme(colors.purple.950)]",
                 "dark:hover:[--btn-hover-fg:theme(colors.purple.500)]",
-                // ensure hover text stays the intended color in light mode
+                // Ensure hover text stays the intended color in light mode
                 "hover:[--btn-hover-fg:theme(colors.purple.600)]",
-                // ensure a border width is present for the outline variant override cases
+                // Ensure a border width is present for the outline variant override cases
                 "border",
             ].join(" "),
         }} image={{

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

@@ -9,7 +9,7 @@ import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
  * - Purple hover states for links and theme toggle
  * - Clean white background with dark mode support
  *
- * This preset exposes the Shared Navbar API so devs can override any prop/slot:
+ * This preset exposes the Shared Navbar API so any prop/slot can be overridden:
  *
  * Example:
  * <Navbar

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

@@ -1,81 +1,85 @@
-// app/templates/productlaunch/components/Navbar.tsx
 "use client";
 import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
 const defaultProps = {
-    brand: "IntelliOpAI",
-    menuItems: [
-        { label: "Home", href: "#home" },
-        { label: "Features", href: "#features" },
-        { label: "Pricing", href: "#pricing" },
-        { label: "FAQ", href: "#faq" },
-        { label: "Contact", href: "#contact" },
-    ],
-    ctaButton: null,
-    showColorModeToggle: true,
-    navHeight: "h-16",
-    sticky: true,
-    ariaLabel: "IntelliOpAI main navigation",
-    // Top-level className is left empty so page-level overrides can add layout constraints if needed.
-    className: "",
-    // Style slots tuned for the purple theme
-    nav: {
-        className: "bg-white dark:bg-gray-900 text-gray-800 dark:text-white border-b border-gray-200 dark:border-gray-800 " +
-            // Accent variables for this preset (read by toggle, links, mobile links)
-            "[--navbar-accent:theme(colors.purple.600)] dark:[--navbar-accent:theme(colors.purple.400)] " +
-            "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.gray.900)] " +
-            "[--navbar-hover-bg:theme(colors.purple.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.17 0.05 324) 20%, transparent)] " +
-            "[--navbar-ring:theme(colors.purple.500)] dark:[--navbar-ring:theme(colors.purple.400)] " +
-            "[--navbar-border:theme(colors.gray.200)] dark:[--navbar-border:theme(colors.gray.800)]",
-    },
-    brandText: {
-        className: "text-xl md:text-2xl font-bold font-outfit text-purple-700 dark:text-purple-500",
-    },
-    links: {
-        className: "text-sm font-medium font-inter text-gray-800 dark:text-white hover:text-purple-700 dark:hover:text-purple-500 " +
-            "focus:ring-[var(--navbar-ring)]",
-    },
-    // Preset keeps CTA hidden; if you enable it, these defaults give a subtle lift effect
-    ctaButtonStyle: {
-        variant: "default",
-        size: "default",
-        className: "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-    },
-    mobileMenu: {
-        className: "border-t border-gray-200 dark:border-gray-800",
-    },
-    container: {
-        className: "max-w-7xl mx-auto",
-    },
-    brandWrapper: {
-        className: "", // base layout is provided by SharedNavbar; override here if needed
-    },
-    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-purple-50 dark:hover:bg-purple-900/20 " +
-            "focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-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)]",
-    },
+  brand: "IntelliOpAI",
+  menuItems: [
+    { label: "Home", href: "#home" },
+    { label: "Features", href: "#features" },
+    { label: "Pricing", href: "#pricing" },
+    { label: "FAQ", href: "#faq" },
+    { label: "Contact", href: "#contact" },
+  ],
+  ctaButton: null,
+  showColorModeToggle: true,
+  navHeight: "h-16",
+  sticky: true,
+  ariaLabel: "IntelliOpAI main navigation",
+  // Top-level className is left empty so page-level overrides can add layout constraints if needed.
+  className: "",
+  // Style slots tuned for the purple theme
+  nav: {
+    className:
+      "bg-white dark:bg-gray-900 text-gray-800 dark:text-white border-b border-gray-200 dark:border-gray-800 " +
+      // Accent variables for this preset (read by toggle, links, mobile links)
+      "[--navbar-accent:theme(colors.purple.600)] dark:[--navbar-accent:theme(colors.purple.400)] " +
+      "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.gray.900)] " +
+      "[--navbar-hover-bg:theme(colors.purple.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.17 0.05 324) 20%, transparent)] " +
+      "[--navbar-ring:theme(colors.purple.500)] dark:[--navbar-ring:theme(colors.purple.400)] " +
+      "[--navbar-border:theme(colors.gray.200)] dark:[--navbar-border:theme(colors.gray.800)]",
+  },
+  brandText: {
+    className:
+      "text-xl md:text-2xl font-bold font-outfit text-purple-700 dark:text-purple-500",
+  },
+  links: {
+    className:
+      "text-sm font-medium font-inter text-gray-800 dark:text-white hover:text-purple-700 dark:hover:text-purple-500 " +
+      "focus:ring-[var(--navbar-ring)]",
+  },
+  // Preset keeps CTA hidden; if you enable it, these defaults give a subtle lift effect
+  ctaButtonStyle: {
+    variant: "default",
+    size: "default",
+    className:
+      "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
+  },
+  mobileMenu: {
+    className: "border-t border-gray-200 dark:border-gray-800",
+  },
+  container: {
+    className: "max-w-7xl mx-auto",
+  },
+  brandWrapper: {
+    className: "", // Base layout is provided by SharedNavbar; override here if needed
+  },
+  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-purple-50 dark:hover:bg-purple-900/20 " +
+      "focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-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: passing a style-slot object (e.g., links, nav, etc.)
-    // replaces the default for that slot. This keeps the API simple and predictable.
-    const props = Object.assign(Object.assign({}, defaultProps), overrides);
-    return <SharedNavbar {...props}/>;
+  // Shallow-merge: passing a style-slot object (e.g., links, nav, etc.)
+  // replaces the default for that slot. This keeps the API simple and predictable.
+  const props = Object.assign(Object.assign({}, defaultProps), overrides);
+  return <SharedNavbar {...props} />;
 }

package/dist/templates/productlaunch/components/Pricing.d.ts

@@ -1,5 +1,5 @@
 /**
- * Product Launch preset for Pricing wired to the upgraded shared Pricing component
+ * Product Launch preset for Pricing wired to the shared Pricing component
  */
 export declare function Pricing(): import("react").JSX.Element;
 //# sourceMappingURL=Pricing.d.ts.map

package/dist/templates/productlaunch/components/Pricing.jsx

@@ -1,7 +1,7 @@
 "use client";
 import { Pricing as SharedPricing } from "@nextworks/blocks-sections";
 /**
- * Product Launch preset for Pricing wired to the upgraded shared Pricing component
+ * Product Launch preset for Pricing wired to the shared Pricing component
  */
 export function Pricing() {
     return (<SharedPricing id="pricing" pricingHeadingText="Choose Your AI Plan" pricingPlans={[