Further Updates of Health
This commit is contained in:
mukesh13
@ -1,54 +1,16 @@
|
||||
// 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="bg-teal-700">
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* 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">
|
||||
<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"
|
||||
fill
|
||||
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>
|
||||
|
||||
{/* Content Slider */}
|
||||
{/* Content */}
|
||||
<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">
|
||||
{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: '#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 className="text-gray-200 leading-relaxed text-base text-justify font-light">
|
||||
At Operify Health, we believe every patient deserves answers that are not only accurate — but actionable. By harnessing the power of Next Generation Sequencing (NGS), we transform patient samples into rich genomic insights that enable clinicians and oncologists to make informed, personalized decisions. From rare genetic disorders to complex oncological cases, our solutions help uncover what traditional diagnostics often miss.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,54 +1,16 @@
|
||||
// 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="bg-teal-700">
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* 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">
|
||||
<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"
|
||||
fill
|
||||
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>
|
||||
|
||||
{/* Content Slider */}
|
||||
{/* Content */}
|
||||
<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">
|
||||
{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: '#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 className="text-gray-200 leading-relaxed text-base text-justify font-light">
|
||||
At Operify Health, we believe every patient deserves answers that are not only accurate — but actionable. By harnessing the power of Next Generation Sequencing (NGS), we transform patient samples into rich genomic insights that enable clinicians and oncologists to make informed, personalized decisions. From rare genetic disorders to complex oncological cases, our solutions help uncover what traditional diagnostics often miss.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function OncologyIntro() {
|
||||
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) => {
|
||||
setCurrentSlide(index);
|
||||
};
|
||||
@ -44,12 +35,12 @@ export default function OncologyIntro() {
|
||||
|
||||
return (
|
||||
<section className="bg-teal-700">
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* Left Side - Image */}
|
||||
<div className="hidden lg:block w-1/2 relative">
|
||||
<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="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"
|
||||
fill
|
||||
className="object-cover grayscale-[20%]"
|
||||
@ -59,106 +50,74 @@ export default function OncologyIntro() {
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* Right Side - Content */}
|
||||
<div className="w-full lg:w-3/4">
|
||||
<div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
|
||||
{/* 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">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">
|
||||
<span>Turning</span>
|
||||
<span className="ml-2">Complexity into Clarity</span>
|
||||
<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-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
<div className="w-8 sm:w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
</div>
|
||||
|
||||
{/* Content Slider */}
|
||||
<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">
|
||||
{slides[currentSlide].content}
|
||||
<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-3">
|
||||
<div className="flex items-center space-x-2 sm: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';
|
||||
}}
|
||||
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-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" />
|
||||
</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';
|
||||
}}
|
||||
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-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" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* 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) => (
|
||||
<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';
|
||||
}
|
||||
}}
|
||||
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>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function OncologyIntro() {
|
||||
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) => {
|
||||
setCurrentSlide(index);
|
||||
};
|
||||
@ -44,12 +35,12 @@ export default function OncologyIntro() {
|
||||
|
||||
return (
|
||||
<section className="bg-teal-700">
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* Left Side - Image */}
|
||||
<div className="hidden lg:block w-1/2 relative">
|
||||
<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="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"
|
||||
fill
|
||||
className="object-cover grayscale-[20%]"
|
||||
@ -59,106 +50,74 @@ export default function OncologyIntro() {
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* Right Side - Content */}
|
||||
<div className="w-full lg:w-3/4">
|
||||
<div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
|
||||
{/* 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">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">
|
||||
<span>Turning</span>
|
||||
<span className="ml-2">Complexity into Clarity</span>
|
||||
<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-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
<div className="w-8 sm:w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
</div>
|
||||
|
||||
{/* Content Slider */}
|
||||
<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">
|
||||
{slides[currentSlide].content}
|
||||
<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-3">
|
||||
<div className="flex items-center space-x-2 sm: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';
|
||||
}}
|
||||
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-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" />
|
||||
</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';
|
||||
}}
|
||||
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-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" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* 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) => (
|
||||
<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';
|
||||
}
|
||||
}}
|
||||
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>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function RareIntro() {
|
||||
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) => {
|
||||
setCurrentSlide(index);
|
||||
};
|
||||
@ -38,12 +29,12 @@ export default function RareIntro() {
|
||||
|
||||
return (
|
||||
<section className="bg-teal-700">
|
||||
<div className="flex min-h-[350px]">
|
||||
{/* Left Side - Image */}
|
||||
<div className="hidden lg:block w-1/2 relative">
|
||||
<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="https://images.unsplash.com/photo-1559757175-0eb30cd8c063"
|
||||
src="/images/health/rare.png"
|
||||
alt="DNA sequencing and genetic analysis in modern laboratory"
|
||||
fill
|
||||
className="object-cover grayscale-[20%]"
|
||||
@ -53,34 +44,34 @@ export default function RareIntro() {
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* Right Side - Content */}
|
||||
<div className="w-full lg:w-3/4">
|
||||
<div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
|
||||
{/* 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">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">
|
||||
<span>Transforming</span>
|
||||
<span className="ml-2">Delays into Diagnoses</span>
|
||||
<div className="mb-4 sm:mb-6">
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-3xl font-bold text-white mb-3 sm:mb-4">
|
||||
<span className="block sm:inline">Transforming</span>
|
||||
<span className="block sm:inline sm:ml-2">Delays into Diagnoses</span>
|
||||
</h2>
|
||||
<div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
<div className="w-8 sm:w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
|
||||
</div>
|
||||
|
||||
{/* Content Slider */}
|
||||
<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">
|
||||
{slides[currentSlide].content}
|
||||
<div className="mb-4 sm:mb-6 max-w-3xl">
|
||||
<div className="text-gray-200 leading-relaxed text-sm sm:text-base mb-4 sm:mb-6 text-left sm:text-justify font-light transition-opacity duration-300 min-h-[80px] sm:min-h-[90px] lg:min-h-[100px] flex items-start">
|
||||
<span>{slides[currentSlide].content}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex items-center space-x-2 sm:space-x-3">
|
||||
<button
|
||||
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={{
|
||||
borderColor: '#ffffff',
|
||||
color: '#ffffff'
|
||||
@ -97,14 +88,14 @@ export default function RareIntro() {
|
||||
}}
|
||||
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" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
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={{
|
||||
borderColor: '#ffffff',
|
||||
color: '#ffffff'
|
||||
@ -121,38 +112,34 @@ export default function RareIntro() {
|
||||
}}
|
||||
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" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* 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) => (
|
||||
<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';
|
||||
}
|
||||
}}
|
||||
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>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 69 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 138 KiB After Width: | Height: | Size: 138 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 86 KiB |
BIN
public/images/health/health.png
Normal file
BIN
public/images/health/health.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
public/images/health/health_section.jpg
Normal file
BIN
public/images/health/health_section.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
public/images/health/oncology_section.jpg
Normal file
BIN
public/images/health/oncology_section.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
public/images/health/rare.png
Normal file
BIN
public/images/health/rare.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
public/images/health/rare_section.jpg
Normal file
BIN
public/images/health/rare_section.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Reference in New Issue
Block a user