导航栏优化

hongjli

2025-04-05 846f92d2fe08ab9b8b14e8b949f00bb4529974d2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
"use client";
 
import Image from 'next/image';
import { motion } from 'framer-motion';
 
interface CardProps {
  title: string;
  description: string;
  imageUrl: string;
  onClick?: () => void;
}
 
const Card = ({ title, description, imageUrl, onClick }: CardProps) => {
  return (
    <motion.div
      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 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 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 z-10"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
      </div>
      <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>
  );
};
 
export default Card;