95 lines
5.7 KiB
TypeScript
95 lines
5.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useScroll, useTransform } from "framer-motion";
|
|
import { Video, Shield, Clock, Users, Globe, Activity } from "lucide-react";
|
|
import { useRef } from "react";
|
|
|
|
export default function TelehealthSolutions() {
|
|
const containerRef = useRef(null);
|
|
const { scrollYProgress } = useScroll({
|
|
target: containerRef,
|
|
offset: ["start end", "end start"]
|
|
});
|
|
|
|
const scale = useTransform(scrollYProgress, [0, 0.5], [0.98, 1]);
|
|
const rotateY = useTransform(scrollYProgress, [0, 0.5], [10, 0]);
|
|
|
|
const services = [
|
|
{ icon: Video, title: "Clinical HD Video", desc: "Institutional-grade secure streaming for pediatric and adult care." },
|
|
{ icon: Clock, title: "Zero-Latency Triage", desc: "Automated routing based on real-time vital analysis." },
|
|
{ icon: Shield, title: "Military Encryption", desc: "End-to-end PHI security layers for absolute data integrity." },
|
|
{ icon: Globe, title: "Global Registry", desc: "Unified clinical records accessible across institutional borders." }
|
|
];
|
|
|
|
return (
|
|
<section ref={containerRef} id="solutions" className="py-24 relative overflow-hidden perspective-1000">
|
|
<div className="container mx-auto px-6">
|
|
<motion.div
|
|
style={{ scale, rotateY }}
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="glass rounded-[4rem] border-white/5 p-12 lg:p-24 overflow-hidden relative shadow-none min-h-[800px] flex flex-col justify-center bg-white/[0.01]"
|
|
>
|
|
<div className="reflection" />
|
|
|
|
<div className="flex flex-col lg:flex-row gap-20 items-center relative z-10">
|
|
<div className="flex-1 space-y-12">
|
|
<div className="space-y-8 text-center lg:text-left">
|
|
<div className="inline-flex items-center gap-3 px-6 py-2 rounded-full glass border-white/5 text-zinc-400 text-[10px] font-black tracking-[0.4em] uppercase mx-auto lg:mx-0">
|
|
<Activity className="w-4 h-4 text-white" />
|
|
<span>Clinical Service Layer</span>
|
|
</div>
|
|
<h2 className="text-6xl md:text-8xl font-extrabold tracking-tighter leading-[0.9]">
|
|
Connected <br /><span className="text-zinc-500 italic uppercase">Logistics</span>
|
|
</h2>
|
|
<p className="text-xl md:text-2xl text-zinc-500 leading-relaxed max-w-2xl font-medium tracking-tight mx-auto lg:mx-0">
|
|
Institutional delivery systems for virtual care. Bridging the gap between the patient and the neural clinic with uncompromised operational speed.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-4">
|
|
{services.map((item, i) => (
|
|
<motion.div
|
|
key={i}
|
|
whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.02)" }}
|
|
className="flex flex-col gap-6 p-10 glass rounded-[2rem] border-white/[0.03] transition-all shadow-none group"
|
|
>
|
|
<div className="w-14 h-14 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:border-white/30 transition-all">
|
|
<item.icon className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-xl font-black tracking-tight uppercase italic mb-2">{item.title}</h4>
|
|
<p className="text-base text-zinc-600 font-medium leading-relaxed">{item.desc}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 relative hidden lg:block">
|
|
<div className="aspect-square glass rounded-[3rem] p-4 border-white/5 relative flex items-center justify-center overflow-hidden bg-white/[0.01]">
|
|
<div className="absolute inset-x-8 inset-y-8 border-[0.5px] border-white/5 rounded-2xl" />
|
|
<motion.div
|
|
animate={{
|
|
scale: [1, 1.05, 1],
|
|
opacity: [0.3, 0.6, 0.3]
|
|
}}
|
|
transition={{ repeat: Infinity, duration: 5 }}
|
|
>
|
|
<Users className="w-64 h-64 text-white opacity-10" />
|
|
</motion.div>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="w-32 h-32 rounded-full glass border-white/10 flex items-center justify-center animate-pulse">
|
|
<Video className="w-12 h-12 text-white" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|