@nextworks/blocks-templates 0.1.0-alpha.11 → 0.1.0-alpha.13

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

@@ -1,83 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Contact as SharedContact, } from "@nextworks/blocks-sections";
-const saasContactFormData = [
-    {
-        id: "name",
-        label: "Full Name",
-        placeholder: "Jane Doe",
-        required: true,
-        type: "text",
-    },
-    {
-        id: "email",
-        label: "Work Email",
-        placeholder: "jane@company.com",
-        required: true,
-        type: "email",
-    },
-    {
-        id: "company",
-        label: "Company",
-        placeholder: "Acme Inc.",
-        required: false,
-        type: "text",
-    },
-    {
-        id: "teamSize",
-        label: "Team Size",
-        placeholder: "e.g. 10–50",
-        required: false,
-        type: "text",
-    },
-    {
-        id: "useCase",
-        label: "Primary Use Case",
-        placeholder: "e.g. Product analytics, Ops dashboards",
-        required: false,
-        type: "text",
-    },
-    {
-        id: "message",
-        label: "What would you like to see in the demo?",
-        placeholder: "Share goals, data sources, timeline…",
-        required: true,
-        type: "textarea",
-    },
-];
-export function Contact() {
-    const handleFormSubmit = (e) => {
-        e.preventDefault();
-        const data = Object.fromEntries(new FormData(e.currentTarget).entries());
-        console.log("Contact form submitted:", data);
-    };
-    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(SharedContact, { id: "contact", ariaLabel: "SaaS dashboard contact section", fields: saasContactFormData, contactHeaderText: "Ready to See DashFlow in Action?", contactSubHeaderText: "Tell us a bit about your team and we'll reach out with a tailored demo.", 
-                // Root and section
-                className: "w-full", section: {
-                    className: "py-16 px-6 bg-gradient-to-b from-slate-900/95 via-slate-950 to-slate-900/95 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950",
-                }, container: { className: "mx-auto max-w-4xl" }, 
-                // Header slots
-                headerWrapper: { className: "mb-10 text-center" }, headerText: {
-                    className: "text-3xl font-bold font-inter text-white",
-                }, subheaderText: {
-                    className: "mt-3 text-base text-white/90 max-w-2xl mx-auto font-inter",
-                }, 
-                // Form container
-                form: {
-                    className: "bg-card p-8 rounded-xl shadow-xl border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
-                }, 
-                // Fields and inputs
-                fieldsWrapper: { className: "space-y-4" }, field: { className: "space-y-2" }, label: {
-                    className: "text-card-foreground text-sm font-medium font-poppins block",
-                }, input: {
-                    className: "w-full p-3 rounded-md font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-2 focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
-                }, textarea: {
-                    className: "w-full p-3 rounded-md resize-vertical min-h-[120px] font-inter border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-2 focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
-                }, 
-                // Submit button (wrapper/style/text split)
-                submitButtonWrapper: { className: "pt-2" }, submitButtonStyle: {
-                    variant: "default",
-                    size: "lg",
-                    className: "w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-400 text-white font-semibold font-inter shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-                }, submitButtonText: "Send Request", onSubmit: handleFormSubmit })] }));
-}

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

@@ -1,21 +0,0 @@
-import React from "react";
-type FloatingCard = {
-    position: string;
-    icon: string;
-    text: string;
-};
-type Stat = {
-    value: string;
-    label: string;
-};
-interface DashboardProps {
-    stats: Stat[];
-    projects: string[];
-    floatingCards: FloatingCard[];
-    activeTab?: string;
-    navItems?: string[];
-}
-export declare function Dashboard({ stats, projects, floatingCards, activeTab, navItems, }: DashboardProps): React.JSX.Element;
-declare function FloatingCard({ position, icon, text }: FloatingCard): React.JSX.Element;
-export {};
-//# sourceMappingURL=Dashboard.d.ts.map

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

@@ -1,120 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-export function Dashboard({ stats, projects, floatingCards, activeTab = "Analytics", navItems = ["Analytics", "Projects", "Team"], }) {
-    return (_jsxs("div", { className: "relative isolate", children: [_jsx(DashboardMockup, { stats: stats, projects: projects, activeTab: activeTab, navItems: navItems }), floatingCards.map(({ position, icon, text }) => (_jsx(FloatingCard, { position: position, icon: icon, text: text }, position))), _jsx("style", { children: `
-        .dashboard-mockup {
-          transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
-          transition: transform 0.3s ease;
-          box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
-        }
-        .dashboard-mockup:hover {
-          transform: perspective(1000px) rotateY(-2deg) rotateX(2deg);
-        }
-        .trend-line {
-          clip-path: polygon(
-            0 100%,
-            20% 80%,
-            40% 85%,
-            60% 60%,
-            80% 50%,
-            100% 20%
-          );
-        }
-        @keyframes growUp {
-          0% {
-            height: 0;
-            opacity: 0;
-          }
-          100% {
-            opacity: 1;
-          }
-        }
-        @keyframes floatAnim {
-          0%,
-          100% {
-            transform: translateY(0px);
-          }
-          50% {
-            transform: translateY(-20px);
-          }
-        }
-      ` })] }));
-}
-function DashboardMockup({ stats, projects, activeTab, navItems, }) {
-    const [tilt, setTilt] = useState({ rx: 0, ry: 0 });
-    const targetTilt = useRef({ rx: 0, ry: 0 });
-    const rafId = useRef(null);
-    const animate = () => {
-        setTilt((prev) => {
-            const smoothing = 0.15;
-            const nextRx = prev.rx + (targetTilt.current.rx - prev.rx) * smoothing;
-            const nextRy = prev.ry + (targetTilt.current.ry - prev.ry) * smoothing;
-            return { rx: nextRx, ry: nextRy };
-        });
-        rafId.current = requestAnimationFrame(animate);
-    };
-    const handleMove = (e) => {
-        const rect = e.currentTarget.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-        const rx = (y / rect.height - 0.5) * -6; // rotateX up to ~±3deg
-        const ry = (x / rect.width - 0.5) * 6; // rotateY up to ~±3deg
-        targetTilt.current = { rx, ry };
-        if (rafId.current == null)
-            rafId.current = requestAnimationFrame(animate);
-    };
-    const handleLeave = () => {
-        targetTilt.current = { rx: 0, ry: 0 };
-    };
-    useEffect(() => {
-        return () => {
-            if (rafId.current != null)
-                cancelAnimationFrame(rafId.current);
-        };
-    }, []);
-    return (_jsxs("div", { className: "dashboard-mockup transform-gpu rounded-2xl border border-blue-500/20 p-6 shadow-2xl ring-1 ring-blue-500/10 backdrop-blur transition-transform duration-150 ease-out motion-reduce:transition-none " +
-            "bg-slate-900/80 dark:bg-slate-900/80", style: {
-            willChange: "transform",
-            transform: `perspective(1000px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
-        }, onMouseMove: handleMove, onMouseLeave: handleLeave, children: [_jsx(DashboardHeader, { activeTab: activeTab, navItems: navItems }), _jsx(DashboardGrid, { stats: stats, projects: projects })] }));
-}
-function DashboardHeader({ activeTab = "Analytics", navItems = ["Analytics", "Projects", "Team"], }) {
-    return (_jsxs("div", { className: "mb-6 flex items-center justify-between border-b border-blue-500/10 pb-4", children: [_jsx("div", { className: "text-[1.1rem] font-semibold text-slate-200", children: "Business Overview" }), _jsx("div", { className: "hidden gap-3 md:flex", children: navItems.map((item) => (_jsx("div", { className: "rounded-md px-3 py-2 text-sm " +
-                        (item === activeTab
-                            ? "bg-gradient-to-br from-blue-500 to-purple-500 text-white"
-                            : "bg-blue-500/10 text-blue-400"), children: item }, item))) })] }));
-}
-function DashboardGrid({ stats, projects, }) {
-    return (_jsxs("div", { className: "mb-4 grid grid-cols-[2fr_1fr] gap-4", children: [_jsx(ChartArea, {}), _jsx(StatsPanel, { stats: stats }), _jsx(ProjectList, { projects: projects })] }));
-}
-function ChartArea() {
-    const barHeights = [30, 45, 35, 60, 55, 75, 70, 85, 90, 100];
-    return (_jsxs("div", { className: "relative overflow-hidden rounded-lg border border-blue-500/10 bg-slate-900/50 p-4", children: [_jsx("div", { className: "mb-2 text-sm text-slate-300", children: "Revenue Growth" }), _jsxs("div", { className: "relative h-32 overflow-hidden rounded-md", style: {
-                    background: "linear-gradient(45deg, transparent 20%, rgba(59,130,246,0.1) 20%, rgba(59,130,246,0.1) 40%, transparent 40%, transparent 60%, rgba(139,92,246,0.1) 60%, rgba(139,92,246,0.1) 80%, transparent 80%)",
-                }, children: [_jsx("div", { className: "absolute inset-[10px] flex items-end gap-[3px]", children: barHeights.map((h, i) => (_jsx("div", { className: "flex-1 rounded-t bg-gradient-to-b from-blue-500 to-purple-500", style: {
-                                minHeight: "20px",
-                                height: `${h}%`,
-                                animation: "growUp 2s ease-out both",
-                                animationDelay: `${(i + 1) * 0.1}s`,
-                            } }, i))) }), _jsx("div", { className: "trend-line absolute top-5 right-[5%] left-[5%] h-[2px] rounded bg-gradient-to-r from-emerald-500 to-blue-500 opacity-80" })] })] }));
-}
-function StatsPanel({ stats }) {
-    return (_jsx("div", { className: "flex flex-col gap-2", children: stats.map((s, i) => (_jsxs("div", { className: "rounded-lg border border-blue-500/10 bg-slate-900/50 p-3", children: [_jsx("div", { className: "text-lg font-bold text-blue-500", children: s.value }), _jsx("div", { className: "text-[0.7rem] text-slate-400 uppercase", children: s.label })] }, i))) }));
-}
-function ProjectList({ projects }) {
-    return (_jsxs("div", { className: "col-span-2 rounded-lg border border-blue-500/10 bg-slate-900/50 p-4", children: [_jsx("div", { className: "mb-2 text-sm text-slate-300", children: "Active Projects" }), _jsx("div", { className: "flex flex-wrap gap-2", children: projects.map((p, i) => (_jsx("div", { className: "rounded border border-blue-500/30 bg-gradient-to-br from-blue-500/20 to-purple-500/10 px-2 py-2 text-[0.8rem] text-slate-200", children: p }, i))) })] }));
-}
-function FloatingCard({ position, icon, text }) {
-    const positionClasses = position === "card-1"
-        ? "top-[10%] right-[6%]"
-        : position === "card-2"
-            ? "bottom-[20%] left-[2%]"
-            : "top-0 left-0";
-    return (_jsxs("div", { className: [
-            "absolute z-10 transform-gpu rounded-lg border border-blue-500/20 p-4 shadow-lg",
-            "animate-[floatAnim_6s_ease-in-out_infinite]",
-            "bg-slate-800 dark:bg-slate-900",
-            positionClasses,
-        ].join(" "), style: { willChange: "transform" }, children: [_jsx("div", { className: "mb-2 flex h-[30px] w-[30px] items-center justify-center rounded-md bg-gradient-to-br from-blue-500 to-purple-500 text-sm text-white", children: icon }), _jsx("div", { className: "text-sm text-slate-300", children: text })] }));
-}

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

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

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

@@ -1,35 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FAQ as SharedFAQ } from "@nextworks/blocks-sections";
-const defaultFAQArray = [
-    {
-        question: "Can I migrate from other tools?",
-        answer: "Yes, we help with data import.",
-    },
-    {
-        question: "What integrations are available?",
-        answer: "50+ apps including Slack, Google, Zapier.",
-    },
-    { question: "How long does setup take?", answer: "Less than 15 minutes." },
-    {
-        question: "Is there a free trial?",
-        answer: "Yes — start a 14-day free trial with no credit card required.",
-    },
-    {
-        question: "What support do you offer?",
-        answer: "Email, chat, and dedicated onboarding for paid plans.",
-    },
-    {
-        question: "Are there discounts for teams or annual billing?",
-        answer: "Yes — we offer team pricing and discounts for annual subscriptions.",
-    },
-];
-export function FAQ() {
-    return (_jsx(SharedFAQ, { faqData: defaultFAQArray, faqSectionHeaderText: "Frequently Asked Questions", section: { className: "py-10 px-5 bg-background text-[var(--card-fg)]" }, heading: {
-            className: "text-3xl font-bold font-inter text-center mb-6 text-[var(--heading-fg)]",
-        }, grid: { className: "grid grid-cols-2 gap-4" }, item: { className: "mb-0" }, questionButton: {
-            className: "p-5 rounded-lg transition-all duration-200 flex items-center justify-between cursor-pointer shadow-lg hover:shadow-xl hover:-translate-y-0.5 font-inter bg-gradient-to-r from-sky-600 to-sky-700 hover:from-sky-700 hover:to-sky-800 text-white [--btn-ring:theme(colors.sky.500)] dark:[--btn-ring:theme(colors.sky.400)] [--btn-border:theme(colors.sky.500)] dark:[--btn-border:theme(colors.sky.400)]",
-        }, questionText: { className: "font-inter font-semibold text-base" }, answer: {
-            className: "mt-1 rounded-lg bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)]",
-        }, answerText: { className: "font-inter text-base text-[var(--card-fg)]" }, allowMultipleOpen: true }));
-}

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

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

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

@@ -1,55 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Features as SharedFeatures } from "@nextworks/blocks-sections";
-import { cn } from "@nextworks/blocks-core";
-const defaultFeaturesData = [
-    {
-        imageSrc: "/placeholders/saas_dashboard/projectBoard.png",
-        imageAlt: "Project Management Dashboard",
-        headingText: "Track Every Project",
-        subheadingText: "Kanban boards, Gantt charts, and timeline views keep your team aligned and deadlines met",
-    },
-    {
-        imageSrc: "/placeholders/saas_dashboard/analytics.png",
-        imageAlt: "Analytics Dashboard",
-        headingText: "Data-Driven Insights",
-        subheadingText: "Real-time metrics, custom reports, and forecasting tools to make smarter business decisions",
-    },
-    {
-        imageSrc: "/placeholders/saas_dashboard/chat.png",
-        imageAlt: "Team Collaboration Tools",
-        headingText: "Seamless Teamwork",
-        subheadingText: "Built-in chat, file sharing, and @mentions keep everyone connected and productive",
-    },
-];
-export function Features() {
-    return (_jsx(SharedFeatures, { sectionHeading: "Everything You Need to Run Your Business", sectionSubheading: "Powerful tools and insights to streamline your workflow and boost productivity", featuresData: defaultFeaturesData, className: cn("relative"), section: { className: "py-16 md:py-20 lg:py-24 bg-background" }, container: { className: "max-w-7xl mx-auto px-4 md:px-6 lg:px-8" }, header: { className: "text-center mb-12 md:mb-16" }, heading: {
-            className: cn("font-inter mb-4 text-3xl font-bold text-[var(--heading-fg)] md:text-4xl lg:text-5xl"),
-        }, subheading: {
-            className: cn("font-inter mx-auto max-w-3xl text-lg leading-relaxed text-[var(--subheading-fg)] md:text-xl"),
-        }, grid: {
-            className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8",
-        }, cardWrapper: {
-            className: "group motion-reduce:transform-none motion-reduce:transition-none",
-        }, card: {
-            className: "h-full transition-all duration-300 hover:-translate-y-2 hover:shadow-xl bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] rounded-lg shadow-md overflow-hidden",
-        }, image: {
-            className: "w-full h-48 md:h-56 object-cover transition-transform duration-300 group-hover:scale-[1.03]",
-        }, cardHeading: {
-            className: cn("font-inter mb-3 text-xl leading-tight font-semibold text-[var(--card-title-fg)] md:text-2xl"),
-        }, cardSubheading: {
-            className: cn("font-inter text-sm leading-relaxed text-[var(--card-muted-fg)] md:text-base"),
-        }, 
-        // Motion config showcasing upgraded API
-        motionConfig: {
-            initial: { opacity: 0, y: 12 },
-            whileInView: { opacity: 1, y: 0 },
-            viewport: { once: true, amount: 0.2 },
-            transition: {
-                type: "spring",
-                stiffness: 125,
-                damping: 50,
-                delay: 0.12,
-            },
-        }, ariaLabel: "Features section" }));
-}

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

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

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

@@ -1,52 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Footer as SharedFooter } from "@nextworks/blocks-sections";
-import { cn } from "@nextworks/blocks-core";
-const defaultNavLinks = [
-    {
-        heading: "Product",
-        links: [
-            { name: "Features", href: "#features" },
-            { name: "Pricing", href: "#pricing" },
-            { name: "Documentation", href: "#documentation" },
-            { name: "FAQ", href: "#faq" },
-        ],
-    },
-    {
-        heading: "Company",
-        links: [
-            { name: "About", href: "#about" },
-            { name: "Careers", href: "#careers" },
-            { name: "Blog", href: "#blog" },
-            { name: "Contact", href: "#contact" },
-        ],
-    },
-    {
-        heading: "Resources",
-        links: [
-            { name: "Help Center", href: "#help" },
-            { name: "Terms of Service", href: "#terms" },
-            { name: "Privacy Policy", href: "#privacy" },
-            { name: "Status", href: "#status" },
-        ],
-    },
-];
-export function Footer() {
-    return (_jsx(SharedFooter, { footerBrandName: "Dash Flow", footerNavLinks: defaultNavLinks, className: cn("w-full"), section: {
-            className: "w-full bg-blue-50 dark:bg-gray-900 text-gray-800 dark:text-white",
-        }, container: { className: "max-w-7xl mx-auto px-6" }, brand: {
-            className: "text-xl font-bold text-blue-600 dark:text-blue-400 font-outfit",
-        }, brandWrapper: {
-            className: "flex flex-col items-start text-left lg:pr-8",
-        }, navSection: {
-            className: "flex flex-col lg:flex-row items-start lg:items-start justify-center gap-8 lg:gap-12 pt-6.5 pb-8",
-        }, navGroup: { className: "flex flex-col items-start text-left pt-1.5" }, navHeading: {
-            className: "font-semibold text-gray-800 dark:text-white mb-3 text-xs uppercase tracking-wider font-inter",
-        }, navLink: {
-            className: "text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-xs mb-2 block font-inter",
-        }, socialSection: {
-            className: "flex items-center justify-center gap-4 py-4",
-        }, copyright: {
-            className: "text-center text-xs text-gray-500 dark:text-gray-400 py-4 border-t border-gray-200 dark:border-gray-700 font-inter",
-        }, ariaLabel: "Footer section" }));
-}

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

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

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

@@ -1,65 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { HeroSplit as SharedHeroSplit } from "@nextworks/blocks-sections";
-import { Dashboard } from "./Dashboard";
-import { cn } from "@nextworks/blocks-core";
-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() {
-    return (_jsx("div", { className: "relative", children: _jsx(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 font-inter text-[var(--heading-fg)]",
-            }, 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 mt-6 mb-8 max-w-2xl font-inter font-normal text-[var(--subheading-fg)]",
-            }, section: {
-                className: "relative pt-1 px-8 pb-8 bg-[var(--hero-bg)] dark:bg-[var(--hero-bg)]",
-            }, cta1: {
-                label: "Start Free Trial",
-                href: "#contact",
-                variant: "default",
-                size: "lg",
-                className: [
-                    "text-base font-semibold font-inter shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 px-8 py-3",
-                    "[--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)]",
-                ].join(" "),
-            }, cta2: {
-                label: "Watch demo",
-                href: "#demo",
-                variant: "outline",
-                size: "lg",
-                className: [
-                    "text-base font-semibold font-inter shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 px-8 py-3",
-                    "[--btn-fg:theme(colors.sky.600)]",
-                    "[--btn-border:theme(colors.sky.600)]",
-                    "hover:[--btn-hover-bg:theme(colors.sky.50)]",
-                    "hover:[--btn-hover-fg:theme(colors.sky.600)]",
-                    "dark:[--btn-fg:theme(colors.sky.500)]",
-                    "dark:[--btn-border:theme(colors.sky.500)]",
-                    "dark:hover:[--btn-hover-bg:theme(colors.sky.950)]",
-                    "dark:hover:[--btn-hover-fg:theme(colors.sky.500)]",
-                ].join(" "),
-            }, image: { src: undefined, alt: "Dashboard preview" }, imageLayout: "padded", fallback: _jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx("div", { className: "relative w-[min(100%,720px)] overflow-hidden rounded-xl bg-white p-0 p-1 opacity-100 md:pt-8 lg:pt-1 dark:bg-blue-950", children: _jsx(Dashboard, { stats: stats, projects: projects, floatingCards: floatingCards, navItems: navItems, activeTab: activeTab }) }) }), imageContainer: {
-                className: "pl-0 relative self-start md:self-start md:flex-none md:shrink-0 w-full h-[24rem] sm:h-[32rem] md:h-[34rem] lg:h-[33rem] md:w-1/2 mb-0 md:mb-0 lg:mb-0 opacity-100",
-                // "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",
-                    "[--btn-ring:theme(colors.sky.500)]",
-                    "dark:[--btn-ring:theme(colors.sky.400)]",
-                ].join(" "),
-            }, textAlign: "center", ariaLabel: "DashFlow hero section" }) }));
-}

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

@@ -1,3 +0,0 @@
-import React from "react";
-export declare function Hero(): React.JSX.Element;
-//# sourceMappingURL=Hero_mask.d.ts.map

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

@@ -1,73 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { HeroSplit as SharedHeroSplit } from "@nextworks/blocks-sections";
-import { Dashboard } from "./Dashboard";
-import { cn } from "@nextworks/blocks-core";
-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(null);
-    const dashRef = React.useRef(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 (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "pointer-events-none absolute inset-0 -z-20 overflow-hidden", children: [_jsx("div", { className: "absolute -top-10 -left-10 h-72 w-72 rounded-full bg-blue-500/20 blur-3xl" }), _jsx("div", { className: "absolute right-0 bottom-0 h-72 w-72 rounded-full bg-purple-500/20 blur-3xl" })] }), _jsx("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", children: _jsx(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: _jsx("div", { ref: dashRef, className: "relative z-10 flex h-full w-full items-center justify-center pl-0", children: _jsx("div", { className: "relative h-full w-[min(100%,720px)] overflow-hidden p-2", children: _jsx(Dashboard, { stats: stats, projects: projects, floatingCards: floatingCards, navItems: navItems, activeTab: activeTab }) }) }), 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" }) })] }));
-}

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

@@ -1,25 +0,0 @@
-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.js

@@ -1,83 +0,0 @@
-"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));
-}