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 | <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ArbibStack Academy - Maîtrisez le MERN Stack</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#dc2626', | |
| secondary: '#000000' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gradient-to-r from-primary to-black text-white py-20"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 animate-pulse"> | |
| ArbibStack Academy | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8 opacity-90"> | |
| Devenez expert en MERN Stack avec notre plateforme interactive | |
| </p> | |
| <div class="space-x-4"> | |
| <a href="#courses" class="bg-white text-primary px-8 py-3 rounded-lg font-bold hover:bg-gray-100 transition duration-300"> | |
| Commencer Maintenant | |
| </a> | |
| <a href="#about" class="border-2 border-white px-8 py-3 rounded-lg font-bold hover:bg-white hover:text-primary transition duration-300"> | |
| En Savoir Plus | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent"></div> | |
| </section> | |
| <!-- Courses Section --> | |
| <section id="courses" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center text-primary mb-4">Nos Cours MERN Stack</h2> | |
| <p class="text-center text-gray-600 mb-12">Parcours complet pour maîtriser chaque technologie</p> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- MongoDB Card --> | |
| <div class="bg-white rounded-xl shadow-lg hover:shadow-2xl transition duration-300 border-2 border-primary"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="database" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-primary mb-3">MongoDB</h3> | |
| <p class="text-gray-600 text-center mb-4">Bases de données NoSQL et modélisation</p> | |
| <ul class="text-sm text-gray-500 space-y-2 mb-6"> | |
| <li>• CRUD Operations</li> | |
| <li>• Aggregation Pipeline</li> | |
| <li>• Indexing & Performance</li> | |
| <li>• Mongoose ODM</li> | |
| </ul> | |
| <a href="/mongodb.html" class="block w-full bg-primary text-white text-center py-2 rounded-lg hover:bg-red-700 transition duration-300"> | |
| Voir le Cours | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Express.js Card --> | |
| <div class="bg-white rounded-xl shadow-lg hover:shadow-2xl transition duration-300 border-2 border-black"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-black rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="server" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-black mb-3">Express.js</h3> | |
| <p class="text-gray-600 text-center mb-4">Framework backend Node.js</p> | |
| <ul class="text-sm text-gray-500 space-y-2 mb-6"> | |
| <li>• Routing & Middleware</li> | |
| <li>• REST API Design</li> | |
| <li>• Authentication</li> | |
| <li>• Error Handling</li> | |
| </ul> | |
| <a href="/express.html" class="block w-full bg-black text-white text-center py-2 rounded-lg hover:bg-gray-800 transition duration-300"> | |
| Voir le Cours | |
| </a> | |
| </div> | |
| </div> | |
| <!-- React Card --> | |
| <div class="bg-white rounded-xl shadow-lg hover:shadow-2xl transition duration-300 border-2 border-primary"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="layout" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-primary mb-3">React</h3> | |
| <p class="text-gray-600 text-center mb-4">Framework frontend moderne</p> | |
| <ul class="text-sm text-gray-500 space-y-2 mb-6"> | |
| <li>• Components & Props</li> | |
| <li>• Hooks & State</li> | |
| <li>• Context API</li> | |
| <li>• Performance Optimization</li> | |
| </ul> | |
| <a href="/react.html" class="block w-full bg-primary text-white text-center py-2 rounded-lg hover:bg-red-700 transition duration-300"> | |
| Voir le Cours | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Node.js Card --> | |
| <div class="bg-white rounded-xl shadow-lg hover:shadow-2xl transition duration-300 border-2 border-black"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-black rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i data-feather="code" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center text-black mb-3">Node.js</h3> | |
| <p class="text-gray-600 text-center mb-4">Runtime JavaScript côté serveur</p> | |
| <ul class="text-sm text-gray-500 space-y-2 mb-6"> | |
| <li>• Event Loop</li> | |
| <li>• Modules & NPM</li> | |
| <li>• File System</li> | |
| <li>• Streams & Buffers</li> | |
| </ul> | |
| <a href="/nodejs.html" class="block w-full bg-black text-white text-center py-2 rounded-lg hover:bg-gray-800 transition duration-300"> | |
| Voir le Cours | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center text-primary mb-4">Pourquoi Choisir ArbibStack?</h2> | |
| <div class="grid md:grid-cols-3 gap-8 mt-12"> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="award" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Certification Validée</h3> | |
| <p class="text-gray-600">Obtenez un certificat reconnu après chaque module réussi</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-black rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="check-circle" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-black mb-3">Exercices Pratiques</h3> | |
| <p class="text-gray-600">Apprenez par la pratique avec des projets réels et des challenges</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="bar-chart-2" class="text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-3">Suivi de Progrès</h3> | |
| <p class="text-gray-600">Visualisez votre évolution avec notre tableau de bord interactif</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-primary text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Prêt à Devenir Expert MERN?</h2> | |
| <p class="text-xl mb-8 opacity-90">Rejoignez des milliers d'étudiants qui ont transformé leur carrière</p> | |
| <a href="/register.html" class="bg-black text-white px-8 py-3 rounded-lg font-bold hover:bg-gray-800 transition duration-300"> | |
| S'inscrire Gratuitement | |
| </a> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |