diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx index 8e86b20..3e994e5 100644 --- a/app/docs/[[...slug]]/page.tsx +++ b/app/docs/[[...slug]]/page.tsx @@ -7,6 +7,7 @@ import { DocsPageActions } from "@/components/docs-page-actions"; import { getMDXComponents } from "@/components/mdx"; import { PreviewCard } from "@/components/preview-card"; import { PageToc } from "@/components/page-toc"; +import { ShadcnLabsCard } from "@/components/shadcn-labs"; import { TracwellCard } from "@/components/tracwell-card"; import { JsonLd } from "@/components/seo/json-ld"; import { getPageMarkdown } from "@/lib/markdown"; @@ -107,7 +108,8 @@ export default async function DocsPage({ params }: DocsPageProps) {

On this page

-
+
+
diff --git a/components/landing/landing-page.tsx b/components/landing/landing-page.tsx index 2af766f..0f94734 100644 --- a/components/landing/landing-page.tsx +++ b/components/landing/landing-page.tsx @@ -1,11 +1,21 @@ "use client"; -import { ArrowRight, GithubLogo, Moon, Sun } from "@phosphor-icons/react"; +import { + ArrowRight, + ArrowUpRight, + GithubLogo, + Moon, + Sun, +} from "@phosphor-icons/react"; import Image from "next/image"; import Link from "next/link"; import { type ReactNode, useState } from "react"; import { EvilShader } from "@/components/landing/evil-shader"; import { ShowcaseCarousel } from "@/components/landing/showcase-carousel"; +import { + SHADCN_LABS_URL, + ShadcnLabsLogomark, +} from "@/components/shadcn-labs"; import { useAppTheme } from "@/hooks/use-app-theme"; import { siteConfig } from "@/lib/seo"; import { toggleTheme } from "@/lib/theme-preference"; @@ -71,6 +81,29 @@ function Navbar() { ); } +/** "Backed by" chip above the headline, in the same mono label voice as the showcase cards. */ +function BackedBy() { + return ( + + + Backed by + + + + + + ); +} + function ShaderBackdrop() { const theme = useAppTheme(); const [failed, setFailed] = useState(false); @@ -138,6 +171,7 @@ export function LandingPage({ categories, children }: LandingPageProps) {
+

Animated buttons, built with an{" "} diff --git a/components/shadcn-labs.tsx b/components/shadcn-labs.tsx new file mode 100644 index 0000000..e3b207c --- /dev/null +++ b/components/shadcn-labs.tsx @@ -0,0 +1,56 @@ +import { ArrowUpRightIcon } from "@phosphor-icons/react/dist/ssr"; + +// Shadcn Labs marks from https://www.shadcn-labs.com/brand, recolored to +// currentColor so they follow the active theme. + +/** + * UTM-tagged so the visit shows up under evilbuttons in their analytics. Link + * with rel="noopener" only: noreferrer would drop the referrer too. + */ +export const SHADCN_LABS_URL = + "https://www.shadcn-labs.com/?utm_source=evilbuttons&utm_medium=referral&utm_campaign=backed_by"; + +/** The pixel-brace mark on its own. */ +export function ShadcnLabsLogomark({ className }: { className?: string }) { + return ( + + + + + ); +} + +/** The mark followed by the "shadcn labs" wordmark. */ +export function ShadcnLabsLogotype({ className }: { className?: string }) { + return ( + + + + + + + + ); +} + +/** "Backed by Shadcn Labs" credit, the docs counterpart of TracwellCard. */ +export function ShadcnLabsCard() { + return ( + + + Backed by + + + + + ); +}