// Basic shine card
<ShineCard className="w-[400px] h-[300px]">
  <div className="flex flex-col items-center justify-center h-full">
    <h1 className="text-3xl font-bold text-white">Shine Card</h1>
    <p className="text-white text-center">Hover to see the effect</p>
  </div>
</ShineCard>
 
// Custom blue shine with vertical layout
<ShineCard
  className="w-80 h-96"
  speed={1.2}
  intensity={0.4}
  color="#60a5fa"
  direction="tr"
  typeCard="vertical"
>
  <div className="p-6 h-full flex flex-col justify-between">
    <h2 className="text-xl font-bold text-white">Custom Card</h2>
    <p className="text-blue-400 text-sm">Blue shine effect</p>
  </div>
</ShineCard>
 
// Horizontal card with golden shine
<ShineCard
  className="w-[500px] h-32"
  speed={0.5}
  intensity={0.6}
  color="#f59e0b"
  strokeColor="#fbbf24"
  background="rgba(15, 23, 42, 0.4)"
  direction="tl"
  typeCard="horizontal"
>
  <div className="p-4 h-full flex items-center justify-between">
    <h3 className="text-lg font-semibold text-white">Horizontal Card</h3>
    <span className="text-yellow-400">⚡</span>
  </div>
</ShineCard>