200 lines
14 KiB
TypeScript
200 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useScroll, useTransform } from "framer-motion";
|
|
import { Pill, ShieldCheck, Zap, ArrowRight, Building2, Truck } from "lucide-react";
|
|
import { useRef } from "react";
|
|
|
|
export default function AIPrescription() {
|
|
const containerRef = useRef(null);
|
|
const { scrollYProgress } = useScroll({
|
|
target: containerRef,
|
|
offset: ["start end", "end start"]
|
|
});
|
|
|
|
const rotateX = useTransform(scrollYProgress, [0, 1], [-10, 10]);
|
|
const y = useTransform(scrollYProgress, [0, 1], [40, -40]);
|
|
|
|
return (
|
|
<section ref={containerRef} id="prescription" className="py-20 sm:py-32 lg:py-40 relative overflow-hidden bg-black">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex flex-col lg:flex-row items-center gap-12 sm:gap-16 lg:gap-20 xl:gap-32">
|
|
<motion.div
|
|
style={{ y }}
|
|
initial={{ opacity: 0, x: -30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="flex-1 space-y-10 sm:space-y-12 lg:space-y-16"
|
|
>
|
|
<div className="space-y-6">
|
|
<div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-white/5 border border-white/10 text-zinc-300 text-xs font-semibold tracking-wide">
|
|
<Zap className="w-4 h-4 text-emerald-400" />
|
|
<span>Clinical Fulfillment Engine</span>
|
|
</div>
|
|
<h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.1] text-white">
|
|
Automated Order <br />
|
|
<span className="text-zinc-400">Lifecycle Management</span>
|
|
</h2>
|
|
<p className="text-lg md:text-xl text-zinc-400 leading-relaxed max-w-xl">
|
|
Enterprise-grade pharmaceutical orchestration with AI-powered drug interaction screening, real-time compliance monitoring, and seamless clinical workflow integration.
|
|
</p>
|
|
|
|
{/* Key Metrics */}
|
|
<div className="grid grid-cols-3 gap-3 sm:gap-4 pt-4">
|
|
<div className="p-3 sm:p-4 rounded-xl bg-white/[0.03] border border-white/10">
|
|
<div className="text-xl sm:text-2xl md:text-3xl font-bold text-white">99.8%</div>
|
|
<div className="text-[10px] sm:text-xs text-zinc-500 mt-1">Accuracy Rate</div>
|
|
</div>
|
|
<div className="p-3 sm:p-4 rounded-xl bg-white/[0.03] border border-white/10">
|
|
<div className="text-xl sm:text-2xl md:text-3xl font-bold text-white"><2s</div>
|
|
<div className="text-[10px] sm:text-xs text-zinc-500 mt-1">Avg Response</div>
|
|
</div>
|
|
<div className="p-3 sm:p-4 rounded-xl bg-white/[0.03] border border-white/10">
|
|
<div className="text-xl sm:text-2xl md:text-3xl font-bold text-white">24/7</div>
|
|
<div className="text-[10px] sm:text-xs text-zinc-500 mt-1">Monitoring</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4 sm:space-y-6">
|
|
{[
|
|
{
|
|
icon: Pill,
|
|
title: "Drug Interaction Screening",
|
|
desc: "Advanced AI cross-references patient medications against 500,000+ drug interaction databases in real-time.",
|
|
stat: "250K+ checks/day"
|
|
},
|
|
{
|
|
icon: ShieldCheck,
|
|
title: "Regulatory Compliance",
|
|
desc: "Automated verification against FDA, DEA, and state regulations with instant flagging of non-compliant orders.",
|
|
stat: "100% compliant"
|
|
}
|
|
].map((item, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: i * 0.2 }}
|
|
className="flex gap-4 sm:gap-6 group p-4 sm:p-6 rounded-2xl bg-white/[0.02] border border-white/5 hover:border-white/10 hover:bg-white/[0.04] transition-all"
|
|
>
|
|
<div className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-gradient-to-br from-white/10 to-white/5 flex items-center justify-center border border-white/10 shrink-0">
|
|
<item.icon className="w-6 h-6 sm:w-7 sm:h-7 text-white" />
|
|
</div>
|
|
<div className="space-y-2 flex-1 min-w-0">
|
|
<div className="flex items-start sm:items-center justify-between gap-2 sm:gap-4 flex-col sm:flex-row">
|
|
<h4 className="text-base sm:text-lg font-bold text-white">{item.title}</h4>
|
|
<span className="text-[10px] sm:text-xs font-semibold text-emerald-400 bg-emerald-400/10 px-2.5 sm:px-3 py-1 rounded-full whitespace-nowrap">
|
|
{item.stat}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs sm:text-sm text-zinc-400 leading-relaxed">{item.desc}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
style={{ rotateX }}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 1 }}
|
|
className="flex-1 relative w-full max-w-lg mx-auto lg:mx-0"
|
|
>
|
|
<div className="rounded-3xl p-px border border-white/10 shadow-2xl bg-gradient-to-br from-white/[0.05] to-transparent backdrop-blur-sm">
|
|
<div className="relative aspect-[4/5] rounded-[calc(1.5rem-1px)] overflow-hidden bg-gradient-to-br from-zinc-900 to-black p-6 sm:p-8 lg:p-10 xl:p-12 space-y-6 sm:space-y-8">
|
|
{/* Header with Status */}
|
|
<div className="relative z-10 flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-xs sm:text-sm font-semibold text-zinc-400">Order Processing</h3>
|
|
<p className="text-xl sm:text-2xl font-bold text-white mt-1">RX-2847392</p>
|
|
</div>
|
|
<div className="px-2.5 sm:px-3 py-1 sm:py-1.5 bg-emerald-500/20 border border-emerald-500/30 rounded-full">
|
|
<span className="text-[10px] sm:text-xs font-semibold text-emerald-400">Active</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Workflow Steps */}
|
|
<div className="flex justify-between items-center relative gap-2 sm:gap-3">
|
|
<div className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl border-white/20 border flex items-center justify-center relative shadow-lg bg-white/5 backdrop-blur-sm">
|
|
<Building2 className="text-white w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7" />
|
|
<div className="absolute -bottom-5 sm:-bottom-6 text-[9px] sm:text-[10px] font-semibold text-zinc-400 whitespace-nowrap">Pharmacy</div>
|
|
</div>
|
|
|
|
<div className="flex-1 h-px bg-white/10 relative overflow-hidden">
|
|
<motion.div
|
|
animate={{ x: ["-100%", "300%"] }}
|
|
transition={{ repeat: Infinity, duration: 3, ease: "linear" }}
|
|
className="absolute top-0 w-16 sm:w-20 h-full bg-gradient-to-r from-transparent via-emerald-400/50 to-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl border-white/20 border flex items-center justify-center relative shadow-lg bg-white/5 backdrop-blur-sm">
|
|
<Truck className="text-white w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7" />
|
|
<div className="absolute -bottom-5 sm:-bottom-6 text-[9px] sm:text-[10px] font-semibold text-zinc-400 whitespace-nowrap">Delivery</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Processing Details */}
|
|
<div className="space-y-3 sm:space-y-4 pt-6 sm:pt-8">
|
|
{/* Patient Info Card */}
|
|
<div className="p-4 sm:p-5 rounded-xl border border-white/10 space-y-2.5 sm:space-y-3 shadow-lg bg-white/[0.03] backdrop-blur-sm">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] sm:text-xs font-semibold text-zinc-400">Patient ID</span>
|
|
<span className="text-[10px] sm:text-xs font-bold text-white">PT-8492</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] sm:text-xs font-semibold text-zinc-400">Medication</span>
|
|
<span className="text-[10px] sm:text-xs font-bold text-white">Lisinopril 10mg</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] sm:text-xs font-semibold text-zinc-400">Quantity</span>
|
|
<span className="text-[10px] sm:text-xs font-bold text-white">30 tablets</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Verification Status */}
|
|
<motion.div className="p-5 sm:p-6 bg-gradient-to-br from-emerald-500/10 to-emerald-500/5 rounded-xl border border-emerald-500/20 space-y-3 sm:space-y-4 relative group overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-emerald-500/0 via-emerald-500/5 to-emerald-500/0 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
|
|
<div className="flex justify-between items-start relative z-10">
|
|
<div className="space-y-1">
|
|
<h4 className="text-sm sm:text-base font-bold text-white flex items-center gap-2">
|
|
<ShieldCheck className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-emerald-400" />
|
|
Verified & Approved
|
|
</h4>
|
|
<p className="text-[10px] sm:text-xs font-medium text-zinc-400">Completed at 12:44 PM EST</p>
|
|
</div>
|
|
<div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
|
</div>
|
|
|
|
{/* Checks List */}
|
|
<div className="space-y-2 relative z-10">
|
|
{[
|
|
"Drug interaction check",
|
|
"Dosage verification",
|
|
"Insurance validation"
|
|
].map((check, idx) => (
|
|
<div key={idx} className="flex items-center gap-2 text-[10px] sm:text-xs text-zinc-300">
|
|
<div className="w-3.5 h-3.5 sm:w-4 sm:h-4 rounded-full bg-emerald-400/20 border border-emerald-400/40 flex items-center justify-center shrink-0">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
|
|
</div>
|
|
<span>{check}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<button className="relative z-10 w-full bg-white text-black py-3 sm:py-3.5 rounded-lg font-bold text-xs sm:text-sm flex items-center justify-center gap-2 hover:bg-zinc-100 active:scale-[0.98] transition-all shadow-lg">
|
|
View Full Report
|
|
<ArrowRight className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
|
|
</button>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |