"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
|
initial={{ opacity: 0, y: 20 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
viewport={{ once: false, margin: "-100px" }}
|
transition={{ duration: 0.5 }}
|
className="h-full"
|
>
|
<div
|
onClick={onClick}
|
className="group cursor-pointer h-full flex flex-col bg-white/5 backdrop-blur-sm rounded-xl border border-[var(--ai-secondary)]/10 overflow-hidden transition-all duration-300 hover:shadow-[0_0_20px_rgba(106,219,255,0.15)] hover:border-[var(--ai-secondary)]/30 hover:translate-y-[-2px]"
|
>
|
{/* 图片容器 - 固定高度 */}
|
<div className="relative h-[200px] overflow-hidden">
|
<img
|
src={imageUrl}
|
alt={title}
|
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
/>
|
{/* 图片遮罩层 */}
|
<div className="absolute inset-0 bg-gradient-to-t from-[#131C41]/80 to-transparent opacity-60"></div>
|
|
{/* 装饰性边角 */}
|
<div className="absolute top-3 right-3 w-8 h-8 border-t-2 border-r-2 border-[var(--ai-secondary)]/50 opacity-70"></div>
|
<div className="absolute bottom-3 left-3 w-8 h-8 border-b-2 border-l-2 border-[var(--ai-secondary)]/50 opacity-70"></div>
|
</div>
|
|
{/* 内容区域 - 固定高度 */}
|
<div className="flex flex-col flex-grow p-6">
|
{/* 标题 */}
|
<h3 className="text-xl font-semibold text-[var(--ai-primary)] mb-3 relative">
|
{title}
|
<div className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)] group-hover:w-full transition-all duration-300 ease-out"></div>
|
</h3>
|
|
{/* 描述文字 - 固定高度，超出显示省略号 */}
|
<p className="text-gray-200 text-sm line-clamp-3 mb-4 transition-colors duration-300 group-hover:text-gray-400">{description}</p>
|
|
{/* 底部装饰 */}
|
<div className="mt-auto flex items-center justify-between">
|
<div className="h-1 w-12 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)] transform origin-left scale-x-100 group-hover:scale-x-125 transition-transform duration-300"></div>
|
|
<span className="text-[var(--ai-secondary)] text-sm font-medium opacity-0 transform translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
|
了解详情 →
|
</span>
|
</div>
|
</div>
|
</div>
|
</motion.div>
|
);
|
};
|
|
export default Card;
|
