UI styling update

app/components/shared/IntroductionLayout.jsx

@@ -1,46 +1,75 @@
-// components/shared/IntroductionLayout.jsx
-const IntroductionLayout = ({ 
-  title = "Introduction and Workflow",
-  contentItems = [],
+import React from 'react';
+
+const CombinedWorkflowLayout = ({ 
+  introTitle = "Introduction and Workflow",
+  advantageTitle = "Advantage",
+  introItems = [],
+  advantageItems = [],
   imageUrl,
-  imageAlt = "",
-  badgeText,
-  badgeSubtext,
-  backgroundColor = "#f8f9fa",
-  badgeColor = "bg-teal-600"
+  imageAlt = "Workflow diagram"
 }) => {
   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>
+    <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">
         
-        {/* 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>
+        {/* 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>
-          </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>
+          </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>
-    </section>
+    </div>
   );
 };
-export default IntroductionLayout;
+
+export default CombinedWorkflowLayout;