leumas-private-shared/src/Components/Jumbotrons/Jumbotron3/Jumbotron3.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React from 'react';

const Jumbotron3 = ({ title, subtitle, buttons, videoSrc }) => {
  return (
    <section className=" dark:bg-gray-900">
      <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 grid lg:grid-cols-2 gap-8 lg:gap-16">
        <div className="flex flex-col justify-center">
          <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none  md:text-5xl lg:text-6xl dark:text-white">{title}</h1>
          <p className="mb-8 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400">{subtitle}</p>
          <div className="flex flex-col space-y-4 sm:flex-row sm:space-y-0">
            {buttons.map((button, index) => (
              <a key={index} href={button.href} className={button.className}>
                {button.text}
                {button.icon && (
                  <svg className={button.iconClassName} fill="none" viewBox={button.iconViewBox} xmlns="http://www.w3.org/2000/svg">
                    <path d={button.iconPathD} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" stroke="currentColor" />
                  </svg>
                )}
              </a>
            ))}
          </div>
        </div>
        <div>
          <iframe className="mx-auto w-full lg:max-w-xl h-64 rounded-lg sm:h-96 shadow-xl" src={videoSrc} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
        </div>
      </div>
    </section>
  );
};

export default Jumbotron3;

// Example Usage

// const jumbotronProps = {
//     title: "We invest in the world’s potential",
//     subtitle: "Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.",
//     buttons: [
//       {
//         text: "Get started",
//         href: "#",
//         className: "inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900",
//         icon: true,
//         iconClassName: "w-3.5 h-3.5 ms-2 rtl:rotate-180",
//         iconViewBox: "0 0 14 10",
//         iconPathD: "M1 5h12m0 0L9 1m4 4L9 9",
//       },
//       {
//         text: "Learn more",
//         href: "#",
//         className: "py-3 px-5 sm:ms-4 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 text-center",
//       }
//     ],
//     videoSrc: "https://www.youtube.com/embed/KaLxCiilHns",
//   };


//   <Jumbotron3 {...jumbotronProps} />