function HomepageHeader()

in website/src/pages/getting-started/index.js [28:71]


function HomepageHeader({ colorMode }) {
  const style = useStyles();
  return (
    <header className={styles.heroBanner}>
      <img
        src={
          colorMode != "dark"
            ? useBaseUrl("/img/coverBackground.png")
            : useBaseUrl("/img/coverBackgroundDark.png")
        }
        className={styles.cover}
        onError={({ currentTarget }) => {
          currentTarget.style.display = "none";
        }}
        alt=""
      />
      <div className={styles.section}>
        <div className={styles.description}>
          <h1>
            <Text
              className={style.largeTitle}
              style={{ marginBottom: "6px", color: "#242424" }}
            >
              Accelerate your journey to the cloud with azd
            </Text>
          </h1>
          <Text className={style.title3} style={{ color: "#242424" }}>
            Azure Developer CLI (azd) is an open-source tool that accelerates
            your application’s journey from local development to Azure.
          </Text>
        </div>
        <div className={styles.video}>
          <iframe
            className={styles.iframe}
            src="https://www.youtube.com/embed/9z3PiHSCcYs?si=F1yKpoiOQnzb4o-K"
            title="Azure Developer CLI: GitHub to cloud in minutes - Universe 2022"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
        </div>
      </div>
    </header>
  );
}