From ec64dab720d2d92fcfc867da07e432cc42613963 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 11 Oct 2023 21:26:33 -0500
Subject: [PATCH] fix: use webp images in layout

---
 src/app/tools/layout.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/app/tools/layout.tsx b/src/app/tools/layout.tsx
index 348899b48..2f281b63f 100644
--- a/src/app/tools/layout.tsx
+++ b/src/app/tools/layout.tsx
@@ -19,17 +19,32 @@ export default function ToolsLayout({ children }: ToolsLayoutProps) {
       <div
         style={{
           height: 128,
-          backgroundImage: `url(/assets/banners/${toolId}.png)`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
           boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           gap: 4,
           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))',
+          }}
+        />
+
         <span
           style={{
             color: theme.colors.textHighContrast,