@nextworks/blocks-templates 0.1.0-alpha.0

package/dist/templates/saasdashboard/Page.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Navbar } from "./components/Navbar";
+import { Hero } from "./components/Hero";
+import { Features } from "./components/Features";
+import { Testimonials } from "./components/Testimonials";
+import { TrustBadges } from "./components/TrustBadges";
+import { Contact } from "./components/Contact";
+import { Pricing } from "./components/Pricing";
+import { FAQ } from "./components/FAQ";
+import { Footer } from "./components/Footer";
+import { SmoothScroll } from "./components/SmoothScroll";
+import { PresetThemeVars } from "./PresetThemeVars";
+export function SaaSDashboard() {
+    return (_jsx(PresetThemeVars, { children: _jsxs("div", { children: [_jsx(SmoothScroll, {}), _jsx(Navbar, {}), _jsx("section", { id: "home", children: _jsx(Hero, {}) }), _jsx(Features, {}), _jsx(Testimonials, {}), _jsx(TrustBadges, {}), _jsx("section", { id: "pricing", children: _jsx(Pricing, {}) }), _jsx("section", { id: "contact", children: _jsx(Contact, {}) }), _jsx("section", { id: "faq", children: _jsx(FAQ, {}) }), _jsx(Footer, {})] }) }));
+}

package/dist/templates/saasdashboard/Page.jsx

@@ -0,0 +1,35 @@
+import { Navbar } from "./components/Navbar";
+import { Hero } from "./components/Hero";
+import { Features } from "./components/Features";
+import { Testimonials } from "./components/Testimonials";
+import { TrustBadges } from "./components/TrustBadges";
+import { Contact } from "./components/Contact";
+import { Pricing } from "./components/Pricing";
+import { FAQ } from "./components/FAQ";
+import { Footer } from "./components/Footer";
+import { SmoothScroll } from "./components/SmoothScroll";
+import { PresetThemeVars } from "./PresetThemeVars";
+export function SaaSDashboard() {
+    return (<PresetThemeVars>
+      <div>
+        <SmoothScroll />
+        <Navbar />
+        <section id="home">
+          <Hero />
+        </section>
+        <Features />
+        <Testimonials />
+        <TrustBadges />
+        <section id="pricing">
+          <Pricing />
+        </section>
+        <section id="contact">
+          <Contact />
+        </section>
+        <section id="faq">
+          <FAQ />
+        </section>
+        <Footer />
+      </div>
+    </PresetThemeVars>);
+}

package/dist/templates/saasdashboard/PresetThemeVars.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type Props = React.PropsWithChildren<{
+    className?: string;
+}>;
+/**
+ * SaaSDashboard template theme variables wrapper.
+ * Sky/blue leaning palette; adjust values to your preset branding.
+ */
+export declare function PresetThemeVars({ className, children }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=PresetThemeVars.d.ts.map

package/dist/templates/saasdashboard/PresetThemeVars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetThemeVars.d.ts","sourceRoot":"","sources":["../../../src/templates/saasdashboard/PresetThemeVars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE7D;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,KAAK,qBAsE7D"}

package/dist/templates/saasdashboard/PresetThemeVars.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * SaaSDashboard template theme variables wrapper.
+ * Sky/blue leaning palette; adjust values to your preset branding.
+ */
+export function PresetThemeVars({ className, children }) {
+    return (_jsx("div", { className: cn(
+        // Shared button ring
+        "[--btn-ring:theme(colors.sky.500)] dark:[--btn-ring:theme(colors.sky.400)]", 
+        // Inputs
+        "[--input-bg:theme(colors.white)] dark:[--input-bg:theme(colors.gray.900)]", "[--input-fg:theme(colors.gray.900)] dark:[--input-fg:theme(colors.gray.100)]", "[--input-placeholder:theme(colors.gray.400)] dark:[--input-placeholder:theme(colors.gray.500)]", "[--input-border:theme(colors.sky.200)] dark:[--input-border:theme(colors.sky.700)]", "[--input-focus-ring:theme(colors.sky.500)] dark:[--input-focus-ring:theme(colors.sky.400)]", "[--input-ring-offset:theme(colors.white)] dark:[--input-ring-offset:theme(colors.gray.900)]", 
+        // Cards
+        "[--card-bg:theme(colors.white)] dark:[--card-bg:theme(colors.gray.900)]", "[--card-fg:theme(colors.gray.900)] dark:[--card-fg:theme(colors.gray.100)]", "[--card-title-fg:theme(colors.gray.900)] dark:[--card-title-fg:theme(colors.gray.100)]", "[--card-muted-fg:theme(colors.gray.500)] dark:[--card-muted-fg:theme(colors.gray.400)]", "[--card-border:theme(colors.gray.200)] dark:[--card-border:theme(colors.gray.800)]", "[--card-shadow:0_6px_20px_rgba(0,0,0,0.06)]", 
+        // Badges/Chips
+        "[--badge-bg:theme(colors.sky.50)] dark:[--badge-bg:theme(colors.sky.950)]", "[--badge-fg:theme(colors.sky.700)] dark:[--badge-fg:theme(colors.sky.300)]", "[--badge-border:theme(colors.sky.200)] dark:[--badge-border:theme(colors.sky.800)]", "[--badge-active-bg:theme(colors.sky.600)] dark:[--badge-active-bg:theme(colors.sky.500)]", "[--badge-active-fg:theme(colors.white)] dark:[--badge-active-fg:theme(colors.white)]", "[--badge-active-border:theme(colors.sky.700)] dark:[--badge-active-border:theme(colors.sky.400)]", 
+        // Headings/Subheadings
+        "[--heading-fg:theme(colors.gray.900)] dark:[--heading-fg:theme(colors.gray.100)]", "[--subheading-fg:theme(colors.gray.600)] dark:[--subheading-fg:theme(colors.gray.300)]", "[--description-fg:theme(colors.gray.700)] dark:[--description-fg:theme(colors.gray.200)]", 
+        // Hero background (optional)
+        "[--hero-bg:theme(colors.white)] dark:[--hero-bg:theme(colors.slate.950)]", 
+        // Footer
+        "[--footer-bg:transparent] dark:[--footer-bg:transparent]", "[--footer-fg:theme(colors.gray.800)] dark:[--footer-fg:theme(colors.gray.100)]", "[--footer-heading-fg:theme(colors.gray.900)] dark:[--footer-heading-fg:theme(colors.gray.100)]", "[--footer-link-fg:theme(colors.gray.700)] dark:[--footer-link-fg:theme(colors.gray.300)]", "[--footer-link-hover-fg:theme(colors.sky.700)] dark:[--footer-link-hover-fg:theme(colors.sky.400)]", "[--footer-link-hover-bg:theme(colors.sky.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.18_0.05_235)_20%,transparent)]", "[--footer-muted-fg:theme(colors.gray.500)] dark:[--footer-muted-fg:theme(colors.gray.400)]", "[--footer-border:theme(colors.gray.200)] dark:[--footer-border:theme(colors.gray.800)]", 
+        // Table (optional)
+        "[--table-fg:inherit]", "[--table-muted-fg:theme(colors.gray.500)] dark:[--table-muted-fg:theme(colors.gray.400)]", "[--table-head-fg:theme(colors.gray.700)] dark:[--table-head-fg:theme(colors.gray.300)]", "[--table-border:theme(colors.gray.200)] dark:[--table-border:theme(colors.gray.800)]", "[--table-row-hover-bg:theme(colors.gray.50)] dark:[--table-row-hover-bg:theme(colors.gray.900)]", 
+        // FAQ specific (optional overrides; fall back to --btn-* and --card-*)
+        "[--faq-btn-bg:var(--btn-bg)] dark:[--faq-btn-bg:var(--btn-bg)]", "[--faq-btn-fg:var(--btn-fg)] dark:[--faq-btn-fg:var(--btn-fg)]", "[--faq-btn-hover-bg:var(--btn-hover-bg)] dark:[--faq-btn-hover-bg:var(--btn-hover-bg)]", "[--faq-btn-hover-fg:var(--btn-hover-fg)] dark:[--faq-btn-hover-fg:var(--btn-hover-fg)]", "[--faq-answer-bg:var(--card-bg)] dark:[--faq-answer-bg:var(--card-bg)]", "[--faq-answer-fg:var(--card-fg)] dark:[--faq-answer-fg:var(--card-fg)]", className), children: children }));
+}

package/dist/templates/saasdashboard/PresetThemeVars.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * SaaSDashboard template theme variables wrapper.
+ * Sky/blue leaning palette; adjust values to your preset branding.
+ */
+export function PresetThemeVars({ className, children }) {
+    return (<div className={cn(
+        // Shared button ring
+        "[--btn-ring:theme(colors.sky.500)] dark:[--btn-ring:theme(colors.sky.400)]", 
+        // Inputs
+        "[--input-bg:theme(colors.white)] dark:[--input-bg:theme(colors.gray.900)]", "[--input-fg:theme(colors.gray.900)] dark:[--input-fg:theme(colors.gray.100)]", "[--input-placeholder:theme(colors.gray.400)] dark:[--input-placeholder:theme(colors.gray.500)]", "[--input-border:theme(colors.sky.200)] dark:[--input-border:theme(colors.sky.700)]", "[--input-focus-ring:theme(colors.sky.500)] dark:[--input-focus-ring:theme(colors.sky.400)]", "[--input-ring-offset:theme(colors.white)] dark:[--input-ring-offset:theme(colors.gray.900)]", 
+        // Cards
+        "[--card-bg:theme(colors.white)] dark:[--card-bg:theme(colors.gray.900)]", "[--card-fg:theme(colors.gray.900)] dark:[--card-fg:theme(colors.gray.100)]", "[--card-title-fg:theme(colors.gray.900)] dark:[--card-title-fg:theme(colors.gray.100)]", "[--card-muted-fg:theme(colors.gray.500)] dark:[--card-muted-fg:theme(colors.gray.400)]", "[--card-border:theme(colors.gray.200)] dark:[--card-border:theme(colors.gray.800)]", "[--card-shadow:0_6px_20px_rgba(0,0,0,0.06)]", 
+        // Badges/Chips
+        "[--badge-bg:theme(colors.sky.50)] dark:[--badge-bg:theme(colors.sky.950)]", "[--badge-fg:theme(colors.sky.700)] dark:[--badge-fg:theme(colors.sky.300)]", "[--badge-border:theme(colors.sky.200)] dark:[--badge-border:theme(colors.sky.800)]", "[--badge-active-bg:theme(colors.sky.600)] dark:[--badge-active-bg:theme(colors.sky.500)]", "[--badge-active-fg:theme(colors.white)] dark:[--badge-active-fg:theme(colors.white)]", "[--badge-active-border:theme(colors.sky.700)] dark:[--badge-active-border:theme(colors.sky.400)]", 
+        // Headings/Subheadings
+        "[--heading-fg:theme(colors.gray.900)] dark:[--heading-fg:theme(colors.gray.100)]", "[--subheading-fg:theme(colors.gray.600)] dark:[--subheading-fg:theme(colors.gray.300)]", "[--description-fg:theme(colors.gray.700)] dark:[--description-fg:theme(colors.gray.200)]", 
+        // Hero background (optional)
+        "[--hero-bg:theme(colors.white)] dark:[--hero-bg:theme(colors.slate.950)]", 
+        // Footer
+        "[--footer-bg:transparent] dark:[--footer-bg:transparent]", "[--footer-fg:theme(colors.gray.800)] dark:[--footer-fg:theme(colors.gray.100)]", "[--footer-heading-fg:theme(colors.gray.900)] dark:[--footer-heading-fg:theme(colors.gray.100)]", "[--footer-link-fg:theme(colors.gray.700)] dark:[--footer-link-fg:theme(colors.gray.300)]", "[--footer-link-hover-fg:theme(colors.sky.700)] dark:[--footer-link-hover-fg:theme(colors.sky.400)]", "[--footer-link-hover-bg:theme(colors.sky.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.18_0.05_235)_20%,transparent)]", "[--footer-muted-fg:theme(colors.gray.500)] dark:[--footer-muted-fg:theme(colors.gray.400)]", "[--footer-border:theme(colors.gray.200)] dark:[--footer-border:theme(colors.gray.800)]", 
+        // Table (optional)
+        "[--table-fg:inherit]", "[--table-muted-fg:theme(colors.gray.500)] dark:[--table-muted-fg:theme(colors.gray.400)]", "[--table-head-fg:theme(colors.gray.700)] dark:[--table-head-fg:theme(colors.gray.300)]", "[--table-border:theme(colors.gray.200)] dark:[--table-border:theme(colors.gray.800)]", "[--table-row-hover-bg:theme(colors.gray.50)] dark:[--table-row-hover-bg:theme(colors.gray.900)]", 
+        // FAQ specific (optional overrides; fall back to --btn-* and --card-*)
+        "[--faq-btn-bg:var(--btn-bg)] dark:[--faq-btn-bg:var(--btn-bg)]", "[--faq-btn-fg:var(--btn-fg)] dark:[--faq-btn-fg:var(--btn-fg)]", "[--faq-btn-hover-bg:var(--btn-hover-bg)] dark:[--faq-btn-hover-bg:var(--btn-hover-bg)]", "[--faq-btn-hover-fg:var(--btn-hover-fg)] dark:[--faq-btn-hover-fg:var(--btn-hover-fg)]", "[--faq-answer-bg:var(--card-bg)] dark:[--faq-answer-bg:var(--card-bg)]", "[--faq-answer-fg:var(--card-fg)] dark:[--faq-answer-fg:var(--card-fg)]", className)}>
+      {children}
+    </div>);
+}

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

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

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

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

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

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

@@ -0,0 +1,90 @@
+"use client";
+import React from "react";
+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 (<div className="relative">
+      {/* Gradient mesh overlay */}
+      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(60rem_60rem_at_0%_0%,rgba(59,130,246,0.08),transparent_40%),radial-gradient(50rem_50rem_at_100%_100%,rgba(168,85,247,0.06),transparent_40%)] opacity-20"/>
+      {/* Fine noise/dots texture */}
+      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(rgba(255,255,255,0.07)_1px,transparent_1px)] [background-size:14px_14px] opacity-[0.05]"/>
+
+      <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}/>
+    </div>);
+}

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

@@ -0,0 +1,21 @@
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../../../src/templates/saasdashboard/components/Dashboard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,SAAuB,EACvB,QAA4C,GAC7C,EAAE,cAAc,qBA2DhB;AAoLD,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,YAAY,qBAwB3D"}

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

@@ -0,0 +1,120 @@
+"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/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; // 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 (<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

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

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"}