This interactive demo can be added to any page in your app:

import { ReportTransformationDemo } from '@/components/ReportTransformationDemo';

export default function Page() {
  return (
    <div>
      <ReportTransformationDemo />
    </div>
  );
}

Features:

• ✅ Auto-looping: Animation repeats every 8 seconds
• ✅ Interactive tooltips: Hover over medical terms to see translations
• ✅ Scanning animation: Blue line with glowing effects
• ✅ Particle effects: Data points flying across
• ✅ Smooth transitions: All powered by Framer Motion
• ✅ Responsive: Works beautifully on mobile and desktop

Customization:

You can easily customize the medical terms, colors, and animation timing by editing the component. The demo uses real medical terminology that your users might encounter.

Where to Use:

• 🏠 Landing page hero: Show value proposition immediately
• 📖 "How It Works" section: Explain your process visually
• 📱 Marketing pages: Demonstrate capabilities to prospects
• 🎓 Onboarding: Help new users understand the platform