Updates:

-Create a dummy list to load sample data
-Create a card data template to show car list
-Add car image sample data

src/pages/home.f7.html

@@ -76,7 +76,7 @@
           </p>
         </div>
       </div>
-      <div class="block cont text-align-center">
+      <div class="block stack-content text-align-center">
         <div class="card sub-item">
           <div class="sub-header text-align-center">Goede overdracht</div>
           <div class="card-content card-content-padding">
@@ -102,6 +102,27 @@
           </div>
         </div>
       </div>
+      <div class="block-title">Leen aanbod</div>
+      <div class="block">
+        <div class="stack-content">
+        ${CarList.length > 0 && $h`
+        ${CarList.map((item) => $h`
+          <div class="card sub-item">
+            <div class="card-header">
+              ${item.manufacturerName} ${item.model} ${item.year} <br />
+            </div>
+            <div class="card-content card-content-padding">
+              <img width="284" height="160" class="" src="${item.imagePath}" />
+            </div>
+            <div class="card-footer">
+              <span><i class="icon material-symbols-outlined color-yellow">location_on</i> ${item.locationName}</span>
+              <span><i class="icon material-symbols-outlined color-yellow">euro</i> vanaf  € ${item.price} per dag</span>
+            </div>
+          </div>
+        `)}
+        `}
+        </div>
+      </div>
       <div class="block block-outline inset list">
         <ul>
           <li>
@@ -117,16 +138,23 @@
   </div>
 </template>
 <script>
-export default (props, { $, $f7, $on }) => {
+import axios from 'axios';
-  $on('pageInit', () => {
+
+export default (props, { $, $f7, $on, $update, $onMounted, $f7route, $f7router }) => {
+  let CarList = [];
+
+  $onMounted(async () => {
+    let result = await axios.get('/static/api/car-list.json');
+    CarList = result.data;
+    $update();
+  });
 
-  })
   return $render;
 };
 </script>
-
 <style>
-.cont{
+
+.stack-content{
   display: flex;
   flex-wrap: wrap;
 }

src/static/api/car-list.json

@@ -0,0 +1,57 @@
+[
+  {
+    "carId":1,
+    "ownerId": 39,
+    "manufacturerId": 1,
+    "manufacturerName": "Volkswagen",
+    "model": "GTI",
+    "year": 2021,
+    "imagePath": "./static/images/volksw-gti.jpg", 
+    "price": 29.00,
+    "locationName":"Not here"
+  },
+  {
+    "carId":2,
+    "ownerId": 40,
+    "manufacturerId": 2,
+    "manufacturerName": "Mercedes",
+    "model": "MacLaren",
+    "year": 2022,
+    "imagePath": "./static/images/mercedes-mclaren.jpg",
+    "price": 59.00,
+    "locationName":"Not here either"
+  },
+  {
+    "carId":3,
+    "ownerId": 41,
+    "manufacturerId": 3,
+    "manufacturerName": "Nissan",
+    "model": "GT-R Nissmo",
+    "year": 2023,
+    "imagePath": "./static/images/nissan-gt-r-nismo.jpg",
+    "price": 69.00,
+    "locationName":"Not here either"
+  },
+  {
+    "carId":4,
+    "ownerId": 42,
+    "manufacturerId": 4,
+    "manufacturerName": "Ford",
+    "model": "Mustang Shellby",
+    "year": 2019,
+    "imagePath": "./static/images/ford-mustang-shelby-t500.jpg",
+    "price": 65.00,
+    "locationName":"Not here either"
+  },
+  {
+    "carId":5,
+    "ownerId": 43,
+    "manufacturerId": 5,
+    "manufacturerName": "Audi",
+    "model": "RS3 Daytona",
+    "year": 2018,
+    "imagePath": "./static/images/audi-rs3-daytona.jpg",
+    "price": 49.00,
+    "locationName":"Not here either"
+  }
+]