feat: removed banner

src/app/tools/layout.tsx

@@ -13,62 +13,65 @@ interface ToolsLayoutProps {
 
 export default function ToolsLayout({ children }: ToolsLayoutProps) {
   const pathname = usePathname();
-  const toolId = pathname.split('/').at(2);
+  const pathSplit = pathname.split('/');
+  const toolId = pathSplit.at(2);
   const tool = TOOLS.find((tool) => tool.id === toolId);
 
   return (
     <>
       {tool && <title>{tool.title}</title>}
 
-      <div
-        style={{
-          height: 128,
-          boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDirection: 'column',
-          position: 'relative',
-          overflow: 'hidden',
-        }}
-      >
+      {pathSplit.length === 3 && (
         <div
           style={{
-            position: 'absolute',
-            backgroundImage: `url(/assets/banners/${toolId}.webp)`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            width: '100%',
-            height: '100%',
-            top: 0,
-            left: 0,
-            zIndex: -1,
-            filter: 'blur(4px)',
-            transform: 'scale(calc((128 + 8) / 128))',
+            height: 128,
+            boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            position: 'relative',
+            overflow: 'hidden',
           }}
-        />
+        >
+          <div
+            style={{
+              position: 'absolute',
+              backgroundImage: `url(/assets/banners/${toolId}.webp)`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              width: '100%',
+              height: '100%',
+              top: 0,
+              left: 0,
+              zIndex: -1,
+              filter: 'blur(4px)',
+              transform: 'scale(calc((128 + 8) / 128))',
+            }}
+          />
 
-        <Link
-          href={`/tools/${toolId}`}
-          style={{
-            textDecoration: 'none',
-            fontWeight: 900,
-            color: theme.colors.textHighContrast,
-            fontSize: 32,
-            letterSpacing: -1,
-          }}
-        >
-          {tool?.title}
-        </Link>
-        <span
-          style={{
-            color: theme.colors.textLowContrast,
-            fontSize: 16,
-          }}
-        >
-          {tool?.description}
-        </span>
-      </div>
+          <Link
+            href={`/tools/${toolId}`}
+            style={{
+              textDecoration: 'none',
+              fontWeight: 900,
+              color: theme.colors.textHighContrast,
+              fontSize: 32,
+              letterSpacing: -1,
+            }}
+          >
+            {tool?.title}
+          </Link>
+          <span
+            style={{
+              color: theme.colors.textLowContrast,
+              fontSize: 16,
+            }}
+          >
+            {tool?.description}
+          </span>
+        </div>
+      )}
 
       <Suspense fallback={<Loader />}>{children}</Suspense>
     </>