{\\n const [showCode, setShowCode] = useState(false);\\n\\n const htmlCode = `\\n\\n \\n \\n Nos Partenaires de Confiance\\n Nous collaborons avec les leaders du secteur pour vous offrir des solutions d’excellence\\n \\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n\\n \\n Survolez le carrousel pour faire une pause\\n \\n \\n`;\\n\\n const cssCode = `\\n/* Carrousel de Partenaires – Styles CSS */\\n.partners-carousel-section {\\n width: 100%;\\n padding: 4rem 1rem;\\n background: linear-gradient(135deg, #fafafa 0%, #f4f4f5 100%);\\n overflow: hidden;\\n}\\n\\n.partners-container {\\n max-width: 1280px;\\n margin: 0 auto;\\n}\\n\\n.partners-header {\\n text-align: center;\\n margin-bottom: 3rem;\\n animation: fadeIn 1s ease-in-out;\\n}\\n\\n.partners-title {\\n font-size: 2.5rem;\\n font-weight: bold;\\n color: #1e293b;\\n margin-bottom: 1rem;\\n}\\n\\n.partners-subtitle {\\n font-size: 1.125rem;\\n color: #64748b;\\n max-width: 32rem;\\n margin: 0 auto;\\n}\\n\\n.carousel-wrapper {\\n position: relative;\\n overflow: hidden;\\n}\\n\\n.gradient-left,\\n.gradient-right {\\n position: absolute;\\n top: 0;\\n width: 5rem;\\n height: 100%;\\n z-index: 10;\\n pointer-events: none;\\n}\\n\\n.gradient-left {\\n left: 0;\\n background: linear-gradient(to right, #fafafa, transparent);\\n}\\n\\n.gradient-right {\\n right: 0;\\n background: linear-gradient(to left, #fafafa, transparent);\\n}\\n\\n.carousel-track {\\n display: flex;\\n gap: 2rem;\\n animation: slideLeft 40s linear infinite;\\n width: calc(15 * 15rem);\\n}\\n\\n.carousel-track:hover {\\n animation-play-state: paused;\\n}\\n\\n.partner-card {\\n flex-shrink: 0;\\n width: 14rem;\\n height: 8rem;\\n background: white;\\n border: 1px solid #e2e8f0;\\n border-radius: 0.5rem;\\n padding: 1.5rem;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\\n cursor: pointer;\\n}\\n\\n.partner-card:hover {\\n background: #f8fafc;\\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\\n transform: scale(1.05) translateY(-2px);\\n}\\n\\n.partner-card img {\\n max-width: 100%;\\n max-height: 100%;\\n object-fit: contain;\\n filter: grayscale(100%);\\n transition: filter 0.3s ease;\\n}\\n\\n.partner-card:hover img {\\n filter: grayscale(0%);\\n}\\n\\n.carousel-hint {\\n text-align: center;\\n margin-top: 2rem;\\n}\\n\\n.carousel-hint p {\\n font-size: 0.875rem;\\n color: #64748b;\\n}\\n\\n@keyframes slideLeft {\\n 0% {\\n transform: translateX(0);\\n }\\n 100% {\\n transform: translateX(calc(-5 * 15rem – 5 * 2rem));\\n }\\n}\\n\\n@keyframes fadeIn {\\n from {\\n opacity: 0;\\n transform: translateY(20px);\\n }\\n to {\\n opacity: 1;\\n transform: translateY(0);\\n }\\n}\\n\\n/* Responsive Design */\\n@media (max-width: 768px) {\\n .partners-title {\\n font-size: 2rem;\\n }\\n \\n .partners-subtitle {\\n font-size: 1rem;\\n }\\n \\n .partner-card {\\n width: 12rem;\\n height: 6rem;\\n }\\n \\n .carousel-track {\\n width: calc(15 * 13rem);\\n }\\n \\n @keyframes slideLeft {\\n 0% {\\n transform: translateX(0);\\n }\\n 100% {\\n transform: translateX(calc(-5 * 13rem – 5 * 2rem));\\n }\\n }\\n}\\n`;\\n\\n const fullCode = cssCode + ‘\\\\n\\\\n’ + htmlCode;\\n\\n const copyToClipboard = async () => {\\n try {\\n await navigator.clipboard.writeText(fullCode);\\n toast.success(\\\ »Code copié dans le presse-papiers !\\\ »);\\n } catch (err) {\\n toast.error(\\\ »Erreur lors de la copie\\\ »);\\n }\\n };\\n\\n return (\\n \\n \\n \\n Code pour WordPress\\n setShowCode(!showCode)}\\n variant=\\\ »outline\\\ »\\n >\\n {showCode ? \\\ »Masquer le code\\\ » : \\\ »Voir le code\\\ »}\\n \\n \\n \\n \\n Instructions :\\n \\n Copiez le code complet ci-dessous\\n Uploadez vos 5 images de logos dans la médiathèque WordPress\\n Renommez les images selon les noms dans le code HTML\\n Collez le code dans un bloc HTML personnalisé de WordPress\\n Ou utilisez un plugin comme \\\ »Insert Headers and Footers\\\ » pour le CSS\\n \\n \\n\\n {showCode && (\\n \\n \\n \\n Copier tout le code\\n \\n \\n \\n \\n \\n {fullCode}\\n \\n \\n \\n )}\\n \\n \\n );\\n};\\n\\nexport default CodeGenerator;\ »} »>
\\n \\n \\n \\n Instructions d’intégration WordPress\\n \\n \\n Pour intégrer ce carrousel sur votre site WordPress :\\n \\n Copiez le code HTML/CSS généré par ce composant\\n Ajoutez les images dans votre médiathèque WordPress\\n Utilisez un plugin comme \\\ »Insert Headers and Footers\\\ » pour ajouter le CSS\\n Collez le HTML dans un bloc HTML personnalisé ou via un shortcode\\n Ajustez les chemins des images selon votre structure WordPress\\n \\n \\n \ », \ »first_replaced_line\ »: 16, \ »last_replaced_line\ »: 32, \ »replace\ »: \ » \\n \\n \ »} »>