Feat: multi-page quickstart (#52)

* 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

* chore: update references to Visual Builder and typos

* chore: updated typos and screenshot

developer/quickstart.mdx

@@ -64,7 +64,7 @@ You don't need an existing Makeswift account to get started with this guide.
   </Step>
 
   <Step title="Start building">
-    The browser redirects you to the Makeswift Builder once the integration is complete. If you skipped the template option, make sure to create a page.
+    The browser redirects you to the Makeswift Visual Builder once the integration is complete. If you skipped the template option, make sure to create a page.
 
     <Accordion title="How do I create a page?">
       <Frame>

product/builder-basics.mdx

@@ -1,10 +1,10 @@
 ---
-title: "Builder basics"
+title: "The basics"
 description: The Makeswift builder is where all of the magic of visual editing happens. It allows you to visually create and update enterprise-grade web experiences with intuitive tools at your disposal. Design beautiful layouts and easily customize your site to match your brand with bespoke components. What you see is what you get with the Makeswift Builder.
 icon: "hammer-brush" iconType: "solid"
 ---
 
-The builder is composed of 4 sections:
+The Visual Builder is composed of 4 sections:
 
 <Tabs>
   <Tab title="Navigation">

product/introduction.mdx

@@ -4,7 +4,7 @@ description: Makeswift is a composable visual page builder designed to unlock sp
 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).
+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
 
@@ -21,15 +21,15 @@ For full details on how to integrate Makeswift into a Next.js project, refer to
     Learn terminology to help you easily navigate Makeswift
   </Card>
   <Card
-    title="Builder basics"
+    title="Visual 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
+    Drag and drop elements on your page in the Makeswift Visual Builder
   </Card>
   <Card
     title="Components"

product/quickstart.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Creating your site"
-description: "Learn the basics of building with Makeswift including components, theming, responsive design, and publishing."
+description: "Learn the basics of building with Makeswift, including components, theming, responsive design, and publishing."
 icon: "circle-plus"
 ---
 
@@ -9,8 +9,8 @@ If you already have a site and want to create a new one, click the **Create new
 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
+  Starting with the Visual 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>
@@ -35,7 +35,7 @@ Choose the **Venture** template and click **Use this site**.
 
 ## 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:
+Once your new site is created, you'll be taken to the Visual Builder which is composed of 4 main sections:
 
 <Tabs>
   <Tab title="Navigation Sidebar">

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

@@ -8,7 +8,7 @@ In the previous section, you were briefly introduced to two important concepts:
 
 ## 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.
+You can access your site colors and text styles by clicking on the Site tab in the top right corner of the Properties Sidebar. 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 pressing 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.
 

product/quickstart/component-basics.mdx

@@ -20,7 +20,7 @@ Spend a few seconds exploring the Canvas and its components. You can click on an
 
 ## 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.
+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 ancestors.
 
 <Frame>
   <video

product/quickstart/desktop-and-mobile.mdx

@@ -31,7 +31,7 @@ The structure of this section looks like this:
 
 ## Preview different screen sizes
 
-With that in mind, let's take a look at what this layout looks like on a smaller screen. Use the dropdown menu to the right of the URL Bar at the top of the builder and select **Mobile**.
+With that in mind, let's take a look at what this layout looks like on a smaller screen. Use the dropdown menu to the right of the URL Bar at the top of the Visual Builder and select **Mobile**.
 
 <Frame>
   ![ Global component edit
@@ -47,18 +47,18 @@ If you compare the hero on desktop and mobile, you'll notice that the layout cha
   mode](/images/quickstart/responsive-vertical-hero.jpg)
 </Frame>
 
-If you explore the rest of the page, you'll notice a few other places where they layout has changed:
+If you explore the rest of the page, you'll notice a few other places where the layout has changed:
 
 - the navbar collapses to a hamburger menu
 - the list of features is stacked vertically
 
 This is called responsive design. To learn more about how to build responsive designs, check out the [Responsive design docs](/product/responsive-design).
 
-Styles always cascade from larger devices to smaller ones. These means you can build your core layout on desktop and then make adjustments for tablet and mobile.
+Styles always cascade from larger devices to smaller ones. This means you can build your core layout on desktop and then make adjustments for tablet and mobile.
 
 ## How to build a responsive layout
 
-To see how the responsive design for the hero was built, switch the view to desktop and select the `hero-content` component. Then, hover on the line that divides the two columns (text on the left and the image on the right). You're cursor will show an arrow pointing down and to the left. Clicking there will allow you to stack the two columns vertically. To undo this, you can hover over the line separating the two rows and click the arrow pointing up and to the right.
+To see how the responsive design for the hero was built, switch the view to desktop and select the `hero-content` component. Then, hover on the line that divides the two columns (text on the left and the image on the right). Your cursor will show an arrow pointing down and to the left. Clicking there will allow you to stack the two columns vertically. To undo this, you can hover over the line separating the two rows and click the arrow pointing up and to the right.
 
 <Frame>
   <video