@adminide-stack/yantra-help-browser 12.0.16-alpha.21 → 12.0.16-alpha.22

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

@@ -1,35 +1,35 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {cn}from'../../../utils/index.js';const PopularArticle = ({
+import {jsx,jsxs}from'react/jsx-runtime';import {cn}from'../../../utils/index.js';const RANK_COLORS = ['from-amber-500 to-orange-500 text-white', 'from-gray-300 to-gray-400 text-gray-700', 'from-orange-400 to-amber-600 text-white', 'from-muted to-muted text-muted-foreground', 'from-muted to-muted text-muted-foreground', 'from-muted to-muted text-muted-foreground'];
+const PopularArticle = ({
   title,
+  description,
+  readTime,
   link,
+  index,
   className
 }) => {
+  const rankClass = index != null ? RANK_COLORS[index - 1] || RANK_COLORS[3] : RANK_COLORS[3];
   return jsx("div", {
     className: cn('group', className),
     children: jsxs("a", {
       href: link,
-      className: "flex items-center justify-between rounded-lg border border-border bg-card px-5 py-3.5 transition-all duration-150 hover:border-primary/30 hover:bg-accent/50 hover:shadow-sm",
-      children: [jsxs("div", {
-        className: "flex items-center gap-3",
+      className: "flex items-center gap-4 rounded-xl border border-border/30 bg-background/50 px-4 py-3.5 transition-all duration-200 hover:border-border/60 hover:bg-background hover:shadow-md hover:-translate-y-0.5",
+      children: [index != null && jsx("div", {
+        className: cn('flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br text-[11px] font-extrabold', rankClass),
+        children: String(index).padStart(2, '0')
+      }), jsxs("div", {
+        className: "min-w-0 flex-1",
         children: [jsx("div", {
-          className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary",
-          children: jsx("svg", {
-            className: "h-3.5 w-3.5",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            children: jsx("path", {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 2,
-              d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-            })
-          })
-        }), jsx("span", {
-          className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors",
+          className: "text-[13px] font-semibold text-foreground group-hover:text-primary transition-colors truncate",
           children: title
+        }), description && jsx("div", {
+          className: "mt-0.5 text-[12px] text-muted-foreground line-clamp-1",
+          children: description
         })]
+      }), readTime && jsx("span", {
+        className: "shrink-0 hidden sm:inline-flex items-center rounded-full bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
+        children: readTime
       }), jsx("svg", {
-        className: "h-4 w-4 shrink-0 text-muted-foreground/50 transition-all duration-150 group-hover:text-primary group-hover:translate-x-0.5",
+        className: "h-4 w-4 shrink-0 text-muted-foreground/20 transition-all duration-200 group-hover:text-primary group-hover:translate-x-0.5",
         fill: "none",
         stroke: "currentColor",
         viewBox: "0 0 24 24",
@@ -37,7 +37,7 @@ import {jsx,jsxs}from'react/jsx-runtime';import {cn}from'../../../utils/index.js
           strokeLinecap: "round",
           strokeLinejoin: "round",
           strokeWidth: 2,
-          d: "M9 5l7 7-7 7"
+          d: "M17 8l4 4m0 0l-4 4m4-4H3"
         })
       })]
     })

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

@@ -1 +1 @@
-{"version":3,"file":"PopularArticle.js","sources":["../../../../src/pages/HelpCenter/components/PopularArticle.tsx"],"sourcesContent":[null],"names":[],"mappings":"kFASO,MAAM,cAAc,GAAkC,CAAC;OACnD;AAiCX,EAAE,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PopularArticle.js","sources":["../../../../src/pages/HelpCenter/components/PopularArticle.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"kFAYA,MAAM,WAAW,GAAG,CAAA,yCAAA,EAAA,yCAAA,EAAA,yCAAA,EAAA,2CAAA,EAAA,2CAAA,EAAA,2CAAA,CAAA;AACyB,MAAA,cAAA,GAAA,CAAA;OACA;aACA;UACE;MACA;OACA;EAC7C;AAEF,CAAA,KAAM;QAQI,SAAA,GAAY,KAAA,IAAS,IAAA,GAAK,WAAE,CAAA,KAAY,GAAQ,CAAA,CAAA,IAAM,WAAA,CAAA,CAAW,CAAC,GAAG,WAAa,CAAA,CAAA,CAAC;AAEzF,EAAA,OAAAA,GACI,CAAA,KAAA,EAAA;AA2CR,IAAE,SAAA,EAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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;AAqB1B,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAkJ3B,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;AAoB1B,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAuU3B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/pages/HelpCenter/index.js

@@ -1,10 +1,7 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useNavigate}from'@remix-run/react';import {HelpCenterHeader}from'../../components/HelpCenterHeader.js';import {HelpCategoryCard}from'./components/HelpCategoryCard.js';import {PopularArticle}from'./components/PopularArticle.js';import {getAllCategoriesMetadataSync}from'../../utils/markdownLoader.js';import {popularArticlesMock}from'./mockData.js';// Featured categories that get highlighted at the top
-const FEATURED_CATEGORY_IDS = ['platform-features', 'ai-employees', 'solutions-engineering', 'solutions-sales', 'solutions-marketing', 'integrations', 'security-compliance', 'openclaw', 'use-cases'];
+import {jsxs,jsx}from'react/jsx-runtime';import {useNavigate}from'@remix-run/react';import {HelpCenterHeader}from'../../components/HelpCenterHeader.js';import {HelpCategoryCard}from'./components/HelpCategoryCard.js';import {PopularArticle}from'./components/PopularArticle.js';import {getAllCategoriesMetadataSync}from'../../utils/markdownLoader.js';import {quickLinksMock,statsMock,testimonialMock,popularArticlesMock}from'./mockData.js';const FEATURED_CATEGORY_IDS = ['platform-features', 'ai-employees', 'solutions-engineering', 'solutions-sales', 'solutions-marketing', 'integrations', 'security-compliance', 'openclaw', 'use-cases'];
 const HelpCenterPage = () => {
   const navigate = useNavigate();
-  // Get categories from markdown loader
   const helpCategories = getAllCategoriesMetadataSync();
-  // Separate featured vs other categories
   const featuredCategories = helpCategories.filter(c => FEATURED_CATEGORY_IDS.includes(c.id));
   const otherCategories = helpCategories.filter(c => !FEATURED_CATEGORY_IDS.includes(c.id));
   const handleCategoryClick = id => {
@@ -14,16 +11,72 @@ const HelpCenterPage = () => {
     className: "min-h-screen bg-background text-foreground",
     children: [jsx(HelpCenterHeader, {}), jsxs("main", {
       className: "relative z-10",
-      children: [featuredCategories.length > 0 && jsx("section", {
+      children: [jsx("section", {
+        className: "border-b border-border/40 bg-muted/30",
+        children: jsx("div", {
+          className: "container mx-auto px-6 lg:px-16 max-w-7xl",
+          children: jsxs("div", {
+            className: "flex items-center gap-5 py-3 overflow-x-auto scrollbar-hide",
+            children: [jsx("span", {
+              className: "shrink-0 text-[11px] font-semibold uppercase tracking-[0.15em] text-muted-foreground/50",
+              children: "Navigate"
+            }), jsx("div", {
+              className: "h-4 w-px bg-border/60 shrink-0"
+            }), quickLinksMock.map(link => jsxs("a", {
+              href: link.href,
+              className: "shrink-0 inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-[13px] font-medium text-muted-foreground transition-all duration-200 hover:text-foreground hover:bg-muted",
+              children: [jsx("span", {
+                className: "text-[12px]",
+                children: link.icon
+              }), link.label]
+            }, link.label))]
+          })
+        })
+      }), jsx("section", {
+        className: "py-12 border-b border-border/30",
+        children: jsx("div", {
+          className: "container mx-auto px-6 lg:px-16 max-w-7xl",
+          children: jsx("div", {
+            className: "grid grid-cols-2 gap-6 md:grid-cols-4",
+            children: statsMock.map(stat => jsxs("div", {
+              className: "group text-center",
+              children: [jsx("div", {
+                className: "text-3xl font-extrabold tracking-tight bg-gradient-to-r from-foreground to-foreground/60 bg-clip-text text-transparent md:text-4xl",
+                children: stat.value
+              }), jsx("div", {
+                className: "mt-1 text-xs font-medium text-muted-foreground",
+                children: stat.label
+              })]
+            }, stat.label))
+          })
+        })
+      }), featuredCategories.length > 0 && jsx("section", {
         className: "py-16",
         children: jsxs("div", {
           className: "container mx-auto px-6 lg:px-16 max-w-7xl",
           children: [jsxs("div", {
-            className: "mb-10 flex items-center gap-3",
-            children: [jsx("div", {
-              className: "flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10",
-              children: jsx("svg", {
-                className: "h-4 w-4 text-primary",
+            className: "mb-10 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4",
+            children: [jsxs("div", {
+              children: [jsxs("div", {
+                className: "flex items-center gap-2 mb-2",
+                children: [jsx("div", {
+                  className: "h-1 w-8 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500"
+                }), jsx("span", {
+                  className: "text-[11px] font-bold uppercase tracking-[0.15em] text-cyan-500",
+                  children: "Explore"
+                })]
+              }), jsx("h2", {
+                className: "text-2xl font-extrabold tracking-tight text-foreground lg:text-3xl",
+                children: "Featured Topics"
+              }), jsx("p", {
+                className: "mt-1.5 text-sm text-muted-foreground",
+                children: "Start with the most popular categories handpicked for you"
+              })]
+            }), jsxs("a", {
+              href: "#all-categories",
+              className: "inline-flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors",
+              children: ["View all categories", jsx("svg", {
+                className: "h-3.5 w-3.5",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
@@ -31,20 +84,12 @@ const HelpCenterPage = () => {
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   strokeWidth: 2,
-                  d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
+                  d: "M17 8l4 4m0 0l-4 4m4-4H3"
                 })
-              })
-            }), jsxs("div", {
-              children: [jsx("h2", {
-                className: "text-2xl font-semibold tracking-tight text-foreground",
-                children: "Featured Topics"
-              }), jsx("p", {
-                className: "text-sm text-muted-foreground",
-                children: "Explore our most popular help categories"
               })]
             })]
           }), jsx("div", {
-            className: "grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3",
+            className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
             children: featuredCategories.map(category => jsx(HelpCategoryCard, {
               category: category,
               onClick: handleCategoryClick,
@@ -52,42 +97,74 @@ const HelpCenterPage = () => {
             }, category.id))
           })]
         })
-      }), jsx("div", {
-        className: "container mx-auto max-w-7xl px-6 lg:px-16",
+      }), jsx("section", {
+        className: "py-16 border-t border-border/30",
         children: jsx("div", {
-          className: "h-px bg-border"
+          className: "container mx-auto px-6 lg:px-16 max-w-4xl",
+          children: jsxs("div", {
+            className: "relative overflow-hidden rounded-3xl bg-gradient-to-br from-[#0c1222] to-[#111827] p-10 lg:p-14 text-center",
+            children: [jsx("div", {
+              className: "absolute top-0 left-0 h-40 w-40 rounded-full bg-cyan-500/10 blur-[80px]"
+            }), jsx("div", {
+              className: "absolute bottom-0 right-0 h-40 w-40 rounded-full bg-violet-500/10 blur-[80px]"
+            }), jsxs("div", {
+              className: "relative z-10",
+              children: [jsx("div", {
+                className: "mb-6 flex justify-center gap-1",
+                children: [...Array(5)].map((_, i) => jsx("svg", {
+                  className: "h-5 w-5 text-amber-400",
+                  fill: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: jsx("path", {
+                    d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+                  })
+                }, i))
+              }), jsxs("blockquote", {
+                className: "text-lg font-medium leading-relaxed text-white/90 lg:text-xl",
+                children: ["\u201C", testimonialMock.quote, "\u201D"]
+              }), jsxs("div", {
+                className: "mt-6 flex items-center justify-center gap-3",
+                children: [jsx("div", {
+                  className: "flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 text-sm font-bold text-white",
+                  children: testimonialMock.author.split(' ').map(n => n[0]).join('')
+                }), jsxs("div", {
+                  className: "text-left",
+                  children: [jsx("div", {
+                    className: "text-sm font-semibold text-white",
+                    children: testimonialMock.author
+                  }), jsx("div", {
+                    className: "text-xs text-white/40",
+                    children: testimonialMock.role
+                  })]
+                })]
+              })]
+            })]
+          })
         })
       }), jsx("section", {
-        className: "py-16",
+        id: "all-categories",
+        className: "py-16 border-t border-border/30",
         children: jsxs("div", {
           className: "container mx-auto px-6 lg:px-16 max-w-7xl",
           children: [jsxs("div", {
-            className: "mb-10 flex items-center gap-3",
-            children: [jsx("div", {
-              className: "flex h-8 w-8 items-center justify-center rounded-lg bg-muted",
-              children: jsx("svg", {
-                className: "h-4 w-4 text-muted-foreground",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                children: jsx("path", {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-                })
-              })
-            }), jsxs("div", {
-              children: [jsx("h2", {
-                className: "text-2xl font-semibold tracking-tight text-foreground",
-                children: "All Categories"
-              }), jsxs("p", {
-                className: "text-sm text-muted-foreground",
-                children: ["Browse all ", helpCategories.length, " help topics"]
+            className: "mb-10",
+            children: [jsxs("div", {
+              className: "flex items-center gap-2 mb-2",
+              children: [jsx("div", {
+                className: "h-1 w-8 rounded-full bg-gradient-to-r from-violet-500 to-purple-500"
+              }), jsx("span", {
+                className: "text-[11px] font-bold uppercase tracking-[0.15em] text-violet-500",
+                children: "Browse"
               })]
+            }), jsx("h2", {
+              className: "text-2xl font-extrabold tracking-tight text-foreground lg:text-3xl",
+              children: "All Categories"
+            }), jsxs("p", {
+              className: "mt-1.5 text-sm text-muted-foreground",
+              children: [helpCategories.length, " topics covering every aspect of the platform"]
             })]
           }), jsx("div", {
-            className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+            className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
             children: otherCategories.map(category => jsx(HelpCategoryCard, {
               category: category,
               onClick: handleCategoryClick
@@ -95,44 +172,174 @@ const HelpCenterPage = () => {
           })]
         })
       }), jsx("section", {
-        className: "border-t border-border bg-muted/30 py-16",
-        children: jsxs("div", {
+        className: "py-16 border-t border-border/30",
+        children: jsx("div", {
           className: "container mx-auto px-6 lg:px-16 max-w-7xl",
-          children: [jsxs("div", {
-            className: "mb-10 flex items-center gap-3",
+          children: jsxs("div", {
+            className: "relative overflow-hidden rounded-3xl border border-border/60 bg-gradient-to-br from-muted/40 via-background to-muted/20 p-8 lg:p-14",
             children: [jsx("div", {
-              className: "flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10",
-              children: jsx("svg", {
-                className: "h-4 w-4 text-primary",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                children: jsx("path", {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
-                })
-              })
+              className: "pointer-events-none absolute -top-24 -right-24 h-72 w-72 rounded-full bg-gradient-to-br from-cyan-500/[0.06] to-violet-500/[0.06] blur-3xl"
+            }), jsx("div", {
+              className: "pointer-events-none absolute -bottom-16 -left-16 h-48 w-48 rounded-full bg-gradient-to-br from-amber-500/[0.04] to-pink-500/[0.04] blur-3xl"
+            }), jsxs("div", {
+              className: "relative z-10 grid gap-10 lg:grid-cols-[1fr_1.6fr] lg:gap-16 items-start",
+              children: [jsxs("div", {
+                children: [jsxs("div", {
+                  className: "flex items-center gap-2 mb-2",
+                  children: [jsx("div", {
+                    className: "h-1 w-8 rounded-full bg-gradient-to-r from-amber-500 to-orange-500"
+                  }), jsx("span", {
+                    className: "text-[11px] font-bold uppercase tracking-[0.15em] text-amber-500",
+                    children: "Trending"
+                  })]
+                }), jsx("h2", {
+                  className: "text-2xl font-extrabold tracking-tight text-foreground lg:text-3xl",
+                  children: "Popular Articles"
+                }), jsx("p", {
+                  className: "mt-2 text-sm leading-relaxed text-muted-foreground",
+                  children: "The most-read guides from our knowledge base, updated weekly."
+                }), jsxs("div", {
+                  className: "mt-8 space-y-3",
+                  children: [jsxs("div", {
+                    className: "flex items-center gap-3 rounded-xl border border-border/40 bg-background/60 px-4 py-3",
+                    children: [jsx("div", {
+                      className: "flex h-9 w-9 items-center justify-center rounded-lg bg-cyan-500/10 text-cyan-500",
+                      children: jsx("svg", {
+                        className: "h-4 w-4",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: jsx("path", {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 1.5,
+                          d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                        })
+                      })
+                    }), jsxs("div", {
+                      children: [jsx("div", {
+                        className: "text-lg font-bold text-foreground",
+                        children: "117+"
+                      }), jsx("div", {
+                        className: "text-[11px] text-muted-foreground",
+                        children: "Articles & guides"
+                      })]
+                    })]
+                  }), jsxs("div", {
+                    className: "flex items-center gap-3 rounded-xl border border-border/40 bg-background/60 px-4 py-3",
+                    children: [jsx("div", {
+                      className: "flex h-9 w-9 items-center justify-center rounded-lg bg-violet-500/10 text-violet-500",
+                      children: jsx("svg", {
+                        className: "h-4 w-4",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: jsx("path", {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 1.5,
+                          d: "M4 6h16M4 10h16M4 14h16M4 18h16"
+                        })
+                      })
+                    }), jsxs("div", {
+                      children: [jsx("div", {
+                        className: "text-lg font-bold text-foreground",
+                        children: "27"
+                      }), jsx("div", {
+                        className: "text-[11px] text-muted-foreground",
+                        children: "Categories"
+                      })]
+                    })]
+                  })]
+                })]
+              }), jsx("div", {
+                className: "space-y-2",
+                children: popularArticlesMock.map((article, index) => jsx(PopularArticle, {
+                  index: index + 1,
+                  title: article.title,
+                  description: article.description,
+                  readTime: article.readTime,
+                  link: article.link
+                }, article.id))
+              })]
+            })]
+          })
+        })
+      }), jsx("section", {
+        className: "py-16 border-t border-border/30",
+        children: jsx("div", {
+          className: "container mx-auto px-6 lg:px-16 max-w-4xl",
+          children: jsxs("div", {
+            className: "relative overflow-hidden rounded-3xl bg-gradient-to-r from-cyan-500 via-blue-600 to-violet-600 p-10 lg:p-14 text-center",
+            children: [jsxs("div", {
+              className: "pointer-events-none absolute inset-0 overflow-hidden",
+              children: [jsx("div", {
+                className: "absolute top-4 left-[20%] h-2 w-2 rounded-full bg-white/20"
+              }), jsx("div", {
+                className: "absolute bottom-6 right-[25%] h-1.5 w-1.5 rounded-full bg-white/15"
+              }), jsx("div", {
+                className: "absolute top-[40%] right-[10%] h-2 w-2 rounded-full bg-white/10"
+              }), jsx("div", {
+                className: "absolute bottom-[30%] left-[10%] h-1.5 w-1.5 rounded-full bg-white/20"
+              })]
             }), jsxs("div", {
-              children: [jsx("h2", {
-                className: "text-2xl font-semibold tracking-tight text-foreground",
-                children: "Popular Articles"
+              className: "relative z-10",
+              children: [jsxs("div", {
+                className: "inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-1.5 text-[12px] font-medium text-white/80 backdrop-blur-sm mb-5",
+                children: [jsx("svg", {
+                  className: "h-3.5 w-3.5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: jsx("path", {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  })
+                }), "Need more help?"]
+              }), jsx("h2", {
+                className: "text-2xl font-extrabold text-white lg:text-3xl",
+                children: "Can't find what you're looking for?"
               }), jsx("p", {
-                className: "text-sm text-muted-foreground",
-                children: "Quick answers to common questions"
+                className: "mt-3 mx-auto max-w-md text-base text-white/70",
+                children: "Our support team is here 24/7. Get instant help from our AI assistant or reach out to a human expert."
+              }), jsxs("div", {
+                className: "mt-8 flex flex-col sm:flex-row items-center justify-center gap-3",
+                children: [jsxs("a", {
+                  href: "#",
+                  className: "inline-flex items-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-gray-900 shadow-lg shadow-black/10 transition-all hover:bg-gray-100 hover:shadow-xl hover:-translate-y-0.5",
+                  children: [jsx("svg", {
+                    className: "h-4 w-4",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: jsx("path", {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                    })
+                  }), "Chat with AI Assistant"]
+                }), jsxs("a", {
+                  href: "#",
+                  className: "inline-flex items-center gap-2 rounded-xl border border-white/30 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur-sm transition-all hover:bg-white/20 hover:border-white/40 hover:-translate-y-0.5",
+                  children: [jsx("svg", {
+                    className: "h-4 w-4",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: jsx("path", {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                    })
+                  }), "Contact Support"]
+                })]
               })]
             })]
-          }), jsx("div", {
-            className: "max-w-3xl",
-            children: jsx("div", {
-              className: "space-y-2",
-              children: popularArticlesMock.map(article => jsx(PopularArticle, {
-                title: article.title,
-                link: article.link
-              }, article.id))
-            })
-          })]
+          })
         })
       })]
     })]

package/lib/pages/HelpCenter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/pages/HelpCenter/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"6YAQA;AACA,MAAM,qBAAqB,GAAG,CAAA,mBAAA,EAAA,cAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,WAAA,CAAA;AACP,MAAA,cAAA,GAAA,MAAA;QACL,QAAA,GAAA,WAAA,EAAA;;QAEG,cAAA,GAAA,4BAAA,EAAA;;QAEH,kBAAA,GAAA,cAAA,CAAA,MAAA,CAAA,CAAA,IAAA,qBAAA,CAAA,QAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA;QACO,eAAA,GAAA,cAAA,CAAA,MAAA,CAAA,CAAA,IAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA;QACX,mBAAA,GAAA,EAAA,IAAA;IACV,QAAW,CAAA,CAAA,aAAA,EAAA,EAAA,CAAA,CAAA,CAAA;GACb;AAEF,EAAM,OAAAA,IAAA,CAAA,KAAc,EAAa;AAC7B,IAAA,SAAc,EAAA,4CAAiB;IAE/B,QAAsC,EAAA,CAAAC,GAAA,CAAA,gBAAA,EAAA,EAAA,CAAA,EAAAD,IAAA,CAAA,MAAA,EAAA;AACtC,MAAA,SAAoB,EAAA,eAA+B;MAEX,QAAA,EAAA,CAAA,kBAAA,CAAA,MAAA,GAAA,CAAA,IAAAC,GAAA,CAAA,SAAA,EAAA;QAClC,SAAA,EAAA,OAAA;QACA,QAAA,EAAAD,IAAA,CAAA,KAAgC,EAAA;AAEtC,UAAM,SAAmB,EAAA,2CAAkB;AACvC,UAAA,QAAS,EAAA,CAAAA,IAAA,CAAA,KAAA,EAAkB;AAC/B,YAAE,SAAA,EAAA,+BAAA;AAEF,YACI,QAAK,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA;AAmIb,cAAE,SAAA,EAAA,mEAAA;AAEF,cAAA,cAA6B,KAAC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/pages/HelpCenter/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"sbAQA,MAAM,qBAAqB,GAAG,CAAA,mBAAA,EAAA,cAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,WAAA,CAAA;AACP,MAAA,cAAA,GAAA,MAAA;QACL,QAAA,GAAA,WAAA,EAAA;QACS,cAAA,GAAA,4BAAA,EAAA;QACN,kBAAA,GAAA,cAAA,CAAA,MAAA,CAAA,CAAA,IAAA,qBAAA,CAAA,QAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA;QACI,eAAA,GAAA,cAAA,CAAA,MAAA,CAAA,CAAA,IAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA;QACP,mBAAA,GAAA,EAAA,IAAA;IACd,QAAqB,CAAA,CAAA,aAAA,EAAA,EAAA,CAAA,CAAA,CAAA;;SAEVA,IAAA,CAAA,KAAA,EAAA;IACb,SAAA,EAAA,4CAAA;AAEF,IAAM,QAAA,EAAA,CAAAC,GAAA,CAAc,gBAAkB,EAAA,EAAA,CAAA,EAAAD,IAAA,CAAA,MAAA,EAAA;AAClC,MAAA,SAAc,EAAA,eAAc;AAC5B,MAAA,QAAoB,EAAA,CAAAC,GAAA,CAAA,SAA+B,EAAA;QAE7C,SAAA,EAAA,uCAA+C;QAC/C,QAAA,EAAAA,GAAA,CAAA,KAAkB,EAAc;AAEtC,UAAM,SAAmB,EAAA,2CAAkB;AACvC,UAAA,QAAS,EAAAD,IAAA,CAAA,KAAA,EAAgB;AAC7B,YAAE,SAAA,EAAA,6DAAA;YAGE,cAAK,CAAS,MAAA,EAAA;kHAsHiC;;AAEV,aAAA,CAAA,EAAAC,GAAA,CAAA,KAAA,EAAA;AAmM7C,cAAE,SAAA,EAAA;AAEF,aAAA,CAAA,gBAA8B,CAAA,GAAA,CAAA,IAAA,IAAAD,IAAA,CAAA,GAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/pages/HelpCenter/mockData.d.ts

@@ -3,6 +3,22 @@ export declare const helpCategoriesMock: HelpCategory[];
 export declare const popularArticlesMock: {
     id: string;
     title: string;
+    description: string;
+    readTime: string;
     link: string;
 }[];
+export declare const quickLinksMock: {
+    label: string;
+    href: string;
+    icon: string;
+}[];
+export declare const testimonialMock: {
+    quote: string;
+    author: string;
+    role: string;
+};
+export declare const statsMock: {
+    value: string;
+    label: string;
+}[];
 //# sourceMappingURL=mockData.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"mockData.d.ts","sourceRoot":"","sources":["../../../src/pages/HelpCenter/mockData.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,eAAO,MAAM,kBAAkB,EAAE,YAAY,EAgI5C,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;GA0B/B,CAAC"}
+{"version":3,"file":"mockData.d.ts","sourceRoot":"","sources":["../../../src/pages/HelpCenter/mockData.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,eAAO,MAAM,kBAAkB,EAAE,YAAY,EA+H5C,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;GA2C/B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;GAQ1B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;CAI3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;GAKrB,CAAC"}

package/lib/pages/HelpCenter/mockData.js

@@ -1,21 +1,84 @@
 const popularArticlesMock = [{
   id: 'platform-overview',
   title: 'Yantra Platform Overview',
+  description: 'Understand the full Yantra platform \u2014 from AI employees to real-time monitoring.',
+  readTime: '5 min',
   link: '/help-center/platform-features/platform-overview'
 }, {
   id: 'getting-started-ai',
   title: 'Getting Started with AI Employees',
+  description: 'Deploy your first AI employee in under 5 minutes with step-by-step instructions.',
+  readTime: '3 min',
   link: '/help-center/ai-employees/getting-started-ai-employees'
 }, {
-  id: 'what-is-yantra',
-  title: 'What is Yantra?',
-  link: '/help-center/what-is-yantra'
-}, {
-  id: 'integrations-overview',
-  title: 'Integrations Overview',
-  link: '/help-center/integrations/integrations-overview'
+  id: 'slack-integration',
+  title: 'Connect Yantra to Slack',
+  description: 'Set up real-time alerts, approve AI actions, and manage escalations from Slack.',
+  readTime: '4 min',
+  link: '/help-center/integrations/slack-integration'
 }, {
   id: 'security-overview',
   title: 'Security & Compliance Overview',
+  description: 'SOC 2, GDPR, and encryption standards that protect your data at rest and in transit.',
+  readTime: '6 min',
   link: '/help-center/security-compliance/security-overview'
-}];export{popularArticlesMock};//# sourceMappingURL=mockData.js.map
+}, {
+  id: 'how-ai-employees-work',
+  title: 'How AI Employees Work',
+  description: 'Architecture deep-dive: tool use, memory, supervised mode, and escalation workflows.',
+  readTime: '8 min',
+  link: '/help-center/ai-employees/how-ai-employees-work'
+}, {
+  id: 'use-cases-overview',
+  title: 'Use Cases Overview',
+  description: 'Real-world examples across engineering, sales, marketing, and customer support.',
+  readTime: '5 min',
+  link: '/help-center/use-cases/use-cases-overview'
+}];
+const quickLinksMock = [{
+  label: 'Getting Started',
+  href: '/help-center/getting-started',
+  icon: '\u{1F680}'
+}, {
+  label: 'AI Employees',
+  href: '/help-center/ai-employees',
+  icon: '\u{1F916}'
+}, {
+  label: 'Integrations',
+  href: '/help-center/integrations',
+  icon: '\u{1F517}'
+}, {
+  label: 'API Reference',
+  href: '/help-center/scope-api',
+  icon: '\u26A1'
+}, {
+  label: 'Security',
+  href: '/help-center/security-compliance',
+  icon: '\u{1F6E1}'
+}, {
+  label: 'Billing',
+  href: '/help-center/subscription-billing',
+  icon: '\u{1F4B3}'
+}, {
+  label: 'OpenClaw',
+  href: '/help-center/openclaw',
+  icon: '\u{1F419}'
+}];
+const testimonialMock = {
+  quote: 'The help center made onboarding our team incredibly smooth. We went from zero to deploying 12 AI employees across engineering and support in just one week.',
+  author: 'Sarah Chen',
+  role: 'VP of Engineering at Acme Corp'
+};
+const statsMock = [{
+  value: '117+',
+  label: 'Help Articles'
+}, {
+  value: '27',
+  label: 'Categories'
+}, {
+  value: '< 2min',
+  label: 'Avg. Response Time'
+}, {
+  value: '99.9%',
+  label: 'Platform Uptime'
+}];export{popularArticlesMock,quickLinksMock,statsMock,testimonialMock};//# sourceMappingURL=mockData.js.map

package/lib/pages/HelpCenter/mockData.js.map

@@ -1 +1 @@
-{"version":3,"file":"mockData.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"mockData.js","sources":["../../../src/pages/HelpCenter/mockData.ts"],"sourcesContent":[null],"names":[],"mappings":"AAsKK,MAAA,mBAAA,GAAA,CAAA;AACD,EAAA,EAAA,EAAA,mBAAA;AACI,EAAA,KAAA,EAAA,0BAAwB;AACxB,EAAA,WAAK,EAAE,uFAAoB;AAC3B,EAAA,QAAA,EAAA,OAAW;AACX,EAAA,IAAA,EAAA;AACA,CAAA,EAAA;AACH,EAAA,EAAA,EAAA,oBAAA;EACH,KAAA,EAAA,mCAAA;AAEF,EAAM,WAAO,EAAA,kFAAiB;UACxB,EAAO,OAAA;MACP,EAAA;;IAEF,EAAE,mBAAO;OACP,EAAA,yBAAyB;aAClB,EAAA,iFAAyE;UAChF,EAAO,OAAA;EACX,IAAA,EAAA;AAEF,CAAM,EAAA;AACF,EAAA,EAAA,EAAA,mBAAoK;AACpK,EAAA,KAAA,EAAA,gCAAoB;AACpB,EAAA,WAAsC,EAAA,sFAAA;EACxC,QAAA,EAAA,OAAA;AAEF,EAAM,IAAA,EAAO;AACT,CAAA,EAAA;AACA,EAAA,EAAA,EAAE;AACF,EAAA;AACA,EAAA,WAAS,EAAA,sFAAmC;EAC9C,QAAA,EAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}