feat: Complete professional redesign of quiz selection page with enhanced UI/UX

src/App.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import ModeSelection from "./pages/ModeSelection";
 import FrameworkSelection from "./pages/FrameworkSelection";
 import InterviewPage from "./pages/InterviewPage";
-import QuizSelection from "./pages/QuizSelection";
+import QuizSelectionPage from "./pages/QuizSelectionPage";
 import InteractiveQuizPage from "./pages/InteractiveQuizPage";
 import { ErrorBoundary } from "./core/components/ErrorBoundary";
 import { ThemeProvider } from "./contexts/ThemeContext";
@@ -19,7 +19,7 @@ export default function App() {
               <Route path="/" element={<ModeSelection />} />
               <Route path="/study" element={<FrameworkSelection />} />
               <Route path="/study/:framework" element={<InterviewPage />} />
-              <Route path="/quiz" element={<QuizSelection />} />
+              <Route path="/quiz" element={<QuizSelectionPage />} />
               <Route path="/quiz/:framework/:level" element={<InteractiveQuizPage />} />
               <Route path="*" element={<Navigate to="/" replace />} />
             </Routes>

src/components/interactive-quiz/InteractiveQuizResults.tsx

@@ -12,6 +12,7 @@ import { PerformanceBreakdown } from "./results/PerformanceBreakdown";
 import { Recommendations } from "./results/Recommendations";
 import { AnswerAnalysis } from "./results/AnswerAnalysis";
 import { ActionButtons } from "./results/ActionButtons";
+import { ResultsDashboard } from "./results/ResultsDashboard";
 import { analyzeAnswers, getPerformanceMessage } from "../../utils/quizAnalysis";
 import type { InteractiveQuizQuestion } from "../../types/interactive-quiz";
 
@@ -22,7 +23,7 @@ export default function InteractiveQuizResults({
 }: QuizResultsProps) {
   const [animatedScore, setAnimatedScore] = useState(0);
   const [animatedPercentage, setAnimatedPercentage] = useState(0);
-  const [selectedTab, setSelectedTab] = useState<"overview" | "analysis">("overview");
+  const [selectedTab, setSelectedTab] = useState<"overview" | "analysis" | "dashboard">("overview");
 
   const {
     session,
@@ -69,21 +70,35 @@ export default function InteractiveQuizResults({
   }, [score, percentage]);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
-      <div className="container mx-auto px-2 py-4 sm:px-4 sm:py-8">
-        {/* Header */}
-        <div className="mb-4 text-center sm:mb-8">
-          <h1 className="mb-2 text-2xl font-bold text-gray-900 dark:text-white sm:text-4xl">
-            Quiz Complete! 🎯
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-gray-900 dark:via-slate-800 dark:to-indigo-900">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-30">
+        <div className="h-full w-full bg-[radial-gradient(circle_at_1px_1px,rgba(156,146,172,0.15)_1px,transparent_0)] bg-[length:20px_20px]"></div>
+      </div>
+
+      <div className="container relative mx-auto px-4 py-8 sm:px-6 sm:py-12">
+        {/* Enhanced Header */}
+        <div className="mb-8 text-center sm:mb-12">
+          <div className="mb-4 inline-flex items-center rounded-full bg-white/80 px-6 py-3 shadow-lg backdrop-blur-sm dark:bg-gray-800/80">
+            <div className="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-r from-emerald-500 to-green-600">
+              <span className="text-sm font-bold text-white">✓</span>
+            </div>
+            <span className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+              Quiz Complete
+            </span>
+          </div>
+
+          <h1 className="mb-4 bg-gradient-to-r from-slate-900 via-blue-800 to-indigo-800 bg-clip-text text-3xl font-bold text-transparent dark:from-white dark:via-blue-200 dark:to-indigo-200 sm:text-5xl">
+            Excellent Work! 🎯
           </h1>
-          <p className="text-sm text-gray-600 dark:text-gray-400 sm:text-lg">
-            Here's how you performed
+          <p className="text-lg text-gray-600 dark:text-gray-400 sm:text-xl">
+            Here's your detailed performance analysis
           </p>
         </div>
 
-        {/* Main Score Card */}
-        <div className="mx-auto mb-4 max-w-4xl sm:mb-8">
-          <div className="rounded-2xl bg-white p-4 shadow-2xl dark:bg-gray-800 sm:rounded-3xl sm:p-8">
+        {/* Enhanced Main Score Card */}
+        <div className="mx-auto mb-8 max-w-5xl sm:mb-12">
+          <div className="overflow-hidden rounded-3xl bg-white/80 p-6 shadow-2xl backdrop-blur-sm dark:bg-gray-800/80 sm:rounded-[2rem] sm:p-10">
             {/* Score Display */}
             <ScoreDisplay
               animatedScore={animatedScore}
@@ -94,30 +109,36 @@ export default function InteractiveQuizResults({
               performance={performance}
             />
 
-            {/* Stats Grid */}
-            <StatsGrid
-              timeSpent={timeSpent}
-              totalQuestions={totalQuestions}
-              correctAnswers={correctAnswers}
-            />
-
-            {/* Tab Navigation */}
-            <TabNavigation selectedTab={selectedTab} onTabChange={setSelectedTab} />
-
-            {/* Tab Content */}
+            {/* Enhanced Stats Grid */}
+            <div className="mb-8">
+              <StatsGrid
+                timeSpent={timeSpent}
+                totalQuestions={totalQuestions}
+                correctAnswers={correctAnswers}
+              />
+            </div>
+
+            {/* Enhanced Tab Navigation */}
+            <div className="mb-8">
+              <TabNavigation selectedTab={selectedTab} onTabChange={setSelectedTab} />
+            </div>
+
+            {/* Enhanced Tab Content */}
             {selectedTab === "overview" && (
-              <div className="space-y-4 sm:space-y-6">
+              <div className="space-y-6 sm:space-y-8">
                 <PerformanceBreakdown breakdown={breakdown} />
                 <Recommendations recommendations={recommendations} />
               </div>
             )}
 
             {selectedTab === "analysis" && <AnswerAnalysis answerAnalysis={answerAnalysis} />}
+
+            {selectedTab === "dashboard" && <ResultsDashboard result={result} />}
           </div>
         </div>
 
-        {/* Action Buttons */}
-        <div className="px-2 sm:px-0">
+        {/* Enhanced Action Buttons */}
+        <div className="px-4 sm:px-0">
           <ActionButtons onRestart={onRestart} onBackToSelection={onBackToSelection} />
         </div>
       </div>