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

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

@@ -1,90 +1,90 @@
-"use client";
-
-import { Pricing as SharedPricing } from "@/components/sections/Pricing";
-import { cn } from "@/lib/utils";
-
-const DefaultPricingData = [
-  {
-    pricingPlanHeaderText: "Starter Plan",
-    pricingPlanPrice: "$29/month",
-    pricingPlanFeatures: [
-      "Up to 5 users",
-      "3 projects",
-      "Basic analytics",
-      "email support",
-    ],
-    pricingPlanCTALabel: "Select Plan",
-    pricingPlanCTAHref: "#contact",
-  },
-  {
-    pricingPlanHeaderText: "Professional Plan",
-    pricingPlanPrice: "$79.99/month",
-    pricingPlanFeatures: [
-      "Up to 25 users",
-      "Unlimited projects",
-      "Advanced analytics",
-      "Priority support",
-      "Api access",
-    ],
-    pricingPlanCTALabel: "Select Plan",
-    pricingPlanCTAHref: "#contact",
-    isPopular: true,
-  },
-  {
-    pricingPlanHeaderText: "Enterprise Plan",
-    pricingPlanPrice: "$199.99/month",
-    pricingPlanFeatures: [
-      "Unlimited users",
-      "Custom integrations",
-      "Dedicated account manager",
-      "SLA guarantee",
-    ],
-    pricingPlanCTALabel: "Select Plan",
-    pricingPlanCTAHref: "#contact",
-  },
-];
-
-export function Pricing() {
-  return (
-    <SharedPricing
-      pricingPlans={DefaultPricingData}
-      pricingHeadingText="Simple Pricing That Scales With You"
-      className={cn("relative")}
-      section={{
-        className:
-          "pt-20 pb-5 bg-[var(--section-bg,theme(colors.white))] dark:bg-[var(--section-bg,theme(colors.gray.900))]",
-      }}
-      heading={{
-        className:
-          "text-3xl font-bold font-inter text-center mb-8 text-[var(--heading-fg)]",
-      }}
-      card={{
-        className:
-          "relative rounded-lg transition-all duration-300 will-change-transform hover:-translate-y-1 bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
-      }}
-      title={{
-        className:
-          "text-xl font-bold font-inter mb-2 text-[var(--card-title-fg)]",
-      }}
-      price={{
-        className:
-          "text-2xl font-bold font-inter mb-4 text-[var(--card-title-fg)]",
-      }}
-      featureItem={{
-        className:
-          "flex items-center text-base font-inter text-[var(--card-muted-fg)]",
-      }}
-      cta={{
-        variant: "default",
-        size: "lg",
-        className:
-          "w-full font-semibold font-inter shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 [--btn-bg:theme(colors.sky.600)] hover:[--btn-hover-bg:theme(colors.sky.700)] [--btn-fg:theme(colors.white)] hover:[--btn-hover-fg:theme(colors.white)] border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
-      }}
-      popularBadge={{
-        className:
-          "absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full text-xs font-semibold bg-[var(--badge-active-bg)] text-[var(--badge-active-fg)] border-[var(--badge-active-border)]",
-      }}
-      ariaLabel="Pricing section"
-    />
-  );
-}
+"use client";
+
+import { Pricing as SharedPricing } from "@/components/sections/Pricing";
+import { cn } from "@/lib/utils";
+
+const DefaultPricingData = [
+  {
+    pricingPlanHeaderText: "Starter Plan",
+    pricingPlanPrice: "$29/month",
+    pricingPlanFeatures: [
+      "Up to 5 users",
+      "3 projects",
+      "Basic analytics",
+      "email support",
+    ],
+    pricingPlanCTALabel: "Select Plan",
+    pricingPlanCTAHref: "#contact",
+  },
+  {
+    pricingPlanHeaderText: "Professional Plan",
+    pricingPlanPrice: "$79.99/month",
+    pricingPlanFeatures: [
+      "Up to 25 users",
+      "Unlimited projects",
+      "Advanced analytics",
+      "Priority support",
+      "Api access",
+    ],
+    pricingPlanCTALabel: "Select Plan",
+    pricingPlanCTAHref: "#contact",
+    isPopular: true,
+  },
+  {
+    pricingPlanHeaderText: "Enterprise Plan",
+    pricingPlanPrice: "$199.99/month",
+    pricingPlanFeatures: [
+      "Unlimited users",
+      "Custom integrations",
+      "Dedicated account manager",
+      "SLA guarantee",
+    ],
+    pricingPlanCTALabel: "Select Plan",
+    pricingPlanCTAHref: "#contact",
+  },
+];
+
+export function Pricing() {
+  return (
+    <SharedPricing
+      pricingPlans={DefaultPricingData}
+      pricingHeadingText="Simple Pricing That Scales With You"
+      className={cn("relative")}
+      section={{
+        className:
+          "pt-20 pb-5 bg-[var(--section-bg,theme(colors.white))] dark:bg-[var(--section-bg,theme(colors.gray.900))]",
+      }}
+      heading={{
+        className:
+          "text-3xl font-bold font-inter text-center mb-8 text-[var(--heading-fg)]",
+      }}
+      card={{
+        className:
+          "relative rounded-lg transition-all duration-300 will-change-transform hover:-translate-y-1 bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+      }}
+      title={{
+        className:
+          "text-xl font-bold font-inter mb-2 text-[var(--card-title-fg)]",
+      }}
+      price={{
+        className:
+          "text-2xl font-bold font-inter mb-4 text-[var(--card-title-fg)]",
+      }}
+      featureItem={{
+        className:
+          "flex items-center text-base font-inter text-[var(--card-muted-fg)]",
+      }}
+      cta={{
+        variant: "default",
+        size: "lg",
+        className:
+          "w-full font-semibold font-inter shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 [--btn-bg:theme(colors.sky.600)] hover:[--btn-hover-bg:theme(colors.sky.700)] [--btn-fg:theme(colors.white)] hover:[--btn-hover-fg:theme(colors.white)] border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+      }}
+      popularBadge={{
+        className:
+          "absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full text-xs font-semibold bg-[var(--badge-active-bg)] text-[var(--badge-active-fg)] border-[var(--badge-active-border)]",
+      }}
+      ariaLabel="Pricing section"
+    />
+  );
+}

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

@@ -1,97 +1,96 @@
-"use client";
-
-import { useEffect } from "react";
-
-// Smoothly scrolls to hash targets with a custom, faster duration (~300ms)
-export function SmoothScroll() {
-  useEffect(() => {
-    let suppressClick = false;
-
-    const animateTo = (href: string) => {
-      const el = document.querySelector(href) as HTMLElement | null;
-      if (!el) return;
-
-      const navbarOffsetPx = 64; // matches h-16 sticky navbar
-      const start = window.scrollY;
-      const targetTop =
-        el.getBoundingClientRect().top + window.scrollY - navbarOffsetPx;
-      const distance = targetTop - start;
-      const duration = 300; // ms
-      const startTime = performance.now();
-
-      // iOS-like easing
-      const easeOutQuart = (t: number) => 1 - Math.pow(1 - t, 4);
-
-      const step = (now: number) => {
-        const elapsed = now - startTime;
-        const t = Math.min(1, elapsed / duration);
-        const eased = easeOutQuart(t);
-        window.scrollTo(0, start + distance * eased);
-        if (t < 1) requestAnimationFrame(step);
-        else history.replaceState(null, "", href);
-      };
-
-      requestAnimationFrame(step);
-    };
-
-    const onPointerDown = (e: Event) => {
-      const ev = e as PointerEvent;
-      const target = e.currentTarget as HTMLAnchorElement;
-      const href = target.getAttribute("href");
-      if (!href || !href.startsWith("#")) return;
-      // Only primary button, no modifiers
-      if (
-        ev.button !== 0 ||
-        ev.metaKey ||
-        ev.ctrlKey ||
-        ev.altKey ||
-        ev.shiftKey
-      )
-        return;
-      e.preventDefault();
-      suppressClick = true;
-      animateTo(href);
-    };
-
-    const onClick = (e: Event) => {
-      const target = e.currentTarget as HTMLAnchorElement;
-      const href = target.getAttribute("href");
-      if (!href || !href.startsWith("#")) return;
-      if (suppressClick) {
-        e.preventDefault();
-        suppressClick = false;
-        return;
-      }
-      e.preventDefault();
-      animateTo(href);
-    };
-
-    const onKeyDown = (e: Event) => {
-      const ev = e as KeyboardEvent;
-      if (ev.key !== "Enter" && ev.key !== " ") return;
-      const target = e.currentTarget as HTMLAnchorElement;
-      const href = target.getAttribute("href");
-      if (!href || !href.startsWith("#")) return;
-      e.preventDefault();
-      animateTo(href);
-    };
-
-    const links = Array.from(
-      document.querySelectorAll('a[href^="#"]'),
-    ) as HTMLAnchorElement[];
-    links.forEach((a) => {
-      a.addEventListener("pointerdown", onPointerDown);
-      a.addEventListener("click", onClick);
-      a.addEventListener("keydown", onKeyDown);
-    });
-    return () => {
-      links.forEach((a) => {
-        a.removeEventListener("pointerdown", onPointerDown);
-        a.removeEventListener("click", onClick);
-        a.removeEventListener("keydown", onKeyDown);
-      });
-    };
-  }, []);
-
-  return null;
-}
+"use client";
+
+import { useEffect } from "react";
+
+// Smoothly scrolls to section links with a faster duration
+export function SmoothScroll() {
+  useEffect(() => {
+    let suppressClick = false;
+
+    const animateTo = (href: string) => {
+      const el = document.querySelector(href) as HTMLElement | null;
+      if (!el) return;
+
+      const navbarOffsetPx = 64;
+      const start = window.scrollY;
+      const targetTop =
+        el.getBoundingClientRect().top + window.scrollY - navbarOffsetPx;
+      const distance = targetTop - start;
+      const duration = 300; // ms
+      const startTime = performance.now();
+
+      const easeOutQuart = (t: number) => 1 - Math.pow(1 - t, 4);
+
+      const step = (now: number) => {
+        const elapsed = now - startTime;
+        const t = Math.min(1, elapsed / duration);
+        const eased = easeOutQuart(t);
+        window.scrollTo(0, start + distance * eased);
+        if (t < 1) requestAnimationFrame(step);
+        else history.replaceState(null, "", href);
+      };
+
+      requestAnimationFrame(step);
+    };
+
+    const onPointerDown = (e: Event) => {
+      const ev = e as PointerEvent;
+      const target = e.currentTarget as HTMLAnchorElement;
+      const href = target.getAttribute("href");
+      if (!href || !href.startsWith("#")) return;
+
+      if (
+        ev.button !== 0 ||
+        ev.metaKey ||
+        ev.ctrlKey ||
+        ev.altKey ||
+        ev.shiftKey
+      )
+        return;
+      e.preventDefault();
+      suppressClick = true;
+      animateTo(href);
+    };
+
+    const onClick = (e: Event) => {
+      const target = e.currentTarget as HTMLAnchorElement;
+      const href = target.getAttribute("href");
+      if (!href || !href.startsWith("#")) return;
+      if (suppressClick) {
+        e.preventDefault();
+        suppressClick = false;
+        return;
+      }
+      e.preventDefault();
+      animateTo(href);
+    };
+
+    const onKeyDown = (e: Event) => {
+      const ev = e as KeyboardEvent;
+      if (ev.key !== "Enter" && ev.key !== " ") return;
+      const target = e.currentTarget as HTMLAnchorElement;
+      const href = target.getAttribute("href");
+      if (!href || !href.startsWith("#")) return;
+      e.preventDefault();
+      animateTo(href);
+    };
+
+    const links = Array.from(
+      document.querySelectorAll('a[href^="#"]'),
+    ) as HTMLAnchorElement[];
+    links.forEach((a) => {
+      a.addEventListener("pointerdown", onPointerDown);
+      a.addEventListener("click", onClick);
+      a.addEventListener("keydown", onKeyDown);
+    });
+    return () => {
+      links.forEach((a) => {
+        a.removeEventListener("pointerdown", onPointerDown);
+        a.removeEventListener("click", onClick);
+        a.removeEventListener("keydown", onKeyDown);
+      });
+    };
+  }, []);
+
+  return null;
+}

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

@@ -1,72 +1,72 @@
-"use client";
-
-import { Testimonials as SharedTestimonials } from "@/components/sections/Testimonials";
-import { cn } from "@/lib/utils";
-
-export function Testimonials() {
-  return (
-    <div className="relative">
-      {/* Gradient mesh + fine noise overlays for depth */}
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(60rem_60rem_at_0%_0%,rgba(59,130,246,0.08),transparent_40%),radial-gradient(50rem_50rem_at_100%_100%,rgba(168,85,247,0.06),transparent_40%)] opacity-20"
-      />
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(rgba(255,255,255,0.07)_1px,transparent_1px)] [background-size:14px_14px] opacity-[0.05]"
-      />
-      <SharedTestimonials
-        testimonials={[
-          {
-            testimonialText:
-              "DashFlow replaced 6 different tools for us. Our team productivity increased 40% in the first month.",
-            testimonialAuthor: "- Sarah Chen, Marketing Director at TechStart",
-            testimonialAuthorInitials: "SC",
-          },
-          {
-            testimonialText:
-              "Finally, a dashboard that actually makes sense. Setup took 10 minutes, not 10 hours.",
-            testimonialAuthor: "- Mike Rodriguez, Operations Manager",
-            testimonialAuthorInitials: "MR",
-          },
-          {
-            testimonialText:
-              "The analytics alone pay for the subscription. We spot trends weeks earlier now.",
-            testimonialAuthor: "- Lisa Park, CEO of GrowthCo",
-            testimonialAuthorInitials: "LP",
-          },
-        ]}
-        testimonialSectionHeader="What Our Customers Say"
-        className={cn("relative")}
-        section={{ className: "py-16 px-6 bg-background" }}
-        container={{ className: "max-w-7xl mx-auto" }}
-        header={{ className: "text-center mb-12" }}
-        heading={{
-          className:
-            "text-3xl md:text-4xl font-bold font-inter text-[var(--heading-fg)]",
-        }}
-        grid={{
-          className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8",
-        }}
-        card={{
-          className:
-            "p-6 rounded-lg transition-transform duration-200 hover:-translate-y-1 bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
-        }}
-        text={{
-          className:
-            "italic font-inter font-normal text-base text-[var(--card-fg)]",
-        }}
-        author={{
-          className:
-            "text-sm font-medium font-inter text-[var(--card-muted-fg)]",
-        }}
-        avatar={{
-          className:
-            "w-12 h-12 rounded-full flex items-center justify-center text-lg font-bold bg-[var(--badge-bg)] text-[var(--badge-fg)] border-[var(--badge-border)]",
-        }}
-        avatarText={{ className: "font-bold" }}
-        ariaLabel="Customer testimonials"
-      />
-    </div>
-  );
-}
+"use client";
+
+import { Testimonials as SharedTestimonials } from "@/components/sections/Testimonials";
+import { cn } from "@/lib/utils";
+
+export function Testimonials() {
+  return (
+    <div className="relative">
+      {/* Gradient mesh and fine noise overlays for depth */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(60rem_60rem_at_0%_0%,rgba(59,130,246,0.08),transparent_40%),radial-gradient(50rem_50rem_at_100%_100%,rgba(168,85,247,0.06),transparent_40%)] opacity-20"
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(rgba(255,255,255,0.07)_1px,transparent_1px)] [background-size:14px_14px] opacity-[0.05]"
+      />
+      <SharedTestimonials
+        testimonials={[
+          {
+            testimonialText:
+              "DashFlow replaced 6 different tools for us. Our team productivity increased 40% in the first month.",
+            testimonialAuthor: "- Sarah Chen, Marketing Director at TechStart",
+            testimonialAuthorInitials: "SC",
+          },
+          {
+            testimonialText:
+              "Finally, a dashboard that actually makes sense. Setup took 10 minutes, not 10 hours.",
+            testimonialAuthor: "- Mike Rodriguez, Operations Manager",
+            testimonialAuthorInitials: "MR",
+          },
+          {
+            testimonialText:
+              "The analytics alone pay for the subscription. We spot trends weeks earlier now.",
+            testimonialAuthor: "- Lisa Park, CEO of GrowthCo",
+            testimonialAuthorInitials: "LP",
+          },
+        ]}
+        testimonialSectionHeader="What Our Customers Say"
+        className={cn("relative")}
+        section={{ className: "py-16 px-6 bg-background" }}
+        container={{ className: "max-w-7xl mx-auto" }}
+        header={{ className: "text-center mb-12" }}
+        heading={{
+          className:
+            "text-3xl md:text-4xl font-bold font-inter text-[var(--heading-fg)]",
+        }}
+        grid={{
+          className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8",
+        }}
+        card={{
+          className:
+            "p-6 rounded-lg transition-transform duration-200 hover:-translate-y-1 bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+        }}
+        text={{
+          className:
+            "italic font-inter font-normal text-base text-[var(--card-fg)]",
+        }}
+        author={{
+          className:
+            "text-sm font-medium font-inter text-[var(--card-muted-fg)]",
+        }}
+        avatar={{
+          className:
+            "w-12 h-12 rounded-full flex items-center justify-center text-lg font-bold bg-[var(--badge-bg)] text-[var(--badge-fg)] border-[var(--badge-border)]",
+        }}
+        avatarText={{ className: "font-bold" }}
+        ariaLabel="Customer testimonials"
+      />
+    </div>
+  );
+}

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

@@ -1,53 +1,53 @@
-"use client";
-
-import { TrustBadges as SharedTrustBadges } from "@/components/sections/TrustBadges";
-import { cn } from "@/lib/utils";
-
-const defaultBadgesInfo = [
-  {
-    badgeText: "10,000+ businesses",
-    badgeDescription: "Trusted by",
-    badgeIcon: "📊",
-  },
-  {
-    badgeText: "SOC 2 Compliant",
-    badgeDescription: "Enterprise security",
-    badgeIcon: "🔒",
-  },
-  {
-    badgeText: "99.9% Uptime",
-    badgeDescription: "Reliable service",
-    badgeIcon: "⚡",
-  },
-  {
-    badgeText: "4.9/5 Rating",
-    badgeDescription: "Customer satisfaction",
-    badgeIcon: "⭐",
-  },
-];
-
-export function TrustBadges() {
-  return (
-    <SharedTrustBadges
-      badges={defaultBadgesInfo}
-      className={cn("relative")}
-      section={{ className: "py-8 px-6 bg-blue-950/10 dark:bg-blue-950" }}
-      heading={{
-        className:
-          "text-2xl font-bold font-inter text-gray-700 dark:text-gray-200",
-      }}
-      badgesContainer={{
-        className: "flex flex-wrap items-center justify-center gap-8",
-      }}
-      badge={{
-        className:
-          "transition-all duration-200 grayscale hover:grayscale-0 hover:-translate-y-0.5",
-      }}
-      text={{
-        className:
-          "text-base font-medium font-inter text-gray-900 dark:text-white",
-      }}
-      ariaLabel="Trust badges section"
-    />
-  );
-}
+"use client";
+
+import { TrustBadges as SharedTrustBadges } from "@/components/sections/TrustBadges";
+import { cn } from "@/lib/utils";
+
+const defaultBadgesInfo = [
+  {
+    badgeText: "10,000+ businesses",
+    badgeDescription: "Trusted by",
+    badgeIcon: "📊",
+  },
+  {
+    badgeText: "SOC 2 Compliant",
+    badgeDescription: "Enterprise security",
+    badgeIcon: "🔒",
+  },
+  {
+    badgeText: "99.9% Uptime",
+    badgeDescription: "Reliable service",
+    badgeIcon: "⚡",
+  },
+  {
+    badgeText: "4.9/5 Rating",
+    badgeDescription: "Customer satisfaction",
+    badgeIcon: "⭐",
+  },
+];
+
+export function TrustBadges() {
+  return (
+    <SharedTrustBadges
+      badges={defaultBadgesInfo}
+      className={cn("relative")}
+      section={{ className: "py-8 px-6 bg-blue-950/10 dark:bg-blue-950" }}
+      heading={{
+        className:
+          "text-2xl font-bold font-inter text-gray-700 dark:text-gray-200",
+      }}
+      badgesContainer={{
+        className: "flex flex-wrap items-center justify-center gap-8",
+      }}
+      badge={{
+        className:
+          "transition-all duration-200 grayscale hover:grayscale-0 hover:-translate-y-0.5",
+      }}
+      text={{
+        className:
+          "text-base font-medium font-inter text-gray-900 dark:text-white",
+      }}
+      ariaLabel="Trust badges section"
+    />
+  );
+}