Animation Added and Gif file updated
This commit is contained in:
@@ -1,173 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { motion, useScroll, useTransform } from "framer-motion";
|
||||
import { Mic, CheckCircle2, Brain, Zap, Lock, Sparkles } from "lucide-react";
|
||||
import { Mic, Brain, Zap, Lock, Sparkles, AudioWaveform } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
|
||||
export default function AIVoiceSoap() {
|
||||
const containerRef = useRef(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ["start end", "end start"],
|
||||
});
|
||||
const containerRef = useRef(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ["start end", "end start"],
|
||||
});
|
||||
|
||||
const scale = useTransform(scrollYProgress, [0, 0.5], [0.95, 1]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.4], [0.6, 1]);
|
||||
const y = useTransform(scrollYProgress, [0, 0.5], [40, 0]);
|
||||
const scale = useTransform(scrollYProgress, [0, 0.5], [0.95, 1]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.4], [0.6, 1]);
|
||||
const y = useTransform(scrollYProgress, [0, 0.5], [40, 0]);
|
||||
|
||||
const bars = Array.from({ length: 24 }, (_, i) => ({
|
||||
height: [20, 45 + Math.sin(i * 0.8) * 30, 20],
|
||||
duration: 2 + (i % 8) * 0.25,
|
||||
delay: i * 0.03,
|
||||
}));
|
||||
// Dynamic bar animation for visualizer
|
||||
const bars = Array.from({ length: 24 }, (_, i) => ({
|
||||
height: [20, 45 + Math.sin(i * 0.8) * 30, 20],
|
||||
duration: 2 + (i % 8) * 0.25,
|
||||
delay: i * 0.03,
|
||||
}));
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
id="voice-soap"
|
||||
className="relative py-20 md:py-32 lg:py-40 text-white overflow-hidden"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-zinc-950 via-zinc-900/50 to-zinc-950" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-950/20 via-transparent to-transparent" />
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
id="voice-soap"
|
||||
className="relative py-16 sm:py-20 md:py-32 lg:py-40 2xl:py-48 text-white overflow-hidden bg-transparent"
|
||||
>
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl 2xl:max-w-[1600px]">
|
||||
<div className="grid lg:grid-cols-2 gap-12 lg:gap-24 xl:gap-32 items-center">
|
||||
<motion.div
|
||||
style={{ scale, opacity, y }}
|
||||
className="space-y-10 lg:space-y-14 order-2 lg:order-1"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="inline-flex items-center gap-2 sm:gap-3 px-4 py-2 rounded-full bg-cyan-950/30 border border-cyan-500/20 text-cyan-400 text-[10px] sm:text-xs font-semibold tracking-wide uppercase backdrop-blur-md"
|
||||
>
|
||||
<Mic className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
|
||||
Ambient Clinical Intelligence
|
||||
</motion.div>
|
||||
|
||||
<div className="container relative z-10 mx-auto px-5 md:px-8 lg:px-12 max-w-7xl">
|
||||
<div className="grid lg:grid-cols-2 gap-16 lg:gap-24 xl:gap-32 items-center">
|
||||
<motion.div
|
||||
style={{ scale, opacity, y }}
|
||||
className="space-y-10 lg:space-y-14"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="inline-flex items-center gap-3 px-6 py-2 rounded-full bg-blue-950/40 border border-blue-800/40 text-blue-400 text-xs font-semibold tracking-wide uppercase"
|
||||
>
|
||||
<Mic className="w-4 h-4" />
|
||||
Ambient Clinical Intelligence
|
||||
</motion.div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-tight">
|
||||
Autonomous{" "}
|
||||
<span className="text-blue-400">Voice-to-SOAP</span>
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl text-zinc-400 leading-relaxed max-w-3xl font-light">
|
||||
Transform ambient conversations into structured, accurate{" "}
|
||||
<span className="text-white font-medium">SOAP notes</span> in real-time — with enterprise-grade security and clinical precision.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-6">
|
||||
{[
|
||||
{ icon: Brain, title: "Neural Context Understanding", desc: "Advanced NLP for medical terminology and context" },
|
||||
{ icon: Zap, title: "Instant SOAP Generation", desc: "Zero-latency transcription to structured notes" },
|
||||
{ icon: Lock, title: "End-to-End PHI Security", desc: "AES-256 encryption & HIPAA/GDPR compliant" },
|
||||
{ icon: Sparkles, title: "Auto-Suggest & Edit", desc: "AI-powered refinements & clinician review" },
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.15 * i }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.03, transition: { duration: 0.2 } }}
|
||||
className="flex gap-5 p-5 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-blue-800/50 transition-all"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-950/40 border border-blue-800/40 flex items-center justify-center flex-shrink-0">
|
||||
<item.icon className="w-6 h-6 text-blue-400" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-lg font-semibold text-white">{item.title}</h4>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.96 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative w-full max-w-lg mx-auto lg:mx-0"
|
||||
>
|
||||
<div className="relative rounded-3xl backdrop-blur-xl shadow-2xl overflow-hidden">
|
||||
<div className="absolute inset-0 pointer-events-none" />
|
||||
|
||||
<div className="p-8 md:p-10 lg:p-12 space-y-10 lg:space-y-12 relative">
|
||||
<div className="flex justify-center">
|
||||
<div className="relative">
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.4, 1], opacity: [0.4, 0, 0.4] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="absolute inset-[-20%] rounded-full bg-blue-500/20 blur-2xl"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.3, 1], opacity: [0.3, 0, 0.3] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut", delay: 0.6 }}
|
||||
className="absolute inset-[-20%] rounded-full bg-purple-500/15 blur-3xl"
|
||||
/>
|
||||
|
||||
<div className="relative w-24 h-24 md:w-32 md:h-32 lg:w-40 lg:h-40 rounded-full bg-zinc-800/70 border-2 border-zinc-700 flex items-center justify-center shadow-inner">
|
||||
<Mic className="w-12 h-12 md:w-16 md:h-16 lg:w-20 lg:h-20 text-blue-400 drop-shadow-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center items-end gap-1.5 h-32 md:h-6 px-4">
|
||||
{bars.map((bar, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
animate={{ height: bar.height }}
|
||||
transition={{
|
||||
repeat: Infinity,
|
||||
duration: bar.duration,
|
||||
ease: "easeInOut",
|
||||
delay: bar.delay,
|
||||
}}
|
||||
className="w-1.5 md:w-2 rounded-full bg-gradient-to-t from-blue-700 to-blue-400 shadow-md"
|
||||
style={{ opacity: 0.4 + (i % 8) * 0.08 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative rounded-2xl bg-zinc-800/60 border border-zinc-700/80 p-6 md:p-8 shadow-inner overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ x: ["-100%", "200%"] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "linear", repeatDelay: 3 }}
|
||||
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent pointer-events-none"
|
||||
/>
|
||||
|
||||
<div className="space-y-4 text-sm md:text-base">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-lg" />
|
||||
<div className="h-3 bg-gradient-to-r from-blue-400/30 to-transparent rounded-full flex-1" />
|
||||
</div>
|
||||
<div className="h-2.5 bg-zinc-700/50 rounded-full ml-8" />
|
||||
<div className="h-2.5 bg-zinc-700/50 rounded-full ml-8 w-5/6" />
|
||||
<div className="h-2.5 bg-zinc-700/50 rounded-full ml-8 w-3/4" />
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex items-center gap-3 text-xs md:text-sm text-zinc-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<span>Processing in real-time</span>
|
||||
</div>
|
||||
<div className="ml-auto text-emerald-400 font-medium">Secure • Encrypted</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="space-y-4 sm:space-y-6">
|
||||
<h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-bold tracking-tight leading-[1.1]">
|
||||
Autonomous{" "}
|
||||
<span className="text-cyan-400 block sm:inline">Voice-to-SOAP</span>
|
||||
</h2>
|
||||
<p className="text-lg sm:text-xl md:text-2xl 2xl:text-3xl text-zinc-400 leading-relaxed max-w-3xl font-light">
|
||||
Transform ambient conversations into structured, accurate{" "}
|
||||
<span className="text-white font-medium">SOAP notes</span> in real-time — with enterprise-grade security.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 pt-2 sm:pt-6">
|
||||
{[
|
||||
{ icon: Brain, title: "Neural Context", desc: "Advanced NLP for medical terminology" },
|
||||
{ icon: Zap, title: "Instant Generation", desc: "Zero-latency transcription to notes" },
|
||||
{ icon: Lock, title: "PHI Security", desc: "AES-256 encryption & HIPAA compliant" },
|
||||
{ icon: Sparkles, title: "Auto-Refinement", desc: "AI-powered suggestions & review" },
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.15 * i }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.02, backgroundColor: "rgba(255,255,255,0.08)" }}
|
||||
className="flex gap-4 p-4 sm:p-5 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm hover:border-cyan-500/30 transition-all cursor-default"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center flex-shrink-0">
|
||||
<item.icon className="w-5 h-5 text-cyan-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm sm:text-base font-bold text-white mb-1">{item.title}</h4>
|
||||
<p className="text-xs text-zinc-400 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.96 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative w-full max-w-lg 2xl:max-w-xl mx-auto lg:mx-0 order-1 lg:order-2"
|
||||
>
|
||||
<div className="relative rounded-[2rem] sm:rounded-[2.5rem] backdrop-blur-xl shadow-2xl overflow-hidden">
|
||||
{/* Inner Content Padding */}
|
||||
<div className="p-6 sm:p-10 lg:p-12 2xl:p-16 space-y-8 sm:space-y-10 lg:space-y-12 relative z-10">
|
||||
{/* Microphone Animation */}
|
||||
<div className="flex justify-center">
|
||||
<div className="relative">
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.4, 1], opacity: [0.4, 0, 0.4] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="absolute inset-[-20%] rounded-full bg-cyan-500/20 blur-2xl"
|
||||
/>
|
||||
<div className="relative w-20 h-20 sm:w-28 sm:h-28 2xl:w-36 2xl:h-36 rounded-full bg-gradient-to-b from-zinc-800 to-zinc-900 border border-zinc-700 flex items-center justify-center shadow-[0_8px_32px_rgba(0,0,0,0.5)]">
|
||||
<Mic className="w-8 h-8 sm:w-12 sm:h-12 2xl:w-16 2xl:h-16 text-cyan-400 drop-shadow-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Audio Waveform Bars - Responsive height/gap */}
|
||||
<div className="flex justify-center items-end gap-1 sm:gap-1.5 h-12 sm:h-16 px-2 sm:px-4">
|
||||
{bars.map((bar, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
animate={{ height: bar.height }}
|
||||
transition={{
|
||||
repeat: Infinity,
|
||||
duration: bar.duration,
|
||||
ease: "easeInOut",
|
||||
delay: bar.delay,
|
||||
}}
|
||||
className="w-1 sm:w-1.5 md:w-2 rounded-full bg-cyan-500"
|
||||
style={{ opacity: 0.3 + (i % 8) * 0.1 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Processing Status Box */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative rounded-2xl bg-black/20 border border-white/5 p-4 sm:p-6 backdrop-blur-md"
|
||||
>
|
||||
{/* Scan Line Animation */}
|
||||
<motion.div
|
||||
animate={{ x: ["-100%", "200%"] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "linear", repeatDelay: 2 }}
|
||||
className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-400/10 to-transparent pointer-events-none"
|
||||
/>
|
||||
|
||||
{/* Abstract Data Lines */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-cyan-500 shadow-[0_0_10px_rgba(6,182,212,0.5)]" />
|
||||
<div className="h-1.5 sm:h-2 bg-white/10 rounded-full flex-1 w-full" />
|
||||
</div>
|
||||
<div className="h-1.5 sm:h-2 bg-white/10 rounded-full ml-5 w-3/4" />
|
||||
<div className="h-1.5 sm:h-2 bg-white/10 rounded-full ml-5 w-5/6" />
|
||||
</div>
|
||||
|
||||
<div className="mt-4 sm:mt-5 flex items-center justify-between text-[10px] sm:text-xs text-zinc-400 font-mono">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
|
||||
</span>
|
||||
<span>Processing...</span>
|
||||
</div>
|
||||
<div className="text-emerald-400">Encrypted</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user