Spaces:
Sleeping
Sleeping
File size: 4,905 Bytes
42ccbd9 | 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | import React from 'react';
import { Users, Calendar, BarChart3, Shield, Globe, Database } from 'lucide-react';
export function Solutions() {
const solutions = [
{
icon: Shield,
title: 'Policy Management',
description: 'Automated compliance tracking with real-time policy updates and violation alerts.',
gradient: 'from-blue-500 to-indigo-600',
features: ['Automated Compliance', 'Real-time Updates', 'Violation Alerts']
},
{
icon: Users,
title: 'Clinical Workforce Management',
description: 'AI-powered scheduling and staffing optimization for maximum efficiency.',
gradient: 'from-teal-500 to-cyan-600',
features: ['Smart Scheduling', 'Skill Matching', 'Workload Balance']
},
{
icon: BarChart3,
title: 'Advanced Analytics',
description: 'Predictive insights and performance metrics for data-driven decisions.',
gradient: 'from-purple-500 to-pink-600',
features: ['Predictive Analytics', 'KPI Tracking', 'Custom Reports']
},
{
icon: Calendar,
title: 'Clinical Surveillance',
description: 'Continuous monitoring and early detection of clinical anomalies.',
gradient: 'from-green-500 to-emerald-600',
features: ['Anomaly Detection', 'Early Warnings', 'Quality Assurance']
},
{
icon: Globe,
title: 'Global AI Disease Intelligence',
description: 'Worldwide disease tracking and outbreak prediction capabilities.',
gradient: 'from-orange-500 to-red-600',
features: ['Disease Tracking', 'Outbreak Prediction', 'Global Intelligence']
},
{
icon: Database,
title: 'Public Health Platform',
description: 'Comprehensive population health management and reporting tools.',
gradient: 'from-slate-500 to-gray-600',
features: ['Population Health', 'Public Reporting', 'Health Metrics']
}
];
return (
<section id="solutions" className="py-24 bg-gradient-to-b from-white to-slate-50 dark:from-slate-800 dark:to-slate-900">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-4xl lg:text-5xl font-black text-slate-900 dark:text-white mb-6">
Digital Health Transformation
<span className="block text-3xl lg:text-4xl text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-teal-500">
Solutions
</span>
</h2>
<p className="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
Comprehensive suite of AI-powered tools designed to revolutionize healthcare operations
and improve patient outcomes across all care settings.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{solutions.map((solution, index) => (
<div
key={index}
className="group bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-3xl p-8 border border-slate-200/50 dark:border-slate-700/50 hover:border-transparent hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500 transform hover:scale-[1.02]"
>
<div className={`w-16 h-16 rounded-2xl bg-gradient-to-r ${solution.gradient} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
<solution.icon className="w-8 h-8 text-white" />
</div>
<h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200">
{solution.title}
</h3>
<p className="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
{solution.description}
</p>
<div className="space-y-2">
{solution.features.map((feature, featureIndex) => (
<div key={featureIndex} className="flex items-center text-sm">
<div className="w-2 h-2 rounded-full bg-gradient-to-r from-blue-400 to-teal-400 mr-3"></div>
<span className="text-slate-600 dark:text-slate-400">{feature}</span>
</div>
))}
</div>
<div className="mt-6 pt-6 border-t border-slate-200/50 dark:border-slate-700/50">
<button className="text-blue-600 dark:text-blue-400 font-medium hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200 group">
Learn More
<span className="ml-1 group-hover:translate-x-1 transition-transform duration-200 inline-block">→</span>
</button>
</div>
</div>
))}
</div>
</div>
</section>
);
} |