| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| background: var(--dark); |
| color: var(--light); |
| padding: 2rem 0; |
| } |
| .footer-container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 20px; |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 2rem; |
| } |
| .footer-logo { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| margin-bottom: 1rem; |
| } |
| .footer-logo-img { |
| width: 32px; |
| height: 32px; |
| border-radius: 8px; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| } |
| .footer-logo-text { |
| font-weight: 600; |
| } |
| .footer-about { |
| max-width: 300px; |
| } |
| .footer-heading { |
| font-weight: 600; |
| margin-bottom: 1rem; |
| color: white; |
| } |
| .footer-links { |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| } |
| .footer-link { |
| color: var(--gray); |
| text-decoration: none; |
| transition: color 0.2s; |
| } |
| .footer-link:hover { |
| color: var(--light); |
| } |
| .footer-bottom { |
| margin-top: 2rem; |
| padding-top: 1rem; |
| border-top: 1px solid rgba(255,255,255,0.1); |
| display: flex; |
| justify-content: space-between; |
| flex-wrap: wrap; |
| gap: 1rem; |
| } |
| </style> |
| |
| <div class="footer-container"> |
| <div class="footer-about"> |
| <div class="footer-logo"> |
| <div class="footer-logo-img"></div> |
| <span class="footer-logo-text">SafeSwitch</span> |
| </div> |
| <p>Tryggare bilaffärer för privatpersoner och företag.</p> |
| </div> |
| |
| <div> |
| <h3 class="footer-heading">Produkt</h3> |
| <div class="footer-links"> |
| <a href="#privat" class="footer-link">För privatpersoner</a> |
| <a href="#foretag" class="footer-link">För företag</a> |
| <a href="#hur-funkar" class="footer-link">Hur det funkar</a> |
| <a href="#bokademo" class="footer-link">Boka demo</a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="footer-heading">Företag</h3> |
| <div class="footer-links"> |
| <a href="#om-oss" class="footer-link">Om oss</a> |
| <a href="#" class="footer-link">Karriär</a> |
| <a href="#" class="footer-link">Nyheter</a> |
| <a href="#" class="footer-link">Kontakt</a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="footer-heading">Juridik</h3> |
| <div class="footer-links"> |
| <a href="#" class="footer-link">Integritetspolicy</a> |
| <a href="#" class="footer-link">Användarvillkor</a> |
| <a href="#" class="footer-link">Cookies</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="footer-bottom"> |
| <span>© ${new Date().getFullYear()} SafeSwitch AB. Alla rättigheter reserverade.</span> |
| <div class="footer-links" style="flex-direction:row;gap:1rem;"> |
| <a href="#" class="footer-link">Svenska</a> |
| </div> |
| </div> |
| `; |
| } |
| } |
|
|
| customElements.define('custom-footer', CustomFooter); |