Update products.mdx based on issue #216

Author: kgowru

fern/products/docs/pages/navigation/products.mdx

@@ -92,79 +92,81 @@ The optional parameters are: `image`, `icon`, `subtitle`, `slug`, and `versions`
 
 <Note>If you provide both an `image` and an `icon`, the `image` will take precedence.</Note>
 
-The below example is a `docs.yml` configuration for a site with two products, Product A and Product B.
+The below example is a `docs.yml` configuration for a site with two products:
 
 <CodeBlock title="docs.yml">
-```yaml {2-3, 8-9}
+```yaml
 products:
-  - display-name: Product A
-    path: ./products/product-a.yml
-    icon: fa-solid fa-leaf # optional
-    slug: product-a # optional
-    subtitle: Product A subtitle # optional
-
-  - display-name: Product B
-    path: ./products/product-b/latest.yml # <-- default showing latest
-    image: ./images/product-b.png # optional
-    slug: product-b # optional
-    subtitle: Product B subtitle # optional
+  - display-name: Data API
+    path: ./products/data/versions/v2.yml
+    subtitle: Integrate with Webflow
+    icon: fa-light fa-database
+    image: ./assets/product-selector/data-api-image.svg
+    slug: data
+    versions:
+      - display-name: v2
+        slug: v2.0.0
+        path: ./products/data/versions/v2.yml
+      - display-name: v2 (beta)
+        slug: v2.0.0-beta
+        path: ./products/data/versions/v2-beta.yml
+      - display-name: v1 (legacy)
+        slug: v1.0.0
+        path: ./products/data/versions/v1.yml
+
+  - display-name: Commerce API
+    path: ./products/commerce.yml
+    subtitle: Power custom commerce experiences
+    icon: fa-light fa-shopping-cart
+    image: ./assets/product-selector/commerce-api-image.svg
+    slug: commerce
 ```
 </CodeBlock>
 </Step>
 <Step title="Add versioning to your products (optional)">
 
 You can optionally add versions to a product. Versioned and unversioned products can live next to each other in your site. Each version of a single product has its own `yml` file.
 
-In the below example, Product A is **unversioned** and Product B is **versioned**:
-
-<CodeBlock>
-
-  ```bash {8, 10-17}
-  fern/
-    ├─ fern.config.json
-    ├─ generators.yml
-    ├─ docs.yml
-    ├─ pages/
-      ├─ ...
-    └─ products/
-      ├── product-a.yml # basic unversioned product
-      └── product-b/ # versioned product
-          ├─ product-b.yml
-          └─ versions/
-            ├─ latest/
-            │  ├─ latest.yml
-            │  └─ pages/...
-            └─ v2/
-              ├─ v2.yml
-              └─ pages/...
-  ```
-</CodeBlock>
+To add versions to a product:
 
-The top-level `doc.yml` configuration for a Fern Docs website containing two products, one unversioned and one versioned, might look something like this:
+1. Create a `versions` folder inside your product directory
+2. Add a yml file for each version
+3. Configure the versions in your product's entry in docs.yml:
 
 <CodeBlock title="docs.yml">
-```yaml {2, 8, 13-17}
+```yaml
 products:
-  - display-name: Product A # unversioned
-    path: ./products/product-a.yml
-    icon: fa-solid fa-leaf # optional
-    slug: product-a # optional
-    subtitle: Product A subtitle # optional
-
-  - display-name: Product B # versioned
-    path: ./products/product-b/latest.yml # <-- default showing latest
-    image: ./images/product-b.png # optional
-    slug: product-b # optional
-    subtitle: Product B subtitle # optional
-    versions: # optional
-      - display-name: Latest
-        path: ./products/product-b/latest.yml
-      - display-name: V2
-        path: ./products/product-b/v2.yml
+  - display-name: Data API 
+    path: ./products/data/versions/v2.yml # Default version shown
+    subtitle: Integrate with Webflow
+    icon: fa-light fa-database
+    slug: data
+    versions:
+      - display-name: v2
+        slug: v2.0.0
+        path: ./products/data/versions/v2.yml
+      - display-name: v2 (beta)
+        slug: v2.0.0-beta  
+        path: ./products/data/versions/v2-beta.yml
+      - display-name: v1 (legacy)
+        slug: v1.0.0
+        path: ./products/data/versions/v1.yml
 ```
 </CodeBlock>
 
-For more information on setting up versioned products, follow our [versioning docs](/docs/navigation/versions).
+The folder structure would look like:
+
+```bash
+fern/
+  └─ products/
+      └─ data/
+          └─ versions/
+              ├─ v2.yml
+              ├─ v2-beta.yml 
+              └─ v1.yml
+```
+
+For more information on versioning, see our [versioning docs](/docs/navigation/versions).
 </Step>
 <Step title="Remove extra navigation from docs.yml">
 
@@ -234,4 +236,4 @@ The dropdown menus for product and version selectors can be customized using the
       <img src="webflow-version-selector.avif" alt="Example of a styled version selector" />
     </Frame>
   </Tab>
-</Tabs> 
+</Tabs>