| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| footer { |
| background: #1f2937; |
| color: white; |
| padding: 3rem 2rem; |
| } |
| .footer-content { |
| max-width: 7xl; |
| margin: 0 auto; |
| } |
| .footer-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 2rem; |
| margin-bottom: 2rem; |
| } |
| .footer-section h3 { |
| font-weight: 600; |
| margin-bottom: 1rem; |
| } |
| .footer-section a { |
| color: #d1d5db; |
| text-decoration: none; |
| display: block; |
| margin-bottom: 0.5rem; |
| transition: color 0.3s ease; |
| } |
| .footer-section a:hover { |
| color: white; |
| } |
| .footer-bottom { |
| border-top: 1px solid #374151; |
| padding-top: 2rem; |
| text-align: center; |
| } |
| .social-links { |
| display: flex; |
| gap: 1rem; |
| margin-top: 1rem; |
| } |
| .social-links a { |
| color: #9ca3af; |
| transition: color 0.3s ease; |
| } |
| .social-links a:hover { |
| color: white; |
| } |
| </style> |
| <footer> |
| <div class="footer-content"> |
| <div class="footer-grid"> |
| <div class="footer-section"> |
| <h3 class="text-lg font-semibold">AI search analytics for marketing teams</h3> |
| </div> |
| <div class="footer-section"> |
| <h3 class="text-lg font-semibold">Product / Company</h3> |
| <a href="/">Home</a> |
| <a href="https://docs.peec.ai/intro-to-peec-ai">Docs</a> |
| <a href="https://peec.ai/pricing">Pricing</a> |
| <a href="https://peec.ai/careers">Careers</a> |
| </div> |
| <div class="footer-section"> |
| <h3 class="text-lg font-semibold">Follow Us</h3> |
| <div class="social-links"> |
| <a href="https://x.com/peec_ai">x.com</a> |
| <a href="https://www.linkedin.com/company/peec-ai/">LinkedIn</a> |
| </div> |
| </div> |
| </div> |
| <div class="footer-bottom"> |
| <p>©2025 Peec AI. All rights reserved.</p> |
| <div class="flex justify-center gap-4 mt-4"> |
| <a href="https://peec.ai/legal/privacy-policy">Privacy Policy</a> |
| <a href="https://peec.ai/legal/terms-of-use">Terms of Services</a> |
| <a href="https://peec.ai/legal/imprint">Imprint</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| `; |
| } |
| } |
|
|
| customElements.define('custom-footer', CustomFooter); |
