UI styling update
This commit is contained in:
mukesh13
@ -14,52 +14,48 @@ export default function OperifyExomeMito() {
|
||||
{ genome: "Mitochondrial genome", coverage: "37 genes" }
|
||||
];
|
||||
|
||||
const points = [
|
||||
"The Operify ExomeMito Panel offers a unified solution by integrating whole exome sequencing with complete mitochondrial genome analysis—addressing both nuclear and mitochondrial causes of disease.",
|
||||
"This combined approach is especially valuable in diagnosing complex, multisystemic, and rare disorders, where variants may exist across both genomes.",
|
||||
"Mitochondrial disorders, though individually rare, are clinically significant, affecting approximately 1 in 5,000 individuals and often missed in standard testing.",
|
||||
"Studies show that adding mitochondrial sequencing to exome testing increases diagnostic yield by up to 20%, offering greater clarity and clinical confidence. (PMID: 30369941)",
|
||||
"While screening for rare genetic disorders, it's essential not to overlook the rarest among them-mitochondrial disorders, which occur in approximately 1 in 5,000 individuals. Although individually rare, their cumulative impact is significant in the context of rare disease diagnostics. Multiple studies have demonstrated a substantial increase in diagnostic yield—up to 20%—when mitochondrial genome sequencing is performed alongside whole exome sequencing. Reference: PMID: 30369941"
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto px-10 pt-12">
|
||||
<h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Operify ExomeMito</h2>
|
||||
<section className="mx-auto px-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify ExomeMito</h2>
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-4">Boost diagnostic yield with Exome + Mito Sequencing</h3>
|
||||
|
||||
<div className="mb-8">
|
||||
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
|
||||
The Operify ExomeMito Panel offers a unified solution by integrating whole exome sequencing
|
||||
with complete mitochondrial genome analysis—addressing both nuclear and mitochondrial causes
|
||||
of disease.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
|
||||
This combined approach is especially valuable in diagnosing complex, multisystemic, and rare
|
||||
disorders, where variants may exist across both genomes.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
|
||||
Mitochondrial disorders, though individually rare, are clinically significant, affecting
|
||||
approximately 1 in 5,000 individuals and often missed in standard testing.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
|
||||
Studies show that adding mitochondrial sequencing to exome testing increases diagnostic
|
||||
yield by up to 20%, offering greater clarity and clinical confidence. <em>(PMID: 30369941)</em>
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed text-base text-justify">
|
||||
While screening for rare genetic disorders, it's essential not to overlook the rarest among
|
||||
them-mitochondrial disorders, which occur in approximately 1 in 5,000 individuals. Although
|
||||
individually rare, their cumulative impact is significant in the context of rare disease
|
||||
diagnostics. Multiple studies have demonstrated a substantial increase in diagnostic yield—up
|
||||
to 20%—when mitochondrial genome sequencing is performed alongside whole exome sequencing.
|
||||
<em>Reference: PMID: 30369941</em>
|
||||
</p>
|
||||
<div className="mb-6">
|
||||
<ul className="space-y-4">
|
||||
{points.map((point, idx) => (
|
||||
<li key={idx} className="flex items-start">
|
||||
<span
|
||||
className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<p className="text-gray-600 leading-relaxed text-base text-justify">
|
||||
{point}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h3 className="text-2xl font-semibold text-gray-700 mb-4">Genome Coverage</h3>
|
||||
<h3 className="text-2xl font-semibold text-teal-700 mb-4">Genome Coverage</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse border border-gray-300 rounded-lg">
|
||||
<thead>
|
||||
<tr className="bg-gray-50">
|
||||
<th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Genome</th>
|
||||
<th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Coverage</th>
|
||||
<tr className="bg-teal-50">
|
||||
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Genome</th>
|
||||
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Coverage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{genomeCoverage.map((item, idx) => (
|
||||
<tr key={idx} className="hover:bg-gray-50">
|
||||
<tr key={idx} className="hover:bg-teal-50">
|
||||
<td className="border border-gray-300 px-6 py-3 text-gray-700 font-medium">{item.genome}</td>
|
||||
<td className="border border-gray-300 px-6 py-3 text-gray-600">{item.coverage}</td>
|
||||
</tr>
|
||||
@ -69,18 +65,18 @@ export default function OperifyExomeMito() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-semibold text-gray-700 mb-4">Key Features</h3>
|
||||
<h3 className="text-2xl font-semibold text-teal-700 mb-4">Key Features</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse border border-gray-300 rounded-lg">
|
||||
<thead>
|
||||
<tr className="bg-gray-50">
|
||||
<th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Feature</th>
|
||||
<th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Description</th>
|
||||
<tr className="bg-teal-50">
|
||||
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Feature</th>
|
||||
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{features.map((feature, idx) => (
|
||||
<tr key={idx} className="hover:bg-gray-50">
|
||||
<tr key={idx} className="hover:bg-teal-50">
|
||||
<td className="border border-gray-300 px-6 py-3 text-gray-700 font-medium">{feature.title}</td>
|
||||
<td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user