thierrypigot · October 3, 2025 12:56
diff --git a/Feature Showcase.html b/Feature Showcase.html
 <!DOCTYPE html>
 <html lang="fr">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feature Showcase</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: #f5f5f7;
            padding: 40px 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            background: white;
            padding: 60px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }

        .content-section {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .feature-block {
            padding: 30px;
            border-left: 4px solid transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 8px;
            outline: none;
        }

        .feature-block:hover,
        .feature-block:focus {
            background: #f8f9fa;
            border-left-color: #6366f1;
            transform: translateX(10px);
        }

        .feature-block.active {
            background: #f0f1ff;
            border-left-color: #6366f1;
        }

        .feature-block h2 {
            font-size: 24px;
            color: #1a1a1a;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .feature-block p {
            font-size: 16px;
            line-height: 1.6;
            color: #666;
        }

        .feature-block a {
            color: #6366f1;
            text-decoration: none;
            font-weight: 500;
        }

        .feature-block a:hover {
            text-decoration: underline;
        }

        .image-section {
            position: relative;
            height: 600px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        }

        .image-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .image-container.active {
            opacity: 1;
        }

        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .keyboard-hint {
            text-align: center;
            margin-top: 20px;
            color: #999;
            font-size: 14px;
        }

        @media (max-width: 1024px) {
            .container {
                grid-template-columns: 1fr;
                padding: 40px;
            }

            .image-section {
                height: 400px;
                order: -1;
            }
        }

        @media (max-width: 640px) {
            .container {
                padding: 30px 20px;
                gap: 30px;
            }

            .feature-block {
                padding: 20px;
            }

            .feature-block h2 {
                font-size: 20px;
            }

            .image-section {
                height: 300px;
            }
        }
    </style>
 </head>
 <body>
    <div class="container">
        <div class="content-section">
            <div class="feature-block active" tabindex="0" data-image="1">
                <h2>Lightning-Fast Support</h2>
                <p>Since 2005, we've built a reputation for exceptional responsiveness. Our French WordPress experts respond within hours, not days. With over <a href="https://www.wp-assistance.fr">10,000 tickets resolved</a> and 100% customer satisfaction, we're here when you need us most — just a phone call away.</p>
            </div>

            <div class="feature-block" tabindex="0" data-image="2">
                <h2>WordPress Security Experts</h2>
                <p>Your site's security is our priority. We specialize in <a href="https://www.wp-assistance.fr">cleaning hacked sites</a>, preventing future infections, and protecting over 150 websites monthly. From malware removal to complete security audits, we keep your WordPress fortress secure.</p>
            </div>

            <div class="feature-block" tabindex="0" data-image="3">
                <h2>Performance Optimization</h2>
                <p>A slow site kills conversions. Our team optimizes WordPress sites to load in under 500ms. We tackle everything from <a href="https://www.wp-assistance.fr">database optimization</a> to CDN setup, ensuring your visitors get the blazing-fast experience they deserve.</p>
            </div>

            <div class="feature-block" tabindex="0" data-image="4">
                <h2>Full-Service Maintenance</h2>
                <p>Focus on your business while we handle the technical details. Our comprehensive maintenance packages include regular updates, daily backups, uptime monitoring, and <a href="https://www.wp-assistance.fr">SEO optimization</a>. Your WordPress site, always up-to-date and performing at its peak.</p>
            </div>
        </div>

        <div class="image-section">
            <div class="image-container active" data-image="1">
                <img src="https://picsum.photos/800/1000?random=1" alt="Customer Support">
            </div>
            <div class="image-container" data-image="2">
                <img src="https://picsum.photos/800/1000?random=2" alt="Product Focused">
            </div>
            <div class="image-container" data-image="3">
                <img src="https://picsum.photos/800/1000?random=3" alt="Scales with Your Church">
            </div>
            <div class="image-container" data-image="4">
                <img src="https://picsum.photos/800/1000?random=4" alt="Compliance Experts">
            </div>
        </div>
    </div>

    <p class="keyboard-hint">💡 Utilisez Tab pour naviguer au clavier entre les sections</p>

    <script>
        const featureBlocks = document.querySelectorAll('.feature-block');
        const imageContainers = document.querySelectorAll('.image-container');

        function switchImage(imageNumber) {
            // Retirer la classe active de tous les blocs et images
            featureBlocks.forEach(block => block.classList.remove('active'));
            imageContainers.forEach(img => img.classList.remove('active'));

            // Ajouter la classe active au bloc et à l'image correspondants
            const activeBlock = document.querySelector(`.feature-block[data-image="${imageNumber}"]`);
            const activeImage = document.querySelector(`.image-container[data-image="${imageNumber}"]`);
            
            if (activeBlock) activeBlock.classList.add('active');
            if (activeImage) activeImage.classList.add('active');
        }

        featureBlocks.forEach(block => {
            // Événement au survol de la souris
            block.addEventListener('mouseenter', () => {
                const imageNumber = block.getAttribute('data-image');
                switchImage(imageNumber);
            });

            // Événement au focus (navigation clavier)
            block.addEventListener('focus', () => {
                const imageNumber = block.getAttribute('data-image');
                switchImage(imageNumber);
            });

            // Événement au clic
            block.addEventListener('click', () => {
                const imageNumber = block.getAttribute('data-image');
                switchImage(imageNumber);
            });
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Feature Showcase</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	background: #f5f5f7;
	padding: 40px 20px;
	}

	.container {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	background: white;
	padding: 60px;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.1);
	}

	.content-section {
	display: flex;
	flex-direction: column;
	gap: 40px;
	}

	.feature-block {
	padding: 30px;
	border-left: 4px solid transparent;
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 8px;
	outline: none;
	}

	.feature-block:hover,
	.feature-block:focus {
	background: #f8f9fa;
	border-left-color: #6366f1;
	transform: translateX(10px);
	}

	.feature-block.active {
	background: #f0f1ff;
	border-left-color: #6366f1;
	}

	.feature-block h2 {
	font-size: 24px;
	color: #1a1a1a;
	margin-bottom: 12px;
	font-weight: 600;
	}

	.feature-block p {
	font-size: 16px;
	line-height: 1.6;
	color: #666;
	}

	.feature-block a {
	color: #6366f1;
	text-decoration: none;
	font-weight: 500;
	}

	.feature-block a:hover {
	text-decoration: underline;
	}

	.image-section {
	position: relative;
	height: 600px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.15);
	}

	.image-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
	}

	.image-container.active {
	opacity: 1;
	}

	.image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

	.keyboard-hint {
	text-align: center;
	margin-top: 20px;
	color: #999;
	font-size: 14px;
	}

	@media (max-width: 1024px) {
	.container {
	grid-template-columns: 1fr;
	padding: 40px;
	}

	.image-section {
	height: 400px;
	order: -1;
	}
	}

	@media (max-width: 640px) {
	.container {
	padding: 30px 20px;
	gap: 30px;
	}

	.feature-block {
	padding: 20px;
	}

	.feature-block h2 {
	font-size: 20px;
	}

	.image-section {
	height: 300px;
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="content-section">
	<div class="feature-block active" tabindex="0" data-image="1">
	<h2>Lightning-Fast Support</h2>
	<p>Since 2005, we've built a reputation for exceptional responsiveness. Our French WordPress experts respond within hours, not days. With over <a href="https://www.wp-assistance.fr">10,000 tickets resolved</a> and 100% customer satisfaction, we're here when you need us most — just a phone call away.</p>
	</div>

	<div class="feature-block" tabindex="0" data-image="2">
	<h2>WordPress Security Experts</h2>
	<p>Your site's security is our priority. We specialize in <a href="https://www.wp-assistance.fr">cleaning hacked sites</a>, preventing future infections, and protecting over 150 websites monthly. From malware removal to complete security audits, we keep your WordPress fortress secure.</p>
	</div>

	<div class="feature-block" tabindex="0" data-image="3">
	<h2>Performance Optimization</h2>
	<p>A slow site kills conversions. Our team optimizes WordPress sites to load in under 500ms. We tackle everything from <a href="https://www.wp-assistance.fr">database optimization</a> to CDN setup, ensuring your visitors get the blazing-fast experience they deserve.</p>
	</div>

	<div class="feature-block" tabindex="0" data-image="4">
	<h2>Full-Service Maintenance</h2>
	<p>Focus on your business while we handle the technical details. Our comprehensive maintenance packages include regular updates, daily backups, uptime monitoring, and <a href="https://www.wp-assistance.fr">SEO optimization</a>. Your WordPress site, always up-to-date and performing at its peak.</p>
	</div>
	</div>

	<div class="image-section">
	<div class="image-container active" data-image="1">
	<img src="https://picsum.photos/800/1000?random=1" alt="Customer Support">
	</div>
	<div class="image-container" data-image="2">
	<img src="https://picsum.photos/800/1000?random=2" alt="Product Focused">
	</div>
	<div class="image-container" data-image="3">
	<img src="https://picsum.photos/800/1000?random=3" alt="Scales with Your Church">
	</div>
	<div class="image-container" data-image="4">
	<img src="https://picsum.photos/800/1000?random=4" alt="Compliance Experts">
	</div>
	</div>
	</div>

	<p class="keyboard-hint">💡 Utilisez Tab pour naviguer au clavier entre les sections</p>

	<script>
	const featureBlocks = document.querySelectorAll('.feature-block');
	const imageContainers = document.querySelectorAll('.image-container');

	function switchImage(imageNumber) {
	// Retirer la classe active de tous les blocs et images
	featureBlocks.forEach(block => block.classList.remove('active'));
	imageContainers.forEach(img => img.classList.remove('active'));

	// Ajouter la classe active au bloc et à l'image correspondants
	const activeBlock = document.querySelector(`.feature-block[data-image="${imageNumber}"]`);
	const activeImage = document.querySelector(`.image-container[data-image="${imageNumber}"]`);

	if (activeBlock) activeBlock.classList.add('active');
	if (activeImage) activeImage.classList.add('active');
	}

	featureBlocks.forEach(block => {
	// Événement au survol de la souris
	block.addEventListener('mouseenter', () => {
	const imageNumber = block.getAttribute('data-image');
	switchImage(imageNumber);
	});

	// Événement au focus (navigation clavier)
	block.addEventListener('focus', () => {
	const imageNumber = block.getAttribute('data-image');
	switchImage(imageNumber);
	});

	// Événement au clic
	block.addEventListener('click', () => {
	const imageNumber = block.getAttribute('data-image');
	switchImage(imageNumber);
	});
	});
	</script>
	</body>
	</html>