@nextworks/blocks-templates 0.2.0-alpha.6 → 0.2.0-alpha.8

package/dist/templates/productlaunch/components/Team.jsx

@@ -0,0 +1,71 @@
+"use client";
+import { Team as SharedTeam } from "@nextworks/blocks-sections";
+/**
+ * Product Launch preset for Team wired to the shared Team component
+ */
+export function Team() {
+    const teamMembers = [
+        {
+            name: "Dr. Sarah Chen",
+            role: "Chief AI Officer",
+            bio: "Leading AI researcher with 15+ years in machine learning and neural networks. PhD from MIT.",
+            avatar: "👩‍🔬",
+            socialLinks: [
+                { platform: "LinkedIn", url: "#", icon: "💼" },
+                { platform: "Twitter", url: "#", icon: "🐦" },
+                { platform: "GitHub", url: "#", icon: "💻" },
+            ],
+        },
+        {
+            name: "Marcus Rodriguez",
+            role: "Head of AI Engineering",
+            bio: "Full-stack AI engineer specializing in scalable ML systems and cloud infrastructure.",
+            avatar: "👨‍💻",
+            socialLinks: [
+                { platform: "LinkedIn", url: "#", icon: "💼" },
+                { platform: "GitHub", url: "#", icon: "💻" },
+            ],
+        },
+        {
+            name: "Dr. Emily Watson",
+            role: "AI Research Director",
+            bio: "Expert in natural language processing and computer vision with 12+ years of research experience.",
+            avatar: "👩‍🎓",
+            socialLinks: [
+                { platform: "LinkedIn", url: "#", icon: "💼" },
+                { platform: "Twitter", url: "#", icon: "🐦" },
+            ],
+        },
+        {
+            name: "Alex Kim",
+            role: "AI Product Manager",
+            bio: "Strategic leader focused on bringing AI solutions to market with deep understanding of business needs.",
+            avatar: "👨‍💼",
+            socialLinks: [
+                { platform: "LinkedIn", url: "#", icon: "💼" },
+                { platform: "Twitter", url: "#", icon: "🐦" },
+            ],
+        },
+    ];
+    return (<SharedTeam teamHeadingText="Meet the AI Experts" teamSubheadingText="Our world-class team of AI researchers, engineers, and strategists working to revolutionize your business with cutting-edge artificial intelligence." teamMembers={teamMembers} section={{
+            className: "py-20 md:py-24 lg:py-28 bg-gray-50 dark:bg-gray-900",
+        }} container={{ className: "max-w-7xl mx-auto px-6 md:px-8 lg:px-12" }} header={{ className: "space-y-16 items-center" }} heading={{
+            className: "text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 dark:text-white text-center font-outfit",
+        }} subheading={{
+            className: "text-lg md:text-xl text-gray-600 dark:text-gray-300 opacity-90 leading-relaxed text-center max-w-4xl mx-auto font-inter",
+        }} grid={{
+            className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-10 w-full",
+        }} card={{
+            className: "bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg text-center transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl group border border-gray-200 dark:border-gray-700",
+        }} cardContent={{ className: "flex flex-col items-center space-y-6" }} avatar={{
+            className: "text-5xl md:text-6xl mb-3 group-hover:scale-110 transition-transform duration-300",
+        }} name={{
+            className: "text-lg md:text-xl font-bold text-gray-800 dark:text-white font-outfit group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300",
+        }} role={{
+            className: "text-base font-semibold text-purple-600 dark:text-purple-400 font-inter",
+        }} bio={{
+            className: "text-sm md:text-base text-gray-600 dark:text-gray-300 opacity-90 leading-relaxed font-inter",
+        }} socialLinks={{ className: "flex gap-4 mt-4" }} socialLink={{
+            className: "text-xl text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200 hover:scale-110 transform",
+        }} ariaLabel="IntelliOpAI team section"/>);
+}

package/dist/templates/productlaunch/components/Testimonials.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Product Launch preset for Testimonials wired to the shared Testimonials component
+ */
+export declare function Testimonials(): import("react").JSX.Element;
+//# sourceMappingURL=Testimonials.d.ts.map

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

@@ -0,0 +1,54 @@
+"use client";
+import { Testimonials as SharedTestimonials } from "@nextworks/blocks-sections";
+/**
+ * Product Launch preset for Testimonials wired to the shared Testimonials component
+ */
+export function Testimonials() {
+    const testimonials = [
+        {
+            testimonialText: "IntelliOpAI has completely transformed our workflow. The AI-powered automation saves us 40+ hours per week, and the accuracy is incredible.",
+            testimonialAuthor: " - Sarah Johnson, CEO at TechCorp",
+            testimonialAuthorInitials: "SJ",
+        },
+        {
+            testimonialText: "The machine learning capabilities are outstanding. We've seen a 300% increase in productivity since implementing their AI solutions.",
+            testimonialAuthor: " - Michael Chen, CTO at InnovateLab",
+            testimonialAuthorInitials: "MC",
+        },
+        {
+            testimonialText: "Game-changing technology! The AI insights have helped us make better decisions and scale our business faster than ever before.",
+            testimonialAuthor: " - Emily Rodriguez, VP Operations at GrowthCo",
+            testimonialAuthorInitials: "ER",
+        },
+        {
+            testimonialText: "The implementation was seamless and the results exceeded our expectations. Our team loves working with the AI-powered tools.",
+            testimonialAuthor: " - David Kim, Head of Engineering at StartupXYZ",
+            testimonialAuthorInitials: "DK",
+        },
+        {
+            testimonialText: "IntelliOpAI's natural language processing capabilities have revolutionized how we handle customer support. Response times improved by 80%.",
+            testimonialAuthor: " - Lisa Wang, Customer Success Director at ServicePro",
+            testimonialAuthorInitials: "LW",
+        },
+        {
+            testimonialText: "The predictive analytics features are phenomenal. We can now forecast trends and make data-driven decisions with confidence.",
+            testimonialAuthor: " - James Thompson, Data Science Lead at AnalyticsPlus",
+            testimonialAuthorInitials: "JT",
+        },
+    ];
+    return (<SharedTestimonials id="testimonials" testimonials={testimonials} testimonialSectionHeader="What Our AI Customers Say" section={{
+            className: "py-20 md:py-24 lg:py-28 bg-gray-50 dark:bg-gray-900",
+        }} container={{ className: "max-w-7xl mx-auto px-6 md:px-8 lg:px-12" }} header={{ className: "text-center mb-16" }} heading={{
+            className: "text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 dark:text-white text-center font-outfit",
+        }} grid={{
+            className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10",
+        }} card={{
+            className: "bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-500/10 group border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-600",
+        }} content={{ className: "flex flex-col space-y-6" }} text={{
+            className: "text-gray-700 dark:text-gray-300 text-base md:text-lg leading-relaxed italic font-inter group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300",
+        }} author={{
+            className: "text-gray-600 dark:text-gray-400 text-sm md:text-base font-medium font-inter",
+        }} avatar={{
+            className: "w-16 h-16 bg-gradient-to-br from-purple-600 to-purple-700 text-white rounded-full flex items-center justify-center text-xl font-bold shadow-lg group-hover:scale-110 transition-transform duration-300",
+        }} avatarText={{ className: "text-white font-bold" }} ariaLabel="Customer testimonials for IntelliOpAI"/>);
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Product Launch preset for TrustBadges wired to the shared TrustBadges component
+ */
+export declare function TrustBadges(): import("react").JSX.Element;
+//# sourceMappingURL=TrustBadges.d.ts.map

package/dist/templates/productlaunch/components/TrustBadges.jsx

@@ -0,0 +1,49 @@
+"use client";
+import { TrustBadges as SharedTrustBadges } from "@nextworks/blocks-sections";
+/**
+ * Product Launch preset for TrustBadges wired to the shared TrustBadges component
+ */
+export function TrustBadges() {
+    const badges = [
+        {
+            badgeText: "50,000+ AI Models",
+            badgeDescription: "Powered by",
+            badgeIcon: "🤖",
+        },
+        {
+            badgeText: "99.9% Accuracy",
+            badgeDescription: "AI Performance",
+            badgeIcon: "🎯",
+        },
+        {
+            badgeText: "SOC 2 Type II",
+            badgeDescription: "Enterprise Security",
+            badgeIcon: "🔒",
+        },
+        {
+            badgeText: "24/7 Support",
+            badgeDescription: "Always Available",
+            badgeIcon: "⚡",
+        },
+        {
+            badgeText: "Fortune 500",
+            badgeDescription: "Trusted by",
+            badgeIcon: "🏆",
+        },
+    ];
+    return (<SharedTrustBadges id="trust-badges" badges={badges} trustBadgesSectionHeader="Trusted by Industry Leaders" section={{
+            className: "py-12 md:py-16 bg-gradient-to-r from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 border-t border-b border-gray-200 dark:border-gray-700",
+        }} container={{ className: "max-w-7xl mx-auto px-6 md:px-8 lg:px-12" }} header={{ className: "text-center mb-12" }} heading={{
+            className: "text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 dark:text-white font-outfit",
+        }} badgesContainer={{
+            className: "flex flex-col sm:flex-row justify-center items-center gap-8 md:gap-12 lg:gap-16 flex-wrap",
+        }} badge={{
+            className: "flex flex-col items-center text-center min-w-[180px] group",
+        }} badgeContent={{ className: "flex flex-col items-center space-y-3" }} icon={{
+            className: "text-3xl md:text-4xl mb-3 group-hover:scale-105 transition-transform duration-500 ease-out",
+        }} description={{
+            className: "text-xs md:text-sm font-medium text-gray-600 dark:text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors duration-500 ease-out",
+        }} text={{
+            className: "text-base md:text-lg font-bold text-gray-900 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-500 ease-out font-outfit",
+        }} layout="horizontal" ariaLabel="Trust badges for IntelliOpAI"/>);
+}

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

@@ -0,0 +1,89 @@
+"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());
+    };
+    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.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.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/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.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

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