MSaabith's picture
use react and i need the whole website with other pages too !
bf930e1 verified
```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