Initial commit

src/pages/menu/components/AddToCart.tsx

@@ -0,0 +1,78 @@
+import { PlusOutlined } from "@ant-design/icons";
+import { Button, Grid } from "antd";
+import { addItem } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { colors } from "ThemeConstants";
+import { Product } from "utils/types/appTypes";
+
+const { useBreakpoint } = Grid;
+
+export function AddToCart({ item }: { item: Product }) {
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { xs, sm } = useBreakpoint();
+
+  const handleQuickAdd = (item: Product) => {
+    dispatch(
+      addItem({
+        item: {
+          id: item.id,
+          name: item.name,
+          price: item.price,
+          image: item.image,
+          description: item.description,
+          variant: "None",
+          extras: [],
+          extrasgroup: [],
+        },
+        quantity: 1,
+      })
+    );
+  };
+  return (
+    <Button
+      shape="round"
+      title="add"
+      iconPosition="start"
+      disabled={item.isHasVarint}
+      icon={
+        <PlusOutlined
+          title="add"
+          style={{
+            position: "relative",
+            top: "-1px",
+          }}
+        />
+      }
+      size={xs || sm ? "small" : "middle"}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleQuickAdd(item);
+      }}
+      style={{
+        position: "absolute",
+        bottom: -10,
+        [isRTL ? "right" : "left"]: xs || sm ? "5%" : "15%",
+        zIndex: 1,
+        width: xs || sm ? 82 : 100,
+        height: xs || sm ? 32 : 44,
+        fontSize: xs || sm ? "1rem" : 18,
+        fontWeight: 600,
+        border: 0,
+        backgroundColor: item.isHasVarint
+          ? "rgba(233, 233, 233, 1)"
+          : colors.primary,
+        color: "#FFF",
+        // boxShadow:
+        //   theme === "light"
+        //     ? "0 2px 0 rgba(0,0,0,0.02)"
+        //     : "0 2px 0 #6b6b6b",
+      }}
+    >
+      {t("common.add")}
+    </Button>
+  );
+}

src/pages/menu/components/BackButton.tsx

@@ -0,0 +1,33 @@
+import { Button } from "antd";
+import BackIcon from "components/Icons/BackIcon";
+
+
+interface BackButtonProps {
+  navigateBack?: boolean; // true = use router.back(), false = just clear state
+}
+
+export default function BackButton({ navigateBack = true }: BackButtonProps) {
+  const handleBack = () => {
+    if (navigateBack) window.history.back();
+  };
+
+  return (
+    <Button
+      style={{
+        width: 32,
+        height: 32,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 0,
+        borderRadius: "50%",
+      }}
+      icon={
+        <div style={{ position: "relative", top: 2.5, right: 1 }}>
+          <BackIcon />
+        </div>
+      }
+      onClick={handleBack}
+    />
+  );
+}

src/pages/menu/components/CategoriesList/CategoriesList.module.css

@@ -0,0 +1,634 @@
+/* MenuPage.module.css */
+
+/* Product Link Transitions */
+/*
+.productLink {
+  display: block;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transform: translateY(0);
+  opacity: 1;
+  position: relative;
+  overflow: hidden;
+/* }
+
+.productLink::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--link-glow),
+    transparent
+  );
+  transition: left 0.5s ease;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.productLink:hover::before {
+  left: 100%;
+}
+
+.productLink:hover {
+  transform: translateY(-8px);
+  filter: brightness(1.05);
+}
+
+.productLink:active {
+  transform: translateY(-4px);
+  transition: all 0.1s ease;
+} */
+
+/* Enhanced card hover effects */
+/* .productLink:hover .ant-card {
+  box-shadow: 0 12px 32px var(--link-shadow);
+  transform: scale(1.02);
+  border-color: var(--link-border);
+}
+
+.productLink .ant-card {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: transform, box-shadow;
+  border: 1px solid transparent;
+} */
+
+/* Theme-aware glow effect */
+/* .productLink:hover .ant-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 8px;
+  box-shadow: 0 0 20px var(--link-shadow-glow);
+  opacity: 0;
+  animation: glowPulse 2s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes glowPulse {
+  0%, 100% { opacity: 0; }
+  50% { opacity: 1; }
+} */
+
+/* Dark theme adjustments for product links */
+/* @media (prefers-color-scheme: dark) {
+  .productLink {
+    --link-glow: rgba(255, 198, 0, 0.15);
+    --link-glow-hover: rgba(255, 198, 0, 0.25);
+    --link-border: rgba(255, 198, 0, 0.4);
+    --link-shadow: rgba(255, 198, 0, 0.25);
+    --link-shadow-glow: rgba(255, 198, 0, 0.4);
+  }
+} */
+
+.container {
+  display: flex;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  position: sticky;
+  top: 0;
+  background: var(--ant-bg-container);
+  z-index: 10;
+  border-bottom: 1px solid var(--ant-color-border);
+  overflow: auto;
+  transition: all 0.3s ease;
+}
+
+.categoriesContainer {
+  display: flex;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  position: sticky;
+  top: 0;
+  background: #fff;
+  z-index: 10;
+  overflow: hidden;
+  text-align: center;
+  height: 8.5rem;
+  overflow-x: auto;
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: position, transform, opacity, filter;
+  transform-origin: top center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem 1rem 1rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Enhanced responsive categories container */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .categoriesContainer {
+    height: 160px;
+    padding: 16px;
+    gap: 16px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .categoriesSticky {
+    padding: 12px 16px !important;
+    height: 70px !important;
+  }
+}
+
+@media (min-width: 1025px) {
+  .categoriesContainer {
+    height: 180px;
+    padding: 24px;
+    max-width: 1200px;
+    margin: 0 auto;
+    gap: 16px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .categoriesSticky {
+    padding: 16px 24px !important;
+    height: 70px !important;
+    max-width: 100vw !important;
+    margin: 0 !important;
+  }
+}
+
+.container::-webkit-scrollbar {
+  display: none;
+}
+
+.categoryMenuItemImage {
+  width: 104px !important;
+  min-width: 90px !important;
+  height: 78px;
+  object-fit: cover;
+  border-radius: 0.375rem;
+  transition: transform 0.3s ease;
+  overflow: hidden;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .container {
+    gap: 4px;
+  }
+
+  .categoryTab {
+    padding: 0px 6px;
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .container {
+    gap: 12px;
+  }
+
+  .categoryTab {
+    padding: 0px 14px;
+    font-size: 15px;
+  }
+}
+
+:global(.darkApp) .categoryTab {
+  color: rgba(255, 255, 255, 0.75) !important;
+  background-color: rgba(42, 42, 42, 0.8) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  backdrop-filter: blur(12px);
+  transition: all 0.3s ease;
+}
+
+:global(.darkApp) .categoryTab:hover {
+  color: var(--primary) !important;
+  background-color: rgba(54, 54, 54, 0.9) !important;
+  border-color: rgba(255, 198, 0, 0.3) !important;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+:global(.darkApp) .categoryTab.active {
+  color: var(--primary) !important;
+  background-color: rgba(255, 198, 0, 0.1) !important;
+  border-bottom-color: var(--primary) !important;
+  box-shadow: 0 2px 8px rgba(255, 198, 0, 0.2);
+}
+
+/* Active category card styles */
+.activeCategoryCard {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.activeCategoryCard::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(45deg, var(--ant-color-primary), transparent);
+  border-radius: 8px;
+  opacity: 0.1;
+  z-index: -1;
+  animation: activePulse 2s ease-in-out infinite;
+  white-space: nowrap;
+}
+
+.activeCategoryCard:hover {
+  border-color: var(--ant-color-primary) !important;
+}
+
+/* Dark theme active category card styles */
+:global(.darkApp) .activeCategoryCard {
+  box-shadow: 0 4px 12px rgba(255, 198, 0, 0.3) !important;
+  background-color: rgba(255, 198, 0, 0.05) !important;
+}
+
+:global(.darkApp) .activeCategoryCard::before {
+  background: linear-gradient(45deg, var(--primary), transparent);
+  animation: darkActivePulse 2s ease-in-out infinite;
+}
+
+@keyframes darkActivePulse {
+  0%,
+  100% {
+    opacity: 0.05;
+  }
+  50% {
+    opacity: 0.15;
+  }
+}
+
+:global(.darkApp) .activeCategoryCard:hover {
+  border-color: var(--primary) !important;
+  box-shadow: 0 6px 16px rgba(255, 198, 0, 0.4) !important;
+  background-color: rgba(255, 198, 0, 0.08) !important;
+}
+
+/* Smooth transitions for category cards */
+.categoryCard {
+  transition: all 0.3s ease;
+  transform: scale(1);
+}
+
+.categoryCard:hover {
+  transform: scale(1.02);
+  transition: all 0.2s ease;
+}
+
+/* Enhanced smooth scrolling for category container */
+.categoriesContainer {
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Staggered animation for category cards when becoming sticky */
+.categoriesSticky .ant-card {
+  animation: cardEntrance 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation-delay: calc(var(--card-index, 0) * 0.05s);
+}
+
+/* Smooth animation for category cards when returning to normal */
+.categoriesContainer:not(.categoriesSticky) .ant-card {
+  animation: cardReturn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation-delay: calc(var(--card-index, 0) * 0.03s);
+}
+
+/* Smooth entrance for category images */
+.categoriesSticky .popularMenuItemImage {
+  animation: imageEntrance 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation-delay: calc(var(--card-index, 0) * 0.05s + 0.1s);
+}
+
+/* Smooth return animation for category images */
+.categoriesContainer:not(.categoriesSticky) .popularMenuItemImage {
+  animation: imageReturn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation-delay: calc(var(--card-index, 0) * 0.03s + 0.05s);
+}
+
+@keyframes imageEntrance {
+  0% {
+    transform: scale(0.9) rotate(-2deg);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes imageReturn {
+  0% {
+    transform: scale(0.95) rotate(-1deg);
+    opacity: 0.85;
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+  }
+}
+
+/* Sticky categories when scrolled past */
+.categoriesSticky {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  width: 100vw !important;
+  z-index: 1000 !important;
+  border-bottom: 1px solid var(--ant-color-border) !important;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
+  background: #fff !important;
+  animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
+  transform-origin: top center !important;
+}
+
+/* Subtle glow effect for sticky state */
+.categoriesSticky::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(24, 144, 255, 0.3),
+    transparent
+  );
+  animation: glowPulse 2s ease-in-out infinite;
+}
+
+/* Fade out glow effect when returning to normal */
+.categoriesContainer:not(.categoriesSticky)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(24, 144, 255, 0.1),
+    transparent
+  );
+  animation: glowFadeOut 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+@keyframes glowPulse {
+  0%,
+  100% {
+    opacity: 0.3;
+    transform: scaleX(0.8);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes glowFadeOut {
+  0% {
+    opacity: 0.1;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scaleX(0.8);
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(-100%) scale(0.95);
+    opacity: 0;
+    filter: blur(10px);
+  }
+  50% {
+    transform: translateY(-20%) scale(0.98);
+    opacity: 0.7;
+    filter: blur(5px);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+/* Smooth exit animation when returning to normal */
+.categoriesContainer:not(.categoriesSticky) {
+  animation: slideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
+  transform-origin: top center !important;
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(-10px) scale(0.98);
+    opacity: 0.9;
+    filter: blur(2px);
+  }
+  50% {
+    transform: translateY(-5px) scale(0.99);
+    opacity: 0.95;
+    filter: blur(1px);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+/* Dark theme sticky categories */
+:global(.darkApp) .categoriesSticky {
+  background: rgba(10, 10, 10, 0.95) !important;
+  border-bottom-color: #363636 !important;
+  box-shadow:
+    0 4px 25px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
+  backdrop-filter: blur(25px) saturate(1.2) !important;
+  border-image: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 198, 0, 0.2),
+      transparent
+    )
+    1 !important;
+}
+
+/* Dark theme glow effect */
+:global(.darkApp) .categoriesSticky::before {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 198, 0, 0.4),
+    transparent
+  );
+  animation: darkGlowPulse 2s ease-in-out infinite;
+}
+
+/* Dark theme glow fade out when returning to normal */
+:global(.darkApp) .categoriesContainer:not(.categoriesSticky)::before {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 198, 0, 0.2),
+    transparent
+  );
+  animation: darkGlowFadeOut 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+/* Updating category indicator */
+.updatingCategory {
+  animation: categoryUpdate 0.6s ease-in-out;
+}
+
+@keyframes updatingCategory {
+  0% {
+    transform: scale(1.05);
+  }
+  50% {
+    transform: scale(1.1);
+    box-shadow: 0 8px 32px rgba(24, 144, 255, 0.4);
+  }
+  100% {
+    transform: scale(1.05);
+  }
+}
+
+/* Dark theme updating category indicator */
+:global(.darkApp) .updatingCategory {
+  animation: darkCategoryUpdate 0.6s ease-in-out;
+}
+
+@keyframes darkCategoryUpdate {
+  0% {
+    transform: scale(1.05);
+  }
+  50% {
+    transform: scale(1.1);
+    box-shadow: 0 8px 32px rgba(255, 198, 0, 0.4);
+  }
+  100% {
+    transform: scale(1.05);
+  }
+}
+
+/* Enhanced dark theme for container backgrounds */
+:global(.darkApp) .container,
+:global(.darkApp) .categoriesContainer {
+  background-color: #0a0a0a !important;
+  border-bottom-color: #363636 !important;
+}
+
+:global(.darkApp) .itemDescriptionIcons path {
+  fill: #ffffff;
+}
+
+/* Enhanced dark theme animations */
+:global(.darkApp) .categoryTab {
+  animation: fadeInUp 0.3s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Smooth transitions for all elements */
+.categoryTab * {
+  transition: all 0.3s ease;
+}
+
+/* Enhanced responsive category cards */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .categoryCard {
+    border-radius: 12px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  .categoryCard:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
+  }
+}
+
+@media (min-width: 1025px) {
+  .categoryCard {
+    border-radius: 16px !important;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  .categoryCard:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
+  }
+}
+
+/* Enhanced responsive focus states */
+.menuItem:focus,
+.categoryCard:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+@media (min-width: 768px) {
+  .menuItem:focus,
+  .categoryCard:focus {
+    outline-offset: 4px;
+  }
+}
+
+/* Enhanced responsive print styles */
+@media print {
+  .menuItem,
+  .categoryCard {
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+  }
+
+  .categoriesContainer {
+    display: none !important;
+  }
+}
+
+/* Mobile-specific sticky categories */
+@media (max-width: 768px) {
+  .categoriesSticky {
+    padding: 16px !important;
+    height: 70px !important;
+    transition: all 0.3s ease !important;
+  }
+}
+
+/* Smooth placeholder transition */
+.categoriesSticky + div {
+  transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Enhanced smooth transitions for all sticky-related elements */
+.categoriesContainer,
+.categoriesContainer *,
+.categoriesSticky,
+.categoriesSticky * {
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}

src/pages/menu/components/CategoriesList/CategoriesList.tsx

@@ -0,0 +1,232 @@
+import { Card, Grid, Space } from "antd";
+import ImageWithFallback from "components/ImageWithFallback";
+import ProText from "components/ProText";
+import { useScrollHandler } from "contexts/ScrollHandlerContext";
+import { useCallback, useEffect } from "react";
+import { useAppSelector } from "redux/hooks";
+import { colors } from "ThemeConstants";
+import { default_image } from "utils/constants";
+import { Category } from "utils/types/appTypes";
+import styles from "./CategoriesList.module.css";
+
+interface CategoriesListProps {
+  categories: Category[];
+}
+
+const { useBreakpoint } = Grid;
+
+export function CategoriesList({ categories }: CategoriesListProps) {
+  const { xs, md } = useBreakpoint();
+  const {
+    isCategoriesSticky,
+    categoriesContainerRef,
+    scrollToCategory,
+    activeCategory,
+    setActiveCategory,
+  } = useScrollHandler();
+  const { isRTL } = useAppSelector((state) => state.locale);
+
+  const getCategoryCardStyle = useCallback(() => {
+    if (xs) {
+      return {
+        width: 90,
+        height: isCategoriesSticky ? 38 : 110,
+      };
+    } else if (md) {
+      return {
+        width: 120,
+        height: isCategoriesSticky ? 38 : 110,
+      };
+    } else {
+      return {
+        width: 140,
+        height: isCategoriesSticky ? 38 : 160,
+      };
+    }
+  }, [isCategoriesSticky, xs, md]);
+
+  // Set first category as active on initial load
+  useEffect(() => {
+    if (categories.length > 0 && !activeCategory) {
+      setActiveCategory(categories[0].id);
+    }
+  }, [categories, activeCategory, setActiveCategory]);
+
+  // Function to scroll category card into view when active category changes automatically
+  const scrollCategoryCardIntoView = useCallback((categoryId: number) => {
+    const categoryCard = document.querySelector(
+      `[data-category-id="${categoryId}"]`
+    );
+    if (categoryCard) {
+      const categoriesContainer = categoryCard.closest(
+        `.${styles.categoriesContainer}`
+      );
+      if (categoriesContainer) {
+        const cardElement = categoryCard as HTMLElement;
+        const containerElement = categoriesContainer as HTMLElement;
+        const cardRect = cardElement.getBoundingClientRect();
+        const containerRect = containerElement.getBoundingClientRect();
+
+        if (
+          cardRect.left < containerRect.left ||
+          cardRect.right > containerRect.right
+        ) {
+          cardElement.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "center",
+          });
+        }
+      }
+    }
+  }, []);
+
+  // Auto-scroll category card into view when active category changes
+  useEffect(() => {
+    if (activeCategory) {
+      // Use a small delay to ensure the DOM has updated
+      const timer = setTimeout(() => {
+        scrollCategoryCardIntoView(activeCategory);
+      }, 150);
+
+      return () => clearTimeout(timer);
+    }
+  }, [activeCategory, scrollCategoryCardIntoView]);
+
+  return (
+    <>
+      <div
+        ref={categoriesContainerRef as React.RefObject<HTMLDivElement>}
+        className={`${styles.categoriesContainer} ${
+          isCategoriesSticky ? styles.categoriesSticky : ""
+        }`}
+        style={!isCategoriesSticky ? { paddingTop: "1rem" } : {}}
+      >
+        {categories?.map((category) => (
+          <div key={category.id}>
+            <Card
+              key={category.id}
+              onClick={() => {
+                scrollToCategory(category.id);
+              }}
+              data-category-id={category.id}
+              style={{
+                borderRadius: 8,
+                border: "none",
+              }}
+              styles={{
+                body: {
+                  ...getCategoryCardStyle(),
+                  width: 105,
+                  padding: 0,
+                },
+              }}
+              className={`${
+                activeCategory === category.id ? styles.activeCategoryCard : ""
+              }`}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: "0px",
+                  width: "100%",
+                  height: "100%",
+                  overflow: "hidden",
+                }}
+              >
+                {!isCategoriesSticky && (
+                  <ImageWithFallback
+                    src={category.image || default_image}
+                    fallbackSrc={default_image}
+                    alt={category.name}
+                    className={`${styles.categoryMenuItemImage} ${
+                      xs
+                        ? styles.categoryMenuItemImageMobile
+                        : md
+                        ? styles.categoryMenuItemImageTablet
+                        : styles.categoryMenuItemImageDesktop
+                    }`}
+                    // {...getCategoryImageStyle()}
+                    width={105}
+                    height={80}
+                    style={{
+                      borderEndEndRadius: isCategoriesSticky ? 8 : 0,
+                      borderEndStartRadius: isCategoriesSticky ? 8 : 0,
+                    }}
+                    loadingContainerStyle={{
+                      borderEndEndRadius: isCategoriesSticky ? 8 : 0,
+                      borderEndStartRadius: isCategoriesSticky ? 8 : 0,
+                    }}
+                  />
+                )}
+
+                <Space
+                  direction="vertical"
+                  size="small"
+                  style={{
+                    flex: 1,
+                    padding: xs ? "4px" : md ? "4px" : "4px",
+                    textAlign: "center",
+                    ...(xs || md
+                      ? {
+                          // backgroundColor: "#fff6e0",
+                          borderBottom: "solid 1px var(--primary)",
+                          borderRight: "solid 1px var(--primary)",
+                          borderLeft: "solid 1px var(--primary)",
+                          borderTop: isCategoriesSticky
+                            ? "solid 1px var(--primary)"
+                            : 0,
+                          borderStartStartRadius: isCategoriesSticky ? 8 : 0,
+                          borderStartEndRadius: isCategoriesSticky ? 8 : 0,
+                          borderEndEndRadius: 8,
+                          borderEndStartRadius: 8,
+                          backgroundColor:
+                            activeCategory === category.id
+                              ? colors.primary
+                              : undefined,
+                        }
+                      : { borderRadius: 8 }),
+                    width: 104,
+                    height: 30,
+                    marginBottom: 1,
+                  }}
+                >
+                  <ProText
+                    style={{
+                      margin: 0,
+                      lineClamp: 1,
+                      WebkitBoxOrient: "vertical",
+                      WebkitLineClamp: 1,
+                      lineHeight: isCategoriesSticky ? "1.5" : "1",
+                      maxHeight: "2.8em",
+                      textAlign: "center",
+
+                      color:
+                        activeCategory === category.id ? "#FFF" : undefined,
+                      fontWeight:
+                        activeCategory === category.id ? "600" : "500",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      padding: 3,
+                      fontSize: xs ? 14 : md ? 14 : 16,
+                      width: xs ? 80 : md ? 100 : 120,
+                      display: "inline-block",
+                    }}
+                  >
+                    {isRTL
+                      ? category.name || category.nameEN
+                      : category.nameEN || category.name}
+                  </ProText>
+                </Space>
+              </div>
+            </Card>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

src/pages/menu/components/LocalStorageHandler.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect } from "react";
+
+// Cart storage keys - same as in CartContext
+const CART_STORAGE_KEYS = {
+  ITEMS: 'fascano_cart_items',
+  SPECIAL_REQUEST: 'fascano_special_request',
+  COUPON: 'fascano_coupon',
+  TIP: 'fascano_tip',
+  TABLES: 'fascano_tables',
+  LOCATION: 'fascano_location',
+  ROOM_DETAILS: 'fascano_room_details',
+  OFFICE_DETAILS: 'fascano_office_details',
+  GIFT_DETAILS: 'fascano_gift_details',
+  ESTIMATE_TIME: 'fascano_estimate_time',
+  ESTIMATE_TIME_DATE: 'fascano_estimate_time_date',
+  ESTIMATE_TIME_TIME: 'fascano_estimate_time_time',
+  COLLECTION_METHOD: 'fascano_collection_method',
+} as const;
+
+const clearCartFromLocalStorage = () => {
+  // Clear all cart-related data from localStorage
+  Object.values(CART_STORAGE_KEYS).forEach(key => {
+    localStorage.removeItem(key);
+  });
+};
+
+export default function LocalStorageHandler({
+  restaurantID,
+  restaurantName,
+  orderType,
+}: {
+  restaurantID: string;
+  restaurantName: string;
+  orderType: string;
+}) {
+  useEffect(() => {
+    // Check if restaurant has changed
+    const currentStoredRestaurantID = localStorage.getItem("restaurantID");
+    
+    // If there's a stored restaurant ID and it's different from the current one, clear the cart
+    if (currentStoredRestaurantID && currentStoredRestaurantID !== restaurantID) {
+      clearCartFromLocalStorage();
+    }
+    
+    // Update localStorage with new values
+    localStorage.setItem("restaurantID", restaurantID);
+    localStorage.setItem("restaurantName", restaurantName);
+    localStorage.setItem("orderType", orderType);
+  }, [restaurantID, restaurantName, orderType]);
+
+  return null;
+}

src/pages/menu/components/MenuFooter/MenuFooter.tsx

@@ -0,0 +1,92 @@
+import { Badge, Button, Grid } from "antd";
+import CartIcon from "components/Icons/cart/CartIcon";
+import ProText from "components/ProText";
+import { selectCartItems } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { useAppSelector } from "redux/hooks";
+import { colors, ProBlack2 } from "ThemeConstants";
+
+const { useBreakpoint } = Grid;
+
+export function MenuFooter() {
+  const items = useAppSelector(selectCartItems);
+  const restaurantName = localStorage.getItem("restaurantName");
+  const { themeName } = useAppSelector((state) => state.theme);
+  const { xs, sm } = useBreakpoint();
+  const isMobile = xs;
+  const isTablet = sm && !xs;
+  const { t } = useTranslation();
+
+  const totalItems = items.reduce((sum, item) => sum + item.quantity, 0);
+
+  return (
+    <>
+      {(isMobile || isTablet) && (
+        <div
+          style={{
+            width: "100%",
+            padding: "16px 16px 0",
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            height: "10vh",
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-around",
+            gap: "1rem",
+            zIndex: 999,
+            backgroundColor: themeName === "light" ? "white" : ProBlack2,
+          }}
+        >
+          <Link
+            to={`/${restaurantName}/cart`}
+            style={{
+              width: "100%",
+              padding: "0 16px",
+            }}
+          >
+            <Button
+              type="primary"
+              shape="round"
+              style={{
+                width: "100%",
+                height: 48,
+                marginBottom: 16,
+                boxShadow: "none",
+              }}
+            >
+              <Badge
+                count={totalItems}
+                size="default"
+                style={{
+                  borderColor: colors.primary,
+                  color: "white",
+                  fontSize: isMobile ? 10 : 12,
+                  width: isMobile ? 10 : 12,
+                }}
+              >
+                <ProText
+                  style={{
+                    color: "white",
+                    margin: "0 10px",
+                  }}
+                >
+                  {t("menu.viewCart")}
+                </ProText>
+                <span
+                  style={{
+                    position: "relative",
+                    top: 2,
+                  }}
+                >
+                  <CartIcon />
+                </span>
+              </Badge>
+            </Button>
+          </Link>
+        </div>
+      )}
+    </>
+  );
+}

src/pages/menu/components/MenuList/MenuList.module.css

@@ -0,0 +1,769 @@
+.container {
+  display: flex;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  position: sticky;
+  top: 0;
+  background: var(--ant-bg-container);
+  z-index: 10;
+  border-bottom: 1px solid var(--ant-color-border);
+  overflow: auto;
+  transition: all 0.3s ease;
+}
+
+.container::-webkit-scrollbar {
+  display: none;
+}
+
+.menuSections {
+  margin-bottom: 105px !important;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 1rem;
+}
+
+.menuSection:first-child h3 {
+  margin-top: 0px !important;
+}
+
+.menuSection h3 {
+  margin: 30px 0px 15px 0px;
+  transition: color 0.3s ease;
+}
+
+/* Enhanced responsive menu section headers */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .menuSection h3 {
+    margin: 40px 0px 20px 0px;
+    font-size: 24px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .menuSection h3 {
+    margin: 50px 0px 25px 0px;
+    font-size: 28px;
+  }
+}
+
+.menuItemsGrid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: 1fr;
+  margin-bottom: 10px;
+}
+
+.menuItemsGridMobile {
+  gap: 12px;
+  grid-template-columns: 1fr;
+}
+
+.menuItemsGridTablet {
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  padding: 0 12px;
+  margin-bottom: 20px;
+}
+
+.menuItemsGridDesktop {
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  padding: 0 16px;
+  margin-bottom: 24px;
+}
+
+/* Enhanced responsive menu items grid */
+@media (min-width: 1280px) {
+  .menuItemsGridDesktop {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    padding: 0 20px;
+    margin-bottom: 28px;
+  }
+}
+
+.popularMenuItemsGrid {
+  display: flex;
+  gap: 16px;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+  padding: 8px 0;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.popularMenuItemsGrid::-webkit-scrollbar {
+  display: none;
+}
+
+.popularMenuItemImage {
+  width: 90px;
+  height: 90px;
+  object-fit: cover;
+  border-radius: 8px;
+  transition: transform 0.3s ease;
+  overflow: hidden;
+}
+
+.popularMenuItemImageMobile {
+  height: 90px;
+  overflow: hidden;
+}
+
+.popularMenuItemImageTablet {
+  height: 95px;
+  width: 120px;
+  overflow: hidden;
+}
+
+.popularMenuItemImageDesktop {
+  height: 120px;
+  width: 140px;
+  overflow: hidden;
+}
+
+.menuItemImage {
+  object-fit: cover;
+  border-radius: 8px;
+  transition: transform 0.3s ease;
+  overflow: hidden;
+}
+
+.menuItemImage:hover {
+  transform: scale(1.05);
+}
+
+/* Enhanced responsive menu item images */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .menuItemImage {
+    border-radius: 12px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .menuItemImage {
+    border-radius: 16px;
+  }
+}
+
+.menuItemDetails {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.itemDescription {
+  /* font-size: 12px !important; */
+  transition: color 0.3s ease;
+}
+
+/* Enhanced responsive item descriptions */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .itemDescription {
+    font-size: 14px !important;
+  }
+}
+
+@media (min-width: 1025px) {
+  .itemDescription {
+    font-size: 16px !important;
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .container {
+    gap: 4px;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .container {
+    gap: 12px;
+  }
+}
+
+.pageContainer {
+  padding: 0 16px;
+  transition: all 0.3s ease;
+}
+
+/* Enhanced responsive page container */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .pageContainer {
+    padding: 24px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .pageContainer {
+    padding: 32px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+
+/* Sidebar state adjustments */
+.sidebarCollapsed .pageContainer {
+  margin-left: 80px;
+}
+
+.sidebarExpanded .pageContainer {
+  margin-left: 200px;
+}
+
+/* .itemDescriptionIcons path {
+  fill: 000044 !important;
+} */
+
+@media (max-width: 768px) {
+  .sidebarCollapsed .pageContainer,
+  .sidebarExpanded .pageContainer {
+    margin-left: 0;
+  }
+}
+
+/* Enhanced Dark theme styles */
+:global(.darkApp) .itemName {
+  color: rgba(255, 255, 255, 0.95) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  transition: color 0.3s ease;
+}
+
+:global(.darkApp) .itemName:hover {
+  color: var(--primary) !important;
+}
+
+:global(.darkApp) .itemDescription {
+  color: rgba(255, 255, 255, 0.75) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+:global(.darkApp) .itemPrice {
+  color: var(--primary) !important;
+  font-weight: 600;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* Enhanced dark theme for menu sections */
+:global(.darkApp) .menuSection h3 {
+  color: #ffffff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+:global(.darkApp) .menuSection {
+  background-color: #0a0a0a;
+  color: #ffffff;
+}
+
+/* Enhanced dark theme for menu items */
+:global(.darkApp) .menuItem {
+  background-color: #181818 !important;
+  border-color: #363636 !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+
+:global(.darkApp) .menuItem:hover {
+  background-color: #363636 !important;
+  border-color: #424242 !important;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+}
+
+/* Enhanced dark theme for popular menu items */
+:global(.darkApp) .popularMenuItem {
+  background-color: #181818 !important;
+  border-color: #363636 !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+
+:global(.darkApp) .popularMenuItem:hover {
+  background-color: #363636 !important;
+  border-color: #424242 !important;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+}
+
+@keyframes activePulse {
+  0%,
+  100% {
+    opacity: 0.1;
+  }
+  50% {
+    opacity: 0.2;
+  }
+}
+
+@keyframes darkActivePulse {
+  0%,
+  100% {
+    opacity: 0.05;
+  }
+  50% {
+    opacity: 0.15;
+  }
+}
+
+@keyframes imageEntrance {
+  0% {
+    transform: scale(0.9) rotate(-2deg);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes imageReturn {
+  0% {
+    transform: scale(0.95) rotate(-1deg);
+    opacity: 0.85;
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes cardEntrance {
+  0% {
+    transform: translateY(20px) scale(0.95);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes cardReturn {
+  0% {
+    transform: translateY(-5px) scale(0.98);
+    opacity: 0.9;
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes glowPulse {
+  0%,
+  100% {
+    opacity: 0.3;
+    transform: scaleX(0.8);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes glowFadeOut {
+  0% {
+    opacity: 0.1;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scaleX(0.8);
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(-100%) scale(0.95);
+    opacity: 0;
+    filter: blur(10px);
+  }
+  50% {
+    transform: translateY(-20%) scale(0.98);
+    opacity: 0.7;
+    filter: blur(5px);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(-10px) scale(0.98);
+    opacity: 0.9;
+    filter: blur(2px);
+  }
+  50% {
+    transform: translateY(-5px) scale(0.99);
+    opacity: 0.95;
+    filter: blur(1px);
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes darkGlowPulse {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scaleX(0.8);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes darkGlowFadeOut {
+  0% {
+    opacity: 0.2;
+    transform: scaleX(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scaleX(0.8);
+  }
+}
+
+/* Enhanced dark theme for menu item images */
+:global(.darkApp) .menuItemImage,
+:global(.darkApp) .popularMenuItemImage {
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Enhanced dark theme for add to cart buttons */
+:global(.darkApp) .addToCartButton {
+  background-color: var(--primary) !important;
+  border-color: var(--primary) !important;
+  color: #000000 !important;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+:global(.darkApp) .addToCartButton:hover {
+  background-color: #ffd633 !important;
+  border-color: #ffd633 !important;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(255, 198, 0, 0.3);
+}
+
+/* Enhanced dark theme for quantity controls */
+:global(.darkApp) .quantityControl {
+  background-color: rgba(42, 42, 42, 0.8);
+  border-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+}
+
+:global(.darkApp) .quantityButton {
+  background-color: rgba(54, 54, 54, 0.8) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  color: #ffffff !important;
+  transition: all 0.3s ease;
+}
+
+:global(.darkApp) .quantityButton:hover {
+  background-color: rgba(66, 66, 66, 0.9) !important;
+  border-color: var(--primary) !important;
+}
+
+:global(.darkApp) .quantityInput {
+  background-color: rgba(42, 42, 42, 0.8) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  color: #ffffff !important;
+  text-align: center;
+}
+
+/* Enhanced dark theme for container backgrounds */
+:global(.darkApp) .container {
+  background-color: #0a0a0a !important;
+  border-bottom-color: #363636 !important;
+}
+
+:global(.darkApp) .itemDescriptionIcons path {
+  fill: #ffffff;
+}
+
+/* Cart badge styles */
+.cartBadge {
+  position: absolute;
+  top: -8px;
+  z-index: 2;
+  color: white;
+  border-radius: 50%;
+  min-width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  border: none;
+}
+
+.cartBadge:hover {
+  transform: scale(1.1);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.cartBadgeRTL {
+  left: -16px;
+}
+
+.cartBadgeLTR {
+  right: -8px;
+}
+
+/* Enhanced responsive cart badge */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .cartBadge {
+    min-width: 24px;
+    height: 24px;
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .cartBadge {
+    min-width: 28px;
+    height: 28px;
+    font-size: 16px;
+  }
+}
+
+/* RTL support for cart badge */
+/* [dir="rtl"] .cartBadge {
+  right: auto;
+  left: -8px;
+} */
+
+/* Animation for newly added items */
+@keyframes badgePulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.cartBadge.animate {
+  animation: badgePulse 0.6s ease-in-out;
+}
+
+/* Enhanced dark theme animations */
+:global(.darkApp) .menuItem,
+:global(.darkApp) .popularMenuItem {
+  animation: fadeInUp 0.3s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Smooth transitions for all elements */
+.container *,
+.menuItem *,
+.popularMenuItem * {
+  transition: all 0.3s ease;
+}
+
+/* Enhanced responsive menu item cards */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .menuItem {
+    border-radius: 12px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  .menuItem:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
+  }
+}
+
+@media (min-width: 1025px) {
+  .menuItem {
+    border-radius: 16px !important;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  .menuItem:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
+  }
+}
+
+/* Enhanced responsive focus states */
+.menuItem:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+@media (min-width: 768px) {
+  .menuItem:focus {
+    outline-offset: 4px;
+  }
+}
+
+/* Enhanced responsive print styles */
+@media print {
+  .menuItem {
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+  }
+}
+
+/* Skeleton Loading Styles */
+.skeletonContainer {
+  animation: skeletonPulse 1.5s ease-in-out infinite;
+}
+
+.skeletonContainer .ant-skeleton {
+  transition: all 0.3s ease;
+}
+
+.skeletonContainer .ant-skeleton-image {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.skeletonContainer .ant-skeleton-input {
+  border-radius: 6px;
+}
+
+.skeletonContainer .ant-skeleton-button {
+  border-radius: 20px;
+}
+
+@keyframes skeletonPulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes skeletonShimmer {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+
+.skeletonContainer .ant-skeleton-active .ant-skeleton-input,
+.skeletonContainer .ant-skeleton-active .ant-skeleton-image,
+.skeletonContainer .ant-skeleton-active .ant-skeleton-button {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200px 100%;
+  animation: skeletonShimmer 1.5s infinite;
+}
+
+/* Mobile-specific skeleton styles */
+@media (max-width: 768px) {
+  .skeletonContainer .ant-skeleton {
+    margin-bottom: 12px;
+  }
+
+  .skeletonContainer .ant-skeleton-image {
+    border-radius: 4px;
+  }
+
+  .skeletonContainer .ant-skeleton-input {
+    border-radius: 4px;
+  }
+
+  .skeletonContainer .ant-skeleton-button {
+    border-radius: 16px;
+  }
+}
+
+/* Dark theme skeleton styles */
+:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-input,
+:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-image,
+:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-button {
+  background: linear-gradient(90deg, #181818 25%, #363636 50%, #181818 75%);
+  background-size: 200px 100%;
+  animation: skeletonShimmer 1.5s infinite;
+}
+
+:global(.darkApp) .skeletonContainer .ant-skeleton-input,
+:global(.darkApp) .skeletonContainer .ant-skeleton-image,
+:global(.darkApp) .skeletonContainer .ant-skeleton-button {
+  background-color: #181818;
+  border-color: #363636;
+}
+
+/* Tablet-specific skeleton styles */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .skeletonContainer {
+    padding: 24px;
+  }
+
+  .skeletonContainer .ant-skeleton {
+    margin-bottom: 16px;
+  }
+
+  .skeletonContainer .ant-skeleton-image {
+    border-radius: 6px;
+  }
+
+  .skeletonContainer .ant-skeleton-input {
+    border-radius: 5px;
+  }
+
+  .skeletonContainer .ant-skeleton-button {
+    border-radius: 18px;
+  }
+}
+
+.menuItemsGridSticky {
+  height: 60;
+}
+
+.heartButton {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+}
+
+:global(.rtl) .heartButton {
+  right: 5px;
+}
+
+.productLink {
+  border-radius: 8px;
+}
+
+.categoryMenuItemImage {
+  width: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+  text-align: center;
+}

src/pages/menu/components/MenuList/MenuList.tsx

@@ -0,0 +1,281 @@
+import { Badge, Card, Grid } from "antd";
+import ArabicPrice from "components/ArabicPrice";
+import ImageWithFallback from "components/ImageWithFallback";
+import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons";
+import ProText from "components/ProText";
+import ProTitle from "components/ProTitle";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useAppSelector } from "redux/hooks";
+import { colors } from "ThemeConstants";
+import { Product } from "utils/types/appTypes";
+import { AddToCart } from "../AddToCart";
+import styles from "./MenuList.module.css";
+
+interface MenuListProps {
+  data:
+    | {
+        products: Product[];
+        categories: { id: number; name: string; image?: string }[];
+      }
+    | undefined;
+  id: string;
+  categoryRefs: React.RefObject<{ [key: number]: HTMLDivElement | null }>;
+}
+
+const { useBreakpoint } = Grid;
+
+export function MenuList({ data, categoryRefs }: MenuListProps) {
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const products = data?.products;
+  const { xs, md } = useBreakpoint();
+  const { items } = useAppSelector((state) => state.order);
+  const restaurantName = localStorage.getItem("restaurantName");
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { themeName } = useAppSelector((state) => state.theme);
+
+  // Show error state if data exists but has no products
+  if (data && (!data.products || data.products.length === 0)) {
+    return (
+      <div
+        className={styles.menuSections}
+        style={{ padding: "40px", textAlign: "center" }}
+      >
+        <ProText type="secondary">{t("menu.noMenuItemsAvailable")}</ProText>
+      </div>
+    );
+  }
+
+  // Group products by category
+  const productsByCategory = products?.reduce((acc, product) => {
+    if (product.categoryId && !acc[product?.categoryId]) {
+      acc[product?.categoryId] = [];
+    }
+    acc[product?.categoryId || 0].push(product);
+    return acc;
+  }, {} as Record<number, Product[]>);
+
+  return (
+    <>
+      <div className={styles.menuSections}>
+        {data?.categories?.map((category) => {
+          const categoryProducts = productsByCategory?.[category.id] || [];
+          if (categoryProducts.length === 0) return null;
+
+          return (
+            <div
+              key={category.id}
+              ref={(el) => {
+                if (categoryRefs.current) {
+                  categoryRefs.current[category.id] = el;
+                }
+              }}
+              style={{ marginBottom: "1rem" }}
+            >
+              <ImageWithFallback
+                src={category.image || "/default.png"}
+                fallbackSrc="/default.png"
+                alt={category.name}
+                width="100%"
+                height={130}
+                style={{
+                  width: "100%",
+                  objectFit: "cover",
+                  borderRadius: 8,
+                  overflow: "hidden",
+                }}
+                className={styles.categoryMenuItemImage}
+                loadingContainerStyle={{
+                  width: "100%",
+                }}
+              />
+              <ProTitle
+                style={{
+                  fontSize: "1.25rem",
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textAlign: "center",
+                  color: themeName === "dark" ? "#fff" : "#000044",
+                }}
+                level={5}
+              >
+                {isRTL ? category.name : category.name}
+              </ProTitle>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "1rem",
+                }}
+              >
+                {categoryProducts.map((item: Product) => (
+                  <div
+                    key={item.id}
+                    className={styles.productLink}
+                    onClick={() => {
+                      localStorage.setItem("product", JSON.stringify(item));
+                      navigate(`/${restaurantName}/product/${item.id}`);
+                    }}
+                  >
+                    <Card
+                      key={item.id}
+                      style={{
+                        borderRadius: 8,
+                        overflow: "hide",
+                      }}
+                      styles={{
+                        body: {
+                          display: "flex",
+                          flexDirection: "column",
+                          justifyContent: "space-between",
+                          borderRadius: 8,
+                          padding: item.description
+                            ? "16px 16px 8px 16px"
+                            : "16px 16px 24px 16px",
+                          overflow: "hide",
+                          boxShadow:
+                            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05)",
+                        },
+                      }}
+                    >
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          height: "100%",
+                          gap: xs ? 10 : 16,
+                        }}
+                      >
+                        <div
+                          style={{
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "space-between",
+                            gap: "0.5rem",
+                          }}
+                        >
+                          <ProText
+                            style={{
+                              margin: 0,
+                              display: "inline-block",
+                              fontSize: xs ? "1rem" : 18,
+                              fontWeight: 600,
+                              letterSpacing: "-0.01em",
+                              lineHeight: 1.2,
+                              color: themeName === "dark" ? "#fff" : "#000044",
+                            }}
+                          >
+                            {isRTL ? item.name : item.nameOther}
+                          </ProText>
+                          {item.description && (
+                            <ProText
+                              type="secondary"
+                              className={styles.itemDescription}
+                              style={{
+                                display: "-webkit-box",
+                                WebkitBoxOrient: "vertical",
+                                WebkitLineClamp: xs ? 2 : 4,
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                wordWrap: "break-word",
+                                overflowWrap: "break-word",
+                                lineHeight: "1.5rem",
+                                maxHeight: xs ? "3em" : "6.6em",
+                                fontSize: xs ? "1rem" : 18,
+                                letterSpacing: "0.01em",
+                              }}
+                            >
+                              {item.description}
+                            </ProText>
+                          )}
+
+                          <div>
+                            {item.original_price !== item.price && (
+                              <ArabicPrice
+                                price={item.original_price}
+                                strong
+                                style={{
+                                  fontSize: xs ? "1rem" : 22,
+                                  fontWeight: 700,
+                                  color: colors.primary,
+                                  textDecoration: "line-through",
+                                  marginRight: isRTL ? 0 : 10,
+                                  marginLeft: isRTL ? 10 : 0,
+                                }}
+                              />
+                            )}
+                            <ArabicPrice
+                              price={item.price}
+                              strong
+                              style={{
+                                fontSize: xs ? "1rem" : 22,
+                                fontWeight: 700,
+                                color: colors.primary,
+                              }}
+                            />
+                          </div>
+
+                          <div
+                            style={{
+                              position: "relative",
+                              ...(isRTL ? { right: -5 } : {}),
+                            }}
+                          >
+                            <ItemDescriptionIcons
+                              className={styles.itemDescriptionIcons}
+                            />
+                          </div>
+                        </div>
+                        <div style={{ position: "relative" }}>
+                          <ImageWithFallback
+                            src={item.image_small || "/default.png"}
+                            fallbackSrc="/default.png"
+                            alt={item.name}
+                            className={`${styles.popularMenuItemImage} ${
+                              xs
+                                ? styles.popularMenuItemImageMobile
+                                : md
+                                ? styles.popularMenuItemImageTablet
+                                : styles.popularMenuItemImageDesktop
+                            }`}
+                            width={90}
+                            height={90}
+                          />
+
+                          <AddToCart item={item} />
+
+                          {items.find((i) => i.id === item.id) && (
+                            <Badge
+                              count={
+                                items.find((i) => i.id === item.id)?.quantity
+                              }
+                              className={
+                                styles.cartBadge +
+                                " " +
+                                (isRTL
+                                  ? styles.cartBadgeRTL
+                                  : styles.cartBadgeLTR)
+                              }
+                              style={{
+                                backgroundColor: colors.primary,
+                              }}
+                              title={`${
+                                items.find((i) => i.id === item.id)?.quantity
+                              } in cart`}
+                            />
+                          )}
+                        </div>
+                      </div>
+                    </Card>
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}

src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css

@@ -0,0 +1,338 @@
+.categoriesContainer {
+  display: flex;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  position: sticky;
+  top: 0;
+  background: var(--ant-bg-container);
+  z-index: 10;
+  border-bottom: 1px solid var(--ant-color-border);
+  overflow: hidden;
+  text-align: center;
+  height: 96px;
+  overflow-x: auto;
+  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: position, transform, opacity, filter;
+  transform-origin: top center;
+  gap: 16px;
+}
+
+/* Enhanced responsive categories container */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .categoriesContainer {
+    height: 160px;
+    padding: 16px;
+    gap: 16px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .categoriesSticky {
+    padding: 12px 16px !important;
+    height: 30px !important;
+  }
+}
+
+@media (min-width: 1025px) {
+  .categoriesContainer {
+    height: 180px;
+    padding: 24px;
+    max-width: 1200px;
+    margin: 0 auto;
+    gap: 16px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .categoriesSticky {
+    padding: 16px 24px !important;
+    height: 70px !important;
+    max-width: 100vw !important;
+    margin: 0 !important;
+  }
+}
+
+/* Menu Sections and Grid Layout */
+/* .menuSections {
+  margin-bottom: 105px !important;
+} */
+
+.menuSection:first-child h3 {
+  margin-top: 0px !important;
+}
+
+.menuSection h3 {
+  margin: 30px 0px 15px 0px;
+  transition: color 0.3s ease;
+}
+
+/* Enhanced responsive menu section headers */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .menuSection h3 {
+    margin: 40px 0px 20px 0px;
+    font-size: 24px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .menuSection h3 {
+    margin: 50px 0px 25px 0px;
+    font-size: 28px;
+  }
+}
+
+.menuItemsGrid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: 1fr;
+  margin-bottom: 10px;
+}
+
+.menuItemsGridMobile {
+  gap: 12px;
+  grid-template-columns: 1fr;
+}
+
+.menuItemsGridTablet {
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  padding: 0 12px;
+  margin-bottom: 20px;
+}
+
+.menuItemsGridDesktop {
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  padding: 0 16px;
+  margin-bottom: 24px;
+}
+
+/* Enhanced responsive menu items grid */
+@media (min-width: 1280px) {
+  .menuItemsGridDesktop {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    padding: 0 20px;
+    margin-bottom: 28px;
+  }
+}
+
+/* Restaurant Header Skeleton */
+.restaurantHeader {
+  position: relative;
+  margin-bottom: 24px;
+}
+
+.leftShape {
+  position: absolute;
+  top: 133px;
+  width: 47px;
+  height: 50px;
+  left: -11px;
+  background-color: var(--background);
+  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
+}
+
+:global(.darkApp) .leftShape {
+  background-color: var(--background);
+}
+
+.rightShape {
+  position: absolute;
+  top: 133px;
+  width: 47px;
+  height: 50px;
+  left: 102px;
+  background-color: var(--background);
+  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
+  transform: scale(-1, 1);
+}
+
+:global(.darkApp) .rightShape {
+  background-color: var(--background);
+}
+
+/* Restaurant Info Skeleton */
+.restaurantInfoSkeleton {
+  text-align: center;
+  padding: 0 16px;
+}
+
+/* Loyalty Card Skeleton */
+.loyaltySkeleton {
+  margin: 16px 0;
+  padding: 0 16px;
+}
+
+.loyaltyCardSkeleton {
+  height: 115px;
+  border-radius: 16px;
+}
+
+.loyaltyCardSkeleton :global(.ant-card-body) {
+  height: 115px;
+  padding: 12px 16px !important;
+}
+
+/* Page Container */
+.pageContainer {
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Enhanced responsive page container */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .pageContainer {
+    padding: 24px;
+  }
+
+  .restaurantInfoSkeleton {
+    padding: 0 24px;
+    margin: 32px 0;
+  }
+
+  .loyaltySkeleton {
+    padding: 0 24px;
+  }
+
+  .restaurantHeader {
+    margin-bottom: 32px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .pageContainer {
+    padding: 32px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .restaurantInfoSkeleton {
+    padding: 0 32px;
+    margin: 40px 0;
+  }
+
+  .loyaltySkeleton {
+    padding: 0 32px;
+  }
+
+  .restaurantHeader {
+    margin-bottom: 40px;
+  }
+}
+
+/* Skeleton Loading Styles */
+.skeletonContainer {
+  animation: skeletonPulse 1.5s ease-in-out infinite;
+}
+
+.skeletonContainer .ant-skeleton {
+  transition: all 0.3s ease;
+}
+
+.skeletonContainer .ant-skeleton-image {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.skeletonContainer .ant-skeleton-input {
+  border-radius: 6px;
+}
+
+.skeletonContainer .ant-skeleton-button {
+  border-radius: 20px;
+}
+
+@keyframes skeletonPulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes skeletonShimmer {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+
+.skeletonContainer .ant-skeleton-active .ant-skeleton-input,
+.skeletonContainer .ant-skeleton-active .ant-skeleton-image,
+.skeletonContainer .ant-skeleton-active .ant-skeleton-button {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200px 100%;
+  animation: skeletonShimmer 1.5s infinite;
+}
+
+/* Mobile-specific skeleton styles */
+@media (max-width: 768px) {
+  .skeletonContainer .ant-skeleton {
+    margin-bottom: 12px;
+  }
+
+  .skeletonContainer .ant-skeleton-image {
+    border-radius: 4px;
+  }
+
+  .skeletonContainer .ant-skeleton-input {
+    border-radius: 4px;
+  }
+
+  .skeletonContainer .ant-skeleton-button {
+    border-radius: 16px;
+  }
+}
+
+/* Dark theme skeleton styles */
+:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-input,
+:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-image,
+:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-button {
+  background: linear-gradient(90deg, #181818 25%, #363636 50%, #181818 75%);
+  background-size: 200px 100%;
+  animation: skeletonShimmer 1.5s infinite;
+}
+
+:global(.darkApp) .skeletonContainer .ant-skeleton-input,
+:global(.darkApp) .skeletonContainer .ant-skeleton-image,
+:global(.darkApp) .skeletonContainer .ant-skeleton-button {
+  background-color: #181818;
+  border-color: #363636;
+}
+
+/* Tablet-specific skeleton styles */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .skeletonContainer {
+    padding: 24px;
+  }
+
+  .skeletonContainer .ant-skeleton {
+    margin-bottom: 16px;
+  }
+
+  .skeletonContainer .ant-skeleton-image {
+    border-radius: 6px;
+  }
+
+  .skeletonContainer .ant-skeleton-input {
+    border-radius: 5px;
+  }
+
+  .skeletonContainer .ant-skeleton-button {
+    border-radius: 18px;
+  }
+}

src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx

@@ -0,0 +1,438 @@
+import { Card, Grid, Skeleton } from "antd";
+import styles from "./MenuSkeleton.module.css";
+
+interface MenuSkeletonProps {
+  categoryCount?: number;
+  itemCount?: number;
+  variant?:
+    | "default"
+    | "minimal"
+    | "detailed"
+    | "categories-only"
+    | "menu-only";
+}
+
+const { useBreakpoint } = Grid;
+
+const MenuSkeleton = ({
+  categoryCount = 6,
+  itemCount = 8,
+  variant = "default",
+}: MenuSkeletonProps) => {
+  const { xs, sm, md } = useBreakpoint();
+  const isMobile = xs;
+  const isTablet = sm && !md;
+  const isDesktop = md;
+
+  const getCategoryCardStyle = () => {
+    if (isMobile) {
+      return {
+        width: 90,
+        height: 95,
+      };
+    } else if (isTablet) {
+      return {
+        width: 120,
+        height: 140,
+      };
+    } else {
+      return {
+        width: 140,
+        height: 160,
+      };
+    }
+  };
+
+  const getMenuItemCardStyle = () => {
+    if (isMobile) {
+      return {
+        height: 140,
+        padding: "12px 12px 12px 16px",
+      };
+    } else if (isTablet) {
+      return {
+        height: 160,
+        padding: "16px",
+      };
+    } else {
+      return {
+        height: 180,
+        padding: "20px",
+      };
+    }
+  };
+
+  const getCategoryImageStyle = () => {
+    if (isMobile) {
+      return {
+        width: 90,
+        height: 60,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+      };
+    } else if (isTablet) {
+      return {
+        width: 120,
+        height: 90,
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+      };
+    } else {
+      return {
+        width: 120,
+        height: 100,
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+      };
+    }
+  };
+
+  const getMenuItemImageStyle = () => {
+    if (isMobile) {
+      return {
+        width: 90,
+        height: 95,
+      };
+    } else if (isTablet) {
+      return {
+        width: 120,
+        height: 120,
+      };
+    } else {
+      return {
+        width: 140,
+        height: 140,
+      };
+    }
+  };
+
+  const getGridClass = () => {
+    if (isMobile) {
+      return styles.menuItemsGridMobile;
+    } else if (isTablet) {
+      return styles.menuItemsGridTablet;
+    } else {
+      return styles.menuItemsGridDesktop;
+    }
+  };
+
+  const getPageContainerStyle = () => {
+    if (isDesktop) {
+      return {
+        maxWidth: "1200px",
+        margin: "0 auto",
+        padding: "32px",
+      };
+    } else if (isTablet) {
+      return {
+        padding: "24px",
+      };
+    }
+  };
+
+  return (
+    <div
+      className={`${styles.pageContainer} ${styles.skeletonContainer}`}
+      style={getPageContainerStyle()}
+    >
+      {/* Restaurant Header Skeleton */}
+      <div className={styles.restaurantHeader}>
+        {/* Cover Image Skeleton */}
+        <Skeleton.Image
+          active
+          style={{
+            width: "100vw",
+            height: isMobile ? 182 : isTablet ? 200 : 220,
+            borderRadius: 0,
+          }}
+        />
+
+        {/* Logo Skeleton */}
+        <Skeleton.Image
+          active
+          style={{
+            position: "absolute",
+            left: isMobile ? "33px" : "40px",
+            top: isMobile ? "133px" : "-70px",
+            borderRadius: "50%",
+            width: isMobile ? "72px" : "80px",
+            height: isMobile ? "72px" : "80px",
+            border: "3px solid var(--background)",
+            zIndex: 10,
+            overflow: "hidden",
+          }}
+        />
+
+        {/* Decorative Shapes Skeleton */}
+        <div className={styles.leftShape}></div>
+        <div className={styles.rightShape}></div>
+      </div>
+
+      {/* Restaurant Info Skeleton */}
+      <div className={styles.restaurantInfoSkeleton}>
+        <div
+          className={
+            styles.restaurantDescriptionSkeleton +
+            " " +
+            "restaurant-description-skeleton"
+          }
+        >
+          <Skeleton
+            active
+            paragraph={{
+              rows: 1,
+              width: ["100%"],
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Loyalty Card Skeleton */}
+      <div className={styles.loyaltySkeleton}>
+        <Card className={styles.loyaltyCardSkeleton}>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: "0.5rem",
+            }}
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <Skeleton.Image
+                active
+                style={{
+                  width: "24px",
+                  height: "24px",
+                  borderRadius: "4px",
+                }}
+              />
+              <Skeleton.Input
+                active
+                style={{
+                  width: "120px",
+                  height: "16px",
+                }}
+              />
+            </div>
+            <Skeleton.Image
+              active
+              style={{
+                width: "24px",
+                height: "24px",
+                borderRadius: "4px",
+              }}
+            />
+          </div>
+          <br />
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <div style={{ display: "flex", gap: "4px" }}>
+              {Array.from({ length: 5 }).map((_, index) => (
+                <Skeleton.Image
+                  key={index}
+                  active
+                  style={{
+                    width: "32px",
+                    height: "32px",
+                    borderRadius: "50%",
+                  }}
+                />
+              ))}
+            </div>
+            <Skeleton.Button
+              active
+              style={{
+                width: "80px",
+                height: "32px",
+                borderRadius: "16px",
+              }}
+            />
+          </div>
+        </Card>
+      </div>
+
+      {/* Categories Skeleton */}
+      {(variant === "default" ||
+        variant === "minimal" ||
+        variant === "detailed" ||
+        variant === "categories-only") && (
+        <div style={{ padding: "0 1rem", display: "flex", gap: 8, overflow: "hidden" }}>
+          {Array.from({
+            length:
+              variant === "minimal"
+                ? Math.min(categoryCount, 4)
+                : categoryCount,
+          }).map((_, index) => (
+            <div
+              key={index}
+              style={{
+                marginRight: isMobile ? "3px" : "8px",
+              }}
+            >
+              <Card
+                style={{ borderRadius: 8 }}
+                styles={{
+                  body: {
+                    ...getCategoryCardStyle(),
+                    padding: 0,
+                  },
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: "0px",
+                    width: "100%",
+                    height: "100%",
+                  }}
+                >
+                  <Skeleton.Image
+                    active
+                    style={{
+                      ...getCategoryImageStyle(),
+                      borderBottomLeftRadius: 0,
+                      borderBottomRightRadius: 0,
+                    }}
+                  />
+                  <div
+                    style={{
+                      flex: 1,
+                      padding: isMobile ? "4px" : "8px",
+                      textAlign: "center",
+                      width: "100%",
+                    }}
+                  >
+                    <Skeleton
+                      active
+                      paragraph={{ rows: 1 }}
+                      style={{
+                        margin: 0,
+                        padding: isMobile ? 3 : 8,
+                      }}
+                    />
+                  </div>
+                </div>
+              </Card>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Menu Items Skeleton */}
+      {(variant === "default" ||
+        variant === "minimal" ||
+        variant === "detailed" ||
+        variant === "menu-only") && (
+        <div className={styles.menuSections} style={{ padding: "0 1rem" }}>
+          {Array.from({ length: variant === "minimal" ? 1 : 3 }).map(
+            (_, sectionIndex) => (
+              <div key={sectionIndex} className={styles.menuSection}>
+                {/* Section Header Skeleton */}
+                {/* <div
+                style={{
+                  margin: isMobile ? "20px 0 15px 0" : isTablet ? "30px 0 20px 0" : "40px 0 25px 0",
+                  padding: isTablet ? "0 12px" : isDesktop ? "0 16px" : "0"
+                }}
+              >
+                <Skeleton.Input
+                  active
+                  size="large"
+                  style={{
+                    width: isMobile ? 120 : isTablet ? 160 : 200,
+                    height: isMobile ? 24 : isTablet ? 28 : 32,
+                  }}
+                />
+              </div> */}
+
+                <div className={`${styles.menuItemsGrid} ${getGridClass()}`}>
+                  {Array.from({
+                    length:
+                      variant === "minimal"
+                        ? Math.min(itemCount, 4)
+                        : itemCount,
+                  }).map((_, itemIndex) => (
+                    <Card
+                      key={itemIndex}
+                      className="responsive-card"
+                      style={{ borderRadius: 8 }}
+                      styles={{
+                        body: {
+                          ...getMenuItemCardStyle(),
+                          display: "flex",
+                          flexDirection: "column",
+                          justifyContent: "space-between",
+                        },
+                      }}
+                    >
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-around",
+                          gap: isMobile ? 12 : 16,
+                          position: "relative",
+                        }}
+                      >
+                        <div
+                          style={{
+                            lineHeight: 1,
+                            height: "100%",
+                            flex: 1,
+                          }}
+                        >
+                          {/* Item Name Skeleton */}
+                          <Skeleton.Input
+                            active
+                            style={{
+                              marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
+                              height: isMobile ? 16 : isTablet ? 18 : 20,
+                              width: "80%",
+                            }}
+                          />
+
+                          {/* Item Description Skeleton */}
+                          <Skeleton
+                            active
+                            paragraph={{
+                              rows: isMobile ? 1 : 2,
+                              width: ["100%", "90%", "70%"],
+                            }}
+                            style={{
+                              marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
+                            }}
+                          />
+                          {/* Action Icons Skeleton */}
+                        </div>
+
+                        <div style={{ position: "relative" }}>
+                          {/* Item Image Skeleton */}
+                          <Skeleton.Image
+                            active
+                            style={{
+                              ...getMenuItemImageStyle(),
+                            }}
+                          />{" "}
+                        </div>
+                      </div>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+            )
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MenuSkeleton;

src/pages/menu/components/ProductCard/ProductCard.tsx

@@ -0,0 +1,276 @@
+import { PlusOutlined } from "@ant-design/icons";
+import { Badge, Button, Card, Grid } from "antd";
+import ArabicPrice from "components/ArabicPrice";
+import HeartIcon from "components/Icons/HeartIcon";
+import ImageWithFallback from "components/ImageWithFallback";
+import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons";
+import ProText from "components/ProText";
+import { addItem, selectCartItems } from "features/order/orderSlice";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useParams } from "react-router-dom";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { colors } from "ThemeConstants";
+import { Product } from "utils/types/appTypes";
+import styles from "../MenuList/MenuList.module.css";
+
+const { useBreakpoint } = Grid;
+
+interface ProductCardProps {
+  products: Product[];
+}
+
+export function ProductCard({ products }: ProductCardProps) {
+  const { id } = useParams();
+  const { isRTL, locale } = useAppSelector((state) => state.locale);
+  const { sm, md } = useBreakpoint();
+  const isMobile = !sm;
+  const isTablet = sm && !md;
+  const { themeName } = useAppSelector((state) => state.theme);
+  const dispatch = useAppDispatch();
+  const cartItems = useAppSelector(selectCartItems);
+  const getItemQuantity = (id: number | string) => {
+    const item = cartItems.find((i) => i.id === id);
+    return item ? item.quantity : 0;
+  };
+  const { t } = useTranslation();
+
+  // Memoized handlers for better performance
+  const handleQuickAdd = useCallback(
+    (item: Product) => {
+      dispatch(
+        addItem({
+          item: {
+            id: item.id,
+            name: item.name,
+            price: item.price,
+            image: item.image,
+            description: item.description,
+            variant: "None",
+            extras: [],
+            extrasgroup: [],
+          },
+          quantity: 1,
+        })
+      );
+    },
+    [dispatch]
+  );
+
+  const getMenuItemCardStyle = useCallback(
+    (itemDescription: string) => {
+      if (isMobile) {
+        return {
+          height: itemDescription?.length > 0 ? 160 : 130,
+          padding: "12px 12px 12px 16px",
+        };
+      } else if (isTablet) {
+        return {
+          height: 160,
+          padding: "16px",
+        };
+      } else {
+        return {
+          height: 180,
+          padding: "20px",
+        };
+      }
+    },
+    [isMobile, isTablet]
+  );
+
+  const getMenuItemImageStyle = useCallback(() => {
+    if (isMobile) {
+      return {
+        width: 90,
+        height: 95,
+      };
+    } else if (isTablet) {
+      return {
+        width: 120,
+        height: 120,
+      };
+    } else {
+      return {
+        width: 140,
+        height: 140,
+      };
+    }
+  }, [isMobile, isTablet]);
+
+  return (
+    <>
+      {products?.map((item) => (
+        <Link
+          to={`/${id}/product/${item.id}`}
+          key={item.id}
+          className={styles.productLink}
+        >
+          <Card
+            key={item.id}
+            styles={{
+              body: {
+                ...getMenuItemCardStyle(item.description),
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "space-between",
+                borderRadius: 16,
+              },
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                height: "100%",
+                gap: isMobile ? 10 : 16,
+              }}
+            >
+              <div
+                style={{
+                  lineHeight: 1,
+                  height: "100%",
+                  flex: 1,
+                }}
+              >
+                <ProText
+                  style={{
+                    margin: 0,
+                    marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
+                    display: "inline-block",
+                    fontSize: isMobile ? "1rem" : isTablet ? 16 : 18,
+                    fontWeight: 600,
+                    letterSpacing: "-0.01em",
+                    lineHeight: 1.2,
+                  }}
+                >
+                  {locale == "ar" ? item.nameOther : item.name}
+                </ProText>
+                <ProText
+                  type="secondary"
+                  className={styles.itemDescription}
+                  style={{
+                    display: "-webkit-box",
+                    WebkitBoxOrient: "vertical",
+                    WebkitLineClamp: isMobile ? 2 : 4,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    wordWrap: "break-word",
+                    overflowWrap: "break-word",
+                    lineHeight: "1.5rem",
+                    maxHeight: isMobile ? "3em" : "6.6em",
+                    fontSize: isMobile ? "1rem" : isTablet ? 16 : 18,
+                    letterSpacing: "0.01em",
+                  }}
+                >
+                  {item.description}
+                </ProText>
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "start",
+                  gap: isMobile ? 16 : 24,
+                  position: "absolute",
+                  bottom: isMobile ? 16 : 20,
+                  [isRTL ? "right" : "left"]: isMobile ? 16 : 20,
+                }}
+              >
+                <ArabicPrice
+                  price={item.price}
+                  strong
+                  style={{
+                    fontSize: isMobile ? "1rem" : isTablet ? 18 : 22,
+                    fontWeight: 700,
+                    color: themeName === "dark" ? "#FFC600" : "#1a1a1a",
+                  }}
+                />
+                <ItemDescriptionIcons className={styles.itemDescriptionIcons} />
+              </div>
+              <div style={{ position: "relative" }}>
+                <ImageWithFallback
+                  src={item.image_small || ""}
+                  alt={item.name}
+                  fallbackSrc="/default.png"
+                  className={`${styles.popularMenuItemImage} ${
+                    isMobile
+                      ? styles.popularMenuItemImageMobile
+                      : isTablet
+                      ? styles.popularMenuItemImageTablet
+                      : styles.popularMenuItemImageDesktop
+                  }`}
+                  {...getMenuItemImageStyle()}
+                />
+                <Button
+                  className={styles.heartButton}
+                  icon={<HeartIcon />}
+                  style={{ width: 24, height: 24 }}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    console.log("heart");
+                  }}
+                />
+                <Button
+                  shape="round"
+                  title="add"
+                  iconPosition="start"
+                  icon={
+                    <PlusOutlined
+                      title="add"
+                      style={{
+                        position: "relative",
+                        top: "-1px",
+                      }}
+                    />
+                  }
+                  size={isMobile ? "small" : "middle"}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleQuickAdd(item);
+                  }}
+                  style={{
+                    position: "absolute",
+                    bottom: -10,
+                    [isRTL ? "right" : "left"]: isMobile ? "5%" : "15%",
+                    zIndex: 1,
+                    width: isMobile ? 82 : isTablet ? 90 : 100,
+                    height: isMobile ? 32 : isTablet ? 40 : 44,
+                    fontSize: isMobile ? "1rem" : isTablet ? 16 : 18,
+                    fontWeight: 600,
+                    border: 0,
+                    color: themeName === "light" ? "#333333" : "#FFFFFF",
+                    boxShadow:
+                      themeName === "light"
+                        ? "0 2px 0 rgba(0,0,0,0.02)"
+                        : "0 2px 0 #6b6b6b",
+                  }}
+                >
+                  {t("common.add")}
+                </Button>
+                {/* Cart quantity badge - shows current quantity in cart */}
+                {getItemQuantity(item.id) > 0 && (
+                  <Badge
+                    count={getItemQuantity(item.id)}
+                    className={
+                      styles.cartBadge +
+                      " " +
+                      (isRTL ? styles.cartBadgeRTL : styles.cartBadgeLTR)
+                    }
+                    style={{
+                      backgroundColor: colors.primary,
+                    }}
+                    title={`${getItemQuantity(item.id)} in cart`}
+                  />
+                )}
+              </div>
+            </div>
+          </Card>
+        </Link>
+      ))}
+    </>
+  );
+}

src/pages/menu/components/ResponsiveServices.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Button, Grid } from "antd";
+import DineInIcon from "components/Icons/DineInIcon";
+import DownIcon from "components/Icons/DownIcon";
+import PickupIcon from "components/Icons/PickupIcon";
+import styles from "../menu.module.css";
+
+interface ResponsiveServicesProps {
+  orderType: string;
+  translations: {
+    common: {
+      dineIn: string;
+      pickup: string;
+      more: string;
+    };
+  };
+}
+
+const { useBreakpoint } = Grid;
+
+export default function ResponsiveServices({ orderType, translations }: ResponsiveServicesProps) {
+  const { xs } = useBreakpoint();
+  
+  // Hide pickup service if screen width is less than 400px (insufficient for 3 services)
+  const shouldHidePickup = xs;
+  
+  return (
+    <div className={styles.services}>
+      <Button
+        className={
+          orderType == "dine-in"
+            ? styles.activeServiceButton
+            : styles.serviceButton
+        }
+        icon={
+          <div className={styles.dineInIcon}>
+            <DineInIcon className={`${styles.icon}`} />
+          </div>
+        }
+      >
+        {translations.common.dineIn}
+      </Button>
+      
+      {!shouldHidePickup && (
+        <Button
+          className={
+            orderType == "pickup"
+              ? styles.activeServiceButton
+              : styles.serviceButton
+          }
+          icon={
+            <div className={styles.pickupIcon}>
+              <PickupIcon className={`${styles.pickupIcon} ${styles.icon}`} />
+            </div>
+          }
+        >
+          {translations.common.pickup}
+        </Button>
+      )}
+      
+      <Button
+        className={
+          orderType == "more"
+            ? styles.activeServiceButton
+            : styles.serviceButton
+        }
+      >
+        {translations.common.more}{" "}
+        <DownIcon className={`${styles.downIcon} ${styles.icon}`} />
+      </Button>
+    </div>
+  );
+}

src/pages/menu/components/ScrollEventHandler.tsx

@@ -0,0 +1,97 @@
+import { useScrollHandler } from "contexts/ScrollHandlerContext";
+import { useEffect, useRef } from "react";
+
+export default function ScrollEventHandler() {
+  const { 
+    setShowScrollTop, 
+    setIsCategoriesSticky, 
+    categoriesContainerRef,
+    categoryRefs,
+    activeCategory,
+    setActiveCategory 
+  } = useScrollHandler();
+
+  const hasSetInitialCategory = useRef(false);
+
+  // Set initial active category when categories are available
+  useEffect(() => {
+    if (categoryRefs.current && Object.keys(categoryRefs.current).length > 0 && !hasSetInitialCategory.current) {
+      // Set the first category as active initially
+      const firstCategoryId = parseInt(Object.keys(categoryRefs.current)[0]);
+      setActiveCategory(firstCategoryId);
+      hasSetInitialCategory.current = true;
+    }
+  }, [categoryRefs, setActiveCategory]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop =
+        window.pageYOffset || document.documentElement.scrollTop;
+      setShowScrollTop(scrollTop > 300); // Show button after scrolling 300px
+
+      // Check if we should make categories sticky
+      if (categoriesContainerRef.current) {
+        // Get the original position of the categories container
+        const originalTop = categoriesContainerRef.current.offsetTop;
+
+        // Only make sticky when we've scrolled past the original position
+        // and return to normal when we scroll back above it
+        // Add a small threshold (10px) to prevent flickering
+        const shouldBeSticky = scrollTop > originalTop + 10;
+        setIsCategoriesSticky(shouldBeSticky);
+      }
+
+      // Find the most visible category based on scroll position
+      if (categoryRefs.current) {
+        let mostVisibleCategory: { id: number; visibility: number } | null = null;
+        
+        Object.entries(categoryRefs.current).forEach(([categoryId, element]) => {
+          if (element) {
+            const rect = element.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            
+            // Calculate visibility ratio
+            const elementTop = rect.top;
+            const elementBottom = rect.bottom;
+            const elementHeight = rect.height;
+            
+            // Calculate how much of the element is visible
+            let visibleHeight = 0;
+            if (elementTop >= 0 && elementBottom <= viewportHeight) {
+              // Element is fully visible
+              visibleHeight = elementHeight;
+            } else if (elementTop < 0 && elementBottom > 0) {
+              // Element is partially visible from top
+              visibleHeight = elementBottom;
+            } else if (elementTop < viewportHeight && elementBottom > viewportHeight) {
+              // Element is partially visible from bottom
+              visibleHeight = viewportHeight - elementTop;
+            }
+            
+            const visibility = visibleHeight / elementHeight;
+            
+            // Only consider elements that are at least 30% visible
+            if (visibility > 0.3) {
+              if (!mostVisibleCategory || visibility > mostVisibleCategory.visibility) {
+                mostVisibleCategory = {
+                  id: parseInt(categoryId),
+                  visibility
+                };
+              }
+            }
+          }
+        });
+        
+        // Update active category if we found a visible one
+        if (mostVisibleCategory) {
+          setActiveCategory((mostVisibleCategory as { id: number; visibility: number }).id);
+        }
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [categoriesContainerRef, setIsCategoriesSticky, setShowScrollTop, categoryRefs, setActiveCategory, activeCategory]);
+
+  return null;
+}

src/pages/menu/components/SearchButton.tsx

@@ -0,0 +1,23 @@
+import { Button } from "antd";
+import SearchIcon from "components/Icons/SearchIcon";
+import { useNavigate, useParams } from "react-router-dom";
+import styles from "../menu.module.css";
+
+export default function SearchButton() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  
+  return (
+    <div className={styles.searchButtonContainer}>
+      <Button
+        className={styles.searchButton}
+        icon={<SearchIcon />}
+        onClick={() =>
+          // router.push(`?orderType=${orderType}&search=true`)
+          // setSelectedClientRoute("search")
+          navigate(`/${id}/search`)
+        }
+      />
+    </div>
+  );
+}