components/ContentCard.jsx

const ContentCard = ({ title, description, icon, onClick }) => (
  <div className="group relative overflow-hidden rounded-xl bg-white p-6 shadow-md transition-all hover:shadow-lg">
    <div className="mb-4 flex items-center justify-center rounded-full bg-blue-100 p-3 text-blue-600 group-hover:bg-blue-200">
      {icon}
    </div>
    <h3 className="text-xl font-bold text-gray-900">{title}</h3>
    <p className="mt-2 text-gray-600">{description}</p>
    <button
      onClick={onClick}
      className="mt-6 w-full rounded-lg bg-blue-600 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
    >
      Print Content
    </button>
  </div>
);