102 lines
5.0 KiB
TypeScript
102 lines
5.0 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Brain, Activity, Search, ShieldCheck } from "lucide-react";
|
|
|
|
const features = [
|
|
{
|
|
title: "Precision Analysis",
|
|
description: "Deep learning models trained on millions of clinical cases.",
|
|
icon: Search
|
|
},
|
|
{
|
|
title: "Real-time Insight",
|
|
description: "Instantaneous diagnostic suggestions based on symptoms.",
|
|
icon: Activity
|
|
},
|
|
{
|
|
title: "Validated Models",
|
|
description: "Clinically validated AI ensuring high accuracy rates.",
|
|
icon: ShieldCheck
|
|
}
|
|
];
|
|
|
|
export default function AIDiagnosis() {
|
|
return (
|
|
<section id="diagnosis" className="py-24 bg-primary/5 relative">
|
|
<div className="container mx-auto px-6">
|
|
<div className="flex flex-col md:flex-row-reverse items-center gap-16">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="flex-1 space-y-8"
|
|
>
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-secondary/10 border border-secondary/20 text-secondary text-sm font-semibold">
|
|
<Brain className="w-4 h-4" />
|
|
<span>Advanced Analytics</span>
|
|
</div>
|
|
|
|
<h2 className="text-4xl md:text-5xl font-bold leading-tight">
|
|
AI-Powered <span className="text-gradient">Diagnosis</span> with Unmatched Precision
|
|
</h2>
|
|
|
|
<p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
|
|
Elevate your diagnostic accuracy with Skyheal's clinical brain. Our AI analyzes patient data, medical history, and current symptoms to provide actionable insights.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
{features.map((f, i) => (
|
|
<div key={i} className="glass p-6 rounded-2xl group hover:border-primary/50 transition-colors">
|
|
<f.icon className="w-8 h-8 text-primary mb-4 group-hover:scale-110 transition-transform" />
|
|
<h3 className="font-bold text-lg mb-2">{f.title}</h3>
|
|
<p className="text-sm text-foreground/60">{f.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="flex-1"
|
|
>
|
|
<div className="relative group">
|
|
<div className="absolute inset-0 bg-secondary/10 rounded-full blur-[100px] animate-pulse-slow" />
|
|
<div className="relative glass aspect-square rounded-[3rem] overflow-hidden flex items-center justify-center p-12 border-white/5">
|
|
<div className="absolute inset-0 opacity-20 pointer-events-none">
|
|
<div className="h-full w-full bg-[radial-gradient(#3b82f6_1px,transparent_1px)] [background-size:20px_20px]" />
|
|
</div>
|
|
<motion.div
|
|
animate={{
|
|
scale: [1, 1.05, 1],
|
|
rotate: [0, 5, -5, 0]
|
|
}}
|
|
transition={{ repeat: Infinity, duration: 8 }}
|
|
>
|
|
<Brain className="w-48 h-48 text-primary drop-shadow-[0_0_80px_rgba(59,130,246,0.5)]" />
|
|
</motion.div>
|
|
|
|
{/* Orbital Elements */}
|
|
{[...Array(3)].map((_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
animate={{ rotate: 360 }}
|
|
transition={{ repeat: Infinity, duration: 10 + i * 5, ease: "linear" }}
|
|
className="absolute border border-white/5 rounded-full"
|
|
style={{
|
|
width: `${200 + i * 80}px`,
|
|
height: `${200 + i * 80}px`
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|