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
'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>