nextworks 0.2.0-alpha.11 → 0.2.0-alpha.13

package/dist/kits/blocks/app/templates/saasdashboard/components/FAQ.tsx

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

package/dist/kits/blocks/app/templates/saasdashboard/components/Features.tsx

@@ -1,90 +1,90 @@
-"use client";
-
-import { Features as SharedFeatures } from "@/components/sections/Features";
-import { cn } from "@/lib/utils";
-
-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",
-        ),
-      }}
-      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"
-    />
-  );
-}
+"use client";
+
+import { Features as SharedFeatures } from "@/components/sections/Features";
+import { cn } from "@/lib/utils";
+
+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",
+        ),
+      }}
+      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/kits/blocks/app/templates/saasdashboard/components/Footer.tsx

@@ -1,77 +1,77 @@
-"use client";
-
-import { Footer as SharedFooter } from "@/components/sections/Footer";
-import { cn } from "@/lib/utils";
-
-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"
-    />
-  );
-}
+"use client";
+
+import { Footer as SharedFooter } from "@/components/sections/Footer";
+import { cn } from "@/lib/utils";
+
+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/kits/blocks/app/templates/saasdashboard/components/Hero.tsx

@@ -1,104 +1,104 @@
-"use client";
-
-import { HeroSplit as SharedHeroSplit } from "@/components/sections/HeroSplit";
-import { Dashboard } from "./Dashboard";
-import { cn } from "@/lib/utils";
-
-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>
-  );
-}
+"use client";
+
+import { HeroSplit as SharedHeroSplit } from "@/components/sections/HeroSplit";
+import { Dashboard } from "./Dashboard";
+import { cn } from "@/lib/utils";
+
+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>
+  );
+}