leumas-private-shared/src/Components/Jumbotrons/Jumbotron4/Jumbotron4.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 Jumbotron4 = ({ sections }) => {
  return (
    <section className="bg-white dark:bg-gray-900">
      <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16">
        {/* Main Section */}
        {sections.map((section, index) => (
          <React.Fragment key={index}>
            {/* Main Content */}
            <div className={`bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8 md:p-12 mb-8`}>
              <a href={section.badgeLink} className={`${section.badgeBgColor} ${section.badgeTextColor} text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-md mb-2`}>
                {section.badgeIcon && (
                  <svg className={`${section.badgeIconSize} me-1.5`} aria-hidden="true" fill="currentColor" viewBox={section.badgeIconViewBox}>
                    <path d={section.badgeIconPath}></path>
                  </svg>
                )}
                {section.badgeText}
              </a>
              <h1 className="text-gray-900 dark:text-white text-3xl md:text-5xl font-extrabold mb-2">{section.title}</h1>
              <p className="text-lg font-normal text-gray-500 dark:text-gray-400 mb-6">{section.subtitle}</p>
              {section.buttons.map((button, btnIndex) => (
                <a key={btnIndex} href={button.href} className={button.className}>
                  {button.text}
                  {button.icon && (
                    <svg className={button.iconClassName} aria-hidden="true" fill="none" viewBox={button.iconViewBox}>
                      <path d={button.iconPathD} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" stroke="currentColor"></path>
                    </svg>
                  )}
                </a>
              ))}
            </div>
          </React.Fragment>
        ))}

        {/* Additional Content Sections */}
        <div className="grid md:grid-cols-2 gap-8">
          {sections.flatMap(section => section.additionalContent || []).map((content, contentIndex) => (
            <div key={contentIndex} className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8 md:p-12">
              <a href={content.link} className={`${content.badgeBgColor} ${content.badgeTextColor} text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-md mb-2`}>
                {content.badgeIcon && (
                  <svg className="w-2.5 h-2.5 me-1.5" fill="currentColor" viewBox={content.badgeIconViewBox}>
                    <path d={content.badgeIconPath} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"></path>
                  </svg>
                )}
                {content.badgeText}
              </a>
              <h2 className="text-gray-900 dark:text-white text-3xl font-extrabold mb-2">{content.title}</h2>
              <p className="text-lg font-normal text-gray-500 dark:text-gray-400 mb-4">{content.subtitle}</p>
              <a href={content.readMoreLink} className="text-blue-600 dark:text-blue-500 hover:underline font-medium text-lg">
                Read more
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Jumbotron4;


// const sectionsProps = {
//     sections: [
//       {
//         badgeText: "Tutorial",
//         badgeLink: "#",
//         badgeBgColor: "bg-blue-100",
//         badgeTextColor: "text-blue-800",
//         badgeIconPath: "M1 5h12m0 0L9 1m4 4L9 9",
//         badgeIconViewBox: "0 0 14 10",
//         badgeIconSize: "w-2.5 h-2.5",
//         title: "How to quickly deploy a static website",
//         subtitle: "Static websites are now used to bootstrap lots of websites...",
//         buttons: [
//           {
//             text: "Read more",
//             href: "#",
//             className: "inline-flex justify-center items-center py-2.5 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",
//           }
//         ],
//         additionalContent: [
//           {
//             badgeText: "Design",
//             badgeLink: "#",
//             badgeBgColor: "bg-green-100",
//             badgeTextColor: "text-green-800",
//             badgeIconPath: "...",
//             title: "Start with Flowbite Design System",
//             subtitle: "Static websites are now used to bootstrap lots of websites...",
//             readMoreLink: "#",
//           },
//           {
//             badgeText: "Design",
//             badgeLink: "#",
//             badgeBgColor: "bg-green-100",
//             badgeTextColor: "text-green-800",
//             badgeIconPath: "...",
//             title: "Start with Flowbite Design System",
//             subtitle: "Static websites are now used to bootstrap lots of websites...",
//             readMoreLink: "#",
//           },
//           // Additional cards...
//         ]
//       },
//       // Additional sections...
//     ]
//   };

//   <Jumbotron4 {...sectionsProps} />