leumas-private-shared/src/Components/Jumbotrons/Jumbotron2/Jumbotron2.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 Jumbotron2 = ({ backgroundType, backgroundSource, title, subtitle, buttons }) => {
  return (
    <section className="relative bg-gray-700 bg-blend-multiply">
      {/* Conditionally render background based on type */}
      {backgroundType === 'image' ? (
        <img src={backgroundSource} alt="Background" className="absolute inset-0 object-cover w-full h-full" />
      ) : (
        <video src={backgroundSource} autoPlay loop muted className="absolute inset-0 object-cover w-full h-full">
          Your browser does not support the video tag.
        </video>
      )}

      {/* Overlay to ensure text is readable on any background */}
      <div className="absolute inset-0 bg-black opacity-50"></div>

      {/* Content container */}
      <div className="relative px-4 mx-auto max-w-screen-xl text-center py-24 lg:py-56">
        <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-white md:text-5xl lg:text-6xl">{title}</h1>
        <p className="mb-8 text-lg font-normal text-gray-300 lg:text-xl sm:px-16 lg:px-48">{subtitle}</p>
        <div className="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0 gap-2">
          {buttons.map((button, index) => (
            <a key={index} href={button.href} className={button.className}>
              {button.text}
              {button.icon && (
                <svg className={button.iconClassName} aria-hidden="true" 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>
    </section>
  );
};

export default Jumbotron2;

{/* <Jumbotron2
  backgroundType="video"
  backgroundSource="https://res.cloudinary.com/dx25lltre/video/upload/v1707633110/SpaceVideos/Untitled_design_4_nvvtr0.mp4"
  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",
    },
    // Additional buttons...
  ]}
/> */}