Connect the storefront to Meshkee catalog, blogs, and static image slots.

Wire homepage specials, product/blog pages, instant search, and the customer portal so the live pharmacy site can be managed from the dashboard.

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

components/home/BlogCarousel.tsx

@@ -5,10 +5,26 @@ import Link from "next/link";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Container } from "@/components/Container";
 import { Placeholder } from "@/components/Placeholder";
-import { blogs } from "@/lib/data";
+import { blogs as sampleBlogs } from "@/lib/data";
+import { blogHref, blogImage, type BlogPost } from "@/lib/blog";
+import { formatFaDate } from "@/lib/format";
 
-export function BlogCarousel() {
+export function BlogCarousel({ posts }: { posts?: BlogPost[] }) {
   const scroller = useRef<HTMLDivElement>(null);
+  const list =
+    posts && posts.length
+      ? posts.map((post) => ({
+          id: post.id,
+          title: post.title,
+          excerpt: post.abstract || "",
+          date: formatFaDate(post.publishedAt || post.createdAt),
+          image: blogImage(post),
+          href: blogHref(post),
+        }))
+      : sampleBlogs.map((post) => ({
+          ...post,
+          href: "/blog",
+        }));
 
   return (
     <section id="blog" className="pt-10">
@@ -18,7 +34,7 @@ export function BlogCarousel() {
             <h2 className="text-[18px] font-bold text-navy">آخرین مطالب مجله سلامت</h2>
             <p className="mt-1 text-[13px] text-muted">نکته‌های کاربردی از داروسازان داروخانه</p>
           </div>
-          <div className="flex gap-2">
+          <div className="flex items-center gap-2">
             <button
               type="button"
               onClick={() => scroller.current?.scrollBy({ left: 320, behavior: "smooth" })}
@@ -35,18 +51,21 @@ export function BlogCarousel() {
             >
               <ChevronLeft className="size-4" />
             </button>
+            <Link href="/blog" className="hidden text-[13px] text-primary sm:block">
+              مشاهده همه
+            </Link>
           </div>
         </div>
         <div ref={scroller} className="no-scrollbar flex snap-x gap-4 overflow-x-auto">
-          {blogs.map((post) => (
+          {list.map((post) => (
             <article key={post.id} className="w-[280px] shrink-0 snap-start overflow-hidden rounded-2xl bg-white sm:w-[320px]">
-              <Link href="#" className="block overflow-hidden bg-sky">
+              <Link href={post.href} className="block overflow-hidden bg-sky">
                 <Placeholder src={post.image} className="aspect-[16/10] w-full object-cover" />
               </Link>
               <div className="p-4">
                 <p className="text-[12px] text-muted">{post.date}</p>
                 <h3 className="mt-2 text-[14px] font-bold leading-7 text-navy">
-                  <Link href="#">{post.title}</Link>
+                  <Link href={post.href}>{post.title}</Link>
                 </h3>
                 <p className="mt-2 line-clamp-2 text-[12.5px] leading-6 text-muted">{post.excerpt}</p>
               </div>