Fixed website bugs

src/apps/devdoc/app/components/header-secondary.tsx

@@ -9,8 +9,10 @@ import useMenu from '../utils/use-menu';
 
 export const MobileMenu = ({
   items = [],
+  extra,
 }: {
   items?: { title: string; to: string }[];
+  extra?: ReactNode;
 }) => {
   return (
     <div className={cn('flex flex-col')}>
@@ -23,6 +25,8 @@ export const MobileMenu = ({
           {item.title}
         </Link>
       ))}
+
+      {extra}
     </div>
   );
 };
@@ -41,7 +45,7 @@ const HeaderSecondary = ({
     <div className="flex flex-row sticky top-0 left-0 right-0 p-2 bg-surface-basic-default border-b border-border-default min-h-[76px] z-50">
       <nav className="px-3xl md:!px-5xl lg:!px-8xl xl:!px-11xl 2xl:!px-12xl xl:max-w-[1024px] 2xl:max-w-[1120px] box-content flex flex-row items-center gap-6xl lg:m-auto w-full">
         {config.logo}
-        <ul className="hidden lg:!flex flex-1 flex-row items-center justify-center gap-4xl list-none">
+        <ul className="hidden md:!flex flex-1 flex-row items-center justify-center gap-4xl list-none">
           {items?.map((ni) => (
             <li key={ni.to} className="list-none">
               <HeaderLink
@@ -53,8 +57,8 @@ const HeaderSecondary = ({
             </li>
           ))}
         </ul>
-        <div className="hidden lg:!flex">{extra}</div>
-        <div className="flex-1 flex lg:!hidden items-center justify-end">
+        <div className="hidden md:!flex">{extra}</div>
+        <div className="flex-1 flex md:!hidden items-center justify-end">
           <MenuToggle onClick={() => setState(!state)} toggle={state} />
         </div>
       </nav>

src/apps/devdoc/app/components/header.tsx

@@ -44,7 +44,7 @@ const Header = ({
 
   return (
     <div className="flex flex-row sticky top-0 left-0 right-0 p-2 bg-surface-basic-default border-b border-border-default min-h-[76px] z-50">
-      <nav className="w-full md:max-w-[1404px] flex-1 m-auto flex flex-row items-center gap-6xl">
+      <nav className="px-3xl md:!px-5xl lg:!px-8xl xl:!px-11xl 2xl:!px-12xl xl:max-w-[1024px] 2xl:max-w-[1120px] box-content flex flex-row items-center gap-6xl lg:m-auto w-full">
         {config.logo}
         <ul className="hidden md:flex flex-1 flex-row items-center justify-end gap-4xl list-none">
           {navitems?.items.map((ni) => (

src/apps/devdoc/app/components/page/index.tsx

@@ -19,21 +19,21 @@ import SectionWrapper from '../website/section-wrapper';
 const suites = [
   {
     title: 'DevOps',
-    desc: 'Self-Serve environments crafted for development, staging and production workloads',
+    desc: 'Environments crafted for development and production workloads',
     img: <img src={devopsIcon.src} />,
     imgPad: 'w-[160px]',
     to: 'devops',
   },
   {
     title: 'InfraOps',
-    desc: 'Flexible & Cost Effective Kubernetes Cluster Management at your fingertips',
+    desc: 'Cloud agnostic & cost effective infrastructure management at your fingertips',
     imgPad: 'w-[180px]',
     img: <img src={infraopsIcon.src} />,
     to: 'infraops',
   },
   {
     title: 'Distribution',
-    desc: 'Cloud accelerated build system and container registry to build and ship containers anywhere',
+    desc: 'Build system and package registries to build and ship your environments',
     imgPad: 'w-[160px]',
     img: <img src={distributionIcon.src} />,
     to: 'distribution',
@@ -476,20 +476,20 @@ const IndexRoot = () => {
       <Container className="flex flex-col">
         <div className="px-3xl md:!px-5xl lg:!px-8xl xl:!px-11xl 2xl:!px-12xl py-6xl md:!pt-10xl">
           <div className="flex flex-col gap-3xl text-center items-center">
-            <h1 className="heading3xl-marketing md:!heading5xl-marketing xl:!heading6xl-marketing text-text-default text-center md:!w-[615px]">
+            <h1 className="heading3xl-marketing md:!heading5xl-marketing xl:!heading6xl-marketing text-text-default text-center md:!w-[830px]">
+              <span>Opensource </span>
               <span className="relative text-center">
                 <span className="text-text-warning absolute -top-2/3 left-1/2 transform -translate-x-1/2">
                   NoOps
                 </span>
                 {/** @ts-ignore * */}
                 <strike className="no-underline strike">Advanced</strike>
               </span>{' '}
-              platform engineering system
+              <br /> platform engineering system
             </h1>
             <p className="bodyLg-medium md:!bodyXl-medium text-text-soft text-center md:!w-[528px] xl:!w-[806px]">
-              Kloudlite is an open-source platform that provides developers &
-              platform engineers with a one-click solution to move from code to
-              cloud
+              Cloud agnostic platform designed for developers & platform
+              engineers to ease code to cloud journey.
             </p>
           </div>
           <div className="pt-6xl flex md:!flex-row flex-col gap-4xl md:items-center justify-center">

src/apps/devdoc/app/components/search.tsx

@@ -11,7 +11,7 @@ const SearchBox = ({ className }: { className?: string }) => {
         onClick={() => {
           setShow(true);
         }}
-        className="flex md:hidden lg:flex flex-row items-center rounded border border-border-default bg-surface-basic-default h-[36px] min-w-[200px] w-full"
+        className="flex md:!hidden lg:!flex flex-row items-center rounded border border-border-default bg-surface-basic-default h-[36px] min-w-[200px] w-full"
       >
         <span className="text-icon-default py-lg pl-lg pr-md">
           <Search size={20} />

src/apps/devdoc/app/components/sidebar.tsx

@@ -354,8 +354,8 @@ export function Sidebar({
           'kl-sidebar bg-surface-basic-subdued z-40 nextra-sidebar-container flex-col pb-6xl md:pt-0',
           'md:top-[calc(var(--kl-navbar-height))] md:shrink-0 motion-reduce:transform-none',
           'transform-gpu transition-all ease-in-out',
-          'print:hidden',
-          showSidebar ? 'md:w-[284px]' : '',
+          'print:hidden pr-3xl',
+          showSidebar ? 'md:w-[244px]' : '',
           asPopover ? 'md:hidden' : 'flex md:sticky md:self-start',
           menu
             ? 'max-md:[transform:translate3d(0,0,0)]'
@@ -403,7 +403,7 @@ export function Sidebar({
               {mounted &&
                 window.innerWidth < 768 &&
                 (rawLayout ? (
-                  <MobileMenu items={config.headerSecondary?.items} />
+                  <MobileMenu {...config.headerSecondary} />
                 ) : (
                   <Menu
                     className="nextra-menu-mobile md:hidden"

src/apps/devdoc/app/components/toc.tsx

@@ -58,7 +58,7 @@ export function TOC({ headings }: TOCProps): ReactElement {
     <div
       ref={tocRef}
       className={cn(
-        'md:h-[calc(100vh-var(--kl-navbar-height))] overflow-x-hidden overflow-y-auto kl-scrollbar-transparent hover:kl-scrollbar-colored scrollbar-gutter grow pr-md pt-6xl -mr-5xl'
+        'md:h-[calc(100vh-var(--kl-navbar-height))] overflow-x-hidden overflow-y-auto kl-scrollbar-transparent hover:kl-scrollbar-colored scrollbar-gutter grow pr-md pt-6xl'
       )}
     >
       {hasHeadings && (

src/apps/devdoc/app/layout/theme.tsx

@@ -107,7 +107,7 @@ const Main = ({ children, pageOpts }: NextraThemeLayoutProps) => {
           className={cn(
             'min-h-[calc(100vh-76px)] flex-row',
             activeThemeContext.layout === 'default'
-              ? 'max-w-[1440px]'
+              ? 'px-3xl md:!px-5xl lg:!px-8xl xl:!px-11xl 2xl:!px-12xl xl:max-w-[1280px] 2xl:max-w-[1440px]'
               : 'max-w-none'
           )}
         >
@@ -120,7 +120,7 @@ const Main = ({ children, pageOpts }: NextraThemeLayoutProps) => {
             includePlaceholder
           />
           {!hideSidebar && (
-            <nav className="order-last w-[226px] max-w-[226px] min-w-[226px] sticky top-[calc(var(--kl-navbar-height))] self-start hidden lg:block">
+            <nav className="order-last w-[230px] max-w-[230px] min-w-[226px] sticky top-[calc(var(--kl-navbar-height))] self-start hidden lg:block">
               <TOC headings={headings} />
             </nav>
           )}
@@ -129,7 +129,7 @@ const Main = ({ children, pageOpts }: NextraThemeLayoutProps) => {
               className={cn(
                 ' w-full min-w-0 min-h-[calc(100vh-101px)] flex flex-col gap-6xl',
                 !hideSidebar ? 'max-w-[72rem]' : '',
-                { 'md:p-6xl': activeThemeContext.layout === 'default' }
+                { 'md:p-3xl': activeThemeContext.layout === 'default' }
               )}
             >
               <MDXProvider

src/apps/devdoc/app/utils/config.tsx

@@ -63,15 +63,15 @@ export default {
         className: 'w-[47%] md:w-auto',
         items: [
           {
-            title: 'Kl-DevOps',
+            title: 'DevOps',
             to: 'devops',
           },
           {
-            title: 'Kl-InfraOps',
+            title: 'InfraOps',
             to: 'infraops',
           },
           {
-            title: 'Kl-Distribution',
+            title: 'Distribution',
             to: 'distribution',
           },
         ],
@@ -184,10 +184,6 @@ export default {
         title: 'Docs',
         to: '/docs',
       },
-      {
-        title: 'Pricing',
-        to: '/pricing',
-      },
       {
         title: 'Help',
         to: '/help-and-support',
@@ -198,21 +194,27 @@ export default {
       },
     ],
     extra: (
-      <div className="flex flex-row gap-xl items-center">
-        <Button
-          content="Login"
-          variant="basic"
-          to="https://auth.kloudlite.io/login"
-          LinkComponent={Link}
-          toLabel="href"
-        />
-        <Button
-          content="Signup"
-          variant="primary"
-          to="https://auth.kloudlite.io/signup"
-          LinkComponent={Link}
-          toLabel="href"
-        />
+      <div className="flex flex-col md:!flex-row gap-xl md:items-center mt-6xl md:!mt-0">
+        <div>
+          <Button
+            content="Login"
+            variant="basic"
+            to="https://auth.kloudlite.io/login"
+            LinkComponent={Link}
+            toLabel="href"
+            block
+          />
+        </div>
+        <div>
+          <Button
+            content="Signup"
+            variant="primary"
+            to="https://auth.kloudlite.io/signup"
+            LinkComponent={Link}
+            toLabel="href"
+            block
+          />
+        </div>
       </div>
     ),
   },