checkpoint before checking out main

2026-08-13 13:53:22 +03:30
parent a7643bb931
commit 141f1a30be
23 changed files with 1357 additions and 84 deletions
@@ -0,0 +1,52 @@
+import { Placeholder } from "@/components/ui/Placeholder";
+import { SectionTitle } from "@/components/ui/SectionTitle";
+import { Carousel } from "@/components/ui/Carousel";
+import { blogPosts } from "@/data/sample";
+
+export function BlogCarousel() {
+  return (
+    <section className="py-10 md:py-14">
+      <div className="mx-auto max-w-7xl px-4">
+        <SectionTitle
+          title="آخرین مطالب وبلاگ"
+          enTitle="Latest Blog"
+          action="وبلاگ"
+        />
+        <Carousel ariaLabel="کاروسل وبلاگ">
+          {blogPosts.map((post) => (
+            <article
+              key={post.id}
+              className="w-[280px] shrink-0 overflow-hidden rounded-xl border border-border bg-surface transition-shadow hover:shadow-md md:w-[300px]"
+            >
+              <Placeholder
+                width="100%"
+                height="160px"
+                label="300×160"
+                className="w-full rounded-none border-0 border-b border-dashed"
+              />
+              <div className="p-4">
+                <div className="mb-2 flex items-center gap-2 text-[11px] text-muted">
+                  <span>{post.date}</span>
+                  <span>•</span>
+                  <span>{post.readTime} مطالعه</span>
+                </div>
+                <h3 className="mb-2 line-clamp-2 text-sm font-bold leading-relaxed">
+                  {post.title}
+                </h3>
+                <p className="line-clamp-2 text-xs leading-relaxed text-muted">
+                  {post.excerpt}
+                </p>
+                <button
+                  type="button"
+                  className="mt-3 text-xs font-medium text-red transition-colors hover:text-red-dark"
+                >
+                  ادامه مطلب ←
+                </button>
+              </div>
+            </article>
+          ))}
+        </Carousel>
+      </div>
+    </section>
+  );
+}