nextworks 0.0.1 → 0.1.0-alpha.1

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

@@ -0,0 +1,104 @@
+"use client";
+
+import { Team as SharedTeam } from "@/components/sections/Team";
+
+/**
+ * Product Launch preset for Team wired to the upgraded 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/kits/blocks/app/templates/productlaunch/components/Testimonials.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Testimonials as SharedTestimonials } from "@/components/sections/Testimonials";
+
+/**
+ * Product Launch preset for Testimonials wired to the upgraded 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/kits/blocks/app/templates/productlaunch/components/TrustBadges.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { TrustBadges as SharedTrustBadges } from "@/components/sections/TrustBadges";
+
+/**
+ * Product Launch preset for TrustBadges wired to the upgraded 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/kits/blocks/app/templates/productlaunch/page.tsx

@@ -0,0 +1,45 @@
+import { Navbar } from "./components/Navbar";
+import { CTA } from "./components/CTA";
+import { Hero } from "./components/Hero";
+import { About } from "./components/About";
+import { Pricing } from "./components/Pricing";
+import { ProcessTimeline } from "./components/ProcessTimeline";
+import { FAQ } from "./components/FAQ";
+import { Contact } from "./components/Contact";
+import { Footer } from "./components/Footer";
+import { Testimonials } from "./components/Testimonials";
+import { TrustBadges } from "./components/TrustBadges";
+import { Features } from "./components/Features";
+
+import { PresetThemeVars } from "./PresetThemeVars";
+
+export default function ProductLaunchPage() {
+  return (
+    // <PresetThemeVars>
+    <>
+      <Navbar />
+      <section id="home">
+        <Hero />
+      </section>
+      <TrustBadges />
+      <About />
+      <section id="features">
+        <Features />
+        <ProcessTimeline />
+      </section>
+      <Testimonials />
+      <CTA />
+      <section id="pricing">
+        <Pricing />
+      </section>
+      <section id="faq">
+        <FAQ />
+      </section>
+      <section id="contact">
+        <Contact />
+      </section>
+      <Footer />
+    </>
+    // </PresetThemeVars>
+  );
+}

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

@@ -0,0 +1,80 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type Props = React.PropsWithChildren<{ className?: string }>;
+
+/**
+ * SaaSDashboard template theme variables wrapper.
+ * Sky/blue leaning palette; adjust values to your preset branding.
+ */
+export function PresetThemeVars({ className, children }: Props) {
+  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/kits/blocks/app/templates/saasdashboard/README.md

@@ -0,0 +1,38 @@
+# SaaSDashboard Template Theming
+
+This template is preset-first. It’s wrapped with `PresetThemeVars` to apply a sky/blue palette across shared components. Use local overrides sparingly (e.g., a CTA hover state unique to a section).
+
+## Where it’s wired
+
+- Wrapper: `components/templates/saasdashboard/PresetThemeVars.tsx`
+- Page: `app/templates/saasdashboard/page.tsx`
+
+## 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`, active: `--badge-active-*`
+- 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
+
+This template should be styled primarily by PresetThemeVars. When a section needs to deviate, set overrides locally and keep them minimal.
+
+Example to emphasize button rings inside Pricing only:
+
+```tsx
+<section className="[--btn-ring:theme(colors.sky.600)]">
+  <Pricing />
+</section>
+```
+
+## Outline buttons
+
+For outline variants: set `--btn-bg:transparent` and keep a border width class.
+
+## Should preset components be refactored?
+
+Not required. Over time, simplify presets by removing redundant color classes in favor of the variables. Structure/motion classes should remain.

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

@@ -0,0 +1,176 @@
+"use client";
+
+import React from "react";
+import {
+  Contact as SharedContact,
+  ContactField,
+} from "@/components/sections/Contact";
+
+const saasContactFormData: ContactField[] = [
+  {
+    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: React.FormEvent<HTMLFormElement>) => {
+    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>
+  );
+}
+
+// "use client";
+
+// import { Contact as SharedContact } from "@/components/sections/Contact";
+
+// export function Contact() {
+//   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
+//         contactHeaderText="Ready to See DashFlow in Action?"
+//         contactSubHeaderText="Tell us a bit about your team and we'll reach out with a tailored demo."
+//         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",
+//         }}
+//         header={{
+//           className:
+//             "text-3xl font-bold font-inter text-white text-center mb-4",
+//         }}
+//         subheader={{
+//           className:
+//             "text-base text-white/90 text-center mb-10 max-w-2xl mx-auto font-inter",
+//         }}
+//         form={{
+//           className: "bg-white dark:bg-gray-800 p-8 rounded-xl shadow-xl",
+//         }}
+//         submitButton={{
+//           text: "Send Request",
+//           variant: "default",
+//           size: "lg",
+//           className:
+//             "w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold font-inter shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
+//         }}
+//       />
+//     </div>
+//   );
+// }