docs: changed links on the homepage (#2981)

* docs: changed homepage

* added missing import

* added related links

* added a link to the user guide on homepage

docs/content/homepage.mdx

@@ -20,7 +20,7 @@ Learn about Medusa basic features and kickstart your ecommerce project.
 <DocCardList colSize={4} items={[
   {
     type: 'link',
-    href: '/quickstart/quick-start',
+    href: '/usage/create-medusa-app',
     label: 'Quickstart Guide',
     customProps: {
       image: '/img/quickstart-icon.svg',
@@ -30,32 +30,20 @@ Learn about Medusa basic features and kickstart your ecommerce project.
   },
   {
     type: 'link',
-    href: '/tutorial/set-up-your-development-environment',
-    label: 'Set up Dev Environment',
+    href: '/introduction#features',
+    label: 'Features',
     customProps: {
       themedImage: {
         light: '/img/dev-env-icon.svg',
         dark: '/img/dev-env-icon-dark.svg'
       },
-      description: 'Prepare your setup for advanced development.'
-    }
-  },
-  {
-    type: 'link',
-    href: '/usage/configurations',
-    label: 'Configure your Server',
-    customProps: {
-      themedImage: {
-        light: '/img/server-icon.svg',
-        dark: '/img/server-icon-dark.svg'
-      },
-      description: 'Explore Medusa\'s configurations.'
+      description: 'Learn about Medusa\'s features'
     }
   },
   {
     type: 'link',
     href: '/starters/nextjs-medusa-starter',
-    label: 'Next.js Starter',
+    label: 'Next.js Storefront',
     customProps: {
       themedImage: {
         light: '/img/nextjs-icon.svg',
@@ -67,7 +55,7 @@ Learn about Medusa basic features and kickstart your ecommerce project.
   {
     type: 'link',
     href: '/starters/gatsby-medusa-starter',
-    label: 'Gatsby Starter',
+    label: 'Gatsby Storefront',
     customProps: {
       themedImage: {
         light: '/img/gatsby-icon.svg',
@@ -79,7 +67,7 @@ Learn about Medusa basic features and kickstart your ecommerce project.
   {
     type: 'link',
     href: '/admin/quickstart',
-    label: 'Admin Quickstart Guide',
+    label: 'Admin Quickstart',
     customProps: {
       themedImage: {
         light: '/img/admin-icon.svg',
@@ -87,6 +75,18 @@ Learn about Medusa basic features and kickstart your ecommerce project.
       },
       description: 'Install Medusa\'s Admin to manage your store.'
     }
+  },
+  {
+    type: 'link',
+    href: '/user-guide',
+    label: 'User Guide',
+    customProps: {
+      themedImage: {
+        light: '/img/user-guide.svg',
+        dark: '/img/user-guide-dark.svg'
+      },
+      description: 'Take a look at the features available in Medusa Admin'
+    }
   }
 ]} />
 

docs/content/introduction.md

@@ -39,3 +39,11 @@ Your customers use the Storefront to view products and make orders. Medusa provi
 - [Bulk Import](./user-guide/products/import.mdx): Bulk import strategies for different entities including [products](./advanced/admin/import-products.mdx) and [price lists](./advanced/admin/import-prices.mdx).
 - [Bulk Export](./user-guide/products/export.mdx): Bulk export strategies for different entities including [products](./user-guide/products/export.mdx) and [orders](./user-guide/orders/export.mdx).
 - Complete Customization Capabilities: Aside from all the features that Medusa provides, it is completely customizable providing capabilities to create custom [endpoints](./advanced/backend/endpoints/add.md), [services](./advanced/backend/services/create-service.md), [subscribers](./advanced/backend/subscribers/create-subscriber.md), [batch job strategies](./advanced/backend/batch-jobs/create.md), and much more!
+
+---
+
+## See Also
+
+- [Quickstart guide](./quickstart/quick-start.mdx)
+- [Install the Next.js Storefront](./starters/nextjs-medusa-starter.mdx)
+- [Install Medusa Admin](./admin/quickstart.mdx)

docs/content/usage/create-medusa-app.mdx

@@ -1,24 +1,51 @@
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import Feedback from '@site/src/components/Feedback';
 
-# Use create-medusa-app
+# Install Medusa with create-medusa-app
 
 In this document, you’ll learn how to use `create-medusa-app` to create a Medusa project with the three main components of Medusa.
 
 ## Overview
 
-As explained in the [Introduction guide](../introduction.md), Medusa is composed of three different components: the headless server, the storefront, and the admin dashboard.
+Medusa is composed of three different components: the headless server, the storefront, and the admin dashboard.
 
 Medusa provides the necessary tools and resources to set up the three components separately. This ensures that developers have full freedom to choose their tech stack, as they can choose any framework for the storefront and admin dashboard.
 
-However, if you’re interested in using Medusa’s starters for the three components, you can easily make use of the `create-medusa-app` command instead of creating each separately.
+However, if you’re interested in using Medusa’s starters for the three components, you can make use of the `create-medusa-app` command instead of creating each separately.
 
 When you run the `create-medusa-app` command, you’ll install a Medusa server, a Medusa admin, and optionally a storefront at the same time.
 
+:::note
+
+If you instead want to quickly install and setup only a Medusa server, follow [this quickstart guide](../quickstart/quick-start.mdx).
+
+:::
+
+---
+
+## Prerequisites
+
+### Node.js
+
+Medusa supports Node versions 14 and 16. You can check which version of Node you have by running the following command:
+
+```bash noReport
+node -v
+```
+
+You can install Node from the [official website](https://nodejs.org/en/).
+
+### Git
+
+Git is required for this setup. You can find instructions on how to install it from the [Set up your dev environment documentation](../tutorial/0-set-up-your-development-environment.mdx#git).
+
 ---
 
 ## How to Create a Medusa Project
 
+A Medusa project is composed of the server, storefront, and admin.
+
 In your terminal, run the following command:
 
 <Tabs groupId="npxyarn" wrapperClassName='code-tabs'>
@@ -44,9 +71,9 @@ You’ll then be asked to enter the name of the directory you want the project t
 
 ### Choose Medusa Server Starter
 
-Next, you’ll be asked to choose the Medusa starter. The Medusa Server is created from a starter template. By default, it is created from the `medusa-starter-default` template.
+Next, you’ll be asked to choose the Medusa server starter. The Medusa Server is created from a starter template. By default, it is created from the `medusa-starter-default` template.
 
-You can either pick the default Medusa starter, the Contentful starter or enter a starter URL by choosing `Other`:
+You can either pick the default Medusa server starter, the Contentful starter or enter a starter URL by choosing `Other`:
 
 ```bash noReport
 ? Which Medusa starter would you like to install? …
@@ -57,12 +84,6 @@ You can either pick the default Medusa starter, the Contentful starter or enter
 
 The server will be installed under the `backend` directory under the project directory. An SQLite database will be created inside that directory as well with demo data seeded into it.
 
-:::tip
-
-You can learn more about the Contentful starter in the [Contentful Integration documentation](../add-plugins/contentful/index.md).
-
-:::
-
 ### Choose Storefront Starter
 
 After choosing the Medusa starter, you’ll be asked to choose the storefront starter. You can choose one of the starters in the list included or choose `None` to skip installing a storefront:
@@ -107,6 +128,13 @@ yarn start
 
 The commands will differ based on your choices in previous prompts.
 
+<Feedback 
+   event="survey_create-medusa-app"
+   question="Did you set up Medusa successfully?"
+   positiveQuestion="Is there anything that should improved?"
+   negativeQuestion="Please describe the issue you faced."
+/>
+
 ---
 
 ## Project Directory Structure
@@ -116,14 +144,14 @@ Inside the root project directory which was specified at the beginning of the in
 ```bash noReport
 /my-medusa-store
   /storefront // Medusa storefront starter
-  /backend // Medusa starter as a backend option 
-  /admin // Medusa admin panel
+  /backend // Medusa server
+  /admin // Medusa admin
 ```
 
 ---
 
 ## What’s Next
 
-- [Deploy the Medusa server](../deployments/server/index.mdx)
-- [Deploy the Medusa admin](../deployments/admin/index.mdx)
-- [Deploy the storefront](../deployments/storefront/index.mdx)
+- [Check out Medusa's features](../introduction.md#features)
+- [Learn about server configurations](./configurations.md)
+- [Set up your environment for advanced development](../tutorial/0-set-up-your-development-environment.mdx)

www/docs/sidebars.js

@@ -26,13 +26,25 @@ module.exports = {
           label: "Introduction",
         },
         {
-          type: "doc",
-          id: "quickstart/quick-start",
-          label: "Quickstart Guide",
-        },
-        {
-          type:"doc",
-          id: "quickstart/quick-start-docker",
+          type: "category",
+          label: "Install Medusa Server",
+          collapsed: false,
+          items: [
+            {
+              type: "doc",
+              id: "quickstart/quick-start",
+              label: "Quickstart Guide",
+            },
+            {
+              type: "doc",
+              id: "usage/create-medusa-app",
+              label: 'Use create-medusa-app'
+            },
+            {
+              type:"doc",
+              id: "quickstart/quick-start-docker",
+            },
+          ]
         },
         {
           type: "doc",
@@ -74,10 +86,6 @@ module.exports = {
           type: "doc",
           id: "admin/quickstart",
         },
-        {
-          type: "doc",
-          id: "usage/create-medusa-app",
-        },
         {
           type: "category",
           label: "Deployment",

www/docs/static/img/user-guide-dark.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 5.03501C8.62634 3.80281 6.84533 3.12246 5 3.12501C4.12333 3.12501 3.28167 3.27501 2.5 3.55167V15.4267C3.30302 15.1434 4.14847 14.9991 5 15C6.92083 15 8.67333 15.7225 10 16.91M10 5.03501C11.3736 3.80274 13.1547 3.12238 15 3.12501C15.8767 3.12501 16.7183 3.27501 17.5 3.55167V15.4267C16.697 15.1434 15.8515 14.9991 15 15C13.1547 14.9975 11.3737 15.6778 10 16.91M10 5.03501V16.91" stroke="#7E7D86" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

www/docs/static/img/user-guide.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 5.03501C8.62634 3.80281 6.84533 3.12246 5 3.12501C4.12333 3.12501 3.28167 3.27501 2.5 3.55167V15.4267C3.30302 15.1434 4.14847 14.9991 5 15C6.92083 15 8.67333 15.7225 10 16.91M10 5.03501C11.3736 3.80274 13.1547 3.12238 15 3.12501C15.8767 3.12501 16.7183 3.27501 17.5 3.55167V15.4267C16.697 15.1434 15.8515 14.9991 15 15C13.1547 14.9975 11.3737 15.6778 10 16.91M10 5.03501V16.91" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>