Initial commit: Arad Arisman corporate website

Next.js site for Arad Arisman (livestock/poultry feed supplements) with: - Homepage with full-screen image slider, product/category showcases, stats - About, Contact pages - Products catalog with pagination and detail pages - Blog with pagination and detail pages - RTL Persian layout with Vazirmatn font
2026-08-12 04:30:59 +04:30 · 2026-08-09 21:05:26 +03:30
commit e34fbe6e72
88 changed files with 9578 additions and 0 deletions
@@ -0,0 +1,119 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import Container from "@/components/Container";
+import PageBanner from "@/components/PageBanner";
+import PostCard from "@/components/PostCard";
+import { getPostBySlug, getRelatedPosts, posts } from "@/data/posts";
+
+export function generateStaticParams() {
+  return posts.map((p) => ({ slug: p.slug }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const post = getPostBySlug(slug);
+  if (!post) return {};
+  return {
+    title: `${post.title} | آراد آریسمان`,
+    description: post.excerpt,
+  };
+}
+
+export default async function BlogDetailPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const post = getPostBySlug(slug);
+  if (!post) notFound();
+
+  const related = getRelatedPosts(post);
+
+  return (
+    <>
+      <PageBanner title={post.title} breadcrumb="مقالات" />
+
+      <section className="py-16 sm:py-20">
+        <Container className="max-w-3xl">
+          <Link
+            href="/blog"
+            className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-primary-dark transition-colors"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M10.7 18.7a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.4l6-6a1 1 0 1 1 1.4 1.4L6 11.3h14a1 1 0 1 1 0 2H6l4.7 4.3a1 1 0 0 1 0 1.4Z"
+                fill="currentColor"
+              />
+            </svg>
+            بازگشت به مقالات
+          </Link>
+
+          <div className="mt-6 flex items-center gap-3 text-sm text-foreground/70">
+            <span className="rounded-full bg-primary/5 px-3 py-1 text-xs font-semibold text-primary">
+              {post.category}
+            </span>
+            <span>{post.date}</span>
+            <span className="h-1 w-1 rounded-full bg-foreground/30" />
+            <span>{post.readingTime}</span>
+          </div>
+
+          <div className="relative mt-6 aspect-[16/9] rounded-3xl overflow-hidden shadow-xl bg-surface">
+            <Image
+              src={post.cover}
+              alt={post.title}
+              fill
+              priority
+              className="object-cover"
+              sizes="(min-width: 1024px) 768px, 100vw"
+            />
+          </div>
+
+          <div className="mt-8 space-y-5">
+            {post.content.map((paragraph) => (
+              <p key={paragraph} className="leading-8 text-foreground">
+                {paragraph}
+              </p>
+            ))}
+          </div>
+
+          <div className="mt-10 rounded-2xl bg-surface p-6 flex flex-wrap items-center justify-between gap-4">
+            <div>
+              <p className="font-bold text-secondary">نویسنده: تیم آراد آریسمان</p>
+              <p className="mt-1 text-sm text-foreground">
+                برای مشاوره تخصصی تغذیه دام و طیور با ما در تماس باشید.
+              </p>
+            </div>
+            <Link
+              href="/contact"
+              className="rounded-full bg-primary px-6 py-3 text-white font-semibold hover:bg-primary-dark transition-colors shrink-0"
+            >
+              تماس با ما
+            </Link>
+          </div>
+        </Container>
+      </section>
+
+      {related.length > 0 && (
+        <section className="pb-16 sm:pb-20 bg-surface pt-16">
+          <Container>
+            <h2 className="text-2xl font-extrabold text-primary">
+              مقالات مرتبط
+            </h2>
+            <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {related.map((p) => (
+                <PostCard key={p.id} post={p} />
+              ))}
+            </div>
+          </Container>
+        </section>
+      )}
+    </>
+  );
+}