diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx new file mode 100644 index 0000000..3bd4a5c --- /dev/null +++ b/app/blog/[slug]/page.tsx @@ -0,0 +1,546 @@ +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 */} +
+
+
+ + + بازگشت به وبلاگ + + +
+
+ + {post.category} + +
+ +

+ {post.title} +

+ +
+
+ + {post.date} +
+
+ + {post.readTime} دقیقه مطالعه +
+
+
+
+
+
+ + {/* Featured Image with 3:2 aspect ratio */} +
+
+
+ {post.title} +
+
+
+ + {/* Content Section */} +
+
+
+
+ {(() => { + 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( +
    + {listItems.map((item, i) => ( +
  • + {item} +
    • + ))} +
+ ); + listItems = []; + } + if (numberedListItems.length > 0) { + elements.push( +
    + {numberedListItems.map((item, i) => ( +
  1. + {item} +
    2. + ))} +
+ ); + 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( +
    + {listItems.map((item, i) => ( +
  • + {item} +
    • + ))} +
+ ); + 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( +
    + {numberedListItems.map((item, i) => ( +
  1. + {item} +
    2. + ))} +
+ ); + numberedListItems = []; + isNumberedList = false; + } + listItems.push(content); + return; + } + + // Close lists before other content + if (listItems.length > 0) { + elements.push( +
    + {listItems.map((item, i) => ( +
  • + {item} +
    • + ))} +
+ ); + listItems = []; + } + if (numberedListItems.length > 0) { + elements.push( +
    + {numberedListItems.map((item, i) => ( +
  1. + {item} +
    2. + ))} +
+ ); + numberedListItems = []; + isNumberedList = false; + } + + // Process headings + if (trimmedLine.startsWith("# ")) { + elements.push( +

+ {trimmedLine.substring(2)} +

+ ); + return; + } + if (trimmedLine.startsWith("## ")) { + elements.push( +

+ {trimmedLine.substring(3)} +

+ ); + return; + } + if (trimmedLine.startsWith("### ")) { + elements.push( +

+ {trimmedLine.substring(4)} +

+ ); + return; + } + + // Process links + if (trimmedLine.startsWith("[") && trimmedLine.includes("](")) { + const match = trimmedLine.match(/\[([^\]]+)\]\(([^)]+)\)/); + if (match) { + elements.push( +

+ + {match[1]} + +

+ ); + return; + } + } + + // Process regular text + elements.push( +

+ {trimmedLine} +

+ ); + }); + + // Close any remaining lists + if (listItems.length > 0) { + elements.push( +
    + {listItems.map((item, i) => ( +
  • + {item} +
    • + ))} +
+ ); + } + if (numberedListItems.length > 0) { + elements.push( +
    + {numberedListItems.map((item, i) => ( +
  1. + {item} +
    2. + ))} +
+ ); + } + + return elements; + })()} +
+
+
+
+ + {/* Back to Blog */} +
+
+
+ +
+
+
+ + ); +} + diff --git a/app/blog/page.tsx b/app/blog/page.tsx new file mode 100644 index 0000000..3679c1c --- /dev/null +++ b/app/blog/page.tsx @@ -0,0 +1,99 @@ +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 */} +
+
+
+

+ وبلاگ +

+

+ آخرین مقالات، راهنماها و نکات مفید در زمینه یکپارچه‌سازی، اتوماسیون و مدیریت سیستم‌ها +

+
+
+
+ + {/* Blog Posts Grid */} +
+
+
+ {blogPosts.map((post) => ( + + ))} +
+
+
+ + ); +} + + + diff --git a/components/blog-card.tsx b/components/blog-card.tsx new file mode 100644 index 0000000..3fe8bcb --- /dev/null +++ b/components/blog-card.tsx @@ -0,0 +1,73 @@ +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 ( + + + {/* Image with 3:2 aspect ratio */} +
+ {title} + {/* Category Badge */} +
+ + {category} + +
+
+ + +

+ {title} +

+ + + +

+ {excerpt} +

+ + + +
+ + {date} +
+
+ + {readTime} دقیقه +
+ + + + ); +} + + + diff --git a/components/header.tsx b/components/header.tsx index 6696287..e056a0f 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -12,6 +12,7 @@ const menuItems = [ { name: 'درباره ما', href: '/about' }, { name: 'راه حل‌ها', href: '/solutions' }, { name: 'قیمت‌گذاری', href: '/pricing' }, + { name: 'وبلاگ', href: '/blog' }, ] export const HeroHeader = () => { diff --git a/components/logo.tsx b/components/logo.tsx index 30487fa..5eac289 100644 --- a/components/logo.tsx +++ b/components/logo.tsx @@ -26,7 +26,7 @@ export const LogoIcon = ({ }) => { return ( Logo + + diff --git a/public/assets/feepLogo.png b/public/assets/feepLogo.png new file mode 100644 index 0000000..ca2a254 Binary files /dev/null and b/public/assets/feepLogo.png differ diff --git a/public/assets/main-pic/main-pic.jpg b/public/assets/main-pic/main-pic.jpg new file mode 100644 index 0000000..7304b11 Binary files /dev/null and b/public/assets/main-pic/main-pic.jpg differ