hover-glare-card

import React from 'react';
import Image from 'next/image';
import HoverGlareCard from '@/components/ui/hover-glare-card';


function HoverGlareCardDemo() {
  return (
    <main className="flex min-h-screen w-full flex-col items-center justify-center gap-12 bg-gray-100 p-8 dark:bg-gray-900 transition-colors duration-300">
      
     
      <HoverGlareCard
        className="h-64 w-96 rounded-xl border border-neutral-300 bg-white p-8 shadow-lg dark:border-neutral-700 dark:bg-black"
        glareColor="#ff7b00"
        glareOpacity={0.2}
      >
        <h2 className="text-4xl font-bold text-neutral-800 dark:text-neutral-200">
          Hover Me
        </h2>
        <p className="mt-2 text-neutral-600 dark:text-neutral-400">
          The glare effect animates on every hover.
        </p>
      </HoverGlareCard>

    </main>
  );
}

export default HoverGlareCardDemo;