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

UI styling update

Browse Source
This commit is contained in:
mukesh13
2025-08-21 10:21:32 +05:30
parent 04a9f5689b
commit 92a935f753
36 changed files with 501 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/PackagingShipping/DNASamples.jsx
View File

@ -5,7 +5,7 @@ const DNASamples = () => {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h3 className="text-2xl font-semibold text-gray-700 mb-6">Shipping of DNA Samples</h3> <h3 className="text-3xl font-bold text-teal-700 mb-4">Shipping of DNA Samples</h3>
</div> </div>
<div className="flex flex-col lg:flex-row gap-6"> <div className="flex flex-col lg:flex-row gap-6">

2
app/components/PackagingShipping/GeneralGuidelines.jsx
View File

@ -4,7 +4,7 @@ const GeneralGuidelines = () => {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h3 className="text-2xl font-semibold mb-6" style={{ color: '#555555' }}>General Guidelines</h3> <h3 className="text-3xl font-bold text-teal-700 mb-4">General Guidelines</h3>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">

2
app/components/PackagingShipping/PackagingGuideline.jsx
View File

@ -4,7 +4,7 @@ const PackagingGuideline = () => {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h3 className="text-2xl font-semibold mb-6" style={{ color: '#555555' }}>Packaging Guideline</h3> <h3 className="text-3xl font-bold text-teal-700 mb-4">Packaging Guideline</h3>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">

66
app/components/PackagingShipping/RNASamples.jsx
View File

@ -4,40 +4,50 @@ const RNASamples = () => {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h3 className="text-2xl font-semibold mb-6" style={{ color: '#555555' }}>Shipping of RNA Samples</h3> <h3 className="text-3xl font-bold text-teal-700 mb-4">Shipping of RNA Samples</h3>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<p className="leading-relaxed" style={{ color: '#555555' }}> <ul className="list-disc list-inside space-y-4 leading-relaxed pl-4">
Bioanalyzer QC report is advised to be shared from the client's end, in the <li className="text-justify" style={{color: '#faae31'}}>
absence of which an agarose Gel Electrophoresis and Nanodrop quantification <span style={{color: '#555555'}}>
to confirm the integrity of RNA must be shared. Samples with A260/280 ratio Bioanalyzer QC report is advised to be shared from the client's end, in the
values of ~1.8 are considered "pure" for DNA and will be accepted for absence of which an agarose Gel Electrophoresis and Nanodrop quantification
processing further. to confirm the integrity of RNA must be shared. Samples with A260/280 ratio
</p> values of ~1.8 are considered "pure" for DNA and will be accepted for
processing further.
</span>
</li>
<p className="leading-relaxed" style={{ color: '#555555' }}> <li className="text-justify" style={{color: '#faae31'}}>
We require Bioanalyzer traces (or similar) for all customer-submitted <span style={{color: '#555555'}}>
sequencing libraries and total RNA samples. If traces are not provided, we We require Bioanalyzer traces (or similar) for all customer-submitted
will perform Bioanalyzer QC for an additional fee. If you can supply traces, sequencing libraries and total RNA samples. If traces are not provided, we
please include them into the shipment in hard copy. Also, ensure that your will perform Bioanalyzer QC for an additional fee. If you can supply traces,
samples meet the specified sample or library requirements [LINK]. please include them into the shipment in hard copy. Also, ensure that your
</p> samples meet the specified sample or library requirements [LINK].
</span>
</li>
<p className="leading-relaxed" style={{ color: '#555555' }}> <li className="text-justify" style={{color: '#faae31'}}>
For large-scale projects, RNA samples can be submitted in strip tubes with <span style={{color: '#555555'}}>
individually attached RNase-free caps. Pack the strips into racks (e.g., For large-scale projects, RNA samples can be submitted in strip tubes with
empty pipet tip boxes) and ensure they are secured to prevent movement individually attached RNase-free caps. Pack the strips into racks (e.g.,
during transport. empty pipet tip boxes) and ensure they are secured to prevent movement
</p> during transport.
</span>
</li>
<p className="leading-relaxed" style={{ color: '#555555' }}> <li className="text-justify" style={{color: '#faae31'}}>
RNA, cells, bacteria, and frozen tissue samples should be stored in liquid <span style={{color: '#555555'}}>
nitrogen for rapid freezing and then transported with dry ice. For longer RNA, cells, bacteria, and frozen tissue samples should be stored in liquid
shipments, RNA samples can also be successfully shipped dry at room nitrogen for rapid freezing and then transported with dry ice. For longer
temperature after LiCl/ethanol precipitation and ethanol washes; make sure shipments, RNA samples can also be successfully shipped dry at room
to mark the pellet's position on the tubes. temperature after LiCl/ethanol precipitation and ethanol washes; make sure
</p> to mark the pellet's position on the tubes.
</span>
</li>
</ul>
</div> </div>
</div> </div>
); );

2
app/components/PackagingShipping/ShippingSchedule.jsx
View File

@ -4,7 +4,7 @@ const ShippingSchedule = () => {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h3 className="text-2xl font-semibold mb-6" style={{ color: '#555555' }}>Shipping Schedule and Address</h3> <h3 className="text-3xl font-bold text-teal-700 mb-4">Shipping Schedule and Address</h3>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">

2
app/components/PackagingShipping/ShippingTemperatureTable.jsx
View File

@ -129,7 +129,7 @@ const ShippingTemperatureTable = () => {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h3 className="text-2xl font-semibold text-gray-700 mb-6">Shipping Temperature and Condition</h3> <h3 className="text-3xl font-bold text-teal-700 mb-4">Shipping Temperature and Condition</h3>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">

2
app/components/SampleGuideline/ContentSection.jsx
View File

@ -18,7 +18,7 @@ const ContentSection = () => {
return ( return (
<section className="pt-4 pb-8"> <section className="pt-4 pb-8">
<div className="container mx-auto max-w-none px-4"> <div className="container max-w-none px-4">
<div className="grid xl:grid-cols-[280px_1fr] gap-8"> <div className="grid xl:grid-cols-[280px_1fr] gap-8">
{/* LEFT SIDEBAR */} {/* LEFT SIDEBAR */}
<div className="xl:sticky xl:top-8"> <div className="xl:sticky xl:top-8">

76
app/components/SampleGuideline/GeneralGuidelines.jsx
View File

@ -4,46 +4,58 @@ const GeneralGuidelines = () => {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="mb-6"> <div className="mb-6">
<h3 className="text-2xl font-semibold text-gray-600 mb-4">General Guidelines</h3> <h3 className="text-3xl font-bold text-teal-700 mb-4">General Guidelines</h3>
</div> </div>
<div className="prose max-w-none"> <div className="prose max-w-none">
<ul className="space-y-4 text-gray-700 leading-relaxed pl-5"> <ul className="space-y-4 text-gray-700 leading-relaxed pl-5" style={{listStyleType: 'disc'}}>
<li className="list-disc"> <li className="list-disc" style={{color: '#faae31'}}>
Please complete the Sample Initiation Form (SIF), ensuring that the <span style={{color: '#374151'}}>
sample names on the form match the labels on the sample tubes. We also Please complete the Sample Initiation Form (SIF), ensuring that the
request that you send an electronic copy of the form and any required QC sample names on the form match the labels on the sample tubes. We also
data via email. request that you send an electronic copy of the form and any required QC
data via email.
</span>
</li> </li>
<li className="list-disc"> <li className="list-disc" style={{color: '#faae31'}}>
Each tube should be labeled on the lid with a maximum of 4-6 <span style={{color: '#374151'}}>
alphanumeric characters (e.g., 4B0001). Use a black permanent marker to Each tube should be labeled on the lid with a maximum of 4-6
write sample names on the top and side of each tube. Avoid writing alphanumeric characters (e.g., 4B0001). Use a black permanent marker to
directly on the tube wall or cover with an oil pen. write sample names on the top and side of each tube. Avoid writing
directly on the tube wall or cover with an oil pen.
</span>
</li> </li>
<li className="list-disc"> <li className="list-disc" style={{color: '#faae31'}}>
DNA can be submitted in DNase-free water, Elution Buffer, or 10mM Tris <span style={{color: '#374151'}}>
pH 8.0. DNA samples should have an OD260/280 ratio as close to 1.8~2.0 DNA can be submitted in DNase-free water, Elution Buffer, or 10mM Tris
as possible. All DNA should be RNase-treated and free from degradation pH 8.0. DNA samples should have an OD260/280 ratio as close to 1.8~2.0
or contamination. Ship with ice packs. The total amount of DNA required as possible. All DNA should be RNase-treated and free from degradation
depends on the specific application. or contamination. Ship with ice packs. The total amount of DNA required
depends on the specific application.
</span>
</li> </li>
<li className="list-disc"> <li className="list-disc" style={{color: '#faae31'}}>
RNA can be submitted in RNase-free water, RNA Stabilization Reagent, or <span style={{color: '#374151'}}>
10mM Tris pH 8.0. All total RNA samples should be DNA-free, with an OD RNA can be submitted in RNase-free water, RNA Stabilization Reagent, or
A260/A280 ratio ≥ 1.8, A260/230 ratio ≥ 1.8, and a RIN ≥ 6. Ship with 10mM Tris pH 8.0. All total RNA samples should be DNA-free, with an OD
dry ice. The total amount of RNA required depends on the specific A260/A280 ratio ≥ 1.8, A260/230 ratio ≥ 1.8, and a RIN ≥ 6. Ship with
application. For Long Read Sequencing, RNA samples should have a RIN ≥ dry ice. The total amount of RNA required depends on the specific
8. application. For Long Read Sequencing, RNA samples should have a RIN ≥
8.
</span>
</li> </li>
<li className="list-disc"> <li className="list-disc" style={{color: '#faae31'}}>
The listed concentrations should be determined by fluorometry (e.g., <span style={{color: '#374151'}}>
PicoGreen/Qubit/RiboGreen). If using spectrophotometry (e.g., Nanodrop), The listed concentrations should be determined by fluorometry (e.g.,
increase concentrations by approximately twofold. PicoGreen/Qubit/RiboGreen). If using spectrophotometry (e.g., Nanodrop),
increase concentrations by approximately twofold.
</span>
</li> </li>
<li className="list-disc"> <li className="list-disc" style={{color: '#faae31'}}>
The quality inspection method for the sizes and concentrations of the <span style={{color: '#374151'}}>
Ready To Run Library is Qubit and Agilent Bioanalyzer. The quality inspection method for the sizes and concentrations of the
Ready To Run Library is Qubit and Agilent Bioanalyzer.
</span>
</li> </li>
</ul> </ul>
</div> </div>

10
app/components/SampleGuideline/IntroSection.jsx
View File

@ -2,11 +2,11 @@ import React from 'react';
const IntroSection = () => { const IntroSection = () => {
return ( return (
<section className="bg-white mx-4 md:mx-8 mt-4 mb-4 py-4"> <section className="py-0">
<div className="container mx-auto max-w-none px-4"> <div className="container-fluid">
<div className="text-gray-600 max-w-none leading-relaxed text-center"> <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
<div className="text-base text-justify"> <div className="w-full">
<p className="m-0"> <p className="leading-relaxed text-base text-justify m-0">
We humbly offer a wide range of services, including genomics, transcriptomics, We humbly offer a wide range of services, including genomics, transcriptomics,
metagenomics, epigenomics, single-cell sequencing, genotyping, microarray, metagenomics, epigenomics, single-cell sequencing, genotyping, microarray,
bioinformatics, and more. To help us deliver the best results for you, we request you to bioinformatics, and more. To help us deliver the best results for you, we request you to

2
app/components/SampleGuideline/SearchSampleRequirements.jsx
View File

@ -67,7 +67,7 @@ const SearchSampleRequirements = () => {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="mb-6"> <div className="mb-6">
<h3 className="text-2xl font-semibold text-gray-600">Search Sample Requirements</h3> <h3 className="text-3xl font-bold text-teal-700 mb-4">Search Sample Requirements</h3>
</div> </div>
<SearchFilters <SearchFilters

4
app/components/SampleInitiation/ProcessSection.jsx
View File

@ -5,11 +5,11 @@ import SubmissionOptions from './SubmissionOptions';
const ProcessSection = () => { const ProcessSection = () => {
return ( return (
<section className="bg-white"> <section className="bg-white">
<div className="container mx-auto max-w-none px-4"> <div className="container max-w-none">
<div className="bg-white p-4 md:p-6"> <div className="bg-white p-4 md:p-6">
{/* Main Title */} {/* Main Title */}
<div className="text-left mb-4"> <div className="text-left mb-4">
<h2 className="text-2xl md:text-4xl text-gray-600 font-normal"> <h2 className="text-3xl font-bold text-teal-700 mb-4">
Welcome to Our Online Submission Portal! Welcome to Our Online Submission Portal!
</h2> </h2>
</div> </div>

6
app/components/SampleInitiation/ProcessSteps.jsx
View File

@ -46,8 +46,10 @@ const ProcessSteps = () => {
</h3> </h3>
<ul className="list-disc list-inside space-y-2 text-gray-700 leading-relaxed pl-4"> <ul className="list-disc list-inside space-y-2 text-gray-700 leading-relaxed pl-4">
{step.items.map((item, index) => ( {step.items.map((item, index) => (
<li key={index} className="text-justify"> <li key={index} className="text-justify" style={{color: '#faae31'}}>
{item} <span style={{color: '#374151'}}>
{item}
</span>
</li> </li>
))} ))}
</ul> </ul>

4
app/components/SampleInitiation/SampleInitiationPage.jsx
View File

@ -1,14 +1,14 @@
import React from 'react'; import React from 'react';
import PageTitle from './PageTitle'; import PageTitle from './PageTitle';
import ProcessSection from './ProcessSection'; import ProcessSection from './ProcessSection';
import ContactNote from './ContactNote'; // import ContactNote from './ContactNote';
const SampleInitiationPage = () => { const SampleInitiationPage = () => {
return ( return (
<div className="page-content"> <div className="page-content">
<PageTitle /> <PageTitle />
<ProcessSection /> <ProcessSection />
<ContactNote /> {/* <ContactNote /> */}
</div> </div>
); );
}; };

9
app/dna-sequencing/components/AboutDNA.jsx
View File

@ -4,24 +4,21 @@ import React from 'react';
const AboutDNA = () => { const AboutDNA = () => {
return ( return (
<section className="pt-6 bg-white"> <section className="pt-6 bg-white">
<div className="container mx-auto px-6"> <div className="container max-w-none px-6">
<h2 className="text-4xl font-bold text-gray-700 text-left pb-2"> <h2 className="text-4xl font-bold text-teal-700 mb-4">
About DNA Sequencing About DNA Sequencing
</h2> </h2>
<h2 className="text-lg font-semibold text-gray-600 mb-4"> <h2 className="text-lg font-semibold text-gray-600 mb-4">
Exploring Life's Blueprint with Every Sequence Exploring Life's Blueprint with Every Sequence
</h2> </h2>
<div className="mb-6 text-justify"> <div className="mb-4 text-justify">
<p className="text-gray-600 leading-relaxed text-base mb-4"> <p className="text-gray-600 leading-relaxed text-base mb-4">
DNA sequencing is a method used to determine the precise order of nucleotides DNA sequencing is a method used to determine the precise order of nucleotides
(adenine, thymine, cytosine, and guanine) in a DNA molecule. This information is (adenine, thymine, cytosine, and guanine) in a DNA molecule. This information is
critical for understanding genetic information, mutations, and their roles in disease, critical for understanding genetic information, mutations, and their roles in disease,
evolution, and various biological processes. evolution, and various biological processes.
</p> </p>
<p className="text-gray-600 leading-relaxed text-base">
Different DNA sequencing approaches using Next Generation sequencing are listed below:
</p>
</div> </div>
</div> </div>
</section> </section>

12
app/dna-sequencing/components/DNATable.jsx
View File

@ -115,17 +115,17 @@ const DNATable = () => {
]; ];
return ( return (
<section className="pt-6 bg-white"> <section className="pt-4 bg-white">
<div className="container mx-auto px-6"> <div className="container max-w-none px-6">
<h3 className="text-2xl font-semibold text-gray-700 mb-6">DNA Sequencing Approaches</h3> <h3 className="text-lg font-semibold text-gray-600 mb-4">DNA Sequencing Approaches</h3>
<div className="mb-6 text-justify"> <div className="mb-6 text-justify">
<p className="text-gray-600 leading-relaxed text-base"> <p className="text-gray-600 leading-relaxed text-base">
Different DNA sequencing approaches and their applications are summarized below: Different DNA sequencing approaches and their applications are summarized below:
</p> </p>
</div> </div>
<div className="overflow-x-auto mb-8"> <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"> <table className="w-full border-collapse border border-gray-300 text-sm bg-white shadow-sm ">
<thead> <thead>
<tr className="bg-teal-50"> <tr className="bg-teal-50">
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700"> <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
@ -146,7 +146,7 @@ const DNATable = () => {
{sequencingData.map((row, index) => ( {sequencingData.map((row, index) => (
<tr key={index} className={`${index % 2 === 1 ? 'bg-gray-50' : 'bg-white'} hover:bg-teal-25 transition-colors`}> <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"> <td className="border border-gray-300 px-4 py-3 align-top">
<a href={row.approach.link} className="text-teal-600 hover:underline font-medium text-base"> <a href={row.approach.link} className="text-gray-600 hover:underline font-medium text-base">
{row.approach.name} {row.approach.name}
</a> </a>
</td> </td>

4
app/health/Components/ClinicalAreas.jsx
View File

@ -6,12 +6,12 @@ export default function ClinicalAreas() {
return ( return (
<div className="mx-auto px-10 py-4"> <div className="mx-auto px-10 py-4">
{/* Heading */} {/* Heading */}
<h2 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4"> <h2 className="text-3xl font-bold text-teal-700 mb-4">
Precise Solutions for Clinical Areas Precise Solutions for Clinical Areas
</h2> </h2>
{/* Subtext */} {/* Subtext */}
<p className="text-gray-600 leading-relaxed text-base mb-8 max-w-3xl text-justify"> <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
Empowering you with precise, tailored approaches to diagnostics and care — Empowering you with precise, tailored approaches to diagnostics and care —
addressing the unique needs of each clinical area to improve patient outcomes. addressing the unique needs of each clinical area to improve patient outcomes.
</p> </p>

72
app/health/Components/HealthIntro.jsx
View File

@ -4,46 +4,40 @@ import Link from "next/link";
export default function AboutHealth() { export default function AboutHealth() {
return ( return (
<div className="mx-auto px-10 pt-12"> <section className="py-0">
{/* Title */} <div className="container-fluid">
<h1 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4">About Health</h1> <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">
{/* Intro Section */} <ul className="list-disc list-inside space-y-4 leading-relaxed pl-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center mb-12"> <li className="text-justify" style={{color: '#faae31'}}>
{/* Left Content */} <span style={{color: '#ffffff'}}>
<div> At Operify Health, we believe every patient deserves answers that are not only
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> accurate — but actionable. By harnessing the power of Next Generation Sequencing
At Operify Health, we believe every patient deserves answers that are not only (NGS), we transform patient samples into rich genomic insights that enable
accurate — but actionable. By harnessing the power of Next Generation Sequencing clinicians and oncologists to make informed, personalized decisions. From rare
(NGS), we transform patient samples into rich genomic insights that enable genetic disorders to complex oncological cases, our solutions help uncover what
clinicians and oncologists to make informed, personalized decisions. From rare traditional diagnostics often miss.
genetic disorders to complex oncological cases, our solutions help uncover what </span>
traditional diagnostics often miss. </li>
</p> <li className="text-justify" style={{color: '#faae31'}}>
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> <span style={{color: '#ffffff'}}>
Our strength lies in our multidisciplinary team of researchers, bioinformaticians, Our strength lies in our multidisciplinary team of researchers, bioinformaticians,
and data scientists who use custom-built algorithms and cutting-edge analytics to and data scientists who use custom-built algorithms and cutting-edge analytics to
interpret genetic data with unmatched depth. Backed by curated scientific evidence interpret genetic data with unmatched depth. Backed by curated scientific evidence
and real-world clinical findings, we deliver recommendations that are current, and real-world clinical findings, we deliver recommendations that are current,
relevant, and patient-focused. relevant, and patient-focused.
</p> </span>
<p className="text-gray-600 leading-relaxed text-base text-justify"> </li>
With every genome we decode, we move closer to truly personalized medicine — <li className="text-justify" style={{color: '#faae31'}}>
bridging data and care, science and life. <span style={{color: '#ffffff'}}>
</p> With every genome we decode, we move closer to truly personalized medicine —
</div> bridging data and care, science and life.
</span>
{/* Right Image */} </li>
<div className="flex justify-center"> </ul>
<Image </div>
src="images/health/dna-placeholder.jpg" // Replace with your actual image path in /public
alt="DNA Strand"
width={500}
height={500}
className="rounded-lg object-cover"
/>
</div> </div>
</div> </div>
</div> </section>
); );
} }

2
app/health/Components/HealthTitle.jsx
View File

@ -3,7 +3,7 @@ import React from 'react';
const HealthTitle = () => { const HealthTitle = () => {
return ( return (
<section <section
className="relative bg-cover bg-center py-6 h-24" className="relative bg-cover bg-center py-6 h-[7rem]"
style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }} style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
> >
{/* Breadcrumb */} {/* Breadcrumb */}

4
app/health/components/ClinicalAreas.jsx
View File

@ -6,12 +6,12 @@ export default function ClinicalAreas() {
return ( return (
<div className="mx-auto px-10 py-4"> <div className="mx-auto px-10 py-4">
{/* Heading */} {/* Heading */}
<h2 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4"> <h2 className="text-3xl font-bold text-teal-700 mb-4">
Precise Solutions for Clinical Areas Precise Solutions for Clinical Areas
</h2> </h2>
{/* Subtext */} {/* Subtext */}
<p className="text-gray-600 leading-relaxed text-base mb-8 max-w-3xl text-justify"> <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
Empowering you with precise, tailored approaches to diagnostics and care — Empowering you with precise, tailored approaches to diagnostics and care —
addressing the unique needs of each clinical area to improve patient outcomes. addressing the unique needs of each clinical area to improve patient outcomes.
</p> </p>

72
app/health/components/HealthIntro.jsx
View File

@ -4,46 +4,40 @@ import Link from "next/link";
export default function AboutHealth() { export default function AboutHealth() {
return ( return (
<div className="mx-auto px-10 pt-12"> <section className="py-0">
{/* Title */} <div className="container-fluid">
<h1 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4">About Health</h1> <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">
{/* Intro Section */} <ul className="list-disc list-inside space-y-4 leading-relaxed pl-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center mb-12"> <li className="text-justify" style={{color: '#faae31'}}>
{/* Left Content */} <span style={{color: '#ffffff'}}>
<div> At Operify Health, we believe every patient deserves answers that are not only
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> accurate — but actionable. By harnessing the power of Next Generation Sequencing
At Operify Health, we believe every patient deserves answers that are not only (NGS), we transform patient samples into rich genomic insights that enable
accurate — but actionable. By harnessing the power of Next Generation Sequencing clinicians and oncologists to make informed, personalized decisions. From rare
(NGS), we transform patient samples into rich genomic insights that enable genetic disorders to complex oncological cases, our solutions help uncover what
clinicians and oncologists to make informed, personalized decisions. From rare traditional diagnostics often miss.
genetic disorders to complex oncological cases, our solutions help uncover what </span>
traditional diagnostics often miss. </li>
</p> <li className="text-justify" style={{color: '#faae31'}}>
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> <span style={{color: '#ffffff'}}>
Our strength lies in our multidisciplinary team of researchers, bioinformaticians, Our strength lies in our multidisciplinary team of researchers, bioinformaticians,
and data scientists who use custom-built algorithms and cutting-edge analytics to and data scientists who use custom-built algorithms and cutting-edge analytics to
interpret genetic data with unmatched depth. Backed by curated scientific evidence interpret genetic data with unmatched depth. Backed by curated scientific evidence
and real-world clinical findings, we deliver recommendations that are current, and real-world clinical findings, we deliver recommendations that are current,
relevant, and patient-focused. relevant, and patient-focused.
</p> </span>
<p className="text-gray-600 leading-relaxed text-base text-justify"> </li>
With every genome we decode, we move closer to truly personalized medicine — <li className="text-justify" style={{color: '#faae31'}}>
bridging data and care, science and life. <span style={{color: '#ffffff'}}>
</p> With every genome we decode, we move closer to truly personalized medicine —
</div> bridging data and care, science and life.
</span>
{/* Right Image */} </li>
<div className="flex justify-center"> </ul>
<Image </div>
src="images/health/dna-placeholder.jpg" // Replace with your actual image path in /public
alt="DNA Strand"
width={500}
height={500}
className="rounded-lg object-cover"
/>
</div> </div>
</div> </div>
</div> </section>
); );
} }

2
app/health/components/HealthTitle.jsx
View File

@ -3,7 +3,7 @@ import React from 'react';
const HealthTitle = () => { const HealthTitle = () => {
return ( return (
<section <section
className="relative bg-cover bg-center py-6 h-24" className="relative bg-cover bg-center py-6 h-[7rem]"
style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }} style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
> >
{/* Breadcrumb */} {/* Breadcrumb */}

45
app/health/oncology/Components/HereditaryCancerPanel.jsx
View File

@ -9,29 +9,32 @@ export default function HereditaryCancerPanel() {
{ title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." } { title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
]; ];
const points = [
"About 5-10% of all cancers are linked to inherited genetic mutations, often going undetected until late stages or after multiple family members are affected.",
"The Operify Hereditary Cancer Panel screens key high- and moderate-risk genes associated with hereditary cancer syndromes like HBOC, Lynch Syndrome (LS), Li Fraumeni Syndrome (LFS), Familial Adenomatous Polyposis (FAP), Cowden Syndrome (CS), Peutz-Jeghers Syndrome (PJS), Neurofibromatosis (NF) etc.",
"Early identification of germline mutations enables proactive clinical decisions, including risk-reducing strategies, targeted surveillance, and family cascade testing.",
"Studies show that genetic testing in hereditary cancer cases improves outcomes and informs care for both patients and at-risk relatives."
];
return ( return (
<section className="mx-auto px-10 pt-12"> <section className="mx-auto px-8 pt-8">
<h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Operify Hereditary Cancer Panel</h2> <h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify Hereditary Cancer Panel</h2>
<div className="mb-8"> <div className="mb-8">
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> <ul className="space-y-4">
<strong>About 5-10% of all cancers are linked to inherited genetic mutations</strong>, often going {points.map((point, idx) => (
undetected until late stages or after multiple family members are affected. <li key={idx} className="flex items-start">
</p> <span
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
The Operify Hereditary Cancer Panel screens key high- and moderate-risk genes associated style={{backgroundColor: '#faae31'}}
with hereditary cancer syndromes like HBOC, Lynch Syndrome (LS), Li Fraumeni Syndrome (LFS), ></span>
Familial Adenomatous Polyposis (FAP), Cowden Syndrome (CS), Peutz-Jeghers Syndrome (PJS), <p className="text-gray-600 leading-relaxed text-base text-justify">
Neurofibromatosis (NF) etc. <strong>{idx === 0 ? "About 5-10% of all cancers are linked to inherited genetic mutations" : ""}</strong>
</p> {idx === 0 ? ", often going undetected until late stages or after multiple family members are affected." : point}
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> </p>
Early identification of germline mutations enables proactive clinical decisions, including </li>
risk-reducing strategies, targeted surveillance, and family cascade testing. ))}
</p> </ul>
<p className="text-gray-600 leading-relaxed text-base text-justify">
Studies show that genetic testing in hereditary cancer cases improves outcomes and informs
care for both patients and at-risk relatives.
</p>
</div> </div>
<h3 className="text-2xl font-semibold text-gray-700 mb-4">Key Features</h3> <h3 className="text-2xl font-semibold text-gray-700 mb-4">Key Features</h3>
@ -45,7 +48,7 @@ export default function HereditaryCancerPanel() {
</thead> </thead>
<tbody> <tbody>
{features.map((feature, idx) => ( {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-700 font-medium">{feature.title}</td>
<td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td> <td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td>
</tr> </tr>

73
app/health/oncology/Components/OncologyIntro.jsx
View File

@ -1,31 +1,52 @@
export default function OncologyIntro() { export default function OncologyIntro() {
return ( return (
<section className="mx-auto px-10 pt-12"> <section className="py-0">
<h1 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4">Oncology</h1> <div className="container-fluid">
<h2 className="text-2xl font-semibold text-gray-700 mb-4">Turning Complexity into Clarity</h2> <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> <div className="w-full">
Cancer is not a single disease—it's a highly complex and dynamic group of disorders, <h2 className="text-3xl font-bold text-white mb-6 leading-tight">
often driven by a multitude of genomic alterations. Despite advancements in treatment, Turning Complexity into Clarity
many patients still face uncertainty due to incomplete or delayed molecular diagnoses. </h2>
</p> <ul className="space-y-4">
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> <li className="flex items-start gap-3">
At Operify Health, we recognize that behind every tumor is a unique genetic story waiting <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
to be told. Our precision oncology solutions utilize high-throughput Next Generation <span className="leading-relaxed text-justify">
Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians Cancer is not a single disease—it's a highly complex and dynamic group of disorders,
with actionable insights that inform targeted therapies, immunotherapy decisions, and often driven by a multitude of genomic alterations. Despite advancements in treatment,
hereditary cancer risk assessments. many patients still face uncertainty due to incomplete or delayed molecular diagnoses.
</p> </span>
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> </li>
This genomic-driven approach is especially critical in advanced and treatment-resistant <li className="flex items-start gap-3">
cancers, where conventional methods often fall short. Studies have shown that integrating <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
broad-panel NGS into cancer care can impact clinical decision-making in up to 30% of cases, <span className="leading-relaxed text-justify">
leading to more personalized and effective treatment strategies. At Operify Health, we recognize that behind every tumor is a unique genetic story waiting
</p> to be told. Our precision oncology solutions utilize high-throughput Next Generation
<p className="text-gray-600 leading-relaxed text-base text-justify"> Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians
By combining cutting-edge sequencing, advanced bioinformatics, and curated clinical evidence, with actionable insights that inform targeted therapies, immunotherapy decisions, and
Operify Health empowers oncologists to move from uncertainty to precision—ensuring every cancer hereditary cancer risk assessments.
patient's care is as individualized as their diagnosis. </span>
</p> </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">
This genomic-driven approach is especially critical in advanced and treatment-resistant
cancers, where conventional methods often fall short. Studies have shown that integrating
broad-panel NGS into cancer care can impact clinical decision-making in up to 30% of cases,
leading to more personalized and effective treatment strategies.
</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">
By combining cutting-edge sequencing, advanced bioinformatics, and curated clinical evidence,
Operify Health empowers oncologists to move from uncertainty to precision—ensuring every cancer
patient's care is as individualized as their diagnosis.
</span>
</li>
</ul>
</div>
</div>
</div>
</section> </section>
); );
} }

45
app/health/oncology/components/HereditaryCancerPanel.jsx
View File

@ -9,29 +9,32 @@ export default function HereditaryCancerPanel() {
{ title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." } { title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
]; ];
const points = [
"About 5-10% of all cancers are linked to inherited genetic mutations, often going undetected until late stages or after multiple family members are affected.",
"The Operify Hereditary Cancer Panel screens key high- and moderate-risk genes associated with hereditary cancer syndromes like HBOC, Lynch Syndrome (LS), Li Fraumeni Syndrome (LFS), Familial Adenomatous Polyposis (FAP), Cowden Syndrome (CS), Peutz-Jeghers Syndrome (PJS), Neurofibromatosis (NF) etc.",
"Early identification of germline mutations enables proactive clinical decisions, including risk-reducing strategies, targeted surveillance, and family cascade testing.",
"Studies show that genetic testing in hereditary cancer cases improves outcomes and informs care for both patients and at-risk relatives."
];
return ( return (
<section className="mx-auto px-10 pt-12"> <section className="mx-auto px-8 pt-8">
<h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Operify Hereditary Cancer Panel</h2> <h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify Hereditary Cancer Panel</h2>
<div className="mb-8"> <div className="mb-8">
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> <ul className="space-y-4">
<strong>About 5-10% of all cancers are linked to inherited genetic mutations</strong>, often going {points.map((point, idx) => (
undetected until late stages or after multiple family members are affected. <li key={idx} className="flex items-start">
</p> <span
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
The Operify Hereditary Cancer Panel screens key high- and moderate-risk genes associated style={{backgroundColor: '#faae31'}}
with hereditary cancer syndromes like HBOC, Lynch Syndrome (LS), Li Fraumeni Syndrome (LFS), ></span>
Familial Adenomatous Polyposis (FAP), Cowden Syndrome (CS), Peutz-Jeghers Syndrome (PJS), <p className="text-gray-600 leading-relaxed text-base text-justify">
Neurofibromatosis (NF) etc. <strong>{idx === 0 ? "About 5-10% of all cancers are linked to inherited genetic mutations" : ""}</strong>
</p> {idx === 0 ? ", often going undetected until late stages or after multiple family members are affected." : point}
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> </p>
Early identification of germline mutations enables proactive clinical decisions, including </li>
risk-reducing strategies, targeted surveillance, and family cascade testing. ))}
</p> </ul>
<p className="text-gray-600 leading-relaxed text-base text-justify">
Studies show that genetic testing in hereditary cancer cases improves outcomes and informs
care for both patients and at-risk relatives.
</p>
</div> </div>
<h3 className="text-2xl font-semibold text-gray-700 mb-4">Key Features</h3> <h3 className="text-2xl font-semibold text-gray-700 mb-4">Key Features</h3>
@ -45,7 +48,7 @@ export default function HereditaryCancerPanel() {
</thead> </thead>
<tbody> <tbody>
{features.map((feature, idx) => ( {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-700 font-medium">{feature.title}</td>
<td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td> <td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td>
</tr> </tr>

73
app/health/oncology/components/OncologyIntro.jsx
View File

@ -1,31 +1,52 @@
export default function OncologyIntro() { export default function OncologyIntro() {
return ( return (
<section className="mx-auto px-10 pt-12"> <section className="py-0">
<h1 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4">Oncology</h1> <div className="container-fluid">
<h2 className="text-2xl font-semibold text-gray-700 mb-4">Turning Complexity into Clarity</h2> <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> <div className="w-full">
Cancer is not a single disease—it's a highly complex and dynamic group of disorders, <h2 className="text-3xl font-bold text-white mb-6 leading-tight">
often driven by a multitude of genomic alterations. Despite advancements in treatment, Turning Complexity into Clarity
many patients still face uncertainty due to incomplete or delayed molecular diagnoses. </h2>
</p> <ul className="space-y-4">
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> <li className="flex items-start gap-3">
At Operify Health, we recognize that behind every tumor is a unique genetic story waiting <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
to be told. Our precision oncology solutions utilize high-throughput Next Generation <span className="leading-relaxed text-justify">
Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians Cancer is not a single disease—it's a highly complex and dynamic group of disorders,
with actionable insights that inform targeted therapies, immunotherapy decisions, and often driven by a multitude of genomic alterations. Despite advancements in treatment,
hereditary cancer risk assessments. many patients still face uncertainty due to incomplete or delayed molecular diagnoses.
</p> </span>
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> </li>
This genomic-driven approach is especially critical in advanced and treatment-resistant <li className="flex items-start gap-3">
cancers, where conventional methods often fall short. Studies have shown that integrating <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
broad-panel NGS into cancer care can impact clinical decision-making in up to 30% of cases, <span className="leading-relaxed text-justify">
leading to more personalized and effective treatment strategies. At Operify Health, we recognize that behind every tumor is a unique genetic story waiting
</p> to be told. Our precision oncology solutions utilize high-throughput Next Generation
<p className="text-gray-600 leading-relaxed text-base text-justify"> Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians
By combining cutting-edge sequencing, advanced bioinformatics, and curated clinical evidence, with actionable insights that inform targeted therapies, immunotherapy decisions, and
Operify Health empowers oncologists to move from uncertainty to precision—ensuring every cancer hereditary cancer risk assessments.
patient's care is as individualized as their diagnosis. </span>
</p> </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">
This genomic-driven approach is especially critical in advanced and treatment-resistant
cancers, where conventional methods often fall short. Studies have shown that integrating
broad-panel NGS into cancer care can impact clinical decision-making in up to 30% of cases,
leading to more personalized and effective treatment strategies.
</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">
By combining cutting-edge sequencing, advanced bioinformatics, and curated clinical evidence,
Operify Health empowers oncologists to move from uncertainty to precision—ensuring every cancer
patient's care is as individualized as their diagnosis.
</span>
</li>
</ul>
</div>
</div>
</div>
</section> </section>
); );
} }

4
app/health/rare-disorders/components/ClinicalAreasGrid.jsx
View File

@ -21,8 +21,8 @@ export default function ClinicalAreasGrid() {
]; ];
return ( return (
<section className="mx-auto px-10 pt-12"> <section className="mx-auto px-8 pt-8">
<h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Clinical Areas</h2> <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"> <div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{areas.map((area, idx) => ( {areas.map((area, idx) => (
<div <div

42
app/health/rare-disorders/components/OperifyExome.jsx
View File

@ -9,30 +9,34 @@ export default function OperifyExome() {
{ title: "Dynamic Reanalysis", desc: "Reanalysis as scientific knowledge evolves." } { 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 ( return (
<section className="mx-auto px-10 pt-12"> <section className="mx-auto px-8 pt-8">
<h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Operify Exome</h2> <h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify Exome</h2>
<div className="mb-8"> <div className="mb-8">
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> <ul className="space-y-4">
Whole Exome Sequencing (WES) targets the protein-coding regions of the genome, where most {points.map((point, idx) => (
disease-causing mutations are found. <li key={idx} className="flex items-start">
</p> <span
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
With over 7,000 rare diseases identified—80% of which have a genetic basis—WES offers a style={{backgroundColor: '#faae31'}}
powerful approach to uncover their causes. ></span>
</p> <p className="text-gray-600 leading-relaxed text-base text-justify">
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> {point}
Traditional diagnostic methods can be slow, costly, and inconclusive; WES streamlines the </p>
process by delivering broad genetic insights in a single test. </li>
</p> ))}
<p className="text-gray-600 leading-relaxed text-base text-justify"> </ul>
Operify Exome enhances WES by combining comprehensive coverage with advanced interpretation,
improving diagnostic yield and patient outcomes.
</p>
</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"> <div className="overflow-x-auto">
<table className="w-full border-collapse border border-gray-300 rounded-lg"> <table className="w-full border-collapse border border-gray-300 rounded-lg">
<thead> <thead>

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

@ -14,52 +14,48 @@ export default function OperifyExomeMito() {
{ genome: "Mitochondrial genome", coverage: "37 genes" } { 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 ( return (
<section className="mx-auto px-10 pt-12"> <section className="mx-auto px-8">
<h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Operify ExomeMito</h2> <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> <h3 className="text-xl font-semibold text-gray-700 mb-4">Boost diagnostic yield with Exome + Mito Sequencing</h3>
<div className="mb-8"> <div className="mb-6">
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> <ul className="space-y-4">
The Operify ExomeMito Panel offers a unified solution by integrating whole exome sequencing {points.map((point, idx) => (
with complete mitochondrial genome analysis—addressing both nuclear and mitochondrial causes <li key={idx} className="flex items-start">
of disease. <span
</p> className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> style={{backgroundColor: '#faae31'}}
This combined approach is especially valuable in diagnosing complex, multisystemic, and rare ></span>
disorders, where variants may exist across both genomes. <p className="text-gray-600 leading-relaxed text-base text-justify">
</p> {point}
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> </p>
Mitochondrial disorders, though individually rare, are clinically significant, affecting </li>
approximately 1 in 5,000 individuals and often missed in standard testing. ))}
</p> </ul>
<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> </div>
<div className="mb-8"> <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"> <div className="overflow-x-auto">
<table className="w-full border-collapse border border-gray-300 rounded-lg"> <table className="w-full border-collapse border border-gray-300 rounded-lg">
<thead> <thead>
<tr className="bg-gray-50"> <tr className="bg-teal-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-3 py-2 text-left font-semibold text-teal-700">Genome</th>
<th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Coverage</th> <th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Coverage</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{genomeCoverage.map((item, idx) => ( {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-700 font-medium">{item.genome}</td>
<td className="border border-gray-300 px-6 py-3 text-gray-600">{item.coverage}</td> <td className="border border-gray-300 px-6 py-3 text-gray-600">{item.coverage}</td>
</tr> </tr>
@ -69,18 +65,18 @@ export default function OperifyExomeMito() {
</div> </div>
</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"> <div className="overflow-x-auto">
<table className="w-full border-collapse border border-gray-300 rounded-lg"> <table className="w-full border-collapse border border-gray-300 rounded-lg">
<thead> <thead>
<tr className="bg-gray-50"> <tr className="bg-teal-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-3 py-2 text-left font-semibold text-teal-700">Feature</th>
<th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Description</th> <th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{features.map((feature, idx) => ( {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-700 font-medium">{feature.title}</td>
<td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td> <td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td>
</tr> </tr>

41
app/health/rare-disorders/components/RareIntro.jsx
View File

@ -1,18 +1,33 @@
export default function RareIntro() { export default function RareIntro() {
return ( return (
<section className="mx-auto px-10 pt-12"> <section className="py-0">
<h1 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4">Rare Disorders</h1> <div className="container-fluid">
<h2 className="text-2xl font-semibold text-gray-700 mb-4">Transforming Delays into Diagnoses</h2> <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> <div className="w-full">
There are over 7,000 identified rare diseases, many of which begin in childhood—and <h2 className="text-3xl font-bold text-white mb-6 leading-tight">
nearly 80% have a genetic cause. Yet, the average time to diagnose a rare disorder is Transforming Delays into Diagnoses
still 4.8 years, with some cases taking up to 20 years. </h2>
</p> <ul className="space-y-4">
<p className="text-gray-600 leading-relaxed text-base text-justify"> <li className="flex items-start gap-3">
At Operify Health, we leverage advanced Next Generation Sequencing (NGS) and proprietary <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
bioinformatics to deliver rapid, reliable insights—helping reduce the diagnostic journey <span className="leading-relaxed text-justify">
from years to days. There are over 7,000 identified rare diseases, many of which begin in childhood—and
</p> 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> </section>
); );
} }

69
app/health/rare-disorders/components/SampleRequirements.jsx
View File

@ -1,36 +1,49 @@
import Image from "next/image";
export default function SampleRequirements({ title, items }) { 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 ( return (
<section className="mx-auto px-10 pt-8 pb-12"> <section className="mx-auto px-8 pt-8 pb-12">
<div className="bg-gray-50 rounded-lg p-6"> <h3 className="text-3xl font-bold text-teal-700 mb-6">{title} Sample Requirements</h3>
<h3 className="text-2xl font-semibold text-gray-700 mb-6">{title} Sample Requirements</h3>
<div className="grid md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-5xl mx-auto">
{/* Turnaround Time */} {requirements.map((req, idx) => (
<div className="flex items-start gap-4"> <div
<div className="flex-shrink-0 w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center"> key={idx}
<svg className="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer"
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> style={{backgroundColor: '#f2fcfc'}}
</svg> >
</div> <div className="flex items-start gap-4">
<div> <div className="flex-shrink-0 mt-1">
<h4 className="text-lg font-semibold text-teal-600 mb-1">Turnaround Time</h4> <Image
<p className="text-gray-600 leading-relaxed text-base">21 Days</p> 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>
))}
{/* 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>
</div>
</div>
</div>
</div> </div>
</section> </section>
); );

25
app/health/rare-disorders/components/SolutionsOffer.jsx
View File

@ -11,19 +11,30 @@ export default function SolutionsOffer() {
]; ];
return ( return (
<section className="mx-auto px-10 pt-12"> <div className="mx-auto px-8 py-6">
<h2 className="text-2xl font-semibold text-gray-700 text-left pb-2 mb-4">Our Rare Disease Solutions Offer</h2> <h2 className="text-3xl font-bold text-teal-700 mb-4">Our Rare Disease Solutions Offer</h2>
<div className="grid sm:grid-cols-2 gap-6">
<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) => ( {solutions.map((sol, idx) => (
<div <div
key={idx} 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> <div className="flex items-start">
<p className="text-gray-600 leading-relaxed text-base">{sol.desc}</p> <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>
))} ))}
</div> </div>
</section> </div>
); );
} }

36
app/health/rare-disorders/components/WESInfo.jsx
View File

@ -1,22 +1,28 @@
export default function WESInfo() { 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 ( return (
<section className="mx-auto px-10 pt-12"> <section className="mx-auto px-8 pt-4">
<h2 className="text-2xl font-semibold text-gray-700 text-left pb-2 mb-4"> <h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">
Who Should Consider Whole Exome Sequencing (WES)? Who Should Consider Whole Exome Sequencing (WES)?
</h2> </h2>
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> <ul className="space-y-4">
Whole Exome Sequencing (WES) is recommended for individuals with unexplained genetic {points.map((point, idx) => (
disorders, complex or atypical clinical presentations, or when prior genetic tests <li key={idx} className="flex items-start">
have been inconclusive. <span
</p> className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify"> style={{backgroundColor: '#faae31'}}
It is especially valuable in diagnosing rare inherited diseases, uncovering the cause ></span>
of developmental delays, intellectual disabilities, or early-onset neurological <p className="text-gray-600 leading-relaxed text-base text-justify">
conditions, and providing insights for personalized treatment planning. {point}
</p> </p>
<p className="text-gray-600 leading-relaxed text-base text-justify"> </li>
WES can help identify genetic causes in a wide range of rare disorders. ))}
</p> </ul>
</section> </section>
); );
} }

7
app/rna-sequencing/components/AboutRNA.jsx
View File

@ -4,8 +4,8 @@ import React from 'react';
const AboutRNA = () => { const AboutRNA = () => {
return ( return (
<section className="pt-6 bg-white"> <section className="pt-6 bg-white">
<div className="container mx-auto px-6"> <div className="container max-w-none px-6">
<h2 className="text-4xl font-bold text-gray-700 text-left pb-2"> <h2 className="text-4xl font-bold text-teal-700 mb-4">
About RNA Sequencing About RNA Sequencing
</h2> </h2>
<h2 className="text-lg font-semibold text-gray-600 mb-4"> <h2 className="text-lg font-semibold text-gray-600 mb-4">
@ -16,9 +16,6 @@ const AboutRNA = () => {
<p className="text-gray-600 leading-relaxed text-base mb-4"> <p className="text-gray-600 leading-relaxed text-base mb-4">
RNA sequencing (RNA-Seq) is a method used to determine the sequence and quantity of RNA present in a sample, providing insight into gene expression, alternative splicing, and non-coding RNA functions. It is essential for understanding various biological processes, including disease mechanisms, gene regulation, and cellular responses. RNA sequencing (RNA-Seq) is a method used to determine the sequence and quantity of RNA present in a sample, providing insight into gene expression, alternative splicing, and non-coding RNA functions. It is essential for understanding various biological processes, including disease mechanisms, gene regulation, and cellular responses.
</p> </p>
<p className="text-gray-600 leading-relaxed text-base">
Different RNA sequencing approaches using Next-Generation Sequencing (NGS) are listed below:
</p>
</div> </div>
</div> </div>
</section> </section>

4
app/rna-sequencing/components/RNATable.jsx
View File

@ -106,7 +106,7 @@ const RNATable = () => {
return ( return (
<section className="pt-6 bg-white"> <section className="pt-6 bg-white">
<div className="container mx-auto px-6"> <div className="container max-w-none px-6">
<h3 className="text-2xl font-semibold text-gray-700 mb-6">RNA Sequencing Approaches</h3> <h3 className="text-2xl font-semibold text-gray-700 mb-6">RNA Sequencing Approaches</h3>
<div className="overflow-x-auto mb-8"> <div className="overflow-x-auto mb-8">
<table className="w-full border-collapse border border-gray-300 text-sm bg-white shadow-sm"> <table className="w-full border-collapse border border-gray-300 text-sm bg-white shadow-sm">
@ -130,7 +130,7 @@ const RNATable = () => {
{sequencingData.map((row, index) => ( {sequencingData.map((row, index) => (
<tr key={index} className={`${index % 2 === 1 ? 'bg-gray-50' : 'bg-white'} hover:bg-teal-25 transition-colors`}> <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"> <td className="border border-gray-300 px-4 py-3 align-top">
<a href={row.approach.link} className="text-teal-600 hover:underline font-medium text-base"> <a href={row.approach.link} className="text-gray-600 hover:underline font-medium text-base">
{row.approach.name} {row.approach.name}
</a> </a>
</td> </td>

BIN
public/images/icons/clock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/images/icons/sample.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB