Create a clean, modern mobile app screen visualizing a four-step analytics lifecycle. Use soft gradients, rounded cards, simple line icons, and a minimal professional color palette (blues, greys, and soft oranges). Arrange each step vertically as elegant cards with small icons on the left and text on the right. Include subtle shadows, smooth spacing, and a dashboard-style aesthetic.
172cff4 verified | class CustomFooter extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| footer { | |
| background: linear-gradient(135deg, #0c4a6e 0%, #4c1d95 100%); | |
| } | |
| .footer-link:hover { | |
| color: #8b5cf6; | |
| transform: translateX(5px); | |
| } | |
| .social-icon:hover { | |
| transform: scale(1.1); | |
| color: #8b5cf6; | |
| } | |
| </style> | |
| <footer class="text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i data-feather="box" class="text-secondary-500 w-6 h-6"></i> | |
| <span class="text-xl font-bold">PromptCraft</span> | |
| </div> | |
| <p class="text-gray-300 mb-4">The ultimate AI prompt library for creators, developers, and thinkers.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="social-icon text-gray-300 hover:text-secondary-500 transition-all"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="social-icon text-gray-300 hover:text-secondary-500 transition-all"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="social-icon text-gray-300 hover:text-secondary-500 transition-all"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="social-icon text-gray-300 hover:text-secondary-500 transition-all"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="footer-link text-gray-300 hover:text-white transition-all">Prompt Library</a></li> | |
| <li><a href="analytics-lifecycle.html" class="footer-link text-gray-300 hover:text-white transition-all">Analytics Lifecycle</a></li> | |
| <li><a href="#" class="footer-link text-gray-300 hover:text-white transition-all">API Reference</a></li> | |
| <li><a href="#" class="footer-link text-gray-300 hover:text-white transition-all">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="footer-link text-gray-300 hover:text-white transition-all">About Us</a></li> | |
| <li><a href="#" class="footer-link text-gray-300 hover:text-white transition-all">Careers</a></li> | |
| <li><a href="#" class="footer-link text-gray-300 hover:text-white transition-all">Blog</a></li> | |
| <li><a href="#" class="footer-link text-gray-300 hover:text-white transition-all">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li |