@luxonis/component-lib 1.1.1 → 1.1.3

package/dist/index.js

@@ -134,6 +134,7 @@ __export(index_exports, {
   showcaseMail: () => showcaseMail,
   showcaseMailClean: () => showcaseMailClean,
   status: () => status,
+  stereoTuningAssistance: () => stereoTuningAssistance,
   store: () => store,
   supportForm: () => supportForm,
   supportMail: () => supportMail,
@@ -141,6 +142,8 @@ __export(index_exports, {
   techcrunch: () => techcrunch,
   termsOfService: () => termsOfService,
   twitter: () => twitter,
+  useChat: () => useChat,
+  useChatContext: () => useChatContext,
   useRudderStackAnalytics: () => useRudderStackAnalytics,
   youtube: () => youtube
 });
@@ -728,7 +731,7 @@ var DescriptionRecepie = (0, import_class_variance_authority7.cva)("flex flex-co
       left: "items-start",
       right: "items-end",
       leftCenterMobile: "items-start sm:items-center",
-      desktopCenterMobileLeft: "w-full items-start !text-left sm:items-center sm:!text-center",
+      desktopCenterMobileLeft: "w-full items-start !text-left sm:!items-center sm:!text-center",
       desktopLeftMobileCenter: "w-full items-center !text-center lg:items-start lg:!text-left"
     },
     gap: {
@@ -819,6 +822,9 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 var Hero = (props) => {
   const { title, description, button, bgImageLink, desctipionSize = "default" } = props;
   const descriptionSize = () => {
+    if (!description) {
+      return "";
+    }
     if (desctipionSize === "lg") {
       return (0, import_class_variance_authority9.cx)("lg:max-w-[525px] max-w-96");
     }
@@ -837,7 +843,7 @@ var Hero = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "page-card-content  relative  size-full h-[810px] w-full sm:h-[914px]", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: " absolute inset-x-0 bottom-10 mx-auto flex w-full flex-col items-center  justify-between gap-4 md:flex-row md:items-end ", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex w-full flex-row justify-center text-white md:justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { text: title, size: "h1", className: "z-[2] w-96 text-h4 sm:text-h4 xl:w-auto xl:text-h1" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: (0, import_class_variance_authority9.cx)("flex flex-col gap-8 md:gap-6 z-[2]", descriptionSize()), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { text: description, color: "white", size: "lg" }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { text: description, color: "white", size: "lg" }),
             button
           ] })
         ] }) }),
@@ -1196,62 +1202,101 @@ var Textarea = React12.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/Video.tsx
+var import_react_full_screen = require("react-full-screen");
 var import_react10 = require("react");
+var import_class_variance_authority18 = require("class-variance-authority");
+var import_react11 = require("@iconify/react");
+var import_react_intersection_observer = require("react-intersection-observer");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Video = (0, import_react10.forwardRef)(({ src, className }, ref) => {
+function Video(props) {
+  const {
+    src,
+    buttonPlay,
+    buttonRepeat,
+    className,
+    wrapperClassName,
+    autoPlayInView,
+    buttonFullscreen,
+    ...rest
+  } = props;
   const videoRef = (0, import_react10.useRef)(null);
-  const [isPlaying, setIsPlaying] = (0, import_react10.useState)(false);
-  (0, import_react10.useImperativeHandle)(ref, () => ({
-    togglePlay: () => {
-      if (videoRef.current) {
-        if (videoRef.current.paused) {
-          videoRef.current.play();
-          setIsPlaying(true);
-        } else {
-          videoRef.current.pause();
-          setIsPlaying(false);
-        }
-      }
-    }
-  }));
+  const { ref, inView } = (0, import_react_intersection_observer.useInView)({});
+  const [isPlaying, setIsPlaying] = (0, import_react10.useState)(true);
   const setPlaying = () => {
-    if (videoRef.current) {
-      if (videoRef.current.paused) {
-        videoRef.current.play();
-        setIsPlaying(true);
-      } else {
-        videoRef.current.pause();
-        setIsPlaying(false);
-      }
+    if (isPlaying) {
+      videoRef.current?.pause();
+      setIsPlaying(false);
+      return;
     }
+    setIsPlaying(true);
+    videoRef.current?.play();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `relative ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("video", { onClick: setPlaying, ref: videoRef, className: "size-full object-cover", src, loop: true, children: "Your browser does not support the video tag." }),
-    !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      Button,
+  (0, import_react10.useEffect)(() => {
+    if (autoPlayInView && inView) {
+      videoRef.current?.play();
+    }
+  }, [autoPlayInView, inView]);
+  const setStart = () => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.pause();
+    v.currentTime = 0;
+    void v.play();
+  };
+  const handle = (0, import_react_full_screen.useFullScreenHandle)();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_full_screen.FullScreen, { handle, className: `flex items-center justify-center `, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: (0, import_class_variance_authority18.cx)("relative size-full", handle.active ? "!max-h-none" : "", wrapperClassName), ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "video",
       {
-        variant: "icon",
-        icon: "mdi:play",
-        role: "icon",
+        ...rest,
         onClick: () => setPlaying(),
-        className: "absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white p-2 shadow-md"
+        ref: videoRef,
+        className: (0, import_class_variance_authority18.cx)("size-full object-cover", className, handle.active ? "!max-h-none" : ""),
+        src,
+        children: "Your browser does not support the video tag."
       }
-    )
-  ] });
-});
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute  bottom-2 right-2 z-10 flex items-center justify-center gap-2", children: [
+      buttonRepeat && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          className: " flex size-10 items-center justify-center rounded-full bg-black/50 text-white",
+          onClick: () => setStart(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react11.Icon, { icon: "fa:repeat", className: "" })
+        }
+      ),
+      buttonPlay && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          className: " flex size-10 items-center justify-center rounded-full bg-black/50 p-1.5 text-white",
+          onClick: () => setPlaying(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react11.Icon, { icon: isPlaying ? "mdi:pause" : "mdi:play", className: "" })
+        }
+      ),
+      buttonFullscreen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          className: " flex size-10 items-center justify-center rounded-full bg-black/50 p-1.5 text-white",
+          onClick: () => handle.active ? handle.exit() : handle.enter(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react11.Icon, { icon: handle.active ? "mdi:fullscreen-exit" : "mdi:fullscreen", className: "" })
+        }
+      )
+    ] })
+  ] }) });
+}
 Video.displayName = "Video";
 
 // src/Checkbox.tsx
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
-var import_class_variance_authority18 = require("class-variance-authority");
-var import_react11 = require("@iconify/react");
+var import_class_variance_authority19 = require("class-variance-authority");
+var import_react12 = require("@iconify/react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function Checkbox({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
-      className: (0, import_class_variance_authority18.cx)(
+      className: (0, import_class_variance_authority19.cx)(
         "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
@@ -1261,7 +1306,7 @@ function Checkbox({ className, ...props }) {
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center text-current transition-none",
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react11.Icon, { className: "size-3.5 text-white", icon: "lucide:check" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react12.Icon, { className: "size-3.5 text-white", icon: "lucide:check" })
         }
       )
     }
@@ -1269,25 +1314,25 @@ function Checkbox({ className, ...props }) {
 }
 
 // src/DualRangeSlider.tsx
-var React14 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
-var import_class_variance_authority19 = require("class-variance-authority");
+var import_class_variance_authority20 = require("class-variance-authority");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var DualRangeSlider = React14.forwardRef(
+var DualRangeSlider = React13.forwardRef(
   ({ className, label, labelPosition = "top", ...props }, ref) => {
     const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max];
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       SliderPrimitive.Root,
       {
         ref,
-        className: (0, import_class_variance_authority19.cx)("relative flex w-full touch-none select-none items-center", className),
+        className: (0, import_class_variance_authority20.cx)("relative flex w-full touch-none select-none items-center", className),
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-          initialValue.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(React14.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SliderPrimitive.Thumb, { className: "ring-offset-background focus-visible:ring-ring relative block size-4 rounded-full border-2 border-primary bg-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", children: label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          initialValue.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(React13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SliderPrimitive.Thumb, { className: "ring-offset-background focus-visible:ring-ring relative block size-4 rounded-full border-2 border-primary bg-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", children: label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "span",
             {
-              className: (0, import_class_variance_authority19.cx)(
+              className: (0, import_class_variance_authority20.cx)(
                 "absolute flex w-full justify-center",
                 labelPosition === "top" && "-top-7",
                 labelPosition === "bottom" && "top-4"
@@ -1303,13 +1348,13 @@ var DualRangeSlider = React14.forwardRef(
 DualRangeSlider.displayName = "DualRangeSlider";
 
 // src/LuxonisChat.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_markdown_it = __toESM(require("markdown-it"));
-var import_react13 = require("@iconify/react");
+var import_react14 = require("@iconify/react");
 
 // src/Tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var import_class_variance_authority20 = require("class-variance-authority");
+var import_class_variance_authority21 = require("class-variance-authority");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function TooltipProvider({ delayDuration = 0, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration, ...props });
@@ -1331,7 +1376,7 @@ function TooltipContent({
     {
       "data-slot": "tooltip-content",
       sideOffset,
-      className: (0, import_class_variance_authority20.cx)(
+      className: (0, import_class_variance_authority21.cx)(
         "bg-white text-black   shadow-md shadow-secondaryBorder animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
         className
       ),
@@ -1348,11 +1393,11 @@ function TooltipContent({
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function ChatButton(props) {
   const { chatOpened, setChatOpened, messageFromSearch, setMessageFromSearch } = props;
-  const [hold, setHold] = (0, import_react12.useState)(false);
-  const [iconKey, setIconKey] = (0, import_react12.useState)(0);
-  const [loading, setLoading] = (0, import_react12.useState)(false);
-  const [userInput, setUserInput] = (0, import_react12.useState)("");
-  const [messages, setMessages] = (0, import_react12.useState)([
+  const [hold, setHold] = (0, import_react13.useState)(false);
+  const [iconKey, setIconKey] = (0, import_react13.useState)(0);
+  const [loading, setLoading] = (0, import_react13.useState)(false);
+  const [userInput, setUserInput] = (0, import_react13.useState)("");
+  const [messages, setMessages] = (0, import_react13.useState)([
     {
       id: -1,
       user: "bot",
@@ -1360,10 +1405,10 @@ function ChatButton(props) {
       loading: false
     }
   ]);
-  const [slackThreadTs, setSlackThreadTs] = (0, import_react12.useState)(null);
-  const inputRef = (0, import_react12.useRef)(null);
-  const messageListRef = (0, import_react12.useRef)(null);
-  const formRef = (0, import_react12.useRef)(null);
+  const [slackThreadTs, setSlackThreadTs] = (0, import_react13.useState)(null);
+  const inputRef = (0, import_react13.useRef)(null);
+  const messageListRef = (0, import_react13.useRef)(null);
+  const formRef = (0, import_react13.useRef)(null);
   const loadingMessages = [
     "Please wait...",
     "Hold on...",
@@ -1376,7 +1421,7 @@ function ChatButton(props) {
     "Almost there...",
     "Please hold on..."
   ];
-  const fetchData = (0, import_react12.useCallback)(
+  const fetchData = (0, import_react13.useCallback)(
     async (message) => {
       try {
         const response = await fetch("https://chat.luxonis.com/api/chat", {
@@ -1411,7 +1456,7 @@ function ChatButton(props) {
     },
     [messages, slackThreadTs]
   );
-  const onSubmit = (0, import_react12.useCallback)(
+  const onSubmit = (0, import_react13.useCallback)(
     async (e) => {
       e?.preventDefault();
       if (userInput.trim() !== "") {
@@ -1446,7 +1491,7 @@ function ChatButton(props) {
     },
     [userInput, messages, fetchData, setMessageFromSearch, setLoading]
   );
-  const handleEnter = (0, import_react12.useCallback)(
+  const handleEnter = (0, import_react13.useCallback)(
     (e) => {
       if (e.key === "Enter" && userInput.trim() !== "") {
         if (!e.shiftKey && userInput.trim() !== "") {
@@ -1459,13 +1504,13 @@ function ChatButton(props) {
     },
     [userInput, onSubmit]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (messageListRef.current) {
       const messageList = messageListRef.current;
       messageList.scrollTop = messageList.scrollHeight;
     }
   }, [messages]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     async function fetchSearchQuery() {
       setUserInput(`Can you tell me about ${messageFromSearch}`);
       await onSubmit(void 0);
@@ -1506,7 +1551,7 @@ function ChatButton(props) {
                       animationTimingFunction: "ease-in"
                     },
                     className: "flex size-full items-center justify-center",
-                    children: chatOpened ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react13.Icon, { icon: "mdi:close", className: "size-[32px] text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: "https://docs.luxonis.com/static/images/icons/chat-icon.svg", width: "32", height: "32", alt: "Chat" })
+                    children: chatOpened ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react14.Icon, { icon: "mdi:close", className: "size-[32px] text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: "https://docs.luxonis.com/static/images/icons/chat-icon.svg", width: "32", height: "32", alt: "Chat" })
                   },
                   iconKey
                 )
@@ -1516,7 +1561,7 @@ function ChatButton(props) {
               /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex h-8 flex-row  justify-between gap-2", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("h2", { className: "relative text-2xl", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { target: "_blank", rel: "noopener noreferrer", href: "https://chat.luxonis.com", children: "Chat with Luxonis AI" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react13.Icon, { icon: "mingcute:ai-fill", className: "absolute -right-4 -top-2 size-5 text-primary" })
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react14.Icon, { icon: "mingcute:ai-fill", className: "absolute -right-4 -top-2 size-5 text-primary" })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex  flex-row items-center justify-end ", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tooltip, { children: [
@@ -1538,7 +1583,7 @@ function ChatButton(props) {
                           setSlackThreadTs(null);
                         },
                         children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                          import_react13.Icon,
+                          import_react14.Icon,
                           {
                             icon: "fluent:chat-add-16-regular",
                             className: loading ? "text-black/40" : "text-primary",
@@ -1557,7 +1602,7 @@ function ChatButton(props) {
                         setChatOpened(false);
                         setMessageFromSearch("");
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react13.Icon, { icon: "mdi:close", className: "text-black", width: 32, height: 32 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react14.Icon, { icon: "mdi:close", className: "text-black", width: 32, height: 32 })
                     }
                   )
                 ] })
@@ -1613,7 +1658,7 @@ function ChatButton(props) {
                         name: "sendButton",
                         variant: "primary",
                         className: "!size-10  !p-2 " + (loading || inputRef.current?.value.length === 0 ? "bg-gray-100 transition-colors cursor-not-allowed" : "bg-primary cursor-pointer"),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react13.Icon, { icon: "mdi:send", className: "!text-white" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react14.Icon, { icon: "mdi:send", className: "!text-white" })
                       }
                     ) })
                   ]
@@ -1632,7 +1677,7 @@ var ChatMessage = (props) => {
     {
       className: `flex h-fit w-full gap-2 ${props.user === "bot" ? props.loading ? "bg-gray-100 transition-colors" : "bg-gray-100" : "bg-white"}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex min-h-10 min-w-10 items-start overflow-x-auto pl-2 pt-1.5 ", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-center pb-1.5", children: props.user === "user" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react13.Icon, { icon: "mdi:account", className: "h-[38px] w-[32px]" }) : props.loading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: "https://static.luxonis.com/images/chatbot.webp", width: "32", height: "32", alt: "Chatbot Icon" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: "https://static.luxonis.com/images/chatbot.webp", width: "32", height: "32", alt: "Chatbot Icon" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex min-h-10 min-w-10 items-start overflow-x-auto pl-2 pt-1.5 ", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-center pb-1.5", children: props.user === "user" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react14.Icon, { icon: "mdi:account", className: "h-[38px] w-[32px]" }) : props.loading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: "https://static.luxonis.com/images/chatbot.webp", width: "32", height: "32", alt: "Chatbot Icon" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: "https://static.luxonis.com/images/chatbot.webp", width: "32", height: "32", alt: "Chatbot Icon" }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
@@ -1654,14 +1699,14 @@ var ChatMessage = (props) => {
 // src/Tabs.tsx
 var React15 = __toESM(require("react"));
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
-var import_class_variance_authority21 = require("class-variance-authority");
+var import_class_variance_authority22 = require("class-variance-authority");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Tabs = TabsPrimitive.Root;
 var TabsList = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   TabsPrimitive.List,
   {
     ref,
-    className: (0, import_class_variance_authority21.cx)(
+    className: (0, import_class_variance_authority22.cx)(
       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
       className
     ),
@@ -1673,7 +1718,7 @@ var TabsTrigger = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   TabsPrimitive.Trigger,
   {
     ref,
-    className: (0, import_class_variance_authority21.cx)(
+    className: (0, import_class_variance_authority22.cx)(
       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className
     ),
@@ -1685,7 +1730,7 @@ var TabsContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   TabsPrimitive.Content,
   {
     ref,
-    className: (0, import_class_variance_authority21.cx)(
+    className: (0, import_class_variance_authority22.cx)(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     ),
@@ -1697,13 +1742,13 @@ TabsContent.displayName = TabsPrimitive.Content.displayName;
 // src/ProgressBar.tsx
 var React16 = __toESM(require("react"));
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"));
-var import_class_variance_authority22 = require("class-variance-authority");
+var import_class_variance_authority23 = require("class-variance-authority");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var Progress = React16.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   ProgressPrimitive.Root,
   {
     ref,
-    className: (0, import_class_variance_authority22.cx)("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className),
+    className: (0, import_class_variance_authority23.cx)("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className),
     ...props,
     children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       ProgressPrimitive.Indicator,
@@ -1717,8 +1762,8 @@ var Progress = React16.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/EdgeSlideshow.tsx
-var import_react14 = require("react");
-var import_react_intersection_observer = require("react-intersection-observer");
+var import_react15 = require("react");
+var import_react_intersection_observer2 = require("react-intersection-observer");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var slides = [
   "ai-performance",
@@ -1905,8 +1950,8 @@ function EdgeSlideshowHeader() {
 }
 function EdgeSlideshowNav(props) {
   const { activeSlide, setActiveSlide, autoscrolling, inView } = props;
-  const [progress, setProgress] = (0, import_react14.useState)(0);
-  (0, import_react14.useEffect)(() => {
+  const [progress, setProgress] = (0, import_react15.useState)(0);
+  (0, import_react15.useEffect)(() => {
     let intervalId;
     const startTime = Date.now();
     if (autoscrolling && inView) {
@@ -1974,10 +2019,10 @@ function EdgeSlideshowText(props) {
   ] });
 }
 function EdgeSlideshow() {
-  const [activeSlide, setActiveSlide] = (0, import_react14.useState)("ai-performance");
-  const [autoscrolling, setAutoscrolling] = (0, import_react14.useState)(true);
-  const { ref, inView } = (0, import_react_intersection_observer.useInView)({});
-  (0, import_react14.useEffect)(() => {
+  const [activeSlide, setActiveSlide] = (0, import_react15.useState)("ai-performance");
+  const [autoscrolling, setAutoscrolling] = (0, import_react15.useState)(true);
+  const { ref, inView } = (0, import_react_intersection_observer2.useInView)({});
+  (0, import_react15.useEffect)(() => {
     let intervalId;
     if (inView) {
       intervalId = window.setInterval(() => {
@@ -2016,7 +2061,7 @@ function EdgeSlideshow() {
 }
 
 // src/StereoDepthCalibration.tsx
-var import_react15 = require("@iconify/react");
+var import_react16 = require("@iconify/react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var cards = [
   {
@@ -2083,7 +2128,7 @@ function StereoDepthCalibrationFooter() {
 }
 function StereoDepthCalibrationFooterCard(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(FrostedCard, { className: "flex h-full flex-col items-start justify-start gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react15.Icon, { icon: props.icon, width: 32, height: 32, className: "card-icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react16.Icon, { icon: props.icon, width: 32, height: 32, className: "card-icon" }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { text: props.title, size: "lg", color: "white", weight: "semibold" }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { text: props.text, size: "sm", color: "white" })
   ] });
@@ -2102,7 +2147,7 @@ function StereoDepthCalibration() {
 }
 
 // src/Support.tsx
-var import_class_variance_authority23 = require("class-variance-authority");
+var import_class_variance_authority24 = require("class-variance-authority");
 
 // src/links.ts
 var github = "https://github.com/luxonis/";
@@ -2132,6 +2177,7 @@ var applyMailClean = "careers@luxonis.com";
 var showcaseMail = "mailto:support@luxonis.com";
 var showcaseMailClean = "support@luxonis.com";
 var blog = "https://discuss.luxonis.com/blog";
+var stereoTuningAssistance = "/stereo-tuning-assistance";
 var privacy = "/privacy";
 var termsOfService = "/terms-of-service";
 var aboutUs = "/about-us";
@@ -2160,15 +2206,45 @@ function TalkToSalesButton() {
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("a", { href: contactLink, target: "_blank", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { variant: "secondary", color: "white", role: "continue", children: "Talk to Sales" }) });
 }
 
-// src/ContactUsForm.tsx
-var import_zod = require("zod");
-var import_react17 = __toESM(require("react"));
+// src/Support.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Support = (props) => {
+  const { variant = "fullpage", text } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "page-card page-padding", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    Card,
+    {
+      variant,
+      outerStyles: "h-full",
+      className: (0, import_class_variance_authority24.cx)(
+        "page-card-content mx-auto flex w-full h-full flex-col gap-x-20 gap-y-4 justify-between overflow-hidden bg-gradient-stereo-depth   xl:p-8  xl:flex-row py-8 px-4"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col items-center gap-8  text-white xl:w-fit xl:items-start xl:gap-10 xl:px-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col items-center gap-4 text-white xl:items-start xl:gap-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { size: "h2", text: text ?? "Need More Help?", className: "text-center xl:text-left" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            Text,
+            {
+              size: "lg",
+              text: "Our dedicated team is available for technical support, business solutions, and more. Let us provide the help you need.",
+              className: "w-full  text-center xl:text-left"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-fit flex-col items-center gap-4 md:flex-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TalkToSalesButton, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: "https://chat.luxonis.com", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { size: "lg", variant: "secondary", role: "continue", children: "Get Instant Support" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("a", { href: supportMail, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { size: "lg", variant: "secondary", role: "continue", children: "Support via Email" }) })
+        ] })
+      ] })
+    }
+  ) });
+};
 
 // src/useRudderAnalytics.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var useRudderStackAnalytics = () => {
-  const [analytics, setAnalytics] = (0, import_react16.useState)();
-  (0, import_react16.useEffect)(() => {
+  const [analytics, setAnalytics] = (0, import_react17.useState)();
+  (0, import_react17.useEffect)(() => {
     if (!analytics) {
       const initialize = async () => {
         const { RudderAnalytics } = await import("@rudderstack/analytics-js");
@@ -2195,7 +2271,9 @@ var useRudderStackAnalytics = () => {
 };
 
 // src/ContactUsForm.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_zod = require("zod");
+var import_react18 = __toESM(require("react"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var formSchema = import_zod.z.object({
   name: import_zod.z.string().min(1),
   company: import_zod.z.string().min(1),
@@ -2204,9 +2282,9 @@ var formSchema = import_zod.z.object({
   inquiry: import_zod.z.string().min(1)
 });
 function ContactUsForm() {
-  const [formSubmitted, setFormSubmitted] = import_react17.default.useState(false);
-  const [formHasError, setFormHasError] = import_react17.default.useState(false);
-  const [formIsLoading, setFormIsLoading] = import_react17.default.useState(false);
+  const [formSubmitted, setFormSubmitted] = import_react18.default.useState(false);
+  const [formHasError, setFormHasError] = import_react18.default.useState(false);
+  const [formIsLoading, setFormIsLoading] = import_react18.default.useState(false);
   const analytics = useRudderStackAnalytics();
   const handleSubmit = (event) => {
     event.preventDefault();
@@ -2263,7 +2341,7 @@ function ContactUsForm() {
     setFormSubmitted(true);
   };
   if (formSubmitted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "m-auto flex size-full  h-[456px]  flex-col items-center justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "m-auto flex size-full  h-[456px]  flex-col items-center justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       Text,
       {
         size: "h4",
@@ -2273,107 +2351,80 @@ function ContactUsForm() {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("form", { id: "contact-form-anchor", className: "flex w-full flex-col gap-6  text-white", onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col gap-6 lg:flex-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { className: "font-normal", htmlFor: "name", children: "Name *" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Input, { type: "text", id: "name", placeholder: "E.g. Hanna Johns" })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("form", { id: "contact-form-anchor", className: "flex w-full flex-col gap-6  text-white", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full flex-col gap-6 lg:flex-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Label, { className: "font-normal", htmlFor: "name", children: "Name *" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Input, { type: "text", id: "name", placeholder: "E.g. Hanna Johns" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { className: "font-normal", htmlFor: "Company", children: "Company *" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Input, { type: "text", id: "company", placeholder: "E.g. Hanna" })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Label, { className: "font-normal", htmlFor: "Company", children: "Company *" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Input, { type: "text", id: "company", placeholder: "E.g. Hanna" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { className: "font-normal", htmlFor: "email", children: "E-mail *" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Input, { type: "email", id: "email", placeholder: "E.g. info@email.com" })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Label, { className: "font-normal", htmlFor: "email", children: "E-mail *" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Input, { type: "email", id: "email", placeholder: "E.g. info@email.com" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { className: "font-normal", htmlFor: "inquiry", children: "Type of Inquiry *" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Select, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectTrigger, { className: "h-[48px] bg-white text-black ", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectValue, { id: "inquiry", placeholder: "Select..." }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(SelectContent, { className: "bg-white", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectItem, { value: "Hub assistance", children: "Hub assistance" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectItem, { value: "hardware-issue", children: "Hardware issue" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectItem, { value: "support", children: "Support" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectItem, { value: "training", children: "Training" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectItem, { value: "other", children: "Other" })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Label, { className: "font-normal", htmlFor: "inquiry", children: "Type of Inquiry *" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Select, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectTrigger, { className: "h-[48px] bg-white text-black ", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectValue, { id: "inquiry", placeholder: "Select..." }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(SelectContent, { className: "bg-white", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "Hub assistance", children: "Hub assistance" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "hardware-issue", children: "Hardware issue" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "support", children: "Support" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "training", children: "Training" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "other", children: "Other" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { className: "font-normal", htmlFor: "message", children: "Message *" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Input, { type: "text", id: "message", placeholder: "Type..." })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Label, { className: "font-normal", htmlFor: "message", children: "Message *" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Input, { type: "text", id: "message", placeholder: "Type..." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row items-center justify-start gap-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { type: "submit", variant: "secondary", size: "lg", role: "continue", className: "w-fit", children: formIsLoading ? "Submitting..." : "Submit" }),
-      formHasError && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { text: "Please fill out all fields", color: "error", size: "xl" })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row items-center justify-start gap-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { type: "submit", variant: "secondary", size: "lg", role: "continue", className: "w-fit", children: formIsLoading ? "Submitting..." : "Submit" }),
+      formHasError && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { text: "Please fill out all fields", color: "error", size: "xl" })
     ] })
   ] });
 }
 
-// src/Support.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var Support = (props) => {
-  const { variant = "fullpage", text } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "page-card page-padding", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-    Card,
-    {
-      variant,
-      outerStyles: "h-full",
-      className: (0, import_class_variance_authority23.cx)(
-        "page-card-content mx-auto flex w-full h-full flex-col gap-x-20 gap-y-4 justify-between overflow-hidden bg-gradient-stereo-depth pt-12  xl:p-8  xl:flex-row"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full flex-col items-center gap-8 px-4 text-white xl:w-fit xl:items-start xl:gap-10 xl:px-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full flex-col items-center gap-4 text-white xl:items-start xl:gap-6", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { size: "h2", text: text ?? "Need More Help?", className: "max-w-[650px] text-center xl:text-left" }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-              Text,
-              {
-                size: "lg",
-                text: "Our dedicated team is available for technical support, business solutions, and more. Let us provide the help you need.",
-                className: "w-full max-w-105 text-center xl:text-left"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-fit flex-col gap-4 md:flex-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TalkToSalesButton, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("a", { href: "https://chat.luxonis.com", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { size: "lg", variant: "secondary", role: "continue", children: "Get Instant Support" }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-full p-4 xl:p-0", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FrostedCard, { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ContactUsForm, {}) }) })
-      ]
-    }
-  ) });
-};
-
 // src/ContactUs.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var ContactUsSection = (props) => {
   const {
-    title = "Let\u2019s Build \n the Future of \n Vision Together",
+    title = "Let\u2019s Build  the Future of  Vision Together",
     description = "Our dedicated team is available for technical support, business solutions, and more. Let us provide the help you need."
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("section", { id: "contact-us", className: "page-card page-padding", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("section", { className: "page-card-content flex flex-col gap-8 rounded-lg p-4 pt-12 [background:radial-gradient(416.66%_106.71%_at_76.3%_37.11%,#5724E8_0%,#000_100%),#000] md:p-12 lg:flex-row  lg:justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      Description,
-      {
-        title,
-        align: "left",
-        textStyle: "max-w-none w-fit lg:max-w-auto  lg:justify-start justify-center lg:text-left text-center",
-        wrapperClassName: "lg:items-start items-center lg:text-left text-center flex",
-        description,
-        className: "text-white ",
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex w-full max-w-[500px] flex-col flex-wrap items-center gap-4 lg:flex-row lg:justify-start", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: "https://hub.luxonis.com", target: "_blank", className: "w-fit", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "secondary", size: "lg", role: "continue", className: "w-full", children: "Start for Free" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TalkToSalesButton, {})
-        ] })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FrostedCard, { className: "!p-6", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ContactUsForm, {}) })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("section", { id: "contact-us", className: "page-card page-padding", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("section", { className: "page-card-content flex flex-col gap-8 rounded-lg px-4 py-8 [background:radial-gradient(416.66%_106.71%_at_76.3%_37.11%,#5724E8_0%,#000_100%),#000] md:p-12 lg:flex-row lg:justify-between  xl:p-8", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    Description,
+    {
+      title,
+      align: "left",
+      textStyle: "max-w-none w-fit lg:max-w-none  lg:justify-start justify-center lg:text-left text-center",
+      wrapperClassName: "lg:items-start items-center lg:text-left text-center flex",
+      description,
+      className: "text-white ",
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex w-full  flex-col flex-wrap items-center gap-4 lg:flex-row lg:justify-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: "https://hub.luxonis.com", target: "_blank", className: "w-fit", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "secondary", size: "lg", role: "continue", className: "w-full", children: "Start for Free" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TalkToSalesButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: supportMail, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { size: "lg", variant: "secondary", role: "continue", children: "Support via Email" }) })
+      ] })
+    }
+  ) }) });
 };
+
+// src/useChat.tsx
+var import_react19 = __toESM(require("react"));
+var useChatContext = import_react19.default.createContext(null);
+function useChat() {
+  const context = import_react19.default.useContext(useChatContext);
+  if (!context) {
+    throw new Error("useChat must be used within a <ChatProvider />");
+  }
+  return context;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -2480,6 +2531,7 @@ var ContactUsSection = (props) => {
   showcaseMail,
   showcaseMailClean,
   status,
+  stereoTuningAssistance,
   store,
   supportForm,
   supportMail,
@@ -2487,6 +2539,8 @@ var ContactUsSection = (props) => {
   techcrunch,
   termsOfService,
   twitter,
+  useChat,
+  useChatContext,
   useRudderStackAnalytics,
   youtube
 });