Feat: multi-page quickstart (#48)

* feat: multipage quickstart structure but not complete

* feat: add images for quickstart responsive design

* chore: update breadcrumbs video

* chore: update final quickstart page to next steps

* chore: added responsive design stacked layout video

* chore: update layout references to use sidebar instead of panel

* chore: typos, more unique sentences, larger screenshots, and fixed links

* feat: added content for introduction and next steps pages

* chore: remove ds store files and add to gitignore

.gitignore

@@ -0,0 +1 @@
+.DS_store

mint.json

@@ -40,19 +40,36 @@
     {
       "group": "Getting started",
       "pages": [
-        "product/quickstart",
-        "product/concepts",
+        "product/introduction",
+        {
+          "group": "Quickstart",
+          "icon": "bolt",
+          "pages": [
+            "product/quickstart",
+            "product/quickstart/component-basics",
+            "product/quickstart/colors-and-text-styles",
+            "product/quickstart/customizing-the-navbar",
+            "product/quickstart/desktop-and-mobile",
+            "product/quickstart/next-steps"
+          ]
+        }
+      ]
+    },
+    {
+      "group": "The Visual Builder",
+      "pages": [
         "product/builder-basics",
         "product/layouts",
         "product/components",
         "product/theming",
         "product/files",
-        "product/responsive-design",
-        "product/seo",
-        "product/localization",
-        "product/publishing"
+        "product/responsive-design"
       ]
     },
+    {
+      "group": "Guides",
+      "pages": ["product/localization", "product/publishing"]
+    },
     {
       "group": "Reference",
       "pages": [

product/introduction.mdx

@@ -0,0 +1,74 @@
+---
+title: "Introduction"
+description: Makeswift is a composable visual page builder designed to unlock speed and creativity for marketing teams. 
+icon: "lightbulb" iconType: "solid"
+---
+
+With Makeswift, you can quickly build fully functioning websites with no-code. You have the ability to create pages, design layouts, manage colors and text styles, and publish your site for the world to see. To learn more about the Visual Builder, we recommend following the [hands-on Quickstart](/product/quickstart).
+
+## Default vs custom host
+
+Makeswift provides a free default host which allows you to publish your site without managing any of the hosting. This is the quickest way to get started.
+
+For more advanced used cases, though, you can integrate Makeswift into a [Next.js](https://nextjs.org/) project that you deploy and host yourself. This is referred to as a [custom host](/product/site/hosting#custom-host). By doing this, you can create custom components, integrate data sources, and have full conrol over your hosting.
+
+For full details on how to integrate Makeswift into a Next.js project, refer to the [Developer Quickstart](/developer/quickstart).
+
+## Other Helpful Resources
+
+<CardGroup cols={3}>
+  <Card title="Concepts" icon="lightbulb" href="/product/concepts">
+    Learn terminology to help you easily navigate Makeswift
+  </Card>
+  <Card
+    title="Builder basics"
+    icon="hammer-brush"
+    iconType="solid"
+    href="/product/builder-basics"
+  >
+    Learn how to interact with instances of a component
+  </Card>
+  <Card title="Layout" icon="table-layout" href="/product/layouts">
+    Drag and drop elements on your page in the Makeswift builder
+  </Card>
+  <Card
+    title="Components"
+    icon="Cube"
+    iconType="solid"
+    href="/product/components"
+  >
+    Leverage the power of React components to build your site to spec
+  </Card>
+  <Card title="Theming" icon="palette" href="/product/theming">
+    Standardize the theme of your page while optimizing for performance
+  </Card>
+  <Card title="Files" icon="folder-open" href="/product/files">
+    Manage files and images for your site
+  </Card>
+  <Card
+    title="Responsive design"
+    icon="laptop-mobile"
+    iconType="solid"
+    href="/product/responsive-design"
+  >
+    Design your website to be responsive across all devices
+  </Card>
+  <Card title="SEO" icon="magnifying-glass-chart" href="/product/SEO">
+    Optimize SEO for your site more easily than ever
+  </Card>
+  <Card
+    title="Localization"
+    icon="map-location-dot"
+    href="/product/localization"
+  >
+    Manage content across different locales
+  </Card>
+  <Card
+    title="Publishing"
+    icon="rocket-launch"
+    iconType="solid"
+    href="/product/publishing"
+  >
+    Push changes to your live domain instantly
+  </Card>
+</CardGroup>

product/quickstart.mdx

@@ -1,62 +1,75 @@
 ---
-title: "Quickstart"
-description: "Not sure where to start? We've put together a few articles for you to quickly get familiar with the concepts and features of Makeswift."
-icon: "bolt" iconType: "solid"
+title: "Creating your site"
+description: "Learn the basics of building with Makeswift including components, theming, responsive design, and publishing."
+icon: "circle-plus"
 ---
 
-<CardGroup cols={3}>
-  <Card title="Concepts" icon="lightbulb" href="/product/concepts">
-    Learn terminology to help you easily navigate Makeswift
-  </Card>
-  <Card
-    title="Builder basics"
-    icon="hammer-brush"
-    iconType="solid"
-    href="/product/builder-basics"
-  >
-    Learn how to interact with instances of a component
-  </Card>
-  <Card title="Layout" icon="table-layout" href="/product/layouts">
-    Drag and drop elements on your page in the Makeswift builder
-  </Card>
-  <Card
-    title="Components"
-    icon="Cube"
-    iconType="solid"
-    href="/product/components"
-  >
-    Leverage the power of React components to build your site to spec
-  </Card>
-  <Card title="Theming" icon="palette" href="/product/theming">
-    Standardize the theme of your page while optimizing for performance
-  </Card>
-  <Card title="Files" icon="folder-open" href="/product/files">
-    Manage files and images for your site
-  </Card>
-  <Card
-    title="Responsive design"
-    icon="laptop-mobile"
-    iconType="solid"
-    href="/product/responsive-design"
-  >
-    Design your website to be responsive across all devices
-  </Card>
-  <Card title="SEO" icon="magnifying-glass-chart" href="/product/SEO">
-    Optimize SEO for your site more easily than ever
-  </Card>
-  <Card
-    title="Localization"
-    icon="map-location-dot"
-    href="/product/localization"
-  >
-    Manage content across different locales
-  </Card>
-  <Card
-    title="Publishing"
-    icon="rocket-launch"
-    iconType="solid"
-    href="/product/publishing"
-  >
-    Push changes to your live domain instantly
-  </Card>
-</CardGroup>
+If you already have a site and want to create a new one, click the **Create new site** button under the site list dropdown. If this is your first time using Makeswift, [create a free account](https://app.makeswift.com/signup). You'll then be taken to the page for creating a new site.
+
+You have two options to get started: **Start with the builder** or **Integrate with Next.js**.
+
+<Info>
+  Starting with the builder utilizes Makeswift's [default
+  host](/product/site/hosting#default-host) while Integrating with Next.js will
+  prompt you to utilize your own [custom
+  host](/product/site/hosting#custom-host).
+</Info>
+
+<Frame>![create a site](/images/quickstart/create-site.jpg)</Frame>
+
+Click **Go to the builder**, and you'll have a list of templates to choose from. Templates come with existing assets (images, logos, etc.), colors, text styles, and layouts for you to begin customizing.
+
+Choose the **Venture** template and click **Use this site**.
+
+<Frame>
+  <video
+    autoPlay
+    muted
+    loop
+    playsInline
+    title="Create new site from template"
+    className="w-full aspect-video"
+    src="/images/quickstart/create-site-from-template.mp4"
+  ></video>
+</Frame>
+
+## Visual Builder overview
+
+Once your new site is created, you'll be taken to the Visual Builder. Let's take a look at the different parts of the builder which is composed of 4 sections:
+
+<Tabs>
+  <Tab title="Navigation Sidebar">
+    Explore your sites, pages, files, and settings.
+    <Frame>
+    ![ Makeswift builder Navigation Sidebar](/images/quickstart/builder-layout-navigation-sidebar.jpg)
+    </Frame>
+  </Tab>
+
+<Tab title="Component Toolbar">
+  Access components to add to the Canvas.
+  <Frame>
+    ![ Makeswift builder
+    toolbar](/images/quickstart/builder-layout-component-toolbar.jpg)
+  </Frame>
+</Tab>
+
+<Tab title="Canvas">
+  Build your pages and see them come to life with an exact preview.
+  <Frame>
+    ![ Makeswift builder canvas](/images/quickstart/builder-layout-canvas.jpg)
+  </Frame>
+</Tab>
+
+  <Tab title="Properties Sidebar">
+    Edit properties of a page, site, or component.
+    <Frame>
+      ![ Makeswift builder panels](/images/quickstart/builder-layout-properties-sidebar.jpg)
+    </Frame>
+  </Tab>
+</Tabs>
+
+Before moving on, take a few minutes to explore the Canvas and its components. Click on any component in the Canvas to see its corresponding properties in the Properties Sidebar.
+
+## In the next section...
+
+You'll learn about how to customize components within the Makeswift Visual Builder.

product/quickstart/colors-and-text-styles.mdx

@@ -0,0 +1,55 @@
+---
+title: "Colors and text styles"
+description: "Learn about how Makeswift manages colors and text styles and how to use them in your site."
+icon: "palette"
+---
+
+In the previous section, you were briefly introduced to two important concepts: [text styles](/product/site/text-styles) and [site colors](/product/site/colors). Makeswift allows you to build a color palette and text styles that you can use across your site. This is a great way to ensure consistency and make changes quickly.
+
+## Site colors
+
+You can access your site colors and text styles by clicking on the Site tab in the top right corner of the builder. Notice, there is a handful of colors and text styles that come with this template. If you don't see the Site tab initially, you can deselect the selected component by clicking the `Esc` key.
+
+In the **Site colors** section, click on the green color and change it to something else. Notice that all the elements that use that color will update automatically in the Canvas. This change will also be reflected in each of your different pages.
+
+<Frame>
+  <video
+    autoPlay
+    muted
+    loop
+    playsInline
+    title="Components and properties"
+    className="w-full aspect-video"
+    src="/images/quickstart/site-colors.mp4"
+  ></video>
+</Frame>
+
+For consistentcy, change the color back to the original green accent color (`#2BFEC5`).
+
+## Text styles
+
+Now, take a look at the **Text styles** section. You can see the different text styles that are used on the site. You can change the font, size, weight, color, and more for each text style. The text you previously edited on the hero uses the **Heading 1** text style. Click on the **Heading 1** text style and change the font size to `80`. Then, click **Save**. You should see the text in the hero get bigger.
+
+<Frame>
+  <video
+    autoPlay
+    muted
+    loop
+    playsInline
+    title="Components and properties"
+    className="w-full aspect-video"
+    src="/images/quickstart/text-styles.mp4"
+  ></video>
+</Frame>
+
+<Note>
+  Hint: For properties that take a number input (like text size), you can drag
+  your cursor left or right within the input to increase and decrease the value
+  respectively.
+</Note>
+
+As you create new Text components, you'll want to assign each one a text style to stay true to your brand. For more information, check out the [Theming docs](/product/theming).
+
+## In the next section...
+
+You'll learn about Global Components and how they can be reused across your site.

product/quickstart/component-basics.mdx

@@ -0,0 +1,80 @@
+---
+title: "Component basics"
+description: "Learn how to use and customize components in Makeswift."
+icon: "cube" iconType: "solid"
+---
+
+Spend a few seconds exploring the Canvas and its components. You can click on any component in the Canvas to see its corresponding properties in the Properties Sidebar.
+
+<Frame>
+  <video
+    autoPlay
+    muted
+    loop
+    playsInline
+    title="Components and properties"
+    className="w-full aspect-video"
+    src="/images/quickstart/components-and-properties.mp4"
+  ></video>
+</Frame>
+
+## Breadcrumbs
+
+To better understand the structure of different layouts, you can use [Breadcrumbs](/product/layouts#breadcrumbs) which allow finer granularity on navigating and selecting components. To activate Breadcrumbs, hover over the label of a component and you'll see a list of its containing components.
+
+<Frame>
+  <video
+    autoPlay
+    muted
+    loop
+    playsInline
+    title="Components and properties"
+    className="w-full aspect-video"
+    src="/images/quickstart/breadcrumbs.mp4"
+  ></video>
+</Frame>
+
+## Customizing the hero
+
+Now that you understand the basic layout of components, let's start to make some changes. Click once on the Text component that says **This is a header for this company** to select it. You can also double click the component to update its text inline.
+
+Update that text to say **Welcome to Makeswift**.
+
+<Frame>
+  <video
+    autoPlay
+    muted
+    loop
+    playsInline
+    title="Update hero text"
+    className="w-full aspect-video"
+    src="/images/quickstart/update-hero-text.mp4"
+  ></video>
+</Frame>
+
+<Note>
+  There are several built-in components in Makeswift including
+  [Box](/product/components#box), [Text](/product/components#text),
+  [Image](/product/components#image), and several more. For full reference,
+  check out the [Component docs](/product/components).
+</Note>
+
+Notice that you've lost the green accent color in the text. To fix this, select the text **Makeswift**. In the Properties Sidebar, under the **Text style** panel, click the color picker. Then, choose the green accent color.
+
+<Frame>
+  <video
+    autoPlay
+    muted
+    loop
+    playsInline
+    title="Update hero text color"
+    className="w-full aspect-video"
+    src="/images/quickstart/hero-text-color.mp4"
+  ></video>
+</Frame>
+
+There are various properties you can change for each selected component. For example, with Text components, you can change font size, weight, color, and more. You can also save these settings to be reused in your site. You'll learn more about this in the next section.
+
+## In the next section...
+
+You'll learn how to customize colors and text styles to define your site's look and feel.