@nextworks/blocks-templates 0.1.0-alpha.0

package/dist/templates/saasdashboard/components/Navbar.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps } from "react";
+import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
+/**
+ * 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>;
+export declare function Navbar(overrides?: PresetOverrides): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Navbar.d.ts.map

package/dist/templates/saasdashboard/components/Navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Navbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;;;;;;;;;;;;;;;;GAiBG;AACH,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,KAAK,eAAe,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAsFlD,wBAAgB,MAAM,CAAC,SAAS,GAAE,eAAoB,+BAQrD"}

package/dist/templates/saasdashboard/components/Navbar.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
+const defaultProps = {
+    brand: "DashFlow",
+    // Preserve custom gradient logo block
+    brandNode: (_jsx("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", children: "DF" })),
+    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 = {}) {
+    // 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 = Object.assign(Object.assign({}, defaultProps), overrides);
+    return _jsx(SharedNavbar, Object.assign({}, props));
+}

package/dist/templates/saasdashboard/components/Navbar.jsx

@@ -0,0 +1,84 @@
+"use client";
+import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
+const defaultProps = {
+    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 = {}) {
+    // 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 = Object.assign(Object.assign({}, defaultProps), overrides);
+    return <SharedNavbar {...props}/>;
+}

package/dist/templates/saasdashboard/components/Pricing.d.ts

@@ -0,0 +1,2 @@
+export declare function Pricing(): import("react").JSX.Element;
+//# sourceMappingURL=Pricing.d.ts.map

package/dist/templates/saasdashboard/components/Pricing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pricing.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Pricing.tsx"],"names":[],"mappings":"AA8CA,wBAAgB,OAAO,gCA2CtB"}

package/dist/templates/saasdashboard/components/Pricing.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pricing as SharedPricing } from "@nextworks/blocks-sections";
+import { cn } from "@nextworks/blocks-core";
+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 (_jsx(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/templates/saasdashboard/components/Pricing.jsx

@@ -0,0 +1,64 @@
+"use client";
+import { Pricing as SharedPricing } from "@nextworks/blocks-sections";
+import { cn } from "@nextworks/blocks-core";
+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/templates/saasdashboard/components/SmoothScroll.d.ts

@@ -0,0 +1,2 @@
+export declare function SmoothScroll(): null;
+//# sourceMappingURL=SmoothScroll.d.ts.map

package/dist/templates/saasdashboard/components/SmoothScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmoothScroll.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/SmoothScroll.tsx"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,SA2F3B"}

package/dist/templates/saasdashboard/components/SmoothScroll.js

@@ -0,0 +1,87 @@
+"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) => {
+            const el = document.querySelector(href);
+            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) => 1 - Math.pow(1 - t, 4);
+            const step = (now) => {
+                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) => {
+            const ev = e;
+            const target = e.currentTarget;
+            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) => {
+            const target = e.currentTarget;
+            const href = target.getAttribute("href");
+            if (!href || !href.startsWith("#"))
+                return;
+            if (suppressClick) {
+                e.preventDefault();
+                suppressClick = false;
+                return;
+            }
+            e.preventDefault();
+            animateTo(href);
+        };
+        const onKeyDown = (e) => {
+            const ev = e;
+            if (ev.key !== "Enter" && ev.key !== " ")
+                return;
+            const target = e.currentTarget;
+            const href = target.getAttribute("href");
+            if (!href || !href.startsWith("#"))
+                return;
+            e.preventDefault();
+            animateTo(href);
+        };
+        const links = Array.from(document.querySelectorAll('a[href^="#"]'));
+        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/templates/saasdashboard/components/SmoothScroll.jsx

@@ -0,0 +1,87 @@
+"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) => {
+            const el = document.querySelector(href);
+            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) => 1 - Math.pow(1 - t, 4);
+            const step = (now) => {
+                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) => {
+            const ev = e;
+            const target = e.currentTarget;
+            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) => {
+            const target = e.currentTarget;
+            const href = target.getAttribute("href");
+            if (!href || !href.startsWith("#"))
+                return;
+            if (suppressClick) {
+                e.preventDefault();
+                suppressClick = false;
+                return;
+            }
+            e.preventDefault();
+            animateTo(href);
+        };
+        const onKeyDown = (e) => {
+            const ev = e;
+            if (ev.key !== "Enter" && ev.key !== " ")
+                return;
+            const target = e.currentTarget;
+            const href = target.getAttribute("href");
+            if (!href || !href.startsWith("#"))
+                return;
+            e.preventDefault();
+            animateTo(href);
+        };
+        const links = Array.from(document.querySelectorAll('a[href^="#"]'));
+        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/templates/saasdashboard/components/Testimonials.d.ts

@@ -0,0 +1,2 @@
+export declare function Testimonials(): import("react").JSX.Element;
+//# sourceMappingURL=Testimonials.d.ts.map

package/dist/templates/saasdashboard/components/Testimonials.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Testimonials.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Testimonials.tsx"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,gCAkE3B"}

package/dist/templates/saasdashboard/components/Testimonials.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Testimonials as SharedTestimonials } from "@nextworks/blocks-sections";
+import { cn } from "@nextworks/blocks-core";
+export function Testimonials() {
+    return (_jsxs("div", { className: "relative", children: [_jsx("div", { "aria-hidden": true, 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" }), _jsx("div", { "aria-hidden": true, 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]" }), _jsx(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" })] }));
+}

package/dist/templates/saasdashboard/components/Testimonials.jsx

@@ -0,0 +1,39 @@
+"use client";
+import { Testimonials as SharedTestimonials } from "@nextworks/blocks-sections";
+import { cn } from "@nextworks/blocks-core";
+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>);
+}

package/dist/templates/saasdashboard/components/TrustBadges.d.ts

@@ -0,0 +1,2 @@
+export declare function TrustBadges(): import("react").JSX.Element;
+//# sourceMappingURL=TrustBadges.d.ts.map

package/dist/templates/saasdashboard/components/TrustBadges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrustBadges.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/TrustBadges.tsx"],"names":[],"mappings":"AA4BA,wBAAgB,WAAW,gCAwB1B"}

package/dist/templates/saasdashboard/components/TrustBadges.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TrustBadges as SharedTrustBadges } from "@nextworks/blocks-sections";
+import { cn } from "@nextworks/blocks-core";
+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 (_jsx(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" }));
+}