Add Hero Section On Library

// ****** Hero banner image start ********
(function () {
    const heroBanner = {
        fontFamily: '"Roboto",sans-serif',
        headline: "Support OS",
        subheadline: "Access to Tools & Scripts",
        bgImg:
            "https://assets.cdn.msgsndr.com/vJVPkXKI0ujMBULtlF3Q/media/63748e632a169ca47e3d9c3e.png",
        minHeight: "300px",
        button: {
            id: "cm-hero-btn",
            name: "See More",
            style: "fill",
            actionURL: "https://www.youtube.com",
        },
    };

    const customHeroStyleSheet = `
:root {
--cm-hero-min-height: 300px;
--cm-container-max-width: 1080px;
--cm-hero-background-img: url(${heroBanner.bgImg});

--cm-hero-font-family: ${heroBanner.fontFamily};

--custom-headline-font-size: 40px;
--custom-headline-font-color: #000;
--custom-headline-font-weight: 700;

--custom-subheadline-font-size: 30px;
--custom-subheadline-font-color: #000;
--custom-subheadline-font-weight: 700;

--custom-cm-btn-border-radius: 5px;
--custom-cm-btn-padding: 10px 25px;
--custom-cm-btn-font-size: 16px;
--custom-cm-btn-font-weight: 700;
--custom-cm-btn-background-color: rgb(24, 15, 120);
--custom-cm-btn-font-color: #fff;
--custom-cm-outline-btn-background-color: transparent;
--custom-cm-outline-btn-font-color: rgb(24, 15, 120);
--custom-cm-btn-outline-border: 1px solid rgb(24, 15, 120);
--transition-all: all 0.3s ease-in;
}

.cm-hero {
width: 100% !important;
height: auto !important;
min-height: var(--cm-hero-min-height) !important;
display: flex !important;
align-items: center !important;
background-image: var(--cm-hero-background-img) !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}

.cm-hero .cm-hero-con {
width: 100% !important;
max-width: 1080px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 24px !important;
}

.cm-hero .cm-hero-headline {
font-size: 40px !important;
font-weight: 700 !important;
color: #000 !important;
line-height: 1.2 !important;
font-family: var(--cm-hero-font-family) !important;
margin-top: 60px !important;
margin-bottom: 0 !important;
text-align: center !important;
}

.cm-hero .cm-hero-subheadline {
font-size: 30px !important;
font-weight: 400 !important;
color: #000 !important;
line-height: 1.4 !important;
font-family: var(--cm-hero-font-family) !important;
margin-top: 10px !important;
text-align: center !important;
margin-bottom: 0 !important;
}

.cm-hero .cm-hero-btn-con {
text-align: center !important;
margin-top: 30px !important;
}

.cm-hero .cm-hero-btn {
display: inline-flex !important;
padding: var(--custom-cm-btn-padding) !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
font-size: var(--custom-cm-btn-font-size) !important;
font-weight: var(--custom-cm-btn-font-weight) !important;
border-radius: var(--custom-cm-btn-border-radius) !important;
text-decoration: none !important;
transition: var(--transition-all) !important;
}

.cm-hero .cm-hero-btn.fill {
background-color: var(--custom-cm-btn-background-color) !important;
color: var(--custom-cm-btn-font-color) !important;
border: 1px solid transparent !important;
}

.cm-hero .cm-hero-btn.fill:hover{
background-color: var(--custom-cm-outline-btn-background-color) !important;
color: var(--custom-cm-outline-btn-font-color) !important;
border: var(--custom-cm-btn-outline-border) !important;
}

.cm-hero .cm-hero-btn.outline {
background-color: var(--custom-cm-outline-btn-background-color) !important;
color: var(--custom-cm-outline-btn-font-color) !important;
border: var(--custom-cm-btn-outline-border) !important;
}

.cm-hero .cm-hero-btn.outline:hover {
  background-color: var(--custom-cm-btn-background-color) !important;
  color: var(--custom-cm-btn-font-weight) !important;
}
`;

    const head = document.querySelector("head");
    const style = document.createElement("style");
    style.innerHTML = customHeroStyleSheet;
    head.append(style);


    const customHero = document.createElement("div");
    customHero.className = "cm-hero";

    const heroCon = document.createElement("div");
    heroCon.className = "cm-hero-con";

    const headline = document.createElement("h2");
    headline.className = "cm-hero-headline";
    headline.textContent = heroBanner.headline;

    const subheadline = document.createElement("h3");
    subheadline.className = "cm-hero-subheadline";
    subheadline.textContent = heroBanner.subheadline;

    const btnCon = document.createElement("div");
    btnCon.className = "cm-hero-btn-con";

    const btn = document.createElement("a");
    btn.id = heroBanner.button.id;
    btn.href = heroBanner.button.actionURL;
    btn.className = `cm-hero-btn ${heroBanner.button.style}`;
    btn.textContent = heroBanner.button.name;

    btnCon.appendChild(btn);
    heroCon.appendChild(headline);
    heroCon.appendChild(subheadline);
    heroCon.appendChild(btnCon);
    customHero.appendChild(heroCon);


    const getElementByFn = (selector, cb) => {
        const intervalId = setInterval(() => {
            const element = document.querySelectorAll(selector);

            if (element.length === 1) {
                clearInterval(intervalId);
                cb(element[0]);
            }

            if (element.length > 1) {
                clearInterval(intervalId);
                cb(element);
            }
        }, 200);
    };

    const runCustomCode = (pathname) => {
        if (!pathname.includes("library-v2")) return;

        if (customHero.isConnected) customHero.remove();
        getElementByFn("#library-container", (libraryCon) => {
            const mainContainer = libraryCon.parentElement;
            if (!mainContainer)
                return console.log(
                    "Menu Not inserted is because ref element not found"
                );
            mainContainer.insertBefore(customHero, libraryCon);
        });
    };

    let pathname = "";
    window.addEventListener("DOMNodeInserted", (e) => {
        if (pathname == location.pathname) return;

        pathname = location.pathname;
        runCustomCode(pathname);
    });
})();
// ****** Hero banner image End ********

Add the JS code into Membership > Setting > Advance > Custom JS