UI design Updated
This commit is contained in:
@@ -1,91 +1,167 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Smartphone, ShieldCheck, HeartPulse, Fingerprint } from "lucide-react";
|
||||
import { motion, useScroll, useTransform, type Variants } from "framer-motion";
|
||||
import { Mic, CheckCircle2, ShieldCheck, Zap, Activity } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
|
||||
export default function AppEcosystem() {
|
||||
return (
|
||||
<section className="py-24 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col md:flex-row-reverse items-center gap-20">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1 space-y-10"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-sm font-semibold">
|
||||
<Smartphone className="w-4 h-4" />
|
||||
<span>Mobile Intelligence</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-6xl font-black tracking-tighter">
|
||||
Health in your <span className="text-gradient">Pocket</span>
|
||||
</h2>
|
||||
<p className="text-xl text-foreground/60 leading-relaxed max-w-2xl">
|
||||
Experience end-to-end healthcare with our companion mobile apps. Real-time data sync, encrypted messaging, and emergency alerts at your fingertips.
|
||||
</p>
|
||||
</div>
|
||||
export default function AIVoiceSoap() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{ icon: Fingerprint, title: "Biometric Security", text: "Secure access with FaceID and Fingerprint authentication." },
|
||||
{ icon: ShieldCheck, title: "HIPAA Certified", text: "Multi-layered encryption for all personal health information (PHI)." },
|
||||
{ icon: HeartPulse, title: "Live Streaming", text: "Instant vital data visualization from connected Bluetooth devices." }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex gap-6 group">
|
||||
<div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:bg-primary/20 transition-colors">
|
||||
<item.icon className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-extrabold text-lg">{item.title}</h4>
|
||||
<p className="text-foreground/50">{item.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ["start end", "end start"],
|
||||
});
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1"
|
||||
>
|
||||
<div className="relative mx-auto max-w-[300px]">
|
||||
{/* Phone Frame Mockup */}
|
||||
<div className="relative w-full aspect-[1/2] glass rounded-[3rem] p-4 border-white/20 shadow-[0_0_80px_rgba(59,130,246,0.2)] overflow-hidden">
|
||||
<div className="absolute top-0 inset-x-0 h-8 flex justify-center items-center">
|
||||
<div className="w-20 h-4 bg-black rounded-full" />
|
||||
</div>
|
||||
<div className="h-full w-full bg-zinc-900 rounded-[2.5rem] p-6 space-y-8 relative">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="space-y-1">
|
||||
<div className="h-2 w-16 bg-white/10 rounded-full" />
|
||||
<div className="h-3 w-24 bg-white/20 rounded-full" />
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-full bg-primary/20" />
|
||||
</div>
|
||||
const y = useTransform(scrollYProgress, [0, 0.4], [50, 0]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.25], [0, 1]);
|
||||
|
||||
<div className="aspect-square glass rounded-2xl p-6 flex items-center justify-center">
|
||||
<HeartPulse className="w-20 h-20 text-primary animate-pulse" />
|
||||
</div>
|
||||
const cardVariants: Variants = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: (custom: number) => ({
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 0.12 + custom * 0.14,
|
||||
duration: 0.65,
|
||||
ease: "easeOut",
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((_, i) => (
|
||||
<div key={i} className="h-12 bg-white/5 rounded-xl border border-white/5" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
const features = [
|
||||
{
|
||||
icon: Mic,
|
||||
title: "Natural Voice Capture",
|
||||
desc: "Speak freely — AI transcribes SOAP notes in real time with clinical accuracy.",
|
||||
color: "text-emerald-400",
|
||||
bg: "from-emerald-600/15 to-emerald-800/5",
|
||||
},
|
||||
{
|
||||
icon: Activity,
|
||||
title: "Context-Aware Intelligence",
|
||||
desc: "Understands medical terminology, patient history context & follow-up questions.",
|
||||
color: "text-blue-400",
|
||||
bg: "from-blue-600/15 to-blue-800/5",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Instant Structuring",
|
||||
desc: "Converts conversation to structured Subjective, Objective, Assessment, Plan format.",
|
||||
color: "text-indigo-400",
|
||||
bg: "from-indigo-600/15 to-indigo-800/5",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Secure & Compliant",
|
||||
desc: "End-to-end encryption, HIPAA/GDPR compliant voice processing & storage.",
|
||||
color: "text-cyan-400",
|
||||
bg: "from-cyan-600/15 to-cyan-800/5",
|
||||
},
|
||||
];
|
||||
|
||||
{/* Decorative Elements */}
|
||||
<div className="absolute -z-10 -bottom-10 -right-10 w-40 h-40 bg-accent/20 blur-[60px] rounded-full" />
|
||||
<div className="absolute -z-10 top-20 -left-20 w-48 h-48 bg-primary/20 blur-[60px] rounded-full" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
className="relative py-20 md:py-28 lg:py-36 overflow-hidden"
|
||||
>
|
||||
{/* Subtle ambient glows */}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-20 left-10 w-96 h-96 bg-emerald-600/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-10 right-10 w-80 h-80 bg-blue-600/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="container relative z-10 mx-auto px-5 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12 xl:gap-16 items-center">
|
||||
{/* Left – Text + Trust */}
|
||||
<motion.div
|
||||
style={{ y, opacity }}
|
||||
className="space-y-10 lg:space-y-12 order-2 lg:order-1"
|
||||
>
|
||||
<div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-slate-800/40 backdrop-blur-lg border border-slate-700/50">
|
||||
<Mic className="w-5 h-5 text-emerald-400" />
|
||||
<span className="text-xs font-semibold tracking-wider uppercase text-slate-300">
|
||||
AI-Powered Voice Notes
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-white tracking-tight">
|
||||
Document Care
|
||||
<br />
|
||||
<span className="bg-gradient-to-r from-emerald-400 via-blue-400 to-indigo-400 bg-clip-text text-transparent">
|
||||
With Your Voice
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-slate-300 leading-relaxed max-w-2xl">
|
||||
Speak naturally during consultations. Our AI instantly transcribes, structures, and organizes SOAP notes — saving hours while maintaining clinical precision and full compliance.
|
||||
</p>
|
||||
|
||||
{/* Metrics */}
|
||||
<div className="grid grid-cols-3 gap-6 md:gap-10">
|
||||
{[
|
||||
{ value: "98.7%", label: "Transcription Accuracy", icon: CheckCircle2 },
|
||||
{ value: "<1s", label: "Real-Time Processing", icon: Zap },
|
||||
{ value: "HIPAA", label: "Compliant", icon: ShieldCheck },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="text-center space-y-2">
|
||||
<item.icon className="w-6 h-6 mx-auto text-emerald-400" />
|
||||
<p className="text-2xl md:text-3xl font-bold text-white">{item.value}</p>
|
||||
<p className="text-xs uppercase tracking-wider text-slate-500 font-medium">
|
||||
{item.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Badges */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{["HIPAA Compliant", "GDPR Ready", "Encrypted Voice", "Audit Logs"].map((badge, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800/30 border border-slate-700/50 backdrop-blur-sm"
|
||||
>
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-400" />
|
||||
<span className="text-sm text-slate-300 font-medium">{badge}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right – Feature Cards */}
|
||||
<div className="grid sm:grid-cols-2 gap-5 md:gap-6 order-1 lg:order-2">
|
||||
{features.map((feature, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
custom={i}
|
||||
variants={cardVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
whileHover={{ y: -6, scale: 1.03, transition: { duration: 0.3 } }}
|
||||
className="group relative p-6 md:p-8 rounded-2xl bg-gradient-to-br from-slate-900/50 to-slate-950/50 border border-slate-700/50 backdrop-blur-lg shadow-xl hover:border-slate-600/70 transition-all duration-300 flex flex-col"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`p-3.5 rounded-xl bg-gradient-to-br ${feature.bg} border border-slate-600/50 group-hover:border-slate-500/70 transition-colors`}
|
||||
>
|
||||
<feature.icon className={`w-7 h-7 ${feature.color}`} />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-3">
|
||||
<h3 className="text-lg font-semibold text-white group-hover:text-slate-100 transition-colors">
|
||||
{feature.title}
|
||||
</h3>
|
||||
{/* Uncomment if you want descriptions back */}
|
||||
{/* <p className="text-sm text-slate-400 leading-relaxed">{feature.desc}</p> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-emerald-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user