| ```javascript | |
| import React from 'react'; | |
| const Features = () => { | |
| const features = [ | |
| { | |
| title: "Drug Interaction Checker", | |
| icon: "activity", | |
| description: "Real-time analysis of potential drug interactions with comprehensive risk assessment.", | |
| benefits: [ | |
| "Reduces adverse drug events", | |
| "Identifies high-risk combinations", | |
| "Provides severity ratings" | |
| ] | |
| }, | |
| { | |
| title: "Patient Risk Assessment", | |
| icon: "user", | |
| description: "Personalized risk evaluation based on patient-specific factors and medical history.", | |
| benefits: [ | |
| "Considers age, weight, and comorbidities", | |
| "Adjusts for renal/hepatic function", | |
| "Flags high-risk patients" | |
| ] | |
| }, | |
| { | |
| title: "Safe Alternative Finder", | |
| icon: "shield", | |
| description: "Recommends safer medication alternatives based on evidence-based guidelines.", | |
| benefits: [ | |
| "Suggests equally effective options", | |
| "Highlights cost-effective alternatives", | |
| "Provides transition guidance" | |
| ] | |
| }, | |
| { | |
| title: "Dosing Optimization", | |
| icon: "bar-chart-2", | |
| description: "Precision dosing recommendations tailored to individual patient characteristics.", | |
| benefits: [ | |
| "Adjusts for pharmacokinetic factors", | |
| "Considers drug-disease interactions", | |
| "Provides loading/maintenance dose guidance" | |
| ] | |
| }, | |
| { | |
| title: "Allergy Alerts", | |
| icon: "alert-triangle", | |
| description: "Comprehensive allergy checking against medication components and cross-reactivity.", | |
| benefits: [ | |
| "Checks for inactive ingredients", | |
| "Identifies structural similarities", | |
| "Provides cross-sensitivity warnings" | |
| ] | |
| }, | |
| { | |
| title: "Clinical Guidelines", | |
| icon: "book", | |
| description: "Integrated access to current clinical guidelines and treatment protocols.", | |
| benefits: [ | |
| "Condition-specific recommendations", | |
| "Links to primary sources", | |
| "Keeps guidelines up-to-date" | |
| ] | |
| } | |
| ]; | |
| return ( | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div className="text-center mb-12"> | |
| <h1 className="text-3xl font-bold text-gray-800 mb-4">CureLens AI Features</h1> | |
| <p className="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Comprehensive clinical decision support tools designed to enhance medication safety and patient outcomes. | |
| </p> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| {features.map((feature, index) => ( | |
| <div key={index} className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather={feature.icon} className="text-blue-600"></i> | |
| </div> | |
| <h2 className="text-xl font-semibold mb-3">{feature.title}</h2> | |
| <p className="text-gray-600 mb-4">{feature.description}</p> | |
| <ul className="space |