Responsive and Explore button added

app/[locale]/(user)/components/datasets.module.scss

@@ -1,20 +1,24 @@
 .List {
   > * {
     min-height: 340px;
-    max-height: 340px;
-    @media screen and (max-width: 1120px) {
-      min-height: 340px;
-      max-height: 340px;
+    max-height: fit-content;
+    @media screen and (max-width: 1280px) {
+      min-height: 380px;
+      max-height: fit-content;
+    }
+    @media screen and (max-width: 1100px) {
+      min-height: 400px;
+      max-height: fit-content;
     }
   }
 }
 .UseCaseList {
   > * {
     min-height: 520px;
-    max-height: 520px;
+    max-height: fit-content;
     @media screen and (max-width: 1120px) {
-      min-height: 600px;
-      max-height: 600px;
+      min-height: 520px;
+      max-height: fit-content;
     }
   }
 }

app/[locale]/(user)/datasets/[datasetIdentifier]/components/SimilarDatasets/index.tsx

@@ -116,7 +116,7 @@ const SimilarDatasets: React.FC = () => {
                       <CarouselItem
                         key={item.id}
                         className={cn(
-                          'h-2/4 basis-full pl-4 sm:basis-1/2 lg:basis-1/3',
+                          'h-2/4 basis-full pl-4 sm:basis-1/2 lg:basis-1/2',
                           Styles.List
                         )}
                       >

app/[locale]/(user)/datasets/[datasetIdentifier]/components/SimilarDatasets/similarDatasets.module.scss

@@ -1,10 +1,10 @@
 .List {
   > * {
-    min-height: 380px;
-    max-height: 380px;
-    @media screen and (max-width: 1120px) {
-      min-height: 450px;
-      max-height: 450px;
+    min-height: 320px;
+    max-height: fit-content;
+    @media screen and (max-width: 1280px) {
+      min-height: 400px;
+      max-height: fit-content;
     }
   }
 }

app/[locale]/dashboard/components/main-nav.tsx

@@ -36,6 +36,7 @@ export function MainNav({ hideSearch = false }) {
   const pathname = usePathname();
   const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
+  const [isExploreOpen, setIsExploreOpen] = useState(false);
 
   const [isLoggingOut, setIsLoggingOut] = React.useState(false);
   const { data: session, status } = useSession();
@@ -94,11 +95,18 @@ export function MainNav({ hideSearch = false }) {
     return <LogginOutPage />;
   }
 
-  const Navigation = [
+  const exploreLinks = [
+    {
+      title: 'Datasets',
+      href: '/datasets?dataset_type=DATA',
+    },
     {
-      title: 'All Data',
-      href: '/datasets',
+      title: 'Prompts',
+      href: '/datasets?dataset_type=PROMPT',
     },
+  ];
+
+  const Navigation = [
     {
       title: 'Sectors',
       href: '/sectors',
@@ -134,7 +142,7 @@ export function MainNav({ hideSearch = false }) {
         <div className="flex items-center gap-1">
           <div className="lg:hidden">
             <Sidebar
-              data={Navigation}
+              data={[...exploreLinks, ...Navigation]}
               session={session}
               status={status}
               keycloakSessionLogOut={keycloakSessionLogOut}
@@ -201,6 +209,51 @@ export function MainNav({ hideSearch = false }) {
           )}
 
           <div className="flex items-center gap-5">
+            {/* Explore dropdown (desktop) */}
+            <div className="hidden lg:block">
+              <Popover open={isExploreOpen} onOpenChange={setIsExploreOpen}>
+                <Popover.Trigger>
+                  <button className="flex cursor-pointer items-center gap-1 border-none bg-transparent outline-none">
+                    <Text
+                      variant="headingMd"
+                      // as="span"
+                      className={`uppercase text-surfaceDefault ${
+                        pathname.startsWith(`/datasets`)
+                          ? 'text-[#84DCCF]'
+                          : 'text-surfaceDefault'
+                      }`}
+                      fontWeight="semibold"
+                    >
+                      Explore
+                    </Text>
+                    <Icons.chevronDown
+                      size={18}
+                      color={
+                        pathname.startsWith(`/datasets`) ? '#84DCCF' : '#fff'
+                      }
+                    />
+                  </button>
+                </Popover.Trigger>
+                <Popover.Content align="start">
+                  <div className="rounded-3 bg-surfaceDefault py-2 shadow-basicDeep">
+                    {exploreLinks.map((link) => (
+                      <Text variant="bodyMd" key={link.href}>
+                        <a
+                          href={link.href}
+                          // target="_blank"
+                          rel="noreferrer noopener"
+                          className="block w-full px-5 py-2 font-medium uppercase text-textSubdued transition-colors duration-100 ease-ease hover:bg-actionSecondaryNeutralHovered hover:text-textDefault"
+                        >
+                          {link.title}
+                        </a>
+                      </Text>
+                    ))}
+                  </div>
+                </Popover.Content>
+              </Popover>
+            </div>
+
+            {/* Regular navigation items */}
             {Navigation.map((item, index) => (
               <div className="hidden lg:block" key={index}>
                 <Link href={item.href}>

components/icons.tsx

@@ -16,6 +16,7 @@ import {
   IconChartLine,
   IconChartTreemap,
   IconCheck,
+  IconChevronDown,
   IconCircle5,
   IconCircleCheck,
   IconCircleCheckFilled,
@@ -127,4 +128,5 @@ export const Icons: {
   chartLine: IconChartLine,
   chartMapPolygon: IconTopologyStarRing3,
   chartMap: IconWorld,
+  chevronDown: IconChevronDown,
 };