synapse-react-client/dist/components/PortalHomePageHeader/PortalHomePageHeader.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { Box as x, Stack as h, Typography as o, Button as c } from "@mui/material";
const b = ({
  backgroundCss: i,
  buttonLink: p,
  title: a,
  subTitle: n,
  description: d,
  backgroundMp4: r,
  backgroundMp4Css: l,
  textAreaWidth: s = "746px"
}) => /* @__PURE__ */ t(
  x,
  {
    "data-testid": "HeaderContainer",
    sx: {
      background: i,
      padding: { xs: 0, md: "50px 80px" },
      position: "relative"
    },
    children: [
      r && /* @__PURE__ */ t(
        x,
        {
          component: "video",
          autoPlay: !0,
          loop: !0,
          muted: !0,
          playsInline: !0,
          sx: {
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            objectFit: "fill",
            zIndex: -1,
            background: l
          },
          children: [
            /* @__PURE__ */ e("source", { src: r, type: "video/mp4" }),
            "Your browser does not support the video tag."
          ]
        }
      ),
      /* @__PURE__ */ t(
        h,
        {
          sx: {
            alignItems: "flex-start",
            padding: { xs: "40px", md: "40px 0" },
            gap: "24px",
            width: { sm: "100%", md: s }
          },
          children: [
            /* @__PURE__ */ e(
              o,
              {
                variant: "headline2",
                sx: {
                  fontWeight: 300,
                  lineHeight: "130%",
                  fontSize: { xs: "36px", md: "42px" },
                  color: "grey.1000"
                },
                children: a
              }
            ),
            /* @__PURE__ */ e(
              o,
              {
                variant: "headline3",
                sx: {
                  fontSize: "24px",
                  fontWeight: "400",
                  lineHeight: "160%",
                  color: "grey.1000"
                },
                children: n
              }
            ),
            /* @__PURE__ */ e(
              o,
              {
                sx: { fontSize: "18px", lineHeight: "140%", color: "grey.900" },
                children: d
              }
            ),
            p && /* @__PURE__ */ e(
              c,
              {
                href: p,
                target: "_blank",
                variant: "contained",
                role: "button",
                sx: (g) => ({
                  whiteSpace: "nowrap",
                  alignSelf: "flex-start",
                  padding: "6px 24px",
                  fontWeight: 600,
                  boxShadow: "0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)",
                  "&:hover": {
                    boxShadow: "0px 16px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)"
                  },
                  [g.breakpoints.down("sm")]: {
                    width: "100%"
                  }
                }),
                children: "Learn more"
              }
            )
          ]
        }
      )
    ]
  }
);
export {
  b as default
};
//# sourceMappingURL=PortalHomePageHeader.js.map