added mobile category page

app/[locale]/categories/page.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+import CategoriesClient from "@/features/category/components/CategoriesClient";
+
+type Props = {
+  params: Promise<{ locale: string }>;
+};
+
+export async function generateMetadata({
+  params,
+}: Props): Promise<Metadata> {
+  return {
+    title: "Categories | SmartElectronics",
+  };
+}
+
+export default async function CategoriesPage(props: Props) {
+  const params = await props.params;
+
+  return <CategoriesClient locale={params.locale} />;
+}

components/layout/ui/SearchBar.tsx

@@ -49,20 +49,18 @@ export default function SearchBar({
   }, [searchParams, pathname]);
 
   React.useEffect(() => {
-    // Debounce updates to the URL query when typing on search page
-    if (pathname?.includes("/search")) {
-      const delayDebounceFn = setTimeout(() => {
-        const q = searchParams?.get("q") || "";
-        const curVal = searchValue.trim();
-        if (curVal !== q && curVal !== "") {
-          router.push(`/${locale}/search?q=${encodeURIComponent(curVal)}`);
-        } else if (curVal === "" && q !== "") {
-          router.push(`/${locale}/search`);
-        }
-      }, 500);
+    // Debounce updates to the URL query when typing
+    const delayDebounceFn = setTimeout(() => {
+      const q = searchParams?.get("q") || "";
+      const curVal = searchValue.trim();
+      if (curVal !== q && curVal !== "") {
+        router.push(`/${locale}/search?q=${encodeURIComponent(curVal)}`);
+      } else if (curVal === "" && q !== "" && pathname?.includes("/search")) {
+        router.push(`/${locale}/search`);
+      }
+    }, 500);
 
-      return () => clearTimeout(delayDebounceFn);
-    }
+    return () => clearTimeout(delayDebounceFn);
   }, [searchValue, pathname, router, locale, searchParams]);
 
   const performSearch = () => {

features/cart/components/OrderSummary.tsx

@@ -99,7 +99,8 @@ export default function OrderSummary({
     paymentType &&
     isPhoneValid &&
     name.trim() !== "" &&
-    lastName.trim() !== "";
+    lastName.trim() !== "" &&
+    note.trim() !== "";
 
   const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const input = e.target.value;
@@ -289,16 +290,26 @@ export default function OrderSummary({
 
       {/* Note */}
       <div className="mb-8">
-        <Label className="text-xl font-bold mb-4 block text-gray-900">
+        <Label className="text-xl flex gap-1 font-bold mb-4 text-gray-900">
           {t("note")}
+          <span className="text-red-500">*</span>
         </Label>
         <Textarea
           value={note}
           onChange={(e) => onNoteChange(e.target.value)}
-          className="rounded-[10px] resize-none border-2 border-gray-200 focus:border-gray-900 transition-colors"
+          className={`rounded-[10px] resize-none border-2 transition-colors ${
+            showValidation && note.trim() === ""
+              ? "border-red-500"
+              : "border-gray-200 focus:border-gray-900"
+          }`}
           rows={3}
           placeholder={t("note")}
         />
+        {showValidation && note.trim() === "" && (
+          <p className="text-xs text-red-500 mt-2 font-medium">
+            {t("requiredField")}
+          </p>
+        )}
       </div>
 
       {/* Billing */}

features/category/components/CategoriesClient.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import CategoryGrid from "@/features/home/components/CategoryGrid";
+import { useCategories } from "@/lib/hooks";
+
+export default function CategoriesClient({ locale }: { locale: string }) {
+  const t = useTranslations("common");
+  const {
+    data: categories,
+    isLoading: categoriesLoading,
+    isError: categoriesError,
+  } = useCategories();
+
+  return (
+    <div className="px-2 md:px-4 lg:px-6 pt-4 pb-12 max-w-[1504px] mx-auto min-h-screen">
+      <CategoryGrid
+        categories={categories}
+        isLoading={categoriesLoading}
+        isError={categoriesError}
+        locale={locale}
+        title={t("categories")}
+        showAllOnMobile={true}
+      />
+    </div>
+  );
+}

features/home/components/CategoryGrid.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { Card, CardContent } from "@/components/ui/card";
 import type { Category } from "@/lib/types/api";
 import { Skeleton } from "@/components/ui/skeleton";
+import { ChevronRight } from "lucide-react";
 
 type Props = {
   categories: Category[] | undefined;
@@ -11,6 +12,7 @@ type Props = {
   isError: boolean;
   locale: string;
   title: string;
+  showAllOnMobile?: boolean;
 };
 
 export default function CategoryGrid({
@@ -19,6 +21,7 @@ export default function CategoryGrid({
   isError,
   locale,
   title,
+  showAllOnMobile = false,
 }: Props) {
   if (isError) {
     return (
@@ -55,7 +58,7 @@ export default function CategoryGrid({
         <Skeleton className="h-9 w-56 mb-6 rounded-xl" />
         <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-5">
           {Array.from({ length: 12 }).map((_, i) => (
-            <div key={i} className={`space-y-3 ${i >= 2 ? "hidden sm:block" : ""}`}>
+            <div key={i} className={`space-y-3 ${!showAllOnMobile && i >= 2 ? "hidden sm:block" : ""}`}>
               <Skeleton className="w-full h-36 rounded-2xl" />
               <Skeleton className="h-4 w-full rounded-lg" />
             </div>
@@ -67,15 +70,25 @@ export default function CategoryGrid({
 
   return (
     <section className="bg-white rounded-lg shadow-sm border border-gray-100 p-2 md:p-6">
-      <h2 className="text-2xl font-bold mb-6 text-gray-900">{title}</h2>
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
+        {!showAllOnMobile && (
+          <Link
+            href={`/${locale}/categories`}
+            className="sm:hidden flex items-center justify-center p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-500"
+          >
+            <ChevronRight className="w-6 h-6" />
+          </Link>
+        )}
+      </div>
       <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-5">
         {categories?.map((cat, index) => (
           <Link
             key={cat.id}
             href={`/${locale}/category/${cat.slug}?category_id=${cat.id}`}
-            className={`group ${index >= 2 ? "hidden sm:block" : ""}`}
+            className={`group ${!showAllOnMobile && index >= 2 ? "hidden sm:block" : ""}`}
           >
-            <Card className="border p-2 border-gray-100 hover:border-gray-900 hover:shadow-lg transition-all duration-300 cursor-pointer overflow-hidden rounded-lg bg-gradient-to-br from-gray-50 to-white">
+            <Card className="border p-2 gap-2 border-gray-100 hover:border-gray-900 hover:shadow-lg transition-all duration-300 cursor-pointer overflow-hidden rounded-lg bg-gradient-to-br from-gray-50 to-white">
               <div className="relative w-full h-40 overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100">
                 <Image
                   src={
@@ -87,7 +100,7 @@ export default function CategoryGrid({
                 />
               </div>
               <CardContent className="py-4 px-3">
-                <p className="text-sm font-semibold text-gray-900 text-center group-hover:text-gray-700 transition-colors">
+                <p className="text-sm min-h-[40px] font-semibold text-gray-900 text-center group-hover:text-gray-700 transition-colors">
                   {cat.name}
                 </p>
               </CardContent>

features/home/components/ProductCard.tsx

@@ -377,7 +377,7 @@ export default function ProductCard({
             </h3>
 
             {/* Price */}
-            <div className="flex-col flex md:flex-row  items-baseline gap-1">
+            <div className="flex-col flex md:flex-row  items-baseline gap-1 min-h-[52px]">
               <p
                 className="text-xl font-bold tracking-tight"
                 style={{ color: price_color }}