导航栏优化

hongjli

2025-04-05 846f92d2fe08ab9b8b14e8b949f00bb4529974d2

 src/components/Card.tsx

@@ -13,23 +13,25 @@
const Card = ({ title, description, imageUrl, onClick }: CardProps) => {
  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      whileHover={{ scale: 1.02, boxShadow: '0 10px 25px -5px rgba(0, 184, 212, 0.1), 0 10px 10px -5px rgba(0, 184, 212, 0.05)' }}
      whileTap={{ scale: 0.98 }}
      className="bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer"
      className="bg-white backdrop-blur-sm bg-opacity-90 rounded-xl border border-[var(--ai-secondary)] border-opacity-20 shadow-md overflow-hidden cursor-pointer transition-all"
      onClick={onClick}
    >
      <div className="relative h-48">
      <div className="relative h-48 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-tr from-[var(--ai-primary)] to-transparent opacity-10 z-0"></div>
        <Image
          src={imageUrl}
          alt={title}
          fill
          className="object-contain p-4"
          className="object-contain p-4 z-10"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
      </div>
      <div className="p-4">
        <h3 className="text-lg font-semibold text-[#2F3C7E] mb-2">{title}</h3>
      <div className="p-5 border-t border-[var(--ai-secondary)] border-opacity-10">
        <h3 className="text-lg font-semibold text-[var(--ai-primary)] mb-2">{title}</h3>
        <p className="text-gray-600 text-sm">{description}</p>
        <div className="mt-4 h-1 w-16 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)]"></div>
      </div>
    </motion.div>
  );