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

package/dist/kits/blocks/app/templates/saasdashboard/components/Hero_mask.tsx

@@ -1,127 +1,126 @@
-"use client";
-
-import React from "react";
-import { HeroSplit as SharedHeroSplit } from "@/components/sections/HeroSplit";
-import { Dashboard } from "./Dashboard";
-import { cn } from "@/lib/utils";
-
-const stats = [
-  { value: "$124K", label: "Monthly Revenue" },
-  { value: "+23%", label: "Growth Rate" },
-  { value: "847", label: "Active Users" },
-];
-
-const projects = ["Website Redesign", "Mobile App v2.0", "Marketing Campaign"];
-
-const floatingCards = [
-  { position: "card-1", icon: "📊", text: "Real-time Analytics" },
-  { position: "card-2", icon: "👥", text: "Team Collaboration" },
-];
-
-const activeTab = "Analytics";
-const navItems = ["Analytics", "Projects", "Team"];
-
-export function Hero() {
-  const sectionRef = React.useRef<HTMLDivElement>(null);
-  const dashRef = React.useRef<HTMLDivElement>(null);
-
-  React.useLayoutEffect(() => {
-    const measure = () => {
-      const sec = sectionRef.current;
-      const dash = dashRef.current;
-      if (!sec || !dash) return;
-      const sr = sec.getBoundingClientRect();
-      const dr = dash.getBoundingClientRect();
-      sec.style.setProperty("--hole-x", `${dr.left - sr.left}px`);
-      sec.style.setProperty("--hole-y", `${dr.top - sr.top}px`);
-      sec.style.setProperty("--hole-w", `${dr.width}px`);
-      sec.style.setProperty("--hole-h", `${dr.height}px`);
-    };
-
-    measure();
-    const ro = new ResizeObserver(measure);
-    if (sectionRef.current) ro.observe(sectionRef.current);
-    if (dashRef.current) ro.observe(dashRef.current);
-    window.addEventListener("resize", measure);
-    return () => {
-      ro.disconnect();
-      window.removeEventListener("resize", measure);
-    };
-  }, []);
-  return (
-    <div className="relative">
-      {/* Ambient gradient blobs behind hero */}
-      <div className="pointer-events-none absolute inset-0 -z-20 overflow-hidden">
-        <div className="absolute -top-10 -left-10 h-72 w-72 rounded-full bg-blue-500/20 blur-3xl" />
-        <div className="absolute right-0 bottom-0 h-72 w-72 rounded-full bg-purple-500/20 blur-3xl" />
-      </div>
-      <div
-        ref={sectionRef}
-        className="relative before:absolute before:inset-0 before:-z-10 before:bg-gradient-to-br before:from-white before:via-blue-50 before:to-white before:[mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000)] before:[mask-composite:exclude] before:[mask-size:auto,var(--hole-w)_var(--hole-h)] before:[mask-position:0_0,var(--hole-x)_var(--hole-y)] before:[mask-repeat:no-repeat] before:content-[''] before:[-webkit-mask-composite:xor] dark:before:from-gray-900 dark:before:via-blue-950/20 dark:before:to-gray-900"
-      >
-        <SharedHeroSplit
-          className={cn("relative")}
-          heading={{
-            text: "Manage Your Entire Business From One Powerful Dashboard",
-            className:
-              "text-3xl md:text-4xl lg:text-5xl font-bold leading-tight text-black dark:text-white font-inter",
-          }}
-          subheading={{
-            text: "Stop switching between 12 different apps. DashFlow combines project management, analytics, team chat, and customer insights in one beautiful interface.",
-            className:
-              "text-base md:text-lg text-gray-700 dark:text-gray-100 mt-6 mb-8 max-w-2xl font-inter font-normal",
-          }}
-          section={{
-            className: "relative bg-none bg-transparent pt-0 px-8 pb-8",
-          }}
-          cta1={{
-            label: "Start Free Trial",
-            href: "#contact",
-            variant: "default",
-            size: "lg",
-            className:
-              "bg-blue-600 hover:bg-blue-700 text-white text-base font-semibold font-inter shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border-0 px-8 py-3",
-          }}
-          cta2={{
-            label: "Watch demo",
-            href: "#demo",
-            variant: "outline",
-            size: "lg",
-            className:
-              "border-blue-600 text-blue-600 hover:bg-blue-50 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-950 text-base font-semibold font-inter shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 px-8 py-3",
-          }}
-          image={{ src: undefined, alt: "Dashboard preview" }}
-          imageLayout="padded"
-          fallback={
-            <div
-              ref={dashRef}
-              className="relative z-10 flex h-full w-full items-center justify-center pl-0"
-            >
-              <div className="relative h-full w-[min(100%,720px)] overflow-hidden p-2">
-                <Dashboard
-                  stats={stats}
-                  projects={projects}
-                  floatingCards={floatingCards}
-                  navItems={navItems}
-                  activeTab={activeTab}
-                />
-              </div>
-            </div>
-          }
-          imageContainer={{
-            className:
-              "relative self-start md:self-start md:flex-none md:shrink-0 w-full h-[24rem] sm:h-[26rem] md:h-[31rem] md:w-1/2 mb-6 md:mb-0",
-            // "relative self-start md:self-start md:flex-none md:shrink-0 w-full h-[24rem] sm:h-[26rem] md:h-[28rem] md:w-1/2 mb-6 md:mb-0",
-          }}
-          textContainer={{ className: "flex-1 p-5 lg:p-8" }}
-          buttonsContainer={{
-            className:
-              "flex flex-col sm:flex-row gap-4 mt-8 justify-center lg:justify-start",
-          }}
-          textAlign="center"
-          ariaLabel="DashFlow hero section"
-        />
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import React from "react";
+import { HeroSplit as SharedHeroSplit } from "@/components/sections/HeroSplit";
+import { Dashboard } from "./Dashboard";
+import { cn } from "@/lib/utils";
+
+const stats = [
+  { value: "$124K", label: "Monthly Revenue" },
+  { value: "+23%", label: "Growth Rate" },
+  { value: "847", label: "Active Users" },
+];
+
+const projects = ["Website Redesign", "Mobile App v2.0", "Marketing Campaign"];
+
+const floatingCards = [
+  { position: "card-1", icon: "📊", text: "Real-time Analytics" },
+  { position: "card-2", icon: "👥", text: "Team Collaboration" },
+];
+
+const activeTab = "Analytics";
+const navItems = ["Analytics", "Projects", "Team"];
+
+export function Hero() {
+  const sectionRef = React.useRef<HTMLDivElement>(null);
+  const dashRef = React.useRef<HTMLDivElement>(null);
+
+  React.useLayoutEffect(() => {
+    const measure = () => {
+      const sec = sectionRef.current;
+      const dash = dashRef.current;
+      if (!sec || !dash) return;
+      const sr = sec.getBoundingClientRect();
+      const dr = dash.getBoundingClientRect();
+      sec.style.setProperty("--hole-x", `${dr.left - sr.left}px`);
+      sec.style.setProperty("--hole-y", `${dr.top - sr.top}px`);
+      sec.style.setProperty("--hole-w", `${dr.width}px`);
+      sec.style.setProperty("--hole-h", `${dr.height}px`);
+    };
+
+    measure();
+    const ro = new ResizeObserver(measure);
+    if (sectionRef.current) ro.observe(sectionRef.current);
+    if (dashRef.current) ro.observe(dashRef.current);
+    window.addEventListener("resize", measure);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, []);
+  return (
+    <div className="relative">
+      {/* Ambient gradient blobs behind hero */}
+      <div className="pointer-events-none absolute inset-0 -z-20 overflow-hidden">
+        <div className="absolute -top-10 -left-10 h-72 w-72 rounded-full bg-blue-500/20 blur-3xl" />
+        <div className="absolute right-0 bottom-0 h-72 w-72 rounded-full bg-purple-500/20 blur-3xl" />
+      </div>
+      <div
+        ref={sectionRef}
+        className="relative before:absolute before:inset-0 before:-z-10 before:bg-gradient-to-br before:from-white before:via-blue-50 before:to-white before:[mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000)] before:[mask-composite:exclude] before:[mask-size:auto,var(--hole-w)_var(--hole-h)] before:[mask-position:0_0,var(--hole-x)_var(--hole-y)] before:[mask-repeat:no-repeat] before:content-[''] before:[-webkit-mask-composite:xor] dark:before:from-gray-900 dark:before:via-blue-950/20 dark:before:to-gray-900"
+      >
+        <SharedHeroSplit
+          className={cn("relative")}
+          heading={{
+            text: "Manage Your Entire Business From One Powerful Dashboard",
+            className:
+              "text-3xl md:text-4xl lg:text-5xl font-bold leading-tight text-black dark:text-white font-inter",
+          }}
+          subheading={{
+            text: "Stop switching between 12 different apps. DashFlow combines project management, analytics, team chat, and customer insights in one beautiful interface.",
+            className:
+              "text-base md:text-lg text-gray-700 dark:text-gray-100 mt-6 mb-8 max-w-2xl font-inter font-normal",
+          }}
+          section={{
+            className: "relative bg-none bg-transparent pt-0 px-8 pb-8",
+          }}
+          cta1={{
+            label: "Start Free Trial",
+            href: "#contact",
+            variant: "default",
+            size: "lg",
+            className:
+              "bg-blue-600 hover:bg-blue-700 text-white text-base font-semibold font-inter shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border-0 px-8 py-3",
+          }}
+          cta2={{
+            label: "Watch demo",
+            href: "#demo",
+            variant: "outline",
+            size: "lg",
+            className:
+              "border-blue-600 text-blue-600 hover:bg-blue-50 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-950 text-base font-semibold font-inter shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 px-8 py-3",
+          }}
+          image={{ src: undefined, alt: "Dashboard preview" }}
+          imageLayout="padded"
+          fallback={
+            <div
+              ref={dashRef}
+              className="relative z-10 flex h-full w-full items-center justify-center pl-0"
+            >
+              <div className="relative h-full w-[min(100%,720px)] overflow-hidden p-2">
+                <Dashboard
+                  stats={stats}
+                  projects={projects}
+                  floatingCards={floatingCards}
+                  navItems={navItems}
+                  activeTab={activeTab}
+                />
+              </div>
+            </div>
+          }
+          imageContainer={{
+            className:
+              "relative self-start md:self-start md:flex-none md:shrink-0 w-full h-[24rem] sm:h-[26rem] md:h-[31rem] md:w-1/2 mb-6 md:mb-0",
+          }}
+          textContainer={{ className: "flex-1 p-5 lg:p-8" }}
+          buttonsContainer={{
+            className:
+              "flex flex-col sm:flex-row gap-4 mt-8 justify-center lg:justify-start",
+          }}
+          textAlign="center"
+          ariaLabel="DashFlow hero section"
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -1,159 +1,117 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import { Navbar as SharedNavbar } from "@/components/sections/Navbar";
-
-/**
- * SaaS Dashboard preset Navbar
- *
- * - DashFlow branding with blue/purple gradient logo square (brandNode)
- * - Inter font for brand and links
- * - No CTA button (ctaButton = null)
- * - Blue hover states for links and theme toggle
- * - Glassy background with backdrop blur (light/dark)
- *
- * This preset exposes the Shared Navbar API so devs can override any prop/slot:
- *
- * Example:
- * <Navbar
- *   brand="My SaaS"
- *   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: "DashFlow",
-  // Preserve custom gradient logo block
-  brandNode: (
-    <div className="flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-br from-blue-600 to-purple-600 font-bold text-white shadow-sm ring-1 ring-white/40">
-      DF
-    </div>
-  ),
-  menuItems: [
-    { label: "Home", href: "#home" },
-    { label: "Features", href: "#features" },
-    { label: "Pricing", href: "#pricing" },
-    { label: "Contact", href: "#contact" },
-  ],
-  ctaButton: null,
-  showColorModeToggle: true,
-  navHeight: "h-16",
-  sticky: true,
-  ariaLabel: "DashFlow main navigation",
-  // Allow layout constraints to be added at page-level
-  className: "",
-
-  // Style slots tuned for the blue SaaS theme
-  nav: {
-    className:
-      "bg-white/60 dark:bg-gray-900/60 backdrop-blur supports-[backdrop-filter]:bg-white/60 supports-[backdrop-filter]:dark:bg-gray-900/60 text-gray-800 dark:text-white " +
-      // Accent variables for this preset (read by toggle, links, mobile links)
-      "[--navbar-accent:theme(colors.blue.700)] dark:[--navbar-accent:theme(colors.blue.400)] " +
-      "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.gray.900)] " +
-      "[--navbar-hover-bg:theme(colors.blue.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.23 0.05 264) 20%, transparent)] " +
-      "[--navbar-ring:theme(colors.blue.500)] dark:[--navbar-ring:theme(colors.blue.400)] " +
-      "[--navbar-border:theme(colors.gray.200)] dark:[--navbar-border:theme(colors.gray.800)]",
-  },
-  brandText: {
-    className: "text-xl font-bold font-inter text-blue-700 dark:text-blue-500",
-  },
-  links: {
-    className:
-      "text-sm font-medium font-inter text-gray-800 dark:text-white hover:text-blue-700 dark:hover:text-blue-400 " +
-      "focus:ring-[var(--navbar-ring)]",
-  },
-  // Preset keeps CTA hidden; if enabled, provide subtle interactive defaults
-  ctaButtonStyle: {
-    variant: "default",
-    size: "default",
-    className:
-      "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-  },
-  // Additional slots that weren't styled before, now aligned to the theme
-  mobileMenu: {
-    className: "border-t border-gray-200/80 dark:border-gray-800/80",
-  },
-  container: {
-    className: "max-w-7xl mx-auto",
-  },
-  brandWrapper: {
-    className: "",
-  },
-  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-blue-50 dark:hover:bg-blue-900/20 " +
-      "focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-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. Keeps the API simple and predictable.
-  const props: SharedNavbarProps = {
-    ...defaultProps,
-    ...overrides,
-  };
-  return <SharedNavbar {...props} />;
-}
-
-// "use client";
-
-// import { Navbar as SharedNavbar } from "@/components/sections/Navbar";
-
-// export function Navbar() {
-//   return (
-//     <SharedNavbar
-//       brand="DashFlow"
-//       brandNode={
-//         <div className="flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-br from-blue-600 to-purple-600 font-bold text-white shadow-sm ring-1 ring-white/40">
-//           DF
-//         </div>
-//       }
-//       menuItems={[
-//         { label: "Home", href: "#home" },
-//         { label: "Features", href: "#features" },
-//         { label: "Pricing", href: "#pricing" },
-//         { label: "Contact", href: "#contact" },
-//       ]}
-//       ctaButton={null}
-//       showColorModeToggle={true}
-//       navHeight="h-16"
-//       sticky={true}
-//       ariaLabel="DashFlow main navigation"
-//       nav={{
-//         className:
-//           "bg-white/60 dark:bg-gray-900/60 backdrop-blur supports-[backdrop-filter]:bg-white/60 supports-[backdrop-filter]:dark:bg-gray-900/60 text-gray-800 dark:text-white",
-//       }}
-//       brandText={{
-//         className:
-//           "text-xl font-bold font-inter text-blue-700 dark:text-blue-500",
-//       }}
-//       links={{
-//         className:
-//           "text-sm font-medium font-inter text-gray-800 dark:text-white hover:text-blue-700 dark:hover:text-blue-400",
-//       }}
-//     />
-//   );
-// }
+"use client";
+
+import type { ComponentProps } from "react";
+import { Navbar as SharedNavbar } from "@/components/sections/Navbar";
+
+/**
+ * SaaS Dashboard preset Navbar
+ *
+ * - DashFlow branding with blue/purple gradient logo square (brandNode)
+ * - Inter font for brand and links
+ * - No CTA button (ctaButton = null)
+ * - Blue hover states for links and theme toggle
+ * - Glassy background with backdrop blur (light/dark)
+ *
+ * This preset exposes the Shared Navbar API, allowing full customization of any prop or slot.
+ *
+ * Example:
+ * <Navbar
+ *   brand="My SaaS"
+ *   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: "DashFlow",
+  // Gradient logo block
+  brandNode: (
+    <div className="flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-br from-blue-600 to-purple-600 font-bold text-white shadow-sm ring-1 ring-white/40">
+      DF
+    </div>
+  ),
+  menuItems: [
+    { label: "Home", href: "#home" },
+    { label: "Features", href: "#features" },
+    { label: "Pricing", href: "#pricing" },
+    { label: "Contact", href: "#contact" },
+  ],
+  ctaButton: null,
+  showColorModeToggle: true,
+  navHeight: "h-16",
+  sticky: true,
+  ariaLabel: "DashFlow main navigation",
+  // Allow layout constraints to be added at page-level
+  className: "",
+  // Style slots tuned for the blue SaaS theme
+  nav: {
+    className:
+      "bg-white/60 dark:bg-gray-900/60 backdrop-blur supports-[backdrop-filter]:bg-white/60 supports-[backdrop-filter]:dark:bg-gray-900/60 text-gray-800 dark:text-white " +
+      // Accent variables for this preset (read by toggle, links, mobile links)
+      "[--navbar-accent:theme(colors.blue.700)] dark:[--navbar-accent:theme(colors.blue.400)] " +
+      "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.gray.900)] " +
+      "[--navbar-hover-bg:theme(colors.blue.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.23 0.05 264) 20%, transparent)] " +
+      "[--navbar-ring:theme(colors.blue.500)] dark:[--navbar-ring:theme(colors.blue.400)] " +
+      "[--navbar-border:theme(colors.gray.200)] dark:[--navbar-border:theme(colors.gray.800)]",
+  },
+  brandText: {
+    className: "text-xl font-bold font-inter text-blue-700 dark:text-blue-500",
+  },
+  links: {
+    className:
+      "text-sm font-medium font-inter text-gray-800 dark:text-white hover:text-blue-700 dark:hover:text-blue-400 " +
+      "focus:ring-[var(--navbar-ring)]",
+  },
+  // Preset keeps CTA hidden; if enabled, provide subtle interactive defaults
+  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/80 dark:border-gray-800/80",
+  },
+  container: {
+    className: "max-w-7xl mx-auto",
+  },
+  brandWrapper: {
+    className: "",
+  },
+  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-blue-50 dark:hover:bg-blue-900/20 " +
+      "focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-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 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.
+  const props: SharedNavbarProps = {
+    ...defaultProps,
+    ...overrides,
+  };
+  return <SharedNavbar {...props} />;
+}