feat: Add CMS setting up guide

apps/docs/pages/quickstart/saleor-cms.mdx

@@ -0,0 +1,139 @@
+import { Steps } from "nextra/components";
+
+# Saleor CMS
+
+This guide will help you set up Saleor CMS, which manages the **homepage**, **footer**, and **navigation** of your storefront.
+
+## Configure homepage
+
+Saleor CMS relies on attributes to organize content, and specific attributes are required for setting up homepage. Refer to screenshots below to identify necessary attributes.
+
+<Steps>
+### Create required attributes
+
+Navigate to Saleor dashboard > **Configuration** > **Attributes and Product Types** and select **Attributes**.
+Create following attributes:
+
+**Carousel products** - used to display up to 8 products in a carousel on homepage:
+![Carousel products attribute](../../images/cms/homepage/carousel-products.png)
+
+**Homepage banner button text** - used to display button text on banner section:
+![Banner button text attribute](../../images/cms/homepage/banner-button-text.png)
+
+**Homepage banner header** - used to display header on banner section:
+![Banner header attribute](../../images/cms/homepage/banner-header.png)
+
+**Homepage banner image** - used to display background image of banner section:
+![Banner image attribute](../../images/cms/homepage/banner-image.png)
+
+**Homepage button text** - used to display button text on page bottom:
+![Button text attribute](../../images/cms/homepage/button-text.png)
+
+**Homepage grid item header** - used to display header on featured carousel's element:
+![Grid item header attribute](../../images/cms/homepage/grid-item-header.png)
+
+**Homepage grid item header font color** - used to set font color of header on featured carousel's element:
+![Grid item header font color attribute](../../images/cms/homepage/grid-item-header-font-color.png)
+
+**Homepage grid item image** - used to display background image of featured carousel's element:
+![Grid item image attribute](../../images/cms/homepage/grid-item-image.png)
+
+**Homepage grid item subheader** - used to display subheader on featured carousel's element:
+![Grid item subheader attribute](../../images/cms/homepage/grid-item-subheader.png)
+
+**Homepage grid item subheader font color** - used to set font color of subheader on featured carousel's element:
+![Grid item subheader font color attribute](../../images/cms/homepage/grid-item-subheader-font-color.png)
+
+### Create Homepage page type
+
+To set up homepage, you need to create **Page Type** and assign appropriate attributes. Follow these steps:
+
+<Steps>
+
+#### Navigate to Page Types
+
+Go to Saleor dashboard > **Configuration** > **Content Management** and select **Page Types**.
+
+#### Create new Page Type
+
+Click on **Create page type**.
+Enter name **Homepage** for Content Type Name and click **Save**.
+
+#### Assign attributes
+
+Assign all required attributes to **Homepage Page Type**:
+![Homepage page type attribute](../../images/cms/homepage/homepage-page-type.png)
+
+</Steps>
+
+### Create actual homepage
+
+Once **Homepage Page Type** is set up, you can create the actual homepage content by following these steps:
+
+<Steps>
+#### Navigate to Content management
+
+Go to Saleor dashboard > **Content** and click **Create content**.
+
+#### Select Page Type
+
+In dropdown, select **Homepage**.
+This ensures that attributes assigned to **Homepage Page Type** are available for editing.
+
+#### Fill in attributes
+
+</Steps>
+</Steps>
+
+## Configure navigation & footer
+
+<Steps>
+
+### Navigate to Navigation management
+
+Go to Saleor dashboard > **Configuration** > **Miscellaneous** and select **Navigation**
+
+### Create Menu for navigation and footer
+
+Click **Create menu** to open menu creation form.
+For main navigation, name menu **navbar**.
+This menu will manage links displayed in your website's header navigation.
+For footer, create another menu and name it **footer**.
+This menu will handle links displayed in footer section of your website.
+![Navigation menus](../../images/cms/navigation/navigation.png)
+
+### Create Menu items
+
+Select menu you want to edit and click **Create new item** to open menu item creation form.
+Menu items can link to various resources:
+
+- **Category**,
+- **Collection**,
+- **Static Page** - link to page created in **Content** section,
+- **URL** - URL to external website or link to internal page within your storefront.
+
+</Steps>
+
+## Configure Static Page
+
+Static page in Saleor is used for standalone content, such as "About Us" or "Contact" page. Unlike **Homepage** page type, **Static Page** does not require attributes. Follow these steps to create one:
+
+<Steps>
+### Navigate to Content Management
+Go to Saleor dashboard > **Configuration** > **Content Management** and select **Page Types**.
+#### Create new Page Type
+
+Click on **Create page type**.
+Enter name **Static page** for Content Type Name and click **Save**.
+
+### Enter page details
+
+- **Title** - provide title for page (e.g., "About Us").
+- **Slug** - specify slug for page, this will determine its URL (e.g., /about-us).
+- **Content** - use rich text editor to add your content (e.g., text paragraphs, headings, bullet points or numbered lists, images, hyperlinks)
+
+### Create actual static page
+
+Creating actual static page follows the same steps as creating homepage.
+
+</Steps>