Update products.mdx based on issue #216

Author: kgowru

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

@@ -113,58 +113,53 @@ products:
 </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>
+You can add versions to your products by specifying the versions in your `docs.yml` configuration. Each version must have its own corresponding YAML file.
 
-The top-level `doc.yml` configuration for a Fern Docs website containing two products, one unversioned and one versioned, might look something like this:
+Here's how to structure your versioned product configuration:
 
 <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 path
+    subtitle: Integrate with your API
+    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).
+Each version requires:
+- `display-name`: The version name shown in the UI
+- `path`: Path to the version's YAML configuration file
+- `slug`: URL-friendly identifier for the version (optional)
+
+Your file structure for a versioned product might look like this:
+
+```bash
+fern/
+  └─ products/
+      └─ data/
+          └─ versions/
+              ├─ v2.yml
+              ├─ v2-beta.yml
+              └─ v1.yml
+```
+
+<Note>
+Products can be mixed between versioned and unversioned in the same documentation site. You only need to add the `versions` configuration to products that require versioning.
+</Note>
+
+For more detailed information on versioning, see our [versioning documentation](/docs/navigation/versions).
 </Step>
 <Step title="Remove extra navigation from docs.yml">
 
@@ -234,4 +229,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>