UI design Updated
This commit is contained in:
@@ -1,94 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Video, ShoppingCart, ShieldCheck, Globe } from "lucide-react";
|
||||
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 className="py-24 relative overflow-hidden bg-primary/5">
|
||||
<section ref={containerRef} id="solutions" className="py-24 relative overflow-hidden perspective-1000">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col lg:flex-row 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">
|
||||
<h2 className="text-4xl md:text-6xl font-black tracking-tighter">
|
||||
Clinic without <span className="text-gradient">Boundaries</span>
|
||||
</h2>
|
||||
<p className="text-xl text-foreground/60 leading-relaxed max-w-2xl">
|
||||
Advanced tele-consultation and integrated cart solutions designed for modern healthcare infrastructure. High-fidelity, low-latency, and fully secure.
|
||||
</p>
|
||||
</div>
|
||||
<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="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
|
||||
<Video className="w-6 h-6 text-blue-500" />
|
||||
<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>
|
||||
<h3 className="text-xl font-bold">Teleconsult</h3>
|
||||
<p className="text-sm text-foreground/50">HD video consultation with integrated EHR and vital streaming capabilities.</p>
|
||||
<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="space-y-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center">
|
||||
<ShoppingCart className="w-6 h-6 text-purple-500" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold">Telecart</h3>
|
||||
<p className="text-sm text-foreground/50">Managed healthcare shopping experience for devices and medication.</p>
|
||||
|
||||
<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 items-center gap-6 p-6 glass rounded-2xl border-primary/20 bg-primary/5">
|
||||
<ShieldCheck className="w-10 h-10 text-primary flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-bold">Enterprise-Grade Security</h4>
|
||||
<p className="text-sm text-foreground/60">All consultations are end-to-end encrypted and HIPAA-compliant.</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1"
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-primary/10 rounded-3xl blur-3xl transform rotate-3" />
|
||||
<div className="relative glass aspect-video rounded-3xl overflow-hidden border-white/5 shadow-2xl">
|
||||
<div className="bg-background/80 p-2 border-b border-white/5 flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-400" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-400" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-400" />
|
||||
<div className="ml-4 h-5 w-1/3 bg-white/5 rounded-full" />
|
||||
</div>
|
||||
<div className="h-full w-full bg-gradient-to-br from-zinc-900 to-black p-8 flex items-center justify-center relative">
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<Globe className="w-full h-full text-white" />
|
||||
</div>
|
||||
<div className="text-center space-y-4">
|
||||
<div className="w-20 h-20 rounded-full glass mx-auto flex items-center justify-center border-primary/30">
|
||||
<Video className="w-8 h-8 text-primary animate-pulse" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-2 w-32 bg-white/20 rounded-full mx-auto" />
|
||||
<div className="h-2 w-24 bg-white/10 rounded-full mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Floating HUD Elements */}
|
||||
<div className="absolute top-12 right-12 glass p-4 rounded-xl border-accent/20">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-accent animate-ping" />
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-accent">Active Sync</span>
|
||||
</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>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user