Compare commits
10 Commits
500802e62f
...
547b18ac1e
| Author | SHA1 | Date | |
|---|---|---|---|
| 547b18ac1e | |||
| c4c99f1775 | |||
| b85ec3d929 | |||
| e925b985f2 | |||
| a90808177a | |||
| 3a944c38e9 | |||
| e4ef985e69 | |||
| 78a56a061b | |||
| 3f803ac0c9 | |||
| 96558487c5 |
@ -1,7 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
const CTASection = () => {
|
||||
const router = useRouter();
|
||||
|
||||
const handleEnquireClick = () => {
|
||||
router.push('/contact-us');
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-6">
|
||||
<div className="container mx-auto max-w-none px-6">
|
||||
@ -31,7 +40,10 @@ const CTASection = () => {
|
||||
your samples, and generate your first NGS dataset.
|
||||
</p>
|
||||
|
||||
<button className="bg-yellow-400 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-yellow-300 transition-colors">
|
||||
<button
|
||||
onClick={handleEnquireClick}
|
||||
className="bg-yellow-400 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-yellow-300 transition-colors"
|
||||
>
|
||||
Enquire Now
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
// components/Layout/Footer.jsx
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
@ -71,11 +72,11 @@ const Footer = () => {
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold mb-6 text-white">Services</h3>
|
||||
<ul className="space-y-3 text-teal-100">
|
||||
<li className="hover:text-white transition-colors cursor-pointer">DNA Sequencing</li>
|
||||
<li className="hover:text-white transition-colors cursor-pointer">RNA Sequencing</li>
|
||||
<li className="hover:text-white transition-colors cursor-pointer">Genotyping</li>
|
||||
<li className="hover:text-white transition-colors cursor-pointer">Bioinformatics Services</li>
|
||||
<li className="hover:text-white transition-colors cursor-pointer">Long Read Sequencing</li>
|
||||
<li className="hover:text-[#faae31] transition-colors cursor-pointer">DNA Sequencing</li>
|
||||
<li className="hover:text-[#faae31] transition-colors cursor-pointer">RNA Sequencing</li>
|
||||
<li className="hover:text-[#faae31] transition-colors cursor-pointer">Genotyping</li>
|
||||
<li className="hover:text-[#faae31] transition-colors cursor-pointer">Bioinformatics Services</li>
|
||||
<li className="hover:text-[#faae31] transition-colors cursor-pointer">Long Read Sequencing</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -83,12 +84,12 @@ const Footer = () => {
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold mb-6 text-white">Useful Link</h3>
|
||||
<ul className="space-y-3">
|
||||
<li><Link href="/" className="text-teal-100 hover:text-white transition-colors">Home</Link></li>
|
||||
<li><Link href="#research" className="text-teal-100 hover:text-white transition-colors">Research</Link></li>
|
||||
<li><Link href="#" className="text-teal-100 hover:text-white transition-colors">Health</Link></li>
|
||||
<li><Link href="/sample-submission-guideline" className="text-teal-100 hover:text-white transition-colors">Knowledge Hub</Link></li>
|
||||
<li><Link href="/company" className="text-teal-100 hover:text-white transition-colors">About Us</Link></li>
|
||||
<li><Link href="/contact-us" className="text-teal-100 hover:text-white transition-colors">Contact</Link></li>
|
||||
<li><Link href="/" className="text-teal-100 hover:text-[#faae31] transition-colors">Home</Link></li>
|
||||
<li><Link href="#research" className="text-teal-100 hover:text-[#faae31] transition-colors">Research</Link></li>
|
||||
<li><Link href="#" className="text-teal-100 hover:text-[#faae31] transition-colors">Health</Link></li>
|
||||
<li><Link href="/sample-submission-guideline" className="text-teal-100 hover:text-[#faae31] transition-colors">Knowledge Hub</Link></li>
|
||||
<li><Link href="/company" className="text-teal-100 hover:text-[#faae31] transition-colors">About Us</Link></li>
|
||||
<li><Link href="/contact-us" className="text-teal-100 hover:text-[#faae31] transition-colors">Contact</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -102,7 +103,7 @@ const Footer = () => {
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<a href="mailto:info@operifytech.com" className="hover:text-white transition-colors">
|
||||
<a href="mailto:info@operifytech.com" className="hover:text-[#faae31] transition-colors">
|
||||
Info@operifytech.com
|
||||
</a>
|
||||
</div>
|
||||
@ -112,7 +113,7 @@ const Footer = () => {
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<a href="tel:01143046242" className="hover:text-white transition-colors">
|
||||
<a href="tel:01143046242" className="hover:text-[#faae31] transition-colors">
|
||||
01143046242
|
||||
</a>
|
||||
</div>
|
||||
@ -122,7 +123,7 @@ const Footer = () => {
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<a href="tel:9319171176" className="hover:text-white transition-colors">
|
||||
<a href="tel:9319171176" className="hover:text-[#faae31] transition-colors">
|
||||
9319171176
|
||||
</a>
|
||||
</div>
|
||||
@ -139,11 +140,11 @@ const Footer = () => {
|
||||
Copyright © 2025 <span className="text-gray-800 font-medium">Operify</span> All Rights Reserved.
|
||||
</p>
|
||||
<ul className="flex space-x-6 mt-3 md:mt-0">
|
||||
<li><Link href="#" className="hover:text-gray-800 transition-colors">Privacy Policy</Link></li>
|
||||
<li><Link href="#" className="transition-colors" style={{ ':hover': { color: '#faae31' } }} onMouseEnter={(e) => e.target.style.color = '#faae31'} onMouseLeave={(e) => e.target.style.color = ''}>Privacy Policy</Link></li>
|
||||
<li className="text-gray-400">|</li>
|
||||
<li><Link href="#" className="hover:text-gray-800 transition-colors">Term And Condition</Link></li>
|
||||
<li><Link href="#" className="transition-colors" style={{ ':hover': { color: '#faae31' } }} onMouseEnter={(e) => e.target.style.color = '#faae31'} onMouseLeave={(e) => e.target.style.color = ''}>Term And Condition</Link></li>
|
||||
<li className="text-gray-400">|</li>
|
||||
<li><Link href="#" className="hover:text-gray-800 transition-colors">FAQ</Link></li>
|
||||
<li><Link href="#" className="transition-colors" style={{ ':hover': { color: '#faae31' } }} onMouseEnter={(e) => e.target.style.color = '#faae31'} onMouseLeave={(e) => e.target.style.color = ''}>FAQ</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -12,7 +12,7 @@ const Header = () => {
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
|
||||
setOpenDropdown(current => {
|
||||
if (current.includes(dropdownName)) {
|
||||
// Remove this dropdown and any child dropdowns
|
||||
@ -146,7 +146,7 @@ const Header = () => {
|
||||
href="/dna-sequencing/enrichment-sequencing/targeted-sequencing"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
|
||||
>
|
||||
Targeted DNA Sequencing
|
||||
Custom DNA Sequencing
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
@ -265,13 +265,26 @@ const Header = () => {
|
||||
Hybrid Genome Sequencing
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<li className="relative group/snp-genotyping">
|
||||
<Link
|
||||
href="/dna-sequencing/snp-genotyping"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
|
||||
className="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
|
||||
>
|
||||
SNP-based Genotyping
|
||||
<svg className="w-3 h-3 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
<ul className="absolute top-0 left-full bg-white shadow-xl rounded-md py-2 w-72 opacity-0 invisible group-hover/snp-genotyping:opacity-100 group-hover/snp-genotyping:visible transition-all duration-300 z-50 border border-gray-100 ml-1">
|
||||
<li>
|
||||
<Link
|
||||
href="/dna-sequencing/snp-genotyping/ddRAD-sequencing"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
|
||||
>
|
||||
ddRAD Sequencing
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
@ -379,13 +392,34 @@ const Header = () => {
|
||||
Health
|
||||
</Link>
|
||||
<ul className="absolute top-full left-0 bg-white shadow-lg rounded-md py-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
|
||||
<li>
|
||||
<li className="relative group/rare">
|
||||
<Link
|
||||
href="/health/rare-disorders"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
|
||||
className="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
|
||||
>
|
||||
Rare Disorders
|
||||
<svg className="w-3 h-3 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
<ul className="absolute top-0 left-full bg-white shadow-xl rounded-md py-2 w-48 opacity-0 invisible group-hover/rare:opacity-100 group-hover/rare:visible transition-all duration-300 z-50 border border-gray-100 ml-1">
|
||||
<li>
|
||||
<Link
|
||||
href="/health/rare-disorders/exome"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
|
||||
>
|
||||
Exome
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/health/rare-disorders/exomemito"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
|
||||
>
|
||||
ExomeMito
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
@ -496,7 +530,7 @@ const Header = () => {
|
||||
<span className="hidden md:inline">Get In Touch</span>
|
||||
<span className="md:hidden">Contact</span>
|
||||
<svg className="w-3 h-3 sm:w-4 sm:h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
{/* Mobile menu button */}
|
||||
@ -544,9 +578,8 @@ const Header = () => {
|
||||
>
|
||||
<span>Research</span>
|
||||
<svg
|
||||
className={`w-4 h-4 transition-transform duration-200 ${
|
||||
openDropdown.includes('research') ? 'rotate-180' : ''
|
||||
}`}
|
||||
className={`w-4 h-4 transition-transform duration-200 ${openDropdown.includes('research') ? 'rotate-180' : ''
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -568,9 +601,8 @@ const Header = () => {
|
||||
>
|
||||
<span>DNA Sequencing</span>
|
||||
<svg
|
||||
className={`w-3 h-3 transition-transform duration-200 ${
|
||||
openDropdown.includes('dna') ? 'rotate-180' : ''
|
||||
}`}
|
||||
className={`w-3 h-3 transition-transform duration-200 ${openDropdown.includes('dna') ? 'rotate-180' : ''
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -680,9 +712,8 @@ const Header = () => {
|
||||
>
|
||||
<span>RNA Sequencing</span>
|
||||
<svg
|
||||
className={`w-3 h-3 transition-transform duration-200 ${
|
||||
openDropdown.includes('rna') ? 'rotate-180' : ''
|
||||
}`}
|
||||
className={`w-3 h-3 transition-transform duration-200 ${openDropdown.includes('rna') ? 'rotate-180' : ''
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -801,9 +832,8 @@ const Header = () => {
|
||||
>
|
||||
<span>Knowledge Hub</span>
|
||||
<svg
|
||||
className={`w-4 h-4 transition-transform duration-200 ${
|
||||
openDropdown.includes('knowledge') ? 'rotate-180' : ''
|
||||
}`}
|
||||
className={`w-4 h-4 transition-transform duration-200 ${openDropdown.includes('knowledge') ? 'rotate-180' : ''
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -858,9 +888,8 @@ const Header = () => {
|
||||
>
|
||||
<span>About Us</span>
|
||||
<svg
|
||||
className={`w-4 h-4 transition-transform duration-200 ${
|
||||
openDropdown.includes('about') ? 'rotate-180' : ''
|
||||
}`}
|
||||
className={`w-4 h-4 transition-transform duration-200 ${openDropdown.includes('about') ? 'rotate-180' : ''
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@ -916,7 +945,7 @@ const Header = () => {
|
||||
>
|
||||
<span>Get In Touch</span>
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@ -23,7 +23,7 @@ export default function AnimalResearch() {
|
||||
Animal genomics plays a vital role in understanding genetic diversity, disease resistance, and the evolutionary relationships of species. Sequencing animal genomes enables researchers to trace ancestry, identify genes responsible for desirable traits, and analyze gene expression patterns across populations. Our NGS-based animal genomics services provide in-depth analysis of genetic diversity, helping researchers and breeders identify genes that contribute to health, behavior, and other important characteristics.
|
||||
</p>
|
||||
<p className="text-gray-600 mb-4">
|
||||
From wildlife conservation to livestock improvement, we offer comprehensive sequencing solutions that support a wide range of applications. These include whole-genome sequencing, exome sequencing, and targeted sequencing of disease-related genes. Our advanced technologies allow you to study genetic variations with unparalleled precision, offering valuable insights into both domesticated and wild animal populations.
|
||||
From wildlife conservation to livestock improvement, we offer comprehensive sequencing solutions that support a wide range of applications. These include whole-genome sequencing, exome sequencing, and Custom sequencing of disease-related genes. Our advanced technologies allow you to study genetic variations with unparalleled precision, offering valuable insights into both domesticated and wild animal populations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,7 +33,7 @@ export default function AnimalResearch() {
|
||||
<tbody>
|
||||
<tr className="bg-gray-100">
|
||||
<td className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700 w-1/4">DNA Sequencing</td>
|
||||
<td className="border border-gray-300 px-3 py-2 align-top p-2" style={{ color: '#555555' }}>Whole Genome (Short Read, Long Read, Hybrid), Enrichment (Whole Exome, Amplicon and Targeted), Single Cell DNA, Genome Mapping, Genotyping (Based on SNP, ddRAD, Microsatellites)</td>
|
||||
<td className="border border-gray-300 px-3 py-2 align-top p-2" style={{ color: '#555555' }}>Whole Genome (Short Read, Long Read, Hybrid), Enrichment (Whole Exome, Amplicon and Custom), Single Cell DNA, Genome Mapping, Genotyping (Based on SNP, ddRAD, Microsatellites)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700 w-1/4">RNA Sequencing</td>
|
||||
|
||||
@ -4,7 +4,7 @@ const PageTitle = () => {
|
||||
return (
|
||||
<section
|
||||
className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[120px]"
|
||||
style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
|
||||
style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
|
||||
>
|
||||
{/* Breadcrumb */}
|
||||
<div className="relative z-10 mb-2 sm:mb-1 pt-2 sm:pt-0 sm:-mt-3 lg:-mt-3">
|
||||
|
||||
@ -21,14 +21,6 @@ const TeamGrid = () => {
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/team/Frame 6.png",
|
||||
name: "Dr. Divyank Mahajan",
|
||||
position: "Head, Techno-Commercial Strategy",
|
||||
linkedinUrl: "https://in.linkedin.com/in/divyank-mahajan-phd",
|
||||
detailUrl: "/team-member-detail2"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/team/Frame 4.png",
|
||||
name: "Dr. Mohammed Moquitul Haque",
|
||||
position: "Lead Scientist - Clinical Genomics",
|
||||
@ -36,7 +28,7 @@ const TeamGrid = () => {
|
||||
detailUrl: "/team-member-detail3"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
id: 4,
|
||||
image: "/images/team/Frame 12.png",
|
||||
name: "Richa Malhotra",
|
||||
position: "Business Manager - Clinical Genomic",
|
||||
|
||||
@ -4,7 +4,7 @@ const TeamHero = () => {
|
||||
return (
|
||||
<section
|
||||
className="relative bg-cover bg-center py-6 h-24"
|
||||
style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
|
||||
style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
|
||||
>
|
||||
{/* Breadcrumb */}
|
||||
<div className="relative z-10 mb-1 -mt-3">
|
||||
|
||||
@ -4,24 +4,29 @@ const AdvantagesLayout = ({
|
||||
title = "Advantages",
|
||||
advantageItems = [],
|
||||
backgroundGradient = "bg-gradient-to-br from-white to-white",
|
||||
titleColor = "text-gray-700"
|
||||
titleColor = "text-teal-700"
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-5 lg:py-8 ${backgroundGradient} rounded-2xl shadow-sm`}>
|
||||
<div className="container-fluid px-4 lg:px-6">
|
||||
<h2 className={`text-2xl lg:text-3xl ${titleColor} text-left pb-2 mb-6 lg:mb-6`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<div className="text-justify px-4 lg:px-10">
|
||||
<ul className="space-y-4 text-gray-600 text-base leading-relaxed list-disc">
|
||||
<div className="w-full min-w-0 bg-white">
|
||||
<div className="w-full max-w-none px-4 sm:px-6 lg:px-6 py-4 mb-2">
|
||||
<section>
|
||||
<h2 className={`text-2xl sm:text-3xl font-bold ${titleColor} mb-4`}>
|
||||
{title}
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
|
||||
{advantageItems.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify break-words">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -7,9 +7,9 @@ const ApplicationsLayout = ({
|
||||
titleColor = "text-gray-700"
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-5 lg:py-5 ${backgroundColor}`}>
|
||||
<div className="container-fluid px-4 lg:px-6">
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
<section className={`w-full min-w-0 py-5 lg:py-5 ${backgroundColor}`}>
|
||||
<div className="w-full max-w-none px-4 sm:px-6 lg:px-6">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -20,7 +20,7 @@ const ApplicationsLayout = ({
|
||||
className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-base">{item}</span>
|
||||
<span className="text-sm sm:text-base break-words">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
// components/shared/CombinedWorkflowLayout.jsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
const CombinedWorkflowLayout = ({
|
||||
@ -9,25 +11,25 @@ const CombinedWorkflowLayout = ({
|
||||
imageAlt = "Workflow diagram"
|
||||
}) => {
|
||||
return (
|
||||
<div className="w-full bg-white">
|
||||
<div className="w-full min-w-0 bg-white">
|
||||
{/* Main container with two columns */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] gap-0">
|
||||
|
||||
{/* Left Column - Content */}
|
||||
<div className="px-6 lg:px-12 py-8">
|
||||
<div className="w-full min-w-0 px-4 sm:px-6 lg:px-12 py-6 lg:py-8">
|
||||
{/* Introduction Section */}
|
||||
<section className="mb-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
|
||||
{introTitle}
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
|
||||
{introItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
<span className="text-justify break-words">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@ -35,17 +37,17 @@ const CombinedWorkflowLayout = ({
|
||||
|
||||
{/* Advantage Section */}
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
|
||||
{advantageTitle}
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
|
||||
{advantageItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
<span className="text-justify break-words">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@ -53,19 +55,21 @@ const CombinedWorkflowLayout = ({
|
||||
</div>
|
||||
|
||||
{/* Right Column - Workflow Image */}
|
||||
<div className="relative flex items-center justify-center p-4">
|
||||
{imageUrl ? (
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={imageAlt}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-gray-400 text-center">
|
||||
<p>Workflow image will appear here</p>
|
||||
<p className="text-sm mt-2">Please provide the imageUrl prop</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full min-w-0 flex items-start justify-center p-4 lg:p-6">
|
||||
<div className="w-full max-w-md">
|
||||
{imageUrl ? (
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={imageAlt}
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-gray-400 text-center p-8">
|
||||
<p>Workflow image will appear here</p>
|
||||
<p className="text-sm mt-2">Please provide the imageUrl prop</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,55 +1,56 @@
|
||||
// components/shared/SpecificationsLayout.jsx
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
const SpecificationsLayout = ({
|
||||
title = "Service Specifications",
|
||||
specificationItems = [],
|
||||
backgroundColor = "#e8f5f3",
|
||||
iconBackgroundColor = "bg-teal-600"
|
||||
iconBackgroundColor = "bg-orange-100"
|
||||
}) => {
|
||||
return (
|
||||
<section className="py-8 lg:py-6">
|
||||
<div className="container-fluid px-4 lg:px-6">
|
||||
<section className="w-full min-w-0 py-6 lg:py-8">
|
||||
<div className="w-full max-w-none px-4 sm:px-6 lg:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-left mb-8">
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
<div className="text-left mb-6 lg:mb-8">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Specifications Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 w-full max-w-none">
|
||||
{specificationItems.map((spec, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative"
|
||||
className="w-full min-w-0"
|
||||
>
|
||||
{/* Background Card */}
|
||||
<div
|
||||
className="rounded-3xl p-8 h-full min-h-[280px] flex flex-col"
|
||||
className="rounded-3xl p-6 lg:p-8 h-full min-h-[240px] sm:min-h-[280px] flex flex-col"
|
||||
style={{ backgroundColor: backgroundColor }}
|
||||
>
|
||||
{/* Icon Circle */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className={`w-16 h-16 ${iconBackgroundColor} rounded-full flex items-center justify-center`}>
|
||||
<div className="flex justify-center mb-4 lg:mb-6">
|
||||
<div className={`w-12 h-12 sm:w-16 sm:h-16 ${iconBackgroundColor} rounded-full flex items-center justify-center`}>
|
||||
<img
|
||||
src={spec.icon}
|
||||
className="w-14 h-14 object-contain brightness-0 invert"
|
||||
className="w-8 h-8 sm:w-10 sm:h-10 object-contain"
|
||||
alt={`${spec.title} Icon`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-center text-gray-800 text-lg font-semibold mb-4">
|
||||
<h3 className="text-center text-teal-700 text-base sm:text-lg font-semibold mb-3 lg:mb-4">
|
||||
{spec.title}
|
||||
</h3>
|
||||
|
||||
{/* Content */}
|
||||
<div className="text-gray-700 text-sm leading-relaxed text-center flex-grow flex items-center justify-center">
|
||||
<div className="w-full">
|
||||
<div className="text-gray-700 text-xs sm:text-sm leading-relaxed text-center flex-grow flex items-start justify-center">
|
||||
<div className="w-full min-w-0">
|
||||
{spec.renderContent ? spec.renderContent() : (
|
||||
<div className="text-gray-600">
|
||||
<div className="text-gray-600 break-words">
|
||||
{spec.content}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -33,7 +33,7 @@ const DNATable = () => {
|
||||
</a>{' '}
|
||||
and{' '}
|
||||
<a href="/dna-sequencing/enrichment-sequencing/targeted-sequencing" className="text-teal-600 hover:underline">
|
||||
Targeted Sequencing
|
||||
Custom Sequencing
|
||||
</a>
|
||||
</>
|
||||
),
|
||||
|
||||
@ -9,45 +9,82 @@ const EnrichmentIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides a more affordable alternative to Whole Genome Sequencing (WGS), making it accessible to a wider range of researchers and clinicians.",
|
||||
"Enhances detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with sensitivity and accuracy comparable to WGS, particularly in exonic regions.",
|
||||
"Produces smaller data sets compared to WGS, allowing for quicker and more straightforward data analysis, which accelerates research and diagnostics.",
|
||||
"Focuses on exonic regions, which are more likely to harbor disease-causing variants, leading to a more efficient and targeted approach in identifying genetic variants."
|
||||
];
|
||||
|
||||
|
||||
const customBadgeContent = (
|
||||
<div className="text-center">
|
||||
<div className="bg-teal-600 text-white px-4 py-2 rounded-lg mb-4">
|
||||
<span className="text-sm font-medium">ENRICHMENT SEQUENCING</span>
|
||||
</div>
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
|
||||
Whole Exome DNA Sequencing
|
||||
return (
|
||||
<div className="w-full bg-white">
|
||||
{/* Main container with two columns */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr]">
|
||||
|
||||
{/* Left Column - Content using existing IntroductionLayout structure */}
|
||||
<div className="px-6 lg:px-6 py-6">
|
||||
{/* Introduction Section */}
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Introduction and Workflow
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{contentItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* Advantage Section */}
|
||||
{/* <section>
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Advantage
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{advantageItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section> */}
|
||||
</div>
|
||||
<div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
|
||||
Amplicon Sequencing (16S/18S/ITS)
|
||||
</div>
|
||||
<div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
|
||||
Targeted Sequencing
|
||||
|
||||
{/* Right Column - Custom Content with Image and SVG */}
|
||||
<div className="relative p-4">
|
||||
<div className="flex flex-col h-full space-y-4">
|
||||
{/* Top Section - Flowchart with larger fixed width */}
|
||||
<div className="w-full flex items-center justify-center py-6">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/flowchart/enrichment_flow.svg"
|
||||
alt="ISO Certified Process Flow"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section - Image with same width */}
|
||||
{/* <div className="flex items-center justify-center">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/dna/whole_genome_seq-normal_denovo.png"
|
||||
alt="Enrichment Overview"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/enrichment-overview.png"
|
||||
imageAlt="Enrichment Overview"
|
||||
backgroundColor="#f8f9fa"
|
||||
customBadgeContent={customBadgeContent}
|
||||
useParagraphs={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnrichmentIntroduction;
|
||||
@ -6,7 +6,6 @@ const EnrichmentPipeline = ({
|
||||
svgUrl = "/images/flowchart/resequencing.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
import DNATitleBar from '../../components/shared/DNATitleBar';
|
||||
import EnrichmentIntroduction from './components/EnrichmentIntroduction';
|
||||
import EnrichmentAdvantages from './components/EnrichmentAdvantages';
|
||||
import EnrichmentSpecifications from './components/EnrichmentSpecifications';
|
||||
import EnrichmentPipeline from './components/EnrichmentPipeline';
|
||||
|
||||
@ -21,6 +22,7 @@ export default function EnrichmentSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<EnrichmentIntroduction />
|
||||
<EnrichmentAdvantages/>
|
||||
<EnrichmentPipeline/>
|
||||
<EnrichmentSpecifications />
|
||||
</div>
|
||||
|
||||
@ -12,7 +12,7 @@ const TargetedApplications = () => {
|
||||
|
||||
return (
|
||||
<ApplicationsLayout
|
||||
title="Applications of Targeted Sequencing"
|
||||
title="Applications of Custom Sequencing"
|
||||
applicationItems={applicationItems}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -4,7 +4,7 @@ import IntroductionLayout from '../../../../components/shared/IntroductionLayout
|
||||
|
||||
const TargetedIntroduction = () => {
|
||||
const contentItems = [
|
||||
"Targeted DNA Sequencing (also know as Gene Panel Sequencing) concentrate on specific genes or genomic regions of interest, allowing for in-depth analysis of mutations that are most relevant to particular diseases or conditions.",
|
||||
"Custom DNA Sequencing (also know as Gene Panel Sequencing) concentrate on specific genes or genomic regions of interest, allowing for in-depth analysis of mutations that are most relevant to particular diseases or conditions.",
|
||||
"The process begins with the selection of specific genes or regions, followed by the amplification of these targets through PCR. Sequencing is then performed on the amplified regions, ensuring high coverage and accuracy.",
|
||||
"Advanced bioinformatics tools are employed to analyze the sequencing data, providing detailed insights into genetic variants, their potential impact, and relevance to disease.",
|
||||
"Targeted sequencing is widely used in clinical settings for the diagnosis of genetic disorders, personalized medicine, and cancer genomics, providing actionable insights that can directly impact patient care."
|
||||
|
||||
@ -9,13 +9,13 @@ export default function TargetedSequencingPage() {
|
||||
{ label: 'Home', href: '/' },
|
||||
{ label: 'DNA Sequencing', href: '/dna-sequencing' },
|
||||
{ label: 'Enrichment Sequencing', href: '/dna-sequencing/enrichment-sequencing' },
|
||||
{ label: 'Targeted DNA Sequencing', current: true }
|
||||
{ label: 'Custom DNA Sequencing', current: true }
|
||||
];
|
||||
|
||||
return (
|
||||
<PageLayout fixedHeader={true}>
|
||||
<DNATitleBar
|
||||
title="Targeted DNA Sequencing"
|
||||
title="Custom DNA Sequencing"
|
||||
desc="Pinpoint Precision for Your Genetic Insights"
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
|
||||
@ -9,34 +9,63 @@ const EpigenomicsIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and epigenetic modifications.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides comprehensive analysis of epigenetic modifications including DNA methylation, histone modifications, and chromatin accessibility, offering insights into gene regulation mechanisms.",
|
||||
"Enables single-base resolution mapping of epigenetic marks across the genome, allowing for precise identification of regulatory elements and their modifications.",
|
||||
"Reveals epigenetic alterations associated with diseases, development, and environmental responses, providing insights into cellular memory and inheritance patterns.",
|
||||
"Identifies potential therapeutic targets and biomarkers for epigenetic-based treatments, supporting the development of personalized medicine approaches."
|
||||
];
|
||||
|
||||
|
||||
const serviceTypes = [
|
||||
"Whole Genome Bisulphite Sequencing (WGBS)",
|
||||
"Chip Sequencing",
|
||||
"ATAC Sequencing"
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/epigenomics-overview.png"
|
||||
imageAlt="Epigenomics Overview"
|
||||
badgeText="EPIGENOMICS"
|
||||
serviceTypes={serviceTypes}
|
||||
backgroundColor="#f8f9fa"
|
||||
badgeColor="bg-teal-600"
|
||||
useParagraphs={true}
|
||||
/>
|
||||
<div className="w-full bg-white">
|
||||
{/* Main container with two columns */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr]">
|
||||
|
||||
{/* Left Column - Content using existing IntroductionLayout structure */}
|
||||
<div className="px-6 lg:px-6 py-8">
|
||||
{/* Introduction Section */}
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Introduction and Workflow
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{contentItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Custom Content with Image and SVG */}
|
||||
<div className="relative p-4">
|
||||
<div className="flex flex-col h-full space-y-4">
|
||||
{/* Top Section - Flowchart with larger fixed width */}
|
||||
<div className="w-full flex items-center justify-center py-6">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/flowchart/epigenomic_flow.svg"
|
||||
alt="Epigenomics Process Flow"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section - Image with same width */}
|
||||
{/* <div className="flex items-center justify-center">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/epigenomics-overview.png"
|
||||
alt="Epigenomics Overview"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@ const EpigenomicsPipeline = ({
|
||||
svgUrl = "/images/flowchart/epigenomics.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import DNATitleBar from '../../components/shared/DNATitleBar';
|
||||
import EpigenomicsIntroduction from './components/EpigenomicsIntroduction';
|
||||
import EpigenomicsAdvantages from './components/EpigenomicsAdvantages';
|
||||
import EpigenomicsSpecifications from './components/EpigenomicsSpecifications';
|
||||
import EpigenomicsPipeline from './components/EpigenomicsPipeline';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
@ -21,6 +22,7 @@ export default function EpigenomicsSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<EpigenomicsIntroduction />
|
||||
<EpigenomicsAdvantages/>
|
||||
<EpigenomicsPipeline/>
|
||||
<EpigenomicsSpecifications />
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
// app/dna-sequencing/genome-mapping/components/GenomeMappingIntroduction.jsx
|
||||
|
||||
import IntroductionLayout from '../../../components/shared/IntroductionLayout';
|
||||
|
||||
const GenomeMappingIntroduction = () => {
|
||||
@ -8,32 +9,63 @@ const GenomeMappingIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and structural arrangements.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides detailed structural variant detection and genomic rearrangements, offering comprehensive insights into complex genomic architecture.",
|
||||
"Enables high-resolution analysis of large eukaryotic genomes and their structural features, facilitating better understanding of genome organization.",
|
||||
"Offers comprehensive mapping capabilities that reveal the three-dimensional structure of chromosomes and identify regulatory interactions between distant genomic regions.",
|
||||
"Supports multiple research applications including cancer research, developmental biology, and evolutionary studies by providing detailed genomic structural information."
|
||||
];
|
||||
|
||||
const serviceTypes = [
|
||||
"HiC Mapping",
|
||||
"Optical Sequencing"
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/genome-mapping-overview.png"
|
||||
imageAlt="Genome Mapping Overview"
|
||||
badgeText="GENOME MAPPING"
|
||||
serviceTypes={serviceTypes}
|
||||
backgroundColor="#f8f9fa"
|
||||
badgeColor="bg-teal-600"
|
||||
useParagraphs={true}
|
||||
/>
|
||||
<div className="w-full bg-white">
|
||||
{/* Main container with two columns */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr]">
|
||||
|
||||
{/* Left Column - Content using existing IntroductionLayout structure */}
|
||||
<div className="px-6 lg:px-6 py-8">
|
||||
{/* Introduction Section */}
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Introduction and Workflow
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{contentItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Custom Content with Image and SVG */}
|
||||
<div className="relative p-4">
|
||||
<div className="flex flex-col h-full space-y-4">
|
||||
{/* Top Section - Flowchart with larger fixed width */}
|
||||
<div className="w-full flex items-center justify-center py-6">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/flowchart/genome_mapping_flow.svg"
|
||||
alt="Genome Mapping Process Flow"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section - Image with same width */}
|
||||
{/* <div className="flex items-center justify-center">
|
||||
<div className="w-full max-w-md flex items-center justify-center">
|
||||
<img
|
||||
src="/images/genome-mapping-overview.png"
|
||||
alt="Genome Mapping Overview"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ const GenomeMappingPipeline = ({
|
||||
svgUrl = "/images/flowchart/genoemapping.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// app/dna-sequencing/genome-mapping/page.js
|
||||
import DNATitleBar from '../../components/shared/DNATitleBar';
|
||||
import GenomeMappingIntroduction from './components/GenomeMappingIntroduction';
|
||||
import GenomeMappingAdvantages from './components/GenomeMappingAdvantages'
|
||||
import GenomeMappingPipeline from './components/GenomeMappingPipeline';
|
||||
import GenomeMappingSpecifications from './components/GenomeMappingSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
@ -44,7 +45,7 @@ export default function GenomeMappingPage() {
|
||||
<div className="page-content">
|
||||
{/* Introduction Section */}
|
||||
<GenomeMappingIntroduction />
|
||||
|
||||
<GenomeMappingAdvantages/>
|
||||
<GenomeMappingPipeline/>
|
||||
|
||||
{/* Specifications Section */}
|
||||
|
||||
@ -1,132 +1,48 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const HybridSequencingPipeline = ({
|
||||
title = "Hybrid Sequencing",
|
||||
leftSteps = [
|
||||
"Raw Sequencing Data from Short Read (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Assembly of reads"
|
||||
],
|
||||
rightSteps = [
|
||||
"Annotation & Downstream Advanced Analysis",
|
||||
"Scaffolds of the genome",
|
||||
"Contigs from short reads and mapped to long reads",
|
||||
"Genome Assembly (Contigs from short reads)"
|
||||
],
|
||||
title = "Bioinformatics Pipeline",
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/hybridseq.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
cardColor = "bg-blue-200",
|
||||
textColor = "text-blue-800",
|
||||
arrowColor = "text-gray-600",
|
||||
className = "",
|
||||
cardClassName = "",
|
||||
titleClassName = ""
|
||||
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
{/* SVG Flowchart Container */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-full max-w-7xl">
|
||||
<div className="relative">
|
||||
{/* Mobile Layout - Single Column */}
|
||||
<div className="block sm:hidden">
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{/* Left side steps */}
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={`left-${index}`}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
<ArrowRight className={`w-5 h-5 ${arrowColor} my-2`} />
|
||||
|
||||
{/* Right side steps in reverse order */}
|
||||
{[...rightSteps].reverse().map((step, index) => (
|
||||
<React.Fragment key={`right-${index}`}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightSteps.length - 1 && (
|
||||
<ArrowUp className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{/* Long Read Data Box for mobile */}
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName} mt-4`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>Raw Sequencing Data from Long Read (fastq file)</h3>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 text-center">↑ connects to Scaffolds & Contigs</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Layout - Two Columns with Long Read positioned correctly */}
|
||||
<div className="hidden sm:block">
|
||||
<div className="grid grid-cols-2 gap-8 lg:gap-12">
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={`left-${index}`}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{rightSteps.map((step, index) => (
|
||||
<React.Fragment key={`right-${index}`}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightSteps.length - 1 && (
|
||||
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
<div className="w-full max-w-6xl">
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Arrow from Assembly of reads to Genome Assembly */}
|
||||
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||
) : (
|
||||
// Fallback message
|
||||
<div className="flex items-center justify-center h-40 text-gray-500">
|
||||
<p>Please provide SVG content or URL</p>
|
||||
</div>
|
||||
|
||||
{/* Long Read Data Box positioned to the right of Genome Assembly (same level) */}
|
||||
<div className="absolute bottom-4 right-0 transform translate-x-72">
|
||||
<div className={`${cardColor} rounded-lg p-4 w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>Raw Sequencing Data from Long Read (fastq file)</h3>
|
||||
</div>
|
||||
|
||||
{/* Direct vertical line and arrow to Scaffolds */}
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 -top-44">
|
||||
<div className="flex flex-col items-center">
|
||||
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||
<div className="w-0.5 h-36 bg-gray-400"></div>
|
||||
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// app/dna-sequencing/snp-genotyping/page.js
|
||||
import DNATitleBar from '../../components/shared/DNATitleBar';
|
||||
import HybridIntroduction from './components/HybridIntroduction';
|
||||
// import HybridSequencingPipeline from './components/HybridSequencingPipeline'
|
||||
import HybridSequencingPipeline from './components/HybridSequencingPipeline'
|
||||
import HybridApplications from './components/HybridApplications';
|
||||
import HybridSpecifications from './components/HybridSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
@ -47,7 +47,7 @@ export default function HybridGenomeSequencingPage() {
|
||||
<HybridIntroduction />
|
||||
|
||||
{/* Bioinformatics Pipeline Section */}
|
||||
{/* <HybridSequencingPipeline /> */}
|
||||
<HybridSequencingPipeline />
|
||||
|
||||
{/* Applications Section */}
|
||||
<HybridApplications />
|
||||
|
||||
@ -2,31 +2,26 @@ const LongReadComparison = () => {
|
||||
const comparisonData = [
|
||||
{
|
||||
category: "Read Length",
|
||||
illumina: "Paired-end 150 bp or 250bp\nHighly accurate (> 99.9%) while Limited to ~500bp",
|
||||
pacbio: "Average ≥ 15 kb\nbp to kb",
|
||||
nanopore: "Average > 17 kb\nKb to Mb"
|
||||
},
|
||||
{
|
||||
category: "Variant Calling",
|
||||
illumina: "Accurately detect the SNVs and InDels\nWhile Lower accuracy on the complex SVs detection",
|
||||
pacbio: "Long Read Length with High Accuracy: Good coverage of highly repetition and complexity area\nDetect SVs with high precision",
|
||||
nanopore: "Long Read Length with High Accuracy: Good coverage of highly repetition and complexity area\nDetect SVs with high precision"
|
||||
},
|
||||
{
|
||||
category: "Amplification/GC Bias",
|
||||
illumina: "PCR for cluster generation:\n1.Clonally amplified templates masquerade as variants\n2.Underrepresentation of AT-rich and GC-rich regions",
|
||||
pacbio: "NO GC Bias & Amplification Bias\nPCR-free to allow a uniform coverage and High Contiguity",
|
||||
nanopore: "NO GC Bias & Amplification Bias\nPCR-free to allow a uniform coverage and High Contiguity"
|
||||
},
|
||||
{
|
||||
category: "Machine Errors",
|
||||
illumina: "Signal Decay and Dephasing:\nGradual consumption of reagent\nSeq error rate increases with the length of reads",
|
||||
pacbio: "Relaxed requirement for cycle efficiency",
|
||||
nanopore: "Relaxed requirement for cycle efficiency"
|
||||
},
|
||||
{
|
||||
category: "DNA Methylation Detection",
|
||||
illumina: "WGBS or RRBS is required and limited on detection of CpG, CHH, CHG",
|
||||
pacbio: "Simultaneous Epigenetic Characterization\nDiverse DNA methylation types: CpG, CHH, CHG, 6mA, 4mC, 5hmc",
|
||||
nanopore: "Simultaneous Epigenetic Characterization\nDiverse DNA methylation types: CpG, CHH, CHG, 6mA, 4mC, 5hmc"
|
||||
}
|
||||
@ -95,9 +90,6 @@ const LongReadComparison = () => {
|
||||
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
|
||||
Platform Types
|
||||
</th>
|
||||
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
|
||||
Illumina NovaSeq 6000
|
||||
</th>
|
||||
<th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
|
||||
PacBio Sequel II/IIe
|
||||
</th>
|
||||
@ -112,11 +104,6 @@ const LongReadComparison = () => {
|
||||
<td className="border border-gray-300 px-4 py-3 align-top text-gray-600 font-medium text-base">
|
||||
{row.category}
|
||||
</td>
|
||||
<td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
|
||||
<div className="whitespace-pre-line">
|
||||
{row.illumina}
|
||||
</div>
|
||||
</td>
|
||||
<td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
|
||||
<div className="whitespace-pre-line">
|
||||
{formatContent(row.pacbio)}
|
||||
@ -132,60 +119,6 @@ const LongReadComparison = () => {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Key Technology Highlights */}
|
||||
<div className="bg-gradient-to-br from-teal-50 to-blue-50 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-600 mb-4 border-b border-teal-200 pb-2">
|
||||
Key Technology Highlights
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<h4 className="font-medium text-teal-600 mb-2">Oxford Nanopore</h4>
|
||||
<ul className="space-y-1">
|
||||
{["Real-time sequencing via protein nanopores", "Portable devices for field diagnostics", "Direct base modification detection"].map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-sm text-gray-600">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<h4 className="font-medium text-teal-600 mb-2">PacBio SMRT</h4>
|
||||
<ul className="space-y-1">
|
||||
{["Hi-Fi reads with 99.9% accuracy", "Excellent for complex genomes", "Haplotype resolution in polyploids"].map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-sm text-gray-600">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<h4 className="font-medium text-teal-600 mb-2">Illumina</h4>
|
||||
<ul className="space-y-1">
|
||||
{["High accuracy for SNVs and InDels", "Cost-effective for large studies", "Mature bioinformatics tools"].map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-sm text-gray-600">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -6,7 +6,6 @@ const MetagenomicsPipeline = ({
|
||||
svgUrl = "/images/flowchart/metagenomics.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -6,7 +6,6 @@ const SingleCellPipeline = ({
|
||||
svgUrl = "/images/flowchart/singlecell.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -0,0 +1,57 @@
|
||||
const SNPGenotypingTechniques = ({
|
||||
title = "Types of SNP-Based Genotyping using technique:",
|
||||
backgroundColor = "bg-teal-50"
|
||||
}) => {
|
||||
const techniques = [
|
||||
{
|
||||
name: "PCR:",
|
||||
description: "Utilizes PCR to amplify DNA regions containing SNPs, relying on allele-specific primers, probes, or melting curve differences for SNP detection.",
|
||||
examples: "TaqMan Assay, KASP, ARMS-PCR, qPCR, High-Resolution Melting (HRM)."
|
||||
},
|
||||
{
|
||||
name: "Microarray:",
|
||||
description: "Employs DNA microarrays to detect and analyze SNPs across the genome using hybridization with oligonucleotide probes specific to SNP loci.",
|
||||
examples: "Affymetrix GeneChips, Illumina Infinium Arrays, SNPlex, Axiom Array Platforms, MALDI-TOF Mass Spectrometry Arrays."
|
||||
},
|
||||
{
|
||||
name: "NGS:",
|
||||
description: "Uses Next-Generation Sequencing (NGS) for high-resolution, high-throughput SNP detection and analysis.",
|
||||
examples: "Whole-Genome Sequencing (WGS), Exome Sequencing, Targeted Sequencing, Genotyping-by-Sequencing (GBS), Double Digest Restriction-site Associated DNA (ddRAD) Sequencing."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className={`py-5 lg:py-5 mb-6 ${backgroundColor}`}>
|
||||
<div className="container-fluid px-4 lg:px-6">
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<ol className="space-y-4 lg:px-6" style={{color: '#555555'}}>
|
||||
{techniques.map((technique, index) => (
|
||||
<li key={index} className="leading-relaxed">
|
||||
<div className="flex items-start">
|
||||
<span
|
||||
className="inline-flex items-center justify-center w-6 h-6 rounded-full text-white font-bold text-sm mr-3 flex-shrink-0 mt-0.5"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
<div className="flex-1">
|
||||
<span className="font-semibold text-base">{technique.name}</span>
|
||||
<br />
|
||||
<span className="text-base">{technique.description}</span>
|
||||
<br />
|
||||
<span className="font-semibold" style={{color: '#faae31'}}>Examples: </span>
|
||||
<span className="text-base italic">{technique.examples}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default SNPGenotypingTechniques;
|
||||
@ -3,7 +3,10 @@ import IntroductionLayout from '../../../components/shared/IntroductionLayout';
|
||||
|
||||
const SNPIntroduction = () => {
|
||||
const contentItems = [
|
||||
"SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome, offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in population genetics, evolutionary biology, and plant and animal breeding."
|
||||
"ddRAD sequencing (Double Digest Restriction-site Associated DNA) is based on the Restriction Fragmentation technique combined with Next-Generation Sequencing (NGS). It is a robust approach for \"genotyping and SNP discovery\" that doesn't require a reference genome.",
|
||||
"The ddRAD workflow utilizes the precise cut-site specificity of restriction endonucleases to create library fragments from unique genomic regions. These fragments are then selected and sequenced, capturing data from identical genomic regions across samples.",
|
||||
"In the bioinformatics analysis, reads are aligned to either a reference genome or de novo assembly to detect SNVs and other genetic variations. This analysis supports studies on genetic diversity, population structure, and trait associations, with advanced tools enabling the processing of large datasets to achieve high genotyping accuracy.",
|
||||
"With the potential to develop hundreds to tens of thousands of genetic markers, ddRAD is ideal for applications in population genetics, germplasm assessment, marker-trait associations, GWAS, and QTL mapping. Its targeted, reproducible approach makes it a valuable tool for ecological and agricultural genomics."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Allows for precise identification of genetic variations at a single nucleotide level, enabling detailed mapping of genetic diversity.",
|
||||
@ -12,7 +15,6 @@ const SNPIntroduction = () => {
|
||||
"Can reveal associations between genetic variations and complex traits, allowing researchers to identify genetic contributors to health, disease, or productivity in agriculture."
|
||||
];
|
||||
|
||||
|
||||
const serviceTypes = [
|
||||
"DNA Sequencing",
|
||||
"RNA Sequencing",
|
||||
@ -20,19 +22,23 @@ const SNPIntroduction = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/SNP-based_genotyping_(ddRAD).png"
|
||||
imageAlt="SNP Genotyping Overview"
|
||||
badgeText="ISO CERTIFIED"
|
||||
serviceTypes={serviceTypes}
|
||||
backgroundColor="#f8f9fa"
|
||||
badgeColor="bg-teal-600"
|
||||
useParagraphs={true}
|
||||
/>
|
||||
<>
|
||||
|
||||
{/* Introduction Layout */}
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/SNP-based_genotyping_(ddRAD).png"
|
||||
imageAlt="SNP Genotyping Overview"
|
||||
badgeText="ISO CERTIFIED"
|
||||
serviceTypes={serviceTypes}
|
||||
backgroundColor="#f8f9fa"
|
||||
badgeColor="bg-teal-600"
|
||||
useParagraphs={true}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
|
||||
const SNPWorkflow = ({
|
||||
workflowImage = "/images/flowchart/snp_flow.svg"
|
||||
}) => {
|
||||
const introItems = [
|
||||
"SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome, offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in population genetics, evolutionary biology, and plant and animal breeding."
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full bg-white">
|
||||
{/* Main container with two columns */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr]">
|
||||
|
||||
{/* Left Column - Content */}
|
||||
<div className="px-6 lg:px-6 py-8">
|
||||
{/* Introduction Section */}
|
||||
<section>
|
||||
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
||||
Introduction and Workflow
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
|
||||
{introItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Workflow Image */}
|
||||
<div className="relative flex items-start justify-center p-4">
|
||||
<img
|
||||
src={workflowImage}
|
||||
alt="SNP Genotyping Workflow"
|
||||
className="max-w-full min-h-90px object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SNPWorkflow;
|
||||
34
app/dna-sequencing/snp-genotyping/ddRAD-sequencing/page.js
Normal file
34
app/dna-sequencing/snp-genotyping/ddRAD-sequencing/page.js
Normal file
@ -0,0 +1,34 @@
|
||||
// app/dna-sequencing/snp-genotyping/page.js
|
||||
import DNATitleBar from '../../../components/shared/DNATitleBar';
|
||||
import SNPIntroduction from '../components/SNPIntroduction';
|
||||
import SNPApplications from '../components/SNPApplications';
|
||||
import SNPSpecifications from '../components/SNPSpecifications';
|
||||
import PageLayout from '../../../components/Layout/PageLayout';
|
||||
|
||||
export default function ddRADPage() {
|
||||
const breadcrumbs = [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "Research", href: "/dna-sequencing" },
|
||||
{ label: "SNP-based Genotyping", href: "/dna-sequencing/snp-genotyping" },
|
||||
{ label: "ddRAD Sequencing", current: true },
|
||||
];
|
||||
|
||||
return (
|
||||
<PageLayout fixedHeader={true}>
|
||||
<div className="page-wrapper">
|
||||
<DNATitleBar
|
||||
title="Double Digest Restriction-site Associated DNA (ddRAD) Sequencing"
|
||||
desc="Focused, Cost-Effective Genotyping with ddRAD"
|
||||
breadcrumbs={breadcrumbs}
|
||||
backgroundImage="/images/bredcrumb.jpg"
|
||||
/>
|
||||
|
||||
<div className="page-content">
|
||||
<SNPIntroduction />
|
||||
<SNPApplications />
|
||||
<SNPSpecifications />
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
@ -1,8 +1,7 @@
|
||||
// app/dna-sequencing/snp-genotyping/page.js
|
||||
import DNATitleBar from '../../components/shared/DNATitleBar';
|
||||
import SNPIntroduction from './components/SNPIntroduction';
|
||||
import SNPApplications from './components/SNPApplications';
|
||||
import SNPSpecifications from './components/SNPSpecifications';
|
||||
import SNPWorkflow from './components/SNPWorkflow ';
|
||||
import SNPGenotypingTechniques from './components/SNPGenotypingTechniques';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
export default function SNPGenotypingPage() {
|
||||
@ -23,9 +22,8 @@ export default function SNPGenotypingPage() {
|
||||
/>
|
||||
|
||||
<div className="page-content">
|
||||
<SNPIntroduction />
|
||||
<SNPApplications />
|
||||
<SNPSpecifications />
|
||||
<SNPWorkflow/>
|
||||
<SNPGenotypingTechniques/>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
@ -9,23 +9,69 @@ const WGSIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are then assembled to construct the genome or aligned to a known reference genome.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing.",
|
||||
"Identifies both small (SNVs, CNVs, InDels) and large structural variants that may be missed with targeted approaches, offering valuable insights into inherited genetic conditions and characterizing mutations driving cancer progression.",
|
||||
"Generates large volumes of data quickly, facilitating the assembly of novel genomes.",
|
||||
"Uncovers genomic diversity, taxonomic classifications, and evolutionary relationships, enhancing our understanding of biological complexity."
|
||||
];
|
||||
|
||||
// const advantageItems = [
|
||||
// "Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing.",
|
||||
// "Identifies both small (SNVs, CNVs, InDels) and large structural variants that may be missed with targeted approaches, offering valuable insights into inherited genetic conditions and characterizing mutations driving cancer progression.",
|
||||
// "Generates large volumes of data quickly, facilitating the assembly of novel genomes.",
|
||||
// "Uncovers genomic diversity, taxonomic classifications, and evolutionary relationships, enhancing our understanding of biological complexity."
|
||||
// ];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_genome_seq-normal_denovo.png"
|
||||
imageAlt="Sample Process Steps"
|
||||
useParagraphs={true}
|
||||
/>
|
||||
<div className="w-full min-w-0 bg-white">
|
||||
{/* Main container with two columns */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] gap-0">
|
||||
|
||||
{/* Left Column - Content using existing IntroductionLayout structure */}
|
||||
<div className="w-full min-w-0 px-4 sm:px-6 lg:px-6 py-6">
|
||||
{/* Introduction Section */}
|
||||
<section>
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
|
||||
Introduction and Workflow
|
||||
</h2>
|
||||
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
|
||||
{contentItems.map((item, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<span className="text-justify break-words" style={{ fontSize: 'inherit' }}>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Custom Content with Image and SVG */}
|
||||
<div className="w-full min-w-0 relative p-4 lg:p-6">
|
||||
<div className="flex flex-col">
|
||||
{/* Top Section - Flowchart with larger fixed width */}
|
||||
<div className="w-full flex items-center justify-center">
|
||||
<div className="w-full max-w-md">
|
||||
<img
|
||||
src="/images/flowchart/WGS_flow.svg"
|
||||
alt="WGS Process Flow"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section - Image with same width */}
|
||||
{/* <div className="flex items-center justify-center">
|
||||
<div className="w-full max-w-md">
|
||||
<img
|
||||
src="/images/dna/whole_genome_seq-normal_denovo.png"
|
||||
alt="WGS Overview"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ const WGSSpecifications = () => {
|
||||
</div>
|
||||
<div className="mt-4 text-sm">
|
||||
<strong>
|
||||
PLEASE refer to{' '}
|
||||
Please refer to{' '}
|
||||
<Link
|
||||
href="/sample-submission-guideline"
|
||||
className="text-teal-600 underline hover:text-teal-700"
|
||||
|
||||
@ -6,7 +6,6 @@ const WGSDeNovoPipeline = ({
|
||||
svgUrl = "/images/flowchart/denovo.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// app/dna-sequencing/whole-genome-sequencing/page.js (Updated)
|
||||
import DNATitleBar from '../../components/shared/DNATitleBar';
|
||||
import WGSIntroduction from './components/WGSIntroduction';
|
||||
import WGSAdvantages from './components/WGSAdvantages';
|
||||
import WGSSpecifications from './components/WGSSpecifications';
|
||||
import PageLayout from '@/app/components/Layout/PageLayout';
|
||||
|
||||
@ -21,6 +22,7 @@ export default function WholeGenomeSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<WGSIntroduction />
|
||||
<WGSAdvantages />
|
||||
<WGSSpecifications />
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
@ -6,7 +6,6 @@ const WGSResequencingPipeline = ({
|
||||
svgUrl = "/images/flowchart/resequencing.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -20,10 +20,10 @@ export default function ClinicalAreas() {
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{/* Rare Disorders */}
|
||||
<Link href="/health/rare-disorders">
|
||||
<div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
|
||||
<div className="rounded-2xl p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Icon */}
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
|
||||
<Image
|
||||
src="/images/icons/disorder.png"
|
||||
alt="Rare Disorders"
|
||||
@ -33,7 +33,7 @@ export default function ClinicalAreas() {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Rare Disorders</h3>
|
||||
<h3 className="text-lg font-semibold text-teal-700 mb-2">Rare Disorders</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed">
|
||||
Advancing diagnostics and treatments for rare genetic conditions.
|
||||
</p>
|
||||
@ -44,10 +44,10 @@ export default function ClinicalAreas() {
|
||||
|
||||
{/* Oncology */}
|
||||
<Link href="/health/oncology">
|
||||
<div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
|
||||
<div className="rounded-2xl p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Icon */}
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
|
||||
<Image
|
||||
src="/images/icons/oncology.png"
|
||||
alt="Oncology"
|
||||
@ -57,7 +57,7 @@ export default function ClinicalAreas() {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Oncology</h3>
|
||||
<h3 className="text-lg font-semibold text-teal-700 mb-2">Oncology</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed">
|
||||
Revolutionizing cancer care with targeted therapies and early detection.
|
||||
</p>
|
||||
|
||||
@ -1,40 +1,46 @@
|
||||
// components/AboutHealth.js
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function AboutHealth() {
|
||||
return (
|
||||
<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">
|
||||
<ul className="list-disc list-inside space-y-4 leading-relaxed pl-4">
|
||||
<li className="text-justify" style={{color: '#faae31'}}>
|
||||
<span style={{color: '#ffffff'}}>
|
||||
At Operify Health, we believe every patient deserves answers that are not only
|
||||
accurate — but actionable. By harnessing the power of Next Generation Sequencing
|
||||
(NGS), we transform patient samples into rich genomic insights that enable
|
||||
clinicians and oncologists to make informed, personalized decisions. From rare
|
||||
genetic disorders to complex oncological cases, our solutions help uncover what
|
||||
traditional diagnostics often miss.
|
||||
</span>
|
||||
</li>
|
||||
<li className="text-justify" style={{color: '#faae31'}}>
|
||||
<span style={{color: '#ffffff'}}>
|
||||
Our strength lies in our multidisciplinary team of researchers, bioinformaticians,
|
||||
and data scientists who use custom-built algorithms and cutting-edge analytics to
|
||||
interpret genetic data with unmatched depth. Backed by curated scientific evidence
|
||||
and real-world clinical findings, we deliver recommendations that are current,
|
||||
relevant, and patient-focused.
|
||||
</span>
|
||||
</li>
|
||||
<li className="text-justify" style={{color: '#faae31'}}>
|
||||
<span style={{color: '#ffffff'}}>
|
||||
With every genome we decode, we move closer to truly personalized medicine —
|
||||
bridging data and care, science and life.
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<section className="bg-teal-700">
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* Left Side - Image */}
|
||||
<div className="hidden lg:block w-3/4 relative">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="/images/health/health.png"
|
||||
alt="Healthcare professional working in modern laboratory"
|
||||
fill
|
||||
className="object-cover grayscale-[20%]"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-slate-900/10"></div>
|
||||
</div>
|
||||
|
||||
{/* Subtle border */}
|
||||
<div className="absolute right-0 top-0 w-px h-full bg-teal-600"></div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Content */}
|
||||
<div className="w-full lg:w-3/4">
|
||||
<div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
|
||||
{/* Brand/Title */}
|
||||
<div className="mb-4">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">
|
||||
<span>Operify</span>
|
||||
<span className="ml-2">Health</span>
|
||||
</h2>
|
||||
<div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="mb-4 max-w-3xl">
|
||||
<div className="text-gray-200 leading-relaxed text-base text-justify font-light">
|
||||
At Operify Health, we believe every patient deserves answers that are not only accurate — but actionable. By harnessing the power of Next Generation Sequencing (NGS), we transform patient samples into rich genomic insights that enable clinicians and oncologists to make informed, personalized decisions. From rare genetic disorders to complex oncological cases, our solutions help uncover what traditional diagnostics often miss.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -20,10 +20,10 @@ export default function ClinicalAreas() {
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{/* Rare Disorders */}
|
||||
<Link href="/health/rare-disorders">
|
||||
<div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
|
||||
<div className="rounded-2xl p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Icon */}
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
|
||||
<Image
|
||||
src="/images/icons/disorder.png"
|
||||
alt="Rare Disorders"
|
||||
@ -33,7 +33,7 @@ export default function ClinicalAreas() {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Rare Disorders</h3>
|
||||
<h3 className="text-lg font-semibold text-teal-700 mb-2">Rare Disorders</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed">
|
||||
Advancing diagnostics and treatments for rare genetic conditions.
|
||||
</p>
|
||||
@ -44,10 +44,10 @@ export default function ClinicalAreas() {
|
||||
|
||||
{/* Oncology */}
|
||||
<Link href="/health/oncology">
|
||||
<div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
|
||||
<div className="rounded-2xl p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Icon */}
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
|
||||
<Image
|
||||
src="/images/icons/oncology.png"
|
||||
alt="Oncology"
|
||||
@ -57,7 +57,7 @@ export default function ClinicalAreas() {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Oncology</h3>
|
||||
<h3 className="text-lg font-semibold text-teal-700 mb-2">Oncology</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed">
|
||||
Revolutionizing cancer care with targeted therapies and early detection.
|
||||
</p>
|
||||
|
||||
@ -1,40 +1,46 @@
|
||||
// components/AboutHealth.js
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function AboutHealth() {
|
||||
return (
|
||||
<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">
|
||||
<ul className="list-disc list-inside space-y-4 leading-relaxed pl-4">
|
||||
<li className="text-justify" style={{color: '#faae31'}}>
|
||||
<span style={{color: '#ffffff'}}>
|
||||
At Operify Health, we believe every patient deserves answers that are not only
|
||||
accurate — but actionable. By harnessing the power of Next Generation Sequencing
|
||||
(NGS), we transform patient samples into rich genomic insights that enable
|
||||
clinicians and oncologists to make informed, personalized decisions. From rare
|
||||
genetic disorders to complex oncological cases, our solutions help uncover what
|
||||
traditional diagnostics often miss.
|
||||
</span>
|
||||
</li>
|
||||
<li className="text-justify" style={{color: '#faae31'}}>
|
||||
<span style={{color: '#ffffff'}}>
|
||||
Our strength lies in our multidisciplinary team of researchers, bioinformaticians,
|
||||
and data scientists who use custom-built algorithms and cutting-edge analytics to
|
||||
interpret genetic data with unmatched depth. Backed by curated scientific evidence
|
||||
and real-world clinical findings, we deliver recommendations that are current,
|
||||
relevant, and patient-focused.
|
||||
</span>
|
||||
</li>
|
||||
<li className="text-justify" style={{color: '#faae31'}}>
|
||||
<span style={{color: '#ffffff'}}>
|
||||
With every genome we decode, we move closer to truly personalized medicine —
|
||||
bridging data and care, science and life.
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<section className="bg-teal-700">
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* Left Side - Image */}
|
||||
<div className="hidden lg:block w-3/4 relative">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="/images/health/health.png"
|
||||
alt="Healthcare professional working in modern laboratory"
|
||||
fill
|
||||
className="object-cover grayscale-[20%]"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-slate-900/10"></div>
|
||||
</div>
|
||||
|
||||
{/* Subtle border */}
|
||||
<div className="absolute right-0 top-0 w-px h-full bg-teal-600"></div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Content */}
|
||||
<div className="w-full lg:w-3/4">
|
||||
<div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
|
||||
{/* Brand/Title */}
|
||||
<div className="mb-4">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">
|
||||
<span>Operify</span>
|
||||
<span className="ml-2">Health</span>
|
||||
</h2>
|
||||
<div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="mb-4 max-w-3xl">
|
||||
<div className="text-gray-200 leading-relaxed text-base text-justify font-light">
|
||||
At Operify Health, we believe every patient deserves answers that are not only accurate — but actionable. By harnessing the power of Next Generation Sequencing (NGS), we transform patient samples into rich genomic insights that enable clinicians and oncologists to make informed, personalized decisions. From rare genetic disorders to complex oncological cases, our solutions help uncover what traditional diagnostics often miss.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,8 +5,7 @@ export default function CancerKeyFeatures() {
|
||||
{ title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
|
||||
{ title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
|
||||
{ title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
|
||||
{ title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." },
|
||||
{ title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
|
||||
{ title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." }
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
@ -1,12 +1,53 @@
|
||||
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 HereditaryCancerPanel() {
|
||||
const features = [
|
||||
{ title: "Comprehensive Gene Coverage", desc: "Includes high- and moderate-risk genes such as BRCA1, BRCA2, TP53, MLH1, MSH2, APC, and others." },
|
||||
{ title: "Germline Variant Detection", desc: "Accurately detects SNVs, Indels, and selected CNVs in genes associated with inherited cancer risk." },
|
||||
{ title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
|
||||
{ title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
|
||||
{ title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
|
||||
{ title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." },
|
||||
{ title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
|
||||
{
|
||||
title: "Comprehensive Gene Coverage",
|
||||
desc: "Includes high- and moderate-risk genes such as BRCA1, BRCA2, TP53, MLH1, MSH2, APC, and others.",
|
||||
icon: "/images/icons/gene-coverage.png"
|
||||
},
|
||||
{
|
||||
title: "Germline Variant Detection",
|
||||
desc: "Accurately detects SNVs, Indels, and selected CNVs in genes associated with inherited cancer risk.",
|
||||
icon: "/images/icons/variant-detection.png"
|
||||
},
|
||||
{
|
||||
title: "Family-Centered Testing",
|
||||
desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention.",
|
||||
icon: "/images/icons/family-centered-testing.png"
|
||||
},
|
||||
{
|
||||
title: "Clinical Actionability",
|
||||
desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning.",
|
||||
icon: "/images/icons/clinical-actionability.png"
|
||||
},
|
||||
{
|
||||
title: "High Sensitivity & Specificity",
|
||||
desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling.",
|
||||
icon: "/images/icons/high-sensitivity-specificity.png"
|
||||
},
|
||||
{
|
||||
title: "Expert Interpretation & Reporting",
|
||||
desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases.",
|
||||
icon: "/images/icons/expert-interpretation-reporting.png"
|
||||
}
|
||||
];
|
||||
|
||||
const points = [
|
||||
@ -29,32 +70,24 @@ export default function HereditaryCancerPanel() {
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<p className="text-gray-600 leading-relaxed text-base text-justify">
|
||||
<strong>{idx === 0 ? "About 5-10% of all cancers are linked to inherited genetic mutations" : ""}</strong>
|
||||
{idx === 0 ? ", often going undetected until late stages or after multiple family members are affected." : point}
|
||||
{point}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-semibold text-gray-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>
|
||||
);
|
||||
|
||||
@ -1,49 +1,124 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function OncologyIntro() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
const slides = [
|
||||
{
|
||||
content: "Cancer is not a single disease—it's a highly complex and dynamic group of disorders, often driven by a multitude of genomic alterations. Despite advancements in treatment, many patients still face uncertainty due to incomplete or delayed molecular diagnoses."
|
||||
},
|
||||
{
|
||||
content: "At Operify Health, we recognize that behind every tumor is a unique genetic story waiting to be told. Our precision oncology solutions utilize high-throughput Next Generation Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians with actionable insights that inform targeted therapies, immunotherapy decisions, and hereditary cancer risk assessments."
|
||||
},
|
||||
{
|
||||
content: "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."
|
||||
},
|
||||
{
|
||||
content: "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."
|
||||
}
|
||||
];
|
||||
|
||||
const goToSlide = (index) => {
|
||||
setCurrentSlide(index);
|
||||
};
|
||||
|
||||
const nextSlide = () => {
|
||||
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
||||
};
|
||||
|
||||
const prevSlide = () => {
|
||||
setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
|
||||
};
|
||||
|
||||
return (
|
||||
<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">
|
||||
Turning Complexity into Clarity
|
||||
</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">
|
||||
Cancer is not a single disease—it's a highly complex and dynamic group of disorders,
|
||||
often driven by a multitude of genomic alterations. Despite advancements in treatment,
|
||||
many patients still face uncertainty due to incomplete or delayed molecular diagnoses.
|
||||
<section className="bg-teal-700">
|
||||
<div className="flex flex-col lg:flex-row min-h-[300px] sm:min-h-[350px] lg:min-h-[350px]">
|
||||
{/* Image - Top on mobile, Left on desktop */}
|
||||
<div className="w-full lg:w-3/4 h-48 sm:h-64 lg:h-auto relative order-1 lg:order-1">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="/images/health/oncology_section.jpg"
|
||||
alt="Cancer research and oncology molecular analysis"
|
||||
fill
|
||||
className="object-cover grayscale-[20%]"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-slate-900/10"></div>
|
||||
</div>
|
||||
|
||||
{/* Subtle border */}
|
||||
<div className="absolute bottom-0 left-0 w-full h-px lg:right-0 lg:top-0 lg:w-px lg:h-full bg-teal-600"></div>
|
||||
</div>
|
||||
|
||||
{/* Content - Bottom on mobile, Right on desktop */}
|
||||
<div className="w-full lg:w-3/4 order-2 lg:order-2">
|
||||
<div className="h-full flex flex-col justify-center px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
|
||||
{/* Brand/Title */}
|
||||
<div className="mb-4 sm:mb-6">
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-3xl font-bold text-white mb-3 sm:mb-4">
|
||||
<span className="block sm:inline">Turning</span>
|
||||
<span className="block sm:inline sm:ml-2">Complexity into Clarity</span>
|
||||
</h2>
|
||||
<div className="w-8 sm:w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
</div>
|
||||
|
||||
{/* Content Slider */}
|
||||
<div className="mb-4 sm:mb-6 max-w-3xl">
|
||||
<div className="text-gray-200 leading-relaxed text-sm sm:text-base mb-4 sm:mb-6 text-left sm:text-justify font-light transition-opacity duration-300 min-h-[120px] sm:min-h-[140px] lg:min-h-[160px] flex items-start">
|
||||
<span>{slides[currentSlide].content}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2 sm:space-x-3">
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="w-7 h-7 sm:w-8 sm:h-8 flex items-center justify-center border border-white text-white rounded-full transition-all duration-200 hover:scale-105 active:scale-95 hover:border-yellow-400 hover:bg-yellow-400 hover:text-teal-700"
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
className="w-7 h-7 sm:w-8 sm:h-8 flex items-center justify-center border border-white text-white rounded-full transition-all duration-200 hover:scale-105 active:scale-95 hover:border-yellow-400 hover:bg-yellow-400 hover:text-teal-700"
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Progress Indicators */}
|
||||
<div className="flex space-x-1.5 sm:space-x-2 ml-3 sm:ml-4">
|
||||
{slides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className={`transition-all duration-200 rounded-full hover:scale-110 active:scale-95 h-1.5 ${
|
||||
index === currentSlide
|
||||
? 'w-5 sm:w-6 bg-yellow-400'
|
||||
: 'w-1.5 bg-white hover:bg-gray-100'
|
||||
}`}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slide counter for mobile */}
|
||||
<div className="block sm:hidden">
|
||||
<span className="text-xs text-gray-300">
|
||||
{currentSlide + 1} / {slides.length}
|
||||
</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 recognize that behind every tumor is a unique genetic story waiting
|
||||
to be told. Our precision oncology solutions utilize high-throughput Next Generation
|
||||
Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians
|
||||
with actionable insights that inform targeted therapies, immunotherapy decisions, and
|
||||
hereditary cancer risk assessments.
|
||||
</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">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@ const OncologyTitle = () => {
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<a href="/about-us" className="text-white hover:text-yellow-400 underline">Health</a>
|
||||
<a href="/health" className="text-white hover:text-yellow-400 underline">Health</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
|
||||
@ -5,8 +5,7 @@ export default function CancerKeyFeatures() {
|
||||
{ title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
|
||||
{ title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
|
||||
{ title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
|
||||
{ title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." },
|
||||
{ title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
|
||||
{ title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." }
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
@ -1,12 +1,53 @@
|
||||
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 HereditaryCancerPanel() {
|
||||
const features = [
|
||||
{ title: "Comprehensive Gene Coverage", desc: "Includes high- and moderate-risk genes such as BRCA1, BRCA2, TP53, MLH1, MSH2, APC, and others." },
|
||||
{ title: "Germline Variant Detection", desc: "Accurately detects SNVs, Indels, and selected CNVs in genes associated with inherited cancer risk." },
|
||||
{ title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
|
||||
{ title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
|
||||
{ title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
|
||||
{ title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." },
|
||||
{ title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
|
||||
{
|
||||
title: "Comprehensive Gene Coverage",
|
||||
desc: "Includes high- and moderate-risk genes such as BRCA1, BRCA2, TP53, MLH1, MSH2, APC, and others.",
|
||||
icon: "/images/icons/gene-coverage.png"
|
||||
},
|
||||
{
|
||||
title: "Germline Variant Detection",
|
||||
desc: "Accurately detects SNVs, Indels, and selected CNVs in genes associated with inherited cancer risk.",
|
||||
icon: "/images/icons/variant-detection.png"
|
||||
},
|
||||
{
|
||||
title: "Family-Centered Testing",
|
||||
desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention.",
|
||||
icon: "/images/icons/family-centered-testing.png"
|
||||
},
|
||||
{
|
||||
title: "Clinical Actionability",
|
||||
desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning.",
|
||||
icon: "/images/icons/clinical-actionability.png"
|
||||
},
|
||||
{
|
||||
title: "High Sensitivity & Specificity",
|
||||
desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling.",
|
||||
icon: "/images/icons/high-sensitivity-specificity.png"
|
||||
},
|
||||
{
|
||||
title: "Expert Interpretation & Reporting",
|
||||
desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases.",
|
||||
icon: "/images/icons/expert-interpretation-reporting.png"
|
||||
}
|
||||
];
|
||||
|
||||
const points = [
|
||||
@ -29,32 +70,24 @@ export default function HereditaryCancerPanel() {
|
||||
style={{backgroundColor: '#faae31'}}
|
||||
></span>
|
||||
<p className="text-gray-600 leading-relaxed text-base text-justify">
|
||||
<strong>{idx === 0 ? "About 5-10% of all cancers are linked to inherited genetic mutations" : ""}</strong>
|
||||
{idx === 0 ? ", often going undetected until late stages or after multiple family members are affected." : point}
|
||||
{point}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-semibold text-gray-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>
|
||||
);
|
||||
|
||||
@ -1,49 +1,124 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function OncologyIntro() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
const slides = [
|
||||
{
|
||||
content: "Cancer is not a single disease—it's a highly complex and dynamic group of disorders, often driven by a multitude of genomic alterations. Despite advancements in treatment, many patients still face uncertainty due to incomplete or delayed molecular diagnoses."
|
||||
},
|
||||
{
|
||||
content: "At Operify Health, we recognize that behind every tumor is a unique genetic story waiting to be told. Our precision oncology solutions utilize high-throughput Next Generation Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians with actionable insights that inform targeted therapies, immunotherapy decisions, and hereditary cancer risk assessments."
|
||||
},
|
||||
{
|
||||
content: "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."
|
||||
},
|
||||
{
|
||||
content: "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."
|
||||
}
|
||||
];
|
||||
|
||||
const goToSlide = (index) => {
|
||||
setCurrentSlide(index);
|
||||
};
|
||||
|
||||
const nextSlide = () => {
|
||||
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
||||
};
|
||||
|
||||
const prevSlide = () => {
|
||||
setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
|
||||
};
|
||||
|
||||
return (
|
||||
<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">
|
||||
Turning Complexity into Clarity
|
||||
</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">
|
||||
Cancer is not a single disease—it's a highly complex and dynamic group of disorders,
|
||||
often driven by a multitude of genomic alterations. Despite advancements in treatment,
|
||||
many patients still face uncertainty due to incomplete or delayed molecular diagnoses.
|
||||
<section className="bg-teal-700">
|
||||
<div className="flex flex-col lg:flex-row min-h-[300px] sm:min-h-[350px] lg:min-h-[350px]">
|
||||
{/* Image - Top on mobile, Left on desktop */}
|
||||
<div className="w-full lg:w-3/4 h-48 sm:h-64 lg:h-auto relative order-1 lg:order-1">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="/images/health/oncology_section.jpg"
|
||||
alt="Cancer research and oncology molecular analysis"
|
||||
fill
|
||||
className="object-cover grayscale-[20%]"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-slate-900/10"></div>
|
||||
</div>
|
||||
|
||||
{/* Subtle border */}
|
||||
<div className="absolute bottom-0 left-0 w-full h-px lg:right-0 lg:top-0 lg:w-px lg:h-full bg-teal-600"></div>
|
||||
</div>
|
||||
|
||||
{/* Content - Bottom on mobile, Right on desktop */}
|
||||
<div className="w-full lg:w-3/4 order-2 lg:order-2">
|
||||
<div className="h-full flex flex-col justify-center px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
|
||||
{/* Brand/Title */}
|
||||
<div className="mb-4 sm:mb-6">
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-3xl font-bold text-white mb-3 sm:mb-4">
|
||||
<span className="block sm:inline">Turning</span>
|
||||
<span className="block sm:inline sm:ml-2">Complexity into Clarity</span>
|
||||
</h2>
|
||||
<div className="w-8 sm:w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
</div>
|
||||
|
||||
{/* Content Slider */}
|
||||
<div className="mb-4 sm:mb-6 max-w-3xl">
|
||||
<div className="text-gray-200 leading-relaxed text-sm sm:text-base mb-4 sm:mb-6 text-left sm:text-justify font-light transition-opacity duration-300 min-h-[120px] sm:min-h-[140px] lg:min-h-[160px] flex items-start">
|
||||
<span>{slides[currentSlide].content}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2 sm:space-x-3">
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="w-7 h-7 sm:w-8 sm:h-8 flex items-center justify-center border border-white text-white rounded-full transition-all duration-200 hover:scale-105 active:scale-95 hover:border-yellow-400 hover:bg-yellow-400 hover:text-teal-700"
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
className="w-7 h-7 sm:w-8 sm:h-8 flex items-center justify-center border border-white text-white rounded-full transition-all duration-200 hover:scale-105 active:scale-95 hover:border-yellow-400 hover:bg-yellow-400 hover:text-teal-700"
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Progress Indicators */}
|
||||
<div className="flex space-x-1.5 sm:space-x-2 ml-3 sm:ml-4">
|
||||
{slides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className={`transition-all duration-200 rounded-full hover:scale-110 active:scale-95 h-1.5 ${
|
||||
index === currentSlide
|
||||
? 'w-5 sm:w-6 bg-yellow-400'
|
||||
: 'w-1.5 bg-white hover:bg-gray-100'
|
||||
}`}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slide counter for mobile */}
|
||||
<div className="block sm:hidden">
|
||||
<span className="text-xs text-gray-300">
|
||||
{currentSlide + 1} / {slides.length}
|
||||
</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 recognize that behind every tumor is a unique genetic story waiting
|
||||
to be told. Our precision oncology solutions utilize high-throughput Next Generation
|
||||
Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians
|
||||
with actionable insights that inform targeted therapies, immunotherapy decisions, and
|
||||
hereditary cancer risk assessments.
|
||||
</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">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@ const OncologyTitle = () => {
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<a href="/about-us" className="text-white hover:text-yellow-400 underline">Health</a>
|
||||
<a href="/health" className="text-white hover:text-yellow-400 underline">Health</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import OncologyTitle from './components/OncologyTitle';
|
||||
import OncologyIntro from './components/OncologyIntro';
|
||||
import HereditaryCancerPanel from './components/HereditaryCancerPanel';
|
||||
import SampleRequirements from '../rare-disorders/components/SampleRequirements';
|
||||
import SampleRequirements from '../rare-disorders/exome/components/SampleRequirements';
|
||||
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
@ -21,7 +21,9 @@ export default function OncologyPage() {
|
||||
|
||||
|
||||
{/* Sample Requirements */}
|
||||
<SampleRequirements/>
|
||||
<div className="pb-8">
|
||||
<SampleRequirements/>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -13,7 +13,6 @@ export default function ClinicalAreasGrid() {
|
||||
{ name: "Metabolic Disorders", icon: "/images/icons/metabolic.png" },
|
||||
{ name: "Nephrology", icon: "/images/icons/nephrology.png" },
|
||||
{ name: "Neurology", icon: "/images/icons/neurology.png" },
|
||||
{ name: "Oncology", icon: "/images/icons/oncology.png" },
|
||||
{ name: "Ophthalmology", icon: "/images/icons/ophthalmology.png" },
|
||||
{ name: "Osteology", icon: "/images/icons/osteology.png" },
|
||||
{ name: "Pneumology", icon: "/images/icons/pneumology.png" },
|
||||
@ -21,8 +20,8 @@ export default function ClinicalAreasGrid() {
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto px-8 pt-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Clinical Areas</h2>
|
||||
<section className="mx-auto px-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4 leading-tight">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
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
export default function OperifyExome() {
|
||||
const features = [
|
||||
{ title: "Deep Coverage", desc: "≥100X average depth for high accuracy." },
|
||||
{ title: "Superior Data Quality", desc: "≥90% bases with Q30 score." },
|
||||
{ title: "Comprehensive Variant Detection", desc: "Identifies SNVs, Indels, and CNVs." },
|
||||
{ title: "Uniparental Disomy Analysis", desc: "Detects UPD regions for imprinting disorders." },
|
||||
{ title: "Coverage of Complex Genes", desc: "Includes SMN1, SMN2, and DMD." },
|
||||
{ title: "Chromosomal Assessment", desc: "Detects aneuploidies and determines chromosomal sex." },
|
||||
{ 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-8 pt-8">
|
||||
<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-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>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -1,30 +1,146 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function RareIntro() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
const slides = [
|
||||
{
|
||||
content: "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."
|
||||
},
|
||||
{
|
||||
content: "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."
|
||||
}
|
||||
];
|
||||
|
||||
const goToSlide = (index) => {
|
||||
setCurrentSlide(index);
|
||||
};
|
||||
|
||||
const nextSlide = () => {
|
||||
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
||||
};
|
||||
|
||||
const prevSlide = () => {
|
||||
setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
|
||||
};
|
||||
|
||||
return (
|
||||
<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.
|
||||
<section className="bg-teal-700">
|
||||
<div className="flex flex-col lg:flex-row min-h-[300px] sm:min-h-[350px] lg:min-h-[350px]">
|
||||
{/* Image - Top on mobile, Left on desktop */}
|
||||
<div className="w-full lg:w-3/4 h-48 sm:h-64 lg:h-auto relative order-1 lg:order-1">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="/images/health/rare.png"
|
||||
alt="DNA sequencing and genetic analysis in modern laboratory"
|
||||
fill
|
||||
className="object-cover grayscale-[20%]"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-slate-900/10"></div>
|
||||
</div>
|
||||
|
||||
{/* Subtle border */}
|
||||
<div className="absolute bottom-0 left-0 w-full h-px lg:right-0 lg:top-0 lg:w-px lg:h-full bg-teal-600"></div>
|
||||
</div>
|
||||
|
||||
{/* Content - Bottom on mobile, Right on desktop */}
|
||||
<div className="w-full lg:w-3/4 order-2 lg:order-2">
|
||||
<div className="h-full flex flex-col justify-center px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
|
||||
{/* Brand/Title */}
|
||||
<div className="mb-4 sm:mb-6">
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-3xl font-bold text-white mb-3 sm:mb-4">
|
||||
<span className="block sm:inline">Transforming</span>
|
||||
<span className="block sm:inline sm:ml-2">Delays into Diagnoses</span>
|
||||
</h2>
|
||||
<div className="w-8 sm:w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
</div>
|
||||
|
||||
{/* Content Slider */}
|
||||
<div className="mb-4 sm:mb-6 max-w-3xl">
|
||||
<div className="text-gray-200 leading-relaxed text-sm sm:text-base mb-4 sm:mb-6 text-left sm:text-justify font-light transition-opacity duration-300 min-h-[80px] sm:min-h-[90px] lg:min-h-[100px] flex items-start">
|
||||
<span>{slides[currentSlide].content}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2 sm:space-x-3">
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="w-7 h-7 sm:w-8 sm:h-8 flex items-center justify-center border rounded-full transition-all duration-200 hover:scale-105 active:scale-95"
|
||||
style={{
|
||||
borderColor: '#ffffff',
|
||||
color: '#ffffff'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#0f766e';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#ffffff';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#ffffff';
|
||||
}}
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
className="w-7 h-7 sm:w-8 sm:h-8 flex items-center justify-center border rounded-full transition-all duration-200 hover:scale-105 active:scale-95"
|
||||
style={{
|
||||
borderColor: '#ffffff',
|
||||
color: '#ffffff'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#0f766e';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#ffffff';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#ffffff';
|
||||
}}
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Progress Indicators */}
|
||||
<div className="flex space-x-1.5 sm:space-x-2 ml-3 sm:ml-4">
|
||||
{slides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className={`transition-all duration-200 rounded-full hover:scale-110 active:scale-95 h-1.5 ${
|
||||
index === currentSlide
|
||||
? 'w-5 sm:w-6 bg-yellow-400'
|
||||
: 'w-1.5 bg-white hover:bg-gray-100'
|
||||
}`}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slide counter for mobile */}
|
||||
<div className="block sm:hidden">
|
||||
<span className="text-xs text-gray-300">
|
||||
{currentSlide + 1} / {slides.length}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@ const RareTitle = () => {
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<a href="/about-us" className="text-white hover:text-yellow-400 underline">Health</a>
|
||||
<a href="/health" className="text-white hover:text-yellow-400 underline">Health</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
|
||||
@ -1,15 +1,29 @@
|
||||
"use client";
|
||||
|
||||
export default function SolutionsOffer() {
|
||||
const solutions = [
|
||||
{
|
||||
name: "Exome",
|
||||
desc: "Whole Exome Sequencing for uncovering the genetic basis of rare diseases."
|
||||
desc: "Whole Exome Sequencing for uncovering the genetic basis of rare diseases.",
|
||||
path: "/health/rare-disorders/exome"
|
||||
},
|
||||
{
|
||||
name: "ExomeMito",
|
||||
desc: "Exome + Mitochondrial Genome Sequencing for a higher diagnostic yield."
|
||||
desc: "Exome + Mitochondrial Genome Sequencing for a higher diagnostic yield.",
|
||||
path: "/health/rare-disorders/exomemito"
|
||||
}
|
||||
];
|
||||
|
||||
const handleCardClick = (path) => {
|
||||
// Using Next.js router for navigation
|
||||
window.location.href = path;
|
||||
|
||||
// Alternative: If you want to use Next.js useRouter hook:
|
||||
// import { useRouter } from 'next/navigation';
|
||||
// const router = useRouter();
|
||||
// router.push(path);
|
||||
};
|
||||
|
||||
return (
|
||||
<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>
|
||||
@ -23,13 +37,22 @@ export default function SolutionsOffer() {
|
||||
{solutions.map((sol, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer"
|
||||
onClick={() => handleCardClick(sol.path)}
|
||||
className="rounded-xl p-4 hover:shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer"
|
||||
style={{backgroundColor: '#f2fcfc'}}
|
||||
>
|
||||
<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>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2 hover:text-teal-700 transition-colors">
|
||||
{sol.name}
|
||||
</h3>
|
||||
<p className="text-gray-500 text-sm leading-relaxed mb-3">{sol.desc}</p>
|
||||
<div className="flex items-center text-teal-600 text-sm font-medium">
|
||||
Learn more
|
||||
<svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
47
app/health/rare-disorders/exome/components/ExomeTitle.jsx
Normal file
47
app/health/rare-disorders/exome/components/ExomeTitle.jsx
Normal file
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
|
||||
const ExomeTitle = () => {
|
||||
return (
|
||||
<section
|
||||
className="relative bg-cover bg-center py-6 h-24"
|
||||
style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
|
||||
>
|
||||
{/* Breadcrumb */}
|
||||
<div className="relative z-10 mb-1 -mt-3">
|
||||
<div className="container mx-auto max-w-none px-4">
|
||||
<nav className="flex items-center space-x-2 text-sm">
|
||||
<a href="/" className="text-white hover:text-yellow-400 underline">Home</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<a href="/health" className="text-white hover:text-yellow-400 underline">Health</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<a href="/health/rare-disorders" className="text-white hover:text-yellow-400 underline">Rare Disorder</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="text-white">Exome</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Page Title */}
|
||||
<div className="relative z-10 text-center -mt-2">
|
||||
<h1 className="text-4xl md:text-4xl font-bold text-white mb-2">
|
||||
Exome
|
||||
</h1>
|
||||
<div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExomeTitle;
|
||||
66
app/health/rare-disorders/exome/components/KeyFeatures.jsx
Normal file
66
app/health/rare-disorders/exome/components/KeyFeatures.jsx
Normal file
@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const KeyFeatures = () => {
|
||||
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: <span><em>Includes SMN1, SMN2, and DMD</em>.</span>,
|
||||
icon: "/images/icons/complex-genes.png"
|
||||
},
|
||||
{
|
||||
title: "Chromosomal Assessment",
|
||||
desc: "Detects aneuploidies and determines chromosomal sex.",
|
||||
icon: "/images/icons/chromosomal.png"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto px-8 pt-10">
|
||||
<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) => (
|
||||
<div
|
||||
key={index}
|
||||
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={feature.icon} alt={feature.title} width={24} height={24} />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-teal-700 leading-tight">{feature.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">{feature.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default KeyFeatures;
|
||||
33
app/health/rare-disorders/exome/components/OperifyExome.jsx
Normal file
33
app/health/rare-disorders/exome/components/OperifyExome.jsx
Normal file
@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function OperifyExome() {
|
||||
|
||||
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 py-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Exome</h2>
|
||||
|
||||
<div>
|
||||
<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>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -15,29 +15,29 @@ export default function SampleRequirements({ title, items }) {
|
||||
];
|
||||
|
||||
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>
|
||||
<section className="mx-auto px-8 py-8">
|
||||
<h3 className="text-3xl font-bold text-teal-700 mb-6">Sample Requirements</h3>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-5xl mx-auto">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-none mx-auto">
|
||||
{requirements.map((req, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer"
|
||||
className="rounded-2xl p-4 hover:shadow-sm transition-shadow cursor-pointer"
|
||||
style={{backgroundColor: '#f2fcfc'}}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
|
||||
<Image
|
||||
src={req.icon}
|
||||
alt={req.title}
|
||||
width={40}
|
||||
height={40}
|
||||
width={36}
|
||||
height={36}
|
||||
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">
|
||||
<h4 className="text-lg font-semibold text-teal-700 mb-2">{req.title}</h4>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{req.description}
|
||||
</p>
|
||||
</div>
|
||||
27
app/health/rare-disorders/exome/page.js
Normal file
27
app/health/rare-disorders/exome/page.js
Normal file
@ -0,0 +1,27 @@
|
||||
import ExomeTitle from './components/ExomeTitle';
|
||||
import OperifyExome from './components/OperifyExome';
|
||||
import SampleRequirements from './components/SampleRequirements';
|
||||
import KeyFeatures from './components/KeyFeatures';
|
||||
import ClinicalAreasGrid from '../components/ClinicalAreasGrid';
|
||||
import PageLayout from '../../../components/Layout/PageLayout';
|
||||
|
||||
export default function ExomePage() {
|
||||
return (
|
||||
<PageLayout fixedHeader={true}>
|
||||
{/* Page Title */}
|
||||
<ExomeTitle />
|
||||
|
||||
{/* Operify Exome */}
|
||||
<OperifyExome />
|
||||
<ClinicalAreasGrid/>
|
||||
<KeyFeatures />
|
||||
<SampleRequirements
|
||||
items={[
|
||||
"2-5 mL peripheral blood in EDTA tube",
|
||||
"High-quality extracted DNA (minimum 2 µg)",
|
||||
"Fresh or frozen tissue for certain cases"
|
||||
]}
|
||||
/>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const ExomeMitoKeyFeatures = () => {
|
||||
const features = [
|
||||
{
|
||||
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: <span><em>Includes SMN1, SMN2, DMD</em>.</span>,
|
||||
icon: "/images/icons/functional-genomics.png"
|
||||
},
|
||||
{
|
||||
title: "Aneuploidy & Ploidy Estimation",
|
||||
desc: "Detects abnormal chromosome numbers and sex karyotype.",
|
||||
icon: "/images/icons/chromosomal.png"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto px-8 pt-10">
|
||||
<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) => (
|
||||
<div
|
||||
key={index}
|
||||
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={feature.icon} alt={feature.title} width={24} height={24} />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-teal-700 leading-tight">{feature.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">{feature.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExomeMitoKeyFeatures;
|
||||
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
|
||||
const ExomeMitoTitle = () => {
|
||||
return (
|
||||
<section
|
||||
className="relative bg-cover bg-center py-6 h-24"
|
||||
style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
|
||||
>
|
||||
{/* Breadcrumb */}
|
||||
<div className="relative z-10 mb-1 -mt-3">
|
||||
<div className="container mx-auto max-w-none px-4">
|
||||
<nav className="flex items-center space-x-2 text-sm">
|
||||
<a href="/" className="text-white hover:text-yellow-400 underline">Home</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<a href="/health" className="text-white hover:text-yellow-400 underline">Health</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<a href="/health/rare-disorders" className="text-white hover:text-yellow-400 underline">Rare Disorder</a>
|
||||
<span className="text-white">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="text-white">ExomeMito</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Page Title */}
|
||||
<div className="relative z-10 text-center -mt-2">
|
||||
<h1 className="text-4xl md:text-4xl font-bold text-white mb-2">
|
||||
ExomeMito
|
||||
</h1>
|
||||
<div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExomeMitoTitle;
|
||||
@ -1,14 +1,8 @@
|
||||
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." }
|
||||
];
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
|
||||
export default function OperifyExomeMito() {
|
||||
const genomeCoverage = [
|
||||
{ genome: "Nuclear Genome", coverage: "Protein-coding regions of ~20000 genes" },
|
||||
{ genome: "Mitochondrial genome", coverage: "37 genes" }
|
||||
@ -23,11 +17,11 @@ export default function OperifyExomeMito() {
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto px-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify ExomeMito</h2>
|
||||
<section className="mx-auto px-8 pt-10">
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">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">
|
||||
@ -64,26 +58,6 @@ export default function OperifyExomeMito() {
|
||||
</table>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
28
app/health/rare-disorders/exomemito/page.js
Normal file
28
app/health/rare-disorders/exomemito/page.js
Normal file
@ -0,0 +1,28 @@
|
||||
import ExomeMitoTitle from './components/ExomeMitoTitle';
|
||||
import OperifyExomeMito from './components/OperifyExomeMito';
|
||||
import SampleRequirements from '../exome/components/SampleRequirements';
|
||||
import ClinicalAreasGrid from '../components/ClinicalAreasGrid';
|
||||
import ExomeMitoKeyFeatures from './components/ExomeMitoKeyFeatures';
|
||||
import PageLayout from '../../../components/Layout/PageLayout';
|
||||
|
||||
export default function ExomeMitoPage() {
|
||||
return (
|
||||
<PageLayout fixedHeader={true}>
|
||||
{/* Page Title */}
|
||||
<ExomeMitoTitle />
|
||||
|
||||
{/* Operify ExomeMito */}
|
||||
<OperifyExomeMito />
|
||||
<ClinicalAreasGrid/>
|
||||
<ExomeMitoKeyFeatures/>
|
||||
<SampleRequirements
|
||||
items={[
|
||||
"2-5 mL peripheral blood in EDTA tube",
|
||||
"High-quality extracted DNA (minimum 2 µg)",
|
||||
"Fresh or frozen tissue for certain cases"
|
||||
]}
|
||||
/>
|
||||
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
@ -3,9 +3,6 @@ import RareIntro from './components/RareIntro';
|
||||
import ClinicalAreasGrid from './components/ClinicalAreasGrid';
|
||||
import SolutionsOffer from './components/SolutionsOffer';
|
||||
import WESInfo from './components/WESInfo';
|
||||
import OperifyExome from './components/OperifyExome';
|
||||
import OperifyExomeMito from './components/OperifyExomeMito';
|
||||
import SampleRequirements from './components/SampleRequirements';
|
||||
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
@ -23,30 +20,11 @@ export default function RareDisorderPage() {
|
||||
|
||||
{/* WES Info */}
|
||||
<WESInfo />
|
||||
|
||||
{/* Clinical Areas Grid */}
|
||||
<ClinicalAreasGrid />
|
||||
|
||||
{/* Operify Exome */}
|
||||
<OperifyExome />
|
||||
<SampleRequirements
|
||||
title="Operify Exome"
|
||||
items={[
|
||||
"2-5 mL peripheral blood in EDTA tube",
|
||||
"High-quality extracted DNA (minimum 2 µg)",
|
||||
"Fresh or frozen tissue for certain cases"
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Operify ExomeMito */}
|
||||
<OperifyExomeMito />
|
||||
<SampleRequirements
|
||||
title="Operify ExomeMito"
|
||||
items={[
|
||||
"2-5 mL peripheral blood in EDTA tube",
|
||||
"High-quality extracted DNA (minimum 2 µg)",
|
||||
"Fresh or frozen tissue for certain cases"
|
||||
]}
|
||||
/>
|
||||
<div className="py-6">
|
||||
<ClinicalAreasGrid />
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@ -6,7 +6,6 @@ const CircularRNAPipeline = ({
|
||||
svgUrl = "/images/flowchart/circularrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -6,7 +6,6 @@ const DegradomeSequencingPipeline = ({
|
||||
svgUrl = "/images/flowchart/degradomerna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -6,7 +6,6 @@ const IsoformPipeline = ({
|
||||
svgUrl = "/images/flowchart/isoseqrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -6,7 +6,6 @@ const LncRNABioinformatics = ({
|
||||
svgUrl = "/images/flowchart/totalrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -6,7 +6,6 @@ const MetatranscriptomicsPipeline = ({
|
||||
svgUrl = "/images/flowchart/metatranscriptomicsrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -6,7 +6,6 @@ const MRNAPipeline = ({
|
||||
svgUrl = "/images/flowchart/mrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -6,7 +6,6 @@ const SingleCellPipeline = ({
|
||||
svgUrl = "/images/flowchart/singlecellrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -6,7 +6,6 @@ const SRNABioinformatics = ({
|
||||
svgUrl = "/images/flowchart/smallrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
@ -6,7 +6,6 @@ const WTSPipeline = ({
|
||||
svgUrl = "/images/flowchart/totalrna.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
|
||||
51
public/images/flowchart/WGS_flow.svg
Normal file
51
public/images/flowchart/WGS_flow.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 69 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 224 KiB After Width: | Height: | Size: 223 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 217 KiB After Width: | Height: | Size: 213 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 207 KiB After Width: | Height: | Size: 206 KiB |
67
public/images/flowchart/enrichment_flow.svg
Normal file
67
public/images/flowchart/enrichment_flow.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 71 KiB |
67
public/images/flowchart/epigenomic_flow.svg
Normal file
67
public/images/flowchart/epigenomic_flow.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 138 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 274 KiB After Width: | Height: | Size: 274 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 204 KiB After Width: | Height: | Size: 190 KiB |
51
public/images/flowchart/genome_mapping_flow.svg
Normal file
51
public/images/flowchart/genome_mapping_flow.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 86 KiB |
36
public/images/flowchart/hybridseq.svg
Normal file
36
public/images/flowchart/hybridseq.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 277 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 249 KiB After Width: | Height: | Size: 249 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 295 KiB After Width: | Height: | Size: 294 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 246 KiB After Width: | Height: | Size: 246 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 222 KiB After Width: | Height: | Size: 222 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 205 KiB After Width: | Height: | Size: 205 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 196 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 257 KiB After Width: | Height: | Size: 257 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 282 KiB After Width: | Height: | Size: 281 KiB |
51
public/images/flowchart/snp_flow.svg
Normal file
51
public/images/flowchart/snp_flow.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 274 KiB After Width: | Height: | Size: 268 KiB |
BIN
public/images/health/health.png
Normal file
BIN
public/images/health/health.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
public/images/health/health_section.jpg
Normal file
BIN
public/images/health/health_section.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
public/images/health/oncology_section.jpg
Normal file
BIN
public/images/health/oncology_section.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
public/images/health/rare.png
Normal file
BIN
public/images/health/rare.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user