// 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>