feat: adopt motion-toolkit tagline and Framer Motion branding (#78)

* feat: adopt motion-toolkit tagline and Framer Motion branding

Make positioning consistent across the site, metadata, social cards and
docs.

- Canonical tagline "The motion toolkit for React & Next.js" in hero,
  title.default, OG/Twitter, footer, OG images, llms.txt index and README
- Refer to the library as Framer Motion (was "Motion") in user-facing copy
- Add SITE_TAGLINE plus Organization.slogan and SoftwareApplication
  slogan/alternateName to the site JSON-LD
- Point lib/seo.ts SITE at the env-driven SITE_URL

* style: bump hero headline size for longer tagline

* style: hero tagline on two lines

* style: revert hero base size to text-5xl

Author: starc007

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing
 
-beUI is a React, TypeScript, Motion and Tailwind CSS component library.
+beUI is a React, TypeScript, Framer Motion and Tailwind CSS component library.
 
 ## Before You Open a PR
 

README.md

@@ -7,7 +7,7 @@
 <h1 align="center">beUI v2</h1>
 
 <p align="center">
-  Motion components for React. Copy the source, own the code.
+  The motion toolkit for React & Next.js. Copy the source, own the code.
 </p>
 
 <p align="center">

app/api/og/route.tsx

@@ -17,7 +17,7 @@ export async function GET(request: Request) {
   const description =
     component?.description ??
     category?.description ??
-    "Production-ready motion components for React. Copy the source, own the code.";
+    "The motion toolkit for React & Next.js. Built on Framer Motion and Tailwind.";
   const label = component
     ? "Component"
     : category

app/layout.tsx

@@ -26,7 +26,7 @@ export const metadata: Metadata = {
   metadataBase: new URL(SITE_URL),
   applicationName: SITE_NAME,
   title: {
-    default: "beUI · Production-ready motion components for React & Next.js",
+    default: "beUI · The motion toolkit for React & Next.js",
     template: "%s · beUI",
   },
   description: SITE_DESCRIPTION,
@@ -44,7 +44,7 @@ export const metadata: Metadata = {
     },
   },
   openGraph: {
-    title: "beUI · Production-ready motion components for React & Next.js",
+    title: "beUI · The motion toolkit for React & Next.js",
     description: SITE_DESCRIPTION,
     type: "website",
     url: "/",
@@ -55,13 +55,13 @@ export const metadata: Metadata = {
         url: "/api/og",
         width: 1200,
         height: 630,
-        alt: "beUI · Production-ready motion components for React & Next.js",
+        alt: "beUI · The motion toolkit for React & Next.js",
       },
     ],
   },
   twitter: {
     card: "summary_large_image",
-    title: "beUI · Production-ready motion components for React & Next.js",
+    title: "beUI · The motion toolkit for React & Next.js",
     description: SITE_DESCRIPTION,
     images: ["/api/og"],
   },

app/opengraph-image.tsx

@@ -2,7 +2,7 @@ import { ImageResponse } from "next/og";
 import { OG_SIZE, ogImage } from "@/lib/og";
 
 export const runtime = "edge";
-export const alt = "beUI · Motion components for React";
+export const alt = "beUI · The motion toolkit for React & Next.js";
 export const size = OG_SIZE;
 export const contentType = "image/png";
 

app/page.tsx

@@ -41,7 +41,7 @@ export default function Home() {
 
       <section className="mx-auto max-w-2xl px-4 pb-24">
         <p className="mb-5 text-center text-sm text-muted-foreground">
-          Built on Motion. Distributed via shadcn.
+          Built on Framer Motion. Distributed via shadcn.
         </p>
         <InstallCommand />
       </section>

components/app/hero.tsx

@@ -7,7 +7,7 @@ import { GithubIcon } from "@/components/app/icons";
 import { PressLink } from "@/components/app/press-link";
 import { TextReveal } from "@/components/motion/text-reveal";
 
-const HEADLINE = ["Motion", "components", "for React."];
+const HEADLINE = ["The motion toolkit", "for React & Next.js"];
 const HEADLINE_WORDS = HEADLINE.reduce((n, l) => n + l.split(" ").length, 0);
 const STAGGER = 0.09;
 const START = 0.12;
@@ -49,9 +49,10 @@ export function Hero() {
         initial={{ opacity: 0, y: 10, filter: "blur(6px)" }}
         animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
         transition={{ duration: 0.5, ease: EASE_OUT, delay: subDelay }}
-        className="mx-auto mt-6 max-w-sm text-pretty text-base leading-7 text-muted-foreground"
+        className="mx-auto mt-6 max-w-md text-pretty text-base leading-7 text-muted-foreground"
       >
-        Copy-ready components with clean motion.
+        Copy-paste animated components built on Framer Motion and Tailwind. Free
+        and open source.
       </motion.p>
 
       <motion.div

components/app/site-footer.tsx

@@ -15,7 +15,7 @@ export function SiteFooter() {
           <div className="col-span-2 md:col-span-1">
             <p className="font-pixel text-lg font-medium text-foreground">beUI</p>
             <p className="mt-2 max-w-[220px] text-sm leading-6 text-muted-foreground">
-              Motion components for React. Copy-paste via shadcn registry.
+              The motion toolkit for React & Next.js. Copy-paste via shadcn registry.
             </p>
             <p className="mt-5 text-xs text-muted-foreground">
               Created by{" "}

lib/og.tsx

@@ -20,7 +20,7 @@ type OgOptions = {
 // Satori-safe styles only (flexbox; every multi-child node sets display:flex).
 export function ogImage({
   title = "beUI",
-  description = "Production-ready motion components for React. Copy the source, own the code.",
+  description = "The motion toolkit for React & Next.js. Built on Framer Motion and Tailwind.",
   label = "Motion components",
   command = "npx shadcn add @beui/...",
 }: OgOptions = {}): ReactElement {

lib/registry-server.ts

@@ -347,7 +347,7 @@ export async function buildShadcnRegistry(): Promise<ShadcnRegistry> {
 export async function buildIndex() {
   return {
     name: "beUI",
-    description: "Bespoke motion components for React.",
+    description: "The motion toolkit for React and Next.js.",
     site: SITE_URL,
     endpoints: {
       llms: `${SITE_URL}/llms.txt`,