Add Arjmand Pharmacy Next.js homepage.

Initial RTL storefront with header, slider, product sections, and local image assets. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-16 17:15:14 +03:30
commit cd2f9dfc9d
80 changed files with 8604 additions and 0 deletions
@@ -0,0 +1,59 @@
+"use client";
+
+import { useRef } from "react";
+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";
+
+export function BlogCarousel() {
+  const scroller = useRef<HTMLDivElement>(null);
+
+  return (
+    <section id="blog" className="pt-10">
+      <Container>
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <h2 className="text-[18px] font-bold text-navy">آخرین مطالب مجله سلامت</h2>
+            <p className="mt-1 text-[13px] text-muted">نکته‌های کاربردی از داروسازان داروخانه</p>
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => scroller.current?.scrollBy({ left: 320, behavior: "smooth" })}
+              className="grid size-9 place-items-center rounded-full border border-line bg-white"
+              aria-label="قبلی"
+            >
+              <ChevronRight className="size-4" />
+            </button>
+            <button
+              type="button"
+              onClick={() => scroller.current?.scrollBy({ left: -320, behavior: "smooth" })}
+              className="grid size-9 place-items-center rounded-full border border-line bg-white"
+              aria-label="بعدی"
+            >
+              <ChevronLeft className="size-4" />
+            </button>
+          </div>
+        </div>
+        <div ref={scroller} className="no-scrollbar flex snap-x gap-4 overflow-x-auto">
+          {blogs.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">
+                <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>
+                </h3>
+                <p className="mt-2 line-clamp-2 text-[12.5px] leading-6 text-muted">{post.excerpt}</p>
+              </div>
+            </article>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}