@nextworks/blocks-templates 0.1.0-alpha.0

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

@@ -0,0 +1,35 @@
+"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/FAQ.jsx

@@ -0,0 +1,34 @@
+"use client";
+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 (<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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Features.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Features.tsx"],"names":[],"mappings":"AA6BA,wBAAgB,QAAQ,gCA6DvB"}

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

@@ -0,0 +1,55 @@
+"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/Features.jsx

@@ -0,0 +1,54 @@
+"use client";
+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 (<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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Footer.tsx"],"names":[],"mappings":"AAmCA,wBAAgB,MAAM,gCAyCrB"}

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

@@ -0,0 +1,52 @@
+"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/Footer.jsx

@@ -0,0 +1,51 @@
+"use client";
+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 (<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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Hero.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,IAAI,gCAkFnB"}

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

@@ -0,0 +1,65 @@
+"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.jsx

@@ -0,0 +1,70 @@
+"use client";
+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 (<div className="relative">
+      <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={<div className="flex h-full w-full items-center justify-center">
+            <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">
+              <Dashboard stats={stats} projects={projects} floatingCards={floatingCards} navItems={navItems} activeTab={activeTab}/>
+            </div>
+          </div>} 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"/>
+    </div>);
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hero_mask.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Hero_mask.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqB1B,wBAAgB,IAAI,sBAuGnB"}

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

@@ -0,0 +1,73 @@
+"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/Hero_mask.jsx

@@ -0,0 +1,85 @@
+"use client";
+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 (<div className="relative">
+      {/* Ambient gradient blobs behind hero */}
+      <div className="pointer-events-none absolute inset-0 -z-20 overflow-hidden">
+        <div className="absolute -top-10 -left-10 h-72 w-72 rounded-full bg-blue-500/20 blur-3xl"/>
+        <div className="absolute right-0 bottom-0 h-72 w-72 rounded-full bg-purple-500/20 blur-3xl"/>
+      </div>
+      <div ref={sectionRef} className="relative before:absolute before:inset-0 before:-z-10 before:bg-gradient-to-br before:from-white before:via-blue-50 before:to-white before:[mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000)] before:[mask-composite:exclude] before:[mask-size:auto,var(--hole-w)_var(--hole-h)] before:[mask-position:0_0,var(--hole-x)_var(--hole-y)] before:[mask-repeat:no-repeat] before:content-[''] before:[-webkit-mask-composite:xor] dark:before:from-gray-900 dark:before:via-blue-950/20 dark:before:to-gray-900">
+        <SharedHeroSplit className={cn("relative")} heading={{
+            text: "Manage Your Entire Business From One Powerful Dashboard",
+            className: "text-3xl md:text-4xl lg:text-5xl font-bold leading-tight text-black dark:text-white font-inter",
+        }} subheading={{
+            text: "Stop switching between 12 different apps. DashFlow combines project management, analytics, team chat, and customer insights in one beautiful interface.",
+            className: "text-base md:text-lg text-gray-700 dark:text-gray-100 mt-6 mb-8 max-w-2xl font-inter font-normal",
+        }} section={{
+            className: "relative bg-none bg-transparent pt-0 px-8 pb-8",
+        }} cta1={{
+            label: "Start Free Trial",
+            href: "#contact",
+            variant: "default",
+            size: "lg",
+            className: "bg-blue-600 hover:bg-blue-700 text-white text-base font-semibold font-inter shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border-0 px-8 py-3",
+        }} cta2={{
+            label: "Watch demo",
+            href: "#demo",
+            variant: "outline",
+            size: "lg",
+            className: "border-blue-600 text-blue-600 hover:bg-blue-50 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-950 text-base font-semibold font-inter shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 px-8 py-3",
+        }} image={{ src: undefined, alt: "Dashboard preview" }} imageLayout="padded" fallback={<div ref={dashRef} className="relative z-10 flex h-full w-full items-center justify-center pl-0">
+              <div className="relative h-full w-[min(100%,720px)] overflow-hidden p-2">
+                <Dashboard stats={stats} projects={projects} floatingCards={floatingCards} navItems={navItems} activeTab={activeTab}/>
+              </div>
+            </div>} imageContainer={{
+            className: "relative self-start md:self-start md:flex-none md:shrink-0 w-full h-[24rem] sm:h-[26rem] md:h-[31rem] md:w-1/2 mb-6 md:mb-0",
+            // "relative self-start md:self-start md:flex-none md:shrink-0 w-full h-[24rem] sm:h-[26rem] md:h-[28rem] md:w-1/2 mb-6 md:mb-0",
+        }} textContainer={{ className: "flex-1 p-5 lg:p-8" }} buttonsContainer={{
+            className: "flex flex-col sm:flex-row gap-4 mt-8 justify-center lg:justify-start",
+        }} textAlign="center" ariaLabel="DashFlow hero section"/>
+      </div>
+    </div>);
+}