import { useCustomTheme } from '@/themes/useCustomTheme'
import { Box, Stack, Typography } from '@mui/material'

const ProgramsHero = () => {
  const theme = useCustomTheme();
  return (
    <Box
      sx={{
        width: '100%',
        height: '90vh',
        px: theme.customProperties.sectionPaddingX,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        textAlign: 'center',
      }}
    >
      <Stack sx={{position: 'relative'}} alignItems={'center'}>
        <Typography variant='h1'>Dedicated Training Programs</Typography>
        <Typography variant='h2'>Something for everyone and every goal</Typography>
      </Stack>
    </Box>
  )
}

export default ProgramsHero