70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
import * as React from "react";
|
|
import { Card, CardContent } from "../../ui/card";
|
|
import { Button } from "../../ui/button";
|
|
import { ImageWithFallback } from "../../common/ImageWithFallback";
|
|
import { Badge } from "../../ui/badge";
|
|
import { motion } from "motion/react";
|
|
|
|
interface ServiceCardProps {
|
|
name: string;
|
|
icon: string;
|
|
color: string;
|
|
imageUrl?: string;
|
|
onClick: () => void;
|
|
index?: number;
|
|
}
|
|
|
|
export const ServiceCard = React.forwardRef<HTMLDivElement, ServiceCardProps>(
|
|
({ name, icon, color, imageUrl, onClick, index = 0 }, ref) => {
|
|
return (
|
|
<motion.div
|
|
ref={ref}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{
|
|
duration: 0.4,
|
|
delay: index * 0.1,
|
|
ease: [0.25, 0.1, 0.25, 1]
|
|
}}
|
|
whileHover={{
|
|
y: -8,
|
|
transition: { duration: 0.2 }
|
|
}}
|
|
whileTap={{ scale: 0.98 }}
|
|
onClick={onClick}
|
|
className="cursor-pointer"
|
|
>
|
|
<Card className="hover:shadow-2xl transition-all duration-300 border hover:border-primary/20 h-full bg-gradient-to-br from-white to-gray-50/50 dark:from-gray-900 dark:to-gray-800/50 backdrop-blur-sm overflow-hidden group">
|
|
<CardContent className="p-6 flex flex-col items-center gap-4 relative">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-primary/5 dark:to-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
|
|
<motion.div
|
|
className="w-20 h-20 rounded-2xl flex items-center justify-center shadow-md overflow-hidden relative z-10 ring-2 ring-white"
|
|
style={{ backgroundColor: imageUrl ? 'transparent' : color }}
|
|
whileHover={{ rotate: [0, -3, 3, -3, 0], scale: 1.1 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
{imageUrl ? (
|
|
<ImageWithFallback
|
|
src={imageUrl}
|
|
alt={name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<span className="text-4xl">{icon}</span>
|
|
)}
|
|
</motion.div>
|
|
|
|
<div className="relative z-10 text-center">
|
|
<h3 className="mb-1">{name}</h3>
|
|
<Badge variant="secondary" className="text-xs opacity-0 group-hover:opacity-100 transition-opacity">
|
|
클릭하여 연결
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
}
|
|
);
|
|
ServiceCard.displayName = "ServiceCard"; |