nextworks 0.2.0-alpha.2 → 0.2.0-alpha.21

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

@@ -1,89 +1,88 @@
-"use client";
-
-import { HeroSplit as SharedHeroSplit } from "@/components/sections/HeroSplit";
-
-/**
- * Product Launch preset for Hero, wired to the upgraded shared HeroSplit component
- * using the slots + cn API.
- */
-export function Hero() {
-  return (
-    <SharedHeroSplit
-      heading={{
-        text: "Revolutionize Your Workflow with AI",
-        className:
-          "text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold leading-tight text-black dark:text-white font-outfit mx-auto",
-      }}
-      subheading={{
-        text: "Transform your business operations with our cutting-edge AI solutions. Streamline processes, boost productivity, and unlock new possibilities for growth.",
-        className:
-          "text-base md:text-lg lg:text-xl text-gray-700 dark:text-gray-100 mt-6 mb-8 max-w-2xl font-inter leading-relaxed mx-auto",
-      }}
-      section={{
-        className:
-          "bg-gradient-to-br from-white via-purple-50 to-white dark:from-gray-900 dark:via-purple-950/20 dark:to-gray-900 pt-16 px-8 pb-8",
-      }}
-      cta1={{
-        label: "Get Started",
-        href: "#contact",
-        variant: "default",
-        size: "lg",
-        className: [
-          "text-base font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 px-8 py-3",
-          "[--btn-bg:theme(colors.purple.600)]",
-          "hover:[--btn-hover-bg:theme(colors.purple.700)]",
-          "[--btn-fg:theme(colors.white)]",
-          "hover:[--btn-hover-fg:theme(colors.white)]",
-        ].join(" "),
-      }}
-      cta2={{
-        label: "Learn More",
-        href: "#features",
-        variant: "outline",
-        size: "lg",
-        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)
-          "[--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:[--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
-          "hover:[--btn-hover-fg:theme(colors.purple.600)]",
-          // ensure a border width is present for the outline variant override cases
-          "border",
-        ].join(" "),
-      }}
-      image={{
-        src: "/placeholders/product_launch/hero.png",
-        alt: "AI-powered workflow illustration",
-        className: "object-contain",
-      }}
-      imageLayout="padded"
-      imageContainer={{
-        className: "md:h-80 lg:h-96 md:w-1/2",
-      }}
-      textContainer={{
-        className: "  flex-1 p-5 lg:p-8 text-center lg:text-left",
-      }}
-      buttonsContainer={{
-        className: [
-          "flex flex-col sm:flex-row gap-4 mt-8 justify-center lg:justify-start",
-          "[--btn-ring:theme(colors.purple.500)]",
-          "dark:[--btn-ring:theme(colors.purple.400)]",
-        ].join(" "),
-      }}
-      textAlign="center"
-      ariaLabel="Revolutionize your workflow with AI hero section"
-    />
-  );
-}
+"use client";
+
+import { HeroSplit as SharedHeroSplit } from "@/components/sections/HeroSplit";
+
+/**
+ * Product Launch preset for Hero
+ */
+export function Hero() {
+  return (
+    <SharedHeroSplit
+      heading={{
+        text: "Goodie Revolutionize Your Workflow with AI",
+        className:
+          "text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold leading-tight text-black dark:text-white font-outfit mx-auto",
+      }}
+      subheading={{
+        text: "Transform your business operations with our cutting-edge AI solutions. Streamline processes, boost productivity, and unlock new possibilities for growth.",
+        className:
+          "text-base md:text-lg lg:text-xl text-gray-700 dark:text-gray-100 mt-6 mb-8 max-w-2xl font-inter leading-relaxed mx-auto",
+      }}
+      section={{
+        className:
+          "bg-gradient-to-br from-white via-purple-50 to-white dark:from-gray-900 dark:via-purple-950/20 dark:to-gray-900 pt-16 px-8 pb-8",
+      }}
+      cta1={{
+        label: "Get Started",
+        href: "#contact",
+        variant: "default",
+        size: "lg",
+        className: [
+          "text-base font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 px-8 py-3",
+          "[--btn-bg:theme(colors.purple.600)]",
+          "hover:[--btn-hover-bg:theme(colors.purple.700)]",
+          "[--btn-fg:theme(colors.white)]",
+          "hover:[--btn-hover-fg:theme(colors.white)]",
+        ].join(" "),
+      }}
+      cta2={{
+        label: "Learn More",
+        href: "#features",
+        variant: "outline",
+        size: "lg",
+        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 (ensuring 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:[--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
+          "hover:[--btn-hover-fg:theme(colors.purple.600)]",
+          // Ensure a border width is present for the outline variant override cases
+          "border",
+        ].join(" "),
+      }}
+      image={{
+        src: "/placeholders/product_launch/hero.png",
+        alt: "AI-powered workflow illustration",
+        className: "object-contain",
+      }}
+      imageLayout="padded"
+      imageContainer={{
+        className: "md:h-80 lg:h-96 md:w-1/2",
+      }}
+      textContainer={{
+        className: "  flex-1 p-5 lg:p-8 text-center lg:text-left",
+      }}
+      buttonsContainer={{
+        className: [
+          "flex flex-col sm:flex-row gap-4 mt-8 justify-center lg:justify-start",
+          "[--btn-ring:theme(colors.purple.500)]",
+          "dark:[--btn-ring:theme(colors.purple.400)]",
+        ].join(" "),
+      }}
+      textAlign="center"
+      ariaLabel="Revolutionize your workflow with AI hero section"
+    />
+  );
+}

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

@@ -1,162 +1,116 @@
-// app/templates/productlaunch/components/Navbar.tsx
-
-"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 so devs can override any prop/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 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: PresetOverrides = {}) {
-  // 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: SharedNavbarProps = {
-    ...defaultProps,
-    ...overrides,
-  };
-
-  return <SharedNavbar {...props} />;
-}
-
-// "use client";
-
-// import { Navbar as SharedNavbar } from "@/components/sections/Navbar";
-
-// /**
-//  * A preset Navbar component customized for the product launch page,
-//  * using the shared Navbar.tsx with predefined styles and content.
-//  *
-//  * Features:
-//  * - IntelliOpAI branding with purple color scheme
-//  * - Custom font families (Outfit for brand, Inter for links)
-//  * - No CTA button as specified in original preset
-//  * - Purple hover states for links and theme toggle
-//  * - Clean white background with dark mode support
-//  */
-// export function Navbar() {
-//   return (
-//     <SharedNavbar
-//       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"
-//       nav={{
-//         className: "bg-white dark:bg-gray-900 text-gray-800 dark:text-white",
-//       }}
-//       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",
-//       }}
-//     />
-//   );
-// }
+"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} />;
+}