fix: managing dao hero background adjusts to mobile and desktop size

Author: CorinneBosch

src/components/Introduction.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
+import { useMediaQuery } from 'react-responsive';
 
-// import { useMediaQuery } from 'react-responsive';
 import trackClick from '@/lib/trackClick';
 
 import * as Anchor from '@/components/Anchor';
@@ -11,19 +11,17 @@ import Icon from '@/components/Icon';
 import Text from '@/components/Text';
 
 export default function Introduction() {
-  // const isNarrow = useMediaQuery({ query: `(max-width: 834px)` });
-  // const imgClass = isNarrow
-  //   ? 'absolute -top-[295px] left-1/2 -z-10 h-[844px] w-[1800px] -translate-x-[640px]'
-  //   : 'absolute -top-[275px] left-1/2 -z-10 h-[844px] w-[1800px] -translate-x-[1072px]';
+  const isNarrow = useMediaQuery({ query: `(max-width: 834px)` });
+  const imgClass = isNarrow
+    ? 'absolute -top-[295px] left-1/2 -z-10 h-[844px] w-[1800px] -translate-x-[640px]'
+    : 'absolute -top-[275px] left-1/2 -z-10 h-[844px] w-[1800px] -translate-x-[1072px]';
 
   return (
-    // <div className='relative'>
-    //   <div className={imgClass}>
     // The page gets sized by the overflowing hero image. To keep the page
     // width from being affected by the hero, we need to add an
     // 'overflow-hidden' to the container div
     <div className='relative overflow-hidden'>
-      <div className='absolute -top-[275px] left-1/2 -z-10 h-[844px] w-[1800px] -translate-x-1/2'>
+      <div className={imgClass}>
         <Image
           priority
           className='w-full'

src/components/ManagingDAOs/index.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import { useMediaQuery } from 'react-responsive';
 
 import clsxm from '@/lib/clsxm';
 
@@ -9,15 +10,19 @@ import CONFIG from './config';
 import Section from './Section';
 
 export default function ManagingDAOs() {
+  const isNarrow = useMediaQuery({ query: `(max-width: 834px)` });
+  const imgClass = isNarrow
+    ? 'absolute -z-10 top-0 -left-[800px] bottom-0 -right-60 bg-[#201F27]'
+    : 'absolute -z-10 h-full w-full bg-[#201F27]';
+
   return (
-    <div className='relative'>
-      <div className='absolute -z-10 h-full w-full bg-[#201F27]'>
+    <div className='relative overflow-hidden'>
+      <div className={imgClass}>
         <Image
           className='w-full'
           alt='hero image'
           src='/backgrounds/managing-dao.png'
           layout='fill'
-          objectFit='cover'
         />
       </div>
       <CenteredContent className='px-5'>