UI styling update
This commit is contained in:
mukesh13
@ -32,12 +32,12 @@ const LongReadComparison = () => {
|
||||
}
|
||||
];
|
||||
|
||||
const formatContent = (content, isHighlighted = false) => {
|
||||
const formatContent = (content) => {
|
||||
if (content.includes("Long Read Length")) {
|
||||
return (
|
||||
<div>
|
||||
<span className="text-blue-600 font-medium">Long Read Length with High Accuracy</span>
|
||||
{content.replace("Long Read Length with High Accuracy", "")}
|
||||
<span className="text-blue-600 font-medium">Long Read Length with High Accuracy:</span>
|
||||
{content.replace("Long Read Length with High Accuracy:", "")}
|
||||
</div>
|
||||
);
|
||||
} else if (content.includes("NO GC Bias")) {
|
||||
@ -59,9 +59,9 @@ const LongReadComparison = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-12 bg-white">
|
||||
<div className="container-fluid px-4 lg:px-12">
|
||||
<h2 className="text-2xl lg:text-3xl text-gray-700 mb-8">
|
||||
<section className="py-4 bg-gray-50">
|
||||
<div className="container max-w-none px-6">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-8">
|
||||
Comparison of Sequencers
|
||||
</h2>
|
||||
|
||||
@ -77,137 +77,112 @@ const LongReadComparison = () => {
|
||||
</div>
|
||||
|
||||
{/* Detailed Comparison Table Section */}
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl lg:text-2xl text-gray-700 mb-6 text-center">
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-600 mb-4">
|
||||
Comparison and specification of sequencing platforms between short-read and long-read sequencing on WGS
|
||||
</h3>
|
||||
<div className="mb-6 text-justify">
|
||||
<p className="text-gray-600 leading-relaxed text-base">
|
||||
Different sequencing platforms have unique characteristics and applications. The comparison below highlights key differences:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col xl:flex-row gap-8">
|
||||
{/* Mobile Card Layout (hidden on desktop) */}
|
||||
<div className="xl:hidden space-y-6">
|
||||
{/* Mobile Table Header */}
|
||||
<div className="bg-gray-100 rounded-lg p-4 mb-6">
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
<div className="font-semibold text-gray-700 text-center text-lg">Platform Types</div>
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div className="font-medium text-gray-600 text-sm">Illumina NovaSeq 6000</div>
|
||||
<div className="font-medium text-gray-600 text-sm">PacBio Sequel II/IIe</div>
|
||||
<div className="font-medium text-gray-600 text-sm">Nanopore PromethION</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{comparisonData.map((row, index) => (
|
||||
<div key={index} className="bg-white border border-gray-300 rounded-lg shadow-sm">
|
||||
<div className="bg-gray-100 px-4 py-3 rounded-t-lg">
|
||||
<h4 className="font-semibold text-gray-700">{row.category}</h4>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<h5 className="font-medium text-sm text-gray-600 mb-2">Illumina NovaSeq 6000</h5>
|
||||
<div className="text-sm text-gray-600 whitespace-pre-line leading-relaxed">
|
||||
<div className="overflow-x-auto mb-8 justify-center">
|
||||
<table className="w-full border-collapse border border-gray-300 text-sm bg-white shadow-sm">
|
||||
<thead>
|
||||
<tr className="bg-teal-50">
|
||||
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
|
||||
Platform Types
|
||||
</th>
|
||||
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
|
||||
Illumina NovaSeq 6000
|
||||
</th>
|
||||
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
|
||||
PacBio Sequel II/IIe
|
||||
</th>
|
||||
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
|
||||
Nanopore PromethION
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{comparisonData.map((row, index) => (
|
||||
<tr key={index} className={`${index % 2 === 1 ? 'bg-gray-50' : 'bg-white'} hover:bg-teal-25 transition-colors`}>
|
||||
<td className="border border-gray-300 px-4 py-3 align-top text-gray-600 font-medium text-base">
|
||||
{row.category}
|
||||
</td>
|
||||
<td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
|
||||
<div className="whitespace-pre-line">
|
||||
{row.illumina}
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<h5 className="font-medium text-sm text-gray-600 mb-2">PacBio Sequel II/IIe</h5>
|
||||
<div className="text-sm text-gray-600 whitespace-pre-line leading-relaxed">
|
||||
</td>
|
||||
<td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
|
||||
<div className="whitespace-pre-line">
|
||||
{formatContent(row.pacbio)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium text-sm text-gray-600 mb-2">Nanopore PromethION</h5>
|
||||
<div className="text-sm text-gray-600 whitespace-pre-line leading-relaxed">
|
||||
</td>
|
||||
<td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
|
||||
<div className="whitespace-pre-line">
|
||||
{formatContent(row.nanopore)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Desktop Table Layout (hidden on mobile) */}
|
||||
<div className="hidden xl:flex flex-1">
|
||||
<table className="w-full border-collapse border border-gray-300 bg-white shadow-lg rounded-lg">
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
<th className="border border-gray-300 p-3 text-left font-semibold text-gray-700">
|
||||
Platform Types
|
||||
</th>
|
||||
<th className="border border-gray-300 p-3 text-center font-semibold text-gray-700">
|
||||
Illumina NovaSeq 6000
|
||||
</th>
|
||||
<th className="border border-gray-300 p-3 text-center font-semibold text-gray-700">
|
||||
PacBio Sequel II/IIe
|
||||
</th>
|
||||
<th className="border border-gray-300 p-3 text-center font-semibold text-gray-700">
|
||||
Nanopore PromethION
|
||||
</th>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{comparisonData.map((row, index) => (
|
||||
<tr key={index} className={index % 2 === 0 ? "bg-white" : "bg-gray-50"}>
|
||||
<td className="border border-gray-300 p-3 font-medium text-gray-700 bg-gray-50">
|
||||
{row.category}
|
||||
</td>
|
||||
<td className="border border-gray-300 p-3 text-sm text-gray-600">
|
||||
<div className="whitespace-pre-line leading-relaxed">
|
||||
{row.illumina}
|
||||
</div>
|
||||
</td>
|
||||
<td className="border border-gray-300 p-3 text-sm text-gray-600">
|
||||
<div className="whitespace-pre-line leading-relaxed">
|
||||
{formatContent(row.pacbio)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="border border-gray-300 p-3 text-sm text-gray-600">
|
||||
<div className="whitespace-pre-line leading-relaxed">
|
||||
{formatContent(row.nanopore)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Right side - Key Highlights */}
|
||||
<div className="xl:w-80 flex-shrink-0">
|
||||
<div className="bg-gradient-to-br from-teal-50 to-blue-50 rounded-lg p-6 h-full">
|
||||
<h3 className="text-lg font-semibold text-gray-700 mb-4 border-b border-teal-200 pb-2">
|
||||
Key Technology Highlights
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<h4 className="font-medium text-green-600 mb-2">Oxford Nanopore</h4>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
<li>• Real-time sequencing via protein nanopores</li>
|
||||
<li>• Portable devices for field diagnostics</li>
|
||||
<li>• Direct base modification detection</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<h4 className="font-medium text-green-600 mb-2">PacBio SMRT</h4>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
<li>• Hi-Fi reads with 99.9% accuracy</li>
|
||||
<li>• Excellent for complex genomes</li>
|
||||
<li>• Haplotype resolution in polyploids</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<h4 className="font-medium text-green-600 mb-2">Illumina</h4>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
<li>• High accuracy for SNVs and InDels</li>
|
||||
<li>• Cost-effective for large studies</li>
|
||||
<li>• Mature bioinformatics tools</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* Key Technology Highlights */}
|
||||
<div className="bg-gradient-to-br from-teal-50 to-blue-50 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-600 mb-4 border-b border-teal-200 pb-2">
|
||||
Key Technology Highlights
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<h4 className="font-medium text-teal-600 mb-2">Oxford Nanopore</h4>
|
||||
<ul className="space-y-1">
|
||||
{["Real-time sequencing via protein nanopores", "Portable devices for field diagnostics", "Direct base modification detection"].map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-sm text-gray-600">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<h4 className="font-medium text-teal-600 mb-2">PacBio SMRT</h4>
|
||||
<ul className="space-y-1">
|
||||
{["Hi-Fi reads with 99.9% accuracy", "Excellent for complex genomes", "Haplotype resolution in polyploids"].map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-sm text-gray-600">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<h4 className="font-medium text-teal-600 mb-2">Illumina</h4>
|
||||
<ul className="space-y-1">
|
||||
{["High accuracy for SNVs and InDels", "Cost-effective for large studies", "Mature bioinformatics tools"].map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-sm text-gray-600">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user