style : added styling to the insertion sort and merge sort

Merge pull request #21 from Sohan-Rout/main1

Author: Sohan-Rout

app/visualizer/page.jsx

@@ -55,6 +55,16 @@ export const metadata = {
     'DSA with Code'
   ],
   robots: 'index, follow',
+  openGraph: {
+    images: [
+      {
+        url: "/og/visualizer.png",
+        width: 1200,
+        height: 630,
+        alt: "Algorithm Visualization",
+      },
+    ],
+  },
 };
 
 const sections = [

app/visualizer/searching/binarysearch/page.jsx

@@ -44,7 +44,7 @@ export const metadata = {
   openGraph: {
     images: [
       {
-        url: "/og/binarySearch.png",
+        url: "/og/searching/binarySearch.png",
         width: 1200,
         height: 630,
         alt: "Binary Search Algorithm Visualization",

app/visualizer/searching/linearsearch/page.jsx

@@ -44,7 +44,7 @@ export const metadata = {
   openGraph: {
     images: [
       {
-        url: "/og/linearSearch.png",
+        url: "/og/searching/linearSearch.png",
         width: 1200,
         height: 630,
         alt: "Linear Search Algorithm Visualization",

app/visualizer/sorting/insertionsort/animation.jsx

@@ -234,7 +234,7 @@ const InsertionSortVisualizer = () => {
         </div>
 
         {/* 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">Array Visualization</h2>
           {array.length > 0 ? (
             <div className="flex flex-wrap gap-4 justify-center">

app/visualizer/sorting/insertionsort/codeBlock.jsx

@@ -226,10 +226,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/insertionsort/page.jsx

@@ -124,4 +124,4 @@ export default function Page() {
       <Footer />
     </>
   );
-}
+}

app/visualizer/sorting/insertionsort/quiz.jsx

@@ -181,22 +181,22 @@ const InsertionSortQuiz = () => {
   };
 
   return (
-    <section className="max-w-4xl 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">
                 Insertion 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>

app/visualizer/sorting/mergesort/animation.jsx

@@ -1,15 +1,8 @@
 "use client";
 import React, { useState, useRef, useEffect } from "react";
 import { gsap } from "gsap";
-import Footer from "@/app/components/footer";
-import Content from "@/app/visualizer/sorting/mergesort/content";
 import ArrayGenerator from "@/app/components/ui/randomArray";
 import CustomArrayInput from "@/app/components/ui/customArrayInput";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import CodeBlock from "@/app/visualizer/sorting/mergesort/codeBlock";
-import Quiz from "@/app/visualizer/sorting/mergesort/quiz";
-import GoBackButton from "@/app/components/ui/goback";
-import BackToTop from "@/app/components/ui/backtotop";
 
 const MergeSortVisualizer = () => {
   const [array, setArray] = useState([]);
@@ -228,20 +221,7 @@ const MergeSortVisualizer = () => {
 
 
   return (
-    <div className="min-h-screen max-h-auto bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200">
-      <main className="container mx-auto px-6 pt-16 pb-4">
-
-          { /* go back block here */}
-          <div className="mt-10 sm:mt-10">
-            <GoBackButton />
-          </div>
-
-          { /* main logic here */}
-          <h1 className="text-4xl md:text-4xl mt-6 ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
-            <span className="text-black dark:text-white">Merge Sort</span>
-          </h1>
-          <div className='bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl mt-2 mb-5'></div>
-          <Content />
+      <main className="container mx-auto px-6 pt-2 pb-6">
         <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
           Visualize the divide-and-conquer approach of Merge Sort with recursive
           splitting and merging.
@@ -364,57 +344,8 @@ const MergeSortVisualizer = () => {
               </div>
             )}
           </div>
-
-          {/* Enhanced Recursion Tree */}
-
-          {/* Algorithm Explanation with Visual Guide */}
-          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mt-8">
-            <h2 className="text-xl font-semibold mb-4">Merge Sort Process</h2>
-            <div>
-              <div>
-                <h3 className="font-medium mb-2">Steps:</h3>
-                <ol className="list-decimal pl-5 space-y-2">
-                  <li>
-                    Divide array into halves recursively until single elements
-                  </li>
-                  <li>Merge adjacent subarrays in sorted order</li>
-                  <li>Continue merging until whole array is sorted</li>
-                </ol>
-              </div>
-            </div>
-          </div>
         </div>
-
-        { /* quiz block here */}
-          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-
-        <CodeBlock />
-        <ExploreOther
-          title="Explore Sorting Algorithms"
-          links={[
-            {
-              text: "Selection Sort",
-              url: "/visualizer/sorting/selectionsort",
-            },
-            { text: "Bubble Sort", url: "/visualizer/sorting/bubblesort" },
-            {
-              text: "Insertion Sort",
-              url: "/visualizer/sorting/insertionsort",
-            },
-            { text: "Quick Sort", url: "/visualizer/sorting/quicksort" },
-            { text: "Heap Sort", url: "/algorithms/sorting/heap" },
-          ]}
-        />
       </main>
-      <div>
-        <div className="bg-gray-700 z-10 h-[1px]"></div>
-      </div>
-      <BackToTop/>
-      <Footer />
-    </div>
   );
 };