Files
cmc_frontend/src/components/about/Services.tsx
2025-11-03 13:45:52 +05:30

70 lines
2.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React from 'react';
import { Users, Ambulance, Hospital, HeartPulse } from 'lucide-react';
const Services = () => {
const services = [
{
icon: <Users className="w-6 h-6" />,
title: "Injury Prevention - Outreach Activity",
description: "Community-based programs including first responder training for laypersons, schools and workplace groups. Education in helmet use, bleeding control, safe transport practices and initial life-saving care."
},
{
icon: <Ambulance className="w-6 h-6" />,
title: "Pre-Hospital Care",
description: "24x7 ambulance service for trauma calls and transfers (Contact: +91 97919 79797). Early triage, stabilization and rapid transport to definitive care."
},
{
icon: <Hospital className="w-6 h-6" />,
title: "Clinical Services - In-Hospital Care",
description: "Level-1 trauma centre with dedicated trauma wards, ICU units, six trauma OTs, resuscitation bay, 24×7 consultant-led teams and on-call interventional radiology for polytrauma, road-traffic injuries, falls and complex cases."
},
{
icon: <HeartPulse className="w-6 h-6" />,
title: "Post-Trauma Rehabilitation",
description: "Structured recovery programs through PMR Department including physiotherapy, occupational therapy, prosthetic support and return-to-work planning."
}
];
return (
<section className="py-8 sm:py-12" style={{ backgroundColor: '#ffffff' }}>
<div className="max-w-7xl mx-auto px-4">
<h2 className="text-2xl sm:text-3xl font-semibold text-center mb-2" style={{ color: '#012068' }}>
Our Services
</h2>
<h2 className="text-md sm:text-xl font-normal text-center mb-8 sm:mb-12">
We provide urgent care for
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{services.map((service, index) => (
<div
key={index}
className="rounded-lg p-6 border border-gray-300 hover:shadow-lg transition-shadow duration-300" style={{ backgroundColor: '#f4f4f4' }}
>
<div className="flex items-start space-x-4">
<div
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ backgroundColor: '#012068' }}
>
<div className="text-white">
{service.icon}
</div>
</div>
<div className="flex-1">
<h3 className="text-lg font-medium mb-2" style={{ color: '#012068' }}>
{service.title}
</h3>
<p className="text-base leading-relaxed"style={{ color: '#333' }}>
{service.description}
</p>
</div>
</div>
</div>
))}
</div>
</div>
</section>
);
};
export default Services;