WIP

docusaurus.config.ts

@@ -9,7 +9,8 @@ const { createRedirects, redirects } = require("./redirects");
 /** @type {import('@docusaurus/types').Config} */
 const config: Config = {
   title: "Botkube",
-  tagline: "Messaging bot for monitoring and debugging Kubernetes clusters",
+  tagline:
+    "AI-powered expertise to troubleshoot, optimize pipelines, and manage infrastructure seamlessly across multiple tools—all from one place.",
   url: "https://docs.botkube.io/",
   baseUrl: "/",
   onBrokenLinks: "throw",

src/components/Card/Tutorial/index.module.scss

@@ -1,18 +1,24 @@
 .card {
-  padding: 10px;
+  padding: 15px;
+
   border: 1px solid var(--ifm-color-secondary);
   border-radius: 8px;
 }
 
 .button {
-  appearance: none;
-  outline: 0;
-  border: 0;
-  border-radius: 8px;
-  background: var(--button-backgroud);
-  color: var(--button-label);
-  text-align: center;
-  width: 100%;
-  padding: 5px;
-  display: block;
+  // appearance: none;
+  // outline: 0;
+  // border: 0;
+  // border-radius: var(--ifm-button-border-radius);
+  // padding: calc(var(--ifm-button-padding-vertical)* var(--ifm-button-size-multiplier)) calc(var(--ifm-button-padding-horizontal)* var(--ifm-button-size-multiplier));
+  // color: var(--button-label);
+  // text-align: center;
+  // width: 100%;
+  // display: block;
+  // font-weight: bold;
+  // cursor: pointer;
+
+  // &:hover, &:focus {
+  //   text-decoration: none;
+  // }
 }

src/components/Card/Tutorial/index.tsx

@@ -14,10 +14,10 @@ type Props = {
 export const CardTutorial: FC<Props> = ({ link, buttonLabel, body, title }) => {
   return (
     <div className={clsx(styles.card)}>
-      <Heading as="h2">{title}</Heading>
+      <Heading as="h3">{title}</Heading>
       <p>{body}</p>
-      <Link to={link}>
-        <button className={clsx(styles.button)}>{buttonLabel}</button>
+      <Link to={link} className={clsx("button", "button--secondary", styles.button)}>
+        {buttonLabel}
       </Link>
     </div>
   );

src/css/custom.scss

@@ -21,8 +21,8 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 
   --ifm-button-color: #1c1e21;
-  --button-backgroud: #1c90f3;
-  --button-label: #fff;
+  --button-background: #ccc;
+  --button-label: #000;
 
   --cookie-background: #1c90f3;
   --cookie-font-color: #fff;
@@ -55,27 +55,6 @@
   }
 }
 
-.button.button--primary {
-  border: 1px solid #fff;
-  background-color: #fff;
-  color: #000;
-
-  &:hover {
-    background: #eee;
-  }
-}
-
-.button.button--secondary {
-  border: 1px solid #fff;
-  background: transparent;
-  color: #fff;
-
-  &:hover {
-    color: #000;
-    background: #fff;
-  }
-}
-
 /* Tabs in mdx */
 .tab-container-nested {
   margin: 0 0 var(--ifm-list-margin);

src/pages/index.tsx

@@ -3,6 +3,7 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import Heading from "@theme/Heading";
+import { CardTutorial } from "@site/src/components/Card/Tutorial";
 
 import styles from "./index.module.css";
 
@@ -12,14 +13,13 @@ function HomepageHeader() {
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
         <Heading as="h1" className="hero__title">
-          {siteConfig.title}
+          Get started with {siteConfig.title}
         </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link className="button button--secondary button--lg" to="#">
-            Docusaurus Tutorial - 5min ⏱️
-          </Link>
-        </div>
+        <p className="hero__subtitle">
+          AI-powered expertise to troubleshoot, optimize pipelines,
+          <br />
+          and manage infrastructure seamlessly across multiple tools—all from one place.
+        </p>
       </div>
     </header>
   );
@@ -28,10 +28,46 @@ function HomepageHeader() {
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <Layout title={`Hello from ${siteConfig.title}`} description="Description will go into a meta tag in <head />">
+    <Layout title={`Get started with ${siteConfig.title}`} description="${siteConfig.}}">
       <HomepageHeader />
-      <main>
-        <>Test</>
+      <main className="container" style={{ marginTop: "40px" }}>
+        <p>Learn more about one of the solutions:</p>
+        <div className="row" style={{ marginBottom: "40px" }}>
+          <div className="col col--12">
+            <CardTutorial
+              title="🖥️ Fuse CLI"
+              body={
+                <ul>
+                  <li>Easy Terminal Integration: Get insights and automation directly in your terminal</li>
+                  <li>
+                    Natural Language Commands: Use simple, conversational commands to interact with your infrastructure
+                  </li>
+                  <li>No Admin Permissions Needed: Install and start without any platform admin access</li>
+                  <li>Quick Setup: Get up and running in minutes with minimal configuration</li>
+                </ul>
+              }
+              buttonLabel="Get started"
+              link="/overview"
+            />
+          </div>
+          <div className="col col--12">
+            <CardTutorial
+              title="💬 Chat Platform"
+              body={
+                <ul>
+                  <li>
+                    Real-Time Collaboration: Share alerts and troubleshoot with your team in Slack or Microsoft Teams
+                  </li>
+                  <li>Familiar Interface: Clear, rich messages for quick understanding</li>
+                  <li>K8s Agent Setup: Requires Install an agent in your cluster for full features</li>
+                  <li>Admin Access Needed: Requires admin permissions to set up in Slack or Teams</li>
+                </ul>
+              }
+              buttonLabel="Get started"
+              link="/chat-platform/overview"
+            />
+          </div>
+        </div>
       </main>
     </Layout>
   );