From 36190eb0cd30320709b8e3839d21a35cf8fa070d Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Wed, 24 Jan 2024 17:33:49 +0530
Subject: [PATCH 1/5] Fixed provider server error

---
 src/apps/auth/routes/_providers+/_layout.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/apps/auth/routes/_providers+/_layout.tsx b/src/apps/auth/routes/_providers+/_layout.tsx
index 18cd857b8..30492f28a 100644
--- a/src/apps/auth/routes/_providers+/_layout.tsx
+++ b/src/apps/auth/routes/_providers+/_layout.tsx
@@ -25,7 +25,8 @@ export const restActions = async (ctx: IRemixCtx) => {
   ).checkOauthEnabled({});
 
   if (checkError) {
-    logger.error(checkError);
+    // logger.error(checkError);
+    console.log(checkError);
   }
 
   const { data, errors } = await GQLServerHandler(

From 25f2f9ae12244e631e55aabf337907ce88bf195f Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Thu, 25 Jan 2024 11:30:38 +0530
Subject: [PATCH 2/5] Updated website

---
 src/apps/devdoc/app/components/container.tsx  |   2 +-
 src/apps/devdoc/app/components/footer.tsx     |   4 +-
 src/apps/devdoc/app/components/graph.tsx      |   9 +-
 .../app/components/header-secondary.tsx       |   9 +-
 .../devdoc/app/components/page/contact-us.tsx |  68 +++
 .../devdoc/app/components/page/devops.tsx     | 212 +++++++
 .../app/components/page/distribution.tsx      | 147 +++++
 src/apps/devdoc/app/components/page/index.tsx | 535 ++++++++++++++++++
 .../devdoc/app/components/page/infraops.tsx   | 255 +++++++++
 .../devdoc/app/components/page/privacy.tsx    | 220 +++++++
 .../devdoc/app/components/page/products.tsx   | 486 ++++++++++++++++
 .../app/components/page/terms-of-services.tsx |  76 +++
 .../website/code-editor-placeholder.tsx       |   4 +-
 .../components/website/discover-component.tsx |  16 +-
 .../app/components/website/get-started.tsx    |  50 +-
 .../website/horizontal-top-tab-devops.tsx     |  64 ++-
 .../components/website/horizontal-top-tab.tsx |  72 ++-
 .../app/components/website/ready-to-ops.tsx   |  48 +-
 .../components/website/section-wrapper.tsx    |  23 +
 .../components/website/success-stories.tsx    |  52 +-
 src/apps/devdoc/app/layout/mdx-components.tsx |  15 +-
 src/apps/devdoc/app/layout/theme.tsx          |   8 +-
 src/apps/devdoc/app/utils/config.tsx          |  20 +-
 src/apps/devdoc/app/utils/use-config.tsx      |   4 +
 src/apps/devdoc/images/home/devops.svg        |  29 +
 src/apps/devdoc/images/home/distribution.svg  |   9 +
 src/apps/devdoc/images/home/infraops.svg      |  45 ++
 src/apps/devdoc/images/infraops/cover.svg     |  69 +++
 src/apps/devdoc/images/infraops/providers.svg |  42 ++
 src/apps/devdoc/pages/contact-us.mdx          |  61 +-
 src/apps/devdoc/pages/devops.mdx              | 172 +-----
 src/apps/devdoc/pages/distribution.mdx        | 118 +---
 src/apps/devdoc/pages/index.mdx               | 401 +------------
 src/apps/devdoc/pages/infraops.mdx            | 246 +-------
 src/apps/devdoc/pages/privacy-policy.mdx      | 264 ++++++---
 src/apps/devdoc/pages/product.mdx             | 391 +------------
 src/apps/devdoc/pages/terms-of-services.mdx   |  68 +--
 src/apps/devdoc/style.css                     |  59 +-
 src/apps/devdoc/tsconfig.json                 |   4 +
 39 files changed, 2743 insertions(+), 1634 deletions(-)
 create mode 100644 src/apps/devdoc/app/components/page/contact-us.tsx
 create mode 100644 src/apps/devdoc/app/components/page/devops.tsx
 create mode 100644 src/apps/devdoc/app/components/page/distribution.tsx
 create mode 100644 src/apps/devdoc/app/components/page/index.tsx
 create mode 100644 src/apps/devdoc/app/components/page/infraops.tsx
 create mode 100644 src/apps/devdoc/app/components/page/privacy.tsx
 create mode 100644 src/apps/devdoc/app/components/page/products.tsx
 create mode 100644 src/apps/devdoc/app/components/page/terms-of-services.tsx
 create mode 100644 src/apps/devdoc/app/components/website/section-wrapper.tsx
 create mode 100644 src/apps/devdoc/images/home/devops.svg
 create mode 100644 src/apps/devdoc/images/home/distribution.svg
 create mode 100644 src/apps/devdoc/images/home/infraops.svg
 create mode 100644 src/apps/devdoc/images/infraops/cover.svg
 create mode 100644 src/apps/devdoc/images/infraops/providers.svg

diff --git a/src/apps/devdoc/app/components/container.tsx b/src/apps/devdoc/app/components/container.tsx
index 0cba91421..e6591c734 100644
--- a/src/apps/devdoc/app/components/container.tsx
+++ b/src/apps/devdoc/app/components/container.tsx
@@ -9,7 +9,7 @@ const Container = ({
   className?: string;
 }) => {
   return (
-    <div className={cn('w-full max-w-[1440px] flex-1 m-auto flex', className)}>
+    <div className={cn('w-full flex-1 m-auto flex max-w-[1440px]', className)}>
       {children}
     </div>
   );
diff --git a/src/apps/devdoc/app/components/footer.tsx b/src/apps/devdoc/app/components/footer.tsx
index 6bb995b2a..c72aff5fe 100644
--- a/src/apps/devdoc/app/components/footer.tsx
+++ b/src/apps/devdoc/app/components/footer.tsx
@@ -58,8 +58,8 @@ const Footer = ({ config }: { config: IConfig }) => {
     'menu' in config.footer
   )
     return (
-      <footer className="px-2xl py-6xl md:px-7xl md:py-8xl xl:px-9xl xl:py-8xl 2xl:px-11xl 2xl:py-10xl 3xl:px-14xl 3xl:py-10xl bg-surface-basic-default">
-        <div className="px-4xl flex flex-row flex-wrap justify-between gap-y-6xl lg:gap-x-2xl  max-w-[1440px] m-auto">
+      <footer className="py-6xl md:py-8xl xl:py-8xl  2xl:py-10xl 3xl:py-10xl bg-surface-basic-default">
+        <div 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 flex-wrap justify-between gap-y-6xl lg:gap-x-2xl  max-w-[1440px] m-auto">
           {config.footer.brand && config.footer.brand}
           {config.footer.menu.map((item) => (
             <FooterMenu key={item.title} {...item} />
diff --git a/src/apps/devdoc/app/components/graph.tsx b/src/apps/devdoc/app/components/graph.tsx
index 496d8c75b..c8aff3098 100644
--- a/src/apps/devdoc/app/components/graph.tsx
+++ b/src/apps/devdoc/app/components/graph.tsx
@@ -16,6 +16,7 @@ export const Graph = ({
     <div
       className={cn(
         'graph',
+        'before:hidden xl:before:!flex',
         {
           'before:bg-[100%_5%,100%_5%,5%_100%,5%_100%]': blurSize === 'xs',
           'before:bg-[100%_7%,100%_7%,7%_100%,7%_100%]': blurSize === 'sm',
@@ -74,16 +75,16 @@ export const GraphItem = ({
   return (
     <div className={cn('relative', className)}>
       <div className="absolute pointer-events-none inset-0 z-10">
-        <div className="h-[calc(100%+40px)] md:h-[calc(100%+64px)] absolute -left-xs -top-[20px] md:-top-[32px]">
+        <div className="h-[calc(100%+40px)] lg:h-[calc(100%+64px)] absolute -left-xs -top-[20px] lg:-top-[32px]">
           {lineVertical()}
         </div>
-        <div className="h-[calc(100%+40px)] md:h-[calc(100%+64px)] absolute -right-xs -top-[20px] md:-top-[32px]">
+        <div className="h-[calc(100%+40px)] lg:h-[calc(100%+64px)] absolute -right-xs -top-[20px] lg:-top-[32px]">
           {lineVertical()}
         </div>
-        <div className="w-[calc(100%+40px)] md:w-[calc(100%+64px)] absolute -top-xs -left-[20px] md:-left-[32px]">
+        <div className="w-[calc(100%+40px)] lg:w-[calc(100%+64px)] absolute -top-xs -left-[20px] lg:-left-[32px]">
           {lineHorizontal()}
         </div>
-        <div className="w-[calc(100%+40px)] md:w-[calc(100%+64px)] absolute -bottom-xs -left-[20px] md:-left-[32px]">
+        <div className="w-[calc(100%+40px)] lg:w-[calc(100%+64px)] absolute -bottom-xs -left-[20px] lg:-left-[32px]">
           {lineHorizontal()}
         </div>
       </div>
diff --git a/src/apps/devdoc/app/components/header-secondary.tsx b/src/apps/devdoc/app/components/header-secondary.tsx
index 5c4fe9763..7bb5a90e0 100644
--- a/src/apps/devdoc/app/components/header-secondary.tsx
+++ b/src/apps/devdoc/app/components/header-secondary.tsx
@@ -13,12 +13,13 @@ const HeaderSecondary = ({
   activePath?: PageItem[];
 }) => {
   const { config } = useConfig();
-
+  console.log('header ', activePath);
+  console.log(items);
   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-[1440px] flex-1 m-auto flex flex-row items-center gap-6xl px-12xl">
+      <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">
+        <ul className="hidden lg:!flex flex-1 flex-row items-center justify-center gap-4xl list-none">
           {items?.map((ni) => (
             <li key={ni.to} className="list-none">
               <HeaderLink
@@ -30,7 +31,7 @@ const HeaderSecondary = ({
             </li>
           ))}
         </ul>
-        {extra}
+        <div className="hidden lg:!flex">{extra}</div>
       </nav>
     </div>
   );
diff --git a/src/apps/devdoc/app/components/page/contact-us.tsx b/src/apps/devdoc/app/components/page/contact-us.tsx
new file mode 100644
index 000000000..72328927b
--- /dev/null
+++ b/src/apps/devdoc/app/components/page/contact-us.tsx
@@ -0,0 +1,68 @@
+import Container from '~/app/components/container';
+import { Button } from 'kl-design-system/atoms/button';
+import { TextInput, TextArea } from 'kl-design-system/atoms/input';
+
+const ContactRoot = () => {
+  return (
+    <Container className="relative flex flex-col items-center">
+      <div className="px-3xl md:!px-5xl lg:!px-8xl xl:!px-11xl 2xl:px-12xl pt-6xl md:!pt-8xl xl:!pt-10xl flex flex-col gap-3xl text-center">
+        <h1 className="heading4xl-marketing md:!heading5xl-marketing lg:!heading6xl-marketing text-text-default">
+          Contact us
+        </h1>
+        <p className="bodyLg-medium md:!bodyXl-medium text-text-soft">
+          Get in touch and let us know how we can help.
+        </p>
+      </div>
+      <div className="px-3xl md:!px-5xl lg:!px-8xl xl:!px-11xl 2xl:px-12xl py-6xl md:!py-8xl xl:!py-10xl gap-5xl md:!gap-8xl xl:!gap-10xl flex flex-col lg:!flex-row w-full">
+        <div className="flex flex-col gap-5xl flex-1 md:px-8xl lg:!px-0">
+          <div className="flex flex-col gap-3xl">
+            <TextInput label="Full name" size="lg" />
+            <div className="flex flex-col md:!flex-row gap-3xl">
+              <div className="basis-full">
+                <TextInput label="Company name" size="lg" />
+              </div>
+              <div className="basis-full">
+                <TextInput label="Email" size="lg" />
+              </div>
+            </div>
+            <div className="flex flex-col md:!flex-row gap-3xl">
+              <div className="basis-full">
+                <TextInput label="Country" size="lg" />
+              </div>
+              <div className="basis-full">
+                <TextInput label="Mobile" size="lg" />
+              </div>
+            </div>
+            <TextArea label="Message" />
+          </div>
+          <div className="w-full md:!w-fit">
+            <Button content="Request demo" size="lg" block />
+          </div>
+        </div>
+        <div className="h-xs lg:!h-auto lg:!w-xs bg-border-default" />
+        <div className="flex-1 flex flex-col md:!flex-row lg:!flex-col gap-7xl md:!gap-10xl justify-center md:!justify-between lg:!justify-center lg:!max-w-[300px]">
+          <div className="flex flex-col gap-2xl">
+            <div className="flex flex-col gap-lg">
+              <span className="headingLg text-text-default">Sales</span>
+              <span className="bodyLg text-text-soft">
+                We’d love to talk about how we can work together.
+              </span>
+            </div>
+            <Button variant="plain" content="example@kloudlite.io" />
+          </div>
+          <div className="flex flex-col gap-2xl">
+            <div className="flex flex-col gap-lg">
+              <span className="headingLg text-text-default">Support</span>
+              <span className="bodyLg text-text-soft">
+                We’re here to help with any questions you may have.
+              </span>
+            </div>
+            <Button variant="plain" content="example@kloudlite.io" />
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+};
+
+export default ContactRoot;
diff --git a/src/apps/devdoc/app/components/page/devops.tsx b/src/apps/devdoc/app/components/page/devops.tsx
new file mode 100644
index 000000000..0dc501870
--- /dev/null
+++ b/src/apps/devdoc/app/components/page/devops.tsx
@@ -0,0 +1,212 @@
+import Chips from 'kl-design-system/atoms/chips';
+import Container from '~/app/components/container';
+import HorizontalTopTabDevops from '~/app/components/website/horizontal-top-tab-devops';
+import Discover from '~/app/components/website/discover-component';
+import ReadyToOps from '~/app/components/website/ready-to-ops';
+import GetStarted from '~/app/components/website/get-started';
+import SuccessStories from '~/app/components/website/success-stories';
+import { successStories } from '~/app/utils/dummy-data';
+import consts from '~/app/utils/const';
+import { useState } from 'react';
+import { Button } from 'kl-design-system/atoms/button';
+import EmbeddedData from '../../../images/embedded-data.svg';
+import TroubleFree from '../../../images/trouble-free.svg';
+import SeamlessDev from '../../../images/seamless-dev.svg';
+import FasterDev from '../../../images/faster-dev.svg';
+import ConfigDevops from '../../../images/devops/config-devops.svg';
+import CreateDevops from '../../../images/devops/create-project-devops.svg';
+import DeployDevops from '../../../images/devops/deploy-devops.svg';
+import SetupDevops from '../../../images/devops/setup-devops.svg';
+import Cover from '../../../images/devops/cover-devops.svg';
+import SectionWrapper from '../website/section-wrapper';
+
+export const AdvantageSection = () => {
+  const [selectedTab, setSelectedTab] = useState(
+    consts.devops.advantages[0].id
+  );
+
+  const getTab = () => {
+    switch (selectedTab) {
+      case 'trouble-free':
+        return (
+          <img
+            alt="trouble-fre"
+            src={TroubleFree.src}
+            className="h-full w-full object-cover"
+          />
+        );
+      case 'embedded-data':
+        return (
+          <img
+            alt="embedded-data"
+            src={EmbeddedData.src}
+            className="h-full w-full object-cover"
+          />
+        );
+      case 'seamless-env':
+        return (
+          <img
+            alt="seamless-env"
+            src={SeamlessDev.src}
+            className="h-full w-full object-cover"
+          />
+        );
+      case 'faster-dev':
+      default:
+        return (
+          <img
+            alt="faster-dev"
+            src={FasterDev.src}
+            className="h-full w-full object-cover"
+          />
+        );
+    }
+  };
+
+  return (
+    <HorizontalTopTabDevops
+      tabContainerClassName="grid grid-cols-4 xl:!grid-cols-[256px_224px_224px_224px] 2xl:!grid-cols-4  gap-3xl lg:!gap-5xl md:!pt-8xl lg:!pt-10xl px-10xl"
+      tabs={consts.devops.advantages}
+      onTabChange={(item) => setSelectedTab(item.id)}
+      activeTab={selectedTab}
+      tab={getTab()}
+    />
+  );
+};
+
+export const DiscoverSection = () => {
+  return (
+    <div className="flex flex-col 2xl:pt-10xl">
+      <Discover
+        className="grid grid-cols-1 md:!grid-cols-2 lg:!grid-cols-3 2xl:!grid-cols-4 gap-3xl lg:!gap-5xl "
+        title={
+          <>
+            Discover <span className="text-text-primary">DevOps</span>
+          </>
+        }
+        desc="Simplify software development and testing with automated environments, tools, and configurations"
+        features={consts.devops.features}
+      />
+    </div>
+  );
+};
+
+export const GetStartedSection = () => {
+  const [selectedTab, setSelectedTab] = useState(
+    consts.devops.getstarted[0].id
+  );
+  const getTab = () => {
+    switch (selectedTab) {
+      case 'config':
+        return (
+          <div className="relative h-full overflow-hidden flex items-center justify-center lg:!items-start lg:!justify-start">
+            <img alt="config" src={ConfigDevops.src} />
+          </div>
+        );
+      case 'deploy':
+        return (
+          <div className="relative h-full overflow-hidden flex items-center justify-center lg:!items-start lg:!justify-start">
+            <img alt="deploy" src={DeployDevops.src} />
+          </div>
+        );
+      case 'setup':
+        return (
+          <div className="relative h-full p-xl lg:!p-0 overflow-hidden flex items-center justify-center lg:!items-start lg:!justify-start">
+            <img alt="setup" src={SetupDevops.src} />
+          </div>
+        );
+      case 'create':
+      default:
+        return (
+          <div className="h-full flex items-center justify-center flex items-center lg:!items-start">
+            <img alt="create" src={CreateDevops.src} />
+          </div>
+        );
+    }
+  };
+
+  return (
+    <GetStarted
+      title="In 4 simple steps"
+      tabs={consts.devops.getstarted}
+      onTabChange={(item) => setSelectedTab(item.id || '')}
+      tab={getTab()}
+      activeTab={selectedTab}
+    />
+  );
+};
+
+export const SuccessStorySection = () => {
+  return (
+    <div className="flex flex-col py-6xl md:!py-8xl 2xl:!pt-10xl">
+      {/** @ts-ignore * */}
+      <SuccessStories tabs={successStories} />
+    </div>
+  );
+};
+
+const ReadyTo = () => {
+  return <ReadyToOps />;
+};
+
+const DevopsPage = () => {
+  return (
+    <div>
+      <Container className="relative flex justify-center lg:justify-start">
+        <div className="flex flex-col px-3xl md:!px-5xl lg:!px-8xl xl:!px-11xl 2xl:!px-12xl z-10">
+          <div className="md:absolute inset-0 distribution-cover-graph z-0" />
+          <div className="flex flex-col lg:!flex-row items-center lg:!items-start lg:!gap-10xl lg:!py-10xl 2xl:!py-10xl z-10 text-center lg:!text-left xl:max-w-[1024px] 2xl:max-w-[1120px] box-content">
+            <div className="flex flex-col gap-6xl md:!max-w-[630px] py-6xl md:!py-8xl lg:!py-0">
+              <div className="flex flex-col items-center lg:!items-start gap-3xl">
+                <Chips.Chip item="infraops" label="DevOps" />
+                <h1 className="heading4xl-marketing md:!heading5xl-marketing lg:!heading6xl-marketing text-text-default">
+                  <span className="text-text-primary">NoOps</span> in any stage
+                  of development
+                </h1>
+                <p className="bodyLg-medium md:!bodyXl-medium text-text-soft">
+                  Dev-Prod parity for developers, by developers: DevOps
+                  automation that redefines productivity
+                </p>
+              </div>
+              <div className="flex md:!flex-row flex-col gap-4xl md:!items-center justify-center lg:!justify-start">
+                <div>
+                  <Button
+                    block
+                    size="lg"
+                    content="Start your free trial"
+                    variant="primary"
+                  />
+                </div>
+                <div>
+                  <Button
+                    block
+                    size="lg"
+                    content="Schedule a demo"
+                    variant="basic"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="z-10 pb-6xl">
+              <img
+                src={Cover.src}
+                className="lg:scale-[1.3] md:min-w-[394px] lg:pt-5xl"
+              />
+            </div>
+          </div>
+        </div>
+      </Container>
+      <Container className="flex flex-col">
+        <SectionWrapper>
+          <AdvantageSection />
+          <DiscoverSection />
+          <GetStartedSection />
+          <SuccessStorySection />
+        </SectionWrapper>
+        <ReadyTo />
+      </Container>
+    </div>
+  );
+};
+
+export default DevopsPage;
diff --git a/src/apps/devdoc/app/components/page/distribution.tsx b/src/apps/devdoc/app/components/page/distribution.tsx
new file mode 100644
index 000000000..dd807b33b
--- /dev/null
+++ b/src/apps/devdoc/app/components/page/distribution.tsx
@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import Container from '~/app/components/container';
+import Discover from '~/app/components/website/discover-component';
+import ReadyToOps from '~/app/components/website/ready-to-ops';
+import GetStarted from '~/app/components/website/get-started';
+import SuccessStories from '~/app/components/website/success-stories';
+import { Button } from 'kl-design-system/atoms/button';
+import Chips from 'kl-design-system/atoms/chips';
+
+import consts from '~/app/utils/const';
+
+import { successStories } from '~/app/utils/dummy-data';
+import Cover from '../../../images/distribution/distribution-cover.svg';
+import BuildDis from '../../../images/distribution/build-distribution.svg';
+import CreateDis from '../../../images/distribution/create-distribution.svg';
+import DistributeDis from '../../../images/distribution/distribute-distribution.svg';
+import SectionWrapper from '../website/section-wrapper';
+
+const DiscoverSection = () => {
+  return (
+    <div className="flex flex-col 2xl:pt-10xl">
+      <Discover
+        className="grid grid-cols-1 md:!grid-cols-2 lg:!grid-cols-3 2xl:!grid-cols-4 gap-3xl lg:!gap-5xl "
+        title={
+          <>
+            Discover <span className="text-text-primary">Distribution</span>
+          </>
+        }
+        desc="Dive-in to know how Distribution can transform the container image management"
+        features={consts.distribution.features}
+      />
+    </div>
+  );
+};
+
+const GetStartedSection = () => {
+  const [selectedTab, setSelectedTab] = useState(
+    consts.distribution.getstarted[0].id
+  );
+  const getTab = () => {
+    switch (selectedTab) {
+      case 'push':
+        return (
+          <div className="relative h-full overflow-hidden flex items-end justify-center lg:!items-start lg:!justify-start">
+            <img alt="push" src={BuildDis.src} />
+          </div>
+        );
+      case 'distribute':
+        return (
+          <div className="relative h-full overflow-hidden flex items-center justify-center lg:!items-start lg:!justify-start">
+            <img alt="distribute" src={DistributeDis.src} />
+          </div>
+        );
+      case 'create':
+      default:
+        return (
+          <div className="relative h-full overflow-hidden flex items-end justify-center lg:!items-start lg:!justify-start">
+            <img
+              alt="create"
+              src={CreateDis.src}
+              className="lg:absolute bottom-0"
+            />
+          </div>
+        );
+    }
+  };
+
+  return (
+    <GetStarted
+      title="In 3 simple steps"
+      tabs={consts.distribution.getstarted}
+      onTabChange={(item) => setSelectedTab(item.id || '')}
+      tab={getTab()}
+      activeTab={selectedTab}
+    />
+  );
+};
+
+const SuccessStorySection = () => {
+  return (
+    <div className="flex flex-col 2xl:pt-10xl">
+      {/** @ts-ignore * */}
+      <SuccessStories tabs={successStories} />
+    </div>
+  );
+};
+
+const ReadyTo = () => {
+  return <ReadyToOps />;
+};
+
+const DistributionRoot = () => {
+  return (
+    <div>
+      <Container className="relative flex justify-center lg:justify-start">
+        <div className="flex flex-col px-3xl lg:!px-8xl 2xl:!px-12xl z-10">
+          <div className="md:absolute inset-0 distribution-cover-graph z-0" />
+          <div className="flex flex-col lg:!flex-row items-center lg:!items-start lg:!gap-10xl lg:!py-10xl 2xl:!py-10xl z-10 text-center lg:!text-left">
+            <div className="flex flex-col gap-6xl md:!max-w-[630px] py-6xl md:!py-8xl lg:!py-0">
+              <div className="flex flex-col items-center lg:!items-start gap-3xl">
+                <Chips.Chip item="distribution" label="Distributions" />
+                <h1 className="heading4xl-marketing md:!heading5xl-marketing lg:!heading6xl-marketing text-text-default">
+                  Package & Distribute your Environments
+                </h1>
+                <p className="bodyLg-medium md:!bodyXl-medium text-text-soft">
+                  Cloud-accelerated Build System, Container Registry, & Helm
+                  Repos built to distribute and deploy with ease
+                </p>
+              </div>
+              <div className="flex md:!flex-row flex-col gap-4xl md:!items-center justify-center lg:!justify-start">
+                <div>
+                  <Button
+                    block
+                    size="lg"
+                    content="Start your free trial"
+                    variant="primary"
+                  />
+                </div>
+                <div>
+                  <Button
+                    block
+                    size="lg"
+                    content="Schedule a demo"
+                    variant="basic"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="z-10 pb-6xl">
+              <img src={Cover.src} className="lg:scale-[1.3]" />
+            </div>
+          </div>
+        </div>
+      </Container>
+      <Container className="flex flex-col">
+        <SectionWrapper>
+          <DiscoverSection />
+          <GetStartedSection />
+          <SuccessStorySection />
+        </SectionWrapper>
+        <ReadyTo />
+      </Container>
+    </div>
+  );
+};
+
+export default DistributionRoot;
diff --git a/src/apps/devdoc/app/components/page/index.tsx b/src/apps/devdoc/app/components/page/index.tsx
new file mode 100644
index 000000000..d0fc4cc0e
--- /dev/null
+++ b/src/apps/devdoc/app/components/page/index.tsx
@@ -0,0 +1,535 @@
+import { Button } from 'kl-design-system/atoms/button';
+import { Avatar } from 'kl-design-system/atoms/avatar';
+import Profile from 'kl-design-system/molecule/profile';
+import { AWSlogoFill, TwitterNewLogo, UsersThree } from '@jengaicons/react';
+import Link from 'next/link';
+import { ReactNode } from 'react';
+import ProgressTracker from '~/app/components/progress-tracker';
+import { Graph, GraphItem } from '~/app/components/graph';
+import ReadyToOps from '~/app/components/website/ready-to-ops';
+import Container from '~/app/components/container';
+
+import { cn } from '~/app/utils/commons';
+import illustration from '../../../images/illustraion1.svg';
+import devopsIcon from '../../../images/home/devops.svg';
+import infraopsIcon from '../../../images/home/infraops.svg';
+import distributionIcon from '../../../images/home/distribution.svg';
+import SectionWrapper from '../website/section-wrapper';
+
+const suites = [
+  {
+    title: 'DevOps',
+    desc: 'Self-Serve environments crafted for development, staging 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',
+    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',
+    imgPad: 'w-[160px]',
+    img: <img src={distributionIcon.src} />,
+    to: 'distribution',
+  },
+];
+
+const teamTasks = [
+  {
+    title: 'Develop, Git Push',
+    color: '#2563EB',
+  },
+  {
+    title: 'CI/CD',
+    color: '#D97706',
+  },
+  {
+    title: 'DevOps',
+    color: '#2563EB',
+  },
+  {
+    title: 'Environments',
+    color: '#16A34A',
+  },
+  {
+    title: 'Run Local Env',
+    color: '#2563EB',
+  },
+];
+
+const messages = [
+  {
+    title: 'Astroman',
+    subtitle: 'subtitle',
+    company: <TwitterNewLogo size={24} />,
+    message:
+      'We use @Kloudlite on a daily basis for several internal processes, and I cannot rave enough about them. Incredible flexibility and features combined with super intuitive UI',
+    time: '10:01 PM · Apr 7, 2022',
+  },
+  {
+    title: 'Astroman 1',
+    subtitle: 'subtitle',
+    company: <TwitterNewLogo size={24} />,
+    message:
+      'We use @Kloudlite on a daily basis for several internal processes, and I cannot rave enough about them. Incredible flexibility and features combined with super intuitive UI',
+    time: '10:01 PM · Apr 7, 2022',
+  },
+  {
+    title: 'Astroman 2',
+    subtitle: 'subtitle',
+    company: <TwitterNewLogo size={24} />,
+    message:
+      'We use @Kloudlite on a daily basis for several internal processes, and I cannot rave enough about them. Incredible flexibility and features combined with super intuitive UI',
+    time: '10:01 PM · Apr 7, 2022',
+  },
+];
+
+const tutorials = [
+  {
+    title: 'Get started with Kl-InfraOps',
+  },
+  {
+    title: 'Keep building with Kl-DevOps',
+  },
+  {
+    title: 'Explore further into Kl-Distribution',
+  },
+];
+
+const Partners = () => {
+  return (
+    <div>
+      <div className="hidden md:!flex flex-row items-center justify-center flex-wrap gap-8xl">
+        <AWSlogoFill size={56} />
+        <AWSlogoFill size={56} />
+        <AWSlogoFill size={56} />
+        <AWSlogoFill size={56} />
+        <AWSlogoFill size={56} />
+      </div>
+      <div className="flex md:!hidden flex-row items-center justify-center flex-wrap gap-5xl">
+        <AWSlogoFill size={40} />
+        <AWSlogoFill size={40} />
+        <AWSlogoFill size={40} />
+        <AWSlogoFill size={40} />
+      </div>
+    </div>
+  );
+};
+
+const TeamTaskCard = ({
+  color,
+  title,
+}: {
+  color: string;
+  title: ReactNode;
+}) => {
+  return (
+    <div className="bg-surface-basic-subdued p-lg md:!px-2xl md:!py-xl flex flex-col-reverse xl:!flex-row xl:!items-center gap-lg md:!gap-2xl">
+      <div className="flex flex-col gap-lg flex-1">
+        <div
+          className="h-lg w-[44px] rounded-full"
+          style={{ background: color }}
+        />
+        <div className="headingMd text-text-default hidden md:!block">
+          {title}
+        </div>
+      </div>
+      <div className="headingMd text-text-default block md:!hidden">
+        {title}
+      </div>
+      <Avatar color="one" size="md" />
+    </div>
+  );
+};
+
+const MessageCard = ({
+  title,
+  subtitle,
+  company,
+  message,
+  time,
+}: {
+  title: string;
+  subtitle: string;
+  company: ReactNode;
+  message: ReactNode;
+  time: ReactNode;
+}) => {
+  return (
+    <div className="flex flex-col justify-between gap-3xl p-3xl bg-surface-basic-default min-h-[224px]">
+      <div className="flex flex-row items-center gap-3xl">
+        <span className="flex-1">
+          <Profile name={title} subtitle={subtitle} color="one" size="md" />
+        </span>
+        <span>{company}</span>
+      </div>
+      <p className="bodyMd text-text-soft line-clamp-3">{message}</p>
+      <span className="bodySm text-text-soft">{time}</span>
+    </div>
+  );
+};
+
+const UntoldCard = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div className={cn('p-4xl bg-surface-basic-default', className)}>
+      {children}
+    </div>
+  );
+};
+
+const TutorialItemCard = ({
+  logo,
+  children,
+  to,
+}: {
+  logo?: any;
+  children: ReactNode;
+  to: string;
+}) => {
+  return (
+    <Link href={to} className="flex flex-row items-center gap-xl">
+      <span
+        className={cn(
+          'h-[52px] w-[52px] rounded',
+          !logo ? 'bg-surface-basic-subdued' : ''
+        )}
+      >
+        {logo}
+      </span>
+      <span className="headingMd-marketing xl:headingLg-marketing text-text-default">
+        {children}
+      </span>
+    </Link>
+  );
+};
+
+const TutorialCard = () => {
+  return (
+    <UntoldCard className="flex flex-col gap-4xl h-full">
+      <span className="bodyLg-medium text-text-disabled">Latest tutorials</span>
+      <div className="flex flex-col gap-2xl">
+        {tutorials.map((tut) => (
+          <TutorialItemCard key={tut.title} to="/">
+            {tut.title}
+          </TutorialItemCard>
+        ))}
+      </div>
+    </UntoldCard>
+  );
+};
+
+const FeaturedCard = () => {
+  return (
+    <UntoldCard className="flex flex-col gap-3xl h-full">
+      <div className="flex flex-col">
+        <span className="bodyLg-medium text-text-disabled">Featured</span>
+        <span className="heading2xl-marketing xl:heading3xl-marketing text-text-default">
+          Develop, Deploy, Distribute
+        </span>
+      </div>
+      <div className="bg-surface-basic-subdued h-[160px]" />
+      <p className="bodyMd text-text-soft">
+        From developing the code to deploying to, distributing, we got you
+        covered at each touch point.
+      </p>
+    </UntoldCard>
+  );
+};
+
+const CommunityCard = () => {
+  return (
+    <UntoldCard className="flex flex-col gap-3xl h-full min-h-[256px] max-h-[288px]">
+      <span className="p-2xl rounded-full border border-border-disabled w-fit">
+        <UsersThree size={32} />
+      </span>
+      <div className="flex flex-col">
+        <span className="bodyLg-medium text-text-disabled">Community</span>
+        <span className="heading2xl-marketing xl:heading3xl-marketing text-text-default">
+          Stay up to date with all that&apos;s tech
+        </span>
+      </div>
+      <Button
+        content="Join the Community"
+        variant="primary-outline"
+        size="md"
+      />
+    </UntoldCard>
+  );
+};
+
+const progressItems = [
+  {
+    title: 'We are committed to constant improvement in serving our community.',
+    subtitle: '10:01 PM · Apr 7, 2022',
+  },
+  {
+    title:
+      'Stay tuned for the latest versions of our features, modules, and applications',
+    subtitle: '10:01 PM · Apr 7, 2022',
+  },
+];
+
+const ChangeLogCard = () => {
+  return (
+    <UntoldCard className="flex flex-col gap-3xl h-full min-h-[256px]">
+      <span className="bodyLg-medium text-text-disabled">Changelog</span>
+      <ProgressTracker
+        items={progressItems.map((pi) => ({
+          id: pi.title + pi.subtitle,
+          render: () => (
+            <div className="flex flex-col gap-lg">
+              <span className="headingMd-marketing xl:headingLg-marketing text-text-default">
+                {pi.title}
+              </span>
+              <span className="bodySm text-text-soft">{pi.subtitle}</span>
+            </div>
+          ),
+        }))}
+      />
+    </UntoldCard>
+  );
+};
+
+const SuiteCard = ({
+  title,
+  img,
+  imgPad,
+  desc,
+  to,
+}: {
+  title: string;
+  img: any;
+  imgPad: string;
+  desc: string;
+  to: string;
+}) => {
+  return (
+    <Link
+      href={to}
+      key={title}
+      className="bg-surface-basic-default flex flex-col h-full md:min-h-[384px] xl:max-h-[416px] xl:min-h-[416px]"
+    >
+      <span
+        className={cn(
+          'min-h-[224px] self-center flex items-center justify-center',
+          imgPad
+        )}
+      >
+        {img}
+      </span>
+      <div className="flex flex-col gap-3xl px-4xl pb-4xl md:!p-xl md:!pt-0 xl:!px-4xl xl:!pb-4xl">
+        <span className="heading3xl-marketing xl:!heading4xl-marketing text-text-default">
+          {title}
+        </span>
+        <span className="bodyLg-medium xl:!bodyXl-medium text-text-strong line-clamp-3">
+          {desc}
+        </span>
+      </div>
+    </Link>
+  );
+};
+
+const SuiteSection = () => {
+  return (
+    <SectionWrapper className="gap-7xl">
+      <h2 className="heading3xl-marketing md:!heading4xl-marketing xl:!heading5xl-marketing text-text-default text-center">
+        Dive in: Kloudlite suite
+      </h2>
+      <Graph className="-mx-10xl">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-5xl px-10xl md:!py-8xl xl:!py-10xl">
+          {suites.map((suite) => (
+            <GraphItem key={suite.title}>
+              <SuiteCard {...suite} />
+            </GraphItem>
+          ))}
+        </div>
+      </Graph>
+    </SectionWrapper>
+  );
+};
+
+const TeamTaskSection = () => {
+  return (
+    <SectionWrapper className="md:!flex-row lg:m-0 xl:m-auto lg:!px-8xl">
+      <div className="flex flex-col gap-3xl md:gap-8xl justify-center md:max-w-[384px] mr-10xl">
+        <h2 className="heading3xl-marketing md:!heading4xl-marketing xl:!heading5xl-marketing text-text-default">
+          Why <br className="hidden md:!block" />
+          Kloudlite?
+        </h2>
+        <p className="bodyLg-medium xl:!bodyXl-medium text-text-soft">
+          A transformative solution for modern DevOps needs, built with
+          precision and a deep understanding of developer and platform engineer
+          challenges
+        </p>
+      </div>
+      <div className="flex flex-col flex-1 relative pt-6xl md:!pt-0">
+        <h4 className="headingMd-marketing md:!headingXl-marketing text-text-default text-center relative md:!absolute md:!left-1/2 md:!transform md:!-translate-x-1/2 z-[1]">
+          Your team’s task
+        </h4>
+        <Graph className="-mx-10xl">
+          <div className="px-10xl py-3xl md:py-8xl">
+            <GraphItem>
+              <div className="flex p-xl md:!p-5xl flex-row bg-gradient-to-b from-[#E4E4E7] to-[#F3F4F6] max-h-[512px] 2xl:min-w-[640px] overflow-hidden">
+                <div className="flex flex-col gap-xl md:!gap-5xl flex-1">
+                  {teamTasks.map((tt) => (
+                    <TeamTaskCard
+                      key={tt.title}
+                      color={tt.color}
+                      title={tt.title}
+                    />
+                  ))}
+                </div>
+                <div className="ml-xl md:!ml-8xl flex flex-col gap-xl md:!gap-5xl flex-1">
+                  {teamTasks.map((tt) => (
+                    <TeamTaskCard
+                      key={tt.title}
+                      color={tt.color}
+                      title={tt.title}
+                    />
+                  ))}
+                </div>
+                <div />
+              </div>
+            </GraphItem>
+          </div>
+        </Graph>
+      </div>
+    </SectionWrapper>
+  );
+};
+
+const _DontBelieve = () => {
+  return (
+    <SectionWrapper className="gap-7xl">
+      <h2 className="heading3xl-marketing md:!heading4xl-marketing xl:!heading5xl-marketing text-text-default text-center">
+        Don&apos;t believe? Read for yourself..
+      </h2>
+      <Graph className="-mx-10xl" blurSize="md" responsive>
+        <div className="grid grid-cols-1 md:!grid-cols-3 gap-5xl px-10xl xl:py-10xl">
+          {messages.map((message) => (
+            <GraphItem key={message.title}>
+              <MessageCard {...message} />
+            </GraphItem>
+          ))}
+        </div>
+      </Graph>
+    </SectionWrapper>
+  );
+};
+
+const Exploring = () => {
+  return (
+    <SectionWrapper className="gap-7xl">
+      <h2 className="heading3xl-marketing md:!heading4xl-marketing xl:!heading5xl-marketing text-text-default text-center">
+        Unveil the untold - Keep exploring
+      </h2>
+      <Graph className="-mx-10xl" responsive>
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-[480px_512px] 2xl:grid-cols-[544px_544px] gap-3xl xl:!gap-5xl px-10xl xl:py-10xl">
+          <GraphItem>
+            <TutorialCard />
+          </GraphItem>
+          <GraphItem>
+            <FeaturedCard />
+          </GraphItem>
+          <GraphItem>
+            <CommunityCard />
+          </GraphItem>
+          <GraphItem>
+            <ChangeLogCard />
+          </GraphItem>
+        </div>
+      </Graph>
+    </SectionWrapper>
+  );
+};
+
+const ReadyTo = () => {
+  return <ReadyToOps />;
+};
+
+const _PartnerSection = () => {
+  return (
+    <SectionWrapper className="py-8xl px-5xl flex-col gap-6xl">
+      <p className="headingMd-marketing md:!headingLg-marketing text-text-strong text-center">
+        Join the cult of our early adopters, and discover the power of Kloudlite
+      </p>
+      <Partners />
+    </SectionWrapper>
+  );
+};
+
+const IndexRoot = () => {
+  return (
+    <div>
+      <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]">
+              <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
+            </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
+            </p>
+          </div>
+          <div className="pt-6xl flex md:!flex-row flex-col gap-4xl md:items-center justify-center">
+            <div>
+              <Button
+                block
+                size="lg"
+                content="Get started for free"
+                to="https://auth.kloudlite.io"
+                toLabel="href"
+                LinkComponent={Link}
+                variant="primary"
+              />
+            </div>
+            <div>
+              <Button
+                block
+                size="lg"
+                content="Schedule a demo"
+                variant="basic"
+              />
+            </div>
+          </div>
+        </div>
+        <div className="w-full">
+          <img
+            alt="illustration"
+            src={illustration.src}
+            className="illustration"
+          />
+        </div>
+        {/** <PartnerSection /> * */}
+        <SuiteSection />
+        <TeamTaskSection />
+        {/** <DontBelieve />* */}
+        <Exploring />
+        <ReadyTo />
+      </Container>
+    </div>
+  );
+};
+
+export default IndexRoot;
diff --git a/src/apps/devdoc/app/components/page/infraops.tsx b/src/apps/devdoc/app/components/page/infraops.tsx
new file mode 100644
index 000000000..71806d478
--- /dev/null
+++ b/src/apps/devdoc/app/components/page/infraops.tsx
@@ -0,0 +1,255 @@
+import { TextInput } from 'kl-design-system/atoms/input';
+import { ArrowRight, GithubLogoFill } from '@jengaicons/react';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import Container from '~/app/components/container';
+import CodeEditorPlaceholder from '~/app/components/website/code-editor-placeholder';
+import HorizontalTopTab from '~/app/components/website/horizontal-top-tab';
+import Discover from '~/app/components/website/discover-component';
+import GetStarted from '~/app/components/website/get-started';
+import ReadyToOps from '~/app/components/website/ready-to-ops';
+import SuccessStories from '~/app/components/website/success-stories';
+import { successStories } from '~/app/utils/dummy-data';
+import consts from '~/app/utils/const';
+import { Button } from 'kl-design-system/atoms/button';
+import Chips from 'kl-design-system/atoms/chips';
+import NodePoolImg from '../../../images/nodepool-simple-to-use.svg';
+import FlexibleImage from '../../../images/flexible-illustration.svg';
+import CostIllustration from '../../../images/cost-illustration.svg';
+import providersImage from '../../../images/infraops/providers.svg';
+import SectionWrapper from '../website/section-wrapper';
+import cover from '../../../images/infraops/cover.svg';
+
+const AdvantageSection = () => {
+  const [selectedTab, setSelectedTab] = useState(
+    consts.infraops.advantages[0].id
+  );
+
+  const getTab = () => {
+    switch (selectedTab) {
+      case 'flexible':
+        return (
+          <img
+            alt="flexible"
+            src={FlexibleImage.src}
+            className="h-full w-full object-cover"
+          />
+        );
+      case 'cost-effective':
+        return (
+          <img
+            alt="cost-effective"
+            src={CostIllustration.src}
+            className="h-full w-full object-cover"
+          />
+        );
+      case 'simple-to-use':
+      default:
+        return (
+          <div className="p-4xl lg:!p-8xl">
+            <div className="max-w-[878px] m-auto flex flex-col-reverse gap-3xl md:!flex-row items-center justify-center">
+              <img
+                alt="simple-to-use"
+                src={NodePoolImg.src}
+                className="shadow-filter md:w-1/2 lg:!w-auto"
+              />
+              <span className="text-icon-disabled -rotate-90 md:rotate-0">
+                <ArrowRight size={32} />
+              </span>
+              <div className="rounded border border-border-default bg-surface-basic-default p-3xl shadow-filter">
+                <span className="">
+                  <GithubLogoFill size={60} />
+                </span>
+              </div>
+            </div>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <HorizontalTopTab
+      tabs={consts.infraops.advantages}
+      tabContainerClassName="grid grid-cols-3 gap-3xl lg:!gap-5xl md:!pt-8xl lg:!pt-10xl px-10xl"
+      onTabChange={(item) => setSelectedTab(item.id)}
+      activeTab={selectedTab}
+      tab={getTab()}
+    />
+  );
+};
+
+const GetStartedSection = () => {
+  const [selectedTab, setSelectedTab] = useState(
+    consts.infraops.getstarted[0].id
+  );
+  const getTab = () => {
+    switch (selectedTab) {
+      case 'create':
+        return (
+          <motion.div
+            className="relative h-full max-w-[521px] m-auto overflow-hidden"
+            style={{
+              filter:
+                'drop-shadow(0px 2px 16px rgba(33, 43, 54, 0.08)) drop-shadow(0px 0px 0px rgba(6, 44, 82, 0.10))',
+            }}
+          >
+            <div className="flex flex-col-reverse md:!flex-row items-center justify-between relative md:!absolute -bottom-[30px] right-0 left-0 md:p-2xl xl:!p-0">
+              <div className="rounded-lg border border-border-default p-4xl flex flex-col gap-3xl w-[305px] bg-surface-basic-active pointer-events-none">
+                <div className="flex flex-col gap-3xl pointere">
+                  <TextInput label="Name" value="Dev cluster 3" size="md" />
+                  <TextInput
+                    label="Nodepool 1"
+                    placeholder="Min 2 nodes"
+                    size="md"
+                  />
+                  <TextInput placeholder="Max 5 nodes" size="md" />
+                </div>
+                <Button content="Create" block />
+              </div>
+              <span className="text-icon-disabled -rotate-90 md:!rotate-0">
+                <ArrowRight size={32} />
+              </span>
+              <div className="rounded border border-border-default bg-surface-basic-default p-3xl shadow-filter">
+                <span className="">
+                  <GithubLogoFill size={60} />
+                </span>
+              </div>
+            </div>
+          </motion.div>
+        );
+      case 'access':
+        return (
+          <motion.div
+            className="relative h-full max-w-[584px] m-auto overflow-hidden"
+            style={{
+              filter:
+                'drop-shadow(0px 2px 16px rgba(33, 43, 54, 0.08)) drop-shadow(0px 0px 0px rgba(6, 44, 82, 0.10))',
+            }}
+          >
+            <div className="flex flex-col-reverse md:!flex-row items-center justify-between relative md:!absolute bottom-0 right-0 left-0 px-2xl pt-2xl xl:!px-0 xl:!pt-0">
+              <div className="w-full h-full">
+                <CodeEditorPlaceholder />
+              </div>
+              <span className="text-icon-disabled -rotate-90 md:!rotate-0">
+                <ArrowRight size={32} />
+              </span>
+              <div className="rounded border border-border-default bg-surface-basic-default p-3xl shadow-filter">
+                <span className="">
+                  <GithubLogoFill size={60} />
+                </span>
+              </div>
+            </div>
+          </motion.div>
+        );
+      case 'attach':
+      default:
+        return (
+          <motion.div className="h-full flex items-center justify-center p-2xl md:!p-0">
+            <img src={providersImage.src} />
+          </motion.div>
+        );
+    }
+  };
+
+  return (
+    <GetStarted
+      title="In 3 simple steps"
+      tabs={consts.infraops.getstarted}
+      onTabChange={(item) => setSelectedTab(item.id || '')}
+      tab={getTab()}
+      activeTab={selectedTab}
+    />
+  );
+};
+
+const DiscoverSection = () => {
+  return (
+    <div className="flex flex-col py-6xl 2xl:pt-10xl">
+      <Discover
+        className="grid grid-cols-1 md:!grid-cols-2 lg:!grid-cols-3 2xl:!grid-cols-4 gap-3xl lg:!gap-5xl "
+        title={
+          <>
+            Discover <span className="text-text-primary">InfraOps</span>
+          </>
+        }
+        desc="Dive-in to know how InfraOps can transform your infrastructure management"
+        features={consts.infraops.features}
+      />
+    </div>
+  );
+};
+
+export const SuccessStorySection = () => {
+  return (
+    <div className="flex flex-col py-6xl md:!py-8xl 2xl:!pt-10xl">
+      {/** @ts-ignore * */}
+      <SuccessStories tabs={successStories} />
+    </div>
+  );
+};
+
+const ReadyTo = () => {
+  return <ReadyToOps />;
+};
+
+const InfraRoot = () => {
+  return (
+    <div>
+      <Container className="relative flex justify-center lg:justify-start">
+        <div className="flex flex-col px-3xl md:!px-5xl lg:!px-8xl xl:!px-11xl 2xl:!px-12xl z-10">
+          <div className="md:absolute inset-0 distribution-cover-graph z-0" />
+          <div className="flex flex-col lg:!flex-row items-center lg:!items-start lg:!gap-10xl lg:!py-10xl 2xl:!py-10xl z-10 text-center lg:!text-left xl:max-w-[1024px] 2xl:max-w-[1120px] box-content">
+            <div className="flex flex-col gap-6xl md:!max-w-[630px] py-6xl md:!py-8xl lg:!py-0">
+              <div className="flex flex-col items-center lg:!items-start gap-3xl">
+                <Chips.Chip item="infraops" label="InfraOps" />
+                <h1 className="heading4xl-marketing md:!heading5xl-marketing lg:!heading6xl-marketing text-text-default">
+                  Simple, cost-effective, cloud agnostic
+                </h1>
+                <p className="bodyLg-medium md:!bodyXl-medium text-text-soft">
+                  The freedom of cloud agnosticism with effortless
+                  infrastructure management—Any Provider, Any Scale, Absolute
+                  Security
+                </p>
+              </div>
+              <div className="flex md:!flex-row flex-col gap-4xl md:!items-center justify-center lg:!justify-start">
+                <div>
+                  <Button
+                    block
+                    size="lg"
+                    content="Start your free trial"
+                    variant="primary"
+                  />
+                </div>
+                <div>
+                  <Button
+                    block
+                    size="lg"
+                    content="Schedule a demo"
+                    variant="basic"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="z-10 pb-6xl">
+              <img
+                src={cover.src}
+                className="lg:scale-[1.3] md:min-w-[394px] lg:pt-5xl"
+              />
+            </div>
+          </div>
+        </div>
+      </Container>
+      <Container className="flex flex-col">
+        <SectionWrapper>
+          <AdvantageSection />
+          <DiscoverSection />
+          <GetStartedSection />
+          <SuccessStorySection />
+        </SectionWrapper>
+        <ReadyTo />
+      </Container>
+    </div>
+  );
+};
+
+export default InfraRoot;
diff --git a/src/apps/devdoc/app/components/page/privacy.tsx b/src/apps/devdoc/app/components/page/privacy.tsx
new file mode 100644
index 000000000..4043df741
--- /dev/null
+++ b/src/apps/devdoc/app/components/page/privacy.tsx
@@ -0,0 +1,220 @@
+const PrivacyRoot = () => {
+  return (
+    <div className="bg-surface-basic-subdued">
+      <div className="max-w-[1440px] m-auto px-3xl md:!px-8xl lg:!px-11xl xl:!px-13xl 2xl:!px-14xl pb-6xl md:!pb-8xl xl:!pb-10xl">
+        <h1 className="heading4xl-marketing md:!heading5xl-marketing lg:!heading6xl-marketing text-text-strong py-6xl md:!py-8xl xl:!py-10xl">
+          KLOUDLITE PRIVACY STATEMENT
+        </h1>
+        <div>
+          <div className="text-text-soft bodyLg">
+            Last updated: <span className="headingMd">12th Dec, 2023</span>
+          </div>
+          <div className="bodyLg text-text-strong flex flex-col gap-4xl pt-4xl">
+            <p className="bodyMd-semibold">SCOPE OF THIS PRIVACY STATEMENT</p>
+            <p>
+              Kloudlite Labs Pvt Ltd (Kloudlite), respects your privacy. This
+              Privacy Statement applies to personal data collected by Kloudlite
+              through the kloudlite.io website, and other websites/portals which
+              we operate and on which we post a direct link to this Privacy
+              Statement. This Privacy Statement may not apply to open source
+              project websites sponsored by Kloudlite. Such project websites may
+              have their own privacy statements, which we encourage you to
+              review. In certain cases, this Privacy Statement applies to
+              personal data collected by Kloudlite when Kloudlite makes this
+              Privacy Statement or a link to the Privacy Statement available in
+              a digital communication, paper form or in person (for example when
+              attending an event).
+            </p>
+            <p>
+              Please also note that co-branded websites (websites where
+              Kloudlite presents content together with one or more of our
+              business partners) may be governed by additional or different
+              privacy statements. Please refer to the privacy statement on those
+              websites for more information about applicable privacy practices.
+            </p>
+            <p>
+              As used in this Privacy Statement, “personal data” means any
+              information that relates to, is capable of being associated with,
+              describes, or could be linked to, an identified or identifiable
+              natural person (‘data subject’). An identifiable natural person is
+              one who can be identified, directly or indirectly, in particular
+              by reference to an identifier such as a name, an identification
+              number, location data, an online identifier or to one or more
+              factors specific to the physical, physiological, genetic, mental,
+              economic, cultural or social identity of that natural person.
+            </p>
+            <p className="bodyMd-semibold">
+              THE CATEGORIES OF PERSONAL DATA WE COLLECT
+            </p>
+
+            <p>
+              To the extent permitted by applicable law, the categories and
+              types of personal data collected directly from you may include,
+              without limitation:
+            </p>
+            <p>
+              <ul className="list-disc pl-5xl flex flex-col gap-xl">
+                <li>
+                  Contact information, including identifiers: Information used
+                  to communicate with you and verify your identity, such as
+                  first and last name, title, company name, email address,
+                  telephone number, and postal address;
+                </li>
+                <li>
+                  Account and commercial information: Information that Kloudlite
+                  maintains in association with your account, such as your
+                  account number, username/user ID, password, payment
+                  information, purchase records, information about your use of
+                  the product or service, information about your registration or
+                  participation in a class, exam, certification, training,
+                  webcast or other event, your preferred language and other
+                  preferences, credit and billing status and support inquiries.
+                </li>
+                <li>
+                  Professional or employment-related information: Information
+                  contained in your job inquiries or applications, such as
+                  resume, cover letter, age, education, professional history and
+                  contact details.
+                </li>
+                <li>
+                  Internet or other similar network activity: Information
+                  collected when you visit a website, such as IP address,
+                  browsing history, information on your interaction with the
+                  website, browser type and language, operating system,
+                  location, date and time;
+                </li>
+                <li>
+                  Location information: Information about your physical
+                  location, such as if you provide your postal address or based
+                  on your IP address if you visit a website; and
+                </li>
+
+                <li>
+                  Inferences: Information drawn from the personal data collected
+                  above, such as what topics you may be interested in based on
+                  the areas of the website you visit or what products you may be
+                  interested in based on purchase records.
+                </li>
+              </ul>
+            </p>
+            <p>
+              Kloudlite generally does not collect sensitive personal data,
+              which is data such as your religious or philosophical beliefs,
+              racial or ethnic origin, health or medical information (other than
+              for the purpose of responding to an accommodation request for an
+              event), genetic or biometric data, bank account information (other
+              than for the purpose of processing your order) or other similar
+              sensitive personal data as such term is defined under applicable
+              law. If Kloudlite reasonably needs to collect any sensitive
+              personal data from you, Kloudlite will obtain your consent for the
+              collection of such personal data as may be required under
+              applicable law.
+            </p>
+            <p className="bodyMd-semibold">
+              HOW WE COLLECT PERSONAL DATA (SOURCES OF DATA)
+            </p>
+            <p>
+              Kloudlite collects personal data directly from you and from other
+              categories of sources as described in more detail below. The
+              categories of personal data collected directly from you by
+              Kloudlite include all of the categories identified above in “The
+              Categories of Personal Data We Collect” section. Kloudlite
+              collects personal data directly from you when you interact with us
+              through our websites, including, without limitation, when you:
+            </p>
+            <p>
+              <ul className="list-disc pl-5xl flex flex-col gap-xl">
+                <li>Create a user account (individual or corporate);</li>
+                <li>Make online purchases or register products;</li>
+                <li>Request support;</li>
+                <li>
+                  Register for or participate in a class, exam, certification,
+                  training, webcast or other event;
+                </li>
+                <li>Request information or materials (e.g., whitepapers);</li>
+                <li>Participate in surveys or evaluations;</li>
+                <li>Participate in promotions, contests, or giveaways;</li>
+                <li>Apply for employment;</li>
+                <li>Submit questions or comments; or</li>
+                <li>
+                  Submit content or posts on our customer portal pages or other
+                  interactive webpages.
+                </li>
+              </ul>
+            </p>
+
+            <p>
+              Personal data we collect online may also be combined with personal
+              data you provide to us through offline channels such as through a
+              call center, during an interview or in conjunction with a
+              Kloudlite event you attend.
+            </p>
+            <p>
+              We may also collect information indirectly from you relating to
+              your use of our websites and response to our emails through the
+              use of various technology. The categories of personal data
+              collected in this manner are what we refer to above as Internet or
+              other similar network activity and inferences.
+            </p>
+            <p>
+              Collecting information in this manner allows us to analyze the
+              effectiveness of our websites and our marketing efforts,
+              personalize your experience and improve our interactions with you.
+              For more information about the technology, we employ for these
+              purposes, see the “Cookies and Other Technology” section below.
+            </p>
+            <p>
+              We may also supplement the personal data we collect from you with
+              additional personal data we receive from third parties, such as
+              your employer, our customers, and our business partners where you
+              purchase any of our products or services through such business
+              partners. The categories of personal data we receive from this
+              type of third party includes account and commercial information
+              and professional or employment-related information. We do this to
+              help us improve the overall accuracy of the information and its
+              completeness and to help us better tailor our interactions with
+              you.
+            </p>
+            <p>
+              From time to time, we may collect contact information through
+              other sources, such as list vendors. When we do so, we ask the
+              vendors to confirm that the information was legally acquired by
+              the third party and that we have the right to obtain it from them
+              and use it.
+            </p>
+            <p className="bodyMd-semibold">
+              HOW WE USE (PROCESS) YOUR PERSONAL DATA
+            </p>
+            <p>Kloudlite may use personal data we collect about you to:</p>
+            <p>
+              <ul className="list-disc pl-5xl flex flex-col gap-xl">
+                <li>
+                  Identify and Authenticate You. We use your personal data to
+                  verify your identity when you access and use our services and
+                  to ensure the security of your personal data. This includes
+                  your creation of an account that is associated with your
+                  personal data.
+                  <ul className="list-disc pl-5xl flex flex-col gap-xl">
+                    <li>
+                      The personal data that may be collected and processed for
+                      this purpose includes: name, title, company name, email
+                      address, telephone number, postal address, account number,
+                      username/user ID, password, preferred language and
+                      preferences. We process this information in order to
+                      comply with our contractual obligations to you. In other
+                      cases, it is in our legitimate business interests to be
+                      able to identify and authenticate you.
+                    </li>
+                  </ul>
+                </li>
+                <li>kkkk</li>
+              </ul>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrivacyRoot;
diff --git a/src/apps/devdoc/app/components/page/products.tsx b/src/apps/devdoc/app/components/page/products.tsx
new file mode 100644
index 000000000..97faa97ba
--- /dev/null
+++ b/src/apps/devdoc/app/components/page/products.tsx
@@ -0,0 +1,486 @@
+import { CheckCircleFill, ArrowRight, Stack } from '@jengaicons/react';
+import { Button } from 'kl-design-system/atoms/button';
+import Image from 'next/image';
+import { ReactNode } from 'react';
+import Container from '~/app/components/container';
+import ReadyToOps from '~/app/components/website/ready-to-ops';
+import { Graph, GraphItem } from '~/app/components/graph';
+import { cn } from '~/app/utils/commons';
+import Link from 'next/link';
+import Cover from '../../../images/product-landing/cover-product.svg';
+import InfraOps from '../../../images/product-landing/infra.svg';
+import DevOps from '../../../images/product-landing/dev.svg';
+import Dist from '../../../images/product-landing/dist.svg';
+import SectionWrapper from '../website/section-wrapper';
+
+const products = [
+  {
+    type: 'InfraOps',
+    title: 'Cloud-native at the core',
+    desc: 'Flexible & Cost Effective Kubernetes Cluster Management with simple and user-friendly interface',
+    features: [
+      {
+        title: 'Cloud agnostic',
+      },
+      {
+        title: 'Spot fleet',
+      },
+      {
+        title: 'GPU enabled nodes',
+      },
+      {
+        title: 'Auto scalable nodepools',
+      },
+    ],
+    link: '/infraops',
+    logo: InfraOps,
+  },
+  {
+    type: 'DevOps',
+    title: 'NoOps development',
+    desc: 'Self-Serve environments crafted for development, staging & production workloads',
+    features: [
+      {
+        title: 'Ephemeral workspaces',
+      },
+      {
+        title: 'Scalable environments',
+      },
+      {
+        title: 'Secure VPN for remote local',
+      },
+      {
+        title: 'Automated backing services',
+      },
+    ],
+    link: '/devops',
+    logo: DevOps,
+  },
+  {
+    type: 'Distribution',
+    title: 'Simply build and deploy',
+    desc: 'Cloud accelerated build system and container registry to build and ship containers anywhere',
+    features: [
+      {
+        title: 'Integrated container registry',
+      },
+      {
+        title: 'Auto build & deploy',
+      },
+      {
+        title: 'Major repo integrations',
+      },
+      {
+        title: 'Optimized building processes',
+      },
+    ],
+    link: '/distribution',
+    logo: Dist,
+  },
+];
+
+const benefitsItems = [
+  {
+    title: 'Developers',
+    items: [
+      {
+        title: 'Auto - Provision',
+        icon: Stack,
+      },
+      {
+        title: 'Run Anywhere',
+        icon: Stack,
+      },
+      {
+        title: 'Enhanced Application Security',
+        icon: Stack,
+      },
+      {
+        title: 'Collaborative Environments',
+        icon: Stack,
+      },
+      {
+        title: 'Comprehensive Monitoring and Insights',
+        icon: Stack,
+      },
+      {
+        title: 'Plug your own CICDs and Observability',
+        icon: Stack,
+      },
+      {
+        title: 'Streamlined Application Development',
+        icon: Stack,
+      },
+      {
+        title: 'Cost - Efficient Resource Management',
+        icon: Stack,
+      },
+    ],
+  },
+  {
+    title: 'Platform Engineers',
+    items: [
+      {
+        title: 'Faster Deployment',
+        icon: Stack,
+      },
+      {
+        title: 'Flexible Autoscaling',
+        icon: Stack,
+      },
+      {
+        title: 'Developer Centric',
+        icon: Stack,
+      },
+      {
+        title: 'Reduce Development Inner loop',
+        icon: Stack,
+      },
+      {
+        title: 'Simplified Infrastructure Management',
+        icon: Stack,
+      },
+      {
+        title: 'Build system for faster deployments',
+        icon: Stack,
+      },
+      {
+        title: 'Declarative Infrastructure, Projects, and Maintenance',
+        icon: Stack,
+      },
+      {
+        title: 'Effective and Efficient Development Process',
+        icon: Stack,
+      },
+    ],
+  },
+];
+
+const recommendedTabs = [
+  {
+    title: 'InfraOps',
+    desc: 'Dive in to set up your InfraOps effortlessly',
+    content: 'Explore our knowledge bank',
+    subContent:
+      'Tap into our extensive collection of resources and guides tailored to help you navigate around platform',
+    link: '/',
+    id: 'infraops',
+  },
+  {
+    title: 'DevOps',
+    desc: 'Dive in to set up your InfraOps effortlessly',
+    content: 'Explore our knowledge bank',
+    subContent:
+      'Tap into our extensive collection of resources and guides tailored to help you navigate around platform',
+    link: '/',
+    id: 'devops',
+  },
+  {
+    title: 'Distribution',
+    desc: 'Dive in to set up your InfraOps effortlessly',
+    content: 'Explore our knowledge bank',
+    subContent:
+      'Tap into our extensive collection of resources and guides tailored to help you navigate around platform',
+    link: '/',
+    id: 'distribution',
+  },
+];
+
+const ProductCards = ({
+  type,
+  title,
+  desc,
+  features,
+  logo,
+  link,
+}: {
+  type: string;
+  title: ReactNode;
+  desc: ReactNode;
+  features: typeof products;
+  link: string;
+  logo: string;
+}) => {
+  return (
+    <Container>
+      <div className="py-6xl md:!py-8xl lg:!py-10xl w-full flex flex-col lg:!flex-row gap-6xl lg:gap-10xl lg:min-h-[512px]">
+        <div className="flex flex-col gap-5xl flex-1 xl:w-[480px] 2xl:!w-[512px]">
+          <div className="flex flex-col gap-4xl">
+            <div className="flex flex-col gap-md">
+              <h5 className="bodyLg-medium lg:!bodyXl-medium text-text-disabled">
+                {type}
+              </h5>
+              <h3 className="heading3xl-marketing lg:!heading5xl-marketing text-text-default">
+                {title}
+              </h3>
+            </div>
+            <p className="bodyLg-medium lg:!bodyXl-medium text-text-soft">
+              {desc}
+            </p>
+          </div>
+          <ul className="flex flex-col gap-2xl bodyLg-medium text-text-soft">
+            {features?.map((f) => (
+              <li key={f.title} className="flex flex-row items-center gap-lg">
+                <span className="text-icon-primary">
+                  <CheckCircleFill size={16} />
+                </span>
+                <span>{f.title}</span>
+              </li>
+            ))}
+          </ul>
+          <Button
+            content={`Learn more about ${type}`}
+            suffix={<ArrowRight />}
+            LinkComponent={Link}
+            to={link}
+            toLabel="href"
+            variant="primary-outline"
+          />
+        </div>
+        <Graph className="-mx-10xl -my-8xl py-8xl ">
+          <div className="grid grid-cols-1 lg:h-full px-10xl ">
+            <GraphItem className="flex items-center justify-center min-w-[491px] xl:!min-w-[512px] xl:h-[512px] ">
+              <div className=" bg-surface-basic-subdued p-3xl w-full h-full md:!p-5xl xl:!p-0 flex items-center justify-center">
+                {/** @ts-ignore * */}
+                <img src={logo.src} />
+              </div>
+            </GraphItem>
+          </div>
+        </Graph>
+      </div>
+    </Container>
+  );
+};
+
+const Benefits = () => {
+  return (
+    <Container>
+      <div className="w-full py-6xl md:!py-8xl lg:!py-10xl flex flex-col gap-7xl lg:gap-10xl md:items-center lg:!items-start">
+        <div className="flex flex-col gap-3xl w-full text-center md:!w-[500px] lg:!w-auto">
+          <h1 className="heading3xl-marketing lg:!heading6xl-marketing text-text-default">
+            We understand because we&apos;ve been there too
+          </h1>
+          <p className="bodyLg-medium lg:!bodyXl-medium text-text-soft">
+            So, we meticulously engineered our platform to provide you the below
+            benefits
+          </p>
+        </div>
+        <Graph className="-m-10xl p-10xl">
+          <div className="grid grid-cols-1 md:!grid-cols-2 gap-3xl lg:!gap-5xl">
+            {benefitsItems.map((bi) => (
+              <div
+                key={bi.title}
+                className="grid grid-rows-[96px_auto] gap-3xl lg:!gap-5xl"
+              >
+                <GraphItem>
+                  <div className="bg-surface-basic-subdued p-2xl flex items-center justify-center heading3xl-marketing text-text-default h-full">
+                    {bi.title}
+                  </div>
+                </GraphItem>
+                <div className="grid grid-cols-1 lg:!grid-cols-2 gap-3xl lg:!gap-5xl">
+                  {bi.items.map((bii) => (
+                    <GraphItem key={bii.title}>
+                      <div className="xl:h-[192px] xl:w-[256px] bg-surface-basic-subdued flex flex-col gap-4xl p-4xl">
+                        <span className="rounded-full border-2 border-border-default w-fit p-2xl">
+                          <bii.icon size={32} />
+                        </span>
+                        <span className="headingMd lg:!bodyLg-medium text-text-default flex-1">
+                          {bii.title}
+                        </span>
+                      </div>
+                    </GraphItem>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Graph>
+      </div>
+    </Container>
+  );
+};
+
+const RecommendedItemButton = ({
+  title,
+  desc,
+  onClick,
+  active: _,
+}: {
+  title: ReactNode;
+  desc: ReactNode;
+  onClick: () => void;
+  active?: boolean;
+}) => {
+  return (
+    <div
+      onClick={onClick}
+      className="p-4xl bg-surface-basic-default flex flex-col  h-full gap-4xl"
+    >
+      <span className="heading2xl-marketing text-text-default">{title}</span>
+      <span className="bodyLg text-text-soft">{desc}</span>
+    </div>
+  );
+};
+
+const RecommendedCard = ({
+  content,
+  subContent,
+  image,
+  link: _,
+}: {
+  content: ReactNode;
+  subContent: ReactNode;
+  image?: string;
+  link: string;
+}) => {
+  return (
+    <div className="bg-surface-basic-default flex flex-col md:!flex-row gap-3xl lg:!gap-8xl md:!h-[416px]">
+      <div className="flex flex-col p-5xl gap-5xl md:w-1/2">
+        <div className="flex flex-col gap-4xl">
+          <div className="flex flex-col gap-md">
+            <span className="bodyLg-medium md:!bodyXl-medium text-text-disabled">
+              Recommended resources
+            </span>
+            <h3 className="heading3xl-marketing md:!heading4xl lg:!heading5xl-marketing text-text-default line-clamp-2">
+              {content}
+            </h3>
+          </div>
+          <p className="bodyLg-medium md:!bodyXl-medium text-text-soft line-clamp-3">
+            {subContent}
+          </p>
+        </div>
+        <Button
+          content="Explore Docs"
+          suffix={<ArrowRight />}
+          size="sm"
+          variant="basic"
+        />
+      </div>
+      <div className="h-[320px] md:!h-auto md:w-1/2">
+        {image ? (
+          <Image src={image} alt="success-story" />
+        ) : (
+          <div
+            className="w-full h-full"
+            style={{
+              background: 'linear-gradient(180deg, #E4E4E7 0%, #F3F4F6 100%)',
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const RecommendedResources = ({
+  tabs,
+  activeTab,
+  onTabChange,
+  tabContainerClassName,
+}: {
+  tabs: typeof recommendedTabs;
+  activeTab?: string;
+  onTabChange?: (value: (typeof recommendedTabs)[number]) => void;
+  tabContainerClassName?: string;
+  title?: string;
+}) => {
+  return (
+    <Graph className="-m-10xl p-10xl">
+      <div className="grid lg:!grid-rows-[auto_160px] gap-3xl lg:!gap-5xl">
+        <GraphItem>
+          <RecommendedCard
+            {...(tabs.find((tb) => tb.id === activeTab) || tabs[0])}
+          />
+        </GraphItem>
+        <div
+          className={cn(
+            'grid grid-cols-1 md:!grid-cols-3 gap-3xl lg:!gap-5xl',
+            tabContainerClassName
+          )}
+        >
+          {tabs.map((ss) => (
+            <GraphItem key={ss.subContent?.toString()}>
+              <RecommendedItemButton
+                {...ss}
+                onClick={() => onTabChange?.(ss)}
+                active={activeTab === ss.id}
+              />
+            </GraphItem>
+          ))}
+        </div>
+      </div>
+    </Graph>
+  );
+};
+
+const RecommendedSection = () => {
+  return (
+    <Container>
+      <div className="flex flex-col py-6xl md:!py-8xl lg:!py-10xl xl:!py-11xl w-full">
+        <RecommendedResources tabs={recommendedTabs} />
+      </div>
+    </Container>
+  );
+};
+
+const ReadyTo = () => {
+  return <ReadyToOps />;
+};
+
+const ProductRoot = () => {
+  return (
+    <div>
+      <Container className="relative flex justify-center lg:justify-start">
+        <div className="flex flex-col px-3xl md:!px-5xl lg:!px-8xl lg:!py-10xl py-6xl md:!py-8xl 2xl:px-11xl 2xl:py-10xl z-10 w-full items-center">
+          <div className="flex flex-col gap-6xl lg:!items-center text-center max-w-[870px]">
+            <div className="flex flex-col gap-3xl">
+              <h1 className="heading4xl-marketing md:!heading5xl-marketing lg:!heading6xl-marketing text-text-default">
+                Kloudlite - a One click console for your code to cloud journey
+              </h1>
+              <p className="bodyLg-medium md:!bodyXl-medium text-text-soft">
+                Upgrade your development and deployment by merging efficient
+                DevOps, scalable cloud infrastructure, and continuous
+                optimization into a seamless, productive workflow
+              </p>
+            </div>
+            <div className="flex md:!flex-row flex-col gap-4xl md:!items-center justify-center xl:!justify-start">
+              <div>
+                <Button
+                  block
+                  size="lg"
+                  content="Start your free trial"
+                  variant="primary"
+                />
+              </div>
+              <div>
+                <Button
+                  block
+                  size="lg"
+                  content="Schedule a demo"
+                  variant="basic"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+      <Container className="flex flex-col">
+        <SectionWrapper>
+          <div className="product-graph">
+            <img src={Cover.src} />
+          </div>
+
+          {products.map((p) => (
+            /** @ts-ignore * */
+            <ProductCards key={p.type} {...p} />
+          ))}
+          <Benefits />
+          <RecommendedSection />
+        </SectionWrapper>
+        <ReadyTo />
+      </Container>
+    </div>
+  );
+};
+
+export default ProductRoot;
diff --git a/src/apps/devdoc/app/components/page/terms-of-services.tsx b/src/apps/devdoc/app/components/page/terms-of-services.tsx
new file mode 100644
index 000000000..0de1990a8
--- /dev/null
+++ b/src/apps/devdoc/app/components/page/terms-of-services.tsx
@@ -0,0 +1,76 @@
+const TermsOfServicesRoot = () => {
+  return (
+    <div className="bg-surface-basic-subdued">
+      <div className="max-w-[1440px] m-auto px-3xl md:!px-8xl lg:!px-11xl xl:!px-13xl 2xl:!px-14xl pb-6xl md:!pb-8xl xl:!pb-10xl">
+        <h1 className="heading4xl-marketing md:!heading5xl-marketing lg:!heading6xl-marketing text-text-strong py-6xl md:!py-8xl xl:!py-10xl">
+          Terms of Serivces
+        </h1>
+        <div>
+          <div className="text-text-soft bodyLg">
+            Last updated:{' '}
+            <span className="headingMd">September 15th, 2021</span>
+          </div>
+          <div className="bodyLg text-text-strong flex flex-col gap-5xl pt-4xl">
+            <p className="text-text-soft">
+              Kloudlite.io (“Kloudlite”, “we”, “us”, “our”) takes your privacy
+              seriously. This Privacy Policy describes how we collect, use and
+              share personal information in connection with your use of the
+              website (the “Service” or “Services”).
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+              finibus vitae ex ut bibendum. Nullam a tincidunt elit, ac finibus
+              dolor. Donec pellentesque consectetur ante, a tempus nisl faucibus
+              ac. Morbi ac metus posuere, mattis dolor vitae, pharetra eros.
+              Vestibulum quis ex a eros laoreet efficitur at ut tortor. Sed id
+              libero interdum, dignissim augue quis, molestie enim. Morbi
+              sollicitudin mollis tincidunt. Cras feugiat lorem at consequat
+              ultricies. In hac habitasse platea dictumst. Proin ut tortor quis
+              tortor vestibulum cursus.
+            </p>
+            <p>
+              In vitae magna posuere, blandit felis a, consectetur leo. Etiam
+              augue magna, ullamcorper eget posuere at, bibendum ac leo. Nunc eu
+              cursus justo. Nullam vel lectus in nibh condimentum suscipit.
+              Pellentesque habitant morbi tristique senectus et netus et
+              malesuada fames ac turpis egestas. Suspendisse potenti. Mauris
+              placerat dolor vel est blandit, tincidunt cursus quam consectetur.
+              Suspendisse potenti. Suspendisse ac malesuada ex. Aenean at sem ut
+              libero dignissim iaculis at aliquet arcu. Vivamus justo lorem,
+              maximus in feugiat eget, fermentum et dui. Nulla eu facilisis
+              eros, vitae vestibulum augue. Vivamus facilisis, turpis et dapibus
+              efficitur, metus sapien volutpat est, sed mollis nulla mi tempor
+              diam. Mauris nisl metus, suscipit eu elit et, placerat auctor ex.
+            </p>
+            <p>
+              Nunc eget venenatis arcu. Suspendisse egestas sodales commodo.
+              Orci varius natoque penatibus et magnis dis parturient montes,
+              nascetur ridiculus mus. Aenean blandit enim sed libero placerat,
+              quis tincidunt purus malesuada. Nulla tristique molestie lacus,
+              eget dictum ante egestas vel. Aliquam consectetur efficitur
+              ullamcorper. Maecenas ullamcorper ex ut nulla lacinia, eu cursus
+              urna varius. Vestibulum efficitur viverra purus at laoreet.
+              Suspendisse iaculis orci sit amet nisl lacinia pellentesque. Sed
+              elementum vitae nisl vel convallis. Nunc risus nisl, ornare sed
+              venenatis id, facilisis vitae nibh. Sed eget metus ligula. Cras
+              tincidunt eu sem vitae vulputate.
+            </p>
+            <p>
+              Nullam sagittis mauris et felis convallis, quis rhoncus diam
+              accumsan. Nullam aliquet bibendum lacus, id fringilla nisl dapibus
+              at. Mauris commodo viverra placerat. Nam venenatis sed lectus eu
+              scelerisque. Quisque vehicula nulla sollicitudin est lobortis,
+              eget dictum lectus tempor. Maecenas dapibus commodo ullamcorper.
+              Nunc sapien sapien, elementum vel placerat vel, tincidunt nec
+              nibh. Aliquam erat volutpat. Vestibulum purus eros, luctus sit
+              amet posuere sit amet, rhoncus et quam. Cras egestas nunc at
+              mauris facilisis vestibulum.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TermsOfServicesRoot;
diff --git a/src/apps/devdoc/app/components/website/code-editor-placeholder.tsx b/src/apps/devdoc/app/components/website/code-editor-placeholder.tsx
index 546e63b35..b106d919b 100644
--- a/src/apps/devdoc/app/components/website/code-editor-placeholder.tsx
+++ b/src/apps/devdoc/app/components/website/code-editor-placeholder.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 
-function CodeEditorPlaceholder() {
+function CodeEditorPlaceholder({ className: _ }: { className?: string }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
-      width="400"
-      height="287"
       fill="none"
       viewBox="0 0 400 287"
     >
diff --git a/src/apps/devdoc/app/components/website/discover-component.tsx b/src/apps/devdoc/app/components/website/discover-component.tsx
index fa6db3fe5..546290593 100644
--- a/src/apps/devdoc/app/components/website/discover-component.tsx
+++ b/src/apps/devdoc/app/components/website/discover-component.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { cn } from '~/app/utils/commons';
 import { Graph, GraphItem } from '../graph';
 
 interface IFeatureItem {
@@ -28,19 +29,24 @@ interface IDiscover {
     label: string;
     icon: any;
   }[];
+  className?: string;
 }
-const Discover = ({ features, title, desc }: IDiscover) => {
+const Discover = ({ features, title, desc, className }: IDiscover) => {
   return (
     <>
       <div className="flex flex-col gap-3xl text-center">
         <div className="flex flex-col gap-md">
-          <p className="bodyXl-medium text-text-disabled">Salient features</p>
-          <h3 className="heading5xl-marketing text-text-default">{title}</h3>
+          <p className="bodyLg-medium lg:!bodyXl-medium text-text-disabled">
+            Salient features
+          </p>
+          <h3 className="heading3xl-marketing md:!heading4xl-marketing lg:!heading5xl-marketing text-text-default">
+            {title}
+          </h3>
         </div>
-        <p className="bodyXl-medium text-text-soft">{desc}</p>
+        <p className="bodyLg-medium lg:!bodyXl-medium text-text-soft">{desc}</p>
       </div>
       <Graph className="-mx-10xl">
-        <div className="grid grid-cols-4 gap-5xl px-10xl py-10xl">
+        <div className={cn('px-10xl pt-7xl md:!py-8xl lg:!py-10xl', className)}>
           {features.map((feature) => (
             <GraphItem key={feature.label}>
               <FeatureItem {...feature} />
diff --git a/src/apps/devdoc/app/components/website/get-started.tsx b/src/apps/devdoc/app/components/website/get-started.tsx
index b4c367675..174c289ea 100644
--- a/src/apps/devdoc/app/components/website/get-started.tsx
+++ b/src/apps/devdoc/app/components/website/get-started.tsx
@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
+import Radio from 'kl-design-system/atoms/radio';
 import { cn } from '~/app/utils/commons';
 import { Graph, GraphItem } from '../graph';
 
 interface IGetStartedItem {
-  label: string;
-  id: string;
+  label?: string;
+  id?: string;
   active: boolean;
   onClick: () => void;
 }
@@ -19,7 +20,7 @@ const GetStartedItem = ({
     <div
       onClick={onClick}
       className={cn(
-        'transition-all cursor-pointer bg-surface-basic-subdued p-4xl heading3xl-marketing min-h-[96px]',
+        'flex items-center transition-all cursor-pointer bg-surface-basic-subdued p-4xl heading2xl-marketing h-full lg:!heading3xl-marketing lg:min-h-[96px]',
         active ? 'text-text-primary' : 'text-text-disabled'
       )}
     >
@@ -46,15 +47,22 @@ const GetStarted = ({
   tabContainerClassName,
 }: IGetStarted) => {
   return (
-    <div className="flex flex-col 2xl:pt-10xl">
+    <div className="flex flex-col py-6xl md:!py-8xl 2xl:!pt-10xl">
       <div className="flex flex-col gap-md text-center">
-        <p className="bodyXl-medium text-text-disabled">Get started</p>
-        <h3 className="heading5xl-marketing text-text-default">{title}</h3>
+        <p className="bodyLg-medium lg:!bodyXl-medium text-text-disabled">
+          Get started
+        </p>
+        <h3 className="heading3xl-marketing md:!heading4xl lg:!heading5xl-marketing text-text-default">
+          {title}
+        </h3>
       </div>
       <Graph className="-mx-10xl">
-        <div className="grid grid-cols-[448px_auto] gap-5xl px-10xl py-10xl">
+        <div className="grid grid-rows-[112px_50px] md:!grid-rows-none md:!grid-cols-[250px_auto] lg:!grid-cols-[448px_auto] md:!gap-3xl lg:!gap-5xl px-10xl pt-7xl md:!pt-8xl lg:!py-10xl">
           <div
-            className={cn('grid grid-rows-3 gap-5xl', tabContainerClassName)}
+            className={cn(
+              'hidden md:!grid gap-3xl lg:!gap-5xl',
+              tabContainerClassName
+            )}
           >
             {tabs.map((gs) => (
               <GraphItem key={gs.id}>
@@ -66,6 +74,32 @@ const GetStarted = ({
               </GraphItem>
             ))}
           </div>
+          <GraphItem className="md:hidden">
+            <GetStartedItem
+              {...(tabs.find((t) => t.id === activeTab) || {})}
+              onClick={() => {}}
+              active
+            />
+          </GraphItem>
+
+          <GraphItem className="flex items-center justify-center md:!hidden">
+            <div className="flex items-center justify-center">
+              <Radio.Root
+                value={activeTab}
+                className="!flex-row"
+                onChange={(t) =>
+                  onTabChange(tabs.find((tab) => tab.id === t) || {})
+                }
+              >
+                {tabs.map((item) => (
+                  <Radio.Item key={item.id} value={item.id || ''}>
+                    {true}
+                  </Radio.Item>
+                ))}
+              </Radio.Root>
+            </div>
+          </GraphItem>
+
           <GraphItem>
             <div className="bg-surface-basic-active h-full">{tab}</div>
           </GraphItem>
diff --git a/src/apps/devdoc/app/components/website/horizontal-top-tab-devops.tsx b/src/apps/devdoc/app/components/website/horizontal-top-tab-devops.tsx
index 90c5e6e31..ecdf4ae7c 100644
--- a/src/apps/devdoc/app/components/website/horizontal-top-tab-devops.tsx
+++ b/src/apps/devdoc/app/components/website/horizontal-top-tab-devops.tsx
@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion';
 import { ReactNode } from 'react';
 import { Button } from 'kl-design-system/atoms/button';
+import Radio from 'kl-design-system/atoms/radio';
 import { ArrowRight } from '@jengaicons/react';
 import { cn } from '~/app/utils/commons';
 import { Graph, GraphItem } from '../graph';
@@ -10,6 +11,7 @@ interface IHorizontalTopTabItem {
   id: string;
   desc: string;
   active: boolean;
+  className?: string;
   onClick: () => void;
 }
 
@@ -19,10 +21,14 @@ const HorizontalTopTabDevopsItem = ({
   desc,
   active,
   onClick,
+  className,
 }: IHorizontalTopTabItem) => {
   return (
     <div
-      className="flex flex-col gap-4xl p-4xl bg-surface-basic-default relative cursor-pointer min-h-[192px] max-h-[192px]"
+      className={cn(
+        'flex flex-col gap-4xl p-xl lg:!p-4xl bg-surface-basic-default relative cursor-pointer lg:min-h-[192px] lg:max-h-[192px] ',
+        className
+      )}
       onClick={onClick}
     >
       <h5
@@ -33,7 +39,9 @@ const HorizontalTopTabDevopsItem = ({
       >
         {label}
       </h5>
-      <p className="bodyLg text-text-soft line-clamp-3">{desc}</p>
+      <p className="bodyLg text-text-soft line-clamp-2 md:line-clamp-3">
+        {desc}
+      </p>
       {active && (
         <motion.div
           transition={{ type: 'spring', bounce: 0.1, duration: 0.3 }}
@@ -62,25 +70,28 @@ const HorizontalTopTabDevops = ({
 }: IHorizontalTopTab) => {
   return (
     <div className="flex flex-col 2xl:pt-10xl">
-      <div className="flex flex-row gap-10xl">
+      <div className="flex flex-col md:!flex-row gap-3xl md:!gap-8xl lg:!gap-10xl">
         <div className="flex flex-col gap-md flex-1">
-          <p className="bodyXl-medium text-text-disabled">
+          <p className="bodyLg-medium lg:!bodyXl-medium text-text-disabled">
             What does it offer?
           </p>
-          <h2 className="heading5xl-marketing text-text-default">
+          <h2 className="heading3xl-marketing md:!heading4xl-marketing lg:!heading5xl-marketing text-text-default">
             Unlocking the advantages
           </h2>
         </div>
-        <div className="flex flex-col gap-4xl flex-1">
-          <p className="bodyXl-medium text-text-soft">
+        <div className="flex flex-col gap-3xl md:!gap-4xl flex-1">
+          <p className="bodyLg-medium lg:!bodyXl-medium text-text-soft">
             Simplify software development and testing with automated
             environments, tools, and configurations
           </p>
           <Button content="Read the docs" suffix={<ArrowRight />} size="lg" />
         </div>
       </div>
-      <Graph className="-mx-10xl flex flex-col gap-5xl">
-        <div className={cn(tabContainerClassName)}>
+      <Graph className="-mx-10xl pt-7xl flex flex-col gap-3xl lg:!gap-5xl md:!pt-0">
+        {/**
+            Desktop mode 
+       * */}
+        <div className={cn(tabContainerClassName, 'hidden md:!grid')}>
           {tabs.map((tab) => (
             <GraphItem key={tab.id}>
               <HorizontalTopTabDevopsItem
@@ -91,9 +102,40 @@ const HorizontalTopTabDevops = ({
             </GraphItem>
           ))}
         </div>
-        <div className="px-10xl pb-10xl">
+        {/**
+           Mobile mode 
+       * */}
+        <div className="px-10xl grid grid-rows-[auto_50px] md:!hidden">
+          <GraphItem>
+            {/** @ts-ignore* */}
+            <HorizontalTopTabDevopsItem
+              /** @ts-ignore* */
+              {...(tabs.find((t) => t.id === activeTab) || {})}
+              active
+              onClick={() => {}}
+              className="min-h-[auto]"
+            />
+          </GraphItem>
+          <GraphItem className="flex items-center justify-center">
+            <div className="flex items-center justify-center">
+              <Radio.Root
+                value={activeTab}
+                className="!flex-row"
+                /** @ts-ignore* */
+                onChange={(t) => onTabChange(tabs.find((tab) => tab.id === t))}
+              >
+                {tabs.map((item) => (
+                  <Radio.Item key={item.id} value={item.id}>
+                    {true}
+                  </Radio.Item>
+                ))}
+              </Radio.Root>
+            </div>
+          </GraphItem>
+        </div>
+        <div className="px-10xl pb-6xl md:!pb-8xl lg:!pb-10xl">
           <GraphItem>
-            <div className="bg-surface-basic-subdued min-h-[480px] max-h-[480px]">
+            <div className="bg-surface-basic-subdued xl:min-h-[480px] xl:max-h-[480px]">
               {tab}
             </div>
           </GraphItem>
diff --git a/src/apps/devdoc/app/components/website/horizontal-top-tab.tsx b/src/apps/devdoc/app/components/website/horizontal-top-tab.tsx
index db0ae4848..922b9a5e2 100644
--- a/src/apps/devdoc/app/components/website/horizontal-top-tab.tsx
+++ b/src/apps/devdoc/app/components/website/horizontal-top-tab.tsx
@@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
 import { ReactNode } from 'react';
 import { Button } from 'kl-design-system/atoms/button';
 import { ArrowRight } from '@jengaicons/react';
+import Radio from 'kl-design-system/atoms/radio';
 import { cn } from '~/app/utils/commons';
 import { Graph, GraphItem } from '../graph';
 
@@ -22,18 +23,24 @@ export const AdvantageItem = ({
 }: IHorizontalTopTabItem) => {
   return (
     <div
-      className="flex flex-col gap-4xl py-5xl px-4xl bg-surface-basic-default relative cursor-pointer"
+      className="flex flex-col gap-2xl p-3xl lg:gap-4xl lg:!py-5xl lg:!px-4xl bg-surface-basic-default relative cursor-pointer xl:min-h-[192px] xl:max-h-[192px]"
       onClick={onClick}
     >
       <h5
-        className={cn('heading2xl-marketing transition-all', {
-          'text-text-primary': active,
-          'text-text-default': !active,
-        })}
+        className={cn(
+          'headingXl-marketing lg:!heading2xl-marketing transition-all',
+          {
+            'text-text-primary': active,
+            'text-text-default': !active,
+          }
+        )}
       >
         {label}
       </h5>
-      <p className="bodyLg text-text-soft">{desc}</p>
+
+      <p className="bodyMd lg:!bodyLg text-text-soft line-clamp-2 md:line-clamp-3">
+        {desc}
+      </p>
       {active && (
         <motion.div
           transition={{ type: 'spring', bounce: 0.1, duration: 0.3 }}
@@ -62,26 +69,29 @@ const HorizontalTopTab = ({
   tabContainerClassName,
 }: IHorizontalTopTab) => {
   return (
-    <div className="flex flex-col 2xl:pt-10xl">
-      <div className="flex flex-row gap-10xl">
+    <div className="flex flex-col py-6xl 2xl:pt-10xl">
+      <div className="flex flex-col md:!flex-row gap-3xl md:!gap-8xl lg:!gap-10xl">
         <div className="flex flex-col gap-md flex-1">
-          <p className="bodyXl-medium text-text-disabled">
+          <p className="bodyLg-medium lg:!bodyXl-medium text-text-disabled">
             What does it offer?
           </p>
-          <h2 className="heading5xl-marketing text-text-default">
+          <h2 className="heading3xl-marketing md:!heading4xl-marketing lg:!heading5xl-marketing text-text-default">
             Unlocking the advantages
           </h2>
         </div>
-        <div className="flex flex-col gap-4xl flex-1 justify-between">
-          <p className="bodyXl-medium text-text-soft">
+        <div className="flex flex-col gap-3xl md:!gap-4xl flex-1">
+          <p className="bodyLg-medium lg:!bodyXl-medium text-text-soft">
             Either you are a developer or a platform engineer, managing cloud
-            infrastructure doesn't have to be complicated
+            infrastructure doesn't have to be complicated{' '}
           </p>
           <Button content="Read the docs" suffix={<ArrowRight />} size="lg" />
         </div>
       </div>
-      <Graph className="-mx-10xl flex flex-col gap-5xl">
-        <div className={cn(tabContainerClassName)}>
+      <Graph className="-mx-10xl pt-7xl flex flex-col gap-3xl lg:!gap-5xl md:!pt-0">
+        {/**
+            Desktop mode 
+       * */}
+        <div className={cn(tabContainerClassName, 'hidden md:!grid')}>
           {tabs.map((tab) => (
             <GraphItem key={tab.id}>
               <AdvantageItem
@@ -92,9 +102,37 @@ const HorizontalTopTab = ({
             </GraphItem>
           ))}
         </div>
-        <div className="px-10xl pb-10xl">
+        {/**
+           Mobile mode 
+       * */}
+        <div className="px-10xl grid grid-rows-[auto_50px] md:!hidden">
+          <GraphItem>
+            {/** @ts-ignore* */}
+            <AdvantageItem
+              {...(tabs.find((t) => t.id === activeTab) || {})}
+              active
+              onClick={() => {}}
+            />
+          </GraphItem>
+          <GraphItem className="flex items-center justify-center">
+            <div className="flex items-center justify-center">
+              <Radio.Root
+                value={activeTab}
+                className="!flex-row"
+                /** @ts-ignore* */
+                onChange={(t) => onTabChange(tabs.find((tab) => tab.id === t))}
+              >
+                {tabs.map((item) => (
+                  /** @ts-ignore* */
+                  <Radio.Item key={item.id} value={item.id} />
+                ))}
+              </Radio.Root>
+            </div>
+          </GraphItem>
+        </div>
+        <div className="px-10xl pb-6xl md:!pb-8xl lg:!pb-10xl">
           <GraphItem>
-            <div className="bg-surface-basic-subdued min-h-[480px] max-h-[480px]">
+            <div className="bg-surface-basic-subdued xl:min-h-[480px] xl:max-h-[480px]">
               {tab}
             </div>
           </GraphItem>
diff --git a/src/apps/devdoc/app/components/website/ready-to-ops.tsx b/src/apps/devdoc/app/components/website/ready-to-ops.tsx
index 75768d045..6181822fb 100644
--- a/src/apps/devdoc/app/components/website/ready-to-ops.tsx
+++ b/src/apps/devdoc/app/components/website/ready-to-ops.tsx
@@ -1,32 +1,34 @@
 import { Button } from 'kl-design-system/atoms/button';
+import Link from 'next/link';
 import { Graph, GraphItem } from '../graph';
 
 const ReadyToOps = () => {
   return (
-    <div>
-      <Graph className="-mx-10xl">
-        <div className="px-10xl py-10xl">
-          <GraphItem>
-            <div className="px-3xl pt-3xl pb-5xl md:!px-10xl md:!py-7xl flex flex-col gap-6xl items-center bg-surface-basic-subdued min-h-[288px]">
-              <div className="flex flex-col gap-xl text-center">
-                <h2 className="heading3xl-marketing md:!heading5xl-marketing text-text-default">
-                  Ready to try Kloudlite?
-                </h2>
-                <p className="bodyXl-medium text-text-soft">
-                  Join the cult of our early adopters, and discover the power of
-                  Kloudlite.
-                </p>
-              </div>
-              <Button
-                content="Get started for free"
-                variant="primary"
-                size="lg"
-              />
+    <Graph className="xl:m-auto">
+      <div className="px-3xl md:!px-5xl lg:!px-8xl xl:!px-10xl xl:!py-10xl box-content xl:w-[1024px] 2xl:w-[1120px]">
+        <GraphItem>
+          <div className="px-3xl pt-3xl pb-5xl md:!px-5xl md:!py-8xl lg:!px-10xl lg:!py-7xl flex flex-col gap-6xl items-center bg-surface-basic-subdued md:min-h-[288px]">
+            <div className="flex flex-col gap-xl text-center">
+              <h2 className="heading3xl-marketing md:!heading5xl-marketing text-text-default">
+                Ready to try Kloudlite?
+              </h2>
+              <p className="bodyXl-medium text-text-soft">
+                Join the cult of our early adopters, and discover the power of
+                Kloudlite.
+              </p>
             </div>
-          </GraphItem>
-        </div>
-      </Graph>
-    </div>
+            <Button
+              content="Get started for free"
+              variant="primary"
+              size="lg"
+              to="https://auth.kloudlite.io"
+              LinkComponent={Link}
+              toLabel="href"
+            />
+          </div>
+        </GraphItem>
+      </div>
+    </Graph>
   );
 };
 
diff --git a/src/apps/devdoc/app/components/website/section-wrapper.tsx b/src/apps/devdoc/app/components/website/section-wrapper.tsx
new file mode 100644
index 000000000..23e0710a2
--- /dev/null
+++ b/src/apps/devdoc/app/components/website/section-wrapper.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { cn } from '~/app/utils/commons';
+
+const SectionWrapper = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        'px-3xl md:!px-5xl lg:!px-8xl flex flex-col py-6xl m-auto xl:max-w-[1024px] 2xl:max-w-[1120px] box-content',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default SectionWrapper;
diff --git a/src/apps/devdoc/app/components/website/success-stories.tsx b/src/apps/devdoc/app/components/website/success-stories.tsx
index 671361a66..dfac691e0 100644
--- a/src/apps/devdoc/app/components/website/success-stories.tsx
+++ b/src/apps/devdoc/app/components/website/success-stories.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { Button } from 'kl-design-system/atoms/button';
 import { ArrowRight } from '@jengaicons/react';
 import Image from 'next/image';
+import Radio from 'kl-design-system/atoms/radio';
 import { cn } from '~/app/utils/commons';
 import { Graph, GraphItem } from '../graph';
 
@@ -30,16 +31,19 @@ interface ISuccessStoryBase {
   id: string;
 }
 
-interface ISuccessStoryCard extends Omit<ISuccessStoryBase, 'logo'> {}
+interface ISuccessStoryCard extends Omit<ISuccessStoryBase, 'logo'> {
+  extra?: ReactNode;
+}
 export const SuccessStoryDetailCard = ({
   content,
   subContent,
   image,
   link: _,
+  extra,
 }: ISuccessStoryCard) => {
   return (
-    <div className="bg-surface-basic-default p-5xl flex flex-row gap-7xl max-h-[288px]">
-      <div className="flex flex-col gap-5xl flex-1">
+    <div className="bg-surface-basic-default p-3xl md:!p-5xl flex flex-col md:!flex-row md:!gap-7xl md:max-h-[288px]">
+      <div className="flex flex-col gap-3xl pb-3xl md:!pb-0 md:!gap-5xl flex-1">
         <div className="flex flex-col gap-3xl">
           <p className="bodyLg text-text-soft line-clamp-5">{content}</p>
           <span className="bodyLg text-text-soft line-clamp-1">
@@ -53,11 +57,12 @@ export const SuccessStoryDetailCard = ({
           variant="basic"
         />
       </div>
-      <div className="flex-1">
+      {extra}
+      <div className="flex-1 -mx-3xl -mb-3xl md:!mx-0 md:!mb-0">
         {image ? (
           <Image src={image} alt="success-story" />
         ) : (
-          <div className="bg-surface-basic-active w-full h-full" />
+          <div className="bg-surface-basic-active w-full h-[240px] md:!h-full md:!w-auto" />
         )}
       </div>
     </div>
@@ -82,20 +87,49 @@ const SuccessStories = ({
   return (
     <>
       <div className="flex flex-col gap-md text-center">
-        <p className="bodyXl-medium text-text-disabled">Case study</p>
-        <h3 className="heading5xl-marketing text-text-default">
+        <p className="bodyLg-medium lg:!bodyXl-medium text-text-disabled">
+          Case study
+        </p>
+        <h3 className="heading3xl-marketing lg:!heading5xl-marketing text-text-default">
           {title || 'Success stories'}
         </h3>
       </div>
       <Graph className="-mx-10xl">
-        <div className="grid grid-rows-[auto_64px] px-10xl py-10xl gap-5xl">
+        <div className="grid grid-rows-[auto_64px] px-10xl pt-7xl md:!pt-8xl lg:!py-10xl gap-3xl lg:!gap-5xl">
           <GraphItem>
             <SuccessStoryDetailCard
               {...(tabs.find((tb) => tb.id === activeTab) || tabs[0])}
+              extra={
+                <div className="py-3xl flex items-center justify-center md:!hidden">
+                  <Radio.Root
+                    value={activeTab}
+                    className="!flex-row"
+                    onChange={(t) =>
+                      /** @ts-ignore* */
+                      onTabChange?.(tabs.find((tab) => tab.id === t))
+                    }
+                  >
+                    {tabs.map((item) => (
+                      /** @ts-ignore* */
+                      <Radio.Item key={item.id} value={item.id} />
+                    ))}
+                  </Radio.Root>
+                </div>
+              }
+            />
+          </GraphItem>
+          <GraphItem className="md:hidden">
+            <SuccessStoryDetailButton
+              {...(tabs.find((tb) => tb.id === activeTab) || tabs[0])}
+              onClick={() => {}}
+              active
             />
           </GraphItem>
           <div
-            className={cn('grid grid-cols-4 gap-5xl', tabContainerClassName)}
+            className={cn(
+              'hidden md:!grid grid-cols-4 xl:!grid-cols-[256px_224px_224px_224px] 2xl:!grid-cols-4 gap-3xl lg:!gap-5xl',
+              tabContainerClassName
+            )}
           >
             {tabs.map((ss) => (
               <GraphItem key={ss.subContent?.toString()}>
diff --git a/src/apps/devdoc/app/layout/mdx-components.tsx b/src/apps/devdoc/app/layout/mdx-components.tsx
index a7036707d..286b1816b 100644
--- a/src/apps/devdoc/app/layout/mdx-components.tsx
+++ b/src/apps/devdoc/app/layout/mdx-components.tsx
@@ -99,9 +99,20 @@ export const createComponents = ({
   isRawLayout?: boolean;
 }): Components => {
   if (isRawLayout) {
-    return { a: A };
-  }
+    return {
+      a: A,
+      ul: (props) => {
+        console.log(props.className);
+        let cs = props.className;
+        if (!cs) {
+          cs = 'list-disc pl-5xl';
+        }
 
+        return <ul {...props} className={cs} />;
+      },
+    };
+  }
+  console.log('raw', isRawLayout);
   const context = { index: 0 };
   return {
     h1: (props) => (
diff --git a/src/apps/devdoc/app/layout/theme.tsx b/src/apps/devdoc/app/layout/theme.tsx
index 2933062f8..429471714 100644
--- a/src/apps/devdoc/app/layout/theme.tsx
+++ b/src/apps/devdoc/app/layout/theme.tsx
@@ -39,7 +39,6 @@ function GitTimestamp({ timestamp }: { timestamp: Date }) {
 
 const Main = ({ children, pageOpts }: NextraThemeLayoutProps) => {
   const { title, frontMatter, pageMap, headings } = pageOpts;
-  console.log(pageOpts);
 
   const { state } = useMenu();
 
@@ -73,8 +72,6 @@ const Main = ({ children, pageOpts }: NextraThemeLayoutProps) => {
 
   const hideSidebar = activeType === 'page';
 
-  console.log(activePath);
-
   return (
     <div className="bg-surface-basic-subdued min-h-screen antialiased">
       <Head>
@@ -100,7 +97,10 @@ const Main = ({ children, pageOpts }: NextraThemeLayoutProps) => {
         {activeThemeContext.layout !== 'raw' ? (
           <Header navitems={config?.headerPrimary} activePath={activePath} />
         ) : (
-          <HeaderSecondary {...config?.headerSecondary} />
+          <HeaderSecondary
+            {...config?.headerSecondary}
+            activePath={activePath}
+          />
         )}
 
         <Container
diff --git a/src/apps/devdoc/app/utils/config.tsx b/src/apps/devdoc/app/utils/config.tsx
index 61c73fcd9..8841f6a59 100644
--- a/src/apps/devdoc/app/utils/config.tsx
+++ b/src/apps/devdoc/app/utils/config.tsx
@@ -47,7 +47,7 @@ export default {
   siteTitle: 'Kloudlite',
   logo: (
     <Link href="/">
-      <div className="hidden md:block md:w-[284px]">
+      <div className="hidden md:block">
         <BrandLogo detailed size={28} />
       </div>
       <div className="md:hidden">
@@ -178,23 +178,23 @@ export default {
     items: [
       {
         title: 'Product',
-        to: 'product',
+        to: '/product',
       },
       {
         title: 'Docs',
-        to: 'docs',
+        to: '/docs',
       },
       {
         title: 'Pricing',
-        to: 'pricing',
+        to: '/pricing',
       },
       {
         title: 'Help',
-        to: 'help-and-support',
+        to: '/help-and-support',
       },
       {
         title: 'Contact us',
-        to: 'contact-us',
+        to: '/contact-us',
       },
     ],
     extra: (
@@ -202,18 +202,22 @@ export default {
         <Button
           content="Login"
           variant="basic"
-          to="https://auth.dev.kloudlite.io/login"
+          to="https://auth.kloudlite.io/login"
           LinkComponent={Link}
           toLabel="href"
         />
         <Button
           content="Signup"
           variant="primary"
-          to="https://auth.dev.kloudlite.io/signup"
+          to="https://auth.kloudlite.io/signup"
           LinkComponent={Link}
           toLabel="href"
         />
       </div>
     ),
   },
+  urls: {
+    auth: 'auth.kloudlite.io',
+    console: 'console.kloudlite.io',
+  },
 } as IConfig;
diff --git a/src/apps/devdoc/app/utils/use-config.tsx b/src/apps/devdoc/app/utils/use-config.tsx
index 42cdf1adb..153630b4c 100644
--- a/src/apps/devdoc/app/utils/use-config.tsx
+++ b/src/apps/devdoc/app/utils/use-config.tsx
@@ -46,6 +46,10 @@ export interface IConfig {
     }[];
     extra?: ReactNode;
   };
+  urls?: {
+    auth?: string;
+    console?: string;
+  };
 }
 
 const ConfigContext = createContext<{
diff --git a/src/apps/devdoc/images/home/devops.svg b/src/apps/devdoc/images/home/devops.svg
new file mode 100644
index 000000000..e6d86e16f
--- /dev/null
+++ b/src/apps/devdoc/images/home/devops.svg
@@ -0,0 +1,29 @@
+<svg width="240" height="233" viewBox="0 0 240 233" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M66.0658 98.28C76.1907 88.1552 92.6062 88.1552 102.731 98.28L121.064 116.613L102.731 134.945C92.6062 145.07 76.1907 145.07 66.0658 134.945V134.945C55.941 124.82 55.941 108.405 66.0658 98.28V98.28Z" stroke="#2563EB" stroke-width="14"/>
+<path d="M175.917 135.112C165.792 145.237 149.376 145.237 139.251 135.112L120.919 116.779L139.251 98.4466C149.376 88.3218 165.792 88.3218 175.917 98.4466V98.4466C186.041 108.571 186.041 124.987 175.917 135.112V135.112Z" stroke="#2563EB" stroke-width="14"/>
+<path d="M109.807 116.612L120.907 128.026L113.71 135.216L102.355 124.063L109.807 116.612Z" fill="url(#paint0_linear_3541_34358)"/>
+<path d="M128.522 97.9194L139.648 109.293L132.464 116.498L121.072 105.369L128.522 97.9194Z" fill="url(#paint1_linear_3541_34358)"/>
+<path d="M120.636 1.39185C88.2935 1.39185 59.061 14.7081 38.1222 36.1571M160.319 8.40212C176.295 14.2579 190.614 23.5479 202.382 35.378M219.005 56.51C229.747 74.0295 235.94 94.6395 235.94 116.696C235.94 135.313 231.528 152.899 223.692 168.467M209.389 190.307C201.142 200.24 191.259 208.766 180.153 215.472M146.524 229.082C138.202 230.991 129.537 232 120.636 232C95.5819 232 72.394 224.009 53.482 210.437M13.776 160.089C8.33137 146.695 5.33203 132.046 5.33203 116.696C5.33203 100.854 8.52674 85.7588 14.3071 72.0186" stroke="#D4D4D8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M218.242 140.201C214.069 157.599 205.194 174.098 191.617 187.676C180.156 199.137 166.614 207.247 152.207 212.006M211.729 74.4591C217.959 87.8985 221.055 102.432 221.017 116.959M129.957 216.646C118.766 217.684 107.433 216.848 96.4687 214.14M67.3879 201.817C61.0899 197.869 55.1347 193.156 49.6554 187.676C34.2322 172.253 24.877 153.06 21.5898 133.063M28.1409 77.6258C33.0348 66.0286 40.2063 55.1643 49.6554 45.7152C59.4075 35.9632 70.6668 28.6371 82.6835 23.737M119.42 16.3214C145.514 16.0073 171.707 25.8052 191.617 45.7152" stroke="#D4D4D8" stroke-linecap="round" stroke-linejoin="round"/>
+<ellipse cx="128.619" cy="1.39179" rx="1.39179" ry="1.39179" fill="#D4D4D8"/>
+<ellipse cx="21.5881" cy="126.418" rx="1.39179" ry="1.39179" fill="#D4D4D8"/>
+<ellipse cx="152.437" cy="227.141" rx="1.39179" ry="1.39179" fill="#D4D4D8"/>
+<ellipse cx="30.7459" cy="50.0078" rx="18.1463" ry="18.1463" fill="#DBEAFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.251 42.7858C22.251 42.5096 22.4748 42.2858 22.751 42.2858H38.739C39.0152 42.2858 39.239 42.5096 39.239 42.7858V47.9632C39.239 48.2394 39.0152 48.4632 38.739 48.4632H22.751C22.4748 48.4632 22.251 48.2394 22.251 47.9632V42.7858ZM35.7642 46.5328C36.4039 46.5328 36.9225 46.0142 36.9225 45.3745C36.9225 44.7348 36.4039 44.2162 35.7642 44.2162C35.1245 44.2162 34.6059 44.7348 34.6059 45.3745C34.6059 46.0142 35.1245 46.5328 35.7642 46.5328ZM22.251 52.052C22.251 51.7758 22.4748 51.552 22.751 51.552H38.739C39.0152 51.552 39.239 51.7758 39.239 52.052V57.2295C39.239 57.5056 39.0152 57.7295 38.739 57.7295H22.751C22.4748 57.7295 22.251 57.5056 22.251 57.2295V52.052ZM35.7642 55.799C36.4039 55.799 36.9225 55.2804 36.9225 54.6407C36.9225 54.001 36.4039 53.4825 35.7642 53.4825C35.1245 53.4825 34.6059 54.001 34.6059 54.6407C34.6059 55.2804 35.1245 55.799 35.7642 55.799Z" fill="#111827"/>
+<ellipse cx="221.015" cy="52.4023" rx="18.1463" ry="18.1463" fill="#DBEAFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M228.526 52.1876V46.3529C228.526 45.8006 228.079 45.3529 227.526 45.3529H221.179H214.832C214.28 45.3529 213.832 45.7995 213.832 46.3518L213.832 52.1876C213.832 56.5912 216.287 58.2649 220.748 60.5662C221.02 60.7066 221.342 60.7135 221.619 60.5836C225.967 58.5467 228.526 56.7001 228.526 52.1876ZM221.179 49.0473C221.455 49.0473 221.679 49.2712 221.679 49.5473V52.7629C221.679 53.039 221.455 53.2629 221.179 53.2629C220.903 53.2629 220.679 53.039 220.679 52.7629V49.5473C220.679 49.2712 220.903 49.0473 221.179 49.0473ZM222.144 55.6569C222.144 56.1897 221.712 56.6216 221.179 56.6216C220.646 56.6216 220.215 56.1897 220.215 55.6569C220.215 55.1242 220.646 54.6923 221.179 54.6923C221.712 54.6923 222.144 55.1242 222.144 55.6569Z" fill="#111827"/>
+<ellipse cx="207.973" cy="179.233" rx="18.1463" ry="18.1463" fill="#DBEAFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M209.957 172.823C209.681 172.823 209.457 173.046 209.457 173.323V175.797H205.966C205.69 175.797 205.466 176.021 205.466 176.297V179.272H201.912C201.636 179.272 201.412 179.496 201.412 179.772V184.484H200.754C200.478 184.484 200.254 184.708 200.254 184.984C200.254 185.26 200.478 185.484 200.754 185.484H215.231C215.508 185.484 215.731 185.26 215.731 184.984C215.731 184.708 215.508 184.484 215.231 184.484H214.073V184.484V173.323C214.073 173.046 213.849 172.823 213.573 172.823H209.957ZM206.466 176.797H209.457V184.484L206.466 184.484V176.797ZM202.412 184.484V180.272H205.466V184.484H202.412Z" fill="#111827"/>
+<ellipse cx="18.9852" cy="171.591" rx="18.1463" ry="18.1463" fill="#DBEAFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.7033 178.435C16.9169 178.506 17.0679 178.702 17.0679 178.927V180.357C17.0679 180.633 17.2917 180.857 17.5679 180.857H20.4021C20.6782 180.857 20.9021 180.633 20.9021 180.357V178.927C20.9021 178.702 21.0531 178.506 21.2666 178.435C21.5922 178.326 21.9075 178.195 22.2106 178.043C22.4119 177.943 22.6571 177.974 22.8163 178.133L23.828 179.145C24.0232 179.34 24.3398 179.34 24.5351 179.145L26.5392 177.141C26.7344 176.946 26.7344 176.629 26.5392 176.434L25.5275 175.422C25.3683 175.263 25.3368 175.018 25.4376 174.816C25.5894 174.513 25.7205 174.198 25.829 173.872C25.9002 173.659 26.0958 173.508 26.3209 173.508H27.7512C28.0273 173.508 28.2512 173.284 28.2512 173.008V170.174C28.2512 169.898 28.0273 169.674 27.7512 169.674H26.3209C26.0958 169.674 25.9002 169.523 25.8291 169.309C25.7205 168.984 25.5895 168.668 25.4376 168.365C25.3368 168.164 25.3683 167.919 25.5275 167.759L26.5392 166.748C26.7345 166.552 26.7345 166.236 26.5392 166.041L24.5351 164.037C24.3398 163.841 24.0233 163.841 23.828 164.037L22.8163 165.048C22.6571 165.207 22.4119 165.239 22.2106 165.138C21.9075 164.986 21.5922 164.855 21.2666 164.747C21.0531 164.676 20.9021 164.48 20.9021 164.255V162.825C20.9021 162.548 20.6782 162.325 20.4021 162.325H17.5679C17.2917 162.325 17.0679 162.548 17.0679 162.825V164.255C17.0679 164.48 16.9169 164.676 16.7033 164.747C16.3777 164.855 16.0624 164.986 15.7593 165.138C15.558 165.239 15.3128 165.207 15.1536 165.048L14.1419 164.037C13.9466 163.841 13.6301 163.841 13.4348 164.037L11.4307 166.041C11.2354 166.236 11.2354 166.552 11.4307 166.748L12.4425 167.76C12.6016 167.919 12.6332 168.164 12.5323 168.365C12.3805 168.668 12.2494 168.984 12.1409 169.309C12.0698 169.523 11.8742 169.674 11.6491 169.674H10.2188C9.94261 169.674 9.71875 169.898 9.71875 170.174V173.008C9.71875 173.284 9.94261 173.508 10.2188 173.508H11.6491C11.8742 173.508 12.0698 173.659 12.141 173.872C12.2494 174.198 12.3805 174.513 12.5323 174.816C12.6332 175.018 12.6016 175.263 12.4425 175.422L11.4307 176.434C11.2354 176.629 11.2354 176.946 11.4307 177.141L13.4348 179.145C13.6301 179.34 13.9467 179.34 14.1419 179.145L15.1536 178.133C15.3128 177.974 15.558 177.943 15.7593 178.043C16.0624 178.195 16.3777 178.326 16.7033 178.435ZM23.6181 171.591C23.6181 174.15 21.5437 176.224 18.985 176.224C16.4262 176.224 14.3519 174.15 14.3519 171.591C14.3519 169.032 16.4262 166.958 18.985 166.958C21.5437 166.958 23.6181 169.032 23.6181 171.591Z" fill="#111827"/>
+<defs>
+<linearGradient id="paint0_linear_3541_34358" x1="115.494" y1="121.931" x2="108.264" y2="128.94" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1E3A8A"/>
+<stop offset="1" stop-color="#1E3A8A" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3541_34358" x1="133.473" y1="102.517" x2="126.243" y2="109.526" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1E3A8A" stop-opacity="0"/>
+<stop offset="1" stop-color="#1E3A8A"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/apps/devdoc/images/home/distribution.svg b/src/apps/devdoc/images/home/distribution.svg
new file mode 100644
index 000000000..7becceebf
--- /dev/null
+++ b/src/apps/devdoc/images/home/distribution.svg
@@ -0,0 +1,9 @@
+<svg width="234" height="237" viewBox="0 0 234 237" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.8705 42.9394L36.0177 40.0029L29.401 34.4154L27.8705 42.9394ZM7.97514 77.63L1.39639 83.2621L9.56327 86.1434L7.97514 77.63ZM209.376 47.0318L208.223 38.4486L201.366 43.738L209.376 47.0318ZM225.853 77.1602L224.301 85.6802L232.456 82.7645L225.853 77.1602ZM132.527 233L140.565 236.223L139.338 227.651L132.527 233ZM99.1377 232.662L92.4373 227.175L91.0359 235.721L99.1377 232.662ZM32.2844 39.0259C33.1615 38.0712 34.0544 37.1314 34.9627 36.2069L33.8926 35.1557C32.9726 36.0921 32.0682 37.0441 31.1798 38.0111L32.2844 39.0259ZM37.7336 33.479C38.6724 32.5853 39.6261 31.7073 40.5943 30.8454L39.597 29.725C38.6162 30.598 37.6502 31.4873 36.6994 32.3926L37.7336 33.479ZM43.5417 28.3091C44.5379 27.4804 45.5482 26.6682 46.5723 25.873L45.6523 24.6883C44.615 25.4938 43.5915 26.3165 42.5824 27.1559L43.5417 28.3091ZM49.6828 23.5402C50.7322 22.7804 51.7948 22.0379 52.8702 21.3132L52.0318 20.0693C50.9425 20.8035 49.8661 21.5556 48.8032 22.3252L49.6828 23.5402ZM56.1308 19.1947C57.2286 18.5075 58.3387 17.8384 59.4608 17.1877L58.7083 15.8901C57.5716 16.5493 56.447 17.2272 55.3349 17.9233L56.1308 19.1947ZM62.8565 15.2945C63.9979 14.6832 65.1507 14.0906 66.3146 13.5172L65.6517 12.1717C64.4726 12.7526 63.3047 13.3529 62.1483 13.9721L62.8565 15.2945ZM69.8313 11.8582C71.0111 11.326 72.2015 10.8131 73.4019 10.3199L72.832 8.93242C71.6157 9.43204 70.4098 9.95168 69.2145 10.4909L69.8313 11.8582ZM77.0224 8.90418C78.2353 8.45359 79.4577 8.0229 80.6894 7.61253L80.2152 6.18944C78.9674 6.60522 77.7288 7.04157 76.5 7.49809L77.0224 8.90418ZM84.3987 6.44655C85.6392 6.07976 86.8884 5.73337 88.1459 5.40776L87.7699 3.95565C86.4958 4.28554 85.2302 4.6365 83.9734 5.00811L84.3987 6.44655ZM91.9248 4.49771C93.1866 4.21651 94.4561 3.95609 95.733 3.71681L95.4568 2.24247C94.1631 2.48489 92.8768 2.74873 91.5985 3.03363L91.9248 4.49771ZM99.5663 3.06579C100.844 2.87104 102.129 2.69736 103.42 2.54512L103.244 1.05544C101.936 1.20966 100.635 1.38561 99.3403 1.58292L99.5663 3.06579ZM107.289 2.1551C108.576 2.04727 109.869 1.96067 111.168 1.89566L111.092 0.397534C109.777 0.463385 108.467 0.551104 107.164 0.660339L107.289 2.1551ZM115.053 1.76618C115.701 1.75541 116.35 1.75 117 1.75V0.25C116.341 0.25 115.684 0.255478 115.028 0.266391L115.053 1.76618ZM117 1.75C117.684 1.75 118.366 1.75598 119.047 1.76789L119.073 0.26812C118.384 0.256057 117.692 0.25 117 0.25V1.75ZM123.132 1.91102C124.497 1.98291 125.856 2.07865 127.208 2.19785L127.34 0.703647C125.97 0.582897 124.593 0.485911 123.211 0.4131L123.132 1.91102ZM131.274 2.62904C132.63 2.79737 133.98 2.98937 135.321 3.20464L135.559 1.72358C134.2 1.50549 132.833 1.31098 131.458 1.14045L131.274 2.62904ZM139.345 3.92422C140.685 4.18868 142.017 4.47648 143.34 4.78716L143.683 3.32689C142.343 3.01211 140.993 2.72054 139.636 2.4526L139.345 3.92422ZM147.301 5.79254C148.618 6.15221 149.926 6.53477 151.225 6.93976L151.671 5.50781C150.356 5.09749 149.031 4.7099 147.696 4.34549L147.301 5.79254ZM155.105 8.22691C156.392 8.67983 157.669 9.15505 158.936 9.65213L159.484 8.25587C158.201 7.75226 156.907 7.27078 155.602 6.8119L155.105 8.22691ZM162.713 11.2135C163.964 11.7572 165.204 12.3225 166.432 12.909L167.078 11.5555C165.834 10.9613 164.578 10.3885 163.31 9.8377L162.713 11.2135ZM170.089 14.7365C171.298 15.3679 172.494 16.0202 173.678 16.693L174.419 15.3889C173.22 14.7074 172.008 14.0466 170.783 13.4069L170.089 14.7365ZM177.195 18.7757C178.355 19.4912 179.503 20.2268 180.636 20.9821L181.468 19.7339C180.32 18.9688 179.158 18.2237 177.982 17.4988L177.195 18.7757ZM183.997 23.3091C185.104 24.1048 186.196 24.9197 187.273 25.7534L188.191 24.5671C187.1 23.7227 185.994 22.8972 184.872 22.0911L183.997 23.3091ZM190.462 28.3118C191.509 29.1834 192.542 30.0734 193.558 30.9811L194.557 29.8624C193.528 28.943 192.482 28.0415 191.421 27.1586L190.462 28.3118ZM196.558 33.7577C197.542 34.7007 198.509 35.661 199.459 36.6382L200.534 35.5926C199.572 34.6028 198.593 33.6301 197.596 32.6749L196.558 33.7577ZM202.257 39.6189C203.171 40.6285 204.069 41.6544 204.948 42.6961L206.094 41.7286C205.204 40.6735 204.295 39.6343 203.368 38.6117L202.257 39.6189ZM5.32809 83.2027C4.93157 84.5062 4.55706 85.8193 4.20498 87.1416L5.65447 87.5275C6.00203 86.2222 6.37174 84.926 6.76315 83.6393L5.32809 83.2027ZM3.22068 91.1173C2.9166 92.4448 2.63497 93.7809 2.37619 95.1252L3.84914 95.4087C4.10461 94.0817 4.38264 92.7627 4.68281 91.4523L3.22068 91.1173ZM1.67228 99.1601C1.46177 100.505 1.27401 101.857 1.10943 103.217L2.59856 103.397C2.76105 102.055 2.94641 100.72 3.15423 99.3921L1.67228 99.1601ZM0.687853 107.291C0.57126 108.646 0.477627 110.008 0.407345 111.377L1.90537 111.453C1.97477 110.103 2.06722 108.758 2.18233 107.419L0.687853 107.291ZM0.267449 115.469C0.255832 116.151 0.25 116.833 0.25 117.517H1.75C1.75 116.842 1.75576 116.168 1.76723 115.495L0.267449 115.469ZM0.25 117.517C0.25 118.179 0.255448 118.838 0.266301 119.497L1.7661 119.472C1.75538 118.822 1.75 118.17 1.75 117.517H0.25ZM0.396167 123.437C0.46146 124.756 0.548455 126.069 0.656802 127.376L2.15168 127.252C2.0447 125.962 1.9588 124.665 1.89433 123.362L0.396167 123.437ZM1.04853 131.305C1.20132 132.615 1.37561 133.919 1.57104 135.216L3.05429 134.992C2.86135 133.712 2.68928 132.425 2.53844 131.131L1.04853 131.305ZM2.22408 139.104C2.46453 140.402 2.72626 141.693 3.00889 142.975L4.47374 142.652C4.19473 141.386 3.93635 140.112 3.69898 138.831L2.22408 139.104ZM3.92347 146.815C4.25047 148.092 4.59835 149.361 4.96671 150.621L6.40642 150.2C6.04279 148.956 5.69938 147.704 5.37658 146.443L3.92347 146.815ZM6.13755 154.387C6.55019 155.64 6.98326 156.883 7.43639 158.116L8.84437 157.599C8.39706 156.381 7.96955 155.154 7.56222 153.918L6.13755 154.387ZM8.86021 161.798C9.3561 163.018 9.87187 164.229 10.4071 165.428L11.7769 164.817C11.2486 163.633 10.7394 162.438 10.2499 161.233L8.86021 161.798ZM12.0753 169.004C12.6524 170.188 13.2488 171.361 13.864 172.522L15.1895 171.82C14.5821 170.674 13.9934 169.516 13.4238 168.347L12.0753 169.004ZM15.7702 175.979C16.4254 177.121 17.0993 178.251 17.7913 179.369L19.0666 178.579C18.3834 177.476 17.7182 176.36 17.0713 175.232L15.7702 175.979ZM19.9249 182.688C20.6551 183.783 21.4033 184.866 22.1689 185.934L23.3883 185.061C22.6325 184.006 21.8939 182.937 21.1729 181.856L19.9249 182.688ZM24.521 189.104C25.323 190.148 26.142 191.177 26.9778 192.193L28.1359 191.239C27.3108 190.237 26.5022 189.22 25.7104 188.19L24.521 189.104ZM29.5365 195.197C30.4063 196.184 31.2924 197.157 32.1944 198.114L33.2861 197.085C32.3956 196.14 31.5208 195.18 30.662 194.206L29.5365 195.197ZM34.9489 200.941C35.8827 201.867 36.832 202.778 37.7964 203.673L38.8167 202.574C37.8646 201.69 36.9274 200.791 36.0055 199.876L34.9489 200.941ZM40.7339 206.309C41.7276 207.171 42.7359 208.016 43.7584 208.844L44.7026 207.679C43.6932 206.861 42.6977 206.027 41.7167 205.176L40.7339 206.309ZM46.8665 211.277C47.9155 212.07 48.9783 212.845 50.0543 213.603L50.918 212.377C49.8557 211.629 48.8066 210.863 47.771 210.08L46.8665 211.277ZM53.3188 215.821C54.4188 216.541 55.5316 217.243 56.6568 217.927L57.4357 216.645C56.325 215.97 55.2265 215.277 54.1406 214.566L53.3188 215.821ZM60.0649 219.919C61.2104 220.563 62.3679 221.188 63.5369 221.794L64.2272 220.463C63.0733 219.865 61.9307 219.247 60.7999 218.612L60.0649 219.919ZM67.0709 223.55C68.2574 224.115 69.455 224.66 70.6632 225.186L71.2613 223.81C70.0687 223.292 68.8867 222.753 67.7154 222.196L67.0709 223.55ZM74.3103 226.698C75.5321 227.18 76.764 227.642 78.0055 228.084L78.5083 226.671C77.2829 226.235 76.0671 225.779 74.8611 225.303L74.3103 226.698ZM81.7448 229.343C82.9962 229.741 84.2568 230.118 85.5261 230.474L85.9312 229.03C84.6784 228.678 83.4342 228.306 82.199 227.914L81.7448 229.343ZM89.3457 231.475C90.621 231.787 91.9045 232.077 93.1958 232.345L93.5014 230.877C92.2268 230.612 90.96 230.325 89.7012 230.018L89.3457 231.475ZM138.558 232.79C139.873 232.543 141.181 232.274 142.48 231.984L142.152 230.52C140.87 230.807 139.58 231.072 138.281 231.315L138.558 232.79ZM146.373 231.042C147.667 230.705 148.953 230.347 150.229 229.967L149.801 228.529C148.541 228.904 147.272 229.258 145.995 229.59L146.373 231.042ZM154.044 228.759C155.311 228.333 156.569 227.886 157.817 227.419L157.29 226.014C156.059 226.476 154.817 226.917 153.567 227.337L154.044 228.759ZM161.542 225.948C162.776 225.436 164 224.903 165.212 224.35L164.59 222.985C163.393 223.531 162.185 224.057 160.967 224.563L161.542 225.948ZM168.825 222.627C170.021 222.031 171.204 221.415 172.376 220.78L171.661 219.461C170.505 220.088 169.336 220.696 168.156 221.284L168.825 222.627ZM175.863 218.811C177.015 218.135 178.154 217.439 179.28 216.724L178.476 215.458C177.364 216.163 176.24 216.85 175.103 217.518L175.863 218.811ZM182.622 214.522C183.724 213.768 184.812 212.996 185.887 212.206L184.998 210.998C183.938 211.777 182.863 212.54 181.775 213.283L182.622 214.522ZM189.072 209.78C190.119 208.953 191.153 208.108 192.171 207.247L191.202 206.102C190.197 206.952 189.177 207.786 188.142 208.602L189.072 209.78ZM195.183 204.609C196.172 203.713 197.145 202.8 198.103 201.871L197.058 200.795C196.113 201.712 195.152 202.613 194.176 203.498L195.183 204.609ZM200.928 199.035C201.854 198.074 202.763 197.097 203.655 196.105L202.54 195.102C201.659 196.082 200.761 197.046 199.848 197.995L200.928 199.035ZM206.281 193.084C207.139 192.062 207.98 191.026 208.803 189.975L207.622 189.05C206.81 190.087 205.98 191.111 205.133 192.119L206.281 193.084ZM211.218 186.782C212.004 185.705 212.773 184.614 213.523 183.509L212.282 182.666C211.541 183.757 210.783 184.834 210.007 185.897L211.218 186.782ZM215.714 180.16C216.425 179.032 217.118 177.891 217.791 176.737L216.495 175.981C215.831 177.12 215.147 178.246 214.445 179.36L215.714 180.16ZM219.75 173.245C220.382 172.072 220.995 170.886 221.588 169.689L220.244 169.023C219.658 170.205 219.053 171.375 218.429 172.534L219.75 173.245ZM223.303 166.073C223.853 164.859 224.383 163.635 224.893 162.4L223.507 161.827C223.004 163.047 222.48 164.255 221.937 165.453L223.303 166.073ZM226.357 158.673C226.823 157.424 227.269 156.166 227.693 154.897L226.271 154.421C225.852 155.673 225.412 156.916 224.952 158.148L226.357 158.673ZM228.897 151.082C229.276 149.805 229.634 148.52 229.971 147.226L228.519 146.849C228.187 148.126 227.833 149.395 227.459 150.655L228.897 151.082ZM230.911 143.334C231.202 142.034 231.471 140.726 231.719 139.41L230.245 139.133C230 140.432 229.735 141.723 229.448 143.006L230.911 143.334ZM232.391 135.467C232.592 134.153 232.771 132.831 232.928 131.502L231.439 131.326C231.284 132.637 231.107 133.943 230.908 135.241L232.391 135.467ZM233.331 127.517C233.443 126.191 233.532 124.859 233.6 123.521L232.101 123.446C232.035 124.767 231.947 126.083 231.837 127.392L233.331 127.517ZM233.733 119.525C233.744 118.857 233.75 118.188 233.75 117.517H232.25C232.25 118.18 232.244 118.841 232.233 119.5L233.733 119.525ZM233.75 117.517C233.75 116.825 233.744 116.134 233.732 115.444L232.232 115.47C232.244 116.151 232.25 116.834 232.25 117.517H233.75ZM233.589 111.301C233.517 109.916 233.421 108.537 233.301 107.165L231.807 107.296C231.925 108.65 232.02 110.011 232.091 111.379L233.589 111.301ZM232.869 103.042C232.701 101.666 232.508 100.297 232.292 98.9364L230.811 99.1712C231.024 100.515 231.214 101.866 231.38 103.225L232.869 103.042ZM231.571 94.8534C231.306 93.4932 231.017 92.1414 230.706 90.7985L229.245 91.1375C229.552 92.4632 229.837 93.7976 230.099 95.1404L231.571 94.8534ZM229.697 86.7769C229.337 85.4395 228.953 84.1116 228.547 82.7936L227.113 83.2354C227.514 84.5364 227.893 85.8473 228.249 87.1675L229.697 86.7769Z" fill="#D4D4D8"/>
+<ellipse cx="117.002" cy="117.518" rx="75.449" ry="75.7855" fill="#EFF6FF"/>
+<path d="M75.1404 93.8655L117.655 69.9753L159.869 93.6882L160.575 142.447L117.328 167.447L74.9639 142.447L75.1404 93.8655Z" fill="#2563EB"/>
+<path d="M75.1404 93.8655L117.655 69.9753L159.869 93.6882M75.1404 93.8655L74.9639 142.447L117.328 167.447M75.1404 93.8655L117.328 117.307M117.328 167.447L160.575 142.447L159.869 93.6882M117.328 167.447V117.307M159.869 93.6882L117.328 117.307" stroke="#EFF6FF" stroke-linecap="round"/>
+<path d="M117.326 167.447L117.326 231.574" stroke="#D4D4D8" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="4 4"/>
+<path d="M160.578 93.3596L217.982 61.5349" stroke="#D4D4D8" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="4 4"/>
+<path d="M74.9643 93.7883L16.7871 61.5349" stroke="#D4D4D8" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="4 4"/>
+</svg>
diff --git a/src/apps/devdoc/images/home/infraops.svg b/src/apps/devdoc/images/home/infraops.svg
new file mode 100644
index 000000000..acc583c45
--- /dev/null
+++ b/src/apps/devdoc/images/home/infraops.svg
@@ -0,0 +1,45 @@
+<svg width="296" height="180" viewBox="0 0 296 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="74.6581" cy="19.7538" rx="19.7538" ry="19.7538" fill="#DBEAFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.6227 18.2405C70.6227 18.4681 70.6473 18.6526 70.6903 18.7879C70.7395 18.9233 70.801 19.0709 70.8872 19.2308C70.9179 19.28 70.9302 19.3292 70.9302 19.3722C70.9302 19.4338 70.8933 19.4953 70.8133 19.5568L70.4259 19.8151C70.3705 19.852 70.3152 19.8704 70.2659 19.8704C70.2044 19.8704 70.1429 19.8397 70.0814 19.7843C69.9953 19.6921 69.9215 19.5937 69.86 19.4953C69.7985 19.3907 69.737 19.2738 69.6693 19.1324C69.1896 19.6982 68.5869 19.9812 67.8611 19.9812C67.3444 19.9812 66.9324 19.8335 66.631 19.5383C66.3296 19.2431 66.1758 18.8495 66.1758 18.3574C66.1758 17.8346 66.3604 17.4102 66.7355 17.0904C67.1107 16.7706 67.6089 16.6107 68.2424 16.6107C68.4515 16.6107 68.6668 16.6291 68.8944 16.6599C69.1219 16.6906 69.3557 16.7398 69.6017 16.7952V16.3462C69.6017 15.8787 69.5033 15.5528 69.3126 15.3621C69.1158 15.1714 68.7837 15.0792 68.3101 15.0792C68.0948 15.0792 67.8734 15.1038 67.6458 15.1591C67.4182 15.2145 67.1968 15.2821 66.9816 15.3682C66.8832 15.4113 66.8093 15.4359 66.7663 15.4482C66.7232 15.4605 66.6925 15.4667 66.6679 15.4667C66.5818 15.4667 66.5387 15.4051 66.5387 15.276V14.9746C66.5387 14.8762 66.551 14.8024 66.5818 14.7593C66.6125 14.7163 66.6679 14.6732 66.754 14.6302C66.9693 14.5195 67.2276 14.4272 67.529 14.3534C67.8303 14.2734 68.1502 14.2365 68.4884 14.2365C69.2204 14.2365 69.7555 14.4026 70.0999 14.7347C70.4382 15.0669 70.6104 15.5712 70.6104 16.2478V18.2405H70.6227ZM68.1256 19.1754C68.3285 19.1754 68.5376 19.1385 68.7591 19.0647C68.9805 18.9909 69.1773 18.8556 69.3434 18.6711C69.4418 18.5542 69.5156 18.4251 69.5525 18.2775C69.5894 18.1298 69.614 17.9515 69.614 17.7424V17.484C69.4356 17.441 69.245 17.4041 69.0481 17.3795C68.8513 17.3549 68.6607 17.3426 68.47 17.3426C68.0579 17.3426 67.7565 17.4225 67.5536 17.5886C67.3506 17.7547 67.2522 17.9884 67.2522 18.2959C67.2522 18.585 67.326 18.8002 67.4798 18.9479C67.6274 19.1016 67.8426 19.1754 68.1256 19.1754ZM73.0644 19.8397C72.9537 19.8397 72.8799 19.8212 72.8307 19.7782C72.7815 19.7413 72.7385 19.6552 72.7016 19.5383L71.2562 14.7839C71.2193 14.6609 71.2008 14.581 71.2008 14.5379C71.2008 14.4395 71.25 14.3842 71.3484 14.3842H71.9512C72.0681 14.3842 72.148 14.4026 72.1911 14.4457C72.2403 14.4826 72.2772 14.5687 72.3141 14.6855L73.3474 18.7572L74.3069 14.6855C74.3376 14.5625 74.3745 14.4826 74.4237 14.4457C74.4729 14.4088 74.559 14.3842 74.6697 14.3842H75.1618C75.2786 14.3842 75.3586 14.4026 75.4078 14.4457C75.457 14.4826 75.5001 14.5687 75.5247 14.6855L76.4964 18.8064L77.5605 14.6855C77.5974 14.5625 77.6404 14.4826 77.6835 14.4457C77.7327 14.4088 77.8127 14.3842 77.9234 14.3842H78.4954C78.5938 14.3842 78.6491 14.4334 78.6491 14.5379C78.6491 14.5642 78.6447 14.5904 78.6395 14.6205L78.6395 14.6205L78.6368 14.6363C78.6307 14.6732 78.6184 14.7224 78.5938 14.7901L77.1115 19.5445C77.0746 19.6675 77.0315 19.7474 76.9823 19.7843C76.9331 19.8212 76.8532 19.8458 76.7486 19.8458H76.2197C76.1028 19.8458 76.0229 19.8274 75.9737 19.7843C75.9244 19.7413 75.8814 19.6613 75.8568 19.5383L74.9035 15.5712L73.9563 19.5322C73.9255 19.6552 73.8886 19.7351 73.8394 19.7782C73.7902 19.8212 73.7041 19.8397 73.5934 19.8397H73.0644ZM80.9679 20.0058C80.6481 20.0058 80.3282 19.9689 80.0207 19.895C79.7132 19.8212 79.4733 19.7413 79.3134 19.649C79.215 19.5937 79.1473 19.5322 79.1227 19.4768C79.0981 19.4215 79.0858 19.3599 79.0858 19.3046V18.9909C79.0858 18.8618 79.135 18.8002 79.2273 18.8002C79.2642 18.8002 79.3011 18.8064 79.338 18.8187C79.3618 18.8266 79.3934 18.8397 79.4293 18.8546C79.449 18.8628 79.47 18.8715 79.4918 18.8802C79.7009 18.9725 79.9285 19.0463 80.1683 19.0955C80.4143 19.1447 80.6542 19.1693 80.9002 19.1693C81.2877 19.1693 81.5891 19.1016 81.7982 18.9663C82.0073 18.831 82.118 18.6342 82.118 18.382C82.118 18.2098 82.0627 18.0683 81.952 17.9515C81.8413 17.8346 81.6322 17.7301 81.3308 17.6316L80.4389 17.3549C79.99 17.2134 79.6578 17.0043 79.4549 16.7275C79.2519 16.4569 79.1473 16.1555 79.1473 15.8357C79.1473 15.5774 79.2027 15.3498 79.3134 15.153C79.4241 14.9562 79.5717 14.7839 79.7562 14.6486C79.9408 14.5072 80.1499 14.4026 80.3959 14.3288C80.6419 14.255 80.9002 14.2242 81.1709 14.2242C81.3062 14.2242 81.4476 14.2304 81.5829 14.2488C81.7244 14.2673 81.8535 14.2919 81.9827 14.3165L81.9827 14.3165L81.9827 14.3165C82.1057 14.3473 82.2226 14.378 82.3333 14.4149C82.444 14.4518 82.5301 14.4887 82.5916 14.5256C82.6777 14.5748 82.7393 14.624 82.7762 14.6794C82.8131 14.7286 82.8315 14.7962 82.8315 14.8824V15.1714C82.8315 15.3006 82.7823 15.3682 82.69 15.3682C82.6408 15.3682 82.5609 15.3436 82.4563 15.2944C82.1057 15.1345 81.7121 15.0546 81.2754 15.0546C80.9248 15.0546 80.6481 15.1099 80.4574 15.2268C80.2667 15.3436 80.1683 15.522 80.1683 15.7742C80.1683 15.9464 80.2298 16.094 80.3528 16.2109C80.4758 16.3277 80.7034 16.4446 81.0294 16.5491L81.9028 16.8259C82.3456 16.9674 82.6654 17.1642 82.8561 17.4164C83.0468 17.6685 83.139 17.9576 83.139 18.2775C83.139 18.5419 83.0837 18.7818 82.9791 18.9909C82.8684 19.2 82.7208 19.3845 82.5301 19.5322C82.3395 19.6859 82.1119 19.7966 81.8474 19.8766C81.5706 19.9627 81.2816 20.0058 80.9679 20.0058ZM82.1303 22.9948C80.1067 24.4894 77.1668 25.2828 74.6389 25.2828C71.0962 25.2828 67.9041 23.9728 65.4931 21.7955C65.3024 21.6233 65.4746 21.3895 65.7022 21.5248C68.31 23.0379 71.5267 23.9543 74.8542 23.9543C77.0991 23.9543 79.5655 23.4869 81.8351 22.5274C82.1733 22.3736 82.4624 22.7488 82.1303 22.9948ZM80.6049 21.9554C81.263 21.8754 82.7145 21.7032 82.9729 22.0354C83.2312 22.3613 82.6838 23.7329 82.4378 24.3418C82.364 24.5263 82.5239 24.6001 82.6899 24.4587C83.7724 23.5484 84.0554 21.6479 83.8339 21.3711C83.6125 21.1005 81.712 20.8667 80.5557 21.6786C80.3773 21.8078 80.4081 21.98 80.6049 21.9554Z" fill="#111827"/>
+<ellipse cx="223.348" cy="19.7538" rx="19.7538" ry="19.7538" fill="#DBEAFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M223.347 28.9516C227.965 28.9516 231.709 25.2079 231.709 20.5898C231.709 15.9717 227.965 12.228 223.347 12.228C218.73 12.228 214.988 15.9695 214.985 20.5857H218.167C218.169 17.7267 220.488 15.4096 223.347 15.4096C226.208 15.4096 228.527 17.7289 228.527 20.5898C228.527 23.4508 226.208 25.77 223.347 25.77L223.337 25.77V28.9516L223.347 28.9516ZM223.337 22.4741H220.103V25.7076H223.337V22.4741ZM220.103 25.7181H217.619V23.6402H215.541V25.7181H217.619V28.2029H220.103V25.7181Z" fill="#111827"/>
+<ellipse cx="275.288" cy="62.6879" rx="19.7538" ry="19.7538" fill="#DBEAFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M271.11 60.2784L276.067 55.9805L270.695 67.8696H266.882L271.11 60.2784ZM274.611 62.9477L276.726 56.986L283.694 69.3953H270.798L278.667 68.0433L274.611 62.9477Z" fill="#111827"/>
+<ellipse cx="20.7108" cy="62.6879" rx="19.7538" ry="19.7538" fill="#DBEAFE"/>
+<g clip-path="url(#clip0_3541_34387)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5031 60.2846C24.8511 60.9304 25.1375 61.8415 25.0405 62.9258H25.0623C26.2653 62.9258 27.2405 63.901 27.2405 65.1039C27.2405 66.3069 26.2653 67.2821 25.0623 67.2821H19.9007L19.8821 67.2821L19.8836 67.2854L18.7063 67.2865H16.1534C15.0036 67.2098 14.0946 66.2527 14.0946 65.0834C14.0946 63.864 15.0832 62.8755 16.3026 62.8755C17.1645 62.8755 17.9111 63.3693 18.2748 64.0895L20.7314 61.5289C19.9203 60.5195 18.7711 59.7933 17.4557 59.522C18.261 58.6482 19.4151 58.1008 20.6971 58.1008C22.3201 58.1008 23.7383 58.9782 24.5031 60.2846ZM28.297 60.3764C29.8061 61.3971 30.7981 63.1245 30.7981 65.0835C30.7981 68.2124 28.2675 70.7502 25.1414 70.7621V70.7641H16.0843V70.7579C13.0493 70.6432 10.624 68.1465 10.624 65.0834C10.624 63.1634 11.5769 61.4659 13.0357 60.4381C13.9532 57.08 17.0258 54.6116 20.6749 54.6116C24.3017 54.6116 27.3589 57.0498 28.297 60.3764Z" fill="#111827"/>
+</g>
+<path d="M275.289 86.1454L270.958 93.6454H279.619L275.289 86.1454ZM271.903 125.416L271.47 124.803L271.903 125.416ZM236.544 151.298L238.333 150.034L237.468 148.809L235.679 150.072L236.544 151.298ZM241.913 147.507L245.492 144.98L244.627 143.755L241.047 146.282L241.913 147.507ZM249.071 142.454L252.65 139.927L251.785 138.701L248.206 141.228L249.071 142.454ZM256.229 137.4L259.808 134.873L258.943 133.647L255.364 136.174L256.229 137.4ZM263.387 132.346L266.966 129.819L266.101 128.593L262.522 131.12L263.387 132.346ZM270.546 127.292L272.335 126.028L271.47 124.803L269.68 126.066L270.546 127.292ZM272.335 126.028C272.912 125.621 273.43 125.151 273.884 124.63L272.753 123.645C272.377 124.076 271.948 124.466 271.47 124.803L272.335 126.028ZM275.79 120.952C275.953 120.281 276.039 119.586 276.039 118.88H274.539C274.539 119.465 274.468 120.041 274.333 120.597L275.79 120.952ZM276.039 118.88V116.834H274.539V118.88H276.039ZM276.039 112.743V108.651H274.539V112.743H276.039ZM276.039 104.559V100.467H274.539V104.559H276.039ZM276.039 96.3751V92.2832H274.539V96.3751H276.039Z" fill="#2563EB"/>
+<path d="M223.348 43.2114L219.018 50.7114H227.678L223.348 43.2114ZM219.962 82.4817L220.395 83.0944L219.962 82.4817ZM184.603 108.364L186.393 107.1L185.528 105.875L183.738 107.139L184.603 108.364ZM189.972 104.573L193.551 102.047L192.686 100.821L189.107 103.348L189.972 104.573ZM197.13 99.5196L200.71 96.9926L199.844 95.7672L196.265 98.2942L197.13 99.5196ZM204.289 94.4657L207.868 91.9387L207.003 90.7133L203.424 93.2403L204.289 94.4657ZM211.447 89.4118L215.026 86.8848L214.161 85.6594L210.582 88.1864L211.447 89.4118ZM218.605 84.3579L220.395 83.0944L219.53 81.869L217.74 83.1325L218.605 84.3579ZM220.395 83.0944C220.971 82.6874 221.49 82.2171 221.944 81.6965L220.813 80.7108C220.437 81.142 220.007 81.5317 219.53 81.869L220.395 83.0944ZM223.849 78.0179C224.013 77.3469 224.098 76.652 224.098 75.9464H222.598C222.598 76.5313 222.528 77.107 222.392 77.6628L223.849 78.0179ZM224.098 75.9464V73.9005H222.598V75.9464H224.098ZM224.098 69.8086V65.7167H222.598V69.8086H224.098ZM224.098 61.6248V57.533H222.598V61.6248H224.098ZM224.098 53.4411V49.3492H222.598V53.4411H224.098Z" fill="#2563EB"/>
+<path d="M20.7095 85.8677L25.0397 93.3677H16.3794L20.7095 85.8677ZM24.0955 125.138L24.528 124.525L24.0955 125.138ZM59.4541 151.02L57.6646 149.757L58.5297 148.531L60.3193 149.795L59.4541 151.02ZM54.0855 147.23L50.5063 144.703L51.3715 143.477L54.9506 146.004L54.0855 147.23ZM46.9272 142.176L43.3481 139.649L44.2132 138.423L47.7923 140.95L46.9272 142.176ZM39.769 137.122L36.1898 134.595L37.055 133.37L40.6341 135.897L39.769 137.122ZM32.6107 132.068L29.0316 129.541L29.8967 128.316L33.4758 130.843L32.6107 132.068ZM25.4524 127.014L23.6629 125.751L24.528 124.525L26.3176 125.789L25.4524 127.014ZM23.6629 125.751C23.0864 125.344 22.5679 124.873 22.114 124.353L23.2447 123.367C23.6206 123.798 24.0502 124.188 24.528 124.525L23.6629 125.751ZM20.2082 120.674C20.0446 120.003 19.9595 119.308 19.9595 118.603H21.4595C21.4595 119.188 21.5301 119.763 21.6655 120.319L20.2082 120.674ZM19.9595 118.603V116.557H21.4595V118.603H19.9595ZM19.9595 112.465V108.373H21.4595V112.465H19.9595ZM19.9595 104.281V100.189H21.4595V104.281H19.9595ZM19.9595 96.0974V92.0055H21.4595V96.0974H19.9595Z" fill="#2563EB"/>
+<path d="M74.6578 43.2114L78.9879 50.7114H70.3276L74.6578 43.2114ZM78.0437 82.4817L78.4763 81.869L78.0437 82.4817ZM113.402 108.364L111.613 107.1L112.478 105.875L114.268 107.139L113.402 108.364ZM108.034 104.573L104.455 102.047L105.32 100.821L108.899 103.348L108.034 104.573ZM100.875 99.5196L97.2963 96.9926L98.1615 95.7672L101.741 98.2942L100.875 99.5196ZM93.7172 94.4657L90.1381 91.9387L91.0032 90.7133L94.5823 93.2403L93.7172 94.4657ZM86.5589 89.4118L82.9798 86.8848L83.845 85.6595L87.4241 88.1864L86.5589 89.4118ZM79.4007 84.3579L77.6111 83.0944L78.4763 81.869L80.2658 83.1325L79.4007 84.3579ZM77.6111 83.0944C77.0347 82.6874 76.5161 82.2171 76.0623 81.6965L77.1929 80.7108C77.5689 81.142 77.9985 81.5317 78.4763 81.869L77.6111 83.0944ZM74.1564 78.0179C73.9929 77.3469 73.9078 76.652 73.9078 75.9464H75.4078C75.4078 76.5313 75.4783 77.107 75.6138 77.6628L74.1564 78.0179ZM73.9078 75.9464V73.9005H75.4078V75.9464H73.9078ZM73.9078 69.8086V65.7167H75.4078V69.8086H73.9078ZM73.9078 61.6248V57.533H75.4078V61.6248H73.9078ZM73.9078 53.4411V49.3492H75.4078V53.4411H73.9078Z" fill="#2563EB"/>
+<g filter="url(#filter0_bi_3541_34387)">
+<mask id="path-13-inside-1_3541_34387" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.4889 179.531C70.7038 176.882 58.6855 163.318 58.6855 146.984C58.6855 129.393 72.6232 115.015 90.1933 114.022C89.7588 111.898 89.5308 109.701 89.5308 107.451C89.5308 89.2163 104.507 74.4343 122.982 74.4343C138.557 74.4343 151.646 84.9411 155.371 99.1655C160.825 95.3543 167.486 93.1146 174.677 93.1146C188.829 93.1146 200.929 101.789 205.816 114.045C206.58 113.993 207.351 113.967 208.128 113.967C226.603 113.967 241.579 128.749 241.579 146.984C241.579 163.617 229.118 177.377 212.907 179.666V180H86.4889V179.531Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.4889 179.531C70.7038 176.882 58.6855 163.318 58.6855 146.984C58.6855 129.393 72.6232 115.015 90.1933 114.022C89.7588 111.898 89.5308 109.701 89.5308 107.451C89.5308 89.2163 104.507 74.4343 122.982 74.4343C138.557 74.4343 151.646 84.9411 155.371 99.1655C160.825 95.3543 167.486 93.1146 174.677 93.1146C188.829 93.1146 200.929 101.789 205.816 114.045C206.58 113.993 207.351 113.967 208.128 113.967C226.603 113.967 241.579 128.749 241.579 146.984C241.579 163.617 229.118 177.377 212.907 179.666V180H86.4889V179.531Z" fill="#DBEAFE"/>
+<path d="M86.4889 179.531H87.4889V178.685L86.6544 178.545L86.4889 179.531ZM90.1933 114.022L90.2497 115.02L91.4049 114.955L91.173 113.821L90.1933 114.022ZM155.371 99.1655L154.403 99.4188L154.767 100.807L155.943 99.9852L155.371 99.1655ZM205.816 114.045L204.887 114.415L205.157 115.091L205.883 115.042L205.816 114.045ZM212.907 179.666L212.767 178.675L211.907 178.797V179.666H212.907ZM212.907 180V181H213.907V180H212.907ZM86.4889 180H85.4889V181H86.4889V180ZM86.6544 178.545C71.3336 175.974 59.6855 162.812 59.6855 146.984H57.6855C57.6855 163.824 70.0741 177.791 86.3234 180.518L86.6544 178.545ZM59.6855 146.984C59.6855 129.938 73.1947 115.984 90.2497 115.02L90.1368 113.023C72.0516 114.046 57.6855 128.848 57.6855 146.984H59.6855ZM91.173 113.821C90.7519 111.763 90.5308 109.633 90.5308 107.451H88.5308C88.5308 109.769 88.7657 112.033 89.2136 114.222L91.173 113.821ZM90.5308 107.451C90.5308 89.7809 105.047 75.4343 122.982 75.4343V73.4343C103.967 73.4343 88.5308 88.6517 88.5308 107.451H90.5308ZM122.982 75.4343C138.099 75.4343 150.793 85.6313 154.403 99.4188L156.338 98.9122C152.499 84.2509 139.015 73.4343 122.982 73.4343V75.4343ZM155.943 99.9852C161.234 96.2881 167.697 94.1146 174.677 94.1146V92.1146C167.275 92.1146 160.415 94.4205 154.798 98.3458L155.943 99.9852ZM174.677 94.1146C188.413 94.1146 200.149 102.532 204.887 114.415L206.745 113.674C201.709 101.045 189.246 92.1146 174.677 92.1146V94.1146ZM205.883 115.042C206.625 114.993 207.373 114.967 208.128 114.967V112.967C207.329 112.967 206.535 112.994 205.749 113.047L205.883 115.042ZM208.128 114.967C226.063 114.967 240.579 129.314 240.579 146.984H242.579C242.579 128.185 227.143 112.967 208.128 112.967V114.967ZM240.579 146.984C240.579 163.102 228.502 176.454 212.767 178.675L213.047 180.656C229.734 178.3 242.579 164.132 242.579 146.984H240.579ZM211.907 179.666V180H213.907V179.666H211.907ZM212.907 179H86.4889V181H212.907V179ZM87.4889 180V179.531H85.4889V180H87.4889Z" fill="url(#paint0_linear_3541_34387)" mask="url(#path-13-inside-1_3541_34387)"/>
+</g>
+<defs>
+<filter id="filter0_bi_3541_34387" x="6.68555" y="22.4343" width="286.894" height="209.566" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="26"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_3541_34387"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_3541_34387" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="22.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_3541_34387"/>
+</filter>
+<linearGradient id="paint0_linear_3541_34387" x1="150.132" y1="74.4343" x2="150.132" y2="180" gradientUnits="userSpaceOnUse">
+<stop stop-color="#60A5FA"/>
+<stop offset="1" stop-color="#1E4FD8" stop-opacity="0"/>
+<stop offset="1" stop-color="#60A5FA" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_3541_34387">
+<rect width="20.1741" height="20.1741" fill="white" transform="translate(10.624 52.6008)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/apps/devdoc/images/infraops/cover.svg b/src/apps/devdoc/images/infraops/cover.svg
new file mode 100644
index 000000000..67c86a031
--- /dev/null
+++ b/src/apps/devdoc/images/infraops/cover.svg
@@ -0,0 +1,69 @@
+<svg width="517" height="393" viewBox="0 0 517 393" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.8423 92.3999L161.569 135.598C166.923 138.693 166.891 146.434 161.511 149.483L88.1683 191.061" stroke="url(#paint0_linear_3947_18732)" stroke-width="2" stroke-linecap="round"/>
+<path d="M427.238 94.2876L357.319 134.673C351.951 137.773 351.996 145.536 357.4 148.574L420.414 183.998" stroke="url(#paint1_linear_3947_18732)" stroke-width="2" stroke-linecap="round"/>
+<g filter="url(#filter0_f_3947_18732)">
+<ellipse cx="15.8847" cy="11.1211" rx="15.8847" ry="11.1211" transform="matrix(0.865806 0.500381 -0.499619 0.866245 245.925 282.267)" fill="#1D4ED8" fill-opacity="0.5"/>
+</g>
+<rect x="48.0732" y="163.547" width="55.0318" height="55.0318" rx="27.5159" fill="url(#paint2_linear_3947_18732)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M68.6074 188.445C68.6074 188.839 68.65 189.158 68.7245 189.392C68.8096 189.626 68.916 189.882 69.065 190.158C69.1182 190.244 69.1395 190.329 69.1395 190.403C69.1395 190.51 69.0757 190.616 68.9373 190.722L68.2668 191.169C68.171 191.233 68.0752 191.265 67.9901 191.265C67.8837 191.265 67.7772 191.212 67.6708 191.116C67.5218 190.957 67.3941 190.786 67.2877 190.616C67.1812 190.435 67.0748 190.233 66.9577 189.988C66.1276 190.967 65.0846 191.457 63.8287 191.457C62.9347 191.457 62.2217 191.201 61.7002 190.691C61.1787 190.18 60.9126 189.499 60.9126 188.647C60.9126 187.742 61.2319 187.008 61.8811 186.455C62.5303 185.901 63.3924 185.625 64.4886 185.625C64.8505 185.625 65.223 185.656 65.6167 185.71C66.0105 185.763 66.415 185.848 66.8407 185.944V185.167C66.8407 184.358 66.6704 183.794 66.3405 183.464C65.9999 183.134 65.4252 182.974 64.6057 182.974C64.2332 182.974 63.85 183.017 63.4562 183.113C63.0625 183.209 62.6793 183.326 62.3068 183.475C62.1365 183.549 62.0088 183.592 61.9343 183.613C61.8598 183.634 61.8066 183.645 61.764 183.645C61.615 183.645 61.5405 183.539 61.5405 183.315V182.794C61.5405 182.623 61.5618 182.496 61.615 182.421C61.6682 182.347 61.764 182.272 61.913 182.198C62.2855 182.006 62.7325 181.846 63.254 181.719C63.7755 181.58 64.329 181.516 64.9143 181.516C66.1808 181.516 67.1067 181.804 67.7027 182.378C68.2881 182.953 68.5861 183.826 68.5861 184.997V188.445H68.6074ZM64.2864 190.063C64.6376 190.063 64.9995 189.999 65.3826 189.871C65.7657 189.743 66.1063 189.509 66.3937 189.19C66.564 188.988 66.6917 188.764 66.7555 188.509C66.8194 188.253 66.862 187.945 66.862 187.583V187.136C66.5533 187.061 66.2234 186.997 65.8828 186.955C65.5422 186.912 65.2123 186.891 64.8824 186.891C64.1693 186.891 63.6478 187.029 63.2966 187.317C62.9454 187.604 62.7751 188.009 62.7751 188.541C62.7751 189.041 62.9028 189.413 63.1689 189.669C63.4243 189.935 63.7968 190.063 64.2864 190.063ZM72.8326 191.212C72.641 191.212 72.5133 191.18 72.4282 191.106C72.343 191.042 72.2685 190.893 72.2047 190.691L69.7036 182.464C69.6397 182.251 69.6078 182.112 69.6078 182.038C69.6078 181.868 69.693 181.772 69.8632 181.772H70.9062C71.1085 181.772 71.2468 181.804 71.3213 181.878C71.4065 181.942 71.4703 182.091 71.5342 182.293L73.3222 189.339L74.9825 182.293C75.0357 182.08 75.0995 181.942 75.1847 181.878C75.2698 181.814 75.4188 181.772 75.6104 181.772H76.4618C76.664 181.772 76.8024 181.804 76.8875 181.878C76.9727 181.942 77.0472 182.091 77.0898 182.293L78.7713 189.424L80.6125 182.293C80.6764 182.08 80.7509 181.942 80.8254 181.878C80.9105 181.814 81.0489 181.772 81.2405 181.772H82.2303C82.4005 181.772 82.4963 181.857 82.4963 182.038C82.4963 182.083 82.4886 182.129 82.4797 182.181L82.475 182.208C82.4644 182.272 82.4431 182.357 82.4005 182.474L79.8356 190.701C79.7718 190.914 79.6973 191.052 79.6121 191.116C79.527 191.18 79.3886 191.223 79.2077 191.223H78.2924C78.0902 191.223 77.9518 191.191 77.8667 191.116C77.7815 191.042 77.707 190.903 77.6645 190.691L76.0148 183.826L74.3758 190.68C74.3226 190.893 74.2587 191.031 74.1736 191.106C74.0885 191.18 73.9395 191.212 73.7479 191.212H72.8326ZM86.5087 191.499C85.9553 191.499 85.4018 191.436 84.8697 191.308C84.3375 191.18 83.9225 191.042 83.6458 190.882C83.4755 190.786 83.3584 190.68 83.3158 190.584C83.2733 190.488 83.252 190.382 83.252 190.286V189.743C83.252 189.52 83.3371 189.413 83.4968 189.413C83.5606 189.413 83.6245 189.424 83.6883 189.445C83.7296 189.459 83.7841 189.482 83.8463 189.507L83.8464 189.508C83.8805 189.522 83.9168 189.537 83.9544 189.552C84.3163 189.711 84.71 189.839 85.1251 189.924C85.5508 190.009 85.9659 190.052 86.3916 190.052C87.0621 190.052 87.5836 189.935 87.9455 189.701C88.3073 189.467 88.4989 189.126 88.4989 188.69C88.4989 188.392 88.4031 188.147 88.2115 187.945C88.02 187.742 87.6581 187.562 87.1366 187.391L85.5934 186.912C84.8165 186.668 84.2418 186.306 83.8905 185.827C83.5393 185.358 83.3584 184.837 83.3584 184.284C83.3584 183.837 83.4542 183.443 83.6458 183.102C83.8373 182.762 84.0928 182.464 84.412 182.229C84.7313 181.985 85.0932 181.804 85.5189 181.676C85.9446 181.548 86.3916 181.495 86.8599 181.495C87.094 181.495 87.3388 181.506 87.573 181.538C87.8178 181.57 88.0413 181.612 88.2648 181.655C88.4776 181.708 88.6798 181.761 88.8714 181.825C89.063 181.889 89.212 181.953 89.3184 182.017C89.4674 182.102 89.5738 182.187 89.6377 182.283C89.7015 182.368 89.7335 182.485 89.7335 182.634V183.134C89.7335 183.358 89.6483 183.475 89.4887 183.475C89.4035 183.475 89.2652 183.432 89.0843 183.347C88.4776 183.07 87.7965 182.932 87.0408 182.932C86.4342 182.932 85.9553 183.028 85.6253 183.23C85.2954 183.432 85.1251 183.741 85.1251 184.177C85.1251 184.475 85.2315 184.731 85.4444 184.933C85.6573 185.135 86.051 185.337 86.6151 185.518L88.1264 185.997C88.8927 186.242 89.4461 186.582 89.776 187.019C90.106 187.455 90.2656 187.955 90.2656 188.509C90.2656 188.966 90.1698 189.381 89.9889 189.743C89.7973 190.105 89.5419 190.424 89.212 190.68C88.882 190.946 88.4883 191.138 88.0306 191.276C87.5517 191.425 87.0515 191.499 86.5087 191.499ZM88.5201 196.672C85.0186 199.258 79.9313 200.631 75.5571 200.631C69.4268 200.631 63.9031 198.364 59.7311 194.596C59.4012 194.298 59.6992 193.894 60.093 194.128C64.6056 196.746 70.1718 198.332 75.9296 198.332C79.8142 198.332 84.082 197.523 88.0092 195.863C88.5946 195.597 89.0948 196.246 88.5201 196.672ZM85.8806 194.873C87.0194 194.735 89.5311 194.437 89.9781 195.011C90.4251 195.575 89.4779 197.949 89.0521 199.002C88.9244 199.322 89.2012 199.449 89.4885 199.205C91.3617 197.63 91.8512 194.341 91.4681 193.862C91.0849 193.394 87.7963 192.989 85.7954 194.394C85.4868 194.618 85.54 194.916 85.8806 194.873Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M426.696 72.474C426.996 70.6389 427.43 68.9996 427.96 67.6394C428.487 66.2884 429.089 65.2633 429.707 64.5929C430.257 63.9959 430.76 63.7398 431.196 63.6914C431.248 63.6908 431.3 63.6906 431.352 63.6906C431.404 63.6906 431.456 63.6908 431.508 63.6914C431.944 63.7398 432.446 63.9959 432.997 64.5929C433.615 65.2633 434.217 66.2884 434.744 67.6394C435.274 68.9996 435.708 70.6389 436.008 72.474H426.696ZM424.671 72.474H417.907C419.67 68.4576 423.18 65.3818 427.475 64.2082C426.953 64.9792 426.493 65.8956 426.097 66.9129C425.478 68.4988 424.991 70.3875 424.671 72.474ZM435.229 64.2082C435.751 64.9792 436.211 65.8956 436.607 66.9129C437.226 68.4988 437.712 70.3875 438.032 72.474H444.796C443.034 68.4576 439.524 65.3818 435.229 64.2082ZM436.272 74.474H426.432C426.305 75.712 426.237 77.0162 426.237 78.3657C426.237 79.7152 426.305 81.0194 426.432 82.2574H436.272C436.398 81.0194 436.467 79.7152 436.467 78.3657C436.467 77.0162 436.398 75.712 436.272 74.474ZM438.282 82.2574C438.403 81.0072 438.467 79.7035 438.467 78.3657C438.467 77.0279 438.403 75.7242 438.282 74.474H445.505C445.845 75.7134 446.027 77.0183 446.027 78.3657C446.027 79.7131 445.845 81.018 445.505 82.2574H438.282ZM436.008 84.2574H426.696C426.996 86.0924 427.43 87.7318 427.96 89.092C428.487 90.4429 429.089 91.4681 429.707 92.1385C430.258 92.7356 430.76 92.9917 431.196 93.04C431.248 93.0406 431.3 93.0408 431.352 93.0408C431.404 93.0408 431.456 93.0406 431.507 93.04C431.944 92.9917 432.446 92.7356 432.997 92.1385C433.615 91.4681 434.217 90.4429 434.744 89.092C435.274 87.7318 435.708 86.0924 436.008 84.2574ZM435.229 92.5232C435.751 91.7522 436.211 90.8358 436.607 89.8185C437.226 88.2325 437.712 86.3439 438.032 84.2574H444.796C443.034 88.2738 439.524 91.3496 435.229 92.5232ZM427.475 92.5232C426.953 91.7522 426.493 90.8358 426.097 89.8185C425.478 88.2325 424.991 86.3439 424.671 84.2574H417.907C419.67 88.2738 423.18 91.3496 427.475 92.5232ZM424.422 82.2574H417.198C416.858 81.018 416.677 79.7131 416.677 78.3657C416.677 77.0183 416.858 75.7134 417.198 74.474H424.422C424.301 75.7242 424.237 77.0279 424.237 78.3657C424.237 79.7035 424.301 81.0072 424.422 82.2574Z" fill="url(#paint3_linear_3947_18732)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.811 72.474C84.1106 70.6389 84.5443 68.9996 85.0746 67.6394C85.6014 66.2884 86.2038 65.2633 86.8218 64.5929C87.3721 63.9959 87.8745 63.7398 88.3108 63.6914C88.3627 63.6908 88.4146 63.6906 88.4666 63.6906C88.5187 63.6906 88.5706 63.6908 88.6225 63.6914C89.0588 63.7398 89.5612 63.9959 90.1115 64.5929C90.7294 65.2633 91.3319 66.2884 91.8587 67.6394C92.389 68.9996 92.8227 70.6389 93.1223 72.474H83.811ZM81.7861 72.474H75.0221C76.7847 68.4576 80.2943 65.3818 84.5893 64.2082C84.0678 64.9792 83.6079 65.8956 83.2113 66.9129C82.5929 68.4988 82.1062 70.3875 81.7861 72.474ZM92.344 64.2082C92.8655 64.9792 93.3254 65.8956 93.722 66.9129C94.3404 68.4988 94.8271 70.3875 95.1472 72.474H101.911C100.149 68.4576 96.639 65.3818 92.344 64.2082ZM93.3865 74.474H83.5468C83.4201 75.712 83.352 77.0162 83.352 78.3657C83.352 79.7152 83.4201 81.0194 83.5468 82.2574H93.3865C93.5132 81.0194 93.5813 79.7152 93.5813 78.3657C93.5813 77.0162 93.5132 75.712 93.3865 74.474ZM95.3964 82.2574C95.5175 81.0072 95.5813 79.7035 95.5813 78.3657C95.5813 77.0279 95.5175 75.7242 95.3964 74.474H102.62C102.96 75.7134 103.142 77.0183 103.142 78.3657C103.142 79.7131 102.96 81.018 102.62 82.2574H95.3964ZM93.1223 84.2574H83.811C84.1106 86.0924 84.5443 87.7318 85.0746 89.092C85.6014 90.4429 86.2038 91.4681 86.8218 92.1385C87.3723 92.7356 87.8748 92.9917 88.3112 93.04C88.3629 93.0406 88.4148 93.0408 88.4666 93.0408C88.5185 93.0408 88.5704 93.0406 88.6221 93.04C89.0585 92.9917 89.561 92.7356 90.1115 92.1385C90.7294 91.4681 91.3319 90.4429 91.8587 89.092C92.389 87.7318 92.8227 86.0924 93.1223 84.2574ZM92.3439 92.5232C92.8655 91.7522 93.3254 90.8358 93.722 89.8185C94.3404 88.2325 94.8271 86.3439 95.1472 84.2574H101.911C100.149 88.2738 96.639 91.3496 92.3439 92.5232ZM84.5894 92.5232C84.0678 91.7522 83.6079 90.8358 83.2113 89.8185C82.5929 88.2325 82.1062 86.3439 81.7861 84.2574H75.0221C76.7847 88.2738 80.2943 91.3496 84.5894 92.5232ZM81.5369 82.2574H74.3131C73.9731 81.018 73.7915 79.7131 73.7915 78.3657C73.7915 77.0183 73.9731 75.7134 74.3131 74.474H81.5369C81.4158 75.7242 81.352 77.0279 81.352 78.3657C81.352 79.7035 81.4158 81.0072 81.5369 82.2574Z" fill="url(#paint4_linear_3947_18732)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M284.992 6.12598H265.338C264.253 6.12598 263.373 7.00592 263.373 8.09139V47.3997C263.373 48.4852 264.253 49.3651 265.338 49.3651H284.992C286.078 49.3651 286.958 48.4852 286.958 47.3997V8.09139C286.958 7.00592 286.078 6.12598 284.992 6.12598ZM270.235 13.9877C270.235 13.4354 270.682 12.9877 271.235 12.9877H279.096C279.648 12.9877 280.096 13.4354 280.096 13.9877C280.096 14.54 279.648 14.9877 279.096 14.9877H271.235C270.682 14.9877 270.235 14.54 270.235 13.9877ZM271.235 20.8492C270.682 20.8492 270.235 21.297 270.235 21.8492C270.235 22.4015 270.682 22.8492 271.235 22.8492H279.096C279.648 22.8492 280.096 22.4015 280.096 21.8492C280.096 21.297 279.648 20.8492 279.096 20.8492H271.235ZM275.165 43.4689C276.793 43.4689 278.113 42.149 278.113 40.5208C278.113 38.8926 276.793 37.5726 275.165 37.5726C273.536 37.5726 272.216 38.8926 272.216 40.5208C272.216 42.149 273.536 43.4689 275.165 43.4689ZM260.129 13.7446H232.926C232.373 13.7446 231.926 14.1923 231.926 14.7446V38.295C231.926 38.8473 232.373 39.295 232.926 39.295H245.527V39.295V46.1565H240.631C240.079 46.1565 239.631 46.6042 239.631 47.1565C239.631 47.7087 240.079 48.1565 240.631 48.1565H246.505L246.527 48.1567L246.549 48.1565H252.423C252.976 48.1565 253.423 47.7087 253.423 47.1565C253.423 46.6042 252.976 46.1565 252.423 46.1565H247.527V39.295V39.295H260.129C260.681 39.295 261.129 38.8473 261.129 38.295V14.7446C261.129 14.1923 260.681 13.7446 260.129 13.7446Z" fill="url(#paint5_linear_3947_18732)"/>
+<rect x="412.192" y="163.547" width="55.0318" height="55.0318" rx="27.5159" fill="url(#paint6_linear_3947_18732)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M439.708 207.063C448.545 207.063 455.708 199.9 455.708 191.063C455.708 182.226 448.545 175.063 439.708 175.063C430.875 175.063 423.713 182.222 423.708 191.055H429.796C429.801 185.584 434.237 181.151 439.708 181.151C445.183 181.151 449.621 185.589 449.621 191.063C449.621 196.537 445.183 200.975 439.708 200.975L439.689 200.975V207.063L439.708 207.063ZM439.689 194.668H433.502V200.856H439.689V194.668ZM433.502 200.876H428.747V196.9H424.772V200.876H428.747V205.63H433.502V200.876Z" fill="white"/>
+<path d="M376.203 321.505L504.185 247.141C509.501 244.052 509.49 236.369 504.165 233.295L464.204 210.228" stroke="url(#paint7_linear_3947_18732)" stroke-width="2" stroke-linecap="round"/>
+<path d="M137.07 322.163L12.5042 249.269C7.20714 246.169 7.22928 238.506 12.5441 235.437L53.6072 211.724" stroke="url(#paint8_linear_3947_18732)" stroke-width="2" stroke-linecap="round"/>
+<path d="M259.44 118.411L259.44 58.9305" stroke="url(#paint9_linear_3947_18732)" stroke-width="2" stroke-linecap="round"/>
+<path d="M140.331 187.262L259.496 118.411L376.514 186.035L374.758 321.755L256.074 390.326L139.115 322.757L140.331 187.262Z" stroke="#1E40AF" stroke-width="2" stroke-dasharray="6 6"/>
+<path d="M165.024 198.169L165.013 308.274L256.449 361.061L256.471 256.223L165.024 198.169Z" fill="#1E40AF"/>
+<path d="M256.483 256.215L351.861 197.38L351.858 306.015L256.447 361.051L256.483 256.215Z" fill="#2563EB"/>
+<path d="M165.023 198.174L259.138 140.107L351.858 197.388L256.483 256.272L165.023 198.174Z" fill="#60A5FA"/>
+<defs>
+<filter id="filter0_f_3947_18732" x="159.285" y="207.359" width="189.674" height="184.979" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_3947_18732"/>
+</filter>
+<linearGradient id="paint0_linear_3947_18732" x1="69.0023" y1="95.5118" x2="87.8275" y2="191.062" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D97706" stop-opacity="0"/>
+<stop offset="1" stop-color="#D97706"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3947_18732" x1="451.317" y1="101.063" x2="430.624" y2="190.184" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D97706" stop-opacity="0"/>
+<stop offset="1" stop-color="#D97706"/>
+</linearGradient>
+<linearGradient id="paint2_linear_3947_18732" x1="71.1523" y1="163.503" x2="80.9968" y2="219.639" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3B82F6"/>
+<stop offset="1" stop-color="#1E3A8A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_3947_18732" x1="428.986" y1="63.667" x2="434.236" y2="93.6063" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3B82F6"/>
+<stop offset="1" stop-color="#1E3A8A"/>
+</linearGradient>
+<linearGradient id="paint4_linear_3947_18732" x1="86.1003" y1="63.667" x2="91.3507" y2="93.6063" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3B82F6"/>
+<stop offset="1" stop-color="#1E3A8A"/>
+</linearGradient>
+<linearGradient id="paint5_linear_3947_18732" x1="255.005" y1="6.09123" x2="261.152" y2="50.7075" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3B82F6"/>
+<stop offset="1" stop-color="#1E3A8A"/>
+</linearGradient>
+<linearGradient id="paint6_linear_3947_18732" x1="435.271" y1="163.503" x2="445.116" y2="219.639" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3B82F6"/>
+<stop offset="1" stop-color="#1E3A8A"/>
+</linearGradient>
+<linearGradient id="paint7_linear_3947_18732" x1="435.277" y1="197.748" x2="389.596" y2="326.266" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D97706" stop-opacity="0"/>
+<stop offset="0.334962" stop-color="#D97706"/>
+</linearGradient>
+<linearGradient id="paint8_linear_3947_18732" x1="61.7316" y1="203.793" x2="124.057" y2="328.657" gradientUnits="userSpaceOnUse">
+<stop offset="0.0058099" stop-color="#D97706" stop-opacity="0"/>
+<stop offset="0.413612" stop-color="#D97706"/>
+</linearGradient>
+<linearGradient id="paint9_linear_3947_18732" x1="259.44" y1="58.9306" x2="245.901" y2="99.6165" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D97706" stop-opacity="0"/>
+<stop offset="0.727821" stop-color="#D97706"/>
+</linearGradient>
+</defs>
+</svg>
+
diff --git a/src/apps/devdoc/images/infraops/providers.svg b/src/apps/devdoc/images/infraops/providers.svg
new file mode 100644
index 000000000..32e4d5d3c
--- /dev/null
+++ b/src/apps/devdoc/images/infraops/providers.svg
@@ -0,0 +1,42 @@
+<svg width="514" height="232" viewBox="0 0 514 232" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_3947_20848)">
+<path d="M23.6719 23.4929C23.6188 23.0223 23.4001 22.6577 23.0156 22.3991C22.6312 22.1373 22.1473 22.0064 21.5639 22.0064C21.1463 22.0064 20.785 22.0727 20.4801 22.2053C20.1752 22.3345 19.9382 22.5135 19.7692 22.7422C19.6035 22.9676 19.5206 23.2244 19.5206 23.5128C19.5206 23.7547 19.5769 23.9635 19.6896 24.1392C19.8056 24.3149 19.9564 24.4624 20.142 24.5817C20.331 24.6977 20.5331 24.7955 20.7486 24.875C20.964 24.9512 21.1712 25.0142 21.37 25.0639L22.3643 25.3224C22.6892 25.402 23.0223 25.5097 23.3636 25.6456C23.705 25.7815 24.0215 25.9605 24.3132 26.1825C24.6049 26.4046 24.8402 26.6797 25.0192 27.0078C25.2015 27.3359 25.2926 27.7287 25.2926 28.1861C25.2926 28.7628 25.1435 29.2749 24.8452 29.7223C24.5502 30.1697 24.121 30.5227 23.5575 30.7812C22.9974 31.0398 22.3196 31.169 21.5241 31.169C20.7618 31.169 20.1023 31.0481 19.5455 30.8061C18.9886 30.5642 18.5528 30.2211 18.2379 29.777C17.9231 29.3295 17.7491 28.7992 17.7159 28.1861H19.2571C19.2869 28.554 19.4063 28.8606 19.6151 29.1058C19.8272 29.3478 20.0973 29.5284 20.4254 29.6477C20.7569 29.7637 21.1198 29.8217 21.5142 29.8217C21.9484 29.8217 22.3345 29.7538 22.6726 29.6179C23.014 29.4787 23.2824 29.2865 23.478 29.0412C23.6735 28.7926 23.7713 28.5026 23.7713 28.1712C23.7713 27.8696 23.6851 27.6226 23.5128 27.4304C23.3438 27.2382 23.1134 27.0791 22.8217 26.9531C22.5334 26.8272 22.2069 26.7161 21.8423 26.62L20.6392 26.2919C19.8239 26.0698 19.1776 25.7434 18.7003 25.3125C18.2263 24.8816 17.9893 24.3116 17.9893 23.6023C17.9893 23.0156 18.1484 22.5036 18.4666 22.0661C18.7848 21.6286 19.2157 21.2888 19.7592 21.0469C20.3028 20.8016 20.916 20.679 21.5987 20.679C22.2881 20.679 22.8963 20.8 23.4233 21.0419C23.9536 21.2839 24.3712 21.617 24.6761 22.0412C24.9811 22.4621 25.1402 22.946 25.1534 23.4929H23.6719ZM30.3002 31.1541C29.5479 31.1541 28.8999 30.9934 28.3564 30.6719C27.8161 30.3471 27.3985 29.8913 27.1035 29.3047C26.8118 28.7147 26.666 28.0237 26.666 27.2315C26.666 26.4493 26.8118 25.7599 27.1035 25.1634C27.3985 24.5668 27.8095 24.1011 28.3365 23.7663C28.8668 23.4316 29.4866 23.2642 30.1958 23.2642C30.6267 23.2642 31.0443 23.3355 31.4487 23.478C31.853 23.6205 32.216 23.8442 32.5375 24.1491C32.859 24.4541 33.1125 24.8501 33.2981 25.3374C33.4837 25.8213 33.5765 26.4096 33.5765 27.1023V27.6293H27.5062V26.5156H32.1199C32.1199 26.1245 32.0403 25.7782 31.8812 25.4766C31.7221 25.1716 31.4984 24.9313 31.21 24.7557C30.925 24.58 30.5903 24.4922 30.2058 24.4922C29.7882 24.4922 29.4236 24.5949 29.112 24.8004C28.8038 25.0026 28.5652 25.2678 28.3961 25.5959C28.2304 25.9207 28.1475 26.2737 28.1475 26.6548V27.5249C28.1475 28.0353 28.237 28.4695 28.416 28.8274C28.5983 29.1854 28.8519 29.4588 29.1767 29.6477C29.5015 29.8333 29.881 29.9261 30.3152 29.9261C30.5969 29.9261 30.8538 29.8864 31.0858 29.8068C31.3178 29.724 31.5183 29.6013 31.6873 29.4389C31.8564 29.2765 31.9856 29.076 32.0751 28.8374L33.4821 29.0909C33.3694 29.5052 33.1672 29.8681 32.8755 30.1797C32.5872 30.4879 32.2243 30.7282 31.7868 30.9006C31.3526 31.0696 30.8571 31.1541 30.3002 31.1541ZM36.7124 20.8182V31H35.2259V20.8182H36.7124ZM42.0034 31.1541C41.251 31.1541 40.603 30.9934 40.0595 30.6719C39.5192 30.3471 39.1016 29.8913 38.8066 29.3047C38.515 28.7147 38.3691 28.0237 38.3691 27.2315C38.3691 26.4493 38.515 25.7599 38.8066 25.1634C39.1016 24.5668 39.5126 24.1011 40.0396 23.7663C40.5699 23.4316 41.1897 23.2642 41.899 23.2642C42.3298 23.2642 42.7475 23.3355 43.1518 23.478C43.5562 23.6205 43.9191 23.8442 44.2406 24.1491C44.5621 24.4541 44.8156 24.8501 45.0012 25.3374C45.1868 25.8213 45.2797 26.4096 45.2797 27.1023V27.6293H39.2093V26.5156H43.823C43.823 26.1245 43.7434 25.7782 43.5843 25.4766C43.4252 25.1716 43.2015 24.9313 42.9132 24.7557C42.6281 24.58 42.2934 24.4922 41.9089 24.4922C41.4913 24.4922 41.1267 24.5949 40.8152 24.8004C40.5069 25.0026 40.2683 25.2678 40.0993 25.5959C39.9335 25.9207 39.8507 26.2737 39.8507 26.6548V27.5249C39.8507 28.0353 39.9402 28.4695 40.1191 28.8274C40.3014 29.1854 40.555 29.4588 40.8798 29.6477C41.2046 29.8333 41.5841 29.9261 42.0183 29.9261C42.3 29.9261 42.5569 29.8864 42.7889 29.8068C43.0209 29.724 43.2214 29.6013 43.3904 29.4389C43.5595 29.2765 43.6887 29.076 43.7782 28.8374L45.1852 29.0909C45.0725 29.5052 44.8703 29.8681 44.5787 30.1797C44.2903 30.4879 43.9274 30.7282 43.4899 30.9006C43.0557 31.0696 42.5602 31.1541 42.0034 31.1541ZM50.1456 31.1541C49.4065 31.1541 48.7701 30.9867 48.2365 30.652C47.7062 30.3139 47.2985 29.8482 47.0135 29.255C46.7285 28.6617 46.5859 27.9822 46.5859 27.2166C46.5859 26.4411 46.7318 25.7566 47.0234 25.1634C47.3151 24.5668 47.7261 24.1011 48.2564 23.7663C48.7867 23.4316 49.4115 23.2642 50.1307 23.2642C50.7107 23.2642 51.2277 23.3719 51.6818 23.5874C52.1359 23.7995 52.5021 24.0978 52.7805 24.4822C53.0623 24.8667 53.2296 25.3158 53.2827 25.8295H51.8359C51.7564 25.4716 51.5741 25.1634 51.2891 24.9048C51.0073 24.6463 50.6295 24.517 50.1555 24.517C49.7412 24.517 49.3783 24.6264 49.0668 24.8452C48.7585 25.0606 48.5182 25.3688 48.3459 25.7699C48.1735 26.1676 48.0874 26.6383 48.0874 27.1818C48.0874 27.7386 48.1719 28.2192 48.3409 28.6236C48.5099 29.0279 48.7486 29.3411 49.0568 29.5632C49.3684 29.7853 49.7346 29.8963 50.1555 29.8963C50.4373 29.8963 50.6925 29.8449 50.9212 29.7422C51.1532 29.6361 51.3471 29.4853 51.5028 29.2898C51.6619 29.0942 51.773 28.8589 51.8359 28.5838H53.2827C53.2296 29.0777 53.0689 29.5185 52.8004 29.9062C52.532 30.294 52.1723 30.599 51.7216 30.821C51.2741 31.0431 50.7488 31.1541 50.1456 31.1541ZM58.437 23.3636V24.5568H54.2658V23.3636H58.437ZM55.3844 21.5341H56.8709V28.7578C56.8709 29.0462 56.914 29.2633 57.0002 29.4091C57.0864 29.5516 57.1974 29.6494 57.3333 29.7024C57.4725 29.7521 57.6233 29.777 57.7857 29.777C57.905 29.777 58.0094 29.7687 58.0989 29.7521C58.1884 29.7356 58.258 29.7223 58.3077 29.7124L58.5762 30.9403C58.49 30.9735 58.3674 31.0066 58.2083 31.0398C58.0492 31.0762 57.8503 31.0961 57.6117 31.0994C57.2206 31.1061 56.856 31.0365 56.5179 30.8906C56.1799 30.7448 55.9064 30.5194 55.6976 30.2145C55.4888 29.9096 55.3844 29.5268 55.3844 29.0661V21.5341ZM67.003 31.1541C66.2639 31.1541 65.6275 30.9867 65.0939 30.652C64.5636 30.3139 64.156 29.8482 63.8709 29.255C63.5859 28.6617 63.4434 27.9822 63.4434 27.2166C63.4434 26.4411 63.5892 25.7566 63.8809 25.1634C64.1725 24.5668 64.5835 24.1011 65.1138 23.7663C65.6441 23.4316 66.2689 23.2642 66.9881 23.2642C67.5681 23.2642 68.0852 23.3719 68.5392 23.5874C68.9933 23.7995 69.3596 24.0978 69.638 24.4822C69.9197 24.8667 70.0871 25.3158 70.1401 25.8295H68.6934C68.6138 25.4716 68.4315 25.1634 68.1465 24.9048C67.8648 24.6463 67.4869 24.517 67.013 24.517C66.5987 24.517 66.2357 24.6264 65.9242 24.8452C65.6159 25.0606 65.3757 25.3688 65.2033 25.7699C65.031 26.1676 64.9448 26.6383 64.9448 27.1818C64.9448 27.7386 65.0293 28.2192 65.1983 28.6236C65.3674 29.0279 65.606 29.3411 65.9142 29.5632C66.2258 29.7853 66.592 29.8963 67.013 29.8963C67.2947 29.8963 67.5499 29.8449 67.7786 29.7422C68.0106 29.6361 68.2045 29.4853 68.3603 29.2898C68.5194 29.0942 68.6304 28.8589 68.6934 28.5838H70.1401C70.0871 29.0777 69.9263 29.5185 69.6578 29.9062C69.3894 30.294 69.0298 30.599 68.579 30.821C68.1316 31.0431 67.6062 31.1541 67.003 31.1541ZM73.2163 20.8182V31H71.7298V20.8182H73.2163ZM78.4327 31.1541C77.7168 31.1541 77.092 30.9901 76.5584 30.6619C76.0248 30.3338 75.6105 29.8748 75.3155 29.2848C75.0205 28.6948 74.873 28.0054 74.873 27.2166C74.873 26.4245 75.0205 25.7318 75.3155 25.1385C75.6105 24.5452 76.0248 24.0845 76.5584 23.7564C77.092 23.4283 77.7168 23.2642 78.4327 23.2642C79.1486 23.2642 79.7734 23.4283 80.307 23.7564C80.8406 24.0845 81.2549 24.5452 81.5499 25.1385C81.8449 25.7318 81.9924 26.4245 81.9924 27.2166C81.9924 28.0054 81.8449 28.6948 81.5499 29.2848C81.2549 29.8748 80.8406 30.3338 80.307 30.6619C79.7734 30.9901 79.1486 31.1541 78.4327 31.1541ZM78.4377 29.9062C78.9017 29.9062 79.2862 29.7836 79.5911 29.5384C79.896 29.2931 80.1214 28.9666 80.2672 28.5589C80.4164 28.1513 80.4909 27.7022 80.4909 27.2116C80.4909 26.7244 80.4164 26.277 80.2672 25.8693C80.1214 25.4583 79.896 25.1286 79.5911 24.88C79.2862 24.6314 78.9017 24.5071 78.4377 24.5071C77.9703 24.5071 77.5826 24.6314 77.2743 24.88C76.9694 25.1286 76.7424 25.4583 76.5932 25.8693C76.4474 26.277 76.3745 26.7244 76.3745 27.2116C76.3745 27.7022 76.4474 28.1513 76.5932 28.5589C76.7424 28.9666 76.9694 29.2931 77.2743 29.5384C77.5826 29.7836 77.9703 29.9062 78.4377 29.9062ZM88.489 27.8331V23.3636H89.9805V31H88.5188V29.6776H88.4393C88.2636 30.0852 87.9819 30.425 87.5941 30.6967C87.2096 30.9652 86.7307 31.0994 86.1573 31.0994C85.6668 31.0994 85.2326 30.9917 84.8548 30.7763C84.4802 30.5575 84.1853 30.2344 83.9698 29.8068C83.7577 29.3793 83.6516 28.8506 83.6516 28.2209V23.3636H85.1381V28.0419C85.1381 28.5623 85.2823 28.9766 85.5707 29.2848C85.859 29.593 86.2335 29.7472 86.6942 29.7472C86.9727 29.7472 87.2494 29.6776 87.5245 29.5384C87.8029 29.3991 88.0333 29.1887 88.2156 28.907C88.4012 28.6252 88.4923 28.2673 88.489 27.8331ZM94.8365 31.1491C94.22 31.1491 93.6698 30.9917 93.1859 30.6768C92.7053 30.3587 92.3275 29.9062 92.0524 29.3196C91.7806 28.7296 91.6447 28.022 91.6447 27.1967C91.6447 26.3714 91.7823 25.6655 92.0574 25.0788C92.3358 24.4922 92.7169 24.0431 93.2008 23.7315C93.6847 23.42 94.2333 23.2642 94.8464 23.2642C95.3204 23.2642 95.7015 23.3438 95.9899 23.5028C96.2815 23.6586 96.5069 23.8409 96.666 24.0497C96.8284 24.2585 96.9544 24.4425 97.0439 24.6016H97.1333V20.8182H98.6199V31H97.1681V29.8118H97.0439C96.9544 29.9742 96.8251 30.1598 96.6561 30.3686C96.4904 30.5774 96.2617 30.7597 95.97 30.9155C95.6783 31.0713 95.3005 31.1491 94.8365 31.1491ZM95.1646 29.8814C95.5922 29.8814 95.9534 29.7687 96.2484 29.5433C96.5467 29.3146 96.7721 28.9981 96.9245 28.5938C97.0803 28.1894 97.1582 27.7187 97.1582 27.1818C97.1582 26.6515 97.082 26.1875 96.9295 25.7898C96.777 25.392 96.5533 25.0821 96.2583 24.8601C95.9634 24.638 95.5988 24.527 95.1646 24.527C94.7172 24.527 94.3443 24.643 94.046 24.875C93.7477 25.107 93.5223 25.4235 93.3699 25.8246C93.2207 26.2256 93.1461 26.678 93.1461 27.1818C93.1461 27.6922 93.2224 28.1513 93.3748 28.5589C93.5273 28.9666 93.7527 29.2898 94.051 29.5284C94.3526 29.7637 94.7238 29.8814 95.1646 29.8814ZM104.447 33.8636V23.3636H105.898V24.6016H106.023C106.109 24.4425 106.233 24.2585 106.395 24.0497C106.558 23.8409 106.783 23.6586 107.072 23.5028C107.36 23.3438 107.741 23.2642 108.215 23.2642C108.831 23.2642 109.382 23.42 109.866 23.7315C110.349 24.0431 110.729 24.4922 111.004 25.0788C111.282 25.6655 111.422 26.3714 111.422 27.1967C111.422 28.022 111.284 28.7296 111.009 29.3196C110.734 29.9062 110.356 30.3587 109.876 30.6768C109.395 30.9917 108.846 31.1491 108.23 31.1491C107.766 31.1491 107.386 31.0713 107.091 30.9155C106.8 30.7597 106.571 30.5774 106.405 30.3686C106.24 30.1598 106.112 29.9742 106.023 29.8118H105.933V33.8636H104.447ZM105.903 27.1818C105.903 27.7187 105.981 28.1894 106.137 28.5938C106.293 28.9981 106.518 29.3146 106.813 29.5433C107.108 29.7687 107.469 29.8814 107.897 29.8814C108.341 29.8814 108.712 29.7637 109.01 29.5284C109.309 29.2898 109.534 28.9666 109.687 28.5589C109.842 28.1513 109.92 27.6922 109.92 27.1818C109.92 26.678 109.844 26.2256 109.692 25.8246C109.542 25.4235 109.317 25.107 109.015 24.875C108.717 24.643 108.344 24.527 107.897 24.527C107.466 24.527 107.101 24.638 106.803 24.8601C106.508 25.0821 106.284 25.392 106.132 25.7898C105.979 26.1875 105.903 26.6515 105.903 27.1818ZM113.087 31V23.3636H114.524V24.5767H114.604C114.743 24.1657 114.988 23.8426 115.339 23.6072C115.694 23.3686 116.095 23.2493 116.542 23.2493C116.635 23.2493 116.745 23.2526 116.871 23.2592C117 23.2659 117.101 23.2741 117.174 23.2841V24.706C117.114 24.6894 117.008 24.6712 116.856 24.6513C116.703 24.6281 116.551 24.6165 116.398 24.6165C116.047 24.6165 115.734 24.6911 115.459 24.8402C115.187 24.986 114.971 25.1899 114.812 25.4517C114.653 25.7102 114.574 26.0052 114.574 26.3366V31H113.087ZM121.403 31.1541C120.688 31.1541 120.063 30.9901 119.529 30.6619C118.996 30.3338 118.581 29.8748 118.286 29.2848C117.991 28.6948 117.844 28.0054 117.844 27.2166C117.844 26.4245 117.991 25.7318 118.286 25.1385C118.581 24.5452 118.996 24.0845 119.529 23.7564C120.063 23.4283 120.688 23.2642 121.403 23.2642C122.119 23.2642 122.744 23.4283 123.278 23.7564C123.811 24.0845 124.226 24.5452 124.521 25.1385C124.816 25.7318 124.963 26.4245 124.963 27.2166C124.963 28.0054 124.816 28.6948 124.521 29.2848C124.226 29.8748 123.811 30.3338 123.278 30.6619C122.744 30.9901 122.119 31.1541 121.403 31.1541ZM121.408 29.9062C121.872 29.9062 122.257 29.7836 122.562 29.5384C122.867 29.2931 123.092 28.9666 123.238 28.5589C123.387 28.1513 123.462 27.7022 123.462 27.2116C123.462 26.7244 123.387 26.277 123.238 25.8693C123.092 25.4583 122.867 25.1286 122.562 24.88C122.257 24.6314 121.872 24.5071 121.408 24.5071C120.941 24.5071 120.553 24.6314 120.245 24.88C119.94 25.1286 119.713 25.4583 119.564 25.8693C119.418 26.277 119.345 26.7244 119.345 27.2116C119.345 27.7022 119.418 28.1513 119.564 28.5589C119.713 28.9666 119.94 29.2931 120.245 29.5384C120.553 29.7836 120.941 29.9062 121.408 29.9062ZM132.895 23.3636L130.126 31H128.535L125.761 23.3636H127.357L129.291 29.2401H129.37L131.299 23.3636H132.895ZM134.292 31V23.3636H135.779V31H134.292ZM135.043 22.1854C134.784 22.1854 134.562 22.0992 134.377 21.9268C134.194 21.7512 134.103 21.5424 134.103 21.3004C134.103 21.0552 134.194 20.8464 134.377 20.674C134.562 20.4983 134.784 20.4105 135.043 20.4105C135.301 20.4105 135.522 20.4983 135.704 20.674C135.89 20.8464 135.983 21.0552 135.983 21.3004C135.983 21.5424 135.89 21.7512 135.704 21.9268C135.522 22.0992 135.301 22.1854 135.043 22.1854ZM140.637 31.1491C140.021 31.1491 139.471 30.9917 138.987 30.6768C138.506 30.3587 138.128 29.9062 137.853 29.3196C137.581 28.7296 137.445 28.022 137.445 27.1967C137.445 26.3714 137.583 25.6655 137.858 25.0788C138.137 24.4922 138.518 24.0431 139.002 23.7315C139.485 23.42 140.034 23.2642 140.647 23.2642C141.121 23.2642 141.502 23.3438 141.791 23.5028C142.082 23.6586 142.308 23.8409 142.467 24.0497C142.629 24.2585 142.755 24.4425 142.845 24.6016H142.934V20.8182H144.421V31H142.969V29.8118H142.845C142.755 29.9742 142.626 30.1598 142.457 30.3686C142.291 30.5774 142.062 30.7597 141.771 30.9155C141.479 31.0713 141.101 31.1491 140.637 31.1491ZM140.965 29.8814C141.393 29.8814 141.754 29.7687 142.049 29.5433C142.347 29.3146 142.573 28.9981 142.725 28.5938C142.881 28.1894 142.959 27.7187 142.959 27.1818C142.959 26.6515 142.883 26.1875 142.73 25.7898C142.578 25.392 142.354 25.0821 142.059 24.8601C141.764 24.638 141.4 24.527 140.965 24.527C140.518 24.527 140.145 24.643 139.847 24.875C139.548 25.107 139.323 25.4235 139.171 25.8246C139.021 26.2256 138.947 26.678 138.947 27.1818C138.947 27.6922 139.023 28.1513 139.176 28.5589C139.328 28.9666 139.553 29.2898 139.852 29.5284C140.153 29.7637 140.525 29.8814 140.965 29.8814ZM149.833 31.1541C149.081 31.1541 148.433 30.9934 147.89 30.6719C147.349 30.3471 146.932 29.8913 146.637 29.3047C146.345 28.7147 146.199 28.0237 146.199 27.2315C146.199 26.4493 146.345 25.7599 146.637 25.1634C146.932 24.5668 147.343 24.1011 147.87 23.7663C148.4 23.4316 149.02 23.2642 149.729 23.2642C150.16 23.2642 150.578 23.3355 150.982 23.478C151.386 23.6205 151.749 23.8442 152.071 24.1491C152.392 24.4541 152.646 24.8501 152.831 25.3374C153.017 25.8213 153.11 26.4096 153.11 27.1023V27.6293H147.039V26.5156H151.653C151.653 26.1245 151.574 25.7782 151.414 25.4766C151.255 25.1716 151.032 24.9313 150.743 24.7557C150.458 24.58 150.123 24.4922 149.739 24.4922C149.321 24.4922 148.957 24.5949 148.645 24.8004C148.337 25.0026 148.098 25.2678 147.929 25.5959C147.764 25.9207 147.681 26.2737 147.681 26.6548V27.5249C147.681 28.0353 147.77 28.4695 147.949 28.8274C148.132 29.1854 148.385 29.4588 148.71 29.6477C149.035 29.8333 149.414 29.9261 149.848 29.9261C150.13 29.9261 150.387 29.8864 150.619 29.8068C150.851 29.724 151.051 29.6013 151.221 29.4389C151.39 29.2765 151.519 29.076 151.608 28.8374L153.015 29.0909C152.903 29.5052 152.7 29.8681 152.409 30.1797C152.12 30.4879 151.757 30.7282 151.32 30.9006C150.886 31.0696 150.39 31.1541 149.833 31.1541ZM154.759 31V23.3636H156.196V24.5767H156.275C156.415 24.1657 156.66 23.8426 157.011 23.6072C157.366 23.3686 157.767 23.2493 158.214 23.2493C158.307 23.2493 158.416 23.2526 158.542 23.2592C158.672 23.2659 158.773 23.2741 158.846 23.2841V24.706C158.786 24.6894 158.68 24.6712 158.528 24.6513C158.375 24.6281 158.223 24.6165 158.07 24.6165C157.719 24.6165 157.406 24.6911 157.131 24.8402C156.859 24.986 156.643 25.1899 156.484 25.4517C156.325 25.7102 156.246 26.0052 156.246 26.3366V31H154.759Z" fill="#111827"/>
+<g clip-path="url(#clip0_3947_20848)">
+<rect x="17" y="42" width="480" height="36" rx="4" fill="white"/>
+<path d="M486 57.5L481 62.5L476 57.5" stroke="#111827" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<rect x="17" y="42" width="480" height="36" rx="4" stroke="#E4E4E7"/>
+<rect x="17.5" y="110.5" width="112" height="103" rx="3.5" fill="white"/>
+<rect x="17.5" y="110.5" width="112" height="103" rx="3.5" stroke="#E4E4E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.5 162C82.3366 162 89.5 154.837 89.5 146C89.5 137.163 82.3366 130 73.5 130C64.6661 130 57.5043 137.159 57.5 145.992H63.5879C63.5922 140.521 68.0283 136.088 73.5 136.088C78.9743 136.088 83.4121 140.526 83.4121 146C83.4121 151.474 78.9743 155.912 73.5 155.912L73.4807 155.912V162L73.5 162ZM73.4805 149.605H67.2933V155.793H73.4805V149.605ZM67.2933 155.813H62.5389V151.837H58.5631V155.813H62.5387V160.567H67.2933V155.813Z" fill="#111827"/>
+<path d="M32.9148 189H29.6186V178.818H33.0192C34.0168 178.818 34.8736 179.022 35.5895 179.43C36.3054 179.834 36.8539 180.416 37.2351 181.175C37.6196 181.93 37.8118 182.837 37.8118 183.894C37.8118 184.955 37.6179 185.866 37.2301 186.629C36.8456 187.391 36.2888 187.978 35.5597 188.388C34.8305 188.796 33.9489 189 32.9148 189ZM31.1548 187.658H32.8303C33.6058 187.658 34.2505 187.512 34.7642 187.22C35.2779 186.925 35.6624 186.499 35.9176 185.942C36.1728 185.382 36.3004 184.7 36.3004 183.894C36.3004 183.095 36.1728 182.418 35.9176 181.861C35.6657 181.304 35.2895 180.881 34.7891 180.593C34.2886 180.305 33.6671 180.161 32.9247 180.161H31.1548V187.658ZM39.6028 189V181.364H41.0893V189H39.6028ZM40.3535 180.185C40.095 180.185 39.8729 180.099 39.6873 179.927C39.505 179.751 39.4139 179.542 39.4139 179.3C39.4139 179.055 39.505 178.846 39.6873 178.674C39.8729 178.498 40.095 178.411 40.3535 178.411C40.612 178.411 40.8324 178.498 41.0147 178.674C41.2003 178.846 41.2931 179.055 41.2931 179.3C41.2931 179.542 41.2003 179.751 41.0147 179.927C40.8324 180.099 40.612 180.185 40.3535 180.185ZM46.2908 192.023C45.6843 192.023 45.1623 191.943 44.7248 191.784C44.2906 191.625 43.936 191.415 43.6609 191.153C43.3858 190.891 43.1803 190.604 43.0444 190.293L44.3221 189.766C44.4116 189.911 44.5309 190.066 44.68 190.228C44.8325 190.394 45.038 190.535 45.2965 190.651C45.5584 190.767 45.8948 190.825 46.3058 190.825C46.8692 190.825 47.3349 190.687 47.7028 190.412C48.0707 190.14 48.2546 189.706 48.2546 189.109V187.608H48.1602C48.0707 187.77 47.9414 187.951 47.7724 188.15C47.6067 188.349 47.378 188.521 47.0863 188.667C46.7946 188.813 46.4151 188.886 45.9478 188.886C45.3446 188.886 44.801 188.745 44.3171 188.463C43.8365 188.178 43.4554 187.759 43.1737 187.205C42.8952 186.648 42.756 185.964 42.756 185.152C42.756 184.34 42.8936 183.644 43.1687 183.064C43.4471 182.484 43.8282 182.04 44.3121 181.732C44.796 181.42 45.3446 181.264 45.9577 181.264C46.4317 181.264 46.8145 181.344 47.1062 181.503C47.3978 181.659 47.6249 181.841 47.7873 182.05C47.953 182.259 48.0806 182.442 48.1701 182.602H48.2795V181.364H49.7362V189.169C49.7362 189.825 49.5837 190.364 49.2788 190.785C48.9738 191.206 48.5612 191.517 48.0408 191.719C47.5238 191.922 46.9405 192.023 46.2908 192.023ZM46.2759 187.653C46.7035 187.653 47.0647 187.553 47.3597 187.354C47.658 187.152 47.8834 186.864 48.0359 186.489C48.1916 186.112 48.2695 185.659 48.2695 185.132C48.2695 184.618 48.1933 184.166 48.0408 183.775C47.8884 183.384 47.6647 183.079 47.3697 182.86C47.0747 182.638 46.7101 182.527 46.2759 182.527C45.8285 182.527 45.4556 182.643 45.1573 182.875C44.859 183.104 44.6336 183.415 44.4812 183.81C44.332 184.204 44.2575 184.645 44.2575 185.132C44.2575 185.633 44.3337 186.072 44.4862 186.45C44.6386 186.827 44.864 187.122 45.1623 187.335C45.4639 187.547 45.8351 187.653 46.2759 187.653ZM51.7298 189V181.364H53.2163V189H51.7298ZM52.4805 180.185C52.2219 180.185 51.9999 180.099 51.8143 179.927C51.632 179.751 51.5408 179.542 51.5408 179.3C51.5408 179.055 51.632 178.846 51.8143 178.674C51.9999 178.498 52.2219 178.411 52.4805 178.411C52.739 178.411 52.9594 178.498 53.1417 178.674C53.3273 178.846 53.4201 179.055 53.4201 179.3C53.4201 179.542 53.3273 179.751 53.1417 179.927C52.9594 180.099 52.739 180.185 52.4805 180.185ZM58.7807 181.364V182.557H54.6096V181.364H58.7807ZM55.7282 179.534H57.2147V186.758C57.2147 187.046 57.2578 187.263 57.3439 187.409C57.4301 187.552 57.5411 187.649 57.677 187.702C57.8162 187.752 57.967 187.777 58.1294 187.777C58.2488 187.777 58.3532 187.769 58.4426 187.752C58.5321 187.736 58.6017 187.722 58.6515 187.712L58.9199 188.94C58.8337 188.973 58.7111 189.007 58.552 189.04C58.3929 189.076 58.1941 189.096 57.9554 189.099C57.5643 189.106 57.1998 189.036 56.8617 188.891C56.5236 188.745 56.2502 188.519 56.0414 188.214C55.8326 187.91 55.7282 187.527 55.7282 187.066V179.534ZM62.6474 189.169C62.1635 189.169 61.726 189.08 61.3349 188.901C60.9438 188.718 60.6339 188.455 60.4052 188.11C60.1798 187.765 60.0671 187.343 60.0671 186.842C60.0671 186.411 60.15 186.057 60.3157 185.778C60.4814 185.5 60.7051 185.28 60.9869 185.117C61.2686 184.955 61.5835 184.832 61.9315 184.749C62.2795 184.666 62.6341 184.603 62.9954 184.56C63.4528 184.507 63.824 184.464 64.109 184.431C64.3941 184.395 64.6012 184.337 64.7305 184.257C64.8597 184.178 64.9244 184.048 64.9244 183.869V183.835C64.9244 183.4 64.8017 183.064 64.5565 182.825C64.3145 182.587 63.9532 182.467 63.4727 182.467C62.9722 182.467 62.5778 182.578 62.2894 182.8C62.0044 183.019 61.8072 183.263 61.6978 183.531L60.3008 183.213C60.4665 182.749 60.7085 182.375 61.0266 182.089C61.3481 181.801 61.7177 181.592 62.1353 181.463C62.5529 181.33 62.9921 181.264 63.4528 181.264C63.7577 181.264 64.0808 181.301 64.4222 181.374C64.7669 181.443 65.0884 181.572 65.3867 181.761C65.6883 181.95 65.9353 182.22 66.1275 182.572C66.3197 182.92 66.4158 183.372 66.4158 183.929V189H64.9641V187.956H64.9045C64.8084 188.148 64.6642 188.337 64.4719 188.523C64.2797 188.708 64.0328 188.862 63.7312 188.985C63.4296 189.108 63.0683 189.169 62.6474 189.169ZM62.9705 187.976C63.3815 187.976 63.7328 187.895 64.0245 187.732C64.3195 187.57 64.5432 187.358 64.6957 187.096C64.8514 186.831 64.9293 186.547 64.9293 186.246V185.261C64.8763 185.314 64.7736 185.364 64.6211 185.411C64.4719 185.454 64.3013 185.492 64.109 185.525C63.9168 185.555 63.7295 185.583 63.5472 185.609C63.3649 185.633 63.2125 185.652 63.0898 185.669C62.8015 185.705 62.538 185.767 62.2994 185.853C62.064 185.939 61.8751 186.063 61.7326 186.226C61.5934 186.385 61.5238 186.597 61.5238 186.862C61.5238 187.23 61.6597 187.509 61.9315 187.697C62.2032 187.883 62.5496 187.976 62.9705 187.976ZM69.8823 178.818V189H68.3958V178.818H69.8823ZM84.551 183.909C84.551 184.996 84.3521 185.931 83.9544 186.713C83.5566 187.492 83.0114 188.092 82.3187 188.513C81.6293 188.93 80.8455 189.139 79.9672 189.139C79.0855 189.139 78.2984 188.93 77.6056 188.513C76.9163 188.092 76.3727 187.49 75.975 186.708C75.5772 185.926 75.3784 184.993 75.3784 183.909C75.3784 182.822 75.5772 181.889 75.975 181.11C76.3727 180.328 76.9163 179.728 77.6056 179.31C78.2984 178.889 79.0855 178.679 79.9672 178.679C80.8455 178.679 81.6293 178.889 82.3187 179.31C83.0114 179.728 83.5566 180.328 83.9544 181.11C84.3521 181.889 84.551 182.822 84.551 183.909ZM83.0297 183.909C83.0297 183.08 82.8954 182.383 82.627 181.816C82.3618 181.246 81.9972 180.815 81.5332 180.523C81.0725 180.228 80.5505 180.081 79.9672 180.081C79.3805 180.081 78.8568 180.228 78.3961 180.523C77.9354 180.815 77.5708 181.246 77.3024 181.816C77.0372 182.383 76.9047 183.08 76.9047 183.909C76.9047 184.738 77.0372 185.437 77.3024 186.007C77.5708 186.574 77.9354 187.005 78.3961 187.3C78.8568 187.591 79.3805 187.737 79.9672 187.737C80.5505 187.737 81.0725 187.591 81.5332 187.3C81.9972 187.005 82.3618 186.574 82.627 186.007C82.8954 185.437 83.0297 184.738 83.0297 183.909ZM89.5636 189.154C88.8245 189.154 88.1881 188.987 87.6545 188.652C87.1242 188.314 86.7165 187.848 86.4315 187.255C86.1464 186.662 86.0039 185.982 86.0039 185.217C86.0039 184.441 86.1497 183.757 86.4414 183.163C86.7331 182.567 87.1441 182.101 87.6744 181.766C88.2047 181.432 88.8294 181.264 89.5487 181.264C90.1287 181.264 90.6457 181.372 91.0998 181.587C91.5539 181.799 91.9201 182.098 92.1985 182.482C92.4802 182.867 92.6476 183.316 92.7006 183.83H91.2539C91.1744 183.472 90.9921 183.163 90.707 182.905C90.4253 182.646 90.0475 182.517 89.5735 182.517C89.1592 182.517 88.7963 182.626 88.4847 182.845C88.1765 183.061 87.9362 183.369 87.7638 183.77C87.5915 184.168 87.5053 184.638 87.5053 185.182C87.5053 185.739 87.5898 186.219 87.7589 186.624C87.9279 187.028 88.1665 187.341 88.4748 187.563C88.7863 187.785 89.1526 187.896 89.5735 187.896C89.8552 187.896 90.1104 187.845 90.3391 187.742C90.5711 187.636 90.765 187.485 90.9208 187.29C91.0799 187.094 91.1909 186.859 91.2539 186.584H92.7006C92.6476 187.078 92.4869 187.518 92.2184 187.906C91.9499 188.294 91.5903 188.599 91.1396 188.821C90.6921 189.043 90.1668 189.154 89.5636 189.154ZM97.5815 189.154C96.8291 189.154 96.1812 188.993 95.6376 188.672C95.0974 188.347 94.6797 187.891 94.3848 187.305C94.0931 186.715 93.9473 186.024 93.9473 185.232C93.9473 184.449 94.0931 183.76 94.3848 183.163C94.6797 182.567 95.0907 182.101 95.6177 181.766C96.148 181.432 96.7678 181.264 97.4771 181.264C97.908 181.264 98.3256 181.335 98.7299 181.478C99.1343 181.621 99.4972 181.844 99.8187 182.149C100.14 182.454 100.394 182.85 100.579 183.337C100.765 183.821 100.858 184.41 100.858 185.102V185.629H94.7875V184.516H99.4011C99.4011 184.125 99.3216 183.778 99.1625 183.477C99.0034 183.172 98.7797 182.931 98.4913 182.756C98.2063 182.58 97.8715 182.492 97.487 182.492C97.0694 182.492 96.7048 182.595 96.3933 182.8C96.085 183.003 95.8464 183.268 95.6774 183.596C95.5117 183.921 95.4288 184.274 95.4288 184.655V185.525C95.4288 186.035 95.5183 186.469 95.6973 186.827C95.8796 187.185 96.1331 187.459 96.4579 187.648C96.7827 187.833 97.1622 187.926 97.5964 187.926C97.8781 187.926 98.135 187.886 98.367 187.807C98.599 187.724 98.7995 187.601 98.9686 187.439C99.1376 187.277 99.2669 187.076 99.3564 186.837L100.763 187.091C100.651 187.505 100.448 187.868 100.157 188.18C99.8684 188.488 99.5055 188.728 99.068 188.901C98.6338 189.07 98.1383 189.154 97.5815 189.154ZM104.729 189.169C104.246 189.169 103.808 189.08 103.417 188.901C103.026 188.718 102.716 188.455 102.487 188.11C102.262 187.765 102.149 187.343 102.149 186.842C102.149 186.411 102.232 186.057 102.398 185.778C102.563 185.5 102.787 185.28 103.069 185.117C103.351 184.955 103.665 184.832 104.013 184.749C104.362 184.666 104.716 184.603 105.077 184.56C105.535 184.507 105.906 184.464 106.191 184.431C106.476 184.395 106.683 184.337 106.812 184.257C106.942 184.178 107.006 184.048 107.006 183.869V183.835C107.006 183.4 106.884 183.064 106.638 182.825C106.397 182.587 106.035 182.467 105.555 182.467C105.054 182.467 104.66 182.578 104.371 182.8C104.086 183.019 103.889 183.263 103.78 183.531L102.383 183.213C102.549 182.749 102.79 182.375 103.109 182.089C103.43 181.801 103.8 181.592 104.217 181.463C104.635 181.33 105.074 181.264 105.535 181.264C105.84 181.264 106.163 181.301 106.504 181.374C106.849 181.443 107.17 181.572 107.469 181.761C107.77 181.95 108.017 182.22 108.21 182.572C108.402 182.92 108.498 183.372 108.498 183.929V189H107.046V187.956H106.987C106.89 188.148 106.746 188.337 106.554 188.523C106.362 188.708 106.115 188.862 105.813 188.985C105.512 189.108 105.15 189.169 104.729 189.169ZM105.053 187.976C105.464 187.976 105.815 187.895 106.107 187.732C106.402 187.57 106.625 187.358 106.778 187.096C106.933 186.831 107.011 186.547 107.011 186.246V185.261C106.958 185.314 106.856 185.364 106.703 185.411C106.554 185.454 106.383 185.492 106.191 185.525C105.999 185.555 105.812 185.583 105.629 185.609C105.447 185.633 105.295 185.652 105.172 185.669C104.884 185.705 104.62 185.767 104.381 185.853C104.146 185.939 103.957 186.063 103.815 186.226C103.675 186.385 103.606 186.597 103.606 186.862C103.606 187.23 103.742 187.509 104.013 187.697C104.285 187.883 104.632 187.976 105.053 187.976ZM111.964 184.466V189H110.478V181.364H111.905V182.607H111.999C112.175 182.202 112.45 181.877 112.824 181.632C113.202 181.387 113.678 181.264 114.251 181.264C114.772 181.264 115.227 181.374 115.618 181.592C116.01 181.808 116.313 182.129 116.528 182.557C116.744 182.984 116.851 183.513 116.851 184.143V189H115.365V184.322C115.365 183.768 115.221 183.336 114.932 183.024C114.644 182.709 114.248 182.552 113.744 182.552C113.399 182.552 113.093 182.626 112.824 182.776C112.559 182.925 112.349 183.143 112.193 183.432C112.041 183.717 111.964 184.062 111.964 184.466Z" fill="#111827"/>
+<rect x="162.5" y="110.5" width="189" height="103" rx="3.5" fill="white"/>
+<rect x="162.5" y="110.5" width="189" height="103" rx="3.5" stroke="#E4E4E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.018 143.382C250.018 143.776 250.061 144.095 250.135 144.329C250.22 144.563 250.327 144.819 250.476 145.095C250.529 145.181 250.55 145.266 250.55 145.34C250.55 145.447 250.486 145.553 250.348 145.659L249.677 146.106C249.582 146.17 249.486 146.202 249.401 146.202C249.294 146.202 249.188 146.149 249.081 146.053C248.932 145.894 248.805 145.723 248.698 145.553C248.592 145.372 248.485 145.17 248.368 144.925C247.538 145.904 246.495 146.394 245.239 146.394C244.345 146.394 243.632 146.138 243.111 145.628C242.589 145.117 242.323 144.436 242.323 143.584C242.323 142.679 242.643 141.945 243.292 141.392C243.941 140.838 244.803 140.562 245.899 140.562C246.261 140.562 246.634 140.593 247.027 140.647C247.421 140.7 247.826 140.785 248.251 140.881V140.104C248.251 139.295 248.081 138.731 247.751 138.401C247.411 138.071 246.836 137.911 246.016 137.911C245.644 137.911 245.261 137.954 244.867 138.05C244.473 138.146 244.09 138.263 243.717 138.412C243.547 138.486 243.419 138.529 243.345 138.55C243.27 138.571 243.217 138.582 243.175 138.582C243.026 138.582 242.951 138.476 242.951 138.252V137.731C242.951 137.56 242.972 137.433 243.026 137.358C243.079 137.284 243.175 137.209 243.324 137.135C243.696 136.943 244.143 136.783 244.665 136.656C245.186 136.517 245.74 136.453 246.325 136.453C247.591 136.453 248.517 136.741 249.113 137.315C249.699 137.89 249.997 138.763 249.997 139.934V143.382H250.018ZM245.697 145C246.048 145 246.41 144.936 246.793 144.808C247.176 144.68 247.517 144.446 247.804 144.127C247.975 143.925 248.102 143.701 248.166 143.446C248.23 143.19 248.273 142.882 248.273 142.52V142.073C247.964 141.998 247.634 141.934 247.293 141.892C246.953 141.849 246.623 141.828 246.293 141.828C245.58 141.828 245.058 141.966 244.707 142.254C244.356 142.541 244.186 142.946 244.186 143.478C244.186 143.978 244.313 144.35 244.58 144.606C244.835 144.872 245.207 145 245.697 145ZM254.243 146.149C254.052 146.149 253.924 146.117 253.839 146.043C253.754 145.979 253.679 145.83 253.615 145.628L251.114 137.401C251.05 137.188 251.018 137.049 251.018 136.975C251.018 136.805 251.104 136.709 251.274 136.709H252.317C252.519 136.709 252.657 136.741 252.732 136.815C252.817 136.879 252.881 137.028 252.945 137.23L254.733 144.276L256.393 137.23C256.446 137.017 256.51 136.879 256.595 136.815C256.68 136.751 256.829 136.709 257.021 136.709H257.872C258.075 136.709 258.213 136.741 258.298 136.815C258.383 136.879 258.458 137.028 258.5 137.23L260.182 144.361L262.023 137.23C262.087 137.017 262.162 136.879 262.236 136.815C262.321 136.751 262.46 136.709 262.651 136.709H263.641C263.811 136.709 263.907 136.794 263.907 136.975C263.907 137.02 263.899 137.066 263.89 137.118L263.886 137.145C263.875 137.209 263.854 137.294 263.811 137.411L261.246 145.638C261.182 145.851 261.108 145.989 261.023 146.053C260.938 146.117 260.799 146.16 260.618 146.16H259.703C259.501 146.16 259.362 146.128 259.277 146.053C259.192 145.979 259.118 145.84 259.075 145.628L257.425 138.763L255.786 145.617C255.733 145.83 255.669 145.968 255.584 146.043C255.499 146.117 255.35 146.149 255.159 146.149H254.243ZM267.919 146.436C267.366 146.436 266.812 146.373 266.28 146.245C265.748 146.117 265.333 145.979 265.056 145.819C264.886 145.723 264.769 145.617 264.726 145.521C264.684 145.425 264.663 145.319 264.663 145.223V144.68C264.663 144.457 264.748 144.35 264.907 144.35C264.971 144.35 265.035 144.361 265.099 144.382C265.14 144.396 265.195 144.419 265.257 144.444L265.257 144.445C265.291 144.459 265.327 144.474 265.365 144.489C265.727 144.648 266.121 144.776 266.536 144.861C266.961 144.946 267.377 144.989 267.802 144.989C268.473 144.989 268.994 144.872 269.356 144.638C269.718 144.404 269.91 144.063 269.91 143.627C269.91 143.329 269.814 143.084 269.622 142.882C269.431 142.679 269.069 142.499 268.547 142.328L267.004 141.849C266.227 141.605 265.652 141.243 265.301 140.764C264.95 140.295 264.769 139.774 264.769 139.221C264.769 138.774 264.865 138.38 265.056 138.039C265.248 137.699 265.503 137.401 265.823 137.166C266.142 136.922 266.504 136.741 266.93 136.613C267.355 136.485 267.802 136.432 268.271 136.432C268.505 136.432 268.749 136.443 268.984 136.475C269.228 136.507 269.452 136.549 269.675 136.592C269.888 136.645 270.09 136.698 270.282 136.762C270.474 136.826 270.623 136.89 270.729 136.954C270.878 137.039 270.984 137.124 271.048 137.22C271.112 137.305 271.144 137.422 271.144 137.571V138.071C271.144 138.295 271.059 138.412 270.899 138.412C270.814 138.412 270.676 138.369 270.495 138.284C269.888 138.007 269.207 137.869 268.451 137.869C267.845 137.869 267.366 137.965 267.036 138.167C266.706 138.369 266.536 138.678 266.536 139.114C266.536 139.412 266.642 139.668 266.855 139.87C267.068 140.072 267.462 140.274 268.026 140.455L269.537 140.934C270.303 141.179 270.857 141.519 271.187 141.956C271.517 142.392 271.676 142.892 271.676 143.446C271.676 143.903 271.58 144.318 271.4 144.68C271.208 145.042 270.953 145.361 270.623 145.617C270.293 145.883 269.899 146.075 269.441 146.213C268.962 146.362 268.462 146.436 267.919 146.436ZM269.931 151.609C266.429 154.195 261.342 155.568 256.968 155.568C250.837 155.568 245.314 153.301 241.142 149.533C240.812 149.235 241.11 148.831 241.504 149.065C246.016 151.683 251.582 153.269 257.34 153.269C261.225 153.269 265.493 152.46 269.42 150.8C270.005 150.534 270.505 151.183 269.931 151.609ZM267.291 149.81C268.43 149.672 270.942 149.374 271.389 149.948C271.836 150.513 270.889 152.886 270.463 153.94C270.335 154.259 270.612 154.387 270.899 154.142C272.772 152.567 273.262 149.278 272.879 148.799C272.496 148.331 269.207 147.926 267.206 149.331C266.897 149.555 266.951 149.853 267.291 149.81Z" fill="#111827"/>
+<path d="M183.979 189H182.348L186.012 178.818H187.787L191.451 189H189.82L186.942 180.668H186.862L183.979 189ZM184.252 185.013H189.542V186.305H184.252V185.013ZM192.802 189V181.364H194.229V182.607H194.323C194.482 182.186 194.743 181.857 195.104 181.622C195.465 181.384 195.898 181.264 196.401 181.264C196.912 181.264 197.339 181.384 197.684 181.622C198.032 181.861 198.289 182.189 198.455 182.607H198.534C198.717 182.199 199.007 181.874 199.404 181.632C199.802 181.387 200.276 181.264 200.826 181.264C201.519 181.264 202.084 181.481 202.521 181.915C202.962 182.35 203.183 183.004 203.183 183.879V189H201.696V184.018C201.696 183.501 201.555 183.127 201.274 182.895C200.992 182.663 200.655 182.547 200.264 182.547C199.78 182.547 199.404 182.696 199.136 182.994C198.867 183.289 198.733 183.669 198.733 184.133V189H197.252V183.924C197.252 183.51 197.122 183.177 196.864 182.925C196.605 182.673 196.269 182.547 195.855 182.547C195.573 182.547 195.313 182.621 195.074 182.771C194.839 182.916 194.648 183.12 194.502 183.382C194.36 183.644 194.289 183.947 194.289 184.292V189H192.802ZM207.397 189.169C206.913 189.169 206.476 189.08 206.085 188.901C205.694 188.718 205.384 188.455 205.155 188.11C204.93 187.765 204.817 187.343 204.817 186.842C204.817 186.411 204.9 186.057 205.066 185.778C205.231 185.5 205.455 185.28 205.737 185.117C206.019 184.955 206.333 184.832 206.681 184.749C207.029 184.666 207.384 184.603 207.745 184.56C208.203 184.507 208.574 184.464 208.859 184.431C209.144 184.395 209.351 184.337 209.48 184.257C209.61 184.178 209.674 184.048 209.674 183.869V183.835C209.674 183.4 209.552 183.064 209.306 182.825C209.065 182.587 208.703 182.467 208.223 182.467C207.722 182.467 207.328 182.578 207.039 182.8C206.754 183.019 206.557 183.263 206.448 183.531L205.051 183.213C205.217 182.749 205.458 182.375 205.777 182.089C206.098 181.801 206.468 181.592 206.885 181.463C207.303 181.33 207.742 181.264 208.203 181.264C208.508 181.264 208.831 181.301 209.172 181.374C209.517 181.443 209.838 181.572 210.137 181.761C210.438 181.95 210.685 182.22 210.877 182.572C211.07 182.92 211.166 183.372 211.166 183.929V189H209.714V187.956H209.654C209.558 188.148 209.414 188.337 209.222 188.523C209.03 188.708 208.783 188.862 208.481 188.985C208.18 189.108 207.818 189.169 207.397 189.169ZM207.721 187.976C208.132 187.976 208.483 187.895 208.775 187.732C209.069 187.57 209.293 187.358 209.446 187.096C209.601 186.831 209.679 186.547 209.679 186.246V185.261C209.626 185.314 209.524 185.364 209.371 185.411C209.222 185.454 209.051 185.492 208.859 185.525C208.667 185.555 208.48 185.583 208.297 185.609C208.115 185.633 207.962 185.652 207.84 185.669C207.551 185.705 207.288 185.767 207.049 185.853C206.814 185.939 206.625 186.063 206.483 186.226C206.343 186.385 206.274 186.597 206.274 186.862C206.274 187.23 206.41 187.509 206.681 187.697C206.953 187.883 207.3 187.976 207.721 187.976ZM212.987 189V187.981L217.123 182.726V182.656H213.121V181.364H218.977V182.447L215 187.638V187.707H219.117V189H212.987ZM223.868 189.154C223.152 189.154 222.528 188.99 221.994 188.662C221.46 188.334 221.046 187.875 220.751 187.285C220.456 186.695 220.309 186.005 220.309 185.217C220.309 184.424 220.456 183.732 220.751 183.138C221.046 182.545 221.46 182.085 221.994 181.756C222.528 181.428 223.152 181.264 223.868 181.264C224.584 181.264 225.209 181.428 225.743 181.756C226.276 182.085 226.69 182.545 226.985 183.138C227.28 183.732 227.428 184.424 227.428 185.217C227.428 186.005 227.28 186.695 226.985 187.285C226.69 187.875 226.276 188.334 225.743 188.662C225.209 188.99 224.584 189.154 223.868 189.154ZM223.873 187.906C224.337 187.906 224.722 187.784 225.027 187.538C225.332 187.293 225.557 186.967 225.703 186.559C225.852 186.151 225.926 185.702 225.926 185.212C225.926 184.724 225.852 184.277 225.703 183.869C225.557 183.458 225.332 183.129 225.027 182.88C224.722 182.631 224.337 182.507 223.873 182.507C223.406 182.507 223.018 182.631 222.71 182.88C222.405 183.129 222.178 183.458 222.029 183.869C221.883 184.277 221.81 184.724 221.81 185.212C221.81 185.702 221.883 186.151 222.029 186.559C222.178 186.967 222.405 187.293 222.71 187.538C223.018 187.784 223.406 187.906 223.873 187.906ZM230.574 184.466V189H229.087V181.364H230.514V182.607H230.608C230.784 182.202 231.059 181.877 231.434 181.632C231.812 181.387 232.287 181.264 232.861 181.264C233.381 181.264 233.837 181.374 234.228 181.592C234.619 181.808 234.922 182.129 235.138 182.557C235.353 182.984 235.461 183.513 235.461 184.143V189H233.974V184.322C233.974 183.768 233.83 183.336 233.542 183.024C233.253 182.709 232.857 182.552 232.354 182.552C232.009 182.552 231.702 182.626 231.434 182.776C231.169 182.925 230.958 183.143 230.802 183.432C230.65 183.717 230.574 184.062 230.574 184.466ZM243.272 189L240.449 178.818H242.064L244.048 186.703H244.142L246.206 178.818H247.806L249.87 186.708H249.964L251.943 178.818H253.564L250.735 189H249.189L247.046 181.374H246.966L244.824 189H243.272ZM257.384 189.154C256.632 189.154 255.984 188.993 255.44 188.672C254.9 188.347 254.482 187.891 254.188 187.305C253.896 186.715 253.75 186.024 253.75 185.232C253.75 184.449 253.896 183.76 254.188 183.163C254.482 182.567 254.893 182.101 255.42 181.766C255.951 181.432 256.571 181.264 257.28 181.264C257.711 181.264 258.128 181.335 258.533 181.478C258.937 181.621 259.3 181.844 259.621 182.149C259.943 182.454 260.196 182.85 260.382 183.337C260.568 183.821 260.661 184.41 260.661 185.102V185.629H254.59V184.516H259.204C259.204 184.125 259.124 183.778 258.965 183.477C258.806 183.172 258.582 182.931 258.294 182.756C258.009 182.58 257.674 182.492 257.29 182.492C256.872 182.492 256.508 182.595 256.196 182.8C255.888 183.003 255.649 183.268 255.48 183.596C255.314 183.921 255.232 184.274 255.232 184.655V185.525C255.232 186.035 255.321 186.469 255.5 186.827C255.682 187.185 255.936 187.459 256.261 187.648C256.585 187.833 256.965 187.926 257.399 187.926C257.681 187.926 257.938 187.886 258.17 187.807C258.402 187.724 258.602 187.601 258.771 187.439C258.94 187.277 259.07 187.076 259.159 186.837L260.566 187.091C260.453 187.505 260.251 187.868 259.96 188.18C259.671 188.488 259.308 188.728 258.871 188.901C258.437 189.07 257.941 189.154 257.384 189.154ZM262.429 189V178.818H263.916V182.602H264.005C264.091 182.442 264.216 182.259 264.378 182.05C264.54 181.841 264.766 181.659 265.054 181.503C265.343 181.344 265.724 181.264 266.198 181.264C266.814 181.264 267.364 181.42 267.848 181.732C268.332 182.043 268.712 182.492 268.987 183.079C269.265 183.665 269.404 184.371 269.404 185.197C269.404 186.022 269.267 186.73 268.992 187.32C268.717 187.906 268.339 188.359 267.858 188.677C267.378 188.992 266.829 189.149 266.213 189.149C265.749 189.149 265.369 189.071 265.074 188.915C264.782 188.76 264.554 188.577 264.388 188.369C264.222 188.16 264.095 187.974 264.005 187.812H263.881V189H262.429ZM263.886 185.182C263.886 185.719 263.964 186.189 264.119 186.594C264.275 186.998 264.501 187.315 264.796 187.543C265.091 187.769 265.452 187.881 265.879 187.881C266.324 187.881 266.695 187.764 266.993 187.528C267.291 187.29 267.517 186.967 267.669 186.559C267.825 186.151 267.903 185.692 267.903 185.182C267.903 184.678 267.827 184.226 267.674 183.825C267.525 183.424 267.3 183.107 266.998 182.875C266.7 182.643 266.327 182.527 265.879 182.527C265.449 182.527 265.084 182.638 264.786 182.86C264.491 183.082 264.267 183.392 264.115 183.79C263.962 184.187 263.886 184.652 263.886 185.182ZM280.451 181.493C280.398 181.022 280.179 180.658 279.795 180.399C279.41 180.137 278.927 180.006 278.343 180.006C277.926 180.006 277.564 180.073 277.259 180.205C276.954 180.335 276.718 180.513 276.548 180.742C276.383 180.968 276.3 181.224 276.3 181.513C276.3 181.755 276.356 181.964 276.469 182.139C276.585 182.315 276.736 182.462 276.921 182.582C277.11 182.698 277.312 182.795 277.528 182.875C277.743 182.951 277.95 183.014 278.149 183.064L279.144 183.322C279.468 183.402 279.802 183.51 280.143 183.646C280.484 183.781 280.801 183.96 281.093 184.183C281.384 184.405 281.619 184.68 281.798 185.008C281.981 185.336 282.072 185.729 282.072 186.186C282.072 186.763 281.923 187.275 281.624 187.722C281.329 188.17 280.9 188.523 280.337 188.781C279.777 189.04 279.099 189.169 278.303 189.169C277.541 189.169 276.882 189.048 276.325 188.806C275.768 188.564 275.332 188.221 275.017 187.777C274.702 187.33 274.528 186.799 274.495 186.186H276.036C276.066 186.554 276.186 186.861 276.394 187.106C276.606 187.348 276.877 187.528 277.205 187.648C277.536 187.764 277.899 187.822 278.294 187.822C278.728 187.822 279.114 187.754 279.452 187.618C279.793 187.479 280.062 187.286 280.257 187.041C280.453 186.793 280.551 186.503 280.551 186.171C280.551 185.87 280.464 185.623 280.292 185.43C280.123 185.238 279.893 185.079 279.601 184.953C279.313 184.827 278.986 184.716 278.622 184.62L277.419 184.292C276.603 184.07 275.957 183.743 275.48 183.312C275.006 182.882 274.769 182.312 274.769 181.602C274.769 181.016 274.928 180.504 275.246 180.066C275.564 179.629 275.995 179.289 276.539 179.047C277.082 178.802 277.695 178.679 278.378 178.679C279.067 178.679 279.676 178.8 280.203 179.042C280.733 179.284 281.151 179.617 281.455 180.041C281.76 180.462 281.919 180.946 281.933 181.493H280.451ZM287.08 189.154C286.327 189.154 285.679 188.993 285.136 188.672C284.595 188.347 284.178 187.891 283.883 187.305C283.591 186.715 283.445 186.024 283.445 185.232C283.445 184.449 283.591 183.76 283.883 183.163C284.178 182.567 284.589 182.101 285.116 181.766C285.646 181.432 286.266 181.264 286.975 181.264C287.406 181.264 287.824 181.335 288.228 181.478C288.632 181.621 288.995 181.844 289.317 182.149C289.638 182.454 289.892 182.85 290.077 183.337C290.263 183.821 290.356 184.41 290.356 185.102V185.629H284.286V184.516H288.899C288.899 184.125 288.82 183.778 288.661 183.477C288.501 183.172 288.278 182.931 287.989 182.756C287.704 182.58 287.37 182.492 286.985 182.492C286.567 182.492 286.203 182.595 285.891 182.8C285.583 183.003 285.344 183.268 285.175 183.596C285.01 183.921 284.927 184.274 284.927 184.655V185.525C284.927 186.035 285.016 186.469 285.195 186.827C285.378 187.185 285.631 187.459 285.956 187.648C286.281 187.833 286.66 187.926 287.094 187.926C287.376 187.926 287.633 187.886 287.865 187.807C288.097 187.724 288.298 187.601 288.467 187.439C288.636 187.277 288.765 187.076 288.854 186.837L290.261 187.091C290.149 187.505 289.946 187.868 289.655 188.18C289.366 188.488 289.004 188.728 288.566 188.901C288.132 189.07 287.636 189.154 287.08 189.154ZM292.005 189V181.364H293.442V182.577H293.521C293.661 182.166 293.906 181.843 294.257 181.607C294.612 181.369 295.013 181.249 295.46 181.249C295.553 181.249 295.663 181.253 295.789 181.259C295.918 181.266 296.019 181.274 296.092 181.284V182.706C296.032 182.689 295.926 182.671 295.774 182.651C295.621 182.628 295.469 182.616 295.316 182.616C294.965 182.616 294.652 182.691 294.377 182.84C294.105 182.986 293.889 183.19 293.73 183.452C293.571 183.71 293.492 184.005 293.492 184.337V189H292.005ZM304.143 181.364L301.374 189H299.783L297.009 181.364H298.605L300.539 187.24H300.618L302.547 181.364H304.143ZM305.54 189V181.364H307.027V189H305.54ZM306.291 180.185C306.032 180.185 305.81 180.099 305.625 179.927C305.443 179.751 305.351 179.542 305.351 179.3C305.351 179.055 305.443 178.846 305.625 178.674C305.81 178.498 306.032 178.411 306.291 178.411C306.55 178.411 306.77 178.498 306.952 178.674C307.138 178.846 307.231 179.055 307.231 179.3C307.231 179.542 307.138 179.751 306.952 179.927C306.77 180.099 306.55 180.185 306.291 180.185ZM312.243 189.154C311.504 189.154 310.868 188.987 310.334 188.652C309.804 188.314 309.396 187.848 309.111 187.255C308.826 186.662 308.684 185.982 308.684 185.217C308.684 184.441 308.829 183.757 309.121 183.163C309.413 182.567 309.824 182.101 310.354 181.766C310.884 181.432 311.509 181.264 312.228 181.264C312.808 181.264 313.325 181.372 313.779 181.587C314.234 181.799 314.6 182.098 314.878 182.482C315.16 182.867 315.327 183.316 315.38 183.83H313.934C313.854 183.472 313.672 183.163 313.387 182.905C313.105 182.646 312.727 182.517 312.253 182.517C311.839 182.517 311.476 182.626 311.164 182.845C310.856 183.061 310.616 183.369 310.444 183.77C310.271 184.168 310.185 184.638 310.185 185.182C310.185 185.739 310.27 186.219 310.439 186.624C310.608 187.028 310.846 187.341 311.154 187.563C311.466 187.785 311.832 187.896 312.253 187.896C312.535 187.896 312.79 187.845 313.019 187.742C313.251 187.636 313.445 187.485 313.6 187.29C313.76 187.094 313.871 186.859 313.934 186.584H315.38C315.327 187.078 315.167 187.518 314.898 187.906C314.63 188.294 314.27 188.599 313.819 188.821C313.372 189.043 312.846 189.154 312.243 189.154ZM320.261 189.154C319.509 189.154 318.861 188.993 318.317 188.672C317.777 188.347 317.359 187.891 317.064 187.305C316.773 186.715 316.627 186.024 316.627 185.232C316.627 184.449 316.773 183.76 317.064 183.163C317.359 182.567 317.77 182.101 318.297 181.766C318.828 181.432 319.448 181.264 320.157 181.264C320.588 181.264 321.005 181.335 321.41 181.478C321.814 181.621 322.177 181.844 322.498 182.149C322.82 182.454 323.073 182.85 323.259 183.337C323.445 183.821 323.537 184.41 323.537 185.102V185.629H317.467V184.516H322.081C322.081 184.125 322.001 183.778 321.842 183.477C321.683 183.172 321.459 182.931 321.171 182.756C320.886 182.58 320.551 182.492 320.167 182.492C319.749 182.492 319.385 182.595 319.073 182.8C318.765 183.003 318.526 183.268 318.357 183.596C318.191 183.921 318.108 184.274 318.108 184.655V185.525C318.108 186.035 318.198 186.469 318.377 186.827C318.559 187.185 318.813 187.459 319.138 187.648C319.462 187.833 319.842 187.926 320.276 187.926C320.558 187.926 320.815 187.886 321.047 187.807C321.279 187.724 321.479 187.601 321.648 187.439C321.817 187.277 321.947 187.076 322.036 186.837L323.443 187.091C323.33 187.505 323.128 187.868 322.836 188.18C322.548 188.488 322.185 188.728 321.748 188.901C321.314 189.07 320.818 189.154 320.261 189.154ZM330.909 183.228L329.562 183.467C329.505 183.294 329.416 183.13 329.293 182.974C329.174 182.819 329.012 182.691 328.806 182.592C328.601 182.492 328.344 182.442 328.036 182.442C327.615 182.442 327.263 182.537 326.982 182.726C326.7 182.911 326.559 183.152 326.559 183.447C326.559 183.702 326.653 183.907 326.842 184.063C327.031 184.219 327.336 184.347 327.757 184.446L328.97 184.724C329.673 184.887 330.196 185.137 330.541 185.475C330.886 185.813 331.058 186.252 331.058 186.793C331.058 187.25 330.926 187.658 330.661 188.016C330.399 188.37 330.032 188.649 329.562 188.851C329.094 189.053 328.553 189.154 327.936 189.154C327.081 189.154 326.383 188.972 325.843 188.607C325.303 188.239 324.971 187.717 324.849 187.041L326.286 186.822C326.375 187.197 326.559 187.48 326.837 187.673C327.116 187.862 327.479 187.956 327.926 187.956C328.413 187.956 328.803 187.855 329.094 187.653C329.386 187.447 329.532 187.197 329.532 186.902C329.532 186.663 329.442 186.463 329.263 186.3C329.088 186.138 328.818 186.015 328.453 185.933L327.161 185.649C326.448 185.487 325.921 185.228 325.58 184.874C325.241 184.519 325.072 184.07 325.072 183.526C325.072 183.076 325.198 182.681 325.45 182.343C325.702 182.005 326.05 181.741 326.494 181.553C326.938 181.36 327.447 181.264 328.021 181.264C328.846 181.264 329.496 181.443 329.969 181.801C330.443 182.156 330.757 182.631 330.909 183.228Z" fill="#111827"/>
+<rect x="384.5" y="110.5" width="112" height="103" rx="3.5" fill="white"/>
+<rect x="384.5" y="110.5" width="112" height="103" rx="3.5" stroke="#E4E4E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M432.548 141.414L441.984 133.233L431.758 155.863H424.5L432.548 141.414ZM439.212 146.495L443.238 135.147L456.5 158.767H431.954L446.932 156.194L439.212 146.495Z" fill="#111827"/>
+<path d="M422.479 189H420.848L424.512 178.818H426.287L429.951 189H428.32L425.442 180.668H425.362L422.479 189ZM422.752 185.013H428.042V186.305H422.752V185.013ZM431.143 189V187.981L435.279 182.726V182.656H431.277V181.364H437.134V182.447L433.156 187.638V187.707H437.273V189H431.143ZM443.864 185.833V181.364H445.355V189H443.894V187.678H443.814C443.639 188.085 443.357 188.425 442.969 188.697C442.585 188.965 442.106 189.099 441.532 189.099C441.042 189.099 440.608 188.992 440.23 188.776C439.855 188.558 439.56 188.234 439.345 187.807C439.133 187.379 439.027 186.851 439.027 186.221V181.364H440.513V186.042C440.513 186.562 440.657 186.977 440.946 187.285C441.234 187.593 441.609 187.747 442.069 187.747C442.348 187.747 442.624 187.678 442.9 187.538C443.178 187.399 443.408 187.189 443.591 186.907C443.776 186.625 443.867 186.267 443.864 185.833ZM447.353 189V181.364H448.79V182.577H448.869C449.008 182.166 449.254 181.843 449.605 181.607C449.96 181.369 450.361 181.249 450.808 181.249C450.901 181.249 451.01 181.253 451.136 181.259C451.265 181.266 451.367 181.274 451.439 181.284V182.706C451.38 182.689 451.274 182.671 451.121 182.651C450.969 182.628 450.816 182.616 450.664 182.616C450.313 182.616 449.999 182.691 449.724 182.84C449.452 182.986 449.237 183.19 449.078 183.452C448.919 183.71 448.839 184.005 448.839 184.337V189H447.353ZM455.744 189.154C454.991 189.154 454.343 188.993 453.8 188.672C453.259 188.347 452.842 187.891 452.547 187.305C452.255 186.715 452.109 186.024 452.109 185.232C452.109 184.449 452.255 183.76 452.547 183.163C452.842 182.567 453.253 182.101 453.78 181.766C454.31 181.432 454.93 181.264 455.639 181.264C456.07 181.264 456.488 181.335 456.892 181.478C457.296 181.621 457.659 181.844 457.981 182.149C458.302 182.454 458.556 182.85 458.741 183.337C458.927 183.821 459.02 184.41 459.02 185.102V185.629H452.95V184.516H457.563C457.563 184.125 457.484 183.778 457.325 183.477C457.165 183.172 456.942 182.931 456.653 182.756C456.368 182.58 456.034 182.492 455.649 182.492C455.232 182.492 454.867 182.595 454.555 182.8C454.247 183.003 454.009 183.268 453.839 183.596C453.674 183.921 453.591 184.274 453.591 184.655V185.525C453.591 186.035 453.68 186.469 453.859 186.827C454.042 187.185 454.295 187.459 454.62 187.648C454.945 187.833 455.324 187.926 455.759 187.926C456.04 187.926 456.297 187.886 456.529 187.807C456.761 187.724 456.962 187.601 457.131 187.439C457.3 187.277 457.429 187.076 457.518 186.837L458.925 187.091C458.813 187.505 458.611 187.868 458.319 188.18C458.031 188.488 457.668 188.728 457.23 188.901C456.796 189.07 456.3 189.154 455.744 189.154Z" fill="#111827"/>
+</g>
+<defs>
+<filter id="filter0_dd_3947_20848" x="0.5" y="0" width="513" height="232" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="8"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.129412 0 0 0 0 0.168627 0 0 0 0 0.211765 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3947_20848"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_3947_20848"/>
+<feOffset/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0235294 0 0 0 0 0.172549 0 0 0 0 0.321569 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_3947_20848" result="effect2_dropShadow_3947_20848"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3947_20848" result="shape"/>
+</filter>
+<clipPath id="clip0_3947_20848">
+<rect x="17" y="42" width="480" height="36" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
diff --git a/src/apps/devdoc/pages/contact-us.mdx b/src/apps/devdoc/pages/contact-us.mdx
index 8a7c453a1..2af0c53f9 100644
--- a/src/apps/devdoc/pages/contact-us.mdx
+++ b/src/apps/devdoc/pages/contact-us.mdx
@@ -1,59 +1,2 @@
-import Container from '~/app/components/container';
-import { Button } from 'kl-design-system/atoms/button';
-import { TextInput, TextArea } from 'kl-design-system/atoms/input';
-
-
-export default ()=>{
-    return <Container className="relative flex flex-col items-center">
-        <div className="px-12xl pt-10xl flex flex-col gap-3xl text-center">
-            <h1 className="heading6xl-marketing text-text-default">
-              Contact us
-            </h1>
-            <p className="bodyXl-medium text-text-soft">
-              Get in touch and let us know how we can help.
-            </p>
-          </div>
-        <div className="px-12xl py-10xl gap-10xl flex flex-row w-full">
-          <div className="flex flex-col gap-5xl flex-1">
-            <div className="flex flex-col gap-3xl">
-                <TextInput label="Full name" size="lg"/>
-                <div className="flex flex-row gap-3xl">
-                  <div className="basis-full">
-                    <TextInput label="Company name" size="lg"/>
-                  </div>
-                  <div className="basis-full">
-                    <TextInput label="Email" size="lg"/>
-                  </div>
-                </div>
-                <div className="flex flex-row gap-3xl">
-                  <div className="basis-full">
-                    <TextInput label="Country" size="lg"/>
-                  </div>
-                  <div className="basis-full">
-                    <TextInput label="Mobile" size="lg"/>
-                  </div>
-                </div>
-                <TextArea label="Message"/>
-            </div>
-            <Button content="Request demo" size="lg"/>
-          </div>
-          <div className="w-xs bg-border-default"/>
-          <div className="flex-1 flex flex-col gap-10xl justify-center max-w-[300px]">
-            <div className="flex flex-col gap-2xl">
-              <div className="flex flex-col gap-lg">
-                  <span className="headingLg text-text-default">Sales</span>
-                  <span className="bodyLg text-text-soft">We’d love to talk about how we can work together.</span>
-              </div>
-              <Button variant="plain" content="example@kloudlite.io"/>
-            </div>
-            <div className="flex flex-col gap-2xl">
-              <div className="flex flex-col gap-lg">
-                  <span className="headingLg text-text-default">Support</span>
-                  <span className="bodyLg text-text-soft">We’re here to help with any questions you may have.</span>
-              </div>
-              <Button variant="plain" content="example@kloudlite.io"/>
-            </div>
-          </div>
-        </div>
-    </Container>
-}
\ No newline at end of file
+import ContactRoot from '~/app/components/page/contact-us';
+export default ()=> <ContactRoot/>
diff --git a/src/apps/devdoc/pages/devops.mdx b/src/apps/devdoc/pages/devops.mdx
index 38a4277ba..6bf4e61c6 100644
--- a/src/apps/devdoc/pages/devops.mdx
+++ b/src/apps/devdoc/pages/devops.mdx
@@ -1,170 +1,2 @@
-import { useState } from 'react';
-import { Button } from 'kl-design-system/atoms/button';
-import Chips from 'kl-design-system/atoms/chips';
-import Container from '~/app/components/container';
-import HorizontalTopTabDevops from '~/app/components/website/horizontal-top-tab-devops';
-import Discover from '~/app/components/website/discover-component';
-import ReadyToOps from '~/app/components/website/ready-to-ops';
-import EmbeddedData from '../images/embedded-data.svg';
-import TroubleFree from '../images/trouble-free.svg';
-import SeamlessDev from '../images/seamless-dev.svg';
-import FasterDev from '../images/faster-dev.svg';
-import ConfigDevops from '../images/devops/config-devops.svg';
-import CreateDevops from '../images/devops/create-project-devops.svg';
-import DeployDevops from '../images/devops/deploy-devops.svg';
-import SetupDevops from '../images/devops/setup-devops.svg';
-import GetStarted from '~/app/components/website/get-started';
-import SuccessStories from '~/app/components/website/success-stories';
-import Cover from '../images/devops/cover-devops.svg';
-import {
-  successStories,
-} from '~/app/utils/dummy-data';
-import consts from "~/app/utils/const"
-
-export const AdvantageSection = () => {
-  const [selectedTab, setSelectedTab] = useState(consts.devops.advantages[0].id);
-
-const getTab = () => {
-switch (selectedTab) {
-case 'trouble-free':
-return (
-
-<img
-  alt="trouble-fre"
-  src={TroubleFree}
-  className="h-full w-full object-cover"
-/>
-); case 'embedded-data': return (
-<img
-  alt="embedded-data"
-  src={EmbeddedData}
-  className="h-full w-full object-cover"
-/>
-); case 'seamless-env': return (
-<img
-  alt="seamless-env"
-  src={SeamlessDev}
-  className="h-full w-full object-cover"
-/>
-); case 'faster-dev': default: return (
-<img alt="faster-dev" src={FasterDev} className="h-full w-full object-cover" />
-); } };
-
-return (
-
-<HorizontalTopTabDevops
-  tabContainerClassName="grid grid-cols-4 gap-5xl pt-10xl px-10xl"
-  tabs={consts.devops.advantages}
-  onTabChange={(item) => setSelectedTab(item.id)}
-  activeTab={selectedTab}
-  tab={getTab()}
-/>
-); };
-
-export const DiscoverSection = () => {
-  return (
-    <div className="flex flex-col 2xl:pt-10xl">
-      <Discover 
-        title={<>Discover <span className="text-text-primary">DevOps</span></>} 
-        desc="Simplify software development and testing with automated environments, tools, and configurations"
-        features={consts.devops.features} />
-    </div>
-  );
-};
-
-export const GetStartedSection = () => {
-  const [selectedTab, setSelectedTab] = useState(consts.devops.getstarted[0].id);
-  const getTab = () => {
-    switch (selectedTab) {
-      case 'config':
-        return (
-          <div className="relative h-full overflow-hidden">
-            <img alt="config" src={ConfigDevops} />
-          </div>
-        );
-      case 'deploy':
-        return (
-          <div className="relative h-full overflow-hidden">
-            <img alt="deploy" src={DeployDevops} />
-          </div>
-        );
-      case 'setup':
-        return (
-          <div className="relative h-full overflow-hidden flex items-center justify-center">
-            <img alt="setup" src={SetupDevops} />
-          </div>
-        );
-      case 'create':
-      default:
-        return (
-          <div className="h-full flex items-center justify-center">
-            <img alt="create" src={CreateDevops} />
-          </div>
-        );
-    }
-  };
-
-return (
-
-<GetStarted
-  title="In 4 simple steps"
-  tabs={consts.devops.getstarted}
-  onTabChange={(item) => setSelectedTab(item.id)}
-  tab={getTab()}
-  activeTab={selectedTab}
-/>
-); };
-
-export const SuccessStorySection = () => {
-  return (
-    <div className="flex flex-col 2xl:pt-10xl">
-      <SuccessStories tabs={successStories} />
-    </div>
-  );
-};
-
-export default () => {
-  return (
-    <div>
-      <Container className="relative">
-        <div className="flex flex-col 2xl:px-12xl z-10">
-          <div className="absolute inset-0 distribution-cover-graph z-0" />
-          <div className="flex flex-row items-center gap-10xl 2xl:py-10xl z-10">
-            <div className="flex flex-col gap-6xl md:max-w-[630px]">
-              <div className="flex flex-col gap-3xl">
-                <Chips.Chip item="infraops" label="DevOps" />
-                <h1 className="heading6xl-marketing text-text-default">
-                  NoOps in any stage of development
-                </h1>
-                <p className="bodyXl-medium text-text-soft">
-                  Dev-Prod parity for developers, by developers: DevOps
-                  automation that redefines productivity
-                </p>
-              </div>
-              <div className="flex flex-row items-center gap-4xl">
-                <Button
-                  content="Start your free trial"
-                  variant="primary"
-                  size="lg"
-                />
-                <Button content="Schedule a demo" variant="basic" size="lg" />
-              </div>
-            </div>
-            <div className="z-10">
-              <img src={Cover} className="scale-[1.3]" />
-            </div>
-          </div>
-        </div>
-      </Container>
-      <Container className="flex-col">
-        <div className="flex flex-col 2xl:px-12xl">
-          <AdvantageSection />
-          <DiscoverSection />
-          <GetStartedSection />
-          <SuccessStorySection />
-          <ReadyToOps />
-        </div>
-      </Container>
-    </div>
-  );
-};
+import DevopsPage from "~/app/components/page/devops"
+export default ()=> <DevopsPage/>
diff --git a/src/apps/devdoc/pages/distribution.mdx b/src/apps/devdoc/pages/distribution.mdx
index a4dee50ad..d6cf2e503 100644
--- a/src/apps/devdoc/pages/distribution.mdx
+++ b/src/apps/devdoc/pages/distribution.mdx
@@ -1,116 +1,2 @@
-import { useState } from 'react';
-import Container from '~/app/components/container';
-import Discover from '~/app/components/website/discover-component';
-import ReadyToOps from '~/app/components/website/ready-to-ops';
-import DistributeDis from '../images/distribution/distribute-distribution.svg';
-import CreateDis from '../images/distribution/create-distribution.svg';
-import BuildDis from '../images/distribution/build-distribution.svg';
-import Cover from '../images/distribution/distribution-cover.svg';
-import GetStarted from '~/app/components/website/get-started';
-import SuccessStories from '~/app/components/website/success-stories';
-import { Button } from 'kl-design-system/atoms/button';
-import Chips from 'kl-design-system/atoms/chips';
-
-import consts from "~/app/utils/const"
-
-import { successStories } from '~/app/utils/dummy-data';
-
-export const DiscoverSection = () => {
-  return (
-    <div className="flex flex-col 2xl:pt-10xl">
-      <Discover 
-        title={<>Discover <span className="text-text-primary">Distribution</span></>} 
-        desc="Dive-in to know how Distribution can transform the container image management" 
-        features={consts.distribution.features} />
-    </div>
-  );
-};
-
-export const GetStartedSection = () => {
-  const [selectedTab, setSelectedTab] = useState(consts.distribution.getstarted[0].id);
-  const getTab = () => {
-    switch (selectedTab) {
-      case 'push':
-        return (
-          <div className="relative h-full overflow-hidden">
-            <img alt="push" src={BuildDis} />
-          </div>
-        );
-      case 'distribute':
-        return (
-          <div className="relative h-full overflow-hidden flex items-center justify-center">
-            <img alt="distribute" src={DistributeDis} />
-          </div>
-        );
-      case 'create':
-      default:
-        return (
-          <div className="h-full flex items-center justify-center relative">
-                <img alt="create" src={CreateDis} className='absolute bottom-0'/>
-          </div>
-        );
-    }
-  };
-
-  return (
-    <GetStarted
-      title="In 3 simple steps"
-      tabs={consts.distribution.getstarted}
-      onTabChange={(item) => setSelectedTab(item.id)}
-      tab={getTab()}
-      activeTab={selectedTab}
-    />
-  );
-};
-
-export const SuccessStorySection = () => {
-  return (
-    <div className="flex flex-col 2xl:pt-10xl">
-      <SuccessStories tabs={successStories} />
-    </div>
-  );
-};
-
-export default () => {
-  return (
-    <div>
-        <Container className='relative'>
-            <div className="flex flex-col 2xl:px-12xl z-10">
-            <div className='absolute inset-0 distribution-cover-graph z-0'/>
-                <div className="flex flex-row items-center gap-10xl 2xl:py-10xl z-10">
-                    <div className="flex flex-col gap-6xl md:max-w-[630px]">
-                        <div className="flex flex-col gap-3xl">
-                        <Chips.Chip item="infraops" label="Distribution" />
-                        <h1 className="heading6xl-marketing text-text-default">
-                            Package & Distribute your Environments
-                        </h1>
-                        <p className="bodyXl-medium text-text-soft">
-                            Cloud-accelerated Build System, Container Registry, & Helm Repos built to distribute and deploy with ease
-                        </p>
-                        </div>
-                        <div className="flex flex-row items-center gap-4xl">
-                        <Button
-                            content="Start your free trial"
-                            variant="primary"
-                            size="lg"
-                        />
-                        <Button content="Schedule a demo" variant="basic" size="lg" />
-                        </div>
-                    </div>
-                    <div className='z-10'>
-                        <img src={Cover} className='scale-[1.3]'/>
-                    </div>
-                </div>
-            </div>
-        </Container>
-        <Container className="flex-col">
-            <div className="flex flex-col 2xl:px-12xl">
-                <DiscoverSection />
-                <GetStartedSection />
-                <SuccessStorySection />
-                <ReadyToOps />
-            </div>
-        </Container>
-    </div>
-  );
-};
+import DistributionRoot from '~/app/components/page/distribution';
+export default ()=> <DistributionRoot/>
diff --git a/src/apps/devdoc/pages/index.mdx b/src/apps/devdoc/pages/index.mdx
index 741ba5454..64e2ca032 100644
--- a/src/apps/devdoc/pages/index.mdx
+++ b/src/apps/devdoc/pages/index.mdx
@@ -1,399 +1,2 @@
-import { Button } from "kl-design-system/atoms/button"
-import { Avatar } from "kl-design-system/atoms/avatar"
-import Profile from "kl-design-system/molecule/profile"
-import { AWSlogoFill, TwitterNewLogo, UsersThree } from "@jengaicons/react"
-import Link from 'next/link';
-import DevopsIcon from "~/app/icons/devops"
-import InfraopsIcon from "~/app/icons/infraops"
-import DistributionIcon from "~/app/icons/distribution"
-import ProgressTracker from "~/app/components/progress-tracker"
-import {Graph, GraphItem} from "~/app/components/graph"
-import ReadyToOps from '~/app/components/website/ready-to-ops';
-import Container from '~/app/components/container';
-
-
-import Illustration from "../images/illustraion1.svg"
-
-import { cn } from '~/app/utils/commons';
-
-export const suites = [
-  {
-    title: "DevOps",
-    desc: "Self-Serve environments crafted for development, staging and production workloads",
-    img: <DevopsIcon />,
-    imgPad: "px-[74px] py-[22px] md:px-[10px] xl:px-[74px] xl:py-[22px]",
-    to:"devops"
-  },
-  {
-    title: "InfraOps",
-    desc: "Flexible & Cost Effective Kubernetes Cluster Management at your fingertips",
-    imgPad: "px-[45px] py-[42px]",
-    img: <InfraopsIcon />,
-    to:"infraops"
-  },
-  {
-    title: "Distribution",
-    desc: "Cloud accelerated build system and container registry to build and ship containers anywhere",
-    imgPad: "px-[76px] py-[22px]",
-    img: <DistributionIcon />,
-    to:"distribution"
-  },
-]
-
-export const teamTasks = [
-  {
-    title: "Develop, Git Push",
-    color: "#2563EB",
-  },
-  {
-    title: "CI/CD",
-    color: "#D97706",
-  },
-  {
-    title: "DevOps",
-    color: "#2563EB",
-  },
-  {
-    title: "Environments",
-    color: "#16A34A",
-  },
-  {
-    title: "Run Local Env",
-    color: "#2563EB",
-  }
-]
-
-export const messages = [
-  {
-    title: "Astroman",
-    subtitle: "subtitle",
-    company: <TwitterNewLogo size={24} />,
-    message: "We use @Kloudlite on a daily basis for several internal processes, and I cannot rave enough about them. Incredible flexibility and features combined with super intuitive UI",
-    time: "10:01 PM · Apr 7, 2022"
-  },
-  {
-    title: "Astroman 1",
-    subtitle: "subtitle",
-    company: <TwitterNewLogo size={24} />,
-    message: "We use @Kloudlite on a daily basis for several internal processes, and I cannot rave enough about them. Incredible flexibility and features combined with super intuitive UI",
-    time: "10:01 PM · Apr 7, 2022"
-  },
-  {
-    title: "Astroman 2",
-    subtitle: "subtitle",
-    company: <TwitterNewLogo size={24} />,
-    message: "We use @Kloudlite on a daily basis for several internal processes, and I cannot rave enough about them. Incredible flexibility and features combined with super intuitive UI",
-    time: "10:01 PM · Apr 7, 2022"
-  }
-]
-
-export const tutorials = [
-  {
-    title: "Get started with Kl-InfraOps",
-  },
-  {
-    title: "Keep building with Kl-DevOps",
-  },
-  {
-    title: "Explore further into Kl-Distribution",
-  },
-]
-
-export const Partners = () => {
-  return <div>
-    <div className='hidden md:!flex flex-row items-center justify-center flex-wrap gap-8xl'>
-      <AWSlogoFill size={56} />
-      <AWSlogoFill size={56} />
-      <AWSlogoFill size={56} />
-      <AWSlogoFill size={56} />
-      <AWSlogoFill size={56} />
-    </div>
-    <div className='flex md:!hidden flex-row items-center justify-center flex-wrap gap-5xl'>
-      <AWSlogoFill size={40} />
-      <AWSlogoFill size={40} />
-      <AWSlogoFill size={40} />
-      <AWSlogoFill size={40} />
-    </div>
-  </div>
-}
-
-export const TeamTaskCard = ({ color, title }) => {
-  return <div className="bg-surface-basic-subdued p-lg md:!px-2xl md:!py-xl flex flex-col md:!flex-row md:!items-center gap-lg md:!gap-2xl">
-    <div className="flex flex-col gap-lg flex-1">
-      <div className="h-lg w-[44px] rounded-full" style={{ background: color }} />
-      <div className="headingMd text-text-default hidden md:!block">{title}</div>
-    </div>
-    <div className="headingMd text-text-default block md:!hidden">{title}</div>
-    <Avatar color="one" size="md" />
-  </div>
-}
-
-export const MessageCard = ({ title, subtitle, company, message, time }) => {
-  return <div className="flex flex-col gap-3xl p-3xl bg-surface-basic-default min-h-[224px]">
-    <div className="flex flex-row items-center gap-3xl">
-      <span className="flex-1">
-        <Profile name={title} subtitle={subtitle} color="one" size="md" />
-      </span>
-      <span>{company}</span>
-    </div>
-    <p className="bodyMd text-text-soft">{message}</p>
-    <span className="bodySm text-text-soft">{time}</span>
-  </div>
-}
-
-export const UntoldCard = ({ children, className }) => {
-  return <div className={cn("p-4xl bg-surface-basic-default", className)}>
-    {children}
-  </div>
-}
-
-export const TutorialItemCard = ({ logo, children, to }) => {
-  return <Link href={to} className="flex flex-row items-center gap-xl">
-    <span className={cn("h-[52px] w-[52px] rounded", !logo ? "bg-surface-basic-subdued" : "")}>{logo}</span>
-    <span className="headingMd-marketing md:headingLg-marketing text-text-default">{children}</span>
-  </Link>
-}
-
-export const TutorialCard = () => {
-  return <UntoldCard className="flex flex-col gap-4xl h-full">
-    <span className="bodyLg-medium text-text-disabled">Latest tutorials</span>
-    <div className="flex flex-col gap-2xl">
-      {tutorials.map((tut) => <TutorialItemCard key={tut.title} to="/">{tut.title}</TutorialItemCard>)}
-    </div>
-  </UntoldCard>
-}
-
-export const FeaturedCard = () => {
-  return <UntoldCard className="flex flex-col gap-3xl h-full">
-    <div className="flex flex-col">
-      <span className="bodyLg-medium text-text-disabled">Featured</span>
-      <span className="heading2xl-marketing md:heading3xl-marketing text-text-default">Develop, Deploy, Distribute</span>
-    </div>
-    <div className="bg-surface-basic-subdued h-[160px]" />
-    <p className="bodyMd text-text-soft">From developing the code to deploying to, distributing, we got you covered at each touch point.</p>
-  </UntoldCard>
-}
-
-export const CommunityCard = () => {
-  return <UntoldCard className="flex flex-col gap-3xl h-full min-h-[256px]">
-    <span className="p-2xl rounded-full border border-border-disabled w-fit"><UsersThree size={32} /></span>
-    <div className="flex flex-col">
-      <span className="bodyLg-medium text-text-disabled">Community</span>
-      <span className="heading2xl-marketing md:heading3xl-marketing text-text-default">Stay up to date with all that's tech</span>
-    </div>
-    <Button content="Join the Community" variant="primary-outline" size="md" />
-  </UntoldCard>
-}
-
-export const progressItems = [
-  {
-    title: "We are committed to constant improvement in serving our community.",
-    subtitle: "10:01 PM · Apr 7, 2022"
-  },
-  {
-    title: "Stay tuned for the latest versions of our features, modules, and applications",
-    subtitle: "10:01 PM · Apr 7, 2022"
-  }
-]
-
-export const ChangeLogCard = () => {
-  return <UntoldCard className="flex flex-col gap-3xl h-full min-h-[256px]">
-    <span className="bodyLg-medium text-text-disabled">Changelog</span>
-    <ProgressTracker items={progressItems.map((pi) => ({
-      id: pi.title + pi.subtitle, render: () => <div className="flex flex-col gap-lg">
-        <span className="headingMd-marketing md:headingLg-marketing text-text-default">{pi.title}</span>
-        <span className="bodySm text-text-soft">{pi.subtitle}</span>
-      </div>
-    }))} />
-  </UntoldCard>
-}
-
-export const SuiteCard = ({ title, img, imgPad, desc, to }) => {
-  return <Link href={to} key={title} className='bg-surface-basic-default flex flex-col h-full max-h-[416px] min-h-[416px]'>
-    <span className={cn("min-h-[224px] self-center", imgPad)}>
-      {img}
-    </span>
-    <div className="flex flex-col gap-3xl px-4xl pb-4xl md:!p-xl md:!pt-0 xl:!px-4xl xl:!pb-4xl">
-      <span className="heading3xl-marketing md:!heading4xl-marketing text-text-default">{title}</span>
-      <span className="bodyLg md:!bodyXl-medium text-text-strong line-clamp-3">{desc}</span>
-    </div>
-  </Link>
-}
-
-export const SuiteSection = () => {
-  return (
-    <div className="flex flex-col 2xl:pt-10xl 2xl:px-12xl">
-        <div className='flex flex-col'>
-          <h2 className='heading3xl-marketing md:!heading5xl-marketing text-text-default text-center'>Dive in: Kloudlite suite</h2>
-          <Graph className="-mx-10xl">
-            <div className="grid grid-cols-3 gap-5xl px-10xl py-10xl">{suites.map((suite) => <GraphItem key={suite.title}><SuiteCard {...suite} /></GraphItem>)}</div>
-          </Graph>
-      </div>
-    </div>
-  );
-};
-
-
-export const TeamTaskSection = () =>{
-  return <div className="flex flex-row 2xl:pt-10xl 2xl:px-12xl">
-      <div className="flex flex-col gap-8xl justify-center max-w-[384px] mr-10xl">
-        <h2 className="heading3xl-marketing md:!heading5xl-marketing text-text-default">Why <br className="hidden md:!block" />Kloudlite?</h2>
-        <p className="bodyLg-medium md:!bodyXl-medium text-text-soft">A transformative solution for modern DevOps needs, built with precision and a deep understanding of developer and platform engineer challenges</p>
-      </div>
-      <div className="flex flex-col flex-1 relative">
-        <h4 className="headingMd-marketing md:!headingXl-marketing text-text-default text-center relative md:!absolute md:!left-1/2 md:!transform md:!-translate-x-1/2 z-[1]">Your team’s task</h4>
-        <Graph className="-mx-10xl">
-          <div className="px-10xl py-8xl">
-            <GraphItem>
-              <div className="flex p-xl md:!p-5xl flex-row bg-gradient-to-b from-[#E4E4E7] to-[#F3F4F6]">
-                <div className="flex flex-col gap-xl md:!gap-5xl flex-1">
-                  {teamTasks.map((tt) => <TeamTaskCard key={tt.title} color={tt.color} title={tt.title} />)}
-                </div>
-                <div className="ml-xl md:!ml-8xl flex flex-col gap-xl md:!gap-5xl flex-1">
-                  {teamTasks.map((tt) => <TeamTaskCard key={tt.title} color={tt.color} title={tt.title} />)}
-                </div>
-                <div />
-              </div>
-            </GraphItem>
-          </div>
-        </Graph>
-      </div>
-  </div>
-}
-
-export const DontBelieve = ()=>{
-  return <div className="flex flex-col 2xl:pt-10xl 2xl:px-12xl">
-      <h2 className="heading3xl-marketing md:!heading5xl-marketing text-text-default text-center">Don't believe? Read for yourself..</h2>
-      <Graph className="-mx-10xl" blurSize="md" responsive>
-        <div className="grid grid-cols-3 gap-5xl px-10xl py-10xl">{messages.map((message) => <GraphItem key={message.title}><MessageCard {...message} /></GraphItem>)}</div>
-      </Graph>
-    </div>
-}
-
-export const Exploring = ()=>{
-  return <div className="flex flex-col 2xl:pt-10xl 2xl:px-12xl">
-      <h2 className="heading3xl-marketing md:!heading5xl-marketing text-text-default text-center">Unveil the untold - Keep exploring</h2>
-      <Graph className="-mx-10xl" responsive>
-        <div className="grid grid-cols-2 gap-5xl px-10xl py-10xl">
-          <GraphItem><TutorialCard /></GraphItem>
-          <GraphItem><FeaturedCard /></GraphItem>
-          <GraphItem><CommunityCard /></GraphItem>
-          <GraphItem><ChangeLogCard /></GraphItem>
-        </div>
-      </Graph>
-    </div>
-}
-
-export const ReadyTo =()=>{
-  return <div className="flex flex-col 2xl:px-12xl"><ReadyToOps /></div>
-}
-
-export const PartnerSection = ()=>{
-  return <div className='flex flex-col gap-6xl 2xl:py-10xl 2xl:px-12xl'>
-      <p className='headingMd-marketing md:!headingLg-marketing text-text-strong text-center'>Join the cult of our early adopters, and discover the power of Kloudlite</p>
-      <Partners/>
-    </div>
-}
-
-{/**export const Main = () => {
-  return <div className='max-w-[1440px] m-auto'>
-    <div className='px-3xl py-6xl md:!px-11xl md:!pt-10xl'>
-      <div className='flex flex-col gap-3xl text-center items-center'>
-        <h1 className='heading3xl-marketing md:!heading6xl-marketing text-text-default text-center md:!w-[615px]'><span className="relative text-center"><span className="text-text-warning absolute -top-2/3 left-1/2 transform -translate-x-1/2">NoOps</span><strike className="no-underline strike">Advanced</strike></span> platform engineering system</h1>
-        <p className='bodyLg-medium md:!bodyXl-medium text-text-soft text-center md:!w-[806px]'>Kloudlite is an open-source platform that provides developers & platform engineers with a one-click solution to move from code to cloud</p>
-      </div>
-      <div className='pt-6xl flex md:!flex-row flex-col gap-4xl items-center justify-center'>
-        <Button content="Get started for free" variant='primary' />
-        <Button content="Schedule a demo" variant='basic'/>
-      </div>
-    </div>
-    <div className='w-full'>
-      <img src={Illustration} className="illustration"/>
-    </div>
-    <div className='px-3xl py-6xl md:!px-11xl md:!py-10xl flex flex-col gap-6xl'>
-      <p className='headingMd-marketing md:!headingLg-marketing text-text-strong text-center'>Join the cult of our early adopters, and discover the power of Kloudlite</p>
-      <Partners/>
-    </div>
-    <div className='px-3xl py-6xl md:!pb-0 lg:!px-3xl md:!pt-10xl lg:max-w-[1024px] xl:max-w-[1360px] m-auto'>
-      <div className='flex flex-col'>
-        <h2 className='heading3xl-marketing md:!heading5xl-marketing text-text-default text-center'>Dive in: Kloudlite suite</h2>
-        <Graph className="pt-7xl md:!py-10xl" blurSize="md" responsive>
-          <div className="grid grid-cols-1 md:!grid-cols-3 gap-3xl md:!gap-5xl max-w-[1120px] m-auto">{suites.map((suite) => <GraphItem key={suite.title}><SuiteCard {...suite} /></GraphItem>)}</div>
-        </Graph>
-      </div>
-    </div>
-
-    <SuiteSection/>
-
-    <div className="py-6xl px-3xl md:!px-0 md:!py-10xl max-w-[1184px] m-auto flex flex-row flex-wrap items-center gap-6xl md:!gap-0">
-      <div className="flex flex-col gap-3xl md:!gap-8xl flex-1 md:!flex-auto md:!max-w-[384px]">
-        <h2 className="heading3xl-marketing md:!heading5xl-marketing text-text-default">Why <br className="hidden md:!block" />Kloudlite?</h2>
-        <p className="bodyLg-medium md:!bodyXl-medium text-text-soft">A transformative solution for modern DevOps needs, built with precision and a deep understanding of developer and platform engineer challenges</p>
-      </div>
-      <div className="flex flex-col flex-1 relative">
-        <h4 className="headingMd-marketing md:!headingXl-marketing text-text-default text-center relative md:!absolute md:!left-1/2 md:!transform md:!-translate-x-1/2 z-[1]">Your team’s task</h4>
-        <Graph className="pt-5xl md:!px-10xl md:!py-8xl">
-          <GraphItem>
-            <div className="flex p-xl md:!p-5xl flex-row bg-gradient-to-b from-[#E4E4E7] to-[#F3F4F6]">
-              <div className="flex flex-col gap-xl md:!gap-5xl flex-1">
-                {teamTasks.map((tt) => <TeamTaskCard key={tt.title} color={tt.color} title={tt.title} />)}
-              </div>
-              <div className="ml-xl md:!ml-8xl flex flex-col gap-xl md:!gap-5xl flex-1">
-                {teamTasks.map((tt) => <TeamTaskCard key={tt.title} color={tt.color} title={tt.title} />)}
-              </div>
-              <div />
-            </div>
-          </GraphItem>
-        </Graph>
-      </div>
-    </div>
-    <div className="flex flex-col max-w-[1360px] m-auto py-6xl px-3xl md:!p-0">
-      <h2 className="heading3xl-marketing md:!heading5xl-marketing text-text-default text-center">Don't believe? Read for yourself..</h2>
-      <Graph className="pt-7xl pb-6xl md:!py-10xl" blurSize="md" responsive>
-        <div className="grid grid-cols-cols-1 md:!grid-cols-3 gap-3xl md:!gap-5xl max-w-[1120px] m-auto">{messages.map((message) => <GraphItem key={message.title}><MessageCard {...message} /></GraphItem>)}</div>
-      </Graph>
-    </div>
-
-    <div className="flex flex-col px-3xl py-6xl md:!pt-10xl md:!pb-0 md:!px-0">
-      <h2 className="heading3xl-marketing md:!heading5xl-marketing text-text-default text-center">Unveil the untold - Keep exploring</h2>
-      <Graph className="pt-7xl pb-6xl md:!py-10xl" responsive>
-        <div className="grid grid-cols-cols-1 md:!grid-cols-2 gap-3xl md:!gap-5xl max-w-[1120px] m-auto">
-          <GraphItem><TutorialCard /></GraphItem>
-          <GraphItem><FeaturedCard /></GraphItem>
-          <GraphItem><CommunityCard /></GraphItem>
-          <GraphItem><ChangeLogCard /></GraphItem>
-        </div>
-      </Graph>
-    </div>
-    <ReadyTo/>
-
-  </div>
-}
-**/}
-
-
-export default ()=>{
-  return <div>
-    <Container className="flex flex-col">
-      <div className='px-11xl pt-10xl'>
-        <div className='flex flex-col gap-3xl text-center items-center'>
-          <h1 className='heading3xl-marketing md:!heading6xl-marketing text-text-default text-center md:!w-[615px]'><span className="relative text-center"><span className="text-text-warning absolute -top-2/3 left-1/2 transform -translate-x-1/2">NoOps</span><strike className="no-underline strike">Advanced</strike></span> platform engineering system</h1>
-          <p className='bodyLg-medium md:!bodyXl-medium text-text-soft text-center md:!w-[806px]'>Kloudlite is an open-source platform that provides developers & platform engineers with a one-click solution to move from code to cloud</p>
-        </div>
-        <div className='pt-6xl flex md:!flex-row flex-col gap-4xl items-center justify-center'>
-          <Button content="Get started for free" variant='primary' />
-          <Button content="Schedule a demo" variant='basic'/>
-        </div>
-      </div>
-      <div className='w-full'>
-        <img src={Illustration} className="illustration"/>
-      </div>
-      <PartnerSection/>
-      <SuiteSection/>
-      <TeamTaskSection/>
-      <DontBelieve/>
-      <Exploring/>
-      <ReadyTo/>
-    </Container>
-  </div>
-}
\ No newline at end of file
+import IndexRoot from '~/app/components/page';
+export default ()=> <IndexRoot/>
diff --git a/src/apps/devdoc/pages/infraops.mdx b/src/apps/devdoc/pages/infraops.mdx
index f9601a9a4..dc71550fa 100644
--- a/src/apps/devdoc/pages/infraops.mdx
+++ b/src/apps/devdoc/pages/infraops.mdx
@@ -1,244 +1,2 @@
-import Chips from 'kl-design-system/atoms/chips';
-import { Button } from 'kl-design-system/atoms/button';
-import { TextInput } from 'kl-design-system/atoms/input';
-import { ArrowRight, GithubLogoFill, ChevronDown } from '@jengaicons/react';
-import { motion } from 'framer-motion';
-import { useState } from 'react';
-import Container from '~/app/components/container';
-import CodeEditorPlaceholder from '~/app/components/website/code-editor-placeholder';
-import HorizontalTopTab from '~/app/components/website/horizontal-top-tab';
-import Discover from '~/app/components/website/discover-component';
-import GetStarted from '~/app/components/website/get-started';
-import ReadyToOps from '~/app/components/website/ready-to-ops';
-import SuccessStories from '~/app/components/website/success-stories';
-import NodePoolImg from '../images/nodepool-simple-to-use.svg';
-import FlexibleImage from '../images/flexible-illustration.svg';
-import CostIllustration from '../images/cost-illustration.svg';
-import {
-  successStories,
-} from '~/app/utils/dummy-data';
-import consts from "~/app/utils/const"
-
-export const FeatureItem = ({ icon: Icon, label }) => {
-  return (
-    <div className="p-4xl flex flex-col justify-between gap-4xl bg-surface-basic-default min-h-[256px]">
-      <span
-        className="flex items-center justify-center rounded-full text-text-on-primary h-10xl w-10xl"
-        style={{
-          background: 'linear-gradient(170deg, #3B82F6 6.19%, #1E3A8A 95.65%)',
-        }}
-      >
-        <Icon size={48} />
-      </span>
-      <span className="headingLg text-text-default">{label}</span>
-    </div>
-  );
-};
-
-export const ProviderCard = ({ icon: Icon, label }) => {
-  return (
-    <div className="rounded border border-border-default p-3xl gap-xl items-center justify-center flex flex-col shadow-filter bg-surface-basic-default min-w-[130px]">
-      <span>
-        <Icon size={32} />
-      </span>
-      <p className="bodyMd-medium text-text-default">{label}</p>
-    </div>
-  );
-};
-
-export const AdvantageSection = () => {
-  const [selectedTab, setSelectedTab] = useState(consts.infraops.advantages[0].id);
-
-const getTab = () => {
-switch (selectedTab) {
-case 'flexible':
-return (
-
-<img
-  alt="flexible"
-  src={FlexibleImage}
-  className="h-full w-full object-cover"
-/>
-); case 'cost-effective': return (
-
-<img
-  alt="cost-effective"
-  src={CostIllustration}
-  className="h-full w-full object-cover"
-/>
-); case 'simple-to-use': default: return (<div className="p-8xl">
-  <div className="max-w-[878px] m-auto flex flex-row items-center justify-between">
-    <img alt="simple-to-use" src={NodePoolImg} className="shadow-filter" />
-    <span className="text-icon-disabled">
-      <ArrowRight size={32} />
-    </span>
-    <div className="rounded border border-border-default bg-surface-basic-default p-3xl shadow-filter">
-      <span className="">
-        <GithubLogoFill size={60} />
-      </span>
-    </div>
-  </div>
-</div>
-); } };
-
-return (
-
-<HorizontalTopTab
-  tabContainerClassName="grid grid-cols-3 gap-5xl pt-10xl px-10xl"
-  tabs={consts.infraops.advantages}
-  onTabChange={(item) => setSelectedTab(item.id)}
-  activeTab={selectedTab}
-  tab={getTab()}
-/>
-) }
-
-export const GetStartedSection = () => {
-  const [selectedTab, setSelectedTab] = useState(consts.infraops.getstarted[0].id);
-  const getTab = () => {
-    switch (selectedTab) {
-      case 'create':
-        return (
-          <motion.div
-            className="relative h-full max-w-[521px] m-auto overflow-hidden"
-            style={{
-              filter:
-                'drop-shadow(0px 2px 16px rgba(33, 43, 54, 0.08)) drop-shadow(0px 0px 0px rgba(6, 44, 82, 0.10))',
-            }}
-          >
-            <div className="flex flex-row items-center justify-between absolute -bottom-[30px] right-0 left-0">
-              <div className="rounded-lg border border-border-default p-4xl flex flex-col gap-3xl w-[305px] bg-surface-basic-active pointer-events-none">
-                <div className="flex flex-col gap-3xl pointere">
-                  <TextInput label="Name" value="Dev cluster 3" size="md" />
-                  <TextInput
-                    label="Nodepool 1"
-                    placeholder="Min 2 nodes"
-                    size="md"
-                  />
-                  <TextInput placeholder="Max 5 nodes" size="md" />
-                </div>
-                <Button content="Create" block />
-              </div>
-              <span className="text-icon-disabled">
-                <ArrowRight size={32} />
-              </span>
-              <div className="rounded border border-border-default bg-surface-basic-default p-3xl shadow-filter">
-                <span className="">
-                  <GithubLogoFill size={60} />
-                </span>
-              </div>
-            </div>
-          </motion.div>
-        );
-      case 'access':
-        return (
-          <motion.div
-            className="relative h-full max-w-[584px] m-auto overflow-hidden"
-            style={{
-              filter:
-                'drop-shadow(0px 2px 16px rgba(33, 43, 54, 0.08)) drop-shadow(0px 0px 0px rgba(6, 44, 82, 0.10))',
-            }}
-          >
-            <div className="flex flex-row items-center justify-between absolute bottom-0 right-0 left-0">
-              <div>
-                <CodeEditorPlaceholder />
-              </div>
-              <span className="text-icon-disabled">
-                <ArrowRight size={32} />
-              </span>
-              <div className="rounded border border-border-default bg-surface-basic-default p-3xl shadow-filter">
-                <span className="">
-                  <GithubLogoFill size={60} />
-                </span>
-              </div>
-            </div>
-          </motion.div>
-        );
-      case 'attach':
-      default:
-        return (
-          <motion.div className="h-full flex items-center justify-center">
-            <div className="grid grid-rows-[66px_auto] gap-5xl">
-              <div className="pointer-events-none shadow-filter h-fit">
-                <TextInput
-                  label="Select cloud provider"
-                  suffixIcon={<ChevronDown />}
-                />
-              </div>
-              <div className="flex flex-row items-center gap-5xl">
-                {consts.infraops.providers.map((provider) => (
-                  <ProviderCard key={provider.label} {...provider} />
-                ))}
-              </div>
-            </div>
-          </motion.div>
-        );
-    }
-  };
-
-return (
-
-<GetStarted
-  title="In 3 simple steps"
-  tabs={consts.infraops.getstarted}
-  onTabChange={(item) => setSelectedTab(item.id)}
-  tab={getTab()}
-  activeTab={selectedTab}
-/>
-); };
-
-export const DiscoverSection = () => {
-  return (
-    <div className="flex flex-col 2xl:pt-10xl">
-      <Discover
-        title={<>Discover <span className="text-text-primary">InfraOps</span></>} 
-        desc="Dive-in to know how InfraOps can transform your infrastructure management"
-        features={consts.infraops.features} />
-    </div>
-  );
-};
-
-export const SuccessStorySection = () => {
-  return (
-    <div className="flex flex-col 2xl:pt-10xl">
-      <SuccessStories tabs={successStories} />
-    </div>
-  );
-};
-
-export default () => {
-  return (
-    <Container className="flex-col">
-      <div className="flex flex-col 2xl:px-12xl">
-        <div className="flex flex-row items-center 2xl:py-10xl">
-          <div className="flex flex-col gap-6xl md:max-w-[630px]">
-            <div className="flex flex-col gap-3xl">
-              <Chips.Chip item="infraops" label="InfraOps" />
-              <h1 className="heading6xl-marketing text-text-default">
-                Simple, cost-effective, cloud agnostic
-              </h1>
-              <p className="bodyXl-medium text-text-soft">
-                The freedom of cloud agnosticism with effortless infrastructure
-                management—Any Provider, Any Scale, Absolute Security
-              </p>
-            </div>
-            <div className="flex flex-row items-center gap-4xl">
-              <Button
-                content="Start your free trial"
-                variant="primary"
-                size="lg"
-              />
-              <Button content="Schedule a demo" variant="basic" size="lg" />
-            </div>
-          </div>
-        </div>
-
-        <AdvantageSection />
-        <DiscoverSection />
-        <GetStartedSection />
-        <SuccessStorySection />
-        <ReadyToOps />
-      </div>
-    </Container>
-
-);
-};
+import InfraRoot from '~/app/components/page/infraops';
+export default ()=> <InfraRoot/>
diff --git a/src/apps/devdoc/pages/privacy-policy.mdx b/src/apps/devdoc/pages/privacy-policy.mdx
index a36863992..357ec3925 100644
--- a/src/apps/devdoc/pages/privacy-policy.mdx
+++ b/src/apps/devdoc/pages/privacy-policy.mdx
@@ -1,66 +1,204 @@
+export const Headings = ({children})=>{
+return <p className="bodyMd-semibold">{children}</p>
+}
+
+export const SubList = ({children})=>{
+console.log("here",children)
+  return  <ul className="list-[circle] pl-5xl">{children.props.children}</ul> 
+}
+
 <div className="bg-surface-basic-subdued">
-  <div className="max-w-[1440px] m-auto px-14xl pb-10xl">
-    <h1 className="heading6xl-marketing text-text-strong py-10xl">
-      Privacy Policy
-    </h1>
-    <div>
-      <div className="text-text-soft bodyLg">
-        Last updated: <span className="headingMd">September 15th, 2021</span>
-      </div>
-      <div className="bodyLg text-text-strong flex flex-col gap-5xl pt-4xl">
-        <p className="text-text-soft">
-          Kloudlite.io (“Kloudlite”, “we”, “us”, “our”) takes your privacy
-          seriously. This Privacy Policy describes how we collect, use and share
-          personal information in connection with your use of the website (the
-          “Service” or “Services”).
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus
-          vitae ex ut bibendum. Nullam a tincidunt elit, ac finibus dolor. Donec
-          pellentesque consectetur ante, a tempus nisl faucibus ac. Morbi ac
-          metus posuere, mattis dolor vitae, pharetra eros. Vestibulum quis ex a
-          eros laoreet efficitur at ut tortor. Sed id libero interdum, dignissim
-          augue quis, molestie enim. Morbi sollicitudin mollis tincidunt. Cras
-          feugiat lorem at consequat ultricies. In hac habitasse platea
-          dictumst. Proin ut tortor quis tortor vestibulum cursus.
-        </p>
-        <p>
-          In vitae magna posuere, blandit felis a, consectetur leo. Etiam augue
-          magna, ullamcorper eget posuere at, bibendum ac leo. Nunc eu cursus
-          justo. Nullam vel lectus in nibh condimentum suscipit. Pellentesque
-          habitant morbi tristique senectus et netus et malesuada fames ac
-          turpis egestas. Suspendisse potenti. Mauris placerat dolor vel est
-          blandit, tincidunt cursus quam consectetur. Suspendisse potenti.
-          Suspendisse ac malesuada ex. Aenean at sem ut libero dignissim iaculis
-          at aliquet arcu. Vivamus justo lorem, maximus in feugiat eget,
-          fermentum et dui. Nulla eu facilisis eros, vitae vestibulum augue.
-          Vivamus facilisis, turpis et dapibus efficitur, metus sapien volutpat
-          est, sed mollis nulla mi tempor diam. Mauris nisl metus, suscipit eu
-          elit et, placerat auctor ex.
-        </p>
-        <p>
-          Nunc eget venenatis arcu. Suspendisse egestas sodales commodo. Orci
-          varius natoque penatibus et magnis dis parturient montes, nascetur
-          ridiculus mus. Aenean blandit enim sed libero placerat, quis tincidunt
-          purus malesuada. Nulla tristique molestie lacus, eget dictum ante
-          egestas vel. Aliquam consectetur efficitur ullamcorper. Maecenas
-          ullamcorper ex ut nulla lacinia, eu cursus urna varius. Vestibulum
-          efficitur viverra purus at laoreet. Suspendisse iaculis orci sit amet
-          nisl lacinia pellentesque. Sed elementum vitae nisl vel convallis.
-          Nunc risus nisl, ornare sed venenatis id, facilisis vitae nibh. Sed
-          eget metus ligula. Cras tincidunt eu sem vitae vulputate.
-        </p>
-        <p>
-          Nullam sagittis mauris et felis convallis, quis rhoncus diam accumsan.
-          Nullam aliquet bibendum lacus, id fringilla nisl dapibus at. Mauris
-          commodo viverra placerat. Nam venenatis sed lectus eu scelerisque.
-          Quisque vehicula nulla sollicitudin est lobortis, eget dictum lectus
-          tempor. Maecenas dapibus commodo ullamcorper. Nunc sapien sapien,
-          elementum vel placerat vel, tincidunt nec nibh. Aliquam erat volutpat.
-          Vestibulum purus eros, luctus sit amet posuere sit amet, rhoncus et
-          quam. Cras egestas nunc at mauris facilisis vestibulum.
-        </p>
-      </div>
+    <div className="max-w-[1440px] m-auto px-3xl md:!px-8xl lg:!px-11xl xl:!px-13xl 2xl:!px-14xl pb-6xl md:!pb-8xl xl:!pb-10xl">
+        <h1 className="heading4xl-marketing md:!heading5xl-marketing lg:!heading6xl-marketing text-text-strong py-6xl md:!py-8xl xl:!py-10xl">
+          KLOUDLITE PRIVACY STATEMENT
+        </h1>
+        <div>
+          <div className="text-text-soft bodyLg">
+            Last updated: <span className="headingMd">12th Dec, 2023</span>
+          </div>
+          <div className="bodyLg text-text-strong flex flex-col gap-4xl pt-4xl">
+            <p className="bodyMd-semibold">SCOPE OF THIS PRIVACY STATEMENT</p>
+  
+              Kloudlite Labs Pvt Ltd (Kloudlite), respects your privacy. This
+              Privacy Statement applies to personal data collected by Kloudlite
+              through the kloudlite.io website, and other websites/portals which
+              we operate and on which we post a direct link to this Privacy
+              Statement. This Privacy Statement may not apply to open source
+              project websites sponsored by Kloudlite. Such project websites may
+              have their own privacy statements, which we encourage you to
+              review. In certain cases, this Privacy Statement applies to
+              personal data collected by Kloudlite when Kloudlite makes this
+              Privacy Statement or a link to the Privacy Statement available in
+              a digital communication, paper form or in person (for example when
+              attending an event).           
+            
+              Please also note that co-branded websites (websites where
+              Kloudlite presents content together with one or more of our
+              business partners) may be governed by additional or different
+              privacy statements. Please refer to the privacy statement on those
+              websites for more information about applicable privacy practices.
+              
+              As used in this Privacy Statement, “personal data” means any
+              information that relates to, is capable of being associated with,
+              describes, or could be linked to, an identified or identifiable
+              natural person (‘data subject’). An identifiable natural person is
+              one who can be identified, directly or indirectly, in particular
+              by reference to an identifier such as a name, an identification
+              number, location data, an online identifier or to one or more
+              factors specific to the physical, physiological, genetic, mental,
+              economic, cultural or social identity of that natural person.
+
+              <Headings>THE CATEGORIES OF PERSONAL DATA WE COLLECT</Headings>
+              
+              To the extent permitted by applicable law, the categories and
+              types of personal data collected directly from you may include,
+              without limitation:
+
+              * Contact information, including identifiers: Information used
+              to communicate with you and verify your identity, such as
+              first and last name, title, company name, email address,
+              telephone number, and postal address;
+                <SubList>
+                  - hello
+                  - hi
+                </SubList> 
+              * Account and commercial information: Information that Kloudlite
+              maintains in association with your account, such as your
+              account number, username/user ID, password, payment
+              information, purchase records, information about your use of
+              the product or service, information about your registration or
+              participation in a class, exam, certification, training,
+              webcast or other event, your preferred language and other
+              preferences, credit and billing status and support inquiries.
+              * Professional or employment-related information: Information
+              contained in your job inquiries or applications, such as
+              resume, cover letter, age, education, professional history and
+              contact details.
+              * Internet or other similar network activity: Information
+              collected when you visit a website, such as IP address,
+              browsing history, information on your interaction with the
+              website, browser type and language, operating system,
+              location, date and time;
+              * Location information: Information about your physical
+              location, such as if you provide your postal address or based
+              on your IP address if you visit a website; and
+              * Inferences: Information drawn from the personal data collected
+              above, such as what topics you may be interested in based on
+              the areas of the website you visit or what products you may be
+              interested in based on purchase records. 
+              
+              Kloudlite generally does not collect sensitive personal data,
+              which is data such as your religious or philosophical beliefs,
+              racial or ethnic origin, health or medical information (other than
+              for the purpose of responding to an accommodation request for an
+              event), genetic or biometric data, bank account information (other
+              than for the purpose of processing your order) or other similar
+              sensitive personal data as such term is defined under applicable
+              law. If Kloudlite reasonably needs to collect any sensitive
+              personal data from you, Kloudlite will obtain your consent for the
+              collection of such personal data as may be required under
+              applicable law.
+
+              <Headings>HOW WE COLLECT PERSONAL DATA (SOURCES OF DATA)</Headings>
+              
+              Kloudlite collects personal data directly from you and from other
+              categories of sources as described in more detail below. The
+              categories of personal data collected directly from you by
+              Kloudlite include all of the categories identified above in “The
+              Categories of Personal Data We Collect” section. Kloudlite
+              collects personal data directly from you when you interact with us
+              through our websites, including, without limitation, when you:
+
+              * Create a user account (individual or corporate);
+              * Make online purchases or register products;
+              * Request support;
+              * Register for or participate in a class, exam, certification,
+                training, webcast or other event;
+              * Request information or materials (e.g., whitepapers);
+              * Participate in surveys or evaluations;
+              * Participate in promotions, contests, or giveaways;
+              * Apply for employment;
+              * Submit questions or comments; or
+              * Submit content or posts on our customer portal pages or other
+                interactive webpages.
+             
+              Personal data we collect online may also be combined with personal
+              data you provide to us through offline channels such as through a
+              call center, during an interview or in conjunction with a
+              Kloudlite event you attend.
+
+              We may also collect information indirectly from you relating to
+              your use of our websites and response to our emails through the
+              use of various technology. The categories of personal data
+              collected in this manner are what we refer to above as Internet or
+              other similar network activity and inferences.
+
+              Collecting information in this manner allows us to analyze the
+              effectiveness of our websites and our marketing efforts,
+              personalize your experience and improve our interactions with you.
+              For more information about the technology, we employ for these
+              purposes, see the “Cookies and Other Technology” section below.
+  
+              We may also supplement the personal data we collect from you with
+              additional personal data we receive from third parties, such as
+              your employer, our customers, and our business partners where you
+              purchase any of our products or services through such business
+              partners. The categories of personal data we receive from this
+              type of third party includes account and commercial information
+              and professional or employment-related information. We do this to
+              help us improve the overall accuracy of the information and its
+              completeness and to help us better tailor our interactions with
+              you.
+
+              From time to time, we may collect contact information through
+              other sources, such as list vendors. When we do so, we ask the
+              vendors to confirm that the information was legally acquired by
+              the third party and that we have the right to obtain it from them
+              and use it.
+              
+              <Headings>HOW WE USE (PROCESS) YOUR PERSONAL DATA</Headings>
+  
+              Kloudlite may use personal data we collect about you to:
+
+              * Identify and Authenticate You. We use your personal data to
+                verify your identity when you access and use our services and
+                to ensure the security of your personal data. This includes
+                your creation of an account that is associated with your
+                personal data.
+                <SubList>
+                  - The personal data that may be collected and processed for
+                    this purpose includes: name, title, company name, email
+                    address, telephone number, postal address, account number,
+                    username/user ID, password, preferred language and
+                    preferences. We process this information in order to
+                    comply with our contractual obligations to you. In other
+                    cases, it is in our legitimate business interests to be
+                    able to identify and authenticate you.                 
+                </SubList>
+              * The personal data that may be collected and processed for
+                this purpose includes: name, title, company name, email
+                address, telephone number, postal address, account number,
+                username/user ID, password, preferred language and
+                preferences. We process this information in order to
+                comply with our contractual obligations to you. In other
+                cases, it is in our legitimate business interests to be
+                able to identify and authenticate you.
+                <SubList>
+                  - The personal data that may be collected and processed for
+                    this purpose includes: name, title, company name, email
+                    address, telephone number, postal address, account number,
+                    username/user ID, password, preferred language and
+                    preferences. We process this information in order to
+                    comply with our contractual obligations to you. In other
+                    cases, it is in our legitimate business interests to be
+                    able to identify and authenticate you.
+                </SubList>
+              * Provide You with Information About Our Products, Services and Events. Kloudlite may use your personal data to notify you about product and service offerings as well as events that we believe may be of interest to you. Kloudlite also may use your personal data to respond directly to your requests for information, including registrations for newsletters or other specific requests.                
+                <SubList>
+                  -  The personal data that may be collected and processed for this purpose includes: name, title, company name, email address, telephone number, postal address, account number, username/user ID, payment information, purchase records, information about your use of the product or service, information about your registration or participation in an event, your language and other preferences, credit and billing status, and support inquiries and location information and inferences. It is in our legitimate business interests to be able to provide customers, prospective customers, and the public with information about our products, services, and events.  
+                </SubList>
+           </div>
+        </div>
     </div>
-  </div>
 </div>
+
diff --git a/src/apps/devdoc/pages/product.mdx b/src/apps/devdoc/pages/product.mdx
index d08840dbb..c6505273a 100644
--- a/src/apps/devdoc/pages/product.mdx
+++ b/src/apps/devdoc/pages/product.mdx
@@ -1,389 +1,2 @@
-import {CheckCircleFill, ArrowRight, Stack, Domain, } from "@jengaicons/react"
-import { Button } from 'kl-design-system/atoms/button';
-import Container from '~/app/components/container';
-import ReadyToOps from '~/app/components/website/ready-to-ops';
-import Cover from '../images/product-landing/cover-product.svg';
-import InfraOps from "../images/product-landing/infra.svg"
-import DevOps from "../images/product-landing/dev.svg"
-import Dist from "../images/product-landing/dist.svg"
-import {Graph, GraphItem} from "~/app/components/graph"
-import { cn } from '~/app/utils/commons';
-import Image from 'next/image';
-
-export const products = [
-    {
-        type:"InfraOps",
-        title:"Cloud-native at the core",
-        desc:"Flexible & Cost Effective Kubernetes Cluster Management with simple and user-friendly interface",
-        features:[
-            {
-                title:"Cloud agnostic",
-            },
-            {
-                title:"Spot fleet",
-            },
-            {
-                title:"GPU enabled nodes",
-            },
-            {
-                title:"Auto scalable nodepools",
-            }
-        ],
-        link:"/",
-        logo:InfraOps
-    },
-    {
-        type:"DevOps",
-        title:"NoOps development",
-        desc:"Self-Serve environments crafted for development, staging & production workloads",
-        features:[
-            {
-                title:"Ephemeral workspaces",
-            },
-            {
-                title:"Scalable environments",
-            },
-            {
-                title:"Secure VPN for remote local",
-            },
-            {
-                title:"Automated backing services",
-            }
-        ],
-        link:"/",
-        logo:DevOps
-    },
-    {
-        type:"Distribution",
-        title:"Simply build and deploy",
-        desc:"Cloud accelerated build system and container registry to build and ship containers anywhere",
-        features:[
-            {
-                title:"Integrated container registry",
-            },
-            {
-                title:"Auto build & deploy",
-            },
-            {
-                title:"Major repo integrations",
-            },
-            {
-                title:"Optimized building processes",
-            }
-        ],
-        link:"/",
-        logo:Dist
-    }
-]
-
-
-export const benefitsItems = [
-    {
-        title:"Developers",
-        items:[
-            {
-                title:"Auto - Provision",
-                icon: Stack
-            },
-            {
-                title:"Run Anywhere",
-                icon: Stack
-            },
-            {
-                title:"Enhanced Application Security",
-                icon: Stack
-            },
-            {
-                title:"Collaborative Environments",
-                icon: Stack
-            },
-            {
-                title:"Comprehensive Monitoring and Insights",
-                icon: Stack
-            },
-            {
-                title:"Plug your own CICDs and Observability",
-                icon: Stack
-            },
-            {
-                title:"Streamlined Application Development",
-                icon: Stack
-            },
-            {
-                title:"Cost - Efficient Resource Management",
-                icon: Stack
-            }
-        ]
-    },
-    {
-        title:"Platform Engineers",
-        items:[
-            {
-                title:"Faster Deployment",
-                icon: Stack
-            },
-            {
-                title:"Flexible Autoscaling",
-                icon: Stack
-            },
-            {
-                title:"Developer Centric",
-                icon: Stack
-            },
-            {
-                title:"Reduce Development Inner loop",
-                icon: Stack
-            },
-            {
-                title:"Simplified Infrastructure Management",
-                icon: Stack
-            },
-            {
-                title:"Build system for faster deployments",
-                icon: Stack
-            },
-            {
-                title:"Declarative Infrastructure, Projects, and Maintenance",
-                icon: Stack
-            },
-            {
-                title:"Effective and Efficient Development Process",
-                icon: Stack
-            }
-        ]
-    }
-]
-
-export const recommendedTabs = [
-    {
-        title:"InfraOps",
-        desc:"Dive in to set up your InfraOps effortlessly",
-        content:"Explore our knowledge bank",
-        subContent:"Tap into our extensive collection of resources and guides tailored to help you navigate around platform",
-        link:"/",
-        id:"infraops"
-    },
-    {
-        title:"DevOps",
-        desc:"Dive in to set up your InfraOps effortlessly",
-        content:"Explore our knowledge bank",
-        subContent:"Tap into our extensive collection of resources and guides tailored to help you navigate around platform",
-        link:"/",
-        id:"devops"
-    },
-    {
-        title:"Distribution",
-        desc:"Dive in to set up your InfraOps effortlessly",
-        content:"Explore our knowledge bank",
-        subContent:"Tap into our extensive collection of resources and guides tailored to help you navigate around platform",
-        link:"/",
-        id:"distribution"
-    }
-]
-
-export const ProductCards = ({type, title, desc, features, link, logo})=>{
-    return <Container>
-        <div className='px-12xl py-10xl w-full flex flex-row gap-10xl min-h-[512px]'>
-            <div className='flex flex-col gap-5xl flex-1'>
-                <div className='flex flex-col gap-4xl'>
-                    <div className='flex flex-col gap-md'>
-                        <h5 className='bodyXl-medium text-text-disabled'>{type}</h5>
-                        <h3 className='heading5xl-marketing text-text-default'>{title}</h3>
-                    </div>
-                    <p className='bodyXl-medium text-text-soft'>{desc}</p>
-                </div>
-                <ul className='flex flex-col gap-2xl'>
-                    {features?.map((f)=><li key={f.title} className='flex flex-row items-center gap-lg'>
-                        <span className='text-icon-primary'>
-                            <CheckCircleFill size={16}/>
-                        </span>
-                        <span>{f.title}</span>
-                    </li>)}
-                </ul>
-                <Button content={`Learn more about ${type}`} suffix={<ArrowRight/>} variant='primary-outline'/>
-            </div>
-            <Graph className="-mx-10xl px-10xl -my-8xl py-8xl flex-1">
-                <div className='grid grid-cols-1'>
-                    <GraphItem>
-                        <div className=" bg-surface-basic-subdued w-[512px] h-[512px] flex items-center justify-center">
-                            <img src={logo}/>
-                        </div>
-                    </GraphItem>
-                </div>
-            </Graph>
-        </div>
-    </Container>
-}
-
-export const Benefits = ()=>{
-    return <Container>
-    <div className="py-10xl px-12xl flex flex-col gap-10xl">
-        <div className="flex flex-col gap-3xl w-full text-center">
-            <h1 className="heading6xl-marketing text-text-default">
-                We understand because we've been there too
-            </h1>
-            <p className="bodyXl-medium text-text-soft">So, we meticulously engineered our platform to provide you the below benefits</p>
-        </div>
-        <Graph className="-m-10xl p-10xl">
-            <div className="grid grid-cols-2 gap-5xl">{benefitsItems.map((bi)=>(
-                <div key={bi.title} className="grid grid-rows-[96px_auto] gap-5xl">
-                    <GraphItem>
-                        <div className="bg-surface-basic-subdued p-2xl flex items-center justify-center heading3xl-marketing text-text-default h-full">{bi.title}</div>
-                    </GraphItem>
-                    <div className="grid grid-cols-2 gap-5xl">
-                       {bi.items.map((bii)=> <GraphItem key={bii.title}>
-                            <div className="h-[192px] bg-surface-basic-subdued flex flex-col gap-4xl p-4xl">
-                               <span className="rounded-full border-2 border-border-default w-fit p-2xl"><bii.icon size={32}/></span>
-                               <span className="bodyLg-medium text-text-default flex-1">{bii.title}</span>
-                            </div>
-                        </GraphItem>)}
-                    </div>
-                </div>))}
-            </div>
-        </Graph>
-    </div>
-    </Container>
-}
-
-
-export const RecommendedItemButton = ({
-  title,
-  desc,
-  onClick,
-  active: _,
-}) => {
-  return (
-    <div
-      onClick={onClick}
-      className="p-4xl bg-surface-basic-default flex flex-col  h-full gap-4xl"
-    >
-      <span className="heading2xl-marketing text-text-default">{title}</span>
-      <span className="bodyLg text-text-soft">{desc}</span>
-    </div>
-  );
-};
-
-
-export const RecommendedCard = ({
-  content,
-  subContent,
-  image,
-  link: _,
-}) => {
-  return (
-    <div className="bg-surface-basic-default flex flex-row gap-8xl h-[416px]">
-      <div className="flex flex-col p-5xl gap-5xl w-1/2">
-        <div className="flex flex-col gap-4xl">
-            <div className="flex flex-col gap-md">
-                <span className="bodyXl-medium text-text-disabled">Recommended resources</span>
-                <h3 className="heading5xl-marketing text-text-default line-clamp-2">{content}</h3>
-            </div>
-            <p className="bodyXl-medium text-text-soft line-clamp-3">
-                {subContent}
-            </p>
-        </div>
-        <Button
-          content="Explore Docs"
-          suffix={<ArrowRight />}
-          size="sm"
-          variant="basic"
-        />
-      </div>
-      <div className="w-1/2">
-        {image ? (
-          <Image src={image} alt="success-story" />
-        ) : (
-          <div className="w-full h-full" style={{background:"linear-gradient(180deg, #E4E4E7 0%, #F3F4F6 100%)"}}/>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const RecommendedResources = ({
-  tabs,
-  activeTab,
-  onTabChange,
-  title,
-  tabContainerClassName,
-}) => {
-  return (
-   <Graph className="-m-10xl p-10xl">
-        <div className="grid grid-rows-[auto_160px] gap-5xl">
-            <GraphItem>
-            <RecommendedCard
-                {...(tabs.find((tb) => tb.id === activeTab) || tabs[0])}
-            />
-            </GraphItem>
-            <div
-            className={cn('grid grid-cols-3 gap-5xl', tabContainerClassName)}
-            >
-            {tabs.map((ss) => (
-                <GraphItem key={ss.subContent?.toString()}>
-                <RecommendedItemButton
-                    {...ss}
-                    onClick={() => onTabChange?.(ss)}
-                    active={activeTab === ss.id}
-                />
-                </GraphItem>
-            ))}
-            </div>
-        </div>
-    </Graph>
-  );
-};
-
-
-export const RecommendedSection = () => {
-  return (
-    <Container>
-        <div className="flex flex-col px-12xl py-11xl w-full">
-            <RecommendedResources tabs={recommendedTabs} />
-        </div>
-    </Container>
-  );
-};
-
-export default () => {
-  return (
-    <div>
-        <Container className='relative items-center'>
-            <div className="flex flex-col 2xl:px-12xl 2xl:py-10xl z-10 w-full items-center">
-                <div className="flex flex-col gap-6xl items-center text-center max-w-[870px]">
-                        <div className="flex flex-col gap-3xl">
-                            <h1 className="heading6xl-marketing text-text-default">
-                                Kloudlite - a One click console for your code to cloud journey
-                            </h1>
-                            <p className="bodyXl-medium text-text-soft">
-                                Upgrade your development and deployment by merging efficient DevOps, scalable cloud infrastructure, and continuous optimization into a seamless, productive workflow
-                            </p>
-                        </div>
-                        <div className="flex flex-row items-center gap-4xl">
-                            <Button
-                                content="Get started for free"
-                                variant="primary"
-                                size="lg"
-                            />
-                            <Button content="Schedule a demo" variant="basic" size="lg" />
-                        </div>
-                    </div>
-            </div>
-        </Container>
-        <Container className="justify-center pb-10xl">
-            <div className='product-graph'>
-                <img src={Cover}/>
-            </div>
-        </Container>
-
-        {products.map((p)=><ProductCards key={p.type} {...p}/>)}
-        <Benefits/>
-        <RecommendedSection/>
-        <Container className="flex-col">
-            <div className="flex flex-col 2xl:px-12xl">
-                <ReadyToOps />
-            </div>
-        </Container>
-    </div>
-
-);
-};
+import ProductRoot from '~/app/components/page/products';
+export default ()=> <ProductRoot/>
diff --git a/src/apps/devdoc/pages/terms-of-services.mdx b/src/apps/devdoc/pages/terms-of-services.mdx
index 089344233..8f9bd6de9 100644
--- a/src/apps/devdoc/pages/terms-of-services.mdx
+++ b/src/apps/devdoc/pages/terms-of-services.mdx
@@ -1,66 +1,2 @@
-<div className="bg-surface-basic-subdued">
-  <div className="max-w-[1440px] m-auto px-14xl pb-10xl">
-    <h1 className="heading6xl-marketing text-text-strong py-10xl">
-      Terms of Serivces
-    </h1>
-    <div>
-      <div className="text-text-soft bodyLg">
-        Last updated: <span className="headingMd">September 15th, 2021</span>
-      </div>
-      <div className="bodyLg text-text-strong flex flex-col gap-5xl pt-4xl">
-        <p className="text-text-soft">
-          Kloudlite.io (“Kloudlite”, “we”, “us”, “our”) takes your privacy
-          seriously. This Privacy Policy describes how we collect, use and share
-          personal information in connection with your use of the website (the
-          “Service” or “Services”).
-        </p>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus
-          vitae ex ut bibendum. Nullam a tincidunt elit, ac finibus dolor. Donec
-          pellentesque consectetur ante, a tempus nisl faucibus ac. Morbi ac
-          metus posuere, mattis dolor vitae, pharetra eros. Vestibulum quis ex a
-          eros laoreet efficitur at ut tortor. Sed id libero interdum, dignissim
-          augue quis, molestie enim. Morbi sollicitudin mollis tincidunt. Cras
-          feugiat lorem at consequat ultricies. In hac habitasse platea
-          dictumst. Proin ut tortor quis tortor vestibulum cursus.
-        </p>
-        <p>
-          In vitae magna posuere, blandit felis a, consectetur leo. Etiam augue
-          magna, ullamcorper eget posuere at, bibendum ac leo. Nunc eu cursus
-          justo. Nullam vel lectus in nibh condimentum suscipit. Pellentesque
-          habitant morbi tristique senectus et netus et malesuada fames ac
-          turpis egestas. Suspendisse potenti. Mauris placerat dolor vel est
-          blandit, tincidunt cursus quam consectetur. Suspendisse potenti.
-          Suspendisse ac malesuada ex. Aenean at sem ut libero dignissim iaculis
-          at aliquet arcu. Vivamus justo lorem, maximus in feugiat eget,
-          fermentum et dui. Nulla eu facilisis eros, vitae vestibulum augue.
-          Vivamus facilisis, turpis et dapibus efficitur, metus sapien volutpat
-          est, sed mollis nulla mi tempor diam. Mauris nisl metus, suscipit eu
-          elit et, placerat auctor ex.
-        </p>
-        <p>
-          Nunc eget venenatis arcu. Suspendisse egestas sodales commodo. Orci
-          varius natoque penatibus et magnis dis parturient montes, nascetur
-          ridiculus mus. Aenean blandit enim sed libero placerat, quis tincidunt
-          purus malesuada. Nulla tristique molestie lacus, eget dictum ante
-          egestas vel. Aliquam consectetur efficitur ullamcorper. Maecenas
-          ullamcorper ex ut nulla lacinia, eu cursus urna varius. Vestibulum
-          efficitur viverra purus at laoreet. Suspendisse iaculis orci sit amet
-          nisl lacinia pellentesque. Sed elementum vitae nisl vel convallis.
-          Nunc risus nisl, ornare sed venenatis id, facilisis vitae nibh. Sed
-          eget metus ligula. Cras tincidunt eu sem vitae vulputate.
-        </p>
-        <p>
-          Nullam sagittis mauris et felis convallis, quis rhoncus diam accumsan.
-          Nullam aliquet bibendum lacus, id fringilla nisl dapibus at. Mauris
-          commodo viverra placerat. Nam venenatis sed lectus eu scelerisque.
-          Quisque vehicula nulla sollicitudin est lobortis, eget dictum lectus
-          tempor. Maecenas dapibus commodo ullamcorper. Nunc sapien sapien,
-          elementum vel placerat vel, tincidunt nec nibh. Aliquam erat volutpat.
-          Vestibulum purus eros, luctus sit amet posuere sit amet, rhoncus et
-          quam. Cras egestas nunc at mauris facilisis vestibulum.
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
+import TermsOfServicesRoot  from '~/app/components/page/terms-of-services';
+export default ()=> <TermsOfServicesRoot/>
diff --git a/src/apps/devdoc/style.css b/src/apps/devdoc/style.css
index 4b9712449..0d1c4295f 100644
--- a/src/apps/devdoc/style.css
+++ b/src/apps/devdoc/style.css
@@ -214,29 +214,31 @@ code{
     left: -2%;
   }
 
-  .graph{
-    background: linear-gradient(90deg, #e4e4e783 1px, transparent 1px),
-    linear-gradient(0deg, #e4e4e783 1px, transparent 1px);
-    background-size: 32px 32px;
-    /* background-position: 1px 1px;
-    background-position-x: center; */
-    position: relative;
-  }
-
-  .graph::before{
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(to top, transparent 0%, #fafafa 100%),
-                linear-gradient(to bottom, transparent 0%, #fafafa 100%),
-                linear-gradient(to left, transparent 0%, #fafafa 100%),
-                linear-gradient(to right, transparent 0%, #fafafa 100%);
-    background-repeat: no-repeat;
-    /* background-size: 100% 10%, 100% 10%, 10% 100%, 10% 100%; */
-    background-position: top, bottom, left, right;
+  @media screen and (min-width:1280px) {
+    .graph{
+      background: linear-gradient(90deg, #e4e4e783 1px, transparent 1px),
+      linear-gradient(0deg, #e4e4e783 1px, transparent 1px);
+      background-size: 32px 32px;
+      /* background-position: 1px 1px;
+      background-position-x: center; */
+      position: relative;
+    }
+  
+    .graph::before{
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(to top, transparent 0%, #fafafa 100%),
+                  linear-gradient(to bottom, transparent 0%, #fafafa 100%),
+                  linear-gradient(to left, transparent 0%, #fafafa 100%),
+                  linear-gradient(to right, transparent 0%, #fafafa 100%);
+      background-repeat: no-repeat;
+      /* background-size: 100% 10%, 100% 10%, 10% 100%, 10% 100%; */
+      background-position: top, bottom, left, right;
+    }
   }
 
   .infraops-cover-graph{
@@ -244,12 +246,13 @@ code{
     background-position: center;
   }
 
-  .distribution-cover-graph{
+@media screen and (min-width:1024px){
+ .distribution-cover-graph{
     background-image: url("/distribution/distribution-graph.svg");
     background-position: center;
   }
-
-  .product-graph{
+}
+   .product-graph{
     background-image: url("/product/graph-product.svg");
     background-position: center;
   }
@@ -267,4 +270,6 @@ code{
 
   .loading-overlay{
     display: none !important;
-  }
\ No newline at end of file
+  }
+
+  
diff --git a/src/apps/devdoc/tsconfig.json b/src/apps/devdoc/tsconfig.json
index ecded9a1f..722d3eaa6 100644
--- a/src/apps/devdoc/tsconfig.json
+++ b/src/apps/devdoc/tsconfig.json
@@ -5,6 +5,7 @@
     "**/*.js",
     "**/*.jsx",
     ".next/types/**/*.ts",
+    "**/**.svg"
   ],
   "compilerOptions": {
     "skipLibCheck": true,
@@ -27,6 +28,9 @@
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
+      "~/images/*":[
+        "./images"
+      ],
       "~/app/*": [
         "./app/*"
       ],

From 5d336d97e20bbe5c992f504d23b63be503666b3b Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Thu, 25 Jan 2024 13:52:32 +0530
Subject: [PATCH 3/5] Added mobile menu for raw layout

---
 .../app/components/header-secondary.tsx       |  29 ++-
 .../devdoc/app/components/page/privacy.tsx    | 220 ------------------
 .../devdoc/app/components/page/products.tsx   |   2 +-
 .../app/components/page/terms-of-services.tsx |  76 ------
 src/apps/devdoc/app/components/sidebar.tsx    |  33 ++-
 src/apps/devdoc/app/layout/mdx-components.tsx |  17 +-
 src/apps/devdoc/app/layout/theme.tsx          |   1 +
 src/apps/devdoc/pages/privacy-policy.mdx      | 186 +++++++++++----
 src/apps/devdoc/pages/terms-of-services.mdx   | 147 +++++++++++-
 src/apps/devdoc/style.css                     |   3 +
 10 files changed, 361 insertions(+), 353 deletions(-)
 delete mode 100644 src/apps/devdoc/app/components/page/privacy.tsx
 delete mode 100644 src/apps/devdoc/app/components/page/terms-of-services.tsx

diff --git a/src/apps/devdoc/app/components/header-secondary.tsx b/src/apps/devdoc/app/components/header-secondary.tsx
index 7bb5a90e0..010e0d658 100644
--- a/src/apps/devdoc/app/components/header-secondary.tsx
+++ b/src/apps/devdoc/app/components/header-secondary.tsx
@@ -1,8 +1,31 @@
 import { ReactNode } from 'react';
 import { PageItem } from 'nextra/normalize-pages';
+import Link from 'next/link';
 import { HeaderLink } from './frequents';
 import useConfig from '../utils/use-config';
+import { cn } from '../utils/commons';
+import MenuToggle from './menu-button';
+import useMenu from '../utils/use-menu';
 
+export const MobileMenu = ({
+  items = [],
+}: {
+  items?: { title: string; to: string }[];
+}) => {
+  return (
+    <div className={cn('flex flex-col')}>
+      {items.map((item) => (
+        <Link
+          href={item.to}
+          key={item.to}
+          className="px-2xl py-lg text-text-soft bodyMd"
+        >
+          {item.title}
+        </Link>
+      ))}
+    </div>
+  );
+};
 const HeaderSecondary = ({
   items,
   extra,
@@ -13,8 +36,7 @@ const HeaderSecondary = ({
   activePath?: PageItem[];
 }) => {
   const { config } = useConfig();
-  console.log('header ', activePath);
-  console.log(items);
+  const { state, setState } = useMenu();
   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="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">
@@ -32,6 +54,9 @@ const HeaderSecondary = ({
           ))}
         </ul>
         <div className="hidden lg:!flex">{extra}</div>
+        <div className="flex-1 flex lg:!hidden items-center justify-end">
+          <MenuToggle onClick={() => setState(!state)} toggle={state} />
+        </div>
       </nav>
     </div>
   );
diff --git a/src/apps/devdoc/app/components/page/privacy.tsx b/src/apps/devdoc/app/components/page/privacy.tsx
deleted file mode 100644
index 4043df741..000000000
--- a/src/apps/devdoc/app/components/page/privacy.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-const PrivacyRoot = () => {
-  return (
-    <div className="bg-surface-basic-subdued">
-      <div className="max-w-[1440px] m-auto px-3xl md:!px-8xl lg:!px-11xl xl:!px-13xl 2xl:!px-14xl pb-6xl md:!pb-8xl xl:!pb-10xl">
-        <h1 className="heading4xl-marketing md:!heading5xl-marketing lg:!heading6xl-marketing text-text-strong py-6xl md:!py-8xl xl:!py-10xl">
-          KLOUDLITE PRIVACY STATEMENT
-        </h1>
-        <div>
-          <div className="text-text-soft bodyLg">
-            Last updated: <span className="headingMd">12th Dec, 2023</span>
-          </div>
-          <div className="bodyLg text-text-strong flex flex-col gap-4xl pt-4xl">
-            <p className="bodyMd-semibold">SCOPE OF THIS PRIVACY STATEMENT</p>
-            <p>
-              Kloudlite Labs Pvt Ltd (Kloudlite), respects your privacy. This
-              Privacy Statement applies to personal data collected by Kloudlite
-              through the kloudlite.io website, and other websites/portals which
-              we operate and on which we post a direct link to this Privacy
-              Statement. This Privacy Statement may not apply to open source
-              project websites sponsored by Kloudlite. Such project websites may
-              have their own privacy statements, which we encourage you to
-              review. In certain cases, this Privacy Statement applies to
-              personal data collected by Kloudlite when Kloudlite makes this
-              Privacy Statement or a link to the Privacy Statement available in
-              a digital communication, paper form or in person (for example when
-              attending an event).
-            </p>
-            <p>
-              Please also note that co-branded websites (websites where
-              Kloudlite presents content together with one or more of our
-              business partners) may be governed by additional or different
-              privacy statements. Please refer to the privacy statement on those
-              websites for more information about applicable privacy practices.
-            </p>
-            <p>
-              As used in this Privacy Statement, “personal data” means any
-              information that relates to, is capable of being associated with,
-              describes, or could be linked to, an identified or identifiable
-              natural person (‘data subject’). An identifiable natural person is
-              one who can be identified, directly or indirectly, in particular
-              by reference to an identifier such as a name, an identification
-              number, location data, an online identifier or to one or more
-              factors specific to the physical, physiological, genetic, mental,
-              economic, cultural or social identity of that natural person.
-            </p>
-            <p className="bodyMd-semibold">
-              THE CATEGORIES OF PERSONAL DATA WE COLLECT
-            </p>
-
-            <p>
-              To the extent permitted by applicable law, the categories and
-              types of personal data collected directly from you may include,
-              without limitation:
-            </p>
-            <p>
-              <ul className="list-disc pl-5xl flex flex-col gap-xl">
-                <li>
-                  Contact information, including identifiers: Information used
-                  to communicate with you and verify your identity, such as
-                  first and last name, title, company name, email address,
-                  telephone number, and postal address;
-                </li>
-                <li>
-                  Account and commercial information: Information that Kloudlite
-                  maintains in association with your account, such as your
-                  account number, username/user ID, password, payment
-                  information, purchase records, information about your use of
-                  the product or service, information about your registration or
-                  participation in a class, exam, certification, training,
-                  webcast or other event, your preferred language and other
-                  preferences, credit and billing status and support inquiries.
-                </li>
-                <li>
-                  Professional or employment-related information: Information
-                  contained in your job inquiries or applications, such as
-                  resume, cover letter, age, education, professional history and
-                  contact details.
-                </li>
-                <li>
-                  Internet or other similar network activity: Information
-                  collected when you visit a website, such as IP address,
-                  browsing history, information on your interaction with the
-                  website, browser type and language, operating system,
-                  location, date and time;
-                </li>
-                <li>
-                  Location information: Information about your physical
-                  location, such as if you provide your postal address or based
-                  on your IP address if you visit a website; and
-                </li>
-
-                <li>
-                  Inferences: Information drawn from the personal data collected
-                  above, such as what topics you may be interested in based on
-                  the areas of the website you visit or what products you may be
-                  interested in based on purchase records.
-                </li>
-              </ul>
-            </p>
-            <p>
-              Kloudlite generally does not collect sensitive personal data,
-              which is data such as your religious or philosophical beliefs,
-              racial or ethnic origin, health or medical information (other than
-              for the purpose of responding to an accommodation request for an
-              event), genetic or biometric data, bank account information (other
-              than for the purpose of processing your order) or other similar
-              sensitive personal data as such term is defined under applicable
-              law. If Kloudlite reasonably needs to collect any sensitive
-              personal data from you, Kloudlite will obtain your consent for the
-              collection of such personal data as may be required under
-              applicable law.
-            </p>
-            <p className="bodyMd-semibold">
-              HOW WE COLLECT PERSONAL DATA (SOURCES OF DATA)
-            </p>
-            <p>
-              Kloudlite collects personal data directly from you and from other
-              categories of sources as described in more detail below. The
-              categories of personal data collected directly from you by
-              Kloudlite include all of the categories identified above in “The
-              Categories of Personal Data We Collect” section. Kloudlite
-              collects personal data directly from you when you interact with us
-              through our websites, including, without limitation, when you:
-            </p>
-            <p>
-              <ul className="list-disc pl-5xl flex flex-col gap-xl">
-                <li>Create a user account (individual or corporate);</li>
-                <li>Make online purchases or register products;</li>
-                <li>Request support;</li>
-                <li>
-                  Register for or participate in a class, exam, certification,
-                  training, webcast or other event;
-                </li>
-                <li>Request information or materials (e.g., whitepapers);</li>
-                <li>Participate in surveys or evaluations;</li>
-                <li>Participate in promotions, contests, or giveaways;</li>
-                <li>Apply for employment;</li>
-                <li>Submit questions or comments; or</li>
-                <li>
-                  Submit content or posts on our customer portal pages or other
-                  interactive webpages.
-                </li>
-              </ul>
-            </p>
-
-            <p>
-              Personal data we collect online may also be combined with personal
-              data you provide to us through offline channels such as through a
-              call center, during an interview or in conjunction with a
-              Kloudlite event you attend.
-            </p>
-            <p>
-              We may also collect information indirectly from you relating to
-              your use of our websites and response to our emails through the
-              use of various technology. The categories of personal data
-              collected in this manner are what we refer to above as Internet or
-              other similar network activity and inferences.
-            </p>
-            <p>
-              Collecting information in this manner allows us to analyze the
-              effectiveness of our websites and our marketing efforts,
-              personalize your experience and improve our interactions with you.
-              For more information about the technology, we employ for these
-              purposes, see the “Cookies and Other Technology” section below.
-            </p>
-            <p>
-              We may also supplement the personal data we collect from you with
-              additional personal data we receive from third parties, such as
-              your employer, our customers, and our business partners where you
-              purchase any of our products or services through such business
-              partners. The categories of personal data we receive from this
-              type of third party includes account and commercial information
-              and professional or employment-related information. We do this to
-              help us improve the overall accuracy of the information and its
-              completeness and to help us better tailor our interactions with
-              you.
-            </p>
-            <p>
-              From time to time, we may collect contact information through
-              other sources, such as list vendors. When we do so, we ask the
-              vendors to confirm that the information was legally acquired by
-              the third party and that we have the right to obtain it from them
-              and use it.
-            </p>
-            <p className="bodyMd-semibold">
-              HOW WE USE (PROCESS) YOUR PERSONAL DATA
-            </p>
-            <p>Kloudlite may use personal data we collect about you to:</p>
-            <p>
-              <ul className="list-disc pl-5xl flex flex-col gap-xl">
-                <li>
-                  Identify and Authenticate You. We use your personal data to
-                  verify your identity when you access and use our services and
-                  to ensure the security of your personal data. This includes
-                  your creation of an account that is associated with your
-                  personal data.
-                  <ul className="list-disc pl-5xl flex flex-col gap-xl">
-                    <li>
-                      The personal data that may be collected and processed for
-                      this purpose includes: name, title, company name, email
-                      address, telephone number, postal address, account number,
-                      username/user ID, password, preferred language and
-                      preferences. We process this information in order to
-                      comply with our contractual obligations to you. In other
-                      cases, it is in our legitimate business interests to be
-                      able to identify and authenticate you.
-                    </li>
-                  </ul>
-                </li>
-                <li>kkkk</li>
-              </ul>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PrivacyRoot;
diff --git a/src/apps/devdoc/app/components/page/products.tsx b/src/apps/devdoc/app/components/page/products.tsx
index 97faa97ba..67b58f9bb 100644
--- a/src/apps/devdoc/app/components/page/products.tsx
+++ b/src/apps/devdoc/app/components/page/products.tsx
@@ -239,7 +239,7 @@ const ProductCards = ({
         </div>
         <Graph className="-mx-10xl -my-8xl py-8xl ">
           <div className="grid grid-cols-1 lg:h-full px-10xl ">
-            <GraphItem className="flex items-center justify-center min-w-[491px] xl:!min-w-[512px] xl:h-[512px] ">
+            <GraphItem className="flex items-center justify-center md:min-w-[491px] xl:!min-w-[512px] xl:h-[512px] ">
               <div className=" bg-surface-basic-subdued p-3xl w-full h-full md:!p-5xl xl:!p-0 flex items-center justify-center">
                 {/** @ts-ignore * */}
                 <img src={logo.src} />
diff --git a/src/apps/devdoc/app/components/page/terms-of-services.tsx b/src/apps/devdoc/app/components/page/terms-of-services.tsx
deleted file mode 100644
index 0de1990a8..000000000
--- a/src/apps/devdoc/app/components/page/terms-of-services.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-const TermsOfServicesRoot = () => {
-  return (
-    <div className="bg-surface-basic-subdued">
-      <div className="max-w-[1440px] m-auto px-3xl md:!px-8xl lg:!px-11xl xl:!px-13xl 2xl:!px-14xl pb-6xl md:!pb-8xl xl:!pb-10xl">
-        <h1 className="heading4xl-marketing md:!heading5xl-marketing lg:!heading6xl-marketing text-text-strong py-6xl md:!py-8xl xl:!py-10xl">
-          Terms of Serivces
-        </h1>
-        <div>
-          <div className="text-text-soft bodyLg">
-            Last updated:{' '}
-            <span className="headingMd">September 15th, 2021</span>
-          </div>
-          <div className="bodyLg text-text-strong flex flex-col gap-5xl pt-4xl">
-            <p className="text-text-soft">
-              Kloudlite.io (“Kloudlite”, “we”, “us”, “our”) takes your privacy
-              seriously. This Privacy Policy describes how we collect, use and
-              share personal information in connection with your use of the
-              website (the “Service” or “Services”).
-            </p>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
-              finibus vitae ex ut bibendum. Nullam a tincidunt elit, ac finibus
-              dolor. Donec pellentesque consectetur ante, a tempus nisl faucibus
-              ac. Morbi ac metus posuere, mattis dolor vitae, pharetra eros.
-              Vestibulum quis ex a eros laoreet efficitur at ut tortor. Sed id
-              libero interdum, dignissim augue quis, molestie enim. Morbi
-              sollicitudin mollis tincidunt. Cras feugiat lorem at consequat
-              ultricies. In hac habitasse platea dictumst. Proin ut tortor quis
-              tortor vestibulum cursus.
-            </p>
-            <p>
-              In vitae magna posuere, blandit felis a, consectetur leo. Etiam
-              augue magna, ullamcorper eget posuere at, bibendum ac leo. Nunc eu
-              cursus justo. Nullam vel lectus in nibh condimentum suscipit.
-              Pellentesque habitant morbi tristique senectus et netus et
-              malesuada fames ac turpis egestas. Suspendisse potenti. Mauris
-              placerat dolor vel est blandit, tincidunt cursus quam consectetur.
-              Suspendisse potenti. Suspendisse ac malesuada ex. Aenean at sem ut
-              libero dignissim iaculis at aliquet arcu. Vivamus justo lorem,
-              maximus in feugiat eget, fermentum et dui. Nulla eu facilisis
-              eros, vitae vestibulum augue. Vivamus facilisis, turpis et dapibus
-              efficitur, metus sapien volutpat est, sed mollis nulla mi tempor
-              diam. Mauris nisl metus, suscipit eu elit et, placerat auctor ex.
-            </p>
-            <p>
-              Nunc eget venenatis arcu. Suspendisse egestas sodales commodo.
-              Orci varius natoque penatibus et magnis dis parturient montes,
-              nascetur ridiculus mus. Aenean blandit enim sed libero placerat,
-              quis tincidunt purus malesuada. Nulla tristique molestie lacus,
-              eget dictum ante egestas vel. Aliquam consectetur efficitur
-              ullamcorper. Maecenas ullamcorper ex ut nulla lacinia, eu cursus
-              urna varius. Vestibulum efficitur viverra purus at laoreet.
-              Suspendisse iaculis orci sit amet nisl lacinia pellentesque. Sed
-              elementum vitae nisl vel convallis. Nunc risus nisl, ornare sed
-              venenatis id, facilisis vitae nibh. Sed eget metus ligula. Cras
-              tincidunt eu sem vitae vulputate.
-            </p>
-            <p>
-              Nullam sagittis mauris et felis convallis, quis rhoncus diam
-              accumsan. Nullam aliquet bibendum lacus, id fringilla nisl dapibus
-              at. Mauris commodo viverra placerat. Nam venenatis sed lectus eu
-              scelerisque. Quisque vehicula nulla sollicitudin est lobortis,
-              eget dictum lectus tempor. Maecenas dapibus commodo ullamcorper.
-              Nunc sapien sapien, elementum vel placerat vel, tincidunt nec
-              nibh. Aliquam erat volutpat. Vestibulum purus eros, luctus sit
-              amet posuere sit amet, rhoncus et quam. Cras egestas nunc at
-              mauris facilisis vestibulum.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TermsOfServicesRoot;
diff --git a/src/apps/devdoc/app/components/sidebar.tsx b/src/apps/devdoc/app/components/sidebar.tsx
index 2f912f079..91c2f963b 100644
--- a/src/apps/devdoc/app/components/sidebar.tsx
+++ b/src/apps/devdoc/app/components/sidebar.tsx
@@ -25,6 +25,8 @@ import { Anchor } from './anchor';
 import Search from './search';
 import useMenu from '../utils/use-menu';
 import { cn } from '../utils/commons';
+import useConfig from '../utils/use-config';
+import { MobileMenu } from './header-secondary';
 
 const TreeState: Record<string, boolean> = Object.create(null);
 
@@ -277,6 +279,7 @@ interface SideBarProps {
   asPopover?: boolean;
   headings: Heading[];
   includePlaceholder: boolean;
+  rawLayout?: boolean;
 }
 
 export function Sidebar({
@@ -284,6 +287,7 @@ export function Sidebar({
   fullDirectories,
   asPopover = false,
   headings,
+  rawLayout,
   includePlaceholder,
 }: SideBarProps): ReactElement {
   const { state: menu, setState: setMenu } = useMenu();
@@ -332,6 +336,7 @@ export function Sidebar({
     setMenu(false);
   }, [router.asPath, setMenu]);
 
+  const { config } = useConfig();
   return (
     <>
       {includePlaceholder && asPopover ? (
@@ -369,10 +374,14 @@ export function Sidebar({
           >
             <div
               className={cn(
-                'overflow-y-hidden pt-6xl overflow-x-hidden hover:overflow-y-auto scrollbar-gutter',
+                'overflow-y-hidden overflow-x-hidden hover:overflow-y-auto scrollbar-gutter',
                 'grow md:h-[calc(100vh-var(--kl-navbar-height))]',
                 {
                   'no-scrollbar': !showSidebar,
+                },
+                {
+                  'pt-2xl': !!rawLayout,
+                  'pt-6xl': !rawLayout,
                 }
               )}
               ref={sidebarRef}
@@ -391,15 +400,19 @@ export function Sidebar({
                   />
                 </Collapse>
               )}
-              {mounted && window.innerWidth < 768 && (
-                <Menu
-                  className="nextra-menu-mobile md:hidden"
-                  // The mobile dropdown menu, shows all the directories.
-                  directories={fullDirectories}
-                  // Always show the anchor links on mobile (`md`).
-                  anchors={anchors}
-                />
-              )}
+              {mounted &&
+                window.innerWidth < 768 &&
+                (rawLayout ? (
+                  <MobileMenu items={config.headerSecondary?.items} />
+                ) : (
+                  <Menu
+                    className="nextra-menu-mobile md:hidden"
+                    // The mobile dropdown menu, shows all the directories.
+                    directories={fullDirectories}
+                    // Always show the anchor links on mobile (`md`).
+                    anchors={anchors}
+                  />
+                ))}
             </div>
           </OnFocusItemContext.Provider>
         </FocusedItemContext.Provider>
diff --git a/src/apps/devdoc/app/layout/mdx-components.tsx b/src/apps/devdoc/app/layout/mdx-components.tsx
index 286b1816b..bc6213785 100644
--- a/src/apps/devdoc/app/layout/mdx-components.tsx
+++ b/src/apps/devdoc/app/layout/mdx-components.tsx
@@ -102,7 +102,6 @@ export const createComponents = ({
     return {
       a: A,
       ul: (props) => {
-        console.log(props.className);
         let cs = props.className;
         if (!cs) {
           cs = 'list-disc pl-5xl';
@@ -110,6 +109,22 @@ export const createComponents = ({
 
         return <ul {...props} className={cs} />;
       },
+      ol: (props) => {
+        let cs = props.className;
+        if (!cs) {
+          cs = 'list-decimal pl-5xl';
+        }
+
+        return <ol {...props} className={cs} />;
+      },
+      li: (props) => {
+        let cs = props.className;
+        if (!cs) {
+          cs = 'pb-lg custom-li';
+        }
+
+        return <li {...props} className={cs} />;
+      },
     };
   }
   console.log('raw', isRawLayout);
diff --git a/src/apps/devdoc/app/layout/theme.tsx b/src/apps/devdoc/app/layout/theme.tsx
index 429471714..390b9d8fb 100644
--- a/src/apps/devdoc/app/layout/theme.tsx
+++ b/src/apps/devdoc/app/layout/theme.tsx
@@ -116,6 +116,7 @@ const Main = ({ children, pageOpts }: NextraThemeLayoutProps) => {
             fullDirectories={directories}
             headings={headings}
             asPopover={hideSidebar}
+            rawLayout={activeThemeContext.layout === 'raw'}
             includePlaceholder
           />
           {!hideSidebar && (
diff --git a/src/apps/devdoc/pages/privacy-policy.mdx b/src/apps/devdoc/pages/privacy-policy.mdx
index 357ec3925..8ffa43a94 100644
--- a/src/apps/devdoc/pages/privacy-policy.mdx
+++ b/src/apps/devdoc/pages/privacy-policy.mdx
@@ -1,11 +1,10 @@
-export const Headings = ({children})=>{
-return <p className="bodyMd-semibold">{children}</p>
-}
+export const Headings = ({ children }) => {
+  return <p className="bodyMd-semibold">{children}</p>;
+};
 
-export const SubList = ({children})=>{
-console.log("here",children)
-  return  <ul className="list-[circle] pl-5xl">{children.props.children}</ul> 
-}
+export const SubList = ({ children }) => {
+  return <ul className="list-[circle] pl-5xl">{children.props.children}</ul>;
+};
 
 <div className="bg-surface-basic-subdued">
     <div className="max-w-[1440px] m-auto px-3xl md:!px-8xl lg:!px-11xl xl:!px-13xl 2xl:!px-14xl pb-6xl md:!pb-8xl xl:!pb-10xl">
@@ -17,7 +16,7 @@ console.log("here",children)
             Last updated: <span className="headingMd">12th Dec, 2023</span>
           </div>
           <div className="bodyLg text-text-strong flex flex-col gap-4xl pt-4xl">
-            <p className="bodyMd-semibold">SCOPE OF THIS PRIVACY STATEMENT</p>
+            <Headings>SCOPE OF THIS PRIVACY STATEMENT</Headings>
   
               Kloudlite Labs Pvt Ltd (Kloudlite), respects your privacy. This
               Privacy Statement applies to personal data collected by Kloudlite
@@ -49,7 +48,7 @@ console.log("here",children)
               economic, cultural or social identity of that natural person.
 
               <Headings>THE CATEGORIES OF PERSONAL DATA WE COLLECT</Headings>
-              
+
               To the extent permitted by applicable law, the categories and
               types of personal data collected directly from you may include,
               without limitation:
@@ -58,10 +57,6 @@ console.log("here",children)
               to communicate with you and verify your identity, such as
               first and last name, title, company name, email address,
               telephone number, and postal address;
-                <SubList>
-                  - hello
-                  - hi
-                </SubList> 
               * Account and commercial information: Information that Kloudlite
               maintains in association with your account, such as your
               account number, username/user ID, password, payment
@@ -85,8 +80,8 @@ console.log("here",children)
               * Inferences: Information drawn from the personal data collected
               above, such as what topics you may be interested in based on
               the areas of the website you visit or what products you may be
-              interested in based on purchase records. 
-              
+              interested in based on purchase records.
+
               Kloudlite generally does not collect sensitive personal data,
               which is data such as your religious or philosophical beliefs,
               racial or ethnic origin, health or medical information (other than
@@ -100,7 +95,7 @@ console.log("here",children)
               applicable law.
 
               <Headings>HOW WE COLLECT PERSONAL DATA (SOURCES OF DATA)</Headings>
-              
+
               Kloudlite collects personal data directly from you and from other
               categories of sources as described in more detail below. The
               categories of personal data collected directly from you by
@@ -121,7 +116,7 @@ console.log("here",children)
               * Submit questions or comments; or
               * Submit content or posts on our customer portal pages or other
                 interactive webpages.
-             
+
               Personal data we collect online may also be combined with personal
               data you provide to us through offline channels such as through a
               call center, during an interview or in conjunction with a
@@ -138,7 +133,7 @@ console.log("here",children)
               personalize your experience and improve our interactions with you.
               For more information about the technology, we employ for these
               purposes, see the “Cookies and Other Technology” section below.
-  
+
               We may also supplement the personal data we collect from you with
               additional personal data we receive from third parties, such as
               your employer, our customers, and our business partners where you
@@ -155,9 +150,9 @@ console.log("here",children)
               vendors to confirm that the information was legally acquired by
               the third party and that we have the right to obtain it from them
               and use it.
-              
+
               <Headings>HOW WE USE (PROCESS) YOUR PERSONAL DATA</Headings>
-  
+
               Kloudlite may use personal data we collect about you to:
 
               * Identify and Authenticate You. We use your personal data to
@@ -173,32 +168,141 @@ console.log("here",children)
                     preferences. We process this information in order to
                     comply with our contractual obligations to you. In other
                     cases, it is in our legitimate business interests to be
-                    able to identify and authenticate you.                 
+                    able to identify and authenticate you.
                 </SubList>
-              * The personal data that may be collected and processed for
-                this purpose includes: name, title, company name, email
-                address, telephone number, postal address, account number,
-                username/user ID, password, preferred language and
-                preferences. We process this information in order to
-                comply with our contractual obligations to you. In other
-                cases, it is in our legitimate business interests to be
-                able to identify and authenticate you.
+              * Fulfill Your Requests. If you request something from Kloudlite, such as a      product or service, a call back, a newsletter subscription, or specific marketing or other materials, we use the personal data you provide to respond to your request. We or our representatives may also contact you as part of customer satisfaction surveys or for market research purposes. Where required by applicable law, we will obtain your consent before sending marketing messages.
                 <SubList>
-                  - The personal data that may be collected and processed for
-                    this purpose includes: name, title, company name, email
-                    address, telephone number, postal address, account number,
-                    username/user ID, password, preferred language and
-                    preferences. We process this information in order to
-                    comply with our contractual obligations to you. In other
-                    cases, it is in our legitimate business interests to be
-                    able to identify and authenticate you.
+                    - The personal data that may be collected and processed for this purpose includes: name, title, company name, email address, telephone number, postal address, account number, username/user ID, payment information, purchase records, information about your use of the product or service, information about your registration or participation in an event, your preferred language and other preferences, credit and billing status, and support inquiries. We process this information in order to comply with our contractual obligations to you when responding to your requests. In other cases, it is in our legitimate business interests to be able to provide customers and prospective customers with information, goods, or services they request.
+                </SubList>
+              * Provide You with Information About Our Products, Services and Events. Kloudlite may use your personal data to notify you about product and service offerings as well as events that we believe may be of interest to you. Kloudlite also may use your personal data to respond directly to your requests for information, including registrations for newsletters or other specific requests.
+                <SubList>
+                    - The personal data that may be collected and processed for this purpose includes: name, title, company name, email address, telephone number, postal address, account number, username/user ID, payment information, purchase records, information about your use of the product or service, information about your registration or participation in an event, your language and other preferences, credit and billing status, and support inquiries and location information and inferences. It is in our legitimate business interests to be able to provide customers, prospective customers, and the public with information about our products, services, and events.
+                </SubList>
+              * Provide Support and Customer Service. We use your personal data to provide support for products or services you have obtained from us and answer other questions. In the course of providing technical support to you, we may sometimes have incidental access to data that you have provided to us or data that is located on your systems. This data may contain information about you, or your organization’s business, employees, customers, partners, or suppliers. This Privacy Statement does not govern our access to or handling of this information. The conditions regarding the handling and processing of that data is covered by the applicable agreement between you and Kloudlite, such as our Enterprise Agreement.
+                <SubList>
+                    - The personal data that may be collected and processed for this purpose includes: name, title, company name, email address, telephone number, postal address, account number, username/user ID, payment information, purchase records, information about your use of the product or service, information about your registration or participation in an event, your language and other preferences, credit and billing status, and support inquiries. We process this information in order to comply with our contractual obligations to you.
+                </SubList>
+              * Process Your Job Application. When you apply for a position at Kloudlite, we use the personal data you provide for the purpose of assessing your application, considering you for future positions and carrying out human resources functions in accordance with applicable law. Kloudlite will disclose the personal data you supply during the application process to internal human resources professionals as well as professionals in our business functions who are participating in the application and interview process.
+                <SubList>
+                    - The personal data that may be collected, disclosed, and/or processed for this purpose includes: name, title, company name, email address, telephone number, postal address, your preferred language and other preferences, resume, cover letter, age, education, professional history and contact details. It is in our legitimate business interests to be able to review the qualifications of prospective employees and perform human resources functions with regard to our employees.
+                </SubList>
+              * Enhance the Website Experience. When you use our websites and/or respond to our emails, we use the personal data you provide for the purpose of enhancing and customizing your experience on our websites and to deliver content and product and service offerings relevant to your interests, including targeted offers through our website, third-party sites or email (with your consent, where required by applicable law). We may also use this information to help us improve and further develop our websites, products and services.
+                <SubList>
+                    - The personal data that may be collected, disclosed and/or processed for this purpose includes: name, title, company name, email address, telephone number, postal address, information about your use of the product or service, information about your registration or participation in an event, your preferred language and other preferences, location information, inferences, information collected when you visit a website, such as IP address, browsing history, information on your interaction with the website, browser type and language, operating system, location, date and time. It is in our legitimate business interests to improve the Kloudlite websites, products and services and to enhance our users’ experience with the websites, products and services.
+                </SubList>
+
+              We will not use your personal data in a manner that is inconsistent with the purpose of its original collection, unless we have provided you additional notice and you have consented.
+
+              Kloudlite will retain your personal data for only as long as is required to fulfill the purposes for which the information is processed or for other valid reasons to retain your personal information (for example to comply with our legal and regulatory obligations, resolve disputes, enforce our agreements and for the establishment, exercise or defense of legal claims).
+
+              <Headings>HOW WE DISCLOSE YOUR PERSONAL DATA</Headings>
+
+              Kloudlite discloses personal data for the following business purposes:
+
+              * Kloudlite may disclose personal data to business partners and service providers in order to support our business operations, such as (but not limited to) fulfilling your orders, following up on requests, providing support and assisting Kloudlite with sales, marketing and communication initiatives. These business partners and service providers include distributors, resellers, payment processors, financial service providers and institutions, materials production and shipping companies, postal or government authorities, market intelligence and consulting service providers, and information technology service providers. Business partners and service providers are required by contract to keep the information received on behalf of Kloudlite confidential and secure and not use it for any purpose other than the purpose for which it was provided to them.
+                <SubList>
+                  - The categories of personal data we may disclose to these third parties include: contact information, including identifiers; account and commercial information; professional or employment-related information; internet or other similar network activity; location information; and inferences.
+                </SubList>
+              * Kloudlite may disclose personal data as required by law or legal process, such as responding to a duly authorized and lawful request of a police or public authority (including to meet national security or law enforcement requirements), to enforce or protect the rights of Kloudlite, when such disclosure is necessary or appropriate to prevent physical harm or financial loss as permitted by applicable law, or in connection with an investigation of suspected or actual illegal activity.
+                <SubList>
+                  - The categories of personal data we may disclose to these third parties include: contact information, including identifiers; account and commercial information; professional or employment-related information; internet or other similar network activity; location information; and inferences.
                 </SubList>
-              * Provide You with Information About Our Products, Services and Events. Kloudlite may use your personal data to notify you about product and service offerings as well as events that we believe may be of interest to you. Kloudlite also may use your personal data to respond directly to your requests for information, including registrations for newsletters or other specific requests.                
+              * Kloudlite may disclose personal data in the context of a business transaction involving part or all of Kloudlite, such as a merger, acquisition, consolidation, or divestiture. Such a transaction may involve the disclosure of personal data to prospective or actual purchasers, or the receipt of it from sellers. It is Kloudlite’s practice to seek appropriate protection for information in these types of transactions. Kloudlite will inform you of the name and the contact information of the receiver of your personal data. Following such a business transaction, you may contact the entity to which we transferred your personal data with any inquiries concerning the use of that information.
                 <SubList>
-                  -  The personal data that may be collected and processed for this purpose includes: name, title, company name, email address, telephone number, postal address, account number, username/user ID, payment information, purchase records, information about your use of the product or service, information about your registration or participation in an event, your language and other preferences, credit and billing status, and support inquiries and location information and inferences. It is in our legitimate business interests to be able to provide customers, prospective customers, and the public with information about our products, services, and events.  
+                  - The categories of personal data we may disclose to these third parties include: contact information, including identifiers; account and commercial information; professional or employment-related information; internet or other similar network activity; location information; and inferences.
                 </SubList>
-           </div>
+
+              We do not sell personal data as the term sell is commonly understood. Under certain Data Protection Laws, a “sale” is defined to include disclosures of personal data to a third party for monetary or valuable consideration. When you use Kloudlite website/ portals, Kloudlite’s authorized partners, such as advertising networks, data analytics providers, social networks, and advertising partners, may collect cookies and similar technology and use this data (such as your Internet or other similar network activity) for their own purposes, such as improving their own services. This activity may qualify as a “sale” under certain applicable Data Protection Laws. You can make choices to allow or prevent such uses (see the Cookies and Other Technology section below on how to manage your cookie preferences).
+
+              <Headings>COOKIES AND OTHER TECHNOLOGY</Headings>
+
+              * When you visit our website, we may automatically collect information such as your IP address, browsing history, information on your interaction with the website, browser type and language, operating system, location, date and time (i.e., the category above referred to as Internet or other similar network activity). We may also use cookies to collect information as you navigate our websites. A cookie is a small amount of data that is sent to your browser from a web server and stored on your device. The cookie may be placed by Kloudlite or by an authorized third party. We use both session-based and persistent cookies on our websites. Session-based cookies exist during a single session and disappear when you close your browser or turn off your device. Persistent cookies remain on your device even after you close your browser or turn off your device.
+
+              * Kloudlite categorizes the cookies on our websites into three categories: Required, Functional and Advertising cookies.
+
+              * Required Cookies. Required cookies are necessary to enable the basic features of the website to function. Kloudlite uses some cookies that are required for the delivery of services on our websites. Cookies that are required allow us to maintain and improve the safety and security of our websites, authenticate account users, allow you to access your private accounts on our websites, allow you to sign into different portions of our websites with the use of only one login, balance the traffic on our websites, and remember items in your shopping cart. Cookies that are required are not used for marketing purposes.
+
+              * Functional Cookies. Functional cookies allow us to analyze your use of the website to evaluate and improve our performance. Kloudlite also uses functional cookies to improve our service to you and personalize your web browsing experience, such as by gaining a better understanding of your interests and requirements regarding our websites, our business or our products and services. Cookies that Kloudlite uses to improve our services and your website experience may remember your language and site preferences, invite you to participate in surveys or evaluations, show you when you are logged into our system and allow you to remain logged-in for a period of time, help provide you with support services, remember your login information, and prepopulate forms that you have already completed. Kloudlite also uses cookies that collect information about how you use our websites, including which pages you visit, and whether you experience any errors. These cookies use aggregate information to provide statistics on how our websites are used, help us improve our websites by measuring errors, testing different designs on our websites, and helping us measure the traffic on our websites so that we can optimize our content accordingly. These cookies are used to help us improve how our websites work, understand what interests our users, and measure website quality and the effectiveness of our online advertising.
+
+              * Advertising Cookies. Advertising cookies are used to show you ads that are more relevant to you. We may disclose this information to advertisers or use it to better understand your interests. For example, advertising cookies may be used to disclose data to advertisers so that the ads you see are more relevant to you (e.g., targeted ads). In addition, we may use remarketing technology to advertise on other websites you may visit. In doing so, a third party may place or read a unique ad-serving cookie on your device and use technical information about your browser and your activity at Kloudlite website to serve advertisements to you on non-Kloudlite website.
+
+              If you do not want your information to be stored by cookies, you can manage your cookie preferences by using the options and tools made available to you by either your web browser or Kloudlite. You can configure your browser so that it always rejects these cookies or asks you each time whether you want to accept them or not. Your browser documentation includes instructions explaining how to enable, disable or delete cookies at the browser level (usually located within the “Help”, “Tools” or “Edit” facility). If a cookie manager has been implemented by Kloudlite on the website you are visiting, the cookie tool will be displayed on the website during your visit (e.g., click the “Cookie Preferences” or similar link at the bottom of the website). You can use the cookie manager to set your cookie preference and to see a list of the cookies used on the Kloudlite website. The cookie manager also provides information on the specific cookies used and the classification of the cookie (i.e., Required, Functional or Advertising). Whether you utilize the cookie manager or manage cookies at the individual browser level, please remember that Required cookies will remain and cannot be turned off. Please also understand that choosing to reject cookies may reduce the performance and functionality of our websites.
+
+              Kloudlite also uses web beacons alone or in conjunction with cookies to compile information about usage of our websites and interaction with emails from Kloudlite (e.g., open rates, click through rates). Web beacons are clear electronic images that can recognize certain types of information on your device, such as cookies, when you viewed a particular website tied to the web beacon, and a description of a website tied to the web beacon. For example, Kloudlite may place web beacons in marketing emails that notify Kloudlite when you click on a link in the email that directs you to one of our digital properties. Kloudlite uses web beacons to operate and improve our website, portal and email communications.
+
+              <Headings>YOUR RIGHTS AND CHOICES</Headings>
+
+              In accordance with the laws of certain countries, you may have certain rights and choices regarding the personal data we collect and maintain about you, and how we communicate with you.
+
+              * The right to request information about our use of your personal data (e.g., the pieces and categories of personal data we have; the categories of sources, purposes for collection, the third parties to whom we have disclosed personal data, and personal data we have disclosed);
+              * The right to review and access your personal data;
+              * The right to rectify (correct, update or modify) the personal data we hold about you;
+              * The right to erase (e.g., delete), de-identify, anonymize or block your personal data;
+              * The right to restrict our use of your personal data;
+              * The right to object to our use of, or certain types of disclosures of, your personal data;
+              * The right to request the transfer of your personal data we hold about you to a third party;
+              * The right to receive your personal data in a usable format and transmit it to a third party (also known as the right of data portability); and
+              * The right to lodge a complaint with your local data protection authority.
+
+              If you would like to exercise any of these rights, you may do so via our Personal Data Request Form. To submit your appeal, please do so by selecting “Other” via our Personal Data Request Form or by emailing support@kloudlite.io
+
+              Where the applicable Data Protection Laws apply, you also have the right to withdraw any consent you have given to uses of your personal data. If you wish to withdraw consent that you have previously provided to us, you may do so via our Feedback Form. However, the withdrawal of consent will not affect the lawfulness of processing based on consent before its withdrawal.
+
+              Where the applicable Data Protection Laws do not apply, Kloudlite grants you the ability to access, modify, or update some of your personal data online at any time. You may log in and make changes to your information, such as your password, your contact information, your general preferences, and your personalization settings. If necessary, you may also contact us via our Feedback Form and describe the changes you want made to the information you have previously provided. However, note that changing or deleting information necessary for Kloudlite to assist with support, services, and purchases may result in a delay or interruption in processing your requests.
+
+              You will be given an opportunity to tell us whether you would like to receive information, special offers, and promotional materials by email from Kloudlite or our business partners when you create a redhat.com account, when you register for a service, when you provide us with your personal data, or when we send you a marketing email. Where required by applicable law, we will obtain adequate consent to provide you with these marketing materials. You also have the ability to opt out of receiving marketing emails from Kloudlite at any time without cost by clicking on the relevant link contained in our marketing emails or by contacting us via our Feedback Form. You can also exercise your rights and choices by contacting us as described below under “How to Contact Us.”
+
+              When you exercise your privacy rights, such as those conferred by the applicable Data Protection Laws, you have a right not to receive discriminatory treatment by Kloudlite for the exercise of such privacy rights.
+
+              <Headings>VERIFICATION</Headings>
+
+              Before responding to a request for information about your personal data, we must verify the request. Verification is important to protect your information and to help confirm that we are responding to a valid request and providing the response to the correct individual. To verify the request, we initially ask for at least two (2) or three (3) identifiers, such as name, email address and location. If we have a need to request additional identifiers to reasonably verify your identity, we will contact you and request additional verification. The information we ask to verify your identity may depend on your relationship with us.
+
+              When you exercise your privacy rights under the applicable Data Protection Laws, you can designate an authorized agent or representative to make a request on your behalf by providing the authorized agent with written permission to do so and verifying your identity with us as part of the request, or by providing the authorized agent with Power of Attorney pursuant to applicable law (e.g., the California Probate code). We will ask the individual submitting the request to denote that they are an authorized agent or representative. When submitted by an authorized agent or representative, we ask the authorized agent or representative to provide name, email address and a description of the relationship with the individual who is the subject of the request and to certify that the representative has permission to submit the request and may request proof of the consumer’s written permission.
+
+              <Headings>SECURITY</Headings>
+
+              Kloudlite intends to protect your personal data. We have implemented appropriate physical, administrative, and technical safeguards to help us protect your personal data from unauthorized access, use and disclosure. For example, we encrypt certain personal data such as payment information when we transmit such information over the Internet. We also require that our business partners and service providers protect such information from unauthorized access, use and disclosure.
+
+              <Headings>SOCIAL MEDIA, PUBLIC FORUMS AND LINKS TO OTHER WEBSITES</Headings>
+
+              Kloudlite may provide social media features that enable you to share information with your social networks and interact with Kloudlite on various social media websites. Your use of these features may result in the collection or sharing of information about you, depending on the feature. We encourage you to review the privacy policies and settings on the social media websites with which you interact to make sure you understand the information that may be collected, used, and shared by those websites.
+
+              Our websites may make chat rooms, forums, blogs, message boards, and/or news groups available to its users. Remember that your comments and posts have become publicly available, and we urge you to exercise discretion when submitting such content.
+
+              Our websites may contain links to other websites. Kloudlite does not control and is not responsible for the information collected by websites that can be reached through links from our websites. If you have questions about the data collection procedures of linked websites, please contact the organizations that operate those websites directly.
+
+              <Headings>CHILDREN’S ONLINE PRIVACY</Headings>
+
+              Kloudlite’s products and services are not directed to children and Kloudlite does not knowingly collect online personal data from children under the age of 16. If you are a parent or guardian of a minor under the age of 16 and believe that he or she has disclosed personal data to us, please contact us via
+              our Feedback Form or as described below under “How to Contact Us.” Kloudlite will ensure their personal data is properly processed and disposed of with the consent of their parent or guardian.
+
+              <Headings>DATA TRANSFERS AND DATA PRIVACY FRAMEWORKS</Headings>
+
+              Kloudlite is a global organization, with legal entities, business processes, and technical systems that operate across borders. Kloudlite may transfer your personal data to other Kloudlite entities across borders, and these countries may not have the same data protection laws as the country from which you initially provided the information.
+
+              Where required by applicable law, we have put in place appropriate safeguards (such as standard contractual clauses approved by the European Commission) in accordance with applicable legal requirements to ensure that your data is adequately protected. When transferring your personal data internationally, Kloudlite will protect your personal data as provided in this Privacy Statement and comply with applicable legal requirements as may be in effect from time to time. If you wish to obtain a copy of the relevant safeguards that are in place to protect the international transfer of your personal data, please contact us as described below under “How to Contact Us.”
+
+              <Headings>CHANGES TO THIS PRIVACY STATEMENT</Headings>
+
+              Kloudlite reserves the right to make corrections, changes or amendments to this Privacy Statement at any time. The revised Privacy Statement will be posted on this website. A notice will be posted on our homepage for 30 days whenever this Privacy Statement is changed in a material way, and the date of last update will be indicated at the top of the Privacy Statement. If you do not refuse the changes in writing within that notice period and you continue to use our websites, we consider that you have read and understand the Privacy Statement as changed, including with respect to personal data provided to us prior to the changes in the Privacy Statement. We encourage you to periodically review this Privacy Statement for any changes or updates. If you would like information related to the previous version of this Privacy Statement and/or a copy of the previous version, please contact us as described below under “How to Contact Us.”
+
+              <Headings>HOW TO CONTACT US</Headings>
+
+              We provided this information above in the “Your Rights and Choices” section, but remember that if you would like to exercise any of your privacy rights, you may do so via our Personal Data Request Form. For California consumers, you may also submit requests, or access the information provided in this Privacy Statement in an alternative format, by mailing on Kloudlite’s mail id at support@kloudlite.io
+
+              If you have any questions about Kloudlite’s privacy practices or use of your personal data, please feel free to contact us at support@kloudlite.io, via our Feedback Form or by mail at:
+
+              Kloudlite Labs Pvt Ltd<br></br>
+              415, 4th floor, Shaft-1, Tower- B<br></br>
+              VRR Fortuna<br></br>
+              Carmelaram, Janatha Colony, Bangalore<br></br>
+              Karnataka,<br></br>
+              India, 560035<br></br>
+
+              For a PDF version of the Privacy Statement, please click here.
+      </div>
         </div>
     </div>
-</div>
 
+</div>
diff --git a/src/apps/devdoc/pages/terms-of-services.mdx b/src/apps/devdoc/pages/terms-of-services.mdx
index 8f9bd6de9..d5ad360d1 100644
--- a/src/apps/devdoc/pages/terms-of-services.mdx
+++ b/src/apps/devdoc/pages/terms-of-services.mdx
@@ -1,2 +1,145 @@
-import TermsOfServicesRoot  from '~/app/components/page/terms-of-services';
-export default ()=> <TermsOfServicesRoot/>
+export const Headings = ({ children }) => {
+  return <p className="bodyMd-semibold">{children}</p>;
+};
+
+export const SubList = ({ children }) => {
+  return <ul className="list-[circle] pl-5xl">{children.props.children}</ul>;
+};
+
+export const ListRoman = ({ children }) => {
+  return <ol type="a" className="list-[lower-alpha] pl-5xl flex flex-col gap-md marker:!font-normal">{children.props.children}</ol>;
+};
+
+export const ListDecimalBold = ({ children }) => {
+  return <ol type="1" className="list-[decimal] pl-5xl flex flex-col gap-md marker:font-bold">{children.props.children}</ol>;
+};
+
+<div className="bg-surface-basic-subdued">
+  <div className="max-w-[1440px] m-auto px-3xl md:!px-8xl lg:!px-11xl xl:!px-13xl 2xl:!px-14xl pb-6xl md:!pb-8xl xl:!pb-10xl">
+    <h1 className="heading4xl-marketing md:!heading5xl-marketing lg:!heading6xl-marketing text-text-strong py-6xl md:!py-8xl xl:!py-10xl">
+      POLICIES & GUIDELINES
+    </h1>
+    <div>
+      <div className="flex flex-col gap-lg">
+        <Headings>TERMS OF USE</Headings>
+        <span className="text-text-soft bodySm">
+          Updated: 12th Dec 2023 (Giving this date, considering the website
+          go-live date)
+        </span>
+      </div>
+      <div className="bodyLg text-text-strong flex flex-col gap-4xl pt-4xl">
+        Kloudlite Labs Pvt Ltd. operate this website ("Site"). This Site may
+        provide you with access to a variety of web pages, documents, software,
+        services, images, graphics, audio, video, forums, discussion groups,
+        blogs, and other content ("Content"). 
+        
+        By accessing or logging into the Site, you agree to these terms. Kloudlite may revise these terms at any
+        time. Your continued use of the Site after any such revisions have been
+        published constitutes your agreement to the revised terms. If you do not
+        agree to these terms, do not use the Site. 
+        
+        Personal data collected when you access and use the Site will be processed by Kloudlite in accordance
+        with the Kloudlite Privacy Statement. For more information on the types
+        of personal data collected on the Site, how Kloudlite handles your
+        personal data and other related topics, please see the Kloudlite Privacy
+        Statement.
+
+        <ListDecimalBold>
+        1. **Kloudlite and Third Party Content**
+            <br></br>When using the Site, you may be able to access or download certain Content provided by Kloudlite ("Content"), or Content provided by third parties ("Third Party Content").  Content is governed by the license that accompanies it.  By using or downloading any Content, you agree to the applicable license.  It is your responsibility to ensure you have proper permission for your use of any Content. If you are unclear as to what license applies to any Content, it is recommended that you ask the author.
+    
+            The Site, including the design, layout, look and feel, and Kloudlite Content, is copyrighted by Kloudlite and its licensors.  To the extent the Site, portions of the Site, or Kloudlite Content does not designate a license, Kloudlite hereby grants you a copyright license to copy such material for your own personal or internal business purposes.  
+        
+        2. **Your Content**
+            <br></br>Where applicable, you may be able upload or otherwise provide certain Content, such as software (source code, binary code, configuration files, etc.), documents, images, videos, or other material to the Site via your Account ("Your Content").  Except if specifically stated otherwise, Your Content is not confidential and may be made publicly available. You are responsible for keeping your own backups of Your Content. You represent that you have the right to provide Your Content to Kloudlite and its users.
+            
+            It's your responsibility to make clear the license under which you are providing Your Content. You retain ownership of Your Content. By posting Your Content to the Site, you hereby grant to Kloudlite a non-exclusive, irrevocable, worldwide, royalty-free license to use, reproduce, distribute, sublicense, adapt, modify, and publish Your Content, provided this license to Kloudlite does not supersede the terms of any open source license you may explicitly apply to Your Content.
+            
+            If you close your Account, Your Content may remain accessible on the Site. 
+        
+        3. **Account**
+            <br></br>Where applicable, you may register for an account on the Site (an "Account").  You must provide current, complete, and accurate information as required by the applicable account registration form.  You must be over 16 years old to create an Account on the Site.  Each Account is personal in nature and may only be used by you.  Any activity completed through your Account will be deemed to have been completed by you. Where applicable, you may choose to create an Account by authenticating via an existing account you have with a third party, in which case the third party terms may apply to such action. 
+        
+            You are responsible for the security of your Account, and you agree not to share your password or access to the Site with another person. Kloudlite is not liable for any loss or damage arising from your failure to keep your Account secure. You will notify Kloudlite immediately if your Account information is lost, stolen, or otherwise compromised. Kloudlite may suspend or deactivate your Account if Kloudlite determines that this step is needed (such as if your Account has been compromised or you have violated these terms).
+
+        4. **Your Use of the Site**
+            <br></br>You will not use the Site in a way that violates any laws or these terms, infringes anyone's rights (including but not limited to intellectual property rights), is offensive, or interferes with the Site or its features. For example, you will not use the Site in a way or provide Content to the Site that: 
+            <ListRoman>
+                1. infringes, misappropriates, or violates any third party or Kloudlite intellectual property rights;
+                2. is defamatory, libelous, threatening, harassing, harmful to minors, or pornographic;
+                3. contains hateful, abusive, obscene, or violent content;
+                4. attempts to gain unauthorized access to the Site, the server on which the Site is stored or any server, computer, or database connected to the Site;
+                5. generates or facilitates sending unsolicited email or deploys any robot, spider, or site/search retrieval application.
+                6. contains or distributes any viruses or programming routines intended to damage, surreptitiously intercept or expropriate any system, data, or information.
+                7 attempts to or does mine or forge cryptocurrencies, enable illegal file sharing; or 
+                8. restricts or inhibits any other user from using the Site by "hacking", "cracking", "spoofing", or defacing any portions of the Site.
+            </ListRoman>
+
+            You may not post promotional materials relating to website or online services which compete with Kloudlite or the Site, or post advertising or commercial solicitations unless explicitly agreed with Kloudlite.
+
+            If Kloudlite determines that you have acted illegally, in violation of these terms, or inappropriately, Kloudlite may terminate your Account, remove Your Content, prohibit you from using the Site, take appropriate legal actions, or take other action as Kloudlite deems appropriate.
+
+            The Site or portions of the Site may also be subject to other guidelines, such as a Code of Conduct. Non-compliance with such guidelines may result in the Site or the relevant functionality of the Site no longer being available to you or other consequences as described in such guidelines.
+
+            Kloudlite has the right, but not the obligation, to monitor the use of the Site, any Content, and any activity on the Site.
+
+        5. **Feedback**
+            <br></br>You may provide ideas, suggestions, proposals, or other feedback to Kloudlite via the Site ("Feedback").<br></br>
+            Kloudlite may use such Feedback for any purpose, including incorporating the Feedback into or using the Feedback to develop and improve Kloudlite products and other Kloudlite offerings without attribution or compensation to you. You grant Kloudlite a perpetual and irrevocable license to use all Feedback for any purpose. You agree to provide Feedback to Kloudlite only in compliance with applicable laws. You represent that you have the authority to provide the Feedback and that Feedback will not include confidential information. 
+        6. **Links and References to services**
+            <br></br>The Site may provide links to third party websites, products or services, which you may access or use at your own risk subject to any applicable third-party terms. Kloudlite is not responsible for and has not endorsed such third-party websites, products, or services.  <br></br>
+            
+            The Site may refer to Kloudlite products or services that might not be available in your location. Please contact your local Kloudlite representative for more information.
+        7. **Disclaimer of Warranties**
+            <br></br>EXCEPT AS EXPRESSLY AGREED OTHERWISE IN A SIGNED AGREEMENT BETWEEN YOU AND KLOUDLITE: 
+        
+            THE SITE, ANY CONTENT ON THE SITE, AND ANY SOFTWARE OR SERVICES PROVIDED ON THE SITE ARE PROVIDED "AS IS" AND KLOUDLITE PROVIDES NO WARRANTIES EXPRESS, IMPLIED OR STATUTORY, INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTABILITY, SATISFACTORY QUALITY, NON-INFRINGEMENT OR FITNESS FOR A PARTICULAR PURPOSE. KLOUDLITE MAKES NO WARRANTIES THAT THE SITE WILL BE SECURE OR THAT ACCESS AND USE OF THE SITE WILL BE  ERROR-FREE WITHOUT INTERRUPTIONS, CRASHES, OR DOWNTIME.
+            
+            Kloudlite may change or discontinue part or all of the Site or any Content at any time. 
+        8. **Limitation of Liability & Indemnity**
+            <br></br>EXCEPT AS EXPRESSLY PROVIDED OTHERWISE IN A SIGNED AGREEMENT BETWEEN YOU AND KLOUDLITE:
+            
+            IN NO EVENT WILL KLOUDLITE BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES WHETHER SUCH DAMAGES ARE ALLEGED AS A RESULT OF TORTIOUS CONDUCT OR BREACH OF CONTRACT OR OTHERWISE, EVEN IF KLOUDLITE HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES UNDER OR IN CONNECTION WITH THESE TERMS, INCLUDING BUT NOT LIMITED TO THE SITE, YOUR ACCESS TO OR USE OF (OR YOUR FAILURE TO GAIN ACCESS TO OR USE OF) THE SITE, ANY CONTENT PROVIDED ON THE SITE, OR ANY SERVICES PROVIDED ON THE SITE.
+            
+            THIS STATEMENT DOES NOT AFFECT ANY LIABILITY WHICH CANNOT BE EXCLUDED OR LIMITED UNDER APPLICABLE LAW.
+            
+            You will defend and indemnify Kloudlite from and against any and all damages, costs, losses and expenses (including reasonable attorney fees) incurred as a result of any claim, suit or proceeding brought against Kloudlite in relation to Your Content or as a result of any use or misuse of the Site by you.
+        9. **Trademarks**
+            <br></br>The trademarks, logos, trade dress and service marks displayed on the Site are the property of Kloudlite or other third parties.  Your use of any Kloudlite trademark must be in accordance with the applicable Kloudlite Trademark Guidelines and Policies or other applicable trademark guidelines. 
+        10. **Waiver, Severability, and Precedence**
+            <br></br>The failure of Kloudlite to exercise or enforce any right or provision of these terms does not constitute a waiver of such right or provision.  If any provision of these terms is held to be unenforceable, that provision will be modified so as to be enforceable, or if such modification is not possible, will be removed and the remaining provisions will remain in full force.<br></br>
+            
+            Some services or Kloudlite Content offered via the Site may be subject to additional or separate terms. If there is a conflict between these terms and such additional or separate terms, the latter will have precedence with respect to your access and use of that service or Kloudlite Content. Nothing in these terms is intended to limit your rights under an open source license.
+        11. **Jurisdiction**
+            <br></br>These terms, and any claim, controversy, or dispute arising out of or related to these terms, are governed by and construed in accordance with the laws of the State of Karnataka without giving effect to any conflicts of laws provision.<br></br>
+            
+            If one or more of the provisions contained in these terms are held invalid, illegal, or unenforceable in any respect by any court of competent jurisdiction, such holding will not impair the validity, legality, or enforceability of the remaining provisions.
+
+        12. **Copyright Notice and Takedown Process**
+            <br></br>Kloudlite and its affiliates respect the intellectual property of others. If you believe that content on the Site infringes your copyright, please provide the following information to the Kloudlite-designated copyright agent listed below:
+            1. A description of the copyrighted content that you claim has been infringed and description of the infringing activity, including where the content is located, such as an URL.
+            2. Your name, address, telephone number, and email address.
+            3. The following statement: "I have a good faith belief that use of the copyrighted materials described above as allegedly infringing is not authorized by the copyright owner, its agent, or the law."
+            4. The following statement: "I swear, under penalty of perjury, that the information in the notification is accurate and that I am the copyright owner or am authorized to act on behalf of the owner of an exclusive right that is allegedly infringed."
+            5. Your electronic or physical signature.
+            
+            If you believe that content on the Site was removed in error, please provide a counter notification to the Kloudlite-designated copyright agent listed below:
+            1. A description of the material that Kloudlite has removed or to which Kloudlite has disabled access.
+            2. Your name, address, telephone number, email address, and a statement that you consent to the jurisdiction of the Federal District Court for the judicial district in which your address is located (or Wake County, North Carolina if your address is outside of the United States), and that you will accept service of process from the person who provided notification of infringement or an agent of such person.
+            3. The following statement: "I swear, under penalty of perjury, that I have a good faith belief that the material identified above was removed or disabled as a result of a mistake or misidentification of the material to be removed or disabled."
+            4. Your electronic or physical signature. 
+        </ListDecimalBold>
+        Please send notifications of infringement and counter notifications to the Kloudlite-designated copyright agent at: support@kloudlite.io
+        
+        Kloudlite Labs Pvt Ltd<br></br>
+        415, 4th floor, Shaft-1, Tower- B<br></br>
+        VRR Fortuna<br></br>
+        Carmelaram, Janatha Colony, Bangalore<br></br>
+        Karnataka,<br></br>
+        India, 560035<br></br>
+
+        For a PDF version of the Privacy Statement, please click here.
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/apps/devdoc/style.css b/src/apps/devdoc/style.css
index 0d1c4295f..6bd54d591 100644
--- a/src/apps/devdoc/style.css
+++ b/src/apps/devdoc/style.css
@@ -273,3 +273,6 @@ code{
   }
 
   
+.custom-li>p{
+  padding-bottom: 8px;
+}
\ No newline at end of file

From 802ef59a55e9e732833f112526a2d3ee5d24689a Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Thu, 25 Jan 2024 18:17:40 +0530
Subject: [PATCH 4/5] Fixed website bugs

---
 .../app/components/header-secondary.tsx       | 10 ++--
 src/apps/devdoc/app/components/header.tsx     |  2 +-
 src/apps/devdoc/app/components/page/index.tsx | 16 +++----
 src/apps/devdoc/app/components/search.tsx     |  2 +-
 src/apps/devdoc/app/components/sidebar.tsx    |  6 +--
 src/apps/devdoc/app/components/toc.tsx        |  2 +-
 src/apps/devdoc/app/layout/theme.tsx          |  6 +--
 src/apps/devdoc/app/utils/config.tsx          | 46 ++++++++++---------
 8 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/src/apps/devdoc/app/components/header-secondary.tsx b/src/apps/devdoc/app/components/header-secondary.tsx
index 010e0d658..ab44d56f7 100644
--- a/src/apps/devdoc/app/components/header-secondary.tsx
+++ b/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>
diff --git a/src/apps/devdoc/app/components/header.tsx b/src/apps/devdoc/app/components/header.tsx
index ce841ceee..d82cc477c 100644
--- a/src/apps/devdoc/app/components/header.tsx
+++ b/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) => (
diff --git a/src/apps/devdoc/app/components/page/index.tsx b/src/apps/devdoc/app/components/page/index.tsx
index d0fc4cc0e..51a1cd7f4 100644
--- a/src/apps/devdoc/app/components/page/index.tsx
+++ b/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,7 +476,8 @@ 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
@@ -484,12 +485,11 @@ const IndexRoot = () => {
                 {/** @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">
diff --git a/src/apps/devdoc/app/components/search.tsx b/src/apps/devdoc/app/components/search.tsx
index 413f22e8d..527729164 100644
--- a/src/apps/devdoc/app/components/search.tsx
+++ b/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} />
diff --git a/src/apps/devdoc/app/components/sidebar.tsx b/src/apps/devdoc/app/components/sidebar.tsx
index 91c2f963b..a3901846c 100644
--- a/src/apps/devdoc/app/components/sidebar.tsx
+++ b/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"
diff --git a/src/apps/devdoc/app/components/toc.tsx b/src/apps/devdoc/app/components/toc.tsx
index 5925f3bc4..de6e26a45 100644
--- a/src/apps/devdoc/app/components/toc.tsx
+++ b/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 && (
diff --git a/src/apps/devdoc/app/layout/theme.tsx b/src/apps/devdoc/app/layout/theme.tsx
index 390b9d8fb..faa3e2a2e 100644
--- a/src/apps/devdoc/app/layout/theme.tsx
+++ b/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
diff --git a/src/apps/devdoc/app/utils/config.tsx b/src/apps/devdoc/app/utils/config.tsx
index 8841f6a59..5f5763341 100644
--- a/src/apps/devdoc/app/utils/config.tsx
+++ b/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>
     ),
   },

From 542d02e987eb22c0a57759dfe96548df8cc45dfa Mon Sep 17 00:00:00 2001
From: Bikash <tulsiojhaamg@gmail.com>
Date: Fri, 26 Jan 2024 09:56:49 +0530
Subject: [PATCH 5/5] added health check

---
 src/apps/devdoc/public/healthy.txt | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/apps/devdoc/public/healthy.txt

diff --git a/src/apps/devdoc/public/healthy.txt b/src/apps/devdoc/public/healthy.txt
new file mode 100644
index 000000000..d86bac9de
--- /dev/null
+++ b/src/apps/devdoc/public/healthy.txt
@@ -0,0 +1 @@
+OK