prathiyuman/Skyheal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI design Updated

Browse Source
This commit is contained in:
Prathiyuman
2026-01-22 15:43:18 +05:30
parent af2a96c035
commit 5cd7d95904
18 changed files with 2383 additions and 812 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
app/components/sections/AIPrescription.tsx
View File

@@ -1,88 +1,195 @@
"use client";
import { motion } from "framer-motion";
import { Pill, Zap, Users, ClipboardCheck } from "lucide-react";
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 id="prescription" className="py-24 relative">
<div className="container mx-auto px-6">
<div className="flex flex-col md:flex-row items-center gap-16">
<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
initial={{ opacity: 0, x: -50 }}
style={{ y }}
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8 }}
className="flex-1 space-y-8"
className="flex-1 space-y-10 sm:space-y-12 lg:space-y-16"
>
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-sm font-semibold">
<Pill className="w-4 h-4" />
<span>Smart Fulfillment</span>
<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">&lt;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>
<h2 className="text-4xl md:text-5xl font-bold leading-tight">
End-to-End <span className="text-gradient">AI Prescription</span> Ecosystem
</h2>
<p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
From the doctor&apos;s desk to the patient&apos;s door. Skyheal automates the entire prescription lifecycle, ensuring safety, compliance, and convenience.
</p>
<div className="space-y-6">
<div className="space-y-4 sm:space-y-6">
{[
{ icon: Zap, text: "Instant Pharmacy Integration", label: "Smart Link" },
{ icon: Users, text: "Patient Medication Management", label: "Care Portal" },
{ icon: ClipboardCheck, text: "Automatic Drug Interaction Checks", label: "Safety First" }
{
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) => (
<div key={i} className="flex items-center gap-6 p-4 rounded-2xl bg-white/5 hover:bg-white/10 transition-colors border border-white/5">
<div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
<item.icon className="w-6 h-6 text-primary" />
<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>
<span className="text-xs font-bold uppercase tracking-widest text-primary/60">{item.label}</span>
<p className="text-base font-medium text-foreground/90">{item.text}</p>
<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>
</div>
</motion.div>
))}
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="flex-1"
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="glass rounded-[2.5rem] p-1 shadow-2xl overflow-hidden">
<div className="bg-background/40 p-8 rounded-[2.25rem] space-y-8">
<div className="flex items-center justify-between border-b border-white/5 pb-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center">
<Pill className="w-5 h-5 text-accent" />
<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>
<h4 className="font-bold text-sm">Prescription Portal</h4>
<p className="text-xs text-foreground/50">Active Session</p>
<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>
<div className="px-3 py-1 rounded-full bg-accent/10 text-accent text-[10px] font-bold uppercase">Verified</div>
</div>
<div className="space-y-4">
{[1, 2].map((_, i) => (
<div key={i} className="p-4 rounded-xl bg-white/5 border border-white/5 space-y-3">
<div className="flex justify-between items-start">
<div className="h-4 w-1/3 bg-white/10 rounded-md animate-pulse" />
<div className="h-4 w-20 bg-primary/20 rounded-md" />
{/* 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="h-2 w-full bg-white/5 rounded-full" />
<div className="h-2 w-2/3 bg-white/5 rounded-full" />
<div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
</div>
))}
</div>
<button className="w-full bg-accent hover:bg-accent/80 text-white py-4 rounded-xl font-bold transition-all transform hover:translate-y-[-2px] shadow-lg shadow-accent/20">
Authorize Digital Delivery
</button>
{/* 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>
@@ -90,4 +197,4 @@ export default function AIPrescription() {
</div>
</section>
);
}
}