Feat : added new layouts and dsa challenge to whole sorting section

Merge pull request #22 from Sohan-Rout/main1

Author: Sohan-Rout

app/visualizer/sorting/mergesort/animation.jsx

@@ -229,7 +229,7 @@ const MergeSortVisualizer = () => {
 
         <div className="max-w-4xl mx-auto">
           {/* Controls */}
-          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-8 border border-gray-200 dark:border-gray-700">
+          <div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
               <div>
                 <ArrayGenerator
@@ -254,13 +254,13 @@ const MergeSortVisualizer = () => {
                 <button
                   onClick={mergeSort}
                   disabled={!array.length || sorting || sorted}
-                  className="w-full bg-none border border-black dark:border-white text-black dark:text-white px-4 py-2 rounded disabled:opacity-50 disabled:text-blue-500 disabled:border-blue-500 disabled:dark:border-blue-500 disabled:dark:text-blue-500"
+                  className="w-full disabled:opacity-75 bg-none bg-green-500 px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-black"
                 >
                   {sorting ? "Sorting..." : "Start Merge Sort"}
                 </button>
                 <button
                   onClick={reset}
-                  className="w-full bg-none border border-black dark:border-white text-balck dark:text-white px-4 py-2 rounded"
+                  className="w-full bg-none text-white bg-red-500 px-4 py-2 rounded transition-colors text-sm sm:text-base"
                 >
                   Reset All
                 </button>
@@ -285,19 +285,19 @@ const MergeSortVisualizer = () => {
 
             {/* Stats */}
             <div className="grid grid-cols-2 gap-4 text-sm">
-              <div className="bg-gray-100 dark:bg-gray-700 p-3 rounded">
+              <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
                 <div className="font-medium">Comparisons:</div>
                 <div className="text-2xl">{comparisons}</div>
               </div>
-              <div className="bg-gray-100 dark:bg-gray-700 p-3 rounded">
+              <div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
                 <div className="font-medium">Merges:</div>
                 <div className="text-2xl">{swaps}</div>
               </div>
             </div>
           </div>
 
           {/* Main Array Visualization */}
-          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
+          <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
             <h2 className="text-xl font-semibold mb-4">Main Array</h2>
             {array.length > 0 ? (
               <div className="flex flex-wrap gap-4 justify-center">

app/visualizer/sorting/mergesort/codeBlock.jsx

@@ -312,10 +312,10 @@ int main() {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.3 }}
-        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300"
+        className="bg-white dark:bg-neutral-950 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300"
       >
         {/* Header */}
-        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-gray-50 dark:bg-neutral-950 border-b border-gray-200 dark:border-gray-700">
           <div className="flex items-center mb-2 sm:mb-0">
             <FaCode className="text-blue-500 mr-2 text-lg" />
             <h3 className="text-lg font-semibold text-gray-800 dark:text-white">

app/visualizer/sorting/mergesort/content.jsx

@@ -157,9 +157,9 @@ const content = () => {
             </p>
             <div className="mt-8">
               <ComplexityGraph
-                bestCase={(n) => n * Math.log(n)}
-                averageCase={(n) => n * Math.log(n)}
-                worstCase={(n) => n * Math.log(n)}
+                bestCase={(n) => n * Math.log2(n)}
+                averageCase={(n) => n * Math.log2(n)}
+                worstCase={(n) => n * Math.log2(n)}
                 maxN={25}
               />
             </div>

app/visualizer/sorting/mergesort/quiz.jsx

@@ -180,22 +180,22 @@ const MergeSortQuiz = () => {
   };
 
   return (
-    <section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
+    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
       {showIntro ? (
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           className="text-center"
         >
           <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
+            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
               <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
             </div>
           </div>
           <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
             Merge Sort Quiz Challenge
           </h2>
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
+          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
             <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
               <FaInfoCircle className="mr-2" /> How it works:
             </h3>