mukeshs/operify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update styling

Browse Source
This commit is contained in:
mukesh13
2025-09-07 21:29:21 +05:30
parent e4ef985e69
commit 3a944c38e9
25 changed files with 438 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/health/rare-disorders/exomemito/components/OperifyExomeMito.jsx
View File

@ -1,12 +1,58 @@
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 OperifyExomeMito() {
const features = [
{ title: "High Mean Target Depth", desc: "≥100X coverage for reliable detection." },
{ title: "High Base Quality", desc: "≥90% of bases with Q30 score." },
{ title: "Scope of Test", desc: "Covers SNVs/Indels, CNVs in nuclear and mitochondrial genome." },
{ title: "Uniparental Disomy", desc: "Detects regions important in rare recessive conditions." },
{ title: "Homologous Gene Analysis", desc: "Includes SMN1, SMN2, DMD." },
{ title: "Aneuploidy & Ploidy Estimation", desc: "Detects abnormal chromosome numbers and sex karyotype." },
{ title: "Reanalysis & Reclassification", desc: "Updates based on latest scientific knowledge." }
{
title: "High Mean Target Depth",
desc: "≥100X coverage for reliable detection.",
icon: "/images/icons/deep-coverage.png"
},
{
title: "High Base Quality",
desc: "≥90% of bases with Q30 score.",
icon: "/images/icons/data-quality.png"
},
{
title: "Scope of Test",
desc: "Covers SNVs/Indels, CNVs in nuclear and mitochondrial genome.",
icon: "/images/icons/scope-test.png"
},
{
title: "Uniparental Disomy",
desc: "Detects regions important in rare recessive conditions.",
icon: "/images/icons/variant-detection.png"
},
{
title: "Homologous Gene Analysis",
desc: "Includes SMN1, SMN2, DMD.",
icon: "/images/icons/functional-genomics.png"
},
{
title: "Aneuploidy & Ploidy Estimation",
desc: "Detects abnormal chromosome numbers and sex karyotype.",
icon: "/images/icons/chromosomal.png"
},
{
title: "Reanalysis & Reclassification",
desc: "Updates based on latest scientific knowledge.",
icon: "/images/icons/reanalysis.png"
}
];
const genomeCoverage = [
@ -27,7 +73,7 @@ export default function OperifyExomeMito() {
<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-6">
<div className="mb-8">
<ul className="space-y-4">
{points.map((point, idx) => (
<li key={idx} className="flex items-start">
@ -65,24 +111,17 @@ export default function OperifyExomeMito() {
</div>
</div>
<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-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-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>
))}
</tbody>
</table>
<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>
);