feat(assessments): add native-like smooth horizontal slide transition to test questions

src/components/Componentes/test-questions-flow.tsx

@@ -198,11 +198,11 @@ export default function TestQuestionsFlow({
       [currentQuestion.id]: value,
     }));
 
-    // Auto advance to next question if not on last question
+    // Auto advance to next question if not on last question with slide animation
     if (!isLastQuestion) {
       setTimeout(() => {
         setCurrentIndex((prev) => Math.min(prev + 1, totalQuestions - 1));
-      }, 250);
+      }, 200);
     }
   };
 
@@ -296,28 +296,45 @@ export default function TestQuestionsFlow({
             </div>
           </div>
 
-          {/* Question Section */}
-          <div className="flex-1 flex flex-col justify-start overflow-y-auto pt-6 pb-4">
+          {/* Question Slider Viewport */}
+          <div className="relative flex-1 w-full overflow-hidden min-h-0">
+            {questions.map((q, index) => {
+              const offset = index - currentIndex;
+              const isNearby = Math.abs(offset) <= 1;
+
+              if (!isNearby) return null;
+
+              const qSelectedValue = answers[q.id];
+              const options = q.options || [];
+
+              return (
+                <div
+                  key={q.id}
+                  aria-hidden={offset !== 0}
+                  className={[
+                    "absolute inset-0 flex flex-col justify-start overflow-y-auto pt-6 pb-4 transition-transform duration-250 ease-[cubic-bezier(0.25,1,0.5,1)]",
+                    offset === 0 ? "pointer-events-auto" : "pointer-events-none",
+                  ].join(" ")}
+                  style={{
+                    transform: `translate3d(${offset * 100}%, 0, 0)`,
+                  }}
+                >
                   {/* Question Title */}
                   <h2
-              className="group-16 font-bold text-[#1B1B1B] leading-[1.45] text-center px-2 mb-8 flex items-center justify-center"
+                    className="group-16 font-bold text-[#1B1B1B] leading-[1.45] text-center px-2 mb-8 flex items-center justify-center shrink-0"
                     style={{ minHeight: "5.8em" }}
                   >
-              <span className="w-full">{currentQuestion.text}</span>
+                    <span className="w-full">{q.text}</span>
                   </h2>
 
                   {/* Answer Options Stack */}
-            {(() => {
-              const options = currentQuestion.options || [];
-
-              return (
                   <div className="flex flex-col gap-3.5 pt-1">
                     {options.map((option) => {
-                    const isSelected = selectedValue === option.value;
+                      const isSelected = qSelectedValue === option.value;
 
                       return (
                         <button
-                        key={`${currentQuestion.id}-${String(option.value)}`}
+                          key={`${q.id}-${String(option.value)}`}
                           type="button"
                           onClick={() => handleOptionSelect(option.value)}
                           className={[
@@ -372,8 +389,9 @@ export default function TestQuestionsFlow({
                       );
                     })}
                   </div>
+                </div>
               );
-            })()}
+            })}
           </div>
 
           {/* Bottom Actions Bar */}