File size: 1,466 Bytes
d3b533c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | import React from 'react';
import { BarChart3, UserCheck, Search } from 'lucide-react';
const techCards = [
{ icon: BarChart3, title: 'Big Data & AI-Powered Insights', desc: 'Harnessing data and AI for accurate, actionable results.' },
{ icon: UserCheck, title: 'Personalized Diagnostics', desc: 'Tailored testing for your unique health profile.' },
{ icon: Search, title: 'Early Detection for Better Outcomes', desc: 'Identifying risks early for proactive care.' },
];
const HowTechWorks = () => (
<section className="section-padding">
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 tracking-tight">How Our Diagnostic Technology Works</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
{techCards.map(({ icon: Icon, title, desc }) => (
<div key={title} className="bg-white rounded-2xl shadow-md p-8 flex flex-col items-center text-center">
<div className="w-16 h-16 flex items-center justify-center rounded-full bg-brand-light mb-4">
<Icon className="h-8 w-8 text-brand" />
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">{title}</h3>
<p className="text-gray-600 text-base">{desc}</p>
</div>
))}
</div>
</div>
</section>
);
export default HowTechWorks; |