leumas-private-shared/src/Components/Jumbotrons/Jumbotron1/Jumbotron1.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 Jumbotron1 = ({ title, subtitle, buttons, background }) => {
  const isVideoBackground = background?.endsWith('.mp4');

  return (
    <section className="relative dark:bg-gray-900 border-b-2 border-blue-400 overflow-hidden">
      {isVideoBackground && (
        <video autoPlay loop muted playsInline className="absolute z-0 w-auto min-w-full min-h-full max-w-none">
          <source src={background} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      )}
      {/* Use an overlay to ensure text is readable on top of the video */}
      <div className={`absolute z-10 w-full h-full ${isVideoBackground ? 'bg-black bg-opacity-50' : ''}`}></div>
      <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 relative z-20">
        <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl dark:text-white text-blue-400">{title}</h1>
        <p className="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">{subtitle}</p>
        <div className="flex flex-col space-y-4 sm:flex-row sm:justify-center 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} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox={button.iconViewBox}>
                  <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={button.iconPathD} />
                </svg>
              )}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Jumbotron1;



// Example Props

// 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",
//       }
//     ]
//   };


// USAGE 

{/* <Jumbotron1 {...jumbotronProps} /> */}