75 lines
2.5 KiB
JavaScript
75 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
|
|
const CombinedWorkflowLayout = ({
|
|
introTitle = "Introduction and Workflow",
|
|
advantageTitle = "Advantage",
|
|
introItems = [],
|
|
advantageItems = [],
|
|
imageUrl,
|
|
imageAlt = "Workflow diagram"
|
|
}) => {
|
|
return (
|
|
<div className="w-full bg-white">
|
|
{/* Main container with two columns */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
|
|
|
|
{/* Left Column - Content */}
|
|
<div className="px-6 lg:px-12 py-8">
|
|
{/* Introduction Section */}
|
|
<section className="mb-8">
|
|
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
|
{introTitle}
|
|
</h2>
|
|
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
|
{introItems.map((item, index) => (
|
|
<li key={index} className="flex items-start">
|
|
<span
|
|
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
|
style={{backgroundColor: '#faae31'}}
|
|
></span>
|
|
<span className="text-justify">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
|
|
{/* Advantage Section */}
|
|
<section>
|
|
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
|
{advantageTitle}
|
|
</h2>
|
|
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
|
{advantageItems.map((item, index) => (
|
|
<li key={index} className="flex items-start">
|
|
<span
|
|
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
|
style={{backgroundColor: '#faae31'}}
|
|
></span>
|
|
<span className="text-justify">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
|
|
{/* Right Column - Workflow Image */}
|
|
<div className="relative flex items-center justify-center p-4">
|
|
{imageUrl ? (
|
|
<img
|
|
src={imageUrl}
|
|
alt={imageAlt}
|
|
className="max-w-full max-h-full object-contain"
|
|
/>
|
|
) : (
|
|
<div className="text-gray-400 text-center">
|
|
<p>Workflow image will appear here</p>
|
|
<p className="text-sm mt-2">Please provide the imageUrl prop</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CombinedWorkflowLayout; |