82 lines
3.9 KiB
TypeScript
82 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Activity, Bluetooth, Gauge, MonitorSmartphone } from "lucide-react";
|
|
|
|
const devices = [
|
|
{
|
|
title: "Vitals Monitor",
|
|
description: "Bluetooth-enabled real-time tracking of blood pressure, SpO2, and heart rate.",
|
|
icon: Activity,
|
|
color: "from-blue-500 to-cyan-400"
|
|
},
|
|
{
|
|
title: "Fetal Doppler",
|
|
description: "Hospital-grade fetal heart rate monitoring for remote maternity care.",
|
|
icon: Gauge,
|
|
color: "from-purple-500 to-pink-500"
|
|
},
|
|
{
|
|
title: "Smart Weight Scale",
|
|
description: "Advanced body composition analysis with automatic health profile syncing.",
|
|
icon: MonitorSmartphone,
|
|
color: "from-emerald-500 to-teal-400"
|
|
}
|
|
];
|
|
|
|
export default function DeviceShowcase() {
|
|
return (
|
|
<section id="devices" className="py-24 relative overflow-hidden">
|
|
<div className="container mx-auto px-6">
|
|
<div className="text-center max-w-3xl mx-auto mb-20 space-y-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-semibold mb-4">
|
|
<Bluetooth className="w-4 h-4" />
|
|
<span>Smart Peripherals</span>
|
|
</div>
|
|
<h2 className="text-4xl md:text-6xl font-black tracking-tighter">
|
|
A Connected <span className="text-gradient">Hardware</span> Ecosystem
|
|
</h2>
|
|
<p className="text-lg text-foreground/60 leading-relaxed">
|
|
Seamlessly bridge the gap between physical health and digital intelligence with our HIPAA-compliant Bluetooth medical devices.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{devices.map((device, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: i * 0.1 }}
|
|
whileHover={{ y: -10 }}
|
|
className="glass p-8 rounded-[2rem] border-white/5 group relative overflow-hidden"
|
|
>
|
|
<div className={`absolute -top-24 -right-24 w-48 h-48 bg-gradient-to-br ${device.color} opacity-10 blur-3xl group-hover:opacity-20 transition-opacity`} />
|
|
|
|
<div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center mb-8 border border-white/10 group-hover:scale-110 transition-transform">
|
|
<device.icon className="w-8 h-8 text-primary" />
|
|
</div>
|
|
|
|
<h3 className="text-2xl font-bold mb-4">{device.title}</h3>
|
|
<p className="text-foreground/60 leading-relaxed mb-6">
|
|
{device.description}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-2 text-primary font-bold text-sm tracking-widest uppercase opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span>Explore Tech</span>
|
|
<Bluetooth className="w-4 h-4" />
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|