a
This commit is contained in:
@@ -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">< 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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const customEase: [number, number, number, number] = [0.16, 1, 0.3, 1];
|
||||
|
||||
export default function CtaBanner() {
|
||||
return (
|
||||
<section
|
||||
className="relative py-32 px-4 md:px-8 bg-gray-950 overflow-hidden"
|
||||
<section
|
||||
className="relative py-28 md:py-36 px-4 md:px-8 bg-gray-950 overflow-hidden flex items-center justify-center"
|
||||
onMouseMove={(e) => {
|
||||
const { currentTarget, clientX, clientY } = e;
|
||||
const { left, top } = currentTarget.getBoundingClientRect();
|
||||
@@ -15,78 +16,63 @@ export default function CtaBanner() {
|
||||
currentTarget.style.setProperty("--mouse-y", `${clientY - top}px`);
|
||||
}}
|
||||
>
|
||||
{/* ========================================================
|
||||
پس‌زمینه کاملاً منطبق با سکشن Projects
|
||||
======================================================== */}
|
||||
{/* افکت Spotlight */}
|
||||
<div className="pointer-events-none absolute -inset-px opacity-50 before:absolute before:inset-0 before:bg-[radial-gradient(800px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(255,255,255,0.06),transparent_40%)]" />
|
||||
|
||||
{/* پس‌زمینه: گرید و افکت Spotlight */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
{/* گرید با رنگ خاکستری ملایم مطابق با بخش پروژه‌ها */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
|
||||
|
||||
{/* لایه نورافکن (Spotlight) وابسته به حرکت موس */}
|
||||
<div className="pointer-events-none absolute -inset-px opacity-50 before:absolute before:inset-0 before:bg-[radial-gradient(800px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(255,255,255,0.06),transparent_40%)]" />
|
||||
</div>
|
||||
{/* پترن گرید ۲۴ پیکسلی خاکستری */}
|
||||
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto">
|
||||
<div className="relative z-10 max-w-4xl w-full mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50, scale: 0.95 }}
|
||||
initial={{ opacity: 0, y: 25, scale: 0.98 }}
|
||||
whileInView={{ opacity: 1, y: 0, scale: 1 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 1.2, ease: customEase }}
|
||||
className="relative overflow-hidden rounded-[2.5rem] bg-white shadow-2xl shadow-gray-900/50 border border-gray-200"
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.8, ease: customEase }}
|
||||
className="group relative rounded-3xl bg-neutral-900/50 border border-white/10 overflow-hidden backdrop-blur-md p-8 md:p-16 flex flex-col items-center text-center transition-colors hover:bg-neutral-900/70"
|
||||
>
|
||||
{/* هاله‌های نوری پاستلی کارت */}
|
||||
<div className="absolute -top-32 -right-32 w-[30rem] h-[30rem] bg-indigo-50 blur-[100px] rounded-full pointer-events-none" />
|
||||
<div className="absolute -bottom-32 -left-32 w-[30rem] h-[30rem] bg-pink-50 blur-[100px] rounded-full pointer-events-none" />
|
||||
{/* هاله محو نوری پشت متن */}
|
||||
<div className="pointer-events-none absolute -top-24 left-1/2 -translate-x-1/2 w-96 h-48 bg-white/[0.04] rounded-full blur-3xl" />
|
||||
|
||||
<div className="relative z-10 py-20 px-6 md:px-16 flex flex-col items-center text-center">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1, delay: 0.2, ease: customEase }}
|
||||
className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900 mb-6"
|
||||
>
|
||||
آماده خلق یک{" "}
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-500">
|
||||
شاهکار
|
||||
</span>{" "}
|
||||
هستید؟
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1, delay: 0.3, ease: customEase }}
|
||||
className="text-lg md:text-xl text-gray-500 max-w-2xl mb-10 font-medium leading-relaxed"
|
||||
>
|
||||
ایده‌های خود را با تکنولوژی‌های روز دنیا و طراحی خیره‌کننده به واقعیت تبدیل کنید. تیم ما برای شروع پروژه بعدی شما آماده است.
|
||||
</motion.p>
|
||||
{/* تیتر اصلی با گرادیانت هماهنگ با متون Projects */}
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.1, ease: customEase }}
|
||||
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-[1.25] text-white max-w-2xl mb-8"
|
||||
>
|
||||
آماده خلق یک{" "}
|
||||
<span className="text-neutral-500">شاهکار دیجیتال</span> هستید؟
|
||||
</motion.h2>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1, delay: 0.4, ease: customEase }}
|
||||
>
|
||||
<button className="group relative inline-flex items-center justify-center gap-3 px-8 py-4 bg-gray-900 text-white rounded-full font-bold text-lg overflow-hidden transition-all duration-300 hover:bg-gray-800 hover:scale-105 hover:shadow-xl hover:shadow-gray-900/20 active:scale-95">
|
||||
<span>شروع همکاری</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2.5}
|
||||
stroke="currentColor"
|
||||
className="w-5 h-5 transition-transform duration-300 group-hover:-translate-x-1"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
{/* دکمه اکشن */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.2, ease: customEase }}
|
||||
>
|
||||
<button className="relative group/btn inline-flex items-center justify-center gap-3 px-8 py-4 rounded-full font-semibold text-gray-950 text-base md:text-lg bg-white hover:bg-neutral-200 active:scale-[0.98] transition-all duration-300 shadow-[0_0_25px_rgba(255,255,255,0.15)] hover:shadow-[0_0_35px_rgba(255,255,255,0.25)]">
|
||||
<span className="tracking-tight">شروع همکاری</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2.2}
|
||||
stroke="currentColor"
|
||||
className="w-5 h-5 transition-transform duration-300 group-hover/btn:-translate-x-1.5"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -10,9 +10,7 @@ import {
|
||||
Cpu,
|
||||
Layers,
|
||||
ArrowUpLeft,
|
||||
Activity,
|
||||
Zap,
|
||||
CheckCircle2,
|
||||
Lock
|
||||
} from "lucide-react";
|
||||
|
||||
@@ -37,16 +35,16 @@ function SpotlightCard({ children, className = "" }: SpotlightCardProps) {
|
||||
return (
|
||||
<div
|
||||
onMouseMove={handleMouseMove}
|
||||
className={`group relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-b from-card/80 to-card/30 p-6 md:p-8 backdrop-blur-xl transition-all duration-300 hover:border-primary/50 hover:shadow-2xl hover:shadow-primary/5 ${className}`}
|
||||
className={`group relative overflow-hidden rounded-2xl border border-white/10 bg-neutral-900/50 p-6 md:p-8 backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-2xl hover:shadow-black/40 ${className}`}
|
||||
>
|
||||
{/* Dynamic Cursor Light */}
|
||||
{/* بازتاب نور داخلی موس در سطح هر کارت */}
|
||||
<motion.div
|
||||
className="pointer-events-none absolute -inset-px rounded-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
style={{
|
||||
background: useMotionTemplate`
|
||||
radial-gradient(
|
||||
450px circle at ${mouseX}px ${mouseY}px,
|
||||
hsl(var(--primary) / 0.12),
|
||||
rgba(255, 255, 255, 0.06),
|
||||
transparent 80%
|
||||
)
|
||||
`,
|
||||
@@ -64,30 +62,51 @@ function SpotlightCard({ children, className = "" }: SpotlightCardProps) {
|
||||
// ==========================================
|
||||
export function ServicesBentoGrid() {
|
||||
return (
|
||||
<section className="relative overflow-hidden py-24 md:py-32 bg-background">
|
||||
{/* Ambient Background Grid & Glows */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:28px_28px]" />
|
||||
<div className="absolute -top-40 right-1/4 h-96 w-96 rounded-full bg-primary/10 blur-[120px] pointer-events-none" />
|
||||
<div className="absolute -bottom-40 left-1/4 h-96 w-96 rounded-full bg-blue-500/10 blur-[120px] pointer-events-none" />
|
||||
<section
|
||||
className="relative overflow-hidden py-24 md:py-32 bg-gray-950 text-white"
|
||||
onMouseMove={(e) => {
|
||||
const { currentTarget, clientX, clientY } = e;
|
||||
const { left, top } = currentTarget.getBoundingClientRect();
|
||||
currentTarget.style.setProperty("--mouse-x", `${clientX - left}px`);
|
||||
currentTarget.style.setProperty("--mouse-y", `${clientY - top}px`);
|
||||
}}
|
||||
>
|
||||
{/* ۱. الگوی گرید پس‌زمینه کاملاً یکدست و بدون سایه/محوشدگی بالا و پایین */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 opacity-70"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(to right, #80808012 1px, transparent 1px), linear-gradient(to bottom, #80808012 1px, transparent 1px)`,
|
||||
backgroundSize: "24px 24px",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="container relative mx-auto max-w-7xl px-4 md:px-6">
|
||||
{/* ۲. افکت نوری موس (Global Spotlight) در سطح سکشن */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 transition-opacity duration-300 opacity-60"
|
||||
style={{
|
||||
background: `radial-gradient(750px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.04), transparent 40%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* ۳. محتوای گرید */}
|
||||
<div className="container relative z-10 mx-auto max-w-7xl px-4 md:px-6">
|
||||
|
||||
{/* Section Header */}
|
||||
<div className="flex flex-col items-start md:items-end justify-between gap-6 pb-16 md:flex-row border-b border-border/40">
|
||||
<div className="flex flex-col items-start md:items-end justify-between gap-6 pb-16 md:flex-row border-b border-white/10">
|
||||
<div className="max-w-2xl space-y-3">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-xs font-mono text-primary">
|
||||
<Zap className="h-3.5 w-3.5" />
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3.5 py-1 text-xs font-mono text-neutral-300 backdrop-blur-md">
|
||||
<Zap className="h-3.5 w-3.5 text-amber-400" />
|
||||
<span>CAPABILITIES & ARCHITECTURE</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-extrabold tracking-tight md:text-4xl lg:text-5xl text-foreground">
|
||||
<h2 className="text-3xl font-extrabold tracking-tight md:text-4xl lg:text-5xl text-white">
|
||||
توسعه زیرساخت و معماری مقیاس‌پذیر
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-muted-foreground leading-relaxed">
|
||||
<p className="text-sm md:text-base text-neutral-400 leading-relaxed font-light">
|
||||
طراحی، استقرار و بهینه‌سازی سرویس‌های توزیع‌شده سازمانی با حداکثر پایداری و امنیت تراکنش‌ها.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-xs font-mono text-muted-foreground bg-muted/40 px-4 py-2 rounded-lg border border-border/40">
|
||||
<div className="flex items-center gap-3 text-xs font-mono text-neutral-400 bg-neutral-900/70 px-4 py-2 rounded-xl border border-white/10 backdrop-blur-md">
|
||||
<span className="flex h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<span>SYSTEM STATUS: OPERATIONAL</span>
|
||||
</div>
|
||||
@@ -100,31 +119,31 @@ export function ServicesBentoGrid() {
|
||||
<SpotlightCard>
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary border border-primary/20 shadow-inner">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400 border border-blue-500/20 shadow-inner">
|
||||
<Server className="h-5 w-5" />
|
||||
</div>
|
||||
<ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-primary" />
|
||||
<ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-white" />
|
||||
</div>
|
||||
<h3 className="mt-5 text-lg font-bold text-foreground">سامانه‌های توزیع‌شده و Core</h3>
|
||||
<p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
|
||||
<h3 className="mt-5 text-lg font-bold text-white">سامانه‌های توزیع‌شده و Core</h3>
|
||||
<p className="mt-2 text-xs md:text-sm text-neutral-400 leading-relaxed">
|
||||
معماری میکروسرویس با پرفورمنس بالا، مدیریت همزمانی (Concurrency) و پردازش بی‌درنگ داده‌ها.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3.5 font-mono text-xs">
|
||||
<div className="flex items-center justify-between text-muted-foreground pb-2 border-b border-border/30">
|
||||
<div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3.5 font-mono text-xs">
|
||||
<div className="flex items-center justify-between text-neutral-400 pb-2 border-b border-white/5">
|
||||
<span>TPS / Throughput</span>
|
||||
<span className="text-emerald-400 font-semibold">12,450 req/s</span>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center justify-between text-[11px] text-muted-foreground">
|
||||
<div className="mt-2 flex items-center justify-between text-[11px] text-neutral-400">
|
||||
<span>Avg Latency:</span>
|
||||
<span className="text-foreground">~8.2ms</span>
|
||||
<span className="text-neutral-200">~8.2ms</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-1.5">
|
||||
{["Go", "Laravel 11", "FastAPI", "gRPC"].map((tag) => (
|
||||
<span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
|
||||
<span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
@@ -135,60 +154,60 @@ export function ServicesBentoGrid() {
|
||||
<SpotlightCard>
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400 border border-blue-500/20 shadow-inner">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-cyan-500/10 text-cyan-400 border border-cyan-500/20 shadow-inner">
|
||||
<Terminal className="h-5 w-5" />
|
||||
</div>
|
||||
<ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-blue-400" />
|
||||
<ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-cyan-400" />
|
||||
</div>
|
||||
<h3 className="mt-5 text-lg font-bold text-foreground">اتوماسیون زیرساخت و CI/CD</h3>
|
||||
<p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
|
||||
<h3 className="mt-5 text-lg font-bold text-white">اتوماسیون زیرساخت و CI/CD</h3>
|
||||
<p className="mt-2 text-xs md:text-sm text-neutral-400 leading-relaxed">
|
||||
استقرار پیوسته، کانتینرسازی و مانیتورینگ سلامت سرویس‌ها بدون وقفه عملیاتی (Zero-Downtime).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-xl border border-border/40 bg-background/80 p-3 font-mono text-[11px] space-y-1">
|
||||
<div className="text-muted-foreground flex items-center gap-1.5">
|
||||
<CheckCircle2 className="h-3 w-3 text-emerald-400" />
|
||||
<span>Cluster Node Health: 100%</span>
|
||||
<div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-[11px] space-y-1">
|
||||
<div className="text-emerald-400 flex items-center justify-between">
|
||||
<span>Deployment Status:</span>
|
||||
<span>Automated</span>
|
||||
</div>
|
||||
<div className="text-primary flex items-center gap-1.5">
|
||||
<Activity className="h-3 w-3" />
|
||||
<span>Rolling deployment synced</span>
|
||||
<div className="text-neutral-400 flex items-center justify-between text-[10px]">
|
||||
<span>Pipeline Stage:</span>
|
||||
<span>Success (CI/CD)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-1.5">
|
||||
{["Docker", "Kubernetes", "CI/CD", "Prometheus"].map((tag) => (
|
||||
<span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
|
||||
{["Docker", "CI/CD", "Kubernetes", "Linux"].map((tag) => (
|
||||
<span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
{/* Card 3: Data Engineering & Queues */}
|
||||
{/* Card 3: Data Engineering & Messaging */}
|
||||
<SpotlightCard>
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-purple-500/10 text-purple-400 border border-purple-500/20 shadow-inner">
|
||||
<Database className="h-5 w-5" />
|
||||
</div>
|
||||
<ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-purple-400" />
|
||||
<ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-purple-400" />
|
||||
</div>
|
||||
<h3 className="mt-5 text-lg font-bold text-foreground">مهندسی داده و Event-Driven</h3>
|
||||
<p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
|
||||
<h3 className="mt-5 text-lg font-bold text-white">مهندسی داده و Event-Driven</h3>
|
||||
<p className="mt-2 text-xs md:text-sm text-neutral-400 leading-relaxed">
|
||||
پیاده‌سازی پایگاه‌های داده رابطه‌ای و NoSQL، کشینگ هوشمند و معماری پیام‌محور نامتقارن.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Queue Ingestion:</span>
|
||||
<div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs flex justify-between items-center">
|
||||
<span className="text-neutral-400">Queue Ingestion:</span>
|
||||
<span className="text-purple-400 font-semibold">Kafka / RabbitMQ</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-1.5">
|
||||
{["PostgreSQL", "Redis", "Kafka", "RabbitMQ"].map((tag) => (
|
||||
<span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
|
||||
<span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
@@ -202,22 +221,22 @@ export function ServicesBentoGrid() {
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-amber-500/10 text-amber-400 border border-amber-500/20 shadow-inner">
|
||||
<Cpu className="h-5 w-5" />
|
||||
</div>
|
||||
<ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-amber-400" />
|
||||
<ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-amber-400" />
|
||||
</div>
|
||||
<h3 className="mt-5 text-lg font-bold text-foreground">جستجوی معنایی و هوش مصنوعی</h3>
|
||||
<p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
|
||||
<h3 className="mt-5 text-lg font-bold text-white">جستجوی معنایی و هوش مصنوعی</h3>
|
||||
<p className="mt-2 text-xs md:text-sm text-neutral-400 leading-relaxed">
|
||||
استخراج اطلاعات، تعبیه‌سازی وکتورها و بازیابی فوق‌سریع در پایگاه‌های داده معنایی.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Vector Dimension:</span>
|
||||
<div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs flex justify-between items-center">
|
||||
<span className="text-neutral-400">Vector Dimension:</span>
|
||||
<span className="text-amber-400 font-semibold">1536d (HNSW)</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-1.5">
|
||||
{["Qdrant", "RAG", "Embeddings", "FastAPI"].map((tag) => (
|
||||
<span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
|
||||
<span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
@@ -231,22 +250,22 @@ export function ServicesBentoGrid() {
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 shadow-inner">
|
||||
<Layers className="h-5 w-5" />
|
||||
</div>
|
||||
<ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-emerald-400" />
|
||||
<ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-emerald-400" />
|
||||
</div>
|
||||
<h3 className="mt-5 text-lg font-bold text-foreground">پرتال‌های سازمانی و کارتابل</h3>
|
||||
<p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
|
||||
<h3 className="mt-5 text-lg font-bold text-white">پرتال‌های سازمانی و کارتابل</h3>
|
||||
<p className="mt-2 text-xs md:text-sm text-neutral-400 leading-relaxed">
|
||||
طراحی پنل‌های مدیریت فرآیندها (BPMS)، فرم‌سازهای پویا و ماژول‌های سازمانی یکپارچه.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
|
||||
<span className="text-muted-foreground">Workflow Engine:</span>
|
||||
<div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs flex justify-between items-center">
|
||||
<span className="text-neutral-400">Workflow Engine:</span>
|
||||
<span className="text-emerald-400 font-semibold">Active State</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-1.5">
|
||||
{["Filament 3", "Next.js", "TypeScript", "Tailwind"].map((tag) => (
|
||||
<span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
|
||||
<span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
@@ -260,16 +279,16 @@ export function ServicesBentoGrid() {
|
||||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-rose-500/10 text-rose-400 border border-rose-500/20 shadow-inner">
|
||||
<ShieldCheck className="h-5 w-5" />
|
||||
</div>
|
||||
<ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-rose-400" />
|
||||
<ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-rose-400" />
|
||||
</div>
|
||||
<h3 className="mt-5 text-lg font-bold text-foreground">امنیت، هویت و دسترسی سازمانی</h3>
|
||||
<p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
|
||||
<h3 className="mt-5 text-lg font-bold text-white">امنیت، هویت و دسترسی سازمانی</h3>
|
||||
<p className="mt-2 text-xs md:text-sm text-neutral-400 leading-relaxed">
|
||||
پیاده‌سازی احراز هویت متمرکز (SSO)، پروتکل‌های OAuth2/OpenID و سیستم‌های RBAC پیشرفته.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
|
||||
<span className="text-muted-foreground flex items-center gap-1.5">
|
||||
<div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs flex justify-between items-center">
|
||||
<span className="text-neutral-400 flex items-center gap-1.5">
|
||||
<Lock className="h-3 w-3 text-rose-400" />
|
||||
Audit Logging:
|
||||
</span>
|
||||
@@ -278,7 +297,7 @@ export function ServicesBentoGrid() {
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-1.5">
|
||||
{["OAuth2", "SSO", "RBAC", "JWT"].map((tag) => (
|
||||
<span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
|
||||
<span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
'use client';
|
||||
|
||||
import React from "react";
|
||||
import {
|
||||
Mail,
|
||||
ArrowUp,
|
||||
Terminal,
|
||||
Layers,
|
||||
Cpu,
|
||||
Share2
|
||||
} from "lucide-react";
|
||||
|
||||
// آیکون‌های SVG استاندارد شبکه‌های اجتماعی
|
||||
const GithubIcon = ({ className = "w-4 h-4" }) => (
|
||||
<svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const LinkedinIcon = ({ className = "w-4 h-4" }) => (
|
||||
<svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export function Footer() {
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<footer dir="rtl" className="relative bg-gray-950 text-gray-400 border-t border-gray-800/80 overflow-hidden font-sans">
|
||||
{/* پترن پس‌زمینه گرید ۲۴ پیکسلی */}
|
||||
<div
|
||||
className="absolute inset-0 bg-[linear-gradient(to_right,#1f29370f_1px,transparent_1px),linear-gradient(to_bottom,#1f29370f_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none"
|
||||
/>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
|
||||
|
||||
{/* وضعیت سرویس‌ها */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Terminal className="w-4 h-4 text-indigo-400" />
|
||||
<span className="text-xs font-mono font-semibold text-gray-200 uppercase tracking-wider">وضعیت سرویس‌ها</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-950/40 border border-emerald-500/30 text-emerald-400 text-xs font-mono">
|
||||
<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>پایداری شبکه: ۹۹.۹۹٪</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 leading-relaxed">
|
||||
تمامی میکروسرویس‌ها و پایپ‌لاین‌های پردازش داده در وضعیت عملیاتی پایدار قرار دارند.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* حوزه‌های تمرکز فنی */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Layers className="w-4 h-4 text-indigo-400" />
|
||||
<h4 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">حوزه‌های تخصصی</h4>
|
||||
</div>
|
||||
<ul className="space-y-2 text-xs text-gray-400">
|
||||
<li className="hover:text-indigo-400 transition-colors">معماری سیستم‌های توزیع‌شده</li>
|
||||
<li className="hover:text-indigo-400 transition-colors">سرویس‌های پرترافیک و مقیاس‌پذیر</li>
|
||||
<li className="hover:text-indigo-400 transition-colors">پایپ‌لاین‌های رویدادمحور (EDA)</li>
|
||||
<li className="hover:text-indigo-400 transition-colors">سیستم‌های برداری و RAG</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* استک اصلی */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Cpu className="w-4 h-4 text-indigo-400" />
|
||||
<h4 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">فناوری‌های کلیدی</h4>
|
||||
</div>
|
||||
<ul className="space-y-2 text-xs font-mono text-gray-400 dir-ltr text-right">
|
||||
<li>Laravel / FastAPI / Python</li>
|
||||
<li>PostgreSQL / Redis / Qdrant</li>
|
||||
<li>Kafka / RabbitMQ / Docker</li>
|
||||
<li>Next.js / React / Tailwind</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* راه‌های ارتباطی */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Share2 className="w-4 h-4 text-indigo-400" />
|
||||
<h4 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">ارتباط و شبکه‌ها</h4>
|
||||
</div>
|
||||
<div className="flex gap-2.5 pt-1">
|
||||
<a
|
||||
href="https://github.com"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label="GitHub"
|
||||
className="p-2.5 bg-gray-900/80 border border-gray-800 rounded-lg text-gray-400 hover:text-white hover:border-gray-700 transition-all hover:scale-105"
|
||||
>
|
||||
<GithubIcon className="w-4 h-4" />
|
||||
</a>
|
||||
<a
|
||||
href="https://linkedin.com"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
className="p-2.5 bg-gray-900/80 border border-gray-800 rounded-lg text-gray-400 hover:text-white hover:border-gray-700 transition-all hover:scale-105"
|
||||
>
|
||||
<LinkedinIcon className="w-4 h-4" />
|
||||
</a>
|
||||
<a
|
||||
href="mailto:contact@example.com"
|
||||
aria-label="Email"
|
||||
className="p-2.5 bg-gray-900/80 border border-gray-800 rounded-lg text-gray-400 hover:text-white hover:border-gray-700 transition-all hover:scale-105"
|
||||
>
|
||||
<Mail className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* نوار پایینی */}
|
||||
<div className="pt-8 border-t border-gray-900/80 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>© {new Date().getFullYear()}</span>
|
||||
<span>•</span>
|
||||
<span>طراحی و توسعه برای دسترس‌پذیری بالا و مقیاس‌پذیری</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg bg-gray-900 border border-gray-800 text-gray-400 hover:text-gray-200 hover:border-gray-700 transition-all group"
|
||||
>
|
||||
<span>بازگشت به بالا</span>
|
||||
<ArrowUp className="w-3.5 h-3.5 transition-transform group-hover:-translate-y-0.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@@ -7,7 +7,7 @@ import { motion, AnimatePresence } from "framer-motion";
|
||||
const navLinks = [
|
||||
{ name: "صفحه اصلی", href: "/" },
|
||||
{ name: "خدمات", href: "/services" },
|
||||
{ name: "نمونه کارها", href: "/portfolio" },
|
||||
{ name: "پروژه ها", href: "/project" },
|
||||
{ name: "درباره ما", href: "/about" },
|
||||
];
|
||||
|
||||
@@ -46,10 +46,10 @@ export default function Header() {
|
||||
{/* لوگو */}
|
||||
<Link href="/" className="relative z-50 flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-blue-600 to-blue-400 flex items-center justify-center">
|
||||
<span className="text-white font-bold text-lg">N</span>
|
||||
<span className="text-white font-bold text-lg">Z</span>
|
||||
</div>
|
||||
<span className="text-neutral-50 font-medium tracking-wide">
|
||||
نوین‌تک
|
||||
ژرفا نوآوری داده
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
@@ -67,11 +67,13 @@ export default function Header() {
|
||||
</nav>
|
||||
|
||||
{/* دکمه تماس / اکشن دسکتاپ */}
|
||||
<div className="hidden md:block">
|
||||
<button className="text-sm font-medium text-white px-5 py-2 rounded-full border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-300 backdrop-blur-sm">
|
||||
شروع پروژه
|
||||
</button>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<Link href="/contact">
|
||||
<button className="text-sm font-medium text-white px-5 py-2 rounded-full border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-300 backdrop-blur-sm">
|
||||
شروع پروژه
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* دکمه همبرگری موبایل */}
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user