Updates : fixed queue layouts fully

app/components/testimonial.jsx

@@ -55,6 +55,12 @@ const TestimonialSection = () => {
       review: `The breadth of algorithms covered is impressive. From basic sorting to advanced graph algorithms, everything is presented in an accessible way. The only suggestion I have is to add more real-world application examples for each algorithm.`,
       stars: 4,
     },
+    {
+      name: 'Kshitija Ghan',
+      email: '@kshitijaghan24',
+      review: `I got to know about Data Visualizer just a few days ago , yet i feel i learned a lot already . Great platform !!!`,
+      stars: 5,
+    },
   ];
 
   const [expandedReviews, setExpandedReviews] = useState({});

app/visualizer/page.jsx

@@ -210,12 +210,11 @@ const sections = [
             path: "/visualizer/queue/types/singleEnded",
           },
           {
-            name: "Double Ended Queue (Deque)",
+            name: "Double Ended Queue",
             path: "/visualizer/queue/types/deque",
           },
           { name: "Circular Queue", path: "/visualizer/queue/types/circular" },
           { name: "Priority Queue", path: "/visualizer/queue/types/priority" },
-          { name: "Multiple Queue", path: "/visualizer/queue/types/multiple" },
         ],
       },
       {

app/visualizer/queue/implementation/array/codeblock.jsx

@@ -310,14 +310,14 @@ 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">
-              Queue Implementation (Enqueue & Dequeue)
+              Implementation (Enqueue & Dequeue)
             </h3>
           </div>
 

app/visualizer/queue/implementation/array/content.jsx

@@ -1,40 +1,58 @@
+"use client";
+import { useEffect, useState } from "react";
+
 const content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   const paragraph = [
     `Implementing a Queue using an array is a fundamental approach where we use a fixed-size or dynamic array to store elements while maintaining FIFO order. The array implementation requires careful handling of front and rear pointers to efficiently enqueue and dequeue elements.`,
     `In a circular array implementation, we treat the array as circular to maximize space utilization. When either pointer reaches the end of the array, it wraps around to the beginning.`,
     `Queues are widely used in scenarios like printer job scheduling, call center systems, and network packet handling where order preservation is crucial.`,
   ];
 
   const implementationSteps = [
-    { points: "Initialize an array of fixed size (for static implementation) or dynamic array" },
-    { points: "Initialize two pointers: front (for dequeue) and rear (for enqueue), both set to -1 initially" },
-    { points: "Implement boundary checks for overflow (full queue) and underflow (empty queue) conditions" },
-    { points: "For circular queue implementation, use modulo arithmetic for pointer updates" },
-  ];
-
-  const arrayImplementationCode = [
-    { code: "class Queue {" },
-    { code: "  constructor(capacity) {" },
-    { code: "    this.items = new Array(capacity);" },
-    { code: "    this.capacity = capacity;" },
-    { code: "    this.front = -1;" },
-    { code: "    this.rear = -1;" },
-    { code: "    this.size = 0;" },
-    { code: "  }" },
-    { code: "" },
-    { code: "  // Check if queue is full" },
-    { code: "  isFull() {" },
-    { code: "    return this.size === this.capacity;" },
-    { code: "  }" },
-    { code: "" },
-    { code: "  // Check if queue is empty" },
-    { code: "  isEmpty() {" },
-    { code: "    return this.size === 0;" },
-    { code: "  }" },
+    {
+      points:
+        "Initialize an array of fixed size (for static implementation) or dynamic array",
+    },
+    {
+      points:
+        "Initialize two pointers: front (for dequeue) and rear (for enqueue), both set to -1 initially",
+    },
+    {
+      points:
+        "Implement boundary checks for overflow (full queue) and underflow (empty queue) conditions",
+    },
+    {
+      points:
+        "For circular queue implementation, use modulo arithmetic for pointer updates",
+    },
   ];
 
   const enqueueAlgorithm = [
-    { points: "Check if queue is full (if (rear == capacity - 1) for linear array)" },
+    {
+      points:
+        "Check if queue is full (if (rear == capacity - 1) for linear array)",
+    },
     { points: "For empty queue, set both front and rear to 0" },
     { points: "For circular queue: rear = (rear + 1) % capacity" },
     { points: "Insert new element at items[rear]" },
@@ -51,22 +69,63 @@ const content = () => {
   ];
 
   const complexity = [
-    { points: "Enqueue Operation: O(1) - Amortized constant time for dynamic arrays" },
-    { points: "Dequeue Operation: O(1) - No shifting needed with pointer approach" },
+    {
+      points:
+        "Enqueue Operation: O(1) - Amortized constant time for dynamic arrays",
+    },
+    {
+      points:
+        "Dequeue Operation: O(1) - No shifting needed with pointer approach",
+    },
     { points: "Peek Operation: O(1) - Direct access via front pointer" },
     { points: "Space Usage: O(n) - Linear space for storing elements" },
   ];
 
   const prosCons = [
-    { points: "Pros: Simple implementation, cache-friendly (array elements contiguous in memory)" },
+    {
+      points:
+        "Pros: Simple implementation, cache-friendly (array elements contiguous in memory)",
+    },
     { points: "Pros: Efficient O(1) operations with pointer tracking" },
     { points: "Cons: Fixed size limitation in static array implementation" },
-    { points: "Cons: Wasted space in linear array implementation without circular approach" },
+    {
+      points:
+        "Cons: Wasted space in linear array implementation without circular approach",
+    },
   ];
 
   return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
+      <div className="col-span-1">
+        <div className="hidden md:block">
+          {mounted && (
+            <iframe
+              key={theme}
+              src={
+                theme === "dark"
+                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+              }
+              width="100%"
+              height="400"
+              title="Daily DSA Challenge"
+            ></iframe>
+          )}
+        </div>
+        <div className="flex justify-center">
+          <span className="text-xs hidden md:block">
+            Daily DSA Challenge by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
+        </div>
+      </div>
+      <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Queue Array Implementation Overview */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -89,31 +148,17 @@ const content = () => {
           <div className="prose dark:prose-invert max-w-none">
             <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
               {implementationSteps.map((item, index) => (
-                <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
                   {item.points}
                 </li>
               ))}
             </ol>
           </div>
         </section>
 
-        {/* Basic Structure */}
-        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-            Basic Class Structure
-          </h1>
-          <div className="prose dark:prose-invert max-w-none">
-            <pre className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto">
-              <code className="text-sm font-mono text-gray-800 dark:text-gray-200">
-                {arrayImplementationCode.map((item, index) => (
-                  <div key={index}>{item.code}</div>
-                ))}
-              </code>
-            </pre>
-          </div>
-        </section>
-
         {/* Enqueue Algorithm */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -123,16 +168,14 @@ const content = () => {
           <div className="prose dark:prose-invert max-w-none">
             <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
               {enqueueAlgorithm.map((item, index) => (
-                <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
                   {item.points}
                 </li>
               ))}
             </ol>
-            <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-              <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
-                <strong>Circular Array Note:</strong> The modulo operation (<code className="font-mono">% capacity</code>) enables the circular behavior by wrapping the pointer to the start when it reaches the end.
-              </p>
-            </div>
           </div>
         </section>
 
@@ -145,7 +188,10 @@ const content = () => {
           <div className="prose dark:prose-invert max-w-none">
             <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
               {dequeueAlgorithm.map((item, index) => (
-                <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
                   {item.points}
                 </li>
               ))}
@@ -162,11 +208,14 @@ const content = () => {
           <div className="prose dark:prose-invert max-w-none">
             <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
               {complexity.map((item, index) => (
-                <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
                   <span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
-                    {item.points.split(':')[0]}:
+                    {item.points.split(":")[0]}:
                   </span>
-                  <span className="ml-2">{item.points.split(':')[1]}</span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
                 </li>
               ))}
             </ul>
@@ -182,7 +231,10 @@ const content = () => {
           <div className="prose dark:prose-invert max-w-none">
             <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
               {prosCons.map((item, index) => (
-                <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
                   {item.points}
                 </li>
               ))}
@@ -193,8 +245,10 @@ const content = () => {
         {/* Additional Info */}
         <section className="p-6">
           <div className="prose dark:prose-invert max-w-none">
-            <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Practical Considerations</h3>
+            <div className="px-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                Practical Considerations
+              </h3>
               <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
                 {paragraph[1]}
               </p>
@@ -205,8 +259,37 @@ const content = () => {
           </div>
         </section>
       </article>
+
+      {/* Mobile iframe at bottom */}
+      <div className="block md:hidden w-full">
+        {mounted && (
+          <iframe
+            key={theme}
+            src={
+              theme === "dark"
+                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+            }
+            width="100%"
+            height="320"
+            title="Daily DSA Challenge"
+          ></iframe>
+        )}
+        <div className="flex justify-center pb-8">
+          <span className="text-xs">
+            Daily DSA Challenge by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
+        </div>
+      </div>
     </main>
   );
 };
 
-export default content;
+export default content;