Create a guides section and put "For designers" into that

src/components/Navigation/Navigation.astro

@@ -20,6 +20,7 @@ interface Props {
       | CollectionEntry<"plugins">
       | CollectionEntry<"ci">
       | CollectionEntry<"account">
+      | CollectionEntry<"guides">
     )[];
     defaultOpen?: boolean;
     timeline?: boolean;

src/components/Navigation/SideNav.tsx

@@ -111,6 +111,7 @@ type Item = (
   | CollectionEntry<"plugins">
   | CollectionEntry<"ci">
   | CollectionEntry<"account">
+  | CollectionEntry<"guides">
 ) & {
   data: {
     sidebar: {

src/content/config.ts

@@ -57,6 +57,11 @@ const account = defineCollection({
   schema,
 });
 
+const guides = defineCollection({
+  type: "content",
+  schema,
+});
+
 export const collections = {
   getStarted,
   workflow,
@@ -67,4 +72,5 @@ export const collections = {
   plugins,
   ci,
   account,
+  guides,
 };

src/content/workflow/guide-for-reviewers.md → src/content/guides/guide-for-designers.md

@@ -1,15 +1,15 @@
 ---
 layout: "../../layouts/Layout.astro"
-title: Guide for reviewers
-description: How to use Chromatic for designers and product managers
-sidebar: { order: 3 }
+title: For designers
+description: How to use Chromatic for designers
+sidebar: { order: 1 }
 ---
 
-# Guide for reviewers
+# Guide for designers
 
-Chromatic is made for designers, product managers, and other stakeholders to collaborate with developers.
+Chromatic helps designers collaborate with developers on UI implementation.
 
-## Chromatic in the design and product process
+## In the design process
 
 Chromatic serves as a library that maps every part of your UI. Use it as a shared reference point to ensure that everyone is referencing the latest UI as they design and spec products.
 
@@ -31,7 +31,7 @@ During the specification process, you often need to describe complex UI behavior
 
 ---
 
-## Chromatic to track changes and sign-off
+## Track changes and sign-off on implementation
 
 [UI Review](/docs/review) is made for designers and product managers. It's a purpose-built tool for discussing implementation details and tracking sign-offs. Chromatic works behind the scenes to make the review process easy for teams by organizing change requests, notifying participants, and syncing with Git providers for pull requests checks. The key features for reviewers are:
 

src/layouts/Layout.astro

@@ -29,6 +29,7 @@ const collaborate = await getCollection("collaborate");
 const plugins = await getCollection("plugins");
 const ci = await getCollection("ci");
 const account = await getCollection("account");
+const guides = await getCollection("guides");
 
 const navItems = [
   // Manually add the introduction page to the top of the list
@@ -42,6 +43,7 @@ const navItems = [
     title: "Workflow",
     items: workflow,
     defaultOpen: true,
+    timeline: true,
   },  
   {
     title: "Configuration",
@@ -71,6 +73,10 @@ const navItems = [
     title: "Account",
     items: account,
   },
+  {
+    title: "Guides",
+    items: guides,
+  },
 ];
 
 const baseUrl = import.meta.env.BASE_URL;

src/pages/[slug].astro

@@ -14,6 +14,7 @@ export async function getStaticPaths() {
   const plugins = await getCollection("plugins");
   const ci = await getCollection("ci");
   const account = await getCollection("account");
+  const guides = await getCollection("guides");
   const notInNavigation = await getCollection("notInNavigation");
   const articles = [
     ...getStarted,
@@ -25,6 +26,7 @@ export async function getStaticPaths() {
     ...plugins,
     ...ci,
     ...account,
+    ...guides,
     ...notInNavigation,
   ];
   return articles.map((article) => ({