Flowchart update

app/components/shared/BioinformaticsLayout.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
+
+const BioinformaticsLayout = ({ 
+  title = "Bioinformatics Pipeline",
+  pipelineSteps = [],
+  sectionBackground = "bg-gray-50",
+  cardBackground = "bg-white",
+  titleColor = "text-gray-600",
+  stepBackground = "bg-[#e8f5f3]",
+  stepTextColor = "text-teal-600",
+  arrowColor = "text-gray-600"
+}) => {
+  // For two-column layout, split steps appropriately
+  const leftColumnSteps = pipelineSteps.slice(0, 4);
+  const rightColumnSteps = pipelineSteps.slice(4).reverse();
+
+  return (
+    <section className={`py-6 sm:py-8 lg:py-8 ${sectionBackground}`}>
+      <div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
+        <h2 className={`${titleColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal`}>
+          {title}
+        </h2>
+
+        {/* Pipeline Flowchart */}
+        <div className={`${cardBackground} 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">
+                    {pipelineSteps.map((step, index) => (
+                      <React.Fragment key={index}>
+                        <div className={`${stepBackground} rounded-lg p-3 w-full text-center`}>
+                          <h3 className={`text-xs font-medium ${stepTextColor}`}>{step}</h3>
+                        </div>
+                        {index < pipelineSteps.length - 1 && (
+                          <ArrowDown className={`w-5 h-5 ${arrowColor}`} />
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Tablet and 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-2 sm:space-y-3">
+                      {leftColumnSteps.map((step, index) => (
+                        <React.Fragment key={index}>
+                          <div className={`${stepBackground} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center`}>
+                            <h3 className={`text-xs sm:text-sm font-medium ${stepTextColor}`}>{step}</h3>
+                          </div>
+                          {index < leftColumnSteps.length - 1 && (
+                            <ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </div>
+
+                    {/* Right Column */}
+                    <div className="flex flex-col items-center space-y-2 sm:space-y-3">
+                      {rightColumnSteps.map((step, index) => (
+                        <React.Fragment key={index}>
+                          <div className={`${stepBackground} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center`}>
+                            <h3 className={`text-xs sm:text-sm font-medium ${stepTextColor}`}>{step}</h3>
+                          </div>
+                          {index < rightColumnSteps.length - 1 && (
+                            <ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
+                  <div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
+                    <ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default BioinformaticsLayout;