a.golshani/company-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
a.golshani
2026-09-13 15:44:15 +03:30
parent 71cd5c8072
commit 16cba4492a
9 changed files with 1499 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/about/page.tsx
+303
View File
@@ -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>
);
}