Desktop: explore page (category grid + contained layout)

- explore: hide mobile search bar at lg (global header has search); contain
  content to 1320px; category grid 2-col mobile -> 4-col desktop with taller tiles
- MyLayout: desktop gate now includes /explore

app/components/MyLayout.tsx

@@ -33,6 +33,7 @@ const MyLayout = React.memo(({ children }: { children: React.ReactNode }) => {
   const p = location.pathname;
   const isDesktopReady =
     p === "/" ||
+    p === "/explore" ||
     p.startsWith("/search/") ||
     p.startsWith("/product/") ||
     p.startsWith("/seller/") ||

app/components/explore/MainSection.tsx

@@ -47,7 +47,7 @@ const MainSection = () => {
   );
 
   return (
-    <div className="flex flex-col gap-6 w-full pb-20">
+    <div className="flex flex-col gap-6 w-full pb-20 lg:max-w-[1320px] lg:mx-auto lg:px-8 lg:pt-6">
       <TabContainer
         activeTab={activeTab}
         setActiveTab={setActiveTab}
@@ -64,8 +64,8 @@ const MainSection = () => {
             </p>
           </div>
         ) : (
-          <div className="px-4 flex flex-col gap-6 w-full">
+          <div className="px-4 lg:px-0 flex flex-col gap-6 w-full">
-            <div className="grid grid-cols-2 gap-4 w-full">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 w-full">
               {categories?.map((category, index) => {
                 return (
                   <Link
@@ -75,7 +75,7 @@ const MainSection = () => {
                   >
                     <img
                       src={category.imageUrl}
-                      className="w-full h-[120px] object-cover rounded-[15px]"
+                      className="w-full h-[120px] lg:h-[180px] object-cover rounded-[15px]"
                       alt={category.categoryName}
                     />
                     <p className="text-B16 text-center line-clamp-1 w-full font-bold text-white absolute bottom-2 left-2/4 -translate-x-1/2">

app/routes/explore.tsx

@@ -9,11 +9,13 @@ export default function Explore() {
   const [searchValue, setSearchValue] = useState("");
   return (
     <div className="flex flex-col">
-      <ExploreTopBar
+      <div className="lg:hidden">
-        setIsActiveSearchBar={setIsActiveSearchBar}
+        <ExploreTopBar
-        searchValue={searchValue}
+          setIsActiveSearchBar={setIsActiveSearchBar}
-        setSearchValue={setSearchValue}
+          searchValue={searchValue}
-      />
+          setSearchValue={setSearchValue}
+        />
+      </div>
       {isActiveSearchBar ? (
         <SearchSection searchValue={searchValue} />
       ) : (