ContentArea.tsx

import * as React from 'react'
import { styled } from '@mui/material/styles'
import Grid from '@mui/material/Grid'
import Paper from '@mui/material/Paper'
import Box from '@mui/material/Box'
import QueryPanel from './header/QueryPanel'
import Content from 'src/components/Content'
import Typography from '@mui/material/Typography'
import Divider from '@mui/material/Divider'

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(2),
  textAlign: 'center',
  color: theme.palette.text.secondary
}))

export default function RowAndColumnSpacing () {
  return (
    <Box alignItems="center">
      <Grid container spacing={2} columns={10} justifyContent="center" alignItems="center" marginTop={2}>
        <Grid item xs={6}>
          <Item>
          <Typography variant="h3" gutterBottom marginTop={2}>
              Welcome to the FDO Manager
          </Typography><br/>
          <Typography variant="body1" gutterBottom>
              The FDO Manager allows you to browse FDOs, create FDOs and much more and is
              part of the <a href="https://fdo-one.org/">FDO One project</a>.
              <br/>
              One key feature of FDOs is that they
              are identified via a persistent identifier (PID).
              <br/>
              <br/>
              You are interested to look at a specific FDO? Just enter the PID below!
            </Typography><br/>
              <QueryPanel/><br/><br/>
               <Divider /><br/><br/>
               <Typography variant="body1" gutterBottom>
                Or just start from the overview of the FDO Manager by clicking here:
              </Typography><br/>
            <Typography variant="button" display="block" gutterBottom fontSize={19}>
              Enter FDO Manager
            </Typography>
          </Item>
        </Grid>
      </Grid>

      <Grid container spacing={2} columns={20} justifyContent="center" alignItems="center" marginTop={2}>
        <Grid item xs={6}>
          <Item><Content/></Item>
        </Grid>
        <Grid item xs={6}>
          <Item><Content/></Item>
        </Grid>
      </Grid>
    </Box>
  )
}