| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| background: white; |
| border-top: 1px solid rgba(234, 88, 12, 0.2); |
| } |
| .footer-content { |
| max-width: 6xl; |
| margin: 0 auto; |
| padding: 2rem 1.5rem; |
| } |
| .footer-links a { |
| transition: color 0.3s ease; |
| } |
| |
| .footer-links a:hover { |
| color: #dc2626; |
| } |
| </style> |
| <footer class="bg-white border-t border-gray-200"> |
| <div class="footer-content"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <!-- Company Info --> |
| <div class="md:col-span-2"> |
| <div class="flex items-center gap-2 mb-4"> |
| <i data-feather="cpu" class="text-[#ff375f] w-6 h-6"></i> |
| <span class="text-xl font-bold">NanoMatter Technologies</div> |
| <p class="text-gray-400 mb-4"> |
| Advanced semiconductor equipment manufacturer specializing in MOCVD and PVD systems for next-generation materials research. |
| </p> |
| <div class="flex gap-4"> |
| <a href="#" class="text-[#8b949e] hover:text-[#ff375f] transition-colors"> |
| <i data-feather="linkedin" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-[#8b949e] hover:text-[#ff375f] transition-colors"> |
| <i data-feather="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="text-[#8b949e] hover:text-[#ff375f] transition-colors"> |
| <i data-feather="mail" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| |
| <!-- Quick Links --> |
| <div> |
| <h4 class="font-semibold text-lg mb-4">Quick Links</h4> |
| <div class="footer-links space-y-2"> |
| <a href="#about" class="block text-[#8b949e] hover:text-[#f0f6fc]">About Us</a> |
| <a href="#technologies" class="block text-[#8b949e] hover:text-[#f0f6fc]">Technologies</a> |
| <a href="#services" class="block text-[#8b949e] hover:text-[#f0f6fc]">Services</a> |
| <a href="#contact" class="block text-[#8b949e] hover:text-[#f0f6fc]">Contact</a> |
| </div> |
| </div> |
| |
| <!-- Technologies --> |
| <div> |
| <h4 class="font-semibold text-lg mb-4">Technologies</h4> |
| <div class="footer-links space-y-2"> |
| <a href="#technologies" class="block text-[#8b949e] hover:text-[#f0f6fc]">MOCVD Systems</a> |
| <a href="#technologies" class="block text-[#8b949e] hover:text-[#f0f6fc]">PVD Systems</a> |
| <a href="#services" class="block text-[#8b949e] hover:text-[#f0f6fc]">PVD Systems</a> |
| <a href="#services" class="block text-[#8b949e] hover:text-[#f0f6fc]">Deposition Services</a> |
| </div> |
| </div> |
| |
| <!-- Contact Info --> |
| <div> |
| <h4 class="font-semibold text-lg mb-4">Contact</h4> |
| <div class="space-y-2 text-[#8b949e]"> |
| <p>info@nanomatter.tech</p> |
| <p |
