295 lines
16 KiB
TypeScript
295 lines
16 KiB
TypeScript
'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,
|
|
CheckCircle2,
|
|
Terminal
|
|
} from "lucide-react";
|
|
|
|
interface ProjectItem {
|
|
id: number;
|
|
title: string;
|
|
category: string;
|
|
description: string;
|
|
highlights: string[];
|
|
techStack: string[];
|
|
status: string;
|
|
image?: string; // آدرس تصویر پروژه
|
|
}
|
|
|
|
const projectsData: ProjectItem[] = [
|
|
{
|
|
id: 1,
|
|
title: "مرکز تماس هوشمند",
|
|
category: "هوش مصنوعی و تحلیل داده‌های صوتی",
|
|
description: "پلتفرم تحلیل مکالمات صوتی مرکز تماس مبتنی بر STT و LLM جهت ارزیابی خودکار عملکرد کارشناسان، سنجش احساسات مشتری و استخراج KPIهای سازمانی.",
|
|
highlights: [
|
|
"تبدیل خودکار و دقیق گفتار به متن (Speech-to-Text) با پشتیبانی تخصصی از زبان فارسی",
|
|
"ارزیابی خودکار شاخص‌های عملکردی (KPI)، لحن، ادب و پایبندی به اسکریپت سازمانی",
|
|
"تحلیل احساسات (Sentiment Analysis) و خلاصه‌سازی هوشمند مکالمات جهت ثبت در CRM",
|
|
"یکپارچه‌سازی کامل با زیرساخت‌های VoIP / Asterisk و پایپ‌لاین‌های پردازش صوت"
|
|
],
|
|
techStack: [
|
|
"Python",
|
|
"FastAPI",
|
|
"Whisper / STT",
|
|
"LLM / LangChain",
|
|
"PostgreSQL",
|
|
"Redis",
|
|
"Docker"
|
|
],
|
|
status: "Production / AI Solution",
|
|
image: "/image/aicall2.png" // مسیر تصویر دلخواه خود را اینجا وارد کنید
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "پلتفرم هوشمند تمرینات ورزشی نیوفیت",
|
|
category: "سلامت، فیتنس و تحلیل داده‌های ورزشی",
|
|
description: "سامانه جامع و هوشمند صدور برنامه‌های تمرینی اختصاصی مبتنی بر ارزیابی دقیق فاکتورهای بیومتریک و سبک زندگی کاربران، همراه با سیستم زمان‌بندی داینامیک و ارائه‌دهنده محتوای چندرسانه‌ای آموزشی.",
|
|
highlights: [
|
|
"موتور ارزیابی و پروفایلینگ پیشرفته کاربر (قد، وزن، سابقه تمرینی، سطح استرس، شاخص فعالیت روزانه و اهداف فردی)",
|
|
"تولید خودکار و هوشمند برنامه‌های تمرینی شخصی‌سازی‌شده متناسب با محیط تمرین (خانه / باشگاه) و اهداف ورزشی",
|
|
"سیستم زمان‌بندی منعطف و تقویم داینامیک جهت مدیریت روزها، ساعات و فازبندی جلسات تمرینی",
|
|
"طراحی هوشمند متغیرهای تمرین شامل ساختار ست‌بندی، الگوهای بارگذاری و توصیه‌های تکنیکی و بیومکانیکی هر حرکت",
|
|
"پایگاه داده چندرسانه‌ای بهینه‌سازی‌شده برای استریم روان ویدیوهای آموزشی اجرای صحیح حرکات و نکات کلیدی"
|
|
],
|
|
techStack: [
|
|
"Flutter / React Native",
|
|
"FastAPI / Python",
|
|
"PostgreSQL",
|
|
"Redis",
|
|
"Object Storage / CDN",
|
|
"Docker"
|
|
],
|
|
status: "Production / Mobile Application",
|
|
image: "/image/neo.png" // مسیر تصویر دلخواه خود را اینجا وارد کنید
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "دستیار هوشمند فروش و پشتیبانی",
|
|
category: "هوش مصنوعی، RAG و عامل‌های هوشمند (AI Agents)",
|
|
description: "سامانه دستیار هوشمند سازمانی مبتنی بر معماری RAG و عامل‌های گفتگومحور؛ مسلط به کل محتوای وب‌سایت، محصولات و مستندات جهت افزایش نرخ تبدیل فروش و کاهش ۷۰ درصدی تیکت‌های پشتیبانی.",
|
|
highlights: [
|
|
"پیاده‌سازی معماری پیشرفته RAG (Retrieval-Augmented Generation) با سینک خودکار کاتالوگ و صفحات",
|
|
"عامل هوشمند فروش (Sales Agent) جهت هدایت رفتار کاربر به سبد خرید و افزایش Conversion Rate",
|
|
"کاهش بیش از ۷۰ درصدی بار تیکت‌های پشتیبانی با پاسخ‌دهی بلادرنگ، بدون Hallucination و مستند به داده‌های سازمان",
|
|
"یکپارچه‌سازی از طریق Webhook / API با سیستم‌های انبارداری و سفارشات (Live Stock / Order Status)",
|
|
"نصب و تعبیه بسیار سریع در وب‌سایت‌ها تنها از طریق یک Script Tag سبک"
|
|
],
|
|
techStack: [
|
|
"Python",
|
|
"FastAPI",
|
|
"LangChain / LlamaIndex",
|
|
"Qdrant / Vector DB",
|
|
"OpenAI / Local LLMs",
|
|
"Redis",
|
|
"Docker"
|
|
],
|
|
status: "Production / AI Solution",
|
|
image: "/image/payai.png" // مسیر تصویر دلخواه خود را اینجا وارد کنید
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "معلم و دستیار آموزشی هوشمند",
|
|
category: "هوش مصنوعی، RAG و فناوری‌های آموزشی (EdTech)",
|
|
description: "پلتفرم جامع آموزش تعاملی و یادگیری شخصی‌سازی‌شده مبتنی بر معماری RAG و پردازش صوت دوطرفه؛ مسلط بر کتب درسی رسمی جهت رفع توهم هوش مصنوعی (Zero Hallucination)، طراحی آزمون، تصحیح خودکار و تولید درسنامه.",
|
|
highlights: [
|
|
"پیاده‌سازی معماری RAG بر روی متون کتب درسی رسمی با ارجاع دقیق به سرفصل‌ها و پاراگراف‌ها جهت جلوگیری از Hallucination",
|
|
"موتور هوشمند تولید آزمون‌های تستی و تشریحی در سه سطح دشواری با سناریوهای شب امتحان",
|
|
"تصحیح تحلیلی پاسخ‌های تشریحی دانش‌آموز با تحلیل گام‌به‌گام و ارائه فیدبک مفهومی مبتنی بر رفرنس کتاب",
|
|
"تعامل صوتی دوطرفه (Voice-Enabled) با موتورهای تبدیل متن به گفتار (TTS) و گفتار به متن فارسی (STT)",
|
|
"ماژول خلاصه‌سازی خودکار فصول، تولید درسنامه‌های ساختاریافته و استخراج نکات کلیدی شب امتحان",
|
|
"معماری مقیاس‌پذیر و ماژولار جهت مدیریت پیک ترافیک و درخواست‌های همزمان در ایام امتحانات"
|
|
],
|
|
techStack: [
|
|
"Python",
|
|
"FastAPI",
|
|
"LangChain / LlamaIndex",
|
|
"Qdrant / Milvus (Vector DB)",
|
|
"Whisper / STT & TTS",
|
|
"OpenAI / Local LLMs",
|
|
"PostgreSQL",
|
|
"Redis",
|
|
"Docker"
|
|
],
|
|
status: "Production / AI Solution",
|
|
image: "/image/student2.png" // مسیر تصویر دلخواه خود را اینجا وارد کنید
|
|
}
|
|
];
|
|
|
|
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"
|
|
>
|
|
<h1 className="mb-5 text-3xl font-extrabold tracking-tight text-white md:text-5xl pt-20">
|
|
معماری نرم‌افزار <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>preview://node.svc_0{project.id}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* قاب تصویر پروژه */}
|
|
<div className="relative w-full aspect-[16/10] overflow-hidden rounded-xl border border-gray-800/60 bg-gray-950/80 group">
|
|
{project.image ? (
|
|
<img
|
|
src={project.image}
|
|
alt={project.title}
|
|
className="w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-105"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex flex-col items-center justify-center text-gray-600 font-mono text-xs gap-2">
|
|
<Terminal className="w-6 h-6 text-gray-700" />
|
|
<span>No Preview Available</span>
|
|
</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="/contact"
|
|
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>
|
|
);
|
|
}
|