@adminide-stack/clock-tik-browser 12.0.17-alpha.1 → 12.0.17-alpha.5

package/lib/pages/HelpCenter/components/CaresHero.js

@@ -0,0 +1,207 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {createPortal}from'react-dom';import {useNavigate}from'@remix-run/react';import {CaresSection,CaresContainer}from'./CaresLayout.js';import {searchArticles,getCategoryById}from'../../../utils/markdownLoader.js';const CaresHero = ({
+  title = 'Welcome to Clockbook Cares',
+  onSearch
+}) => {
+  const navigate = useNavigate();
+  const [product, setProduct] = useState('All products');
+  const [query, setQuery] = useState('');
+  const [searchResults, setSearchResults] = useState([]);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0
+  });
+  const searchContainerRef = useRef(null);
+  const inputRef = useRef(null);
+  // Calculate dropdown position
+  const updateDropdownPosition = useRef(() => {
+    if (searchContainerRef.current) {
+      const rect = searchContainerRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY + 4,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  });
+  // Perform search as user types
+  useEffect(() => {
+    if (query.trim().length > 0) {
+      const results = searchArticles(query);
+      setSearchResults(results.slice(0, 10)); // Limit to 10 results
+      setShowDropdown(true);
+      setTimeout(() => {
+        updateDropdownPosition.current();
+      }, 0);
+    } else {
+      setSearchResults([]);
+      setShowDropdown(false);
+    }
+  }, [query]);
+  // Update position on scroll/resize
+  useEffect(() => {
+    if (showDropdown) {
+      updateDropdownPosition.current();
+      const handleScroll = () => updateDropdownPosition.current();
+      const handleResize = () => updateDropdownPosition.current();
+      window.addEventListener('scroll', handleScroll, true);
+      window.addEventListener('resize', handleResize);
+      return () => {
+        window.removeEventListener('scroll', handleScroll, true);
+        window.removeEventListener('resize', handleResize);
+      };
+    }
+  }, [showDropdown]);
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = event => {
+      const target = event.target;
+      if (searchContainerRef.current && !searchContainerRef.current.contains(target)) {
+        const dropdown = document.querySelector('[data-search-dropdown-cares]');
+        if (!dropdown || !dropdown.contains(target)) {
+          setShowDropdown(false);
+        }
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  const handleSearch = e => {
+    e.preventDefault();
+    if (onSearch && query.trim()) {
+      onSearch(query);
+    }
+    // If there are results and user presses enter, navigate to first result
+    if (searchResults.length > 0) {
+      const firstResult = searchResults[0];
+      navigate(`/help-center/${firstResult.categoryId}/${firstResult.slug}`);
+      setShowDropdown(false);
+    }
+  };
+  const handleInputChange = e => {
+    setQuery(e.target.value);
+  };
+  const handleInputFocus = () => {
+    if (searchResults.length > 0) {
+      setShowDropdown(true);
+    }
+  };
+  const handleResultClick = (article, e) => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    if (!article || !article.categoryId || !article.slug) {
+      return;
+    }
+    setShowDropdown(false);
+    setQuery('');
+    navigate(`/help-center/${article.categoryId}/${article.slug}`);
+  };
+  return jsxs(CaresSection, {
+    tone: "default",
+    className: "relative",
+    children: [jsxs("div", {
+      className: "absolute inset-0",
+      children: [jsx("img", {
+        src: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1800&auto=format&fit=crop",
+        alt: "Support",
+        className: "h-full w-full object-cover"
+      }), jsx("div", {
+        className: "absolute inset-0 bg-black/35"
+      })]
+    }), jsx(CaresContainer, {
+      className: "relative py-20",
+      children: jsxs("div", {
+        className: "max-w-3xl",
+        children: [jsx("h1", {
+          className: "text-3xl font-semibold text-white sm:text-4xl",
+          children: title
+        }), jsx("form", {
+          className: "mt-6 flex w-full max-w-xl overflow-hidden rounded-md bg-white shadow-lg relative",
+          onSubmit: handleSearch,
+          children: jsxs("div", {
+            ref: searchContainerRef,
+            className: "relative flex-1 flex",
+            children: [jsx("input", {
+              ref: inputRef,
+              className: "h-12 flex-1 px-4 text-sm text-foreground outline-none",
+              placeholder: "Search for solutions",
+              value: query,
+              onChange: handleInputChange,
+              onFocus: handleInputFocus
+            }), jsx("button", {
+              type: "submit",
+              className: "h-12 bg-black px-5 text-sm font-semibold text-white hover:bg-black/90",
+              children: "Search"
+            })]
+          })
+        })]
+      })
+    }), showDropdown && typeof document !== 'undefined' && createPortal(jsx(Fragment, {
+      children: searchResults.length > 0 ? jsx("div", {
+        "data-search-dropdown-cares": true,
+        className: "fixed bg-white rounded-lg shadow-2xl border border-gray-200 max-h-96 overflow-y-auto z-[9999]",
+        style: {
+          top: `${dropdownPosition.top}px`,
+          left: `${dropdownPosition.left}px`,
+          width: `${dropdownPosition.width}px`
+        },
+        onClick: e => e.stopPropagation(),
+        children: jsx("div", {
+          className: "py-1",
+          children: searchResults.map((article, index) => {
+            const category = getCategoryById(article.categoryId);
+            return jsx("div", {
+              onClick: e => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleResultClick(article, e);
+              },
+              className: `block px-4 py-3 hover:bg-blue-50 transition-colors cursor-pointer border-b border-gray-100 last:border-b-0`,
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  handleResultClick(article);
+                }
+              },
+              children: jsxs("div", {
+                className: "flex flex-col",
+                children: [jsx("div", {
+                  className: "text-base font-semibold text-gray-900",
+                  children: article.title
+                }), article.description && jsx("div", {
+                  className: "text-sm text-gray-600 mt-0.5",
+                  children: article.description
+                }), category && jsx("div", {
+                  className: "text-xs text-blue-600 mt-1 font-medium",
+                  children: category.title
+                })]
+              })
+            }, article.id);
+          })
+        })
+      }) : query.trim().length > 0 ? jsx("div", {
+        "data-search-dropdown-cares": true,
+        className: "fixed bg-white rounded-lg shadow-2xl border border-gray-200 z-[9999]",
+        style: {
+          top: `${dropdownPosition.top}px`,
+          left: `${dropdownPosition.left}px`,
+          width: `${dropdownPosition.width}px`
+        },
+        onClick: e => e.stopPropagation(),
+        children: jsx("div", {
+          className: "px-4 py-6 text-center text-gray-500",
+          children: jsxs("p", {
+            children: ["No results found for \"", query, "\""]
+          })
+        })
+      }) : null
+    }), document.body)]
+  });
+};export{CaresHero};//# sourceMappingURL=CaresHero.js.map

package/lib/pages/HelpCenter/components/CaresHero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaresHero.js","sources":["../../../../src/pages/HelpCenter/components/CaresHero.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/lib/pages/HelpCenter/components/CaresLayout.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const CaresContainer: ({ className, children, }: {
+    className?: string;
+    children: React.ReactNode;
+}) => React.ReactElement;
+export declare const CaresSection: ({ tone, className, children, }: {
+    tone?: "default" | "soft" | "dark";
+    className?: string;
+    children: React.ReactNode;
+}) => React.ReactElement;
+//# sourceMappingURL=CaresLayout.d.ts.map

package/lib/pages/HelpCenter/components/CaresLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaresLayout.d.ts","sourceRoot":"","sources":["../../../../src/pages/HelpCenter/components/CaresLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,cAAc,GAAI,0BAG5B;IACC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,KAAG,KAAK,CAAC,YAET,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,gCAI1B;IACC,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,KAAG,KAAK,CAAC,YAQT,CAAC"}

package/lib/pages/HelpCenter/components/CaresLayout.js

@@ -0,0 +1,20 @@
+import {jsx}from'react/jsx-runtime';const CaresContainer = ({
+  className,
+  children
+}) => {
+  return jsx("div", {
+    className: `mx-auto w-full max-w-6xl px-6 lg:px-10 ${className || ''}`,
+    children: children
+  });
+};
+const CaresSection = ({
+  tone = 'default',
+  className,
+  children
+}) => {
+  const toneClass = tone === 'dark' ? 'bg-[#1A1A1A] text-white' : tone === 'soft' ? 'bg-[#FBF3E8] text-foreground' : 'bg-background text-foreground';
+  return jsx("section", {
+    className: `${toneClass} ${className || ''}`,
+    children: children
+  });
+};export{CaresContainer,CaresSection};//# sourceMappingURL=CaresLayout.js.map

package/lib/pages/HelpCenter/components/CaresLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaresLayout.js","sources":["../../../../src/pages/HelpCenter/components/CaresLayout.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"oCAEa,MAAA,cAAc,GAAG,CAAC;WAOpB;AACX,EAAE;AAEF,CAAA,KAAM;AASF,EAAA,OAAAA,GAAe,CAAA,KAAA,EAAA;AAEP,IAAA,SAA2B,EAAA,CAAA,uCAAA,EAAA,SAAA,IAAA,EAAA,CAAA,CAAA;YACrB,EAAA;AACJ,GAAA,CAAA;;AAEM,MAAA,YAAA,GAAA,CAAA;AACpB,EAAE,IAAA,GAAA,SAAA;;;;;;;;;"}

package/lib/pages/HelpCenter/components/HelpCategoryCard.d.ts

@@ -4,10 +4,10 @@ export interface CategoryAuthor {
     articles: number;
 }
 export interface HelpCategory {
-    id: string;
-    title: string;
-    description: string;
-    iconType: string;
+    id?: string;
+    title?: string;
+    description?: string;
+    iconType?: string;
     icon?: React.ReactNode;
     authors?: CategoryAuthor[];
 }

package/lib/pages/HelpCenter/components/HelpCategoryCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpCategoryCard.d.ts","sourceRoot":"","sources":["../../../../src/pages/HelpCenter/components/HelpCategoryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC9B;AAED,UAAU,qBAAqB;IAC3B,QAAQ,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAgF5D,CAAC"}
+{"version":3,"file":"HelpCategoryCard.d.ts","sourceRoot":"","sources":["../../../../src/pages/HelpCenter/components/HelpCategoryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC9B;AAED,UAAU,qBAAqB;IAC3B,QAAQ,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAgF5D,CAAC"}

package/lib/pages/HelpCenter/components/NeedHelpWithSection.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Category } from '../../../utils/markdownLoader';
+export declare const NeedHelpWithSection: ({ categories }: {
+    categories: Category[];
+}) => React.ReactElement;
+//# sourceMappingURL=NeedHelpWithSection.d.ts.map

package/lib/pages/HelpCenter/components/NeedHelpWithSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeedHelpWithSection.d.ts","sourceRoot":"","sources":["../../../../src/pages/HelpCenter/components/NeedHelpWithSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAG9D,eAAO,MAAM,mBAAmB,GAAI,gBAAgB;IAAE,UAAU,EAAE,QAAQ,EAAE,CAAA;CAAE,KAAG,KAAK,CAAC,YAkFtF,CAAC"}

package/lib/pages/HelpCenter/components/NeedHelpWithSection.js

@@ -0,0 +1,70 @@
+import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';import {useNavigate}from'@remix-run/react';import {CaresSection,CaresContainer}from'./CaresLayout.js';import {HelpCategoryCard}from'./HelpCategoryCard.js';const NeedHelpWithSection = ({
+  categories
+}) => {
+  const [active, setActive] = React__default.useState(() => categories?.[0]?.id ?? '');
+  const navigate = useNavigate();
+  const handleCategoryClick = to => {
+    // Navigate to category page
+    navigate(to);
+  };
+  const activeCategory = categories.find(c => c.id === active) ?? categories[0];
+  return jsx(CaresSection, {
+    tone: "default",
+    children: jsxs(CaresContainer, {
+      className: "py-16",
+      children: [jsx("h2", {
+        className: "text-center text-2xl font-semibold text-foreground",
+        children: "What do you need help with?"
+      }), jsx("div", {
+        className: "mt-14 text-center text-xs font-semibold tracking-widest text-foreground/60",
+        children: "Documentation"
+      }), jsxs("div", {
+        className: "mt-10 grid gap-10 lg:grid-cols-12",
+        children: [jsx("div", {
+          className: "lg:col-span-3",
+          children: jsx("div", {
+            className: "space-y-1",
+            children: categories?.map(c => {
+              const isActive = c.id === active;
+              return jsxs("button", {
+                type: "button",
+                onClick: () => setActive(c.id),
+                className: `group flex w-full items-center justify-between rounded-sm px-4 py-3 text-left text-sm ${isActive ? 'bg-[#FFF2E7] text-[#F97316]' : 'text-foreground hover:bg-[#FFF2E7]/50'}`,
+                style: {
+                  borderLeft: isActive ? '3px solid #F97316' : '3px solid transparent'
+                },
+                children: [jsx("span", {
+                  className: "flex items-center gap-3",
+                  children: jsx("span", {
+                    className: `${isActive ? 'font-semibold' : 'font-medium'}`,
+                    children: c?.title
+                  })
+                }), jsx("span", {
+                  className: `${isActive ? 'text-[#F97316]' : 'text-foreground/30'}`,
+                  children: "\u203A"
+                })]
+              }, c.id);
+            })
+          })
+        }), jsxs("div", {
+          className: "lg:col-span-9",
+          children: [jsx("div", {
+            className: "grid grid-cols-2 gap-7 sm:grid-cols-3",
+            children: (activeCategory?.articles ?? []).slice(0, 8).map(article => jsx(HelpCategoryCard, {
+              category: article,
+              onClick: () => handleCategoryClick(`/help-center/${activeCategory.id}/${article.slug}`)
+            }, article.id))
+          }), activeCategory ? jsx("div", {
+            className: "mt-6",
+            children: jsxs("button", {
+              type: "button",
+              onClick: () => handleCategoryClick(`/help-center/${activeCategory.id}`),
+              className: "text-sm font-semibold text-[#F97316] hover:underline",
+              children: ["View all in ", activeCategory.title, " \u2192"]
+            })
+          }) : null]
+        })]
+      })]
+    })
+  });
+};export{NeedHelpWithSection};//# sourceMappingURL=NeedHelpWithSection.js.map

package/lib/pages/HelpCenter/components/NeedHelpWithSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeedHelpWithSection.js","sources":["../../../../src/pages/HelpCenter/components/NeedHelpWithSection.tsx"],"sourcesContent":[null],"names":["React","_jsxs"],"mappings":"4OAMa,mBAAmB,GAAG,CAAC;;AAEhC,CAAA,KAAA;AAEA,EAAA,MAAA,CAAA,MAAyB,EAAA,SAAA,CAAA,GAAAA,cAAc,SAAI,CAAA,MAAA,UAAA,GAAA,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,CAAA;QACvC,QAA4B,GAAA,WAAA,EAAA;QAC5B,mBAAa,GAAA,EAAA,IAAA;AACjB;IAEA,QAAM,CAAA,EAAA,CAAA;;AAesB,EAAA,MAAA,cAAA,GAAA,UAAA,CAAA,IAAA,CAAA,CAAM,QAAQ,KAAK,MAAE,CAAK,cAAO,CAAA,CAAA,CAAA;;AAQjB,IAAA,IAAA,EAAA,SAAA;AACA,IAAA,QAAA,EAAAC,IAAA,CAAA,cAAA,EAAA;;;uEAqBE;AA4BlD,QAAE,QAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/pages/HelpCenter/components/PopularArticlesGrid.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const PopularArticlesGrid: ({ items }: {
+    items: {
+        title: string;
+        link: string;
+    }[];
+}) => React.ReactElement;
+//# sourceMappingURL=PopularArticlesGrid.d.ts.map

package/lib/pages/HelpCenter/components/PopularArticlesGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopularArticlesGrid.d.ts","sourceRoot":"","sources":["../../../../src/pages/HelpCenter/components/PopularArticlesGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,mBAAmB,GAAI,WAAW;IAAE,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAAE,KAAG,KAAK,CAAC,YAcnG,CAAC"}

package/lib/pages/HelpCenter/components/PopularArticlesGrid.js

@@ -0,0 +1,21 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {CaresSection,CaresContainer}from'./CaresLayout.js';import {popularArticlesMock}from'../mockData.js';import {PopularArticle}from'./PopularArticle.js';const PopularArticlesGrid = ({
+  items
+}) => {
+  return jsx(CaresSection, {
+    tone: "default",
+    children: jsxs(CaresContainer, {
+      className: "py-14",
+      children: [jsx("h2", {
+        className: "text-center text-xl font-semibold text-foreground",
+        children: "Popular Articles"
+      }), jsx("p", {
+        className: "text-lg text-muted-foreground text-center mb-10",
+        children: "Most helpful content from our community"
+      }), popularArticlesMock.map(article => jsx(PopularArticle, {
+        title: article.title,
+        link: article.link,
+        className: "mb-4"
+      }, article.id))]
+    })
+  });
+};export{PopularArticlesGrid};//# sourceMappingURL=PopularArticlesGrid.js.map

package/lib/pages/HelpCenter/components/PopularArticlesGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopularArticlesGrid.js","sources":["../../../../src/pages/HelpCenter/components/PopularArticlesGrid.tsx"],"sourcesContent":[null],"names":[],"mappings":"4MAKa,mBAAmB,GAAG,CAAC;AAChC,EAAA;AAaJ,CAAC,KAAC;;;;;;;;;;;;;;;;;;"}

package/lib/pages/HelpCenter/components/SupportPlansSection.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const SupportPlansSection: () => React.ReactElement;
+//# sourceMappingURL=SupportPlansSection.d.ts.map

package/lib/pages/HelpCenter/components/SupportPlansSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportPlansSection.d.ts","sourceRoot":"","sources":["../../../../src/pages/HelpCenter/components/SupportPlansSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqC1B,eAAO,MAAM,mBAAmB,QAAO,KAAK,CAAC,YA+B5C,CAAC"}

package/lib/pages/HelpCenter/components/SupportPlansSection.js

@@ -0,0 +1,63 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {CaresSection,CaresContainer}from'./CaresLayout.js';const PlanCard = ({
+  badge,
+  title,
+  body,
+  bullets
+}) => {
+  return jsxs("div", {
+    className: "rounded-xl bg-white p-7 shadow-sm ring-1 ring-black/5",
+    children: [badge ? jsx("div", {
+      className: "inline-flex rounded-full bg-[#F6C945] px-3 py-1 text-xs font-semibold text-foreground",
+      children: badge
+    }) : null, jsx("div", {
+      className: "mt-3 text-lg font-semibold",
+      children: title
+    }), jsx("p", {
+      className: "mt-3 text-sm leading-6 text-foreground/70",
+      children: body
+    }), bullets?.length ? jsx("ul", {
+      className: "mt-5 space-y-2 text-sm text-foreground/80",
+      children: bullets.map(b => jsxs("li", {
+        className: "flex gap-2",
+        children: [jsx("span", {
+          className: "text-emerald-600",
+          children: "\u2022"
+        }), jsx("span", {
+          children: b
+        })]
+      }, b))
+    }) : null]
+  });
+};
+const SupportPlansSection = () => {
+  return jsx(CaresSection, {
+    tone: "soft",
+    children: jsxs(CaresContainer, {
+      className: "py-16",
+      children: [jsx("h2", {
+        className: "text-center text-2xl font-semibold text-foreground",
+        children: "Our support plans"
+      }), jsx("p", {
+        className: "mx-auto mt-3 max-w-2xl text-center text-sm text-foreground/70",
+        children: "Pick the right plan for your team and get the assistance you need."
+      }), jsxs("div", {
+        className: "mt-12 grid gap-6 lg:grid-cols-3",
+        children: [jsx(PlanCard, {
+          badge: "The 90s",
+          title: "Classic Support",
+          body: "Email-based support to help you get unstuck and keep moving.",
+          bullets: ['Knowledge base access', 'Standard response times', 'Community support']
+        }), jsx(PlanCard, {
+          title: "Premium Support",
+          body: "Priority assistance with faster response times and guided troubleshooting.",
+          bullets: ['Priority ticket handling', 'Faster SLAs', 'Onboarding guidance']
+        }), jsx(PlanCard, {
+          badge: "Most popular",
+          title: "Enterprise Support",
+          body: "White-glove support for mission-critical teams with deeper implementation help.",
+          bullets: ['Dedicated manager options', '24/7 availability add-ons', 'Implementation support']
+        })]
+      })]
+    })
+  });
+};export{SupportPlansSection};//# sourceMappingURL=SupportPlansSection.js.map

package/lib/pages/HelpCenter/components/SupportPlansSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportPlansSection.js","sources":["../../../../src/pages/HelpCenter/components/SupportPlansSection.tsx"],"sourcesContent":[null],"names":[],"mappings":"oGAGA,MAAM,QAAQ,GAAG,CAAC;AAWd,EAAA,KAAA;AAqBJ,EAAE,KAAA;AAEF,EAAA,IAAM;;AA+BN,CAAC,KAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/pages/HelpCenter/components/SupportServicesSection.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const SupportServicesSection: () => React.ReactElement;
+//# sourceMappingURL=SupportServicesSection.d.ts.map

package/lib/pages/HelpCenter/components/SupportServicesSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportServicesSection.d.ts","sourceRoot":"","sources":["../../../../src/pages/HelpCenter/components/SupportServicesSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8B1B,eAAO,MAAM,sBAAsB,QAAO,KAAK,CAAC,YA+B/C,CAAC"}

package/lib/pages/HelpCenter/components/SupportServicesSection.js

@@ -0,0 +1,61 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {CaresSection,CaresContainer}from'./CaresLayout.js';const ServiceBlock = ({
+  title,
+  body,
+  align = 'left'
+}) => {
+  return jsxs("div", {
+    className: `grid gap-8 lg:grid-cols-12 lg:items-center ${align === 'right' ? 'lg:flex-row-reverse' : ''}`,
+    children: [jsxs("div", {
+      className: `lg:col-span-7 ${align === 'right' ? 'lg:order-2' : ''}`,
+      children: [jsx("h3", {
+        className: "text-xl font-semibold text-foreground",
+        children: title
+      }), jsx("p", {
+        className: "mt-3 max-w-xl text-sm leading-6 text-foreground/70",
+        children: body
+      }), jsx("button", {
+        className: "mt-5 rounded-md bg-[#F59E0B] px-4 py-2 text-sm font-semibold text-white hover:bg-[#d97706]",
+        children: "Learn more"
+      })]
+    }), jsx("div", {
+      className: `lg:col-span-5 ${align === 'right' ? 'lg:order-1' : ''}`,
+      children: jsx("div", {
+        className: "grid h-48 place-items-center rounded-xl bg-white ring-1 ring-black/5",
+        children: jsx("div", {
+          className: "h-20 w-20 rounded-full bg-[#FBF3E8]"
+        })
+      })
+    })]
+  });
+};
+const SupportServicesSection = () => {
+  return jsx(CaresSection, {
+    tone: "default",
+    children: jsxs(CaresContainer, {
+      className: "py-16",
+      children: [jsx("h2", {
+        className: "text-center text-2xl font-semibold text-foreground",
+        children: "Support Services"
+      }), jsxs("div", {
+        className: "mt-14 grid gap-16",
+        children: [jsx(ServiceBlock, {
+          title: "Turnkey Solutions",
+          body: "Experts who help set up your suite, tailor workflows, and get your team productive quickly.",
+          align: "left"
+        }), jsx(ServiceBlock, {
+          title: "Configuration help",
+          body: "Need help setting up modules, access control, or integrations? We\u2019ll guide you end to end.",
+          align: "right"
+        }), jsx(ServiceBlock, {
+          title: "Product Training",
+          body: "Training sessions to help your team master the tools and adopt best practices.",
+          align: "left"
+        }), jsx(ServiceBlock, {
+          title: "Onboarding",
+          body: "A guided onboarding journey that ensures a smooth start and successful rollout.",
+          align: "right"
+        })]
+      })]
+    })
+  });
+};export{SupportServicesSection};//# sourceMappingURL=SupportServicesSection.js.map

package/lib/pages/HelpCenter/components/SupportServicesSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportServicesSection.js","sources":["../../../../src/pages/HelpCenter/components/SupportServicesSection.tsx"],"sourcesContent":[null],"names":["_jsxs"],"mappings":"oGAGA,MAAM,YAAY,GAAG,CAAC;AASlB,EAAA,KAAA;AAgBJ,EAAE,IAAA;AAEF,EAAA,KAAO,GAAA;MACI;AA8BX,EAAE,OAAAA,IAAA,CAAA,KAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/pages/HelpCenter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/HelpCenter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAmE3B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/HelpCenter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EA0B3B,CAAC;AAEF,eAAe,cAAc,CAAC"}