UI styling update
This commit is contained in:
mukesh13
@ -21,8 +21,8 @@ export default function ClinicalAreasGrid() {
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto px-10 pt-12">
|
||||
<h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Clinical Areas</h2>
|
||||
<section className="mx-auto px-8 pt-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Clinical Areas</h2>
|
||||
<div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{areas.map((area, idx) => (
|
||||
<div
|
||||
|
||||
@ -9,30 +9,34 @@ export default function OperifyExome() {
|
||||
{ title: "Dynamic Reanalysis", desc: "Reanalysis as scientific knowledge evolves." }
|
||||
];
|
||||
|
||||
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-10 pt-12">
|
||||
<h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Operify Exome</h2>
|
||||
<section className="mx-auto px-8 pt-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify Exome</h2>
|
||||
|
||||
<div className="mb-8">
|
||||
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
|
||||
Whole Exome Sequencing (WES) targets the protein-coding regions of the genome, where most
|
||||
disease-causing mutations are found.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
|
||||
With over 7,000 rare diseases identified—80% of which have a genetic basis—WES offers a
|
||||
powerful approach to uncover their causes.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
|
||||
Traditional diagnostic methods can be slow, costly, and inconclusive; WES streamlines the
|
||||
process by delivering broad genetic insights in a single test.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed text-base text-justify">
|
||||
Operify Exome enhances WES by combining comprehensive coverage with advanced interpretation,
|
||||
improving diagnostic yield and patient outcomes.
|
||||
</p>
|
||||
<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-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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,18 +1,33 @@
|
||||
export default function RareIntro() {
|
||||
return (
|
||||
<section className="mx-auto px-10 pt-12">
|
||||
<h1 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4">Rare Disorders</h1>
|
||||
<h2 className="text-2xl font-semibold text-gray-700 mb-4">Transforming Delays into Diagnoses</h2>
|
||||
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
|
||||
There are over 7,000 identified rare diseases, many of which begin in childhood—and
|
||||
nearly 80% have a genetic cause. Yet, the average time to diagnose a rare disorder is
|
||||
still 4.8 years, with some cases taking up to 20 years.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed text-base text-justify">
|
||||
At Operify Health, we leverage advanced Next Generation Sequencing (NGS) and proprietary
|
||||
bioinformatics to deliver rapid, reliable insights—helping reduce the diagnostic journey
|
||||
from years to days.
|
||||
</p>
|
||||
<section className="py-0">
|
||||
<div className="container-fluid">
|
||||
<div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
|
||||
<div className="w-full">
|
||||
<h2 className="text-3xl font-bold text-white mb-6 leading-tight">
|
||||
Transforming Delays into Diagnoses
|
||||
</h2>
|
||||
<ul className="space-y-4">
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
|
||||
<span className="leading-relaxed text-justify">
|
||||
There are over 7,000 identified rare diseases, many of which begin in childhood—and
|
||||
nearly 80% have a genetic cause. Yet, the average time to diagnose a rare disorder is
|
||||
still 4.8 years, with some cases taking up to 20 years.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
|
||||
<span className="leading-relaxed text-justify">
|
||||
At Operify Health, we leverage advanced Next Generation Sequencing (NGS) and proprietary
|
||||
bioinformatics to deliver rapid, reliable insights—helping reduce the diagnostic journey
|
||||
from years to days.
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -1,36 +1,49 @@
|
||||
export default function SampleRequirements({ title, items }) {
|
||||
return (
|
||||
<section className="mx-auto px-10 pt-8 pb-12">
|
||||
<div className="bg-gray-50 rounded-lg p-6">
|
||||
<h3 className="text-2xl font-semibold text-gray-700 mb-6">{title} Sample Requirements</h3>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{/* Turnaround Time */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-teal-600 mb-1">Turnaround Time</h4>
|
||||
<p className="text-gray-600 leading-relaxed text-base">21 Days</p>
|
||||
</div>
|
||||
</div>
|
||||
import Image from "next/image";
|
||||
|
||||
{/* Sample Requirement */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-teal-600 mb-2">Sample Requirement</h4>
|
||||
<p className="text-gray-600 leading-relaxed text-base">Blood/Saliva/Cheek Swab/Genomic DNA/Dry Blood Spot</p>
|
||||
export default function SampleRequirements({ title, items }) {
|
||||
const requirements = [
|
||||
{
|
||||
icon: "/images/icons/clock.png", // Replace with your actual icon path
|
||||
title: "Turnaround Time",
|
||||
description: "21 Days"
|
||||
},
|
||||
{
|
||||
icon: "/images/icons/sample.png", // Replace with your actual icon path
|
||||
title: "Sample Requirement",
|
||||
description: "Blood/Saliva/Cheek Swab/Genomic DNA/Dry Blood Spot"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto px-8 pt-8 pb-12">
|
||||
<h3 className="text-3xl font-bold text-teal-700 mb-6">{title} Sample Requirements</h3>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-5xl mx-auto">
|
||||
{requirements.map((req, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer"
|
||||
style={{backgroundColor: '#f2fcfc'}}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<Image
|
||||
src={req.icon}
|
||||
alt={req.title}
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-lg font-semibold text-gray-900 mb-2">{req.title}</h4>
|
||||
<p className="text-gray-500 text-sm leading-relaxed">
|
||||
{req.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -11,19 +11,30 @@ export default function SolutionsOffer() {
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto px-10 pt-12">
|
||||
<h2 className="text-2xl font-semibold text-gray-700 text-left pb-2 mb-4">Our Rare Disease Solutions Offer</h2>
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
<div className="mx-auto px-8 py-6">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">Our Rare Disease Solutions Offer</h2>
|
||||
|
||||
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
|
||||
Comprehensive genomic sequencing solutions designed to unlock genetic insights
|
||||
and accelerate diagnosis for rare disease patients and their families.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{solutions.map((sol, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="border rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer"
|
||||
className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer"
|
||||
style={{backgroundColor: '#f2fcfc'}}
|
||||
>
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-2">{sol.name}</h3>
|
||||
<p className="text-gray-600 leading-relaxed text-base">{sol.desc}</p>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">{sol.name}</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed">{sol.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,22 +1,28 @@
|
||||
export default function WESInfo() {
|
||||
const points = [
|
||||
"Whole Exome Sequencing (WES) is recommended for individuals with unexplained genetic disorders, complex or atypical clinical presentations, or when prior genetic tests have been inconclusive.",
|
||||
"It is especially valuable in diagnosing rare inherited diseases, uncovering the cause of developmental delays, intellectual disabilities, or early-onset neurological conditions, and providing insights for personalized treatment planning.",
|
||||
"WES can help identify genetic causes in a wide range of rare disorders."
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto px-10 pt-12">
|
||||
<h2 className="text-2xl font-semibold text-gray-700 text-left pb-2 mb-4">
|
||||
<section className="mx-auto px-8 pt-4">
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">
|
||||
Who Should Consider Whole Exome Sequencing (WES)?
|
||||
</h2>
|
||||
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
|
||||
Whole Exome Sequencing (WES) is recommended for individuals with unexplained genetic
|
||||
disorders, complex or atypical clinical presentations, or when prior genetic tests
|
||||
have been inconclusive.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
|
||||
It is especially valuable in diagnosing rare inherited diseases, uncovering the cause
|
||||
of developmental delays, intellectual disabilities, or early-onset neurological
|
||||
conditions, and providing insights for personalized treatment planning.
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed text-base text-justify">
|
||||
WES can help identify genetic causes in a wide range of rare disorders.
|
||||
</p>
|
||||
<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>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user