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,82 @@
+"use client";
+
+import { useRef } from "react";
+import Link from "next/link";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Container } from "@/components/Container";
+import { ProductCard } from "@/components/ui/ProductCard";
+import type { Product } from "@/lib/data";
+
+type Props = {
+  id?: string;
+  title: string;
+  subtitle?: string;
+  href?: string;
+  products: Product[];
+  accent?: "default" | "sale";
+};
+
+export function ProductCarousel({
+  id,
+  title,
+  subtitle,
+  href = "#",
+  products,
+  accent = "default",
+}: Props) {
+  const scroller = useRef<HTMLDivElement>(null);
+
+  const scrollBy = (dir: number) => {
+    scroller.current?.scrollBy({ left: dir * -280, behavior: "smooth" });
+  };
+
+  return (
+    <section id={id} className="pt-10">
+      <Container>
+        <div
+          className={`rounded-2xl p-4 sm:p-5 ${accent === "sale" ? "bg-[#fff1f4]" : "bg-transparent"}`}
+        >
+          <div className="mb-4 flex items-center justify-between gap-3">
+            <div>
+              <h2 className={`text-[18px] font-bold ${accent === "sale" ? "text-sale" : "text-navy"}`}>
+                {title}
+              </h2>
+              {subtitle ? <p className="mt-1 text-[13px] text-muted">{subtitle}</p> : null}
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => scrollBy(-1)}
+                className="grid size-9 place-items-center rounded-full border border-line bg-white text-navy"
+                aria-label="قبلی"
+              >
+                <ChevronRight className="size-4" />
+              </button>
+              <button
+                type="button"
+                onClick={() => scrollBy(1)}
+                className="grid size-9 place-items-center rounded-full border border-line bg-white text-navy"
+                aria-label="بعدی"
+              >
+                <ChevronLeft className="size-4" />
+              </button>
+              <Link href={href} className="hidden text-[13px] text-primary sm:block">
+                مشاهده همه
+              </Link>
+            </div>
+          </div>
+          <div
+            ref={scroller}
+            className="no-scrollbar flex snap-x snap-mandatory gap-3 overflow-x-auto pb-1"
+          >
+            {products.map((product) => (
+              <div key={product.id} className="w-[210px] shrink-0 snap-start sm:w-[230px]">
+                <ProductCard product={product} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}