function CampaignHeader()

in website/src/pages/Build-IA/meetups.js [20:85]
63 lines of code
3 McCabe index (conditional complexity)

function CampaignHeader() {
  
  const videoResponsiveStyle = {
    position: 'relative',
    paddingBottom: '56.25%', // 16:9 aspect ratio
    height: 0,
    overflow: 'hidden',
    maxWidth: '100%',
  };

  const iframeStyle = {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    borderRadius: '1.5rem'
  };
  
  return (
    <header
      className={clsx("hero hero--primary heroAzureHome")}
      style={{ backgroundImage: 'url(/Cloud-Native/img/cloud-native-hero-bg.webp)', padding: '8rem 0rem', backgroundPosition: 'bottom left' }}
    >
      <div className="container">
        <div className="row" style={{ alignItems: 'center' }}>
          <div className="col col--6">
            <h1 className="hero__title">Meetups</h1>
            <p>
              Join us for an engaging in-person, hands-on meetup where developers will delve into
              architectural best practices for AI-powered applications using your favorite tools.
              Collaborate with fellow tech enthusiasts as you learn to build and deploy scalable AI
              solutions, integrating AI models, data pipelines, and cloud services to create robust
              and efficient architectures.
            </p>
            <div className={`${styles.buttonsFFIA} hero-buttons margin-bottom--md`}>
              <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="#Meetups"
              >
                Watch on demand
              </a>
            </div>
          </div>
          <div className="col col--6">
          <div style={videoResponsiveStyle}>
              <iframe
                style={iframeStyle}
                src="https://www.youtube.com/embed/CMTv1vHr1-o?playlist=CMTv1vHr1-o&rel=0"
                title="YouTube video player"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerPolicy="strict-origin-when-cross-origin"
                allowFullScreen
              />
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}