Spaces:
Running
Running
| class CustomServices extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .service-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .service-card:hover .service-icon { | |
| transform: scale(1.1); | |
| color: #3b82f6; | |
| } | |
| </style> | |
| <section id="services" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="section-title text-3xl font-bold text-gray-800 mb-4">Nos Services</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto"> | |
| Des solutions complètes pour répondre à tous vos besoins en communication et médias. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md border border-gray-100 transition duration-300"> | |
| <div class="service-icon text-blue-500 mb-6"> | |
| <i data-feather="film" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Production Vidéo</h3> | |
| <p class="text-gray-600"> | |
| Création de contenus vidéo professionnels pour promouvoir votre marque et engager votre audience. | |
| </p> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md border border-gray-100 transition duration-300"> | |
| <div class="service-icon text-blue-500 mb-6"> | |
| <i data-feather="radio" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Production Radio</h3> | |
| <p class="text-gray-600"> | |
| Conception et production de spots radio percutants pour maximiser votre impact audio. | |
| </p> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md border border-gray-100 transition duration-300"> | |
| <div class="service-icon text-blue-500 mb-6"> | |
| <i data-feather="monitor" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Stratégie Digitale</h3> | |
| <p class="text-gray-600"> | |
| Plans de communication digitale sur mesure pour atteindre vos objectifs business. | |
| </p> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md border border-gray-100 transition duration-300"> | |
| <div class="service-icon text-blue-500 mb-6"> | |
| <i data-feather="bar-chart-2" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Analyse Média</h3> | |
| <p class="text-gray-600"> | |
| Mesure et optimisation de vos performances médias grâce à des analyses approfondies. | |
| </p> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md border border-gray-100 transition duration-300"> | |
| <div class="service-icon text-blue-500 mb-6"> | |
| <i data-feather="users" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Formation Média</h3> | |
| <p class="text-gray-600"> | |
| Programmes de formation pour maîtriser les outils et techniques des médias modernes. | |
| </p> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md border border-gray-100 transition duration-300"> | |
| <div class="service-icon text-blue-500 mb-6"> | |
| <i data-feather="mic" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Relations Presse</h3> | |
| <p class="text-gray-600"> | |
| Gestion de vos relations avec les médias pour maximiser votre couverture presse. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-services', CustomServices); |