added all new chanes
This commit is contained in:
ahmadrezabd
@@ -1,546 +0,0 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Calendar, Clock, ArrowRight, ArrowLeft } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
// Blog posts data - placeholder content
|
||||
export const blogPosts: Record<
|
||||
string,
|
||||
{
|
||||
title: string;
|
||||
content: string;
|
||||
date: string;
|
||||
readTime: string;
|
||||
category: string;
|
||||
image: string;
|
||||
}
|
||||
> = {
|
||||
"system-integration-guide": {
|
||||
title: "راهنمای جامع یکپارچه‌سازی سیستم‌ها: از صفر تا صد",
|
||||
category: "یکپارچه‌سازی",
|
||||
date: "۱۴۰۳/۰۹/۲۰",
|
||||
readTime: "۱۲",
|
||||
image: "/assets/main-pic/4section/Systems Integration.jpg",
|
||||
content: `
|
||||
# راهنمای جامع یکپارچه‌سازی سیستم‌ها: از صفر تا صد
|
||||
|
||||
یکپارچه‌سازی سیستم‌ها یکی از مهم‌ترین مفاهیم در دنیای فناوری اطلاعات و کسب‌وکارهای مدرن است. در این مقاله، به صورت کامل و جامع با این مفهوم آشنا می‌شوید.
|
||||
|
||||
## مقدمه
|
||||
|
||||
در دنیای امروز، کسب‌وکارها از سیستم‌های مختلفی استفاده می‌کنند: CRM، حسابداری، فروش، بازاریابی و... هر کدام از این سیستم‌ها به تنهایی کار می‌کنند، اما مشکل زمانی شروع می‌شود که بخواهیم این سیستم‌ها با یکدیگر ارتباط برقرار کنند.
|
||||
|
||||
## یکپارچه‌سازی چیست؟
|
||||
|
||||
یکپارچه‌سازی سیستم‌ها به معنای اتصال نرم‌افزارها و سیستم‌های مختلف به یکدیگر است تا داده‌ها و اطلاعات به صورت خودکار و بدون دخالت انسان بین آن‌ها جابه‌جا شوند.
|
||||
|
||||
### مزایای یکپارچه‌سازی
|
||||
|
||||
- کاهش خطای انسانی
|
||||
- صرفه‌جویی در وقت
|
||||
- بهبود دقت داده‌ها
|
||||
- افزایش بهره‌وری
|
||||
|
||||
### چالش‌های پیش رو
|
||||
|
||||
- پیچیدگی فنی
|
||||
- هزینه‌های اولیه
|
||||
- نیاز به تخصص
|
||||
- امنیت اطلاعات
|
||||
|
||||
## انواع یکپارچه‌سازی
|
||||
|
||||
### یکپارچه‌سازی افقی
|
||||
|
||||
این نوع یکپارچه‌سازی شامل اتصال سیستم‌های یک سطح در سازمان است.
|
||||
|
||||
### یکپارچه‌سازی عمودی
|
||||
|
||||
یکپارچه‌سازی عمودی شامل اتصال سیستم‌های مختلف سطوح سازمانی است.
|
||||
|
||||
## نتیجه‌گیری
|
||||
|
||||
یکپارچه‌سازی سیستم‌ها نه تنها یک نیاز، بلکه یک ضرورت برای کسب‌وکارهای مدرن است. با برنامه‌ریزی درست و انتخاب راهکار مناسب، می‌توانید از مزایای آن بهره‌مند شوید.
|
||||
`,
|
||||
},
|
||||
"automation-best-practices": {
|
||||
title: "بهترین روش‌های اتوماسیون فرآیندهای کسب‌وکار",
|
||||
category: "اتوماسیون",
|
||||
date: "۱۴۰۳/۰۹/۱۵",
|
||||
readTime: "۱۰",
|
||||
image: "/assets/main-pic/4section/Process Automation.jpg",
|
||||
content: `
|
||||
# بهترین روش‌های اتوماسیون فرآیندهای کسب‌وکار
|
||||
|
||||
اتوماسیون فرآیندها یکی از مؤثرترین روش‌های بهبود عملکرد و افزایش بهره‌وری در کسب‌وکارهای مدرن است.
|
||||
|
||||
## مقدمه
|
||||
|
||||
در این مقاله، با بهترین روش‌ها و نکات مهم در زمینه اتوماسیون فرآیندهای کسب‌وکار آشنا می‌شوید.
|
||||
|
||||
## اصول اتوماسیون موفق
|
||||
|
||||
### شروع با فرآیندهای ساده
|
||||
|
||||
همیشه بهتر است با فرآیندهای ساده و قابل پیش‌بینی شروع کنید. این کار به شما کمک می‌کند تا تجربه لازم را کسب کنید.
|
||||
|
||||
### تمرکز بر ارزش
|
||||
|
||||
قبل از اتوماسیون هر فرآیندی، مطمئن شوید که این کار ارزش اضافه می‌کند.
|
||||
|
||||
### تست و بهبود مستمر
|
||||
|
||||
اتوماسیون یک فرآیند یکباره نیست. باید به طور مستمر سیستم را تست و بهبود دهید.
|
||||
|
||||
## نتیجه‌گیری
|
||||
|
||||
با رعایت این اصول، می‌توانید فرآیندهای کسب‌وکار خود را به طور مؤثر اتوماسیون کنید.
|
||||
`,
|
||||
},
|
||||
"social-media-integration": {
|
||||
title: "یکپارچه‌سازی شبکه‌های اجتماعی: راهنمای عملی",
|
||||
category: "شبکه‌های اجتماعی",
|
||||
date: "۱۴۰۳/۰۹/۱۰",
|
||||
readTime: "۸",
|
||||
image: "/assets/main-pic/4section/Interaction with Social Networks.jpg",
|
||||
content: `
|
||||
# یکپارچه‌سازی شبکه‌های اجتماعی: راهنمای عملی
|
||||
|
||||
یادگیری نحوه اتصال و مدیریت پلتفرم‌های مختلف شبکه‌های اجتماعی می‌تواند به شما کمک کند تا ارتباط مؤثرتری با مشتریان خود برقرار کنید.
|
||||
|
||||
## مزایای یکپارچه‌سازی شبکه‌های اجتماعی
|
||||
|
||||
- مدیریت متمرکز
|
||||
- انتشار خودکار محتوا
|
||||
- نظارت و تحلیل یکپارچه
|
||||
- بهبود تعامل با مخاطبان
|
||||
|
||||
## راهکارهای عملی
|
||||
|
||||
در این بخش با روش‌های عملی یکپارچه‌سازی شبکه‌های اجتماعی آشنا می‌شوید.
|
||||
`,
|
||||
},
|
||||
"management-dashboards": {
|
||||
title: "طراحی و پیاده‌سازی پنل‌های مدیریتی پیشرفته",
|
||||
category: "مدیریت داده",
|
||||
date: "۱۴۰۳/۰۹/۰۵",
|
||||
readTime: "۹",
|
||||
image: "/assets/main-pic/4section/Powerful Management panels.jpg",
|
||||
content: `
|
||||
# طراحی و پیاده‌سازی پنل‌های مدیریتی پیشرفته
|
||||
|
||||
پنل‌های مدیریتی قدرتمند به شما امکان می‌دهند تا داده‌های خود را به صورت مؤثر مدیریت و تحلیل کنید.
|
||||
|
||||
## ویژگی‌های کلیدی
|
||||
|
||||
پنل‌های مدیریتی پیشرفته باید دارای ویژگی‌های خاصی باشند تا بتوانند نیازهای کاربران را برطرف کنند.
|
||||
|
||||
## طراحی UX/UI
|
||||
|
||||
طراحی تجربه کاربری و رابط کاربری مناسب در موفقیت یک پنل مدیریتی بسیار مهم است.
|
||||
`,
|
||||
},
|
||||
"api-integration-fundamentals": {
|
||||
title: "مبانی یکپارچه‌سازی API: راهنمای مبتدیان",
|
||||
category: "توسعه",
|
||||
date: "۱۴۰۳/۰۸/۲۸",
|
||||
readTime: "۷",
|
||||
image: "/assets/main-pic/4section/Systems Integration.jpg",
|
||||
content: `
|
||||
# مبانی یکپارچه‌سازی API: راهنمای مبتدیان
|
||||
|
||||
APIها پایه و اساس اتصال سیستم‌های مدرن هستند. در این مقاله با مفاهیم پایه آشنا می‌شوید.
|
||||
|
||||
## API چیست؟
|
||||
|
||||
API یا رابط برنامه‌نویسی کاربردی، به برنامه‌ها اجازه می‌دهد تا با یکدیگر ارتباط برقرار کنند.
|
||||
|
||||
## انواع API
|
||||
|
||||
انواع مختلفی از API وجود دارد که هر کدام برای کاربردهای خاصی طراحی شده‌اند.
|
||||
`,
|
||||
},
|
||||
"workflow-automation": {
|
||||
title: "خودکارسازی Workflow: از ایده تا اجرا",
|
||||
category: "اتوماسیون",
|
||||
date: "۱۴۰۳/۰۸/۲۰",
|
||||
readTime: "۱۱",
|
||||
image: "/assets/main-pic/4section/Process Automation.jpg",
|
||||
content: `
|
||||
# خودکارسازی Workflow: از ایده تا اجرا
|
||||
|
||||
یادگیری نحوه طراحی و پیاده‌سازی workflowهای خودکار می‌تواند به طور قابل توجهی کارایی کسب‌وکار شما را افزایش دهد.
|
||||
|
||||
## مراحل طراحی Workflow
|
||||
|
||||
1. شناسایی فرآیند
|
||||
2. تحلیل نیازها
|
||||
3. طراحی workflow
|
||||
4. پیاده‌سازی
|
||||
5. تست و بهبود
|
||||
|
||||
## نتیجه‌گیری
|
||||
|
||||
با رعایت این مراحل، می‌توانید workflowهای مؤثری برای کسب‌وکار خود طراحی کنید.
|
||||
`,
|
||||
},
|
||||
};
|
||||
|
||||
// Generate static params for all blog posts
|
||||
export async function generateStaticParams() {
|
||||
return Object.keys(blogPosts).map((slug) => ({
|
||||
slug: slug,
|
||||
}));
|
||||
}
|
||||
|
||||
// Generate metadata for SEO
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }> | { slug: string };
|
||||
}) {
|
||||
// Handle both sync and async params
|
||||
const resolvedParams =
|
||||
params instanceof Promise ? await params : await Promise.resolve(params);
|
||||
const post = blogPosts[resolvedParams.slug];
|
||||
|
||||
if (!post) {
|
||||
return {
|
||||
title: "پست یافت نشد",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: post.title,
|
||||
description: post.content.substring(0, 160),
|
||||
};
|
||||
}
|
||||
|
||||
export default async function BlogPostPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }> | { slug: string };
|
||||
}) {
|
||||
// Handle both sync and async params (works with Next.js 13, 14, 15, 16)
|
||||
const resolvedParams =
|
||||
params instanceof Promise ? await params : await Promise.resolve(params);
|
||||
const post = blogPosts[resolvedParams.slug];
|
||||
|
||||
if (!post) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Title Section */}
|
||||
<section className="bg-background pt-32 pb-8 md:pt-40 md:pb-12">
|
||||
<div className="mx-auto max-w-4xl px-6">
|
||||
<div className="space-y-6">
|
||||
<Link
|
||||
href="/blog"
|
||||
className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors dark:hover:text-[#FCC61D]"
|
||||
>
|
||||
<ArrowRight className="size-4" />
|
||||
بازگشت به وبلاگ
|
||||
</Link>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary/10 text-primary">
|
||||
{post.category}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl font-bold md:text-4xl lg:text-5xl leading-tight tracking-normal">
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-6 text-sm text-muted-foreground pt-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="size-4" />
|
||||
<span>{post.date}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="size-4" />
|
||||
<span>{post.readTime} دقیقه مطالعه</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Image with 3:2 aspect ratio */}
|
||||
<section className="bg-background pb-12">
|
||||
<div className="mx-auto max-w-4xl px-6">
|
||||
<div className="relative aspect-[3/2] w-full overflow-hidden rounded-2xl border dark:border-transparent shadow-lg">
|
||||
<Image
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 90vw, 896px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Content Section */}
|
||||
<section className="bg-background pb-12 md:pb-20">
|
||||
<div className="mx-auto max-w-4xl px-6">
|
||||
<article className="prose prose-lg dark:prose-invert max-w-none">
|
||||
<div className="space-y-6 leading-relaxed tracking-normal text-foreground">
|
||||
{(() => {
|
||||
const lines = post.content.split("\n");
|
||||
const elements: JSX.Element[] = [];
|
||||
let listItems: string[] = [];
|
||||
let numberedListItems: string[] = [];
|
||||
let isNumberedList = false;
|
||||
|
||||
lines.forEach((line, index) => {
|
||||
const trimmedLine = line.trim();
|
||||
|
||||
// Close lists if empty line
|
||||
if (!trimmedLine) {
|
||||
if (listItems.length > 0) {
|
||||
elements.push(
|
||||
<ul
|
||||
key={`list-${index}`}
|
||||
className="list-disc list-inside ml-6 space-y-2 my-6"
|
||||
>
|
||||
{listItems.map((item, i) => (
|
||||
<li key={i} className="leading-relaxed">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
listItems = [];
|
||||
}
|
||||
if (numberedListItems.length > 0) {
|
||||
elements.push(
|
||||
<ol
|
||||
key={`ol-${index}`}
|
||||
className="list-decimal list-inside ml-6 space-y-2 my-6"
|
||||
>
|
||||
{numberedListItems.map((item, i) => (
|
||||
<li key={i} className="leading-relaxed">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
);
|
||||
numberedListItems = [];
|
||||
isNumberedList = false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Process numbered lists
|
||||
if (/^\d+\.\s/.test(trimmedLine)) {
|
||||
const content = trimmedLine.replace(/^\d+\.\s/, "");
|
||||
// Close bullet list if exists
|
||||
if (listItems.length > 0) {
|
||||
elements.push(
|
||||
<ul
|
||||
key={`list-${index}`}
|
||||
className="list-disc list-inside ml-6 space-y-2 my-6"
|
||||
>
|
||||
{listItems.map((item, i) => (
|
||||
<li key={i} className="leading-relaxed">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
listItems = [];
|
||||
}
|
||||
numberedListItems.push(content);
|
||||
isNumberedList = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// Process bullet lists
|
||||
if (
|
||||
trimmedLine.startsWith("• ") ||
|
||||
trimmedLine.startsWith("- ") ||
|
||||
trimmedLine.startsWith("* ")
|
||||
) {
|
||||
const content = trimmedLine.substring(2);
|
||||
// Close numbered list if exists
|
||||
if (numberedListItems.length > 0) {
|
||||
elements.push(
|
||||
<ol
|
||||
key={`ol-${index}`}
|
||||
className="list-decimal list-inside ml-6 space-y-2 my-6"
|
||||
>
|
||||
{numberedListItems.map((item, i) => (
|
||||
<li key={i} className="leading-relaxed">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
);
|
||||
numberedListItems = [];
|
||||
isNumberedList = false;
|
||||
}
|
||||
listItems.push(content);
|
||||
return;
|
||||
}
|
||||
|
||||
// Close lists before other content
|
||||
if (listItems.length > 0) {
|
||||
elements.push(
|
||||
<ul
|
||||
key={`list-${index}`}
|
||||
className="list-disc list-inside ml-6 space-y-2 my-6"
|
||||
>
|
||||
{listItems.map((item, i) => (
|
||||
<li key={i} className="leading-relaxed">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
listItems = [];
|
||||
}
|
||||
if (numberedListItems.length > 0) {
|
||||
elements.push(
|
||||
<ol
|
||||
key={`ol-${index}`}
|
||||
className="list-decimal list-inside ml-6 space-y-2 my-6"
|
||||
>
|
||||
{numberedListItems.map((item, i) => (
|
||||
<li key={i} className="leading-relaxed">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
);
|
||||
numberedListItems = [];
|
||||
isNumberedList = false;
|
||||
}
|
||||
|
||||
// Process headings
|
||||
if (trimmedLine.startsWith("# ")) {
|
||||
elements.push(
|
||||
<h1
|
||||
key={index}
|
||||
className="text-3xl md:text-4xl font-bold leading-tight tracking-normal mt-12 mb-6 text-foreground"
|
||||
>
|
||||
{trimmedLine.substring(2)}
|
||||
</h1>
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (trimmedLine.startsWith("## ")) {
|
||||
elements.push(
|
||||
<h2
|
||||
key={index}
|
||||
className="text-2xl md:text-3xl font-bold leading-tight tracking-normal mt-10 mb-4 text-foreground"
|
||||
>
|
||||
{trimmedLine.substring(3)}
|
||||
</h2>
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (trimmedLine.startsWith("### ")) {
|
||||
elements.push(
|
||||
<h3
|
||||
key={index}
|
||||
className="text-xl md:text-2xl font-bold leading-tight tracking-normal mt-8 mb-3 text-foreground"
|
||||
>
|
||||
{trimmedLine.substring(4)}
|
||||
</h3>
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Process links
|
||||
if (trimmedLine.startsWith("[") && trimmedLine.includes("](")) {
|
||||
const match = trimmedLine.match(/\[([^\]]+)\]\(([^)]+)\)/);
|
||||
if (match) {
|
||||
elements.push(
|
||||
<p
|
||||
key={index}
|
||||
className="leading-relaxed tracking-normal my-6"
|
||||
>
|
||||
<a
|
||||
href={match[2]}
|
||||
className="text-primary hover:text-secondary hover:underline transition-colors dark:hover:text-[#FCC61D]"
|
||||
>
|
||||
{match[1]}
|
||||
</a>
|
||||
</p>
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Process regular text
|
||||
elements.push(
|
||||
<p
|
||||
key={index}
|
||||
className="leading-relaxed tracking-normal my-6 text-foreground"
|
||||
>
|
||||
{trimmedLine}
|
||||
</p>
|
||||
);
|
||||
});
|
||||
|
||||
// Close any remaining lists
|
||||
if (listItems.length > 0) {
|
||||
elements.push(
|
||||
<ul
|
||||
key={`list-end`}
|
||||
className="list-disc list-inside ml-6 space-y-2 my-6"
|
||||
>
|
||||
{listItems.map((item, i) => (
|
||||
<li key={i} className="leading-relaxed">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
if (numberedListItems.length > 0) {
|
||||
elements.push(
|
||||
<ol
|
||||
key={`ol-end`}
|
||||
className="list-decimal list-inside ml-6 space-y-2 my-6"
|
||||
>
|
||||
{numberedListItems.map((item, i) => (
|
||||
<li key={i} className="leading-relaxed">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
|
||||
return elements;
|
||||
})()}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Back to Blog */}
|
||||
<section className="bg-muted/30 py-12 md:py-20">
|
||||
<div className="mx-auto max-w-4xl px-6">
|
||||
<div className="flex justify-center">
|
||||
<Button asChild size="lg" variant="outline">
|
||||
<Link href="/blog" className="flex items-center gap-2">
|
||||
<ArrowLeft className="size-4" />
|
||||
مشاهده سایر مقالات
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
import { BlogCard } from "@/components/blog-card";
|
||||
|
||||
// Blog posts data - placeholder content
|
||||
const blogPosts = [
|
||||
{
|
||||
slug: "system-integration-guide",
|
||||
title: "راهنمای جامع یکپارچه‌سازی سیستم‌ها: از صفر تا صد",
|
||||
excerpt:
|
||||
"در این مقاله، به بررسی جامع فرآیند یکپارچه‌سازی سیستم‌ها می‌پردازیم. از تعاریف پایه تا روش‌های پیشرفته و بهترین روش‌های پیاده‌سازی را پوشش می‌دهیم.",
|
||||
date: "۱۴۰۳/۰۹/۲۰",
|
||||
readTime: "۱۲",
|
||||
category: "یکپارچه‌سازی",
|
||||
image: "/assets/main-pic/4section/Systems Integration.jpg",
|
||||
},
|
||||
{
|
||||
slug: "automation-best-practices",
|
||||
title: "بهترین روش‌های اتوماسیون فرآیندهای کسب‌وکار",
|
||||
excerpt:
|
||||
"اتوماسیون فرآیندها یکی از کلیدی‌ترین راهکارهای بهبود بهره‌وری در کسب‌وکارها است. در این مقاله با اصول، چالش‌ها و راهکارهای عملی آشنا می‌شوید.",
|
||||
date: "۱۴۰۳/۰۹/۱۵",
|
||||
readTime: "۱۰",
|
||||
category: "اتوماسیون",
|
||||
image: "/assets/main-pic/4section/Process Automation.jpg",
|
||||
},
|
||||
{
|
||||
slug: "social-media-integration",
|
||||
title: "یکپارچه‌سازی شبکه‌های اجتماعی: راهنمای عملی",
|
||||
excerpt:
|
||||
"یادگیری نحوه اتصال و مدیریت پلتفرم‌های مختلف شبکه‌های اجتماعی می‌تواند به شما کمک کند تا ارتباط مؤثرتری با مشتریان خود برقرار کنید.",
|
||||
date: "۱۴۰۳/۰۹/۱۰",
|
||||
readTime: "۸",
|
||||
category: "شبکه‌های اجتماعی",
|
||||
image: "/assets/main-pic/4section/Interaction with Social Networks.jpg",
|
||||
},
|
||||
{
|
||||
slug: "management-dashboards",
|
||||
title: "طراحی و پیاده‌سازی پنل‌های مدیریتی پیشرفته",
|
||||
excerpt:
|
||||
"پنل‌های مدیریتی قدرتمند به شما امکان می‌دهند تا داده‌های خود را به صورت مؤثر مدیریت و تحلیل کنید. در این مقاله ویژگی‌های کلیدی را بررسی می‌کنیم.",
|
||||
date: "۱۴۰۳/۰۹/۰۵",
|
||||
readTime: "۹",
|
||||
category: "مدیریت داده",
|
||||
image: "/assets/main-pic/4section/Powerful Management panels.jpg",
|
||||
},
|
||||
{
|
||||
slug: "api-integration-fundamentals",
|
||||
title: "مبانی یکپارچه‌سازی API: راهنمای مبتدیان",
|
||||
excerpt:
|
||||
"APIها پایه و اساس اتصال سیستم‌های مدرن هستند. در این مقاله با مفاهیم پایه، انواع APIها و نحوه استفاده از آن‌ها آشنا می‌شوید.",
|
||||
date: "۱۴۰۳/۰۸/۲۸",
|
||||
readTime: "۷",
|
||||
category: "توسعه",
|
||||
image: "/assets/main-pic/4section/Systems Integration.jpg",
|
||||
},
|
||||
{
|
||||
slug: "workflow-automation",
|
||||
title: "خودکارسازی Workflow: از ایده تا اجرا",
|
||||
excerpt:
|
||||
"یادگیری نحوه طراحی و پیاده‌سازی workflowهای خودکار می‌تواند به طور قابل توجهی کارایی کسب‌وکار شما را افزایش دهد.",
|
||||
date: "۱۴۰۳/۰۸/۲۰",
|
||||
readTime: "۱۱",
|
||||
category: "اتوماسیون",
|
||||
image: "/assets/main-pic/4section/Process Automation.jpg",
|
||||
},
|
||||
];
|
||||
|
||||
export default function BlogPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<section className="bg-background pt-32 pb-20 md:pt-40 md:pb-28">
|
||||
<div className="mx-auto max-w-4xl px-6">
|
||||
<div className="text-center space-y-6">
|
||||
<h1 className="text-4xl font-bold md:text-5xl lg:text-6xl leading-tight tracking-normal">
|
||||
وبلاگ
|
||||
</h1>
|
||||
<p className="text-xl leading-relaxed tracking-normal text-muted-foreground max-w-2xl mx-auto">
|
||||
آخرین مقالات، راهنماها و نکات مفید در زمینه یکپارچه‌سازی، اتوماسیون و مدیریت سیستم‌ها
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Blog Posts Grid */}
|
||||
<section className="bg-background pb-20 md:pb-28">
|
||||
<div className="mx-auto max-w-7xl px-6">
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{blogPosts.map((post) => (
|
||||
<BlogCard key={post.slug} {...post} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Calendar, Clock, ArrowLeft } from "lucide-react";
|
||||
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
|
||||
|
||||
interface BlogCardProps {
|
||||
slug: string;
|
||||
title: string;
|
||||
excerpt: string;
|
||||
date: string;
|
||||
readTime: string;
|
||||
category: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
export function BlogCard({
|
||||
slug,
|
||||
title,
|
||||
excerpt,
|
||||
date,
|
||||
readTime,
|
||||
category,
|
||||
image,
|
||||
}: BlogCardProps) {
|
||||
return (
|
||||
<Link href={`/blog/${slug}`} className="group block h-full">
|
||||
<Card className="h-full flex flex-col overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1 dark:border-transparent">
|
||||
{/* Image with 3:2 aspect ratio */}
|
||||
<div className="relative aspect-[3/2] w-full overflow-hidden bg-muted">
|
||||
<Image
|
||||
src={image}
|
||||
alt={title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
||||
/>
|
||||
{/* Category Badge */}
|
||||
<div className="absolute top-4 right-4">
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary/90 text-primary-foreground backdrop-blur-sm">
|
||||
{category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardHeader className="flex-1 flex flex-col">
|
||||
<h3 className="text-xl font-bold leading-tight tracking-normal group-hover:text-primary transition-colors line-clamp-2">
|
||||
{title}
|
||||
</h3>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="flex-1">
|
||||
<p className="text-muted-foreground leading-relaxed tracking-normal line-clamp-3 text-sm">
|
||||
{excerpt}
|
||||
</p>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="flex items-center justify-between gap-4 text-xs text-muted-foreground border-t pt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="size-4" />
|
||||
<span>{date}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="size-4" />
|
||||
<span>{readTime} دقیقه</span>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -12,7 +12,6 @@ const menuItems = [
|
||||
{ name: 'درباره ما', href: '/about' },
|
||||
{ name: 'راه حل‌ها', href: '/solutions' },
|
||||
{ name: 'قیمت‌گذاری', href: '/pricing' },
|
||||
{ name: 'وبلاگ', href: '/blog' },
|
||||
]
|
||||
|
||||
export const HeroHeader = () => {
|
||||
|
||||
@@ -18,7 +18,7 @@ export default function Pricing() {
|
||||
</p>
|
||||
<p className="text-lg leading-relaxed tracking-normal text-foreground font-medium">
|
||||
راه‌حل‌های ما از <span className="text-primary font-bold">۲ میلیون تومان</span> شروع می‌شوند و بر اساس نیازهای دقیق شما محاسبه می‌گردند.
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user