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

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

@@ -1,231 +1,231 @@
-// app/templates/productlaunch/componnets/Contact.tsx
-
-"use client";
-
-import React from "react";
-import {
-  Contact as SharedContact,
-  ContactField,
-} from "@/components/sections/Contact";
-
-/**
- * A preset Contact component customized for the product launch page,
- * using the shared Contact.tsx with predefined styles and content.
- *
- * Features:
- * - "Get Started with IntelliOpAI" heading with custom typography
- * - Purple-themed styling matching the brand
- * - Custom form fields optimized for product launch
- * - Responsive design with proper spacing
- * - Dark mode support with consistent theming
- * - Clean, modern design with hover effects
- */
-const productLaunchContactFormData: ContactField[] = [
-  {
-    id: "name",
-    label: "Your Full Name",
-    placeholder: "John Doe",
-    required: true,
-    type: "text",
-  },
-  {
-    id: "email",
-    label: "Email Address",
-    placeholder: "you@example.com",
-    required: true,
-    type: "email",
-  },
-  {
-    id: "company",
-    label: "Company Name",
-    placeholder: "Your Company",
-    required: false,
-    type: "text",
-  },
-  {
-    id: "phone",
-    label: "Phone Number",
-    placeholder: "+1 (555) 123-4567",
-    required: false,
-    type: "tel",
-  },
-  {
-    id: "message",
-    label: "Tell us about your project",
-    placeholder: "Describe your business needs and how we can help...",
-    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 (
-    <SharedContact
-      id="contact"
-      fields={productLaunchContactFormData}
-      contactHeaderText="Get Started with IntelliOpAI"
-      contactSubHeaderText="Ready to revolutionize your workflow? Get in touch with our team to learn how our AI solutions can transform your business operations and drive growth."
-      // Root and layout
-      className="w-full"
-      section={{
-        className:
-          "py-16 px-4 bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 dark:from-purple-500 dark:via-purple-600 dark:to-purple-700",
-      }}
-      container={{
-        className: "mx-auto max-w-4xl",
-      }}
-      // Header slots
-      headerWrapper={{ className: "mb-4 text-center" }}
-      headerText={{
-        className:
-          "text-2xl md:text-3xl lg:text-4xl font-bold font-outfit text-white dark:text-white",
-      }}
-      subheaderText={{
-        className:
-          "text-base md:text-lg text-white dark:text-gray-200 text-center mb-8 px-4 md:px-14 font-inter leading-relaxed",
-      }}
-      // Form container
-      form={{
-        className:
-          "bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg border border-purple-200 dark:border-purple-300",
-      }}
-      // Fields wrapper and field item
-      fieldsWrapper={{ className: "space-y-6" }}
-      field={{ className: "space-y-2" }}
-      // Label + inputs
-      label={{
-        className:
-          "text-gray-700 dark:text-white text-sm font-semibold block font-inter",
-      }}
-      input={{
-        className:
-          "w-full p-3 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-0 focus:border-transparent transition-all duration-200",
-      }}
-      textarea={{
-        className:
-          "w-full p-3 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-0 focus:border-transparent resize-vertical min-h-[120px] transition-all duration-200",
-      }}
-      // Submit button (split: wrapper/style/text)
-      submitButtonWrapper={{ className: "pt-2" }}
-      submitButtonStyle={{
-        variant: "default",
-        size: "lg",
-        className:
-          "w-full font-semibold text-base shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-0 [--btn-bg:theme(colors.purple.600)] hover:[--btn-hover-bg:theme(colors.purple.700)] [--btn-fg:white] hover:[--btn-hover-fg:white] [--btn-border:transparent]",
-      }}
-      submitButtonText="Start Your AI Journey"
-      onSubmit={handleFormSubmit}
-      ariaLabel="Get started with IntelliOpAI contact form"
-    />
-  );
-}
-
-// "use client";
-
-// import { Contact as SharedContact } from "@/components/sections/Contact";
-
-// /**
-//  * A preset Contact component customized for the product launch page,
-//  * using the shared Contact.tsx with predefined styles and content.
-//  *
-//  * Features:
-//  * - "Get Started with IntelliOpAI" heading with custom typography
-//  * - Purple-themed styling matching the brand
-//  * - Custom form fields optimized for product launch
-//  * - Responsive design with proper spacing
-//  * - Dark mode support with consistent theming
-//  * - Clean, modern design with hover effects
-//  */
-// export function Contact() {
-//   return (
-//     <SharedContact
-//       contactHeaderText="Get Started with IntelliOpAI"
-//       contactSubHeaderText="Ready to revolutionize your workflow? Get in touch with our team to learn how our AI solutions can transform your business operations and drive growth."
-//       fields={[
-//         {
-//           id: "name",
-//           label: "Your Full Name",
-//           placeholder: "John Doe",
-//           required: true,
-//           type: "text",
-//         },
-//         {
-//           id: "email",
-//           label: "Email Address",
-//           placeholder: "you@example.com",
-//           required: true,
-//           type: "email",
-//         },
-//         {
-//           id: "company",
-//           label: "Company Name",
-//           placeholder: "Your Company",
-//           required: false,
-//           type: "text",
-//         },
-//         {
-//           id: "phone",
-//           label: "Phone Number",
-//           placeholder: "+1 (555) 123-4567",
-//           required: false,
-//           type: "tel",
-//         },
-//         {
-//           id: "message",
-//           label: "Tell us about your project",
-//           placeholder: "Describe your business needs and how we can help...",
-//           required: true,
-//           type: "textarea",
-//         },
-//       ]}
-//       section={{
-//         className:
-//           "py-16 px-4 bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 dark:from-purple-500 dark:via-purple-600 dark:to-purple-700",
-//       }}
-//       container={{
-//         className: "max-w-4xl mx-auto",
-//       }}
-//       header={{
-//         className:
-//           "text-2xl md:text-3xl lg:text-4xl font-bold text-white dark:text-white text-center mb-4 font-outfit",
-//       }}
-//       subheader={{
-//         className:
-//           "text-base md:text-lg text-white dark:text-gray-200 text-center mb-8 px-4 md:px-14 font-inter leading-relaxed",
-//       }}
-//       form={{
-//         className:
-//           "bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg border border-purple-200 dark:border-purple-300",
-//       }}
-//       field={{
-//         className: "mb-6",
-//       }}
-//       label={{
-//         className:
-//           "text-gray-700 dark:text-white text-sm font-semibold mb-2 block font-inter",
-//       }}
-//       input={{
-//         className:
-//           "w-full p-3 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200",
-//       }}
-//       textarea={{
-//         className:
-//           "w-full p-3 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-vertical min-h-[120px] transition-all duration-200",
-//       }}
-//       submitButton={{
-//         text: "Start Your AI Journey",
-//         variant: "default",
-//         size: "lg",
-//         className:
-//           "w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold text-base shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-0",
-//       }}
-//       ariaLabel="Get started with IntelliOpAI contact form"
-//     />
-//   );
-// }
+// app/templates/productlaunch/componnets/Contact.tsx
+
+"use client";
+
+import React from "react";
+import {
+  Contact as SharedContact,
+  ContactField,
+} from "@/components/sections/Contact";
+
+/**
+ * A preset Contact component customized for the product launch page,
+ * using the shared Contact.tsx with predefined styles and content.
+ *
+ * Features:
+ * - "Get Started with IntelliOpAI" heading with custom typography
+ * - Purple-themed styling matching the brand
+ * - Custom form fields optimized for product launch
+ * - Responsive design with proper spacing
+ * - Dark mode support with consistent theming
+ * - Clean, modern design with hover effects
+ */
+const productLaunchContactFormData: ContactField[] = [
+  {
+    id: "name",
+    label: "Your Full Name",
+    placeholder: "John Doe",
+    required: true,
+    type: "text",
+  },
+  {
+    id: "email",
+    label: "Email Address",
+    placeholder: "you@example.com",
+    required: true,
+    type: "email",
+  },
+  {
+    id: "company",
+    label: "Company Name",
+    placeholder: "Your Company",
+    required: false,
+    type: "text",
+  },
+  {
+    id: "phone",
+    label: "Phone Number",
+    placeholder: "+1 (555) 123-4567",
+    required: false,
+    type: "tel",
+  },
+  {
+    id: "message",
+    label: "Tell us about your project",
+    placeholder: "Describe your business needs and how we can help...",
+    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 (
+    <SharedContact
+      id="contact"
+      fields={productLaunchContactFormData}
+      contactHeaderText="Get Started with IntelliOpAI"
+      contactSubHeaderText="Ready to revolutionize your workflow? Get in touch with our team to learn how our AI solutions can transform your business operations and drive growth."
+      // Root and layout
+      className="w-full"
+      section={{
+        className:
+          "py-16 px-4 bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 dark:from-purple-500 dark:via-purple-600 dark:to-purple-700",
+      }}
+      container={{
+        className: "mx-auto max-w-4xl",
+      }}
+      // Header slots
+      headerWrapper={{ className: "mb-4 text-center" }}
+      headerText={{
+        className:
+          "text-2xl md:text-3xl lg:text-4xl font-bold font-outfit text-white dark:text-white",
+      }}
+      subheaderText={{
+        className:
+          "text-base md:text-lg text-white dark:text-gray-200 text-center mb-8 px-4 md:px-14 font-inter leading-relaxed",
+      }}
+      // Form container
+      form={{
+        className:
+          "bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg border border-purple-200 dark:border-purple-300",
+      }}
+      // Fields wrapper and field item
+      fieldsWrapper={{ className: "space-y-6" }}
+      field={{ className: "space-y-2" }}
+      // Label + inputs
+      label={{
+        className:
+          "text-gray-700 dark:text-white text-sm font-semibold block font-inter",
+      }}
+      input={{
+        className:
+          "w-full p-3 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-0 focus:border-transparent transition-all duration-200",
+      }}
+      textarea={{
+        className:
+          "w-full p-3 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-0 focus:border-transparent resize-vertical min-h-[120px] transition-all duration-200",
+      }}
+      // Submit button (split: wrapper/style/text)
+      submitButtonWrapper={{ className: "pt-2" }}
+      submitButtonStyle={{
+        variant: "default",
+        size: "lg",
+        className:
+          "w-full font-semibold text-base shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-0 [--btn-bg:theme(colors.purple.600)] hover:[--btn-hover-bg:theme(colors.purple.700)] [--btn-fg:white] hover:[--btn-hover-fg:white] [--btn-border:transparent]",
+      }}
+      submitButtonText="Start Your AI Journey"
+      onSubmit={handleFormSubmit}
+      ariaLabel="Get started with IntelliOpAI contact form"
+    />
+  );
+}
+
+// "use client";
+
+// import { Contact as SharedContact } from "@/components/sections/Contact";
+
+// /**
+//  * A preset Contact component customized for the product launch page,
+//  * using the shared Contact.tsx with predefined styles and content.
+//  *
+//  * Features:
+//  * - "Get Started with IntelliOpAI" heading with custom typography
+//  * - Purple-themed styling matching the brand
+//  * - Custom form fields optimized for product launch
+//  * - Responsive design with proper spacing
+//  * - Dark mode support with consistent theming
+//  * - Clean, modern design with hover effects
+//  */
+// export function Contact() {
+//   return (
+//     <SharedContact
+//       contactHeaderText="Get Started with IntelliOpAI"
+//       contactSubHeaderText="Ready to revolutionize your workflow? Get in touch with our team to learn how our AI solutions can transform your business operations and drive growth."
+//       fields={[
+//         {
+//           id: "name",
+//           label: "Your Full Name",
+//           placeholder: "John Doe",
+//           required: true,
+//           type: "text",
+//         },
+//         {
+//           id: "email",
+//           label: "Email Address",
+//           placeholder: "you@example.com",
+//           required: true,
+//           type: "email",
+//         },
+//         {
+//           id: "company",
+//           label: "Company Name",
+//           placeholder: "Your Company",
+//           required: false,
+//           type: "text",
+//         },
+//         {
+//           id: "phone",
+//           label: "Phone Number",
+//           placeholder: "+1 (555) 123-4567",
+//           required: false,
+//           type: "tel",
+//         },
+//         {
+//           id: "message",
+//           label: "Tell us about your project",
+//           placeholder: "Describe your business needs and how we can help...",
+//           required: true,
+//           type: "textarea",
+//         },
+//       ]}
+//       section={{
+//         className:
+//           "py-16 px-4 bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 dark:from-purple-500 dark:via-purple-600 dark:to-purple-700",
+//       }}
+//       container={{
+//         className: "max-w-4xl mx-auto",
+//       }}
+//       header={{
+//         className:
+//           "text-2xl md:text-3xl lg:text-4xl font-bold text-white dark:text-white text-center mb-4 font-outfit",
+//       }}
+//       subheader={{
+//         className:
+//           "text-base md:text-lg text-white dark:text-gray-200 text-center mb-8 px-4 md:px-14 font-inter leading-relaxed",
+//       }}
+//       form={{
+//         className:
+//           "bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg border border-purple-200 dark:border-purple-300",
+//       }}
+//       field={{
+//         className: "mb-6",
+//       }}
+//       label={{
+//         className:
+//           "text-gray-700 dark:text-white text-sm font-semibold mb-2 block font-inter",
+//       }}
+//       input={{
+//         className:
+//           "w-full p-3 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200",
+//       }}
+//       textarea={{
+//         className:
+//           "w-full p-3 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-vertical min-h-[120px] transition-all duration-200",
+//       }}
+//       submitButton={{
+//         text: "Start Your AI Journey",
+//         variant: "default",
+//         size: "lg",
+//         className:
+//           "w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold text-base shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-0",
+//       }}
+//       ariaLabel="Get started with IntelliOpAI contact form"
+//     />
+//   );
+// }

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

@@ -1,86 +1,86 @@
-"use client";
-
-import { FAQ as SharedFAQ } from "@/components/sections/FAQ";
-import { ChevronDown, ChevronUp } from "lucide-react";
-
-/**
- * Preset FAQ component for the product launch page.
- */
-export function FAQ() {
-  return (
-    <SharedFAQ
-      faqSectionHeaderText="Frequently Asked Questions"
-      faqData={[
-        {
-          question: "What is IntelliOpAI and how does it work?",
-          answer:
-            "IntelliOpAI is an advanced AI-powered platform that automates business operations and provides real-time insights. Our system uses machine learning algorithms to analyze your data, streamline workflows, and help you make smarter decisions faster.",
-        },
-        {
-          question: "Do I need technical expertise to use IntelliOpAI?",
-          answer:
-            "Not at all! IntelliOpAI is designed with a user-friendly interface that requires no coding knowledge. Our intuitive dashboard and guided setup process make it easy for anyone to get started, regardless of their technical background.",
-        },
-        {
-          question: "How does IntelliOpAI integrate with my existing systems?",
-          answer:
-            "IntelliOpAI offers seamless integration with popular business tools and platforms through our robust API and pre-built connectors. We support integration with CRM systems, databases, cloud services, and more to ensure a smooth transition.",
-        },
-        {
-          question: "What kind of support do you provide?",
-          answer:
-            "We offer comprehensive 24/7 support including live chat, email support, and dedicated account managers for enterprise clients. Our team of AI experts is always ready to help you maximize the value of your IntelliOpAI implementation.",
-        },
-        {
-          question: "Is my data secure with IntelliOpAI?",
-          answer:
-            "Absolutely. We implement enterprise-grade security measures including end-to-end encryption, SOC 2 compliance, and regular security audits. Your data is protected with the highest industry standards and we never share your information with third parties.",
-        },
-        {
-          question: "Can IntelliOpAI scale with my business growth?",
-          answer:
-            "Yes! IntelliOpAI is built to scale with your business. Our flexible architecture can handle everything from small startups to large enterprises, automatically adjusting resources and capabilities as your needs evolve.",
-        },
-      ]}
-      section={{
-        className:
-          "py-16 px-5 bg-white dark:bg-black text-gray-800 dark:text-white",
-      }}
-      container={{
-        className: "max-w-6xl mx-auto",
-      }}
-      heading={{
-        className:
-          "text-2xl md:text-3xl lg:text-4xl font-bold text-center mb-8 text-gray-800 dark:text-white font-outfit",
-      }}
-      grid={{
-        className: "grid grid-cols-1 lg:grid-cols-2 gap-6 px-5 py-8",
-      }}
-      item={{
-        className: "mb-6 w-full",
-      }}
-      questionButton={{
-        className:
-          "bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white p-5 cursor-pointer rounded-lg transition-all duration-200 flex items-center justify-between shadow-lg hover:shadow-xl hover:shadow-purple-500/30 hover:-translate-y-0.5 font-inter " +
-          // Define the ring and border CSS vars
-          "[--btn-ring:theme(colors.purple.500)] dark:[--btn-ring:theme(colors.purple.400)] " +
-          "[--btn-border:theme(colors.purple.500)] dark:[--btn-border:theme(colors.purple.400)] " +
-          // Ensure mouse focus uses ring color too
-          "focus:ring-[var(--btn-ring)]",
-      }}
-      // Question text styles inherits from button
-      questionText={{ className: "" }}
-      chevronIcon={{
-        className: "h-6 w-6 transition-transform duration-200 flex-shrink-0",
-      }}
-      openIcon={<ChevronUp className="h-6 w-6" />}
-      closedIcon={<ChevronDown className="h-6 w-6" />}
-      answer={{
-        className:
-          "bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-white rounded-lg overflow-hidden border border-purple-200 dark:border-purple-800 shadow-md",
-      }}
-      answerText={{ className: "p-5" }}
-      ariaLabel="IntelliOpAI frequently asked questions"
-    />
-  );
-}
+"use client";
+
+import { FAQ as SharedFAQ } from "@/components/sections/FAQ";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+/**
+ * Preset FAQ component for the product launch page.
+ */
+export function FAQ() {
+  return (
+    <SharedFAQ
+      faqSectionHeaderText="Frequently Asked Questions"
+      faqData={[
+        {
+          question: "What is IntelliOpAI and how does it work?",
+          answer:
+            "IntelliOpAI is an advanced AI-powered platform that automates business operations and provides real-time insights. Our system uses machine learning algorithms to analyze your data, streamline workflows, and help you make smarter decisions faster.",
+        },
+        {
+          question: "Do I need technical expertise to use IntelliOpAI?",
+          answer:
+            "Not at all! IntelliOpAI is designed with a user-friendly interface that requires no coding knowledge. Our intuitive dashboard and guided setup process make it easy for anyone to get started, regardless of their technical background.",
+        },
+        {
+          question: "How does IntelliOpAI integrate with my existing systems?",
+          answer:
+            "IntelliOpAI offers seamless integration with popular business tools and platforms through our robust API and pre-built connectors. We support integration with CRM systems, databases, cloud services, and more to ensure a smooth transition.",
+        },
+        {
+          question: "What kind of support do you provide?",
+          answer:
+            "We offer comprehensive 24/7 support including live chat, email support, and dedicated account managers for enterprise clients. Our team of AI experts is always ready to help you maximize the value of your IntelliOpAI implementation.",
+        },
+        {
+          question: "Is my data secure with IntelliOpAI?",
+          answer:
+            "Absolutely. We implement enterprise-grade security measures including end-to-end encryption, SOC 2 compliance, and regular security audits. Your data is protected with the highest industry standards and we never share your information with third parties.",
+        },
+        {
+          question: "Can IntelliOpAI scale with my business growth?",
+          answer:
+            "Yes! IntelliOpAI is built to scale with your business. Our flexible architecture can handle everything from small startups to large enterprises, automatically adjusting resources and capabilities as your needs evolve.",
+        },
+      ]}
+      section={{
+        className:
+          "py-16 px-5 bg-white dark:bg-black text-gray-800 dark:text-white",
+      }}
+      container={{
+        className: "max-w-6xl mx-auto",
+      }}
+      heading={{
+        className:
+          "text-2xl md:text-3xl lg:text-4xl font-bold text-center mb-8 text-gray-800 dark:text-white font-outfit",
+      }}
+      grid={{
+        className: "grid grid-cols-1 lg:grid-cols-2 gap-6 px-5 py-8",
+      }}
+      item={{
+        className: "mb-6 w-full",
+      }}
+      questionButton={{
+        className:
+          "bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white p-5 cursor-pointer rounded-lg transition-all duration-200 flex items-center justify-between shadow-lg hover:shadow-xl hover:shadow-purple-500/30 hover:-translate-y-0.5 font-inter " +
+          // Define the ring and border CSS vars
+          "[--btn-ring:theme(colors.purple.500)] dark:[--btn-ring:theme(colors.purple.400)] " +
+          "[--btn-border:theme(colors.purple.500)] dark:[--btn-border:theme(colors.purple.400)] " +
+          // Ensure mouse focus uses ring color too
+          "focus:ring-[var(--btn-ring)]",
+      }}
+      // Question text styles inherits from button
+      questionText={{ className: "" }}
+      chevronIcon={{
+        className: "h-6 w-6 transition-transform duration-200 flex-shrink-0",
+      }}
+      openIcon={<ChevronUp className="h-6 w-6" />}
+      closedIcon={<ChevronDown className="h-6 w-6" />}
+      answer={{
+        className:
+          "bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-white rounded-lg overflow-hidden border border-purple-200 dark:border-purple-800 shadow-md",
+      }}
+      answerText={{ className: "p-5" }}
+      ariaLabel="IntelliOpAI frequently asked questions"
+    />
+  );
+}