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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user