283 lines
14 KiB
TypeScript
283 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import React from 'react';
|
||
import { motion } from 'framer-motion';
|
||
import {
|
||
Server,
|
||
Database,
|
||
ShieldCheck,
|
||
Cpu,
|
||
Layers,
|
||
Zap,
|
||
Activity,
|
||
Workflow,
|
||
CheckCircle2,
|
||
Terminal,
|
||
ArrowLeft
|
||
} from 'lucide-react';
|
||
import Footer from '@/components/shared/footer';
|
||
|
||
interface ServiceItem {
|
||
id: string;
|
||
title: string;
|
||
subtitle: string;
|
||
icon: React.ElementType;
|
||
color: string;
|
||
description: string;
|
||
capabilities: string[];
|
||
techStack: string[];
|
||
}
|
||
|
||
const servicesList: ServiceItem[] = [
|
||
{
|
||
id: 'SRV-01',
|
||
title: 'توسعه سامانه‌ها و ماژول‌های توزیع‌شده بانکی',
|
||
subtitle: 'High-Throughput Core Modules',
|
||
icon: Server,
|
||
color: 'text-indigo-400 bg-indigo-500/10 border-indigo-500/20',
|
||
description:
|
||
'طراحی و پیاده‌سازی سرویس‌های با تراکنش بالا، الگوهای Event-Driven و ماژولار با تضمین پایداری، همگام‌سازی لحظه‌ای و مقیاس‌پذیری بالا.',
|
||
capabilities: [
|
||
'پیاده‌سازی معماری‌های CQRS و Event Sourcing',
|
||
'مدیریت صَف و Message Brokerهای ناهمگام (Kafka / RabbitMQ)',
|
||
'سیستم‌های کنترل دسترسی و کارتابل‌های اداری متمرکز'
|
||
],
|
||
techStack: ['PHP 8.4 / Laravel', 'Go', 'Kafka', 'PostgreSQL']
|
||
},
|
||
{
|
||
id: 'SRV-02',
|
||
title: 'مهندسی پایگاه‌های داده و کشینگ پیشرفته',
|
||
subtitle: 'High-Scale Storage & In-Memory Grids',
|
||
icon: Database,
|
||
color: 'text-sky-400 bg-sky-500/10 border-sky-500/20',
|
||
description:
|
||
'بهینه‌سازی عمیق کوئری‌ها، پارتیشن‌بندی جداول حجیم، طراحی کلاسترهای دیتابیس توزیع‌شده و استراتژی‌های کشینگ چندلایه‌ای با کمترین تأخیر.',
|
||
capabilities: [
|
||
'طراحی ساختار داده‌های رابطه‌ای و اسنادی پیشرفته',
|
||
'سیستم‌های کش توزیع‌شده و Distributed Locks',
|
||
'پارتیشن‌بندی و ایندکس‌گذاری دیتابیس‌های چند ده‌میلیونی'
|
||
],
|
||
techStack: ['PostgreSQL', 'Redis', 'MongoDB', 'Query Optimization']
|
||
},
|
||
{
|
||
id: 'SRV-03',
|
||
title: 'امنیت داده، احراز هویت و Zero-Trust',
|
||
subtitle: 'Enterprise Security & SSO Integration',
|
||
icon: ShieldCheck,
|
||
color: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
|
||
description:
|
||
'استقرار استانداردهای امنیتی بانکی، سامانه‌های ورود یکپارچه سازمانی (SSO)، احراز هویت دوعاملی و محافظت از داده‌های حساس در حال انتقال و ذخیره.',
|
||
capabilities: [
|
||
'پیاده‌سازی استانداردهای OAuth2.0 / OpenID Connect',
|
||
'رمزنگاری داده‌های حساس و مدیریت کلیدها (KMS)',
|
||
'لاگ‌برداری امنیتی و Audit Trail غیرقابل تغییر'
|
||
],
|
||
techStack: ['SSO / OAuth2', 'mTLS', 'Vault', 'Zero-Trust Policy']
|
||
},
|
||
{
|
||
id: 'SRV-04',
|
||
title: 'هوش مصنوعی کاربردی و جستجوی معنایی',
|
||
subtitle: 'Applied AI & Vector Search Engines',
|
||
icon: Cpu,
|
||
color: 'text-purple-400 bg-purple-500/10 border-purple-500/20',
|
||
description:
|
||
'توسعه ابزارهای جستجوی معنایی روی آیین‌نامه‌ها و اسناد بانکی، استخراج داده با مدل‌های زبانی (LLM) و پایگاه‌های برداری جهت تصمیم‌گیری هوشمند.',
|
||
capabilities: [
|
||
'راه‌اندازی پایگاه‌های داده برداری (Vector Databases)',
|
||
'سرویس‌های بازیابی اطلاعات اسناد و بخشنامه‌ها (RAG)',
|
||
'میکروسرویس‌های مبتنی بر پایتون با پرفورمنس بالا'
|
||
],
|
||
techStack: ['Python', 'FastAPI', 'Qdrant', 'OpenAI/Local LLMs']
|
||
},
|
||
{
|
||
id: 'SRV-05',
|
||
title: 'داشبوردهای عملیاتی و سیستم‌های مدیریت وظایف',
|
||
subtitle: 'TMS, Shift & Fleet Operations',
|
||
icon: Layers,
|
||
color: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
||
description:
|
||
'توسعه پلتفرم‌های مانیتورینگ منابع انسانی، شیفت‌های کاری شعب، مدیریت ناوگان و سیستم‌های تیکتینگ یکپارچه با داشبوردهای مدیریتی سریع.',
|
||
capabilities: [
|
||
'پنل‌های اختصاصی با بارگذاری فوق‌سریع داده‌ها',
|
||
'گزارش‌گیری تحلیلی و تله‌متری فرآیندهای شعب',
|
||
'سازگاری کامل با فرآیندهای سازمانی پیچیده'
|
||
],
|
||
techStack: ['Filament', 'Next.js', 'Tailwind CSS', 'WebSockets']
|
||
},
|
||
{
|
||
id: 'SRV-06',
|
||
title: 'زیرساخت دِواپس، اتوماسیون و مانیتورینگ 24/7',
|
||
subtitle: 'DevOps Pipelines & Telemetry',
|
||
icon: Activity,
|
||
color: 'text-rose-400 bg-rose-500/10 border-rose-500/20',
|
||
description:
|
||
'کانتینرسازی، راه‌اندازی خطوط CI/CD خودکار، استقرار بدون Down-time و سیستم‌های هشداردهی زنده برای تشخیص و رفع اختلالات زیرساختی.',
|
||
capabilities: [
|
||
'راه‌اندازی خطوط CI/CD امن و تست‌های اتوماتیک',
|
||
'ایزولاسیون محیط‌ها از طریق Docker',
|
||
'مانیتورینگ بلادرنگ مصرف منابع، Latency و خطاهای سیستم'
|
||
],
|
||
techStack: ['Docker', 'CI/CD Pipelines', 'Prometheus', 'Grafana']
|
||
}
|
||
];
|
||
|
||
export default function ServicesPage() {
|
||
return (
|
||
<div dir="rtl" className="min-h-screen bg-gray-950 text-gray-100 flex flex-col justify-between selection:bg-indigo-500/30 selection:text-indigo-200">
|
||
|
||
{/* Background Subtle Ambient Glow & Grid */}
|
||
<div className="fixed inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(99,102,241,0.08),rgba(255,255,255,0))] pointer-events-none" />
|
||
<div className="fixed inset-0 bg-[linear-gradient(to_right,#1f293715_1px,transparent_1px),linear-gradient(to_bottom,#1f293715_1px,transparent_1px)] bg-[size:40px_40px] pointer-events-none" />
|
||
|
||
<main className="relative max-w-6xl mx-auto px-6 py-20 w-full space-y-20">
|
||
|
||
{/* ۱. Hero Section */}
|
||
<section className="text-center max-w-3xl mx-auto space-y-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.4 }}
|
||
className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-indigo-950/40 border border-indigo-500/30 text-indigo-300 font-mono text-xs shadow-inner"
|
||
>
|
||
<Zap className="w-3.5 h-3.5 text-indigo-400" />
|
||
<span>Engineering Capabilities & Solutions</span>
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: 0.1 }}
|
||
className="text-3xl sm:text-5xl font-black tracking-tight leading-[1.2] text-white"
|
||
>
|
||
خدمات تخصصی <span className="text-transparent bg-clip-text bg-gradient-to-l from-indigo-400 via-sky-300 to-white">مهندسی سیستم</span> و راهکارهای مالی
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.5, delay: 0.2 }}
|
||
className="text-gray-400 text-sm sm:text-base leading-relaxed"
|
||
>
|
||
ارائه خدمات یکپارچه نرم‌افزاری در مقیاس سازمانی، از معماری پایگاه‌های داده با تراکنش بالا تا طراحی زیرساخت‌های پایدار و امنیت‌محور بانکی.
|
||
</motion.p>
|
||
</section>
|
||
|
||
{/* ۲. Engineering Workflow Highlight */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.98 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.4, delay: 0.25 }}
|
||
className="p-5 rounded-2xl bg-gray-900/40 border border-gray-800/80 backdrop-blur-sm grid grid-cols-2 md:grid-cols-4 gap-4 text-center"
|
||
>
|
||
<div className="space-y-1">
|
||
<span className="font-mono text-xs text-indigo-400">01 / ARCHITECTURE</span>
|
||
<p className="text-xs font-semibold text-gray-200">طراحی ساختار توزیع‌شده</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<span className="font-mono text-xs text-sky-400">02 / SECURITY</span>
|
||
<p className="text-xs font-semibold text-gray-200">استانداردسازی بانکی</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<span className="font-mono text-xs text-emerald-400">03 / PERFORMANCE</span>
|
||
<p className="text-xs font-semibold text-gray-200">بهینه‌سازی تأخیر و بار</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<span className="font-mono text-xs text-purple-400">04 / MONITORING</span>
|
||
<p className="text-xs font-semibold text-gray-200">پایش بلادرنگ ۲۴/۷</p>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* ۳. Services Grid */}
|
||
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{servicesList.map((service, index) => {
|
||
const Icon = service.icon;
|
||
return (
|
||
<motion.div
|
||
key={service.id}
|
||
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>
|
||
);
|
||
})}
|
||
</section>
|
||
|
||
{/* ۴. Enterprise SLA & Reliability Banner */}
|
||
<section className="relative rounded-2xl p-8 bg-gradient-to-r from-gray-900 via-indigo-950/30 to-gray-900 border border-indigo-500/20 overflow-hidden shadow-2xl">
|
||
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
||
<div className="space-y-2 text-center md:text-right">
|
||
<div className="inline-flex items-center gap-2 text-xs font-mono text-emerald-400">
|
||
<Terminal className="w-4 h-4" />
|
||
<span>ENTERPRISE GRADE STANDARDS</span>
|
||
</div>
|
||
<h2 className="text-xl font-bold text-white">
|
||
تضمین پایداری، یکپارچگی داده‌ها و امنیت در بالاترین سطح
|
||
</h2>
|
||
<p className="text-xs text-gray-400 max-w-xl">
|
||
تمام سامانه‌ها منطبق بر معماری‌های ایزوله، تست‌های بار سنگین و مکانیزم‌های بازیابی خودکار (Disaster Recovery) پیاده‌سازی می‌شوند.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="shrink-0">
|
||
<div className="px-5 py-3 rounded-xl bg-gray-950/80 border border-indigo-500/30 font-mono text-center">
|
||
<span className="block text-2xl font-bold text-indigo-300">99.98%</span>
|
||
<span className="text-[11px] text-gray-500">SYSTEM AVAILABILITY</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|