added real time search

features/home/components/CategoryGrid.tsx

@@ -55,7 +55,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">
+            <div key={i} className={`space-y-3 ${i >= 2 ? "hidden sm:block" : ""}`}>
               <Skeleton className="w-full h-36 rounded-2xl" />
               <Skeleton className="h-4 w-full rounded-lg" />
             </div>
@@ -69,11 +69,11 @@ export default function CategoryGrid({
     <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="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-5">
-        {categories?.map((cat) => (
+        {categories?.map((cat, index) => (
           <Link
             key={cat.id}
             href={`/${locale}/category/${cat.slug}?category_id=${cat.id}`}
-            className="group"
+            className={`group ${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">
               <div className="relative w-full h-40 overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100">