File size: 4,748 Bytes
cb2b30f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.footer {
background: rgba(15, 23, 42, 0.8);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-link {
transition: all 0.2s ease;
}
.footer-link:hover {
color: #8B5CF6;
transform: translateX(4px);
}
.social-icon {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.social-icon:hover {
background: rgba(139, 92, 246, 0.2);
transform: translateY(-3px);
}
</style>
<footer class="footer py-12 px-6 mt-20">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12">
<div>
<a href="/" class="flex items-center space-x-2 mb-6">
<i data-feather="code" class="text-purple-500"></i>
<span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-500">CodeCanvas</span>
</a>
<p class="text-gray-400 mb-6">Build beautiful full-stack applications with ease.</p>
<div class="flex space-x-4">
<a href="#" class="social-icon">
<i data-feather="twitter"></i>
</a>
<a href="#" class="social-icon">
<i data-feather="github"></i>
</a>
<a href="#" class="social-icon">
<i data-feather="linkedin"></i>
</a>
<a href="#" class="social-icon">
<i data-feather="youtube"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Product</h3>
<ul class="space-y-3">
<li><a href="/features" class="footer-link flex items-center">Features <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i></a></li>
<li><a href="/pricing" class="footer-link flex items-center">Pricing <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i></a></li>
<li><a href="/examples" class="footer-link flex items-center">Examples <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i></a></li>
<li><a href="/roadmap" class="footer-link flex items-center">Roadmap <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i></a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Resources</h3>
<ul class="space-y-3">
<li><a href="/docs" class="footer-link flex items-center">Documentation <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i></a></li>
<li><a href="/tutorials" class="footer-link flex items-center">Tutorials <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i></a></li>
<li><a href="/blog" class="footer-link flex items-center">Blog <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i></a></li>
<li><a href="/community" class="footer-link flex items-center">Community <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i></a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Company</h3>
<ul class="space-y-3">
<li><a href="/about" class="footer-link flex items-center">About <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i></a></li>
<li><a href="/careers" class="footer-link flex items-center">Careers <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i></a></li>
<li><a href="/contact" class="footer-link flex items-center">Contact <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i></a></li>
<li><a href="/legal" class="footer-link flex items-center">Legal <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i></a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
<p>© 2023 CodeCanvas Studio. All rights reserved.</p>
</div>
</div>
</footer>
`;
// Initialize feather icons
if (window.feather) {
window.feather.replace();
}
}
}
customElements.define('custom-footer', CustomFooter); |