Spaces:
Sleeping
Sleeping
File size: 7,124 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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
import React from 'react';
import { Code, Server, Database, Wifi, Shield, Zap } from 'lucide-react';
export function Features() {
const integrations = [
{ name: 'HL7 FHIR', icon: Database, status: 'active' },
{ name: 'REST API', icon: Server, status: 'active' },
{ name: 'SFTP', icon: Wifi, status: 'active' },
{ name: 'SOAP', icon: Code, status: 'active' },
{ name: 'OAuth 2.0', icon: Shield, status: 'active' },
{ name: 'WebSockets', icon: Zap, status: 'active' },
];
const features = [
{
title: 'Predictive AI Intelligence',
description: 'Advanced machine learning algorithms predict staffing needs, identify potential issues, and optimize resource allocation in real-time.',
image: 'https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=600'
},
{
title: 'Global Disease Monitoring',
description: 'Comprehensive worldwide disease tracking with outbreak prediction capabilities and early warning systems for healthcare preparedness.',
image: 'https://images.pexels.com/photos/3985167/pexels-photo-3985167.jpeg?auto=compress&cs=tinysrgb&w=600'
},
{
title: 'Compliance & Quality Assurance',
description: 'Automated compliance monitoring ensures adherence to healthcare regulations with real-time alerts and comprehensive audit trails.',
image: 'https://images.pexels.com/photos/4386467/pexels-photo-4386467.jpeg?auto=compress&cs=tinysrgb&w=600'
}
];
return (
<section id="integrations" 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">
{/* Integrations Section */}
<div className="text-center mb-16">
<h2 className="text-4xl lg:text-5xl font-black text-slate-900 dark:text-white mb-6">
Enterprise
<span className="block text-3xl lg:text-4xl text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-teal-500">
Integrations
</span>
</h2>
<p className="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto mb-12">
Seamlessly connect with your existing healthcare infrastructure through our comprehensive integration suite.
</p>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 mb-16">
{integrations.map((integration, index) => (
<div
key={index}
className="group bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-2xl p-6 border border-slate-200/50 dark:border-slate-700/50 hover:border-green-300 dark:hover:border-green-600 transition-all duration-300 hover:shadow-xl hover:shadow-green-500/10"
>
<div className="w-12 h-12 rounded-xl bg-gradient-to-r from-green-500 to-emerald-600 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform duration-300">
<integration.icon className="w-6 h-6 text-white" />
</div>
<h3 className="font-bold text-slate-900 dark:text-white text-sm mb-2">{integration.name}</h3>
<div className="flex items-center justify-center">
<div className="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
<span className="text-xs text-green-600 dark:text-green-400 font-medium">Connected</span>
</div>
</div>
))}
</div>
</div>
{/* Features Showcase */}
<div className="space-y-24">
{features.map((feature, index) => (
<div
key={index}
className={`flex flex-col ${index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'} items-center gap-12 lg:gap-16`}
>
<div className="flex-1 space-y-6">
<h3 className="text-3xl lg:text-4xl font-black text-slate-900 dark:text-white">
{feature.title}
</h3>
<p className="text-lg text-slate-600 dark:text-slate-300 leading-relaxed">
{feature.description}
</p>
<div className="flex space-x-4">
<button className="px-6 py-3 bg-gradient-to-r from-blue-600 to-teal-500 text-white font-bold rounded-xl hover:from-blue-700 hover:to-teal-600 transition-all duration-300 transform hover:scale-105">
Learn More
</button>
<button className="px-6 py-3 border-2 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 font-bold rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-300">
View Demo
</button>
</div>
</div>
<div className="flex-1">
<div className="relative group">
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-teal-500/20 rounded-3xl blur-2xl group-hover:blur-3xl transition-all duration-500"></div>
<img
src={feature.image}
alt={feature.title}
className="relative w-full h-80 object-cover rounded-3xl shadow-2xl border border-slate-200/50 dark:border-slate-700/50 group-hover:scale-105 transition-transform duration-500"
/>
</div>
</div>
</div>
))}
</div>
{/* ROI Section */}
<div className="mt-24 text-center">
<div className="bg-gradient-to-r from-blue-600 to-teal-500 rounded-3xl p-12 text-white">
<h3 className="text-3xl lg:text-4xl font-black mb-6">
Measurable ROI in Healthcare Operations
</h3>
<p className="text-xl mb-8 opacity-90 max-w-3xl mx-auto">
Join leading healthcare organizations achieving significant cost savings and improved patient outcomes through AI-driven automation.
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
<div className="text-center">
<div className="text-4xl font-black mb-2">45%</div>
<div className="text-lg opacity-90">Efficiency Increase</div>
</div>
<div className="text-center">
<div className="text-4xl font-black mb-2">$2.3M</div>
<div className="text-lg opacity-90">Annual Savings</div>
</div>
<div className="text-center">
<div className="text-4xl font-black mb-2">99.8%</div>
<div className="text-lg opacity-90">Compliance Rate</div>
</div>
</div>
<button className="px-8 py-4 bg-white text-blue-600 font-bold rounded-2xl hover:bg-slate-50 transition-all duration-300 transform hover:scale-105 shadow-lg">
Schedule a Consultation
</button>
</div>
</div>
</div>
</section>
);
} |