From b2f90d88ac048a409d9cbf60d141b3d09d95ebcd Mon Sep 17 00:00:00 2001
From: Shalini <jhashalini363@gmail.com>
Date: Sun, 1 Mar 2026 12:56:27 +0530
Subject: [PATCH 1/2] Before file-based auto tool discovery refactor

---
 app/[slug]/page.tsx    | 187 +++++----
 app/libs/constants.tsx | 884 +----------------------------------------
 package-lock.json      | 215 +++++++---
 package.json           |   2 +-
 4 files changed, 280 insertions(+), 1008 deletions(-)

diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
index 81a451f..9ad9953 100644
--- a/app/[slug]/page.tsx
+++ b/app/[slug]/page.tsx
@@ -6,7 +6,6 @@ import { Button } from "antd";
 import Image from "next/image";
 import StarGardientIcon from "@/app/components/theme/Icon/starGradientIcon";
 import {
-  developmentToolsRoutes,
   Extension_URL,
   integrationTools,
 } from "@/app/libs/constants";
@@ -21,6 +20,8 @@ import RecorderGradientIcon from "@/app/components/theme/Icon/recorderGradientIc
 import SEOComponent from "@/app/components/theme/SEOComponent/SEOComponent";
 import { detectBrowser } from "@/app/libs/helpers";
 import EdgeIcon from "@/app/components/theme/Icon/edgeIcon";
+import dynamic from "next/dynamic";
+import notFound from "../not-found";
 
 const Page = ({ params: { slug } }: { params: { slug: string } }) => {
   const [browser, setBrowser] = useState("chrome");
@@ -29,6 +30,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
     setBrowser(detectBrowser());
   }, []);
   const toolsData = DEVELOPMENTTOOLS[slug];
+  if (!toolsData) {
+  notFound();
+}
   const {
     hero_section,
     development_tools_list,
@@ -42,11 +46,24 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
     meta_data,
   } = toolsData;
   const pathname = usePathname();
+  // Convert slug (base64-encoder) -> base64Encoder
+  const toCamelCase = (slug: string) =>
+    slug.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
 
-  const currentTool = developmentToolsRoutes.find(
-    (tool: any) => tool.path === pathname
+  const componentName = toCamelCase(slug);
+
+  const ToolComponent = dynamic(() =>
+    import(`@/app/components/developmentToolsComponent/${componentName}`)
+      .then((mod) => mod.default)
+      .catch(() => {
+        notFound();
+      }),
   );
 
+  // const currentTool = developmentToolsRoutes.find(
+  //   (tool: any) => tool.path === pathname
+  // );
+
   return (
     <>
       <SEOComponent
@@ -201,7 +218,8 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
             )}
 
             {/* Integrated Tool section */}
-            {currentTool ? currentTool?.component : null}
+            <ToolComponent />
+            {/* {currentTool ? currentTool?.component : null} */}
 
             {/* Tool description section */}
             <section className="mt-8">
@@ -259,7 +277,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                       </span>
                                     )}
                                   </li>
-                                )
+                                ),
                               )}
                             </ul>
                           );
@@ -283,7 +301,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                 (exampleItem: any, exampleIndex: number) => {
                                   const isExampleHeading =
                                     exampleItem?.example_input?.startsWith(
-                                      "Example"
+                                      "Example",
                                     );
                                   const isInputOrOutput =
                                     exampleItem?.example_input === "Input" ||
@@ -292,7 +310,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                     typeof exampleItem?.example_output ===
                                     "string";
                                   const isArrayOutput = Array.isArray(
-                                    exampleItem?.example_output
+                                    exampleItem?.example_output,
                                   );
 
                                   return (
@@ -322,7 +340,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                               {exampleItem.example_output.map(
                                                 (
                                                   outputItem: any,
-                                                  outputIndex: number
+                                                  outputIndex: number,
                                                 ) => (
                                                   <p
                                                     key={`output_${index}_${exampleIndex}_${outputIndex}`}
@@ -330,7 +348,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                                   >
                                                     {outputItem?.value}
                                                   </p>
-                                                )
+                                                ),
                                               )}
                                             </div>
                                           )}
@@ -338,7 +356,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                       )}
                                     </div>
                                   );
-                                }
+                                },
                               )}
                             </div>
                           );
@@ -388,11 +406,11 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                     {text}
                                   </span>
                                 );
-                              }
+                              },
                             )}
                           </p>
                         );
-                      }
+                      },
                     )}
 
                     {development_tools_about_details?.placeholder && (
@@ -404,7 +422,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                 {placeholder?.title}
                               </span>
                             </li>
-                          )
+                          ),
                         )}
                       </ul>
                     )}
@@ -430,7 +448,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                       )}
                       {development_tools_user_agent_info?.example_string_description && (
                         <p className="text-white/90 text-sm whitespace-pre !mb-4">
-                          {development_tools_user_agent_info?.example_string_description}
+                          {
+                            development_tools_user_agent_info?.example_string_description
+                          }
                         </p>
                       )}
                       {development_tools_user_agent_info?.info_items && (
@@ -449,7 +469,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                     {item?.description}
                                   </span>
                                 </li>
-                              )
+                              ),
                             )}
                           </ul>
                         </div>
@@ -478,10 +498,16 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                               {development_tool_example?.example_input?.title}
                             </p>
                           )}
-                          {development_tool_example?.example_input?.json_data && (
-                            <pre className={`${DevelopmentToolsStyles.modernScrollbar} bg-[#1a1a1a] border border-white/10 rounded-lg p-4 mt-2`}>
+                          {development_tool_example?.example_input
+                            ?.json_data && (
+                            <pre
+                              className={`${DevelopmentToolsStyles.modernScrollbar} bg-[#1a1a1a] border border-white/10 rounded-lg p-4 mt-2`}
+                            >
                               <code className="text-white/90 text-sm whitespace-pre">
-                                {development_tool_example?.example_input?.json_data}
+                                {
+                                  development_tool_example?.example_input
+                                    ?.json_data
+                                }
                               </code>
                             </pre>
                           )}
@@ -497,7 +523,10 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                           )}
                           {development_tool_example?.example_outputs?.outputs?.map(
                             (output: any, index: number) => (
-                              <div key={`example_output_${index}`} className="mt-4">
+                              <div
+                                key={`example_output_${index}`}
+                                className="mt-4"
+                              >
                                 {output?.mode && (
                                   <p className="text-white text-base font-medium mb-2">
                                     {output?.mode}
@@ -509,7 +538,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                   </p>
                                 )}
                                 {output?.content && (
-                                  <pre className={`${DevelopmentToolsStyles.modernScrollbar} bg-[#1a1a1a] border border-white/10 rounded-lg p-4 mt-2`}>
+                                  <pre
+                                    className={`${DevelopmentToolsStyles.modernScrollbar} bg-[#1a1a1a] border border-white/10 rounded-lg p-4 mt-2`}
+                                  >
                                     <code className="text-white/90 text-sm whitespace-pre">
                                       {output?.content}
                                     </code>
@@ -521,7 +552,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                   </p>
                                 )}
                               </div>
-                            )
+                            ),
                           )}
                         </div>
                       )}
@@ -564,11 +595,11 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                       {text}
                                     </span>
                                   );
-                                }
+                                },
                               )}
                             </p>
                           );
-                        }
+                        },
                       )}
                     </div>
                   )}
@@ -590,7 +621,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                 </span>
                               ) : (
                                 <span key={i}>{parts}</span>
-                              )
+                              ),
                             )}
                         </p>
                       </>
@@ -611,10 +642,11 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                 {/* Primary Flex Layout for Step Key, Title, and Description */}
                                 <div className="flex items-start flex-wrap">
                                   <span
-                                    className={`text-white/90 font-semibold text-base${guide?.step_key?.includes("Step")
-                                      ? " pr-1"
-                                      : ""
-                                      }`}
+                                    className={`text-white/90 font-semibold text-base${
+                                      guide?.step_key?.includes("Step")
+                                        ? " pr-1"
+                                        : ""
+                                    }`}
                                   >
                                     {guide?.step_key}
                                   </span>
@@ -636,9 +668,12 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                                 {p?.steps_points_description
                                                   ?.split(/(".*?")/)
                                                   .map(
-                                                    (part: string, i: number) =>
+                                                    (
+                                                      part: string,
+                                                      i: number,
+                                                    ) =>
                                                       part.startsWith("") &&
-                                                        part.endsWith("") ? (
+                                                      part.endsWith("") ? (
                                                         <span
                                                           key={i}
                                                           className="font-semibold text-white/90"
@@ -649,34 +684,34 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                                         <React.Fragment key={i}>
                                                           {part
                                                             .split(
-                                                              /(\/\/.*?\/\/)/
+                                                              /(\/\/.*?\/\/)/,
                                                             )
                                                             .map(
                                                               (
                                                                 sub: string,
-                                                                j: number
+                                                                j: number,
                                                               ) =>
                                                                 sub.startsWith(
-                                                                  "//"
+                                                                  "//",
                                                                 ) &&
-                                                                  sub.endsWith(
-                                                                    "//"
-                                                                  ) ? (
+                                                                sub.endsWith(
+                                                                  "//",
+                                                                ) ? (
                                                                   <span
                                                                     key={`${i}-${j}`}
                                                                     className="font-semibold text-white/90"
                                                                   >
                                                                     {sub.slice(
                                                                       2,
-                                                                      -2
+                                                                      -2,
                                                                     )}
                                                                   </span>
                                                                 ) : (
                                                                   sub
-                                                                )
+                                                                ),
                                                             )}
                                                         </React.Fragment>
-                                                      )
+                                                      ),
                                                   )}
                                               </p>
                                             )}
@@ -686,7 +721,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                                   {p?.steps_subpoint?.map(
                                                     (
                                                       sub_p: any,
-                                                      subIndex: number
+                                                      subIndex: number,
                                                     ) => (
                                                       <li key={subIndex}>
                                                         {sub_p?.title && (
@@ -701,14 +736,14 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                                               .map(
                                                                 (
                                                                   part: string,
-                                                                  i: number
+                                                                  i: number,
                                                                 ) =>
                                                                   part.startsWith(
-                                                                    ""
+                                                                    "",
                                                                   ) &&
-                                                                    part.endsWith(
-                                                                      ""
-                                                                    ) ? (
+                                                                  part.endsWith(
+                                                                    "",
+                                                                  ) ? (
                                                                     <span
                                                                       key={i}
                                                                       className="font-semibold text-white/90"
@@ -721,51 +756,51 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                                                     >
                                                                       {part
                                                                         .split(
-                                                                          /(\/\/.*?\/\/)/
+                                                                          /(\/\/.*?\/\/)/,
                                                                         )
                                                                         .map(
                                                                           (
                                                                             sub: string,
-                                                                            j: number
+                                                                            j: number,
                                                                           ) =>
                                                                             sub.startsWith(
-                                                                              "//"
+                                                                              "//",
                                                                             ) &&
-                                                                              sub.endsWith(
-                                                                                "//"
-                                                                              ) ? (
+                                                                            sub.endsWith(
+                                                                              "//",
+                                                                            ) ? (
                                                                               <span
                                                                                 key={`${i}-${j}`}
                                                                                 className="font-semibold text-white/90"
                                                                               >
                                                                                 {sub.slice(
                                                                                   2,
-                                                                                  -2
+                                                                                  -2,
                                                                                 )}
                                                                               </span>
                                                                             ) : (
                                                                               sub
-                                                                            )
+                                                                            ),
                                                                         )}
                                                                     </React.Fragment>
-                                                                  )
+                                                                  ),
                                                               )}
                                                           </span>
                                                         )}
                                                       </li>
-                                                    )
+                                                    ),
                                                   )}
                                                 </ul>
                                               )}
                                           </li>
-                                        )
+                                        ),
                                       )}
                                     </ul>
                                   )}
                                   <span className="text-base text-white/70">
                                     {parts?.map((part: any, i: any) =>
                                       part.startsWith("") &&
-                                        part.endsWith("") ? (
+                                      part.endsWith("") ? (
                                         <>
                                           <span
                                             key={`description_${i}`}
@@ -776,7 +811,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                         </>
                                       ) : (
                                         part
-                                      )
+                                      ),
                                     )}
                                   </span>
                                 </div>
@@ -785,7 +820,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                   <div className="mt-2 text-base text-white/70">
                                     {desParts?.map((part: any, i: any) =>
                                       part.startsWith("") &&
-                                        part.endsWith("") ? (
+                                      part.endsWith("") ? (
                                         <span
                                           key={`description2_${i}`}
                                           className="text-white"
@@ -794,13 +829,13 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                         </span>
                                       ) : (
                                         part
-                                      )
+                                      ),
                                     )}
                                   </div>
                                 )}
                               </div>
                             );
-                          }
+                          },
                         )}
                       </div>
                     )}
@@ -826,18 +861,20 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                               how?.heading ? (
                                 <p
                                   key={index}
-                                  className={`${""} ${how?.heading
-                                    ? "!mb-6 !ml-[-20px]"
-                                    : "block text-white font-semibold text-base"
-                                    }`}
+                                  className={`${""} ${
+                                    how?.heading
+                                      ? "!mb-6 !ml-[-20px]"
+                                      : "block text-white font-semibold text-base"
+                                  }`}
                                 >
                                   {how?.heading}
                                 </p>
                               ) : (
                                 <li
                                   key={index}
-                                  className={`${""} ${how?.heading ? "my-6 list-none" : "mb-4"
-                                    }`}
+                                  className={`${""} ${
+                                    how?.heading ? "my-6 list-none" : "mb-4"
+                                  }`}
                                 >
                                   <>
                                     <span className="block text-white/90 font-semibold text-base">
@@ -848,7 +885,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                     </span>
                                   </>
                                 </li>
-                              )
+                              ),
                           )}
                         </ul>
                       </div>
@@ -864,7 +901,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                         </h4>
                       )}
                       {Array.isArray(
-                        development_tools_Comparison?.description
+                        development_tools_Comparison?.description,
                       ) &&
                         development_tools_Comparison?.description.map(
                           (d: any, index: any) => (
@@ -874,7 +911,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                             >
                               {d?.desc}
                             </p>
-                          )
+                          ),
                         )}
                     </div>
                   )}
@@ -1013,14 +1050,16 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                         <Link key={index} href={tool?.url}>
                           <div className="flex items-center justify-start gap-5">
                             <span
-                              className={`!w-2 !h-2 ml-[-2px] ${tool?.name === "Azure Boards" && "md:ml-[-7px]"
-                                }`}
+                              className={`!w-2 !h-2 ml-[-2px] ${
+                                tool?.name === "Azure Boards" && "md:ml-[-7px]"
+                              }`}
                             >
                               {tool?.icon}
                             </span>
                             <p
-                              className={`text-sm mt-2 ${tool?.name === "Azure Boards" && "md:ml-1"
-                                }`}
+                              className={`text-sm mt-2 ${
+                                tool?.name === "Azure Boards" && "md:ml-1"
+                              }`}
                             >
                               {tool?.name}
                             </p>
diff --git a/app/libs/constants.tsx b/app/libs/constants.tsx
index f31c495..4bbbf7f 100644
--- a/app/libs/constants.tsx
+++ b/app/libs/constants.tsx
@@ -1,45 +1,4 @@
-import CharacterCounterComponent from '../components/developmentToolsComponent/characterCounterComponent';
-import CodeCompareTool from '../components/developmentToolsComponent/codeCompareTool';
-import CreditCardGeneratorComponent from '../components/developmentToolsComponent/creditCardGeneratorComponent';
-import CreditCardValidatorComponent from '../components/developmentToolsComponent/creditCardValidatorComponent';
-import CsvToTextConverter from '../components/developmentToolsComponent/csvToTextConverter';
-import HtmlToMarkDownComponent from '../components/developmentToolsComponent/htmlToMarkDownComponent';
-import HTMLValidator from '../components/developmentToolsComponent/htmlValidator';
-import JavascriptMinifierComponent from '../components/developmentToolsComponent/javascriptMinifierComponent';
-import JsObfuscatorComponent from '../components/developmentToolsComponent/jsObfuscatorComponent';
-import JsonMinifierComponent from '../components/developmentToolsComponent/jsonMinifierComponent';
-import JsonPrettifierComponent from '../components/developmentToolsComponent/jsonPrittifierComponent';
-import JsonToTxt from '../components/developmentToolsComponent/jsonToTxt';
-import JsonValidator from '../components/developmentToolsComponent/jsonValidator';
-import LineCounterComponent from '../components/developmentToolsComponent/lineCounterComponent';
-import LoremIpsumGeneratorComponent from '../components/developmentToolsComponent/loremIpsumGeneratorComponent';
-import LowerCaseConverterComponent from '../components/developmentToolsComponent/lowerCaseConverterComponent';
-import MarkDownToHtmlComponent from '../components/developmentToolsComponent/markDownToHTMLComponent';
-import PhoneNumberExtractor from '../components/developmentToolsComponent/phoneNumberExtractor';
-import RandomClockTimeGenerator from '../components/developmentToolsComponent/randomClockTimeGenerator';
-import RandomColorGenerator from '../components/developmentToolsComponent/randomColorGenerator';
-import RandomDateGenerator from '../components/developmentToolsComponent/randomDateGenerator';
-import RandomDecimalNumberGenerator from '../components/developmentToolsComponent/randomDecimalNumberGenerator';
-import RandomJsonDataGenerator from '../components/developmentToolsComponent/randomJsonDataGenerator';
-import RandomNumberGenerator from '../components/developmentToolsComponent/randomNumberGenerator';
-import RandomParagraphGenerator from '../components/developmentToolsComponent/randomParagraphGenerator';
-import RandomPasswardGenerator from '../components/developmentToolsComponent/randomPasswardGenerator';
-import RandomSentanceGenerator from '../components/developmentToolsComponent/randomSentanceGenerator';
-import RandomStringGenerator from '../components/developmentToolsComponent/randomStringGenerator';
-import RandomUsernameGenerator from '../components/developmentToolsComponent/randomUsernameGenerator';
-import RandomWordGenerator from '../components/developmentToolsComponent/randomWordGenerator';
-import RemoveSpaces from '../components/developmentToolsComponent/removeSpaces';
-import ReverseTextGenerator from '../components/developmentToolsComponent/reverseTextGenerator';
-import RoundingCalculator from '../components/developmentToolsComponent/roundingCalculator';
-import SentenceCounterComponent from '../components/developmentToolsComponent/sentenceCounterComponent';
-import SortNumbers from '../components/developmentToolsComponent/sortNumbers';
-import SortWords from '../components/developmentToolsComponent/sortWords';
-import TextToOneLine from '../components/developmentToolsComponent/textToOneLine';
-import TxtToCsvConverter from '../components/developmentToolsComponent/txtToCsvConverter';
-import UpperCaseConverterComponent from '../components/developmentToolsComponent/upperCaseConverterComponent';
-import WhatIsMyUserAgent from '../components/developmentToolsComponent/whatIsMyUserAgent';
-import WordCounterComponent from '../components/developmentToolsComponent/wordCounterComponent';
-import WordsToNumbers from '../components/developmentToolsComponent/wordsToNumbers';
+
 import AsanaIcon from '../components/theme/Icon/asanaIcon';
 import { AzureBoardIcon } from '../components/theme/Icon/azureBoardIcon';
 import ClickupIcon from '../components/theme/Icon/clickupIcon';
@@ -52,140 +11,6 @@ import SlackIcon from '../components/theme/Icon/slackIcon';
 import TrelloIcon from '../components/theme/Icon/trelloIcon';
 import { detectBrowser } from './helpers';
 
-// import WordsToNumbers from '../components/developmentToolsComponent/wordsToNumbers';
-import AmIUsingTor from '../components/developmentToolsComponent/amIUsingTor';
-import ApiKeyGenerator from '../components/developmentToolsComponent/apiKeyGenerator';
-import AsciiToDecimalConverter from '../components/developmentToolsComponent/asciiToDecimalConverter';
-import AsciiToUnicodeConverter from '../components/developmentToolsComponent/asciiToUnicodeConverter';
-import BarcodeGenerator from '../components/developmentToolsComponent/barcodeGenerator';
-import Base64Decoder from '../components/developmentToolsComponent/base64Decoder';
-import Base64Encoder from '../components/developmentToolsComponent/base64Encoder';
-import BcdToDecimalConverter from '../components/developmentToolsComponent/bcdToDecimalConverter';
-import BcryptGenerator from '../components/developmentToolsComponent/bcryptGenerator';
-import BinaryToDecimalConverter from '../components/developmentToolsComponent/binaryToDecimalConverter';
-import BitwiseCalculator from '../components/developmentToolsComponent/bitwiseCalculator';
-import CelsiusFahrenheitConverter from '../components/developmentToolsComponent/celsiusFahrenheitConverter';
-import CmykToHexConverter from '../components/developmentToolsComponent/cmykToHexConverter';
-import CmykToRgbConverter from '../components/developmentToolsComponent/cmykToRgbConverter';
-import ColorInvertor from '../components/developmentToolsComponent/colorInvertor';
-import ColorPickerTool from '../components/developmentToolsComponent/colorPickerTool';
-import CrontabGenerator from '../components/developmentToolsComponent/crontabGenerator';
-import CssMinify from '../components/developmentToolsComponent/cssMinify';
-import CssPrettify from '../components/developmentToolsComponent/cssPrettify';
-import CssToLess from '../components/developmentToolsComponent/cssToLess';
-import CssToSass from '../components/developmentToolsComponent/cssToSass';
-import CSSToSCSSConverter from '../components/developmentToolsComponent/cssToScssConverter';
-import CssToStylus from '../components/developmentToolsComponent/cssToStylus';
-import CssValidator from '../components/developmentToolsComponent/cssValidator';
-import CsvToExcelFileConvertor from '../components/developmentToolsComponent/csvToExcelFileConvertor';
-import CSVToJSON from '../components/developmentToolsComponent/csvToJson';
-import DecimalToAsciiConverter from '../components/developmentToolsComponent/decimalToAsciiConverter';
-import DecimalToBinaryConverter from '../components/developmentToolsComponent/decimalToBinaryConverter';
-import DecimalToGrayCode from '../components/developmentToolsComponent/decimalToGrayCode';
-import DecimalToHexConverter from '../components/developmentToolsComponent/decimalToHexConverter';
-import DecimalToOctalConverter from '../components/developmentToolsComponent/decimalToOctalConverter';
-import ExcelCompare from '../components/developmentToolsComponent/excelCompare';
-import FibonacciCalculator from '../components/developmentToolsComponent/fibonacciCalculator';
-import FindAndReplaceString from '../components/developmentToolsComponent/findAndReplaceString';
-import GraphQLFormatter from '../components/developmentToolsComponent/graphqlFormatter';
-import GreyCodeToDecimal from '../components/developmentToolsComponent/greyCodeToDesimal';
-import HexToAscii from '../components/developmentToolsComponent/hexToAscii';
-import HexToBinaryConverter from '../components/developmentToolsComponent/hexToBinaryConverter';
-import HexToCmykConverter from '../components/developmentToolsComponent/hexToCmykConverter';
-import HexToPantone from '../components/developmentToolsComponent/hexToPantone';
-import HexToRGBConverter from '../components/developmentToolsComponent/hexToRGBConverter';
-import HoursToSecounds from '../components/developmentToolsComponent/hoursToSecounds';
-import HtmlCodeGenerator from '../components/developmentToolsComponent/htmlCodeGenerator';
-import HtmlEntitiesToTextConverter from '../components/developmentToolsComponent/htmlEntitiesToTextConverter';
-import HtmlEscape from '../components/developmentToolsComponent/htmlEscape';
-import HtmlMinify from '../components/developmentToolsComponent/htmlMinify';
-import HtmlPrettify from '../components/developmentToolsComponent/htmlPrettify';
-import HtmlTester from '../components/developmentToolsComponent/htmlTester';
-import HtmlToBBCode from '../components/developmentToolsComponent/htmlToBBCode';
-import HtmlToJade from '../components/developmentToolsComponent/htmlToJade';
-import HtmlUnescape from '../components/developmentToolsComponent/htmlUnescape';
-import HtmlViewer from '../components/developmentToolsComponent/htmlViewer';
-import IdnDecode from '../components/developmentToolsComponent/idnDecode';
-import IdnEncode from '../components/developmentToolsComponent/idnEncode';
-import InternetSpeedTest from '../components/developmentToolsComponent/internetSpeedTest';
-import IpToHexConverter from '../components/developmentToolsComponent/ipToHexConverter';
-import JavaScriptEscape from '../components/developmentToolsComponent/javascriptEscape';
-import JavascriptRegexTester from '../components/developmentToolsComponent/javascriptRegexTester';
-import JavaScriptTester from '../components/developmentToolsComponent/javascriptTester';
-import JavaScriptValidatorLinter from '../components/developmentToolsComponent/javascriptValidatorLinter';
-import JSONCompare from '../components/developmentToolsComponent/jsonCompare';
-import JsonToTypeScript from '../components/developmentToolsComponent/jsonToTypeScript';
-import JsonToXmlConverter from '../components/developmentToolsComponent/jsonToXmlConverter';
-import JsonToCsvConverter from '../components/developmentToolsComponent/jsonToCsvConverter'
-import JsonToYamlConverter from '../components/developmentToolsComponent/jsonToYamlConverter';
-import JwtDecoder from '../components/developmentToolsComponent/jwtDecoder';
-import KmToMilesConverter from '../components/developmentToolsComponent/kmToMilesConverter';
-import MarkdownFormatter from '../components/developmentToolsComponent/markdownFormatter';
-import MilesToKmConverter from '../components/developmentToolsComponent/milesToKmConverter';
-import MorseCodeTranslator from '../components/developmentToolsComponent/morseCodeTranslator';
-import NumbersToWordsConverter from '../components/developmentToolsComponent/numbersToWordsConverter';
-import OctalToBinaryConverter from '../components/developmentToolsComponent/octalToBinaryConverter';
-import OctalToDecimalConverter from '../components/developmentToolsComponent/octalToDecimalConverter';
-import PHPFormatter from '../components/developmentToolsComponent/phpFormatter';
-import PlaceholderImageGenerator from '../components/developmentToolsComponent/placeholderImageGenerator';
-import PxToRemConverter from '../components/developmentToolsComponent/pxToRemConverter';
-import PythonFormatter from '../components/developmentToolsComponent/pythonFormatter';
-import QRCodeGenerator from '../components/developmentToolsComponent/qrCodeGenerator';
-import RandomAddressGenerator from '../components/developmentToolsComponent/randomAddressGenerator';
-import RandomCharacterGenerator from '../components/developmentToolsComponent/randomCharacterGenerator';
-import RandomCSVGenerator from '../components/developmentToolsComponent/randomCSVGenerator';
-import RandomGUIDGenerator from '../components/developmentToolsComponent/randomGUIDGenerator';
-import RandomIPGenerator from '../components/developmentToolsComponent/randomIPGenerator';
-import RandomTextFromRegEX from '../components/developmentToolsComponent/randomTextFromRegEX';
-import RandomXMLGenerator from '../components/developmentToolsComponent/randomXMLGenerator';
-import RemToPxConverter from '../components/developmentToolsComponent/remToPxConverter';
-import RgbToCmykConverter from '../components/developmentToolsComponent/rgbToCmykConverter';
-import RgbToHexConverter from '../components/developmentToolsComponent/rgbToHexConverter';
-import Rot13EncoderDecoderComponent from '../components/developmentToolsComponent/rot13EncoderDecoderComponent';
-import RotateImageTool from '../components/developmentToolsComponent/rotateImageTool';
-import RotationCalculatorComponent from '../components/developmentToolsComponent/rotationCalculatorComponent';
-import ScssToCssConverter from '../components/developmentToolsComponent/scssToCssConverter';
-import ShuffleLetters from '../components/developmentToolsComponent/shuffleLetters';
-import ShuffleTextLines from '../components/developmentToolsComponent/shuffleTextLines';
-import SortingList from '../components/developmentToolsComponent/sortingList';
-import SqlFormatterAndBeautifier from '../components/developmentToolsComponent/sqlFormatterAndBeautifier';
-import SqlMinify from '../components/developmentToolsComponent/sqlMinify';
-import SqlToCsvConverter from '../components/developmentToolsComponent/sqlToCsvConverter';
-import SqlToJson from '../components/developmentToolsComponent/sqlToJson';
-import StringDiffrenceChecker from '../components/developmentToolsComponent/stringDiffrenceChecker';
-import StripHTML from '../components/developmentToolsComponent/stripHTML';
-import TextCompare from '../components/developmentToolsComponent/textCompare';
-import TextRepeater from '../components/developmentToolsComponent/textRepeater';
-import TextToCsv from '../components/developmentToolsComponent/textToCsv';
-import TextToHtmlEntitiesConvertor from '../components/developmentToolsComponent/textToHtmlEntitiesConvertor';
-import TypescriptFormatter from '../components/developmentToolsComponent/typescriptFormatter';
-import UnicodeToAsciiConverter from '../components/developmentToolsComponent/unicodeToAsciiConverter';
-import URLDecode from '../components/developmentToolsComponent/urlDecode';
-import URLEncode from '../components/developmentToolsComponent/urlEncode';
-import Utf8Decode from '../components/developmentToolsComponent/utf8Decode';
-import Utf8Encode from '../components/developmentToolsComponent/utf8Encode';
-import WhatIsMyBrowser from '../components/developmentToolsComponent/whatIsMyBrowser';
-import WhatIsMyISP from '../components/developmentToolsComponent/whatIsMyISP';
-import WhatIsMyLocalIPAddress from '../components/developmentToolsComponent/whatIsMyLocalIPAddress';
-import WhatOperatingSystemDoIHave from '../components/developmentToolsComponent/whatOperatingSystemDoIHave';
-import WhatsMyBrowserSize from '../components/developmentToolsComponent/whatsMyBrowserSize';
-import WhatVersionOfAndroidDoIHave from '../components/developmentToolsComponent/whatVersionOfAndroidDoIHave';
-import WhatVersionOfChromeDoIHave from '../components/developmentToolsComponent/whatVersionOfChromeDoIHave';
-import WhatVersionOfFirefoxDoIHave from '../components/developmentToolsComponent/whatVersionOfFirefoxDoIHave';
-import WhatVersionOfFlashDoIHave from '../components/developmentToolsComponent/whatVersionOfFlashDoIHave';
-import WhatVersionOfIOSDoIHave from '../components/developmentToolsComponent/whatVersionOfIOSDoIHave';
-import WhatVersionOfJavaDoIHave from '../components/developmentToolsComponent/whatVersionOfJavaDoIHave';
-import WhatVersionOfMacOSDoIHave from '../components/developmentToolsComponent/whatVersionOfMacOSDoIHave';
-import WhatVersionOfSafariDoIHave from '../components/developmentToolsComponent/whatVersionOfSafariDoIHave';
-import WhatVersionOfWindowsDoIHave from '../components/developmentToolsComponent/whatVersionOfWindowsDoIHave';
-import XmlCompare from '../components/developmentToolsComponent/xmlCompare';
-import XMLEscape from '../components/developmentToolsComponent/xmlEscape';
-import XmlMinify from '../components/developmentToolsComponent/xmlMinify';
-import XmlPrettify from '../components/developmentToolsComponent/xmlPrettify';
-import XmlToJsonConverter from '../components/developmentToolsComponent/xmlToJsonConverter';
-import XorCalculator from '../components/developmentToolsComponent/xorCalculator';
-import CurlToCodeConverter from '../components/developmentToolsComponent/curlToCodeConverter';
-import YAMLFormatterAndBeautifier from '../components/developmentToolsComponent/yamlFormatterAndBeautifier';
 
 export const WEB_URL = 'https://www.betterbugs.io';
 
@@ -1789,713 +1614,6 @@ export const PATHS = {
   CURL_TO_CODE_CONVERTER: '/curl-to-code-converter',
 };
 
-export const developmentToolsRoutes = [
-  {
-    path: PATHS.TEXT_UPPERCASE_CONVERTER,
-    component: <UpperCaseConverterComponent />,
-  },
-  {
-    path: PATHS.TEXT_LOWERCASE_CONVERTER,
-    component: <LowerCaseConverterComponent />,
-  },
-  { path: PATHS.WORD_COUNT_TOOL, component: <WordCounterComponent /> },
-  {
-    path: PATHS.CHARACTER_COUNT_TOOL,
-    component: <CharacterCounterComponent />,
-  },
-  { path: PATHS.LINE_COUNTER_TOOL, component: <LineCounterComponent /> },
-  {
-    path: PATHS.SENTENCE_COUNTER_TOOL,
-    component: <SentenceCounterComponent />,
-  },
-  {
-    path: PATHS.JAVASCRIPT_MINIFIER,
-    component: <JavascriptMinifierComponent />,
-  },
-  {
-    path: PATHS.JSON_MINIFIER,
-    component: <JsonMinifierComponent />,
-  },
-  {
-    path: PATHS.JSON_PRETTIFIER,
-    component: <JsonPrettifierComponent />,
-  },
-  {
-    path: PATHS.LOREM_IPSUM_GENERATOR,
-    component: <LoremIpsumGeneratorComponent />,
-  },
-  {
-    path: PATHS.HTML_TO_MARKDOWN,
-    component: <HtmlToMarkDownComponent />,
-  },
-  {
-    path: PATHS.MARKDOWN_TO_HTML,
-    component: <MarkDownToHtmlComponent />,
-  },
-  {
-    path: PATHS.JS_OBFUSCATOR,
-    component: <JsObfuscatorComponent />,
-  },
-  {
-    path: PATHS.CREDIT_CARD_GENERATOR,
-    component: <CreditCardGeneratorComponent />,
-  },
-  {
-    path: PATHS.CREDIT_CARD_VALIDATOR,
-    component: <CreditCardValidatorComponent />,
-  },
-  {
-    path: PATHS.RANDOM_JSON_DATA_GENERATOR,
-    component: <RandomJsonDataGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_DECIMAL_NUMBER_GENERATOR,
-    component: <RandomDecimalNumberGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_DATE_GENERATOR,
-    component: <RandomDateGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_CLOCK_TIME_GENERATOR,
-    component: <RandomClockTimeGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_COLOR_GENERATOR,
-    component: <RandomColorGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_PARAGRAPH_GENERATOR,
-    component: <RandomParagraphGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_STRING_GENERATOR,
-    component: <RandomStringGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_SENTENCE_GENERATOR,
-    component: <RandomSentanceGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_PASSWORD_GENERATOR,
-    component: <RandomPasswardGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_NUMBER_GENERATOR,
-    component: <RandomNumberGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_WORD_GENERATOR,
-    component: <RandomWordGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_USERNAME_GENERATOR,
-    component: <RandomUsernameGenerator />,
-  },
-  {
-    path: PATHS.SORT_NUMBER,
-    component: <SortNumbers />,
-  },
-  {
-    path: PATHS.SORT_WORD,
-    component: <SortWords />,
-  },
-  {
-    path: PATHS.PHONE_NUMBER_EXTRACTOR,
-    component: <PhoneNumberExtractor />,
-  },
-  {
-    path: PATHS.REVERSE_TEXT_GENERATOR,
-    component: <ReverseTextGenerator />,
-  },
-  {
-    path: PATHS.WORD_TO_NUMBER,
-    component: <WordsToNumbers />,
-  },
-  {
-    path: PATHS.REMOVE_SPACES,
-    component: <RemoveSpaces />,
-  },
-  {
-    path: PATHS.TEXT_TO_ONE_LINE,
-    component: <TextToOneLine />,
-  },
-  {
-    path: PATHS.CSV_TO_TEXT_CONVERTER,
-    component: <CsvToTextConverter />,
-  },
-  {
-    path: PATHS.ROUNDING_CALCULATOR,
-    component: <RoundingCalculator />,
-  },
-  {
-    path: PATHS.TXT_TO_CSV_CONVERTER,
-    component: <TxtToCsvConverter />,
-  },
-  {
-    path: PATHS.JSON_TO_TEXT,
-    component: <JsonToTxt />,
-  },
-  {
-    path: PATHS.HTML_VALIDATOR,
-    component: <HTMLValidator />,
-  },
-  {
-    path: PATHS.JSON_VALIDATOR,
-    component: <JsonValidator />,
-  },
-  {
-    path: PATHS.CODE_COMPARE_TOOL,
-    component: <CodeCompareTool />,
-  },
-  {
-    path: PATHS.WHAT_IS_MY_USER_AGENT,
-    component: <WhatIsMyUserAgent />,
-  },
-
-  {
-    path: PATHS.ROTATION_CALCULATOR,
-    component: <RotationCalculatorComponent />,
-  },
-  {
-    path: PATHS.ROT13_ENCODER_DECODER,
-    component: <Rot13EncoderDecoderComponent />,
-  },
-  {
-    path: PATHS.CMYK_TO_HEX,
-    component: <CmykToHexConverter />,
-  },
-  {
-    path: PATHS.HEX_TO_CMYK,
-    component: <HexToCmykConverter />,
-  },
-  {
-    path: PATHS.HEX_TO_PANTONE,
-    component: <HexToPantone />,
-  },
-  {
-    path: PATHS.RGB_TO_CMYK_CONVERTER,
-    component: <RgbToCmykConverter />,
-  },
-  {
-    path: PATHS.CMYK_TO_RGB_CONVERTER,
-    component: <CmykToRgbConverter />,
-  },
-  {
-    path: PATHS.CSS_TO_STYLUS,
-    component: <CssToStylus />,
-  },
-  {
-    path: PATHS.UNICODE_TO_ASCII_CONVERTER,
-    component: <UnicodeToAsciiConverter />,
-  },
-  {
-    path: PATHS.ASCII_TO_UNICODE_CONVERTER,
-    component: <AsciiToUnicodeConverter />,
-  },
-  {
-    path: PATHS.DECIMAL_TO_ASCII_CONVERTER,
-    component: <DecimalToAsciiConverter />,
-  },
-  {
-    path: PATHS.ASCII_TO_DECIMAL_CONVERTER,
-    component: <AsciiToDecimalConverter />,
-  },
-  {
-    path: PATHS.BCRYPT_GENERATOR,
-    component: <BcryptGenerator />,
-  },
-  {
-    path: PATHS.HEX_TO_ASCII_CONVERTER,
-    component: <HexToAscii />,
-  },
-  {
-    path: PATHS.BASE64_DECODER,
-    component: <Base64Decoder />,
-  },
-  {
-    path: PATHS.BASE64_ENCODER,
-    component: <Base64Encoder />,
-  },
-  {
-    path: PATHS.HOURS_TO_SECONDS,
-    component: <HoursToSecounds />,
-  },
-  {
-    path: PATHS.PX_TO_REM_CONVERTER,
-    component: <PxToRemConverter />,
-  },
-  {
-    path: PATHS.REM_TO_PX_CONVERTER,
-    component: <RemToPxConverter />,
-  },
-  {
-    path: PATHS.RANDOM_CHARACTER_GENERATOR,
-    component: <RandomCharacterGenerator />,
-  },
-  {
-    path: PATHS.PLACEHOLDER_IMAGE_GENERATOR,
-    component: <PlaceholderImageGenerator />,
-  },
-  {
-    path: PATHS.COLOR_PICKER_TOOL,
-    component: <ColorPickerTool />,
-  },
-  {
-    path: PATHS.ROTATE_IMAGE_TOOL,
-    component: <RotateImageTool />,
-  },
-  {
-    path: PATHS.CSV_TO_EXCEL_FILE_CONVERTOR,
-    component: <CsvToExcelFileConvertor />,
-  },
-  {
-    path: PATHS.RANDOM_XML_GENERATOR,
-    component: <RandomXMLGenerator />,
-  },
-  {
-    path: PATHS.SQL_TO_CSV_CONVERTER,
-    component: <SqlToCsvConverter />,
-  },
-  {
-    path: PATHS.HTML_PRETTIFY,
-    component: <HtmlPrettify />,
-  },
-  {
-    path: PATHS.CSS_PRETTIFY,
-    component: <CssPrettify />,
-  },
-  {
-    path: PATHS.HTML_MINIFY,
-    component: <HtmlMinify />,
-  },
-  {
-    path: PATHS.CSS_MINIFY,
-    component: <CssMinify />,
-  },
-  {
-    path: PATHS.XML_MINIFY,
-    component: <XmlMinify />,
-  },
-  {
-    path: PATHS.XML_PRETTIFY,
-    component: <XmlPrettify />,
-  },
-  {
-    path: PATHS.SQL_MINIFY,
-    component: <SqlMinify />,
-  },
-  {
-    path: PATHS.HEX_TO_RGB_CONVERTER,
-    component: <HexToRGBConverter />,
-  },
-  {
-    path: PATHS.RGB_TO_HEX_CONVERTER,
-    component: <RgbToHexConverter />,
-  },
-  {
-    path: PATHS.GREY_CODE_TO_DECIMAL,
-    component: <GreyCodeToDecimal />,
-  },
-  {
-    path: PATHS.DECIMAL_TO_GREY_CODE,
-    component: <DecimalToGrayCode />,
-  },
-  {
-    path: PATHS.YAML_FORMATTER_AND_BEAUTIFIER,
-    component: <YAMLFormatterAndBeautifier />,
-  },
-  {
-    path: PATHS.SQL_FORMATTER_AND_BEAUTIFIER,
-    component: <SqlFormatterAndBeautifier />,
-  },
-  {
-    path: PATHS.WHAT_IS_MY_BROWSER,
-    component: <WhatIsMyBrowser />,
-  },
-  {
-    path: PATHS.WHAT_VERSION_OF_WINDOWS_DO_I_HAVE,
-    component: <WhatVersionOfWindowsDoIHave />,
-  },
-  {
-    path: PATHS.WHAT_OPERATING_SYSTEM_DO_I_HAVE,
-    component: <WhatOperatingSystemDoIHave />,
-  },
-  {
-    path: PATHS.WHAT_VERSION_OF_CHROME_DO_I_HAVE,
-    component: <WhatVersionOfChromeDoIHave />,
-  },
-
-  {
-    path: PATHS.JSON_TO_TYPESCRIPT,
-    component: <JsonToTypeScript />,
-  },
-  {
-    path: PATHS.RANDOM_CSV_GENERATOR,
-    component: <RandomCSVGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_GUID_GENERATOR,
-    component: <RandomGUIDGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_TEXT_FROM_REGEX,
-    component: <RandomTextFromRegEX />,
-  },
-  {
-    path: PATHS.QR_CODE_GENERATOR,
-    component: <QRCodeGenerator />,
-  },
-  {
-    path: PATHS.RANDOM_ADDRESS_GENERATOR,
-    component: <RandomAddressGenerator />,
-  },
-  {
-    path: PATHS.HTML_CODE_GENERATOR,
-    component: <HtmlCodeGenerator />,
-  },
-  {
-    path: PATHS.HTML_VIEWER,
-    component: <HtmlViewer />,
-  },
-  {
-    path: PATHS.COLOR_INVERTOR,
-    component: <ColorInvertor />,
-  },
-
-  {
-    path: PATHS.STRING_DIFFERENCE_CHECKER,
-    component: <StringDiffrenceChecker />,
-  },
-  {
-    path: PATHS.TEXT_REPEATER,
-    component: <TextRepeater />,
-  },
-  {
-    path: PATHS.SORTING_LIST,
-    component: <SortingList />,
-  },
-  {
-    path: PATHS.SHUFFLE_LETTERS,
-    component: <ShuffleLetters />,
-  },
-  {
-    path: PATHS.SHUFFLE_TEXT_LINES,
-    component: <ShuffleTextLines />,
-  },
-
-  {
-    path: PATHS.RANDOM_IP_GENERATOR,
-    component: <RandomIPGenerator />,
-  },
-  {
-    path: PATHS.JSON_COMPARE,
-    component: <JSONCompare />,
-  },
-  {
-    path: PATHS.TEXT_COMPARE,
-    component: <TextCompare />,
-  },
-  {
-    path: PATHS.URL_DECODE,
-    component: <URLDecode />,
-  },
-  {
-    path: PATHS.URL_ENCODE,
-    component: <URLEncode />,
-  },
-  {
-    path: PATHS.TEXT_TO_HTML_ENTITIES_CONVERTOR,
-    component: <TextToHtmlEntitiesConvertor />,
-  },
-  {
-    path: PATHS.HTML_ENTITIES_TO_TEXT_CONVERTER,
-    component: <HtmlEntitiesToTextConverter />,
-  },
-  {
-    path: PATHS.CSV_TO_JSON,
-    component: <CSVToJSON />,
-  },
-  {
-    path: PATHS.CSS_TO_SCSS,
-    component: <CSSToSCSSConverter />,
-  },
-  {
-    path: PATHS.SCSS_TO_CSS,
-    component: <ScssToCssConverter />,
-  },
-
-  {
-    path: PATHS.MARKDOWN_FORMATTER,
-    component: <MarkdownFormatter />,
-  },
-  {
-    path: PATHS.TYPE_SCRIPT_FORMATTER,
-    component: <TypescriptFormatter />,
-  },
-
-  {
-    path: PATHS.TEXT_TO_CSV,
-    component: <TextToCsv />,
-  },
-  {
-    path: PATHS.INTERNET_SPEED_TEST,
-    component: <InternetSpeedTest />,
-  },
-  {
-    path: PATHS.PHP_FORMATTER,
-    component: <PHPFormatter />,
-  },
-  {
-    path: PATHS.PYTHON_FORMATTER,
-    component: <PythonFormatter />,
-  },
-  {
-    path: PATHS.XML_COMPARE,
-    component: <XmlCompare />,
-  },
-  {
-    path: PATHS.IDN_ENCODE,
-    component: <IdnEncode />,
-  },
-  {
-    path: PATHS.IDN_DECODE,
-    component: <IdnDecode />,
-  },
-  {
-    path: PATHS.JSON_TO_XML_CONVERTER,
-    component: <JsonToXmlConverter />,
-  },
-  {
-    path: PATHS.JSON_TO_YAML_CONVERTER,
-    component: <JsonToYamlConverter />,
-  },
-   {
-    path: PATHS.JSON_TO_CSV_CONVERTOR,
-    component: <JsonToCsvConverter />,
-  },
-  {
-    path: PATHS.UTF8_DECODE,
-    component: <Utf8Decode />,
-  },
-  {
-    path: PATHS.UTF8_ENCODE,
-    component: <Utf8Encode />,
-  },
-  {
-    path: PATHS.XOR_CALCULATOR,
-    component: <XorCalculator />,
-  },
-  {
-    path: PATHS.BINARY_TO_DECIMAL_CONVERTER,
-    component: <BinaryToDecimalConverter />,
-  },
-  {
-    path: PATHS.DECIMAL_TO_BINARY_CONVERTER,
-    component: <DecimalToBinaryConverter />,
-  },
-  {
-    path: PATHS.OCTAL_TO_DECIMAL_CONVERTER,
-    component: <OctalToDecimalConverter />,
-  },
-  {
-    path: PATHS.DECIMAL_TO_OCTAL_CONVERTER,
-    component: <DecimalToOctalConverter />,
-  },
-  {
-    path: PATHS.DECIMAL_TO_HEX,
-    component: <DecimalToHexConverter />,
-  },
-  {
-    path: PATHS.HEX_TO_BINARY,
-    component: <HexToBinaryConverter />,
-  },
-  {
-    path: PATHS.OCTAL_TO_BINARY,
-    component: <OctalToBinaryConverter />,
-  },
-  {
-    path: PATHS.MILES_TO_KILOMETERS,
-    component: <MilesToKmConverter />,
-  },
-  {
-    path: PATHS.KILOMETERS_TO_MILES,
-    component: <KmToMilesConverter />,
-  },
-  {
-    path: PATHS.JWT_DECODER,
-    component: <JwtDecoder />,
-  },
-  {
-    path: PATHS.IP_TO_HEX,
-    component: <IpToHexConverter />,
-  },
-  {
-    path: PATHS.WORDS_TO_NUMBERS,
-    component: <WordsToNumbers />,
-  },
-  {
-    path: PATHS.NUMBERS_TO_WORDS,
-    component: <NumbersToWordsConverter />,
-  },
-  {
-    path: PATHS.FABONACCI_CALCULATOR,
-    component: <FibonacciCalculator />,
-  },
-  {
-    path: PATHS.BITWISE_CALCULATOR,
-    component: <BitwiseCalculator />,
-  },
-  {
-    path: PATHS.GRAPHQL_FORMATTER,
-    component: <GraphQLFormatter />,
-  },
-  {
-    path: PATHS.CELCIUS_TO_FAHRENHEIT,
-    component: <CelsiusFahrenheitConverter />,
-  },
-  {
-    path: PATHS.BARCODE_GENERATOR,
-    component: <BarcodeGenerator />,
-  },
-  {
-    path: PATHS.FIND_AND_REPLACE_STRING,
-    component: <FindAndReplaceString />,
-  },
-  {
-    path: PATHS.API_KEY_GENERATOR,
-    component: <ApiKeyGenerator />,
-  },
-  {
-    path: PATHS.HTML_ESCAPE,
-    component: <HtmlEscape />,
-  },
-  {
-    path: PATHS.HTML_UNESCAPE,
-    component: <HtmlUnescape />,
-  },
-  {
-    path: PATHS.JAVASCRIPT_REGEX_TESTER,
-    component: <JavascriptRegexTester />,
-  },
-  {
-    path: PATHS.STRIP_HTML,
-    component: <StripHTML />,
-  },
-  {
-    path: PATHS.WHAT_IS_MY_LOCAL_IP_ADDRESS,
-    component: <WhatIsMyLocalIPAddress />,
-  },
-  {
-    path: PATHS.JAVASCRIPT_TESTER,
-    component: <JavaScriptTester />,
-  },
-  {
-    path: PATHS.WHAT_VERSION_OF_JAVA,
-    component: <WhatVersionOfJavaDoIHave />,
-  },
-  {
-    path: PATHS.WHAT_VERSION_OF_MACOS,
-    component: <WhatVersionOfMacOSDoIHave />,
-  },
-  {
-    path: PATHS.WHAT_VERSION_OF_FIREFOX,
-    component: <WhatVersionOfFirefoxDoIHave />,
-  },
-  {
-    path: PATHS.WHAT_VERSION_OF_IOS,
-    component: <WhatVersionOfIOSDoIHave />,
-  },
-  {
-    path: PATHS.WHATS_MY_BROWSER_SIZE,
-    component: <WhatsMyBrowserSize />,
-  },
-  {
-    path: PATHS.WHAT_VERSION_OF_SAFARI,
-    component: <WhatVersionOfSafariDoIHave />,
-  },
-  {
-    path: PATHS.WHAT_VERSION_OF_ANDROID,
-    component: <WhatVersionOfAndroidDoIHave />,
-  },
-  {
-    path: PATHS.WHAT_VERSION_OF_FLASH,
-    component: <WhatVersionOfFlashDoIHave />,
-  },
-  {
-    path: PATHS.WHAT_IS_MY_ISP,
-    component: <WhatIsMyISP />,
-  },
-  {
-    path: PATHS.AM_I_USING_TOR,
-    component: <AmIUsingTor />,
-  },
-  {
-    path: PATHS.HTML_TESTER,
-    component: <HtmlTester />,
-  },
-  {
-    path: PATHS.EXCEL_COMPARE,
-    component: <ExcelCompare />,
-  },
-  {
-    path: PATHS.JAVASCRIPT_ESCAPE,
-    component: <JavaScriptEscape />,
-  },
-  {
-    path: PATHS.JAVASCRIPT_VALIDATOR_LINTER,
-    component: <JavaScriptValidatorLinter />,
-  },
-  {
-    path: PATHS.XML_ESCAPE,
-    component: <XMLEscape />,
-  },
-  {
-    path: PATHS.CSS_VALIDATOR,
-    component: <CssValidator />,
-  },
-  {
-    path: PATHS.CSS_TO_SASS,
-    component: <CssToSass />,
-  },
-  {
-    path: PATHS.CSS_TO_LESS,
-    component: <CssToLess />,
-  },
-  {
-    path: PATHS.CRONTAB_GENERATOR,
-    component: <CrontabGenerator />,
-  },
-  {
-    path: PATHS.MORSE_CODE_TRANSLATOR,
-    component: <MorseCodeTranslator />,
-  },
-  {
-    path: PATHS.XML_TO_JSON_CONVERTER,
-    component: <XmlToJsonConverter />,
-  },
-  {
-    path: PATHS.BCD_TO_DECIMAL_CONVERTER,
-    component: <BcdToDecimalConverter />,
-  },
-  {
-    path: PATHS.HTML_TO_BBCODE,
-    component: <HtmlToBBCode />,
-  },
-  {
-    path: PATHS.SQL_TO_JSON,
-    component: <SqlToJson />,
-  },
-  {
-    path: PATHS.HTML_TO_JADE,
-    component: <HtmlToJade />,
-  },
-  {
-    path: PATHS.CURL_TO_CODE_CONVERTER,
-    component: <CurlToCodeConverter />,
-  },
-];
-
 // lorem ipsum text
 export const lorem =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
diff --git a/package-lock.json b/package-lock.json
index 5c45c8f..5fdd0b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "animejs": "3.2.2",
         "antd": "5.16.2",
         "bcryptjs": "^2.4.3",
+        "curlconverter": "^4.12.0",
         "framer-motion": "11.2.6",
         "gleap": "^15.1.8",
         "javascript-obfuscator": "4.1.1",
@@ -183,6 +184,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -2485,6 +2487,7 @@
       "integrity": "sha512-/g2d4sW9nUDJOMz3mabVQvOGhVa4e/BN/Um7yca9Bb2XTzPPnfTWHWQg+IsEYO7M3Vx+EXvaM/I2pJWIMun1bg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@octokit/auth-token": "^4.0.0",
         "@octokit/graphql": "^7.1.0",
@@ -3681,7 +3684,6 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
       "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -3692,7 +3694,6 @@
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -3702,8 +3703,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/glob": {
       "version": "7.2.0",
@@ -3790,6 +3790,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.78.tgz",
       "integrity": "sha512-qOwdPnnitQY4xKlKayt42q5W5UQrSHjgoXNVEtxeqdITJ99k4VXJOP3vt8Rkm9HmgJpH50UNU+rlqfkfWOqp0A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -3978,7 +3979,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
       "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.13.2",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@@ -3988,29 +3988,25 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
       "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
       "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
       "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
       "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.13.2",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -4021,15 +4017,13 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
       "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
       "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -4042,7 +4036,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
       "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -4052,7 +4045,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
       "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -4061,15 +4053,13 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
       "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
       "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -4086,7 +4076,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
       "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@@ -4100,7 +4089,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
       "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -4113,7 +4101,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
       "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -4128,7 +4115,6 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
       "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@xtuc/long": "4.2.2"
@@ -4144,21 +4130,20 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4171,7 +4156,6 @@
       "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
       "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       },
@@ -4218,6 +4202,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -4911,6 +4896,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -5123,7 +5109,6 @@
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -5695,6 +5680,23 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/curlconverter": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/curlconverter/-/curlconverter-4.12.0.tgz",
+      "integrity": "sha512-NcwPKJgu9DkCH4gQsnjnXuUtPrhLhoNwvIYTTS5rRrsCC/X2flUswtgmeCyV9ePGszXzFReXk5y/CdBxrsAQ8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "jsesc": "^3.0.2",
+        "lossless-json": "^4.0.2",
+        "tree-sitter": "^0.21.1",
+        "tree-sitter-bash": "^0.23.1",
+        "web-tree-sitter": "^0.24.3",
+        "yamljs": "^0.3.0"
+      },
+      "bin": {
+        "curlconverter": "dist/src/cli.js"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5757,7 +5759,8 @@
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
       "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -5985,7 +5988,6 @@
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
       "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
       "license": "(MPL-2.0 OR Apache-2.0)",
-      "peer": true,
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
       }
@@ -6387,8 +6389,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
       "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/es-object-atoms": {
       "version": "1.0.0",
@@ -6478,6 +6479,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -6637,6 +6639,7 @@
       "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.7",
         "array.prototype.findlastindex": "^1.2.3",
@@ -6929,7 +6932,6 @@
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -7551,8 +7553,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "license": "BSD-2-Clause",
-      "peer": true
+      "license": "BSD-2-Clause"
     },
     "node_modules/glob/node_modules/brace-expansion": {
       "version": "2.0.1",
@@ -9062,7 +9063,6 @@
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
       "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.11.5"
       },
@@ -9180,6 +9180,12 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lossless-json": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lossless-json/-/lossless-json-4.3.0.tgz",
+      "integrity": "sha512-ToxOC+SsduRmdSuoLZLYAr5zy1Qu7l5XhmPWM3zefCZ5IcrzW/h108qbJUKfOlDlhvhjUK84+8PSVX0kxnit0g==",
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -9258,6 +9264,7 @@
       "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.6.tgz",
       "integrity": "sha512-Y07CUOE+HQXbVDCGl3LXggqJDbXDP2pArc2C1N1RRMN0ONiShoSsIInMd5Gsxupe7fKLpgimTV+HOJ9r7bA+pg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
@@ -9404,7 +9411,6 @@
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -9414,7 +9420,6 @@
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -9490,6 +9495,7 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
       "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -9511,7 +9517,6 @@
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
       "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "dompurify": "3.2.7",
         "marked": "14.0.0"
@@ -9522,7 +9527,6 @@
       "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
       "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
@@ -9701,6 +9705,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-8.6.0.tgz",
+      "integrity": "sha512-gBVjCaqDlRUk0EwoPNKzIr9KkS9041G/q31IBShPs1Xz6UTA+EXdZADbzqAJQrpDRq71CIMnOP5VMut3SL0z5Q==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18 || ^20 || >= 21"
+      }
+    },
     "node_modules/node-emoji": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-2.2.0.tgz",
@@ -9717,6 +9730,17 @@
         "node": ">=18"
       }
     },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
+      "license": "MIT",
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -12205,6 +12229,7 @@
       "dev": true,
       "inBundle": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13199,6 +13224,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
@@ -14049,6 +14075,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -14097,6 +14124,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -14561,6 +14589,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
       "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -14727,6 +14756,7 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz",
       "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -14781,6 +14811,7 @@
       "integrity": "sha512-qqJDBhbtHsjUEMsojWKGuL5lQFCJuPtiXKEIlFKyTzDDGTAE/oyvznaP8GeOr5PvcqBJ6LQz4JCENWPLeehSpA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@semantic-release/commit-analyzer": "^12.0.0",
         "@semantic-release/error": "^4.0.0",
@@ -14835,6 +14866,7 @@
       "integrity": "sha512-kIU8SLQkYWGp3pVKiYzA5OSaNF5EE03P/R8zEmmrG6XwOg5oBjXyQVVIauQ0dgau4zYhpZEhJrvIYt6oM+zZZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@octokit/auth-token": "^5.0.0",
         "@octokit/graphql": "^8.2.2",
@@ -15846,6 +15878,12 @@
         "node": ">= 10.x"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/state-local": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
@@ -16454,6 +16492,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -16634,6 +16673,37 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tree-sitter": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/tree-sitter/-/tree-sitter-0.21.1.tgz",
+      "integrity": "sha512-7dxoA6kYvtgWw80265MyqJlkRl4yawIjO7S5MigytjELkX43fV2WsAXzsNfO7sBpPPCF5Gp0+XzHk0DwLCq3xQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "node-addon-api": "^8.0.0",
+        "node-gyp-build": "^4.8.0"
+      }
+    },
+    "node_modules/tree-sitter-bash": {
+      "version": "0.23.3",
+      "resolved": "https://registry.npmjs.org/tree-sitter-bash/-/tree-sitter-bash-0.23.3.tgz",
+      "integrity": "sha512-36cg/GQ2YmIbeiBeqeuh4fBJ6i4kgVouDaqTxqih5ysPag+zHufyIaxMOFeM8CeplwAK/Luj1o5XHqgdAfoCZg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "node-addon-api": "^8.2.1",
+        "node-gyp-build": "^4.8.2"
+      },
+      "peerDependencies": {
+        "tree-sitter": "^0.21.1"
+      },
+      "peerDependenciesMeta": {
+        "tree-sitter": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -16800,6 +16870,7 @@
       "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -17053,7 +17124,6 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
       "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -17062,6 +17132,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/web-tree-sitter": {
+      "version": "0.24.7",
+      "resolved": "https://registry.npmjs.org/web-tree-sitter/-/web-tree-sitter-0.24.7.tgz",
+      "integrity": "sha512-CdC/TqVFbXqR+C51v38hv6wOPatKEUGxa39scAeFSm98wIhZxAYonhRQPSMmfZ2w7JDI0zQDdzdmgtNk06/krQ==",
+      "license": "MIT"
+    },
     "node_modules/web-worker": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
@@ -17129,7 +17205,6 @@
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.3.tgz",
       "integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -17156,7 +17231,6 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -17169,7 +17243,6 @@
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -17183,7 +17256,6 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -17192,15 +17264,13 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/webpack/node_modules/schema-utils": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
       "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -17428,6 +17498,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.14.0.tgz",
       "integrity": "sha512-oYs1UUtO97ZO2lJ4bwnWeQW8/zvOIQLGKcvPTsWmvc2SYgBb+upuNS5NxoLaMU4h8Ju3Nbj6Cq8mD2LQoqVKFA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "json-schema-traverse": "^1.0.0",
@@ -17780,6 +17851,50 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yamljs": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/yamljs/-/yamljs-0.3.0.tgz",
+      "integrity": "sha512-C/FsVVhht4iPQYXOInoxUM/1ELSf9EsgKH34FofQOp6hwCPrW4vG4w5++TED3xRUo8gD7l0P1J1dLlDYzODsTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "glob": "^7.0.5"
+      },
+      "bin": {
+        "json2yaml": "bin/json2yaml",
+        "yaml2json": "bin/yaml2json"
+      }
+    },
+    "node_modules/yamljs/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/yamljs/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/package.json b/package.json
index 3b92088..d1ad632 100644
--- a/package.json
+++ b/package.json
@@ -43,8 +43,8 @@
     "@types/turndown": "5.0.5",
     "animejs": "3.2.2",
     "antd": "5.16.2",
-    "curlconverter": "^4.12.0",
     "bcryptjs": "^2.4.3",
+    "curlconverter": "^4.12.0",
     "framer-motion": "11.2.6",
     "gleap": "^15.1.8",
     "javascript-obfuscator": "4.1.1",

From 58f16e1d8487cdd2064164f07fa00b5d6123a65b Mon Sep 17 00:00:00 2001
From: Shalini <jhashalini363@gmail.com>
Date: Sun, 1 Mar 2026 13:21:30 +0530
Subject: [PATCH 2/2] refactor: replace static slug routing with file-based
 tools routing

---
 app/[slug]/page.tsx               | 1081 -----------------------------
 app/components/ToolLayout.tsx     |   15 +
 app/tools/base64-encoder/page.tsx |   10 +
 3 files changed, 25 insertions(+), 1081 deletions(-)
 delete mode 100644 app/[slug]/page.tsx
 create mode 100644 app/components/ToolLayout.tsx
 create mode 100644 app/tools/base64-encoder/page.tsx

diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
deleted file mode 100644
index 9ad9953..0000000
--- a/app/[slug]/page.tsx
+++ /dev/null
@@ -1,1081 +0,0 @@
-"use client";
-import React, { useEffect, useState } from "react";
-import { DEVELOPMENTTOOLS } from "@/app/libs/developmentToolsConstant";
-import Link from "next/link";
-import { Button } from "antd";
-import Image from "next/image";
-import StarGardientIcon from "@/app/components/theme/Icon/starGradientIcon";
-import {
-  Extension_URL,
-  integrationTools,
-} from "@/app/libs/constants";
-import PlayIcon from "@/app/components/theme/Icon/playIcon";
-import LogsGradientIcon from "@/app/components/theme/Icon/logsGradientIcon";
-import ShareGradientIcon from "@/app/components/theme/Icon/shareGradientIcon";
-import PowerCircleIcon from "@/app/components/theme/Icon/powerCircleIcon";
-import ComparisonsStyles from "../components/comparisonsComponent/comparisonsStyles.module.scss";
-import DevelopmentToolsStyles from "../developmentToolsStyles.module.scss";
-import { usePathname } from "next/navigation";
-import RecorderGradientIcon from "@/app/components/theme/Icon/recorderGradientIcon";
-import SEOComponent from "@/app/components/theme/SEOComponent/SEOComponent";
-import { detectBrowser } from "@/app/libs/helpers";
-import EdgeIcon from "@/app/components/theme/Icon/edgeIcon";
-import dynamic from "next/dynamic";
-import notFound from "../not-found";
-
-const Page = ({ params: { slug } }: { params: { slug: string } }) => {
-  const [browser, setBrowser] = useState("chrome");
-
-  useEffect(() => {
-    setBrowser(detectBrowser());
-  }, []);
-  const toolsData = DEVELOPMENTTOOLS[slug];
-  if (!toolsData) {
-  notFound();
-}
-  const {
-    hero_section,
-    development_tools_list,
-    development_tools_about_details,
-    development_tools_what,
-    development_tools_user_agent_info,
-    development_tools_steps_guide,
-    development_tools_how_use,
-    development_tools_Comparison,
-    development_tool_example,
-    meta_data,
-  } = toolsData;
-  const pathname = usePathname();
-  // Convert slug (base64-encoder) -> base64Encoder
-  const toCamelCase = (slug: string) =>
-    slug.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
-
-  const componentName = toCamelCase(slug);
-
-  const ToolComponent = dynamic(() =>
-    import(`@/app/components/developmentToolsComponent/${componentName}`)
-      .then((mod) => mod.default)
-      .catch(() => {
-        notFound();
-      }),
-  );
-
-  // const currentTool = developmentToolsRoutes.find(
-  //   (tool: any) => tool.path === pathname
-  // );
-
-  return (
-    <>
-      <SEOComponent
-        title={meta_data?.meta_title}
-        description={meta_data?.meta_description}
-        ogTitle={meta_data?.og_title}
-        ogDescription={meta_data?.og_description}
-        ogImage={meta_data?.og_image}
-      />
-      <div className="md:max-w-[1170px] mx-auto">
-        <div className="px-3 md:px-auto mx-auto">
-          {/*Hero cta section */}
-          <section className="md:pt-0 pt-9">
-            <div className="bg-[#090B0B] text-white flex flex-col items-center justify-center pl-6 pr-4 mt-10 rounded-lg">
-              <div className="w-full flex md:flex-row flex-col md:items-center items-start md:justify-between justify-start gap-8 md:py-4 py-8 md:px-7">
-                {/* Left Section */}
-                <div className="text-left flex-1">
-                  <Image
-                    src="/images/bb-logo.svg"
-                    alt="BetterBugs Logo"
-                    className="mb-8"
-                    width={200}
-                    height={200}
-                  />
-                  <div className="relative">
-                    <h4 className="text-2xl font-extrabold mb-4">
-                      The essential <span className="text-primary">AI</span>{" "}
-                      companion every QA needs
-                    </h4>
-                    <span className="absolute top-[-17px] left-[38%]">
-                      <StarGardientIcon />
-                    </span>
-                  </div>
-
-                  <p className="text-white/90 text-[13px] my-6">
-                    Swiftly document and share bugs like never before
-                  </p>
-                  <div className="flex items-center gap-3 mt-6 mb-4">
-                    <Link target="_blank" href={Extension_URL}>
-                      <Button className="btn-primary flex items-center z-20 justify-center gap-3 rounded-full px-4">
-                        {browser === "edge" ? (
-                          <EdgeIcon className="w-7 h-7" />
-                        ) : (
-                          <Image
-                            src="/images/chrome.svg"
-                            width={30}
-                            height={20}
-                            alt="chrome-img"
-                            title="chrome"
-                          />
-                        )}
-                        {browser === "edge" ? "Add to Edge" : "Add to Chrome"}
-                        <span className="bg-black font-body text-sm font-normal py-2 px-3.5 text-white rounded-[30px]">
-                          FREE
-                        </span>
-                      </Button>
-                    </Link>
-                  </div>
-                  <p className="text-sm mt-2 text-white">
-                    Free Forever. No Credit Card Required.
-                  </p>
-                </div>
-
-                {/* Right Section */}
-                <div className="flex-1 flex flex-col gap-6 md:py-12 py-4 md:px-8 relative">
-                  {/* Features Section */}
-                  <div className="grid grid-cols-2 gap-6 relative">
-                    <div
-                      className={`flex flex-col p-4 rounded-lg items-start gap-3 md:min-h-[110px] ${ComparisonsStyles.ctaCardGridBg}`}
-                    >
-                      <StarGardientIcon />
-                      <p className="text-sm">
-                        Use <span className="font-bold text-white">AI</span> to
-                        reproduce and fix bugs
-                      </p>
-                    </div>
-                    <div
-                      className={`flex flex-col p-4 rounded-lg items-start gap-3 md:min-h-[110px] ${ComparisonsStyles.ctaCardGridBg}`}
-                    >
-                      <RecorderGradientIcon />
-                      <p className="text-sm">
-                        <span className="font-bold text-white">
-                          Screen Recording
-                        </span>{" "}
-                        with{" "}
-                        <span className="font-bold text-white">
-                          Rewind (Upto 2-min)
-                        </span>
-                      </p>
-                    </div>
-                    <div
-                      className={`flex flex-col p-4 rounded-lg items-start gap-3 md:min-h-[110px] ${ComparisonsStyles.ctaCardGridBg}`}
-                    >
-                      <LogsGradientIcon />
-                      <p className="text-sm">
-                        Capture{" "}
-                        <span className="font-bold text-white">
-                          {" "}
-                          backend logs
-                        </span>
-                        with every bug report
-                      </p>
-                    </div>
-                    <div
-                      className={`flex flex-col p-4 rounded-lg items-start gap-3 md:min-h-[110px] ${ComparisonsStyles.ctaCardGridBg}`}
-                    >
-                      <ShareGradientIcon />
-                      <p className="text-sm">
-                        Assign bugs and{" "}
-                        <span className="font-bold text-white">share</span> at
-                        single click
-                      </p>
-                    </div>
-                    <div className="absolute top-[40%] left-[43%]">
-                      <PowerCircleIcon />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </section>
-
-          <div className="md:pb-[70px] md:pt-[30px] py-[50px]">
-            {/* Heading section */}
-            {hero_section && (
-              <section>
-                <div className="flex flex-col justify-center items-center">
-                  <h1 className="md:text-[62px] text-[32px] font-black text-white text-center pb-4 md:leading-[70px] leading-[50px] md:pt-5">
-                    {hero_section?.title}
-                  </h1>
-                  <p className="text-lg font-normal text-white/70 md:mt-1 mt-[26px] md:w-[50%] text-center">
-                    {hero_section?.description
-                      ?.split("BetterBugs.io")
-                      .map((part: any, index: any, arr: any) => (
-                        <React.Fragment key={index}>
-                          {part}
-                          {index !== arr.length - 1 && (
-                            <a
-                              href="https://BetterBugs.io"
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="text-primary hover:underline"
-                            >
-                              BetterBugs.io
-                            </a>
-                          )}
-                        </React.Fragment>
-                      ))}
-                  </p>
-                </div>
-              </section>
-            )}
-
-            {/* Integrated Tool section */}
-            <ToolComponent />
-            {/* {currentTool ? currentTool?.component : null} */}
-
-            {/* Tool description section */}
-            <section className="mt-8">
-              <div className="md:flex justify-center">
-                {/* Tools Panel - 20% width, fixed */}
-                {development_tools_list?.length > 0 && (
-                  <div className="md:w-1/4 md:sticky left-0 md:top-8 top-2 h-full overflow-y-auto flex flex-col">
-                    <div className="bg-[#FFFFFF1A] p-4 rounded-xl">
-                      <div className="flex items-center mb-6">
-                        <h2 className="text-xl font-bold text-gray-800">
-                          Other Tools
-                        </h2>
-                      </div>
-                      {development_tools_list?.map((tool: any, index: any) => (
-                        <Link key={index} href={tool?.url}>
-                          <div
-                            className={`p-3 mb-2 cursor-pointer rounded-xl border-[1px] border-transparent hover:border-1 hover:border-primary bg-black text-white hover:text-primary`}
-                          >
-                            {tool?.tool}
-                          </div>
-                        </Link>
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                {/* Q&A Panel - 80% width, scrollable */}
-                <div className="md:w-4/5 md:ml-5 md:px-8 px-4 overflow-y-auto md:mt-0 mt-6">
-                  {/* about section */}
-                  <div>
-                    {development_tools_about_details?.about_title && (
-                      <h4 className="text-2xl font-semibold text-white mb-2">
-                        {development_tools_about_details?.about_title}
-                      </h4>
-                    )}
-                    {development_tools_about_details?.about_description?.map(
-                      (desc: any, index: number) => {
-                        // Check if this description item has a list
-                        if (desc?.list && Array.isArray(desc?.list)) {
-                          return (
-                            <ul
-                              className="pl-6 list-disc mt-3 text-white/70"
-                              key={`about_description_list_${index}`}
-                            >
-                              {desc?.list?.map(
-                                (listItem: any, listIndex: number) => (
-                                  <li
-                                    key={`list_item_${index}_${listIndex}`}
-                                    className="text-base font-semibold text-white"
-                                  >
-                                    {listItem?.title}
-                                    {listItem?.description && (
-                                      <span className="text-white/70 text-base font-normal">
-                                        {listItem?.description}
-                                      </span>
-                                    )}
-                                  </li>
-                                ),
-                              )}
-                            </ul>
-                          );
-                        }
-
-                        // Check if this description item has examples
-                        if (desc?.example && Array.isArray(desc?.example)) {
-                          return (
-                            <div
-                              key={`about_description_example_${index}`}
-                              className="mt-3"
-                            >
-                              {/* Render description if it exists */}
-                              {desc?.description && (
-                                <p className="text-base text-white/70 mb-4">
-                                  {desc.description}
-                                </p>
-                              )}
-                              {/* Render examples */}
-                              {desc.example.map(
-                                (exampleItem: any, exampleIndex: number) => {
-                                  const isExampleHeading =
-                                    exampleItem?.example_input?.startsWith(
-                                      "Example",
-                                    );
-                                  const isInputOrOutput =
-                                    exampleItem?.example_input === "Input" ||
-                                    exampleItem?.example_input === "Output";
-                                  const isStringOutput =
-                                    typeof exampleItem?.example_output ===
-                                    "string";
-                                  const isArrayOutput = Array.isArray(
-                                    exampleItem?.example_output,
-                                  );
-
-                                  return (
-                                    <div
-                                      key={`example_item_${index}_${exampleIndex}`}
-                                      className={exampleIndex > 0 ? "mt-3" : ""}
-                                    >
-                                      {isExampleHeading && (
-                                        <>
-                                          <p className="text-base font-semibold text-white mb-1">
-                                            {exampleItem.example_input}
-                                          </p>
-                                          {isStringOutput && (
-                                            <p className="text-base text-white/70 ml-0">
-                                              {exampleItem.example_output}
-                                            </p>
-                                          )}
-                                        </>
-                                      )}
-                                      {isInputOrOutput && (
-                                        <>
-                                          <p className="text-base font-semibold text-white mb-1">
-                                            {exampleItem.example_input}
-                                          </p>
-                                          {isArrayOutput && (
-                                            <div className="ml-0">
-                                              {exampleItem.example_output.map(
-                                                (
-                                                  outputItem: any,
-                                                  outputIndex: number,
-                                                ) => (
-                                                  <p
-                                                    key={`output_${index}_${exampleIndex}_${outputIndex}`}
-                                                    className="text-base text-white/70"
-                                                  >
-                                                    {outputItem?.value}
-                                                  </p>
-                                                ),
-                                              )}
-                                            </div>
-                                          )}
-                                        </>
-                                      )}
-                                    </div>
-                                  );
-                                },
-                              )}
-                            </div>
-                          );
-                        }
-
-                        // Handle regular description text
-                        const descriptions = desc?.description || "";
-                        const splitDescriptions = descriptions.split(/(".*?")/); // Split quoted and unquoted text
-
-                        return (
-                          <p
-                            className="text-base mt-3 text-white/70"
-                            key={`about_description_${index}`}
-                          >
-                            {splitDescriptions.map(
-                              (text: any, subIndex: any) => {
-                                const isQuoted =
-                                  text.startsWith("") && text.endsWith("");
-                                const containsBetterBugs =
-                                  text.includes("BetterBugs.io");
-
-                                if (containsBetterBugs) {
-                                  // Split the text around 'BetterBugs.io' to wrap it in a link
-                                  const parts = text.split("BetterBugs.io");
-                                  return (
-                                    <React.Fragment
-                                      key={`about_description_part_${index}_${subIndex}`}
-                                    >
-                                      {parts[0]}
-                                      <a
-                                        href="https://BetterBugs.io"
-                                        target="_blank"
-                                        className="text-primary hover:underline"
-                                      >
-                                        BetterBugs.io
-                                      </a>
-                                      {parts[1]}
-                                    </React.Fragment>
-                                  );
-                                }
-
-                                return (
-                                  <span
-                                    key={`about_description_part_${index}_${subIndex}`}
-                                    className={isQuoted ? "text-white" : ""}
-                                  >
-                                    {text}
-                                  </span>
-                                );
-                              },
-                            )}
-                          </p>
-                        );
-                      },
-                    )}
-
-                    {development_tools_about_details?.placeholder && (
-                      <ul className="pl-12 list-disc mt-2">
-                        {development_tools_about_details?.placeholder?.map(
-                          (placeholder: any, index: any) => (
-                            <li key={`placeholder_${index}`}>
-                              <span className="text-base text-white/70">
-                                {placeholder?.title}
-                              </span>
-                            </li>
-                          ),
-                        )}
-                      </ul>
-                    )}
-                  </div>
-
-                  {/* user agent info section */}
-                  {development_tools_user_agent_info && (
-                    <div className="mt-8">
-                      {development_tools_user_agent_info?.info_title && (
-                        <h4 className="text-2xl font-semibold text-white mb-2">
-                          {development_tools_user_agent_info?.info_title}
-                        </h4>
-                      )}
-                      {development_tools_user_agent_info?.intro_text && (
-                        <p className="text-white/90 text-base mt-2 mb-2">
-                          {development_tools_user_agent_info?.intro_text}
-                        </p>
-                      )}
-                      {development_tools_user_agent_info?.example_string && (
-                        <p className="text-white/70 text-sm whitespace-pre">
-                          {development_tools_user_agent_info?.example_string}
-                        </p>
-                      )}
-                      {development_tools_user_agent_info?.example_string_description && (
-                        <p className="text-white/90 text-sm whitespace-pre !mb-4">
-                          {
-                            development_tools_user_agent_info?.example_string_description
-                          }
-                        </p>
-                      )}
-                      {development_tools_user_agent_info?.info_items && (
-                        <div className="mt-4">
-                          <ul className="list-disc space-y-3 pl-6">
-                            {development_tools_user_agent_info?.info_items?.map(
-                              (item: any, index: number) => (
-                                <li
-                                  key={`user_agent_info_${index}`}
-                                  className="text-base"
-                                >
-                                  <span className="text-white font-semibold">
-                                    {item?.part}{" "}
-                                  </span>
-                                  <span className="text-white/70">
-                                    {item?.description}
-                                  </span>
-                                </li>
-                              ),
-                            )}
-                          </ul>
-                        </div>
-                      )}
-                    </div>
-                  )}
-
-                  {/* example section */}
-                  {development_tool_example && (
-                    <div className="mt-8">
-                      {development_tool_example?.example_title && (
-                        <h4 className="text-2xl font-semibold text-white mb-2">
-                          {development_tool_example?.example_title}
-                        </h4>
-                      )}
-                      {development_tool_example?.example_description && (
-                        <p className="text-white/70 text-base mt-2">
-                          {development_tool_example?.example_description}
-                        </p>
-                      )}
-
-                      {development_tool_example?.example_input && (
-                        <div className="mt-4">
-                          {development_tool_example?.example_input?.title && (
-                            <p className="text-white text-base font-medium mb-2">
-                              {development_tool_example?.example_input?.title}
-                            </p>
-                          )}
-                          {development_tool_example?.example_input
-                            ?.json_data && (
-                            <pre
-                              className={`${DevelopmentToolsStyles.modernScrollbar} bg-[#1a1a1a] border border-white/10 rounded-lg p-4 mt-2`}
-                            >
-                              <code className="text-white/90 text-sm whitespace-pre">
-                                {
-                                  development_tool_example?.example_input
-                                    ?.json_data
-                                }
-                              </code>
-                            </pre>
-                          )}
-                        </div>
-                      )}
-
-                      {development_tool_example?.example_outputs && (
-                        <div className="mt-6">
-                          {development_tool_example?.example_outputs?.intro && (
-                            <p className="text-white/70 text-base mb-4">
-                              {development_tool_example?.example_outputs?.intro}
-                            </p>
-                          )}
-                          {development_tool_example?.example_outputs?.outputs?.map(
-                            (output: any, index: number) => (
-                              <div
-                                key={`example_output_${index}`}
-                                className="mt-4"
-                              >
-                                {output?.mode && (
-                                  <p className="text-white text-base font-medium mb-2">
-                                    {output?.mode}
-                                  </p>
-                                )}
-                                {output?.title && (
-                                  <p className="text-white/70 text-base mb-2">
-                                    {output?.title}
-                                  </p>
-                                )}
-                                {output?.content && (
-                                  <pre
-                                    className={`${DevelopmentToolsStyles.modernScrollbar} bg-[#1a1a1a] border border-white/10 rounded-lg p-4 mt-2`}
-                                  >
-                                    <code className="text-white/90 text-sm whitespace-pre">
-                                      {output?.content}
-                                    </code>
-                                  </pre>
-                                )}
-                                {output?.note && (
-                                  <p className="text-white/60 text-sm mt-2 italic">
-                                    {output?.note}
-                                  </p>
-                                )}
-                              </div>
-                            ),
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  )}
-
-                  {/* what section */}
-                  {development_tools_what && (
-                    <div className="mt-8">
-                      {development_tools_what?.about_title && (
-                        <h4 className="text-2xl font-semibold text-white mb-2">
-                          {development_tools_what?.about_title}
-                        </h4>
-                      )}
-                      {development_tools_what?.what_description?.map(
-                        (desc: any, index: number) => {
-                          const descriptions = desc?.descriptions;
-                          const splitDescriptions =
-                            descriptions.split(/(".*?")/); // Split quoted and unquoted text
-
-                          return (
-                            <p
-                              className="text-white/70 text-base mt-2"
-                              key={`what_description_${index}`}
-                            >
-                              {splitDescriptions.map(
-                                (text: any, subIndex: any) => {
-                                  const isQuoted =
-                                    text.startsWith("") && text.endsWith("");
-
-                                  return (
-                                    <span
-                                      key={`what_description_part_${index}_${subIndex}`}
-                                      className={
-                                        isQuoted
-                                          ? "text-white"
-                                          : "text-white/70"
-                                      }
-                                    >
-                                      {text}
-                                    </span>
-                                  );
-                                },
-                              )}
-                            </p>
-                          );
-                        },
-                      )}
-                    </div>
-                  )}
-
-                  {/* step-by-step guide */}
-                  <div className="my-10">
-                    {development_tools_steps_guide?.guide_title && (
-                      <>
-                        <h5 className="text-2xl font-semibold text-white mb-2">
-                          {development_tools_steps_guide?.guide_title}
-                        </h5>
-                        <p className="text-white/70 text-base mt-4">
-                          {development_tools_steps_guide?.guide_description
-                            ?.split(/(".*?")/g)
-                            ?.map((parts: any, i: any) =>
-                              parts?.startsWith("") && parts?.endsWith("") ? (
-                                <span key={i} className="font-bold text-white">
-                                  {parts}
-                                </span>
-                              ) : (
-                                <span key={i}>{parts}</span>
-                              ),
-                            )}
-                        </p>
-                      </>
-                    )}
-                    {development_tools_steps_guide?.steps?.length > 0 && (
-                      <div className="mt-5">
-                        {development_tools_steps_guide?.steps?.map(
-                          (guide: any, index: any) => {
-                            const description = guide?.step_description;
-                            const description2 = guide?.step_description2;
-
-                            // Split quoted and unquoted text
-                            const parts = description?.split(/(".*?")/);
-                            const desParts = description2?.split(/(".*?")/);
-
-                            return (
-                              <div key={index} className="mt-3">
-                                {/* Primary Flex Layout for Step Key, Title, and Description */}
-                                <div className="flex items-start flex-wrap">
-                                  <span
-                                    className={`text-white/90 font-semibold text-base${
-                                      guide?.step_key?.includes("Step")
-                                        ? " pr-1"
-                                        : ""
-                                    }`}
-                                  >
-                                    {guide?.step_key}
-                                  </span>
-                                  <span className="text-white/90 font-semibold text-base">
-                                    {guide?.step_title}
-                                  </span>
-                                  {guide?.steps_points?.length > 0 && (
-                                    <ul className="pl-12 list-disc">
-                                      {guide?.steps_points?.map(
-                                        (p: any, index: number) => (
-                                          <li key={index}>
-                                            {p?.steps_points_title && (
-                                              <span className="text-white/90 font-semibold text-base">
-                                                {p?.steps_points_title}
-                                              </span>
-                                            )}
-                                            {p?.steps_points_description && (
-                                              <p className="text-base text-white/70">
-                                                {p?.steps_points_description
-                                                  ?.split(/(".*?")/)
-                                                  .map(
-                                                    (
-                                                      part: string,
-                                                      i: number,
-                                                    ) =>
-                                                      part.startsWith("") &&
-                                                      part.endsWith("") ? (
-                                                        <span
-                                                          key={i}
-                                                          className="font-semibold text-white/90"
-                                                        >
-                                                          {part}
-                                                        </span>
-                                                      ) : (
-                                                        <React.Fragment key={i}>
-                                                          {part
-                                                            .split(
-                                                              /(\/\/.*?\/\/)/,
-                                                            )
-                                                            .map(
-                                                              (
-                                                                sub: string,
-                                                                j: number,
-                                                              ) =>
-                                                                sub.startsWith(
-                                                                  "//",
-                                                                ) &&
-                                                                sub.endsWith(
-                                                                  "//",
-                                                                ) ? (
-                                                                  <span
-                                                                    key={`${i}-${j}`}
-                                                                    className="font-semibold text-white/90"
-                                                                  >
-                                                                    {sub.slice(
-                                                                      2,
-                                                                      -2,
-                                                                    )}
-                                                                  </span>
-                                                                ) : (
-                                                                  sub
-                                                                ),
-                                                            )}
-                                                        </React.Fragment>
-                                                      ),
-                                                  )}
-                                              </p>
-                                            )}
-                                            {Array.isArray(p?.steps_subpoint) &&
-                                              p?.steps_subpoint?.length > 0 && (
-                                                <ul className="pl-12 list-disc">
-                                                  {p?.steps_subpoint?.map(
-                                                    (
-                                                      sub_p: any,
-                                                      subIndex: number,
-                                                    ) => (
-                                                      <li key={subIndex}>
-                                                        {sub_p?.title && (
-                                                          <span className="text-white/90 font-semibold text-base">
-                                                            {sub_p?.title}
-                                                          </span>
-                                                        )}
-                                                        {sub_p?.description && (
-                                                          <span className="text-base text-white/70">
-                                                            {sub_p?.description
-                                                              ?.split(/(".*?")/)
-                                                              .map(
-                                                                (
-                                                                  part: string,
-                                                                  i: number,
-                                                                ) =>
-                                                                  part.startsWith(
-                                                                    "",
-                                                                  ) &&
-                                                                  part.endsWith(
-                                                                    "",
-                                                                  ) ? (
-                                                                    <span
-                                                                      key={i}
-                                                                      className="font-semibold text-white/90"
-                                                                    >
-                                                                      {part}
-                                                                    </span>
-                                                                  ) : (
-                                                                    <React.Fragment
-                                                                      key={i}
-                                                                    >
-                                                                      {part
-                                                                        .split(
-                                                                          /(\/\/.*?\/\/)/,
-                                                                        )
-                                                                        .map(
-                                                                          (
-                                                                            sub: string,
-                                                                            j: number,
-                                                                          ) =>
-                                                                            sub.startsWith(
-                                                                              "//",
-                                                                            ) &&
-                                                                            sub.endsWith(
-                                                                              "//",
-                                                                            ) ? (
-                                                                              <span
-                                                                                key={`${i}-${j}`}
-                                                                                className="font-semibold text-white/90"
-                                                                              >
-                                                                                {sub.slice(
-                                                                                  2,
-                                                                                  -2,
-                                                                                )}
-                                                                              </span>
-                                                                            ) : (
-                                                                              sub
-                                                                            ),
-                                                                        )}
-                                                                    </React.Fragment>
-                                                                  ),
-                                                              )}
-                                                          </span>
-                                                        )}
-                                                      </li>
-                                                    ),
-                                                  )}
-                                                </ul>
-                                              )}
-                                          </li>
-                                        ),
-                                      )}
-                                    </ul>
-                                  )}
-                                  <span className="text-base text-white/70">
-                                    {parts?.map((part: any, i: any) =>
-                                      part.startsWith("") &&
-                                      part.endsWith("") ? (
-                                        <>
-                                          <span
-                                            key={`description_${i}`}
-                                            className="text-white"
-                                          >
-                                            {part}
-                                          </span>
-                                        </>
-                                      ) : (
-                                        part
-                                      ),
-                                    )}
-                                  </span>
-                                </div>
-                                {/* Step Description2 on a New Line, Only If Present */}
-                                {description2 && desParts?.length > 0 && (
-                                  <div className="mt-2 text-base text-white/70">
-                                    {desParts?.map((part: any, i: any) =>
-                                      part.startsWith("") &&
-                                      part.endsWith("") ? (
-                                        <span
-                                          key={`description2_${i}`}
-                                          className="text-white"
-                                        >
-                                          {part}
-                                        </span>
-                                      ) : (
-                                        part
-                                      ),
-                                    )}
-                                  </div>
-                                )}
-                              </div>
-                            );
-                          },
-                        )}
-                      </div>
-                    )}
-                  </div>
-
-                  {/* how to use */}
-                  <div className="my-10">
-                    {development_tools_how_use?.how_use_title && (
-                      <>
-                        <h5 className="text-2xl font-semibold text-white mb-2">
-                          {development_tools_how_use?.how_use_title}
-                        </h5>
-                        <p className="text-white/70 text-base mt-4">
-                          {development_tools_how_use?.how_use_description}
-                        </p>
-                      </>
-                    )}
-                    {development_tools_how_use?.point?.length > 0 && (
-                      <div className="mt-5">
-                        <ul className="list-disc ml-5">
-                          {development_tools_how_use?.point?.map(
-                            (how: any, index: any) =>
-                              how?.heading ? (
-                                <p
-                                  key={index}
-                                  className={`${""} ${
-                                    how?.heading
-                                      ? "!mb-6 !ml-[-20px]"
-                                      : "block text-white font-semibold text-base"
-                                  }`}
-                                >
-                                  {how?.heading}
-                                </p>
-                              ) : (
-                                <li
-                                  key={index}
-                                  className={`${""} ${
-                                    how?.heading ? "my-6 list-none" : "mb-4"
-                                  }`}
-                                >
-                                  <>
-                                    <span className="block text-white/90 font-semibold text-base">
-                                      {how?.title}
-                                    </span>
-                                    <span className="block text-base text-white/70">
-                                      {how?.description}
-                                    </span>
-                                  </>
-                                </li>
-                              ),
-                          )}
-                        </ul>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Comparison section */}
-                  {development_tools_Comparison && (
-                    <div className="mt-8">
-                      {development_tools_Comparison?.title && (
-                        <h4 className="text-2xl font-semibold text-white mb-2">
-                          {development_tools_Comparison?.title}
-                        </h4>
-                      )}
-                      {Array.isArray(
-                        development_tools_Comparison?.description,
-                      ) &&
-                        development_tools_Comparison?.description.map(
-                          (d: any, index: any) => (
-                            <p
-                              className="text-white/70 text-base mt-4"
-                              key={`description_${index}`}
-                            >
-                              {d?.desc}
-                            </p>
-                          ),
-                        )}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </section>
-
-            {/* cta section */}
-            <section>
-              <div className="bg-[#090B0B] text-white flex flex-col items-center justify-center pl-6 pr-4 mt-10">
-                <div className="w-full flex md:flex-row flex-col md:items-center items-start md:justify-between justify-start gap-8 md:py-4 py-8 md:px-7">
-                  {/* Left Section */}
-                  <div className="text-left flex-1">
-                    <Image
-                      src="/images/bb-logo.svg"
-                      alt="BetterBugs Logo"
-                      className="mb-8"
-                      width={200}
-                      height={200}
-                    />
-                    <div className="relative">
-                      <h4 className="text-2xl font-extrabold mb-4">
-                        The essential <span className="text-primary">AI</span>{" "}
-                        companion every QA needs
-                      </h4>
-                      <span className="absolute top-[-17px] left-[50%]">
-                        <StarGardientIcon />
-                      </span>
-                    </div>
-
-                    <p className="text-white/90 text-[13px] my-6">
-                      Swiftly document and share bugs like never before
-                    </p>
-                    <div className="flex items-center gap-3 mt-6 mb-4">
-                      <Link target="_blank" href={Extension_URL}>
-                        <Button className="btn-primary flex items-center z-20 justify-center gap-3 rounded-full px-4">
-                          {browser === "edge" ? (
-                            <EdgeIcon className="w-7 h-7" />
-                          ) : (
-                            <Image
-                              src="/images/chrome.svg"
-                              width={30}
-                              height={20}
-                              alt="chrome-img"
-                              title="chrome"
-                            />
-                          )}
-                          {browser === "edge" ? "Add to Edge" : "Add to Chrome"}
-                          <span className="bg-black font-body text-sm font-normal py-2 px-3.5 text-white rounded-[30px]">
-                            FREE
-                          </span>
-                        </Button>
-                      </Link>
-                      <Link
-                        href={
-                          "https://www.loom.com/share/beb5310bed634e4783d10becd4a291f2?sid=7bcb9a6f-0290-4d5b-9eb0-12ed04e9167e"
-                        }
-                      >
-                        <PlayIcon className="hover:text-primary" />
-                      </Link>
-                    </div>
-                    <p className="text-sm mt-2 text-white">
-                      Free Forever. No Credit Card Required.
-                    </p>
-                  </div>
-
-                  {/* Right Section */}
-                  <div className="flex-1 flex flex-col gap-6 md:py-12 py-4 md:px-8 relative">
-                    <div className="md:block hidden absolute top-[50px] bottom-[50px] right-0 w-[2px] border-r-[2px] border-[#FFFFFF33] border-dashed"></div>
-
-                    {/* Features Section */}
-                    <div className="grid grid-cols-2 gap-6 relative">
-                      <div
-                        className={`flex flex-col p-4 rounded-lg items-start gap-3 ${ComparisonsStyles.ctaCardGridBg}`}
-                      >
-                        <StarGardientIcon />
-                        <p className="text-sm">
-                          Use <span className="font-bold text-white">AI</span>{" "}
-                          to reproduce and fix bugs
-                        </p>
-                      </div>
-                      <div
-                        className={`flex flex-col p-4 rounded-lg items-start gap-3 ${ComparisonsStyles.ctaCardGridBg}`}
-                      >
-                        <RecorderGradientIcon />
-                        <p className="text-sm">
-                          <span className="font-bold text-white">
-                            Screen Recording
-                          </span>{" "}
-                          with{" "}
-                          <span className="font-bold text-white">
-                            Rewind (Upto 2-min)
-                          </span>
-                        </p>
-                      </div>
-                      <div
-                        className={`flex flex-col p-4 rounded-lg items-start gap-3 ${ComparisonsStyles.ctaCardGridBg}`}
-                      >
-                        <LogsGradientIcon />
-                        <p className="text-sm">
-                          Capture{" "}
-                          <span className="font-bold text-white">
-                            {" "}
-                            backend logs
-                          </span>
-                          with every bug report
-                        </p>
-                      </div>
-                      <div
-                        className={`flex flex-col p-4 rounded-lg items-start gap-3 ${ComparisonsStyles.ctaCardGridBg}`}
-                      >
-                        <ShareGradientIcon />
-                        <p className="text-sm">
-                          Assign bugs and{" "}
-                          <span className="font-bold text-white">share</span> at
-                          single click
-                        </p>
-                      </div>
-                      <div className="absolute top-[43%] left-[40%]">
-                        <PowerCircleIcon />
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Integrations Section */}
-                  <div>
-                    <h3 className="font-semibold text-base text-white mb-4">
-                      Integrations
-                    </h3>
-                    <p className="text-white/70 mb-2 text-sm font-normal my-4">
-                      Two-way sync with
-                      <br /> popular tools
-                    </p>
-                    <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm mt-4">
-                      {integrationTools?.map((tool, index) => (
-                        <Link key={index} href={tool?.url}>
-                          <div className="flex items-center justify-start gap-5">
-                            <span
-                              className={`!w-2 !h-2 ml-[-2px] ${
-                                tool?.name === "Azure Boards" && "md:ml-[-7px]"
-                              }`}
-                            >
-                              {tool?.icon}
-                            </span>
-                            <p
-                              className={`text-sm mt-2 ${
-                                tool?.name === "Azure Boards" && "md:ml-1"
-                              }`}
-                            >
-                              {tool?.name}
-                            </p>
-                          </div>
-                        </Link>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Page;
diff --git a/app/components/ToolLayout.tsx b/app/components/ToolLayout.tsx
new file mode 100644
index 0000000..6720e65
--- /dev/null
+++ b/app/components/ToolLayout.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import React from "react";
+
+interface ToolLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function ToolLayout({ children }: ToolLayoutProps) {
+  return (
+    <div className="md:max-w-[1170px] mx-auto px-4 py-10">
+      {children}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/tools/base64-encoder/page.tsx b/app/tools/base64-encoder/page.tsx
new file mode 100644
index 0000000..e4124be
--- /dev/null
+++ b/app/tools/base64-encoder/page.tsx
@@ -0,0 +1,10 @@
+import Base64Encoder from "@/app/components/developmentToolsComponent/base64Encoder";
+import ToolLayout from "@/app/components/ToolLayout";
+
+export default function Page() {
+  return (
+    <ToolLayout>
+      <Base64Encoder />
+    </ToolLayout>
+  );
+}
\ No newline at end of file