ruby1542/expense-galaxy-tracker
0
1class CustomFooter extends HTMLElement {2 connectedCallback() {3 this.attachShadow({ mode: 'open' });4 this.shadowRoot.innerHTML = `5 <style>6 footer {7 background-color: #f9fafb;8 }9 .footer-link {10 transition: color 0.3s ease;11 }12 .footer-link:hover {13 color: #8b5cf6;14 }15 </style>16 <footer class="mt-16">17 <div class="container mx-auto px-6 py-12">18 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">19 <div>20 <h3 class="text-lg font-semibold text-gray-800 mb-4">Expense Galaxy</h3>21 <p class="text-gray-600">22 Track your expenses across the universe with our stellar platform.23 </p>24 </div>25 26 <div>27 <h4 class="text-lg font-semibold text-gray-800 mb-4">Features</h4>28 <ul class="space-y-2">29 <li><a href="/dashboard" class="footer-link text-gray-600">Dashboard</a></li>30 <li><a href="/expenses" class="footer-link text-gray-600">Expense Tracking</a></li>31 <li><a href="/analytics" class="footer-link text-gray-600">Analytics</a></li>32 <li><a href="/badges" class="footer-link text-gray-600">Achievements</a></li>33 </ul>34 </div>35 36 <div>37 <h4 class="text-lg font-semibold text-gray-800 mb-4">Company</h4>38 <ul class="space-y-2">39 <li><a href="/about" class="footer-link text-gray-600">About Us</a></li>40 <li><a href="/blog" class="footer-link text-gray-600">Blog</a></li>41 <li><a href="/careers" class="footer-link text-gray-600">Careers</a></li>42 <li><a href="/contact" class="footer-link text-gray-600">Contact</a></li>43 </ul>44 </div>45 46 <div>47 <h4 class="text-lg font-semibold text-gray-800 mb-4">Connect</h4>48 <div class="flex space-x-4">49 <a href="#" class="text-gray-600 hover:text-primary-600">50 <i data-feather="twitter"></i>51 </a>52 <a href="#" class="text-gray-600 hover:text-primary-600">53 <i data-feather="facebook"></i>54 </a>55 <a href="#" class="text-gray-600 hover:text-primary-600">56 <i data-feather="instagram"></i>57 </a>58 <a href="#" class="text-gray-600 hover:text-primary-600">59 <i data-feather="linkedin"></i>60 </a>61 </div>62 </div>63 </div>64 65 <div class="border-t border-gray-200 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">66 <p class="text-gray-600">© 2023 Expense Galaxy. All rights reserved.</p>67 <div class="flex space-x-6 mt-4 md:mt-0">68 <a href="/privacy" class="footer-link text-gray-600">Privacy Policy</a>69 <a href="/terms" class="footer-link text-gray-600">Terms of Service</a>70 </div>71 </div>72 </div>73 </footer>74 `;75 76 feather.replace();77 }78}79 80customElements.define('custom-footer', CustomFooter);