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

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

@@ -1,90 +1,83 @@
-"use client";
-
-import React from "react";
-import { HeroSplit } from "@/components/sections/HeroSplit";
-import { NetworkPattern } from "./NetworkPattern";
-
-/**
- * Upgraded HeroNew preset for the digital agency template,
- * wired to the shared HeroSplit with slots + cn API.
- */
-export function Hero() {
-  return (
-    <section id="home" className="bg-white dark:bg-black">
-      <HeroSplit
-        section={{
-          className:
-            "relative bg-gradient-to-br from-violet-600 to-fuchsia-600 px-6 pt-8 pb-16 md:pt-12 md:pb-20 text-white hero-pattern",
-        }}
-        heading={{
-          text: "Digital Innovation That Drives Growth",
-          className:
-            "text-5xl md:text-5xl lg:text-7xl font-extrabold leading-tight text-white font-poppins",
-        }}
-        subheading={{
-          text: "We craft exceptional digital experiences that transform businesses. From cutting-edge web applications to AI-powered solutions, we turn your vision into reality.",
-          className:
-            "mt-6 text-xl md:text-1xl text-white/90 max-w-3xl font-inter font-medium leading-relaxed",
-        }}
-        cta1={{
-          label: "Start Your Project",
-          href: "#contact",
-          variant: "default",
-          size: "lg",
-          className: [
-            "font-poppins font-semibold px-8 py-3 shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 text-lg",
-            "[--btn-bg:theme(colors.fuchsia.600)]",
-            "hover:[--btn-hover-bg:theme(colors.fuchsia.700)]",
-            "[--btn-fg:theme(colors.white)]",
-            "hover:[--btn-hover-fg:theme(colors.white)]",
-          ].join(" "),
-        }}
-        cta2={{
-          label: "Explore Solutions",
-          href: "#services",
-          variant: "outline",
-          size: "lg",
-          className: [
-            "font-poppins font-semibold px-8 py-3 text-lg shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-            "border-2", // match previous thickness
-            // set colors via vars
-            "[--btn-fg:oklch(0.51_0.18_341)]", // fuchsia-700-ish
-            "[--btn-border:oklch(0.97_0.01_0)]", // white/90 approx
-            "[--btn-bg:oklch(0.97_0.01_0_/0.9)]",
-            "hover:[--btn-hover-bg:oklch(1_0_0)]", // white
-            "hover:[--btn-hover-fg:oklch(0.51_0.18_341)]",
-            // dark: make it a light outline with white text
-            "dark:[--btn-fg:oklch(1_0_0)]",
-            "dark:[--btn-border:oklch(1_0_0_/0.9)]",
-            "dark:[--btn-bg:transparent]",
-            "dark:hover:[--btn-hover-bg:oklch(1_0_0))]",
-          ].join(" "),
-        }}
-        image={{
-          src: undefined,
-          alt: "Digital innovation network visualization",
-          className: "object-contain",
-        }}
-        imageLayout="full-bleed"
-        fallback={<NetworkPattern />}
-        imageContainer={{ className: "mt-10 sm:mt-10 md:mt-0 md:mr-0 lg:mr-7" }}
-        // imageContainer={{
-        //   className:
-        //     "relative w-full min-h-[16rem] h-[20rem] md:h-[28rem] lg:h-[32rem] self-start mt-20 lg:mt-0 mb-10 lg:mb-0",
-        // }}
-        textContainer={{
-          className: "flex-1 px-5 lg:px-8 lg:self-start pt-0 md:pt-2 lg:pt-4",
-        }}
-        buttonsContainer={{
-          className: [
-            "gap-4 mt-8 sm:flex-col lg:flex-row",
-            "[--btn-ring:oklch(1_0_0)]", // white ring to match on purple bg
-          ].join(" "),
-        }}
-        // buttonsContainer={{ className: "flex gap-4 mt-8" }}
-        textAlign="center"
-        ariaLabel="Digital innovation that drives growth hero section"
-      />
-    </section>
-  );
-}
+"use client";
+
+import React from "react";
+import { HeroSplit } from "@/components/sections/HeroSplit";
+import { NetworkPattern } from "./NetworkPattern";
+
+/**
+ * Hero preset for the digital agency template
+ */
+export function Hero() {
+  return (
+    <section id="home" className="bg-white dark:bg-black">
+      <HeroSplit
+        section={{
+          className:
+            "relative bg-gradient-to-br from-violet-600 to-fuchsia-600 px-6 pt-8 pb-16 md:pt-12 md:pb-20 text-white hero-pattern",
+        }}
+        heading={{
+          text: "Digital Innovation That Drives Growth",
+          className:
+            "text-5xl md:text-5xl lg:text-7xl font-extrabold leading-tight text-white font-poppins",
+        }}
+        subheading={{
+          text: "We craft exceptional digital experiences that transform businesses. From cutting-edge web applications to AI-powered solutions, we turn your vision into reality.",
+          className:
+            "mt-6 text-xl md:text-1xl text-white/90 max-w-3xl font-inter font-medium leading-relaxed",
+        }}
+        cta1={{
+          label: "Start Your Project",
+          href: "#contact",
+          variant: "default",
+          size: "lg",
+          className: [
+            "font-poppins font-semibold px-8 py-3 shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 text-lg",
+            "[--btn-bg:theme(colors.fuchsia.600)]",
+            "hover:[--btn-hover-bg:theme(colors.fuchsia.700)]",
+            "[--btn-fg:theme(colors.white)]",
+            "hover:[--btn-hover-fg:theme(colors.white)]",
+          ].join(" "),
+        }}
+        cta2={{
+          label: "Explore Solutions",
+          href: "#services",
+          variant: "outline",
+          size: "lg",
+          className: [
+            "font-poppins font-semibold px-8 py-3 text-lg shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
+            "border-2",
+            // set colors via vars
+            "[--btn-fg:oklch(0.51_0.18_341)]",
+            "[--btn-border:oklch(0.97_0.01_0)]",
+            "[--btn-bg:oklch(0.97_0.01_0_/0.9)]",
+            "hover:[--btn-hover-bg:oklch(1_0_0)]",
+            "hover:[--btn-hover-fg:oklch(0.51_0.18_341)]",
+            "dark:[--btn-fg:oklch(1_0_0)]",
+            "dark:[--btn-border:oklch(1_0_0_/0.9)]",
+            "dark:[--btn-bg:transparent]",
+            "dark:hover:[--btn-hover-bg:oklch(1_0_0))]",
+          ].join(" "),
+        }}
+        image={{
+          src: undefined,
+          alt: "Digital innovation network visualization",
+          className: "object-contain",
+        }}
+        imageLayout="full-bleed"
+        fallback={<NetworkPattern />}
+        imageContainer={{ className: "mt-10 sm:mt-10 md:mt-0 md:mr-0 lg:mr-7" }}
+        textContainer={{
+          className: "flex-1 px-5 lg:px-8 lg:self-start pt-0 md:pt-2 lg:pt-4",
+        }}
+        buttonsContainer={{
+          className: [
+            "gap-4 mt-8 sm:flex-col lg:flex-row",
+            "[--btn-ring:oklch(1_0_0)]",
+          ].join(" "),
+        }}
+        textAlign="center"
+        ariaLabel="Digital innovation that drives growth hero section"
+      />
+    </section>
+  );
+}

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

@@ -1,168 +1,121 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import { Navbar as SharedNavbar } from "@/components/sections/Navbar";
-import { BrandNodeGradientRing } from "@/components/ui/brand-node";
-
-/**
- * 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
- *
- * Example overrides:
- * <Navbar
- *   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: "Nexus Digital",
-  brandNode: (
-    <BrandNodeGradientRing gradient="conic-gradient(#7c3aed, #ec4899, #7c3aed)" />
-  ),
-  menuItems: [
-    { label: "Home", href: "#home" },
-    { label: "Services", href: "#services" },
-    { label: "Portfolio", href: "#portfolio" },
-    { label: "Pricing", href: "#pricing" },
-    { label: "Contact", href: "#contact" },
-  ],
-  ctaButton: null,
-  showColorModeToggle: true,
-  navHeight: "h-16",
-  sticky: true,
-  ariaLabel: "Nexus Digital main navigation",
-
-  // Allow page-level layout overrides if needed
-  className: "",
-
-  // Style slots (preserve original look; add defaults for new 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 " +
-      // Accent variables for this preset (read by toggle, links, mobile links)
-      "[--navbar-accent:theme(colors.fuchsia.600)] dark:[--navbar-accent:theme(colors.fuchsia.400)] " +
-      "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.gray.900)] " +
-      "[--navbar-hover-bg:theme(colors.fuchsia.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.24 0.07 330) 20%, transparent)] " +
-      "[--navbar-ring:theme(colors.fuchsia.500)] dark:[--navbar-ring:theme(colors.fuchsia.400)] " +
-      "[--navbar-border:theme(colors.gray.200)] dark:[--navbar-border:theme(colors.gray.800)]",
-  },
-  brandText: {
-    className:
-      "text-2xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
-  },
-  links: {
-    className:
-      "text-sm font-inter font-medium text-gray-700 dark:text-gray-200 " +
-      "hover:text-fuchsia-600 dark:hover:text-fuchsia-400 " +
-      "focus:ring-[var(--navbar-ring)]",
-  },
-
-  // CTA hidden by default; styled to match theme if enabled later
-  ctaButtonStyle: {
-    variant: "default",
-    size: "default",
-    className:
-      "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 " +
-      "bg-fuchsia-600 text-white hover:bg-fuchsia-700 " +
-      "dark:bg-fuchsia-500 dark:hover:bg-fuchsia-400",
-  },
-
-  mobileMenu: {
-    className: "border-t border-gray-200 dark:border-gray-800",
-  },
-  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-fuchsia-50 dark:hover:bg-fuchsia-900/20 " +
-      "focus:outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-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: providing a slot object replaces that slot entirely.
-  const props: SharedNavbarProps = {
-    ...defaultProps,
-    ...overrides,
-  };
-  return <SharedNavbar {...props} />;
-}
-
-// "use client";
-
-// import React from "react";
-// import { Navbar as SharedNavbar } from "@/components/sections/Navbar";
-// import { BrandNodeGradientRing } from "@/components/ui/brand-node";
-
-// export function Navbar() {
-//   return (
-//     <SharedNavbar
-//       brand="Nexus Digital"
-//       brandNode={
-//         <BrandNodeGradientRing gradient="conic-gradient(#7c3aed, #ec4899, #7c3aed)" />
-//       }
-//       // brandNode={
-//       //   <div className="grid h-8 w-8 place-items-center rounded-md bg-gradient-to-br from-blue-600 to-purple-600 text-xs font-extrabold text-white shadow-sm">
-//       //     ND
-//       //   </div>
-//       // }
-//       menuItems={[
-//         { label: "Home", href: "#home" },
-//         { label: "Services", href: "#services" },
-//         { label: "Portfolio", href: "#portfolio" },
-//         { label: "Pricing", href: "#pricing" },
-//         { label: "Contact", href: "#contact" },
-//       ]}
-//       ctaButton={null}
-//       showColorModeToggle={true}
-//       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",
-//       }}
-//       brandText={{
-//         className:
-//           "text-2xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
-//       }}
-//       links={{
-//         className:
-//           "text-sm font-inter font-medium text-gray-700 dark:text-gray-200 hover:text-fuchsia-600 dark:hover:text-fuchsia-400",
-//       }}
-//       mobileMenu={{
-//         className: "border-t border-gray-200 dark:border-gray-800",
-//       }}
-//     />
-//   );
-// }
-
-// export default Navbar;
+"use client";
+
+import type { ComponentProps } from "react";
+import { Navbar as SharedNavbar } from "@/components/sections/Navbar";
+import { BrandNodeGradientRing } from "@/components/ui/brand-node";
+
+/**
+ * Digital Agency preset Navbar
+ *
+ * - No CTA button (ctaButton = null)
+ * - Fuchsia hover/focus accents for links and toggles
+ * - Exposes the full Shared Navbar API via shallow-merge overrides
+ *
+ * This preset exposes the Shared Navbar API, allowing full customization of any prop or slot.
+ *
+ * Example overrides:
+ * <Navbar
+ *   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: "Nexus Digital",
+  brandNode: (
+    <BrandNodeGradientRing gradient="conic-gradient(#7c3aed, #ec4899, #7c3aed)" />
+  ),
+  menuItems: [
+    { label: "Home", href: "#home" },
+    { label: "Services", href: "#services" },
+    { label: "Portfolio", href: "#portfolio" },
+    { label: "Pricing", href: "#pricing" },
+    { label: "Contact", href: "#contact" },
+  ],
+  ctaButton: null,
+  showColorModeToggle: true,
+  navHeight: "h-16",
+  sticky: true,
+  ariaLabel: "Nexus Digital main navigation",
+
+  // Allow page-level layout overrides if needed
+  className: "",
+
+  // 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 " +
+      // Accent variables for this preset (read by toggle, links, mobile links)
+      "[--navbar-accent:theme(colors.fuchsia.600)] dark:[--navbar-accent:theme(colors.fuchsia.400)] " +
+      "[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.gray.900)] " +
+      "[--navbar-hover-bg:theme(colors.fuchsia.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.24 0.07 330) 20%, transparent)] " +
+      "[--navbar-ring:theme(colors.fuchsia.500)] dark:[--navbar-ring:theme(colors.fuchsia.400)] " +
+      "[--navbar-border:theme(colors.gray.200)] dark:[--navbar-border:theme(colors.gray.800)]",
+  },
+  brandText: {
+    className:
+      "text-2xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
+  },
+  links: {
+    className:
+      "text-sm font-inter font-medium text-gray-700 dark:text-gray-200 " +
+      "hover:text-fuchsia-600 dark:hover:text-fuchsia-400 " +
+      "focus:ring-[var(--navbar-ring)]",
+  },
+
+  // CTA hidden by default; styled to match theme if enabled later
+  ctaButtonStyle: {
+    variant: "default",
+    size: "default",
+    className:
+      "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 " +
+      "bg-fuchsia-600 text-white hover:bg-fuchsia-700 " +
+      "dark:bg-fuchsia-500 dark:hover:bg-fuchsia-400",
+  },
+
+  mobileMenu: {
+    className: "border-t border-gray-200 dark:border-gray-800",
+  },
+  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-fuchsia-50 dark:hover:bg-fuchsia-900/20 " +
+      "focus:outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-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: providing a slot object replaces that slot entirely.
+  const props: SharedNavbarProps = {
+    ...defaultProps,
+    ...overrides,
+  };
+  return <SharedNavbar {...props} />;
+}