style: updated examples grid and CTA button (#1986)

Author: matthewlipski

docs/app/examples/layout.tsx

@@ -22,7 +22,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 
           page.name = (
             <span>
-              {exampleData.title}
+              <span className="mr-1">{exampleData.title}</span>
               {exampleData.isPro && <ProBadge />}
             </span>
           );

docs/components/CTAButton.tsx

@@ -4,13 +4,14 @@ import { ReactNode } from "react";
 export default function CTAButton(props: {
   href: string;
   hoverGlow?: boolean;
-  size?: "small" | "large";
+  size?: "default" | "small";
+  variant?: "default" | "colored";
   children: ReactNode;
 }) {
   return (
     <div className="not-prose button-glow-parent relative flex h-fit w-fit flex-wrap text-nowrap">
       <Link
-        className={`bg-fd-accent border-fd-border text-fd-foreground z-20 m-0 rounded-full border font-medium ${props.size === "small" ? "px-3 py-1.5 text-xs md:text-sm" : "px-4 py-2 text-base md:text-lg"}`}
+        className={`z-20 m-0 rounded-full font-medium ${props.variant === "colored" ? "text-fd-background dark:text-fd-foreground bg-indigo-600 hover:bg-indigo-500" : "bg-fd-accent border-fd-border text-fd-foreground border"} ${props.size === "small" ? "px-3 py-1.5 text-xs md:text-sm" : "px-4 py-2 text-base md:text-lg"}`}
         href={props.href}
         suppressHydrationWarning
       >

docs/components/Example.tsx

@@ -119,7 +119,7 @@ function ExampleProPrompt() {
           BlockNote Pro
         </p>
         <div className={"mt-8"}>
-          <CTAButton href={"/pricing"} size={"large"} hoverGlow={true}>
+          <CTAButton href={"/pricing"} variant={"colored"} hoverGlow={true}>
             Get BlockNote Pro
           </CTAButton>
         </div>

docs/components/ExampleCards.tsx

@@ -3,6 +3,7 @@ import { Heading } from "fumadocs-ui/components/heading";
 
 import { exampleGroupsData } from "./example/generated/exampleGroupsData.gen";
 import { Fragment } from "react";
+import { ProBadge } from "./ProBadge";
 
 export default function ExampleCards() {
   return (
@@ -14,10 +15,11 @@ export default function ExampleCards() {
           </Heading>
           <Cards
             key={exampleGroupData.exampleGroupName + "-cards"}
-            className="mb-8"
+            className="mb-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
           >
             {exampleGroupData.examplesData.map((exampleData) => (
               <Card
+                className="@max-lg:col-span-1"
                 key={
                   exampleGroupData.exampleGroupName +
                   "-" +
@@ -32,7 +34,12 @@ export default function ExampleCards() {
                     />
                   ) : undefined
                 }
-                title={exampleData.title}
+                title={
+                  <span>
+                    <span className="mr-1">{exampleData.title}</span>
+                    {exampleData.isPro && <ProBadge />}
+                  </span>
+                }
                 description={
                   exampleData.author ? `by ${exampleData.author}` : undefined
                 }

docs/components/ProBadge.tsx

@@ -1,6 +1,6 @@
 export function ProBadge() {
   return (
-    <span className="mx-1 inline-flex items-center text-nowrap rounded-full px-1.5 text-xs font-medium text-indigo-600 ring-1 ring-inset ring-indigo-600">
+    <span className="inline-flex h-4 items-center text-nowrap rounded-full px-1.5 text-xs font-medium text-indigo-600 ring-1 ring-inset ring-indigo-600">
       Pro
     </span>
   );