Built out the Services, Projects and Contact Page. Ensure that the links in the footer work and are properly routed.

index.html

@@ -112,14 +112,14 @@
                     <h1 class="text-5xl md:text-7xl font-extrabold mb-6 leading-tight">Safe & Professional Tree Removal</h1>
                     <p class="text-xl md:text-2xl mb-8 text-gray-200">Expert care for your property. Precision cutting, stump grinding, and 24/7 emergency storm services.</p>
                     <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                        <a href="#contact" onclick="router.navigate('contact')" class="bg-secondary-600 hover:bg-secondary-700 text-white font-bold py-4 px-8 rounded-lg shadow-lg transition transform hover:-translate-y-1">
+                        <a href="javascript:void(0)" onclick="window.router.navigate('contact')" class="bg-secondary-600 hover:bg-secondary-700 text-white font-bold py-4 px-8 rounded-lg shadow-lg transition transform hover:-translate-y-1 cursor-pointer">
                             Get Free Estimate
                         </a>
-                        <a href="#services" onclick="router.navigate('services')" class="bg-white/10 hover:bg-white/20 backdrop-blur-md text-white font-bold py-4 px-8 rounded-lg border border-white/30 transition">
+                        <a href="javascript:void(0)" onclick="window.router.navigate('services')" class="bg-white/10 hover:bg-white/20 backdrop-blur-md text-white font-bold py-4 px-8 rounded-lg border border-white/30 transition cursor-pointer">
                             Our Services
                         </a>
                     </div>
-                </div>
+</div>
             </div>
 
             <!-- Trust Indicators -->
@@ -168,8 +168,8 @@
                             </div>
                             <h4 class="text-xl font-bold mb-2">Tree Removal</h4>
                             <p class="text-gray-600 mb-4">Safe, strategic removal of dangerous or unwanted trees with minimal impact on your landscape.</p>
-                            <a href="#services" onclick="router.navigate('services')" class="text-secondary-600 font-bold hover:text-secondary-800 inline-flex items-center">Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
-                        </div>
+                            <a href="javascript:void(0)" onclick="window.router.navigate('services')" class="text-secondary-600 font-bold hover:text-secondary-800 inline-flex items-center cursor-pointer">Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
+</div>
                     </div>
                     <!-- Service Card 2 -->
                     <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300 group">
@@ -182,8 +182,8 @@
                             </div>
                             <h4 class="text-xl font-bold mb-2">Stump Grinding</h4>
                             <p class="text-gray-600 mb-4">Professional grinding equipment to remove unsightly stumps and prevent regrowth or pest issues.</p>
-                            <a href="#services" onclick="router.navigate('services')" class="text-secondary-600 font-bold hover:text-secondary-800 inline-flex items-center">Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
-                        </div>
+                            <a href="javascript:void(0)" onclick="window.router.navigate('services')" class="text-secondary-600 font-bold hover:text-secondary-800 inline-flex items-center cursor-pointer">Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
+</div>
                     </div>
                     <!-- Service Card 3 -->
                     <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300 group">
@@ -196,8 +196,8 @@
                             </div>
                             <h4 class="text-xl font-bold mb-2">Trimming & Pruning</h4>
                             <p class="text-gray-600 mb-4">Expert cutting to improve tree health, aesthetics, and safety around power lines and structures.</p>
-                            <a href="#services" onclick="router.navigate('services')" class="text-secondary-600 font-bold hover:text-secondary-800 inline-flex items-center">Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
-                        </div>
+                            <a href="javascript:void(0)" onclick="window.router.navigate('services')" class="text-secondary-600 font-bold hover:text-secondary-800 inline-flex items-center cursor-pointer">Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
+</div>
                     </div>
                 </div>
             </div>
@@ -320,7 +320,6 @@
 
     <!-- Footer Component -->
     <custom-footer></custom-footer>
-
     <!-- Web Components Scripts -->
     <script>
         // HEADER COMPONENT
@@ -354,6 +353,7 @@
                             display: flex;
                             align-items: center;
                             gap: 0.5rem;
+                            cursor: pointer;
                         }
                         .nav-desktop {
                             display: none;
@@ -383,6 +383,7 @@
                             font-weight: 600;
                             text-decoration: none;
                             transition: background-color 0.2s;
+                            cursor: pointer;
                         }
                         .btn-cta:hover {
                             background-color: #b45309;
@@ -420,39 +421,92 @@
                             text-decoration: none;
                             font-weight: 600;
                             border-bottom: 1px solid #f1f5f9;
+                            cursor: pointer;
+                        }
+                        .mobile-link:hover {
+                            color: #059669;
                         }
                     </style>
                     <header>
                         <div class="container">
-                            <a href="#home" class="logo" onclick="window.router.navigate('home')">
-                                <i data-feather="box" style="fill: #059669;"></i> TimberTitan
-                            </a>
+                            <div class="logo" data-navigate="home">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
+                                TimberTitan
+                            </div>
                             
                             <nav class="nav-desktop">
-                                <a onclick="window.router.navigate('home')" class="nav-link active" data-target="home">Home</a>
-                                <a onclick="window.router.navigate('services')" class="nav-link" data-target="services">Services</a>
-                                <a onclick="window.router.navigate('projects')" class="nav-link" data-target="projects">Projects</a>
-                                <a onclick="window.router.navigate('contact')" class="nav-link" data-target="contact">Contact</a>
-                                <a onclick="window.router.navigate('contact')" class="btn-cta">Get Quote</a>
+                                <span class="nav-link active" data-target="home">Home</span>
+                                <span class="nav-link" data-target="services">Services</span>
+                                <span class="nav-link" data-target="projects">Projects</span>
+                                <span class="nav-link" data-target="contact">Contact</span>
+                                <span class="btn-cta" data-navigate="contact">Get Quote</span>
                             </nav>
 
-                            <button class="mobile-menu-btn" onclick="document.querySelector('.mobile-menu').classList.toggle('open')">
-                                <i data-feather="menu"></i>
+                            <button class="mobile-menu-btn">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
                             </button>
                         </div>
                         <div class="mobile-menu">
-                            <a onclick="window.router.navigate('home')" class="mobile-link">Home</a>
-                            <a onclick="window.router.navigate('services')" class="mobile-link">Services</a>
-                            <a onclick="window.router.navigate('projects')" class="mobile-link">Projects</a>
-                            <a onclick="window.router.navigate('contact')" class="mobile-link">Contact</a>
+                            <span class="mobile-link" data-navigate="home">Home</span>
+                            <span class="mobile-link" data-navigate="services">Services</span>
+                            <span class="mobile-link" data-navigate="projects">Projects</span>
+                            <span class="mobile-link" data-navigate="contact">Contact</span>
                         </div>
                     </header>
                 `;
-                feather.replace();
+                
+                // Add click handlers after DOM is ready
+                setTimeout(() => {
+                    const logo = this.shadowRoot.querySelector('.logo');
+                    const navLinks = this.shadowRoot.querySelectorAll('.nav-link');
+                    const mobileLinks = this.shadowRoot.querySelectorAll('.mobile-link');
+                    const ctaBtn = this.shadowRoot.querySelector('.btn-cta');
+                    const menuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
+                    const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
+                    
+                    // Logo click
+                    if (logo) {
+                        logo.addEventListener('click', () => {
+                            if (window.router) window.router.navigate('home');
+                        });
+                    }
+                    
+                    // Nav links
+                    navLinks.forEach(link => {
+                        link.addEventListener('click', () => {
+                            const target = link.getAttribute('data-target');
+                            if (window.router) window.router.navigate(target);
+                        });
+                    });
+                    
+                    // Mobile links
+                    mobileLinks.forEach(link => {
+                        link.addEventListener('click', () => {
+                            const target = link.getAttribute('data-navigate');
+                            if (window.router) {
+                                window.router.navigate(target);
+                                mobileMenu.classList.remove('open');
+                            }
+                        });
+                    });
+                    
+                    // CTA button
+                    if (ctaBtn && ctaBtn.getAttribute('data-navigate')) {
+                        ctaBtn.addEventListener('click', () => {
+                            if (window.router) window.router.navigate('contact');
+                        });
+                    }
+                    
+                    // Mobile menu toggle
+                    if (menuBtn && mobileMenu) {
+                        menuBtn.addEventListener('click', () => {
+                            mobileMenu.classList.toggle('open');
+                        });
+                    }
+                }, 0);
             }
         }
         customElements.define('custom-header', CustomHeader);
-
         // FOOTER COMPONENT
         class CustomFooter extends HTMLElement {
             connectedCallback() {
@@ -491,14 +545,27 @@
                         .footer-links li {
                             margin-bottom: 0.75rem;
                         }
-                        .footer-links a {
+                        .footer-link {
                             color: #94a3b8;
-                            text-decoration: none;
+                            cursor: pointer;
                             transition: color 0.2s;
+                            display: inline-block;
                         }
-                        .footer-links a:hover {
+                        .footer-link:hover {
                             color: white;
                         }
+                        .contact-info {
+                            list-style: none;
+                            padding: 0;
+                            margin: 0;
+                        }
+                        .contact-info li {
+                            margin-bottom: 0.75rem;
+                            color: #94a3b8;
+                            display: flex;
+                            align-items: center;
+                            gap: 0.5rem;
+                        }
                         .copyright {
                             text-align: center;
                             border-top: 1px solid #334155;
@@ -506,49 +573,112 @@
                             padding-top: 2rem;
                             font-size: 0.875rem;
                         }
+                        .social-links {
+                            display: flex;
+                            gap: 1rem;
+                            margin-top: 1rem;
+                        }
+                        .social-link {
+                            width: 40px;
+                            height: 40px;
+                            background-color: #334155;
+                            border-radius: 50%;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            cursor: pointer;
+                            transition: background-color 0.2s;
+                        }
+                        .social-link:hover {
+                            background-color: #d97706;
+                        }
+                        .social-link svg {
+                            width: 18px;
+                            height: 18px;
+                        }
                     </style>
                     <footer>
                         <div class="footer-grid">
                             <div class="footer-col">
                                 <h3>TimberTitan</h3>
                                 <p>Professional tree care services dedicated to safety, quality, and customer satisfaction. Serving the community since 1995.</p>
+                                <div class="social-links">
+                                    <div class="social-link">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
+                                    </div>
+                                    <div class="social-link">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+                                    </div>
+                                    <div class="social-link">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg>
+                                    </div>
+                                </div>
                             </div>
                             <div class="footer-col">
                                 <h3>Services</h3>
                                 <ul class="footer-links">
-                                    <li><a href="#" onclick="window.router.navigate('services')">Tree Removal</a></li>
-                                    <li><a href="#" onclick="window.router.navigate('services')">Stump Grinding</a></li>
-                                    <li><a href="#" onclick="window.router.navigate('services')">Emergency Services</a></li>
-                                    <li><a href="#" onclick="window.router.navigate('services')">Land Clearing</a></li>
+                                    <li><span class="footer-link" data-navigate="services">Tree Removal</span></li>
+                                    <li><span class="footer-link" data-navigate="services">Stump Grinding</span></li>
+                                    <li><span class="footer-link" data-navigate="services">Emergency Services</span></li>
+                                    <li><span class="footer-link" data-navigate="services">Land Clearing</span></li>
+                                    <li><span class="footer-link" data-navigate="services">Tree Pruning</span></li>
+                                    <li><span class="footer-link" data-navigate="services">Cabling & Bracing</span></li>
                                 </ul>
                             </div>
                             <div class="footer-col">
                                 <h3>Quick Links</h3>
                                 <ul class="footer-links">
-                                    <li><a href="#" onclick="window.router.navigate('home')">About Us</a></li>
-                                    <li><a href="#" onclick="window.router.navigate('projects')">Recent Projects</a></li>
-                                    <li><a href="#" onclick="window.router.navigate('contact')">Contact Us</a></li>
-                                    <li><a href="#">Privacy Policy</a></li>
+                                    <li><span class="footer-link" data-navigate="home">Home</span></li>
+                                    <li><span class="footer-link" data-navigate="services">All Services</span></li>
+                                    <li><span class="footer-link" data-navigate="projects">Recent Projects</span></li>
+                                    <li><span class="footer-link" data-navigate="contact">Get Free Quote</span></li>
+                                    <li><span class="footer-link">Privacy Policy</span></li>
                                 </ul>
                             </div>
                             <div class="footer-col">
-                                <h3>Contact</h3>
-                                <ul class="footer-links">
-                                    <li>(555) 123-4567</li>
-                                    <li>help@timbertitan.com</li>
-                                    <li>123 Forest Drive, CA</li>
+                                <h3>Contact Us</h3>
+                                <ul class="contact-info">
+                                    <li>
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+                                        (555) 123-4567
+                                    </li>
+                                    <li>
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+                                        help@timbertitan.com
+                                    </li>
+                                    <li>
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+                                        123 Forest Drive, Woodland Hills, CA
+                                    </li>
+                                    <li>
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+                                        Mon - Sat: 7AM - 6PM
+                                    </li>
                                 </ul>
                             </div>
                         </div>
                         <div class="copyright">
-                            <p>&copy; 2023 TimberTitan Services. All rights reserved.</p>
+                            <p>&copy; 2023 TimberTitan Services. All rights reserved. | Licensed & Insured | Lic# 123456</p>
                         </div>
                     </footer>
                 `;
+                
+                // Add click handlers
+                setTimeout(() => {
+                    const footerLinks = this.shadowRoot.querySelectorAll('.footer-link');
+                    footerLinks.forEach(link => {
+                        link.addEventListener('click', () => {
+                            const target = link.getAttribute('data-navigate');
+                            if (window.router && target) {
+                                window.router.navigate(target);
+                            }
+                        });
+                    });
+                }, 0);
             }
         }
         customElements.define('custom-footer', CustomFooter);
-    </script>
+</script>
 
     <!-- Main Logic Script -->
     <script src="script.js"></script>

script.js

@@ -57,7 +57,6 @@ const projectsData = [
     { title: "Hazardous Limb Removal", location: "Suburbia", img: "http://static.photos/nature/640x360/14" },
     { title: "Commercial Clearing", location: "Industrial Park", img: "http://static.photos/nature/640x360/15" },
 ];
-
 class Router {
     constructor() {
         this.routes = ['home', 'services', 'projects', 'contact'];
@@ -107,6 +106,9 @@ class Router {
         // Load specific page data if needed
         if (pageId === 'services') this.loadServices();
         if (pageId === 'projects') this.loadProjects();
+        
+        // Close mobile menu if open
+        this.closeMobileMenu();
     }
 
     updateNavState(activeId) {
@@ -123,9 +125,21 @@ class Router {
             });
         }
     }
+    
+    closeMobileMenu() {
+        const header = document.querySelector('custom-header');
+        if (header && header.shadowRoot) {
+            const mobileMenu = header.shadowRoot.querySelector('.mobile-menu');
+            if (mobileMenu) {
+                mobileMenu.classList.remove('open');
+            }
+        }
+    }
 
     async loadServices() {
         const grid = document.getElementById('services-grid');
+        if (!grid) return;
+        
         // Check if already loaded to prevent re-render
         if (grid.children.length > 1 && !grid.querySelector('.spinner')) return;
 
@@ -141,22 +155,38 @@ class Router {
                     </div>
                     <div class="p-8 flex-grow flex flex-col">
                         <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center text-primary-600 mb-4">
-                            <i data-feather="${service.icon}"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                ${this.getIconPath(service.icon)}
+                            </svg>
                         </div>
                         <h4 class="text-xl font-bold mb-2">${service.title}</h4>
                         <p class="text-gray-600 mb-4 flex-grow">${service.desc}</p>
-                        <a href="#contact" onclick="window.router.navigate('contact')" class="text-secondary-600 font-bold hover:text-secondary-800 inline-flex items-center self-start">
-                            Request Service <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
-                        </a>
+                        <button onclick="window.router.navigate('contact')" class="text-secondary-600 font-bold hover:text-secondary-800 inline-flex items-center self-start cursor-pointer bg-transparent border-0 p-0">
+                            Request Service 
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-1"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+                        </button>
                     </div>
                 </div>
             `).join('');
-            feather.replace();
         }, 600);
     }
+    
+    getIconPath(iconName) {
+        const icons = {
+            'log-out': '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>',
+            'disc': '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/>',
+            'scissors': '<circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" y1="4" x2="8.12" y2="15.88"/><line x1="14.47" y1="14.48" x2="20" y2="20"/><line x1="8.12" y1="8.12" x2="12" y2="12"/>',
+            'alert-triangle': '<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>',
+            'map': '<polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/>',
+            'anchor': '<circle cx="12" cy="5" r="3"/><line x1="12" y1="22" x2="12" y2="8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/>'
+        };
+        return icons[iconName] || icons['log-out'];
+    }
 
     loadProjects() {
         const grid = document.getElementById('gallery-grid');
+        if (!grid) return;
+        
         if (grid.children.length > 0) return;
 
         const html = projectsData.map(proj => `
@@ -164,15 +194,16 @@ class Router {
                 <img src="${proj.img}" alt="${proj.title}" class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
                 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex flex-col justify-end p-6">
                     <h4 class="text-white font-bold text-xl">${proj.title}</h4>
-                    <p class="text-gray-300 text-sm"><i data-feather="map-pin" class="w-3 h-3 inline"></i> ${proj.location}</p>
+                    <p class="text-gray-300 text-sm flex items-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+                        ${proj.location}
+                    </p>
                 </div>
             </div>
         `).join('');
         grid.innerHTML = html;
-        feather.replace();
     }
 }
-
 // Initialize Router when DOM is ready
 let router;
 document.addEventListener('DOMContentLoaded', () => {

style.css

@@ -46,8 +46,26 @@ body {
 .nav-link.active::after {
     width: 100%;
 }
-
 /* Utility for shadow root link handling (if needed) */
 a {
     text-decoration: none;
-}
+}
+
+/* Button reset for inline-flex buttons */
+button.bg-transparent {
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+}
+
+button.bg-transparent:hover {
+    text-decoration: none;
+}
+
+button.bg-transparent svg {
+    pointer-events: none;
+}