import { Box, Button, Container, Grid, Link, Stack, TextField, Typography, } from '@mui/material';
import { useTheme } from '@mui/system';
export default function HeroCenteredApp() {
    return (<Box id='hero' sx={{
            width: '100%',
            backgroundSize: '100% 20%',
            backgroundRepeat: 'no-repeat',
            isolation: 'isolate',
        }}>
      <Container sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
        }}>
        <Stack spacing={2} useFlexGap sx={{ width: { xs: '100%', sm: '70%' }, mb: { xs: 4, sm: 5, md: 6 } }}>
          <Typography variant='h1' sx={{
            display: 'flex',
            flexDirection: { xs: 'column', md: 'row' },
            alignSelf: 'center',
            textAlign: 'center',
            fontWeight: 800,
            letterSpacing: -0.5,
            lineHeight: 1,
            fontSize: 'clamp(3.5rem, 10vw, 4rem)',
        }}>
            The Beautiful React UI Kit
          </Typography>
          <Typography textAlign='center' sx={{
            alignSelf: 'center',
            width: { sm: '100%', md: '80%' },
            fontSize: 'lg',
            lineHeight: 1.75,
        }}>
            Explore our cutting-edge dashboard, delivering high-quality
            solutions tailored to your needs. Elevate your experience with
            top-tier features and services.
          </Typography>
          <Stack direction={{ xs: 'column', sm: 'row' }} alignSelf='center' spacing={1} useFlexGap sx={{
            mt: 2,
            p: 1,
            width: { xs: '100%', sm: 'auto' },
            backgroundColor: 'gray.100',
            borderRadius: 2,
            border: theme => `1px solid ${theme.palette.gray['200']}`,
        }}>
            <TextField id='outlined-basic' hiddenLabel size='small' variant='filled' aria-label='Enter your email address' placeholder='your@email.com' inputProps={{
            autoComplete: 'off',
            'aria-label': 'Enter your email address',
        }}/>
            <Button variant='contained' color='primary'>
              Start now
            </Button>
          </Stack>
          <Typography textAlign='center' sx={{ opacity: 0.75, fontSize: 'xs', color: 'gray.500' }}>
            By clicking &quot;Start now&quot; you agree to our&nbsp;
            <Link href='#' color='primary'>
              Terms & Conditions
            </Link>
            .
          </Typography>
        </Stack>
        <LogoCollection />
        <Box id='image' sx={theme => ({
            mt: { xs: 2, sm: 3 },
            alignSelf: 'center',
            height: { xs: 200, sm: 700 },
            width: '100%',
            backgroundImage: theme.palette.mode === 'light'
                ? 'url("/homepage.png")'
                : 'url("/homepage.png")',
            backgroundSize: 'cover',
            borderRadius: '10px',
            outline: '1px solid',
            outlineColor: 'gray.200',
            boxShadow: 2,
        })}/>
      </Container>
    </Box>);
}
const whiteLogos = [
    'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
    'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
    'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
    'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e891fa22f89efd7477a_TerraLight.svg',
    'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a09d1f6337b1dfed14ab_colorado-white.svg',
    'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
];
const darkLogos = [
    'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
    'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
    'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
    'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e911fa22f2203d7514c_TerraDark.svg',
    'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a0990f3717787fd49245_colorado-black.svg',
    'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5ca4e548b0deb1041c33_Ankara-black.svg',
];
const logoStyle = {
    width: '80px',
    height: '50px',
    margin: '0 32px',
    opacity: 0.5,
};
function LogoCollection() {
    const theme = useTheme();
    const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
    return (<Box id='logoCollection'>
      <Grid container justifyContent='center' sx={{ mt: 0.5, opacity: 0.6 }}>
        {logos.map((logo, index) => (<Grid item key={index}>
            <img src={logo} alt={`Fake company number ${index + 1}`} style={logoStyle}/>
          </Grid>))}
      </Grid>
    </Box>);
}


import {
  Box,
  Button,
  Container,
  Grid,
  Link,
  Stack,
  TextField,
  Typography,
} from '@mui/material';
import { useTheme } from '@mui/system';

export default function HeroCenteredApp() {
  return (
    <Box
      id='hero'
      sx={{
        width: '100%',
        backgroundSize: '100% 20%',
        backgroundRepeat: 'no-repeat',
        isolation: 'isolate',
      }}
    >
      <Container
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <Stack
          spacing={2}
          useFlexGap
          sx={{ width: { xs: '100%', sm: '70%' }, mb: { xs: 4, sm: 5, md: 6 } }}
        >
          <Typography
            variant='h1'
            sx={{
              display: 'flex',
              flexDirection: { xs: 'column', md: 'row' },
              alignSelf: 'center',
              textAlign: 'center',
              fontWeight: 800,
              letterSpacing: -0.5,
              lineHeight: 1,
              fontSize: 'clamp(3.5rem, 10vw, 4rem)',
            }}
          >
            The Beautiful React UI Kit
          </Typography>
          <Typography
            textAlign='center'
            sx={{
              alignSelf: 'center',
              width: { sm: '100%', md: '80%' },
              fontSize: 'lg',
              lineHeight: 1.75,
            }}
          >
            Explore our cutting-edge dashboard, delivering high-quality
            solutions tailored to your needs. Elevate your experience with
            top-tier features and services.
          </Typography>
          <Stack
            direction={{ xs: 'column', sm: 'row' }}
            alignSelf='center'
            spacing={1}
            useFlexGap
            sx={{
              mt: 2,
              p: 1,
              width: { xs: '100%', sm: 'auto' },
              backgroundColor: 'gray.100',
              borderRadius: 2,
              border: theme => `1px solid ${theme.palette.gray['200']}`,
            }}
          >
            <TextField
              id='outlined-basic'
              hiddenLabel
              size='small'
              variant='filled'
              aria-label='Enter your email address'
              placeholder='your@email.com'
              inputProps={{
                autoComplete: 'off',
                'aria-label': 'Enter your email address',
              }}
            />
            <Button variant='contained' color='primary'>
              Start now
            </Button>
          </Stack>
          <Typography
            textAlign='center'
            sx={{ opacity: 0.75, fontSize: 'xs', color: 'gray.500' }}
          >
            By clicking &quot;Start now&quot; you agree to our&nbsp;
            <Link href='#' color='primary'>
              Terms & Conditions
            </Link>
            .
          </Typography>
        </Stack>
        <LogoCollection />
        <Box
          id='image'
          sx={theme => ({
            mt: { xs: 2, sm: 3 },
            alignSelf: 'center',
            height: { xs: 200, sm: 700 },
            width: '100%',
            backgroundImage:
              theme.palette.mode === 'light'
                ? 'url("/homepage.png")'
                : 'url("/homepage.png")',
            backgroundSize: 'cover',
            borderRadius: '10px',
            outline: '1px solid',
            outlineColor: 'gray.200',
            boxShadow: 2,
          })}
        />
      </Container>
    </Box>
  );
}

const whiteLogos = [
  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e891fa22f89efd7477a_TerraLight.svg',
  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a09d1f6337b1dfed14ab_colorado-white.svg',
  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
];

const darkLogos = [
  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e911fa22f2203d7514c_TerraDark.svg',
  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a0990f3717787fd49245_colorado-black.svg',
  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5ca4e548b0deb1041c33_Ankara-black.svg',
];

const logoStyle = {
  width: '80px',
  height: '50px',
  margin: '0 32px',
  opacity: 0.5,
};

function LogoCollection() {
  const theme = useTheme();
  const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;

  return (
    <Box id='logoCollection'>
      <Grid container justifyContent='center' sx={{ mt: 0.5, opacity: 0.6 }}>
        {logos.map((logo, index) => (
          <Grid item key={index}>
            <img
              src={logo}
              alt={`Fake company number ${index + 1}`}
              style={logoStyle}
            />
          </Grid>
        ))}
      </Grid>
    </Box>
  );
}


import { Box, Button, Container, Typography } from '@mui/material';
import { FiCheck } from 'react-icons/fi';
export default function HeroLeft() {
    return (<Container>
      <Box sx={{
            display: { xs: 'flex', md: 'grid' },
            flexDirection: { xs: 'column', md: 'row' },
            gridTemplateColumns: { xs: 'inherit', lg: '1fr 1fr' },
            gridTemplateRows: { xs: 'inherit', md: '1fr' },
            mb: 8,
        }}>
        <Box sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start',
            justifyContent: 'center',
            textAlign: 'left',
            px: { xs: 0, sm: 2 },
            py: { xs: 3, sm: 4, md: 6 },
            position: 'relative',
        }}>
          <Typography variant='h1' sx={{
            maxWidth: '12ch',
            lineHeight: 1,
            color: 'gray.800',
            letterSpacing: '-1.5px',
            fontSize: { xs: '4xl', sm: '5xl', md: '6xl' },
            fontWeight: 800,
            mb: 2,
        }}>
            Beautiful MUI{' '}
            <Box component='span' sx={{
            color: 'primary.500',
        }}>
              Building Blocks
            </Box>
          </Typography>
          <Typography mb={2} fontSize={{ xs: 'md', md: 'lg' }} color='gray.600' sx={{
            maxWidth: { xs: 'inherit', sm: '46ch' },
        }}>
            UI Foundations Kit provides{' '}
            <Box component='span' sx={{
            fontWeight: 600,
            color: 'primary.800',
        }}>
              100+ well-designed, React components
            </Box>{' '}
            that work seamlessly with MUI v5. Build your next SaaS app without
            worrying about layouts, designs, or CSS, and modify whatever you
            want.
          </Typography>
          <Box sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: 1.5,
            width: '100%',
        }}>
            <Box sx={{
            display: 'flex',
            flexDirection: {
                xs: 'column',
                sm: 'row',
            },
            gap: 1,
        }}>
              <Button variant='contained' color='primary' size='large' component='a' href='https://mui.com/store/items/ui-foundations-kit-saas-admin-dashboard-template/'>
                Buy Template
              </Button>
              <Button variant='outlined' color='secondary' component='a' href='https://demo.uifoundations.com/dashboard'>
                Preview Dashboard
              </Button>
            </Box>
            <Box sx={{
            display: 'flex',
            flexDirection: {
                xs: 'column',
                sm: 'row',
            },
            gap: 1,
        }}>
              <Box sx={{
            fontSize: 'xs',
            display: 'flex',
            alignItems: 'center',
            gap: 0.5,
            color: 'green.600',
        }}>
                <FiCheck />
                <Box component='span' color='gray.600'>
                  Trusted by 500+ teams
                </Box>
              </Box>
              <Box sx={{
            fontSize: 'xs',
            display: 'flex',
            alignItems: 'center',
            gap: 0.5,
            color: 'green.600',
        }}>
                <FiCheck />
                <Box component='span' color='gray.600'>
                  100+ Carefully crafted UI components
                </Box>
              </Box>
            </Box>
          </Box>
        </Box>
        <Box sx={{
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            height: '100%',
            borderRadius: 4,
            border: theme => `2px dashed ${theme.palette.divider}`,
            py: { xs: 3, sm: 4, md: 6 },
            backgroundColor: 'gray.50',
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23${'e5e7eb'}' fill-opacity='0.75' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E")`,
        }}></Box>
      </Box>
    </Container>);
}


import { Box, Button, Container, Typography } from '@mui/material';
import { FiCheck } from 'react-icons/fi';

export default function HeroLeft() {
  return (
    <Container>
      <Box
        sx={{
          display: { xs: 'flex', md: 'grid' },
          flexDirection: { xs: 'column', md: 'row' },
          gridTemplateColumns: { xs: 'inherit', lg: '1fr 1fr' },
          gridTemplateRows: { xs: 'inherit', md: '1fr' },
          mb: 8,
        }}
      >
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start',
            justifyContent: 'center',
            textAlign: 'left',
            px: { xs: 0, sm: 2 },
            py: { xs: 3, sm: 4, md: 6 },
            position: 'relative',
          }}
        >
          <Typography
            variant='h1'
            sx={{
              maxWidth: '12ch',
              lineHeight: 1,
              color: 'gray.800',
              letterSpacing: '-1.5px',
              fontSize: { xs: '4xl', sm: '5xl', md: '6xl' },
              fontWeight: 800,
              mb: 2,
            }}
          >
            Beautiful MUI{' '}
            <Box
              component='span'
              sx={{
                color: 'primary.500',
              }}
            >
              Building Blocks
            </Box>
          </Typography>
          <Typography
            mb={2}
            fontSize={{ xs: 'md', md: 'lg' }}
            color='gray.600'
            sx={{
              maxWidth: { xs: 'inherit', sm: '46ch' },
            }}
          >
            UI Foundations Kit provides{' '}
            <Box
              component='span'
              sx={{
                fontWeight: 600,
                color: 'primary.800',
              }}
            >
              100+ well-designed, React components
            </Box>{' '}
            that work seamlessly with MUI v5. Build your next SaaS app without
            worrying about layouts, designs, or CSS, and modify whatever you
            want.
          </Typography>
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'column',
              gap: 1.5,
              width: '100%',
            }}
          >
            <Box
              sx={{
                display: 'flex',
                flexDirection: {
                  xs: 'column',
                  sm: 'row',
                },
                gap: 1,
              }}
            >
              <Button
                variant='contained'
                color='primary'
                size='large'
                component='a'
                href='https://mui.com/store/items/ui-foundations-kit-saas-admin-dashboard-template/'
              >
                Buy Template
              </Button>
              <Button
                variant='outlined'
                color='secondary'
                component='a'
                href='https://demo.uifoundations.com/dashboard'
              >
                Preview Dashboard
              </Button>
            </Box>
            <Box
              sx={{
                display: 'flex',
                flexDirection: {
                  xs: 'column',
                  sm: 'row',
                },
                gap: 1,
              }}
            >
              <Box
                sx={{
                  fontSize: 'xs',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 0.5,
                  color: 'green.600',
                }}
              >
                <FiCheck />
                <Box component='span' color='gray.600'>
                  Trusted by 500+ teams
                </Box>
              </Box>
              <Box
                sx={{
                  fontSize: 'xs',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 0.5,
                  color: 'green.600',
                }}
              >
                <FiCheck />
                <Box component='span' color='gray.600'>
                  100+ Carefully crafted UI components
                </Box>
              </Box>
            </Box>
          </Box>
        </Box>
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            height: '100%',
            borderRadius: 4,
            border: theme => `2px dashed ${theme.palette.divider}`,
            py: { xs: 3, sm: 4, md: 6 },
            backgroundColor: 'gray.50',
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23${'e5e7eb'}' fill-opacity='0.75' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E")`,
          }}
        ></Box>
      </Box>
    </Container>
  );
}


import * as React from 'react';
import { Box, Typography } from '@mui/material';
export default function HeroCenter({ decorative = 'All-in-One', title = "The Developer's Toolkit", subtitle = 'A terminal, editor, screenshot tool, file explorer, and database GUI, all—of course—powered by artificial intelligence.', }) {
    return (<Box sx={{
            flex: 1,
            height: '60vh',
            display: 'flex',
            alignItems: 'center',
            flexDirection: 'column',
            gap: 2,
            my: 6,
            textAlign: 'center',
        }}>
      <Box sx={{
            color: 'primary.500',
            fontWeight: 600,
            fontSize: 'sm',
            textTransform: 'uppercase',
            letterSpacing: 0.5,
        }}>
        {decorative}
      </Box>
      <Typography variant='h1' sx={{
            fontSize: { xs: '4xl', sm: '5xl', md: '6xl' },
            fontWeight: 800,
        }}>
        {title}
      </Typography>
      <Typography sx={{
            fontSize: 'lg',
            color: 'gray.500',
            maxWidth: '54ch',
        }}>
        {subtitle}
      </Typography>
    </Box>);
}


import * as React from 'react';
import { Box, Typography } from '@mui/material';

export default function HeroCenter({
  decorative = 'All-in-One',
  title = "The Developer's Toolkit",
  subtitle = 'A terminal, editor, screenshot tool, file explorer, and database GUI, all—of course—powered by artificial intelligence.',
}: {
  decorative?: React.ReactNode;
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
}) {
  return (
    <Box
      sx={{
        flex: 1,
        height: '60vh',
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'column',
        gap: 2,
        my: 6,
        textAlign: 'center',
      }}
    >
      <Box
        sx={{
          color: 'primary.500',
          fontWeight: 600,
          fontSize: 'sm',
          textTransform: 'uppercase',
          letterSpacing: 0.5,
        }}
      >
        {decorative}
      </Box>
      <Typography
        variant='h1'
        sx={{
          fontSize: { xs: '4xl', sm: '5xl', md: '6xl' },
          fontWeight: 800,
        }}
      >
        {title}
      </Typography>
      <Typography
        sx={{
          fontSize: 'lg',
          color: 'gray.500',
          maxWidth: '54ch',
        }}
      >
        {subtitle}
      </Typography>
    </Box>
  );
}


Hero Sections

Hero Centered app preview

Hero left-aligned

Centered Hero