Merge pull request #42 from Sohan-Rout/main1

Feat : added new updates to stack implementation using array

Author: Sohan-Rout

app/visualizer/stack/implementation/usingArray/animation.jsx

@@ -420,10 +420,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/stack/implementation/usingArray/codeBlock.jsx

@@ -1,32 +1,104 @@
-import Animation from "@/app/visualizer/stack/implementation/usingArray/animation";
 import Navbar from "@/app/components/navbarinner";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/stack/implementation/usingArray/content";
+import Code from "@/app/visualizer/stack/implementation/usingArray/codeBlock";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+import Footer from "@/app/components/footer";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import BackToTopButton from "@/app/components/ui/backtotop";
 
 export const metadata = {
-  title: 'Stack Implementation using Array | Learn Stack in DSA with JS, C, Python, Java Code',
-  description: 'Understand how to implement a Stack using an Array with visual explanations, animations, and complete code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and interview prep.',
+  title:
+    "Stack Implementation using Array | Learn Stack in DSA with JS, C, Python, Java Code",
+  description:
+    "Understand how to implement a Stack using an Array with visual explanations, animations, and complete code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and interview prep.",
   keywords: [
-    'Stack using Array',
-    'Stack Implementation',
-    'Stack Implementation in JavaScript',
-    'Stack Implementation in C',
-    'Stack Implementation in Python',
-    'Stack Implementation in Java',
-    'DSA Stack',
-    'Array Stack',
-    'Data Structures Stack',
-    'Stack Push Pop Array',
-    'Learn Stack DSA',
-    'Visualize Stack Implementation',
-    'Stack Code Examples',
+    "Stack using Array",
+    "Stack Implementation",
+    "Stack Implementation in JavaScript",
+    "Stack Implementation in C",
+    "Stack Implementation in Python",
+    "Stack Implementation in Java",
+    "DSA Stack",
+    "Array Stack",
+    "Data Structures Stack",
+    "Stack Push Pop Array",
+    "Learn Stack DSA",
+    "Visualize Stack Implementation",
+    "Stack Code Examples",
   ],
-  robots: 'index, follow',
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/stackArray.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack Implementation using Array",
+      },
+    ],
+  },
 };
 
-export default function Page(){
-  return(
+export default function Page() {
+  const paths = [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    { name: "Stack : Implementation Using Array", href: "" },
+  ];
+
+  return (
     <>
-      <Navbar/>
-      <Animation/>
+      <div>
+        <Navbar />
+      </div>
+
+      <div className="py-20 bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200">
+        <section className="px-6 md:px-12">
+          <div className="mt-10 sm:mt-10 mb-4">
+            <Breadcrumbs paths={paths} />
+          </div>
+
+          <div className="flex items-center flex-col">
+            <div className="flex">
+              <p className="uppercase tracking-wide bg-green-500 dark:text-black px-4 py-1 mb-2 rounded-full">
+                Stack
+              </p>
+            </div>
+            <h1 className="text-4xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-0">
+              Implementation Using Array
+            </h1>
+            <ArticleActions />
+          </div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <Content />
+        </section>
+
+        <section className="px-6">
+          <Code />
+        </section>
+
+        <section className="px-6 md:px-12 my-12">
+          <ModuleCard
+            moduleId={MODULE_MAPS.stackArray}
+            title="Stack Implementation using Array"
+            description="Mark Stack using Array as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section>
+          <ExploreOther
+            title="Explore other implementation"
+            links={[{ text: "Using Linked List", url: "./usingLinkedList" }]}
+          />
+        </section>
+      </div>
+
+      <BackToTopButton />
+      <Footer />
     </>
   );
-};
+}

app/visualizer/stack/implementation/usingArray/content.jsx

@@ -12,4 +12,6 @@ export const MODULE_MAPS = {
     isFull : "54301ec9-0586-48f0-a6db-18a41adeb856",
     postfix : "ca3daf8d-23f8-4ade-adfd-4bd0a88d3da2",
     prefix : "a2971df4-5e48-4320-bc91-3de3242cac48",
+    stackArray : "4e0dd1e0-a8c7-4066-845c-b5917383d5c2",
+    stackLinkedList : "",
 }