update: blog and case-studies logic in mobile version

Author: dharamveergit

src/components/header/popovers/popover-nav-item-ecosystem.tsx

@@ -44,7 +44,7 @@ const PopOverNavItemEcosystem = ({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute  left-1/2 z-[35] w-[593px]  origin-top-right translate-x-[-40%]  pt-4       focus:outline-none 2xl:-translate-x-1/2">
+        <Menu.Items className="absolute  left-1/2 z-[35] w-[303px]  origin-top-right translate-x-[-40%]  pt-4       focus:outline-none 2xl:-translate-x-1/2">
           <div className="flex flex-col overflow-hidden rounded-3xl border bg-background2 shadow-lg">
             <div className="flex gap-2.5 p-5 ">
               <div className="flex w-full flex-1 flex-col">
@@ -89,53 +89,6 @@ const PopOverNavItemEcosystem = ({
                     );
                   })}
               </div>
-
-              <div className="flex w-full flex-1 flex-col border-l pl-2.5">
-                <a
-                  href="/case-studies"
-                  className="flex items-center gap-1.5 px-8 py-1.5 text-sm font-medium text-[#939393] transition-all hover:text-foreground dark:text-para"
-                >
-                  Case Studies{" "}
-                  <svg
-                    width="5"
-                    height="8"
-                    viewBox="0 0 5 8"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      clip-rule="evenodd"
-                      d="M0.181065 7.8262C0.0706915 7.71148 0.0103791 7.55763 0.0133823 7.39847C0.0163854 7.2393 0.0824583 7.08784 0.197081 6.97736L3.35061 4.00641L0.197081 1.03546C0.137546 0.981454 0.0894565 0.91605 0.0556622 0.843121C0.021868 0.770192 0.00305651 0.691221 0.000342236 0.610888C-0.00237204 0.530555 0.011066 0.450494 0.0398605 0.37545C0.0686551 0.300406 0.11222 0.231906 0.167974 0.174007C0.223728 0.116109 0.290537 0.0699911 0.364441 0.0383859C0.438345 0.00678061 0.517842 -0.00966837 0.59822 -0.00998595C0.678598 -0.0103035 0.758222 0.00551602 0.832374 0.0365347C0.906526 0.067554 0.973698 0.113142 1.02991 0.170598L4.63349 3.57398C4.69162 3.63 4.73785 3.69717 4.76943 3.77147C4.80101 3.84577 4.81729 3.92568 4.81729 4.00641C4.81729 4.08714 4.80101 4.16704 4.76943 4.24134C4.73785 4.31564 4.69162 4.38281 4.63349 4.43884L1.02991 7.84222C0.915188 7.95259 0.761339 8.01291 0.602172 8.0099C0.443004 8.0069 0.291541 7.94083 0.181065 7.8262Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </a>
-                {posts
-                  ?.filter(({ data }) =>
-                    data.categories.some(
-                      (category: string) =>
-                        category.toLowerCase() === "case studies",
-                    ),
-                  )
-                  ?.slice(0, 2)
-                  ?.map(({ data, slug }, i) => {
-                    return (
-                      <a
-                        key={i}
-                        href={`/case-studies/${slug}`}
-                        className="group  flex cursor-pointer flex-col gap-0.5 rounded-lg px-8  py-1.5 text-sm transition-all hover:bg-gray-50 dark:hover:bg-black/10    "
-                      >
-                        <p className="line-clamp-1 font-medium group-hover:text-foreground ">
-                          {data.title}
-                        </p>
-                        <p className="line-clamp-1 text-para">
-                          {data.description}
-                        </p>
-                      </a>
-                    );
-                  })}
-              </div>
             </div>
           </div>
         </Menu.Items>

src/pages/blog/[slug].astro

@@ -284,30 +284,6 @@ const { Content } = await post.render();
       </div>
     </div>
 
-    <!-- Related Articles Section -->
-    <div class="mb-10 mt-10 space-y-10 md:mb-0 md:hidden">
-      <div>
-        <p class="text-xs font-bold text-foreground">Related Articles</p>
-        <div class="mt-3 flex flex-col space-y-2">
-          {
-            relatedArticles
-              .sort(() => Math.random() - 0.5)
-              .slice(0, 4)
-              .map((post: BlogPost) => {
-                return (
-                  <a
-                    href={`/blog/${post.slug}`}
-                    class="line-clamp-2 cursor-pointer  text-xs text-darkText hover:text-primary hover:no-underline"
-                  >
-                    {post.data.title}
-                  </a>
-                );
-              })
-          }
-        </div>
-      </div>
-    </div>
-
     <!-- Console Banner Mobile -->
     <div class="mb-10 mt-10 md:hidden">
       <ConsoleBanner />

src/pages/case-studies/[slug].astro

@@ -8,7 +8,6 @@ import BlogLayout from "@/layouts/blog-layout.astro";
 import { proseClasses } from "@/lib/prose-classes";
 import { Image } from "astro:assets";
 import { getCollection, type CollectionEntry } from "astro:content";
-import clsx from "clsx";
 import { Facebook, Linkedin } from "lucide-react";
 
 type BlogPost = CollectionEntry<"Blog">;
@@ -230,79 +229,11 @@ const { Content } = await post.render();
       </div>
     </div>
 
-    <!-- Other Case Studies Section -->
-    <div class="mb-10 mt-10 space-y-10 md:mb-0 md:hidden">
-      <div>
-        <p class="text-xs font-bold text-foreground">Other Case Studies</p>
-        <div class="mt-3 flex flex-col space-y-2">
-          {
-            otherCaseStudies.slice(0, 4).map((caseStudy: BlogPost) => {
-              return (
-                <a
-                  href={`/case-studies/${caseStudy.slug}`}
-                  class="line-clamp-2 cursor-pointer  text-xs text-darkText hover:text-primary hover:no-underline"
-                >
-                  {caseStudy.data.title}
-                </a>
-              );
-            })
-          }
-        </div>
-      </div>
-    </div>
-
     <!-- Console Banner Mobile -->
     <div class="mb-10 mt-10 md:hidden">
       <ConsoleBanner />
     </div>
 
-    <!-- Mobile CTA Banner for Deploy on Console (after Other Case Studies) -->
-    <div class="mb-10 mt-10 md:hidden">
-      <section
-        class={clsx(
-          "flex flex-col items-center justify-around",
-          "bg-white dark:bg-background2",
-          "border-y",
-          "px-[30px] py-[80px] lg:py-[160px]",
-          "text-center"
-        )}
-      >
-        <h2
-          class={clsx(
-            "max-w-[1000px] font-instrument text-foreground",
-            "text-3xl md:text-5xl xl:text-6xl 2xl:text-[80px]",
-            "md:leading-snug"
-          )}
-        >
-          Experience the Supercloud.
-        </h2>
-
-        <div class="mt-6 md:mt-10">
-          <div class="hidden md:block">
-            <ButtonLink
-              link="https://console.akash.network/"
-              size="xl"
-              className="bg-primary text-white hover:bg-darkGray"
-              id="console-case-study"
-            >
-              Console Login
-            </ButtonLink>
-          </div>
-
-          <div class="block md:hidden">
-            <ButtonLink
-              link="https://console.akash.network/"
-              size="md"
-              className="bg-primary text-white hover:bg-darkGray"
-              id="console-case-study-mobile"
-            >
-              Console Login
-            </ButtonLink>
-          </div>
-        </div>
-      </section>
-    </div>
-
     <div class="hidden items-center justify-between py-10 md:flex">
       <p class="text-center text-base font-bold text-foreground">
         Share this Case Study

src/utils/hideCta.ts

@@ -3,6 +3,8 @@ export const hiddenPaths = [
   "/pricing/gpus",
   "/akash-accelerate-2024",
   "/gpus-on-demand",
+  "/case-studies/",
+  "/blog/",
 ];
 
 export const shouldHideCta = (pathname: string) => {