From 7845ab5e751fe747eef33075bf2faadcf0725bab Mon Sep 17 00:00:00 2001
From: Arda Samadi <arda.samadi2010@gmail.com>
Date: Tue, 16 Jun 2026 11:11:46 +0330
Subject: [PATCH] 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            |  1 +
 app/components/explore/MainSection.tsx |  8 ++++----
 app/routes/explore.tsx                 | 12 +++++++-----
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/components/MyLayout.tsx b/app/components/MyLayout.tsx
index f07ac69..4605fee 100644
--- a/app/components/MyLayout.tsx
+++ b/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/") ||
diff --git a/app/components/explore/MainSection.tsx b/app/components/explore/MainSection.tsx
index 1d8ac9e..8cd9623 100644
--- a/app/components/explore/MainSection.tsx
+++ b/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="grid grid-cols-2 gap-4 w-full">
+          <div className="px-4 lg:px-0 flex flex-col gap-6 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">
diff --git a/app/routes/explore.tsx b/app/routes/explore.tsx
index 35bee7c..f5f1b50 100644
--- a/app/routes/explore.tsx
+++ b/app/routes/explore.tsx
@@ -9,11 +9,13 @@ export default function Explore() {
   const [searchValue, setSearchValue] = useState("");
   return (
     <div className="flex flex-col">
-      <ExploreTopBar
-        setIsActiveSearchBar={setIsActiveSearchBar}
-        searchValue={searchValue}
-        setSearchValue={setSearchValue}
-      />
+      <div className="lg:hidden">
+        <ExploreTopBar
+          setIsActiveSearchBar={setIsActiveSearchBar}
+          searchValue={searchValue}
+          setSearchValue={setSearchValue}
+        />
+      </div>
       {isActiveSearchBar ? (
         <SearchSection searchValue={searchValue} />
       ) : (