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

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

@@ -1,62 +1,62 @@
-# ProductLaunch Template Theming
-
-This template intentionally does NOT wrap the page with PresetThemeVars. It serves as the component-level styling example where individual preset components set CSS variables locally on their slots (buttons, cards, inputs, etc.).
-
-Shared components read these variables with token fallbacks, so if a var is not set, design tokens still apply safely.
-
-## Where to look
-
-Template paths depend on your router:
-
-- App Router:
-  - Page: `app/templates/productlaunch/page.tsx` (PresetThemeVars is commented out)
-  - Components: `app/templates/productlaunch/components/*` (slots use Tailwind arbitrary properties like `[--btn-bg:...]` to set vars locally)
-
-- Pages Router:
-  - Page: `pages/templates/productlaunch/index.tsx` (PresetThemeVars is commented out)
-  - Components: `components/templates/productlaunch/components/*`
-
-## 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: `--badge-active-bg`, `--badge-active-fg`, `--badge-active-border`
-- 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 (examples)
-
-Because this template is component-first, most styling is set directly in the component props. You can still scope vars on a section wrapper when it’s convenient:
-
-```tsx
-<section className="[--btn-ring:theme(colors.purple.600)] dark:[--btn-ring:theme(colors.purple.500)]">
-  <CTA />
-</section>
-```
-
-Contact input borders example:
-
-```tsx
-<section className="[--input-border:theme(colors.purple.200)] dark:[--input-border:theme(colors.purple.700)]">
-  <Contact />
-</section>
-```
-
-## Outline buttons
-
-When styling outline buttons, set `--btn-bg:transparent` and keep a border width class (e.g., `border` or `border-2`).
-
-```tsx
-<Button
-  variant="outline"
-  className="border [--btn-bg:transparent] [--btn-border:theme(colors.purple.600)] [--btn-fg:theme(colors.purple.600)] hover:[--btn-hover-bg:theme(colors.purple.50)] hover:[--btn-hover-fg:theme(colors.purple.600)]"
->
-  Outline
-</Button>
-```
-
-## Do I need to refactor preset components?
-
-Not required. This template is intentionally left as an example of component-level styling. Over time, you can still deduplicate color classes by relying on the shared var contract while keeping structure/spacing classes.
+# ProductLaunch Template Theming
+
+This template intentionally does NOT wrap the page with PresetThemeVars. It serves as the component-level styling example where individual preset components set CSS variables locally on their slots (buttons, cards, inputs, etc.).
+
+Shared components read these variables with token fallbacks, so if a var is not set, design tokens still apply safely.
+
+## Where to look
+
+Template paths depend on your router:
+
+- App Router:
+  - Page: `app/templates/productlaunch/page.tsx` (PresetThemeVars is commented out)
+  - Components: `app/templates/productlaunch/components/*` (slots use Tailwind arbitrary properties like `[--btn-bg:...]` to set vars locally)
+
+- Pages Router:
+  - Page: `pages/templates/productlaunch/index.tsx` (PresetThemeVars is commented out)
+  - Components: `components/templates/productlaunch/components/*`
+
+## 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: `--badge-active-bg`, `--badge-active-fg`, `--badge-active-border`
+- 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 (examples)
+
+Because this template is component-first, most styling is set directly in the component props. You can still scope vars on a section wrapper when it’s convenient:
+
+```tsx
+<section className="[--btn-ring:theme(colors.purple.600)] dark:[--btn-ring:theme(colors.purple.500)]">
+  <CTA />
+</section>
+```
+
+Contact input borders example:
+
+```tsx
+<section className="[--input-border:theme(colors.purple.200)] dark:[--input-border:theme(colors.purple.700)]">
+  <Contact />
+</section>
+```
+
+## Outline buttons
+
+When styling outline buttons, set `--btn-bg:transparent` and keep a border width class (e.g., `border` or `border-2`).
+
+```tsx
+<Button
+  variant="outline"
+  className="border [--btn-bg:transparent] [--btn-border:theme(colors.purple.600)] [--btn-fg:theme(colors.purple.600)] hover:[--btn-hover-bg:theme(colors.purple.50)] hover:[--btn-hover-fg:theme(colors.purple.600)]"
+>
+  Outline
+</Button>
+```
+
+## Do I need to refactor preset components?
+
+Not required. This template is intentionally left as an example of component-level styling. Over time, you can still deduplicate color classes by relying on the shared var contract while keeping structure/spacing classes.

package/dist/kits/blocks/app/templates/productlaunch/components/About.tsx

@@ -1,84 +1,84 @@
-"use client";
-import React from "react";
-import { About as SharedAbout } from "@/components/sections/About";
-
-/**
- * A preset About component customized for the product launch page,
- * using the shared About.tsx with predefined styles and content.
- *
- * Features:
- * - "About IntelliOpAI" heading with custom typography
- * - Purple-themed styling matching the brand
- * - Custom stats optimized for AI product launch
- * - Responsive design with proper spacing
- * - Dark mode support with consistent theming
- * - Clean, modern design with hover effects
- */
-
-export function About() {
-  return (
-    <SharedAbout
-      // Content
-      aboutSubheadingText="The Future of AI is Here"
-      aboutHeadingText="About IntelliOpAI"
-      aboutContentText="IntelliOpAI is pioneering the next generation of artificial intelligence solutions for modern businesses. Founded by AI researchers and industry disruptors, we're building intelligent systems that learn, adapt, and deliver results in real-time. Our breakthrough technology combines deep learning, natural language processing, and predictive analytics to create AI that actually works for your business."
-      aboutTextAlign="center"
-      // Stats
-      showStats={true}
-      animateStats={true}
-      aboutStats={[
-        { value: "10M", suffix: "+", label: "Data Points Processed" },
-        { value: "99.7", suffix: "%", label: "AI Accuracy Rate" },
-        { value: "500", suffix: "+", label: "Early Adopters" },
-        { value: "24", suffix: "/7", label: "AI Innovation" },
-      ]}
-      // Slots / styling
-      section={{
-        className: "py-20 bg-white dark:bg-black text-gray-800 dark:text-white",
-      }}
-      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 text-purple-600 dark:text-purple-400 uppercase tracking-wider font-inter",
-      }}
-      heading={{
-        className:
-          "text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 dark:text-white leading-tight font-outfit",
-      }}
-      content={{
-        className:
-          "text-base md:text-lg text-gray-700 dark:text-gray-200 leading-relaxed opacity-90 max-w-3xl font-inter",
-      }}
-      statsSection={{
-        className:
-          "bg-gradient-to-r from-purple-50 via-white to-purple-50 dark:from-purple-900/20 dark:via-gray-800 dark:to-purple-900/20 p-8 md:p-12 rounded-2xl shadow-xl mx-auto max-w-5xl w-full border border-purple-200 dark:border-purple-800",
-      }}
-      statsGrid={{
-        className:
-          "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 justify-items-center",
-      }}
-      statItem={{
-        className: "flex flex-col items-center gap-3",
-      }}
-      statNumber={{
-        className:
-          "text-2xl md:text-3xl lg:text-4xl font-bold text-purple-600 dark:text-purple-400 leading-none font-outfit",
-      }}
-      statLabel={{
-        className:
-          "text-sm md:text-base font-medium text-gray-700 dark:text-gray-300 text-center opacity-90 font-inter",
-      }}
-    />
-  );
-}
+"use client";
+import React from "react";
+import { About as SharedAbout } from "@/components/sections/About";
+
+/**
+ * A preset About component customized for the product launch page,
+ * using the shared About.tsx with predefined styles and content.
+ *
+ * Features:
+ * - "About IntelliOpAI" heading with custom typography
+ * - Purple-themed styling matching the brand
+ * - Custom stats optimized for AI product launch
+ * - Responsive design with proper spacing
+ * - Dark mode support with consistent theming
+ * - Clean, modern design with hover effects
+ */
+
+export function About() {
+  return (
+    <SharedAbout
+      // Content
+      aboutSubheadingText="The Future of AI is Here"
+      aboutHeadingText="About IntelliOpAI"
+      aboutContentText="IntelliOpAI is pioneering the next generation of artificial intelligence solutions for modern businesses. Founded by AI researchers and industry disruptors, we're building intelligent systems that learn, adapt, and deliver results in real-time. Our breakthrough technology combines deep learning, natural language processing, and predictive analytics to create AI that actually works for your business."
+      aboutTextAlign="center"
+      // Stats
+      showStats={true}
+      animateStats={true}
+      aboutStats={[
+        { value: "10M", suffix: "+", label: "Data Points Processed" },
+        { value: "99.7", suffix: "%", label: "AI Accuracy Rate" },
+        { value: "500", suffix: "+", label: "Early Adopters" },
+        { value: "24", suffix: "/7", label: "AI Innovation" },
+      ]}
+      // Slots / styling
+      section={{
+        className: "py-20 bg-white dark:bg-black text-gray-800 dark:text-white",
+      }}
+      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 text-purple-600 dark:text-purple-400 uppercase tracking-wider font-inter",
+      }}
+      heading={{
+        className:
+          "text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 dark:text-white leading-tight font-outfit",
+      }}
+      content={{
+        className:
+          "text-base md:text-lg text-gray-700 dark:text-gray-200 leading-relaxed opacity-90 max-w-3xl font-inter",
+      }}
+      statsSection={{
+        className:
+          "bg-gradient-to-r from-purple-50 via-white to-purple-50 dark:from-purple-900/20 dark:via-gray-800 dark:to-purple-900/20 p-8 md:p-12 rounded-2xl shadow-xl mx-auto max-w-5xl w-full border border-purple-200 dark:border-purple-800",
+      }}
+      statsGrid={{
+        className:
+          "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 justify-items-center",
+      }}
+      statItem={{
+        className: "flex flex-col items-center gap-3",
+      }}
+      statNumber={{
+        className:
+          "text-2xl md:text-3xl lg:text-4xl font-bold text-purple-600 dark:text-purple-400 leading-none font-outfit",
+      }}
+      statLabel={{
+        className:
+          "text-sm md:text-base font-medium text-gray-700 dark:text-gray-300 text-center opacity-90 font-inter",
+      }}
+    />
+  );
+}

package/dist/kits/blocks/app/templates/productlaunch/components/CTA.tsx

@@ -1,50 +1,50 @@
-"use client";
-
-import React from "react";
-import { CTA as SharedCTA } from "@/components/sections/CTA";
-
-export function CTA() {
-  return (
-    <SharedCTA
-      // Background and theme colors live on the section slot
-      section={{
-        className:
-          "bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 dark:from-purple-500 dark:via-purple-600 dark:to-purple-700 [--heading-fg:white] [--subheading-fg:rgba(255,255,255,0.85)] [--description-fg:rgba(255,255,255,0.8)]",
-      }}
-      // Layout, height, and centering are controlled by the container slot
-      container={{
-        className:
-          "flex h-[45.5vh] w-full flex-col items-center overflow-hidden",
-      }}
-      // Heading mapped to the new headingText slot
-      headingText={{
-        text: "Join The Launch Today!",
-        className:
-          "text-xl md:text-2xl lg:text-3xl font-bold leading-tight text-white dark:text-white font-outfit",
-      }}
-      // Use actionsWrapper for spacing instead of margin on the button
-      actionsWrapper={{
-        className:
-          "mt-4 [--btn-ring:rgba(124,58,237,0.35)] dark:[--btn-ring:rgba(124,58,237,0.45)]",
-      }}
-      // Primary CTA
-      ctaButton={{ label: "Sign Up Now", href: "#contact" }}
-      ctaButtonStyle={{
-        variant: "secondary",
-        size: "lg",
-        className:
-          "text-base md:text-lg font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border-0 [--btn-bg:white] dark:[--btn-bg:white] [--btn-hover-bg:#f3f4f6] dark:[--btn-hover-bg:#e5e7eb] [--btn-fg:#7c3aed] dark:[--btn-fg:#7c3aed] hover:[--btn-hover-fg:#6d28d9] dark:hover:[--btn-hover-fg:#6d28d9] [--btn-border:transparent]",
-      }}
-      // Secondary CTA
-      secondaryButton={{ label: "Learn More", href: "#features" }}
-      secondaryButtonStyle={{
-        variant: "outline",
-        size: "lg",
-        className:
-          "text-base md:text-lg font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border [--btn-bg:transparent] dark:[--btn-bg:transparent] [--btn-fg:white] [--btn-border:rgba(255,255,255,0.9)] dark:[--btn-border:rgba(255,255,255,0.85)] hover:[--btn-hover-bg:white] hover:[--btn-hover-fg:#7c3aed]",
-      }}
-      spacing={{ topMargin: "mt-[17vh]" }}
-      ariaLabel="Join the product launch call to action"
-    />
-  );
-}
+"use client";
+
+import React from "react";
+import { CTA as SharedCTA } from "@/components/sections/CTA";
+
+export function CTA() {
+  return (
+    <SharedCTA
+      // Background and theme colors live on the section slot
+      section={{
+        className:
+          "bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 dark:from-purple-500 dark:via-purple-600 dark:to-purple-700 [--heading-fg:white] [--subheading-fg:rgba(255,255,255,0.85)] [--description-fg:rgba(255,255,255,0.8)]",
+      }}
+      // Layout, height, and centering are controlled by the container slot
+      container={{
+        className:
+          "flex h-[45.5vh] w-full flex-col items-center overflow-hidden",
+      }}
+      // Heading mapped to the new headingText slot
+      headingText={{
+        text: "Join The Launch Today!",
+        className:
+          "text-xl md:text-2xl lg:text-3xl font-bold leading-tight text-white dark:text-white font-outfit",
+      }}
+      // Use actionsWrapper for spacing instead of margin on the button
+      actionsWrapper={{
+        className:
+          "mt-4 [--btn-ring:rgba(124,58,237,0.35)] dark:[--btn-ring:rgba(124,58,237,0.45)]",
+      }}
+      // Primary CTA
+      ctaButton={{ label: "Sign Up Now", href: "#contact" }}
+      ctaButtonStyle={{
+        variant: "secondary",
+        size: "lg",
+        className:
+          "text-base md:text-lg font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border-0 [--btn-bg:white] dark:[--btn-bg:white] [--btn-hover-bg:#f3f4f6] dark:[--btn-hover-bg:#e5e7eb] [--btn-fg:#7c3aed] dark:[--btn-fg:#7c3aed] hover:[--btn-hover-fg:#6d28d9] dark:hover:[--btn-hover-fg:#6d28d9] [--btn-border:transparent]",
+      }}
+      // Secondary CTA
+      secondaryButton={{ label: "Learn More", href: "#features" }}
+      secondaryButtonStyle={{
+        variant: "outline",
+        size: "lg",
+        className:
+          "text-base md:text-lg font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border [--btn-bg:transparent] dark:[--btn-bg:transparent] [--btn-fg:white] [--btn-border:rgba(255,255,255,0.9)] dark:[--btn-border:rgba(255,255,255,0.85)] hover:[--btn-hover-bg:white] hover:[--btn-hover-fg:#7c3aed]",
+      }}
+      spacing={{ topMargin: "mt-[17vh]" }}
+      ariaLabel="Join the product launch call to action"
+    />
+  );
+}