127 lines
6.2 KiB
JavaScript
127 lines
6.2 KiB
JavaScript
'use client'
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
|
|
export default function OncologyIntro() {
|
|
const [currentSlide, setCurrentSlide] = useState(0);
|
|
|
|
const slides = [
|
|
{
|
|
content: "Cancer is not a single disease—it's a highly complex and dynamic group of disorders, often driven by a multitude of genomic alterations. Despite advancements in treatment, many patients still face uncertainty due to incomplete or delayed molecular diagnoses."
|
|
},
|
|
{
|
|
content: "At Operify Health, we recognize that behind every tumor is a unique genetic story waiting to be told. Our precision oncology solutions utilize high-throughput Next Generation Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians with actionable insights that inform targeted therapies, immunotherapy decisions, and hereditary cancer risk assessments."
|
|
},
|
|
{
|
|
content: "This genomic-driven approach is especially critical in advanced and treatment-resistant cancers, where conventional methods often fall short. Studies have shown that integrating broad-panel NGS into cancer care can impact clinical decision-making in up to 30% of cases, leading to more personalized and effective treatment strategies."
|
|
},
|
|
{
|
|
content: "By combining cutting-edge sequencing, advanced bioinformatics, and curated clinical evidence, Operify Health empowers oncologists to move from uncertainty to precision—ensuring every cancer patient's care is as individualized as their diagnosis."
|
|
}
|
|
];
|
|
|
|
const goToSlide = (index) => {
|
|
setCurrentSlide(index);
|
|
};
|
|
|
|
const nextSlide = () => {
|
|
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
|
};
|
|
|
|
const prevSlide = () => {
|
|
setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
|
|
};
|
|
|
|
return (
|
|
<section className="bg-teal-700">
|
|
<div className="flex flex-col lg:flex-row min-h-[300px] sm:min-h-[350px] lg:min-h-[350px]">
|
|
{/* Image - Top on mobile, Left on desktop */}
|
|
<div className="w-full lg:w-3/4 h-48 sm:h-64 lg:h-auto relative order-1 lg:order-1">
|
|
<div className="absolute inset-0">
|
|
<Image
|
|
src="/images/health/oncology_section.jpg"
|
|
alt="Cancer research and oncology molecular analysis"
|
|
fill
|
|
className="object-cover grayscale-[20%]"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-slate-900/10"></div>
|
|
</div>
|
|
|
|
{/* Subtle border */}
|
|
<div className="absolute bottom-0 left-0 w-full h-px lg:right-0 lg:top-0 lg:w-px lg:h-full bg-teal-600"></div>
|
|
</div>
|
|
|
|
{/* Content - Bottom on mobile, Right on desktop */}
|
|
<div className="w-full lg:w-3/4 order-2 lg:order-2">
|
|
<div className="h-full flex flex-col justify-center px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
|
|
{/* Brand/Title */}
|
|
<div className="mb-4 sm:mb-6">
|
|
<h2 className="text-2xl sm:text-3xl lg:text-3xl font-bold text-white mb-3 sm:mb-4">
|
|
<span className="block sm:inline">Turning</span>
|
|
<span className="block sm:inline sm:ml-2">Complexity into Clarity</span>
|
|
</h2>
|
|
<div className="w-8 sm:w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
|
</div>
|
|
|
|
{/* Content Slider */}
|
|
<div className="mb-4 sm:mb-6 max-w-3xl">
|
|
<div className="text-gray-200 leading-relaxed text-sm sm:text-base mb-4 sm:mb-6 text-left sm:text-justify font-light transition-opacity duration-300 min-h-[120px] sm:min-h-[140px] lg:min-h-[160px] flex items-start">
|
|
<span>{slides[currentSlide].content}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-2 sm:space-x-3">
|
|
<button
|
|
onClick={prevSlide}
|
|
className="w-7 h-7 sm:w-8 sm:h-8 flex items-center justify-center border border-white text-white rounded-full transition-all duration-200 hover:scale-105 active:scale-95 hover:border-yellow-400 hover:bg-yellow-400 hover:text-teal-700"
|
|
aria-label="Previous slide"
|
|
>
|
|
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
onClick={nextSlide}
|
|
className="w-7 h-7 sm:w-8 sm:h-8 flex items-center justify-center border border-white text-white rounded-full transition-all duration-200 hover:scale-105 active:scale-95 hover:border-yellow-400 hover:bg-yellow-400 hover:text-teal-700"
|
|
aria-label="Next slide"
|
|
>
|
|
<svg className="w-2.5 h-2.5 sm:w-3 sm:h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Progress Indicators */}
|
|
<div className="flex space-x-1.5 sm:space-x-2 ml-3 sm:ml-4">
|
|
{slides.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => goToSlide(index)}
|
|
className={`transition-all duration-200 rounded-full hover:scale-110 active:scale-95 h-1.5 ${
|
|
index === currentSlide
|
|
? 'w-5 sm:w-6 bg-yellow-400'
|
|
: 'w-1.5 bg-white hover:bg-gray-100'
|
|
}`}
|
|
aria-label={`Go to slide ${index + 1}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Slide counter for mobile */}
|
|
<div className="block sm:hidden">
|
|
<span className="text-xs text-gray-300">
|
|
{currentSlide + 1} / {slides.length}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |