UI design Updated
This commit is contained in:
@@ -1,81 +1,351 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Activity, Bluetooth, Gauge, MonitorSmartphone } from "lucide-react";
|
||||
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
|
||||
import { Bluetooth, BrainCircuit, Cloud, Zap, Shield, Radio, CheckCircle2, ArrowRight } from "lucide-react";
|
||||
import { useState } from "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"
|
||||
}
|
||||
const technologies = [
|
||||
{
|
||||
title: "Bluetooth Devices",
|
||||
description: "Seamlessly connect medical-grade IoT devices with enterprise-level security and real-time data synchronization.",
|
||||
icon: Bluetooth,
|
||||
id: "bluetooth",
|
||||
features: [
|
||||
{ label: "Auto-Pairing", icon: Zap },
|
||||
{ label: "AES-256 Security", icon: Shield },
|
||||
{ label: "Low Energy Mode", icon: Radio }
|
||||
],
|
||||
metrics: [
|
||||
{ value: "50+", label: "Connected Devices" },
|
||||
{ value: "99.9%", label: "Reliability" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "AI Agents",
|
||||
description: "Intelligent automation powered by advanced machine learning models for predictive analytics and clinical decision support.",
|
||||
icon: BrainCircuit,
|
||||
id: "ai-agents",
|
||||
features: [
|
||||
{ label: "Pattern Recognition", icon: BrainCircuit },
|
||||
{ label: "Predictive Analytics", icon: Zap },
|
||||
{ label: "Auto-Learning", icon: Radio }
|
||||
],
|
||||
metrics: [
|
||||
{ value: "98.5%", label: "Accuracy Rate" },
|
||||
{ value: "<100ms", label: "Response Time" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Cloud Management",
|
||||
description: "Enterprise cloud infrastructure with multi-region redundancy, automated scaling, and comprehensive data governance.",
|
||||
icon: Cloud,
|
||||
id: "cloud",
|
||||
features: [
|
||||
{ label: "Multi-Region", icon: Cloud },
|
||||
{ label: "Auto-Scaling", icon: Zap },
|
||||
{ label: "HIPAA Compliant", icon: Shield }
|
||||
],
|
||||
metrics: [
|
||||
{ value: "99.99%", label: "Uptime SLA" },
|
||||
{ value: "Global", label: "Coverage" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
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>
|
||||
interface Technology {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||||
id: string;
|
||||
features: Array<{ label: string; icon: React.ComponentType<React.SVGProps<SVGSVGElement>> }>;
|
||||
metrics: Array<{ value: string; label: string }>;
|
||||
}
|
||||
|
||||
function TechCard({ tech, i }: { tech: Technology; i: number }) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const x = useMotionValue(0);
|
||||
const y = useMotionValue(0);
|
||||
|
||||
const mouseXSpring = useSpring(x, { stiffness: 300, damping: 30 });
|
||||
const mouseYSpring = useSpring(y, { stiffness: 300, damping: 30 });
|
||||
|
||||
const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], ["8deg", "-8deg"]);
|
||||
const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], ["-8deg", "8deg"]);
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const width = rect.width;
|
||||
const height = rect.height;
|
||||
const mouseX = e.clientX - rect.left;
|
||||
const mouseY = e.clientY - rect.top;
|
||||
const xPct = mouseX / width - 0.5;
|
||||
const yPct = mouseY / height - 0.5;
|
||||
x.set(xPct);
|
||||
y.set(yPct);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
x.set(0);
|
||||
y.set(0);
|
||||
setIsHovered(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: i * 0.15, ease: "easeOut" }}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
style={{
|
||||
rotateX,
|
||||
rotateY,
|
||||
transformStyle: "preserve-3d",
|
||||
}}
|
||||
className="relative group cursor-pointer"
|
||||
>
|
||||
{/* Subtle Glow */}
|
||||
<motion.div
|
||||
animate={{
|
||||
opacity: isHovered ? 0.15 : 0.05,
|
||||
scale: isHovered ? 1.05 : 1
|
||||
}}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="absolute -inset-4 bg-white/10 rounded-[3rem] blur-3xl"
|
||||
/>
|
||||
|
||||
{/* Card Container */}
|
||||
<div className="relative rounded-[2.5rem] bg-zinc-950/50 backdrop-blur-xl border border-white/10 overflow-hidden hover:border-white/20 transition-all duration-500">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
|
||||
<div className="absolute inset-0 opacity-[0.015]" style={{
|
||||
backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
|
||||
backgroundSize: '30px 30px'
|
||||
}} />
|
||||
|
||||
<div className="relative p-8 lg:p-10" style={{ transform: "translateZ(50px)" }}>
|
||||
{/* Icon Section */}
|
||||
<motion.div
|
||||
animate={{ y: isHovered ? -5 : 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="relative mb-8"
|
||||
>
|
||||
<div className="relative inline-flex items-center gap-4">
|
||||
<motion.div
|
||||
animate={{ scale: isHovered ? 1.1 : 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="w-16 h-16 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center backdrop-blur-sm group-hover:bg-white/10 group-hover:border-white/20 transition-all"
|
||||
>
|
||||
<tech.icon className="w-8 h-8 text-white" />
|
||||
</motion.div>
|
||||
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-green-500/10 border border-green-500/20">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
|
||||
<span className="text-[10px] text-green-400 font-bold uppercase tracking-wider">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-4 mb-8">
|
||||
<h3 className="text-2xl sm:text-3xl font-black tracking-tight text-white">
|
||||
{tech.title}
|
||||
</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm font-light">
|
||||
{tech.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="space-y-3 mb-8">
|
||||
{tech.features.map((feature, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.15 + idx * 0.1 }}
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<div className="p-1.5 rounded-md bg-white/5 border border-white/10">
|
||||
<feature.icon className="w-3.5 h-3.5 text-zinc-400" />
|
||||
</div>
|
||||
<span className="text-xs text-zinc-500 font-semibold tracking-wide">
|
||||
{feature.label}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Metrics */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-6 p-4 rounded-2xl bg-white/[0.02] border border-white/5">
|
||||
{tech.metrics.map((metric, idx) => (
|
||||
<div key={idx} className="text-center">
|
||||
<p className="text-xl font-black text-white mb-1">{metric.value}</p>
|
||||
<p className="text-[10px] text-zinc-500 font-semibold uppercase tracking-wider">{metric.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Bottom Action */}
|
||||
<div className="flex items-center justify-between pt-6 border-t border-white/5 group-hover:border-white/10 transition-colors">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-zinc-600" />
|
||||
<span className="text-xs text-zinc-600 font-semibold uppercase tracking-wider">
|
||||
Integrated
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-6xl font-black tracking-tighter">
|
||||
A Connected <span className="text-gradient">Hardware</span> Ecosystem
|
||||
|
||||
<motion.div
|
||||
animate={{
|
||||
x: isHovered ? 5 : 0
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="flex items-center gap-2 text-zinc-500 group-hover:text-white transition-colors"
|
||||
>
|
||||
<span className="text-sm font-semibold">Learn More</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Subtle Accent */}
|
||||
<motion.div
|
||||
animate={{
|
||||
scaleX: isHovered ? 1 : 0,
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="absolute bottom-0 left-0 right-0 h-px bg-white/20 origin-left"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TechShowcase() {
|
||||
return (
|
||||
<section id="technologies" className="relative py-20 md:py-32 lg:py-40 overflow-hidden">
|
||||
{/* Ambient Effects - More Subtle */}
|
||||
<div className="absolute top-1/3 left-0 w-[500px] h-[500px] bg-blue-500/5 rounded-full blur-[120px]" />
|
||||
<div className="absolute bottom-1/3 right-0 w-[500px] h-[500px] bg-purple-500/5 rounded-full blur-[120px]" />
|
||||
|
||||
{/* Dot Grid Pattern */}
|
||||
<div className="absolute inset-0 opacity-[0.02]" style={{
|
||||
backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px)`,
|
||||
backgroundSize: '40px 40px'
|
||||
}} />
|
||||
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header Section */}
|
||||
<div className="max-w-5xl mb-16 md:mb-24 space-y-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-white/5 backdrop-blur-xl border border-white/10 shadow-lg">
|
||||
<div className="relative">
|
||||
<Zap className="w-4 h-4 text-white" />
|
||||
<div className="absolute inset-0 bg-white/20 blur-md animate-pulse" />
|
||||
</div>
|
||||
<span className="text-[11px] font-bold tracking-[0.3em] uppercase text-zinc-300">
|
||||
Technology Infrastructure
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h2 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black leading-[0.9] tracking-tighter text-white">
|
||||
Enterprise
|
||||
<br />
|
||||
<span className="text-zinc-600">Technology Stack</span>
|
||||
</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.
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-lg sm:text-xl lg:text-2xl text-zinc-400 leading-relaxed max-w-3xl font-light">
|
||||
Cutting-edge infrastructure powering{" "}
|
||||
<span className="text-white font-medium">intelligent healthcare delivery</span> through{" "}
|
||||
<span className="text-white font-medium">seamless device integration</span> and{" "}
|
||||
<span className="text-white font-medium">autonomous AI systems</span>.
|
||||
</p>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex flex-wrap gap-8 pt-4">
|
||||
{[
|
||||
{ icon: Zap, label: "Processing Speed", value: "Real-time" },
|
||||
{ icon: Shield, label: "Security", value: "Enterprise" },
|
||||
{ icon: Cloud, label: "Infrastructure", value: "Global" }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 + i * 0.1 }}
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<div className="p-2.5 rounded-lg bg-white/5 border border-white/10">
|
||||
<stat.icon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xl font-black text-white">{stat.value}</p>
|
||||
<p className="text-xs text-zinc-500 font-semibold uppercase tracking-wider">{stat.label}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</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>
|
||||
{/* Technology Cards Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||
{technologies.map((tech, i) => (
|
||||
<TechCard key={tech.id} tech={tech} i={i} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="mt-16 md:mt-24 text-center space-y-6"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<p className="text-zinc-400 text-base font-medium">
|
||||
Ready to integrate our technology stack?
|
||||
</p>
|
||||
<p className="text-zinc-600 text-sm max-w-2xl mx-auto">
|
||||
Our engineering team will work with you to customize and deploy the perfect solution for your healthcare infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="px-8 py-4 rounded-full bg-white text-black font-bold text-sm tracking-wide uppercase shadow-[0_0_30px_rgba(255,255,255,0.1)] hover:shadow-[0_0_40px_rgba(255,255,255,0.2)] transition-all"
|
||||
>
|
||||
Schedule Demo
|
||||
</motion.button>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="px-8 py-4 rounded-full bg-white/5 border border-white/10 text-white font-bold text-sm tracking-wide uppercase hover:bg-white/10 hover:border-white/20 transition-all"
|
||||
>
|
||||
View Documentation
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user