Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PlasticChain - Transformer le plastique en or à Kinshasa</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1566438480900-0609be27a4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1792&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| background-attachment: fixed; | |
| min-height: 100vh; | |
| } | |
| .counter { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: #2F855A; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.05); | |
| } | |
| .partner-logo { | |
| filter: grayscale(100%); | |
| opacity: 0.7; | |
| transition: all 0.3s ease; | |
| } | |
| .partner-logo:hover { | |
| filter: grayscale(0%); | |
| opacity: 1; | |
| } | |
| .fade-in { | |
| opacity: 0; | |
| transition: opacity 0.6s ease-in; | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| } | |
| .comparison-table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| } | |
| .comparison-table th, .comparison-table td { | |
| border: 1px solid #ddd; | |
| padding: 12px; | |
| text-align: center; | |
| } | |
| .comparison-table th { | |
| background-color: #2F855A; | |
| color: white; | |
| } | |
| .comparison-table tr:nth-child(even) { | |
| background-color: #f2f2f2; | |
| } | |
| .comparison-table tr:hover { | |
| background-color: #ddd; | |
| } | |
| .eco-badge { | |
| background-color: #2F855A; | |
| color: white; | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-white shadow-md z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <img class="h-10 w-auto" src="https://via.placeholder.com/150x50?text=PlasticChain" alt="PlasticChain Logo"> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#mission" class="text-gray-900 hover:text-green-700 px-3 py-2 rounded-md text-sm font-medium">Notre Mission</a> | |
| <a href="#services" class="text-gray-900 hover:text-green-700 px-3 py-2 rounded-md text-sm font-medium">Nos Services</a> | |
| <a href="#avantages" class="text-gray-900 hover:text-green-700 px-3 py-2 rounded-md text-sm font-medium">Avantages</a> | |
| <a href="#temoignages" class="text-gray-900 hover:text-green-700 px-3 py-2 rounded-md text-sm font-medium">Témoignages</a> | |
| <a href="#impact" class="text-gray-900 hover:text-green-700 px-3 py-2 rounded-md text-sm font-medium">Impact</a> | |
| <a href="#contact" class="bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-800">Contactez-nous</a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white"> | |
| <a href="#mission" class="text-gray-900 hover:text-green-700 block px-3 py-2 rounded-md text-base font-medium">Notre Mission</a> | |
| <a href="#services" class="text-gray-900 hover:text-green-700 block px-3 py-2 rounded-md text-base font-medium">Nos Services</a> | |
| <a href="#avantages" class="text-gray-900 hover:text-green-700 block px-3 py-2 rounded-md text-base font-medium">Avantages</a> | |
| <a href="#temoignages" class="text-gray-900 hover:text-green-700 block px-3 py-2 rounded-md text-base font-medium">Témoignages</a> | |
| <a href="#impact" class="text-gray-900 hover:text-green-700 block px-3 py-2 rounded-md text-base font-medium">Impact</a> | |
| <a href="#contact" class="bg-green-700 text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-green-800">Contactez-nous</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero flex items-center justify-center text-center text-white pt-16"> | |
| <div class="max-w-4xl px-4 py-16 sm:px-6 lg:px-8"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 fade-in">Transformer le plastique en or à Kinshasa</h1> | |
| <p class="text-xl md:text-2xl mb-8 fade-in">Nous donnons une seconde vie aux déchets plastiques en les transformant en pavés écologiques et durables</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4 fade-in"> | |
| <a href="#contact" class="bg-green-700 hover:bg-green-800 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Soutenez notre mission</a> | |
| <a href="#services" class="bg-white hover:bg-gray-100 text-green-700 font-bold py-3 px-6 rounded-lg transition duration-300">Rejoignez PlasticChain</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Notre Mission --> | |
| <section id="mission" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Notre Mission</h2> | |
| <div class="w-20 h-1 bg-green-700 mx-auto"></div> | |
| <p class="mt-6 text-lg text-gray-600 max-w-3xl mx-auto"> | |
| PlasticChain s'engage à transformer les déchets plastiques de Kinshasa en opportunités économiques et environnementales, tout en créant des emplois durables pour les communautés locales. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center fade-in"> | |
| <div class="text-green-700 text-4xl mb-4"> | |
| <i class="fas fa-recycle"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Recyclage innovant</h3> | |
| <p class="text-gray-600">Nous collectons et transformons les déchets plastiques en pavés écologiques de haute qualité.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center fade-in"> | |
| <div class="text-green-700 text-4xl mb-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Création d'emplois</h3> | |
| <p class="text-gray-600">Nous offrons des opportunités économiques aux communautés locales à travers notre chaîne de valeur.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center fade-in"> | |
| <div class="text-green-700 text-4xl mb-4"> | |
| <i class="fas fa-leaf"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Protection environnementale</h3> | |
| <p class="text-gray-600">Nous réduisons la pollution plastique tout en créant des solutions de construction durables.</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="fade-in"> | |
| <div class="counter" data-target="1250">0</div> | |
| <p class="text-gray-600">Tonnes de plastique collectées</p> | |
| </div> | |
| <div class="fade-in"> | |
| <div class="counter" data-target="85000">0</div> | |
| <p class="text-gray-600">Pavés produits</p> | |
| </div> | |
| <div class="fade-in"> | |
| <div class="counter" data-target="120">0</div> | |
| <p class="text-gray-600">Emplois créés</p> | |
| </div> | |
| <div class="fade-in"> | |
| <div class="counter" data-target="35">0</div> | |
| <p class="text-gray-600">Communautés impactées</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Nos Services --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Nos Services</h2> | |
| <div class="w-20 h-1 bg-green-700 mx-auto"></div> | |
| <p class="mt-6 text-lg text-gray-600 max-w-3xl mx-auto"> | |
| Nous offrons des solutions complètes pour la gestion des déchets plastiques et la production de matériaux de construction écologiques. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="service-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300 fade-in"> | |
| <div class="text-green-700 text-3xl mb-4"> | |
| <i class="fas fa-building"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Collecte B2B</h3> | |
| <p class="text-gray-600">Service de collecte de déchets plastiques pour les entreprises, avec traçabilité garantie.</p> | |
| </div> | |
| <div class="service-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300 fade-in"> | |
| <div class="text-green-700 text-3xl mb-4"> | |
| <i class="fas fa-home"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Collecte à domicile</h3> | |
| <p class="text-gray-600">Programme de collecte dans les quartiers avec récompenses pour les participants actifs.</p> | |
| </div> | |
| <div class="service-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300 fade-in"> | |
| <div class="text-green-700 text-3xl mb-4"> | |
| <i class="fas fa-road"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Pavés écologiques</h3> | |
| <p class="text-gray-600">Production et vente de pavés durables fabriqués à partir de plastique recyclé.</p> | |
| </div> | |
| <div class="service-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300 fade-in"> | |
| <div class="text-green-700 text-3xl mb-4"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Formations</h3> | |
| <p class="text-gray-600">Programmes de formation sur le recyclage et l'entrepreneuriat vert pour les jeunes.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Avantages des pavés --> | |
| <section id="avantages" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Avantages des pavés PlasticChain</h2> | |
| <div class="w-20 h-1 bg-green-700 mx-auto"></div> | |
| <p class="mt-6 text-lg text-gray-600 max-w-3xl mx-auto"> | |
| Nos pavés écologiques offrent des avantages significatifs par rapport aux solutions traditionnelles. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div class="fade-in"> | |
| <h3 class="text-2xl font-bold mb-6">Pourquoi choisir nos pavés ?</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-green-700 mt-1"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600"><span class="font-bold">Résistance supérieure</span> - 2 fois plus résistants que les pavés traditionnels</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-green-700 mt-1"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600"><span class="font-bold">Prix compétitif</span> - 15-20% moins chers que les alternatives</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-green-700 mt-1"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600"><span class="font-bold">Écologiques</span> - 100% recyclés, zéro déchet plastique dans la nature</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-green-700 mt-1"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600"><span class="font-bold">Durables</span> - Résistants à l'eau et aux intempéries</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 text-green-700 mt-1"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-3 text-gray-600"><span class="font-bold">Impact social</span> - Chaque achat soutient notre mission sociale</p> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="fade-in"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold mb-6 text-center">Comparaison des pavés</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="comparison-table"> | |
| <thead> | |
| <tr> | |
| <th>Caractéristique</th> | |
| <th>Pavés PlasticChain</th> | |
| <th>Pavés traditionnels</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Résistance (MPa)</td> | |
| <td>35 <span class="eco-badge">+75%</span></td> | |
| <td>20</td> | |
| </tr> | |
| <tr> | |
| <td>Prix (par m²)</td> | |
| <td>$15 <span class="eco-badge">-20%</span></td> | |
| <td>$18.75</td> | |
| </tr> | |
| <tr> | |
| <td>Impact environnemental</td> | |
| <td><i class="fas fa-check text-green-700"></i> Positif</td> | |
| <td><i class="fas fa-times text-red-500"></i> Négatif</td> | |
| </tr> | |
| <tr> | |
| <td>Durée de vie</td> | |
| <td>15+ ans</td> | |
| <td>10 ans</td> | |
| </tr> | |
| <tr> | |
| <td>Consommation d'eau</td> | |
| <td>0 litre</td> | |
| <td>10 litres/m²</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Témoignages & Partenaires --> | |
| <section id="temoignages" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Ils nous font confiance</h2> | |
| <div class="w-20 h-1 bg-green-700 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> | |
| <div class="testimonial-card bg-gray-50 p-8 rounded-lg shadow-md fade-in"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-500 text-xl mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic mb-6">"Les pavés PlasticChain ont révolutionné notre approche des travaux publics. Non seulement ils sont plus résistants, mais ils nous permettent aussi de contribuer à la protection de l'environnement."</p> | |
| <div class="flex items-center"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Jean Kabasele"> | |
| <div> | |
| <h4 class="font-bold">Jean Kabasele</h4> | |
| <p class="text-gray-500 text-sm">Directeur des Travaux Publics, Ville de Kinshasa</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card bg-gray-50 p-8 rounded-lg shadow-md fade-in"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-500 text-xl mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic mb-6">"En tant qu'entreprise engagée dans le développement durable, PlasticChain nous a aidé à gérer nos déchets plastiques tout en soutenant l'économie locale. Un partenariat gagnant-gagnant."</p> | |
| <div class="flex items-center"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Mbuyi"> | |
| <div> | |
| <h4 class="font-bold">Sarah Mbuyi</h4> | |
| <p class="text-gray-500 text-sm">Directrice RSE, Groupe Commercial</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card bg-gray-50 p-8 rounded-lg shadow-md fade-in"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-500 text-xl mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic mb-6">"Grâce au programme de collecte de PlasticChain, notre quartier est plus propre et plusieurs jeunes ont trouvé un emploi. Une initiative qui change vraiment les choses."</p> | |
| <div class="flex items-center"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Pascal Ntumba"> | |
| <div> | |
| <h4 class="font-bold">Pascal Ntumba</h4> | |
| <p class="text-gray-500 text-sm">Président de l'Association des Quartiers</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mb-8 fade-in"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Nos Partenaires</h3> | |
| <div class="w-20 h-1 bg-green-700 mx-auto mb-6"></div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center"> | |
| <img src="https://via.placeholder.com/150x80?text=Partenaire+1" alt="Partenaire 1" class="partner-logo h-16 mx-auto"> | |
| <img src="https://via.placeholder.com/150x80?text=Partenaire+2" alt="Partenaire 2" class="partner-logo h-16 mx-auto"> | |
| <img src="https://via.placeholder.com/150x80?text=Partenaire+3" alt="Partenaire 3" class="partner-logo h-16 mx-auto"> | |
| <img src="https://via.placeholder.com/150x80?text=Partenaire+4" alt="Partenaire 4" class="partner-logo h-16 mx-auto"> | |
| <img src="https://via.placeholder.com/150x80?text=Partenaire+5" alt="Partenaire 5" class="partner-logo h-16 mx-auto"> | |
| <img src="https://via.placeholder.com/150x80?text=Partenaire+6" alt="Partenaire 6" class="partner-logo h-16 mx-auto"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Impact Social & Environnemental --> | |
| <section id="impact" class="py-20 bg-green-700 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Notre Impact</h2> | |
| <div class="w-20 h-1 bg-white mx-auto"></div> | |
| <p class="mt-6 text-lg max-w-3xl mx-auto"> | |
| PlasticChain crée un impact positif mesurable sur l'environnement et les communautés de Kinshasa. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg text-center fade-in"> | |
| <div class="text-4xl font-bold mb-3">1,250+</div> | |
| <p>Tonnes de plastique recyclées</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg text-center fade-in"> | |
| <div class="text-4xl font-bold mb-3">3,500+</div> | |
| <p>Tonnes de CO2 évitées</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg text-center fade-in"> | |
| <div class="text-4xl font-bold mb-3">120+</div> | |
| <p>Emplois créés</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg text-center fade-in"> | |
| <div class="text-4xl font-bold mb-3">35</div> | |
| <p>Communautés impactées</p> | |
| </div> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div class="fade-in"> | |
| <h3 class="text-2xl font-bold mb-6">Impact Environnemental</h3> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-tint"></i> | |
| </div> | |
| <h4 class="font-bold">Économie d'eau</h4> | |
| </div> | |
| <p class="pl-11">Notre processus utilise 100% moins d'eau que la production de pavés traditionnels.</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-cloud"></i> | |
| </div> | |
| <h4 class="font-bold">Réduction CO2</h4> | |
| </div> | |
| <p class="pl-11">Chaque tonne de plastique recyclé évite l'émission de 2.8 tonnes de CO2.</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-trash"></i> | |
| </div> | |
| <h4 class="font-bold">Déchets éliminés</h4> | |
| </div> | |
| <p class="pl-11">Nous avons détourné plus de 1,250 tonnes de plastique des décharges et des cours d'eau.</p> | |
| </div> | |
| </div> | |
| <div class="fade-in"> | |
| <h3 class="text-2xl font-bold mb-6">Impact Social</h3> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-briefcase"></i> | |
| </div> | |
| <h4 class="font-bold">Emplois créés</h4> | |
| </div> | |
| <p class="pl-11">120 emplois directs et 300 indirects dans la collecte, le tri et la transformation.</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <h4 class="font-bold">Formations</h4> | |
| </div> | |
| <p class="pl-11">250 jeunes formés aux techniques de recyclage et d'entrepreneuriat vert.</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-home"></i> | |
| </div> | |
| <h4 class="font-bold">Communautés</h4> | |
| </div> | |
| <p class="pl-11">35 quartiers bénéficient de notre programme de collecte et de nos infrastructures.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Formulaire de contact --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Contactez-nous</h2> | |
| <div class="w-20 h-1 bg-green-700 mx-auto"></div> | |
| <p class="mt-6 text-lg text-gray-600 max-w-3xl mx-auto"> | |
| Que vous soyez une entreprise, une municipalité ou un particulier, rejoignez notre mouvement pour un Kinshasa plus propre et plus durable. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <div class="fade-in"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700">Nom complet</label> | |
| <input type="text" id="name" name="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-700 focus:border-green-700"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email</label> | |
| <input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-700 focus:border-green-700"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700">Téléphone</label> | |
| <input type="tel" id="phone" name="phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-700 focus:border-green-700"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700">Sujet</label> | |
| <select id="subject" name="subject" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-700 focus:border-green-700"> | |
| <option value="">Sélectionnez un sujet</option> | |
| <option value="collecte">Service de collecte</option> | |
| <option value="paves">Commande de pavés</option> | |
| <option value="partenariat">Partenariat</option> | |
| <option value="emploi">Opportunités d'emploi</option> | |
| <option value="autre">Autre</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700">Message</label> | |
| <textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-green-700 focus:border-green-700"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-700"> | |
| Envoyer le message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="fade-in"> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-md h-full"> | |
| <h3 class="text-xl font-bold mb-6">Nos coordonnées</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 text-green-700 mt-1"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Adresse</h4> | |
| <p class="text-gray-600">123 Avenue de l'Environnement, Kinshasa, RDC</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 text-green-700 mt-1"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Téléphone</h4> | |
| <p class="text-gray-600">+243 81 234 5678</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 text-green-700 mt-1"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Email</h4> | |
| <p class="text-gray-600">contact@plasticchain.cd</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 text-green-700 mt-1"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Heures d'ouverture</h4> | |
| <p class="text-gray-600">Lundi - Vendredi: 8h00 - 17h00</p> | |
| <p class="text-gray-600">Samedi: 9h00 - 13h00</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">Suivez-nous</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-green-700 hover:text-green-800"> | |
| <i class="fab fa-facebook-f text-xl"></i> | |
| </a> | |
| <a href="#" class="text-green-700 hover:text-green-800"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-green-700 hover:text-green-800"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="text-green-700 hover:text-green-800"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pied de page --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <img class="h-10 w-auto mb-4" src="https://via.placeholder.com/150x50?text=PlasticChain" alt="PlasticChain Logo"> | |
| <p class="text-gray-400">Transformer le plastique en or à Kinshasa depuis 2018.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Liens rapides</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#mission" class="text-gray-400 hover:text-white">Notre Mission</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-white">Nos Services</a></li> | |
| <li><a href="#avantages" class="text-gray-400 hover:text-white">Avantages</a></li> | |
| <li><a href="#impact" class="text-gray-400 hover:text-white">Notre Impact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Collecte B2B</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Collecte à domicile</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pavés écologiques</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Formations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Newsletter</h3> | |
| <p class="text-gray-400 mb-4">Abonnez-vous à notre newsletter pour suivre nos actualités.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Votre email" class="px-4 py-2 w-full rounded-l focus:outline-none text-gray-900"> | |
| <button type="submit" class="bg-green-700 hover:bg-green-800 px-4 py-2 rounded-r"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm">© 2023 PlasticChain. Tous droits réservés.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Mentions légales</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Politique de confidentialité</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Conditions d'utilisation</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Counter animation | |
| const counters = document.querySelectorAll('.counter'); | |
| const speed = 200; | |
| function animateCounters() { | |
| counters.forEach(counter => { | |
| const target = +counter.getAttribute('data-target'); | |
| const count = +counter.innerText; | |
| const increment = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(animateCounters, 1); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| }); | |
| } | |
| // Scroll animation | |
| function checkScroll() { | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| fadeElements.forEach(element => { | |
| const elementTop = element.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (elementTop < windowHeight - 100) { | |
| element.classList.add('visible'); | |
| } | |
| }); | |
| } | |
| // Initialize counters when mission section is in view | |
| const missionSection = document.getElementById('mission'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateCounters(); | |
| observer.unobserve(missionSection); | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| observer.observe(missionSection); | |
| // Check scroll on load and scroll | |
| window.addEventListener('load', checkScroll); | |
| window.addEventListener('scroll', checkScroll); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=evoluxsa/plastique-chain" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |