Migrate to yarn berry and fix all workspace errors

frontend/pages/home/Hero.js

@@ -0,0 +1,73 @@
+import { Box, Chip } from '@mui/material'
+import { useTranslation } from 'next-i18next'
+import Image from 'next/image'
+import { useState } from 'react'
+
+import logo from './assets/warframe_logo.png'
+import HelpModal from './HelpModal'
+
+const Hero = () => {
+  const { t } = useTranslation('home')
+  const [modalOpen, setModalOpen] = useState(false)
+
+  const openModal = () => {
+    setModalOpen(true)
+  }
+
+  const closeModal = () => {
+    setModalOpen(false)
+  }
+
+  return (
+    <>
+      <Box
+        sx={{
+          py: 12,
+          textAlign: 'center'
+        }}
+      >
+        <Chip
+          label={t('help_header')}
+          variant='outlined'
+          onClick={openModal}
+          sx={{
+            position: 'absolute',
+            top: '10px',
+            right: '10px'
+          }}
+        />
+
+        <Box
+          sx={{
+            width: 400,
+            m: 'auto'
+          }}
+        >
+          <Image
+            src={logo}
+            alt='logo'
+            layout='responsive'
+            width={500}
+            height={300}
+          />
+        </Box>
+        <Box
+          sx={{
+            width: 400,
+            m: 'auto'
+          }}
+        >
+          <h1>Market Gaps</h1>
+          <p>{t('description')}</p>
+        </Box>
+      </Box>
+
+      <HelpModal
+        open={modalOpen}
+        onClose={closeModal}
+      />
+    </>
+  )
+}
+
+export default Hero