flowchart changes updated
This commit is contained in:
mukesh13
@ -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,42 +1,166 @@
|
||||
// components/AboutHealth.js
|
||||
'use client'
|
||||
// components/AboutHealth.js
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function AboutHealth() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
const slides = [
|
||||
{
|
||||
content: "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."
|
||||
},
|
||||
{
|
||||
content: "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."
|
||||
},
|
||||
{
|
||||
content: "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."
|
||||
}
|
||||
];
|
||||
|
||||
// Auto-advance slides every 5 seconds
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
||||
}, 5000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [slides.length]);
|
||||
|
||||
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">
|
||||
<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>
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* Left Side - Content */}
|
||||
<div className="w-full lg:w-3/4 bg-white">
|
||||
<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-teal-700 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 Slider */}
|
||||
<div className="mb-4 max-w-3xl">
|
||||
<div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
|
||||
{slides[currentSlide].content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
|
||||
style={{
|
||||
borderColor: '#555555',
|
||||
color: '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#2a6564';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#555555';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#555555';
|
||||
}}
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg className="w-3 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-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
|
||||
style={{
|
||||
borderColor: '#555555',
|
||||
color: '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#2a6564';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#555555';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#555555';
|
||||
}}
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg className="w-3 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-2 ml-4">
|
||||
{slides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className="transition-all duration-200 rounded-full"
|
||||
style={{
|
||||
width: index === currentSlide ? '24px' : '6px',
|
||||
height: '6px',
|
||||
backgroundColor: index === currentSlide ? '#faae31' : '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (index !== currentSlide) {
|
||||
e.target.style.backgroundColor = '#2a6564';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (index !== currentSlide) {
|
||||
e.target.style.backgroundColor = '#555555';
|
||||
}
|
||||
}}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Image */}
|
||||
<div className="hidden lg:block w-1/2 relative">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
|
||||
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 left-0 top-0 w-px h-full bg-slate-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -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,42 +1,166 @@
|
||||
// components/AboutHealth.js
|
||||
'use client'
|
||||
// components/AboutHealth.js
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function AboutHealth() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
const slides = [
|
||||
{
|
||||
content: "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."
|
||||
},
|
||||
{
|
||||
content: "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."
|
||||
},
|
||||
{
|
||||
content: "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."
|
||||
}
|
||||
];
|
||||
|
||||
// Auto-advance slides every 5 seconds
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
||||
}, 5000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [slides.length]);
|
||||
|
||||
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">
|
||||
<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>
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* Left Side - Content */}
|
||||
<div className="w-full lg:w-3/4 bg-white">
|
||||
<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-teal-700 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 Slider */}
|
||||
<div className="mb-4 max-w-3xl">
|
||||
<div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
|
||||
{slides[currentSlide].content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
|
||||
style={{
|
||||
borderColor: '#555555',
|
||||
color: '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#2a6564';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#555555';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#555555';
|
||||
}}
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg className="w-3 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-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
|
||||
style={{
|
||||
borderColor: '#555555',
|
||||
color: '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#2a6564';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#555555';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#555555';
|
||||
}}
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg className="w-3 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-2 ml-4">
|
||||
{slides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className="transition-all duration-200 rounded-full"
|
||||
style={{
|
||||
width: index === currentSlide ? '24px' : '6px',
|
||||
height: '6px',
|
||||
backgroundColor: index === currentSlide ? '#faae31' : '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (index !== currentSlide) {
|
||||
e.target.style.backgroundColor = '#2a6564';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (index !== currentSlide) {
|
||||
e.target.style.backgroundColor = '#555555';
|
||||
}
|
||||
}}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Image */}
|
||||
<div className="hidden lg:block w-1/2 relative">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
|
||||
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 left-0 top-0 w-px h-full bg-slate-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -37,7 +37,7 @@ export default function HereditaryCancerPanel() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-semibold text-gray-700 mb-4">Key Features</h3>
|
||||
<h3 className="text-3xl font-semibold text-teal-700 pb-2 mb-4">Key Features</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse border border-gray-300 rounded-lg">
|
||||
<thead>
|
||||
|
||||
@ -1,51 +1,167 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } 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."
|
||||
}
|
||||
];
|
||||
|
||||
// Auto-advance slides every 5 seconds
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
||||
}, 5000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [slides.length]);
|
||||
|
||||
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.
|
||||
</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>
|
||||
<section>
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* Left Side - Content */}
|
||||
<div className="w-full lg:w-3/4 bg-white">
|
||||
<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-teal-700 mb-4">
|
||||
<span>Turning</span>
|
||||
<span className="ml-2">Complexity into Clarity</span>
|
||||
</h2>
|
||||
<div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
</div>
|
||||
|
||||
{/* Content Slider */}
|
||||
<div className="mb-4 max-w-3xl">
|
||||
<div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
|
||||
{slides[currentSlide].content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
|
||||
style={{
|
||||
borderColor: '#555555',
|
||||
color: '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#2a6564';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#555555';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#555555';
|
||||
}}
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg className="w-3 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-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
|
||||
style={{
|
||||
borderColor: '#555555',
|
||||
color: '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#2a6564';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#555555';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#555555';
|
||||
}}
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg className="w-3 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-2 ml-4">
|
||||
{slides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className="transition-all duration-200 rounded-full"
|
||||
style={{
|
||||
width: index === currentSlide ? '24px' : '6px',
|
||||
height: '6px',
|
||||
backgroundColor: index === currentSlide ? '#faae31' : '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (index !== currentSlide) {
|
||||
e.target.style.backgroundColor = '#2a6564';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (index !== currentSlide) {
|
||||
e.target.style.backgroundColor = '#555555';
|
||||
}
|
||||
}}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Image */}
|
||||
<div className="hidden lg:block w-1/2 relative">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
|
||||
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 left-0 top-0 w-px h-full bg-slate-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -37,7 +37,7 @@ export default function HereditaryCancerPanel() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-semibold text-gray-700 mb-4">Key Features</h3>
|
||||
<h3 className="text-3xl font-semibold text-teal-700 pb-2 mb-4">Key Features</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse border border-gray-300 rounded-lg">
|
||||
<thead>
|
||||
|
||||
@ -1,51 +1,167 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } 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."
|
||||
}
|
||||
];
|
||||
|
||||
// Auto-advance slides every 5 seconds
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
||||
}, 5000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [slides.length]);
|
||||
|
||||
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.
|
||||
</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>
|
||||
<section>
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* Left Side - Content */}
|
||||
<div className="w-full lg:w-3/4 bg-white">
|
||||
<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-teal-700 mb-4">
|
||||
<span>Turning</span>
|
||||
<span className="ml-2">Complexity into Clarity</span>
|
||||
</h2>
|
||||
<div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
</div>
|
||||
|
||||
{/* Content Slider */}
|
||||
<div className="mb-4 max-w-3xl">
|
||||
<div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
|
||||
{slides[currentSlide].content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
|
||||
style={{
|
||||
borderColor: '#555555',
|
||||
color: '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#2a6564';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#555555';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#555555';
|
||||
}}
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg className="w-3 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-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
|
||||
style={{
|
||||
borderColor: '#555555',
|
||||
color: '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#2a6564';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#555555';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#555555';
|
||||
}}
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg className="w-3 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-2 ml-4">
|
||||
{slides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className="transition-all duration-200 rounded-full"
|
||||
style={{
|
||||
width: index === currentSlide ? '24px' : '6px',
|
||||
height: '6px',
|
||||
backgroundColor: index === currentSlide ? '#faae31' : '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (index !== currentSlide) {
|
||||
e.target.style.backgroundColor = '#2a6564';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (index !== currentSlide) {
|
||||
e.target.style.backgroundColor = '#555555';
|
||||
}
|
||||
}}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Image */}
|
||||
<div className="hidden lg:block w-1/2 relative">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
|
||||
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 left-0 top-0 w-px h-full bg-slate-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -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,7 @@ export default function ClinicalAreasGrid() {
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto px-8 pt-8">
|
||||
<section className="mx-auto px-8 py-8">
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Clinical Areas</h2>
|
||||
<div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{areas.map((area, idx) => (
|
||||
|
||||
@ -1,32 +1,161 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } 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."
|
||||
}
|
||||
];
|
||||
|
||||
// Auto-advance slides every 5 seconds
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
||||
}, 5000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [slides.length]);
|
||||
|
||||
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.
|
||||
</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>
|
||||
<section>
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* Left Side - Content */}
|
||||
<div className="w-full lg:w-3/4 bg-white">
|
||||
<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-teal-700 mb-4">
|
||||
<span>Transforming</span>
|
||||
<span className="ml-2">Delays into Diagnoses</span>
|
||||
</h2>
|
||||
<div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
</div>
|
||||
|
||||
{/* Content Slider */}
|
||||
<div className="mb-4 max-w-3xl">
|
||||
<div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
|
||||
{slides[currentSlide].content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
|
||||
style={{
|
||||
borderColor: '#555555',
|
||||
color: '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#2a6564';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#555555';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#555555';
|
||||
}}
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg className="w-3 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-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
|
||||
style={{
|
||||
borderColor: '#555555',
|
||||
color: '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.target.style.borderColor = '#faae31';
|
||||
e.target.style.backgroundColor = '#faae31';
|
||||
e.target.style.color = '#2a6564';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.target.style.borderColor = '#555555';
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
e.target.style.color = '#555555';
|
||||
}}
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg className="w-3 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-2 ml-4">
|
||||
{slides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className="transition-all duration-200 rounded-full"
|
||||
style={{
|
||||
width: index === currentSlide ? '24px' : '6px',
|
||||
height: '6px',
|
||||
backgroundColor: index === currentSlide ? '#faae31' : '#555555'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (index !== currentSlide) {
|
||||
e.target.style.backgroundColor = '#2a6564';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (index !== currentSlide) {
|
||||
e.target.style.backgroundColor = '#555555';
|
||||
}
|
||||
}}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Image */}
|
||||
<div className="hidden lg:block w-1/2 relative">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
|
||||
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 left-0 top-0 w-px h-full bg-slate-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -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">Operify 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">
|
||||
Operify Exome
|
||||
</h1>
|
||||
<div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExomeTitle;
|
||||
@ -17,7 +17,7 @@ export default function OperifyExome() {
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto px-8 pt-8">
|
||||
<section className="mx-auto px-8 pt-10">
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify Exome</h2>
|
||||
|
||||
<div className="mb-8">
|
||||
@ -18,26 +18,26 @@ export default function SampleRequirements({ title, items }) {
|
||||
<section className="mx-auto px-8 pt-8 pb-12">
|
||||
<h3 className="text-3xl font-bold text-teal-700 mb-6">{title} Sample Requirements</h3>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-5xl mx-auto">
|
||||
<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>
|
||||
25
app/health/rare-disorders/exome/page.js
Normal file
25
app/health/rare-disorders/exome/page.js
Normal file
@ -0,0 +1,25 @@
|
||||
import ExomeTitle from './components/ExomeTitle';
|
||||
import OperifyExome from './components/OperifyExome';
|
||||
import SampleRequirements from './components/SampleRequirements';
|
||||
|
||||
import PageLayout from '../../../components/Layout/PageLayout';
|
||||
|
||||
export default function ExomePage() {
|
||||
return (
|
||||
<PageLayout fixedHeader={true}>
|
||||
{/* Page Title */}
|
||||
<ExomeTitle />
|
||||
|
||||
{/* 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"
|
||||
]}
|
||||
/>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
@ -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">Operify 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">
|
||||
Operify ExomeMito
|
||||
</h1>
|
||||
<div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExomeMitoTitle;
|
||||
@ -23,7 +23,7 @@ export default function OperifyExomeMito() {
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto px-8">
|
||||
<section className="mx-auto px-8 pt-10">
|
||||
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify ExomeMito</h2>
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-4">Boost diagnostic yield with Exome + Mito Sequencing</h3>
|
||||
|
||||
25
app/health/rare-disorders/exomemito/page.js
Normal file
25
app/health/rare-disorders/exomemito/page.js
Normal file
@ -0,0 +1,25 @@
|
||||
import ExomeMitoTitle from './components/ExomeMitoTitle';
|
||||
import OperifyExomeMito from './components/OperifyExomeMito';
|
||||
import SampleRequirements from '../exome/components/SampleRequirements';
|
||||
|
||||
import PageLayout from '../../../components/Layout/PageLayout';
|
||||
|
||||
export default function ExomeMitoPage() {
|
||||
return (
|
||||
<PageLayout fixedHeader={true}>
|
||||
{/* Page Title */}
|
||||
<ExomeMitoTitle />
|
||||
|
||||
{/* 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"
|
||||
]}
|
||||
/>
|
||||
</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';
|
||||
|
||||
@ -26,27 +23,6 @@ export default function RareDisorderPage() {
|
||||
{/* 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"
|
||||
]}
|
||||
/>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user