99 lines
3.7 KiB
JavaScript
99 lines
3.7 KiB
JavaScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
|
|
const FeatureCard = ({ icon, title, description }) => (
|
|
<div className="p-6 rounded-2xl shadow-sm border-0 h-full transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-lg group" style={{ backgroundColor: '#f2fcfc' }}>
|
|
<div className="flex items-center space-x-4 mb-4">
|
|
<div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<Image src={icon} alt={title} width={24} height={24} />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-teal-700 leading-tight">{title}</h3>
|
|
</div>
|
|
<div className="relative w-full h-px bg-gray-300 mb-4 overflow-hidden">
|
|
<div className="absolute top-0 left-0 h-full bg-gray-600 w-0 group-hover:w-full transition-all duration-500 ease-in-out"></div>
|
|
</div>
|
|
<p className="text-gray-600 leading-relaxed text-sm text-justify">{description}</p>
|
|
</div>
|
|
);
|
|
|
|
export default function OperifyExome() {
|
|
const features = [
|
|
{
|
|
title: "Deep Coverage",
|
|
desc: "≥100X average depth for high accuracy.",
|
|
icon: "/images/icons/deep-coverage.png"
|
|
},
|
|
{
|
|
title: "Superior Data Quality",
|
|
desc: "≥90% bases with Q30 score.",
|
|
icon: "/images/icons/data-quality.png"
|
|
},
|
|
{
|
|
title: "Comprehensive Variant Detection",
|
|
desc: "Identifies SNVs, Indels, and CNVs.",
|
|
icon: "/images/icons/variant-detection.png"
|
|
},
|
|
{
|
|
title: "Uniparental Disomy Analysis",
|
|
desc: "Detects UPD regions for imprinting disorders.",
|
|
icon: "/images/icons/upd-analysis.png"
|
|
},
|
|
{
|
|
title: "Coverage of Complex Genes",
|
|
desc: "Includes SMN1, SMN2, and DMD.",
|
|
icon: "/images/icons/complex-genes.png"
|
|
},
|
|
{
|
|
title: "Chromosomal Assessment",
|
|
desc: "Detects aneuploidies and determines chromosomal sex.",
|
|
icon: "/images/icons/chromosomal.png"
|
|
},
|
|
{
|
|
title: "Dynamic Reanalysis",
|
|
desc: "Reanalysis as scientific knowledge evolves.",
|
|
icon: "/images/icons/reanalysis.png"
|
|
}
|
|
];
|
|
|
|
const points = [
|
|
"Whole Exome Sequencing (WES) targets the protein-coding regions of the genome, where most disease-causing mutations are found.",
|
|
"With over 7,000 rare diseases identified—80% of which have a genetic basis—WES offers a powerful approach to uncover their causes.",
|
|
"Traditional diagnostic methods can be slow, costly, and inconclusive; WES streamlines the process by delivering broad genetic insights in a single test.",
|
|
"Operify Exome enhances WES by combining comprehensive coverage with advanced interpretation, improving diagnostic yield and patient outcomes."
|
|
];
|
|
|
|
return (
|
|
<section className="mx-auto px-8 pt-10">
|
|
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify Exome</h2>
|
|
|
|
<div className="mb-8">
|
|
<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>
|
|
|
|
<h3 className="text-3xl font-bold text-teal-700 mb-6 leading-tight">Key Features</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{features.map((feature, index) => (
|
|
<FeatureCard
|
|
key={index}
|
|
icon={feature.icon}
|
|
title={feature.title}
|
|
description={feature.desc}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
} |