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

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

@@ -1,116 +1,116 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import { Navbar as SharedNavbar } from "@/components/sections/Navbar";
-
-/**
- * Product Launch preset Navbar
- *
- * - IntelliOpAI branding with purple color scheme
- * - Custom font families (Outfit for brand, Inter for links)
- * - No CTA button (ctaButton = null)
- * - Purple hover states for links and theme toggle
- * - Clean white background with dark mode support
- *
- * This preset exposes the Shared Navbar API, allowing full customization of any prop or slot.
- *
- * Example:
- * <Navbar
- *   brand="My Brand"
- *   links={{ className: "hover:text-emerald-600" }}
- *   container={{ className: "max-w-6xl mx-auto" }}
- * />
- */
-type SharedNavbarProps = ComponentProps<typeof SharedNavbar>;
-type PresetOverrides = Partial<SharedNavbarProps>;
-
-const defaultProps: SharedNavbarProps = {
-  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 enabled, 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",
-  },
-  // ThemeToggle reads the CSS vars defined in `nav.className`; override via `themeToggle` if needed.
-  // themeToggle: { ... }
-  ctaButtonWrapper: {
-    className: "ml-2",
-  },
-  mobileMenuInner: {
-    className: "space-y-2 px-4 pt-2 pb-4",
-  },
-  // Mobile menu links get their hover background from the `--navbar-hover-bg` CSS variable
-  // (set on the `nav` slot above). This class simply applies that variable on `:hover`, and can be
-  // removed/overridden if a different mobile-link hover treatment is preferable.
-  mobileLinks: {
-    className: "hover:bg-[var(--navbar-hover-bg)]",
-  },
-};
-
-export function Navbar(overrides: PresetOverrides = {}) {
-  // Shallow-merge: passing a style-slot object (e.g., links, nav, etc.)
-  // replaces the default for that slot.
-  const props: SharedNavbarProps = {
-    ...defaultProps,
-    ...overrides,
-  };
-
-  return <SharedNavbar {...props} />;
-}
+"use client";
+
+import type { ComponentProps } from "react";
+import { Navbar as SharedNavbar } from "@/components/sections/Navbar";
+
+/**
+ * Product Launch preset Navbar
+ *
+ * - IntelliOpAI branding with purple color scheme
+ * - Custom font families (Outfit for brand, Inter for links)
+ * - No CTA button (ctaButton = null)
+ * - Purple hover states for links and theme toggle
+ * - Clean white background with dark mode support
+ *
+ * This preset exposes the Shared Navbar API, allowing full customization of any prop or slot.
+ *
+ * Example:
+ * <Navbar
+ *   brand="My Brand"
+ *   links={{ className: "hover:text-emerald-600" }}
+ *   container={{ className: "max-w-6xl mx-auto" }}
+ * />
+ */
+type SharedNavbarProps = ComponentProps<typeof SharedNavbar>;
+type PresetOverrides = Partial<SharedNavbarProps>;
+
+const defaultProps: SharedNavbarProps = {
+  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 enabled, 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",
+  },
+  // ThemeToggle reads the CSS vars defined in `nav.className`; override via `themeToggle` if needed.
+  // themeToggle: { ... }
+  ctaButtonWrapper: {
+    className: "ml-2",
+  },
+  mobileMenuInner: {
+    className: "space-y-2 px-4 pt-2 pb-4",
+  },
+  // Mobile menu links get their hover background from the `--navbar-hover-bg` CSS variable
+  // (set on the `nav` slot above). This class simply applies that variable on `:hover`, and can be
+  // removed/overridden if a different mobile-link hover treatment is preferable.
+  mobileLinks: {
+    className: "hover:bg-[var(--navbar-hover-bg)]",
+  },
+};
+
+export function Navbar(overrides: PresetOverrides = {}) {
+  // Shallow-merge: passing a style-slot object (e.g., links, nav, etc.)
+  // replaces the default for that slot.
+  const props: SharedNavbarProps = {
+    ...defaultProps,
+    ...overrides,
+  };
+
+  return <SharedNavbar {...props} />;
+}

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

@@ -1,106 +1,106 @@
-"use client";
-
-import { Pricing as SharedPricing } from "@/components/sections/Pricing";
-
-/**
- * Product Launch preset for Pricing
- */
-export function Pricing() {
-  return (
-    <SharedPricing
-      id="pricing"
-      pricingHeadingText="Choose Your AI Plan"
-      pricingPlans={[
-        {
-          pricingPlanHeaderText: "Starter",
-          pricingPlanPrice: "$29",
-          pricingPlanFeatures: [
-            "Up to 1,000 AI requests/month",
-            "Basic AI models access",
-            "Email support",
-            "Standard analytics",
-            "API access",
-          ],
-          pricingPlanCTALabel: "Get Started",
-          pricingPlanCTAHref: "#contact",
-        },
-        {
-          pricingPlanHeaderText: "Professional",
-          pricingPlanPrice: "$99",
-          pricingPlanFeatures: [
-            "Up to 10,000 AI requests/month",
-            "Advanced AI models access",
-            "Priority support",
-            "Advanced analytics & insights",
-            "Full API access",
-            "Custom integrations",
-            "Team collaboration tools",
-          ],
-          pricingPlanCTALabel: "Start Free Trial",
-          pricingPlanCTAHref: "#contact",
-          isPopular: true,
-        },
-        {
-          pricingPlanHeaderText: "Enterprise",
-          pricingPlanPrice: "Custom",
-          pricingPlanFeatures: [
-            "Unlimited AI requests",
-            "Premium AI models access",
-            "24/7 dedicated support",
-            "Custom analytics dashboard",
-            "White-label solutions",
-            "Custom model training",
-            "SLA guarantee",
-            "On-premise deployment",
-          ],
-          pricingPlanCTALabel: "Contact Sales",
-          pricingPlanCTAHref: "#contact",
-        },
-      ]}
-      section={{
-        className:
-          "pt-20 pb-16 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-white",
-      }}
-      container={{ className: "max-w-7xl mx-auto px-6" }}
-      heading={{
-        className:
-          "text-3xl md:text-4xl lg:text-5xl font-bold text-center text-gray-800 dark:text-white mb-4 font-outfit",
-      }}
-      grid={{
-        className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12",
-      }}
-      card={{
-        className:
-          "relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-lg hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300 hover:-translate-y-2 hover:border-purple-300 dark:hover:border-purple-600",
-      }}
-      header={{
-        className:
-          "p-8 text-center border-b border-gray-200 dark:border-gray-700",
-      }}
-      title={{
-        className:
-          "text-xl md:text-2xl font-bold text-gray-800 dark:text-white mb-3 font-outfit",
-      }}
-      price={{
-        className:
-          "text-3xl md:text-4xl font-bold text-purple-600 dark:text-purple-400 mb-6 font-outfit",
-      }}
-      features={{ className: "p-8 space-y-4" }}
-      featureItem={{
-        className:
-          "flex items-center text-gray-600 dark:text-gray-300 text-sm md:text-base font-inter",
-      }}
-      cta={{
-        variant: "default",
-        size: "lg",
-        className:
-          "w-full font-semibold text-base shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-0 [--btn-bg:theme(colors.purple.600)] hover:[--btn-hover-bg:theme(colors.purple.700)] [--btn-fg:white] hover:[--btn-hover-fg:white] [--btn-border:transparent]",
-      }}
-      popularBadge={{
-        className:
-          "absolute -top-4 left-1/2 transform -translate-x-1/2 bg-purple-600 text-white px-6 py-2 rounded-full text-sm font-medium font-inter shadow-lg",
-      }}
-      ariaLabel="IntelliOpAI pricing plans"
-    />
-  );
-}
+"use client";
+
+import { Pricing as SharedPricing } from "@/components/sections/Pricing";
+
+/**
+ * Product Launch preset for Pricing
+ */
+export function Pricing() {
+  return (
+    <SharedPricing
+      id="pricing"
+      pricingHeadingText="Choose Your AI Plan"
+      pricingPlans={[
+        {
+          pricingPlanHeaderText: "Starter",
+          pricingPlanPrice: "$29",
+          pricingPlanFeatures: [
+            "Up to 1,000 AI requests/month",
+            "Basic AI models access",
+            "Email support",
+            "Standard analytics",
+            "API access",
+          ],
+          pricingPlanCTALabel: "Get Started",
+          pricingPlanCTAHref: "#contact",
+        },
+        {
+          pricingPlanHeaderText: "Professional",
+          pricingPlanPrice: "$99",
+          pricingPlanFeatures: [
+            "Up to 10,000 AI requests/month",
+            "Advanced AI models access",
+            "Priority support",
+            "Advanced analytics & insights",
+            "Full API access",
+            "Custom integrations",
+            "Team collaboration tools",
+          ],
+          pricingPlanCTALabel: "Start Free Trial",
+          pricingPlanCTAHref: "#contact",
+          isPopular: true,
+        },
+        {
+          pricingPlanHeaderText: "Enterprise",
+          pricingPlanPrice: "Custom",
+          pricingPlanFeatures: [
+            "Unlimited AI requests",
+            "Premium AI models access",
+            "24/7 dedicated support",
+            "Custom analytics dashboard",
+            "White-label solutions",
+            "Custom model training",
+            "SLA guarantee",
+            "On-premise deployment",
+          ],
+          pricingPlanCTALabel: "Contact Sales",
+          pricingPlanCTAHref: "#contact",
+        },
+      ]}
+      section={{
+        className:
+          "pt-20 pb-16 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-white",
+      }}
+      container={{ className: "max-w-7xl mx-auto px-6" }}
+      heading={{
+        className:
+          "text-3xl md:text-4xl lg:text-5xl font-bold text-center text-gray-800 dark:text-white mb-4 font-outfit",
+      }}
+      grid={{
+        className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12",
+      }}
+      card={{
+        className:
+          "relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-lg hover:shadow-2xl hover:shadow-purple-500/20 transition-all duration-300 hover:-translate-y-2 hover:border-purple-300 dark:hover:border-purple-600",
+      }}
+      header={{
+        className:
+          "p-8 text-center border-b border-gray-200 dark:border-gray-700",
+      }}
+      title={{
+        className:
+          "text-xl md:text-2xl font-bold text-gray-800 dark:text-white mb-3 font-outfit",
+      }}
+      price={{
+        className:
+          "text-3xl md:text-4xl font-bold text-purple-600 dark:text-purple-400 mb-6 font-outfit",
+      }}
+      features={{ className: "p-8 space-y-4" }}
+      featureItem={{
+        className:
+          "flex items-center text-gray-600 dark:text-gray-300 text-sm md:text-base font-inter",
+      }}
+      cta={{
+        variant: "default",
+        size: "lg",
+        className:
+          "w-full font-semibold text-base shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-0 [--btn-bg:theme(colors.purple.600)] hover:[--btn-hover-bg:theme(colors.purple.700)] [--btn-fg:white] hover:[--btn-hover-fg:white] [--btn-border:transparent]",
+      }}
+      popularBadge={{
+        className:
+          "absolute -top-4 left-1/2 transform -translate-x-1/2 bg-purple-600 text-white px-6 py-2 rounded-full text-sm font-medium font-inter shadow-lg",
+      }}
+      ariaLabel="IntelliOpAI pricing plans"
+    />
+  );
+}