docs: Adds new index page and design tweaks (#833)

docs/content/homepage.mdx

@@ -0,0 +1,89 @@
+---
+id: homepage
+title: Introduction
+description: 'What is Medusa?'
+slug: /
+hide_table_of_contents: true
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import Link from '@docusaurus/Link'
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+Medusa is an open-source Shopify alternative.
+
+It provides you with the primitives to create amazing digital commerce experiences. 
+
+<div class="container" style={{ padding: 0 }}>
+  <div class="row is-multiline">
+    <div class="col col--6">
+      <Link class="card" to="/tutorial/set-up-your-development-environment" style={{ height: '100%' }}>
+        <div class="card__body">
+          <h4>Tutorial</h4>
+          <p>Set up your local development environment</p>
+        </div>
+      </Link>
+    </div>
+    <div class="col col--6">
+      <Link class="card" to="/tutorial/adding-custom-functionality" style={{ height: '100%' }}>
+        <div class="card__body">
+          <h4>Make it your own</h4>
+          <p>Create custom endpoints, services, or subscribers.</p>
+        </div>
+      </Link>
+    </div>
+    <div class="col col--6">
+      <Link class="card" to="/guides/plugins" style={{ height: '100%' }}>
+        <div class="card__body">
+          <h4>Plugins</h4>
+          <p>Add or build a plugin to make your engine more powerful.</p>
+        </div>
+      </Link>
+    </div>
+    <div class="col col--6">
+      <Link class="card" to="/how-to/deploying-on-heroku" style={{ height: '100%' }}>
+        <div class="card__body">
+          <h4>Deploy in seconds</h4>
+          <p>Use one of our guides to deploy your Medusa project in seconds.</p>
+        </div>
+      </Link>
+    </div>
+  </div>
+</div>
+
+## Quickstart
+
+Visit our [Quickstart](https://github.com/medusajs/medusa#-quickstart) to get up and running in minutes with only a couple of commands.
+
+## What you'll find here
+
+<div class="container" style={{ padding: 0 }}>
+  <div class="row is-multiline">
+    <div class="col col--4">
+      <Link class="card" to="/quickstart/quick-start" style={{ height: '100%' }}>
+        <div class="card__body">
+          <h4>Quickstart</h4>
+          <p>A short guide to get you quickly started.</p>
+        </div>
+      </Link>
+    </div>
+    <div class="col col--4">
+      <Link class="card" to="/how-to/notification-api" style={{ height: '100%' }}>
+        <div class="card__body">
+          <h4>How-to and guides</h4>
+          <p>Guides and walkthroughs of concepts, tools, deployment and APIs.</p>
+        </div>
+      </Link>
+    </div>
+    {/* Ref */}
+    <div class="col col--4">
+      <a class="card" href="https://docs.medusa-commerce.com/api/store" target="_blank" style={{ height: '100%' }}>
+        <div class="card__body">
+          <h4>Reference</h4>
+          <p>Technical documentation of the Medusa API.</p>
+        </div>
+      </a>
+    </div>
+  </div>
+</div>