| class BloomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| background: linear-gradient(to top, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01)); |
| border-top: 1px solid rgba(244, 114, 182, 0.1); |
| padding: 3rem 0 2rem; |
| margin-top: 4rem; |
| } |
| |
| .footer-container { |
| max-width: 1280px; |
| margin: 0 auto; |
| padding: 0 1rem; |
| } |
| |
| .footer-content { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 3rem; |
| margin-bottom: 2.5rem; |
| } |
| |
| .footer-section { |
| display: flex; |
| flex-direction: column; |
| gap: 1.25rem; |
| } |
| |
| .footer-heading { |
| font-size: 1.125rem; |
| font-weight: 700; |
| color: #ec4899; |
| margin-bottom: 0.5rem; |
| } |
| |
| .footer-links { |
| display: flex; |
| flex-direction: column; |
| gap: 0.75rem; |
| } |
| |
| .footer-link { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| color: #4b5563; |
| text-decoration: none; |
| font-weight: 500; |
| transition: color 0.3s ease; |
| } |
| |
| .footer-link:hover { |
| color: #ec4899; |
| } |
| |
| .footer-text { |
| color: #6b7280; |
| font-size: 0.875rem; |
| line-height: 1.5; |
| } |
| |
| .footer-bottom { |
| border-top: 1px solid rgba(244, 114, 182, 0.1); |
| padding-top: 1.5rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .footer-social { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| } |
| |
| .social-icon { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 2.5rem; |
| height: 2.5rem; |
| border-radius: 0.75rem; |
| background: rgba(244, 114, 182, 0.08); |
| color: #ec4899; |
| text-decoration: none; |
| transition: all 0.3s ease; |
| } |
| |
| .social-icon:hover { |
| background: rgba(244, 114, 182, 0.15); |
| transform: translateY(-2px); |
| } |
| |
| @media (max-width: 1024px) { |
| .footer-content { |
| grid-template-columns: repeat(2, 1fr); |
| gap: 2rem; |
| } |
| } |
| |
| @media (max-width: 640px) { |
| .footer-content { |
| grid-template-columns: 1fr; |
| gap: 2rem; |
| } |
| |
| .footer-bottom { |
| flex-direction: column; |
| gap: 1rem; |
| text-align: center; |
| } |
| } |
| </style> |
| |
| <footer class="footer-container"> |
| <div class="footer-content"> |
| <div class="footer-section"> |
| <h3 class="footer-heading">CodeBloom 🌹</h3> |
| <p class="footer-text"> |
| Transform your coding experience with our beautiful rose-themed development platform. Where elegance meets functionality. |
| </p> |
| </div> |
| |
| <div class="footer-section"> |
| <h3 class="footer-heading">Produits</h3> |
| <div class="footer-links"> |
| <a href="ide.html" class="footer-link"> |
| <i data-feather="code" class="w-4 h-4"></i> |
| Éditeur Intelligent |
| </a> |
| <a href="collaboration.html" class="footer-link"> |
| <i data-feather="users" class="w-4 h-4"></i> |
| Collaboration |
| </a> |
| <a href="ai-assistant.html" class="footer-link"> |
| <i data-feather="cpu" class="w-4 h-4"></i> |
| Assistant IA |
| </a> |
| <a href="deployment.html" class="footer-link"> |
| <i data-feather="cloud" class="w-4 h-4"></i> |
| Déploiement |
| </a> |
| </div> |
| </div> |
| |
| <div class="footer-section"> |
| <h3 class="footer-heading">Ressources</h3> |
| <div class="footer-links"> |
| <a href="docs.html" class="footer-link"> |
| <i data-feather="book" class="w-4 h-4"></i> |
| Documentation |
| </a> |
| <a href="tutorials.html" class="footer-link"> |
| <i data-feather="video" class="w-4 h-4"></i> |
| Tutoriels |
| </a> |
| <a href="blog.html" class="footer-link"> |
| <i data-feather="edit-3" class="w-4 h-4"></i> |
| Blog |
| </a> |
| <a href="support.html" class="footer-link"> |
| <i data-feather="message-circle" class="w-4 h-4"></i> |
| Support |
| </a> |
| </div> |
| </div> |
| |
| <div class="footer-section"> |
| <h3 class="footer-heading">Société</h3> |
| <div class="footer-links"> |
| <a href="about.html" class="footer-link"> |
| <i data-feather="info" class="w-4 h-4"></i> |
| À propos |
| </a> |
| <a href="careers.html" class="footer-link"> |
| <i data-feather="briefcase" class="w-4 h-4"></i> |
| Carrières |
| </a> |
| <a href="contact.html" class="footer-link"> |
| <i data-feather="mail" class="w-4 h-4"></i> |
| Contact |
| </a> |
| <a href="privacy.html" class="footer-link"> |
| <i data-feather="shield" class="w-4 h-4"></i> |
| Confidentialité |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="footer-bottom"> |
| <p class="footer-text">© 2025 CodeBloom Rose Petals. Made with ❤️ and ☕ by developers, for developers.</p> |
| |
| <div class="footer-social"> |
| <a href="https://twitter.com/codebloom" class="social-icon" target="_blank" rel="noopener noreferrer"> |
| <i data-feather="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="https://github.com/codebloom" class="social-icon" target="_blank" rel="noopener noreferrer"> |
| <i data-feather="github" class="w-5 h-5"></i> |
| </a> |
| <a href="https://discord.gg/codebloom" class="social-icon" target="_blank" rel="noopener noreferrer"> |
| <i data-feather="message-circle" class="w-5 h-5"></i> |
| </a> |
| <a href="https://youtube.com/codebloom" class="social-icon" target="_blank" rel="noopener noreferrer"> |
| <i data-feather="youtube" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| </footer> |
| `; |
| |
| |
| setTimeout(() => { |
| if (typeof feather !== 'undefined') { |
| this.shadowRoot.querySelectorAll('[data-feather]').forEach(el => { |
| feather.replace(); |
| }); |
| } |
| }, 100); |
| } |
| } |
|
|
| customElements.define('bloom-footer', BloomFooter); |
