import { Box, Typography, Button } from "@mui/material";
import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";

const AboutUs = () => {
  return (
    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}>
      <Box textAlign="center" maxWidth={800} mx="auto">
        <Typography variant="h4" fontWeight="bold" gutterBottom>
          About Us
        </Typography>
        <Typography variant="body1" paragraph>
          Lorem ipsum dolor sit amet consectetur. Nisl sed sed tortor eros. Enim
          hendrerit elit interdum malesuada sit dis est pharetra suspendisse. In
          dolor venenatis ultricies aliquet lacinia. Faucibus commodo eu gravida
          auctor eu et sit ut. Sed praesent sed odio aliquam in fermentum. Sit
          vitae morbi sodales sem velit eu tempus velit nunc. Turpis in in
          luctus et nulla purus nibh ut. Enim sed fermentum purus molestie
          parturient morbi nunc aliquet. Aliquam sed etiam turpis non lectus
          commodo cras leo gravida.
        </Typography>
        <Button
          variant="outlined"
          endIcon={<ArrowOutwardIcon />}
          sx={{
            mt: 2,
            borderColor: "#00FFD1",
            color: "#00FFD1",
            borderRadius: "30px",
            fontWeight: "bold",
            px: 4,
            "&:hover": {
              backgroundColor: "#00FFD1",
              color: "#000",
            },
          }}
        >
          GET IN TOUCH
        </Button>
      </Box>
    </Box>
  );
};

export default AboutUs;
