type(migration): Adding Litmus Docs 2.0 website with SASS (#46)

* Added the basic layout for homepage Signed-off-by: Amit Kumar Das <amit@chaosnative.com> * Added basic components Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Removed import and component bugs Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Minor change 😅 Signed-off-by: Amit Kumar Das <amit@chaosnative.com> * Added rc files for prettier and nvm Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Adding padding for section layout Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Added Explore litmus and advanced litmus section Signed-off-by: Amit Kumar Das <amit@chaosnative.com> * Adding Home Header and fixing Explore Litmus css Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Moving to SASS (#38) Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Minor Updates Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Added CodeBlock Component for docs. Signed-off-by: Jonsy13 <vedant.shrotria@chaosnative.com> * Added home page components and pre-footer Signed-off-by: Amit Kumar Das <amit@chaosnative.com> * Fixed Minor Issues with CSS and Code-reusability Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Added tutorials section Signed-off-by: Amit Kumar Das <amit@chaosnative.com> * Added chaos-hub page Signed-off-by: Amit Kumar Das <amit@chaosnative.com> * Adding Docusauras Layout Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Updated Header and Responsive Row into Sass Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Converted Link to Sass and changed baseURL Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Removed Window Object Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Updated docs/asset image Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Removing Link Underline and UI issues Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Converted Components to SASS Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Removed Theme Provider and theme hooks to migrate to SASS Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Removed styled-components modern-css-reset use-media and react-router-dom Signed-off-by: Sayan Mondal <sayan@chaosnative.com> * Added 404 page. Signed-off-by: Jonsy13 <vedant.shrotria@chaosnative.com> * Added 404 page. Signed-off-by: Jonsy13 <vedant.shrotria@chaosnative.com> * Added 404 page. Signed-off-by: Jonsy13 <vedant.shrotria@chaosnative.com> * Added Spellcheck changes. Signed-off-by: Jonsy13 <vedant.shrotria@chaosnative.com> * Fixed versioning issue in imports. Signed-off-by: Jonsy13 <vedant.shrotria@chaosnative.com> * Fixed versioning issue in imports. Signed-off-by: Jonsy13 <vedant.shrotria@chaosnative.com> Co-authored-by: Amit Kumar Das <amit@chaosnative.com> Co-authored-by: Jonsy13 <vedant.shrotria@chaosnative.com>
2021-06-30 13:14:43 +05:30 · 2021-06-30 13:14:43 +05:30 · e402a573b6
parent 2fea2dbbc7
commit e402a573b6
105 changed files with 16617 additions and 273 deletions
--- a/.wordlist.txt
+++ b/.wordlist.txt
@ -1,4 +1,8 @@
 mongodb
+jsx
+src
+img
+png
 eventtracker
 eventtrackerpolicies
 portalScope
--- a/website/.prettierrc
+++ b/website/.prettierrc
@ -0,0 +1,12 @@
+
+{
+	"printWidth": 120,
+	"useTabs": true,
+	"trailingComma": "none",
+	"bracketSpacing": true,
+	"tabWidth": 2,
+	"semi": false,
+	"singleQuote": true,
+	"jsxBracketSameLine": true,
+	"arrowParens": "always"
+}
--- a/website/docs/assets/arrow.png
+++ b/website/docs/assets/arrow.png
--- a/website/docs/assets/chaos-hub.png
+++ b/website/docs/assets/chaos-hub.png
--- a/website/docs/assets/tutorials.png
+++ b/website/docs/assets/tutorials.png
--- a/website/docs/chaos-hub.md
+++ b/website/docs/chaos-hub.md
@ -0,0 +1,9 @@
+---
+id: chaos-hub
+title: ChaosHub
+sidebar_label: ChaosHub
+---
+
+import {ChaosHub} from '@site/src/components/section/ChaosHub/ChaosHub.jsx'
+
+<ChaosHub/>
--- a/website/docs/tutorials.md
+++ b/website/docs/tutorials.md
@ -0,0 +1,13 @@
+---
+id: tutorials
+title: Tutorials
+sidebar_label: Tutorials
+---
+
+import {Tutorials} from '@site/src/components/tutorials/Tutorials/Tutorials.jsx'
+
+The tutorials help you to quickly learn some of the standard day-0 to day-n flows associated with the LitmusChaos framework (and Chaos Engineering in general). Each tutorial is created with a definitive objective. If you believe the objective is not met, please create issues on the Github repository stating what is missing.
+
+---
+
+<Tutorials/>
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@ -1,136 +1,143 @@
-const versions = require("./versions.json");
+const versions = require('./versions.json')
 const communities = [
-  {
-    label: "Slack",
-    href: "https://app.slack.com/client/T09NY5SBT/CNXNB0ZTN",
-  },
-  {
-    label: "GitHub",
-    href: "https://github.com/litmuschaos",
-  },
-  {
-    label: "Twitter",
-    href: "https://twitter.com/LitmusChaos",
-  },
-  {
-    label: "Blog",
-    href: "https://dev.to/t/litmuschaos/latest",
-  },
-  {
-    label: "YouTube",
-    href: "https://www.youtube.com/channel/UCa57PMqmz_j0wnteRa9nCaw ",
-  },
-];
+	{
+		label: 'Slack',
+		href: 'https://app.slack.com/client/T09NY5SBT/CNXNB0ZTN'
+	},
+	{
+		label: 'GitHub',
+		href: 'https://github.com/litmuschaos'
+	},
+	{
+		label: 'Twitter',
+		href: 'https://twitter.com/LitmusChaos'
+	},
+	{
+		label: 'Blog',
+		href: 'https://dev.to/t/litmuschaos/latest'
+	},
+	{
+		label: 'YouTube',
+		href: 'https://www.youtube.com/channel/UCa57PMqmz_j0wnteRa9nCaw '
+	}
+]

 const resources = [
-  {
-    label: "Docs",
-    href: "https://docs.litmuschaos.io/",
-  },
-  {
-    label: "FAQ",
-    href: "https://docs.litmuschaos.io/docs/faq-general/",
-  },
-  {
-    label: "Issues",
-    href: "https://github.com/litmuschaos/litmus/issues",
-  },
-];
+	{
+		label: 'Docs',
+		href: 'https://docs.litmuschaos.io/'
+	},
+	{
+		label: 'FAQ',
+		href: 'https://docs.litmuschaos.io/docs/faq-general/'
+	},
+	{
+		label: 'Issues',
+		href: 'https://github.com/litmuschaos/litmus/issues'
+	}
+]

 module.exports = {
-  title: "Litmus Docs",
-  tagline: "A website for testing",
-  url: "https://litmusdocs.netlify.app",
-  baseUrl: "/",
-  onBrokenLinks: "throw",
-  favicon: "img/favicon.ico",
-  organizationName: "litmuschaos",
-  projectName: "litmus",
-  themeConfig: {
-    navbar: {
-      title: "Litmus Docs",
-      logo: {
-        alt: "Litmus Logo",
-        srcDark: "img/litmus-icon.svg",
-        src: "img/litmus-light-icon.svg",
-      },
-      items: [
-        {
-          type: "docsVersion",
-          position: "right",
-        },
-        {
-          activeBasePath: "Version",
-          label: "Versions",
-          position: "left",
-          items: [
-            // adding items will create a dropdown
-            {
-              label: versions[0],
-              to: "docs/",
-              activeBaseRegex: `docs/(?!${versions.join("|")}|next)`,
-            },
-            ...versions.slice(1).map((version) => ({
-              label: version,
-              to: `docs/${version}/getstarted`,
-            })),
-            {
-              label: "Master/Unreleased",
-              to: "docs/next/introduction",
-            },
-          ],
-        },
-        {
-          href: "https://github.com/litmuschaos/litmus",
-          label: "GitHub",
-          position: "right",
-        },
-        {
-          href: "https://app.slack.com/client/T09NY5SBT/CNXNB0ZTN",
-          label: "Slack",
-          position: "right",
-        },
-        {
-          href: "https://hub.litmuschaos.io/",
-          label: "Chaos Hub",
-          position: "right",
-        },
-      ],
-    },
-    footer: {
-      style: "dark",
-      logo: {
-        alt: "Litmus Logo",
-        src: "img/litmus-logo-dark-bg-icon.svg",
-      },
-      links: [
-        {
-          title: "Community",
-          items: communities,
-        },
-        {
-          title: "Resources",
-          items: resources,
-        },
-      ],
-      copyright: `Copyright © ${new Date().getFullYear()} LitmusChaos Authors. All rights reserved.`,
-    },
-    hideableSidebar: true,
-  },
-  presets: [
-    [
-      "@docusaurus/preset-classic",
-      {
-        docs: {
-          sidebarPath: require.resolve("./sidebars.js"),
-          editUrl:
-            "https://github.com/litmuschaos/litmus-docs-beta/edit/staging/",
-          showLastUpdateTime: true,
-        },
-        theme: {
-          customCss: require.resolve("./src/css/custom.css"),
-        },
-      },
-    ],
-  ],
-};
+	title: 'Litmus Docs',
+	tagline: 'A website for testing',
+	url: 'https://litmusdocs.netlify.app',
+	baseUrl: '/',
+	onBrokenLinks: 'throw',
+	favicon: 'img/favicon.ico',
+	organizationName: 'litmuschaos',
+	projectName: 'litmus',
+	themeConfig: {
+		navbar: {
+			title: 'Litmus Docs',
+			logo: {
+				alt: 'Litmus Logo',
+				srcDark: 'img/litmus-icon.svg',
+				src: 'img/litmus-light-icon.svg'
+			},
+			items: [
+				{
+					type: 'docsVersion',
+					position: 'right'
+				},
+				{
+					activeBasePath: 'Version',
+					label: 'Versions',
+					position: 'left',
+					items: [
+						// adding items will create a dropdown
+						{
+							label: versions[0],
+							to: 'docs/',
+							activeBaseRegex: `docs/(?!${versions.join('|')}|next)`
+						},
+						...versions.slice(1).map((version) => ({
+							label: version,
+							to: `docs/${version}/getstarted`
+						})),
+						{
+							label: 'Master/Unreleased',
+							to: 'docs/next/introduction'
+						}
+					]
+				},
+				{
+					href: 'https://github.com/litmuschaos/litmus',
+					label: 'GitHub',
+					position: 'right'
+				},
+				{
+					href: 'https://app.slack.com/client/T09NY5SBT/CNXNB0ZTN',
+					label: 'Slack',
+					position: 'right'
+				},
+				{
+					href: 'https://hub.litmuschaos.io/',
+					label: 'Chaos Hub',
+					position: 'right'
+				}
+			]
+		},
+		colorMode: {
+			// "light" | "dark"
+			defaultMode: 'light',
+
+			// Hides the switch in the navbar
+			// Useful if you want to support a single color mode
+			disableSwitch: true
+		},
+		footer: {
+			style: 'dark',
+			logo: {
+				alt: 'Litmus Logo',
+				src: 'img/litmus-logo-dark-bg-icon.svg'
+			},
+			links: [
+				{
+					title: 'Community',
+					items: communities
+				},
+				{
+					title: 'Resources',
+					items: resources
+				}
+			],
+			copyright: `Copyright © ${new Date().getFullYear()} LitmusChaos Authors. All rights reserved.`
+		},
+		hideableSidebar: true
+	},
+	presets: [
+		[
+			'@docusaurus/preset-classic',
+			{
+				docs: {
+					sidebarPath: require.resolve('./sidebars.js'),
+					editUrl: 'https://github.com/litmuschaos/litmus-docs-beta/edit/staging/',
+					showLastUpdateTime: true
+				},
+				theme: {
+					customCss: require.resolve('./src/css/global.css')
+				}
+			}
+		]
+	]
+}
--- a/website/package-lock.json
+++ b/website/package-lock.json
--- a/website/package.json
+++ b/website/package.json
@ -1,6 +1,6 @@
 {
-  "name": "website",
-  "version": "0.0.0",
+  "name": "litmus-docs2.0",
+  "version": "0.1.0",
  "private": true,
  "scripts": {
    "docusaurus": "docusaurus",
--- a/website/sidebars.js
+++ b/website/sidebars.js
@ -1,49 +1,56 @@
 module.exports = {
-  docs: {
-    Introduction: [
-      "introduction",
-      "architecture",
-      // "feature-definition"
-    ],
-    "Getting Started": [
-      "getstarted",
-      {
-	      "Installation" : [ "litmus-install-cluster-mode", "litmus-install-namespace-mode", "agent-install", "litmus-with-ingress"],
-      },
-      "create-workflow",
-      "observe-workflow",
-      {
-        Uninstallation: ["agent-uninstall", "litmus-uninstall"],
-      },
-    ],
-    "User Guide": [
-      {
-        "Day 0": ["d0-create", "d0-observe"],
-      },
-      {
-        "Day 1": ["d1-schedule", "d1-update", "settings"],
-      },
-      {
-        "Day 2": ["myhub", "gitops", "probes"],
-      },
-    ],
-    //    Features: [
-    //    "gitops",
-    //  "settings",
-    // "myhub",
-    // "settings",
-    // "analytics",
-    // "myhub",
-    // "external-agents"
-    //],
-    //Concepts: [
-      //"probes",
-      //   "cross-cloud-control",
-      //   "litmusctl",
-      // "crds",
-      //   "rbac",
-      //   "service-acounts",
-   // ],
-    Advanced: ["litmus-psp", "k8s-support"],
-  },
-};
+	docs: {
+		Introduction: [
+			'introduction',
+			'architecture',
+			'tutorials',
+			'chaos-hub'
+			// "feature-definition"
+		],
+		'Getting Started': [
+			'getstarted',
+			{
+				Installation: [
+					'litmus-install-cluster-mode',
+					'litmus-install-namespace-mode',
+					'agent-install',
+					'litmus-with-ingress'
+				]
+			},
+			'create-workflow',
+			'observe-workflow',
+			{
+				Uninstallation: ['agent-uninstall', 'litmus-uninstall']
+			}
+		],
+		'User Guide': [
+			{
+				'Day 0': ['d0-create', 'd0-observe']
+			},
+			{
+				'Day 1': ['d1-schedule', 'd1-update', 'settings']
+			},
+			{
+				'Day 2': ['myhub', 'gitops', 'probes']
+			}
+		],
+		//    Features: [
+		//    "gitops",
+		//  "settings",
+		// "myhub",
+		// "settings",
+		// "analytics",
+		// "myhub",
+		// "external-agents"
+		//],
+		//Concepts: [
+		//"probes",
+		//   "cross-cloud-control",
+		//   "litmusctl",
+		// "crds",
+		//   "rbac",
+		//   "service-acounts",
+		// ],
+		Advanced: ['litmus-psp', 'k8s-support']
+	}
+}
--- a/website/src/components/docs/code.jsx
+++ b/website/src/components/docs/code.jsx
@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import Highlight, { defaultProps } from 'prism-react-renderer'
+import theme from 'prism-react-renderer/themes/nightOwl'
+
+import '../../css/docs.css'
+
+export const CodeBlock = ({ type, code, title }) => {
+	// copyToClipboard(e) {
+	// 	const el = e.target.parentElement.nextElementSibling
+	// 	el.focus()
+	// 	let range = document.createRange()
+	// 	try {
+	// 		range.selectNode(el)
+	// 		const sel = window.getSelection()
+	// 		sel.removeAllRanges()
+	// 		sel.addRange(range)
+	// 		document.execCommand('copy')
+	// 		if (sel.removeRange) {
+	// 			sel.removeRange(range)
+	// 		} else {
+	// 			sel.removeAllRanges()
+	// 		}
+	// 	} catch (err) {
+	// 		console.error('Copy to Clipboar Error:', err)
+	// 	}
+	// }
+
+	// render() {
+	// 	const { title, type } = this.props
+	// 	const code = this.props.code || ''
+
+	return (
+		<div className="code">
+			<div className="titleGroup">
+				<img src="../../../static/img/code_block_header.svg" alt="hii" />
+				<div className="title">Terminal</div>
+
+				<button className="copyBtn">
+					<img src="../../../static/img/copy.svg" alt="hii" />
+				</button>
+			</div>
+			<div className="coding">
+				<Highlight {...defaultProps} className="line-numbers" theme={theme} code={code.trim()} language={type || 'js'}>
+					{({ className, style, tokens, getLineProps, getTokenProps }) => (
+						<pre className="line-numbers">
+							{tokens.map((line, i) => (
+								<div {...getLineProps({ line, key: i })}>
+									{line.map((token, key) => (
+										<span {...getTokenProps({ token, key })} />
+									))}
+								</div>
+							))}
+						</pre>
+					)}
+				</Highlight>
+			</div>
+		</div>
+	)
+}
+
+// }
--- a/website/src/components/docs/index.js
+++ b/website/src/components/docs/index.js
@ -0,0 +1 @@
+export * from './code.jsx'
--- a/website/src/components/layout/Flex.jsx
+++ b/website/src/components/layout/Flex.jsx
@ -0,0 +1,12 @@
+import React from 'react';
+import '../../css/flex.css';
+
+const Row = ({children, flexWrap, justifyContent}) => <span className="row" style={{justifyContent: `${justifyContent ?? 'flex-start'}`, flexWrap: `${flexWrap ?? 'no-wrap'}`}}>{children}</span>;
+
+const Column = ({children}) => <div className="column">{children}</div>;
+
+const ColumnCenter = ({children}) => <div className="columnCenter">{children}</div>;
+
+const Center = ({children}) => <div className="center">{children}</div>;
+
+export { Row, Column, ColumnCenter, Center };
--- a/website/src/components/layout/ResponsiveRow.jsx
+++ b/website/src/components/layout/ResponsiveRow.jsx
@ -0,0 +1,6 @@
+import React from 'react';
+import '../../css/responsiveRow.css';
+
+const ResponsiveRow = ({ children }) => <div className="responsiveRow">{children}</div>;
+
+export { ResponsiveRow };
--- a/website/src/components/layout/Sections.jsx
+++ b/website/src/components/layout/Sections.jsx
@ -0,0 +1,8 @@
+import React from 'react';
+import '../../css/sections.css';
+
+const SectionLight = ({children}) => <div className="sectionLight">{children}</div>
+
+const SectionDark = ({children}) => <div className="sectionDark">{children}</div>
+
+export { SectionLight, SectionDark };
--- a/website/src/components/layout/index.js
+++ b/website/src/components/layout/index.js
@ -0,0 +1,4 @@
+export * from "./Flex";
+export * from "./ResponsiveRow";
+export * from "./Sections";
+
--- a/website/src/components/link/Link.jsx
+++ b/website/src/components/link/Link.jsx
@ -0,0 +1,6 @@
+import React from 'react';
+import '../../css/link.css';
+
+const Link = ({children, to}) => <a href={to} className="link">{children}</a>;
+
+export { Link };
--- a/website/src/components/link/tests/snapshots/link.test.tsx.snap
+++ b/website/src/components/link/tests/snapshots/link.test.tsx.snap
@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <a
+    class="sc-bdfBwQ eJKuX"
+    href="/home"
+  >
+    Home
+  </a>
+</DocumentFragment>
+`;
--- a/website/src/components/link/tests/link.test.tsx
+++ b/website/src/components/link/tests/link.test.tsx
@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import { Link } from "../Link";
+
+it("matches snapshot", () => {
+  const { asFragment } = render(<Link to="/home">Home</Link>);
+  expect(asFragment()).toMatchSnapshot();
+});
--- a/website/src/components/link/index.js
+++ b/website/src/components/link/index.js
@ -0,0 +1 @@
+export * from "./Link";
--- a/website/src/components/pre-footer/PreFooter.jsx
+++ b/website/src/components/pre-footer/PreFooter.jsx
@ -0,0 +1,7 @@
+import React from 'react'
+import { PreFooterTop } from './PreFooterTop'
+
+const PreFooter = () => {
+	return <PreFooterTop />
+}
+export { PreFooter }
--- a/website/src/components/pre-footer/PreFooterTop.jsx
+++ b/website/src/components/pre-footer/PreFooterTop.jsx
@ -0,0 +1,50 @@
+import React from 'react'
+import { Button } from '../button'
+import '../../css/home.css'
+import { Center } from '../layout'
+import { Paragraph, SubHeading } from '../texts'
+
+const PreFooterTop = () => {
+	return (
+		<div className="footerDiv">
+			<div style={{ width: 360 }}>
+				<Center>
+					<div>
+						<SubHeading>Do you like our Litmus Docs ?</SubHeading>
+						<Paragraph style={{ margin: '1rem 0' }}>
+							We are always trying to improve our docs. If you like the documentation we would want you to become our
+							stargazer.
+						</Paragraph>
+						<br />
+						<a href="https://docs.litmuschaos.io/docs/getstarted/" className="preFooterButton">
+							<img
+								src="img/Socials/github-white.svg"
+								alt="github white"
+								width="30"
+								height="30"
+								style={{ marginRight: 10 }}
+							/>
+							Become our stargazer
+						</a>
+					</div>
+				</Center>
+			</div>
+
+			<div className="preFooterRight">
+				<img src="img/chaos-bird.png" alt="chaos-bird-litmus" width="190" height="152" />
+				<div className="cncfDiv">
+					<img src="img/cncf-color.svg" alt="CNCF Logo" width="280" />
+					<p textAlign="center" className="cncfText">
+						We are a{' '}
+						<a rel="noopener noreferrer" target="_blank" href="https://www.cncf.io/" className="cncfLink">
+							CNCF
+						</a>{' '}
+						sandbox project
+					</p>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export { PreFooterTop }
--- a/website/src/components/pre-footer/data.js
+++ b/website/src/components/pre-footer/data.js
@ -0,0 +1,67 @@
+const top_adopters = {
+  title: "Top Adopters",
+  links: [
+    {
+      name: "VMware",
+      image: "/svg/vmware.png",
+    },
+    {
+      name: "RedHat",
+      image: "/svg/redhat.png",
+    },
+    {
+      name: "Intuit",
+      image: "/svg/intuit.png",
+    },
+    {
+      name: "Okteto",
+      image: "/svg/Okteto.svg",
+    },
+    {
+      name: "NetApp",
+      image: "/svg/netapp.svg",
+    },
+    {
+      name: "Wipro",
+      image: "/svg/Wipro.svg",
+    },
+    {
+      name: "Keptn",
+      image: "/svg/keptn.svg",
+    },
+    {
+      name: "Open EBS",
+      image: "/svg/openEBS.png",
+    },
+    {
+      name: "WeScale",
+      image: "/svg/weScale.png",
+    },
+    {
+      name: "Kublr",
+      image: "/svg/kublr.png",
+    },
+    {
+      name: "Zebrium",
+      image: "/svg/Zebrium.svg",
+    },
+    {
+      name: "Orange",
+      image: "/svg/Orange.jpeg",
+    },
+    {
+      name: "Kube Flare",
+      image: "/svg/KubeFlare.png",
+    },
+    {
+      name: "Anuta Networks",
+      image: "/svg/AnutaNetworks.png",
+    },
+    {
+      name: "Kitopi",
+      image: "/svg/Kitopi.png",
+    }
+  ],
+};
+
+export { top_adopters };
--- a/website/src/components/pre-footer/index.js
+++ b/website/src/components/pre-footer/index.js
@ -0,0 +1 @@
+export * from "./PreFooter";
--- a/website/src/components/section/404/index.js
+++ b/website/src/components/section/404/index.js
@ -0,0 +1,27 @@
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import React from 'react'
+import '../../../css/404.css'
+import { ResponsiveRow } from '../../layout'
+import { Paragraph, Heading } from '../../texts'
+
+const UnderConstructionContent = () => (
+	<div className="left">
+		<Heading fontWeight="bold">Page Under Construction</Heading>
+		<Paragraph className="spacing">Will be available soon. Stay tuned for updates</Paragraph>
+	</div>
+)
+
+const UnderConstructionHeader = () => {
+	return (
+		<ResponsiveRow>
+			<UnderConstructionContent />
+			<img
+				className="underConstructionImage"
+				src={useBaseUrl('/img/under-construction.png')}
+				alt="Under_Construction Image"
+			/>
+		</ResponsiveRow>
+	)
+}
+
+export { UnderConstructionHeader }
--- a/website/src/components/section/ChaosHub/ChaosHub.jsx
+++ b/website/src/components/section/ChaosHub/ChaosHub.jsx
@ -0,0 +1,36 @@
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import React from 'react'
+import '../../../css/home.css'
+
+const ChaosHub = () => {
+	return (
+		<div>
+			<p className="chaosHubHeader">Litmus ChaosHub hosts chaos experiments for Kubernetes</p>
+			<div className="chaosHubDiv">
+				<div className="chaosHubInfo">
+					<h3>Chaos Experiments for Kubernetes</h3>
+					<p className="chaosHubDescription">
+						Use Litmus ChaosHub to use and tune the predefined experiemnts ready to be used for workflow creations.
+					</p>
+					<a href="http://hub.litmuschaos.io/" target="_blank">
+						<div className="chaosHubExplore">
+							<p className="chaosHubExploreText">Explore the experiments at Chaoshub</p>
+							<img
+								src={useBaseUrl("/img/arrow.png")}								
+								alt="Chaos hub"
+								height="14"
+								width="7"
+								className="chaosHubImage"
+							/>
+						</div>
+					</a>
+				</div>
+				<div>
+					<img src={useBaseUrl("/img/chaos-hub.png")} alt="Chaos hub" />
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export { ChaosHub }
--- a/website/src/components/section/Home/ExploreLitmus.jsx
+++ b/website/src/components/section/Home/ExploreLitmus.jsx
@ -0,0 +1,48 @@
+import React from 'react'
+import { Link } from '../../../components/link'
+import { Paragraph, SubHeading } from '../../../components/texts'
+import '../../../css/home.css'
+import { advancedLitmusData, exploreLitmusData } from './data'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+
+const ExploreLitmus = ({ type }) => {
+	return (
+		<>
+			{type === 'basic' ? (
+				<div style={{ marginTop: '3rem' }}>
+					<SubHeading>Explore using Litmus</SubHeading>
+					<div className="grid">
+						{exploreLitmusData.map((exploreData) => (
+							<div className="exploreLitmusDiv">
+								<img src={useBaseUrl(exploreData.icon)} alt={exploreData.icon} />
+								<br />
+								<Link className="subHeading" to={exploreData.url}>
+									{exploreData.heading}
+								</Link>
+								<Paragraph>{exploreData.description}</Paragraph>
+							</div>
+						))}
+					</div>
+				</div>
+			) : (
+				<div style={{ marginTop: '5rem' }}>
+					<SubHeading>Litmus for Advanced Users</SubHeading>
+					<div className="grid">
+						{advancedLitmusData.map((exploreData) => (
+							<div className="exploreLitmusDiv">
+								<img src={useBaseUrl(exploreData.icon)} alt={exploreData.icon} />
+								<br />
+								<Link className="subHeading" to={exploreData.url}>
+									{exploreData.heading}
+								</Link>
+								<Paragraph>{exploreData.description}</Paragraph>
+							</div>
+						))}
+					</div>
+				</div>
+			)}
+		</>
+	)
+}
+
+export { ExploreLitmus }
--- a/website/src/components/section/Home/GetStartedHeader.jsx
+++ b/website/src/components/section/Home/GetStartedHeader.jsx
@ -0,0 +1,33 @@
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import React from 'react'
+import '../../../css/home.css'
+import { ResponsiveRow, Row } from '../../layout'
+import { Link } from '../../link'
+import { Paragraph, SubHeading } from '../../texts'
+
+const GetStartedContent = () => (
+	<div className="right">
+		<SubHeading>Getting Started</SubHeading>
+		<Paragraph className="spacing">
+			Litmus is used by devs & SREs alike to create, manage and monitor chaos workflows by extending Kubernetes
+			itself. Find everything that you need for creating and running chaos workflows on and around Kubernetes.
+		</Paragraph>
+		<br />		
+		<Row>
+			<Link to={'/docs/'}>Get Started with Litmus</Link>
+			<img style={{marginLeft: '1rem'}} src={useBaseUrl("/img/arrow.png")} alt="Arrow" />
+		</Row>
+	</div>
+	)
+
+
+const GetStartedHeader = () => {
+	return (
+		<ResponsiveRow>			
+			<img className="getStartedImage" src={useBaseUrl("/img/header-2.png")} alt="Get_Started Image" />
+			<GetStartedContent />
+		</ResponsiveRow>
+	)
+}
+
+export { GetStartedHeader }
--- a/website/src/components/section/Home/Header.jsx
+++ b/website/src/components/section/Home/Header.jsx
@ -0,0 +1,30 @@
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import React from 'react'
+import '../../../css/home.css'
+import { ResponsiveRow } from '../../layout'
+import { Heading, Paragraph, SubText } from '../../texts'
+
+const Header = () => {
+	return (
+		<ResponsiveRow>
+			<div className="left">
+				<Heading fontWeight="bold">
+					What is <span className="purple">Litmus Chaos</span> ?
+				</Heading>
+				<br />
+				<SubText className="spacing" fontWeight="bold" color="#1C1438">
+					Litmus is a control-plane to orchestrate chaos on Kubernetes to help developers and SREs find weaknesses in
+					their application deployments.
+				</SubText>
+				<br />
+				<Paragraph className="spacing">
+					Litmus is one of the most promising open source chaos engineering frameworks that takes into account proper
+					chaos engineering principles while providing autonomy and extensibility to the users.
+				</Paragraph>
+			</div>
+			<img className="headerImage" src={useBaseUrl('/img/header.png')} alt="Header Image" />
+		</ResponsiveRow>
+	)
+}
+
+export { Header }
--- a/website/src/components/section/Home/MoreResources.jsx
+++ b/website/src/components/section/Home/MoreResources.jsx
@ -0,0 +1,28 @@
+import React from 'react'
+import { Link } from '../../../components/link'
+import '../../../css/home.css'
+import { Paragraph, SubHeading } from '../../texts'
+import { moreResources } from './data'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+
+const MoreResources = () => {
+	return (
+		<div style={{ marginTop: '3rem' }}>
+			<SubHeading>More Resources</SubHeading>
+
+			<div className="grid" style={{ marginTop: 20 }}>
+				{moreResources.map((exploreData) => (
+					<div style={{ display: 'flex' }}>
+						<img src={useBaseUrl(exploreData.icon)} alt={exploreData.icon} />
+						<div className="subHeading" style={{ marginLeft: 10 }}>
+							<Link to={exploreData.url}>{exploreData.heading}</Link>
+							<Paragraph>{exploreData.description}</Paragraph>
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	)
+}
+
+export { MoreResources }
--- a/website/src/components/section/Home/data.js
+++ b/website/src/components/section/Home/data.js
@ -0,0 +1,98 @@
+export const exploreLitmusData = [
+	{
+		icon: 'img/getting-started.svg',
+		heading: 'Getting Started',
+		description: 'Get up and running with installing Litmus and creating workflows to test resiliency.',
+		url: '/docs/'
+	},
+	{
+		icon: 'img/tutorials.svg',
+		heading: 'Tutorials',
+		description: 'Get hands on learning to use Litmus with Katkoda and Codelabs',
+		url: '/docs/next/tutorials'
+	},
+	{
+		icon: 'img/chaos-hub.svg',
+		heading: 'Chaos Hub',
+		description: 'GA shop for thousands of pre defined workflows and experiements to be used.',
+		url: '/docs/next/chaos-hub'
+	},
+	{
+		icon: 'img/advantages.svg',
+		heading: 'Litmus 2.0 Advantages',
+		description: 'The new Litmus is better and easier to use than Litmus 1.0 . Know here about Litmus 2.0',
+		url: '/docs/next/introduction#litmus-20-prologue'
+	}
+]
+
+export const advancedLitmusData = [
+	{
+		icon: 'img/AdvanceLitmus/advanced.svg',
+		heading: 'Advanced User Guides',
+		description: 'Learn about Litmus containing the user guide and architecture.',
+		url: '/404'
+	},
+	{
+		icon: 'img/AdvanceLitmus/design.svg',
+		heading: 'Design & Architecture',
+		description: 'Know in depth details of the LitmusChaos architecture used for testing resiliency of system.',
+		url: '/docs/architecture'
+	},
+	{
+		icon: 'img/AdvanceLitmus/observability.svg',
+		heading: 'Observability',
+		description: 'The next big thing in Chaos Engineering and know how we can utilise this with Litmus.',
+		url: '/docs/observe-workflow'
+	},
+	{
+		icon: 'img/AdvanceLitmus/dev-resource.svg',
+		heading: 'Developer Resources',
+		description: 'Resources for Chaos Engineering, blogs and community updates.',
+		url: '/404'
+	},
+	{
+		icon: 'img/AdvanceLitmus/integration.svg',
+		heading: 'Integrations',
+		description: 'Integrate your litmus project with other Kubenetes applications.',
+		url: '/404'
+	},
+	{
+		icon: 'img/AdvanceLitmus/air-gapped.svg',
+		heading: 'Air Gapped',
+		description: 'Know how Litmus can be used for air gapped environments and enterprises.',
+		url: '/404'
+	},
+	{
+		icon: 'img/AdvanceLitmus/git-ops.svg',
+		heading: 'GitOps',
+		description: 'Enabling GitOps is what makes Litmus stand out from rest. Know how.',
+		url: '/docs/gitops'
+	},
+	{
+		icon: 'img/AdvanceLitmus/multi-tenancy.svg',
+		heading: 'Multi Tenancy',
+		description: 'Litmus security features are one of the best thing and can not be overlooked.',
+		url: '/404'
+	}
+]
+
+export const moreResources = [
+	{
+		heading: 'Glossary',
+		description: 'All Litmus and chaos engineering terms and explanations in one place.',
+		icon: 'img/Resources/glossary.svg',
+		url: '/404'
+	},
+	{
+		heading: 'FAQs',
+		description: 'All common Frequently Asked Questions curated in one place',
+		icon: 'img/Resources/FAQs.svg',
+		url: '/404'
+	},
+	{
+		heading: 'Troubleshooting',
+		description: 'Know more about troubleshooting of common issues',
+		icon: 'img/Resources/troubleshooting.svg',
+		url: '/404'
+	}
+]
--- a/website/src/components/section/Home/index.js
+++ b/website/src/components/section/Home/index.js
@ -0,0 +1,3 @@
+export * from './ExploreLitmus';
+export * from './Header';
+
--- a/website/src/components/texts/Texts.jsx
+++ b/website/src/components/texts/Texts.jsx
@ -0,0 +1,17 @@
+import React from "react";
+import '../../css/texts.css';
+
+const Heading = ({children, fontWeight}) => <p style={{fontWeight: `${fontWeight ?? 'normal'}`}} className="heading">{children}</p>
+
+const SubHeading = ({children, textAlign}) => <p style={{textAlign: `${textAlign ?? 'left'}`}} className="subheading">{children}</p>
+
+const Paragraph = ({children, textAlign}) => <p style={{textAlign: `${textAlign ?? 'left'}`}} className="paragraph">{children}</p>
+
+const SubText = ({children, textAlign, color, fontWeight}) => <p style={{textAlign: `${textAlign ?? 'left'}`, color: `${color}`, fontWeight: `${fontWeight ?? 'normal'}`}} className="paragraph">{children}</p>
+
+export {
+  Heading,
+  SubHeading,
+  Paragraph,
+  SubText
+};
--- a/website/src/components/texts/index.js
+++ b/website/src/components/texts/index.js
@ -0,0 +1 @@
+export * from "./Texts";
--- a/website/src/components/tutorials/TutorialCard/TutorialCard.jsx
+++ b/website/src/components/tutorials/TutorialCard/TutorialCard.jsx
@ -0,0 +1,25 @@
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import React from 'react'
+import '../../../css/home.css'
+
+const TutorialCard = ({ props }) => {
+	return (
+		<div className="tutorialCardDiv">
+			<a href={props.link} className="tutorialLink">
+				<img src={useBaseUrl(props.image)} />
+				<div className="cardContent">
+					<p className="cardHeading">{props.heading}</p>
+					<p className="cardDescription">{props.description}</p>
+					{!props.isAvailable ? (
+						<div className="tutorialAvailable">
+							<p className="comingSoon">Coming soon</p>
+						</div>
+					) : (
+						<></>
+					)}
+				</div>
+			</a>
+		</div>
+	)
+}
+export { TutorialCard }
--- a/website/src/components/tutorials/Tutorials/Tutorials.jsx
+++ b/website/src/components/tutorials/Tutorials/Tutorials.jsx
@ -0,0 +1,15 @@
+import React from 'react'
+import '../../../css/home.css'
+import { TutorialData } from '../data'
+import { TutorialCard } from '../TutorialCard/TutorialCard'
+
+const Tutorials = () => {
+	return (
+		<div className="tutorialContainer">
+			{TutorialData.map((tutorials) => (
+				<TutorialCard props={tutorials} />
+			))}
+		</div>
+	)
+}
+export { Tutorials }
--- a/website/src/components/tutorials/data.js
+++ b/website/src/components/tutorials/data.js
@ -0,0 +1,45 @@
+export const TutorialData = [
+	{
+		heading: 'LitmusChaos: Getting Started',
+		description: 'Installation of Litmus, Portal Set Up, Chaos Execution with Podtato Head Chaos',
+		image: '/img/Tutorials/get-started.png',
+		isAvailable: true,
+		link: 'https://litmuschaos.github.io/tutorials/tutorial-getting-started/index.html#0'
+	},
+	{
+		heading: 'Creating Custom Chaos Workflows',
+		description: 'Usage MyHub and Asset Discovery to create Custom Workflows',
+		image: '/img//Tutorials/custom-chaos.png',
+		isAvailable: false
+	},
+	{
+		heading: 'Running Chaos Workflows On Remote Clusters',
+		description: 'Usage MyHub and Asset Discovery to create Custom Workflows',
+		image: '/img/Tutorials/remote-cluster.png',
+		isAvailable: false
+	},
+	{
+		heading: 'Defining Steady-State Hypothesis',
+		description: 'Usage of Litmus Probes to Create Constraints for Experiment Success',
+		image: '/img/Tutorials/probes.png',
+		isAvailable: false
+	},
+	{
+		heading: 'Observing Chaos Impact On Services',
+		description: 'Instrument Grafana Dashboards with LitmusChaos Prometheus Metrics',
+		image: '/img/Tutorials/monitoring.png',
+		isAvailable: false
+	},
+	{
+		heading: 'Integrating with GitOps',
+		description: 'Usage of Git as Golden Copy for Chaos Workflows and Automated Trigger of Chaos',
+		image: '/img/Tutorials/gitops.png',
+		isAvailable: false
+	},
+	{
+		heading: 'Teaming in LitmusChaos',
+		description: 'Invite Team Members and Assign Roles in Chaos Project.',
+		image: '/img/Tutorials/teaming.png',
+		isAvailable: false
+	}
+]
--- a/website/src/css/404.css
+++ b/website/src/css/404.css
@ -0,0 +1,31 @@
+.spacing {
+  margin: auto;
+}
+
+.left {
+  width: 45%;
+  margin: auto;
+}
+
+.underConstructionImage {
+  width: 40%;
+}
+
+@media (min-width: 2000px) {
+  .left {
+    width: 30%;
+  }
+  .underConstructionImage {
+    width: 20%;
+  }
+}
+
+@media (max-width: 890px) {
+  .left {
+    width: 100%;
+  }
+  .underConstructionImage {
+    width: 20%;
+  }
+}
+/*# sourceMappingURL=404.css.map */
--- a/website/src/css/404.css.map
+++ b/website/src/css/404.css.map
@ -0,0 +1,11 @@
+{
+    "version": 3,
+    "mappings": "AAKA,AAAA,QAAQ,CAAC;EACR,MAAM,EAAE,IAAI;CACZ;;AAED,AAAA,KAAK,CAAC;EACL,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;CACZ;;AAED,AAAA,uBAAuB,CAAC;EACvB,KAAK,EAAE,GAAG;CACV;;AAED,MAAM,EAAE,SAAS,EAAE,MAAM;EACxB,AAAA,KAAK,CAAC;IACL,KAAK,EAAE,GAAG;GACV;EAED,AAAA,uBAAuB,CAAC;IACvB,KAAK,EAAE,GAAG;GACV;;;AAGF,MAAM,EAAE,SAAS,EAAE,KAAK;EACvB,AAAA,KAAK,CAAC;IACL,KAAK,EAAE,IAAI;GACX;EAED,AAAA,uBAAuB,CAAC;IACvB,KAAK,EAAE,GAAG;GACV",
+    "sources": [
+        "../scss/underConstruction/404.scss",
+        "../scss/_theme.scss",
+        "../scss/_mixin.scss"
+    ],
+    "names": [],
+    "file": "404.css"
+}
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@ -1,61 +0,0 @@
-/* stylelint-disable docusaurus/copyright-header */
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
-/* You can override the default Infima variables here. */
-:root {
-  --ifm-color-primary: #3578e5;
-  --ifm-color-primary-dark: #1d68e1;
-  --ifm-color-primary-darker: #1b62d4;
-  --ifm-color-primary-darkest: #1751af;
-  --ifm-color-primary-light: #4e89e8;
-  --ifm-color-primary-lighter: #5a91ea;
-  --ifm-color-primary-lightest: #80aaef;
-  --ifm-code-font-size: 95%;
-}
-
-.docusaurus-highlight-code-line {
-  background-color: rgb(72, 77, 91);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-/* your custom css */
-@media only screen and (max-width: 735px) {
-  .nav-footer .sitemap > div {
-    padding-right: 32px;
-    padding-left: 0;
-  }
-}
-
-@media only screen and (min-width: 735px) {
-  .nav-footer .sitemap > div {
-    padding: 0 32px;
-  }
-}
-
-.fixedHeaderContainer {
-  background: #23232a;
-}
-
-/* .fixedHeaderContainer header .headerTitleWithLogo { */
-/* font-size: 2em; */
-/* font-weight: 100; */
-/* } */
-
-.footerText {
-  text-align: left;
-  color: white;
-}
-
-.nav-footer .sitemap div:first-child {
-  flex-grow: 4;
-}
-
-.nav-footer .sitemap div:last-child {
-  padding-left: 0;
-}
--- a/website/src/css/docs.css
+++ b/website/src/css/docs.css
@ -0,0 +1,124 @@
+.code {
+  border-radius: 5px;
+  margin-bottom: 8em;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.code .titleGroup {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  width: 100%;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  color: #777288;
+  background: #16102d;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  padding: 0.75em 1.25em;
+  line-height: 0;
+}
+
+.code .titleGroup .title {
+  padding-left: 0.5rem;
+  justify-self: flex-start;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.code .titleGroup .copyBtn {
+  -ms-flex-item-align: end;
+      align-self: flex-end;
+  justify-self: flex-end;
+  background: #16102d;
+  border: none;
+  border-radius: 2px;
+}
+
+.code .coding {
+  padding: 1em 0.75em;
+  background: #2e225d;
+  overflow: auto;
+}
+
+.code .coding::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  opacity: 0;
+}
+
+.coding.coding.coding pre {
+  background: #2e225d;
+  background-size: 100% 4.5em;
+  border: none;
+  border-radius: 0;
+  font-family: monospace;
+  font-size: 1.3em;
+  line-height: 1.5;
+  padding-top: 0.6em;
+  margin-bottom: 0;
+  white-space: pre-wrap;
+}
+
+.code :global pre[class*='language-'].line-numbers {
+  position: relative;
+  padding-left: 3.8em;
+  counter-reset: linenumber;
+}
+
+.code :global pre[class*='language-'].line-numbers > code {
+  position: relative;
+  white-space: inherit;
+}
+
+.code :global .line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  font-size: 100%;
+  left: -3.8em;
+  width: 3em;
+  /* works for line-numbers below 1000 lines */
+  letter-spacing: -1px;
+  border-right: 1px solid #999;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.code :global .line-numbers-rows > span {
+  pointer-events: none;
+  display: block;
+  counter-increment: linenumber;
+}
+
+.code :global .line-numbers-rows > span:before {
+  content: counter(linenumber);
+  color: #999;
+  display: block;
+  padding-right: 0.8em;
+  text-align: right;
+}
+
+html[data-theme='dark'] .code.code {
+  background: #0f1315;
+}
+
+html[data-theme='dark'] .code.code .titleGroup {
+  background: #151b1e;
+}
+/*# sourceMappingURL=docs.css.map */
--- a/website/src/css/docs.css.map
+++ b/website/src/css/docs.css.map
@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "../scss/docs/docs.scss"
+    ],
+    "names": [],
+    "file": "docs.css"
+}
--- a/website/src/css/flex.css
+++ b/website/src/css/flex.css
@ -0,0 +1,43 @@
+.row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0;
+}
+
+.column {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: start;
+}
+
+.columnCenter {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.center {
+  display: -ms-grid;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+}
+/*# sourceMappingURL=flex.css.map */
--- a/website/src/css/flex.css.map
+++ b/website/src/css/flex.css.map
@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "AAAA,AAAA,IAAI,CAAC;EACD,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,CAAC;CACZ;;AAED,AAAA,OAAO,CAAC;EACJ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,KAAK;CACrB;;AAED,AAAA,aAAa,CAAC;EACV,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,MAAM;EACvB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CACf;;AAED,AAAA,OAAO,CAAC;EACJ,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CACf",
+    "sources": [
+        "../scss/components/flex.scss"
+    ],
+    "names": [],
+    "file": "flex.css"
+}
--- a/website/src/css/global.css
+++ b/website/src/css/global.css
@ -0,0 +1,55 @@
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
+
+html {
+  font-family: "Ubuntu", sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background: #f4f5f7;
+}
+
+a {
+  text-decoration: none;
+  color: #000;
+}
+
+/* SVGs font work differenly than normal HTML elements. So this rule is required. */
+svg,
+text {
+  font-family: Ubuntu !important;
+  font-weight: 300;
+}
+
+/* ScrollBar css */
+
+::-webkit-scrollbar {
+  width: 0.8rem;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #858cdd;
+  border-radius: 3rem;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #5b44ba;
+  cursor: pointer;
+}
+
+/* Text Selection Colours */
+
+::-moz-selection {
+  color: white;
+  background: #858cdd;
+}
+
+::selection {
+  color: white;
+  background: #858cdd;
+}
--- a/website/src/css/home.css
+++ b/website/src/css/home.css
@ -0,0 +1,230 @@
+.spacing {
+  margin: 1rem 0;
+}
+
+.grid {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: (minmax(15rem, 1fr))[auto-fit];
+      grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  grid-gap: 2rem;
+  row-gap: 1rem;
+}
+
+.subHeading {
+  padding: 0.5rem 0;
+}
+
+.left {
+  width: 45%;
+}
+
+.purple {
+  color: #5b44ba;
+}
+
+.headerImage {
+  width: 55%;
+}
+
+@media (min-width: 2000px) {
+  .left {
+    width: 30%;
+  }
+  .headerImage {
+    width: 35%;
+  }
+}
+
+@media (max-width: 890px) {
+  .left {
+    width: 100%;
+  }
+  .headerImage {
+    width: 100%;
+  }
+}
+
+.homeMainContent {
+  margin-bottom: 3rem;
+}
+
+.right {
+  width: 50%;
+  margin-top: 3rem;
+}
+
+.getStartedImage {
+  width: 40%;
+}
+
+@media (min-width: 2000px) {
+  .right {
+    width: 35%;
+  }
+  .getStartedImage {
+    width: 30%;
+  }
+}
+
+@media (max-width: 890px) {
+  .right {
+    width: 100%;
+  }
+  .getStartedImage {
+    width: 100%;
+  }
+}
+
+.exploreLitmusDiv {
+  height: 100%;
+  margin: 1rem 0;
+}
+
+.footerDiv {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  padding: 2% 20%;
+}
+
+.cncfDiv {
+  margin-top: 30px;
+}
+
+.cncfText {
+  font-size: 14px;
+  text-align: center;
+  margin-top: 20px;
+  color: #1c1438;
+}
+
+.cncfLink {
+  color: #5b44ba;
+}
+
+.preFooterRight {
+  width: 50%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.preFooterButton {
+  height: 3rem;
+  min-width: 10rem;
+  width: 18rem;
+  border: none;
+  background: linear-gradient(133.06deg, #7c6ac8 1.78%, #5b44ba 64.41%);
+  color: white;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  padding: 10px;
+}
+
+.preFooterButton :disabled {
+  background: lightgray;
+}
+
+.tutorialCardDiv {
+  width: 350px;
+  margin: 20px;
+  -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
+          box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+}
+
+.tutorialLink {
+  text-decoration: none;
+}
+
+.cardContent {
+  padding: 20px;
+}
+
+.cardHeading {
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.cardDescription {
+  color: #777288;
+}
+
+.tutorialAvailable {
+  padding: 6px 12px;
+  border-radius: 26px;
+  background-color: rgba(143, 150, 224, 0.25);
+  width: 100px;
+  margin-top: 11px;
+}
+
+.comingSoon {
+  font-size: 12px;
+  color: #5b44ba;
+}
+
+.tutorialContainer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+
+.chaosHubHeader {
+  font-size: 24px;
+  color: #777288;
+}
+
+.chaosHubDiv {
+  margin-top: 60px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.chaosHubInfo {
+  margin: auto;
+}
+
+.chaosHubDescription {
+  max-width: 600px;
+  margin-top: 20px;
+  color: #777288;
+}
+
+.chaosHubExplore {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-top: 20px;
+}
+
+.chaosHubExploreText {
+  color: #5b44ba;
+}
+
+.chaosHubImage {
+  margin-left: 5px;
+  margin-top: 5px;
+}
+/*# sourceMappingURL=home.css.map */
--- a/website/src/css/home.css.map
+++ b/website/src/css/home.css.map
@ -0,0 +1,11 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "../scss/home/home.scss",
+        "../scss/_theme.scss",
+        "../scss/_mixin.scss"
+    ],
+    "names": [],
+    "file": "home.css"
+}
--- a/website/src/css/link.css
+++ b/website/src/css/link.css
@ -0,0 +1,12 @@
+.link {
+  display: block;
+  color: #5b44ba;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.link:hover {
+  text-decoration: none;
+  list-style: none;
+}
+/*# sourceMappingURL=link.css.map */
--- a/website/src/css/link.css.map
+++ b/website/src/css/link.css.map
@ -0,0 +1,10 @@
+{
+    "version": 3,
+    "mappings": "AAEA,AAAA,KAAK,CAAC;EACF,OAAO,EAAE,KAAK;EACd,KAAK,ECuCS,OAAO;EDtCrB,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,OAAO;CAKlB;;AATD,AAKI,KALC,AAKA,MAAM,CAAC;EACJ,eAAe,EAAE,IAAI;EACrB,UAAU,EAAE,IAAI;CACnB",
+    "sources": [
+        "../scss/components/link.scss",
+        "../scss/_theme.scss"
+    ],
+    "names": [],
+    "file": "link.css"
+}
--- a/website/src/css/responsiveRow.css
+++ b/website/src/css/responsiveRow.css
@ -0,0 +1,23 @@
+.responsiveRow {
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+@media (max-width: 890px) {
+  .responsiveRow {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    text-align: center;
+  }
+}
+/*# sourceMappingURL=responsiveRow.css.map */
--- a/website/src/css/responsiveRow.css.map
+++ b/website/src/css/responsiveRow.css.map
@ -0,0 +1,10 @@
+{
+    "version": 3,
+    "mappings": "AAEA,AAAA,cAAc,CAAC;EACd,KAAK,EAAE,IAAI;EACR,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;CACjC;;AAED,MAAM,EAAE,SAAS,EAAE,KAAK;EACpB,AAAA,cAAc,CAAC;IACX,cAAc,EAAE,MAAM;IACtB,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,MAAM;GACrB",
+    "sources": [
+        "../scss/components/responsiveRow.scss",
+        "../scss/_theme.scss"
+    ],
+    "names": [],
+    "file": "responsiveRow.css"
+}
--- a/website/src/css/sections.css
+++ b/website/src/css/sections.css
@ -0,0 +1,35 @@
+.sectionLight {
+  background-color: #f9fafc;
+  padding: 3rem 2rem;
+}
+
+.sectionLight > div {
+  width: 70%;
+  margin: 0 auto;
+}
+
+.sectionDark {
+  background-color: #f4f5f7;
+  padding: 3rem 2rem;
+}
+
+.sectionDark > div {
+  width: 70%;
+  margin: 0 auto;
+}
+
+@media (max-width: 890px) {
+  .sectionLight {
+    padding: 1rem 10%;
+  }
+  .sectionLight > div {
+    width: 100%;
+  }
+  .sectionDark {
+    padding: 1rem 10%;
+  }
+  .sectionDark > div {
+    width: 100%;
+  }
+}
+/*# sourceMappingURL=sections.css.map */
--- a/website/src/css/sections.css.map
+++ b/website/src/css/sections.css.map
@ -0,0 +1,10 @@
+{
+    "version": 3,
+    "mappings": "AAEA,AAAA,aAAa,CAAC;EACV,gBAAgB,ECkCA,OAAO;EDjCvB,OAAO,EAAE,SAAS;CAKrB;;AAPD,AAGI,aAHS,GAGP,GAAG,CAAC;EACF,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CACjB;;AAGL,AAAA,YAAY,CAAC;EACT,gBAAgB,EC0BD,OAAO;EDzBtB,OAAO,EAAE,SAAS;CAKrB;;AAPD,AAGI,YAHQ,GAGN,GAAG,CAAC;EACF,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,MAAM;CACjB;;AAGL,MAAM,EAAE,SAAS,EAAE,KAAK;EACpB,AAAA,aAAa,CAAC;IACV,OAAO,EAAE,QAAQ;GAIpB;EALD,AAEI,aAFS,GAEP,GAAG,CAAC;IACF,KAAK,EAAE,IAAI;GACd;EAGL,AAAA,YAAY,CAAC;IACT,OAAO,EAAE,QAAQ;GAIpB;EALD,AAEI,YAFQ,GAEN,GAAG,CAAC;IACF,KAAK,EAAE,IAAI;GACd",
+    "sources": [
+        "../scss/components/sections.scss",
+        "../scss/_theme.scss"
+    ],
+    "names": [],
+    "file": "sections.css"
+}
--- a/website/src/css/texts.css
+++ b/website/src/css/texts.css
@ -0,0 +1,38 @@
+.heading {
+  line-height: 130%;
+  text-align: left;
+  font-size: 2rem;
+}
+
+.subheading {
+  font-weight: 600;
+  font-size: 1.3rem;
+}
+
+.paragraph {
+  line-height: 170%;
+  color: #6f6f6f;
+  font-size: 0.9rem;
+}
+
+.subText {
+  line-height: 150%;
+  font-size: 1.1rem;
+}
+
+@media (max-width: 890px) {
+  .heading {
+    text-align: center;
+    font-size: 1.5rem;
+  }
+  .subheading {
+    font-size: 1.1rem;
+  }
+  .paragraph {
+    font-size: 0.7rem;
+  }
+  .subText {
+    font-size: 0.9rem;
+  }
+}
+/*# sourceMappingURL=texts.css.map */
--- a/website/src/css/texts.css.map
+++ b/website/src/css/texts.css.map
@ -0,0 +1,10 @@
+{
+    "version": 3,
+    "mappings": "AAEA,AAAA,QAAQ,CAAC;EACL,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,IAAI;EAChB,SAAS,ECSL,IAAI;CDRX;;AAED,AAAA,WAAW,CAAC;EACR,WAAW,EAAE,GAAG;EAChB,SAAS,ECQL,MAAM;CDPb;;AAED,AAAA,UAAU,CAAC;EACP,WAAW,EAAE,IAAI;EACjB,KAAK,EC0BI,OAAO;EDzBhB,SAAS,ECML,MAAM;CDLb;;AAED,AAAA,QAAQ,CAAC;EACL,WAAW,EAAE,IAAI;EACjB,SAAS,ECKL,MAAM;CDJb;;AAED,MAAM,EAAE,SAAS,EAAE,KAAK;EACpB,AAAA,QAAQ,CAAC;IACL,UAAU,EAAE,MAAM;IAClB,SAAS,ECZT,MAAM;GDaT;EAED,AAAA,WAAW,CAAC;IACR,SAAS,ECZT,MAAM;GDaT;EAED,AAAA,UAAU,CAAC;IACP,SAAS,ECZT,MAAM;GDaT;EAED,AAAA,QAAQ,CAAC;IACL,SAAS,ECZT,MAAM;GDaT",
+    "sources": [
+        "../scss/components/texts.scss",
+        "../scss/_theme.scss"
+    ],
+    "names": [],
+    "file": "texts.css"
+}
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@ -1,7 +1,35 @@
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
 import React from "react";
-import { Redirect } from "@docusaurus/router";
-function Home() {
-  return <Redirect to="/docs/" />;
-}
+import { SectionDark, SectionLight } from '../components/layout';
+import { ExploreLitmus, Header } from '../components/section/Home';
+import { GetStartedHeader } from '../components/section/Home/GetStartedHeader';
+import { MoreResources } from '../components/section/Home/MoreResources';

-export default Home;
+
+export default function Home() {
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<Layout
+			title={`${siteConfig.title}`}
+			description="Description will go into a meta tag in <head />">			
+			<main>
+				{/* Pages Components */}
+				<div className="homeMainContent">
+					<SectionLight>
+						<Header />
+						<br />
+						<GetStartedHeader />
+						<br />
+						<ExploreLitmus type={'basic'} />					
+						<ExploreLitmus type={'advance'} />					
+						<br />
+					</SectionLight>
+					<SectionDark>
+						<MoreResources />
+					</SectionDark>
+				</div>				
+			</main>
+		</Layout>
+	);
+}
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@ -6,44 +6,44 @@
 */

 .heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
+	padding: 4rem 0;
+	text-align: center;
+	position: relative;
+	overflow: hidden;
 }

@media screen and (max-width: 966px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+	.heroBanner {
+		padding: 2rem;
+	}
 }

 .buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }

 .features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
 }

 .featureImage {
-  height: 200px;
-  width: 200px;
+	height: 200px;
+	width: 200px;
 }

 .main {
-  padding: 12px;
+	padding: 12px;
 }

 .heading {
-  font-weight: bold;
+	font-weight: bold;
 }

 .contents {
-  color: #ccc;
+	color: #ccc;
 }
--- a/website/src/pages/underConstruction.js
+++ b/website/src/pages/underConstruction.js
@ -0,0 +1,25 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import Layout from '@theme/Layout'
+import React from 'react'
+import { SectionDark, SectionLight } from '../components/layout'
+import { MoreResources } from '../components/section/Home/MoreResources'
+import { UnderConstructionHeader } from '../components/section/404'
+
+export default function Home() {
+	const { siteConfig } = useDocusaurusContext()
+	return (
+		<Layout title={`${siteConfig.title}`} description="Description will go into a meta tag in <head />">
+			<main>
+				{/* Pages Components */}
+				<div>
+					<SectionLight>
+						<UnderConstructionHeader />
+					</SectionLight>
+					<SectionDark>
+						<MoreResources />
+					</SectionDark>
+				</div>
+			</main>
+		</Layout>
+	)
+}
--- a/website/src/scss/_mixin.scss
+++ b/website/src/scss/_mixin.scss
@ -0,0 +1,6 @@
+@mixin grid {
+    display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+	grid-gap: 2rem;
+	row-gap: 1rem;
+}
--- a/website/src/scss/_theme.scss
+++ b/website/src/scss/_theme.scss
@ -0,0 +1,46 @@
+$screens: (
+	'xs': 450px,
+	'sm': 640px,
+	'md': 768px,
+	'mmd': 890px,
+	'lg': 1024px,
+	'xl': 1280px,
+	'xxl': 1350px,
+	'xxxl': 1600px,
+	'xxxxl': 1800px
+);
+
+$fontSize: (
+	'heading': (
+		'lg': 2rem,
+		'md': 1.5rem
+	),
+	'subHeading': (
+		'lg': 1.3rem,
+		'md': 1.1rem
+	),
+	'paragraph': (
+		'lg': 0.9rem,
+		'md': 0.7rem
+	),
+	'subText': (
+		'lg': 1.1rem,
+		'md': 0.9rem
+	),
+	'small': (
+		'lg': 0.7rem,
+		'md': 0.6rem
+	),
+	'button': 1rem
+);
+
+$colors: (
+	'backgroundLight': #f9fafc,
+	'backgroundDark': #f4f5f7,
+	'spaceGrey': #f1f2f6,
+	'lightGray': #ebebeb,
+	'darkGray': #6f6f6f,
+	'textPrimary': #042a2b,
+	'textSecondary': #5b44ba,
+	'textFooter': #1c1438
+);
--- a/website/src/scss/components/flex.scss
+++ b/website/src/scss/components/flex.scss
@ -0,0 +1,25 @@
+.row {
+    display: flex;
+    margin: 0;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+}
+
+.columnCenter {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.center {
+    display: grid;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+}
--- a/website/src/scss/components/link.scss
+++ b/website/src/scss/components/link.scss
@ -0,0 +1,12 @@
+@import '../theme';
+
+.link {
+    display: block;
+    color: map-get($colors, textSecondary);
+    text-decoration: none;
+    cursor: pointer;
+    &:hover {                
+        text-decoration: none;
+        list-style: none;
+    }
+}
--- a/website/src/scss/components/responsiveRow.scss
+++ b/website/src/scss/components/responsiveRow.scss
@ -0,0 +1,15 @@
+@import '../theme';
+
+.responsiveRow {
+	width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+@media (max-width: map-get($screens, mmd)) {
+    .responsiveRow {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+}   
--- a/website/src/scss/components/sections.scss
+++ b/website/src/scss/components/sections.scss
@ -0,0 +1,35 @@
+@import '../theme';
+
+.sectionLight {
+    background-color: map-get($colors, backgroundLight);
+    padding: 3rem 2rem;
+    > div {
+        width: 70%;
+        margin: 0 auto;
+    }
+}
+
+.sectionDark {
+    background-color: map-get($colors, backgroundDark);
+    padding: 3rem 2rem;
+    > div {
+        width: 70%;
+        margin: 0 auto;
+    }
+}
+
+@media (max-width: map-get($screens, mmd)) {
+    .sectionLight {
+        padding: 1rem 10%;
+        > div {
+            width: 100%;
+        }
+    }
+
+    .sectionDark {
+        padding: 1rem 10%;
+        > div {
+            width: 100%;
+        }
+    }
+}
--- a/website/src/scss/components/texts.scss
+++ b/website/src/scss/components/texts.scss
@ -0,0 +1,42 @@
+@import '../theme';
+
+.heading {
+    line-height: 130%;
+    text-align: left;
+    font-size: map-get(map-get($fontSize, heading), lg);
+}
+
+.subheading {
+    font-weight: 600;
+    font-size: map-get(map-get($fontSize, subHeading), lg);
+}
+
+.paragraph {
+    line-height: 170%;
+    color: map-get($colors, 'darkGray');
+    font-size: map-get(map-get($fontSize, paragraph), lg);
+}
+
+.subText {
+    line-height: 150%;
+    font-size: map-get(map-get($fontSize, subText), lg);
+}
+
+@media (max-width: map-get($screens, mmd)) {
+    .heading {
+        text-align: center;
+        font-size: map-get(map-get($fontSize, heading), md);
+    }
+
+    .subheading {
+        font-size: map-get(map-get($fontSize, subHeading), md);
+    }
+
+    .paragraph {
+        font-size: map-get(map-get($fontSize, paragraph), md);
+    }
+
+    .subText {
+        font-size: map-get(map-get($fontSize, subText), md);
+    }
+}
--- a/website/src/scss/docs/docs.scss
+++ b/website/src/scss/docs/docs.scss
@ -0,0 +1,115 @@
+.code {
+	border-radius: 5px;
+	margin-bottom: 8em;
+	box-sizing: border-box;
+
+	.titleGroup {
+		display: flex;
+		flex-direction: row;
+		width: 100%;
+		justify-content: space-between;
+		box-sizing: border-box;
+		align-items: center;
+		color: #777288;
+		background: #16102d;
+		user-select: none;
+		padding: 0.75em 1.25em;
+		line-height: 0;
+
+		.title {
+			padding-left: 0.5rem;
+			justify-self: flex-start;
+			font-size: 12px;
+			font-weight: 500;
+		}
+
+		.copyBtn {
+			align-self: flex-end;
+			justify-self: flex-end;
+			background: #16102d;
+			border: none;
+			border-radius: 2px;
+		}
+	}
+
+	.coding {
+		padding: 1em 0.75em;
+		background: #2e225d;
+
+		overflow: auto;
+
+		&::-webkit-scrollbar {
+			width: 6px;
+			height: 6px;
+			opacity: 0;
+		}
+	}
+}
+
+.coding.coding.coding pre {
+	background: #2e225d;
+	background-size: 100% 4.5em;
+	border: none;
+	border-radius: 0;
+	font-family: monospace;
+	font-size: 1.3em;
+	line-height: 1.5;
+	padding-top: 0.6em;
+	margin-bottom: 0;
+	white-space: pre-wrap;
+}
+
+.code {
+	:global {
+		pre[class*='language-'].line-numbers {
+			position: relative;
+			padding-left: 3.8em;
+			counter-reset: linenumber;
+		}
+
+		pre[class*='language-'].line-numbers > code {
+			position: relative;
+			white-space: inherit;
+		}
+
+		.line-numbers .line-numbers-rows {
+			position: absolute;
+			pointer-events: none;
+			top: 0;
+			font-size: 100%;
+			left: -3.8em;
+			width: 3em; /* works for line-numbers below 1000 lines */
+			letter-spacing: -1px;
+			border-right: 1px solid #999;
+
+			-webkit-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+		}
+
+		.line-numbers-rows > span {
+			pointer-events: none;
+			display: block;
+			counter-increment: linenumber;
+		}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+	}
+}
+
+html[data-theme='dark'] {
+	.code.code {
+		background: hsla(200, 18%, 7%, 1);
+
+		.titleGroup {
+			background: hsla(200, 17%, 10%, 1);
+		}
+	}
+}
--- a/website/src/scss/home/home.scss
+++ b/website/src/scss/home/home.scss
@ -0,0 +1,219 @@
+@import '../theme';
+@import '../mixin';
+
+// Global
+
+.spacing {
+	margin: 1rem 0;
+}
+
+.grid {
+	@include grid();
+}
+
+.subHeading {
+	padding: 0.5rem 0;
+}
+
+// Header
+
+.left {
+	width: 45%;
+}
+
+.purple {
+	color: map-get($colors, textSecondary);
+}
+
+.headerImage {
+	width: 55%;
+}
+
+@media (min-width: 2000px) {
+	.left {
+		width: 30%;
+	}
+
+	.headerImage {
+		width: 35%;
+	}
+}
+
+@media (max-width: 890px) {
+	.left {
+		width: 100%;		
+	}
+
+	.headerImage {
+		width: 100%;
+	}
+}
+
+// Homepage main content
+.homeMainContent {
+	margin-bottom: 3rem;
+}
+
+// Get Started Header
+
+.right {
+	width: 50%;
+	margin-top: 3rem;
+}
+
+.getStartedImage {
+	width: 40%;
+}
+
+@media (min-width: 2000px) {
+	.right {
+		width: 35%;
+	}
+
+	.getStartedImage {
+		width: 30%;
+	}
+}
+
+@media (max-width: map-get($screens, mmd)) {
+	.right {
+		width: 100%;
+	}
+
+	.getStartedImage {
+		width: 100%;
+	}
+}
+
+// Explore Litmus
+
+.exploreLitmusDiv {
+	height: 100%;
+	margin: 1rem 0;
+}
+
+// footer
+.footerDiv {
+	display: flex;
+	justify-content: space-between;
+	padding: 2% 20%;
+}
+
+.cncfDiv {
+	margin-top: 30px;
+}
+
+.cncfText {
+	font-size: 14px;
+	text-align: center;
+	margin-top: 20px;
+	color: map-get($colors, textFooter);
+}
+
+.cncfLink {
+	color: map-get($colors, textSecondary);
+}
+
+.preFooterRight {
+	width: 50%;
+	display: flex;
+	justify-content: space-between;
+}
+
+.preFooterButton {
+	height: 3rem;
+	min-width: 10rem;
+	width: 18rem;
+	border: none;
+	background: linear-gradient(133.06deg, #7c6ac8 1.78%, #5b44ba 64.41%);
+	color: white;
+	border-radius: 0.25rem;
+	cursor: pointer;
+	:disabled {
+		background: lightgray;
+	}
+	display: flex;
+	justify-content: center;
+	padding: 10px;
+}
+
+// Tutorials
+.tutorialCardDiv {
+	width: 350px;
+	margin: 20px;
+	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
+	cursor: pointer;
+}
+
+.tutorialLink {
+	text-decoration: none;
+}
+
+.cardContent {
+	padding: 20px;
+}
+
+.cardHeading {
+	font-size: 16px;
+	font-weight: bold;
+	margin-top: 20px;
+	margin-bottom: 10px;
+}
+
+.cardDescription {
+	color: #777288;
+}
+
+.tutorialAvailable {
+	padding: 6px 12px;
+	border-radius: 26px;
+	background-color: rgba(143, 150, 224, 0.25);
+	width: 100px;
+	margin-top: 11px;
+}
+
+.comingSoon {
+	font-size: 12px;
+	color: #5b44ba;
+}
+
+.tutorialContainer {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+// ChaosHub Page
+.chaosHubHeader {
+	font-size: 24px;
+	color: #777288;
+}
+
+.chaosHubDiv {
+	margin-top: 60px;
+	display: flex;
+}
+
+.chaosHubInfo {
+	margin: auto;
+}
+
+.chaosHubDescription {
+	max-width: 600px;
+	margin-top: 20px;
+	color: #777288;
+}
+
+.chaosHubExplore {
+	display: flex;
+	margin-top: 20px;
+}
+
+.chaosHubExploreText {
+	color: #5b44ba;
+}
+
+.chaosHubImage {
+	margin-left: 5px;
+	margin-top: 5px;
+}
--- a/website/src/scss/underConstruction/404.scss
+++ b/website/src/scss/underConstruction/404.scss
@ -0,0 +1,37 @@
+@import '../theme';
+@import '../mixin';
+
+// Header
+
+.spacing {
+	margin: auto;
+}
+
+.left {
+	width: 45%;
+	margin: auto;
+}
+
+.underConstructionImage {
+	width: 40%;
+}
+
+@media (min-width: 2000px) {
+	.left {
+		width: 30%;
+	}
+
+	.underConstructionImage {
+		width: 20%;
+	}
+}
+
+@media (max-width: 890px) {
+	.left {
+		width: 100%;
+	}
+
+	.underConstructionImage {
+		width: 20%;
+	}
+}
--- a/website/static/404.html
+++ b/website/static/404.html
--- a/website/static/img/AdvanceLitmus/advanced.svg
+++ b/website/static/img/AdvanceLitmus/advanced.svg
@ -0,0 +1,6 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.6313C0 7.79479 7.16344 0.631348 16 0.631348C24.8366 0.631348 32 7.79479 32 16.6313C32 25.4679 24.8366 32.6313 16 32.6313C7.16344 32.6313 0 25.4679 0 16.6313Z" fill="#68D4F8"/>
+<path d="M14.6271 15.1315C15.1054 14.8553 15.8808 14.8553 16.3592 15.1315L24.6275 19.9048C25.1058 20.1809 25.1058 20.6286 24.6275 20.9047L16.3592 25.678C15.8808 25.9541 15.1054 25.9541 14.6271 25.678L6.35873 20.9047C5.88043 20.6286 5.88043 20.1809 6.35873 19.9048L14.6271 15.1315Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4931 16.6314L8.95685 20.4047L15.4931 24.1781L22.0293 20.4047L15.4931 16.6314ZM16.3592 15.1315C15.8808 14.8553 15.1054 14.8553 14.6271 15.1315L6.35873 19.9048C5.88043 20.1809 5.88043 20.6286 6.35873 20.9047L14.6271 25.678C15.1054 25.9541 15.8808 25.9541 16.3592 25.678L24.6275 20.9047C25.1058 20.6286 25.1058 20.1809 24.6275 19.9048L16.3592 15.1315Z" fill="white"/>
+<path d="M15.1163 7.8385C15.5946 7.5623 16.37 7.5623 16.8484 7.8385L25.1167 12.6118C25.595 12.8879 25.595 13.3356 25.1167 13.6117L16.8484 18.385C16.37 18.6611 15.5946 18.6611 15.1163 18.385L6.84792 13.6117C6.36962 13.3356 6.36962 12.8879 6.84792 12.6118L15.1163 7.8385Z" fill="#217AB7"/>
+</svg>
--- a/website/static/img/AdvanceLitmus/air-gapped.svg
+++ b/website/static/img/AdvanceLitmus/air-gapped.svg
@ -0,0 +1,17 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M16 32.241C24.8366 32.241 32 25.2523 32 16.6312C32 8.01021 24.8366 1.02148 16 1.02148C7.16344 1.02148 0 8.01021 0 16.6312C0 25.2523 7.16344 32.241 16 32.241Z" fill="#BEB0F4"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="1" width="32" height="32">
+<path d="M16 32.241C24.8366 32.241 32 25.2523 32 16.6312C32 8.01021 24.8366 1.02148 16 1.02148C7.16344 1.02148 0 8.01021 0 16.6312C0 25.2523 7.16344 32.241 16 32.241Z" fill="#92BBF7"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+<path d="M6.7341 19.393C9.7266 19.393 13.095 17.3189 16 15.3239C19.08 13.198 22.4666 10.3889 25.2666 10.3889C28.1275 10.3889 30 13.0055 30 15.3239V15.5255C30 23.257 23.7322 29.5255 16 29.5255C8.2678 29.5255 2 23.257 2 15.5255C2.0938 17.4015 3.4217 19.393 6.7341 19.393Z" fill="white"/>
+<path d="M6.7341 10.398C9.5341 10.398 12.92 13.198 16 15.3239C18.905 17.3189 22.2741 19.393 25.2666 19.393C28.5776 19.393 29.9062 17.4022 30 15.5255C30 23.257 23.7322 29.5255 16 29.5255C8.2678 29.5255 2 23.257 2 15.5255V15.3239C2 13.0055 3.8725 10.3889 6.7341 10.398Z" fill="#740DF7"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="32" fill="white" transform="translate(0 0.631348)"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/static/img/AdvanceLitmus/design.svg
+++ b/website/static/img/AdvanceLitmus/design.svg
@ -0,0 +1,24 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M16 32.241C24.8366 32.241 32 25.2523 32 16.6312C32 8.01021 24.8366 1.02148 16 1.02148C7.16344 1.02148 0 8.01021 0 16.6312C0 25.2523 7.16344 32.241 16 32.241Z" fill="#FCD669"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<path d="M16 31.8509C24.8366 31.8509 32 24.8621 32 16.2411C32 7.62007 24.8366 0.631348 16 0.631348C7.16344 0.631348 0 7.62007 0 16.2411C0 24.8621 7.16344 31.8509 16 31.8509Z" fill="#92BBF7"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+<g clip-path="url(#clip1)">
+<path d="M16.1432 14.8766C16.9815 14.8766 17.6611 15.5562 17.6611 16.3945C17.6611 17.2328 16.9815 17.9124 16.1432 17.9124C15.3049 17.9124 14.6253 17.2328 14.6253 16.3945C14.6253 15.5562 15.3049 14.8766 16.1432 14.8766Z" fill="#CE7C3A"/>
+<path d="M24.7349 17.1643L22.2154 22.2639V25.8813C22.2154 26.2839 22.0554 26.6699 21.7708 26.9546C21.4861 27.2393 21.1001 27.3992 20.6975 27.3992H11.5903C11.1877 27.3992 10.8017 27.2393 10.517 26.9546C10.2323 26.6699 10.0724 26.2839 10.0724 25.8813V22.2639L7.55285 17.1643C7.42896 16.9149 7.37633 16.6361 7.40076 16.3587C7.42519 16.0813 7.52573 15.816 7.69131 15.5921L14.6999 6.07148C14.7473 6.00711 14.8138 5.95935 14.8899 5.935C14.9661 5.91066 15.0479 5.91098 15.1239 5.93592C15.1998 5.96086 15.266 6.00914 15.3128 6.07388C15.3597 6.13862 15.385 6.21651 15.385 6.29644V13.455C14.6695 13.6397 14.0461 14.079 13.6314 14.6905C13.2167 15.3021 13.0393 16.0438 13.1324 16.7768C13.2255 17.5098 13.5827 18.1837 14.1371 18.6721C14.6915 19.1606 15.405 19.43 16.1439 19.43C16.8828 19.43 17.5963 19.1606 18.1507 18.6721C18.7051 18.1837 19.0623 17.5098 19.1554 16.7768C19.2485 16.0438 19.0711 15.3021 18.6564 14.6905C18.2417 14.079 17.6182 13.6397 16.9028 13.455V6.29646C16.9028 6.21652 16.9281 6.13863 16.975 6.07389C17.0218 6.00915 17.088 5.96087 17.1639 5.93593C17.2399 5.91099 17.3217 5.91067 17.3979 5.93502C17.474 5.95936 17.5405 6.00713 17.5879 6.0715L24.5964 15.5922C24.762 15.8161 24.8626 16.0813 24.887 16.3587C24.9114 16.6361 24.8588 16.9149 24.7349 17.1643ZM20.6975 22.8456H11.5903V25.8813H20.6975V22.8456Z" fill="white"/>
+<path d="M16.1432 14.8766C16.9815 14.8766 17.6611 15.5562 17.6611 16.3945C17.6611 17.2328 16.9815 17.9124 16.1432 17.9124C15.3049 17.9124 14.6253 17.2328 14.6253 16.3945C14.6253 15.5562 15.3049 14.8766 16.1432 14.8766Z" fill="#CE7C3A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 27.3992H20.6976C21.1002 27.3992 21.4862 27.2393 21.7709 26.9546C22.0555 26.6699 22.2155 26.2839 22.2155 25.8813V22.2639L24.735 17.1643C24.8589 16.9149 24.9115 16.6361 24.8871 16.3587C24.8626 16.0813 24.7621 15.8161 24.5965 15.5922L17.588 6.0715C17.5406 6.00713 17.4741 5.95936 17.398 5.93502C17.3218 5.91067 17.2399 5.911 17.164 5.93593C17.0881 5.96087 17.0219 6.00915 16.975 6.07389C16.9282 6.13863 16.9029 6.21653 16.9029 6.29646V13.455C17.6183 13.6397 18.2418 14.079 18.6565 14.6905C19.0712 15.3021 19.2486 16.0438 19.1555 16.7768C19.0624 17.5098 18.7052 18.1837 18.1508 18.6721C17.5964 19.1606 16.8829 19.43 16.144 19.43C16.0959 19.43 16.0479 19.4289 16 19.4266V22.8456H20.6976V25.8813H16V27.3992Z" fill="#CE7C3A"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="32" fill="white" transform="translate(0 0.631348)"/>
+</clipPath>
+<clipPath id="clip1">
+<rect width="24.2859" height="24.2859" fill="white" transform="matrix(1 0 0 -1 4 28.9172)"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/static/img/AdvanceLitmus/dev-resource.svg
+++ b/website/static/img/AdvanceLitmus/dev-resource.svg
@ -0,0 +1,19 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M16 32.241C24.8366 32.241 32 25.2523 32 16.6312C32 8.01021 24.8366 1.02148 16 1.02148C7.16344 1.02148 0 8.01021 0 16.6312C0 25.2523 7.16344 32.241 16 32.241Z" fill="#F6A4EB"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="1" width="32" height="32">
+<path d="M16 32.241C24.8366 32.241 32 25.2523 32 16.6312C32 8.01021 24.8366 1.02148 16 1.02148C7.16344 1.02148 0 8.01021 0 16.6312C0 25.2523 7.16344 32.241 16 32.241Z" fill="#92BBF7"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M4.79999 11.1679C4.79999 10.5469 5.05284 9.95132 5.50293 9.51221C5.95302 9.0731 6.56347 8.82642 7.19999 8.82642H24.8C25.4365 8.82642 26.047 9.0731 26.497 9.51221C26.9471 9.95132 27.2 10.5469 27.2 11.1679V32.241C27.2 32.862 26.9471 33.4576 26.497 33.8967C26.047 34.3358 25.4365 34.5825 24.8 34.5825H7.19999C6.56347 34.5825 5.95302 34.3358 5.50293 33.8967C5.05284 33.4576 4.79999 32.862 4.79999 32.241V11.1679Z" fill="#9251AC"/>
+<path d="M22 13.5093H9.99999C9.33725 13.5093 8.79999 14.0334 8.79999 14.68C8.79999 15.3266 9.33725 15.8507 9.99999 15.8507H22C22.6627 15.8507 23.2 15.3266 23.2 14.68C23.2 14.0334 22.6627 13.5093 22 13.5093Z" fill="#FFFDFD"/>
+<path d="M22 18.1924H9.99999C9.33725 18.1924 8.79999 18.7165 8.79999 19.3631C8.79999 20.0097 9.33725 20.5338 9.99999 20.5338H22C22.6627 20.5338 23.2 20.0097 23.2 19.3631C23.2 18.7165 22.6627 18.1924 22 18.1924Z" fill="#FFFDFD"/>
+<path d="M16.6 22.6313H10.2C9.53726 22.6313 9 23.1555 9 23.8021C9 24.4487 9.53726 24.9728 10.2 24.9728H16.6C17.2627 24.9728 17.8 24.4487 17.8 23.8021C17.8 23.1555 17.2627 22.6313 16.6 22.6313Z" fill="#FFFDFD"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="32" fill="white" transform="translate(0 0.631348)"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/static/img/AdvanceLitmus/git-ops.svg
+++ b/website/static/img/AdvanceLitmus/git-ops.svg
@ -0,0 +1,21 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M16 32.241C24.8366 32.241 32 25.2523 32 16.6312C32 8.01021 24.8366 1.02148 16 1.02148C7.16344 1.02148 0 8.01021 0 16.6312C0 25.2523 7.16344 32.241 16 32.241Z" fill="#FCD669"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="1" width="32" height="32">
+<path d="M16 32.241C24.8366 32.241 32 25.2523 32 16.6312C32 8.01021 24.8366 1.02148 16 1.02148C7.16344 1.02148 0 8.01021 0 16.6312C0 25.2523 7.16344 32.241 16 32.241Z" fill="#92BBF7"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+<g clip-path="url(#clip1)">
+<path d="M26.585 15.6183L16.9821 5.68552C16.7163 5.41087 16.3559 5.25659 15.9801 5.25659C15.6043 5.25659 15.2439 5.41087 14.9781 5.68552L12.9814 7.74877L15.5114 10.365C16.8402 9.90088 18.0983 11.2166 17.6421 12.5831L20.0808 15.1049C21.7617 14.5057 23.0852 16.6792 21.8226 17.9837C20.5218 19.3289 18.3748 17.838 19.0726 16.0876L16.7965 13.7369V19.9246C18.0389 20.5614 17.8896 22.0498 17.2424 22.7176C16.9262 23.0444 16.4974 23.228 16.0503 23.228C15.6032 23.228 15.1745 23.0444 14.8582 22.7176C13.9954 21.8238 14.3146 20.3354 15.4107 19.8738V13.6277C14.3893 13.1956 14.2027 12.0667 14.4953 11.3426L12.0012 8.76033L5.41493 15.5721C5.14921 15.847 4.99994 16.2197 4.99994 16.6083C4.99994 16.997 5.14921 17.3697 5.41493 17.6445L15.0208 27.5773C15.2865 27.8519 15.6469 28.0062 16.0226 28.0062C16.3983 28.0062 16.7586 27.8519 17.0244 27.5773L26.585 17.6907C26.8507 17.4159 27 17.0432 27 16.6545C27 16.2659 26.8507 15.8932 26.585 15.6183Z" fill="#CE7C3A"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="32" fill="white" transform="translate(0 0.631348)"/>
+</clipPath>
+<clipPath id="clip1">
+<rect width="22" height="26" fill="white" transform="translate(5 3.63135)"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/static/img/AdvanceLitmus/integration.svg
+++ b/website/static/img/AdvanceLitmus/integration.svg
@ -0,0 +1,12 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M16 32.6313C24.8366 32.6313 32 25.4679 32 16.6313C32 7.79479 24.8366 0.631348 16 0.631348C7.16344 0.631348 0 7.79479 0 16.6313C0 25.4679 7.16344 32.6313 16 32.6313Z" fill="#85D996"/>
+<path d="M18.9067 0.897949L11.0667 8.48462C10.8155 8.73079 10.6717 9.06626 10.6667 9.41795V11.2979L20 11.6885C20.3536 11.6885 20.4166 11.7146 20.6667 11.9646C20.9167 12.2147 20.9428 12.2777 20.9428 12.6313L21.3333 21.9646H23.2C23.3764 21.9639 23.5509 21.9282 23.7134 21.8595C23.8759 21.7908 24.0232 21.6906 24.1467 21.5646L31.76 13.8313C31.1894 10.6232 29.6529 7.66572 27.356 5.35449C25.059 3.04326 22.1112 1.48844 18.9067 0.897949Z" fill="#109B67"/>
+<path d="M21.3333 23.8314V21.9648L21.3333 15.9648C21.3333 16.2394 21.3333 13.2981 20.92 11.6981C17.3333 11.2981 13.3333 11.2981 13.3333 11.2981H10.6667H8.79999C8.62358 11.2988 8.44907 11.3346 8.28657 11.4032C8.12407 11.4719 7.97681 11.5721 7.85332 11.6981L1.85332 17.6981C1.7112 17.8421 1.60372 18.0166 1.53904 18.2084C1.47436 18.4001 1.45416 18.6041 1.47999 18.8048C1.93857 21.9027 3.37675 24.7726 5.58401 26.9943C7.79128 29.2159 10.6517 30.6727 13.7467 31.1514C13.9474 31.1773 14.1513 31.1571 14.343 31.0924C14.5348 31.0277 14.7093 30.9202 14.8533 30.7781L20.92 24.7781C21.0468 24.6573 21.1486 24.5127 21.2195 24.3525C21.2904 24.1924 21.3291 24.0199 21.3333 23.8448V23.8314Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="32" fill="white" transform="translate(0 0.631348)"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/static/img/AdvanceLitmus/multi-tenancy.svg
+++ b/website/static/img/AdvanceLitmus/multi-tenancy.svg
@ -0,0 +1,22 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M16 32.241C24.8366 32.241 32 25.2523 32 16.6312C32 8.01021 24.8366 1.02148 16 1.02148C7.16344 1.02148 0 8.01021 0 16.6312C0 25.2523 7.16344 32.241 16 32.241Z" fill="#87BBFD"/>
+<g clip-path="url(#clip1)">
+<path d="M23.5 13.1313H20.125V10.5063C20.125 9.41233 19.6904 8.36312 18.9168 7.58953C18.1432 6.81594 17.094 6.38135 16 6.38135C14.906 6.38135 13.8568 6.81594 13.0832 7.58953C12.3096 8.36312 11.875 9.41233 11.875 10.5063V13.1313H8.5C8.10231 13.1318 7.72105 13.29 7.43984 13.5712C7.15864 13.8524 7.00045 14.2337 7 14.6313V25.1313C7.00045 25.529 7.15864 25.9103 7.43984 26.1915C7.72105 26.4727 8.10231 26.6309 8.5 26.6313H23.5C23.8977 26.6309 24.279 26.4727 24.5602 26.1915C24.8414 25.9103 24.9995 25.529 25 25.1313V14.6313C24.9995 14.2337 24.8414 13.8524 24.5602 13.5712C24.279 13.29 23.8977 13.1318 23.5 13.1313ZM15.9995 21.0063C15.7769 21.0063 15.5594 20.9404 15.3744 20.8168C15.1894 20.6931 15.0452 20.5174 14.9601 20.3119C14.8749 20.1063 14.8527 19.8801 14.8961 19.6619C14.9395 19.4436 15.0466 19.2432 15.204 19.0859C15.3613 18.9285 15.5617 18.8214 15.78 18.778C15.9982 18.7346 16.2244 18.7568 16.43 18.842C16.6355 18.9271 16.8112 19.0713 16.9349 19.2563C17.0585 19.4413 17.1245 19.6588 17.1245 19.8813C17.1245 20.0291 17.0954 20.1754 17.0388 20.3119C16.9823 20.4484 16.8994 20.5724 16.7949 20.6768C16.6905 20.7813 16.5665 20.8642 16.43 20.9207C16.2935 20.9772 16.1472 21.0063 15.9995 21.0063ZM18.625 13.1313H13.375V10.5063C13.375 9.81015 13.6516 9.14248 14.1438 8.65019C14.6361 8.15791 15.3038 7.88135 16 7.88135C16.6962 7.88135 17.3639 8.15791 17.8562 8.65019C18.3484 9.14248 18.625 9.81015 18.625 10.5063V13.1313Z" fill="#555ABF"/>
+<circle cx="16" cy="19.6313" r="2" fill="white"/>
+</g>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="1" width="32" height="32">
+<path d="M16 32.241C24.8366 32.241 32 25.2523 32 16.6312C32 8.01021 24.8366 1.02148 16 1.02148C7.16344 1.02148 0 8.01021 0 16.6312C0 25.2523 7.16344 32.241 16 32.241Z" fill="#FF7600"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="32" fill="white" transform="translate(0 0.631348)"/>
+</clipPath>
+<clipPath id="clip1">
+<rect width="22" height="22" fill="white" transform="translate(5 5.63135)"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/static/img/AdvanceLitmus/observability.svg
+++ b/website/static/img/AdvanceLitmus/observability.svg
@ -0,0 +1,17 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M16 32.241C24.8366 32.241 32 25.2523 32 16.6312C32 8.01021 24.8366 1.02148 16 1.02148C7.16344 1.02148 0 8.01021 0 16.6312C0 25.2523 7.16344 32.241 16 32.241Z" fill="#87BBFD"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="1" width="32" height="32">
+<path d="M16 32.241C24.8366 32.241 32 25.2523 32 16.6312C32 8.01021 24.8366 1.02148 16 1.02148C7.16344 1.02148 0 8.01021 0 16.6312C0 25.2523 7.16344 32.241 16 32.241Z" fill="#92BBF7"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+<path d="M29.9817 16.2515C29.9405 16.1589 28.9482 13.9574 26.7411 11.7502C23.8015 8.81034 20.0872 7.25635 16 7.25635C11.9127 7.25635 8.19842 8.81034 5.25889 11.7502C3.05178 13.9574 2.05947 16.1589 2.01827 16.2515C1.96501 16.3714 1.9375 16.5011 1.9375 16.6323C1.9375 16.7634 1.96501 16.8931 2.01827 17.013C2.05947 17.1057 3.0519 19.3066 5.259 21.5135C8.19853 24.4527 11.9127 26.0063 16 26.0063C20.0872 26.0063 23.8014 24.4527 26.7409 21.5135C28.948 19.3066 29.9405 17.1057 29.9817 17.013C30.0349 16.8931 30.0624 16.7634 30.0624 16.6323C30.0624 16.5011 30.0349 16.3714 29.9817 16.2515ZM16 12.4136C16.8344 12.4136 17.65 12.6611 18.3438 13.1246C19.0376 13.5882 19.5783 14.2471 19.8976 15.0179C20.2169 15.7888 20.3004 16.6371 20.1377 17.4554C19.9749 18.2738 19.5731 19.0255 18.9831 19.6155C18.3931 20.2055 17.6414 20.6073 16.823 20.7701C16.0047 20.9328 15.1564 20.8493 14.3855 20.53C13.6146 20.2107 12.9558 19.67 12.4922 18.9762C12.0286 18.2824 11.7812 17.4668 11.7812 16.6324C11.7825 15.5139 12.2274 14.4416 13.0183 13.6507C13.8092 12.8598 14.8815 12.4149 16 12.4136Z" fill="white"/>
+<circle cx="16" cy="16.6313" r="5" fill="#555ABF"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="32" fill="white" transform="translate(0 0.631348)"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/static/img/Resources/FAQs.svg
+++ b/website/static/img/Resources/FAQs.svg
@ -0,0 +1,11 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M29.0001 54.3267L24.3369 57.4442C23.5584 57.9598 22.6153 58.1323 21.7148 57.9238C20.8143 57.7154 20.0301 57.143 19.5345 56.3325L19.3953 56.0425L16.8433 50.9434L11.3217 51.185C10.4062 51.2245 9.51273 50.8863 8.83515 50.2439C8.15757 49.6014 7.75057 48.7065 7.70249 47.7534V47.415L7.93449 41.6634L3.03929 39.005C2.22169 38.562 1.60619 37.7992 1.32783 36.884C1.04947 35.9688 1.13098 34.976 1.55449 34.1234L1.69369 33.8575L4.68649 29L1.69369 24.1425C1.19873 23.3316 1.03311 22.3492 1.23323 21.4112C1.43334 20.4731 1.98282 19.6562 2.76089 19.14L3.03929 18.995L7.93449 16.3367L7.70249 10.585C7.66458 9.6314 7.98924 8.70069 8.60601 7.99488C9.22278 7.28906 10.0819 6.86511 10.9969 6.81502H11.3217L16.8433 7.05669L19.3953 1.95752C19.8206 1.10585 20.5529 0.464705 21.4315 0.174747C22.31 -0.11521 23.2631 -0.030299 24.0817 0.410852L24.3369 0.555852L29.0001 3.67335L33.6633 0.555852C34.4417 0.0402721 35.3849 -0.13225 36.2854 0.0762033C37.1859 0.284656 37.9701 0.857027 38.4657 1.66752L38.6049 1.95752L41.1569 7.05669L46.6785 6.81502C47.594 6.77553 48.4874 7.11372 49.165 7.75619C49.8426 8.39866 50.2496 9.29357 50.2977 10.2467V10.585L50.0657 16.3367L54.9609 18.995C55.7785 19.4381 56.394 20.2009 56.6724 21.116C56.9507 22.0312 56.8692 23.024 56.4457 23.8767L56.3065 24.1425L53.3137 29L56.3065 33.8575C57.3273 35.5492 56.8401 37.7725 55.2393 38.86L54.9609 39.005L50.0657 41.6634L50.2977 47.415C50.3356 48.3686 50.0109 49.2994 49.3942 50.0052C48.7774 50.711 47.9183 51.1349 47.0033 51.185H46.6785L41.1569 50.9434L38.6049 56.0425C38.1796 56.8942 37.4473 57.5353 36.5687 57.8253C35.6902 58.1153 34.737 58.0303 33.9185 57.5892L33.6633 57.4442L29.0001 54.3267Z" fill="#BEB0F4"/>
+<path d="M25.6796 34.498V34.998H26.1796H30.5402H31.0402V34.498V33.938C31.0402 33.3267 31.1376 32.867 31.302 32.5326C31.4949 32.1956 31.8968 31.7685 32.5652 31.2544L32.5674 31.2527L34.0075 30.1327L34.0075 30.1327L34.0101 30.1307C35.4263 29.0142 36.5108 27.8807 37.2432 26.7258C37.9982 25.5354 38.3611 24.0905 38.3611 22.418C38.3611 20.0076 37.5852 18.0178 36.0078 16.498C34.4244 14.9724 32.26 14.238 29.5801 14.238C26.5565 14.238 24.1151 15.0506 22.319 16.7316C20.5134 18.3946 19.6389 20.7281 19.6389 23.658V24.158H20.1389H24.7395H25.2395V23.658C25.2395 22.1132 25.6308 21.0357 26.3304 20.3344C27.0729 19.6167 28.0718 19.238 29.38 19.238C30.3885 19.238 31.1431 19.5456 31.7 20.1246L31.6999 20.1247L31.7069 20.1316C32.2884 20.7131 32.6005 21.5094 32.6005 22.578C32.6005 24.2358 31.856 25.6275 30.2854 26.7742L30.2854 26.7742L30.283 26.7759L28.4447 28.1345C28.4444 28.1347 28.4441 28.1349 28.4438 28.1352C27.3181 28.9589 26.5281 29.8117 26.1577 30.7068L26.1549 30.7137L26.1522 30.7207C25.8282 31.5747 25.6796 32.6966 25.6796 34.058V34.498ZM25.5789 43.0843L25.5789 43.0844L25.5861 43.0916C26.3455 43.851 27.2724 44.238 28.3399 44.238C29.4075 44.238 30.3343 43.851 31.0938 43.0916C31.8532 42.3323 32.2403 41.4055 32.2403 40.338C32.2403 39.2718 31.8538 38.3556 31.0901 37.6209C30.3314 36.8639 29.4058 36.478 28.3399 36.478C27.2724 36.478 26.3455 36.8651 25.5861 37.6245C24.849 38.3614 24.4795 39.2767 24.4795 40.338C24.4795 41.399 24.8485 42.3235 25.5789 43.0843Z" fill="#7356B6" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="58" height="58" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/static/img/Resources/glossary.svg
+++ b/website/static/img/Resources/glossary.svg
@ -0,0 +1,11 @@
+<svg width="59" height="58" viewBox="0 0 59 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M29.5001 54.3267L24.7565 57.4442C23.9647 57.9598 23.0053 58.1323 22.0892 57.9238C21.1732 57.7154 20.3754 57.143 19.8713 56.3325L19.7297 56.0425L17.1337 50.9434L11.5169 51.185C10.5857 51.2245 9.67679 50.8863 8.98753 50.2439C8.29827 49.6014 7.88425 48.7065 7.83534 47.7534V47.415L8.07134 41.6634L3.09174 39.005C2.26004 38.562 1.63393 37.7992 1.35077 36.884C1.06761 35.9688 1.15053 34.976 1.58134 34.1234L1.72294 33.8575L4.76734 29L1.72294 24.1425C1.21945 23.3316 1.05097 22.3492 1.25454 21.4112C1.4581 20.4731 2.01705 19.6562 2.80854 19.14L3.09174 18.995L8.07134 16.3367L7.83534 10.585C7.79677 9.6314 8.12703 8.70069 8.75444 7.99488C9.38185 7.28906 10.2558 6.86511 11.1865 6.81502H11.5169L17.1337 7.05669L19.7297 1.95752C20.1624 1.10585 20.9073 0.464705 21.801 0.174747C22.6947 -0.11521 23.6643 -0.030299 24.4969 0.410852L24.7565 0.555852L29.5001 3.67335L34.2437 0.555852C35.0356 0.0402721 35.995 -0.13225 36.9111 0.0762033C37.8271 0.284656 38.6248 0.857027 39.1289 1.66752L39.2705 1.95752L41.8665 7.05669L47.4833 6.81502C48.4146 6.77553 49.3235 7.11372 50.0128 7.75619C50.702 8.39866 51.116 9.29357 51.1649 10.2467V10.585L50.9289 16.3367L55.9085 18.995C56.7402 19.4381 57.3664 20.2009 57.6495 21.116C57.9327 22.0312 57.8498 23.024 57.4189 23.8767L57.2773 24.1425L54.2329 29L57.2773 33.8575C58.3157 35.5492 57.8201 37.7725 56.1917 38.86L55.9085 39.005L50.9289 41.6634L51.1649 47.415C51.2035 48.3686 50.8732 49.2994 50.2458 50.0052C49.6184 50.711 48.7445 51.1349 47.8137 51.185H47.4833L41.8665 50.9434L39.2705 56.0425C38.8379 56.8942 38.093 57.5353 37.1993 57.8253C36.3055 58.1153 35.336 58.0303 34.5033 57.5892L34.2437 57.4442L29.5001 54.3267Z" fill="#87BBFD"/>
+<path d="M39.8049 33.7484L39.805 33.7485C40.3681 33.1057 40.663 32.2855 40.663 31.2493C40.663 30.2131 40.3681 29.3929 39.805 28.7502L39.8004 28.7449L39.8004 28.7449C39.2813 28.1355 38.509 27.7999 37.3986 27.7999C36.3731 27.7999 35.6072 28.1284 35.0429 28.7546L39.8049 33.7484ZM39.8049 33.7484L39.8004 33.7537M39.8049 33.7484L39.8004 33.7537M39.8004 33.7537C39.2813 34.3631 38.509 34.6987 37.3986 34.6987M39.8004 33.7537L37.3986 34.6987M37.3986 34.6987C36.3715 34.6987 35.6055 34.3779 35.0426 33.7703C34.4835 33.1296 34.1888 32.3028 34.1888 31.2493C34.1888 30.1931 34.4848 29.3767 35.0424 28.7552L37.3986 34.6987ZM25.7431 37.6151L25.8523 37.967H26.2207H29.6305H30.3317L30.1032 37.3041L23.6655 18.6243L23.5493 18.2872H23.1928H20.4377H20.0811L19.965 18.6243L13.5273 37.3041L13.2988 37.967H14H17.4098H17.7782L17.8874 37.6151L18.5147 35.592H25.1157L25.7431 37.6151ZM41.0267 24.5316H40.5267V25.0316V25.3878C40.2537 25.1627 39.949 24.9662 39.6142 24.7982C38.8301 24.4048 37.9705 24.2114 37.044 24.2114C34.9986 24.2114 33.3211 24.8774 32.0672 26.2395C30.8251 27.571 30.2154 29.2544 30.2154 31.2493C30.2154 33.2546 30.7932 34.9447 31.9784 36.2781C33.1839 37.6343 34.8693 38.2872 36.9622 38.2872C37.8392 38.2872 38.6929 38.0917 39.5193 37.7068L39.5193 37.7068L39.5237 37.7047C39.8962 37.5267 40.2316 37.3213 40.5267 37.0873V37.467V37.967H41.0267H44H44.5V37.467V25.0316V24.5316H44H41.0267ZM21.8016 24.7905L23.9624 31.8434H19.6408L21.8016 24.7905Z" fill="#555ABF" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="59" height="58" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/static/img/Resources/troubleshooting.svg
+++ b/website/static/img/Resources/troubleshooting.svg
@ -0,0 +1,11 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M29.0001 54.3267L24.3369 57.4442C23.5584 57.9598 22.6153 58.1323 21.7148 57.9238C20.8143 57.7154 20.0301 57.143 19.5345 56.3325L19.3953 56.0425L16.8433 50.9434L11.3217 51.185C10.4062 51.2245 9.51273 50.8863 8.83515 50.2439C8.15757 49.6014 7.75057 48.7065 7.70249 47.7534V47.415L7.93449 41.6634L3.03929 39.005C2.22169 38.562 1.60619 37.7992 1.32783 36.884C1.04947 35.9688 1.13098 34.976 1.55449 34.1234L1.69369 33.8575L4.68649 29L1.69369 24.1425C1.19873 23.3316 1.03311 22.3492 1.23323 21.4112C1.43334 20.4731 1.98282 19.6562 2.76089 19.14L3.03929 18.995L7.93449 16.3367L7.70249 10.585C7.66458 9.6314 7.98924 8.70069 8.60601 7.99488C9.22278 7.28906 10.0819 6.86511 10.9969 6.81502H11.3217L16.8433 7.05669L19.3953 1.95752C19.8206 1.10585 20.5529 0.464705 21.4315 0.174747C22.31 -0.11521 23.2631 -0.030299 24.0817 0.410852L24.3369 0.555852L29.0001 3.67335L33.6633 0.555852C34.4417 0.0402721 35.3849 -0.13225 36.2854 0.0762033C37.1859 0.284656 37.9701 0.857027 38.4657 1.66752L38.6049 1.95752L41.1569 7.05669L46.6785 6.81502C47.594 6.77553 48.4874 7.11372 49.165 7.75619C49.8426 8.39866 50.2496 9.29357 50.2977 10.2467V10.585L50.0657 16.3367L54.9609 18.995C55.7785 19.4381 56.394 20.2009 56.6724 21.116C56.9507 22.0312 56.8692 23.024 56.4457 23.8767L56.3065 24.1425L53.3137 29L56.3065 33.8575C57.3273 35.5492 56.8401 37.7725 55.2393 38.86L54.9609 39.005L50.0657 41.6634L50.2977 47.415C50.3356 48.3686 50.0109 49.2994 49.3942 50.0052C48.7774 50.711 47.9183 51.1349 47.0033 51.185H46.6785L41.1569 50.9434L38.6049 56.0425C38.1796 56.8942 37.4473 57.5353 36.5687 57.8253C35.6902 58.1153 34.737 58.0303 33.9185 57.5892L33.6633 57.4442L29.0001 54.3267Z" fill="#FCD669"/>
+<path d="M30.0295 33.1027L29.6922 32.9562L29.4519 33.2344L22.9467 40.7658C22.9386 40.7752 22.9302 40.7842 22.9215 40.7929C22.2651 41.4485 21.3752 41.8166 20.4474 41.8164C19.5194 41.8161 18.6296 41.4474 17.9734 40.7912C17.3172 40.1351 16.9485 39.2452 16.9482 38.3173C16.948 37.3894 17.3162 36.4994 17.9719 35.8429C17.9802 35.8346 17.9894 35.826 17.9996 35.8172C17.9997 35.817 17.9999 35.8169 18.0001 35.8167L25.5303 29.3126L25.8095 29.0714L25.6614 28.7335C24.9779 27.1743 24.7782 25.4459 25.0881 23.772C25.398 22.0981 26.2032 20.5557 27.3994 19.3445C28.5957 18.1333 30.128 17.3091 31.7979 16.9785C33.4679 16.6479 35.1986 16.8262 36.7661 17.4903C36.8414 17.5223 36.9077 17.5723 36.9592 17.6359C37.0108 17.6996 37.046 17.7749 37.0616 17.8553C37.0773 17.9358 37.0729 18.0188 37.049 18.0972C37.025 18.1755 36.9822 18.2468 36.9243 18.3048C36.9243 18.3048 36.9243 18.3048 36.9243 18.3048L32.0575 23.1715L31.8683 23.3607L31.9208 23.6231L32.3922 25.9801L32.4576 26.307L32.7844 26.3724L35.1414 26.8438L35.4038 26.8963L35.5931 26.7071L40.4598 21.8403C40.4598 21.8403 40.4599 21.8403 40.4599 21.8402C40.5178 21.7823 40.5891 21.7396 40.6674 21.7156C40.7458 21.6917 40.8288 21.6873 40.9092 21.703C40.9897 21.7186 41.065 21.7538 41.1287 21.8054C41.1924 21.8569 41.2424 21.9234 41.2744 21.9988L41.2748 21.9998C41.94 23.5578 42.1225 25.2796 41.7987 26.9424C41.4748 28.6052 40.6596 30.1325 39.4584 31.327C38.2449 32.5325 36.6976 33.3462 35.0166 33.6627C33.3356 33.9793 31.5984 33.7842 30.0295 33.1027Z" fill="#CE7C3A" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="58" height="58" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/static/img/Socials/github-white.svg
+++ b/website/static/img/Socials/github-white.svg
@ -0,0 +1,3 @@
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.50106 0.603639C4.2517 0.601458 0 4.96662 0 10.3544C0 14.6149 2.6597 18.2365 6.36376 19.5666C6.86259 19.6952 6.78617 19.3311 6.78617 19.0825V17.3927C3.90571 17.7394 3.78896 15.7814 3.5958 15.4543C3.20523 14.7697 2.28187 14.5953 2.55781 14.2682C3.21372 13.9215 3.88236 14.3554 4.65713 15.5307C5.21752 16.3832 6.31069 16.2393 6.86471 16.0976C6.9857 15.5852 7.24467 15.1273 7.60127 14.7719C4.6168 14.2224 3.37292 12.3516 3.37292 10.1276C3.37292 9.04832 3.71891 8.05624 4.39817 7.25604C3.96514 5.9369 4.4385 4.80745 4.50218 4.63956C5.73545 4.52618 7.01754 5.5466 7.11731 5.62728C7.81779 5.43322 8.61803 5.33074 9.5138 5.33074C10.4138 5.33074 11.2162 5.43758 11.923 5.63382C12.1629 5.44631 13.3516 4.56978 14.4978 4.67662C14.5594 4.84452 15.0221 5.9478 14.6146 7.2495C15.3023 8.05188 15.6526 9.05269 15.6526 10.1342C15.6526 12.3625 14.4002 14.2355 11.4072 14.7762C11.6636 15.0352 11.8671 15.344 12.006 15.6847C12.1448 16.0254 12.2162 16.3911 12.216 16.7604V19.2133C12.2329 19.4096 12.216 19.6036 12.5344 19.6036C16.2936 18.3019 19 14.6541 19 10.3566C19 4.96662 14.7462 0.603639 9.50106 0.603639Z" fill="white"/>
+</svg>
--- a/website/static/img/Tutorials/custom-chaos.png
+++ b/website/static/img/Tutorials/custom-chaos.png
--- a/website/static/img/Tutorials/get-started.png
+++ b/website/static/img/Tutorials/get-started.png
--- a/website/static/img/Tutorials/gitops.png
+++ b/website/static/img/Tutorials/gitops.png
--- a/website/static/img/Tutorials/monitoring.png
+++ b/website/static/img/Tutorials/monitoring.png
--- a/website/static/img/Tutorials/probes.png
+++ b/website/static/img/Tutorials/probes.png
--- a/website/static/img/Tutorials/remote-cluster.png
+++ b/website/static/img/Tutorials/remote-cluster.png
--- a/website/static/img/Tutorials/teaming.png
+++ b/website/static/img/Tutorials/teaming.png
--- a/website/static/img/advantages.svg
+++ b/website/static/img/advantages.svg
@ -0,0 +1,20 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M16 32.2411C24.8366 32.2411 32 25.2524 32 16.6314C32 8.01033 24.8366 1.02161 16 1.02161C7.16344 1.02161 0 8.01033 0 16.6314C0 25.2524 7.16344 32.2411 16 32.2411Z" fill="#BEB0F4"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="1" width="32" height="32">
+<path d="M16 32.2411C24.8366 32.2411 32 25.2524 32 16.6314C32 8.01033 24.8366 1.02161 16 1.02161C7.16344 1.02161 0 8.01033 0 16.6314C0 25.2524 7.16344 32.2411 16 32.2411Z" fill="#92BBF7"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M4.79999 11.1679C4.79999 10.5469 5.05284 9.95139 5.50293 9.51228C5.95302 9.07317 6.56347 8.82648 7.19999 8.82648H24.8C25.4365 8.82648 26.047 9.07317 26.497 9.51228C26.9471 9.95139 27.2 10.5469 27.2 11.1679V32.2411C27.2 32.8621 26.9471 33.4577 26.497 33.8968C26.047 34.3359 25.4365 34.5826 24.8 34.5826H7.19999C6.56347 34.5826 5.95302 34.3359 5.50293 33.8968C5.05284 33.4577 4.79999 32.8621 4.79999 32.2411V11.1679Z" fill="#5B44BA"/>
+<path d="M10.4545 25.6313H7.54545C7.24421 25.6313 7 25.8552 7 26.1313C7 26.4075 7.24421 26.6313 7.54545 26.6313H10.4545C10.7558 26.6313 11 26.4075 11 26.1313C11 25.8552 10.7558 25.6313 10.4545 25.6313Z" fill="white"/>
+<path d="M7.00953 22.5407H13.4311V21.2757H9.0389V21.2041L10.9778 19.1707C12.7642 17.3617 13.2739 16.4977 13.2739 15.4046C13.2739 13.8342 11.9972 12.6313 10.1584 12.6313C8.33386 12.6313 7 13.8151 7 15.6003H8.40532C8.40056 14.5502 9.07701 13.8629 10.1298 13.8629C11.1207 13.8629 11.8734 14.4738 11.8734 15.4476C11.8734 16.3115 11.3589 16.9321 10.3108 18.0442L7.00953 21.4714V22.5407Z" fill="white"/>
+<path d="M16.1941 22.6313C16.7134 22.6313 17.1469 22.2065 17.1469 21.6767C17.1469 21.1564 16.7134 20.7268 16.1941 20.7268C15.6701 20.7268 15.2414 21.1564 15.2414 21.6767C15.2414 22.2065 15.6701 22.6313 16.1941 22.6313Z" fill="white"/>
+<path d="M20.179 15.2089H18.6165L20.865 18.8748L18.5879 22.5407H20.1505L21.794 19.8008L23.4422 22.5407H25L22.6991 18.8748L24.9809 15.2089H23.4232L21.794 18.0633L20.179 15.2089Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="32" fill="white" transform="translate(0 0.631348)"/>
+</clipPath>
+</defs>
+</svg>
--- a/website/static/img/arrow.png
+++ b/website/static/img/arrow.png
--- a/website/static/img/chaos-bird.png
+++ b/website/static/img/chaos-bird.png
--- a/website/static/img/chaos-hub.png
+++ b/website/static/img/chaos-hub.png
--- a/website/static/img/chaos-hub.svg
+++ b/website/static/img/chaos-hub.svg
@ -0,0 +1,5 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.6313C0 7.79479 7.16344 0.631348 16 0.631348C24.8366 0.631348 32 7.79479 32 16.6313C32 25.4679 24.8366 32.6313 16 32.6313C7.16344 32.6313 0 25.4679 0 16.6313Z" fill="#FCA326"/>
+<path d="M12.8788 20.4191H6.71681C5.95041 20.4191 5.46888 19.5924 5.84697 18.9258L8.9394 13.4734L12.0234 8.11704C12.4055 7.45334 13.3613 7.44794 13.7509 8.10728L16.9218 13.4734L20.0142 18.9258C20.3923 19.5924 19.9108 20.4191 19.1444 20.4191H12.8788Z" fill="#E24329"/>
+<path d="M19.4876 23.0627H13.3256C12.5593 23.0627 12.0777 22.236 12.4558 21.5694L15.5482 16.1169L18.6322 10.7606C19.0144 10.0969 19.9702 10.0915 20.3598 10.7508L23.5307 16.1169L26.6231 21.5694C27.0012 22.236 26.5196 23.0627 25.7532 23.0627H19.4876Z" fill="white"/>
+</svg>
--- a/website/static/img/cncf-color.svg
+++ b/website/static/img/cncf-color.svg
--- a/website/static/img/code_block_header.svg
+++ b/website/static/img/code_block_header.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.128 0H10.872C12.655 0 13.302 0.186 13.954 0.534C14.606 0.883 15.117 1.394 15.466 2.046C15.815 2.698 16 3.345 16 5.128V10.872C16 12.655 15.814 13.302 15.466 13.954C15.125 14.5982 14.5982 15.125 13.954 15.466C13.302 15.814 12.655 16 10.872 16H5.128C3.345 16 2.698 15.814 2.046 15.466C1.394 15.118 0.883 14.606 0.534 13.954C0.186 13.302 0 12.655 0 10.872V5.128C0 3.345 0.186 2.698 0.534 2.046C0.875009 1.40181 1.40181 0.875009 2.046 0.534C2.698 0.186 3.345 0 5.128 0ZM9 11C8.73478 11 8.48043 11.1054 8.29289 11.2929C8.10536 11.4804 8 11.7348 8 12C8 12.2652 8.10536 12.5196 8.29289 12.7071C8.48043 12.8946 8.73478 13 9 13H12C12.2652 13 12.5196 12.8946 12.7071 12.7071C12.8946 12.5196 13 12.2652 13 12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11H9ZM8 8.997C8.00052 8.85063 7.9688 8.70594 7.9071 8.57321C7.8454 8.44048 7.75523 8.32296 7.643 8.229L4.702 5.288C4.5134 5.10584 4.2608 5.00505 3.9986 5.00733C3.7364 5.0096 3.48559 5.11477 3.30018 5.30018C3.11477 5.48559 3.0096 5.7364 3.00733 5.9986C3.00505 6.2608 3.10584 6.5134 3.288 6.702L5.583 8.997L3.288 11.293C3.10584 11.4816 3.00505 11.7342 3.00733 11.9964C3.0096 12.2586 3.11477 12.5094 3.30018 12.6948C3.48559 12.8802 3.7364 12.9854 3.9986 12.9877C4.2608 12.99 4.5134 12.8892 4.702 12.707L7.643 9.766C7.665 9.747 7.687 9.728 7.707 9.707C7.80036 9.6139 7.87432 9.50322 7.92462 9.38135C7.97491 9.25948 8.00053 9.12884 8 8.997Z" fill="#777288"/>
+</svg>
--- a/website/static/img/copy.svg
+++ b/website/static/img/copy.svg
@ -0,0 +1,3 @@
+<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 5H7C7.79565 5 8.55871 4.68393 9.12132 4.12132C9.68393 3.55871 10 2.79565 10 2C10.5304 2 11.0391 2.21071 11.4142 2.58579C11.7893 2.96086 12 3.46957 12 4V14C12 14.5304 11.7893 15.0391 11.4142 15.4142C11.0391 15.7893 10.5304 16 10 16H2C1.46957 16 0.960859 15.7893 0.585786 15.4142C0.210714 15.0391 0 14.5304 0 14V4C0 3.46957 0.210714 2.96086 0.585786 2.58579C0.960859 2.21071 1.46957 2 2 2C2 2.79565 2.31607 3.55871 2.87868 4.12132C3.44129 4.68393 4.20435 5 5 5ZM4 2C4 1.46957 4.21071 0.960859 4.58579 0.585786C4.96086 0.210714 5.46957 0 6 0C6.53043 0 7.03914 0.210714 7.41421 0.585786C7.78929 0.960859 8 1.46957 8 2C8 2.26522 7.89464 2.51957 7.70711 2.70711C7.51957 2.89464 7.26522 3 7 3H5C4.73478 3 4.48043 2.89464 4.29289 2.70711C4.10536 2.51957 4 2.26522 4 2Z" fill="#777288"/>
+</svg>
--- a/website/static/img/getting-started.svg
+++ b/website/static/img/getting-started.svg
@ -0,0 +1,5 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.6313C0 7.79479 7.16344 0.631348 16 0.631348C24.8366 0.631348 32 7.79479 32 16.6313C32 25.4679 24.8366 32.6313 16 32.6313C7.16344 32.6313 0 25.4679 0 16.6313Z" fill="#BEB0F4"/>
+<path d="M30.2667 17.258L7.73335 28.2447C7.61246 28.3082 7.47548 28.3347 7.33961 28.3207C7.20374 28.3067 7.07503 28.2529 6.96963 28.166C6.86424 28.0791 6.78685 27.963 6.74719 27.8323C6.70753 27.7016 6.70735 27.5621 6.74669 27.4313L9.82669 16.6313H30.6667C30.6698 16.7637 30.6334 16.894 30.5622 17.0056C30.4909 17.1172 30.3881 17.2051 30.2667 17.258Z" fill="white"/>
+<path d="M7.73335 5.01802L30.2667 16.0047C30.3881 16.0576 30.4909 16.1455 30.5622 16.2571C30.6334 16.3687 30.6698 16.499 30.6667 16.6313H9.82669L6.74669 5.83135C6.70735 5.70055 6.70753 5.56104 6.74719 5.43033C6.78685 5.29963 6.86424 5.18355 6.96963 5.09667C7.07503 5.00979 7.20374 4.95598 7.33961 4.94198C7.47548 4.92799 7.61246 4.95444 7.73335 5.01802Z" fill="#7356B6"/>
+</svg>
--- a/website/static/img/header-2.png
+++ b/website/static/img/header-2.png
--- a/website/static/img/header.png
+++ b/website/static/img/header.png
--- a/Show More
+++ b/Show More