nextworks 0.2.0-alpha.2 → 0.2.0-alpha.21

package/dist/kits/blocks/app/templates/productlaunch/PresetThemeVars.tsx

@@ -1,74 +1,75 @@
-import React from "react";
-import { cn } from "@/lib/utils";
-
-type Props = React.PropsWithChildren<{ className?: string }>;
-
-/**
- * ProductLaunch template theme variables wrapper.
- *
- * Sets a small CSS variable contract consumed by shared components
- * (Buttons, Inputs, Cards, Badges, Footer, Table, etc.).
- *
- * You can override any variable per-section by re-declaring it on
- * that section/container.
- */
-export function PresetThemeVars({ className, children }: Props) {
-  return (
-    <div
-      className={cn(
-        // Button ring shared across template
-        "[--btn-ring:theme(colors.purple.500)] dark:[--btn-ring:theme(colors.purple.400)]",
-
-        // Inputs (Contact)
-        "[--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.purple.200)] dark:[--input-border:theme(colors.purple.700)]",
-        "[--input-focus-ring:theme(colors.purple.500)] dark:[--input-focus-ring:theme(colors.purple.400)]",
-        "[--input-ring-offset:theme(colors.white)] dark:[--input-ring-offset:theme(colors.gray.900)]",
-
-        // Cards (Features, ServicesGrid, Pricing, Testimonials, etc.)
-        "[--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 (Portfolio filters/tags, Pricing badge, Testimonials avatar)
-        "[--badge-bg:theme(colors.purple.50)] dark:[--badge-bg:theme(colors.purple.950)]",
-        "[--badge-fg:theme(colors.purple.700)] dark:[--badge-fg:theme(colors.purple.300)]",
-        "[--badge-border:theme(colors.purple.200)] dark:[--badge-border:theme(colors.purple.800)]",
-        "[--badge-active-bg:theme(colors.purple.600)] dark:[--badge-active-bg:theme(colors.purple.500)]",
-        "[--badge-active-fg:theme(colors.white)] dark:[--badge-active-fg:theme(colors.white)]",
-        "[--badge-active-border:theme(colors.purple.700)] dark:[--badge-active-border:theme(colors.purple.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)]",
-
-        // 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.purple.700)] dark:[--footer-link-hover-fg:theme(colors.purple.400)]",
-        "[--footer-link-hover-bg:theme(colors.purple.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.17_0.05_324)_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)]",
-
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-}
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type Props = React.PropsWithChildren<{ className?: string }>;
+
+/**
+ * ProductLaunch template theme variables wrapper.
+ * Not used by default for the ProductLaunch template.
+ *
+ * Sets a small CSS variable contract consumed by shared components
+ * (Buttons, Inputs, Cards, Badges, Footer, Table, etc.).
+ *
+ * You can override any variable per-section by re-declaring it on
+ * that section/container.
+ */
+export function PresetThemeVars({ className, children }: Props) {
+  return (
+    <div
+      className={cn(
+        // Button ring shared across template
+        "[--btn-ring:theme(colors.purple.500)] dark:[--btn-ring:theme(colors.purple.400)]",
+
+        // Inputs (Contact)
+        "[--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.purple.200)] dark:[--input-border:theme(colors.purple.700)]",
+        "[--input-focus-ring:theme(colors.purple.500)] dark:[--input-focus-ring:theme(colors.purple.400)]",
+        "[--input-ring-offset:theme(colors.white)] dark:[--input-ring-offset:theme(colors.gray.900)]",
+
+        // Cards (Features, ServicesGrid, Pricing, Testimonials, etc.)
+        "[--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 (Portfolio filters/tags, Pricing badge, Testimonials avatar)
+        "[--badge-bg:theme(colors.purple.50)] dark:[--badge-bg:theme(colors.purple.950)]",
+        "[--badge-fg:theme(colors.purple.700)] dark:[--badge-fg:theme(colors.purple.300)]",
+        "[--badge-border:theme(colors.purple.200)] dark:[--badge-border:theme(colors.purple.800)]",
+        "[--badge-active-bg:theme(colors.purple.600)] dark:[--badge-active-bg:theme(colors.purple.500)]",
+        "[--badge-active-fg:theme(colors.white)] dark:[--badge-active-fg:theme(colors.white)]",
+        "[--badge-active-border:theme(colors.purple.700)] dark:[--badge-active-border:theme(colors.purple.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)]",
+
+        // 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.purple.700)] dark:[--footer-link-hover-fg:theme(colors.purple.400)]",
+        "[--footer-link-hover-bg:theme(colors.purple.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.17_0.05_324)_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)]",
+
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/dist/kits/blocks/app/templates/productlaunch/README.md

@@ -1,55 +1,62 @@
-# ProductLaunch Template Theming
-
-This template intentionally does NOT wrap the page with PresetThemeVars. It serves as the component-level styling example where individual preset components set CSS variables locally on their slots (buttons, cards, inputs, etc.).
-
-Shared components read these variables with token fallbacks, so if a var is not set, design tokens still apply safely.
-
-## Where to look
-
-- Page: `app/templates/productlaunch/page.tsx` (PresetThemeVars is commented out)
-- Components: `app/templates/productlaunch/components/*` (slots use Tailwind arbitrary properties like `[--btn-bg:...]` to set vars locally)
-
-## Core variables
-
-- Buttons: `--btn-bg`, `--btn-fg`, `--btn-hover-bg`, `--btn-hover-fg`, `--btn-border`, `--btn-ring`
-- Inputs/Textareas: `--input-bg`, `--input-fg`, `--input-placeholder`, `--input-border`, `--input-focus-ring`, `--input-ring-offset`
-- Cards: `--card-bg`, `--card-fg`, `--card-title-fg`, `--card-muted-fg`, `--card-border`, `--card-shadow`
-- Badges/Chips: `--badge-bg`, `--badge-fg`, `--badge-border`, plus active: `--badge-active-bg`, `--badge-active-fg`, `--badge-active-border`
-- Headings: `--heading-fg`, `--subheading-fg`, `--description-fg`
-- Footer: `--footer-bg`, `--footer-fg`, `--footer-heading-fg`, `--footer-link-fg`, `--footer-link-hover-fg`, `--footer-link-hover-bg`, `--footer-muted-fg`, `--footer-border`
-- Table: `--table-fg`, `--table-muted-fg`, `--table-head-fg`, `--table-border`, `--table-row-hover-bg`
-
-## Per-section overrides (examples)
-
-Because this template is component-first, most styling is set directly in the component props. You can still scope vars on a section wrapper when it’s convenient:
-
-```tsx
-<section className="[--btn-ring:theme(colors.purple.600)] dark:[--btn-ring:theme(colors.purple.500)]">
-  <CTA />
-</section>
-```
-
-Contact input borders example:
-
-```tsx
-<section className="[--input-border:theme(colors.purple.200)] dark:[--input-border:theme(colors.purple.700)]">
-  <Contact />
-</section>
-```
-
-## Outline buttons
-
-When styling outline buttons, set `--btn-bg:transparent` and keep a border width class (e.g., `border` or `border-2`).
-
-```tsx
-<Button
-  variant="outline"
-  className="border [--btn-bg:transparent] [--btn-border:theme(colors.purple.600)] [--btn-fg:theme(colors.purple.600)] hover:[--btn-hover-bg:theme(colors.purple.50)] hover:[--btn-hover-fg:theme(colors.purple.600)]"
->
-  Outline
-</Button>
-```
-
-## Do I need to refactor preset components?
-
-Not required. This template is intentionally left as an example of component-level styling. Over time, you can still deduplicate color classes by relying on the shared var contract while keeping structure/spacing classes.
+# ProductLaunch Template Theming
+
+This template intentionally does NOT wrap the page with PresetThemeVars. It serves as the component-level styling example where individual preset components set CSS variables locally on their slots (buttons, cards, inputs, etc.).
+
+Shared components read these variables with token fallbacks, so if a var is not set, design tokens still apply safely.
+
+## Where to look
+
+Template paths depend on your router:
+
+- App Router:
+  - Page: `app/templates/productlaunch/page.tsx` (PresetThemeVars is commented out)
+  - Components: `app/templates/productlaunch/components/*` (slots use Tailwind arbitrary properties like `[--btn-bg:...]` to set vars locally)
+
+- Pages Router:
+  - Page: `pages/templates/productlaunch/index.tsx` (PresetThemeVars is commented out)
+  - Components: `components/templates/productlaunch/components/*`
+
+## Core variables
+
+- Buttons: `--btn-bg`, `--btn-fg`, `--btn-hover-bg`, `--btn-hover-fg`, `--btn-border`, `--btn-ring`
+- Inputs/Textareas: `--input-bg`, `--input-fg`, `--input-placeholder`, `--input-border`, `--input-focus-ring`, `--input-ring-offset`
+- Cards: `--card-bg`, `--card-fg`, `--card-title-fg`, `--card-muted-fg`, `--card-border`, `--card-shadow`
+- Badges/Chips: `--badge-bg`, `--badge-fg`, `--badge-border`, plus active: `--badge-active-bg`, `--badge-active-fg`, `--badge-active-border`
+- Headings: `--heading-fg`, `--subheading-fg`, `--description-fg`
+- Footer: `--footer-bg`, `--footer-fg`, `--footer-heading-fg`, `--footer-link-fg`, `--footer-link-hover-fg`, `--footer-link-hover-bg`, `--footer-muted-fg`, `--footer-border`
+- Table: `--table-fg`, `--table-muted-fg`, `--table-head-fg`, `--table-border`, `--table-row-hover-bg`
+
+## Per-section overrides (examples)
+
+Because this template is component-first, most styling is set directly in the component props. You can still scope vars on a section wrapper when it’s convenient:
+
+```tsx
+<section className="[--btn-ring:theme(colors.purple.600)] dark:[--btn-ring:theme(colors.purple.500)]">
+  <CTA />
+</section>
+```
+
+Contact input borders example:
+
+```tsx
+<section className="[--input-border:theme(colors.purple.200)] dark:[--input-border:theme(colors.purple.700)]">
+  <Contact />
+</section>
+```
+
+## Outline buttons
+
+When styling outline buttons, set `--btn-bg:transparent` and keep a border width class (e.g., `border` or `border-2`).
+
+```tsx
+<Button
+  variant="outline"
+  className="border [--btn-bg:transparent] [--btn-border:theme(colors.purple.600)] [--btn-fg:theme(colors.purple.600)] hover:[--btn-hover-bg:theme(colors.purple.50)] hover:[--btn-hover-fg:theme(colors.purple.600)]"
+>
+  Outline
+</Button>
+```
+
+## Do I need to refactor preset components?
+
+Not required. This template is intentionally left as an example of component-level styling. Over time, you can still deduplicate color classes by relying on the shared var contract while keeping structure/spacing classes.

package/dist/kits/blocks/app/templates/productlaunch/components/About.tsx

@@ -1,178 +1,84 @@
-"use client";
-import React from "react";
-import { About as SharedAbout } from "@/components/sections/About";
-
-/**
- * A preset About component customized for the product launch page,
- * using the shared About.tsx with predefined styles and content.
- *
- * Features:
- * - "About IntelliOpAI" heading with custom typography
- * - Purple-themed styling matching the brand
- * - Custom stats optimized for AI product launch
- * - Responsive design with proper spacing
- * - Dark mode support with consistent theming
- * - Clean, modern design with hover effects
- */
-
-export function About() {
-  return (
-    <SharedAbout
-      // Content
-      aboutSubheadingText="The Future of AI is Here"
-      aboutHeadingText="About IntelliOpAI"
-      aboutContentText="IntelliOpAI is pioneering the next generation of artificial intelligence solutions for modern businesses. Founded by AI researchers and industry disruptors, we're building intelligent systems that learn, adapt, and deliver results in real-time. Our breakthrough technology combines deep learning, natural language processing, and predictive analytics to create AI that actually works for your business."
-      aboutTextAlign="center"
-      // Stats
-      showStats={true}
-      animateStats={true}
-      aboutStats={[
-        { value: "10M", suffix: "+", label: "Data Points Processed" },
-        { value: "99.7", suffix: "%", label: "AI Accuracy Rate" },
-        { value: "500", suffix: "+", label: "Early Adopters" },
-        { value: "24", suffix: "/7", label: "AI Innovation" },
-      ]}
-      // Slots / styling
-      section={{
-        className: "py-20 bg-white dark:bg-black text-gray-800 dark:text-white",
-      }}
-      container={{
-        className: "max-w-7xl mx-auto px-6",
-      }}
-      inner={{
-        // New slot styled for this preset
-        className: "flex flex-col gap-12",
-      }}
-      contentContainer={{
-        className: "max-w-4xl mx-auto",
-      }}
-      contentStack={{
-        // New slot styled for this preset
-        className: "flex flex-col gap-6",
-      }}
-      subheading={{
-        className:
-          "text-sm font-semibold text-purple-600 dark:text-purple-400 uppercase tracking-wider font-inter",
-      }}
-      heading={{
-        className:
-          "text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 dark:text-white leading-tight font-outfit",
-      }}
-      content={{
-        className:
-          "text-base md:text-lg text-gray-700 dark:text-gray-200 leading-relaxed opacity-90 max-w-3xl font-inter",
-      }}
-      statsSection={{
-        className:
-          "bg-gradient-to-r from-purple-50 via-white to-purple-50 dark:from-purple-900/20 dark:via-gray-800 dark:to-purple-900/20 p-8 md:p-12 rounded-2xl shadow-xl mx-auto max-w-5xl w-full border border-purple-200 dark:border-purple-800",
-      }}
-      statsGrid={{
-        className:
-          "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 justify-items-center",
-      }}
-      statItem={{
-        className: "flex flex-col items-center gap-3",
-      }}
-      statNumber={{
-        className:
-          "text-2xl md:text-3xl lg:text-4xl font-bold text-purple-600 dark:text-purple-400 leading-none font-outfit",
-      }}
-      statLabel={{
-        className:
-          "text-sm md:text-base font-medium text-gray-700 dark:text-gray-300 text-center opacity-90 font-inter",
-      }}
-    />
-  );
-}
-
-// "use client";
-
-// import { About as SharedAbout } from "@/components/sections/About";
-
-// /**
-//  * A preset About component customized for the product launch page,
-//  * using the shared About.tsx with predefined styles and content.
-//  *
-//  * Features:
-//  * - "About IntelliOpAI" heading with custom typography
-//  * - Purple-themed styling matching the brand
-//  * - Custom stats optimized for AI product launch
-//  * - Responsive design with proper spacing
-//  * - Dark mode support with consistent theming
-//  * - Clean, modern design with hover effects
-//  */
-// export function About() {
-//   return (
-//     <SharedAbout
-//       aboutHeadingText="About IntelliOpAI"
-//       aboutSubheadingText="The Future of AI is Here"
-//       aboutContentText="IntelliOpAI is pioneering the next generation of artificial intelligence solutions for modern businesses. Founded by AI researchers and industry disruptors, we're building intelligent systems that learn, adapt, and deliver results in real-time. Our breakthrough technology combines deep learning, natural language processing, and predictive analytics to create AI that actually works for your business."
-//       aboutStats={[
-//         {
-//           value: "10M",
-//           label: "Data Points Processed",
-//           suffix: "+",
-//         },
-//         {
-//           value: "99.7",
-//           label: "AI Accuracy Rate",
-//           suffix: "%",
-//         },
-//         {
-//           value: "500",
-//           label: "Early Adopters",
-//           suffix: "+",
-//         },
-//         {
-//           value: "24",
-//           label: "AI Innovation",
-//           suffix: "/7",
-//         },
-//       ]}
-//       section={{
-//         className: "py-20 bg-white dark:bg-black text-gray-800 dark:text-white",
-//       }}
-//       container={{
-//         className: "max-w-7xl mx-auto px-6",
-//       }}
-//       contentContainer={{
-//         className: "max-w-4xl mx-auto",
-//       }}
-//       subheading={{
-//         className:
-//           "text-sm font-semibold text-purple-600 dark:text-purple-400 uppercase tracking-wider font-inter",
-//       }}
-//       heading={{
-//         className:
-//           "text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 dark:text-white leading-tight font-outfit",
-//       }}
-//       content={{
-//         className:
-//           "text-base md:text-lg text-gray-700 dark:text-gray-200 leading-relaxed opacity-90 max-w-3xl font-inter",
-//       }}
-//       statsSection={{
-//         className:
-//           "bg-gradient-to-r from-purple-50 via-white to-purple-50 dark:from-purple-900/20 dark:via-gray-800 dark:to-purple-900/20 p-8 md:p-12 rounded-2xl shadow-xl mx-auto max-w-5xl w-full border border-purple-200 dark:border-purple-800",
-//       }}
-//       statsGrid={{
-//         className:
-//           "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 justify-items-center",
-//       }}
-//       statItem={{
-//         className: "flex flex-col items-center gap-3",
-//       }}
-//       statNumber={{
-//         className:
-//           "text-2xl md:text-3xl lg:text-4xl font-bold text-purple-600 dark:text-purple-400 leading-none font-outfit",
-//       }}
-//       statLabel={{
-//         className:
-//           "text-sm md:text-base font-medium text-gray-700 dark:text-gray-300 text-center opacity-90 font-inter",
-//       }}
-//       aboutTextAlign="center"
-//       showStats={true}
-//       animateStats={false}
-//       ariaLabel="About IntelliOpAI section"
-//     />
-//   );
-// }
+"use client";
+import React from "react";
+import { About as SharedAbout } from "@/components/sections/About";
+
+/**
+ * A preset About component customized for the product launch page,
+ * using the shared About.tsx with predefined styles and content.
+ *
+ * Features:
+ * - "About IntelliOpAI" heading with custom typography
+ * - Purple-themed styling matching the brand
+ * - Custom stats optimized for AI product launch
+ * - Responsive design with proper spacing
+ * - Dark mode support with consistent theming
+ * - Clean, modern design with hover effects
+ */
+
+export function About() {
+  return (
+    <SharedAbout
+      // Content
+      aboutSubheadingText="The Future of AI is Here"
+      aboutHeadingText="About IntelliOpAI"
+      aboutContentText="IntelliOpAI is pioneering the next generation of artificial intelligence solutions for modern businesses. Founded by AI researchers and industry disruptors, we're building intelligent systems that learn, adapt, and deliver results in real-time. Our breakthrough technology combines deep learning, natural language processing, and predictive analytics to create AI that actually works for your business."
+      aboutTextAlign="center"
+      // Stats
+      showStats={true}
+      animateStats={true}
+      aboutStats={[
+        { value: "10M", suffix: "+", label: "Data Points Processed" },
+        { value: "99.7", suffix: "%", label: "AI Accuracy Rate" },
+        { value: "500", suffix: "+", label: "Early Adopters" },
+        { value: "24", suffix: "/7", label: "AI Innovation" },
+      ]}
+      // Slots / styling
+      section={{
+        className: "py-20 bg-white dark:bg-black text-gray-800 dark:text-white",
+      }}
+      container={{
+        className: "max-w-7xl mx-auto px-6",
+      }}
+      inner={{
+        className: "flex flex-col gap-12",
+      }}
+      contentContainer={{
+        className: "max-w-4xl mx-auto",
+      }}
+      contentStack={{
+        className: "flex flex-col gap-6",
+      }}
+      subheading={{
+        className:
+          "text-sm font-semibold text-purple-600 dark:text-purple-400 uppercase tracking-wider font-inter",
+      }}
+      heading={{
+        className:
+          "text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 dark:text-white leading-tight font-outfit",
+      }}
+      content={{
+        className:
+          "text-base md:text-lg text-gray-700 dark:text-gray-200 leading-relaxed opacity-90 max-w-3xl font-inter",
+      }}
+      statsSection={{
+        className:
+          "bg-gradient-to-r from-purple-50 via-white to-purple-50 dark:from-purple-900/20 dark:via-gray-800 dark:to-purple-900/20 p-8 md:p-12 rounded-2xl shadow-xl mx-auto max-w-5xl w-full border border-purple-200 dark:border-purple-800",
+      }}
+      statsGrid={{
+        className:
+          "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 justify-items-center",
+      }}
+      statItem={{
+        className: "flex flex-col items-center gap-3",
+      }}
+      statNumber={{
+        className:
+          "text-2xl md:text-3xl lg:text-4xl font-bold text-purple-600 dark:text-purple-400 leading-none font-outfit",
+      }}
+      statLabel={{
+        className:
+          "text-sm md:text-base font-medium text-gray-700 dark:text-gray-300 text-center opacity-90 font-inter",
+      }}
+    />
+  );
+}