components/TermCard.js

import Link from 'next/link'

export default function TermCard({ term }) {
  return (
    <div className="bg-white rounded-xl shadow-sm border border-stone-200 overflow-hidden hover:shadow-lg transition-shadow duration-300 group flex flex-col h-full">
      <div className="relative h-48 overflow-hidden">
        <img
          src={term.image}
          alt={term.title}
          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
        />
        <div className="absolute top-4 right-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-semibold text-palestine-red border border-palestine-red/20">
          {term.category}
        </div>
      </div>
      <div className="p-6 flex-grow flex flex-col">
        <div className="flex justify-between items-start mb-2">
          <h3 className="text-xl font-serif font-bold text-stone-800 group-hover:text-palestine-red transition-colors">
            {term.title}
          </h3>
        </div>
        <p className="text-xs text-stone-500 font-medium mb-4">{term.date}</p>
        <p className="text-stone-600 text-sm leading-relaxed mb-6 flex-grow">
          {term.description}
        </p>
        <div className="pt-4 border-t border-stone-100 mt-auto">
          <Link 
            href={`/term/${term.id}`} 
            className="text-sm font-medium text-stone-800 hover:text-palestine-red flex items-center gap-1 group/link"
          >
            Read Entry
            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 transform group-hover/link:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </Link>
        </div>
      </div>
    </div>
  )
}