improve markup

js/components/pages/page-home.js

@@ -13,17 +13,11 @@ class PageHome extends HTMLElement {
     }
 
     render() {
-        this.innerHTML = /* html */ `
+        this.innerHTML = /* html */`
             <section class="search-section">
                 <search-box></search-box>
             </section>
             
-            <section class="categories-desktop">
-                <div class="category-badges">
-                    ${this.renderCategoryBadges()}
-                </div>
-            </section>
-            
             <section class="recent-listings">
                 <h2>${t('home.recentListings')}</h2>
                 <div class="listings-grid">
@@ -33,13 +27,6 @@ class PageHome extends HTMLElement {
         `;
     }
 
-    renderCategoryBadges() {
-        const topCategories = ['electronics', 'vehicles', 'furniture', 'clothing', 'sports'];
-        return topCategories.map(cat => `
-            <a href="#/search?category=${cat}" class="badge">${t(`categories.${cat}`)}</a>
-        `).join('');
-    }
-
     renderPlaceholderListings() {
         const placeholders = Array(10).fill(null);
         return placeholders.map((_, i) => /* html */`
@@ -55,49 +42,12 @@ class PageHome extends HTMLElement {
 customElements.define('page-home', PageHome);
 
 const style = document.createElement('style');
-style.textContent = /* css */ `
+style.textContent = /* css */`
     /* Search Section */
     page-home .search-section {
         padding: var(--space-xl) 0;
     }
     
-    /* Category Badges (Desktop only) */
-    page-home .categories-desktop {
-        display: none;
-        margin-bottom: var(--space-xl);
-    }
-    
-    @media (min-width: 768px) {
-        page-home .categories-desktop {
-            display: block;
-        }
-    }
-    
-    page-home .category-badges {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--space-sm);
-        justify-content: center;
-    }
-    
-    page-home .badge {
-        display: inline-block;
-        padding: var(--space-xs) var(--space-md);
-        background: var(--color-bg-secondary);
-        border: 1px solid var(--color-border);
-        border-radius: var(--radius-full);
-        color: var(--color-text);
-        text-decoration: none;
-        font-size: var(--font-size-sm);
-        transition: all var(--transition-fast);
-    }
-    
-    page-home .badge:hover {
-        background: var(--color-primary);
-        color: var(--color-bg);
-        border-color: var(--color-primary);
-    }
-    
     /* Listings */
     page-home section {
         margin-bottom: var(--space-xl);