Build the Salar Store storefront and connect products, blogs, and home specials to the Meshkee API.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/BlogCarousel.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+import { getLatestPosts } from "@/lib/mappers";
+import { Carousel } from "./Carousel";
+import { Media } from "./Media";
+
+export async function BlogCarousel() {
+  const posts = await getLatestPosts();
+  if (!posts.length) return null;
+
+  return (
+    <section className="container-site mt-14">
+      <div className="flex items-end justify-between mb-6">
+        <h2 className="section-title">آخرین مقالات</h2>
+        <Link href="/blog" className="text-sm text-brand">
+          همه مقالات
+        </Link>
+      </div>
+      <Carousel ariaLabel="مقالات">
+        {posts.map((post) => (
+          <Link
+            key={post.slug}
+            href={`/blog/${post.slug}`}
+            className="snap-start shrink-0 w-[240px] sm:w-[280px] rounded-2xl bg-white border border-black/5 overflow-hidden hover:border-brand/40"
+          >
+            <Media src={post.image} alt="" className="aspect-[16/10]" sizes="280px" />
+            <div className="p-4">
+              <time className="text-xs text-zinc-400">{post.date}</time>
+              <h3 className="mt-2 text-sm leading-7 line-clamp-2">{post.title}</h3>
+              {post.abstract ? (
+                <p className="mt-1 text-xs leading-6 text-zinc-500 line-clamp-2">{post.abstract}</p>
+              ) : null}
+            </div>
+          </Link>
+        ))}
+      </Carousel>
+    </section>
+  );
+}