chore: v3 beta release banner

apps/docs/components/marketing/hero/hero.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import NextLink from "next/link";
-import {Button, Link, Chip, Snippet} from "@heroui/react";
+import {Button, Link, Snippet} from "@heroui/react";
 import {ArrowRightIcon} from "@heroui/shared-icons";
 import dynamic from "next/dynamic";
 import {usePostHog} from "posthog-js/react";
 
 import {FloatingComponents} from "./floating-components";
+import {V3ReleaseBanner} from "./v3-release-banner";
 
 import {GithubIcon} from "@/components/icons";
 import {title, subtitle} from "@/components/primitives";
@@ -19,35 +20,11 @@ const BgLooper = dynamic(() => import("./bg-looper").then((mod) => mod.BgLooper)
 export const Hero = () => {
   const posthog = usePostHog();
 
-  const handlePressAnnouncement = (name: string, url: string) => {
-    posthog.capture("NavbarItem", {
-      name,
-      action: "press",
-      category: "home - hero",
-      data: url,
-    });
-  };
-
   return (
     <section className="flex relative overflow-hidden lg:overflow-visible w-full flex-nowrap justify-between items-center h-[calc(100vh_-_64px)] 2xl:h-[calc(84vh_-_64px)]">
       <div className="relative z-20 flex flex-col w-full gap-6 lg:w-1/2 xl:mt-10">
-        <div className="flex justify-center w-full md:hidden">
-          <Chip
-            as={NextLink}
-            className="bg-default-200/50 border-1 hover:bg-default-200/80 border-default-400/50 cursor-pointer"
-            classNames={{
-              content: "font-semibold text-foreground text-xs ",
-            }}
-            color="primary"
-            href="/blog/v2.8.0"
-            variant="flat"
-            onClick={() => handlePressAnnouncement("HeroUI v2.8.0", "/blog/v2.8.0")}
-          >
-            HeroUI v2.8.0&nbsp;
-            <span aria-label="emoji" role="img">
-              🔥
-            </span>
-          </Chip>
+        <div className="w-full flex justify-center md:justify-start">
+          <V3ReleaseBanner />
         </div>
         <div className="leading-8 text-center md:leading-10 md:text-left">
           <div className="inline-block">

apps/docs/components/marketing/hero/v3-release-banner.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import {Chip} from "@heroui/react";
+import {Icon} from "@iconify/react/dist/offline";
+import arrowRightUpIcon from "@iconify/icons-solar/arrow-right-up-linear";
+
+const releaseInfo = {
+  title: "HeroUI v3.0.0 (Beta)",
+  href: "https://v3.heroui.com?ref=heroui-v2",
+  emoji: "🔥",
+};
+
+export function V3ReleaseBanner() {
+  return (
+    <Chip
+      as="a"
+      classNames={{
+        base: "relative transition-colors hover:bg-default-700/10  border-1 border-default-700/10 backdrop-blur-lg bg-transparent",
+        content: "relative flex items-center font-medium text-default-900 pr-[14px]",
+      }}
+      href={releaseInfo.href}
+      rel="noopener noreferrer"
+      target="_blank"
+      variant="flat"
+    >
+      <span className="mr-1 text-sm">{releaseInfo.emoji}</span>
+      <span
+        className="animate-text-gradient inline-flex bg-clip-text font-medium text-transparent bg-[linear-gradient(90deg,#0485f7_0%,#BA8BF6_50%,#0485f7_100%)] dark:bg-[linear-gradient(90deg,#0485f7_0%,#BA8BF6_50%,#0485f7_100%)]"
+        style={{
+          fontSize: "inherit",
+          backgroundSize: "200%",
+          backgroundClip: "text",
+          WebkitBackgroundClip: "text",
+          color: "transparent",
+        }}
+      >
+        {releaseInfo.title}
+      </span>
+      <Icon
+        className="absolute right-[2px] top-1/2 -translate-y-1/2 text-default-500/60 outline-solid outline-transparent transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
+        icon={arrowRightUpIcon}
+        width={10}
+      />
+    </Chip>
+  );
+}

apps/docs/components/navbar.tsx

@@ -185,7 +185,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             <Logo className="h-6" />
           </NextLink>
           {versionChip}
-          <Chip
+          {/* <Chip
             as={NextLink}
             className="hidden sm:flex bg-default-200/50 border-1 hover:bg-default-200/80 border-default-400/50 cursor-pointer"
             classNames={{
@@ -200,7 +200,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             <span aria-label="emoji" role="img">
               🔥
             </span>
-          </Chip>
+          </Chip> */}
         </NavbarBrand>
       </NavbarContent>