46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
// components/shared/IntroductionLayout.jsx
|
|
const IntroductionLayout = ({
|
|
title = "Introduction and Workflow",
|
|
contentItems = [],
|
|
imageUrl,
|
|
imageAlt = "",
|
|
badgeText,
|
|
badgeSubtext,
|
|
backgroundColor = "#f8f9fa",
|
|
badgeColor = "bg-teal-600"
|
|
}) => {
|
|
return (
|
|
<section className="py-0 md:py-12 lg:py-10 w-full">
|
|
<div className="w-full max-w-full px-0">
|
|
<h2 className="text-2xl lg:text-3xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-4">
|
|
{title}
|
|
</h2>
|
|
|
|
{/* Two column layout */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] w-full gap-4">
|
|
{/* Left side content */}
|
|
<div className="px-6 lg:px-9 py-6 lg:py-8 flex items-start">
|
|
<ul className="list-disc list-inside space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base text-justify">
|
|
{contentItems.map((item, index) => (
|
|
<li key={index}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Right side image - increased image size */}
|
|
<div className="flex items-center justify-center p-2 lg:p-4 w-full">
|
|
{imageUrl && (
|
|
<img
|
|
src={imageUrl}
|
|
alt={imageAlt}
|
|
className="object-contain"
|
|
style={{ height: '350px', width: '500px' }}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
export default IntroductionLayout; |