DNA image update

app/components/shared/IntroductionLayout.jsx

@@ -1,5 +1,4 @@
 // components/shared/IntroductionLayout.jsx
-
 const IntroductionLayout = ({ 
   title = "Introduction and Workflow",
   contentItems = [],
@@ -11,35 +10,37 @@ const IntroductionLayout = ({
   badgeColor = "bg-teal-600"
 }) => {
   return (
-    <section className="py-0 md:py-12 lg:py-10">
-      <div className="container-fluid px-0">
+    <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.14fr_1fr] min-h-[140px] lg:min-h-[280px]">
+        <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-0">
-            <ul className="list-disc list-inside space-y-3 text-gray-600 leading-relaxed lg:px-10 text-justify-center">
+          <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 */}
-          <div 
-            style={{ 
-              backgroundImage: imageUrl ? `url('${imageUrl}')` : 'none',
-              backgroundColor: backgroundColor
-            }}
-          >
+          {/* 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;