fix: Remove duplicate 'Back to Videos' button on Quiz step

Fixed confusing UX where Quiz step showed two similar buttons.

Problem:
- Quiz component has Previous/Next buttons for quiz navigation
- OnboardingClient added "Back to Videos" button after Quiz component
- This created two buttons that looked similar and confused users

Solution:
- Moved "Back to Videos" button inside Quiz component
- Show it only on results screen, not during quiz questions
- Button appears below the main action buttons (Retake/Continue)

UX Flow:
- During quiz: Only Previous/Next buttons visible
- After quiz: Show results, action buttons, then "Back to Videos"
- Commitment step: Keep "Back to Quiz" button (no conflict)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: Zeff01

apps/codebility/app/applicant/onboarding/_components/OnboardingClient.tsx

@@ -262,23 +262,11 @@ export default function OnboardingClient({
           )}
 
           {currentStep === "quiz" && (
-            <>
-              <Quiz
-                applicantId={applicantId}
-                onQuizComplete={handleQuizComplete}
-              />
-
-              {/* Back to Videos Button */}
-              <div className="mt-6">
-                <Button
-                  onClick={handleBackToVideos}
-                  variant="outline"
-                  className="w-full sm:w-auto"
-                >
-                  ← Back to Videos
-                </Button>
-              </div>
-            </>
+            <Quiz
+              applicantId={applicantId}
+              onQuizComplete={handleQuizComplete}
+              onBackToVideos={handleBackToVideos}
+            />
           )}
 
           {currentStep === "commitment" && (

apps/codebility/app/applicant/onboarding/_components/Quiz.tsx

@@ -8,9 +8,10 @@ import { saveQuizProgress } from "../_service/action";
 interface QuizProps {
   applicantId: string;
   onQuizComplete: (score: number, totalQuestions: number) => void;
+  onBackToVideos?: () => void;
 }
 
-export default function Quiz({ applicantId, onQuizComplete }: QuizProps) {
+export default function Quiz({ applicantId, onQuizComplete, onBackToVideos }: QuizProps) {
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
   const [selectedAnswers, setSelectedAnswers] = useState<Record<number, number>>({});
   const [showResults, setShowResults] = useState(false);
@@ -149,19 +150,34 @@ export default function Quiz({ applicantId, onQuizComplete }: QuizProps) {
         </div>
 
         {/* Action Buttons */}
-        <div className="flex justify-center gap-4">
-          {!passed && (
-            <Button onClick={handleRetake} variant="outline" className="px-8">
-              Retake Quiz
-            </Button>
-          )}
-          {passed && (
-            <Button
-              onClick={handleComplete}
-              className="from-customTeal to-customViolet-100 bg-gradient-to-r via-customBlue-100 px-8"
-            >
-              Continue to Commitment
-            </Button>
+        <div className="flex flex-col gap-4">
+          <div className="flex justify-center gap-4">
+            {!passed && (
+              <Button onClick={handleRetake} variant="outline" className="px-8">
+                Retake Quiz
+              </Button>
+            )}
+            {passed && (
+              <Button
+                onClick={handleComplete}
+                className="from-customTeal to-customViolet-100 bg-gradient-to-r via-customBlue-100 px-8"
+              >
+                Continue to Commitment
+              </Button>
+            )}
+          </div>
+
+          {/* Back to Videos Button */}
+          {onBackToVideos && (
+            <div className="flex justify-center">
+              <Button
+                onClick={onBackToVideos}
+                variant="outline"
+                className="w-full sm:w-auto"
+              >
+                ← Back to Videos
+              </Button>
+            </div>
           )}
         </div>
       </div>