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

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

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