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

update styling

Browse Source
This commit is contained in:
mukesh13
2025-09-07 21:29:21 +05:30
parent e4ef985e69
commit 3a944c38e9
25 changed files with 438 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/health/components/HealthIntro.jsx
View File

@ -42,14 +42,31 @@ export default function AboutHealth() {
};
return (
<section>
<section className="bg-teal-700">
<div className="flex min-h-[350px]">
{/* Left Side - Content */}
<div className="w-full lg:w-3/4 bg-white">
{/* Left 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 right-0 top-0 w-px 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">
{/* Brand/Title */}
<div className="mb-4">
<h2 className="text-3xl font-bold text-teal-700 mb-4">
<h2 className="text-3xl font-bold text-white mb-4">
<span>Operify</span>
<span className="ml-2">Health</span>
</h2>
@ -58,7 +75,7 @@ export default function AboutHealth() {
{/* 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">
<div className="text-gray-200 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
{slides[currentSlide].content}
</div>
</div>
@ -70,18 +87,18 @@ export default function AboutHealth() {
onClick={prevSlide}
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
style={{
borderColor: '#555555',
color: '#555555'
borderColor: '#ffffff',
color: '#ffffff'
}}
onMouseEnter={(e) => {
e.target.style.borderColor = '#faae31';
e.target.style.backgroundColor = '#faae31';
e.target.style.color = '#2a6564';
e.target.style.color = '#0f766e';
}}
onMouseLeave={(e) => {
e.target.style.borderColor = '#555555';
e.target.style.borderColor = '#ffffff';
e.target.style.backgroundColor = 'transparent';
e.target.style.color = '#555555';
e.target.style.color = '#ffffff';
}}
aria-label="Previous slide"
>
@ -94,18 +111,18 @@ export default function AboutHealth() {
onClick={nextSlide}
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
style={{
borderColor: '#555555',
color: '#555555'
borderColor: '#ffffff',
color: '#ffffff'
}}
onMouseEnter={(e) => {
e.target.style.borderColor = '#faae31';
e.target.style.backgroundColor = '#faae31';
e.target.style.color = '#2a6564';
e.target.style.color = '#0f766e';
}}
onMouseLeave={(e) => {
e.target.style.borderColor = '#555555';
e.target.style.borderColor = '#ffffff';
e.target.style.backgroundColor = 'transparent';
e.target.style.color = '#555555';
e.target.style.color = '#ffffff';
}}
aria-label="Next slide"
>
@ -124,16 +141,16 @@ export default function AboutHealth() {
style={{
width: index === currentSlide ? '24px' : '6px',
height: '6px',
backgroundColor: index === currentSlide ? '#faae31' : '#555555'
backgroundColor: index === currentSlide ? '#faae31' : '#ffffff'
}}
onMouseEnter={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#2a6564';
e.target.style.backgroundColor = '#f1f5f9';
}
}}
onMouseLeave={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#555555';
e.target.style.backgroundColor = '#ffffff';
}
}}
aria-label={`Go to slide ${index + 1}`}
@ -144,23 +161,6 @@ export default function AboutHealth() {
</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>
);