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

UI Screens updated

Browse Source
This commit is contained in:
Prathiyuman
2026-01-22 11:27:35 +05:30
parent 34e2c61edd
commit 37835cf5c9
9 changed files with 1301 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
app/components/sections/AIPrescription.tsx Normal file
View File

@@ -0,0 +1,93 @@
"use client";
import { motion } from "framer-motion";
import { Pill, Zap, Users, ClipboardCheck } from "lucide-react";
export default function AIPrescription() {
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">
<motion.div
initial={{ opacity: 0, x: -50 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8 }}
className="flex-1 space-y-8"
>
<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>
<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">
{[
{ 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" }
].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" />
</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>
</div>
))}
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="flex-1"
>
<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>
<div>
<h4 className="font-bold text-sm">Prescription Portal</h4>
<p className="text-xs text-foreground/50">Active Session</p>
</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" />
</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>
))}
</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>
</div>
</div>
</motion.div>
</div>
</div>
</section>
);
}