Added i18n

app/pages/home/Hero.js

@@ -1,41 +1,44 @@
-import { Component } from 'react'
+import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
 import { Box } from '@mui/material'
+
 import logo from './assets/warframe_logo.png'
 
-export default class Hero extends Component {
-  render () {
-    return (
+const Hero = () => {
+  const { t } = useTranslation('home')
+
+  return (
+    <Box
+      sx={{
+        py: 12,
+        textAlign: 'center'
+      }}
+    >
       <Box
         sx={{
-          py: 12,
-          textAlign: 'center'
+          width: 400,
+          m: 'auto'
         }}
       >
-        <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>Find a profitable difference between the price of the set and the price of the sum of it's parts.</p>
-        </Box>
+        <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>
+  )
 }
+
+export default Hero