docs:replace placeholders with images

docs/main.typ

@@ -53,7 +53,7 @@
 
 // Abstract
 #align(center)[
-  #text(size: 12pt, weight: "bold")[Samenvatting]
+  #text(size: 12pt, weight: "bold")[Abstract]
 ]
 
 #par(first-line-indent: 0pt)[

docs/screenshots/find-detail.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
-  <rect width="1200" height="675" fill="#f2f2f2" stroke="#222" stroke-width="4" />
-  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="42" fill="#222">
-    Screenshot placeholder: find-detail
-  </text>
-</svg>

docs/screenshots/friends.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
-  <rect width="1200" height="675" fill="#f2f2f2" stroke="#222" stroke-width="4" />
-  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="42" fill="#222">
-    Screenshot placeholder: friends
-  </text>
-</svg>

docs/screenshots/home.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
-  <rect width="1200" height="675" fill="#f2f2f2" stroke="#222" stroke-width="4" />
-  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="42" fill="#222">
-    Screenshot placeholder: home
-  </text>
-</svg>

docs/screenshots/mobile.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
-  <rect width="1200" height="675" fill="#f2f2f2" stroke="#222" stroke-width="4" />
-  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="42" fill="#222">
-    Screenshot placeholder: mobile
-  </text>
-</svg>

docs/screenshots/notifications.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
-  <rect width="1200" height="675" fill="#f2f2f2" stroke="#222" stroke-width="4" />
-  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="42" fill="#222">
-    Screenshot placeholder: notifications
-  </text>
-</svg>

docs/sections/screenshots.typ

@@ -1,31 +1,28 @@
 #heading[Screenshots en gebruiksscenario's]
 
-In dit hoofdstuk worden enkele representatieve screenshots van de applicatie opgenomen. Om het
+In dit hoofdstuk worden enkele representatieve screenshots van de applicatie opgenomen.
-Typst-document compileerbaar te houden, zijn er placeholder-afbeeldingen voorzien in
-`docs/screenshots/`. Vervang deze placeholders later door echte screenshots (bijvoorbeeld PNG) en
-pas de bestandsnamen/paden hieronder aan.
 
 #figure(
-  image("../screenshots/home.svg"),
+  image("../screenshots/home.png"),
   caption: [Startscherm met fullscreen kaart en zijbalk met finds]
 )
 
 #figure(
-  image("../screenshots/find-detail.svg"),
+  image("../screenshots/find-detail.png"),
   caption: [Detailpagina van een find met media, likes, comments en rating]
 )
 
 #figure(
-  image("../screenshots/friends.svg"),
+  image("../screenshots/friends.png"),
   caption: [Vriendenoverzicht en privacy-bewuste filtering van finds]
 )
 
 #figure(
-  image("../screenshots/notifications.svg"),
+  image("../screenshots/notifications.png"),
   caption: [In-app notificaties en Web Push-permissies]
 )
 
 #figure(
-  image("../screenshots/mobile.svg"),
+  image("../screenshots/mobile.png"),
   caption: [Mobiele weergave met zijbalk en dynamische mapcentrering]
 )