Component Comparison

Image Showcase Evolution

Compare the old device mockup with the new modern image showcase

Old: FloatingDeviceMockup

Heavy device frame with laptop/desktop mockup

New: ModernImageShowcase

Clean, modern design with subtle effects

Feature Comparison

Old Component Issues

✗Heavy device frame takes focus away from content
✗Dated laptop/desktop mockup style
✗Limited customization options
✗Bulky appearance on mobile

New Component Benefits

✓Clean, modern design focuses on content
✓Multiple border styles (gradient, glow, thin, none)
✓Interactive hover effects with particles
✓Smooth animations and modern shadow effects
✓Better performance with optimized animations
✓Responsive and looks great on all devices

Implementation Example

How to use the new ModernImageShowcase component

import { ModernImageShowcase } from '@/components/ui/ModernImageShowcase'

<ModernImageShowcase
  imageSrc="/images/screenshot.webp"
  imageAlt="App Screenshot"
  floatAnimation={true}      // Enable floating animation
  perspective={true}          // 3D perspective effect
  glowEffect={true}          // Background glow
  borderStyle="gradient"     // "gradient" | "thin" | "glow" | "none"
  className="mx-auto max-w-5xl"
/>