feat: promote the beui pro mobile presale

components/app/chrome/native-strip.tsx

@@ -5,29 +5,34 @@ import { ArrowRight } from "lucide-react";
 import { useReducedMotion } from "motion/react";
 import { useId } from "react";
 import { ButtonLink } from "@/components/motion/button";
-import summary from "@/lib/native/summary.json";
 import styles from "./native-strip.module.css";
 
+// beUI Pro for mobile presale. The price is set by hand in the Pro repo; update
+// it here when the presale tier changes.
+const PRESALE_PRICE = "$99";
+const PRESALE_URL =
+  "https://pro.beui.dev/mobile?utm_source=beui&utm_medium=referral&utm_campaign=mobile_presale&utm_content=strip";
+
 /**
- * Site-wide announcement for beUI Native, above the header. Its height is
- * --announcement-h, which the page and sidebars add to the header offset.
- * The count includes variants, like the hero's.
+ * Site-wide announcement above the header: beUI Native is free, and points to
+ * the beUI Pro for mobile presale. Its height is --announcement-h, which the
+ * page and sidebars add to the header offset.
  */
 export function NativeStrip() {
   const waveGradientId = useId();
   const reduceMotion = useReducedMotion();
 
   return (
     <aside
-      aria-label="beUI Native announcement"
-      className="relative isolate flex h-(--announcement-h) items-center justify-center gap-x-2 border-b border-border bg-background px-3 text-xs text-muted-foreground sm:gap-x-3"
+      aria-label="beUI Pro for mobile presale"
+      className="relative isolate flex h-(--announcement-h) items-center justify-center gap-x-2 border-b border-transparent bg-primary px-3 text-sm text-primary-foreground/80 sm:gap-x-3"
     >
       <div aria-hidden className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
         <svg
           aria-hidden="true"
           viewBox="0 0 1440 80"
           preserveAspectRatio="none"
-          className={`${styles.wave} opacity-35 dark:opacity-10`}
+          className={`${styles.wave} opacity-15`}
         >
           <defs>
             <linearGradient id={waveGradientId} gradientUnits="userSpaceOnUse" x1="0" x2="720" spreadMethod="repeat">
@@ -45,20 +50,27 @@ export function NativeStrip() {
           aria-hidden="true"
           viewBox="0 0 1440 80"
           preserveAspectRatio="none"
-          className={`${styles.wave} ${styles.waveBack} opacity-20 dark:opacity-5`}
+          className={`${styles.wave} ${styles.waveBack} opacity-10`}
         >
           <path fill={`url(#${waveGradientId})`} d="M0 30 Q180 70 360 30 T720 30 Q900 70 1080 30 T1440 30 V80 H0Z" />
         </svg>
       </div>
       <p className="truncate">
-        <span className="text-foreground">beUI Native</span> is here
+        <a
+          href="/react-native"
+          className="text-primary-foreground underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-foreground"
+        >
+          beUI Native
+        </a>{" "}
+        is free
         <span className="hidden sm:inline">
           {" — "}
-          <strong className="font-medium text-foreground">
-            {summary.variants} components
+          <strong className="font-medium text-primary-foreground">
+            Pro mobile blocks and screens
           </strong>{" "}
-          for React Native, built for touch
+          are in presale from {PRESALE_PRICE}
         </span>
+        <span className="sm:hidden"> · Pro presale</span>
       </p>
       <BorderBeam
         active={!reduceMotion}
@@ -71,12 +83,12 @@ export function NativeStrip() {
         theme="auto"
       >
         <ButtonLink
-          href="/react-native"
+          href={PRESALE_URL}
           variant="outline"
           size="sm"
-          className="h-7 gap-1.5 rounded-full bg-background px-2.5 text-xs text-foreground hover:bg-background/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className="h-7 gap-1 rounded-full bg-background px-2.5 text-xs text-foreground hover:bg-background/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-foreground"
         >
-          Explore<span className="sr-only"> beUI Native</span>
+          Reserve<span className="sr-only"> beUI Pro for mobile</span>
           <ArrowRight aria-hidden className="size-3 shrink-0" />
         </ButtonLink>
       </BorderBeam>

components/app/chrome/right-sidebar.tsx

@@ -3,18 +3,20 @@
 import { usePathname } from "next/navigation";
 import { PlatformSwitch } from "@/components/app/docs/native/platform-switch";
 import { ProCard } from "@/components/app/docs/pro-card";
+import { ProMobileCard } from "@/components/app/docs/pro-mobile-card";
 import { SponsorCard } from "@/components/app/docs/sponsor-card";
-import { hasPlatformSwitch } from "@/lib/component-paths";
+import { hasPlatformSwitch, isNativePath } from "@/lib/component-paths";
 
 export function RightSidebar() {
   // Every component and category page offers the switch, so a reader who
   // chose React Native can always get back to the web docs.
-  const isComponentPage = hasPlatformSwitch(usePathname());
+  const pathname = usePathname();
+  const isComponentPage = hasPlatformSwitch(pathname);
 
   return (
     <>
       {isComponentPage ? <PlatformSwitch layout="block" className="mb-4" /> : null}
-      <ProCard />
+      {isNativePath(pathname) ? <ProMobileCard /> : <ProCard />}
       <SponsorCard />
     </>
   );

components/app/docs/pro-mobile-card.tsx

@@ -0,0 +1,55 @@
+import { ArrowUpRight } from "lucide-react";
+import { RainbowCta } from "@/components/app/rainbow-cta";
+
+// beUI Pro for mobile presale. The price is set by hand in the Pro repo; update
+// it here when the presale tier changes.
+const PRESALE_PRICE = "$99";
+
+/** Sidebar promo on React Native pages for the beUI Pro for mobile presale. */
+export function ProMobileCard() {
+  return (
+    <section
+      aria-labelledby="beui-pro-mobile-card-title"
+      className="rounded-3xl border border-border bg-background p-2"
+    >
+      <div className="flex h-24 items-center justify-center rounded-2xl bg-linear-to-br from-accent/30 via-accent/10 to-card">
+        <div className="flex items-center gap-2.5">
+          <span className="font-display text-3xl font-semibold tracking-tight text-foreground">
+            beUI
+          </span>
+          <span className="rounded-md border border-accent/40 bg-background/60 px-2 py-0.5 text-base font-medium text-foreground">
+            Pro Mobile
+          </span>
+        </div>
+      </div>
+      <div className="px-2 pt-3 pb-3">
+        <h2
+          id="beui-pro-mobile-card-title"
+          className="text-lg font-semibold leading-tight tracking-tight text-foreground"
+        >
+          Need full screens?
+        </h2>
+        <p className="mt-2 text-sm leading-5 text-muted-foreground">
+          Onboarding, paywall, profile, and checkout screens, animated blocks,
+          and app templates are coming to beUI Pro for mobile.
+        </p>
+        <p className="mt-3 flex flex-wrap items-center gap-x-2 text-xs leading-5 text-muted-foreground">
+          <span className="font-medium text-foreground">
+            Presale from {PRESALE_PRICE} lifetime
+          </span>
+        </p>
+      </div>
+      <RainbowCta
+        href="https://pro.beui.dev/mobile?utm_source=beui&utm_medium=referral&utm_campaign=mobile_presale&utm_content=native_sidebar"
+        target="_blank"
+        rel="noreferrer noopener"
+        shape="pill"
+        className="w-full"
+        innerClassName="py-2"
+      >
+        Reserve beUI Pro Mobile
+        <ArrowUpRight aria-hidden="true" className="size-3.5 shrink-0" />
+      </RainbowCta>
+    </section>
+  );
+}