From 1eef6a3a3f33333711b48a315db4bb98fa8f0eba Mon Sep 17 00:00:00 2001
From: Maharshi Alpesh <maharshialpesh@gmail.com>
Date: Wed, 18 Dec 2024 21:22:14 +0530
Subject: [PATCH] chore: changing the position of callout

---
 apps/docs/app/docs/[[...slug]]/page.tsx       |  2 +
 .../components/docs/nextui-pro-callout.tsx    | 46 +++++++++++++++++++
 apps/docs/components/docs/toc.tsx             | 43 +----------------
 apps/docs/components/primitives.ts            |  1 -
 4 files changed, 49 insertions(+), 43 deletions(-)
 create mode 100644 apps/docs/components/docs/nextui-pro-callout.tsx

diff --git a/apps/docs/app/docs/[[...slug]]/page.tsx b/apps/docs/app/docs/[[...slug]]/page.tsx
index 0c37cbbb74..038547ce50 100644
--- a/apps/docs/app/docs/[[...slug]]/page.tsx
+++ b/apps/docs/app/docs/[[...slug]]/page.tsx
@@ -11,6 +11,7 @@ import {Route} from "@/libs/docs/page";
 import {GITHUB_URL, REPO_NAME} from "@/libs/github/constants";
 import {CONTENT_PATH, TAG} from "@/libs/docs/config";
 import {getHeadings} from "@/libs/docs/utils";
+import {NextUIProCallout} from "@/components/docs/nextui-pro-callout";
 
 interface DocPageProps {
   params: {
@@ -102,6 +103,7 @@ export default async function DocPage({params}: DocPageProps) {
       {headings && headings.length > 0 && (
         <div className="hidden z-10 xl:flex xl:col-span-2 mt-8 pl-0">
           <DocsToc headings={headings} />
+          <NextUIProCallout />
         </div>
       )}
     </>
diff --git a/apps/docs/components/docs/nextui-pro-callout.tsx b/apps/docs/components/docs/nextui-pro-callout.tsx
new file mode 100644
index 0000000000..1fdc8174b4
--- /dev/null
+++ b/apps/docs/components/docs/nextui-pro-callout.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import {usePostHog} from "posthog-js/react";
+import NextLink from "next/link";
+
+export const NextUIProCallout = () => {
+  const posthog = usePostHog();
+
+  const handleClick = () => {
+    posthog.capture("NextUI Pro Banner", {
+      action: "click",
+      category: "nextui-callout",
+    });
+  };
+
+  return (
+    <div className="fixed flex flex-col items-center top-[calc(100vh-340px)] border border-default/60 hover:border-default/90 rounded-md py-6 px-2 m-2 cursor-pointer">
+      <div>
+        <p className="leading-tight tracking-tight text-center text-xl font-semibold">
+          Ship&nbsp;
+          <span className="bg-clip-text text-transparent bg-gradient-to-b from-[#5EA2EF] to-[#0072F5]">
+            faster
+          </span>
+          <br />
+          with beautiful
+          <br />
+          components
+        </p>
+        <p className="text-center text-xs mt-2 px-6 font-medium text-default-500 leading-tight">
+          Discover 210+ stunning, responsive components crafted by the NextUI team.
+        </p>
+      </div>
+      <div className="mt-2 w-fit flex group items-center text-foreground hover:shadow-sm relative overflow-hidden rounded-full p-[2px]">
+        <span className="absolute inset-[-1000%] bg-[conic-gradient(from_90deg_at_50%_50%,#338EF7_0%,#F54180_50%,#338EF7_100%)]" />
+        <div className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-background transition-background p-2.5 text-xs font-medium hover:font-semibold text-foreground backdrop-blur-3xl">
+          Explore Components
+        </div>
+      </div>
+      <NextLink
+        className="absolute inset-0 z-[1]"
+        href="https://nextui.pro/components?utm_source=nextui.org&utm_medium=callout"
+        onClick={handleClick}
+      />
+    </div>
+  );
+};
diff --git a/apps/docs/components/docs/toc.tsx b/apps/docs/components/docs/toc.tsx
index bba1307b39..72e964a620 100644
--- a/apps/docs/components/docs/toc.tsx
+++ b/apps/docs/components/docs/toc.tsx
@@ -5,9 +5,6 @@ import {clsx} from "@nextui-org/shared-utils";
 import {Divider, Spacer} from "@nextui-org/react";
 import {ChevronCircleTopLinearIcon} from "@nextui-org/shared-icons";
 import scrollIntoView from "scroll-into-view-if-needed";
-import {usePostHog} from "posthog-js/react";
-
-import {title} from "../primitives";
 
 import {Heading} from "@/libs/docs/utils";
 import {useScrollSpy} from "@/hooks/use-scroll-spy";
@@ -67,20 +64,11 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
     };
   }, []);
 
-  const posthog = usePostHog();
-
-  const handleClick = () => {
-    posthog.capture("NextUI Pro Banner", {
-      action: "click",
-      category: "nextui-callout",
-    });
-  };
-
   return (
     <div
       ref={tocRef}
       className={clsx(
-        "fixed w-full max-w-[12rem] flex flex-col gap-4 text-left pb-28 h-[calc(100vh-121px)] scrollbar-hide overflow-y-scroll",
+        "fixed w-full max-w-[12rem] flex flex-col gap-4 text-left pb-28 h-[calc(100vh-460px)] scrollbar-hide overflow-y-scroll",
         isProBannerVisible ? "top-32" : "top-20",
       )}
       style={{
@@ -135,35 +123,6 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
           </a>
         </li>
       </ul>
-      <div className="w-full border border-default/60 hover:shadow-inner hover:border-default/80 rounded-md p-2 cursor-pointer">
-        <a
-          className="flex flex-col items-center"
-          href="https://nextui.pro?utm_source=nextui.org&utm_medium=callout"
-          rel="noopener noreferrer"
-          onClick={handleClick}
-        >
-          <div className="flex flex-col sm:flex-row">
-            <h1 className={title({size: "xs"})}>Ship&nbsp;</h1>
-            <h1 className={title({size: "xs", color: "blue"})}>faster&nbsp;</h1>
-          </div>
-          <div className="flex flex-col sm:flex-row">
-            <h1 className={title({size: "xs"})}>with&nbsp;</h1>
-            <h1 className={title({size: "xs"})}>beautiful&nbsp;</h1>
-          </div>
-          <div className="flex flex-col sm:flex-row">
-            <h1 className={title({size: "xs"})}>components</h1>
-          </div>
-          <p className="text-center text-xs m-2 font-medium text-default-500">
-            Discover 210+ stunning, responsive components crafted by the NextUI team.
-          </p>
-          <div className="flex group min-w-[120px] items-center font-semibold text-foreground shadow-sm gap-1.5 relative overflow-hidden rounded-full p-[1px]">
-            <span className="absolute inset-[-1000%] animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#F54180_0%,#338EF7_50%,#F54180_100%)]" />
-            <div className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-background group-hover:bg-background/70 transition-background px-3 py-1 text-sm font-medium text-foreground backdrop-blur-3xl">
-              Explore Components
-            </div>
-          </div>
-        </a>
-      </div>
     </div>
   );
 };
diff --git a/apps/docs/components/primitives.ts b/apps/docs/components/primitives.ts
index db6fc3303d..1cd71dbccc 100644
--- a/apps/docs/components/primitives.ts
+++ b/apps/docs/components/primitives.ts
@@ -17,7 +17,6 @@ export const title = tv({
       foreground: "dark:from-[#FFFFFF] dark:to-[#4B4B4B]",
     },
     size: {
-      xs: "text-lg lg:text-xl",
       sm: "text-3xl lg:text-4xl",
       md: "text-[clamp(1rem,10vw,2rem)] sm:text-[clamp(1rem,10vw,3rem)] lg:text-5xl",
       lg: "text-4xl lg:text-6xl",