| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| width: 100%; |
| background-color: #0f172a; |
| color: white; |
| } |
| .footer-container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 3rem 2rem; |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 2rem; |
| } |
| .footer-logo { |
| font-size: 1.5rem; |
| font-weight: 700; |
| margin-bottom: 1rem; |
| } |
| .footer-description { |
| color: #94a3b8; |
| margin-bottom: 1.5rem; |
| line-height: 1.6; |
| } |
| .footer-heading { |
| font-size: 1.125rem; |
| font-weight: 600; |
| margin-bottom: 1.5rem; |
| text-transform: uppercase; |
| } |
| .footer-links { |
| display: flex; |
| flex-direction: column; |
| gap: 0.75rem; |
| } |
| .footer-link { |
| color: #94a3b8; |
| text-decoration: none; |
| transition: color 0.3s ease; |
| } |
| .footer-link:hover { |
| color: white; |
| } |
| .contact-item { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| margin-bottom: 1rem; |
| color: #94a3b8; |
| } |
| .contact-icon { |
| width: 1.25rem; |
| height: 1.25rem; |
| } |
| .copyright { |
| text-align: center; |
| padding: 1.5rem; |
| border-top: 1px solid #1e293b; |
| color: #94a3b8; |
| font-size: 0.875rem; |
| } |
| </style> |
| <footer> |
| <div class="footer-container"> |
| <div> |
| <div class="footer-logo">ABC SECURITY</div> |
| <p class="footer-description">Top Security Solutions for Stellenbosch and the Western Cape. Your safety is our priority.</p> |
| </div> |
| <div> |
| <h3 class="footer-heading">Services</h3> |
| <div class="footer-links"> |
| <a href="#" class="footer-link">Armed Response</a> |
| <a href="#" class="footer-link">CCTV Monitoring</a> |
| <a href="#" class="footer-link">Commercial Guarding</a> |
| <a href="#" class="footer-link">Technical Support</a> |
| </div> |
| </div> |
| <div> |
| <h3 class="footer-heading">Company</h3> |
| <div class="footer-links"> |
| <a href="#" class="footer-link">About Us</a> |
| <a href="#" class="footer-link">Our Team</a> |
| <a href="#" class="footer-link">Careers</a> |
| <a href="#" class="footer-link">Testimonials</a> |
| </div> |
| </div> |
| <div> |
| <h3 class="footer-heading">Contact</h3> |
| <div class="contact-item"> |
| <i data-feather="phone" class="contact-icon"></i> |
| <a href="tel:+27218874777" class="footer-link">021 887 4777</a> |
| </div> |
| <div class="contact-item"> |
| <i data-feather="mail" class="contact-icon"></i> |
| <span>info@abcsecurity.co.za</span> |
| </div> |
| <div class="contact-item"> |
| <i data-feather="map-pin" class="contact-icon"></i> |
| <span>Stellenbosch, Western Cape</span> |
| </div> |
| </div> |
| </div> |
| <div class="copyright"> |
| © ${new Date().getFullYear()} ABC SECURITY. All rights reserved. |
| </div> |
| </footer> |
| `; |
| } |
| } |
|
|
| customElements.define('custom-footer', CustomFooter); |
