86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { CheckCircle2 } from 'lucide-react';
|
|
|
|
// ۱. تعریف Type برای دادههای ورودی کامپوننت
|
|
// این همان اینترفیس ServiceItem از فایل اصلی شماست
|
|
export interface ServiceItem {
|
|
id: string;
|
|
title: string;
|
|
subtitle: string;
|
|
icon: React.ElementType;
|
|
color: string;
|
|
description: string;
|
|
capabilities: string[];
|
|
techStack: string[];
|
|
}
|
|
|
|
// ۲. تعریف Props کامپوننت کارت
|
|
interface ServiceCardProps {
|
|
service: ServiceItem;
|
|
index: number; // برای تأخیر انیمیشن
|
|
}
|
|
|
|
const ServiceCard: React.FC<ServiceCardProps> = ({ service, index }) => {
|
|
const Icon = service.icon;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 15 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.35, delay: index * 0.08 }}
|
|
className="group relative flex flex-col justify-between p-6 rounded-2xl bg-gray-900/30 border border-gray-800/80 hover:border-indigo-500/30 hover:bg-gray-900/50 transition-all duration-300"
|
|
>
|
|
{/* Header Card */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-5">
|
|
<div className={`w-11 h-11 rounded-xl border flex items-center justify-center transition-transform group-hover:scale-105 ${service.color}`}>
|
|
<Icon className="w-5 h-5" />
|
|
</div>
|
|
<span className="font-mono text-[11px] text-gray-500 font-bold tracking-wider">
|
|
{service.id}
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="text-base font-bold text-white group-hover:text-indigo-200 transition-colors mb-1">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-[11px] font-mono text-gray-500 mb-3 uppercase tracking-wide">
|
|
{service.subtitle}
|
|
</p>
|
|
|
|
<p className="text-xs text-gray-400 leading-relaxed mb-5 text-justify">
|
|
{service.description}
|
|
</p>
|
|
|
|
{/* Capabilities List */}
|
|
<div className="space-y-2 mb-6 pt-4 border-t border-gray-800/60">
|
|
<span className="text-[11px] font-mono text-gray-400 font-semibold block">قابلیتهای کلیدی:</span>
|
|
{service.capabilities.map((cap, i) => (
|
|
<div key={i} className="flex items-start gap-2 text-xs text-gray-300">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-indigo-400 shrink-0 mt-0.5" />
|
|
<span>{cap}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tech Stack Footer */}
|
|
<div className="pt-4 border-t border-gray-800/60 flex flex-wrap gap-1.5">
|
|
{service.techStack.map((tech) => (
|
|
<span
|
|
key={tech}
|
|
className="text-[10px] font-mono px-2.5 py-1 rounded bg-gray-950 border border-gray-800 text-gray-400 group-hover:border-gray-700 transition-colors"
|
|
>
|
|
{tech}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default ServiceCard;
|