69 lines
3.2 KiB
TypeScript
69 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import type { ServiceConfig } from "@/config/services"
|
|
import { ArrowRight } from "lucide-react"
|
|
|
|
interface ServiceCardProps {
|
|
service: ServiceConfig
|
|
}
|
|
|
|
export default function ServiceCard({ service }: ServiceCardProps) {
|
|
const IconComponent = service.icon
|
|
|
|
return (
|
|
<Link href={service.url}>
|
|
<div className="glass-card-enhanced bg-white/40 backdrop-blur-2xl rounded-2xl p-8 border border-white/50 shadow-lg hover:shadow-2xl hover:-translate-y-3 transition-all duration-700 group overflow-hidden cursor-pointer">
|
|
{/* Enhanced Background Gradient */}
|
|
<div
|
|
className={`absolute inset-0 bg-gradient-to-br ${service.gradient} opacity-5 group-hover:opacity-15 transition-opacity duration-500`}
|
|
></div>
|
|
|
|
{/* Floating Glass Orbs */}
|
|
<div className="absolute top-4 right-4 w-16 h-16 bg-white/20 rounded-full blur-xl group-hover:bg-white/30 transition-all duration-500"></div>
|
|
<div className="absolute bottom-4 left-4 w-12 h-12 bg-white/10 rounded-full blur-lg group-hover:bg-white/20 transition-all duration-500"></div>
|
|
|
|
<div className="relative z-10">
|
|
{/* Enhanced Icon with Multiple Glass Layers */}
|
|
<div className="mb-6 relative">
|
|
<div
|
|
className={`w-16 h-16 rounded-2xl flex items-center justify-center mb-4 transition-all duration-500 group-hover:scale-110 group-hover:rotate-6 bg-gradient-to-br ${service.gradient} shadow-lg relative overflow-hidden`}
|
|
>
|
|
{/* Glass overlay on icon */}
|
|
<div className="absolute inset-0 bg-white/20 backdrop-blur-sm rounded-2xl"></div>
|
|
<IconComponent size={32} className="text-white relative z-10" />
|
|
</div>
|
|
|
|
{/* Icon Glow Effect */}
|
|
<div
|
|
className={`absolute top-0 left-0 w-16 h-16 rounded-2xl bg-gradient-to-br ${service.gradient} opacity-30 blur-lg group-hover:opacity-50 transition-opacity duration-500`}
|
|
></div>
|
|
</div>
|
|
|
|
{/* Enhanced Title */}
|
|
<h3 className="text-xl font-bold text-gray-800 mb-4 group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-purple-600 group-hover:bg-clip-text group-hover:text-transparent transition-all duration-500 font-mono">
|
|
{service.name}
|
|
</h3>
|
|
|
|
{/* Description */}
|
|
<p className="text-gray-600 leading-relaxed font-mono text-sm mb-6 line-clamp-3">{service.description}</p>
|
|
|
|
{/* Enhanced CTA with Glass Effect */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="glass-card-enhanced bg-white/30 backdrop-blur-xl rounded-full px-4 py-2 border border-white/40">
|
|
<span className={`text-sm font-mono font-semibold`} style={{ color: service.color }}>
|
|
{service.category}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center text-gray-500 group-hover:text-blue-600 transition-colors duration-300">
|
|
<span className="text-sm font-mono mr-2">了解更多</span>
|
|
<ArrowRight size={16} className="group-hover:translate-x-1 transition-transform duration-300" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|