chore: changing the position of callout

Author: macci001

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>
       )}
     </>

apps/docs/components/docs/nextui-pro-callout.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import {usePostHog} from "posthog-js/react";
+
+export const NextUIProCallout = () => {
+  const posthog = usePostHog();
+
+  const handleClick = () => {
+    posthog.capture("NextUI Pro Banner", {
+      action: "click",
+      category: "nextui-callout",
+    });
+  };
+
+  return (
+    <div className="fixed top-[calc(100vh-320px)] border border-default/60 hover:shadow-inner hover:border-default/80 rounded-md py-6 px-2 m-2 cursor-pointer">
+      <a
+        className="flex flex-col items-center"
+        href="https://nextui.pro/components?utm_source=nextui.org&utm_medium=callout"
+        rel="noopener noreferrer"
+        onClick={handleClick}
+      >
+        <div>
+          <p className="leading-none 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&nbsp;
+            </span>
+            <br />
+            with&nbsp; beautiful&nbsp;
+            <br />
+            components
+          </p>
+          <p className="text-center text-xs mt-2.5 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 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%] 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 transition-background px-4 py-2 text-xs font-medium text-foreground backdrop-blur-3xl">
+            Explore Components
+          </div>
+        </div>
+      </a>
+    </div>
+  );
+};

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-440px)] 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>
   );
 };

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",