Flowchart Updated

app/rna-sequencing/lncrna-sequencing/components/LncRNABioinformatics.jsx

@@ -1,28 +1,51 @@
-// app/rna-sequencing/lncrna-sequencing/components/LncRNABioinformatics.jsx
+import React from 'react';
 
-const LncRNABioinformatics = () => {
+const LncRNABioinformatics = ({
+  title = "Bioinformatics Pipeline",
+  svgContent = null, // Pass your SVG content here as JSX
+  svgUrl = "/images/flowchart/totalrna.svg",
+  backgroundColor = "bg-gray-50",
+  textColor = "text-gray-700",
+  className = "",
+  titleClassName = "",
+  svgClassName = "",
+  containerClassName = ""
+}) => {
   return (
-    <section className="py-8 lg:py-12 bg-gray-50">
-      <div className="container mx-auto max-w-none px-4 lg:px-6">
-        <h2 className="text-2xl lg:text-3xl text-gray-700 text-left pb-2 mb-6 lg:mb-6">
-          Bioinformatics Pipeline
+    <section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
+      <div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
+        <h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
+          {title}
         </h2>
-        
-        {/* Pipeline Image */}
-        <div className="bg-white rounded-xl shadow-lg p-6 lg:p-8">
+
+        {/* SVG Flowchart Container */}
+        <div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
           <div className="flex justify-center">
-            <img 
-              src="/images/lncrna-bioinformatics-pipeline.jpg" 
-              alt="lncRNA Sequencing Bioinformatics Pipeline Workflow"
-              className="max-w-full h-auto rounded-lg"
-            />
-          </div>
-          
-          {/* Pipeline Description */}
-          <div className="mt-6 text-center">
-            <p className="text-gray-600 text-sm lg:text-base">
-              lncRNA sequencing bioinformatics pipeline for long non-coding RNA analysis and expression profiling
-            </p>
+            <div className="w-full max-w-6xl">
+              {/* SVG Container with responsive sizing */}
+              <div className={`w-full ${svgClassName}`}>
+                {svgUrl ? (
+                  // If SVG URL/path is provided
+                  <img 
+                    src={svgUrl} 
+                    alt="Flowchart diagram"
+                    className="w-full h-auto object-contain"
+                  />
+                ) : svgContent ? (
+                  // If SVG content is provided as JSX
+                  <div className="w-full">
+                    <div className="w-full">
+                      {svgContent}
+                    </div>
+                  </div>
+                ) : (
+                  // Fallback message
+                  <div className="flex items-center justify-center h-40 text-gray-500">
+                    <p>Please provide SVG content or URL</p>
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -30,4 +53,4 @@ const LncRNABioinformatics = () => {
   );
 };
 
-export default LncRNABioinformatics
+export default LncRNABioinformatics;