add image placeholder; add dialog in listing

js/components/pages/page-home.js

@@ -1,4 +1,5 @@
 import { t, i18n } from '../../i18n.js';
+import { mockListings } from '../../data/mock-listings.js';
 import '../listing-card.js';
 import '../search-box.js';
 
@@ -21,20 +22,19 @@ class PageHome extends HTMLElement {
             <section class="recent-listings">
                 <h2>${t('home.recentListings')}</h2>
                 <div class="listings-grid">
-                    ${this.renderPlaceholderListings()}
+                    ${this.renderListings()}
                 </div>
             </section>
         `;
     }
 
-    renderPlaceholderListings() {
-        const placeholders = Array(10).fill(null);
-        return placeholders.map((_, i) => /* html */`
+    renderListings() {
+        return mockListings.map(listing => /* html */`
             <listing-card 
-                listing-id="${i + 1}"
-                title="${t('home.placeholderTitle')}"
-                price="699"
-                location="${t('home.placeholderLocation')}"
+                listing-id="${listing.id}"
+                title="${listing.title}"
+                price="${listing.price}"
+                location="${listing.location}"
             ></listing-card>
         `).join('');
     }