a

app/about/page.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { motion } from 'framer-motion';
+import { 
+  Terminal, 
+  Mail, 
+  Cpu, 
+  ShieldCheck, 
+  Layers, 
+  Activity, 
+  CheckCircle2, 
+  Server
+} from 'lucide-react';
+import Footer from '@/components/shared/footer';
+
+// آیکون اختصاصی لینکدین
+function LinkedInIcon({ className = 'w-4 h-4' }: { className?: string }) {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 8.76c-.97 0-1.75-.79-1.75-1.76s.78-1.75 1.75-1.75c.97 0 1.76.78 1.76 1.75s-.79 1.76-1.76 1.76m1.37 9.74v-8.37H5.1v8.37h2.73z" />
+    </svg>
+  );
+}
+
+interface BoardMember {
+  name: string;
+  role: string;
+  title: string;
+  image: string;
+  linkedin?: string;
+  email?: string;
+}
+
+const boardMembers: BoardMember[] = [
+  {
+    name: 'نام و نام‌خانوادگی عضو ۱',
+    role: 'رئیس هیئت مدیره',
+    title: 'دکتری مدیریت فناوری اطلاعات',
+    image: '/images/team/member-1.jpg',
+    linkedin: 'https://linkedin.com',
+    email: 'board1@company.ir'
+  },
+  {
+    name: 'نام و نام‌خانوادگی عضو ۲',
+    role: 'مدیرعامل و عضو هیئت مدیره',
+    title: 'کارشناس ارشد مهندسی نرم‌افزار',
+    image: '/images/team/member-2.jpg',
+    linkedin: 'https://linkedin.com',
+    email: 'board2@company.ir'
+  },
+  {
+    name: 'نام و نام‌خانوادگی عضو ۳',
+    role: 'نایب‌رئیس هیئت مدیره',
+    title: 'کارشناس ارشد مدیریت سیستم‌ها',
+    image: '/images/team/member-3.jpg',
+    linkedin: 'https://linkedin.com',
+    email: 'board3@company.ir'
+  }
+];
+
+export default function AboutPage() {
+  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-28">
+        
+        {/* ۱. بخش معرفی مدرن و جذاب شرکت (Company Overview) */}
+        <section className="space-y-12">
+          
+          {/* ردیف اصلی Hero */}
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
+            
+            {/* سمت راست: بیانیه مأموریت و توضیحات */}
+            <motion.div 
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5 }}
+              className="lg:col-span-7 space-y-6"
+            >
+              {/* تگ وضعیت سیستم */}
+              <div className="inline-flex items-center gap-2.5 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">
+                <span className="relative flex h-2 w-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                </span>
+                <span className="tracking-wide">Enterprise FinTech & System Engineering</span>
+              </div>
+
+              {/* تیتر با افکت گرادیان نوری */}
+              <h1 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>
+              </h1>
+
+              {/* متن معرفی */}
+              <p className="text-gray-300 text-base sm:text-lg leading-relaxed text-justify">
+                ما به عنوان بازوی تخصصی فناوری، با تکیه بر معماری‌های توزیع‌شده و استانداردهای روز نرم‌افزاری، سامانه‌های حیاتی بانکی را بازطراحی و پشتیبانی می‌کنیم. مأموریت ما تضمین تاب‌آوری بالا، پردازش بدون تأخیر داده‌ها و ارائه تجربه‌ای روان و پایدار در بسترهای بزرگ‌مقیاس سازمانی است.
+              </p>
+
+              {/* بج‌های ویژگی‌ها */}
+              <div className="flex flex-wrap gap-3 pt-2">
+                {['High-Availability', 'Event-Driven', 'Modular Architecture', 'Zero-Trust Security'].map((item) => (
+                  <span 
+                    key={item} 
+                    className="text-xs font-mono px-3 py-1 rounded-md bg-gray-900 border border-gray-800 text-gray-400 hover:border-indigo-500/40 hover:text-indigo-300 transition-colors"
+                  >
+                    #{item}
+                  </span>
+                ))}
+              </div>
+            </motion.div>
+
+            {/* سمت چپ: کارت وضعیت زنده و تله‌متری مهندسی */}
+            <motion.div 
+              initial={{ opacity: 0, scale: 0.96 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: 0.15 }}
+              className="lg:col-span-5"
+            >
+              <div className="relative rounded-2xl p-6 bg-gradient-to-b from-gray-900/90 to-gray-950 border border-indigo-500/20 shadow-2xl backdrop-blur-xl overflow-hidden group">
+                
+                {/* نور پس‌زمینه کارت */}
+                <div className="absolute -top-16 -left-16 w-36 h-36 bg-indigo-500/10 rounded-full blur-2xl group-hover:bg-indigo-500/20 transition-all duration-500" />
+                
+                {/* هدر مینی ترمینال */}
+                <div className="flex items-center justify-between pb-4 border-b border-gray-800/80 mb-5">
+                  <div className="flex items-center gap-2">
+                    <Terminal className="w-4 h-4 text-indigo-400" />
+                    <span className="font-mono text-xs text-gray-300">system.metrics.live</span>
+                  </div>
+                  <div className="flex gap-1.5">
+                    <div className="w-2.5 h-2.5 rounded-full bg-gray-700"></div>
+                    <div className="w-2.5 h-2.5 rounded-full bg-gray-700"></div>
+                    <div className="w-2.5 h-2.5 rounded-full bg-emerald-500"></div>
+                  </div>
+                </div>
+
+                {/* آمارهای تله‌متری در قالب شبکه تمیز */}
+                <div className="space-y-4">
+                  <div className="p-3.5 rounded-xl bg-gray-950/60 border border-gray-800/60 flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <Activity className="w-4 h-4 text-indigo-400" />
+                      <span className="text-xs text-gray-400 font-medium">آپ‌تایم و پایداری شبکه</span>
+                    </div>
+                    <span className="font-mono text-sm font-bold text-emerald-400">99.98% SLA</span>
+                  </div>
+
+                  <div className="p-3.5 rounded-xl bg-gray-950/60 border border-gray-800/60 flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <Server className="w-4 h-4 text-sky-400" />
+                      <span className="text-xs text-gray-400 font-medium">پردازش تراکنش‌ها</span>
+                    </div>
+                    <span className="font-mono text-sm font-bold text-white">+10M / Daily</span>
+                  </div>
+
+                  <div className="p-3.5 rounded-xl bg-gray-950/60 border border-gray-800/60 flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <CheckCircle2 className="w-4 h-4 text-purple-400" />
+                      <span className="text-xs text-gray-400 font-medium">زمان پاسخ‌دهی (Latency)</span>
+                    </div>
+                    <span className="font-mono text-sm font-bold text-indigo-300">&lt; 25 ms</span>
+                  </div>
+                </div>
+
+                <div className="mt-5 pt-4 border-t border-gray-800/60 flex justify-between items-center text-[11px] font-mono text-gray-500">
+                  <span>Architecture: Distributed CQRS</span>
+                  <span className="text-emerald-500 font-semibold">ALL SYSTEMS NOMINAL</span>
+                </div>
+              </div>
+            </motion.div>
+
+          </div>
+
+          {/* ۳ ستون کارت‌های تفکیک مأموریت مهندسی */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-5 pt-4">
+            
+            <div className="p-5 rounded-xl bg-gray-900/40 border border-gray-800/80 hover:border-indigo-500/30 transition-all group">
+              <div className="w-10 h-10 rounded-lg bg-indigo-950/60 border border-indigo-500/20 flex items-center justify-center mb-4 text-indigo-400 group-hover:text-white group-hover:bg-indigo-600/30 transition-colors">
+                <Layers className="w-5 h-5" />
+              </div>
+              <h3 className="text-sm font-bold text-white mb-2">معماری مقیاس‌پذیر و ماژولار</h3>
+              <p className="text-xs text-gray-400 leading-relaxed">
+                استفاده از الگوهای توزیع‌شده، Message Brokerها و مدیریت بار سنگین برای تضمین انعطاف و توسعه‌پذیری مستمر.
+              </p>
+            </div>
+
+            <div className="p-5 rounded-xl bg-gray-900/40 border border-gray-800/80 hover:border-indigo-500/30 transition-all group">
+              <div className="w-10 h-10 rounded-lg bg-sky-950/60 border border-sky-500/20 flex items-center justify-center mb-4 text-sky-400 group-hover:text-white group-hover:bg-sky-600/30 transition-colors">
+                <ShieldCheck className="w-5 h-5" />
+              </div>
+              <h3 className="text-sm font-bold text-white mb-2">امنیت و استانداردهای بانکی</h3>
+              <p className="text-xs text-gray-400 leading-relaxed">
+                انطباق با بالاترین شاخص‌های امنیتی مالی، ایزولاسیون سرویس‌ها و احراز هویت یکپارچه سازمانی.
+              </p>
+            </div>
+
+            <div className="p-5 rounded-xl bg-gray-900/40 border border-gray-800/80 hover:border-indigo-500/30 transition-all group">
+              <div className="w-10 h-10 rounded-lg bg-purple-950/60 border border-purple-500/20 flex items-center justify-center mb-4 text-purple-400 group-hover:text-white group-hover:bg-purple-600/30 transition-colors">
+                <Activity className="w-5 h-5" />
+              </div>
+              <h3 className="text-sm font-bold text-white mb-2">پایش و تاب‌آوری بلادرنگ</h3>
+              <p className="text-xs text-gray-400 leading-relaxed">
+                تله‌متری مداوم، سیستم‌های Failover خودکار و بهینه‌سازی مداوم کوئری‌ها جهت حداقل‌سازی Down-time.
+              </p>
+            </div>
+
+          </div>
+
+        </section>
+
+        {/* ۲. اعضای هیئت مدیره */}
+        <section className="space-y-10">
+          <div className="space-y-1 border-b border-gray-800/80 pb-4">
+            <h2 className="text-2xl font-bold text-white tracking-tight">ارکان راهبری و هیئت مدیره</h2>
+            <p className="text-xs text-gray-500 font-mono uppercase tracking-wider">Leadership & Governance</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {boardMembers.map((member, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.3, delay: index * 0.08 }}
+                className="group relative bg-gray-900/30 border border-gray-800/80 hover:border-indigo-500/30 rounded-xl p-6 flex flex-col items-center text-center transition-all duration-200"
+              >
+                {/* تصویر پرسنلی / آواتار */}
+                <div className="relative w-24 h-24 mb-4 rounded-full p-1 bg-gray-800 group-hover:bg-indigo-900/30 transition-colors">
+                  <div className="relative w-full h-full rounded-full overflow-hidden bg-gray-900 flex items-center justify-center">
+                    <Cpu className="w-8 h-8 text-gray-600 group-hover:text-indigo-400 transition-colors" />
+                    {member.image && (
+                      <Image
+                        src={member.image}
+                        alt={member.name}
+                        fill
+                        className="object-cover grayscale group-hover:grayscale-0 transition-all duration-300"
+                        onError={(e) => {
+                          const target = e.target as HTMLElement;
+                          target.style.display = 'none';
+                        }}
+                      />
+                    )}
+                  </div>
+                </div>
+
+                {/* اطلاعات */}
+                <h3 className="text-base font-semibold text-white group-hover:text-indigo-200 transition-colors">
+                  {member.name}
+                </h3>
+                
+                <span className="text-xs font-medium text-indigo-400 mt-1">
+                  {member.role}
+                </span>
+
+                <p className="text-[12px] text-gray-500 mt-1.5 font-mono">
+                  {member.title}
+                </p>
+
+                {/* لینک‌های ارتباطی */}
+                <div className="flex items-center gap-2 mt-4 pt-3 border-t border-gray-800/60 w-full justify-center text-gray-400">
+                  {member.linkedin && (
+                    <a
+                      href={member.linkedin}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="p-1.5 rounded-lg hover:text-white hover:bg-gray-800/80 transition-colors"
+                      title="پروفایل لینکدین"
+                    >
+                      <LinkedInIcon className="w-4 h-4" />
+                    </a>
+                  )}
+                  {member.email && (
+                    <a
+                      href={`mailto:${member.email}`}
+                      className="p-1.5 rounded-lg hover:text-white hover:bg-gray-800/80 transition-colors"
+                      title="ارسال ایمیل"
+                    >
+                      <Mail className="w-4 h-4" />
+                    </a>
+                  )}
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

app/contact/page.tsx

@@ -0,0 +1,345 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import {
+  Terminal,
+  Send,
+  ShieldCheck,
+  CheckCircle2,
+  Server,
+  Database,
+  Cpu,
+  Mail,
+  Phone,
+  MapPin,
+  Clock,
+  Layers,
+  Sparkles
+} from 'lucide-react';
+
+// دسته‌بندی‌های فنی پروژه
+const projectCategories = [
+  { id: 'core-banking', label: 'سامانه‌ها و ماژول‌های بانکی', icon: Server },
+  { id: 'db-optimization', label: 'پایگاه‌داده و مقیاس‌پذیری', icon: Database },
+  { id: 'ai-engine', label: 'هوش مصنوعی و پردازش اسناد', icon: Cpu },
+  { id: 'custom-platform', label: 'داشبوردها و سامانه‌های عملیاتی', icon: Layers }
+];
+
+// مراحل اجرای پروژه
+const workflowSteps = [
+  {
+    step: '01',
+    title: 'ارزیابی فنی اولیه (Discovery)',
+    desc: 'بررسی ساختار، نیازمندی‌های مقیاس‌پذیری و مشخصات دامنه کسب‌وکار در جلسات فنی مشترک.'
+  },
+  {
+    step: '02',
+    title: 'طراحی معماری و قرارداد SLA',
+    desc: 'تدوین بلوک‌های دیاگرام معماری، تعیین استک فنی، استانداردسازی امنیتی و شاخص‌های کیفی.'
+  },
+  {
+    step: '03',
+    title: 'توسعه اسپرینت‌محور و ایزوله',
+    desc: 'پیاده‌سازی ماژول‌ها همراه با خطوط CI/CD خودکار، کانتینرسازی و تست‌های مداوم پوشش کد.'
+  },
+  {
+    step: '04',
+    title: 'تست بار، بازبینی و استقرار',
+    desc: 'انجام بنچ‌مارک‌های زیر بار سنگین، بازرسی‌های امنیتی و لانچ نهایی بدون Downtime.'
+  }
+];
+
+export default function ContactPage() {
+  const [selectedCategory, setSelectedCategory] = useState('core-banking');
+  const [formSubmitted, setFormSubmitted] = useState(false);
+  const [ticketId, setTicketId] = useState('');
+  const [formData, setFormData] = useState({
+    fullName: '',
+    organization: '',
+    email: '',
+    phone: '',
+    description: ''
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // تولید شناسه تیکت در سمت کلاینت برای جلوگیری از خطای Hydration
+    const generatedId = Math.floor(100000 + Math.random() * 900000).toString();
+    setTicketId(generatedId);
+    setFormSubmitted(true);
+  };
+
+  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 Ambient Gradients */}
+      <div className="fixed inset-0 bg-[radial-gradient(ellipse_70%_60%_at_50%_-10%,rgba(99,102,241,0.09),rgba(255,255,255,0))] pointer-events-none" />
+      <div className="fixed inset-0 bg-[linear-gradient(to_right,#1f293712_1px,transparent_1px),linear-gradient(to_bottom,#1f293712_1px,transparent_1px)] bg-[size:40px_40px] pointer-events-none" />
+
+      <main className="relative max-w-6xl mx-auto px-6 py-16 w-full space-y-16">
+        
+        {/* ۱. Hero Section */}
+        <section className="text-center max-w-3xl mx-auto space-y-5">
+          <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"
+          >
+            <Terminal className="w-3.5 h-3.5 text-indigo-400" />
+            <span>KICKOFF & COLLABORATION TERMINAL</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"
+          >
+            آغاز یک همکاری مهندسی، <br />
+            <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>
+
+        {/* ۲. Main Form & Side Info Section */}
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+          
+          {/* ستون فرم شروع پروژه (۸ ستون) */}
+          <motion.div 
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5, delay: 0.25 }}
+            className="lg:col-span-8 p-6 sm:p-8 rounded-2xl bg-gray-900/40 border border-gray-800/80 backdrop-blur-md shadow-2xl relative"
+          >
+            {formSubmitted ? (
+              <div className="text-center py-12 space-y-4">
+                <div className="w-16 h-16 mx-auto rounded-2xl bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
+                  <CheckCircle2 className="w-8 h-8" />
+                </div>
+                <h3 className="text-xl font-bold text-white">درخواست با موفقیت ثبت شد</h3>
+                <p className="text-sm text-gray-400 max-w-md mx-auto leading-relaxed">
+                  مشخصات اولیه دریافت شد. تیم فنی حداکثر ظرف ۲۴ ساعت کاری جهت هماهنگی جلسه ارزیابی اولیه با شما تماس خواهند گرفت.
+                </p>
+                <div className="pt-3 font-mono text-xs text-indigo-400 bg-indigo-950/30 py-2 px-4 rounded-lg inline-block border border-indigo-500/20">
+                  SYSTEM TICKET: #REQ-{ticketId}
+                </div>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-6">
+                
+                {/* انتخاب نوع پروژه */}
+                <div className="space-y-3">
+                  <label className="block text-xs font-mono text-gray-400">
+                    // ۰۱. نوع پروژه و قلمرو فنی:
+                  </label>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    {projectCategories.map((cat) => {
+                      const Icon = cat.icon;
+                      const active = selectedCategory === cat.id;
+                      return (
+                        <button
+                          type="button"
+                          key={cat.id}
+                          onClick={() => setSelectedCategory(cat.id)}
+                          className={`flex items-center gap-3 p-3 rounded-xl border text-right transition-all duration-200 text-xs font-medium ${
+                            active
+                              ? 'border-indigo-500 bg-indigo-950/40 text-white shadow-sm ring-1 ring-indigo-500/40'
+                              : 'border-gray-800 bg-gray-950/50 text-gray-400 hover:border-gray-700 hover:text-gray-300'
+                          }`}
+                        >
+                          <Icon className={`w-4 h-4 shrink-0 ${active ? 'text-indigo-400' : 'text-gray-500'}`} />
+                          <span>{cat.label}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                {/* فیلدهای مشخصات اولیه */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <label className="block text-xs font-mono text-gray-400">نام و نام خانوادگی:</label>
+                    <input
+                      required
+                      type="text"
+                      placeholder="مثال: علی رضایی"
+                      className="w-full px-4 py-2.5 rounded-xl bg-gray-950 border border-gray-800 text-sm text-gray-200 focus:outline-none focus:border-indigo-500 transition-colors"
+                      value={formData.fullName}
+                      onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="block text-xs font-mono text-gray-400">سازمان / شرکت:</label>
+                    <input
+                      required
+                      type="text"
+                      placeholder="مثال: هلدینگ / بانک"
+                      className="w-full px-4 py-2.5 rounded-xl bg-gray-950 border border-gray-800 text-sm text-gray-200 focus:outline-none focus:border-indigo-500 transition-colors"
+                      value={formData.organization}
+                      onChange={(e) => setFormData({ ...formData, organization: e.target.value })}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="block text-xs font-mono text-gray-400">ایمیل سازمانی:</label>
+                    <input
+                      required
+                      type="email"
+                      placeholder="name@domain.com"
+                      className="w-full px-4 py-2.5 rounded-xl bg-gray-950 border border-gray-800 text-sm text-gray-200 focus:outline-none focus:border-indigo-500 transition-colors font-sans"
+                      value={formData.email}
+                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="block text-xs font-mono text-gray-400">شماره تماس مستقیم:</label>
+                    <input
+                      required
+                      type="tel"
+                      placeholder="09120000000"
+                      className="w-full px-4 py-2.5 rounded-xl bg-gray-950 border border-gray-800 text-sm text-gray-200 focus:outline-none focus:border-indigo-500 transition-colors font-sans"
+                      value={formData.phone}
+                      onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+                    />
+                  </div>
+                </div>
+
+                {/* توضیحات نیازمندی‌ها */}
+                <div className="space-y-2">
+                  <label className="block text-xs font-mono text-gray-400">
+                    توضیحات و خلاصه نیازمندی‌های فنی:
+                  </label>
+                  <textarea
+                    rows={4}
+                    placeholder="شرح مسئله، ماژول‌های مدنظر، ددلاین‌ها یا ویژگی‌های معماری..."
+                    className="w-full px-4 py-3 rounded-xl bg-gray-950 border border-gray-800 text-sm text-gray-200 focus:outline-none focus:border-indigo-500 transition-colors resize-none leading-relaxed"
+                    value={formData.description}
+                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                  />
+                </div>
+
+                {/* دکمه ارسال و تضمین محرمانگی */}
+                <div className="pt-2 flex flex-col sm:flex-row items-center justify-between gap-4">
+                  <div className="flex items-center gap-2 text-[11px] text-gray-500">
+                    <ShieldCheck className="w-4 h-4 text-emerald-400 shrink-0" />
+                    <span>تضمین محرمانگی اطلاعات تحت توافق‌نامه سازمانی NDA.</span>
+                  </div>
+
+                  <button
+                    type="submit"
+                    className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold transition-all duration-200 shadow-lg shadow-indigo-600/20 active:scale-95 cursor-pointer"
+                  >
+                    <span>ارسال درخواست ارزیابی</span>
+                    <Send className="w-3.5 h-3.5 rtl:-rotate-90" />
+                  </button>
+                </div>
+              </form>
+            )}
+          </motion.div>
+
+          {/* ستون اطلاعات ارتباطی و مستقیم (۴ ستون) */}
+          <motion.div 
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5, delay: 0.3 }}
+            className="lg:col-span-4 space-y-4"
+          >
+            {/* کارت ارتباط مستقیم */}
+            <div className="p-6 rounded-2xl bg-gray-900/40 border border-gray-800/80 space-y-5">
+              <h3 className="text-sm font-bold text-white flex items-center gap-2">
+                <Sparkles className="w-4 h-4 text-indigo-400" />
+                <span>کانال‌های ارتباط مستقیم</span>
+              </h3>
+
+              <div className="space-y-4">
+                <div className="flex items-start gap-3 text-xs">
+                  <div className="p-2 rounded-lg bg-gray-950 border border-gray-800 text-indigo-400 shrink-0">
+                    <Mail className="w-4 h-4" />
+                  </div>
+                  <div>
+                    <span className="block text-[11px] text-gray-500 font-mono">DIRECT INBOX</span>
+                    <span className="text-gray-300 font-mono select-all">engineering@domain.ir</span>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-3 text-xs">
+                  <div className="p-2 rounded-lg bg-gray-950 border border-gray-800 text-sky-400 shrink-0">
+                    <Phone className="w-4 h-4" />
+                  </div>
+                  <div>
+                    <span className="block text-[11px] text-gray-500 font-mono">TECHNICAL LINE</span>
+                    <span className="text-gray-300 font-mono dir-ltr">+98 (21) 8800-0000</span>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-3 text-xs">
+                  <div className="p-2 rounded-lg bg-gray-950 border border-gray-800 text-emerald-400 shrink-0">
+                    <MapPin className="w-4 h-4" />
+                  </div>
+                  <div>
+                    <span className="block text-[11px] text-gray-500 font-mono">LOCATION</span>
+                    <span className="text-gray-300 leading-relaxed">تهران، نارمک، پردیس نوآوری</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* کارت تعهد SLA */}
+            <div className="p-5 rounded-2xl bg-gradient-to-br from-indigo-950/20 to-gray-900/40 border border-indigo-500/20 space-y-2">
+              <div className="flex items-center gap-2 text-indigo-300 text-xs font-bold">
+                <Clock className="w-3.5 h-3.5" />
+                <span>تضمین پاسخ‌گویی فنی</span>
+              </div>
+              <p className="text-xs text-gray-400 leading-relaxed">
+                تمام درخواست‌های پروژه‌ای ظرف حداکثر ۲۴ ساعت مورد بررسی معماری قرار گرفته و پروپوزال فازبندی آماده می‌گردد.
+              </p>
+            </div>
+          </motion.div>
+
+        </div>
+
+        {/* ۳. نقشه راه و پایپ‌لاین همکاری (Workflow) */}
+        <section className="space-y-6 pt-4">
+          <div className="flex items-center gap-2 text-xs font-mono text-gray-400">
+            <span className="w-2 h-2 rounded-full bg-indigo-500"></span>
+            <span>// ۰۲. مراحل آغاز تا تحویل عملیاتی:</span>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {workflowSteps.map((item, idx) => (
+              <div
+                key={idx}
+                className="p-5 rounded-2xl bg-gray-900/30 border border-gray-800/80 hover:border-gray-700 transition-all flex flex-col justify-between"
+              >
+                <div>
+                  <span className="font-mono text-2xl font-black text-transparent bg-clip-text bg-gradient-to-l from-indigo-400 to-white block mb-3">
+                    {item.step}
+                  </span>
+                  <h4 className="text-sm font-bold text-gray-200 mb-2">{item.title}</h4>
+                  <p className="text-xs text-gray-400 leading-relaxed">{item.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+      </main>
+
+      {/* Footer ساده و هماهنگ */}
+      <footer className="border-t border-gray-900 py-6 text-center text-xs text-gray-600 font-mono">
+        SYSTEM ENGINEERING // ENTERPRISE ARCHITECTURE
+      </footer>
+    </div>
+  );
+}

app/page.tsx

@@ -2,6 +2,8 @@ import CtaBanner from "@/components/banner/CtaBanner";
 import  HeroSection  from "@/components/features/home/hero-section";
 import  ProjectsSection  from "@/components/features/projects/projects-section";
 import { ServicesBentoGrid } from "@/components/features/services/services-bento-grid";
+ import { Footer } from "@/components/shared/footer";
+
 
 export default function Home() {
   return (
@@ -10,6 +12,7 @@ export default function Home() {
        <ProjectsSection/>
        <CtaBanner/>
       <ServicesBentoGrid />
+      <Footer/>
     </main>
   );
 }

app/project/page.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import React from "react";
+import { motion } from "framer-motion";
+import Header from "@/components/shared/header";
+import Footer from "@/components/shared/footer";
+import { 
+  ExternalLink, 
+  GitBranch, 
+  CheckCircle2, 
+  Workflow, 
+  ShieldCheck,
+  Database,
+  Terminal
+} from "lucide-react";
+
+interface ProjectItem {
+  id: number;
+  title: string;
+  category: string;
+  description: string;
+  highlights: string[];
+  techStack: string[];
+  status: string;
+}
+
+const projectsData: ProjectItem[] = [
+  {
+    id: 1,
+    title: "سامانه یکپارچه پرتال و اینترانت بانکی",
+    category: "سیستم‌های سازمانی و اینترانت",
+    description: "طراحی و توسعه معماری متمرکز جهت مدیریت احراز هویت، کارتابل سازمانی، ماژول‌های آماری و دسترسی‌پذیری بالا برای پرسنل شعب.",
+    highlights: [
+      "مدیریت سطوح دسترسی پیچیده (RBAC) و احراز هویت متمرکز",
+      "معماری ماژولار کارتابل با پشتیبانی از صف‌های پردازشی سنگین",
+      "یکپارچه‌سازی با هسته سامانه‌های بانکی (Core Banking)"
+    ],
+    techStack: ["Laravel 11", "PostgreSQL", "Redis", "Filament", "Docker"],
+    status: "Production / Enterprise"
+  },
+  {
+    id: 2,
+    title: "سامانه هوشمند مدیریت شیفت و پرسنل بانکی",
+    category: "پلتفرم عملیاتی و لجستیک",
+    description: "پیاده‌سازی موتور تخصیص خودکار شیفت‌ها، مدیریت جایگزینی و اعلان‌های آنی جهت بهینه‌سازی توزیع نیروی انسانی در شبکه شعب.",
+    highlights: [
+      "الگوریتم زمان‌بندی پویا جهت پیشگیری از تداخل کاری",
+      "سیستم اعلان‌های بلادرنگ (Real-time WebSockets)",
+      "گزارش‌گیری تحلیلی با بازدهی بالا و کشینگ چندلایه‌ای"
+    ],
+    techStack: ["FastAPI", "Python", "PostgreSQL", "Redis", "React"],
+    status: "Deployed"
+  },
+  {
+    id: 3,
+    title: "پایپ‌لاین رویدادمحور و موتور پردازش داده (TMS & Store)",
+    category: "معماری توزیع‌شده و میکروسرویس",
+    description: "طراحی زیرساخت پردازش غیرهمگام رویدادها جهت مدیریت دوره‌های آموزشی سازمانی و ثبت سفارشات درون‌سازمانی با تضمین تحویل پیام.",
+    highlights: [
+      "به‌کارگیری Kafka و RabbitMQ برای انتشار و مصرف پیام‌ها",
+      "طراحی الگوهای Idempotency و Circuit Breaker در ارتباطات",
+      "کاهش لیتنسی پردازش داده‌های حجیم به زیر ۵۰ میلی‌ثانیه"
+    ],
+    techStack: ["Laravel", "Kafka", "RabbitMQ", "Docker", "CI/CD"],
+    status: "Microservices"
+  },
+  {
+    id: 4,
+    title: "موتور جستجوی معنایی و پایگاه دانش برداری (RAG)",
+    category: "سیستم‌های مبتنی بر هوش مصنوعی",
+    description: "طراحی و استقرار پایپ‌لاین تولید و نمایه‌سازی بردارهای متنی مستندات بانکی جهت پرسش‌وپاسخ هوشمند و بازیابی دقیق اسناد سازمانی.",
+    highlights: [
+      "ذخیره‌سازی و کوئری‌گیری پرسرعت با Qdrant Vector Database",
+      "استراتژی Chunking بهینه‌شده برای اسناد فارسی و اصطلاحات تخصصی",
+      "اتصال امن به مدل‌های زبانی محلی بدون خروج داده‌های محرمانه"
+    ],
+    techStack: ["Python", "FastAPI", "Qdrant", "PostgreSQL", "Docker"],
+    status: "R&D / Production"
+  }
+];
+
+export default function ProjectsPage() {
+  return (
+    <div dir="rtl" className="flex min-h-screen flex-col bg-gray-950 text-gray-200 font-sans selection:bg-indigo-500/30 selection:text-indigo-200">
+      <Header />
+
+      <main className="flex-1 overflow-hidden relative">
+        {/* پترن گرید ۲۴ پیکسلی */}
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#1f29371f_1px,transparent_1px),linear-gradient(to_bottom,#1f29371f_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />
+
+        {/* بخش هدر صفحه */}
+        <section className="relative px-6 pt-32 pb-16 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="mx-auto max-w-3xl"
+          >
+            <div className="inline-flex items-center gap-2 px-3 py-1 mb-4 rounded-full bg-indigo-950/40 border border-indigo-500/30 text-indigo-400 text-xs font-mono">
+              <GitBranch className="w-3.5 h-3.5" />
+              <span>پروژه‌ها و سیستم‌های مقیاس‌پذیر</span>
+            </div>
+
+            <h1 className="mb-5 text-3xl font-extrabold tracking-tight text-white md:text-5xl">
+              معماری نرم‌افزار، <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-cyan-400 to-emerald-400">سامانه‌های سازمانی</span> و بک‌اند
+            </h1>
+            <p className="text-sm md:text-base text-gray-400 leading-relaxed max-w-2xl mx-auto">
+              نمونه‌ای از سیستم‌های تحت وب، میکروسرویس‌ها و پایپ‌لاین‌های مقیاس‌پذیر که با تمرکز بر امنیت، کارایی بالا و پایداری شبکه توسعه یافته‌اند.
+            </p>
+          </motion.div>
+        </section>
+
+        {/* تایم‌لاین پروژه‌ها */}
+        <section className="relative mx-auto max-w-7xl px-6 py-10 mb-20">
+          <div className="absolute left-1/2 top-0 hidden h-full w-[1px] -translate-x-1/2 bg-gradient-to-b from-transparent via-gray-800 to-transparent lg:block" />
+
+          <div className="flex flex-col gap-20 lg:gap-28">
+            {projectsData.map((project, index) => {
+              const isEven = index % 2 === 0;
+
+              return (
+                <div
+                  key={project.id}
+                  className={`relative flex flex-col items-center gap-10 lg:flex-row lg:justify-between ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  }`}
+                >
+                  {/* نشانگر تایم‌لاین وسط صفحه */}
+                  <div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 lg:flex">
+                    <div className="relative flex h-11 w-11 items-center justify-center rounded-full border border-gray-700 bg-gray-900 shadow-xl shadow-black/80">
+                      <span className="text-xs font-mono font-bold text-indigo-300">0{project.id}</span>
+                      <div className="absolute inset-0 -z-10 animate-ping rounded-full bg-indigo-500/20" />
+                    </div>
+                  </div>
+
+                  {/* ستون متن و توضیحات */}
+                  <motion.div
+                    initial={{ opacity: 0, x: isEven ? 40 : -40 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true, margin: "-80px" }}
+                    transition={{ duration: 0.6 }}
+                    className="w-full lg:w-[46%]"
+                  >
+                    <div className="space-y-4 text-right">
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-mono font-medium text-indigo-400 bg-indigo-950/60 border border-indigo-800/40 px-2.5 py-0.5 rounded-md">
+                          {project.category}
+                        </span>
+                        <span className="text-xs font-mono text-gray-500">
+                          {project.status}
+                        </span>
+                      </div>
+
+                      <h2 className="text-2xl font-bold text-gray-100 md:text-3xl">
+                        {project.title}
+                      </h2>
+
+                      <p className="text-sm leading-relaxed text-gray-400">
+                        {project.description}
+                      </p>
+
+                      <div className="space-y-2 pt-2">
+                        {project.highlights.map((highlight, idx) => (
+                          <div key={idx} className="flex items-start gap-2 text-xs text-gray-300">
+                            <CheckCircle2 className="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" />
+                            <span>{highlight}</span>
+                          </div>
+                        ))}
+                      </div>
+
+                      <div className="flex flex-wrap gap-2 pt-3">
+                        {project.techStack.map((tech, idx) => (
+                          <span
+                            key={idx}
+                            className="text-[11px] font-mono px-2.5 py-1 rounded bg-gray-900/90 border border-gray-800 text-gray-300 hover:border-gray-700 transition-colors"
+                          >
+                            {tech}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  </motion.div>
+
+                  {/* ستون کارت سیستم */}
+                  <motion.div
+                    initial={{ opacity: 0, x: isEven ? -40 : 40 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true, margin: "-80px" }}
+                    transition={{ duration: 0.6 }}
+                    className="w-full lg:w-[46%]"
+                  >
+                    <div className="relative rounded-2xl border border-gray-800 bg-gray-900/50 p-6 backdrop-blur-md shadow-2xl hover:border-gray-700 transition-colors">
+                      <div className="flex items-center justify-between border-b border-gray-800/80 pb-3 mb-4">
+                        <div className="flex items-center gap-1.5">
+                          <div className="w-2.5 h-2.5 rounded-full bg-rose-500/80" />
+                          <div className="w-2.5 h-2.5 rounded-full bg-amber-500/80" />
+                          <div className="w-2.5 h-2.5 rounded-full bg-emerald-500/80" />
+                        </div>
+                        <div className="text-[11px] font-mono text-gray-500 flex items-center gap-1">
+                          <Terminal className="w-3.5 h-3.5 text-indigo-400" />
+                          <span>system://node.svc_0{project.id}</span>
+                        </div>
+                      </div>
+
+                      <div className="space-y-3 font-mono text-xs">
+                        <div className="p-3 rounded-lg bg-gray-950/70 border border-gray-800/60">
+                          <div className="text-gray-500 text-[10px] mb-1">سطح دسترس‌پذیری و امنیت:</div>
+                          <div className="text-emerald-400 flex items-center gap-1.5 font-sans">
+                            <ShieldCheck className="w-3.5 h-3.5" />
+                            <span>High Availability • Multi-layer Auth</span>
+                          </div>
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-2">
+                          <div className="p-2.5 rounded-lg bg-gray-950/70 border border-gray-800/60">
+                            <div className="text-gray-500 text-[10px] flex items-center gap-1 mb-1">
+                              <Database className="w-3 h-3 text-indigo-400" />
+                              <span>دیتابیس / کش</span>
+                            </div>
+                            <div className="text-gray-300 font-semibold text-[11px]">PostgreSQL + Redis</div>
+                          </div>
+                          <div className="p-2.5 rounded-lg bg-gray-950/70 border border-gray-800/60">
+                            <div className="text-gray-500 text-[10px] flex items-center gap-1 mb-1">
+                              <Workflow className="w-3 h-3 text-cyan-400" />
+                              <span>جریان پیام‌ها</span>
+                            </div>
+                            <div className="text-indigo-300 font-semibold text-[11px]">Async Queues</div>
+                          </div>
+                        </div>
+
+                        <div className="p-3 rounded-lg bg-gray-950/70 border border-gray-800/60 text-gray-400 text-[11px] leading-relaxed" dir="ltr">
+                          <span className="text-indigo-400">$</span> runtime.optimize(--workers=8 --cache=redis)
+                          <br />
+                          <span className="text-emerald-500 font-bold">✓</span> status: operational [200 OK]
+                        </div>
+                      </div>
+                    </div>
+                  </motion.div>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+
+        {/* بنر فراخوان نهایی */}
+        <section className="relative px-6 pb-20">
+          <div className="mx-auto max-w-5xl rounded-2xl border border-gray-800 bg-gradient-to-b from-gray-900/80 to-gray-950 p-8 md:p-12 text-center relative overflow-hidden shadow-2xl">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none" />
+            <div className="relative z-10 max-w-2xl mx-auto space-y-4">
+              <h3 className="text-2xl md:text-3xl font-bold text-white">
+                آماده پیاده‌سازی و توسعه سیستم‌های پیچیده
+              </h3>
+              <p className="text-xs md:text-sm text-gray-400 leading-relaxed">
+                اگر نیاز به مشاوره معماری نرم‌افزار، مقیاس‌پذیری سرویس‌ها یا پیاده‌سازی ماژول‌های اینترانت و سازمانی دارید، در ارتباط باشید.
+              </p>
+              <div className="pt-2">
+                <a
+                  href="mailto:contact@example.com"
+                  className="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold shadow-lg shadow-indigo-600/30 transition-all hover:scale-105"
+                >
+                  <span>شروع همکاری فنی</span>
+                  <ExternalLink className="w-3.5 h-3.5" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

app/services/page.tsx

@@ -0,0 +1,282 @@
+'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>
+  );
+}