74 lines
1.4 KiB
JavaScript
74 lines
1.4 KiB
JavaScript
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
|