text: import React from "react";
  
  import { Card, Icon } from "@mui/material";
  import VuiBox from "components/VuiBox";
  import VuiTypography from "components/VuiTypography";
  
  const WelcomeMark = () => {
    return (
      <Card sx={{ height: "340px" }}>
        <VuiBox height="100%" display="flex" flexDirection="column" justifyContent="space-between">
          <VuiBox>
            <VuiTypography color="text" variant="button" fontWeight="regular" mb="12px">
              مرحبا بعودتك،
            </VuiTypography>
            <VuiTypography color="white" variant="h3" fontWeight="bold" mb="18px">
              Mark Johnson
            </VuiTypography>
            <VuiTypography color="text" variant="h6" fontWeight="regular" mb="auto">
              سعيد لرؤيتك مرة أخرى!
              <br /> اسألني اي شئ.
            </VuiTypography>
          </VuiBox>
          <VuiTypography
            component="a"
            href="#"
            variant="button"
            color="white"
            fontWeight="regular"
            sx={{
              mr: "5px",
              display: "inline-flex",
              alignItems: "center",
              cursor: "pointer",
  
              "& .material-icons-round": {
                fontSize: "1.125rem",
                transform: `translate(2px, -0.5px)`,
                transition: "transform 0.2s cubic-bezier(0.34,1.61,0.7,1.3)",
              },
  
              "&:hover .material-icons-round, &:focus  .material-icons-round": {
                transform: `translate(6px, -0.5px)`,
              },
            }}
          >
            اضغط للتسجيل
            <Icon sx={{ fontWeight: "bold", ml: "5px" }}>arrow_backward</Icon>
          </VuiTypography>
        </VuiBox>
      </Card>
    );
  };
  
  export default WelcomeMark;
  