docs(typography): update images

Resolves #5188

Author: benjamincanac

docs/content/docs/4.typography/4.images-and-embeds.md

@@ -11,12 +11,12 @@ Responsive images with automatic optimization and interactive zoom functionality
 ::tabs{class="gap-0"}
 
 :::code-preview{label="Preview" class="[&>div>p]:my-0"}
-![Image](/assets/docs/japan.jpg)
+![Image](/assets/templates/nuxt/dashboard-dark.png)
 
 #code
 
 ```mdc
-![Image](/assets/docs/japan.jpg)
+![Image](/assets/templates/nuxt/dashboard-dark.png)
 ```
 
 :::
@@ -38,12 +38,12 @@ By default, images support interactive zoom: clicking an image opens it in a mod
 To prevent zoom on a specific image, add the `:zoom="false"` attribute.
 
 ::code-preview{class="[&>div>p]:my-0"}
-![Image without zoom](/assets/docs/japan.jpg){:zoom="false"}
+![Image without zoom](/assets/templates/nuxt/dashboard-dark.png){:zoom="false"}
 
 #code
 
 ```mdc
-![Image without zoom](/assets/docs/japan.jpg){:zoom="false"}
+![Image without zoom](/assets/templates/nuxt/dashboard-dark.png){:zoom="false"}
 ```
 
 ::
@@ -53,12 +53,12 @@ To prevent zoom on a specific image, add the `:zoom="false"` attribute.
 Images automatically adapt to their container while maintaining aspect ratio. You can control sizing through markdown or HTML attributes when needed.
 
 ::code-preview
-![Small Image](/assets/docs/japan.jpg){width="300"}
+![Small Image](/assets/templates/nuxt/dashboard-dark.png){width="300"}
 
 #code
 
 ```mdc
-![Small Image](/assets/docs/japan.jpg){width="300"}
+![Small Image](/assets/templates/nuxt/dashboard-dark.png){width="300"}
 ```
 
 ::