Spaces:
Running
Running
je veux une site fullstack mern stack que fait apprende les concepte de mern stack avec des exercice et des test et donner une certificat , name=Arbib_Stack , coleur : rouge et noirVOICI LA CLE API DE GEMINI :AIzaSyCa55JfNKq14N25apSmcWdgQFdKgfz_S9Y // mongodb+srv://arbibm55_db_user:nMVUbj7TDwaPKP3Y@cluster0.pqpfbz4.mongodb.net/
efeb37f verified | class CustomFooter extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| } | |
| .footer-link { | |
| transition: color 0.3s ease, transform 0.2s ease; | |
| } | |
| .footer-link:hover { | |
| transform: translateY(-2px); | |
| } | |
| </style> | |
| <footer class="bg-black text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <!-- Company Info --> | |
| <div class="col-span-2"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center"> | |
| <i data-feather="cpu" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold gradient-text mb-4">ArbibStack Academy</h3> | |
| <p class="text-gray-400 mb-4"> | |
| La plateforme ultime pour maîtriser le MERN Stack et transformer votre carrière de développeur. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="footer-link text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="footer-link text-gray-400 hover:text-white"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="footer-link text-gray-400 hover:text-white"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="footer-link text-gray-400 hover:text-white"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Quick Links --> | |
| <div> | |
| <h4 class="text-lg font-bold text-primary mb-4">Navigation Rapide</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="/" class="footer-link text-gray-400 hover:text-white">Accueil</a></li> | |
| <li><a href="#courses" class="footer-link text-gray-400 hover:text-white">Cours</a></li> | |
| <li><a href="/exercises.html" class="footer-link text-gray-400 hover:text-white">Exercices</a></li> | |
| <li><a href="/certificates.html" class="footer-link text-gray-400 hover:text-white">Certificats</a></li> | |
| <li><a href="/about.html" class="footer-link text-gray-400 hover:text-white">À Propos</a></li> | |
| </ul> | |
| </div> | |
| <!-- Technologies --> | |
| <div> | |
| <h4 class="text-lg font-bold text-primary mb-4">Technologies</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="/mongodb.html" class="footer-link text-gray-400 hover:text-white">MongoDB</a></li> | |
| <li><a href="/express.html" class="footer-link text-gray-400 hover:text-white">Express.js</a></li> | |
| <li><a href="/react.html" class="footer-link text-gray-400 hover:text-white">React</a></li> | |
| <li><a href="/nodejs.html" class="footer-link text-gray-400 hover:text-white">Node.js</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Bottom Bar --> | |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0"> | |
| © 2024 ArbibStack Academy. Tous droits réservés. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="/privacy.html" class="footer-link text-gray-400 hover:text-white">Politique de Confidentialité</a> | |
| <a href="/terms.html" class="footer-link text-gray-400 hover:text-white">Conditions d'Utilisation</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| `; | |
| feather.replace(); | |
| } | |
| } | |
| customElements.define('custom-footer', CustomFooter); |