Spruce up introduction steps with component

Author: caesay

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)
+
+<FancyStep step={1}>
+### 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). <br/>
+[Read more →](integrating/overview.mdx)
+</FancyStep>
+
+<FancyStep step={2}>
+### Build a Velopack release
+Our command-line tool `vpk` can help you build update packages and installers in just one command. <br/>
+[Read more →](packaging/overview.mdx)
+</FancyStep>
+
+<FancyStep step={3} noline>
+### Upload your releases somewhere
+You can host updates anywhere static files can be served, eg. cloud file storage, GitHub Releases, and more. <br/>
+[Read more →](distributing/overview.mdx)
+</FancyStep>
 
 ## Language Support
 There are libraries planned or supported for the languages below.

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 (
+        <div className="fancystep-root">
+            <div className={noline ? "" : "fancystep-leftcol"}>
+                <div className="fancystep-number">{step}</div>
+            </div>
+            <div className="fancystep-content">
+                <MDXContent>{children}</MDXContent>
+            </div>
+        </div>
+    );
+}

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;
+}

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,
 };