- {/* Left Column */}
-
- {leftSteps.map((step, index) => (
-
-
-
{step}
-
- {index < leftSteps.length - 1 && (
-
- )}
-
- ))}
-
-
- {/* Right Column */}
-
- {rightSteps.map((step, index) => (
-
-
-
{step}
-
- {index < rightSteps.length - 1 && (
-
- )}
-
- ))}
+
+ {/* SVG Container with responsive sizing */}
+
+ {svgUrl ? (
+ // If SVG URL/path is provided
+

+ ) : svgContent ? (
+ // If SVG content is provided as JSX
+
-
- {/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */}
-
-
+ ) : (
+ // Fallback message
+
+
Please provide SVG content or URL
-
+ )}
diff --git a/app/rna-sequencing/whole-transcriptome-sequencing/components/WTSPipeline.jsx b/app/rna-sequencing/whole-transcriptome-sequencing/components/WTSPipeline.jsx
new file mode 100644
index 0000000..ec28de5
--- /dev/null
+++ b/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 (
+
+
+
+ {title}
+
+
+ {/* SVG Flowchart Container */}
+
+
+
+ {/* SVG Container with responsive sizing */}
+
+ {svgUrl ? (
+ // If SVG URL/path is provided
+

+ ) : svgContent ? (
+ // If SVG content is provided as JSX
+
+ ) : (
+ // Fallback message
+
+
Please provide SVG content or URL
+
+ )}
+
+
+
+
+
+
+ );
+};
+
+export default WTSPipeline;
\ No newline at end of file
diff --git a/app/rna-sequencing/whole-transcriptome-sequencing/page.js b/app/rna-sequencing/whole-transcriptome-sequencing/page.js
index da57477..1305d4c 100644
--- a/app/rna-sequencing/whole-transcriptome-sequencing/page.js
+++ b/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() {
/>
+
diff --git a/package-lock.json b/package-lock.json
index 88dad63..9805eae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "nextjs",
"version": "0.1.0",
"dependencies": {
+ "@heroicons/react": "^2.2.0",
"lucide-react": "^0.525.0",
"next": "^15.2.0",
"nodemailer": "^7.0.3",
@@ -214,6 +215,15 @@
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
}
},
+ "node_modules/@heroicons/react": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+ "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": ">= 16 || ^19.0.0-rc"
+ }
+ },
"node_modules/@humanfs/core": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
diff --git a/package.json b/package.json
index 00aa678..f596899 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
+ "@heroicons/react": "^2.2.0",
"lucide-react": "^0.525.0",
"next": "^15.2.0",
"nodemailer": "^7.0.3",
diff --git a/public/images/flowchart/circularrna.svg b/public/images/flowchart/circularrna.svg
new file mode 100644
index 0000000..e1010b3
--- /dev/null
+++ b/public/images/flowchart/circularrna.svg
@@ -0,0 +1,36 @@
+
diff --git a/public/images/flowchart/degradomerna.svg b/public/images/flowchart/degradomerna.svg
new file mode 100644
index 0000000..bb8f164
--- /dev/null
+++ b/public/images/flowchart/degradomerna.svg
@@ -0,0 +1,38 @@
+
diff --git a/public/images/flowchart/denovo.svg b/public/images/flowchart/denovo.svg
new file mode 100644
index 0000000..1b1218a
--- /dev/null
+++ b/public/images/flowchart/denovo.svg
@@ -0,0 +1,25 @@
+
diff --git a/public/images/flowchart/epigenomics.svg b/public/images/flowchart/epigenomics.svg
new file mode 100644
index 0000000..ae5b006
--- /dev/null
+++ b/public/images/flowchart/epigenomics.svg
@@ -0,0 +1,38 @@
+
diff --git a/public/images/flowchart/genoemapping.svg b/public/images/flowchart/genoemapping.svg
new file mode 100644
index 0000000..b0bba98
--- /dev/null
+++ b/public/images/flowchart/genoemapping.svg
@@ -0,0 +1,32 @@
+
diff --git a/public/images/flowchart/isoseqrna.svg b/public/images/flowchart/isoseqrna.svg
new file mode 100644
index 0000000..669534f
--- /dev/null
+++ b/public/images/flowchart/isoseqrna.svg
@@ -0,0 +1,32 @@
+
diff --git a/public/images/flowchart/metagenomics.svg b/public/images/flowchart/metagenomics.svg
new file mode 100644
index 0000000..621df6e
--- /dev/null
+++ b/public/images/flowchart/metagenomics.svg
@@ -0,0 +1,40 @@
+
diff --git a/public/images/flowchart/metatranscriptomicsrna.svg b/public/images/flowchart/metatranscriptomicsrna.svg
new file mode 100644
index 0000000..3c4bbc4
--- /dev/null
+++ b/public/images/flowchart/metatranscriptomicsrna.svg
@@ -0,0 +1,51 @@
+
diff --git a/public/images/flowchart/mrna.svg b/public/images/flowchart/mrna.svg
new file mode 100644
index 0000000..2bcd5be
--- /dev/null
+++ b/public/images/flowchart/mrna.svg
@@ -0,0 +1,40 @@
+
diff --git a/public/images/flowchart/resequencing.svg b/public/images/flowchart/resequencing.svg
new file mode 100644
index 0000000..9384557
--- /dev/null
+++ b/public/images/flowchart/resequencing.svg
@@ -0,0 +1,32 @@
+
diff --git a/public/images/flowchart/singlecell.svg b/public/images/flowchart/singlecell.svg
new file mode 100644
index 0000000..0e8c7c9
--- /dev/null
+++ b/public/images/flowchart/singlecell.svg
@@ -0,0 +1,32 @@
+
diff --git a/public/images/flowchart/singlecellrna.svg b/public/images/flowchart/singlecellrna.svg
new file mode 100644
index 0000000..a8ac301
--- /dev/null
+++ b/public/images/flowchart/singlecellrna.svg
@@ -0,0 +1,40 @@
+
diff --git a/public/images/flowchart/smallrna.svg b/public/images/flowchart/smallrna.svg
new file mode 100644
index 0000000..3b437dc
--- /dev/null
+++ b/public/images/flowchart/smallrna.svg
@@ -0,0 +1,40 @@
+
diff --git a/public/images/flowchart/totalrna.svg b/public/images/flowchart/totalrna.svg
new file mode 100644
index 0000000..dd13db0
--- /dev/null
+++ b/public/images/flowchart/totalrna.svg
@@ -0,0 +1,40 @@
+
diff --git a/public/images/homepage-1/service/BioinformaticsAnalysis.svg b/public/images/homepage-1/service/BioinformaticsAnalysis.svg
new file mode 100644
index 0000000..038f0d4
--- /dev/null
+++ b/public/images/homepage-1/service/BioinformaticsAnalysis.svg
@@ -0,0 +1,14 @@
+
+
\ No newline at end of file