prathiyuman/Skyheal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI design Updated

Browse Source
This commit is contained in:
Prathiyuman
2026-01-22 15:43:18 +05:30
parent af2a96c035
commit 5cd7d95904
18 changed files with 2383 additions and 812 deletions
Download Patch File Download Diff File Expand all files Collapse all files

444
app/devices/page.tsx
View File

@@ -1,108 +1,360 @@
"use client";
import Navbar from "../components/layout/Navbar";
import DNAHeroBackground from "../components/canvas/DNAHeroBackground";
import { motion } from "framer-motion";
import { Activity, Bluetooth, ShieldCheck, Zap } from "lucide-react";
import Footer from "../components/layout/Footer";
import { motion } from "framer-motion";
import {
Thermometer,
Activity,
HeartPulse,
Droplet,
Baby,
Scale,
Bluetooth,
ShieldCheck,
FileText,
} from "lucide-react";
interface DeviceItem {
title: string;
subtitle: string;
description: string;
highlights: string[];
specs: string[];
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
}
function DeviceCard({ item, index }: { item: DeviceItem; index: number }) {
return (
<motion.div
initial={{ opacity: 0, y: 40 }}
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
`}
>
{/* 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" />
<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
" />
</div>
<div>
<h3 className="text-2xl font-semibold text-white tracking-tight leading-tight">
{item.title}
</h3>
<p className="text-sm text-neutral-500 mt-1 font-medium">
{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>
<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>
</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>
<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>
*/}
</motion.div>
);
}
export default function DevicesPage() {
return (
<div className="relative min-h-screen">
<DNAHeroBackground />
<Navbar />
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"],
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"],
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"],
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"],
icon: Scale,
},
];
<main className="relative z-10 pt-40 pb-24">
<div className="container mx-auto px-6">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="max-w-4xl"
>
<h1 className="text-5xl md:text-8xl font-black tracking-tighter mb-8">
Medical <span className="text-gradient">Hardware</span>
</h1>
<p className="text-xl text-foreground/60 leading-relaxed mb-12 max-w-2xl">
Precision-engineered Bluetooth vitals monitors and maternity care tools. Designed for reliability, accuracy, and absolute security.
</p>
</motion.div>
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]" />
{/* Device Detailed Grid */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mt-20">
{[
{
title: "Vitals Hub X1",
feature: "Multi-Parameter Monitoring",
desc: "Measures Blood Pressure, Heart Rate, SpO2, and Body Temperature in one sleek device.",
specs: ["Bluetooth 5.2", "48h Battery", "Cloud Sync"]
},
{
title: "Fetal Doppler Pro",
feature: "Maternity Care",
desc: "High-sensitivity fetal heart rate detection with ultra-sound noise reduction technology.",
specs: ["OLED Display", "Built-in Speaker", "App Integration"]
}
].map((item, i) => (
<motion.div
key={i}
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
className="glass p-12 rounded-[3rem] border-white/5 space-y-8"
>
<div className="flex justify-between items-start">
<div className="space-y-2">
<span className="text-primary font-bold tracking-widest uppercase text-xs">{item.feature}</span>
<h2 className="text-4xl font-bold">{item.title}</h2>
</div>
<div className="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center">
<Activity className="w-8 h-8 text-primary" />
</div>
</div>
<p className="text-lg text-foreground/60">{item.desc}</p>
{/* 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",
}}
/>
<div className="flex flex-wrap gap-4">
{item.specs.map((spec, j) => (
<span key={j} className="px-4 py-2 rounded-full bg-white/5 border border-white/5 text-sm">
{spec}
</span>
))}
</div>
{/* 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,
}}
/>
<button className="w-full bg-white text-black py-4 rounded-2xl font-bold hover:bg-zinc-200 transition-colors">
View Specifications
</button>
</motion.div>
))}
</div>
{/* 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,
}}
/>
{/* Compliance Banner */}
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
className="mt-32 p-12 glass rounded-[3rem] border-accent/20 flex flex-col md:flex-row items-center justify-between gap-12"
>
<div className="space-y-4">
<div className="flex items-center gap-3">
<ShieldCheck className="w-8 h-8 text-accent" />
<h3 className="text-3xl font-bold italic">HIPAA Verified Hardware</h3>
</div>
<p className="text-foreground/60 max-w-xl">
Every device in our ecosystem undergoes rigorous security audits. Data transmission is encrypted from the sensor to the cloud.
</p>
</div>
<div className="flex gap-4">
<div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center">
<Bluetooth className="w-8 h-8 text-primary" />
</div>
<div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center">
<Zap className="w-8 h-8 text-yellow-500" />
</div>
</div>
</motion.div>
</div>
</main>
<Footer />
{/* 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" }}
/>
</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 */}
<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%",
}}
/>
))}
</div>
</div>
{/* ====================== Main Content ====================== */}
<div className="relative z-10">
<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>
<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>
<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>
</div>
{/* Device cards grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 lg:gap-9">
{devices.map((device, i) => (
<DeviceCard key={device.title} item={device} index={i} />
))}
</div>
{/* Compliance & security block */}
<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)]
"
>
<div className="flex flex-col md:flex-row items-center gap-10 md:gap-14">
<div className="
p-6 md:p-8 rounded-2xl
bg-neutral-900/70 border border-neutral-800/70
">
<ShieldCheck className="w-12 h-12 md:w-14 md:h-14 text-neutral-400" />
</div>
<div className="space-y-4">
<h2 className="text-3xl md:text-4xl font-semibold text-white tracking-tight">
Medical Standards & Data Security
</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>
</div>
</div>
</motion.div>
</div>
</main>
<Footer />
</div>
</div>
);
}