a

2026-09-16 08:47:12 +03:30
parent 16cba4492a
commit 116864c838
18 changed files with 859 additions and 605 deletions
@@ -0,0 +1,85 @@
+'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;