351 lines
15 KiB
TypeScript
351 lines
15 KiB
TypeScript
"use client";
|
|
|
|
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 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" }
|
|
]
|
|
}
|
|
];
|
|
|
|
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>
|
|
|
|
<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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
);
|
|
} |