Initial commit

2026-08-16 23:34:47 +03:30
commit 05ea45852e
53 changed files with 7867 additions and 0 deletions
@@ -0,0 +1,94 @@
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { ArrowLeftIcon, ChevronLeftIcon, ClockIcon } from 'lucide-react';
+import { Reveal } from '../components/Reveal';
+import { ButtonLink } from '../components/Button';
+import { ArticleCard } from '../components/ArticleCard';
+import { Newsletter } from '../components/home/Newsletter';
+import { ARTICLES } from '../data/site';
+
+export function ArticleDetail() {
+  const { slug } = useParams<{slug: string;}>();
+  const article = ARTICLES.find((a) => a.slug === slug);
+
+  if (!article) {
+    return (
+      <section className="flex min-h-[70vh] flex-col items-center justify-center px-6 text-center">
+        <h1 className="text-section font-bold text-ivory">این مقاله پیدا نشد</h1>
+        <p className="mt-4 text-sm font-light text-ivory/60">فهرست کامل مقالات وبلاگ را ببینید.</p>
+        <ButtonLink to="/blog" variant="copper" className="mt-8">
+          بازگشت به وبلاگ
+          <ArrowLeftIcon className="h-4 w-4" />
+        </ButtonLink>
+      </section>);
+
+  }
+
+  const related = ARTICLES.filter((a) => a.slug !== article.slug).slice(0, 3);
+
+  return (
+    <>
+      <section className="relative flex h-[56vh] min-h-[400px] items-end overflow-hidden">
+        <img src={article.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
+        <div className="absolute inset-0 bg-ink/75" aria-hidden="true" />
+        <div
+          className="absolute inset-0"
+          style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.15) 70%)' }}
+          aria-hidden="true" />
+        
+        <div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
+          <nav aria-label="مسیر صفحه" className="flex items-center gap-2 text-xs font-light text-ivory/50">
+            <Link to="/" className="transition-colors hover:text-copper">
+              صفحه اصلی
+            </Link>
+            <ChevronLeftIcon className="h-3.5 w-3.5" />
+            <Link to="/blog" className="transition-colors hover:text-copper">
+              وبلاگ
+            </Link>
+            <ChevronLeftIcon className="h-3.5 w-3.5" />
+            <span className="text-copper">{article.category}</span>
+          </nav>
+          <h1 className="mt-5 max-w-[700px] text-hero font-bold text-ivory">{article.title}</h1>
+          <div className="mt-6 flex items-center gap-5 text-xs font-light text-ivory/60">
+            <span>{article.date}</span>
+            <span className="flex items-center gap-1.5">
+              <ClockIcon className="h-3.5 w-3.5" />
+              {article.read}
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <article className="bg-ink py-20 lg:py-28">
+        <div className="mx-auto max-w-3xl px-6">
+          <Reveal>
+            <p className="border-r-2 border-copper pr-6 text-lg font-light leading-10 text-ivory/80">
+              {article.excerpt}
+            </p>
+          </Reveal>
+          {article.body.map((paragraph, i) =>
+          <Reveal key={paragraph} delay={0.03 * i}>
+              <p className="mt-8 text-base font-light leading-10 text-ivory/70">{paragraph}</p>
+            </Reveal>
+          )}
+        </div>
+      </article>
+
+      <section className="bg-char py-20 lg:py-28" aria-label="مقالات مرتبط">
+        <div className="mx-auto max-w-site px-6 lg:px-10">
+          <h2 className="text-section font-bold text-ivory">مقالات مرتبط</h2>
+          <div className="mt-6 h-px w-24 bg-copper/70" />
+          <div className="mt-12 grid gap-6 lg:grid-cols-3">
+            {related.map((item, i) =>
+            <Reveal key={item.slug} delay={0.06 * i} className="h-full">
+                <ArticleCard article={item} />
+              </Reveal>
+            )}
+          </div>
+        </div>
+      </section>
+
+      <Newsletter />
+    </>);
+
+}