fdo details preview on LP

src/components/Content.tsx

 import * as React from 'react'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
+import Details from './fdos/details'
 
-export default function Types () {
+export default function Content () {
   return (
     <Box sx={{ width: '100%', maxWidth: 500 }}>
 
       <Typography variant="subtitle1" gutterBottom>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-        blanditiis tenetur
+        Get a short preview of an FDO in detail: 
       </Typography>
+     
 
-      <Typography variant="body1" gutterBottom>
-      Dies ist ein spannendes FDO.
-      </Typography>
 
-      <Typography variant="button" display="block" gutterBottom>
-        button text
-      </Typography>
-      <Typography variant="caption" display="block" gutterBottom>
-        caption text
-      </Typography>
-      <Typography variant="overline" display="block" gutterBottom>
-        overline text
-      </Typography>
+      <Details/>
+
     </Box>
   )
 }

src/components/ContentArea.tsx

@@ -8,6 +8,7 @@ import Content from '@components/Content'
 import Typography from '@mui/material/Typography'
 import Divider from '@mui/material/Divider'
 import FDOImage from '@components/FDOImage'
+import Link from '@mui/material/Link'
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
@@ -42,7 +43,7 @@ export default function RowAndColumnSpacing () {
                 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
+            <Link href='./fdo'>Enter FDO Manager</Link>
             </Typography>
           </Item>
         </Grid>