function CampaignHeader()

in website/src/pages/Build-IA/index.js [96:136]


function CampaignHeader() {
  return (
    <header className={clsx("hero hero--primary heroAzure")} style={{ backgroundImage: 'url(/Cloud-Native/img/cloud-native-hero-bg.webp)' }}>
      <div className="container">
        <div className="row" style={{ alignItems: 'center' }}>
          <div className="col col--6">
            <h1 className="hero__title">Build AI Apps and Agents!</h1>
            <p>
            Join us on a learning journey to build AI apps and agents using architecture recipes for AI-powered applications. Harness the synergy of apps, data, and AI to build and deploy scalable solutions, seamlessly integrating AI models, data pipelines, and cloud services for robust and efficient outcomes.
            </p>
            <div className='hero-buttons'>
              <a
                className="button button--primary button--lg"
                href="https://youtube.com/playlist?list=PLmsFUfdnGr3zLCIUeO_R_m-W7ASuxrNtm&si=1ubePI5iKK-vs2I9?ocid=biafy25h2_aipoweredapplications_webpage_azuremktg"
                target="_blank"
                rel="noopener noreferrer"
                data-bi-area="Hero"
                data-bi-name="#Build-IA"
              >
                Watch on demand
              </a>
              {/* <Link className="button button--secondary button--lg" to="https://www.youtube.com/playlist?list=PLmsFUfdnGr3xYBEmLI7AqtWtBc31D20er" data-bi-area="Hero" data-bi-name="#DemoBytes" target="_blank">
              Learn more
              </Link> */}
            </div>
          </div>
          <div className="col col--1 hide-on-mobile"></div>
          <div className="col col--5">
            <img
              className="hide-on-mobile"
              src="../img/30-days-of-ia/30-days-of-ia-2024-hero-image.webp"
              alt=""
              role="presentation"
              width="100%"
            />
          </div>
        </div>
      </div>
    </header>
  );
}