Flowchart Updated

app/rna-sequencing/whole-transcriptome-sequencing/components/WTSPipeline.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+const WTSPipeline = ({
+  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-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>
+
+        {/* SVG Flowchart Container */}
+        <div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
+          <div className="flex justify-center">
+            <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>
+    </section>
+  );
+};
+
+export default WTSPipeline;

app/rna-sequencing/whole-transcriptome-sequencing/page.js

@@ -2,6 +2,7 @@
 import TitleBar from '../../components/shared/TitleBar';
 import WTSIntroduction from './components/WTSIntroduction';
 import WTSAdvantages from './components/WTSAdvantages';
+import WTSPipeline from './components/WTSPipeline';
 import WTSApplications from './components/WTSApplications';
 import WTSSpecifications from './components/WTSSpecifications';
 import PageLayout from '../../components/Layout/PageLayout';
@@ -21,6 +22,7 @@ export default function WholeTranscriptomeSequencingPage() {
       />
       <WTSIntroduction />
       <WTSAdvantages />
+      <WTSPipeline/>
       <WTSApplications />
       <WTSSpecifications />
     </PageLayout>