@nextworks/blocks-templates 0.2.0-alpha.0 → 0.2.0-alpha.11

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

@@ -0,0 +1,168 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+export function Dashboard({ stats, projects, floatingCards, activeTab = "Analytics", navItems = ["Analytics", "Projects", "Team"], }) {
+    return (<div className="relative isolate">
+      <DashboardMockup stats={stats} projects={projects} activeTab={activeTab} navItems={navItems}/>
+
+      {floatingCards.map(({ position, icon, text }) => (<FloatingCard key={position} position={position} icon={icon} text={text}/>))}
+
+      <style>{`
+        .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);
+          }
+        }
+      `}</style>
+    </div>);
+}
+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;
+        const ry = (x / rect.width - 0.5) * 6;
+        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 (<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}>
+      <DashboardHeader activeTab={activeTab} navItems={navItems}/>
+      <DashboardGrid stats={stats} projects={projects}/>
+    </div>);
+}
+function DashboardHeader({ activeTab = "Analytics", navItems = ["Analytics", "Projects", "Team"], }) {
+    return (<div className="mb-6 flex items-center justify-between border-b border-blue-500/10 pb-4">
+      <div className="text-[1.1rem] font-semibold text-slate-200">
+        Business Overview
+      </div>
+      <div className="hidden gap-3 md:flex">
+        {navItems.map((item) => (<div key={item} 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")}>
+            {item}
+          </div>))}
+      </div>
+    </div>);
+}
+function DashboardGrid({ stats, projects, }) {
+    return (<div className="mb-4 grid grid-cols-[2fr_1fr] gap-4">
+      <ChartArea />
+      <StatsPanel stats={stats}/>
+      <ProjectList projects={projects}/>
+    </div>);
+}
+function ChartArea() {
+    const barHeights = [30, 45, 35, 60, 55, 75, 70, 85, 90, 100];
+    return (<div className="relative overflow-hidden rounded-lg border border-blue-500/10 bg-slate-900/50 p-4">
+      <div className="mb-2 text-sm text-slate-300">Revenue Growth</div>
+      <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%)",
+        }}>
+        <div className="absolute inset-[10px] flex items-end gap-[3px]">
+          {barHeights.map((h, i) => (<div key={i} 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`,
+            }}/>))}
+        </div>
+        <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"/>
+      </div>
+    </div>);
+}
+function StatsPanel({ stats }) {
+    return (<div className="flex flex-col gap-2">
+      {stats.map((s, i) => (<div key={i} className="rounded-lg border border-blue-500/10 bg-slate-900/50 p-3">
+          <div className="text-lg font-bold text-blue-500">{s.value}</div>
+          <div className="text-[0.7rem] text-slate-400 uppercase">
+            {s.label}
+          </div>
+        </div>))}
+    </div>);
+}
+function ProjectList({ projects }) {
+    return (<div className="col-span-2 rounded-lg border border-blue-500/10 bg-slate-900/50 p-4">
+      <div className="mb-2 text-sm text-slate-300">Active Projects</div>
+      <div className="flex flex-wrap gap-2">
+        {projects.map((p, i) => (<div key={i} 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">
+            {p}
+          </div>))}
+      </div>
+    </div>);
+}
+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 (<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" }}>
+      <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">
+        {icon}
+      </div>
+      <div className="text-sm text-slate-300">{text}</div>
+    </div>);
+}

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

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

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.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.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.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.map

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

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

@@ -0,0 +1,69 @@
+"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",
+        }} 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.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,sBAsGnB"}

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

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

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 any prop/slot can be overridden.
+ *
+ * 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;AAqFlD,wBAAgB,MAAM,CAAC,SAAS,GAAE,eAAoB,+BAQrD"}

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

@@ -0,0 +1,83 @@
+"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",
+    },
+    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.
+    const props = Object.assign(Object.assign({}, defaultProps), overrides);
+    return <SharedNavbar {...props}/>;
+}

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.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.map

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