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

flowchart changes updated

Browse Source
This commit is contained in:
mukesh13
2025-09-04 02:33:03 +05:30
parent 3f803ac0c9
commit 78a56a061b
65 changed files with 2234 additions and 992 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,32 +1,161 @@
'use client'
import Image from "next/image";
import Link from "next/link";
import { useState, useEffect } from "react";
export default function RareIntro() {
const [currentSlide, setCurrentSlide] = useState(0);
const slides = [
{
content: "There are over 7,000 identified rare diseases, many of which begin in childhood—and nearly 80% have a genetic cause. Yet, the average time to diagnose a rare disorder is still 4.8 years, with some cases taking up to 20 years."
},
{
content: "At Operify Health, we leverage advanced Next Generation Sequencing (NGS) and proprietary bioinformatics to deliver rapid, reliable insights—helping reduce the diagnostic journey from years to days."
}
];
// 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">
<h2 className="text-3xl font-bold text-white mb-6 leading-tight">
Transforming Delays into Diagnoses
</h2>
<ul className="space-y-4">
<li className="flex items-start gap-3">
<div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
<span className="leading-relaxed text-justify">
There are over 7,000 identified rare diseases, many of which begin in childhood—and
nearly 80% have a genetic cause. Yet, the average time to diagnose a rare disorder is
still 4.8 years, with some cases taking up to 20 years.
</span>
</li>
<li className="flex items-start gap-3">
<div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
<span className="leading-relaxed text-justify">
At Operify Health, we leverage advanced Next Generation Sequencing (NGS) and proprietary
bioinformatics to deliver rapid, reliable insights—helping reduce the diagnostic journey
from years to days.
</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>Transforming</span>
<span className="ml-2">Delays into Diagnoses</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-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
alt="DNA sequencing and genetic analysis 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>
);