| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| background-color: #020617; |
| border-top: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .footer-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 2rem; |
| } |
| |
| .footer-link { |
| transition: color 0.3s ease, transform 0.3s ease; |
| } |
| |
| .footer-link:hover { |
| color: #7e22ce; |
| transform: translateX(5px); |
| } |
| |
| .social-icon { |
| transition: all 0.3s ease; |
| } |
| |
| .social-icon:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); |
| } |
| </style> |
| |
| <footer class="py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="footer-grid mb-12"> |
| <div> |
| <h3 class="text-xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary"> |
| PixelPulse |
| </h3> |
| <p class="text-gray-400 mb-4"> |
| AI-Powered Creative Studio specializing in board games, Kickstarter campaigns, and digital brands. |
| </p> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4 text-white">Services</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="footer-link text-gray-400">Kickstarter Videos</a></li> |
| <li><a href="#" class="footer-link text-gray-400">Board Game Design</a></li> |
| <li><a href="#" class="footer-link text-gray-400">AI Art & Design</a></li> |
| <li><a href="#" class="footer-link text-gray-400">3D Mockups</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4 text-white">Quick Links</h4> |
| <ul class="space-y-2"> |
| <li><a href="#about" class="footer-link text-gray-400">About Us</a></li> |
| <li><a href="#portfolio" class="footer-link text-gray-400">Portfolio</a></li> |
| <li><a href="#services" class="footer-link text-gray-400">Services</a></li> |
| <li><a href="#contact" class="footer-link text-gray-400">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-4 text-white">Connect</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="social-icon w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:bg-primary"> |
| <i data-feather="instagram"></i> |
| </a> |
| <a href="#" class="social-icon w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:bg-blue-400"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="social-icon w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:bg-red-500"> |
| <i data-feather="youtube"></i> |
| </a> |
| <a href="#" class="social-icon w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-300 hover:bg-green-500"> |
| <i data-feather="dollar-sign"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="pt-8 border-t border-gray-800 text-center text-gray-500"> |
| <p>© ${new Date().getFullYear()} MultimediaOne. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| `; |
| } |
| } |
|
|
| customElements.define('custom-footer', CustomFooter); |
