Flowchart update

app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
+
+const MRNAPipeline = ({
+  title = "Bioinformatics Pipeline",
+  leftSteps = [
+    "Raw Sequencing Data (fastq files)",
+    "Quality Control and Preprocessing of Data", 
+    "High Quality Sequencing Data (fastq file)",
+    "Alignment to Reference Genome",
+    "Transcript Assembly"
+  ],
+  rightSteps = [
+    "Downstream Analysis",
+    "Differential Expression Profiling",
+    "Annotation", 
+    "Transcript Expression Profiling",
+    "Transcript Assembly Validation"
+  ],
+  backgroundColor = "bg-gray-50",
+  cardColor = "bg-gray-300",
+  textColor = "text-teal-600",
+  arrowColor = "text-gray-600",
+  className = "",
+  cardClassName = "",
+  titleClassName = ""
+}) => {
+  // Combine steps for mobile layout
+  const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()];
+
+  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">
+        <h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
+          {title}
+        </h2>
+
+        {/* Pipeline Flowchart */}
+        <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-5xl">
+              <div className="relative">
+                {/* Mobile Layout - Single Column */}
+                <div className="block sm:hidden">
+                  <div className="flex flex-col items-center space-y-3">
+                    {mobileSteps.map((step, index) => (
+                      <React.Fragment key={index}>
+                        <div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
+                          <h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
+                        </div>
+                        {index < mobileSteps.length - 1 && (
+                          <ArrowDown className={`w-5 h-5 ${arrowColor}`} />
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Desktop Layout - Two Columns */}
+                <div className="hidden sm:block">
+                  <div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+                    {/* Left Column */}
+                    <div className="flex flex-col items-center space-y-3">
+                      {leftSteps.map((step, index) => (
+                        <React.Fragment key={index}>
+                          <div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
+                            <h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
+                          </div>
+                          {index < leftSteps.length - 1 && (
+                            <ArrowDown className={`w-6 h-6 ${arrowColor}`} />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </div>
+
+                    {/* Right Column */}
+                    <div className="flex flex-col items-center space-y-3">
+                      {rightSteps.map((step, index) => (
+                        <React.Fragment key={index}>
+                          <div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
+                            <h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
+                          </div>
+                          {index < rightSteps.length - 1 && (
+                            <ArrowUp className={`w-6 h-6 ${arrowColor}`} />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */}
+                  <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
+                    <ArrowRight className={`w-8 h-8 ${arrowColor}`} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default MRNAPipeline;

app/rna-sequencing/mrna-sequencing/page.js

@@ -5,6 +5,7 @@ import MRNAAdvantages from './components/MRNAAdvantages';
 import MRNAApplications from './components/MRNAApplications';
 import MRNASpecifications from './components/MRNASpecifications';
 import PageLayout from '../../components/Layout/PageLayout';
+import MRNAPipeline from './components/MRNAPipeline';
 
 export default function MRNASequencingPage() {
   const breadcrumbs = [
@@ -21,6 +22,7 @@ export default function MRNASequencingPage() {
       />
       <MRNAIntroduction />
       <MRNAAdvantages />
+      <MRNAPipeline/>
       <MRNAApplications />
       <MRNASpecifications />
     </PageLayout>