diff --git a/docs/index.mdx b/docs/index.mdx
index 39b657f..8cc19fc 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -6,9 +6,24 @@ Be sure to check us out on [GitHub](https://github.com/velopack/velopack) and [j
## Overview
To enable your application to make full use of Velopack, you need to do 3 things:
-1. Integrate the SDK into your app, and check for updates. [[Read more]](integrating/overview.mdx)
-0. Run the `vpk` command line tool to generate your update packages and installers. [[Read more]](packaging/overview.mdx)
-0. Upload your release somewhere your app can download updates from. [[Read more]](distributing/overview.mdx)
+
+
+### Integrate the SDK & check for updates.
+We have client libraries for some [languages below](#language-support), or if we don't support your language yet you can use [our CLI](./getting-started/fusion-cli.mdx).
+[Read more →](integrating/overview.mdx)
+
+
+
+### Build a Velopack release
+Our command-line tool `vpk` can help you build update packages and installers in just one command.
+[Read more →](packaging/overview.mdx)
+
+
+
+### Upload your releases somewhere
+You can host updates anywhere static files can be served, eg. cloud file storage, GitHub Releases, and more.
+[Read more →](distributing/overview.mdx)
+
## Language Support
There are libraries planned or supported for the languages below.
diff --git a/src/components/FancyStep.tsx b/src/components/FancyStep.tsx
new file mode 100644
index 0000000..2b855c1
--- /dev/null
+++ b/src/components/FancyStep.tsx
@@ -0,0 +1,21 @@
+import "../css/FancyStep.css";
+import type { PropsWithChildren } from 'react';
+import MDXContent from '@theme/MDXContent';
+
+export type FancyStepProps = PropsWithChildren & {
+ step: number;
+ noline: boolean;
+};
+
+export default function FancyStep({ step, noline, children }: FancyStepProps) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/css/FancyStep.css b/src/css/FancyStep.css
new file mode 100644
index 0000000..1dd0cac
--- /dev/null
+++ b/src/css/FancyStep.css
@@ -0,0 +1,59 @@
+.fancystep-root {
+ flex-direction: row;
+ flex-wrap: nowrap;
+ display: flex;
+ gap: 20px;
+ margin-top: 20px;
+ margin-left: 6px;
+}
+
+.fancystep-number {
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ line-height: 38px;
+ border-radius: 999px;
+ background-color: var(--ifm-color-primary-light);
+ position: relative;
+ color: rgba(255, 255, 255, 0.9);
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ font-size: var(--ifm-h3-font-size);
+ font-weight: bold;
+}
+
+[data-theme='dark'] .fancystep-number {
+ color: black;
+}
+
+.fancystep-leftcol {
+ position: relative;
+}
+
+.fancystep-leftcol::after {
+ content: '';
+ background-color: var(--ifm-color-primary-light);
+ position: absolute;
+ left: 20px;
+ opacity: 0.5;
+ top: 60px;
+ right: 19px;
+ bottom: 0px;
+}
+
+.fancystep-number::before {
+ content: '';
+ position: absolute;
+ left: -6px;
+ right: -6px;
+ top: -6px;
+ bottom: -6px;
+ opacity: 0.3;
+ z-index: -1;
+ border-radius: 999px;
+ background-color: var(--ifm-color-primary-light);
+}
+
+.fancystep-content {
+ flex: 1;
+ padding-top: 6px;
+}
\ No newline at end of file
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
index 9f23f04..32fb150 100644
--- a/src/theme/MDXComponents.js
+++ b/src/theme/MDXComponents.js
@@ -1,7 +1,9 @@
import MDXComponents from '@theme-original/MDXComponents';
import AppliesTo from '@site/src/components/AppliesTo';
+import FancyStep from '@site/src/components/FancyStep';
export default {
...MDXComponents,
AppliesTo,
+ FancyStep,
};
\ No newline at end of file