checkpoint before checking out main

src/components/home/FeaturedCategories.tsx

@@ -0,0 +1,38 @@
+import { Placeholder } from "@/components/ui/Placeholder";
+import { SectionTitle } from "@/components/ui/SectionTitle";
+import { categories } from "@/data/sample";
+
+export function FeaturedCategories() {
+  return (
+    <section className="py-10 md:py-14">
+      <div className="mx-auto max-w-7xl px-4">
+        <SectionTitle
+          title="دسته‌بندی‌های پرطرفدار"
+          enTitle="Featured Categories"
+          action="همه دسته‌ها"
+        />
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-8">
+          {categories.map((cat, i) => (
+            <a
+              key={cat.id}
+              href="#"
+              className="animate-slide-in group flex flex-col items-center rounded-xl border border-border bg-surface p-3 transition-all hover:border-red hover:shadow-md"
+              style={{ animationDelay: `${i * 60}ms` }}
+            >
+              <Placeholder
+                width="72px"
+                height="72px"
+                label="72×72"
+                className="mb-3 rounded-full transition-colors group-hover:border-red"
+              />
+              <span className="text-center text-xs font-medium leading-relaxed md:text-sm">
+                {cat.name}
+              </span>
+              <span className="mt-1 text-[11px] text-muted">{cat.count} محصول</span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}