diff --git a/._.DS_Store b/._.DS_Store
new file mode 100755
index 0000000..28c42fb
Binary files /dev/null and b/._.DS_Store differ
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
old mode 100644
new mode 100755
diff --git a/.gitignore b/.gitignore
old mode 100644
new mode 100755
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
old mode 100644
new mode 100755
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
old mode 100644
new mode 100755
diff --git a/EnvExample.txt b/EnvExample.txt
old mode 100644
new mode 100755
diff --git a/LICENSE b/LICENSE
old mode 100644
new mode 100755
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/app/api/auth/route.js b/app/api/auth/route.js
old mode 100644
new mode 100755
diff --git a/app/api/contact/route.js b/app/api/contact/route.js
old mode 100644
new mode 100755
diff --git a/app/api/send-review/route.js b/app/api/send-review/route.js
old mode 100644
new mode 100755
diff --git a/app/blogs/Content/dsaDifferent/content.jsx b/app/blogs/Content/dsaDifferent/content.jsx
old mode 100644
new mode 100755
diff --git a/app/blogs/Content/dsaDifferent/page.jsx b/app/blogs/Content/dsaDifferent/page.jsx
old mode 100644
new mode 100755
diff --git a/app/blogs/Content/dsaWebDev/content.jsx b/app/blogs/Content/dsaWebDev/content.jsx
old mode 100644
new mode 100755
diff --git a/app/blogs/Content/dsaWebDev/page.jsx b/app/blogs/Content/dsaWebDev/page.jsx
old mode 100644
new mode 100755
diff --git a/app/blogs/Content/timeRequired/content.jsx b/app/blogs/Content/timeRequired/content.jsx
old mode 100644
new mode 100755
diff --git a/app/blogs/Content/timeRequired/page.jsx b/app/blogs/Content/timeRequired/page.jsx
old mode 100644
new mode 100755
diff --git a/app/blogs/Content/whatIsDS/content.jsx b/app/blogs/Content/whatIsDS/content.jsx
old mode 100644
new mode 100755
diff --git a/app/blogs/Content/whatIsDS/page.jsx b/app/blogs/Content/whatIsDS/page.jsx
old mode 100644
new mode 100755
diff --git a/app/blogs/blogPage.jsx b/app/blogs/blogPage.jsx
old mode 100644
new mode 100755
diff --git a/app/blogs/components/PopularTopics.jsx b/app/blogs/components/PopularTopics.jsx
old mode 100644
new mode 100755
diff --git a/app/blogs/data/blogs.json b/app/blogs/data/blogs.json
old mode 100644
new mode 100755
diff --git a/app/blogs/page.jsx b/app/blogs/page.jsx
old mode 100644
new mode 100755
diff --git a/app/components/AuthModal.jsx b/app/components/AuthModal.jsx
old mode 100644
new mode 100755
diff --git a/app/components/PrivacyPolicyModal.jsx b/app/components/PrivacyPolicyModal.jsx
old mode 100644
new mode 100755
diff --git a/app/components/SectionsDisplay.jsx b/app/components/SectionsDisplay.jsx
old mode 100644
new mode 100755
diff --git a/app/components/about.jsx b/app/components/about.jsx
old mode 100644
new mode 100755
index 93ce4f0..d941698
--- a/app/components/about.jsx
+++ b/app/components/about.jsx
@@ -1,73 +1,23 @@
 import React from 'react';
-import { FiTarget, FiEye, FiUsers } from 'react-icons/fi';
+import { IoMdInformationCircle } from "react-icons/io";
 
 const AboutSection = () => {
-  const features = [
-    {
-      icon: <FiTarget className="w-6 h-6" />,
-      title: "Clear Mission",
-      description: "Bridge theory and practice through visualization"
-    },
-    {
-      icon: <FiEye className="w-6 h-6" />,
-      title: "Visual Learning",
-      description: "See algorithms come to life with animations"
-    },
-    {
-      icon: <FiUsers className="w-6 h-6" />,
-      title: "Community Focused",
-      description: "Built for students and developers"
-    }
-  ];
-
   return (
-    <section className="relative py-12 bg-white dark:bg-black overflow-hidden">
-      {/* Floating background elements */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        <div className="absolute top-0 left-0 w-64 h-64 bg-blue-400/10 rounded-full filter blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
-        <div className="absolute bottom-0 right-0 w-96 h-96 bg-blue-600/10 rounded-full filter blur-3xl translate-x-1/2 translate-y-1/2"></div>
-        {/* Subtle grid pattern */}
-        <div className="absolute inset-0 opacity-10 dark:opacity-5 bg-[size:40px_40px] [mask-image:linear-gradient(to_bottom,transparent,white_20%,white_80%,transparent)]" 
-             style={{backgroundImage: 'radial-gradient(currentColor 1px, transparent 1px)'}}>
-        </div>
-      </div>
-
+    <section className="relative py-10 bg-white dark:bg-neutral-900 overflow-hidden">
       <div className="container mx-auto px-6 relative z-10">
         {/* Section Header */}
-        <div className="max-w-2xl mx-auto text-center mb-16">
-          <span className="inline-block text-blue-500 dark:text-blue-400 text-sm font-semibold tracking-wider uppercase mb-4">
+        <div className="max-w-2xl mx-auto text-center mb-12">
+          <span className="flex items-center justify-center gap-2 text-blue-500 dark:text-blue-400 text-sm font-semibold tracking-wider uppercase mb-4">
+            <IoMdInformationCircle className='text-xl'/>
             About The Platform
           </span>
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
             Revolutionizing <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-400 dark:to-blue-300">DSA Learning</span>
           </h2>
-          <p className="text-xl text-gray-600 dark:text-gray-400 leading-relaxed">
-            Transforming abstract concepts into tangible understanding through interactive visualization.
-          </p>
-        </div>
-
-        {/* Feature Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
-          {features.map((feature, index) => (
-            <div 
-              key={index}
-              className="bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
-            >
-              <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center text-blue-500 dark:text-blue-400 mb-4">
-                {feature.icon}
-              </div>
-              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                {feature.title}
-              </h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                {feature.description}
-              </p>
-            </div>
-          ))}
         </div>
 
         {/* Mission Statement */}
-        <div className="max-w-4xl mx-auto bg-white dark:bg-gray-800/50 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-3xl p-8 md:p-10 shadow-lg overflow-hidden">
+        <div className="max-w-6xl mx-auto bg-white dark:bg-neutral-950 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-3xl p-8 md:p-10 shadow-lg overflow-hidden">
           <div className="relative">
             {/* Decorative element */}
             <div className="absolute -top-20 -right-20 w-40 h-40 bg-blue-500/10 rounded-full filter blur-xl"></div>
@@ -85,22 +35,6 @@ const AboutSection = () => {
             </div>
           </div>
         </div>
-
-        {/* CTA */}
-        <div className="text-center mt-16">
-          <a href='/#features'>
-          <button className="relative px-8 py-4 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium rounded-lg transition-all duration-300 shadow-lg hover:shadow-blue-500/30 group overflow-hidden">
-            <span className="relative z-10 flex items-center justify-center gap-2">
-              Explore Features
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
-              </svg>
-            </span>
-            <span className="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
-          </button>
-          </a>
-        </div>
-
 {/* Divider */}
         <div className="mt-20 mx-auto h-[1px] max-w-4xl bg-gradient-to-r rounded-sm from-transparent via-blue-200 dark:via-blue-800 to-transparent"></div>
       </div>
diff --git a/app/components/faq.jsx b/app/components/faq.jsx
old mode 100644
new mode 100755
index 4469d4f..ca3f0e8
--- a/app/components/faq.jsx
+++ b/app/components/faq.jsx
@@ -30,17 +30,7 @@ const FAQSection = () => {
   ];
 
   return (
-    <section className="relative py-6 bg-white dark:bg-black overflow-hidden">
-      {/* Floating background elements */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        <div className="absolute top-0 left-0 w-64 h-64 bg-blue-400/10 rounded-full filter blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
-        <div className="absolute bottom-0 right-0 w-96 h-96 bg-blue-600/10 rounded-full filter blur-3xl translate-x-1/2 translate-y-1/2"></div>
-        {/* Subtle grid pattern */}
-        <div className="absolute inset-0 opacity-10 dark:opacity-5 bg-[size:40px_40px] [mask-image:linear-gradient(to_bottom,transparent,white_20%,white_80%,transparent)]" 
-             style={{backgroundImage: 'radial-gradient(currentColor 1px, transparent 1px)'}}>
-        </div>
-      </div>
-
+    <section className="relative py-6 bg-white dark:bg-neutral-900 overflow-hidden">
       <div className="container mx-auto px-6 relative z-10">
         {/* Section Header */}
         <div className="max-w-4xl mx-auto text-center mb-16">
@@ -61,7 +51,7 @@ const FAQSection = () => {
           {faqs.map((faq, index) => (
             <div 
               key={index}
-              className={`bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden transition-all duration-300 ${activeIndex === index ? 'shadow-lg' : 'shadow-sm hover:shadow-md'}`}
+              className={`bg-white/70 dark:bg-neutral-950 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden transition-all duration-300 ${activeIndex === index ? 'shadow-lg' : 'shadow-sm hover:shadow-md'}`}
             >
               <button
                 className="w-full flex items-center justify-between p-6 text-left"
@@ -94,7 +84,7 @@ const FAQSection = () => {
         </div>
 
         {/* Additional Help */}
-          <div className="max-w-3xl mx-auto mt-16 text-center bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-2xl p-8 shadow-sm">
+          <div className="max-w-3xl mx-auto mt-16 text-center bg-white/50 dark:bg-neutral-950 backdrop-blur-sm border border-gray-200 dark:border-gray-700 rounded-2xl p-8 shadow-sm">
             <div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-blue-500 dark:text-blue-400 mx-auto mb-6">
               <FiMail className="w-8 h-8" />
             </div>
diff --git a/app/components/feature.jsx b/app/components/feature.jsx
old mode 100644
new mode 100755
index 9cdd7b0..4df22c7
--- a/app/components/feature.jsx
+++ b/app/components/feature.jsx
@@ -1,6 +1,7 @@
 'use client';
 import React, { useState } from 'react';
 import { FiCpu, FiBookOpen, FiAward } from 'react-icons/fi';
+import { HiSparkles } from "react-icons/hi2";
 
 const FeaturesSection = () => {
   const features = [
@@ -45,7 +46,7 @@ const FeaturesSection = () => {
   const [currentSlide, setCurrentSlide] = useState(0);
 
   return (
-    <section className="py-15 bg-white dark:bg-black overflow-hidden">
+    <section className="py-15 bg-white dark:bg-neutral-900 overflow-hidden">
       {/* Background elements */}
       <div className="absolute inset-0 overflow-hidden">
         <div className="absolute -top-20 -left-20 w-64 h-64 bg-blue-100/30 dark:bg-blue-900/10 rounded-full filter blur-3xl animate-float-slow"></div>
@@ -55,7 +56,8 @@ const FeaturesSection = () => {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
         {/* Section Heading */}
         <div className="text-center mb-16">
-          <span className="inline-block text-blue-500 dark:text-blue-400 text-sm font-semibold tracking-wider uppercase mb-4">
+          <span className="flex items-center justify-center gap-2 text-blue-500 dark:text-blue-400 text-sm font-semibold tracking-wider uppercase mb-4">
+            <HiSparkles className='text-xl'/>
             Features we offer
           </span>
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
@@ -71,10 +73,10 @@ const FeaturesSection = () => {
           {features.map((feature, index) => (
             <div 
               key={index}
-              className="relative group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100 dark:border-gray-700"
+              className="relative group bg-white dark:bg-neutral-950 rounded-2xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100 dark:border-gray-700"
             >
               {/* Hover effect background */}
-              <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-gray-800 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300"></div>
+              <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-neutral-900 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300"></div>
               
               <div className="relative z-10">
                 {/* Icon */}
diff --git a/app/components/footer.jsx b/app/components/footer.jsx
old mode 100644
new mode 100755
index d0ca089..f629b21
--- a/app/components/footer.jsx
+++ b/app/components/footer.jsx
@@ -1,18 +1,23 @@
 "use client";
-import React from 'react';
-import Link from 'next/link';
-import { useState } from 'react';
+import React from "react";
+import Link from "next/link";
+import { useState } from "react";
 import PrivacyPolicyModal from "@/app/components/PrivacyPolicyModal";
+import { GoHomeFill } from "react-icons/go";
+import { MdAnimation } from "react-icons/md";
+import { IoMdInformationCircle } from "react-icons/io";
+import { HiSparkles } from "react-icons/hi2";
+import { RiQuestionLine } from "react-icons/ri";
 
 const Footer = () => {
   const [showPolicyModal, setShowPolicyModal] = useState(false);
 
   const quickLinks = [
-    { href: "/", text: "Home" },
-    { href: "/#features", text: "Features" },
-    { href: "/visualizer", text: "Visualizer" },
-    { href: "/#about", text: "About" },
-    { href: "/#faq", text: "FAQs" }
+    { href: "/", text: "Home", icon: GoHomeFill },
+    { href: "/#features", text: "Features", icon: HiSparkles },
+    { href: "/visualizer", text: "Visualizer", icon: MdAnimation },
+    { href: "/#about", text: "About", icon: IoMdInformationCircle },
+    { href: "/#faq", text: "FAQs", icon: RiQuestionLine },
   ];
 
   const socialLinks = [
@@ -20,45 +25,53 @@ const Footer = () => {
       href: "https://twitter.com",
       icon: (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
         </svg>
       ),
-      label: "Twitter"
+      label: "Twitter",
     },
     {
       href: "https://linkedin.com",
       icon: (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+          <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
         </svg>
       ),
-      label: "LinkedIn"
+      label: "LinkedIn",
     },
     {
       href: "https://github.com",
       icon: (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-          <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+          <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clipRule="evenodd"
+          />
         </svg>
       ),
-      label: "GitHub"
+      label: "GitHub",
     },
     {
       href: "https://instagram.com",
       icon: (
         <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-          <path fillRule="evenodd" d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" clipRule="evenodd" />
+          <path
+            fillRule="evenodd"
+            d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"
+            clipRule="evenodd"
+          />
         </svg>
       ),
-      label: "Instagram"
-    }
+      label: "Instagram",
+    },
   ];
 
-const legalLinks = [
-  { href: "/privacy", text: "Privacy Policy", type: "modal" },
-  { href: "/terms", text: "Terms of Service", type: "link" },
-  { href: "/cookies", text: "Cookies", type: "link" }
-];
+  const legalLinks = [
+    { href: "/privacy", text: "Privacy Policy", type: "modal" },
+    { href: "/terms", text: "Terms of Service", type: "link" },
+    { href: "/cookies", text: "Cookies", type: "link" },
+  ];
 
   return (
     <footer className="bg-black text-gray-400">
@@ -67,18 +80,31 @@ const legalLinks = [
           {/* Brand Column */}
           <div className="md:col-span-2 space-y-6">
             <div className="flex items-center">
-              <span className="text-2xl font-bold text-white">DSA<span className="text-blue-500">Visualizer</span></span>
+              <span className="text-2xl font-bold text-white">
+                DSA<span className="text-blue-500">Visualizer</span>
+              </span>
             </div>
             <p className="text-gray-500 leading-relaxed">
-              Interactive visualization tools for mastering data structures and algorithms.
+              Interactive visualization tools for mastering data structures and
+              algorithms.
             </p>
             <div className="space-y-3">
               <div className="flex items-start">
-                <svg className="w-5 h-5 mt-0.5 mr-3 flex-shrink-0" fill="red" viewBox="0 0 24 24">
-                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41 1.01 4.13 2.44h1.74C14.09 5.01 15.76 4 17.5 4 20 4 22 6 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+                <svg
+                  className="w-5 h-5 mt-0.5 mr-3 flex-shrink-0"
+                  fill="red"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41 1.01 4.13 2.44h1.74C14.09 5.01 15.76 4 17.5 4 20 4 22 6 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                 </svg>
                 <span>
-                  Made with ♥ by <a href="https://www.linkedin.com/in/sohan-rout/" className="text-blue-400 hover:text-blue-300">Sohan Rout</a>
+                  Made with ♥ by{" "}
+                  <a
+                    href="https://www.linkedin.com/in/sohan-rout/"
+                    className="text-blue-400 hover:text-blue-300"
+                  >
+                    Sohan Rout
+                  </a>
                 </span>
               </div>
               {/*
@@ -89,19 +115,38 @@ const legalLinks = [
                 <a href="mailto:contact@dsavisualizer.com" className="hover:text-blue-400 transition">contact@dsavisualizer.com</a>
               </div>
               */}
+              <div className="flex justify-left">
+                <a
+                className="border rounded-xl"
+                  href="https://www.producthunt.com/products/dsa-visualizer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-dsa&#0045;visualizer"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <img
+                    src={`https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=974127&theme=dark&t=1749182745821`}
+                    alt="DSA&#0032;Visualizer - Visualize&#0032;&#0038;&#0032;learn&#0032;dsa&#0032;the&#0032;smart&#0032;way | Product Hunt"
+                    style={{ width: 250, height: 54 }}
+                    width="250"
+                    height="54"
+                  />
+                </a>
+              </div>
             </div>
           </div>
 
           {/* Quick Links */}
           <div>
-            <h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Navigation</h3>
+            <h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">
+              Navigation
+            </h3>
             <ul className="space-y-3">
               {quickLinks.map((link, index) => (
                 <li key={index}>
-                  <Link href={link.href} className="hover:text-blue-400 transition flex items-center group">
-                    <svg className="w-4 h-4 mr-2 opacity-0 group-hover:opacity-100 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
-                    </svg>
+                  <Link
+                    href={link.href}
+                    className="hover:text-blue-400 transition flex items-center gap-2 group"
+                  >
+                    {link.icon && <link.icon className="text-xl" />}
                     {link.text}
                   </Link>
                 </li>
@@ -112,41 +157,45 @@ const legalLinks = [
           {/* Legal + Social */}
           <div className="space-y-8">
             <div>
-              <h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Legal</h3>
+              <h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">
+                Legal
+              </h3>
               <ul className="space-y-3">
-          {legalLinks.map((link, index) => (
-            <li key={index}>
-              {link.type === "modal" ? (
-                <button
-                  onClick={() => setShowPolicyModal(true)}
-                  className="text-gray-500 hover:text-blue-400 transition"
-                >
-                  {link.text}
-                </button>
-              ) : (
-                <Link
-                  href={link.href}
-                  className="text-gray-500 hover:text-blue-400 transition"
-                >
-                  {link.text}
-                </Link>
-              )}
-            </li>
-          ))}
-        </ul>
+                {legalLinks.map((link, index) => (
+                  <li key={index}>
+                    {link.type === "modal" ? (
+                      <button
+                        onClick={() => setShowPolicyModal(true)}
+                        className="text-gray-500 hover:text-blue-400 transition"
+                      >
+                        {link.text}
+                      </button>
+                    ) : (
+                      <Link
+                        href={link.href}
+                        className="text-gray-500 hover:text-blue-400 transition"
+                      >
+                        {link.text}
+                      </Link>
+                    )}
+                  </li>
+                ))}
+              </ul>
             </div>
 
             {/* Render the modal */}
-      <PrivacyPolicyModal
-        isOpen={showPolicyModal}
-        onClose={() => setShowPolicyModal(false)}
-      />
+            <PrivacyPolicyModal
+              isOpen={showPolicyModal}
+              onClose={() => setShowPolicyModal(false)}
+            />
 
             <div>
-              <h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Connect</h3>
+              <h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">
+                Connect
+              </h3>
               <div className="flex space-x-4">
                 {socialLinks.map((social, index) => (
-                  <a 
+                  <a
                     key={index}
                     href={social.href}
                     aria-label={social.label}
@@ -164,11 +213,22 @@ const legalLinks = [
         <div className="mt-16 pt-8 border-t border-gray-900">
           <div className="flex flex-col md:flex-row justify-between items-center">
             <p className="text-sm text-gray-500">
-              &copy; {new Date().getFullYear()} DSAVisualizer. All rights reserved.
+              &copy; {new Date().getFullYear()} DSAVisualizer. All rights
+              reserved.
             </p>
             <div className="flex space-x-6 mt-4 md:mt-0">
-              <Link href="/sitemap-0.xml" className="text-sm text-gray-500 hover:text-blue-400 transition">Sitemap</Link>
-              <Link href="/#review" className="text-sm text-gray-500 hover:text-blue-400 transition">Contact</Link>
+              <Link
+                href="/sitemap-0.xml"
+                className="text-sm text-gray-500 hover:text-blue-400 transition"
+              >
+                Sitemap
+              </Link>
+              <Link
+                href="/#review"
+                className="text-sm text-gray-500 hover:text-blue-400 transition"
+              >
+                Contact
+              </Link>
             </div>
           </div>
         </div>
@@ -177,4 +237,4 @@ const legalLinks = [
   );
 };
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/app/components/hero.jsx b/app/components/hero.jsx
old mode 100644
new mode 100755
index 99c35b7..b5c7ec7
--- a/app/components/hero.jsx
+++ b/app/components/hero.jsx
@@ -2,23 +2,23 @@
 import React from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
-import Link from 'next/link';
-import { event } from '@/lib/gtag';
+import Link from "next/link";
+import { event } from "@/lib/gtag";
+import Promotion from "@/app/components/ui/productHunt";
 
 const HeroSection = () => {
   const router = useRouter();
-  
 
   const handleStartVisualizing = () => {
     event({
-      action: 'click_start_visualizing',
-      category: 'Hero',
-      label: 'Start Visualizing Button'
+      action: "click_start_visualizing",
+      category: "Hero",
+      label: "Start Visualizing Button",
     });
     router.push("/visualizer");
   };
 
-  const name = [{ name: "Sohan" }, { name: "Johan" }, { name: "Lorem" }];
+  const name = [{ name: "A" }, { name: "S" }, { name: "R" }];
 
   const getInitials = (name) => {
     return name
@@ -29,79 +29,34 @@ const HeroSection = () => {
   };
 
   return (
-      <section className="min-h-screen py-10 flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-950 dark:to-black text-gray-900 dark:text-gray-100 relative overflow-hidden">
-  {/* Notification Bar */}
-<div className="hidden md:block absolute mt-14 top-12 left-1/2 transform -translate-x-1/2 z-20 w-full max-w-md px-4">
-  <div className="bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-900 rounded-full shadow-lg py-2 px-4 flex items-center justify-between">
-    <span className="text-sm font-medium text-blue-600 dark:text-blue-400 flex items-center">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-4 w-4 mr-2 text-blue-600 dark:text-blue-400 animate-draw"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M13 10V3L4 14h7v7l9-11h-7z"
-          className="path"
-        />
-      </svg>
-      New: New Blogs added!
-    </span>
-<Link href="./blogs">
-  <button className="text-blue-600 hover:text-blue-700 dark:hover:text-blue-700">
-    <svg
-  xmlns="http://www.w3.org/2000/svg"
-  className="h-4 w-4 transform transition-transform duration-300 hover:translate-x-1"
-  fill="none"
-  viewBox="0 0 24 24"
-  stroke="currentColor"
->
-  <path
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth={2}
-    d="M9 5l7 7-7 7"
-  />
-</svg>
-  </button>
-</Link>
-  </div>
-</div>
-
-  {/* Abstract background elements */}
-  <div className="absolute inset-0 overflow-hidden pointer-events-none">
-    <div className="absolute top-0 left-0 w-64 h-64 bg-blue-400/10 rounded-full filter blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
-    <div className="absolute bottom-0 right-0 w-96 h-96 bg-blue-600/10 rounded-full filter blur-3xl translate-x-1/2 translate-y-1/2"></div>
-  </div>
-
-      <div className="container top-4 mx-auto px-6 py-20 flex flex-col lg:flex-row items-center justify-between relative z-10 gap-12">
-        {/* Text Content */}
-        <div className="lg:w-1/2 text-center lg:text-left space-y-6">
-          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight">
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-400 dark:from-blue-400 dark:to-blue-300">
-              Master DSA
+    <main className="bg-white dark:bg-neutral-900">
+      <section className="min-h-screen py-10 flex items-start md:items-center justify-center bg-gradient-to-br from-blue-50 to-white dark:from-neutral-900 dark:to-neutral-900 text-gray-900 dark:text-gray-100 relative overflow-hidden">
+        {/* Notification Bar */}
+        <div className="hidden md:block absolute mt-14 top-12 left-1/2 transform -translate-x-1/2 z-20 w-full max-w-md px-4">
+          <div className="bg-white dark:bg-neutral-950 border border-blue-200 dark:border-blue-900 rounded-full shadow-lg py-2 px-4 flex items-center justify-between">
+            <span className="text-sm font-medium text-blue-500 flex items-center">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-4 w-4 mr-2 text-blue-500 animate-draw"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 10V3L4 14h7v7l9-11h-7z"
+                  className="path"
+                />
+              </svg>
+              Updates: Stack Visualization Updated !
             </span>
-            <br />
-            Through Interactive Visualization
-          </h1>
-          <p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto lg:mx-0">
-            See algorithms come to life in your mind's eye before you code them.
-            The way developers actually think.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
-            <button
-              onClick={handleStartVisualizing}
-              className="relative px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-all duration-300 shadow-lg hover:shadow-blue-500/30 group overflow-hidden"
-            >
-              <span className="relative z-10 flex items-center justify-center gap-2">
-                Start Visualizing Now
+            <Link href="./blogs">
+              <button className="text-blue-600 hover:text-blue-700 dark:hover:text-blue-700">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="h-5 w-5 group-hover:translate-x-1 transition-transform"
+                  className="h-4 w-4 transform transition-transform duration-300 hover:translate-x-1"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -110,97 +65,148 @@ const HeroSection = () => {
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth={2}
-                    d="M14 5l7 7m0 0l-7 7m7-7H3"
+                    d="M9 5l7 7-7 7"
                   />
                 </svg>
-              </span>
-              <span className="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
-            </button>
+              </button>
+            </Link>
           </div>
+        </div>
+
+        {/* Abstract background elements */}
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute top-0 left-0 w-64 h-64 bg-blue-400/10 rounded-full filter blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
+        </div>
 
-          {/* Trust indicators */}
-          <div className="pt-4 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-6 text-sm text-gray-600 dark:text-gray-400">
-            <div className="flex items-center gap-2">
-              <div className="flex -space-x-2">
-                {name.map((item, index) => (
-                  <div
-                    key={index}
-                    className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold"
+        <div className="container top-4 mx-auto px-6 pt-20 flex flex-col lg:flex-row items-center justify-between relative z-10 gap-12">
+          {/* Text Content */}
+          <div className="lg:w-1/2 text-center lg:text-left space-y-4 sm:space-y-6">
+            <h1 className="text-4xl sm:text-5xl md:text-5xl font-bold leading-snug md:leading-tight">
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-400 dark:from-blue-400 dark:to-blue-300">
+                Master DSA
+              </span>
+              <br />
+              Through Interactive Visualization
+            </h1>
+            <p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto lg:mx-0">
+              See algorithms come to life in your mind's eye before you code
+              them. The way developers actually think.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center lg:justify-start">
+              <button
+                onClick={handleStartVisualizing}
+                className="relative px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-all duration-300 shadow-lg hover:shadow-blue-500/30 group overflow-hidden"
+              >
+                <span className="relative z-10 flex items-center justify-center gap-2">
+                  Start Visualizing Now
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5 group-hover:translate-x-1 transition-transform"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
                   >
-                    {getInitials(item.name)}
-                  </div>
-                ))}
-              </div>
-              <span>1,000+ Active Learners</span>
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M14 5l7 7m0 0l-7 7m7-7H3"
+                    />
+                  </svg>
+                </span>
+                <span className="absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
+              </button>
+              <Promotion/>
             </div>
-            <div className="flex items-center gap-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-5 w-5 text-yellow-500"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-              </svg>
-              <span>4.45/5 (200+ Reviews)</span>
+
+            {/* Trust indicators */}
+            <div className="pt-4 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-6 text-sm text-gray-600 dark:text-gray-400">
+              <div className="flex items-center gap-2">
+                <div className="flex -space-x-2">
+                  {name.map((item, index) => (
+                    <div
+                      key={index}
+                      className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold"
+                    >
+                      {getInitials(item.name)}
+                    </div>
+                  ))}
+                </div>
+                <span>1,000+ Active Learners</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5 text-yellow-500"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                </svg>
+                <span>4.45/5 (200+ Reviews)</span>
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* Person image with automatic background removal effect */}
-<div className="lg:w-1/2 lg:h-full flex justify-center items-center mt-10 lg:mt-0 relative">
-  <div className="relative w-full h-full max-w-lg">
-    <Image
-      src="/GurlThinking.png"
-      alt="Person thinking about algorithms"
-      width={1200}
-      height={1200}
-      className="w-full z-20 h-full max-h-[400px] lg:max-h-[600px] object-contain drop-shadow-2xl"
-      style={{
-        filter: "drop-shadow(0 20px 13px rgba(0, 0, 0, 0.1))",
-        maskImage:
-          "linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 98%)",
-      }}
-      priority
-    />
+          {/* Person image with automatic background removal effect */}
+          <div className="lg:w-1/2 lg:h-full flex justify-center items-center mt-10 lg:mt-0 relative">
+            <div className="relative w-full h-full max-w-lg">
+              <Image
+                src="/GurlThinking.png"
+                alt="Person thinking about algorithms"
+                width={1200}
+                height={1200}
+                className="w-full z-20 h-full max-h-[400px] lg:max-h-[600px] object-contain drop-shadow-2xl"
+                style={{
+                  filter: "drop-shadow(0 20px 13px rgba(0, 0, 0, 0.1))",
+                  maskImage:
+                    "linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 98%)",
+                }}
+                priority
+              />
 
-    {/* Floating algorithm elements - adjusted for mobile */}
-    <div className="absolute top-[15%] -right-4 w-16 h-16 lg:w-24 lg:h-24 bg-white/90 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-lg animate-float border-2 border-gray-300 dark:border-gray-600">
-      <div className="text-xs lg:text-base font-mono font-bold text-center p-1 lg:p-2">
-        O(1)
-      </div>
-    </div>
+              {/* Floating algorithm elements - adjusted for mobile */}
+              <div className="absolute top-[15%] -right-4 w-16 h-16 lg:w-24 lg:h-24 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float border-2 border-gray-300 dark:border-blue-500">
+                <div className="text-xs lg:text-base font-mono font-semibold text-center p-1 lg:p-2">
+                  O(1)
+                </div>
+              </div>
 
-    <div className="absolute top-[40%] -right-8 w-20 h-20 lg:w-28 lg:h-28 bg-white/90 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-2000 border-2 border-gray-300 dark:border-gray-600">
-      <div className="text-sm lg:text-lg font-mono font-bold text-center p-2 lg:p-3">
-        <span className="text-blue-600 dark:text-blue-400">Hash</span>
-        Map
-      </div>
-    </div>
+              <div className="absolute top-[40%] -right-8 w-20 h-20 lg:w-28 lg:h-28 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-2000 border-2 border-gray-300 dark:border-blue-500">
+                <div className="text-sm lg:text-lg font-mono font-semibold text-center p-2 lg:p-3">
+                  <span className="text-blue-600 dark:text-blue-400">Hash</span>
+                  Map
+                </div>
+              </div>
 
-    <div className="absolute top-[25%] z-[-1] left-[-5] w-20 h-20 lg:w-24 lg:h-24 bg-white/90 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-1000 border-2 border-gray-300 dark:border-gray-600">
-      <div className="text-xs lg:text-base font-mono font-bold text-center">
-        Queue
-      </div>
-    </div>
+              <div className="absolute top-[25%] z-[-1] left-[-5] w-20 h-20 lg:w-24 lg:h-24 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-1000 border-2 border-gray-300 dark:border-blue-500">
+                <div className="text-xs lg:text-base font-mono font-semibold text-center">
+                  Queue
+                </div>
+              </div>
 
-    {/* Additional thought bubbles - adjusted for mobile */}
-    <div className="absolute z-[-1] top-[10%] left-5 w-14 h-14 lg:w-20 lg:h-20 bg-white/90 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-1500 border-2 border-gray-300 dark:border-gray-600">
-      <div className="text-xs lg:text-sm font-mono font-bold text-center">
-        Stack
-      </div>
-    </div>
+              {/* Additional thought bubbles - adjusted for mobile */}
+              <div className="absolute z-[-1] top-[10%] left-5 w-14 h-14 lg:w-20 lg:h-20 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-1500 border-2 border-gray-300 dark:border-blue-500">
+                <div className="text-xs lg:text-sm font-mono font-semibold text-center">
+                  Stack
+                </div>
+              </div>
 
-    <div className="absolute top-[5%] right-12 w-14 h-14 lg:w-20 lg:h-20 bg-white/90 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-2500 border-2 border-gray-300 dark:border-gray-600">
-      <div className="text-xs lg:text-sm font-mono font-bold text-center">
-        Tree
-      </div>
-    </div>
-  </div>
-</div>
+              <div className="absolute top-[5%] right-12 w-14 h-14 lg:w-20 lg:h-20 bg-white/90 dark:bg-black rounded-full flex items-center justify-center shadow-lg animate-float animation-delay-2500 border-2 border-gray-300 dark:border-blue-500">
+                <div className="text-xs lg:text-sm font-mono font-semibold text-center">
+                  Tree
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {/* Divider */}
+      <div className="pb-10">
+        <div className="mx-auto h-[1px] max-w-4xl bg-gradient-to-r rounded-sm from-transparent via-blue-200 dark:via-blue-800 to-transparent"></div>
       </div>
-    </section>
+    </main>
   );
 };
 
-export default HeroSection;
\ No newline at end of file
+export default HeroSection;
diff --git a/app/components/models/ArrayModal.jsx b/app/components/models/ArrayModal.jsx
old mode 100644
new mode 100755
diff --git a/app/components/models/GraphModal.jsx b/app/components/models/GraphModal.jsx
old mode 100644
new mode 100755
diff --git a/app/components/models/LinkedListModal.jsx b/app/components/models/LinkedListModal.jsx
old mode 100644
new mode 100755
diff --git a/app/components/models/QueueModal.jsx b/app/components/models/QueueModal.jsx
old mode 100644
new mode 100755
diff --git a/app/components/models/StackModel.jsx b/app/components/models/StackModel.jsx
old mode 100644
new mode 100755
diff --git a/app/components/models/TreeModal.jsx b/app/components/models/TreeModal.jsx
old mode 100644
new mode 100755
diff --git a/app/components/navbar.jsx b/app/components/navbar.jsx
old mode 100644
new mode 100755
diff --git a/app/components/navbarinner.jsx b/app/components/navbarinner.jsx
old mode 100644
new mode 100755
diff --git a/app/components/review.jsx b/app/components/review.jsx
old mode 100644
new mode 100755
index 2c0907e..5e4c5e1
--- a/app/components/review.jsx
+++ b/app/components/review.jsx
@@ -60,13 +60,7 @@ const TestimonialsSection = () => {
   };
 
   return (
-    <section className="relative bg-white dark:bg-black overflow-hidden">
-      {/* Decorative elements */}
-      <div className="absolute inset-0 opacity-10 dark:opacity-5">
-          <div className="absolute -top-10 -left-20 w-64 h-64 bg-blue-200/20 dark:bg-blue-800/10 rounded-full filter blur-3xl -z-10 animate-float-slow"></div>
-          <div className="absolute -bottom-20 -right-20 w-72 h-72 bg-blue-200/20 dark:bg-blue-800/10 rounded-full filter blur-3xl -z-10 animate-float-slower"></div>
-      </div>
-
+    <section className="relative bg-white dark:bg-neutral-900 overflow-hidden">
       <div className="container mx-auto px-4 sm:px-6 mt-5 relative z-10">
         <motion.div 
           initial={{ opacity: 0, y: 20 }}
@@ -76,7 +70,7 @@ const TestimonialsSection = () => {
           className="max-w-3xl mx-auto text-center mb-12"
         >
           <h2 className="md:text-5xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
-            Share <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600">Your Experience</span>
+            Share <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-400 dark:to-blue-300">Your Experience</span>
           </h2>
           <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
             We value your feedback to help us improve our services
@@ -88,7 +82,7 @@ const TestimonialsSection = () => {
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5, delay: 0.1 }}
           viewport={{ once: true }}
-          className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 sm:p-8 max-w-2xl mx-auto border border-gray-100 dark:border-gray-700/50 backdrop-blur-sm"
+          className="bg-white dark:bg-neutral-950 rounded-2xl shadow-xl p-6 sm:p-8 max-w-2xl mx-auto border border-gray-100 dark:border-gray-700/50 backdrop-blur-sm"
         >
           <AnimatePresence mode="wait">
             {submitSuccess ? (
@@ -134,7 +128,7 @@ const TestimonialsSection = () => {
                       placeholder="John Doe"
                       value={formData.name}
                       onChange={handleChange}
-                      className="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700/50 transition-all"
+                      className="w-full text-black dark:text-white px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-neutral-950 transition-all"
                       required
                     />
                   </div>
@@ -149,7 +143,7 @@ const TestimonialsSection = () => {
                       placeholder="john@example.com"
                       value={formData.email}
                       onChange={handleChange}
-                      className="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700/50 transition-all"
+                      className="w-full text-black dark:text-white px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-neutral-950 transition-all"
                       required
                     />
                   </div>
@@ -186,7 +180,7 @@ const TestimonialsSection = () => {
                     rows={5}
                     value={formData.review}
                     onChange={handleChange}
-                    className="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700/50 transition-all"
+                    className="w-full dark:text-white text-black px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-neutral-950 transition-all"
                     required
                   />
                 </div>
@@ -207,7 +201,7 @@ const TestimonialsSection = () => {
                     whileTap={{ scale: 0.97 }}
                     type="submit"
                     disabled={isSubmitting}
-                    className="px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-400 text-white font-medium rounded-xl transition-all shadow-md hover:shadow-lg flex items-center"
+                    className="px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white font-medium rounded-xl transition-all shadow-md hover:shadow-lg flex items-center"
                   >
                     {isSubmitting ? (
                       <>
diff --git a/app/components/support.jsx b/app/components/support.jsx
old mode 100644
new mode 100755
diff --git a/app/components/testimonial.jsx b/app/components/testimonial.jsx
old mode 100644
new mode 100755
index 6520616..b413625
--- a/app/components/testimonial.jsx
+++ b/app/components/testimonial.jsx
@@ -1,6 +1,9 @@
 "use client";
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import { IoChatboxEllipses } from "react-icons/io5";
 import { FaStar, FaRegStar, FaStarHalfAlt, FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { gsap } from 'gsap';
+import { motion } from 'framer-motion';
 
 const TestimonialSection = () => {
   const testimonials = [
@@ -54,18 +57,13 @@ const TestimonialSection = () => {
     },
   ];
 
-  const [visibleCount, setVisibleCount] = useState(3);
-  const [activeFilter, setActiveFilter] = useState('all');
   const [expandedReviews, setExpandedReviews] = useState({});
+  const containerRef = useRef(null);
+  const innerRef = useRef(null);
+  const animationRef = useRef(null);
 
-  const loadMore = () => setVisibleCount(prev => Math.min(prev + 3, testimonials.length));
-  const showLess = () => setVisibleCount(3);
   const toggleReview = (index) => setExpandedReviews(prev => ({ ...prev, [index]: !prev[index] }));
 
-  const filteredTestimonials = activeFilter === 'all' 
-    ? testimonials 
-    : testimonials.filter(t => t.stars >= parseInt(activeFilter));
-
   const getInitials = (name) => {
     return name.split(' ').map(part => part[0]).join('').toUpperCase();
   };
@@ -88,11 +86,32 @@ const TestimonialSection = () => {
     return <div className="flex space-x-1">{stars}</div>;
   };
 
+  useEffect(() => {
+    if (innerRef.current) {
+      animationRef.current = gsap.to(innerRef.current, { x: -innerRef.current.scrollWidth / 2, repeat: -1, duration: 100, ease: "linear" });
+    }
+  }, []);
+
+  const handleMouseEnter = () => {
+    if (animationRef.current) {
+      animationRef.current.pause();
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (animationRef.current) {
+      animationRef.current.resume();
+    }
+  };
+
   return (
-    <section className="py-10 bg-gradient-to-b from-blue-100/60 to-white dark:from-black dark:to-black ">
+    <section className="pb-10 bg-gradient-to-b from-white to-white dark:from-neutral-900 dark:to-neutral-900 ">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Section Heading */}
         <div className="text-center mb-16">
+          <span className="flex items-center justify-center gap-2 text-blue-500 dark:text-blue-400 text-sm font-semibold tracking-wider uppercase mb-4">
+            <IoChatboxEllipses className='text-xl'/>Reviews
+          </span>
           <h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
             What Our <span className="text-blue-500 dark:text-blue-400">Users Say</span>
           </h2>
@@ -101,114 +120,83 @@ const TestimonialSection = () => {
           </p>
         </div>
 
-        {/* Filter Buttons */}
-        <div className="flex justify-center mb-12 gap-3">
-          <button
-            onClick={() => setActiveFilter('all')}
-            className={`px-5 py-2 rounded-full text-sm font-medium transition-all ${activeFilter === 'all' ? 'bg-blue-600 text-white shadow-md' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700'}`}
-          >
-            All Reviews
-          </button>
-          <button
-            onClick={() => setActiveFilter('5')}
-            className={`px-5 py-2 rounded-full text-sm font-medium transition-all flex items-center gap-1 ${activeFilter === '5' ? 'bg-blue-600 text-white shadow-md' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700'}`}
-          >
-            <span>5 Stars</span>
-            <FaStar className="text-yellow-400" />
-          </button>
-          <button
-            onClick={() => setActiveFilter('4')}
-            className={`px-5 py-2 rounded-full text-sm font-medium transition-all flex items-center gap-1 ${activeFilter === '4' ? 'bg-blue-600 text-white shadow-md' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700'}`}
-          >
-            <span>4+ Stars</span>
-            <FaStar className="text-yellow-400" />
-          </button>
-        </div>
-
         {/* Testimonials Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {filteredTestimonials.slice(0, visibleCount).map((testimonial, index) => (
-            <div
-              key={index}
-              className="relative group bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-100 dark:border-gray-700"
+        <div ref={containerRef} className="overflow-hidden relative">
+          <div 
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <motion.div 
+              ref={innerRef} 
+              className="flex gap-8"
             >
-              {/* Gradient background on hover */}
-              <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-gray-800 opacity-0 group-hover:opacity-100 rounded-xl transition-opacity duration-300"></div>
-              
-              <div className="relative z-10">
-                {/* Avatar and Info */}
-                <div className="flex items-center mb-6">
-                  <div className="w-14 h-14 rounded-full bg-gray-800 dark:bg-gray-700 text-white flex items-center justify-center text-xl font-semibold mr-4">
-                    {getInitials(testimonial.name)}
-                  </div>
-                  <div>
-                    <h3 className="font-semibold text-gray-900 dark:text-white">{testimonial.name}</h3>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">
-                      {testimonial.email}
-                    </p>
-                  </div>
-                </div>
-                
-                {/* Star Rating */}
-                <div className="mb-4">
-                  <StarRating rating={testimonial.stars} />
-                </div>
-                
-                {/* Review Text */}
-                <div className="relative">
-                  <p className={`text-gray-600 dark:text-gray-300 mb-4 ${!expandedReviews[index] && 'line-clamp-3'}`}>
-                    {testimonial.review}
-                  </p>
-                  {testimonial.review.length > 150 && (
-                    <button 
-                      onClick={() => toggleReview(index)}
-                      className="text-blue-600 dark:text-blue-400 text-sm font-medium flex items-center gap-1 hover:underline"
-                    >
-                      {expandedReviews[index] ? (
-                        <>
-                          <span>Show less</span>
-                          <FaChevronUp size={12} />
-                        </>
-                      ) : (
-                        <>
-                          <span>Read more</span>
-                          <FaChevronDown size={12} />
-                        </>
+              {[...testimonials, ...testimonials].map((testimonial, index) => (
+                <div
+                  key={index}
+                  className="relative group bg-white dark:bg-neutral-950 rounded-xl p-8 shadow-sm hover:shadow-lg transition-all duration-300 border border-gray-200 dark:border-gray-700 w-[350px] max-w-sm flex-shrink-0"
+                >
+                  {/* Gradient background on hover */}
+                  <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/20 dark:to-neutral-900 opacity-0 group-hover:opacity-100 rounded-xl transition-opacity duration-300"></div>
+                  
+                  <div className="relative z-10">
+                    {/* Avatar and Info */}
+                    <div className="flex items-center mb-6">
+                      <div className="w-14 h-14 rounded-full bg-gray-800 dark:bg-gray-700 text-white flex items-center justify-center text-xl font-semibold mr-4">
+                        {getInitials(testimonial.name)}
+                      </div>
+                      <div>
+                        <h3 className="font-semibold text-gray-900 dark:text-white">{testimonial.name}</h3>
+                        <p className="text-sm text-gray-500 dark:text-gray-400">
+                          {testimonial.email}
+                        </p>
+                      </div>
+                    </div>
+                    
+                    {/* Star Rating */}
+                    <div className="mb-4">
+                      <StarRating rating={testimonial.stars} />
+                    </div>
+                    
+                    {/* Review Text */}
+                    <div className="relative">
+                      <p className={`text-gray-600 dark:text-gray-300 mb-4 break-words whitespace-normal ${!expandedReviews[index] && 'line-clamp-3'}`}>
+                        {testimonial.review}
+                      </p>
+                      {testimonial.review.length > 150 && (
+                        <button 
+                          onClick={() => toggleReview(index)}
+                          className="text-blue-600 dark:text-blue-400 text-sm font-medium flex items-center gap-1 hover:underline"
+                        >
+                          {expandedReviews[index] ? (
+                            <>
+                              <span>Show less</span>
+                              <FaChevronUp size={12} />
+                            </>
+                          ) : (
+                            <>
+                              <span>Read more</span>
+                              <FaChevronDown size={12} />
+                            </>
+                          )}
+                        </button>
                       )}
-                    </button>
-                  )}
-                </div>
-                
-                {/* Footer */}
-                <div className="text-xs text-gray-400 dark:text-gray-500 mt-6 pt-4 border-t border-gray-100 dark:border-gray-700">
-                  Verified User • {testimonial.stars.toFixed(1)} Rating
+                    </div>
+                    
+                    {/* Footer */}
+                    <div className="text-xs text-gray-400 dark:text-gray-500 mt-6 pt-4 border-t border-gray-100 dark:border-gray-700">
+                      Verified User • {testimonial.stars.toFixed(1)} Rating
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Load More Button */}
-        <div className="text-center mt-12">
-          {visibleCount < filteredTestimonials.length ? (
-            <button
-              onClick={loadMore}
-              className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-all duration-300 shadow-md hover:shadow-lg"
-            >
-              Load More
-            </button>
-          ) : visibleCount > 3 && (
-            <button
-              onClick={showLess}
-              className="px-8 py-3 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium rounded-lg transition-all duration-300 border border-gray-200 dark:border-gray-700"
-            >
-              Show Less
-            </button>
-          )}
+              ))}
+            </motion.div>
+          </div>
+          <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-white to-transparent dark:from-neutral-900 dark:to-transparent pointer-events-none"></div>
+          <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-white to-transparent dark:from-neutral-900 dark:to-transparent pointer-events-none"></div>
         </div>
 
         {/* Divider */}
-        <div className="mt-20 mx-auto h-[1px] max-w-4xl bg-gradient-to-r rounded-sm from-transparent via-blue-200 dark:via-blue-800 to-transparent"></div>
+        <div className="mt-10 mx-auto h-[1px] max-w-4xl bg-gradient-to-r rounded-sm from-transparent via-blue-200 dark:via-blue-800 to-transparent"></div>
       </div>
     </section>
   );
diff --git a/app/components/ui/ArticleActions.jsx b/app/components/ui/ArticleActions.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/Breadcrumbs.jsx b/app/components/ui/Breadcrumbs.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/ClientLayoutWrapper.jsx b/app/components/ui/ClientLayoutWrapper.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/ModuleCard.jsx b/app/components/ui/ModuleCard.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/PushPop.jsx b/app/components/ui/PushPop.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/SearchBar.jsx b/app/components/ui/SearchBar.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/TutorialOverlay.jsx b/app/components/ui/TutorialOverlay.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/backtotop.jsx b/app/components/ui/backtotop.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/customArrayInput.jsx b/app/components/ui/customArrayInput.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/exploreOther.jsx b/app/components/ui/exploreOther.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/goButton.jsx b/app/components/ui/goButton.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/goback.jsx b/app/components/ui/goback.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/graph.jsx b/app/components/ui/graph.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/navigationLink.jsx b/app/components/ui/navigationLink.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/productHunt.jsx b/app/components/ui/productHunt.jsx
old mode 100644
new mode 100755
index 57128d3..89f400a
--- a/app/components/ui/productHunt.jsx
+++ b/app/components/ui/productHunt.jsx
@@ -1,49 +1,16 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 const ProductHuntBadge = () => {
-  const [showBadge, setShowBadge] = useState(true);
-  const [isDark, setIsDark] = useState(null);
-
-  useEffect(() => {
-    const footer = document.querySelector("footer");
-    if (!footer) return;
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setShowBadge(!entry.isIntersecting);
-      },
-      { threshold: 0.1 }
-    );
-
-    observer.observe(footer);
-
-    const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    setIsDark(darkQuery.matches);
-
-    const handleChange = (e) => setIsDark(e.matches);
-    darkQuery.addEventListener("change", handleChange);
-
-    return () => {
-      if (footer) observer.unobserve(footer);
-      observer.disconnect();
-      darkQuery.removeEventListener("change", handleChange);
-    };
-  }, []);
-
-  if (!showBadge || isDark === null) return null;
-
-  const badgeTheme = isDark ? "light" : "dark";
-
   return (
     <a
+    className="border dark:border-white border-black rounded-xl"
       href="https://www.producthunt.com/products/dsa-visualizer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-dsa&#0045;visualizer"
       target="_blank"
       rel="noopener noreferrer"
-      className="fixed bottom-4 right-4 z-50"
     >
       <img
-        src={`https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=974127&theme=${badgeTheme}&t=1749182745821`}
+        src={`https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=974127&theme=dark&t=1749182745821`}
         alt="DSA&#0032;Visualizer - Visualize&#0032;&#0038;&#0032;learn&#0032;dsa&#0032;the&#0032;smart&#0032;way | Product Hunt"
         style={{ width: 250, height: 54 }}
         width="250"
diff --git a/app/components/ui/randomArray.jsx b/app/components/ui/randomArray.jsx
old mode 100644
new mode 100755
diff --git a/app/components/ui/resetButton.jsx b/app/components/ui/resetButton.jsx
old mode 100644
new mode 100755
diff --git a/app/contexts/AuthContext.js b/app/contexts/AuthContext.js
old mode 100644
new mode 100755
diff --git a/app/contexts/UserContext.jsx b/app/contexts/UserContext.jsx
old mode 100644
new mode 100755
diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx
old mode 100644
new mode 100755
diff --git a/app/globals.css b/app/globals.css
old mode 100644
new mode 100755
diff --git a/app/layout.jsx b/app/layout.jsx
old mode 100644
new mode 100755
diff --git a/app/login/page.jsx b/app/login/page.jsx
old mode 100644
new mode 100755
diff --git a/app/not-found.jsx b/app/not-found.jsx
old mode 100644
new mode 100755
diff --git a/app/page.jsx b/app/page.jsx
old mode 100644
new mode 100755
index bf281e2..92b5ea1
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -6,7 +6,6 @@ import Review from "@/app/components/review";
 import Testimonial from "@/app/components/testimonial";
 import Faq from "@/app/components/faq";
 import Footer from "@/app/components/footer";
-import Promotion from "@/app/components/ui/productHunt";
 
 export const metadata = {
   title: 'DSA Visualizer | Visualize & Learn DSA the Smart Way',
@@ -44,7 +43,6 @@ export const metadata = {
 export default function Home() {
   return (
     <div className="min-h-screen bg-gray-100">
-      <Promotion/>
       <Navbar />
       <div id="hero">
         <Hero />
diff --git a/app/visualizer/VisualizerClient.jsx b/app/visualizer/VisualizerClient.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/comparison/animation.jsx b/app/visualizer/linkedList/operations/comparison/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/comparison/codeBlock.jsx b/app/visualizer/linkedList/operations/comparison/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/comparison/content.jsx b/app/visualizer/linkedList/operations/comparison/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/comparison/data/codeExamples.json b/app/visualizer/linkedList/operations/comparison/data/codeExamples.json
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/comparison/data/questions.json b/app/visualizer/linkedList/operations/comparison/data/questions.json
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/comparison/page.jsx b/app/visualizer/linkedList/operations/comparison/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/comparison/quiz.jsx b/app/visualizer/linkedList/operations/comparison/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/deletion/animation.jsx b/app/visualizer/linkedList/operations/deletion/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/deletion/codeBlock.jsx b/app/visualizer/linkedList/operations/deletion/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/deletion/content.jsx b/app/visualizer/linkedList/operations/deletion/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/deletion/data/codeExamples.json b/app/visualizer/linkedList/operations/deletion/data/codeExamples.json
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/deletion/data/questions.json b/app/visualizer/linkedList/operations/deletion/data/questions.json
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/deletion/page.jsx b/app/visualizer/linkedList/operations/deletion/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/deletion/quiz.jsx b/app/visualizer/linkedList/operations/deletion/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/insertion/animation.jsx b/app/visualizer/linkedList/operations/insertion/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/insertion/codeBlock.jsx b/app/visualizer/linkedList/operations/insertion/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/insertion/content.jsx b/app/visualizer/linkedList/operations/insertion/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/insertion/data/codeExamples.json b/app/visualizer/linkedList/operations/insertion/data/codeExamples.json
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/insertion/data/questions.json b/app/visualizer/linkedList/operations/insertion/data/questions.json
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/insertion/page.jsx b/app/visualizer/linkedList/operations/insertion/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/insertion/quiz.jsx b/app/visualizer/linkedList/operations/insertion/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/merge/._codeBlock.jsx b/app/visualizer/linkedList/operations/merge/._codeBlock.jsx
new file mode 100755
index 0000000..c6b0cdc
Binary files /dev/null and b/app/visualizer/linkedList/operations/merge/._codeBlock.jsx differ
diff --git a/app/visualizer/linkedList/operations/merge/animation.jsx b/app/visualizer/linkedList/operations/merge/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/merge/codeBlock.jsx b/app/visualizer/linkedList/operations/merge/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/merge/content.jsx b/app/visualizer/linkedList/operations/merge/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/merge/data/codeExamples.json b/app/visualizer/linkedList/operations/merge/data/codeExamples.json
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/merge/data/questions.json b/app/visualizer/linkedList/operations/merge/data/questions.json
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/merge/page.jsx b/app/visualizer/linkedList/operations/merge/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/merge/quiz.jsx b/app/visualizer/linkedList/operations/merge/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/reverse/animation.jsx b/app/visualizer/linkedList/operations/reverse/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/reverse/codeBlock.jsx b/app/visualizer/linkedList/operations/reverse/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/reverse/content.jsx b/app/visualizer/linkedList/operations/reverse/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/reverse/data/codeExamples.json b/app/visualizer/linkedList/operations/reverse/data/codeExamples.json
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/reverse/data/questions.json b/app/visualizer/linkedList/operations/reverse/data/questions.json
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/reverse/page.jsx b/app/visualizer/linkedList/operations/reverse/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/reverse/quiz.jsx b/app/visualizer/linkedList/operations/reverse/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/traversal/animation.jsx b/app/visualizer/linkedList/operations/traversal/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/traversal/codeBlock.jsx b/app/visualizer/linkedList/operations/traversal/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/traversal/content.jsx b/app/visualizer/linkedList/operations/traversal/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/traversal/data/codeExamples.json b/app/visualizer/linkedList/operations/traversal/data/codeExamples.json
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/traversal/data/questions.json b/app/visualizer/linkedList/operations/traversal/data/questions.json
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/traversal/page.jsx b/app/visualizer/linkedList/operations/traversal/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/operations/traversal/quiz.jsx b/app/visualizer/linkedList/operations/traversal/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/circular/animation.jsx b/app/visualizer/linkedList/types/circular/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/circular/codeBlock.jsx b/app/visualizer/linkedList/types/circular/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/circular/content.jsx b/app/visualizer/linkedList/types/circular/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/circular/page.jsx b/app/visualizer/linkedList/types/circular/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/circular/quiz.jsx b/app/visualizer/linkedList/types/circular/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/doubly/animation.jsx b/app/visualizer/linkedList/types/doubly/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/doubly/codeBlock.jsx b/app/visualizer/linkedList/types/doubly/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/doubly/content.jsx b/app/visualizer/linkedList/types/doubly/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/doubly/page.jsx b/app/visualizer/linkedList/types/doubly/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/doubly/quiz.jsx b/app/visualizer/linkedList/types/doubly/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/singly/animation.jsx b/app/visualizer/linkedList/types/singly/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/singly/codeBlock.jsx b/app/visualizer/linkedList/types/singly/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/singly/content.jsx b/app/visualizer/linkedList/types/singly/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/singly/page.jsx b/app/visualizer/linkedList/types/singly/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/linkedList/types/singly/quiz.jsx b/app/visualizer/linkedList/types/singly/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/page.jsx b/app/visualizer/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/implementation/array/animation.jsx b/app/visualizer/queue/implementation/array/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/implementation/array/codeblock.jsx b/app/visualizer/queue/implementation/array/codeblock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/implementation/array/content.jsx b/app/visualizer/queue/implementation/array/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/implementation/array/page.jsx b/app/visualizer/queue/implementation/array/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/implementation/linkedList/animation.jsx b/app/visualizer/queue/implementation/linkedList/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/implementation/linkedList/codeBlock.jsx b/app/visualizer/queue/implementation/linkedList/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/implementation/linkedList/content.jsx b/app/visualizer/queue/implementation/linkedList/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/implementation/linkedList/page.jsx b/app/visualizer/queue/implementation/linkedList/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/animation.jsx b/app/visualizer/queue/operations/enqueue-dequeue/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx b/app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/content.jsx b/app/visualizer/queue/operations/enqueue-dequeue/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/page.jsx b/app/visualizer/queue/operations/enqueue-dequeue/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/quiz.jsx b/app/visualizer/queue/operations/enqueue-dequeue/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/isempty/animation.jsx b/app/visualizer/queue/operations/isempty/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/isempty/codeBlock.jsx b/app/visualizer/queue/operations/isempty/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/isempty/content.jsx b/app/visualizer/queue/operations/isempty/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/isempty/page.jsx b/app/visualizer/queue/operations/isempty/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/isempty/quiz.jsx b/app/visualizer/queue/operations/isempty/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/isfull/animation.jsx b/app/visualizer/queue/operations/isfull/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/isfull/codeBlock.jsx b/app/visualizer/queue/operations/isfull/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/isfull/content.jsx b/app/visualizer/queue/operations/isfull/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/isfull/page.jsx b/app/visualizer/queue/operations/isfull/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/isfull/quiz.jsx b/app/visualizer/queue/operations/isfull/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/peek-front/animation.jsx b/app/visualizer/queue/operations/peek-front/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/peek-front/codeBlock.jsx b/app/visualizer/queue/operations/peek-front/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/peek-front/content.jsx b/app/visualizer/queue/operations/peek-front/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/peek-front/page.jsx b/app/visualizer/queue/operations/peek-front/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/operations/peek-front/quiz.jsx b/app/visualizer/queue/operations/peek-front/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/circular/animation.jsx b/app/visualizer/queue/types/circular/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/circular/codeBlock.jsx b/app/visualizer/queue/types/circular/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/circular/content.jsx b/app/visualizer/queue/types/circular/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/circular/page.jsx b/app/visualizer/queue/types/circular/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/circular/quiz.jsx b/app/visualizer/queue/types/circular/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/deque/animation.jsx b/app/visualizer/queue/types/deque/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/deque/codeBlock.jsx b/app/visualizer/queue/types/deque/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/deque/content.jsx b/app/visualizer/queue/types/deque/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/deque/page.jsx b/app/visualizer/queue/types/deque/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/deque/quiz.jsx b/app/visualizer/queue/types/deque/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/multiple/animation.jsx b/app/visualizer/queue/types/multiple/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/multiple/codeBlock.jsx b/app/visualizer/queue/types/multiple/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/multiple/content.jsx b/app/visualizer/queue/types/multiple/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/multiple/page.jsx b/app/visualizer/queue/types/multiple/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/multiple/quiz.jsx b/app/visualizer/queue/types/multiple/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/priority/animation.jsx b/app/visualizer/queue/types/priority/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/priority/codeBlock.jsx b/app/visualizer/queue/types/priority/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/priority/content.jsx b/app/visualizer/queue/types/priority/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/priority/page.jsx b/app/visualizer/queue/types/priority/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/priority/quiz.jsx b/app/visualizer/queue/types/priority/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/singleEnded/animation.jsx b/app/visualizer/queue/types/singleEnded/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/singleEnded/codeBlock.jsx b/app/visualizer/queue/types/singleEnded/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/singleEnded/content.jsx b/app/visualizer/queue/types/singleEnded/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/singleEnded/page.jsx b/app/visualizer/queue/types/singleEnded/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/queue/types/singleEnded/quiz.jsx b/app/visualizer/queue/types/singleEnded/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/searching/binarysearch/animation.jsx b/app/visualizer/searching/binarysearch/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/searching/binarysearch/codeBlock.jsx b/app/visualizer/searching/binarysearch/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/searching/binarysearch/content.jsx b/app/visualizer/searching/binarysearch/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/searching/binarysearch/page.jsx b/app/visualizer/searching/binarysearch/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/searching/binarysearch/quiz.jsx b/app/visualizer/searching/binarysearch/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/searching/linearsearch/animation.jsx b/app/visualizer/searching/linearsearch/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/searching/linearsearch/codeBlock.jsx b/app/visualizer/searching/linearsearch/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/searching/linearsearch/content.jsx b/app/visualizer/searching/linearsearch/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/searching/linearsearch/page.jsx b/app/visualizer/searching/linearsearch/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/searching/linearsearch/quiz.jsx b/app/visualizer/searching/linearsearch/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/bubblesort/animation.jsx b/app/visualizer/sorting/bubblesort/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/bubblesort/codeBlock.jsx b/app/visualizer/sorting/bubblesort/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/bubblesort/content.jsx b/app/visualizer/sorting/bubblesort/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/bubblesort/page.jsx b/app/visualizer/sorting/bubblesort/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/bubblesort/quiz.jsx b/app/visualizer/sorting/bubblesort/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/insertionsort/animation.jsx b/app/visualizer/sorting/insertionsort/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/insertionsort/codeBlock.jsx b/app/visualizer/sorting/insertionsort/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/insertionsort/content.jsx b/app/visualizer/sorting/insertionsort/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/insertionsort/page.jsx b/app/visualizer/sorting/insertionsort/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/insertionsort/quiz.jsx b/app/visualizer/sorting/insertionsort/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/mergesort/animation.jsx b/app/visualizer/sorting/mergesort/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/mergesort/codeBlock.jsx b/app/visualizer/sorting/mergesort/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/mergesort/content.jsx b/app/visualizer/sorting/mergesort/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/mergesort/page.jsx b/app/visualizer/sorting/mergesort/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/mergesort/quiz.jsx b/app/visualizer/sorting/mergesort/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/quicksort/animation.jsx b/app/visualizer/sorting/quicksort/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/quicksort/codeBlock.jsx b/app/visualizer/sorting/quicksort/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/quicksort/content.jsx b/app/visualizer/sorting/quicksort/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/quicksort/page.jsx b/app/visualizer/sorting/quicksort/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/quicksort/quiz.jsx b/app/visualizer/sorting/quicksort/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/selectionsort/animation.jsx b/app/visualizer/sorting/selectionsort/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/selectionsort/codeBlock.jsx b/app/visualizer/sorting/selectionsort/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/selectionsort/content.jsx b/app/visualizer/sorting/selectionsort/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/selectionsort/page.jsx b/app/visualizer/sorting/selectionsort/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/sorting/selectionsort/quiz.jsx b/app/visualizer/sorting/selectionsort/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/implementation/usingArray/animation.jsx b/app/visualizer/stack/implementation/usingArray/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/implementation/usingArray/codeBlock.jsx b/app/visualizer/stack/implementation/usingArray/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/implementation/usingArray/content.jsx b/app/visualizer/stack/implementation/usingArray/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/implementation/usingArray/page.jsx b/app/visualizer/stack/implementation/usingArray/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/implementation/usingLinkedList/animation.jsx b/app/visualizer/stack/implementation/usingLinkedList/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx b/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/implementation/usingLinkedList/content.jsx b/app/visualizer/stack/implementation/usingLinkedList/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/implementation/usingLinkedList/page.jsx b/app/visualizer/stack/implementation/usingLinkedList/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/isempty/animation.jsx b/app/visualizer/stack/isempty/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/isempty/codeBlock.jsx b/app/visualizer/stack/isempty/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/isempty/content.jsx b/app/visualizer/stack/isempty/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/isempty/page.jsx b/app/visualizer/stack/isempty/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/isempty/quiz.jsx b/app/visualizer/stack/isempty/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/isfull/animation.jsx b/app/visualizer/stack/isfull/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/isfull/codeBlock.jsx b/app/visualizer/stack/isfull/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/isfull/content.jsx b/app/visualizer/stack/isfull/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/isfull/page.jsx b/app/visualizer/stack/isfull/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/isfull/quiz.jsx b/app/visualizer/stack/isfull/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/peek/animation.jsx b/app/visualizer/stack/peek/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/peek/codeBlock.jsx b/app/visualizer/stack/peek/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/peek/content.jsx b/app/visualizer/stack/peek/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/peek/page.jsx b/app/visualizer/stack/peek/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/peek/quiz.jsx b/app/visualizer/stack/peek/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/polish/postfix/animation.jsx b/app/visualizer/stack/polish/postfix/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/polish/postfix/codeBlock.jsx b/app/visualizer/stack/polish/postfix/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/polish/postfix/content.jsx b/app/visualizer/stack/polish/postfix/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/polish/postfix/page.jsx b/app/visualizer/stack/polish/postfix/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/polish/postfix/quiz.jsx b/app/visualizer/stack/polish/postfix/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/polish/prefix/animation.jsx b/app/visualizer/stack/polish/prefix/animation.jsx
old mode 100644
new mode 100755
index f78199a..5c9c153
--- a/app/visualizer/stack/polish/prefix/animation.jsx
+++ b/app/visualizer/stack/polish/prefix/animation.jsx
@@ -1,11 +1,8 @@
 'use client';
 import React, { useState, useEffect } from 'react';
-
 import Footer from '@/app/components/footer';
 import ExploreOther from '@/app/components/ui/exploreOther';
-import Content from '@/app/visualizer/stack/polish/prefix/content';
 import CodeBlock from '@/app/visualizer/stack/polish/prefix/codeBlock';
-import GoBackButton from "@/app/components/ui/goback";
 import Quiz from '@/app/visualizer/stack/polish/postfix/quiz';
 import BackToTop from '@/app/components/ui/backtotop';
 
@@ -241,22 +238,6 @@ const InfixToPrefixVisualizer = () => {
   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">Infix to Prefix</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 />
-        <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
-          Visualize the conversion from infix to prefix notation
-        </p>
-
         <div className="max-w-4xl mx-auto">
           {/* Input and Controls */}
           <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mb-6">
diff --git a/app/visualizer/stack/polish/prefix/codeBlock.jsx b/app/visualizer/stack/polish/prefix/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/polish/prefix/content.jsx b/app/visualizer/stack/polish/prefix/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/polish/prefix/page.jsx b/app/visualizer/stack/polish/prefix/page.jsx
old mode 100644
new mode 100755
index de4a2fb..67d85d2
--- a/app/visualizer/stack/polish/prefix/page.jsx
+++ b/app/visualizer/stack/polish/prefix/page.jsx
@@ -1,32 +1,80 @@
 import Animation from "@/app/visualizer/stack/polish/prefix/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/polish/prefix/content';
 
 export const metadata = {
-    title: 'Prefix Notation using Stack | Learn Prefix Evaluation in DSA with Code in JS, C, Python, Java',
-    description: 'Understand how to evaluate Prefix expressions using a Stack with interactive animations and code examples in JavaScript, C, Python, and Java. Essential for mastering DSA concepts and preparing for interviews.',
-    keywords: [
-      'Prefix Notation',
-      'Prefix Evaluation Stack',
-      'Stack DSA',
-      'Prefix Expression',
-      'DSA Prefix',
-      'Evaluate Prefix using Stack',
-      'Learn Prefix Notation',
-      'Prefix Evaluation in JavaScript',
-      'Prefix Evaluation in C',
-      'Prefix Evaluation in Python',
-      'Prefix Evaluation in Java',
-      'Stack Code Examples',
-      'DSA Expression Evaluation',
+  title:
+    "Prefix Notation using Stack | Learn Prefix Evaluation in DSA with Code in JS, C, Python, Java",
+  description:
+    "Understand how to evaluate Prefix expressions using a Stack with interactive animations and code examples in JavaScript, C, Python, and Java. Essential for mastering DSA concepts and preparing for interviews.",
+  keywords: [
+    "Prefix Notation",
+    "Prefix Evaluation Stack",
+    "Stack DSA",
+    "Prefix Expression",
+    "DSA Prefix",
+    "Evaluate Prefix using Stack",
+    "Learn Prefix Notation",
+    "Prefix Evaluation in JavaScript",
+    "Prefix Evaluation in C",
+    "Prefix Evaluation in Python",
+    "Prefix Evaluation in Java",
+    "Stack Code Examples",
+    "DSA Expression Evaluation",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/prefix.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack infix to postfix",
+      },
     ],
-    robots: "index, follow",
-  };
+  },
+};
 
 export default function Page() {
-    return(
-      <>
-        <Navbar/>
-        <Animation/>
-      </>
-    );
-};
\ No newline at end of file
+  const paths = [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    { name: "Stack : Infix to prefix", href: "" },
+  ];
+
+  return (
+    <>
+      <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">
+              Infix to Prefix
+            </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>
+          <Animation />
+        </section>
+      </div>
+    </>
+  );
+}
diff --git a/app/visualizer/stack/polish/prefix/quiz.jsx b/app/visualizer/stack/polish/prefix/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/push-pop/animation.jsx b/app/visualizer/stack/push-pop/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/push-pop/codeBlock.jsx b/app/visualizer/stack/push-pop/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/push-pop/content.jsx b/app/visualizer/stack/push-pop/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/push-pop/page.jsx b/app/visualizer/stack/push-pop/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/stack/push-pop/quiz.jsx b/app/visualizer/stack/push-pop/quiz.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/trees/binaryTree/types/animation.jsx b/app/visualizer/trees/binaryTree/types/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/trees/binaryTree/types/codeBlock.jsx b/app/visualizer/trees/binaryTree/types/codeBlock.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/trees/binaryTree/types/content.jsx b/app/visualizer/trees/binaryTree/types/content.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/trees/binaryTree/types/page.jsx b/app/visualizer/trees/binaryTree/types/page.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/trees/traversing/in-order/animation.jsx b/app/visualizer/trees/traversing/in-order/animation.jsx
old mode 100644
new mode 100755
diff --git a/app/visualizer/trees/traversing/in-order/page.jsx b/app/visualizer/trees/traversing/in-order/page.jsx
old mode 100644
new mode 100755
diff --git a/eslint.config.mjs b/eslint.config.mjs
old mode 100644
new mode 100755
diff --git a/jsconfig.json b/jsconfig.json
old mode 100644
new mode 100755
diff --git a/lib/gtag.js b/lib/gtag.js
old mode 100644
new mode 100755
diff --git a/lib/modulesMap.js b/lib/modulesMap.js
old mode 100644
new mode 100755
diff --git a/lib/supabase.js b/lib/supabase.js
old mode 100644
new mode 100755
diff --git a/next-sitemap.config.js b/next-sitemap.config.js
old mode 100644
new mode 100755
diff --git a/next.config.mjs b/next.config.mjs
old mode 100644
new mode 100755
diff --git a/package-lock.json b/package-lock.json
old mode 100644
new mode 100755
diff --git a/package.json b/package.json
old mode 100644
new mode 100755
diff --git a/postcss.config.js b/postcss.config.js
old mode 100644
new mode 100755
diff --git a/postcss.config.mjs b/postcss.config.mjs
old mode 100644
new mode 100755
diff --git a/public/DSA.png b/public/DSA.png
old mode 100644
new mode 100755
diff --git a/public/DSAVisualizer.png b/public/DSAVisualizer.png
old mode 100644
new mode 100755
diff --git a/public/GurlThinking.png b/public/GurlThinking.png
old mode 100644
new mode 100755
diff --git a/public/blog/DSimage/array.png b/public/blog/DSimage/array.png
old mode 100644
new mode 100755
diff --git a/public/blog/DSimage/graph.png b/public/blog/DSimage/graph.png
old mode 100644
new mode 100755
diff --git a/public/blog/DSimage/linkedList.png b/public/blog/DSimage/linkedList.png
old mode 100644
new mode 100755
diff --git a/public/blog/DSimage/queue.png b/public/blog/DSimage/queue.png
old mode 100644
new mode 100755
diff --git a/public/blog/DSimage/stack.png b/public/blog/DSimage/stack.png
old mode 100644
new mode 100755
diff --git a/public/blog/DSimage/tree.png b/public/blog/DSimage/tree.png
old mode 100644
new mode 100755
diff --git a/public/blog/dsaDifferent.png b/public/blog/dsaDifferent.png
old mode 100644
new mode 100755
diff --git a/public/blog/dsaWebDev.png b/public/blog/dsaWebDev.png
old mode 100644
new mode 100755
diff --git a/public/blog/timeRequired.png b/public/blog/timeRequired.png
old mode 100644
new mode 100755
diff --git a/public/blog/whatIsDS.png b/public/blog/whatIsDS.png
old mode 100644
new mode 100755
diff --git a/public/favicon.ico b/public/favicon.ico
old mode 100644
new mode 100755
diff --git a/public/google.webp b/public/google.webp
old mode 100644
new mode 100755
diff --git a/public/google647afbccc581b5c2.html b/public/google647afbccc581b5c2.html
old mode 100644
new mode 100755
diff --git a/public/logo.jpeg b/public/logo.jpeg
old mode 100644
new mode 100755
diff --git a/public/modules/binarySearch.png b/public/modules/binarySearch.png
old mode 100644
new mode 100755
diff --git a/public/modules/bubbleSort.png b/public/modules/bubbleSort.png
old mode 100644
new mode 100755
diff --git a/public/modules/insertionSort.png b/public/modules/insertionSort.png
old mode 100644
new mode 100755
diff --git a/public/modules/isEmpty.png b/public/modules/isEmpty.png
old mode 100644
new mode 100755
diff --git a/public/modules/isFull.png b/public/modules/isFull.png
old mode 100644
new mode 100755
diff --git a/public/modules/linearSearch.png b/public/modules/linearSearch.png
old mode 100644
new mode 100755
diff --git a/public/modules/mergeSort.png b/public/modules/mergeSort.png
old mode 100644
new mode 100755
diff --git a/public/modules/peek.png b/public/modules/peek.png
old mode 100644
new mode 100755
diff --git a/public/modules/postfix.png b/public/modules/postfix.png
new file mode 100755
index 0000000..9102ecf
Binary files /dev/null and b/public/modules/postfix.png differ
diff --git a/public/modules/pushPop.png b/public/modules/pushPop.png
old mode 100644
new mode 100755
diff --git a/public/modules/quickSort.png b/public/modules/quickSort.png
old mode 100644
new mode 100755
diff --git a/public/modules/selectionSort.png b/public/modules/selectionSort.png
old mode 100644
new mode 100755
diff --git a/public/og.png b/public/og.png
old mode 100644
new mode 100755
diff --git a/public/og/searching/binarySearch.png b/public/og/searching/binarySearch.png
old mode 100644
new mode 100755
diff --git a/public/og/searching/linearSearch.png b/public/og/searching/linearSearch.png
old mode 100644
new mode 100755
diff --git a/public/og/sorting/bubbleSort.png b/public/og/sorting/bubbleSort.png
old mode 100644
new mode 100755
diff --git a/public/og/sorting/insertionSort.png b/public/og/sorting/insertionSort.png
old mode 100644
new mode 100755
diff --git a/public/og/sorting/mergeSort.png b/public/og/sorting/mergeSort.png
old mode 100644
new mode 100755
diff --git a/public/og/sorting/quickSort.png b/public/og/sorting/quickSort.png
old mode 100644
new mode 100755
diff --git a/public/og/sorting/selectionSort.png b/public/og/sorting/selectionSort.png
old mode 100644
new mode 100755
diff --git a/public/og/stack/isEmpty.png b/public/og/stack/isEmpty.png
old mode 100644
new mode 100755
diff --git a/public/og/stack/isFull.png b/public/og/stack/isFull.png
old mode 100644
new mode 100755
diff --git a/public/og/stack/peek.png b/public/og/stack/peek.png
old mode 100644
new mode 100755
diff --git a/public/og/stack/postfix.png b/public/og/stack/postfix.png
new file mode 100755
index 0000000..9102ecf
Binary files /dev/null and b/public/og/stack/postfix.png differ
diff --git a/public/og/stack/pushPop.png b/public/og/stack/pushPop.png
old mode 100644
new mode 100755
diff --git a/public/og/visualizer.png b/public/og/visualizer.png
old mode 100644
new mode 100755
diff --git a/public/robots.txt b/public/robots.txt
old mode 100644
new mode 100755
diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml
old mode 100644
new mode 100755
diff --git a/public/sitemap.xml b/public/sitemap.xml
old mode 100644
new mode 100755
diff --git a/public/tutorials/tutorial1.mp4 b/public/tutorials/tutorial1.mp4
old mode 100644
new mode 100755
diff --git a/public/tutorials/tutorial2.mp4 b/public/tutorials/tutorial2.mp4
old mode 100644
new mode 100755
diff --git a/tailwind.config.js b/tailwind.config.js
old mode 100644
new mode 100755
diff --git a/utils/auth.js b/utils/auth.js
old mode 100644
new mode 100755