arabeas's picture
Create a professional startup landing page with animated hero section, problem-solution showcase, feature highlights with screenshots, team members grid, investor logos, press mentions, and email signup form.
7a7fe93 verified
class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.footer-link:hover {
color: #4f46e5;
}
</style>
<footer class="bg-gray-900 text-gray-400 py-16">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12">
<div class="lg:col-span-2">
<div class="flex items-center space-x-2 mb-6">
<div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center">
<i data-feather="zap" class="text-white w-5 h-5"></i>
</div>
<span class="text-xl font-bold text-white">LaunchPad Pro</span>
</div>
<p class="mb-6">Empowering businesses with innovative solutions to scale efficiently and effectively.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-colors"><i data-feather="twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition-colors"><i data-feather="facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition-colors"><i data-feather="linkedin"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition-colors"><i data-feather="github"></i></a>
</div>
</div>
<div>
<h3 class="text-white font-semibold text-lg mb-4">Product</h3>
<ul class="space-y-2">
<li><a href="#" class="footer-link transition-colors">Features</a></li>
<li><a href="#" class="footer-link transition-colors">Pricing</a></li>
<li><a href="#" class="footer-link transition-colors">API</a></li>
<li><a href="#" class="footer-link transition-colors">Integrations</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold text-lg mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="footer-link transition-colors">About Us</a></li>
<li><a href="#" class="footer-link transition-colors">Careers</a></li>
<li><a href="#" class="footer-link transition-colors">Blog</a></li>
<li><a href="#" class="footer-link transition-colors">Press</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-semibold text-lg mb-4">Legal</h3>
<ul class="space-y-2">
<li><a href="#" class="footer-link transition-colors">Privacy</a></li>
<li><a href="#" class="footer-link transition-colors">Terms</a></li>
<li><a href="#" class="footer-link transition-colors">Cookies</a></li>
<li><a href="#" class="footer-link transition-colors">GDPR</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-sm mb-4 md:mb-0">© 2023 LaunchPad Pro. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-sm footer-link transition-colors">Privacy Policy</a>
<a href="#" class="text-sm footer-link transition-colors">Terms of Service</a>
<a href="#" class="text-sm footer-link transition-colors">Contact Us</a>
</div>
</div>
</div>
</footer>
<script>feather.replace();</script>
`;
}
}
customElements.define('custom-footer', CustomFooter);