Animation Added and Gif file updated
This commit is contained in:
@@ -4,15 +4,16 @@ import Navbar from "../components/layout/Navbar";
|
||||
import Footer from "../components/layout/Footer";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Thermometer,
|
||||
Activity,
|
||||
HeartPulse,
|
||||
Droplet,
|
||||
Baby,
|
||||
Scale,
|
||||
Bluetooth,
|
||||
ShieldCheck,
|
||||
FileText,
|
||||
Cpu,
|
||||
Zap,
|
||||
CheckCircle2,
|
||||
ArrowUpRight,
|
||||
} from "lucide-react";
|
||||
|
||||
interface DeviceItem {
|
||||
@@ -27,329 +28,296 @@ interface DeviceItem {
|
||||
function DeviceCard({ item, index }: { item: DeviceItem; index: number }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: index * 0.12, ease: "easeOut" }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
whileHover={{ y: -8, scale: 1.015 }}
|
||||
className={`
|
||||
group relative
|
||||
bg-neutral-950/70 backdrop-blur-xl
|
||||
border border-neutral-800/60
|
||||
rounded-2xl overflow-hidden
|
||||
shadow-[0_8px_32px_rgba(0,0,0,0.4)]
|
||||
hover:border-blue-900/50 hover:shadow-[0_16px_48px_rgba(37,99,235,0.12)]
|
||||
transition-all duration-500
|
||||
`}
|
||||
transition={{ duration: 0.6, delay: index * 0.1, ease: "easeOut" }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
className="group relative h-full"
|
||||
>
|
||||
{/* Subtle internal gradient glow */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-950/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
|
||||
{/* Card Container */}
|
||||
<div className="
|
||||
relative h-full flex flex-col
|
||||
bg-zinc-950/40 backdrop-blur-md
|
||||
border border-white/5 rounded-3xl
|
||||
overflow-hidden
|
||||
transition-all duration-500
|
||||
hover:border-cyan-500/30 hover:bg-zinc-900/60
|
||||
hover:shadow-[0_0_40px_-10px_rgba(6,182,212,0.15)]
|
||||
">
|
||||
|
||||
{/* Hover Gradient Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-cyan-500/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
|
||||
|
||||
<div className="relative px-7 pt-7 pb-6 border-b border-neutral-800/50 bg-gradient-to-b from-neutral-900/40 to-transparent">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="
|
||||
p-4 rounded-xl
|
||||
bg-neutral-900/80 border border-neutral-800/70
|
||||
group-hover:border-blue-800/50 group-hover:bg-blue-950/20
|
||||
transition-all duration-300
|
||||
">
|
||||
<item.icon className="
|
||||
w-8 h-8 text-neutral-400
|
||||
group-hover:text-blue-400/90
|
||||
transition-colors duration-300
|
||||
" />
|
||||
{/* Content Wrapper */}
|
||||
<div className="p-6 sm:p-8 flex flex-col h-full relative z-10">
|
||||
|
||||
{/* Header Section */}
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className="
|
||||
w-12 h-12 sm:w-14 sm:h-14 rounded-2xl
|
||||
bg-zinc-900/80 border border-white/10
|
||||
flex items-center justify-center
|
||||
group-hover:scale-110 group-hover:border-cyan-500/30 group-hover:bg-cyan-950/30
|
||||
transition-all duration-500
|
||||
">
|
||||
<item.icon className="w-6 h-6 sm:w-7 sm:h-7 text-zinc-400 group-hover:text-cyan-400 transition-colors duration-300" />
|
||||
</div>
|
||||
|
||||
{/* Corner Action Icon */}
|
||||
<div className="opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
|
||||
<ArrowUpRight className="w-5 h-5 text-zinc-500 group-hover:text-cyan-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold text-white tracking-tight leading-tight">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-xl sm:text-2xl font-bold text-white tracking-tight mb-1 group-hover:text-cyan-100 transition-colors">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm text-neutral-500 mt-1 font-medium">
|
||||
<p className="text-xs sm:text-sm font-medium text-cyan-600/80 uppercase tracking-wider">
|
||||
{item.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Uncomment this block if you want to bring back the card details */}
|
||||
{/*
|
||||
<div className="p-7 space-y-7">
|
||||
<p className="text-neutral-300 leading-relaxed text-[15px] font-light">
|
||||
{item.description}
|
||||
</p>
|
||||
<p className="text-sm sm:text-base text-zinc-400 leading-relaxed mb-6 flex-grow">
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 text-sm">
|
||||
{item.highlights.map((highlight, i) => (
|
||||
<div key={i} className="flex items-center gap-2.5">
|
||||
<div className="
|
||||
w-1.5 h-1.5 rounded-full
|
||||
bg-neutral-600 group-hover:bg-blue-500/70
|
||||
transition-colors duration-300
|
||||
" />
|
||||
<span className="text-neutral-200 font-medium">{highlight}</span>
|
||||
{/* Divider */}
|
||||
<div className="h-px w-full bg-white/5 mb-6 group-hover:bg-cyan-500/20 transition-colors duration-500" />
|
||||
|
||||
{/* Specs Grid (Compact) */}
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{item.highlights.slice(0, 4).map((highlight, i) => ( // Show first 4
|
||||
<div key={i} className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-cyan-500/70 mt-0.5 shrink-0" />
|
||||
<span className="text-xs text-zinc-300 font-medium">{highlight}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2.5">
|
||||
{item.specs.map((spec, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="
|
||||
px-4 py-1.5 text-xs font-medium
|
||||
rounded-lg bg-neutral-900/60 border border-neutral-800/60
|
||||
text-neutral-400 group-hover:text-neutral-200
|
||||
transition-colors duration-300
|
||||
"
|
||||
>
|
||||
{spec}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{/* Technical Chips */}
|
||||
<div className="flex flex-wrap gap-2 pt-2">
|
||||
{item.specs.slice(0, 3).map((spec, i) => (
|
||||
<span key={i} className="
|
||||
px-2.5 py-1 rounded-md text-[10px] uppercase tracking-wide font-bold
|
||||
bg-white/5 border border-white/5 text-zinc-500
|
||||
group-hover:border-cyan-500/20 group-hover:text-cyan-400/80 group-hover:bg-cyan-950/20
|
||||
transition-all duration-300
|
||||
">
|
||||
{spec}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="
|
||||
w-full mt-4 py-4
|
||||
text-sm font-semibold tracking-wide
|
||||
text-neutral-200 bg-neutral-900/70 border border-neutral-800/70
|
||||
rounded-xl hover:bg-neutral-800/90 hover:border-neutral-700/70
|
||||
hover:text-white active:scale-[0.98]
|
||||
transition-all duration-300
|
||||
flex items-center justify-center gap-2.5
|
||||
"
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
View Technical Documentation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
*/}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DevicesPage() {
|
||||
export default function DeviceShowcase() {
|
||||
const devices: DeviceItem[] = [
|
||||
{
|
||||
title: "Multi-Vital Monitor",
|
||||
subtitle: "Temperature • SpO₂ • Blood Pressure",
|
||||
description:
|
||||
"Simultaneous clinical-grade measurement of core vital signs with validated algorithms and secure wireless pairing.",
|
||||
highlights: ["±0.1 °C accuracy", "±2% SpO₂", "±3 mmHg NIBP"],
|
||||
specs: ["Bluetooth 5.2 LE", "IEC 60601", "24 h operation", "IP54"],
|
||||
subtitle: "Hemodynamics",
|
||||
description: "Clinical-grade core vital signs measurement with validated algorithms and secure wireless pairing.",
|
||||
highlights: ["±0.1°C accuracy", "±2% SpO₂", "±3 mmHg NIBP", "Resp. Rate"],
|
||||
specs: ["BT 5.2 LE", "IEC 60601", "IP54"],
|
||||
icon: Activity,
|
||||
},
|
||||
{
|
||||
title: "3-in-1 Metabolic Analyzer",
|
||||
subtitle: "Glucose • Hemoglobin • Hematocrit",
|
||||
description:
|
||||
"Fast point-of-care testing from a single micro-sample with temperature compensation and result validation.",
|
||||
highlights: ["5–10 sec result", "±5 mg/dL glucose", "Lab-comparable Hb/HCT"],
|
||||
specs: ["Micro-volume sample", "Strip detection", "EHR integration", "Auto calibration"],
|
||||
title: "Metabolic Analyzer",
|
||||
subtitle: "Blood Chemistry",
|
||||
description: "Fast point-of-care testing from a single micro-sample with temperature compensation.",
|
||||
highlights: ["5s Result", "±5 mg/dL Glu", "HCT Corrected", "Ketone Check"],
|
||||
specs: ["Micro-fluidic", "NFC Sync", "Auto-Cal"],
|
||||
icon: Droplet,
|
||||
},
|
||||
{
|
||||
title: "Digital Urine Analyzer",
|
||||
subtitle: "Multi-parameter Urinalysis",
|
||||
description:
|
||||
"Automated reading and standardized interpretation of urine test strips with digital result storage.",
|
||||
highlights: ["10–14 parameters", "< 60 seconds", "Trend tracking", "PDF export"],
|
||||
specs: ["High-resolution optics", "AI strip analysis", "Bluetooth sync", "Batch processing"],
|
||||
icon: Droplet,
|
||||
},
|
||||
{
|
||||
title: "Fetal Heart Doppler",
|
||||
subtitle: "Professional Maternity Monitoring",
|
||||
description:
|
||||
"High-sensitivity fetal heart rate detection with audio output, waveform display and event recording.",
|
||||
highlights: ["50–240 bpm range", "3 MHz probe", "Water-resistant", "Extended battery"],
|
||||
specs: ["Clinical validation", "Bluetooth audio", "Waveform visualization", "Event marking"],
|
||||
title: "Fetal Doppler",
|
||||
subtitle: "Maternity Care",
|
||||
description: "High-sensitivity fetal heart rate detection with audio output and waveform recording.",
|
||||
highlights: ["50–240 BPM", "3 MHz Probe", "Auto-Record", "Noise Cancel"],
|
||||
specs: ["Ultrasonic", "FDA Cleared", "Type-C"],
|
||||
icon: Baby,
|
||||
},
|
||||
{
|
||||
title: "Clinical Precision Scale",
|
||||
subtitle: "Weight & Body Composition",
|
||||
description:
|
||||
"High-accuracy weighing platform with body composition analysis suitable for clinical follow-up.",
|
||||
highlights: ["200 kg capacity", "50 g resolution", "Fat / Muscle / Water", "Multi-user support"],
|
||||
specs: ["Bioelectrical impedance", "Tempered glass", "Bluetooth LE", "Stable base"],
|
||||
title: "Precision Scale",
|
||||
subtitle: "Biometrics",
|
||||
description: "High-accuracy weighing platform with body composition analysis for clinical follow-up.",
|
||||
highlights: ["50g Resolution", "Bio-Impedance", "Muscle/Fat %", "Water Mass"],
|
||||
specs: ["Tempered Glass", "Strain Gauge", "WiFi"],
|
||||
icon: Scale,
|
||||
},
|
||||
{
|
||||
title: "Digital Otoscope",
|
||||
subtitle: "ENT Imaging",
|
||||
description: "HD video capture of the ear canal and tympanic membrane with AI diagnostic support.",
|
||||
highlights: ["1080p Video", "100x Zoom", "Auto-Focus", "LED Ring"],
|
||||
specs: ["WiFi Direct", "Macro Lens", "IP67"],
|
||||
icon: Zap, // Using Zap as placeholder for Otoscope/Light
|
||||
},
|
||||
{
|
||||
title: "ECG Patch",
|
||||
subtitle: "Cardiology",
|
||||
description: "Wearable continuous heart monitoring with arrhythmia detection and cloud sync.",
|
||||
highlights: ["7-Day Battery", "Lead II", "Afib Alert", "Waterproof"],
|
||||
specs: ["Bluetooth 5.0", "Medical Adhesive", "24/7"],
|
||||
icon: Cpu,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen text-neutral-100 relative overflow-hidden bg-[#0a0e17]">
|
||||
{/* ====================== Bluetooth Animated Background ====================== */}
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
{/* Dark moody base gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#0a0e17] via-[#0d1525] to-[#0a0e1a]" />
|
||||
<div className="min-h-screen text-zinc-100 relative bg-[#05080f] font-sans selection:bg-cyan-500/30">
|
||||
|
||||
{/* ====================== Animated Background Layers ====================== */}
|
||||
<div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
|
||||
{/* Base Gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-[#05080f] via-[#090c15] to-[#05080f]" />
|
||||
|
||||
{/* Radial Center Glow */}
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[800px] bg-[radial-gradient(circle_at_center,rgba(6,182,212,0.08),transparent_60%)]" />
|
||||
|
||||
{/* Pulsing Bluetooth radar-style rings */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
{/* Largest – slowest */}
|
||||
<motion.div
|
||||
className="absolute rounded-full border border-blue-500/8"
|
||||
style={{ width: "min(140vmin, 1800px)", height: "min(140vmin, 1800px)" }}
|
||||
animate={{
|
||||
scale: [0.65, 1.1, 0.65],
|
||||
opacity: [0.02, 0.09, 0.02],
|
||||
}}
|
||||
transition={{
|
||||
duration: 18,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Medium */}
|
||||
<motion.div
|
||||
className="absolute rounded-full border border-blue-500/10"
|
||||
style={{ width: "min(100vmin, 1300px)", height: "min(100vmin, 1300px)" }}
|
||||
animate={{
|
||||
scale: [0.7, 1.15, 0.7],
|
||||
opacity: [0.03, 0.13, 0.03],
|
||||
}}
|
||||
transition={{
|
||||
duration: 14,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
delay: 3,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Smallest + sharper */}
|
||||
<motion.div
|
||||
className="absolute rounded-full border-2 border-blue-400/20"
|
||||
style={{ width: "min(60vmin, 800px)", height: "min(60vmin, 800px)" }}
|
||||
animate={{
|
||||
scale: [0.85, 1.4, 0.85],
|
||||
opacity: [0.06, 0.22, 0.06],
|
||||
}}
|
||||
transition={{
|
||||
duration: 9,
|
||||
repeat: Infinity,
|
||||
ease: "easeOut",
|
||||
delay: 1.5,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Very faint core glow */}
|
||||
<motion.div
|
||||
className="absolute rounded-full bg-blue-600/5 blur-xl"
|
||||
style={{ width: "min(20vmin, 260px)", height: "min(20vmin, 260px)" }}
|
||||
animate={{ scale: [1, 1.4, 1], opacity: [0.15, 0.35, 0.15] }}
|
||||
transition={{ duration: 7, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
{/* Animated Rings (Responsive Sizes) */}
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-30">
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 120, repeat: Infinity, ease: "linear" }}
|
||||
className="w-[800px] h-[800px] border border-cyan-900/20 rounded-full border-dashed"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{ rotate: -360 }}
|
||||
transition={{ duration: 80, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute w-[600px] h-[600px] border border-cyan-500/5 rounded-full"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.1, 1], opacity: [0.1, 0.3, 0.1] }}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="absolute w-[400px] h-[400px] bg-cyan-500/5 rounded-full blur-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Subtle rotating signal arcs */}
|
||||
<motion.div
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 90, repeat: Infinity, ease: "linear" }}
|
||||
>
|
||||
<div className="relative w-[min(80vmin,1000px)] h-[min(80vmin,1000px)]">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-400/8 to-transparent rotate-12 blur-md opacity-60" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500/6 to-transparent -rotate-18 blur-lg opacity-50" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Floating particles */}
|
||||
{/* Floating Particles */}
|
||||
<div className="absolute inset-0">
|
||||
{[...Array(16)].map((_, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="absolute w-1.5 h-1.5 md:w-2 md:h-2 bg-blue-400/40 rounded-full blur-[1px]"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
y: [0, -180 - Math.random() * 140, -360],
|
||||
opacity: [0, 0.7, 0],
|
||||
x: Math.sin(i * 0.9) * 60 + Math.cos(i * 1.4) * 30,
|
||||
}}
|
||||
transition={{
|
||||
duration: 12 + Math.random() * 10,
|
||||
repeat: Infinity,
|
||||
delay: i * 0.6 + Math.random() * 2,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
style={{
|
||||
left: `${8 + ((i * 7.3) % 84)}%`,
|
||||
top: "85%",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
{[...Array(12)].map((_, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="absolute w-1 h-1 bg-cyan-400/40 rounded-full"
|
||||
style={{
|
||||
top: `${Math.random() * 100}%`,
|
||||
left: `${Math.random() * 100}%`,
|
||||
}}
|
||||
animate={{
|
||||
y: [0, -100],
|
||||
opacity: [0, 1, 0],
|
||||
scale: [0, 1.5, 0]
|
||||
}}
|
||||
transition={{
|
||||
duration: Math.random() * 5 + 5,
|
||||
repeat: Infinity,
|
||||
delay: Math.random() * 5,
|
||||
ease: "linear"
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ====================== Main Content ====================== */}
|
||||
<div className="relative z-10">
|
||||
<div className="relative z-10 flex flex-col min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
<main className="pt-28 md:pt-40 pb-28 md:pb-40">
|
||||
<div className="max-w-7xl mx-auto px-5 sm:px-7 lg:px-10">
|
||||
{/* Header */}
|
||||
<div className="text-center max-w-4xl mx-auto mb-20 md:mb-28">
|
||||
<div className="
|
||||
inline-flex items-center gap-3 px-6 py-3
|
||||
rounded-full border border-neutral-800/70
|
||||
bg-neutral-950/50 backdrop-blur-lg
|
||||
text-neutral-300 text-sm font-medium mb-8
|
||||
">
|
||||
<Bluetooth className="w-5 h-5 text-blue-400/80" />
|
||||
Connected Clinical Peripherals
|
||||
</div>
|
||||
<main className="flex-grow pt-32 pb-32 sm:pt-40 sm:pb-40">
|
||||
{/* Container limits width, scales for 4K */}
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl 2xl:max-w-[1800px]">
|
||||
|
||||
{/* --- Hero Header --- */}
|
||||
<div className="flex flex-col items-center text-center max-w-4xl 2xl:max-w-5xl mx-auto mb-20 lg:mb-28">
|
||||
|
||||
{/* Badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-cyan-500/20 bg-cyan-950/10 backdrop-blur-md text-cyan-400 text-xs font-bold tracking-wider uppercase mb-8 shadow-[0_0_20px_-5px_rgba(6,182,212,0.3)]"
|
||||
>
|
||||
<Bluetooth className="w-4 h-4" />
|
||||
<span>IoT Ecosystem</span>
|
||||
</motion.div>
|
||||
|
||||
<h1 className="
|
||||
text-4xl sm:text-5xl md:text-6xl lg:text-7xl
|
||||
font-semibold tracking-tight leading-[1.05]
|
||||
text-white
|
||||
">
|
||||
Diagnostic Hardware Suite
|
||||
</h1>
|
||||
{/* Title */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-bold tracking-tight text-white leading-[1.1] mb-6"
|
||||
>
|
||||
Clinical <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600">Hardware</span> Suite
|
||||
</motion.h1>
|
||||
|
||||
<p className="mt-6 text-lg md:text-xl text-neutral-400 leading-relaxed max-w-3xl mx-auto">
|
||||
Reliable, standards-compliant devices designed for hospitals, clinics, telehealth and institutional care environments.
|
||||
</p>
|
||||
{/* Subtitle */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-lg sm:text-xl 2xl:text-2xl text-zinc-400 max-w-2xl 2xl:max-w-3xl leading-relaxed"
|
||||
>
|
||||
Seamlessly connected diagnostic devices designed for accuracy, speed, and institutional interoperability.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
{/* Device cards grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 lg:gap-9">
|
||||
{/* --- Devices Grid --- */}
|
||||
{/* 1 col mobile, 2 col tablet, 3 col laptop, 4 col ultra-wide */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 lg:gap-8 2xl:gap-10">
|
||||
{devices.map((device, i) => (
|
||||
<DeviceCard key={device.title} item={device} index={i} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Compliance & security block */}
|
||||
{/* --- Bottom Feature: Security --- */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="
|
||||
mt-24 md:mt-32 p-8 md:p-12
|
||||
bg-neutral-950/60 backdrop-blur-xl
|
||||
border border-neutral-800/60 rounded-2xl
|
||||
text-center md:text-left
|
||||
shadow-[0_16px_48px_rgba(0,0,0,0.4)]
|
||||
"
|
||||
className="mt-32 2xl:mt-48"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row items-center gap-10 md:gap-14">
|
||||
<div className="
|
||||
relative overflow-hidden rounded-3xl
|
||||
bg-gradient-to-br from-zinc-900/80 to-zinc-950/80 backdrop-blur-xl
|
||||
border border-white/5
|
||||
p-8 md:p-12 lg:p-16
|
||||
flex flex-col lg:flex-row items-center gap-10 lg:gap-16
|
||||
">
|
||||
{/* Decoration */}
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-cyan-500/10 blur-[100px] pointer-events-none" />
|
||||
|
||||
<div className="
|
||||
p-6 md:p-8 rounded-2xl
|
||||
bg-neutral-900/70 border border-neutral-800/70
|
||||
shrink-0 w-20 h-20 sm:w-24 sm:h-24 rounded-3xl
|
||||
bg-gradient-to-br from-cyan-500/10 to-blue-500/10
|
||||
border border-cyan-500/20
|
||||
flex items-center justify-center
|
||||
shadow-[0_0_40px_-10px_rgba(6,182,212,0.2)]
|
||||
">
|
||||
<ShieldCheck className="w-12 h-12 md:w-14 md:h-14 text-neutral-400" />
|
||||
<ShieldCheck className="w-10 h-10 sm:w-12 sm:h-12 text-cyan-400" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-3xl md:text-4xl font-semibold text-white tracking-tight">
|
||||
Medical Standards & Data Security
|
||||
<div className="text-center lg:text-left space-y-4 max-w-4xl">
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white tracking-tight">
|
||||
Enterprise-Grade Compliance
|
||||
</h2>
|
||||
<p className="text-neutral-300 leading-relaxed text-lg max-w-3xl">
|
||||
Devices comply with IEC 60601, IEC 62304 and relevant regional regulations. All data transmission uses end-to-end encryption, device authentication, secure pairing and full audit logging.
|
||||
<p className="text-base sm:text-lg text-zinc-400 leading-relaxed">
|
||||
Built for the modern hospital. Our devices comply with <span className="text-cyan-200">IEC 60601</span> and <span className="text-cyan-200">HIPAA</span> standards.
|
||||
End-to-end encryption ensures patient data remains secure from the sensor to the cloud.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user