| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| } |
| |
| footer { |
| background-color: #f9fafb; |
| border-top: 1px solid #e5e7eb; |
| padding: 40px 0 20px; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 16px; |
| } |
| |
| .footer-content { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 32px; |
| margin-bottom: 32px; |
| } |
| |
| .footer-column h3 { |
| font-size: 1.125rem; |
| font-weight: 600; |
| margin-bottom: 16px; |
| color: #1f2937; |
| } |
| |
| .footer-column ul { |
| list-style: none; |
| } |
| |
| .footer-column ul li { |
| margin-bottom: 12px; |
| } |
| |
| .footer-column ul li a { |
| text-decoration: none; |
| color: #6b7280; |
| transition: color 0.3s ease; |
| } |
| |
| .footer-column ul li a:hover { |
| color: #3b82f6; |
| } |
| |
| .social-links { |
| display: flex; |
| gap: 16px; |
| margin-top: 16px; |
| } |
| |
| .social-links a { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| background-color: #e5e7eb; |
| color: #4b5563; |
| transition: all 0.3s ease; |
| } |
| |
| .social-links a:hover { |
| background-color: #3b82f6; |
| color: white; |
| } |
| |
| .copyright { |
| padding-top: 24px; |
| border-top: 1px solid #e5e7eb; |
| text-align: center; |
| color: #6b7280; |
| font-size: 0.875rem; |
| } |
| |
| @media (max-width: 768px) { |
| .footer-content { |
| grid-template-columns: 1fr; |
| } |
| } |
| </style> |
| |
| <footer> |
| <div class="container"> |
| <div class="footer-content"> |
| <div class="footer-column"> |
| <h3>PromptCraft Studio</h3> |
| <p class="text-gray-600">Creating the perfect prompts for your AI-generated artwork needs.</p> |
| <div class="social-links"> |
| <a href="#"><i data-feather="twitter"></i></a> |
| <a href="#"><i data-feather="instagram"></i></a> |
| <a href="#"><i data-feather="github"></i></a> |
| <a href="#"><i data-feather="linkedin"></i></a> |
| </div> |
| </div> |
| |
| <div class="footer-column"> |
| <h3>Resources</h3> |
| <ul> |
| <li><a href="#">Prompt Guide</a></li> |
| <li><a href="#">AI Art Tutorials</a></li> |
| <li><a href="#">Model Comparisons</a></li> |
| <li><a href="#">Community Gallery</a></li> |
| </ul> |
| </div> |
| |
| <div class="footer-column"> |
| <h3>Company</h3> |
| <ul> |
| <li><a href="#">About Us</a></li> |
| <li><a href="#">Blog</a></li> |
| <li><a href="#">Careers</a></li> |
| <li><a href="#">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div class="footer-column"> |
| <h3>Legal</h3> |
| <ul> |
| <li><a href="#">Terms of Service</a></li> |
| <li><a href="#">Privacy Policy</a></li> |
| <li><a href="#">Cookie Policy</a></li> |
| <li><a href="#">Licensing</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="copyright"> |
| <p>© 2023 PromptCraft Studio. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| `; |
| |
| |
| const script = document.createElement('script'); |
| script.src = "https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"; |
| script.onload = () => { |
| if (this.shadowRoot) { |
| feather.replace(); |
| } |
| }; |
| this.shadowRoot.appendChild(script); |
| } |
| } |
|
|
| customElements.define('custom-footer', CustomFooter); |