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

Enhaced UI updated

Browse Source
This commit is contained in:
Prathiyuman
2026-01-22 11:32:41 +05:30
parent 37835cf5c9
commit af2a96c035
8 changed files with 561 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/components/sections/AppEcosystem.tsx Normal file
View File

@@ -0,0 +1,91 @@
"use client";
import { motion } from "framer-motion";
import { Smartphone, ShieldCheck, HeartPulse, Fingerprint } from "lucide-react";
export default function AppEcosystem() {
return (
<section className="py-24 relative overflow-hidden">
<div className="container mx-auto px-6">
<div className="flex flex-col md:flex-row-reverse items-center gap-20">
<motion.div
initial={{ opacity: 0, x: 50 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8 }}
className="flex-1 space-y-10"
>
<div className="space-y-4">
<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">
<Smartphone className="w-4 h-4" />
<span>Mobile Intelligence</span>
</div>
<h2 className="text-4xl md:text-6xl font-black tracking-tighter">
Health in your <span className="text-gradient">Pocket</span>
</h2>
<p className="text-xl text-foreground/60 leading-relaxed max-w-2xl">
Experience end-to-end healthcare with our companion mobile apps. Real-time data sync, encrypted messaging, and emergency alerts at your fingertips.
</p>
</div>
<div className="space-y-6">
{[
{ icon: Fingerprint, title: "Biometric Security", text: "Secure access with FaceID and Fingerprint authentication." },
{ icon: ShieldCheck, title: "HIPAA Certified", text: "Multi-layered encryption for all personal health information (PHI)." },
{ icon: HeartPulse, title: "Live Streaming", text: "Instant vital data visualization from connected Bluetooth devices." }
].map((item, i) => (
<div key={i} className="flex gap-6 group">
<div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:bg-primary/20 transition-colors">
<item.icon className="w-6 h-6 text-primary" />
</div>
<div>
<h4 className="font-extrabold text-lg">{item.title}</h4>
<p className="text-foreground/50">{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="relative mx-auto max-w-[300px]">
{/* Phone Frame Mockup */}
<div className="relative w-full aspect-[1/2] glass rounded-[3rem] p-4 border-white/20 shadow-[0_0_80px_rgba(59,130,246,0.2)] overflow-hidden">
<div className="absolute top-0 inset-x-0 h-8 flex justify-center items-center">
<div className="w-20 h-4 bg-black rounded-full" />
</div>
<div className="h-full w-full bg-zinc-900 rounded-[2.5rem] p-6 space-y-8 relative">
<div className="flex justify-between items-center">
<div className="space-y-1">
<div className="h-2 w-16 bg-white/10 rounded-full" />
<div className="h-3 w-24 bg-white/20 rounded-full" />
</div>
<div className="w-10 h-10 rounded-full bg-primary/20" />
</div>
<div className="aspect-square glass rounded-2xl p-6 flex items-center justify-center">
<HeartPulse className="w-20 h-20 text-primary animate-pulse" />
</div>
<div className="space-y-4">
{[1, 2, 3].map((_, i) => (
<div key={i} className="h-12 bg-white/5 rounded-xl border border-white/5" />
))}
</div>
</div>
</div>
{/* Decorative Elements */}
<div className="absolute -z-10 -bottom-10 -right-10 w-40 h-40 bg-accent/20 blur-[60px] rounded-full" />
<div className="absolute -z-10 top-20 -left-20 w-48 h-48 bg-primary/20 blur-[60px] rounded-full" />
</div>
</motion.div>
</div>
</div>
</section>
);
}