Docker config

app/components/shared/IntroductionLayout.jsx

@@ -0,0 +1,45 @@
+// 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">
+      <div className="container-fluid 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.14fr_1fr] min-h-[140px] lg:min-h-[280px]">
+          {/* Left side content */}
+          <div className="px-6 lg:px-9 py-6 lg:py-0">
+            <ul className="list-disc list-inside space-y-3 text-gray-600 leading-relaxed lg:px-10 text-justify-center">
+              {contentItems.map((item, index) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+          </div>
+          
+          {/* Right side image */}
+          <div 
+            style={{ 
+              backgroundImage: imageUrl ? `url('${imageUrl}')` : 'none',
+              backgroundColor: backgroundColor
+            }}
+          >
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default IntroductionLayout;