92 lines
5.5 KiB
TypeScript
92 lines
5.5 KiB
TypeScript
"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>
|
|
);
|
|
}
|