diff --git a/frontend/application/components/catalog/FlipbookCatalog.tsx b/frontend/application/components/catalog/FlipbookCatalog.tsx
index c4cdbde..3b21294 100644
--- a/frontend/application/components/catalog/FlipbookCatalog.tsx
+++ b/frontend/application/components/catalog/FlipbookCatalog.tsx
@@ -2,6 +2,7 @@
import React, { useState, useEffect, useRef, useMemo } from "react";
import Image from "next/image";
+import { useRouter } from "next/navigation";
import CatalogPageSpread, { CategoryMeta } from "./CatalogPageSpread";
import { Product } from "../../lib/data/products";
import { useSettingsStore } from "../../lib/store/settingsStore";
@@ -18,7 +19,8 @@ import {
ShieldCheck,
Zap,
Baby,
- X
+ X,
+ ArrowRight
} from "lucide-react";
interface FlipbookCatalogProps {
@@ -36,6 +38,7 @@ const normalizeSearchText = (str: string) => {
};
export default function FlipbookCatalog({ products }: FlipbookCatalogProps) {
+ const router = useRouter();
const [currentPage, setCurrentPage] = useState(1);
const [searchQuery, setSearchQuery] = useState("");
const [isFullscreen, setIsFullscreen] = useState(false);
@@ -406,12 +409,35 @@ export default function FlipbookCatalog({ products }: FlipbookCatalogProps) {
className={`w-full bg-slate-950 font-vazir text-slate-100 flex flex-col justify-between select-none print:bg-white print:p-0 print:m-0 print:h-auto ${
isFullscreen
? "h-screen p-3"
- : "h-[calc(100vh-140px)] min-h-[580px] max-h-[880px] py-2 px-3 sm:px-6"
+ : "min-h-[calc(100vh-64px)] py-3 px-3 sm:px-6"
}`}
dir="rtl"
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
>
+ {/* ========================================================================= */}
+ {/* 0. BREADCRUMB NAVIGATION & BACK BUTTON (Standard across all pages) */}
+ {/* ========================================================================= */}
+ {!isFullscreen && (
+
+ {/* Category Jump Pills with Micro Scrollbar */}
+
-