text: import React from "react";
  import clsx from "clsx";
  import Layout from "@theme/Layout";
  import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
  import styles from "./index.module.css";
  import HomepageFeatures from "../components/HomepageFeatures";
  import Svg from "../components/Svg";
  import { docUrl, githubUrl } from "../utils/index";
  import Stack from "@mui/material/Stack";
  import Button from "@mui/material/Button";
  
  function HomepageHeader(props) {
    const { siteConfig } = useDocusaurusContext();
    return (
      <header className={clsx("tailwind hero", styles.heroBanner)}>
        <div className="flex flex-col items-center container mt-24">
          <Svg src="/img/pulsar.svg" className="h-36" />
          <h2 className="mt-12 font-medium mb-12">{siteConfig.tagline}</h2>
          <Stack spacing={2} direction="row">
            <Button
              variant="contained"
              size="large"
              href={docUrl("", props.language)}
              className="text-white"
            >
              READ THE DOCS
            </Button>
            <Button
              variant="outlined"
              size="large"
              href={githubUrl()}
              className="text-primary"
            >
              GITHUB
            </Button>
          </Stack>
        </div>
      </header>
    );
  }
  
  export default function Home() {
    const { siteConfig } = useDocusaurusContext();
    return (
      <Layout
        title={`Hello from ${siteConfig.title}`}
        description="Description will go into a meta tag in <head />"
      >
        <HomepageHeader />
        <main className="tailwind">
          <div className="mt-8">
            <HomepageFeatures />
          </div>
        </main>
        <p align="center">
          <small style={{ color: "black", fontSize: "1.7rem" }}>
            <a className="hover:no-underline" href="/powered-by">
              Companies Powered by Pulsar
            </a>
          </small>
        </p>
        <div style={{ textAlign: "center" }}>
          <p>
            Apache Pulsar is available under the{" "}
            <a href="https://www.apache.org/licenses">
              Apache License, version 2.0
            </a>
            .
          </p>
        </div>
      </Layout>
    );
  }
  