"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 }}
|
animate={{ opacity: 1, y: 0 }}
|
transition={{ duration: 0.5 }}
|
whileHover={{
|
y: -5,
|
transition: { duration: 0.2, ease: 'easeOut' }
|
}}
|
whileTap={{
|
y: 0,
|
scale: 0.98,
|
transition: { duration: 0.1 }
|
}}
|
className="group relative bg-white backdrop-blur-sm bg-opacity-90 rounded-xl overflow-hidden cursor-pointer"
|
onClick={onClick}
|
>
|
{/* 闪光效果边框 */}
|
<div className="absolute -inset-0.5 rounded-xl bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)] opacity-0 blur group-hover:opacity-70 group-hover:blur-md transition-all duration-500"></div>
|
|
{/* 卡片内容 */}
|
<div className="relative z-10 bg-white border border-[var(--ai-secondary)]/20 rounded-xl overflow-hidden shadow-lg shadow-[var(--ai-secondary)]/5 group-hover:shadow-[var(--ai-secondary)]/20 transition-all duration-300">
|
{/* 图片区域 */}
|
<div className="relative h-48 overflow-hidden">
|
{/* 渐变遮罩 */}
|
<div className="absolute inset-0 bg-gradient-to-tr from-[var(--ai-primary)]/20 to-transparent z-10"></div>
|
|
{/* 图片 */}
|
<div className="relative h-full w-full transform group-hover:scale-105 transition-transform duration-700 ease-out">
|
<Image
|
src={imageUrl}
|
alt={title}
|
fill
|
className="object-contain p-4"
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
/>
|
</div>
|
|
{/* 技术感装饰元素 */}
|
<div className="absolute top-2 right-2 w-6 h-6 opacity-70 group-hover:opacity-100 transition-opacity duration-300">
|
<div className="absolute top-0 right-0 w-full h-[1px] bg-[var(--ai-secondary)]"></div>
|
<div className="absolute top-0 right-0 h-full w-[1px] bg-[var(--ai-secondary)]"></div>
|
</div>
|
|
<div className="absolute bottom-2 left-2 w-6 h-6 opacity-70 group-hover:opacity-100 transition-opacity duration-300">
|
<div className="absolute bottom-0 left-0 w-full h-[1px] bg-[var(--ai-highlight)]"></div>
|
<div className="absolute bottom-0 left-0 h-full w-[1px] bg-[var(--ai-highlight)]"></div>
|
</div>
|
</div>
|
|
{/* 内容区域 */}
|
<div className="p-5 border-t border-[var(--ai-secondary)]/10 relative overflow-hidden">
|
{/* 内容背景动效 */}
|
<div className="absolute -inset-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
|
<div className="absolute right-0 top-0 h-20 w-20 bg-gradient-to-bl from-[var(--ai-secondary)]/5 to-transparent rounded-full blur-xl"></div>
|
</div>
|
|
{/* 标题 */}
|
<h3 className="text-lg font-semibold text-[var(--ai-primary)] mb-2 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-600 text-sm relative z-10">{description}</p>
|
|
{/* 底部装饰 */}
|
<div className="mt-4 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>
|
|
<motion.div
|
className="text-[var(--ai-secondary)] text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
initial={{ x: -10 }}
|
whileHover={{ x: 0 }}
|
>
|
了解详情 →
|
</motion.div>
|
</div>
|
</div>
|
</div>
|
</motion.div>
|
);
|
};
|
|
export default Card;
|
