Polish storefront SEO, specials, and homepage UX.

Publish Meshkee sitemap-config, map product-source specials without variants, restore hero autoplay, and tighten page heroes, product images, and section order.

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

components/home/BlogCarousel.tsx

@@ -37,53 +37,56 @@ export function BlogCarousel({
   return (
     <section id="blog" className="py-20 sm:py-24">
       <Container>
-        <div className="mb-10 flex items-end justify-between gap-4">
-          <div>
-            <div className="flex items-center gap-3">
-              <span className="h-[3px] w-8 bg-brand" />
-              <p className="section-kicker">Blog</p>
+        <div className="mb-10">
+          <div className="flex items-center gap-3">
+            <span className="h-[3px] w-8 bg-brand" />
+            <p className="section-kicker">Blog</p>
+          </div>
+          <div className="mt-3 flex items-center justify-between gap-4">
+            <h2 className="text-3xl font-extrabold tracking-tight sm:text-[40px]">آخرین مقالات</h2>
+            <div className="flex shrink-0 items-center gap-2">
+              <button
+                type="button"
+                onClick={() => scrollByCard(1)}
+                className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
+                aria-label="قبلی"
+              >
+                <ChevronRight className="size-4" />
+              </button>
+              <button
+                type="button"
+                onClick={() => scrollByCard(-1)}
+                className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
+                aria-label="بعدی"
+              >
+                <ChevronLeft className="size-4" />
+              </button>
+              <Link href="/blog" className="hidden rounded-xl bg-ink px-5 py-2.5 text-[13px] text-white hover:bg-brand sm:inline-flex">
+                مشاهده همه
+              </Link>
             </div>
-            <h2 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-[40px]">آخرین مقالات</h2>
-            <p className="mt-2 max-w-xl text-[14px] leading-7 text-muted">
-              نکته‌هایی از تعمیرگاه و بورس قطعات — برای مصرف‌کننده و همکار.
-            </p>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => scrollByCard(1)}
-              className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
-              aria-label="قبلی"
-            >
-              <ChevronRight className="size-4" />
-            </button>
-            <button
-              type="button"
-              onClick={() => scrollByCard(-1)}
-              className="grid size-10 place-items-center rounded-full border border-line bg-white text-ink hover:border-brand"
-              aria-label="بعدی"
-            >
-              <ChevronLeft className="size-4" />
-            </button>
-            <Link href="/blog" className="hidden rounded-xl bg-ink px-5 py-2.5 text-[13px] text-white hover:bg-brand sm:inline-flex">
-              مشاهده همه
-            </Link>
           </div>
+          <p className="mt-2 max-w-xl text-[14px] leading-7 text-muted">
+            نکته‌هایی از تعمیرگاه و بورس قطعات — برای مصرف‌کننده و همکار.
+          </p>
         </div>
 
         <div ref={scroller} className="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto">
           {usingApi
             ? posts.map((post) => (
-                <article key={post.id} className="w-[min(85vw,340px)] shrink-0 snap-start">
+                <article
+                  key={post.id}
+                  className="w-[min(85vw,340px)] shrink-0 snap-start rounded-2xl border border-line bg-white p-3"
+                >
                   <Link href={blogHref(post)} className="group block">
-                    <div className="overflow-hidden rounded-2xl">
+                    <div className="overflow-hidden rounded-xl">
                       <Placeholder
                         src={blogImage(post)}
                         alt={post.title}
                         className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
                       />
                     </div>
-                    <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">
+                    <p className="mt-3 text-[12px] text-muted">
                       {formatFaDate(post.publishedAt || post.createdAt)}
                     </p>
                     <h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
@@ -94,16 +97,19 @@ export function BlogCarousel({
                 </article>
               ))
             : fallback.map((post) => (
-                <article key={post.slug} className="w-[min(85vw,340px)] shrink-0 snap-start">
+                <article
+                  key={post.slug}
+                  className="w-[min(85vw,340px)] shrink-0 snap-start rounded-2xl border border-line bg-white p-3"
+                >
                   <Link href={`/blog/${post.slug}`} className="group block">
-                    <div className="overflow-hidden rounded-2xl">
+                    <div className="overflow-hidden rounded-xl">
                       <Placeholder
                         src={post.image}
                         alt={post.title}
                         className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
                       />
                     </div>
-                    <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
+                    <p className="mt-3 text-[12px] text-muted">{post.date}</p>
                     <h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
                     <p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.excerpt}</p>
                   </Link>

components/home/Hero.tsx

@@ -1,156 +1,220 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Placeholder } from "@/components/Placeholder";
 import { SlotLink } from "@/components/SlotLink";
-import { parseAspectRatio } from "@/lib/static-images";
 import type { SlotMediaItem } from "@/lib/static-images";
 
-function circularOffset(index: number, active: number, length: number) {
-  let diff = index - active;
-  if (diff > length / 2) diff -= length;
-  if (diff < -length / 2) diff += length;
-  return diff;
-}
+const SLIDE_W = "min(1280px, calc(100vw - 5rem))";
+const GAP = "1rem";
+const INTERVAL_MS = 6000;
+const TRANSITION_MS = 700;
 
-const slideWidth = "min(1280px, calc(100vw - 5rem))";
-
-export function Hero({ slides, aspectRatio }: { slides: SlotMediaItem[]; aspectRatio?: string }) {
+export function Hero({ slides }: { slides: SlotMediaItem[]; aspectRatio?: string }) {
   const [active, setActive] = useState(0);
+  const [shift, setShift] = useState(0);
+  const [animating, setAnimating] = useState(false);
   const [paused, setPaused] = useState(false);
-  const ratio = parseAspectRatio(aspectRatio);
+  const lock = useRef(false);
+  const shiftRef = useRef(0);
+  const countRef = useRef(slides.length);
+  countRef.current = slides.length;
+
+  const finishTransition = () => {
+    if (!lock.current) return;
+    lock.current = false;
+    const delta = shiftRef.current;
+    const total = countRef.current;
+    shiftRef.current = 0;
+    setActive((current) => (current + delta + total) % total);
+    setShift(0);
+    setAnimating(false);
+  };
+
+  const go = (direction: -1 | 1) => {
+    if (countRef.current < 2 || lock.current) return;
+    lock.current = true;
+    shiftRef.current = direction;
+    setAnimating(true);
+    setShift(direction);
+    window.setTimeout(() => {
+      if (lock.current && shiftRef.current === direction) finishTransition();
+    }, TRANSITION_MS + 80);
+  };
 
   useEffect(() => {
     setActive(0);
+    setShift(0);
+    shiftRef.current = 0;
+    setAnimating(false);
+    lock.current = false;
   }, [slides.length]);
 
   useEffect(() => {
-    if (slides.length < 2 || paused) return;
-    const timer = setInterval(() => {
-      setActive((current) => (current + 1) % slides.length);
-    }, 6000);
-    return () => clearInterval(timer);
-  }, [paused, slides.length]);
-
-  const go = (direction: number) => {
-    if (slides.length < 2) return;
-    setActive((current) => (current + direction + slides.length) % slides.length);
-  };
+    if (slides.length < 2 || paused || animating) return;
+    const timer = window.setInterval(() => go(1), INTERVAL_MS);
+    return () => window.clearInterval(timer);
+  }, [paused, animating, slides.length, active]);
 
   if (slides.length === 0) return null;
 
+  const count = slides.length;
+  const offsets =
+    count === 1
+      ? ([0] as number[])
+      : shift > 0
+        ? ([-1, 0, 1, 2] as number[])
+        : shift < 0
+          ? ([-2, -1, 0, 1] as number[])
+          : ([-1, 0, 1] as number[]);
+
   return (
     <section className="relative overflow-x-clip bg-white pt-5 pb-8">
       <div
-        className={ratio ? "relative min-h-[340px]" : "relative h-[min(62vh,640px)] min-h-[340px]"}
-        style={ratio ? { aspectRatio: ratio, maxHeight: 640 } : undefined}
+        className="relative h-[min(62vh,640px)] min-h-[340px]"
+        style={{ ["--slide-w" as string]: SLIDE_W, ["--slide-gap" as string]: GAP }}
         dir="ltr"
         onMouseEnter={() => setPaused(true)}
         onMouseLeave={() => setPaused(false)}
       >
-        {slides.map((item, i) => {
-          const offset = circularOffset(i, active, slides.length);
-          const isCenter = offset === 0;
-          const isPeek = Math.abs(offset) === 1;
+        <div
+          className="absolute inset-0"
+          style={{
+            transform: `translateX(calc(${-shift} * (var(--slide-w) + var(--slide-gap))))`,
+            transition: animating
+              ? `transform ${TRANSITION_MS}ms cubic-bezier(0.22, 1, 0.36, 1)`
+              : "none",
+          }}
+          onTransitionEnd={(event) => {
+            if (event.target !== event.currentTarget) return;
+            if (event.propertyName !== "transform") return;
+            finishTransition();
+          }}
+        >
+          {offsets.map((offset) => {
+            const index = (active + offset + count * 10) % count;
+            const item = slides[index];
+            const isActiveSlot = offset === shift;
 
-          return (
-            <article
-              key={item.id}
-              className="absolute top-0 h-full w-[min(1280px,calc(100vw-5rem))]"
-              style={{
-                left: `calc(50% - (${slideWidth}) / 2 + ${offset} * ((${slideWidth}) + 1rem))`,
-                zIndex: isCenter ? 3 : isPeek ? 2 : 1,
-                opacity: isCenter || isPeek ? 1 : 0,
-                pointerEvents: isCenter || isPeek ? "auto" : "none",
-                transition: "left 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease",
-              }}
-            >
-              {isCenter ? (
-                <SlotLink href={item.href} className="relative block h-full overflow-hidden rounded-2xl">
-                  <Placeholder
-                    src={item.image}
-                    fallbackSrc={item.fallbackSrc}
-                    alt={item.title ?? ""}
-                    className="h-full w-full object-cover"
-                  />
-                  <div
-                    className="absolute inset-x-4 bottom-4 z-10 rounded-2xl px-5 py-3.5 sm:inset-x-5 sm:bottom-5 sm:px-7 sm:py-4"
-                    style={{
-                      background:
-                        "linear-gradient(180deg, rgb(48 52 56 / 0.72) 0%, rgb(18 20 22 / 0.82) 100%)",
-                      backdropFilter: "blur(22px) saturate(180%)",
-                      WebkitBackdropFilter: "blur(22px) saturate(180%)",
-                      border: "1px solid rgb(255 255 255 / 0.22)",
-                      boxShadow:
-                        "inset 0 1px 0 rgb(255 255 255 / 0.28), 0 10px 28px rgb(0 0 0 / 0.28)",
-                    }}
-                  >
-                    <div dir="rtl" className="flex items-center justify-between gap-4">
-                      <div className="flex min-w-0 items-center gap-3 sm:gap-5">
-                        <h1 className="truncate text-[16px] font-extrabold text-white sm:text-[22px]">
-                          {item.title}
-                        </h1>
-                        <span className="hidden h-[3px] w-10 shrink-0 rounded-full bg-brand sm:block" />
-                        <span className="hidden h-6 w-px shrink-0 bg-white/20 sm:block" />
-                        {item.kicker ? (
-                          <p className="font-latin hidden shrink-0 text-[11px] tracking-[0.2em] text-white/60 uppercase sm:block">
-                            {item.kicker}
-                          </p>
-                        ) : null}
+            return (
+              <article
+                key={`slot-${offset}`}
+                className="absolute top-0 h-full"
+                style={{
+                  width: "var(--slide-w)",
+                  left: `calc(50% - var(--slide-w) / 2 + ${offset} * (var(--slide-w) + var(--slide-gap)))`,
+                  zIndex: isActiveSlot ? 3 : 2,
+                }}
+              >
+                {isActiveSlot ? (
+                  <SlotLink href={item.href} className="relative block h-full overflow-hidden rounded-2xl">
+                    <Placeholder
+                      src={item.image}
+                      fallbackSrc={item.fallbackSrc}
+                      alt={item.title ?? ""}
+                      className="h-full w-full object-cover"
+                    />
+                    <div
+                      className="absolute inset-x-4 bottom-4 z-10 rounded-2xl px-5 py-3.5 sm:inset-x-5 sm:bottom-5 sm:px-7 sm:py-4"
+                      style={{
+                        background:
+                          "linear-gradient(180deg, rgb(48 52 56 / 0.72) 0%, rgb(18 20 22 / 0.82) 100%)",
+                        backdropFilter: "blur(22px) saturate(180%)",
+                        WebkitBackdropFilter: "blur(22px) saturate(180%)",
+                        border: "1px solid rgb(255 255 255 / 0.22)",
+                        boxShadow:
+                          "inset 0 1px 0 rgb(255 255 255 / 0.28), 0 10px 28px rgb(0 0 0 / 0.28)",
+                      }}
+                    >
+                      <div dir="rtl" className="flex items-center justify-between gap-4">
+                        <div className="flex min-w-0 items-center gap-3 sm:gap-5">
+                          <h1 className="truncate text-[16px] font-extrabold text-white sm:text-[22px]">
+                            {item.title || "فروشگاه برادران برقعی"}
+                          </h1>
+                          <span className="hidden h-[3px] w-10 shrink-0 rounded-full bg-brand sm:block" />
+                          <span className="hidden h-6 w-px shrink-0 bg-white/20 sm:block" />
+                          {item.kicker ? (
+                            <p className="font-latin hidden shrink-0 text-[11px] tracking-[0.2em] text-white/60 uppercase sm:block">
+                              {item.kicker}
+                            </p>
+                          ) : null}
+                        </div>
+                        <span className="inline-flex shrink-0 rounded-xl bg-brand px-5 py-2.5 text-[13px] font-medium text-white sm:px-6 sm:py-3 sm:text-[14px]">
+                          مشاهده قطعات
+                        </span>
                       </div>
-                      <span className="inline-flex shrink-0 rounded-xl bg-brand px-5 py-2.5 text-[13px] font-medium text-white sm:px-6 sm:py-3 sm:text-[14px]">
-                        مشاهده قطعات
-                      </span>
                     </div>
-                  </div>
-                </SlotLink>
-              ) : (
-                <button
-                  type="button"
-                  className="relative block h-full w-full overflow-hidden rounded-2xl"
-                  onClick={() => setActive(i)}
-                  aria-label={item.title}
-                >
-                  <Placeholder src={item.image} fallbackSrc={item.fallbackSrc} alt="" className="h-full w-full object-cover" />
-                  <span className="absolute inset-0 bg-white/35" />
-                </button>
-              )}
-            </article>
-          );
-        })}
-
-        <div className="pointer-events-none absolute inset-y-0 left-1/2 z-10 w-[min(1280px,calc(100vw-5rem))] -translate-x-1/2">
-          <button
-            type="button"
-            onClick={() => go(1)}
-            className="pointer-events-auto absolute top-1/2 right-3 grid size-11 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm"
-            aria-label="اسلاید راست"
-          >
-            <ChevronRight className="size-5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => go(-1)}
-            className="pointer-events-auto absolute top-1/2 left-3 grid size-11 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm"
-            aria-label="اسلاید چپ"
-          >
-            <ChevronLeft className="size-5" />
-          </button>
+                  </SlotLink>
+                ) : (
+                  <button
+                    type="button"
+                    className="relative block h-full w-full overflow-hidden rounded-2xl"
+                    onClick={() => go(offset < shift ? -1 : 1)}
+                    aria-label={item.title}
+                    disabled={animating}
+                  >
+                    <Placeholder
+                      src={item.image}
+                      fallbackSrc={item.fallbackSrc}
+                      alt={item.title ?? ""}
+                      className="h-full w-full object-cover"
+                    />
+                    <span className="absolute inset-0 bg-white/35" />
+                  </button>
+                )}
+              </article>
+            );
+          })}
         </div>
+
+        {count > 1 ? (
+          <div
+            className="pointer-events-none absolute inset-y-0 left-1/2 z-10 -translate-x-1/2"
+            style={{ width: "var(--slide-w)" }}
+          >
+            <button
+              type="button"
+              onClick={() => go(1)}
+              disabled={animating}
+              className="pointer-events-auto absolute top-1/2 right-3 grid size-11 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm disabled:opacity-60"
+              aria-label="اسلاید راست"
+            >
+              <ChevronRight className="size-5" />
+            </button>
+            <button
+              type="button"
+              onClick={() => go(-1)}
+              disabled={animating}
+              className="pointer-events-auto absolute top-1/2 left-3 grid size-11 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-sm disabled:opacity-60"
+              aria-label="اسلاید چپ"
+            >
+              <ChevronLeft className="size-5" />
+            </button>
+          </div>
+        ) : null}
       </div>
 
-      <div className="relative z-10 mt-5 flex justify-center gap-2">
-        {slides.map((item, i) => (
-          <button
-            key={item.id}
-            type="button"
-            onClick={() => setActive(i)}
-            className={`h-1.5 rounded-full transition-all ${i === active ? "w-8 bg-brand" : "w-3 bg-ink/20"}`}
-            aria-label={`اسلاید ${i + 1}`}
-          />
-        ))}
-      </div>
+      {count > 1 ? (
+        <div className="relative z-10 mt-5 flex justify-center gap-2">
+          {slides.map((item, i) => (
+            <button
+              key={item.id}
+              type="button"
+              disabled={animating}
+              onClick={() => {
+                if (i === active || lock.current) return;
+                const forward = (i - active + count) % count;
+                const backward = (active - i + count) % count;
+                if (forward <= backward) go(1);
+                else go(-1);
+              }}
+              className={`h-1.5 rounded-full transition-all ${i === active && shift === 0 ? "w-8 bg-brand" : "w-3 bg-ink/20"}`}
+              aria-label={`اسلاید ${i + 1}`}
+            />
+          ))}
+        </div>
+      ) : null}
     </section>
   );
 }

components/home/Services.tsx

@@ -23,7 +23,7 @@ export function Services({ items }: { items: SlotMediaItem[] }) {
                   <Placeholder
                     src={service.image}
                     fallbackSrc={service.fallbackSrc}
-                    alt=""
+                    alt={service.title ?? ""}
                     className="mt-1 size-16 shrink-0 object-contain sm:size-[4.5rem]"
                   />
                 ) : (

components/home/WideBanner.tsx

@@ -2,7 +2,6 @@ import { Container } from "@/components/Container";
 import { Placeholder } from "@/components/Placeholder";
 import { SlotLink } from "@/components/SlotLink";
 import { glossyBar } from "@/lib/glossy";
-import { parseAspectRatio } from "@/lib/static-images";
 import type { SlotMediaItem } from "@/lib/static-images";
 
 const fallbackCopy = {
@@ -11,37 +10,32 @@ const fallbackCopy = {
   href: "/contact",
 };
 
-export function WideBanner({ image, aspectRatio }: { image?: SlotMediaItem; aspectRatio?: string }) {
+export function WideBanner({ image }: { image?: SlotMediaItem; aspectRatio?: string }) {
   const src = image?.image ?? "/images/banners/wide.jpg";
   const href = image?.href || fallbackCopy.href;
-  const ratio = parseAspectRatio(aspectRatio);
 
   return (
-    <section
-      className={`relative overflow-hidden ${ratio ? "min-h-[280px]" : "h-[280px] sm:h-[360px]"}`}
-      style={ratio ? { aspectRatio: ratio } : undefined}
-    >
+    <section className="relative h-[160px] overflow-hidden bg-ink sm:h-[200px]">
       <SlotLink href={href} className="absolute inset-0">
         <Placeholder
           src={src}
           fallbackSrc={image?.fallbackSrc ?? "/images/banners/wide.jpg"}
-          alt=""
+          alt={image?.title || fallbackCopy.title}
           className="h-full w-full object-cover"
         />
         <span className="absolute inset-0 bg-ink/20" />
       </SlotLink>
       <Container className="relative flex h-full items-center">
-        <div className="max-w-xl rounded-2xl px-8 py-7" style={glossyBar}>
+        <div className="max-w-xl rounded-2xl px-6 py-4 sm:px-8 sm:py-5" style={glossyBar}>
           <p className="font-latin text-[10px] font-bold tracking-[0.32em] text-white/60 uppercase">
             {image?.kicker || fallbackCopy.kicker}
           </p>
-          <p className="mt-3 text-[22px] font-bold leading-9 text-white sm:text-[26px]">
+          <p className="mt-1.5 line-clamp-2 text-[18px] font-bold leading-7 text-white sm:text-[22px]">
             {image?.title || fallbackCopy.title}
           </p>
-          {image?.text ? <p className="mt-2 text-[14px] leading-7 text-white/75">{image.text}</p> : null}
           <SlotLink
             href={href}
-            className="mt-5 inline-flex rounded-xl bg-brand px-6 py-3 text-[14px] font-medium text-white hover:bg-brand-dark"
+            className="mt-3 inline-flex rounded-xl bg-brand px-5 py-2.5 text-[13px] font-medium text-white hover:bg-brand-dark"
           >
             تماس با ما
           </SlotLink>