Spaces:
Running
Running
| class CustomFooter extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| width: 100%; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .footer-top { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .newsletter-input { | |
| border: 2px solid transparent; | |
| background: rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s; | |
| } | |
| .newsletter-input:focus { | |
| outline: none; | |
| border-color: rgba(255, 255, 255, 0.5); | |
| background: rgba(255, 255, 255, 0.15); | |
| } | |
| .social-icon { | |
| transition: transform 0.3s, color 0.3s; | |
| } | |
| .social-icon:hover { | |
| transform: translateY(-3px); | |
| color: #fbb6ce; | |
| } | |
| </style> | |
| <footer class="text-gray-600"> | |
| <div class="footer-top text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="mb-8 md:mb-0 md:w-1/2"> | |
| <h3 class="text-3xl font-bold mb-4">Stay Stylish!</h3> | |
| <p class="text-white/90 mb-6">Get weekly hair inspiration, styling tips, and exclusive offers.</p> | |
| <form id="newsletter-form" class="flex flex-col sm:flex-row gap-3"> | |
| <input type="email" placeholder="Your email address" class="newsletter-input px-4 py-3 rounded-full text-white placeholder-white/70 flex-grow" required> | |
| <button type="submit" class="px-6 py-3 bg-white text-purple-700 font-semibold rounded-full hover:bg-gray-100 transition-colors"> | |
| Subscribe | |
| </button> | |
| </form> | |
| </div> | |
| <div class="md:w-1/3"> | |
| <h4 class="text-xl font-bold mb-6">Follow Our Craft</h4> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="social-icon text-white hover:text-pink-200"> | |
| <i data-feather="instagram" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="social-icon text-white hover:text-pink-200"> | |
| <i data-feather="facebook" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="social-icon text-white hover:text-pink-200"> | |
| <i data-feather="twitter" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="social-icon text-white hover:text-pink-200"> | |
| <i data-feather="youtube" class="w-6 h-6"></i> | |
| </a> | |
| <a href="#" class="social-icon text-white hover:text-pink-200"> | |
| <i data-feather="pinterest" class="w-6 h-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 text-gray-300 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center"> | |
| <i data-feather="scissors" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="text-xl font-bold text-white">CurlCraft<span class="gradient-text">Studio</span></span> | |
| </div> | |
| <p class="text-sm">Crafting confidence, one hairstyle at a time.</p> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-8 mb-6 md:mb-0"> | |
| <div> | |
| <h5 class="font-bold text-white mb-3">Explore</h5> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="/styles" class="hover:text-white transition-colors">Hairstyles</a></li> | |
| <li><a href="/stylists" class="hover:text-white transition-colors">Find Stylists</a></li> | |
| <li><a href="/try-on" class="hover:text-white transition-colors">Virtual Try-On</a></li> | |
| <li><a href="/products" class="hover:text-white transition-colors">Products</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-bold text-white mb-3">Company</h5> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="/about" class="hover:text-white transition-colors">About Us</a></li> | |
| <li><a href="/careers" class="hover:text-white transition-colors">Careers</a></li> | |
| <li><a href="/press" class="hover:text-white transition-colors">Press</a></li> | |
| <li><a href="/contact" class="hover:text-white transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-bold text-white mb-3">Support</h5> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="/help" class="hover:text-white transition-colors">Help Center</a></li> | |
| <li><a href="/faq" class="hover:text-white transition-colors">FAQ</a></li> | |
| <li><a href="/privacy" class="hover:text-white transition-colors">Privacy Policy</a></li> | |
| <li><a href="/terms" class="hover:text-white transition-colors">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm"> | |
| <p>© ${new Date().getFullYear()} CurlCraft Studio. All rights reserved. ✂️</p> | |
| <p class="mt-2">Made with <i data-feather="heart" class="w-3 h-3 inline text-red-400"></i> for hair enthusiasts everywhere.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| `; | |
| // Initialize feather icons in shadow DOM | |
| setTimeout(() => { | |
| if (typeof feather !== 'undefined') { | |
| feather.replace(); | |
| } | |
| }, 100); | |
| } | |
| } | |
| customElements.define('custom-footer', CustomFooter); |