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

Further Updates of Health

Browse Source
This commit is contained in:
mukesh13
2025-09-08 11:22:39 +05:30
parent 3a944c38e9
commit a90808177a
14 changed files with 194 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,54 +1,16 @@
// components/AboutHealth.js // components/AboutHealth.js
'use client' 'use client'
// components/AboutHealth.js
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { useState, useEffect } from "react";
export default function AboutHealth() { 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 ( return (
<section className="bg-teal-700"> <section className="bg-teal-700">
<div className="flex min-h-[350px]"> <div className="flex min-h-[350px]">
{/* Left Side - Image */} {/* Left Side - Image */}
<div className="hidden lg:block w-1/2 relative"> <div className="hidden lg:block w-3/4 relative">
<div className="absolute inset-0"> <div className="absolute inset-0">
<Image <Image
src="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" src="/images/health/health.png"
alt="Healthcare professional working in modern laboratory" alt="Healthcare professional working in modern laboratory"
fill fill
className="object-cover grayscale-[20%]" className="object-cover grayscale-[20%]"
@ -73,90 +35,10 @@ export default function AboutHealth() {
<div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div> <div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
</div> </div>
{/* Content Slider */} {/* Content */}
<div className="mb-4 max-w-3xl"> <div className="mb-4 max-w-3xl">
<div className="text-gray-200 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500"> <div className="text-gray-200 leading-relaxed text-base text-justify font-light">
{slides[currentSlide].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.
</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: '#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-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: '#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-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' : '#ffffff'
}}
onMouseEnter={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#f1f5f9';
}
}}
onMouseLeave={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#ffffff';
}
}}
aria-label={`Go to slide ${index + 1}`}
/>
))}
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,54 +1,16 @@
// components/AboutHealth.js // components/AboutHealth.js
'use client' 'use client'
// components/AboutHealth.js
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { useState, useEffect } from "react";
export default function AboutHealth() { 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 ( return (
<section className="bg-teal-700"> <section className="bg-teal-700">
<div className="flex min-h-[350px]"> <div className="flex min-h-[350px]">
{/* Left Side - Image */} {/* Left Side - Image */}
<div className="hidden lg:block w-1/2 relative"> <div className="hidden lg:block w-3/4 relative">
<div className="absolute inset-0"> <div className="absolute inset-0">
<Image <Image
src="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" src="/images/health/health.png"
alt="Healthcare professional working in modern laboratory" alt="Healthcare professional working in modern laboratory"
fill fill
className="object-cover grayscale-[20%]" className="object-cover grayscale-[20%]"
@ -73,90 +35,10 @@ export default function AboutHealth() {
<div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div> <div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
</div> </div>
{/* Content Slider */} {/* Content */}
<div className="mb-4 max-w-3xl"> <div className="mb-4 max-w-3xl">
<div className="text-gray-200 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500"> <div className="text-gray-200 leading-relaxed text-base text-justify font-light">
{slides[currentSlide].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.
</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: '#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-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: '#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-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' : '#ffffff'
}}
onMouseEnter={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#f1f5f9';
}
}}
onMouseLeave={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#ffffff';
}
}}
aria-label={`Go to slide ${index + 1}`}
/>
))}
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,7 +1,7 @@
'use client' 'use client'
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useState, useEffect } from "react"; import { useState } from "react";
export default function OncologyIntro() { export default function OncologyIntro() {
const [currentSlide, setCurrentSlide] = useState(0); const [currentSlide, setCurrentSlide] = useState(0);
@ -21,15 +21,6 @@ export default function OncologyIntro() {
} }
]; ];
// 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) => { const goToSlide = (index) => {
setCurrentSlide(index); setCurrentSlide(index);
}; };
@ -44,12 +35,12 @@ export default function OncologyIntro() {
return ( return (
<section className="bg-teal-700"> <section className="bg-teal-700">
<div className="flex min-h-[350px]"> <div className="flex flex-col lg:flex-row min-h-[300px] sm:min-h-[350px] lg:min-h-[350px]">
{/* Left Side - Image */} {/* Image - Top on mobile, Left on desktop */}
<div className="hidden lg:block w-1/2 relative"> <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"> <div className="absolute inset-0">
<Image <Image
src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" src="/images/health/oncology_section.jpg"
alt="Cancer research and oncology molecular analysis" alt="Cancer research and oncology molecular analysis"
fill fill
className="object-cover grayscale-[20%]" className="object-cover grayscale-[20%]"
@ -59,106 +50,74 @@ export default function OncologyIntro() {
</div> </div>
{/* Subtle border */} {/* Subtle border */}
<div className="absolute right-0 top-0 w-px h-full bg-teal-600"></div> <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> </div>
{/* Right Side - Content */} {/* Content - Bottom on mobile, Right on desktop */}
<div className="w-full lg:w-3/4"> <div className="w-full lg:w-3/4 order-2 lg:order-2">
<div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4"> <div className="h-full flex flex-col justify-center px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
{/* Brand/Title */} {/* Brand/Title */}
<div className="mb-4"> <div className="mb-4 sm:mb-6">
<h2 className="text-3xl font-bold text-white mb-4"> <h2 className="text-2xl sm:text-3xl lg:text-3xl font-bold text-white mb-3 sm:mb-4">
<span>Turning</span> <span className="block sm:inline">Turning</span>
<span className="ml-2">Complexity into Clarity</span> <span className="block sm:inline sm:ml-2">Complexity into Clarity</span>
</h2> </h2>
<div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div> <div className="w-8 sm:w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
</div> </div>
{/* Content Slider */} {/* Content Slider */}
<div className="mb-4 max-w-3xl"> <div className="mb-4 sm:mb-6 max-w-3xl">
<div className="text-gray-200 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500"> <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">
{slides[currentSlide].content} <span>{slides[currentSlide].content}</span>
</div> </div>
</div> </div>
{/* Navigation */} {/* Navigation */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-2 sm:space-x-3">
<button <button
onClick={prevSlide} onClick={prevSlide}
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200" 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"
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" aria-label="Previous slide"
> >
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
</svg> </svg>
</button> </button>
<button <button
onClick={nextSlide} onClick={nextSlide}
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200" 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"
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" aria-label="Next slide"
> >
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
</svg> </svg>
</button> </button>
{/* Progress Indicators */} {/* Progress Indicators */}
<div className="flex space-x-2 ml-4"> <div className="flex space-x-1.5 sm:space-x-2 ml-3 sm:ml-4">
{slides.map((_, index) => ( {slides.map((_, index) => (
<button <button
key={index} key={index}
onClick={() => goToSlide(index)} onClick={() => goToSlide(index)}
className="transition-all duration-200 rounded-full" className={`transition-all duration-200 rounded-full hover:scale-110 active:scale-95 h-1.5 ${
style={{ index === currentSlide
width: index === currentSlide ? '24px' : '6px', ? 'w-5 sm:w-6 bg-yellow-400'
height: '6px', : 'w-1.5 bg-white hover:bg-gray-100'
backgroundColor: index === currentSlide ? '#faae31' : '#ffffff' }`}
}}
onMouseEnter={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#f1f5f9';
}
}}
onMouseLeave={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#ffffff';
}
}}
aria-label={`Go to slide ${index + 1}`} aria-label={`Go to slide ${index + 1}`}
/> />
))} ))}
</div> </div>
</div> </div>
{/* Slide counter for mobile */}
<div className="block sm:hidden">
<span className="text-xs text-gray-300">
{currentSlide + 1} / {slides.length}
</span>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,7 +1,7 @@
'use client' 'use client'
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useState, useEffect } from "react"; import { useState } from "react";
export default function OncologyIntro() { export default function OncologyIntro() {
const [currentSlide, setCurrentSlide] = useState(0); const [currentSlide, setCurrentSlide] = useState(0);
@ -21,15 +21,6 @@ export default function OncologyIntro() {
} }
]; ];
// 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) => { const goToSlide = (index) => {
setCurrentSlide(index); setCurrentSlide(index);
}; };
@ -44,12 +35,12 @@ export default function OncologyIntro() {
return ( return (
<section className="bg-teal-700"> <section className="bg-teal-700">
<div className="flex min-h-[350px]"> <div className="flex flex-col lg:flex-row min-h-[300px] sm:min-h-[350px] lg:min-h-[350px]">
{/* Left Side - Image */} {/* Image - Top on mobile, Left on desktop */}
<div className="hidden lg:block w-1/2 relative"> <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"> <div className="absolute inset-0">
<Image <Image
src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" src="/images/health/oncology_section.jpg"
alt="Cancer research and oncology molecular analysis" alt="Cancer research and oncology molecular analysis"
fill fill
className="object-cover grayscale-[20%]" className="object-cover grayscale-[20%]"
@ -59,106 +50,74 @@ export default function OncologyIntro() {
</div> </div>
{/* Subtle border */} {/* Subtle border */}
<div className="absolute right-0 top-0 w-px h-full bg-teal-600"></div> <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> </div>
{/* Right Side - Content */} {/* Content - Bottom on mobile, Right on desktop */}
<div className="w-full lg:w-3/4"> <div className="w-full lg:w-3/4 order-2 lg:order-2">
<div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4"> <div className="h-full flex flex-col justify-center px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
{/* Brand/Title */} {/* Brand/Title */}
<div className="mb-4"> <div className="mb-4 sm:mb-6">
<h2 className="text-3xl font-bold text-white mb-4"> <h2 className="text-2xl sm:text-3xl lg:text-3xl font-bold text-white mb-3 sm:mb-4">
<span>Turning</span> <span className="block sm:inline">Turning</span>
<span className="ml-2">Complexity into Clarity</span> <span className="block sm:inline sm:ml-2">Complexity into Clarity</span>
</h2> </h2>
<div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div> <div className="w-8 sm:w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
</div> </div>
{/* Content Slider */} {/* Content Slider */}
<div className="mb-4 max-w-3xl"> <div className="mb-4 sm:mb-6 max-w-3xl">
<div className="text-gray-200 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500"> <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">
{slides[currentSlide].content} <span>{slides[currentSlide].content}</span>
</div> </div>
</div> </div>
{/* Navigation */} {/* Navigation */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-2 sm:space-x-3">
<button <button
onClick={prevSlide} onClick={prevSlide}
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200" 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"
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" aria-label="Previous slide"
> >
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
</svg> </svg>
</button> </button>
<button <button
onClick={nextSlide} onClick={nextSlide}
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200" 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"
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" aria-label="Next slide"
> >
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
</svg> </svg>
</button> </button>
{/* Progress Indicators */} {/* Progress Indicators */}
<div className="flex space-x-2 ml-4"> <div className="flex space-x-1.5 sm:space-x-2 ml-3 sm:ml-4">
{slides.map((_, index) => ( {slides.map((_, index) => (
<button <button
key={index} key={index}
onClick={() => goToSlide(index)} onClick={() => goToSlide(index)}
className="transition-all duration-200 rounded-full" className={`transition-all duration-200 rounded-full hover:scale-110 active:scale-95 h-1.5 ${
style={{ index === currentSlide
width: index === currentSlide ? '24px' : '6px', ? 'w-5 sm:w-6 bg-yellow-400'
height: '6px', : 'w-1.5 bg-white hover:bg-gray-100'
backgroundColor: index === currentSlide ? '#faae31' : '#ffffff' }`}
}}
onMouseEnter={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#f1f5f9';
}
}}
onMouseLeave={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#ffffff';
}
}}
aria-label={`Go to slide ${index + 1}`} aria-label={`Go to slide ${index + 1}`}
/> />
))} ))}
</div> </div>
</div> </div>
{/* Slide counter for mobile */}
<div className="block sm:hidden">
<span className="text-xs text-gray-300">
{currentSlide + 1} / {slides.length}
</span>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,7 +1,7 @@
'use client' 'use client'
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useState, useEffect } from "react"; import { useState } from "react";
export default function RareIntro() { export default function RareIntro() {
const [currentSlide, setCurrentSlide] = useState(0); const [currentSlide, setCurrentSlide] = useState(0);
@ -15,15 +15,6 @@ export default function RareIntro() {
} }
]; ];
// 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) => { const goToSlide = (index) => {
setCurrentSlide(index); setCurrentSlide(index);
}; };
@ -38,12 +29,12 @@ export default function RareIntro() {
return ( return (
<section className="bg-teal-700"> <section className="bg-teal-700">
<div className="flex min-h-[350px]"> <div className="flex flex-col lg:flex-row min-h-[300px] sm:min-h-[350px] lg:min-h-[350px]">
{/* Left Side - Image */} {/* Image - Top on mobile, Left on desktop */}
<div className="hidden lg:block w-1/2 relative"> <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"> <div className="absolute inset-0">
<Image <Image
src="https://images.unsplash.com/photo-1559757175-0eb30cd8c063" src="/images/health/rare.png"
alt="DNA sequencing and genetic analysis in modern laboratory" alt="DNA sequencing and genetic analysis in modern laboratory"
fill fill
className="object-cover grayscale-[20%]" className="object-cover grayscale-[20%]"
@ -53,34 +44,34 @@ export default function RareIntro() {
</div> </div>
{/* Subtle border */} {/* Subtle border */}
<div className="absolute right-0 top-0 w-px h-full bg-teal-600"></div> <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> </div>
{/* Right Side - Content */} {/* Content - Bottom on mobile, Right on desktop */}
<div className="w-full lg:w-3/4"> <div className="w-full lg:w-3/4 order-2 lg:order-2">
<div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4"> <div className="h-full flex flex-col justify-center px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
{/* Brand/Title */} {/* Brand/Title */}
<div className="mb-4"> <div className="mb-4 sm:mb-6">
<h2 className="text-3xl font-bold text-white mb-4"> <h2 className="text-2xl sm:text-3xl lg:text-3xl font-bold text-white mb-3 sm:mb-4">
<span>Transforming</span> <span className="block sm:inline">Transforming</span>
<span className="ml-2">Delays into Diagnoses</span> <span className="block sm:inline sm:ml-2">Delays into Diagnoses</span>
</h2> </h2>
<div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div> <div className="w-8 sm:w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
</div> </div>
{/* Content Slider */} {/* Content Slider */}
<div className="mb-4 max-w-3xl"> <div className="mb-4 sm:mb-6 max-w-3xl">
<div className="text-gray-200 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500"> <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">
{slides[currentSlide].content} <span>{slides[currentSlide].content}</span>
</div> </div>
</div> </div>
{/* Navigation */} {/* Navigation */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-2 sm:space-x-3">
<button <button
onClick={prevSlide} onClick={prevSlide}
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200" 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={{ style={{
borderColor: '#ffffff', borderColor: '#ffffff',
color: '#ffffff' color: '#ffffff'
@ -97,14 +88,14 @@ export default function RareIntro() {
}} }}
aria-label="Previous slide" aria-label="Previous slide"
> >
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
</svg> </svg>
</button> </button>
<button <button
onClick={nextSlide} onClick={nextSlide}
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200" 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={{ style={{
borderColor: '#ffffff', borderColor: '#ffffff',
color: '#ffffff' color: '#ffffff'
@ -121,38 +112,34 @@ export default function RareIntro() {
}} }}
aria-label="Next slide" aria-label="Next slide"
> >
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
</svg> </svg>
</button> </button>
{/* Progress Indicators */} {/* Progress Indicators */}
<div className="flex space-x-2 ml-4"> <div className="flex space-x-1.5 sm:space-x-2 ml-3 sm:ml-4">
{slides.map((_, index) => ( {slides.map((_, index) => (
<button <button
key={index} key={index}
onClick={() => goToSlide(index)} onClick={() => goToSlide(index)}
className="transition-all duration-200 rounded-full" className={`transition-all duration-200 rounded-full hover:scale-110 active:scale-95 h-1.5 ${
style={{ index === currentSlide
width: index === currentSlide ? '24px' : '6px', ? 'w-5 sm:w-6 bg-yellow-400'
height: '6px', : 'w-1.5 bg-white hover:bg-gray-100'
backgroundColor: index === currentSlide ? '#faae31' : '#ffffff' }`}
}}
onMouseEnter={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#f1f5f9';
}
}}
onMouseLeave={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#ffffff';
}
}}
aria-label={`Go to slide ${index + 1}`} aria-label={`Go to slide ${index + 1}`}
/> />
))} ))}
</div> </div>
</div> </div>
{/* Slide counter for mobile */}
<div className="block sm:hidden">
<span className="text-xs text-gray-300">
{currentSlide + 1} / {slides.length}
</span>
</div>
</div> </div>
</div> </div>
</div> </div>

30
public/images/flowchart/WGS_flow.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 69 KiB

40
public/images/flowchart/enrichment_flow.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 71 KiB

40
public/images/flowchart/epigenomic_flow.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 138 KiB

48
public/images/flowchart/genome_mapping_flow.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 86 KiB

BIN
public/images/health/health.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/images/health/health_section.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/images/health/oncology_section.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/images/health/rare.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/images/health/rare_section.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB