docs(mdx): switch snippet with figma diagrams

docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx

@@ -256,18 +256,13 @@ You can import dynamic MDX components instead of using filesystem routing for MD
 
 For example, you can have a dynamic route segment which loads MDX components from a separate directory:
 
-```txt
-  my-project
-  ├── app
-  │   └── blog
-  │       └── [slug]
-  │           └── page.(tsx/js)
-  ├── content
-  │   ├── welcome.(mdx/md)
-      └── about.(mdx/md)
-  |── mdx-components.(tsx/js)
-  └── package.json
-```
+<Image
+  alt="Route segments for dynamic MDX components"
+  srcLight="/docs/light/mdx-files.png"
+  srcDark="/docs/dark/mdx-files.png"
+  width="1600"
+  height="849"
+>
 
 [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) can be used to prerender the provided routes. By marking `dynamicParams` as `false`, accessing a route not defined in `generateStaticParams` will 404.