feat: add keyboard controls to interactive sliders

- Add arrow key navigation (left/right) for both Values and ProductPrinciples sliders
- Add space/enter key to pause/resume auto-advance
- Add Home/End keys to jump to first/last slide
- Add visual hints showing available keyboard controls
- Controls only active when sliders are in view
- Maintain existing mouse/touch interactions
- Improve accessibility and user control

Author: mmaxence

src/components/ProductPrinciples.tsx

@@ -138,6 +138,46 @@ const ProductPrinciples = () => {
     }
   }, [selectedPrinciple, isHovered]);
 
+  // Keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isPrinciplesInView) return;
+
+      switch (event.key) {
+        case 'ArrowLeft':
+          event.preventDefault();
+          setSelectedPrinciple(prev => prev === 0 ? translatedPrinciples.length - 1 : prev - 1);
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          setSelectedPrinciple(prev => (prev + 1) % translatedPrinciples.length);
+          break;
+        case ' ':
+        case 'Enter':
+          event.preventDefault();
+          // Pause/resume auto-advance
+          setIsHovered(prev => !prev);
+          break;
+        case 'Home':
+          event.preventDefault();
+          setSelectedPrinciple(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          setSelectedPrinciple(translatedPrinciples.length - 1);
+          break;
+      }
+    };
+
+    if (isPrinciplesInView) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isPrinciplesInView, translatedPrinciples.length]);
+
   const containerVariants = {
     hidden: { opacity: 0 },
     visible: {
@@ -168,9 +208,14 @@ const ProductPrinciples = () => {
               <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
                 {t('principles.title')}
               </h2>
-              <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              <p className="text-xl text-muted-foreground max-w-3xl mx-auto mb-4">
                 {t('principles.subtitle')}
               </p>
+              <div className="text-sm text-muted-foreground/70 flex items-center justify-center gap-2">
+                <span>Use arrow keys to navigate</span>
+                <span>•</span>
+                <span>Space to pause/resume</span>
+              </div>
             </SectionTitle>
           </BlurReveal>
         </motion.div>

src/components/Values.tsx

@@ -180,16 +180,61 @@ const Values = () => {
     }
   }, [selectedValue]);
 
+  // Keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isValuesInView) return;
+
+      switch (event.key) {
+        case 'ArrowLeft':
+          event.preventDefault();
+          setSelectedValue(prev => prev === 0 ? translatedValues.length - 1 : prev - 1);
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          setSelectedValue(prev => (prev + 1) % translatedValues.length);
+          break;
+        case ' ':
+        case 'Enter':
+          event.preventDefault();
+          // Pause/resume auto-advance
+          setIsHovered(prev => !prev);
+          break;
+        case 'Home':
+          event.preventDefault();
+          setSelectedValue(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          setSelectedValue(translatedValues.length - 1);
+          break;
+      }
+    };
+
+    if (isValuesInView) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isValuesInView, translatedValues.length]);
+
   return (
     <section className="py-20 px-4 sm:px-6 lg:px-8" ref={valuesSectionRef}>
       <div className="max-w-7xl mx-auto">
         <div className="text-center mb-16">
           <h2 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
             {t('values.title')}
           </h2>
-          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto mb-4">
             {t('values.subtitle')}
           </p>
+          <div className="text-sm text-muted-foreground/70 flex items-center justify-center gap-2">
+            <span>Use arrow keys to navigate</span>
+            <span>•</span>
+            <span>Space to pause/resume</span>
+          </div>
         </div>
 
         {/* Value Navigation */}