a

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>
+  );
+}