From a32c46ccaba0dc4a6942dbd10b6e02b4b0fd74e6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 13 May 2026 18:23:41 +0000
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20SEO=20pass=20=E2=80=94=20keyword-ri?=
 =?UTF-8?q?ch=20metadata,=20sitemap,=20robots.txt,=20structured=20data,=20?=
 =?UTF-8?q?and=20enriched=20descriptions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Updated siteConfig with SEO-optimized tagline, description, and keywords array
- Enhanced homepage metadata with keywords, Twitter card, canonical URL, and JSON-LD structured data
- Added crawlable heading + paragraph section on homepage for search engine indexing
- Added robots.ts allowing all crawlers and pointing to sitemap
- Added sitemap.ts auto-generating entries from all docs/component pages
- Rewrote all 17 component MDX descriptions to be keyword-rich (React, gamification, shadcn/ui, Tailwind CSS)
- Updated docs index, components index, usage, and styles page descriptions for SEO
- Enhanced docs page generateMetadata with keywords, canonical URLs, and Twitter cards

Agent-Logs-Url: https://github.com/trophyso/ui/sessions/f34182c4-e711-464c-b7b0-de8fc27bdbbd

Co-authored-by: jasontlouro <33489988+jasontlouro@users.noreply.github.com>
---
 apps/www/app/(app)/(root)/page.tsx            | 49 +++++++++++++++++++
 apps/www/app/(app)/docs/[[...slug]]/page.tsx  | 16 ++++++
 apps/www/app/robots.ts                        | 15 ++++++
 apps/www/app/sitemap.ts                       | 25 ++++++++++
 .../docs/components/achievement-badge.mdx     |  2 +-
 .../docs/components/achievement-card.mdx      |  2 +-
 .../docs/components/achievement-grid.mdx      |  2 +-
 .../docs/components/achievement-list.mdx      |  2 +-
 .../docs/components/achievement-unlocked.mdx  |  2 +-
 apps/www/content/docs/components/index.mdx    |  2 +-
 .../docs/components/leaderboard-card.mdx      |  2 +-
 .../docs/components/leaderboard-podium.mdx    |  2 +-
 .../docs/components/leaderboard-rankings.mdx  |  2 +-
 .../content/docs/components/points-awards.mdx |  2 +-
 .../content/docs/components/points-badge.mdx  |  2 +-
 .../content/docs/components/points-boost.mdx  |  2 +-
 .../content/docs/components/points-chart.mdx  |  2 +-
 .../docs/components/points-levels-list.mdx    |  2 +-
 .../components/points-levels-timeline.mdx     |  2 +-
 .../content/docs/components/streak-badge.mdx  |  2 +-
 .../docs/components/streak-calendar.mdx       |  2 +-
 .../content/docs/components/streak-card.mdx   |  2 +-
 apps/www/content/docs/index.mdx               |  2 +-
 apps/www/content/docs/styles.mdx              |  2 +-
 apps/www/content/docs/usage.mdx               |  2 +-
 apps/www/lib/config.ts                        | 25 +++++++++-
 26 files changed, 149 insertions(+), 23 deletions(-)
 create mode 100644 apps/www/app/robots.ts
 create mode 100644 apps/www/app/sitemap.ts

diff --git a/apps/www/app/(app)/(root)/page.tsx b/apps/www/app/(app)/(root)/page.tsx
index 6ecbada..f08132c 100644
--- a/apps/www/app/(app)/(root)/page.tsx
+++ b/apps/www/app/(app)/(root)/page.tsx
@@ -20,6 +20,7 @@ export const metadata: Metadata = {
     default: `${siteConfig.tagline} | ${siteConfig.title}`,
   },
   description: siteConfig.description,
+  keywords: siteConfig.keywords,
   openGraph: {
     title: `${siteConfig.tagline} | ${siteConfig.title}`,
     description: siteConfig.description,
@@ -29,12 +30,42 @@ export const metadata: Metadata = {
     locale: "en_US",
     type: "website",
   },
+  twitter: {
+    card: "summary_large_image",
+    title: `${siteConfig.tagline} | ${siteConfig.title}`,
+    description: siteConfig.description,
+    images: [siteConfig.ogImage],
+  },
+  alternates: {
+    canonical: siteConfig.url,
+  },
   metadataBase: new URL(siteConfig.url),
 }
 
+const jsonLd = {
+  "@context": "https://schema.org",
+  "@type": "SoftwareApplication",
+  name: "Trophy UI",
+  applicationCategory: "DeveloperApplication",
+  operatingSystem: "Any",
+  description: siteConfig.description,
+  url: siteConfig.url,
+  offers: {
+    "@type": "Offer",
+    price: "0",
+    priceCurrency: "USD",
+  },
+  keywords:
+    "gamification UI components, React gamification, streak component, achievement component, leaderboard component, points component, shadcn gamification, Tailwind CSS gamification",
+}
+
 export default function IndexPage() {
   return (
     <div className="flex flex-1 flex-col">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
       <div className="relative overflow-hidden">
         <div
           className="pointer-events-none absolute inset-0"
@@ -68,6 +99,24 @@ export default function IndexPage() {
         </PageHeader>
         <HomeComponentMosaic />
       </div>
+      <section className="container-wrapper">
+        <div className="container mx-auto max-w-3xl px-4 py-12 text-center">
+          <h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">
+            Gamification UI Components for React
+          </h2>
+          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-base sm:text-lg">
+            Trophy UI gives you production-ready gamification components — streak
+            trackers, achievement badges, leaderboards, points displays, and
+            more. Built on{" "}
+            <Link href="https://ui.shadcn.com" className="underline">
+              shadcn/ui
+            </Link>{" "}
+            and Tailwind CSS, every component is open source, fully
+            customizable, and installs with a single CLI command into any React
+            or Next.js project.
+          </p>
+        </div>
+      </section>
     </div>
   )
 }
diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
index a580ded..fe93dde 100644
--- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
@@ -39,6 +39,17 @@ export async function generateMetadata(props: {
   return {
     title: doc.title,
     description: doc.description,
+    keywords: [
+      doc.title,
+      "gamification UI component",
+      "React component",
+      "shadcn UI",
+      "Tailwind CSS",
+      "Trophy UI",
+    ],
+    alternates: {
+      canonical: `${siteConfig.url}${page.url}`,
+    },
     openGraph: {
       title: doc.title,
       description: doc.description,
@@ -50,6 +61,11 @@ export async function generateMetadata(props: {
         },
       ],
     },
+    twitter: {
+      card: "summary_large_image",
+      title: doc.title,
+      description: doc.description,
+    },
   }
 }
 
diff --git a/apps/www/app/robots.ts b/apps/www/app/robots.ts
new file mode 100644
index 0000000..73026a3
--- /dev/null
+++ b/apps/www/app/robots.ts
@@ -0,0 +1,15 @@
+import type { MetadataRoute } from "next"
+
+import { siteConfig } from "@/lib/config"
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: "/",
+      },
+    ],
+    sitemap: `${siteConfig.url}/sitemap.xml`,
+  }
+}
diff --git a/apps/www/app/sitemap.ts b/apps/www/app/sitemap.ts
new file mode 100644
index 0000000..17c4c2c
--- /dev/null
+++ b/apps/www/app/sitemap.ts
@@ -0,0 +1,25 @@
+import type { MetadataRoute } from "next"
+
+import { siteConfig } from "@/lib/config"
+import { source } from "@/lib/source"
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const pages = source.getPages()
+
+  const docEntries: MetadataRoute.Sitemap = pages.map((page) => ({
+    url: `${siteConfig.url}${page.url}`,
+    lastModified: new Date(),
+    changeFrequency: "weekly",
+    priority: page.url.includes("/components/") ? 0.9 : 0.7,
+  }))
+
+  return [
+    {
+      url: siteConfig.url,
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 1.0,
+    },
+    ...docEntries,
+  ]
+}
diff --git a/apps/www/content/docs/components/achievement-badge.mdx b/apps/www/content/docs/components/achievement-badge.mdx
index 2f8cbe9..b62001d 100644
--- a/apps/www/content/docs/components/achievement-badge.mdx
+++ b/apps/www/content/docs/components/achievement-badge.mdx
@@ -1,6 +1,6 @@
 ---
 title: Achievement Badge
-description: A single achievement card with locked states, progress rings, rarity labels, and click handling.
+description: A React achievement badge component for gamification UIs. Show unlocked and locked states, progress rings, rarity labels, and click handling. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="achievement-badge" />
diff --git a/apps/www/content/docs/components/achievement-card.mdx b/apps/www/content/docs/components/achievement-card.mdx
index 930af7b..64eaf5d 100644
--- a/apps/www/content/docs/components/achievement-card.mdx
+++ b/apps/www/content/docs/components/achievement-card.mdx
@@ -1,6 +1,6 @@
 ---
 title: Achievement Card
-description: A composed achievement overview card with totals, featured badges, and an achievements list.
+description: A React achievement card component for gamification UIs. Display achievement totals, featured badges, and a scrollable achievements list. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="achievement-card" />
diff --git a/apps/www/content/docs/components/achievement-grid.mdx b/apps/www/content/docs/components/achievement-grid.mdx
index 8cfae3a..81edc2c 100644
--- a/apps/www/content/docs/components/achievement-grid.mdx
+++ b/apps/www/content/docs/components/achievement-grid.mdx
@@ -1,6 +1,6 @@
 ---
 title: Achievement Grid
-description: A responsive grid layout for displaying collections of achievements using the reusable achievement badge component.
+description: A React achievement grid component for gamification UIs. Responsive grid layout for displaying collections of achievement badges with progress and rarity. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="achievement-grid" />
diff --git a/apps/www/content/docs/components/achievement-list.mdx b/apps/www/content/docs/components/achievement-list.mdx
index 981abc9..2c88fe7 100644
--- a/apps/www/content/docs/components/achievement-list.mdx
+++ b/apps/www/content/docs/components/achievement-list.mdx
@@ -1,6 +1,6 @@
 ---
 title: Achievement List
-description: A vertical list layout for achievements with badge, description, and optional progress indicator.
+description: A React achievement list component for gamification UIs. Vertical list layout with badge icons, descriptions, and optional progress indicators. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="achievement-list" />
diff --git a/apps/www/content/docs/components/achievement-unlocked.mdx b/apps/www/content/docs/components/achievement-unlocked.mdx
index 5f42928..4ea415a 100644
--- a/apps/www/content/docs/components/achievement-unlocked.mdx
+++ b/apps/www/content/docs/components/achievement-unlocked.mdx
@@ -1,6 +1,6 @@
 ---
 title: Achievement Unlocked
-description: A celebratory modal dialog for announcing newly unlocked achievements with optional sharing.
+description: A React achievement unlocked dialog component for gamification UIs. Celebratory modal announcing newly earned achievements with optional sharing. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="achievement-unlocked" />
diff --git a/apps/www/content/docs/components/index.mdx b/apps/www/content/docs/components/index.mdx
index 2e91a31..0c6b15d 100644
--- a/apps/www/content/docs/components/index.mdx
+++ b/apps/www/content/docs/components/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Components
-description: Explore all components available in the UI library.
+description: "Browse all Trophy UI gamification components for React — streaks, achievements, leaderboards, points, and more. Open-source, customizable, and built on shadcn/ui and Tailwind CSS."
 ---
 
 - [Achievement Badge](/docs/components/achievement-badge)
diff --git a/apps/www/content/docs/components/leaderboard-card.mdx b/apps/www/content/docs/components/leaderboard-card.mdx
index 03bb72c..dafaea9 100644
--- a/apps/www/content/docs/components/leaderboard-card.mdx
+++ b/apps/www/content/docs/components/leaderboard-card.mdx
@@ -1,6 +1,6 @@
 ---
 title: Leaderboard Card
-description: A composed leaderboard view with title, date range, podium, and rankings.
+description: A React leaderboard card component for gamification UIs. Composed leaderboard view with title, date range, podium, and full rankings table. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="leaderboard-card" />
diff --git a/apps/www/content/docs/components/leaderboard-podium.mdx b/apps/www/content/docs/components/leaderboard-podium.mdx
index 9fef32b..12f0332 100644
--- a/apps/www/content/docs/components/leaderboard-podium.mdx
+++ b/apps/www/content/docs/components/leaderboard-podium.mdx
@@ -1,6 +1,6 @@
 ---
 title: Leaderboard Podium
-description: A visual podium display for the top 3 ranked users with crowns and avatars.
+description: A React leaderboard podium component for gamification UIs. Visual top-3 podium display with crowns and user avatars. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="leaderboard-podium" />
diff --git a/apps/www/content/docs/components/leaderboard-rankings.mdx b/apps/www/content/docs/components/leaderboard-rankings.mdx
index 8cedb4a..089d64b 100644
--- a/apps/www/content/docs/components/leaderboard-rankings.mdx
+++ b/apps/www/content/docs/components/leaderboard-rankings.mdx
@@ -1,6 +1,6 @@
 ---
 title: Leaderboard Rankings
-description: A leaderboard rankings list with rank, avatar, userName, optional byline, value, and crown highlights for the top 3.
+description: A React leaderboard rankings component for gamification UIs. Ranked list with avatars, scores, optional bylines, and crown highlights for top players. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="leaderboard-rankings" />
diff --git a/apps/www/content/docs/components/points-awards.mdx b/apps/www/content/docs/components/points-awards.mdx
index 1eecba3..4984f89 100644
--- a/apps/www/content/docs/components/points-awards.mdx
+++ b/apps/www/content/docs/components/points-awards.mdx
@@ -1,6 +1,6 @@
 ---
 title: Points Awards
-description: A points activity feed with date, totals, and dynamic trigger types
+description: A React points awards feed component for gamification UIs. Display a points activity timeline with dates, totals, and dynamic trigger types. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="points-awards" />
diff --git a/apps/www/content/docs/components/points-badge.mdx b/apps/www/content/docs/components/points-badge.mdx
index a787404..ab37826 100644
--- a/apps/www/content/docs/components/points-badge.mdx
+++ b/apps/www/content/docs/components/points-badge.mdx
@@ -1,6 +1,6 @@
 ---
 title: Points Badge
-description: A compact component for displaying user point totals.
+description: A React points badge component for gamification UIs. Compact display of user point totals with custom icons and formatting. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="points-badge" />
diff --git a/apps/www/content/docs/components/points-boost.mdx b/apps/www/content/docs/components/points-boost.mdx
index a85ac3d..2d3ab62 100644
--- a/apps/www/content/docs/components/points-boost.mdx
+++ b/apps/www/content/docs/components/points-boost.mdx
@@ -1,6 +1,6 @@
 ---
 title: Points Boost
-description: A promotional callout for points multipliers with optional countdown timer.
+description: A React points boost component for gamification UIs. Promotional callout for points multipliers with optional countdown timer. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="points-boost" />
diff --git a/apps/www/content/docs/components/points-chart.mdx b/apps/www/content/docs/components/points-chart.mdx
index 9783651..b7f6a08 100644
--- a/apps/www/content/docs/components/points-chart.mdx
+++ b/apps/www/content/docs/components/points-chart.mdx
@@ -1,6 +1,6 @@
 ---
 title: Points Chart
-description: A line chart component for displaying points trends over time.
+description: A React points chart component for gamification UIs. Line chart for visualizing points trends and scoring history over time. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="points-chart" />
diff --git a/apps/www/content/docs/components/points-levels-list.mdx b/apps/www/content/docs/components/points-levels-list.mdx
index d9df420..c8db2de 100644
--- a/apps/www/content/docs/components/points-levels-list.mdx
+++ b/apps/www/content/docs/components/points-levels-list.mdx
@@ -1,6 +1,6 @@
 ---
 title: Points Levels List
-description: A compact points levels table with optional current-level label and progress header.
+description: A React points levels list component for gamification UIs. Compact leveling table with current-level indicator and progress header. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="points-levels-list" />
diff --git a/apps/www/content/docs/components/points-levels-timeline.mdx b/apps/www/content/docs/components/points-levels-timeline.mdx
index 645f6a4..1110fb1 100644
--- a/apps/www/content/docs/components/points-levels-timeline.mdx
+++ b/apps/www/content/docs/components/points-levels-timeline.mdx
@@ -1,6 +1,6 @@
 ---
 title: Points Levels Timeline
-description: A vertical levels timeline with optional sub-level details and progress tracking.
+description: A React points levels timeline component for gamification UIs. Vertical leveling timeline with sub-level details and progress tracking. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="points-levels-timeline" />
diff --git a/apps/www/content/docs/components/streak-badge.mdx b/apps/www/content/docs/components/streak-badge.mdx
index fd1ea58..88bfdd1 100644
--- a/apps/www/content/docs/components/streak-badge.mdx
+++ b/apps/www/content/docs/components/streak-badge.mdx
@@ -1,6 +1,6 @@
 ---
 title: Streak Badge
-description: A compact badge displaying the current streak count with customizable styles.
+description: A React streak badge component for gamification UIs. Display daily, weekly, or monthly streak counts with customizable sizes and icons. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="streak-badge" />
diff --git a/apps/www/content/docs/components/streak-calendar.mdx b/apps/www/content/docs/components/streak-calendar.mdx
index efd8ef0..b9712ba 100644
--- a/apps/www/content/docs/components/streak-calendar.mdx
+++ b/apps/www/content/docs/components/streak-calendar.mdx
@@ -1,6 +1,6 @@
 ---
 title: Streak Calendar
-description: A streak calendar with week, month, and git-style history views.
+description: A React streak calendar component for gamification UIs. Visualize user activity streaks with week, month, and GitHub-style contribution history views. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="streak-calendar" />
diff --git a/apps/www/content/docs/components/streak-card.mdx b/apps/www/content/docs/components/streak-card.mdx
index 6a2b2b1..7069bf5 100644
--- a/apps/www/content/docs/components/streak-card.mdx
+++ b/apps/www/content/docs/components/streak-card.mdx
@@ -1,6 +1,6 @@
 ---
 title: Streak Card
-description: A composed streak summary card built from streak calendar and metrics.
+description: A React streak card component for gamification UIs. Combines a streak calendar, metrics, and summary into one composable card. Built on shadcn/ui and Tailwind CSS.
 ---
 
 <ComponentPreview name="streak-card" />
diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx
index ed18a11..c17bcfb 100644
--- a/apps/www/content/docs/index.mdx
+++ b/apps/www/content/docs/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Introduction
-description: Trophy UI - Gamification components for shadcn/ui
+description: "Trophy UI — open-source gamification UI components for React. Pre-built streak trackers, achievement badges, leaderboards, and points displays built on shadcn/ui and Tailwind CSS."
 ---
 
 Trophy UI is a component library built on top of [shadcn/ui](https://ui.shadcn.com) that helps you build gamification experiences faster. It provides pre-built components for streaks, achievements, leaderboards, points, and more.
diff --git a/apps/www/content/docs/styles.mdx b/apps/www/content/docs/styles.mdx
index ce3b1a7..d7de61f 100644
--- a/apps/www/content/docs/styles.mdx
+++ b/apps/www/content/docs/styles.mdx
@@ -1,6 +1,6 @@
 ---
 title: Styles
-description: Token and theming standards for keeping Trophy UI unopinionated.
+description: "Theming and design token standards for Trophy UI gamification components. Customize colors, typography, and spacing to match your design system."
 ---
 
 Trophy UI components are themeable and unopinionated by default. Component styles are built on semantic tokens, not fixed palette classes, so they remain portable across customer design systems.
diff --git a/apps/www/content/docs/usage.mdx b/apps/www/content/docs/usage.mdx
index 47c68ad..6e27c94 100644
--- a/apps/www/content/docs/usage.mdx
+++ b/apps/www/content/docs/usage.mdx
@@ -1,6 +1,6 @@
 ---
 title: Usage
-description: How to use Trophy UI components in your application.
+description: "How to install and use Trophy UI gamification components in your React or Next.js application with shadcn/ui and Tailwind CSS."
 ---
 
 Once a Trophy UI component is installed, you can import and use it like any other React component. Files are added into your project (the same [open-code](https://ui.shadcn.com/docs) model as shadcn/ui), so you can open them, adjust markup, and align styles with your design system.
diff --git a/apps/www/lib/config.ts b/apps/www/lib/config.ts
index a643a03..7c560ed 100644
--- a/apps/www/lib/config.ts
+++ b/apps/www/lib/config.ts
@@ -11,9 +11,30 @@ export const siteConfig = {
   url: siteOrigin(),
   ogImage: `${siteOrigin()}/og.jpg`,
   title: "Trophy UI",
-  tagline: "Open Source gamification components",
+  tagline: "Open-source gamification UI components for React",
   description:
-    "A collection of Open Source gamification components that you can customize, extend, and build on.",
+    "Trophy UI is an open-source library of gamification UI components built on shadcn/ui and Tailwind CSS. Drop-in React components for streaks, achievements, leaderboards, points, and more — ready to copy and customize.",
+  keywords: [
+    "gamification UI components",
+    "gamification React components",
+    "streak UI component",
+    "achievement UI component",
+    "leaderboard UI component",
+    "points UI component",
+    "gamification design system",
+    "React gamification library",
+    "shadcn gamification",
+    "Tailwind CSS gamification",
+    "user engagement components",
+    "open source gamification",
+    "gamification toolkit",
+    "streak tracker React",
+    "leaderboard React component",
+    "achievement badge React",
+    "points system UI",
+    "gamification UX",
+    "Trophy UI",
+  ],
   links: {
     github: "https://github.com/trophyso/ui",
   },

From 91ef5299f93f4070729ca94878bf737da428cbbc Mon Sep 17 00:00:00 2001
From: Jason Louro <jasontlouro@gmail.com>
Date: Wed, 13 May 2026 19:47:49 +0100
Subject: [PATCH 2/8] beef up SEO + gamification UI kit by trophy

---
 apps/www/app/(app)/(root)/page.tsx | 148 +++++++++++++++++++++++++++--
 apps/www/content/docs/index.mdx    |   2 +-
 apps/www/lib/config.ts             |   7 +-
 apps/www/styles/globals.css        |  15 +++
 4 files changed, 158 insertions(+), 14 deletions(-)

diff --git a/apps/www/app/(app)/(root)/page.tsx b/apps/www/app/(app)/(root)/page.tsx
index f08132c..0e738f3 100644
--- a/apps/www/app/(app)/(root)/page.tsx
+++ b/apps/www/app/(app)/(root)/page.tsx
@@ -17,12 +17,12 @@ export const revalidate = false
 export const metadata: Metadata = {
   title: {
     template: `%s | ${siteConfig.title}`,
-    default: `${siteConfig.tagline} | ${siteConfig.title}`,
+    default: siteConfig.title,
   },
   description: siteConfig.description,
   keywords: siteConfig.keywords,
   openGraph: {
-    title: `${siteConfig.tagline} | ${siteConfig.title}`,
+    title: siteConfig.title,
     description: siteConfig.description,
     url: siteConfig.url,
     siteName: siteConfig.title,
@@ -32,7 +32,7 @@ export const metadata: Metadata = {
   },
   twitter: {
     card: "summary_large_image",
-    title: `${siteConfig.tagline} | ${siteConfig.title}`,
+    title: siteConfig.title,
     description: siteConfig.description,
     images: [siteConfig.ogImage],
   },
@@ -57,8 +57,70 @@ const jsonLd = {
   },
   keywords:
     "gamification UI components, React gamification, streak component, achievement component, leaderboard component, points component, shadcn gamification, Tailwind CSS gamification",
+  featureList: [
+    "Streak tracking components",
+    "Achievement badges and cards",
+    "Leaderboard rankings and podiums",
+    "Points displays and level systems",
+    "Built on shadcn/ui and Tailwind CSS",
+    "CLI installation with one command",
+    "Fully customizable and open source",
+  ],
+  softwareHelp: {
+    "@type": "CreativeWork",
+    url: `${siteConfig.url}/docs`,
+  },
+  author: {
+    "@type": "Organization",
+    name: "Trophy",
+    url: "https://trophy.so",
+  },
 }
 
+const categories = [
+  {
+    title: "Streak Components",
+    description:
+      "Keep users coming back with streak tracking UI. Display daily streaks, streak calendars, and streak badges that motivate consistent engagement.",
+    href: "/docs/components/streak-card",
+    components: ["Streak Card", "Streak Calendar", "Streak Badge"],
+  },
+  {
+    title: "Achievement Components",
+    description:
+      "Celebrate milestones with achievement badges, unlock animations, and achievement grids. Give users a sense of progress and accomplishment.",
+    href: "/docs/components/achievement-badge",
+    components: [
+      "Achievement Badge",
+      "Achievement Card",
+      "Achievement Grid",
+      "Achievement List",
+      "Achievement Unlocked",
+    ],
+  },
+  {
+    title: "Leaderboard Components",
+    description:
+      "Drive competition with leaderboard rankings, podium displays, and leaderboard cards. Show users where they stand among peers.",
+    href: "/docs/components/leaderboard-rankings",
+    components: ["Leaderboard Rankings", "Leaderboard Podium", "Leaderboard Card"],
+  },
+  {
+    title: "Points & Levels Components",
+    description:
+      "Reward actions with points badges, level timelines, points charts, and boost indicators. Build complete progression systems.",
+    href: "/docs/components/points-badge",
+    components: [
+      "Points Badge",
+      "Points Awards",
+      "Points Boost",
+      "Points Chart",
+      "Points Levels List",
+      "Points Levels Timeline",
+    ],
+  },
+]
+
 export default function IndexPage() {
   return (
     <div className="flex flex-1 flex-col">
@@ -78,10 +140,10 @@ export default function IndexPage() {
           <PageHeaderHeading className="max-w-4xl">
             <span className="font-montserrat flex items-baseline gap-2 sm:gap-3">
               <span className="leading-[0.95] font-bold tracking-[-0.03em]">
-                Trophy
+                Gamification UI Kit
               </span>
-              <span className="font-normal tracking-[-0.02em] opacity-90">
-                UI
+              <span className="animate-expand-in overflow-hidden whitespace-nowrap font-normal tracking-[-0.02em]">
+                by Trophy
               </span>
             </span>
           </PageHeaderHeading>
@@ -105,9 +167,9 @@ export default function IndexPage() {
             Gamification UI Components for React
           </h2>
           <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-base sm:text-lg">
-            Trophy UI gives you production-ready gamification components — streak
-            trackers, achievement badges, leaderboards, points displays, and
-            more. Built on{" "}
+            Trophy&apos;s Gamification UI Kit gives you production-ready
+            gamification components — streak trackers, achievement badges,
+            leaderboards, points displays, and more. Built on{" "}
             <Link href="https://ui.shadcn.com" className="underline">
               shadcn/ui
             </Link>{" "}
@@ -117,6 +179,74 @@ export default function IndexPage() {
           </p>
         </div>
       </section>
+      <section className="container-wrapper border-grid border-t">
+        <div className="container mx-auto max-w-5xl px-4 py-16">
+          <h2 className="text-center text-2xl font-semibold tracking-tight sm:text-3xl">
+            Everything You Need to Gamify Your App
+          </h2>
+          <p className="text-muted-foreground mx-auto mt-3 max-w-2xl text-center text-base sm:text-lg">
+            Four categories of components covering the most impactful
+            gamification patterns — all composable, accessible, and
+            theme-aware.
+          </p>
+          <div className="mt-12 grid gap-8 sm:grid-cols-2">
+            {categories.map((category) => (
+              <Link
+                key={category.title}
+                href={category.href}
+                className="border-border hover:border-foreground/20 group rounded-xl border p-6 transition-colors"
+              >
+                <h3 className="text-lg font-semibold tracking-tight">
+                  {category.title}
+                </h3>
+                <p className="text-muted-foreground mt-2 text-sm leading-relaxed">
+                  {category.description}
+                </p>
+                <div className="mt-4 flex flex-wrap gap-1.5">
+                  {category.components.map((component) => (
+                    <span
+                      key={component}
+                      className="bg-secondary text-secondary-foreground rounded-md px-2 py-0.5 text-xs"
+                    >
+                      {component}
+                    </span>
+                  ))}
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </section>
+      <section className="container-wrapper border-grid border-t">
+        <div className="container mx-auto max-w-3xl px-4 py-16 text-center">
+          <h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">
+            Built for Developers
+          </h2>
+          <div className="mt-8 grid gap-6 text-left sm:grid-cols-3">
+            <div>
+              <h3 className="font-semibold">One-Command Install</h3>
+              <p className="text-muted-foreground mt-1 text-sm">
+                Add any component to your project with a single CLI command.
+                No extra dependencies to manage.
+              </p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Fully Customizable</h3>
+              <p className="text-muted-foreground mt-1 text-sm">
+                Every component lives in your codebase. Tweak styles, layout,
+                and behavior to match your brand.
+              </p>
+            </div>
+            <div>
+              <h3 className="font-semibold">Open Source</h3>
+              <p className="text-muted-foreground mt-1 text-sm">
+                MIT licensed and community-driven. Use in personal projects or
+                production apps without restrictions.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
   )
 }
diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx
index c17bcfb..ef8023e 100644
--- a/apps/www/content/docs/index.mdx
+++ b/apps/www/content/docs/index.mdx
@@ -3,7 +3,7 @@ title: Introduction
 description: "Trophy UI — open-source gamification UI components for React. Pre-built streak trackers, achievement badges, leaderboards, and points displays built on shadcn/ui and Tailwind CSS."
 ---
 
-Trophy UI is a component library built on top of [shadcn/ui](https://ui.shadcn.com) that helps you build gamification experiences faster. It provides pre-built components for streaks, achievements, leaderboards, points, and more.
+Trophy's Gamification UI Kit is a component library built on top of [shadcn/ui](https://ui.shadcn.com) that helps you build gamification experiences faster. It provides pre-built components for streaks, achievements, leaderboards, points, and more.
 
 Components are available via the shadcn CLI:
 
diff --git a/apps/www/lib/config.ts b/apps/www/lib/config.ts
index 7c560ed..9852ddd 100644
--- a/apps/www/lib/config.ts
+++ b/apps/www/lib/config.ts
@@ -7,13 +7,12 @@ function siteOrigin(): string {
 }
 
 export const siteConfig = {
-  name: "Trophy UI",
+  name: "Gamification UI Kit by Trophy",
   url: siteOrigin(),
   ogImage: `${siteOrigin()}/og.jpg`,
-  title: "Trophy UI",
-  tagline: "Open-source gamification UI components for React",
+  title: "Gamification UI Kit by Trophy",
   description:
-    "Trophy UI is an open-source library of gamification UI components built on shadcn/ui and Tailwind CSS. Drop-in React components for streaks, achievements, leaderboards, points, and more — ready to copy and customize.",
+    "Trophy's Gamification UI Kit is an open-source library of gamification UI components built on shadcn/ui and Tailwind CSS. Drop-in React components for streaks, achievements, leaderboards, points, and more — ready to copy and customize.",
   keywords: [
     "gamification UI components",
     "gamification React components",
diff --git a/apps/www/styles/globals.css b/apps/www/styles/globals.css
index beebbf2..170dc85 100644
--- a/apps/www/styles/globals.css
+++ b/apps/www/styles/globals.css
@@ -1,6 +1,21 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
+@keyframes expand-in {
+  from {
+    max-width: 0;
+    opacity: 0;
+  }
+  to {
+    max-width: 8.5ch;
+    opacity: 0.9;
+  }
+}
+
+@utility animate-expand-in {
+  animation: expand-in 1.5s ease-in-out 0.5s both;
+}
+
 @custom-variant dark (&:is(.dark *));
 
 @custom-variant fixed (&:is(.layout-fixed *));

From dd5e1e025451f53c7373a5627ca23dc592f3b93a Mon Sep 17 00:00:00 2001
From: Charlie Hopkins-Brinicombe <charlie@trophy.so>
Date: Thu, 14 May 2026 19:55:39 +0100
Subject: [PATCH 3/8] Animation update

---
 apps/www/app/(app)/(root)/page.tsx |  2 +-
 apps/www/styles/globals.css        | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/www/app/(app)/(root)/page.tsx b/apps/www/app/(app)/(root)/page.tsx
index 0e738f3..4da75d8 100644
--- a/apps/www/app/(app)/(root)/page.tsx
+++ b/apps/www/app/(app)/(root)/page.tsx
@@ -182,7 +182,7 @@ export default function IndexPage() {
       <section className="container-wrapper border-grid border-t">
         <div className="container mx-auto max-w-5xl px-4 py-16">
           <h2 className="text-center text-2xl font-semibold tracking-tight sm:text-3xl">
-            Everything You Need to Gamify Your App
+            Everything You Need to Ship Gamification
           </h2>
           <p className="text-muted-foreground mx-auto mt-3 max-w-2xl text-center text-base sm:text-lg">
             Four categories of components covering the most impactful
diff --git a/apps/www/styles/globals.css b/apps/www/styles/globals.css
index 170dc85..1b3e863 100644
--- a/apps/www/styles/globals.css
+++ b/apps/www/styles/globals.css
@@ -6,6 +6,7 @@
     max-width: 0;
     opacity: 0;
   }
+
   to {
     max-width: 8.5ch;
     opacity: 0.9;
@@ -13,7 +14,7 @@
 }
 
 @utility animate-expand-in {
-  animation: expand-in 1.5s ease-in-out 0.5s both;
+  animation: expand-in 350ms ease-out 200ms both;
 }
 
 @custom-variant dark (&:is(.dark *));
@@ -385,16 +386,16 @@ pre code span {
       @apply !mt-0;
     }
 
-    &:first-child > h3:first-child {
+    &:first-child>h3:first-child {
       @apply !mt-0;
     }
 
-    > h3 {
+    >h3 {
       @apply !mt-16;
     }
 
-    > h3 + p {
+    >h3+p {
       @apply !mt-2;
     }
   }
-}
+}
\ No newline at end of file

From 9d7bf041caa7cc8724cddc838a6e8d58667e926b Mon Sep 17 00:00:00 2001
From: Charlie Hopkins-Brinicombe <charlie@trophy.so>
Date: Thu, 14 May 2026 23:20:25 +0100
Subject: [PATCH 4/8] Work on SEO

---
 apps/www/.source/source.config.mjs            | 12 ++++++--
 apps/www/app/(app)/(root)/page.tsx            | 11 ++-----
 apps/www/app/(app)/docs/[[...slug]]/page.tsx  | 27 ++++++++---------
 apps/www/app/(app)/layout.tsx                 |  7 +++++
 .../docs/components/achievement-badge.mdx     | 11 ++++++-
 .../docs/components/achievement-card.mdx      | 11 ++++++-
 .../docs/components/achievement-grid.mdx      | 11 ++++++-
 .../docs/components/achievement-list.mdx      | 11 ++++++-
 .../docs/components/achievement-unlocked.mdx  | 11 ++++++-
 apps/www/content/docs/components/index.mdx    | 11 ++++++-
 .../docs/components/leaderboard-card.mdx      | 11 ++++++-
 .../docs/components/leaderboard-podium.mdx    | 11 ++++++-
 .../docs/components/leaderboard-rankings.mdx  | 11 ++++++-
 .../content/docs/components/points-awards.mdx | 10 ++++++-
 .../content/docs/components/points-badge.mdx  | 11 ++++++-
 .../content/docs/components/points-boost.mdx  | 11 ++++++-
 .../content/docs/components/points-chart.mdx  | 11 ++++++-
 .../docs/components/points-levels-list.mdx    | 10 ++++++-
 .../components/points-levels-timeline.mdx     | 11 ++++++-
 .../content/docs/components/streak-badge.mdx  | 11 ++++++-
 .../docs/components/streak-calendar.mdx       | 12 +++++++-
 .../content/docs/components/streak-card.mdx   | 11 ++++++-
 apps/www/content/docs/index.mdx               |  9 +++++-
 apps/www/content/docs/styles.mdx              |  9 +++++-
 apps/www/content/docs/usage.mdx               |  9 +++++-
 apps/www/lib/config.ts                        |  7 +++++
 apps/www/lib/docs-metadata.ts                 | 29 +++++++++++++++++++
 apps/www/package.json                         |  3 +-
 apps/www/source.config.ts                     | 11 ++++++-
 pnpm-lock.yaml                                |  3 ++
 30 files changed, 288 insertions(+), 46 deletions(-)
 create mode 100644 apps/www/lib/docs-metadata.ts

diff --git a/apps/www/.source/source.config.mjs b/apps/www/.source/source.config.mjs
index 21c5284..0c9bb47 100644
--- a/apps/www/.source/source.config.mjs
+++ b/apps/www/.source/source.config.mjs
@@ -1,7 +1,15 @@
 // source.config.ts
-import { defineConfig, defineDocs } from "fumadocs-mdx/config";
+import { defineConfig, defineDocs, frontmatterSchema } from "fumadocs-mdx/config";
+import { z } from "zod";
+var docsPageSchema = frontmatterSchema.extend({
+  seoTitle: z.string().optional(),
+  keywords: z.array(z.string()).optional()
+});
 var docs = defineDocs({
-  dir: "content/docs"
+  dir: "content/docs",
+  docs: {
+    schema: docsPageSchema
+  }
 });
 var source_config_default = defineConfig({
   mdxOptions: {
diff --git a/apps/www/app/(app)/(root)/page.tsx b/apps/www/app/(app)/(root)/page.tsx
index 4da75d8..df102c5 100644
--- a/apps/www/app/(app)/(root)/page.tsx
+++ b/apps/www/app/(app)/(root)/page.tsx
@@ -50,20 +50,15 @@ const jsonLd = {
   operatingSystem: "Any",
   description: siteConfig.description,
   url: siteConfig.url,
-  offers: {
-    "@type": "Offer",
-    price: "0",
-    priceCurrency: "USD",
-  },
   keywords:
-    "gamification UI components, React gamification, streak component, achievement component, leaderboard component, points component, shadcn gamification, Tailwind CSS gamification",
+    "gamification UI kit, gamification component library, open source gamification UI, free gamification components, React gamification, Next.js gamification, shadcn gamification, shadcn registry, Tailwind gamification, streak component, achievement component, leaderboard component, points component",
   featureList: [
     "Streak tracking components",
     "Achievement badges and cards",
     "Leaderboard rankings and podiums",
     "Points displays and level systems",
-    "Built on shadcn/ui and Tailwind CSS",
-    "CLI installation with one command",
+    "Built on shadcn/ui and Tailwind CSS for React and Next.js",
+    "Install with the shadcn CLI from this open registry",
     "Fully customizable and open source",
   ],
   softwareHelp: {
diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
index fe93dde..f422d19 100644
--- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
@@ -5,6 +5,11 @@ import { findNeighbour } from "fumadocs-core/server"
 import { ChevronLeft, ChevronRight, CircleAlert, GitFork } from "lucide-react"
 
 import { siteConfig } from "@/lib/config"
+import {
+  resolveDocsMetaKeywords,
+  resolveDocsSeoTitle,
+  type TrophyDocsFrontmatter,
+} from "@/lib/docs-metadata"
 import { source } from "@/lib/source"
 import { absoluteUrl } from "@/lib/utils"
 import { DocsCopyPage } from "@/components/docs-copy-page"
@@ -30,40 +35,36 @@ export async function generateMetadata(props: {
     notFound()
   }
 
-  const doc = page.data
+  const doc = page.data as typeof page.data & TrophyDocsFrontmatter
 
   if (!doc.title || !doc.description) {
     notFound()
   }
 
+  const metaTitle = resolveDocsSeoTitle(doc)
+  const metaKeywords = resolveDocsMetaKeywords(doc)
+
   return {
-    title: doc.title,
+    title: metaTitle,
     description: doc.description,
-    keywords: [
-      doc.title,
-      "gamification UI component",
-      "React component",
-      "shadcn UI",
-      "Tailwind CSS",
-      "Trophy UI",
-    ],
+    keywords: metaKeywords,
     alternates: {
       canonical: `${siteConfig.url}${page.url}`,
     },
     openGraph: {
-      title: doc.title,
+      title: metaTitle,
       description: doc.description,
       type: "article",
       url: `${siteConfig.url}${page.url}`,
       images: [
         {
-          url: `/og?title=${encodeURIComponent(doc.title)}&description=${encodeURIComponent(doc.description)}`,
+          url: `/og?title=${encodeURIComponent(metaTitle)}&description=${encodeURIComponent(doc.description)}`,
         },
       ],
     },
     twitter: {
       card: "summary_large_image",
-      title: doc.title,
+      title: metaTitle,
       description: doc.description,
     },
   }
diff --git a/apps/www/app/(app)/layout.tsx b/apps/www/app/(app)/layout.tsx
index e7b67cf..633e90d 100644
--- a/apps/www/app/(app)/layout.tsx
+++ b/apps/www/app/(app)/layout.tsx
@@ -1,6 +1,13 @@
+import type { Metadata } from "next"
+
+import { siteConfig } from "@/lib/config"
 import { SiteFooter } from "@/components/site-footer"
 import { SiteHeader } from "@/components/site-header"
 
+export const metadata: Metadata = {
+  metadataBase: new URL(siteConfig.url),
+}
+
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="bg-background relative z-10 flex min-h-svh flex-col">
diff --git a/apps/www/content/docs/components/achievement-badge.mdx b/apps/www/content/docs/components/achievement-badge.mdx
index b62001d..6b4402b 100644
--- a/apps/www/content/docs/components/achievement-badge.mdx
+++ b/apps/www/content/docs/components/achievement-badge.mdx
@@ -1,8 +1,17 @@
 ---
 title: Achievement Badge
-description: A React achievement badge component for gamification UIs. Show unlocked and locked states, progress rings, rarity labels, and click handling. Built on shadcn/ui and Tailwind CSS.
+description: "Open source React achievement badge component with locked/unlocked states, progress rings and rarity support. Use for achievement UI design and collections. Built on shadcn/ui + Tailwind."
+seoTitle: "Achievement Badge — React achievement badge component | Trophy UI"
+keywords:
+  - react achievement component
+  - achievement badge component
+  - achievement UI design
+  - shadcn achievements
+  - gamification components
 ---
 
+The Achievement Badge is the atomic unit of achievement UI - a compact tile users recognize from games and productivity apps, with room for displaying user progress and rarity. Compose with [Achievement Card](/docs/components/achievement-card) and [Achievement Grid](/docs/components/achievement-grid) when you need to display achievement UI at scale.
+
 <ComponentPreview name="achievement-badge" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/achievement-card.mdx b/apps/www/content/docs/components/achievement-card.mdx
index 64eaf5d..b6a5b02 100644
--- a/apps/www/content/docs/components/achievement-card.mdx
+++ b/apps/www/content/docs/components/achievement-card.mdx
@@ -1,8 +1,17 @@
 ---
 title: Achievement Card
-description: A React achievement card component for gamification UIs. Display achievement totals, featured badges, and a scrollable achievements list. Built on shadcn/ui and Tailwind CSS.
+description: "React achievement card with totals, featured badges, and scrollable lists for profile and progress surfaces. Fits achievement UI examples in SaaS, consumer and community products. Open source, built on shadcn/ui + Tailwind."
+seoTitle: "Achievement Card — achievement UI examples in React | Trophy UI"
+keywords:
+  - achievement UI examples
+  - react achievement component
+  - gamification interface design
+  - shadcn gamification
+  - react gamification library
 ---
 
+The Achievement Card summarizes achievement UI for a user: headline stats, spotlighted badges, and room to browse more without leaving the card.
+
 <ComponentPreview name="achievement-card" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/achievement-grid.mdx b/apps/www/content/docs/components/achievement-grid.mdx
index 81edc2c..0c6a4ed 100644
--- a/apps/www/content/docs/components/achievement-grid.mdx
+++ b/apps/www/content/docs/components/achievement-grid.mdx
@@ -1,8 +1,17 @@
 ---
 title: Achievement Grid
-description: A React achievement grid component for gamification UIs. Responsive grid layout for displaying collections of achievement badges with progress and rarity. Built on shadcn/ui and Tailwind CSS.
+description: "Responsive React achievement grid for displaying collections of badges with progress and rarity across breakpoints. Ideal achievement UI design for galleries and showcases in consumer apps. Open source, built on shadcn/ui + Tailwind."
+seoTitle: "Achievement Grid — achievement badge component for React | Trophy UI"
+keywords:
+  - achievement badge component
+  - achievement UI design
+  - react gamification components
+  - gamification UI patterns
+  - tailwind gamification components
 ---
 
+Achievement Grid lays out many badges in a scannable achievement UI surface with balanced columns, spacing rhythm, and room for metadata like rarity or completion percent built-in as a first-class feature.
+
 <ComponentPreview name="achievement-grid" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/achievement-list.mdx b/apps/www/content/docs/components/achievement-list.mdx
index 2c88fe7..3b6c9e5 100644
--- a/apps/www/content/docs/components/achievement-list.mdx
+++ b/apps/www/content/docs/components/achievement-list.mdx
@@ -1,8 +1,17 @@
 ---
 title: Achievement List
-description: A React achievement list component for gamification UIs. Vertical list layout with badge icons, descriptions, and optional progress indicators. Built on shadcn/ui and Tailwind CSS.
+description: "Vertical React achievement list with icons, descriptions, and optional progress for dense achievement UI. Complements grids and cards in gamification dashboards. Open source, built on shadcn/ui + Tailwind."
+seoTitle: "Achievement List — React achievement component list | Trophy UI"
+keywords:
+  - react achievement component
+  - achievement UI examples
+  - gamification widgets
+  - react gamification
+  - shadcn ui gamification
 ---
 
+Use Achievement List for dense achievement UI layouts where each row can carry a title, supporting text, and progress so users understand what to do next.
+
 <ComponentPreview name="achievement-list" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/achievement-unlocked.mdx b/apps/www/content/docs/components/achievement-unlocked.mdx
index 4ea415a..8434100 100644
--- a/apps/www/content/docs/components/achievement-unlocked.mdx
+++ b/apps/www/content/docs/components/achievement-unlocked.mdx
@@ -1,8 +1,17 @@
 ---
 title: Achievement Unlocked
-description: A React achievement unlocked dialog component for gamification UIs. Celebratory modal announcing newly earned achievements with optional sharing. Built on shadcn/ui and Tailwind CSS.
+description: "Celebratory React dialog for newly unlocked achievements with headline, badge, and share actions. Use for unlock moments, level up animations and more. Built on shadcn/ui + Tailwind. Open source."
+seoTitle: "Achievement Unlocked — level up animation UI for React | Trophy UI"
+keywords:
+  - level up animation
+  - react achievement component
+  - achievement UI examples
+  - gamification frontend library
+  - shadcn gamification components
 ---
 
+Achievement Unlocked is a focused unlock moment surface to congratulate the user, reinforce rewards, and encourage further engagement through social sharing.
+
 <ComponentPreview name="achievement-unlocked" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/index.mdx b/apps/www/content/docs/components/index.mdx
index 0c6b15d..0981360 100644
--- a/apps/www/content/docs/components/index.mdx
+++ b/apps/www/content/docs/components/index.mdx
@@ -1,8 +1,17 @@
 ---
 title: Components
-description: "Browse all Trophy UI gamification components for React — streaks, achievements, leaderboards, points, and more. Open-source, customizable, and built on shadcn/ui and Tailwind CSS."
+description: "Browse the Trophy UI gamification component library with React widgets for streaks, achievements, leaderboards, and points. Free, open source. Install via shadcn registry."
+seoTitle: "Components — Gamification UI library for React | Trophy UI"
+keywords:
+  - gamification ui library
+  - gamification components
+  - react gamification components
+  - free gamification components
+  - gamification widgets
 ---
 
+Trophy UI ships gamification widgets as focused React building blocks like streak counters, achievement badges, leaderboard rankings, and points surfaces rather than a monolithic SDK. Each page documents one component you can add with the shadcn CLI, then customize like any other file in your repo.
+
 - [Achievement Badge](/docs/components/achievement-badge)
 - [Achievement Card](/docs/components/achievement-card)
 - [Achievement Grid](/docs/components/achievement-grid)
diff --git a/apps/www/content/docs/components/leaderboard-card.mdx b/apps/www/content/docs/components/leaderboard-card.mdx
index dafaea9..40126f2 100644
--- a/apps/www/content/docs/components/leaderboard-card.mdx
+++ b/apps/www/content/docs/components/leaderboard-card.mdx
@@ -1,8 +1,17 @@
 ---
 title: Leaderboard Card
-description: A React leaderboard card component for gamification UIs. Composed leaderboard view with title, date range, podium, and full rankings table. Built on shadcn/ui and Tailwind CSS.
+description: "React leaderboard component that composes title, date range, podium, and rankings—one card for competitive gamification UIs. Fits Next.js and React apps. Built on shadcn/ui + Tailwind. Open source."
+seoTitle: "Leaderboard Card — React leaderboard UI & shadcn leaderboard | Trophy UI"
+keywords:
+  - react leaderboard component
+  - leaderboard UI component
+  - leaderboard UI design
+  - shadcn leaderboard
+  - nextjs leaderboard
 ---
 
+Leaderboard Card is a composition of [Leaderboard Podium](/docs/components/leaderboard-podium) and [Leaderboard Rankings](/docs/components/leaderboard-rankings). Display top rankings as a podium with a table of all rankings below. Highlight the current user's ranking in the table easily with collapsible rankings.
+
 <ComponentPreview name="leaderboard-card" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/leaderboard-podium.mdx b/apps/www/content/docs/components/leaderboard-podium.mdx
index 12f0332..2249151 100644
--- a/apps/www/content/docs/components/leaderboard-podium.mdx
+++ b/apps/www/content/docs/components/leaderboard-podium.mdx
@@ -1,8 +1,17 @@
 ---
 title: Leaderboard Podium
-description: A React leaderboard podium component for gamification UIs. Visual top-3 podium display with crowns and user avatars. Built on shadcn/ui and Tailwind CSS.
+description: "Top-three React leaderboard podium with crowns, avatars, and ranks for competitive gamification. Leaderboard UI component for highlights and recap screens. Built on shadcn/ui + Tailwind. Open source."
+seoTitle: "Leaderboard Podium — leaderboard UI component | Trophy UI"
+keywords:
+  - leaderboard UI component
+  - leaderboard UI examples
+  - react leaderboard
+  - gamification widgets
+  - shadcn gamification components
 ---
 
+Pair with [Leaderboard Rankings](/docs/components/leaderboard-rankings) when you need both a hero podium for storytelling and a full table for detail. Ideal for displaying winners of historical leaderboards, after weekly ranking resets, or part of broader gamification UIs.
+
 <ComponentPreview name="leaderboard-podium" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/leaderboard-rankings.mdx b/apps/www/content/docs/components/leaderboard-rankings.mdx
index 089d64b..0722edb 100644
--- a/apps/www/content/docs/components/leaderboard-rankings.mdx
+++ b/apps/www/content/docs/components/leaderboard-rankings.mdx
@@ -1,8 +1,17 @@
 ---
 title: Leaderboard Rankings
-description: A React leaderboard rankings component for gamification UIs. Ranked list with avatars, scores, optional bylines, and crown highlights for top players. Built on shadcn/ui and Tailwind CSS.
+description: "React leaderboard rankings list—avatars, scores, bylines, and crown highlights for full tables. Open-source leaderboard UI for games, communities, and SaaS challenges. shadcn/ui + Tailwind."
+seoTitle: "Leaderboard Rankings — React leaderboard table & UI | Trophy UI"
+keywords:
+  - react leaderboard
+  - leaderboard component
+  - open source leaderboard react
+  - leaderboard UI examples
+  - react gamification components
 ---
 
+Dense and flexible React leaderboard component for displaying a full table of rankings with avatars, scores, bylines, and crown highlights for first through third place. Support for pagination built-in and highlighting the current user's ranking with collapisble rows.
+
 <ComponentPreview name="leaderboard-rankings" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/points-awards.mdx b/apps/www/content/docs/components/points-awards.mdx
index 4984f89..a140f99 100644
--- a/apps/www/content/docs/components/points-awards.mdx
+++ b/apps/www/content/docs/components/points-awards.mdx
@@ -1,8 +1,16 @@
 ---
 title: Points Awards
-description: A React points awards feed component for gamification UIs. Display a points activity timeline with dates, totals, and dynamic trigger types. Built on shadcn/ui and Tailwind CSS.
+description: "React points activity feed with dated events, totals, and trigger types for gamification timelines. Useful for XP and currency ledgers in dashboards. Built on shadcn/ui + Tailwind. Open source."
+seoTitle: "Points Awards — gamification points feed for React | Trophy UI"
+keywords:
+  - react gamification library
+  - gamification UI patterns
+  - gamification interface design
+  - react gamification components
 ---
 
+Points Awards surfaces what changed in a user’s balance: grants, spends, bonuses, and campaign events in a readable timeline. Use when gamification UI needs transparency where trust is earned by showing how points changed.
+
 <ComponentPreview name="points-awards" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/points-badge.mdx b/apps/www/content/docs/components/points-badge.mdx
index ab37826..eb405a0 100644
--- a/apps/www/content/docs/components/points-badge.mdx
+++ b/apps/www/content/docs/components/points-badge.mdx
@@ -1,8 +1,17 @@
 ---
 title: Points Badge
-description: A React points badge component for gamification UIs. Compact display of user point totals with custom icons and formatting. Built on shadcn/ui and Tailwind CSS.
+description: "Compact React points badge for totals and currency-style scores in gamification UIs. Fits XP-style displays alongside charts and lists. Built on shadcn/ui + Tailwind. Open source."
+seoTitle: "Points Badge — React XP bar companion & points UI | Trophy UI"
+keywords:
+  - xp bar component
+  - react xp bar
+  - gamification widgets
+  - react gamification components
+  - tailwind gamification
 ---
 
+The Points Badge is the lightweight readout for points and XP. Compose with [Points Chart](/docs/components/points-chart) or [Points Levels List](/docs/components/points-levels-list) when users need both a headline number and deeper progress bar gamification elsewhere in the layout.
+
 <ComponentPreview name="points-badge" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/points-boost.mdx b/apps/www/content/docs/components/points-boost.mdx
index 2d3ab62..c5323b3 100644
--- a/apps/www/content/docs/components/points-boost.mdx
+++ b/apps/www/content/docs/components/points-boost.mdx
@@ -1,8 +1,17 @@
 ---
 title: Points Boost
-description: A React points boost component for gamification UIs. Promotional callout for points multipliers with optional countdown timer. Built on shadcn/ui and Tailwind CSS.
+description: "React callout for points multipliers and limited-time boosts. Supports optional countdown for near-ending gamification campaigns. Built on shadcn/ui + Tailwind. Open source."
+seoTitle: "Points Boost — gamification multiplier UI for React | Trophy UI"
+keywords:
+  - gamification widgets
+  - gamification UI examples
+  - react gamification
+  - tailwind gamification components
+  - shadcn gamification
 ---
 
+Points Boost highlights time-bound incentives like double XP weekends, referral multipliers, or seasonal bonuses with optional countdown affordances. Drop it above leaderboards, checkout, or task lists where you want gamification UI to nudge action without changing underlying points logic.
+
 <ComponentPreview name="points-boost" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/points-chart.mdx b/apps/www/content/docs/components/points-chart.mdx
index b7f6a08..8fa4a51 100644
--- a/apps/www/content/docs/components/points-chart.mdx
+++ b/apps/www/content/docs/components/points-chart.mdx
@@ -1,8 +1,17 @@
 ---
 title: Points Chart
-description: A React points chart component for gamification UIs. Line chart for visualizing points trends and scoring history over time. Built on shadcn/ui and Tailwind CSS.
+description: "React chart for points over time. Displays trends, campaigns, and seasonality in gamification analytics views. Complements badges and levels. Built on Recharts + shadcn/ui + Tailwind. Open source."
+seoTitle: "Points Chart — progress and XP trends in React | Trophy UI"
+keywords:
+  - react xp chart
+  - xp chart design
+  - progress chart gamification
+  - gamification UI library
+  - react gamification library
 ---
 
+Points Chart answers how momentum changed: spikes after launches, steady grind weeks, or drops when engagement cools. Use on user dashboards and profiles alongside [Points Badge](/docs/components/points-badge) or [Points Levels List](/docs/components/points-levels-list) to keep macro trends and micro totals aligned.
+
 <ComponentPreview name="points-chart" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/points-levels-list.mdx b/apps/www/content/docs/components/points-levels-list.mdx
index c8db2de..42a55ef 100644
--- a/apps/www/content/docs/components/points-levels-list.mdx
+++ b/apps/www/content/docs/components/points-levels-list.mdx
@@ -1,8 +1,16 @@
 ---
 title: Points Levels List
-description: A React points levels list component for gamification UIs. Compact leveling table with current-level indicator and progress header. Built on shadcn/ui and Tailwind CSS.
+description: "React levels list with optional progress bar between tiers. Built on shadcn/ui + Tailwind. Open source."
+seoTitle: "Points Levels List — React level system & progress bar | Trophy UI"
+keywords:
+  - react level system
+  - progress bar gamification
+  - xp bar component
+  - react progress bar component
 ---
 
+Points Levels List is a vertical level system UI supporting current tier, next milestone, and optional progress bar for displaying progress between levels.
+
 <ComponentPreview name="points-levels-list" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/points-levels-timeline.mdx b/apps/www/content/docs/components/points-levels-timeline.mdx
index 1110fb1..d06d0cd 100644
--- a/apps/www/content/docs/components/points-levels-timeline.mdx
+++ b/apps/www/content/docs/components/points-levels-timeline.mdx
@@ -1,8 +1,17 @@
 ---
 title: Points Levels Timeline
-description: A React points levels timeline component for gamification UIs. Vertical leveling timeline with sub-level details and progress tracking. Built on shadcn/ui and Tailwind CSS.
+description: "Vertical React timeline for level progression. Supports sub-levels, thresholds, and level progress for gamification roadmaps. Complements Points Levels List. Built on shadcn/ui + Tailwind. Open source."
+seoTitle: "Points Levels Timeline — React level system timeline | Trophy UI"
+keywords:
+  - react level system
+  - xp bar design
+  - level design system
+  - react gamification components
+  - tailwind gamification
 ---
 
+Points Levels Timeline tells a leveling story top to bottom: which tiers users passed, current progress, and remaining XP to next level. Use for points systems where level progression is a key user outcome.
+
 <ComponentPreview name="points-levels-timeline" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/streak-badge.mdx b/apps/www/content/docs/components/streak-badge.mdx
index 88bfdd1..ba512eb 100644
--- a/apps/www/content/docs/components/streak-badge.mdx
+++ b/apps/www/content/docs/components/streak-badge.mdx
@@ -1,8 +1,17 @@
 ---
 title: Streak Badge
-description: A React streak badge component for gamification UIs. Display daily, weekly, or monthly streak counts with customizable sizes and icons. Built on shadcn/ui and Tailwind CSS.
+description: "React streak counter UI in a compact badge supporting daily, weekly, monthly or yearly streaks. Built on shadcn/ui + Tailwind. Open source."
+seoTitle: "Streak Badge — React streak component & streak counter | Trophy UI"
+keywords:
+  - react streak component
+  - streak counter component
+  - streak UI component
+  - streak UI design component
+  - habit tracking UI
 ---
 
+The Streak Badge is a small building block for streak UI in React apps. Display current streak length, optional flame or custom icons, and layout control for streak UI. Compose with [Streak Card](/docs/components/streak-card) or [Streak Calendar](/docs/components/streak-calendar) when you need to display streak UI at scale.
+
 <ComponentPreview name="streak-badge" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/streak-calendar.mdx b/apps/www/content/docs/components/streak-calendar.mdx
index b9712ba..0e3065f 100644
--- a/apps/www/content/docs/components/streak-calendar.mdx
+++ b/apps/www/content/docs/components/streak-calendar.mdx
@@ -1,8 +1,18 @@
 ---
 title: Streak Calendar
-description: A React streak calendar component for gamification UIs. Visualize user activity streaks with week, month, and GitHub-style contribution history views. Built on shadcn/ui and Tailwind CSS.
+description: "React streak calendar for gamification—week, month, and git-style grids to visualize consistency. Native support for streak freezes. Ideal streak UI design for habit tracking and personal progress. Built on shadcn/ui and Tailwind CSS. Open source."
+seoTitle: "Streak Calendar — streak UI design & habit tracking component | Trophy UI"
+keywords:
+  - streak UI design
+  - streak UI examples
+  - react streak component
+  - habit tracking UI
+  - habit tracking component
+  - streak freeze UI
 ---
 
+The Streak Calendar is a flexible UI component for displaying streak data. Display active days, weeks, and months with native support for streak freezes.
+
 <ComponentPreview name="streak-calendar" />
 
 ## Installation
diff --git a/apps/www/content/docs/components/streak-card.mdx b/apps/www/content/docs/components/streak-card.mdx
index 7069bf5..3ae5747 100644
--- a/apps/www/content/docs/components/streak-card.mdx
+++ b/apps/www/content/docs/components/streak-card.mdx
@@ -1,8 +1,17 @@
 ---
 title: Streak Card
-description: A React streak card component for gamification UIs. Combines a streak calendar, metrics, and summary into one composable card. Built on shadcn/ui and Tailwind CSS.
+description: "Full streak UI card for React. Daily streak display, longest streak record with optional section for streak rules. Built on shadcn/ui + Tailwind. Open source."
+seoTitle: "Streak Card — React streak UI & habit tracking component | Trophy UI"
+keywords:
+  - streak UI component
+  - react streak component
+  - streak UI examples
+  - streak record UI
+  - habit tracking UI
 ---
 
+The Streak Card is a full streak UI card for React composed of [Streak Calendar](/docs/components/streak-calendar) and [Streak Badge](/docs/components/streak-badge). Display daily streak, longest streak record, and optional section for streak rules. Ideal for fitness trackers, productivity apps, and other habit tracking UIs.
+
 <ComponentPreview name="streak-card" />
 
 ## Installation
diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx
index ef8023e..85eb450 100644
--- a/apps/www/content/docs/index.mdx
+++ b/apps/www/content/docs/index.mdx
@@ -1,6 +1,13 @@
 ---
 title: Introduction
-description: "Trophy UI — open-source gamification UI components for React. Pre-built streak trackers, achievement badges, leaderboards, and points displays built on shadcn/ui and Tailwind CSS."
+description: "Trophy UI is a free, open-source gamification UI kit for React and Next.js—copy-paste streak, achievement, leaderboard, and points components via the shadcn registry. Built on shadcn/ui and Tailwind CSS."
+seoTitle: "Introduction — Gamification UI kit & React component library | Trophy UI"
+keywords:
+  - gamification ui kit
+  - gamification component library
+  - react gamification library
+  - next js gamification
+  - shadcn gamification components
 ---
 
 Trophy's Gamification UI Kit is a component library built on top of [shadcn/ui](https://ui.shadcn.com) that helps you build gamification experiences faster. It provides pre-built components for streaks, achievements, leaderboards, points, and more.
diff --git a/apps/www/content/docs/styles.mdx b/apps/www/content/docs/styles.mdx
index d7de61f..3c963ee 100644
--- a/apps/www/content/docs/styles.mdx
+++ b/apps/www/content/docs/styles.mdx
@@ -1,6 +1,13 @@
 ---
 title: Styles
-description: "Theming and design token standards for Trophy UI gamification components. Customize colors, typography, and spacing to match your design system."
+description: "Tailwind-first design tokens and theming for Trophy UI—semantic colors, typography, and spacing so gamification components stay on-brand. Part of a Tailwind + shadcn gamification stack."
+seoTitle: "Styles — Tailwind gamification design tokens | Trophy UI"
+keywords:
+  - tailwind gamification
+  - tailwind gamification components
+  - gamification design system
+  - shadcn ui gamification
+  - gamification interface design
 ---
 
 Trophy UI components are themeable and unopinionated by default. Component styles are built on semantic tokens, not fixed palette classes, so they remain portable across customer design systems.
diff --git a/apps/www/content/docs/usage.mdx b/apps/www/content/docs/usage.mdx
index 6e27c94..38004d2 100644
--- a/apps/www/content/docs/usage.mdx
+++ b/apps/www/content/docs/usage.mdx
@@ -1,6 +1,13 @@
 ---
 title: Usage
-description: "How to install and use Trophy UI gamification components in your React or Next.js application with shadcn/ui and Tailwind CSS."
+description: "Install Trophy UI gamification components in React or Next.js with the shadcn CLI—open-code files, Tailwind v4, and client components you compose in App Router or SPA pages."
+seoTitle: "Usage — Next.js & React gamification components | Trophy UI"
+keywords:
+  - next js gamification
+  - nextjs leaderboard
+  - react gamification library
+  - shadcn registry gamification
+  - gamification npm package
 ---
 
 Once a Trophy UI component is installed, you can import and use it like any other React component. Files are added into your project (the same [open-code](https://ui.shadcn.com/docs) model as shadcn/ui), so you can open them, adjust markup, and align styles with your design system.
diff --git a/apps/www/lib/config.ts b/apps/www/lib/config.ts
index 9852ddd..b16c9d5 100644
--- a/apps/www/lib/config.ts
+++ b/apps/www/lib/config.ts
@@ -14,8 +14,11 @@ export const siteConfig = {
   description:
     "Trophy's Gamification UI Kit is an open-source library of gamification UI components built on shadcn/ui and Tailwind CSS. Drop-in React components for streaks, achievements, leaderboards, points, and more — ready to copy and customize.",
   keywords: [
+    "gamification UI kit",
     "gamification UI components",
+    "gamification component library",
     "gamification React components",
+    "Next.js gamification",
     "streak UI component",
     "achievement UI component",
     "leaderboard UI component",
@@ -23,9 +26,13 @@ export const siteConfig = {
     "gamification design system",
     "React gamification library",
     "shadcn gamification",
+    "shadcn registry",
     "Tailwind CSS gamification",
+    "Tailwind gamification components",
     "user engagement components",
     "open source gamification",
+    "open source gamification UI",
+    "free gamification components",
     "gamification toolkit",
     "streak tracker React",
     "leaderboard React component",
diff --git a/apps/www/lib/docs-metadata.ts b/apps/www/lib/docs-metadata.ts
new file mode 100644
index 0000000..4c5fe04
--- /dev/null
+++ b/apps/www/lib/docs-metadata.ts
@@ -0,0 +1,29 @@
+export type TrophyDocsFrontmatter = {
+  title: string
+  description?: string
+  seoTitle?: string
+  keywords?: string[]
+}
+
+export function resolveDocsSeoTitle(
+  doc: Pick<TrophyDocsFrontmatter, "title" | "seoTitle">
+): string {
+  const custom = doc.seoTitle?.trim()
+  if (custom) return custom
+  return `${doc.title} | Trophy UI`
+}
+
+export function resolveDocsMetaKeywords(
+  doc: Pick<TrophyDocsFrontmatter, "title" | "keywords">
+): string[] {
+  const base = [
+    doc.title,
+    "gamification UI component",
+    "React component",
+    "shadcn UI",
+    "Tailwind CSS",
+    "Trophy UI",
+  ]
+  const extra = doc.keywords?.map((k) => k.trim()).filter(Boolean) ?? []
+  return [...new Set([...extra, ...base])]
+}
diff --git a/apps/www/package.json b/apps/www/package.json
index 529a9dc..2aaea18 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -45,7 +45,8 @@
     "recharts": "^3.8.1",
     "shiki": "3.22.0",
     "tailwind-merge": "^3.0.1",
-    "yaml": "^2.8.2"
+    "yaml": "^2.8.2",
+    "zod": "^4.3.6"
   },
   "prettier": {
     "endOfLine": "lf",
diff --git a/apps/www/source.config.ts b/apps/www/source.config.ts
index 4855976..165fd8a 100644
--- a/apps/www/source.config.ts
+++ b/apps/www/source.config.ts
@@ -1,7 +1,16 @@
-import { defineConfig, defineDocs } from "fumadocs-mdx/config"
+import { defineConfig, defineDocs, frontmatterSchema } from "fumadocs-mdx/config"
+import { z } from "zod"
+
+const docsPageSchema = frontmatterSchema.extend({
+  seoTitle: z.string().optional(),
+  keywords: z.array(z.string()).optional(),
+})
 
 export const docs = defineDocs({
   dir: "content/docs",
+  docs: {
+    schema: docsPageSchema,
+  },
 })
 
 export default defineConfig({
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 618613c..5cc38a5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -165,6 +165,9 @@ importers:
       yaml:
         specifier: ^2.8.2
         version: 2.8.2
+      zod:
+        specifier: ^4.3.6
+        version: 4.3.6
     devDependencies:
       '@eslint/eslintrc':
         specifier: ^3

From dc7e442a8e844467433d7de8259608ed77544172 Mon Sep 17 00:00:00 2001
From: Charlie Hopkins-Brinicombe <charlie@trophy.so>
Date: Fri, 15 May 2026 11:46:53 +0100
Subject: [PATCH 5/8] Title case seo titles and shared suffix

---
 .../content/docs/components/achievement-badge.mdx   |  2 +-
 .../content/docs/components/achievement-card.mdx    |  2 +-
 .../content/docs/components/achievement-grid.mdx    |  2 +-
 .../content/docs/components/achievement-list.mdx    |  2 +-
 .../docs/components/achievement-unlocked.mdx        |  2 +-
 apps/www/content/docs/components/index.mdx          |  2 +-
 .../content/docs/components/leaderboard-card.mdx    |  2 +-
 .../content/docs/components/leaderboard-podium.mdx  |  2 +-
 .../docs/components/leaderboard-rankings.mdx        |  2 +-
 apps/www/content/docs/components/points-awards.mdx  |  2 +-
 apps/www/content/docs/components/points-badge.mdx   |  2 +-
 apps/www/content/docs/components/points-boost.mdx   |  2 +-
 apps/www/content/docs/components/points-chart.mdx   |  2 +-
 .../content/docs/components/points-levels-list.mdx  |  2 +-
 .../docs/components/points-levels-timeline.mdx      |  2 +-
 apps/www/content/docs/components/streak-badge.mdx   |  2 +-
 .../www/content/docs/components/streak-calendar.mdx |  2 +-
 apps/www/content/docs/components/streak-card.mdx    |  2 +-
 apps/www/content/docs/index.mdx                     |  2 +-
 apps/www/content/docs/styles.mdx                    |  2 +-
 apps/www/content/docs/usage.mdx                     |  2 +-
 apps/www/lib/docs-metadata.ts                       | 13 +++++++++++--
 22 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/apps/www/content/docs/components/achievement-badge.mdx b/apps/www/content/docs/components/achievement-badge.mdx
index 7ea0684..5148694 100644
--- a/apps/www/content/docs/components/achievement-badge.mdx
+++ b/apps/www/content/docs/components/achievement-badge.mdx
@@ -1,7 +1,7 @@
 ---
 title: Achievement Badge
 description: "Open source React achievement badge component with locked/unlocked states, progress rings and rarity support. Use for achievement UI design and collections. Built on shadcn/ui + Tailwind."
-seoTitle: "Achievement Badge — React achievement badge component | Trophy UI"
+seoTitle: "Achievement Badge — React Achievement Badge Component"
 keywords:
   - react achievement component
   - achievement badge component
diff --git a/apps/www/content/docs/components/achievement-card.mdx b/apps/www/content/docs/components/achievement-card.mdx
index 953f830..bd7bc5c 100644
--- a/apps/www/content/docs/components/achievement-card.mdx
+++ b/apps/www/content/docs/components/achievement-card.mdx
@@ -1,7 +1,7 @@
 ---
 title: Achievement Card
 description: "React achievement card with totals, featured badges, and scrollable lists for profile and progress surfaces. Fits achievement UI examples in SaaS, consumer and community products. Open source, built on shadcn/ui + Tailwind."
-seoTitle: "Achievement Card — achievement UI examples in React | Trophy UI"
+seoTitle: "Achievement Card — Achievement UI Examples in React"
 keywords:
   - achievement UI examples
   - react achievement component
diff --git a/apps/www/content/docs/components/achievement-grid.mdx b/apps/www/content/docs/components/achievement-grid.mdx
index 0f2636c..8ec307e 100644
--- a/apps/www/content/docs/components/achievement-grid.mdx
+++ b/apps/www/content/docs/components/achievement-grid.mdx
@@ -1,7 +1,7 @@
 ---
 title: Achievement Grid
 description: "Responsive React achievement grid for displaying collections of badges with progress and rarity across breakpoints. Ideal achievement UI design for galleries and showcases in consumer apps. Open source, built on shadcn/ui + Tailwind."
-seoTitle: "Achievement Grid — achievement badge component for React | Trophy UI"
+seoTitle: "Achievement Grid — Achievement Badge Component for React"
 keywords:
   - achievement badge component
   - achievement UI design
diff --git a/apps/www/content/docs/components/achievement-list.mdx b/apps/www/content/docs/components/achievement-list.mdx
index 8f882bd..5c4924a 100644
--- a/apps/www/content/docs/components/achievement-list.mdx
+++ b/apps/www/content/docs/components/achievement-list.mdx
@@ -1,7 +1,7 @@
 ---
 title: Achievement List
 description: "Vertical React achievement list with icons, descriptions, and optional progress for dense achievement UI. Complements grids and cards in gamification dashboards. Open source, built on shadcn/ui + Tailwind."
-seoTitle: "Achievement List — React achievement component list | Trophy UI"
+seoTitle: "Achievement List — React Achievement Component List"
 keywords:
   - react achievement component
   - achievement UI examples
diff --git a/apps/www/content/docs/components/achievement-unlocked.mdx b/apps/www/content/docs/components/achievement-unlocked.mdx
index 6ef7c22..1ec03e1 100644
--- a/apps/www/content/docs/components/achievement-unlocked.mdx
+++ b/apps/www/content/docs/components/achievement-unlocked.mdx
@@ -1,7 +1,7 @@
 ---
 title: Achievement Unlocked
 description: "Celebratory React dialog for newly unlocked achievements with headline, badge, and share actions. Use for unlock moments, level up animations and more. Built on shadcn/ui + Tailwind. Open source."
-seoTitle: "Achievement Unlocked — level up animation UI for React | Trophy UI"
+seoTitle: "Achievement Unlocked — Level Up Animation UI for React"
 keywords:
   - level up animation
   - react achievement component
diff --git a/apps/www/content/docs/components/index.mdx b/apps/www/content/docs/components/index.mdx
index 0981360..9ff6cf8 100644
--- a/apps/www/content/docs/components/index.mdx
+++ b/apps/www/content/docs/components/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: Components
 description: "Browse the Trophy UI gamification component library with React widgets for streaks, achievements, leaderboards, and points. Free, open source. Install via shadcn registry."
-seoTitle: "Components — Gamification UI library for React | Trophy UI"
+seoTitle: "Components — Gamification UI Library for React"
 keywords:
   - gamification ui library
   - gamification components
diff --git a/apps/www/content/docs/components/leaderboard-card.mdx b/apps/www/content/docs/components/leaderboard-card.mdx
index 346f6a6..96a9f87 100644
--- a/apps/www/content/docs/components/leaderboard-card.mdx
+++ b/apps/www/content/docs/components/leaderboard-card.mdx
@@ -1,7 +1,7 @@
 ---
 title: Leaderboard Card
 description: "React leaderboard component that composes title, date range, podium, and rankings—one card for competitive gamification UIs. Fits Next.js and React apps. Built on shadcn/ui + Tailwind. Open source."
-seoTitle: "Leaderboard Card — React leaderboard UI & shadcn leaderboard | Trophy UI"
+seoTitle: "Leaderboard Card — React Leaderboard UI & Shadcn Leaderboard"
 keywords:
   - react leaderboard component
   - leaderboard UI component
diff --git a/apps/www/content/docs/components/leaderboard-podium.mdx b/apps/www/content/docs/components/leaderboard-podium.mdx
index 859f700..b2e7748 100644
--- a/apps/www/content/docs/components/leaderboard-podium.mdx
+++ b/apps/www/content/docs/components/leaderboard-podium.mdx
@@ -1,7 +1,7 @@
 ---
 title: Leaderboard Podium
 description: "Top-three React leaderboard podium with crowns, avatars, and ranks for competitive gamification. Leaderboard UI component for highlights and recap screens. Built on shadcn/ui + Tailwind. Open source."
-seoTitle: "Leaderboard Podium — leaderboard UI component | Trophy UI"
+seoTitle: "Leaderboard Podium — Leaderboard UI Component"
 keywords:
   - leaderboard UI component
   - leaderboard UI examples
diff --git a/apps/www/content/docs/components/leaderboard-rankings.mdx b/apps/www/content/docs/components/leaderboard-rankings.mdx
index 2b7afe1..208d908 100644
--- a/apps/www/content/docs/components/leaderboard-rankings.mdx
+++ b/apps/www/content/docs/components/leaderboard-rankings.mdx
@@ -1,7 +1,7 @@
 ---
 title: Leaderboard Rankings
 description: "React leaderboard rankings list—avatars, scores, bylines, and crown highlights for full tables. Open-source leaderboard UI for games, communities, and SaaS challenges. shadcn/ui + Tailwind."
-seoTitle: "Leaderboard Rankings — React leaderboard table & UI | Trophy UI"
+seoTitle: "Leaderboard Rankings — React Leaderboard Table & UI"
 keywords:
   - react leaderboard
   - leaderboard component
diff --git a/apps/www/content/docs/components/points-awards.mdx b/apps/www/content/docs/components/points-awards.mdx
index ebded4a..18df050 100644
--- a/apps/www/content/docs/components/points-awards.mdx
+++ b/apps/www/content/docs/components/points-awards.mdx
@@ -1,7 +1,7 @@
 ---
 title: Points Awards
 description: "React points activity feed with dated events, totals, and trigger types for gamification timelines. Useful for XP and currency ledgers in dashboards. Built on shadcn/ui + Tailwind. Open source."
-seoTitle: "Points Awards — gamification points feed for React | Trophy UI"
+seoTitle: "Points Awards — Gamification Points Feed for React"
 keywords:
   - react gamification library
   - gamification UI patterns
diff --git a/apps/www/content/docs/components/points-badge.mdx b/apps/www/content/docs/components/points-badge.mdx
index c817371..1ba8016 100644
--- a/apps/www/content/docs/components/points-badge.mdx
+++ b/apps/www/content/docs/components/points-badge.mdx
@@ -1,7 +1,7 @@
 ---
 title: Points Badge
 description: "Compact React points badge for totals and currency-style scores in gamification UIs. Fits XP-style displays alongside charts and lists. Built on shadcn/ui + Tailwind. Open source."
-seoTitle: "Points Badge — React XP bar companion & points UI | Trophy UI"
+seoTitle: "Points Badge — React XP Bar Companion & Points UI"
 keywords:
   - xp bar component
   - react xp bar
diff --git a/apps/www/content/docs/components/points-boost.mdx b/apps/www/content/docs/components/points-boost.mdx
index 4f3a587..c08f40b 100644
--- a/apps/www/content/docs/components/points-boost.mdx
+++ b/apps/www/content/docs/components/points-boost.mdx
@@ -1,7 +1,7 @@
 ---
 title: Points Boost
 description: "React callout for points multipliers and limited-time boosts. Supports optional countdown for near-ending gamification campaigns. Built on shadcn/ui + Tailwind. Open source."
-seoTitle: "Points Boost — gamification multiplier UI for React | Trophy UI"
+seoTitle: "Points Boost — Gamification Multiplier UI for React"
 keywords:
   - gamification widgets
   - gamification UI examples
diff --git a/apps/www/content/docs/components/points-chart.mdx b/apps/www/content/docs/components/points-chart.mdx
index 5d0dd59..47569c1 100644
--- a/apps/www/content/docs/components/points-chart.mdx
+++ b/apps/www/content/docs/components/points-chart.mdx
@@ -1,7 +1,7 @@
 ---
 title: Points Chart
 description: "React chart for points over time. Displays trends, campaigns, and seasonality in gamification analytics views. Complements badges and levels. Built on Recharts + shadcn/ui + Tailwind. Open source."
-seoTitle: "Points Chart — progress and XP trends in React | Trophy UI"
+seoTitle: "Points Chart — Progress and XP Trends in React"
 keywords:
   - react xp chart
   - xp chart design
diff --git a/apps/www/content/docs/components/points-levels-list.mdx b/apps/www/content/docs/components/points-levels-list.mdx
index aaaf12c..6a47a83 100644
--- a/apps/www/content/docs/components/points-levels-list.mdx
+++ b/apps/www/content/docs/components/points-levels-list.mdx
@@ -1,7 +1,7 @@
 ---
 title: Points Levels List
 description: "React levels list with optional progress bar between tiers. Built on shadcn/ui + Tailwind. Open source."
-seoTitle: "Points Levels List — React level system & progress bar | Trophy UI"
+seoTitle: "Points Levels List — React Level System & Progress Bar"
 keywords:
   - react level system
   - progress bar gamification
diff --git a/apps/www/content/docs/components/points-levels-timeline.mdx b/apps/www/content/docs/components/points-levels-timeline.mdx
index fc16db1..e590460 100644
--- a/apps/www/content/docs/components/points-levels-timeline.mdx
+++ b/apps/www/content/docs/components/points-levels-timeline.mdx
@@ -1,7 +1,7 @@
 ---
 title: Points Levels Timeline
 description: "Vertical React timeline for level progression. Supports sub-levels, thresholds, and level progress for gamification roadmaps. Complements Points Levels List. Built on shadcn/ui + Tailwind. Open source."
-seoTitle: "Points Levels Timeline — React level system timeline | Trophy UI"
+seoTitle: "Points Levels Timeline — React Level System Timeline"
 keywords:
   - react level system
   - xp bar design
diff --git a/apps/www/content/docs/components/streak-badge.mdx b/apps/www/content/docs/components/streak-badge.mdx
index 2932b9a..2c3be93 100644
--- a/apps/www/content/docs/components/streak-badge.mdx
+++ b/apps/www/content/docs/components/streak-badge.mdx
@@ -1,7 +1,7 @@
 ---
 title: Streak Badge
 description: "React streak counter UI in a compact badge supporting daily, weekly, monthly or yearly streaks. Built on shadcn/ui + Tailwind. Open source."
-seoTitle: "Streak Badge — React streak component & streak counter | Trophy UI"
+seoTitle: "Streak Badge — React Streak Component & Streak Counter"
 keywords:
   - react streak component
   - streak counter component
diff --git a/apps/www/content/docs/components/streak-calendar.mdx b/apps/www/content/docs/components/streak-calendar.mdx
index 5af50f7..f9126b7 100644
--- a/apps/www/content/docs/components/streak-calendar.mdx
+++ b/apps/www/content/docs/components/streak-calendar.mdx
@@ -1,7 +1,7 @@
 ---
 title: Streak Calendar
 description: "React streak calendar for gamification—week, month, and git-style grids to visualize consistency. Native support for streak freezes. Ideal streak UI design for habit tracking and personal progress. Built on shadcn/ui and Tailwind CSS. Open source."
-seoTitle: "Streak Calendar — streak UI design & habit tracking component | Trophy UI"
+seoTitle: "Streak Calendar — Streak UI Design & Habit Tracking Component"
 keywords:
   - streak UI design
   - streak UI examples
diff --git a/apps/www/content/docs/components/streak-card.mdx b/apps/www/content/docs/components/streak-card.mdx
index aeb03cc..c118cfa 100644
--- a/apps/www/content/docs/components/streak-card.mdx
+++ b/apps/www/content/docs/components/streak-card.mdx
@@ -1,7 +1,7 @@
 ---
 title: Streak Card
 description: "Full streak UI card for React. Daily streak display, longest streak record with optional section for streak rules. Built on shadcn/ui + Tailwind. Open source."
-seoTitle: "Streak Card — React streak UI & habit tracking component | Trophy UI"
+seoTitle: "Streak Card — React Streak UI & Habit Tracking Component"
 keywords:
   - streak UI component
   - react streak component
diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx
index 85eb450..d29a98a 100644
--- a/apps/www/content/docs/index.mdx
+++ b/apps/www/content/docs/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: Introduction
 description: "Trophy UI is a free, open-source gamification UI kit for React and Next.js—copy-paste streak, achievement, leaderboard, and points components via the shadcn registry. Built on shadcn/ui and Tailwind CSS."
-seoTitle: "Introduction — Gamification UI kit & React component library | Trophy UI"
+seoTitle: "Introduction — Gamification UI Kit & React Component Library"
 keywords:
   - gamification ui kit
   - gamification component library
diff --git a/apps/www/content/docs/styles.mdx b/apps/www/content/docs/styles.mdx
index 3c963ee..7c39f6c 100644
--- a/apps/www/content/docs/styles.mdx
+++ b/apps/www/content/docs/styles.mdx
@@ -1,7 +1,7 @@
 ---
 title: Styles
 description: "Tailwind-first design tokens and theming for Trophy UI—semantic colors, typography, and spacing so gamification components stay on-brand. Part of a Tailwind + shadcn gamification stack."
-seoTitle: "Styles — Tailwind gamification design tokens | Trophy UI"
+seoTitle: "Styles — Tailwind Gamification Design Tokens"
 keywords:
   - tailwind gamification
   - tailwind gamification components
diff --git a/apps/www/content/docs/usage.mdx b/apps/www/content/docs/usage.mdx
index 38004d2..7aa35e7 100644
--- a/apps/www/content/docs/usage.mdx
+++ b/apps/www/content/docs/usage.mdx
@@ -1,7 +1,7 @@
 ---
 title: Usage
 description: "Install Trophy UI gamification components in React or Next.js with the shadcn CLI—open-code files, Tailwind v4, and client components you compose in App Router or SPA pages."
-seoTitle: "Usage — Next.js & React gamification components | Trophy UI"
+seoTitle: "Usage — Next.js & React Gamification Components"
 keywords:
   - next js gamification
   - nextjs leaderboard
diff --git a/apps/www/lib/docs-metadata.ts b/apps/www/lib/docs-metadata.ts
index 4c5fe04..6d8cf09 100644
--- a/apps/www/lib/docs-metadata.ts
+++ b/apps/www/lib/docs-metadata.ts
@@ -1,3 +1,5 @@
+import { siteConfig } from "@/lib/config"
+
 export type TrophyDocsFrontmatter = {
   title: string
   description?: string
@@ -5,12 +7,19 @@ export type TrophyDocsFrontmatter = {
   keywords?: string[]
 }
 
+export function formatDocsSeoTitle(core: string): string {
+  const trimmed = core.trim()
+  const suffix = siteConfig.title.trim()
+  if (!suffix) return trimmed
+  return `${trimmed} | ${suffix}`
+}
+
 export function resolveDocsSeoTitle(
   doc: Pick<TrophyDocsFrontmatter, "title" | "seoTitle">
 ): string {
   const custom = doc.seoTitle?.trim()
-  if (custom) return custom
-  return `${doc.title} | Trophy UI`
+  if (custom) return formatDocsSeoTitle(custom)
+  return formatDocsSeoTitle(doc.title)
 }
 
 export function resolveDocsMetaKeywords(

From c584f7fecbce87beecd66051cbb6fb707bb57c84 Mon Sep 17 00:00:00 2001
From: Charlie Hopkins-Brinicombe <charlie@trophy.so>
Date: Fri, 15 May 2026 11:54:03 +0100
Subject: [PATCH 6/8] Use 'gamification' more on component pages

---
 apps/www/content/docs/components/achievement-badge.mdx      | 2 +-
 apps/www/content/docs/components/achievement-card.mdx       | 2 +-
 apps/www/content/docs/components/achievement-grid.mdx       | 2 +-
 apps/www/content/docs/components/achievement-list.mdx       | 2 +-
 apps/www/content/docs/components/achievement-unlocked.mdx   | 2 +-
 apps/www/content/docs/components/leaderboard-card.mdx       | 2 +-
 apps/www/content/docs/components/leaderboard-podium.mdx     | 2 +-
 apps/www/content/docs/components/leaderboard-rankings.mdx   | 2 +-
 apps/www/content/docs/components/points-awards.mdx          | 2 +-
 apps/www/content/docs/components/points-badge.mdx           | 2 +-
 apps/www/content/docs/components/points-boost.mdx           | 2 +-
 apps/www/content/docs/components/points-chart.mdx           | 2 +-
 apps/www/content/docs/components/points-levels-list.mdx     | 2 +-
 apps/www/content/docs/components/points-levels-timeline.mdx | 2 +-
 apps/www/content/docs/components/streak-badge.mdx           | 2 +-
 apps/www/content/docs/components/streak-calendar.mdx        | 2 +-
 apps/www/content/docs/components/streak-card.mdx            | 2 +-
 17 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/apps/www/content/docs/components/achievement-badge.mdx b/apps/www/content/docs/components/achievement-badge.mdx
index 5148694..ff4a6a2 100644
--- a/apps/www/content/docs/components/achievement-badge.mdx
+++ b/apps/www/content/docs/components/achievement-badge.mdx
@@ -10,7 +10,7 @@ keywords:
   - gamification components
 ---
 
-The Achievement Badge is the atomic unit of achievement UI - a compact tile users recognize from games and productivity apps, with room for displaying user progress and rarity. Compose with [Achievement Card](/docs/components/achievement-card) and [Achievement Grid](/docs/components/achievement-grid) when you need to display achievement UI at scale.
+The Achievement Badge is the atomic unit of achievement gamification UI—a compact tile users recognize from games and productivity apps, with progress and rarity built in. Compose with [Achievement Card](/docs/components/achievement-card) and [Achievement Grid](/docs/components/achievement-grid) when you need achievement gamification at scale.
 
 <ComponentPreview name="achievement-badge" />
 
diff --git a/apps/www/content/docs/components/achievement-card.mdx b/apps/www/content/docs/components/achievement-card.mdx
index bd7bc5c..30f5944 100644
--- a/apps/www/content/docs/components/achievement-card.mdx
+++ b/apps/www/content/docs/components/achievement-card.mdx
@@ -10,7 +10,7 @@ keywords:
   - react gamification library
 ---
 
-The Achievement Card summarizes achievement UI for a user: headline stats, spotlighted badges, and room to browse more without leaving the card.
+The Achievement Card summarizes achievement gamification for a user—headline stats, spotlighted badges, and scrollable collections without leaving the card, suited to profile and progress hubs in gamification-heavy products.
 
 <ComponentPreview name="achievement-card" />
 
diff --git a/apps/www/content/docs/components/achievement-grid.mdx b/apps/www/content/docs/components/achievement-grid.mdx
index 8ec307e..eaee1c3 100644
--- a/apps/www/content/docs/components/achievement-grid.mdx
+++ b/apps/www/content/docs/components/achievement-grid.mdx
@@ -10,7 +10,7 @@ keywords:
   - tailwind gamification components
 ---
 
-Achievement Grid lays out many badges in a scannable achievement UI surface with balanced columns, spacing rhythm, and room for metadata like rarity or completion percent built-in as a first-class feature.
+Achievement Grid lays out badge collections in a scannable gamification surface—balanced columns, spacing rhythm, and built-in rarity or completion metadata for trophy rooms and showcase-style achievement gamification.
 
 <ComponentPreview name="achievement-grid" />
 
diff --git a/apps/www/content/docs/components/achievement-list.mdx b/apps/www/content/docs/components/achievement-list.mdx
index 5c4924a..35bc76a 100644
--- a/apps/www/content/docs/components/achievement-list.mdx
+++ b/apps/www/content/docs/components/achievement-list.mdx
@@ -10,7 +10,7 @@ keywords:
   - shadcn ui gamification
 ---
 
-Use Achievement List for dense achievement UI layouts where each row can carry a title, supporting text, and progress so users understand what to do next.
+Achievement List is built for dense gamification layouts where each row carries a title, supporting text, and progress—ideal for onboarding missions, quest logs, and checklist-style achievement gamification.
 
 <ComponentPreview name="achievement-list" />
 
diff --git a/apps/www/content/docs/components/achievement-unlocked.mdx b/apps/www/content/docs/components/achievement-unlocked.mdx
index 1ec03e1..7e8c16c 100644
--- a/apps/www/content/docs/components/achievement-unlocked.mdx
+++ b/apps/www/content/docs/components/achievement-unlocked.mdx
@@ -10,7 +10,7 @@ keywords:
   - shadcn gamification components
 ---
 
-Achievement Unlocked is a focused unlock moment surface to congratulate the user, reinforce rewards, and encourage further engagement through social sharing.
+Achievement Unlocked is a focused gamification moment for celebrating unlocks, level up animations, congratulating users, reinforcing rewards, and encouraging sharing in achievement-driven gamification experiences.
 
 <ComponentPreview name="achievement-unlocked" />
 
diff --git a/apps/www/content/docs/components/leaderboard-card.mdx b/apps/www/content/docs/components/leaderboard-card.mdx
index 96a9f87..7f82270 100644
--- a/apps/www/content/docs/components/leaderboard-card.mdx
+++ b/apps/www/content/docs/components/leaderboard-card.mdx
@@ -10,7 +10,7 @@ keywords:
   - nextjs leaderboard
 ---
 
-Leaderboard Card is a composition of [Leaderboard Podium](/docs/components/leaderboard-podium) and [Leaderboard Rankings](/docs/components/leaderboard-rankings). Display top rankings as a podium with a table of all rankings below. Highlight the current user's ranking in the table easily with collapsible rankings.
+Leaderboard Card bundles competitive gamification UI for React—a [Leaderboard Podium](/docs/components/leaderboard-podium) plus [Leaderboard Rankings](/docs/components/leaderboard-rankings) in one card for challenges, contests, and social gamification surfaces, with collapsible rows and easy highlighting for the current user.
 
 <ComponentPreview name="leaderboard-card" />
 
diff --git a/apps/www/content/docs/components/leaderboard-podium.mdx b/apps/www/content/docs/components/leaderboard-podium.mdx
index b2e7748..9a2664c 100644
--- a/apps/www/content/docs/components/leaderboard-podium.mdx
+++ b/apps/www/content/docs/components/leaderboard-podium.mdx
@@ -10,7 +10,7 @@ keywords:
   - shadcn gamification components
 ---
 
-Pair with [Leaderboard Rankings](/docs/components/leaderboard-rankings) when you need both a hero podium for storytelling and a full table for detail. Ideal for displaying winners of historical leaderboards, after weekly ranking resets, or part of broader gamification UIs.
+The Leaderboard Podium spotlights top-three ranks in competitive gamification UIs. Pair with [Leaderboard Rankings](/docs/components/leaderboard-rankings) for a hero podium plus a full table—ideal after weekly resets, seasonal contests, or anywhere gamification needs a clear winner moment.
 
 <ComponentPreview name="leaderboard-podium" />
 
diff --git a/apps/www/content/docs/components/leaderboard-rankings.mdx b/apps/www/content/docs/components/leaderboard-rankings.mdx
index 208d908..1820214 100644
--- a/apps/www/content/docs/components/leaderboard-rankings.mdx
+++ b/apps/www/content/docs/components/leaderboard-rankings.mdx
@@ -10,7 +10,7 @@ keywords:
   - react gamification components
 ---
 
-Dense and flexible React leaderboard component for displaying a full table of rankings with avatars, scores, bylines, and crown highlights for first through third place. Support for pagination built-in and highlighting the current user's ranking with collapisble rows.
+Leaderboard Rankings is a dense React table for competitive gamification—full rankings with avatars, scores, bylines, and crown highlights for the top three, plus pagination and collapsible rows with built-in highlighting for the current user in leaderboard-driven gamification flows.
 
 <ComponentPreview name="leaderboard-rankings" />
 
diff --git a/apps/www/content/docs/components/points-awards.mdx b/apps/www/content/docs/components/points-awards.mdx
index 18df050..c18b2a2 100644
--- a/apps/www/content/docs/components/points-awards.mdx
+++ b/apps/www/content/docs/components/points-awards.mdx
@@ -9,7 +9,7 @@ keywords:
   - react gamification components
 ---
 
-Points Awards surfaces what changed in a user’s balance: grants, spends, bonuses, and campaign events in a readable timeline. Use when gamification UI needs transparency where trust is earned by showing how points changed.
+Points Awards surfaces what changed in a gamification ledger—grants, spends, bonuses, and campaign events in a readable timeline. Use when gamification UI needs transparency where trust grows when users see exactly how points moved.
 
 <ComponentPreview name="points-awards" />
 
diff --git a/apps/www/content/docs/components/points-badge.mdx b/apps/www/content/docs/components/points-badge.mdx
index 1ba8016..d30f073 100644
--- a/apps/www/content/docs/components/points-badge.mdx
+++ b/apps/www/content/docs/components/points-badge.mdx
@@ -10,7 +10,7 @@ keywords:
   - tailwind gamification
 ---
 
-The Points Badge is the lightweight readout for points and XP. Compose with [Points Chart](/docs/components/points-chart) or [Points Levels List](/docs/components/points-levels-list) when users need both a headline number and deeper progress bar gamification elsewhere in the layout.
+The Points Badge is a lightweight gamification readout for points and XP totals—use it anywhere gamification scores need a compact header. Compose with [Points Chart](/docs/components/points-chart) or [Points Levels List](/docs/components/points-levels-list) when users need headline totals plus deeper progress gamification elsewhere in the layout.
 
 <ComponentPreview name="points-badge" />
 
diff --git a/apps/www/content/docs/components/points-boost.mdx b/apps/www/content/docs/components/points-boost.mdx
index c08f40b..855f60d 100644
--- a/apps/www/content/docs/components/points-boost.mdx
+++ b/apps/www/content/docs/components/points-boost.mdx
@@ -10,7 +10,7 @@ keywords:
   - shadcn gamification
 ---
 
-Points Boost highlights time-bound incentives like double XP weekends, referral multipliers, or seasonal bonuses with optional countdown affordances. Drop it above leaderboards, checkout, or task lists where you want gamification UI to nudge action without changing underlying points logic.
+Points Boost highlights time-bound gamification incentives like double XP weekends, referral multipliers, or seasonal bonuses with optional countdowns. Drop it above leaderboards, checkout, or task lists where gamification UI should nudge action without changing underlying points logic.
 
 <ComponentPreview name="points-boost" />
 
diff --git a/apps/www/content/docs/components/points-chart.mdx b/apps/www/content/docs/components/points-chart.mdx
index 47569c1..badc057 100644
--- a/apps/www/content/docs/components/points-chart.mdx
+++ b/apps/www/content/docs/components/points-chart.mdx
@@ -10,7 +10,7 @@ keywords:
   - react gamification library
 ---
 
-Points Chart answers how momentum changed: spikes after launches, steady grind weeks, or drops when engagement cools. Use on user dashboards and profiles alongside [Points Badge](/docs/components/points-badge) or [Points Levels List](/docs/components/points-levels-list) to keep macro trends and micro totals aligned.
+Points Chart shows how gamification momentum shifted over time—spikes after launches, steady grind weeks, or drops when engagement cools. Use on dashboards alongside [Points Badge](/docs/components/points-badge) or [Points Levels List](/docs/components/points-levels-list) so gamification trends and point totals stay aligned.
 
 <ComponentPreview name="points-chart" />
 
diff --git a/apps/www/content/docs/components/points-levels-list.mdx b/apps/www/content/docs/components/points-levels-list.mdx
index 6a47a83..11aa719 100644
--- a/apps/www/content/docs/components/points-levels-list.mdx
+++ b/apps/www/content/docs/components/points-levels-list.mdx
@@ -9,7 +9,7 @@ keywords:
   - react progress bar component
 ---
 
-Points Levels List is a vertical level system UI supporting current tier, next milestone, and optional progress bar for displaying progress between levels.
+Points Levels List is a vertical level-system UI for gamification progression—current tier, next milestone, and optional progress between thresholds in points- and XP-driven gamification experiences.
 
 <ComponentPreview name="points-levels-list" />
 
diff --git a/apps/www/content/docs/components/points-levels-timeline.mdx b/apps/www/content/docs/components/points-levels-timeline.mdx
index e590460..da72cf2 100644
--- a/apps/www/content/docs/components/points-levels-timeline.mdx
+++ b/apps/www/content/docs/components/points-levels-timeline.mdx
@@ -10,7 +10,7 @@ keywords:
   - tailwind gamification
 ---
 
-Points Levels Timeline tells a leveling story top to bottom: which tiers users passed, current progress, and remaining XP to next level. Use for points systems where level progression is a key user outcome.
+Points Levels Timeline tells a gamification leveling story top to bottom—which tiers users passed, current progress, and XP to the next level—built for progression-heavy gamification products. Use [Points Levels List](/docs/components/points-levels-list) when you need a more compact view of level progression.
 
 <ComponentPreview name="points-levels-timeline" />
 
diff --git a/apps/www/content/docs/components/streak-badge.mdx b/apps/www/content/docs/components/streak-badge.mdx
index 2c3be93..95404a8 100644
--- a/apps/www/content/docs/components/streak-badge.mdx
+++ b/apps/www/content/docs/components/streak-badge.mdx
@@ -10,7 +10,7 @@ keywords:
   - habit tracking UI
 ---
 
-The Streak Badge is a small building block for streak UI in React apps. Display current streak length, optional flame or custom icons, and layout control for streak UI. Compose with [Streak Card](/docs/components/streak-card) or [Streak Calendar](/docs/components/streak-calendar) when you need to display streak UI at scale.
+The Streak Badge is a compact building block for streak gamification UI in React. Display current streak length, embed optional flame or custom icons, and control layout for habit tracking and engagement gamification flows. Compose with [Streak Card](/docs/components/streak-card) or [Streak Calendar](/docs/components/streak-calendar) when you need streak gamification UI at scale.
 
 <ComponentPreview name="streak-badge" />
 
diff --git a/apps/www/content/docs/components/streak-calendar.mdx b/apps/www/content/docs/components/streak-calendar.mdx
index f9126b7..93353d1 100644
--- a/apps/www/content/docs/components/streak-calendar.mdx
+++ b/apps/www/content/docs/components/streak-calendar.mdx
@@ -11,7 +11,7 @@ keywords:
   - streak freeze UI
 ---
 
-The Streak Calendar is a flexible UI component for displaying streak data. Display active days, weeks, and months with native support for streak freezes.
+The Streak Calendar is a flexible gamification component for visualizing streak consistency with active days, weeks, and months with native support for streak freezes in retention-focused gamification UIs. Compose with [Streak Badge](/docs/components/streak-badge) or [Streak Card](/docs/components/streak-card) when you need streak gamification UI at scale.
 
 <ComponentPreview name="streak-calendar" />
 
diff --git a/apps/www/content/docs/components/streak-card.mdx b/apps/www/content/docs/components/streak-card.mdx
index c118cfa..b4403bc 100644
--- a/apps/www/content/docs/components/streak-card.mdx
+++ b/apps/www/content/docs/components/streak-card.mdx
@@ -10,7 +10,7 @@ keywords:
   - habit tracking UI
 ---
 
-The Streak Card is a full streak UI card for React composed of [Streak Calendar](/docs/components/streak-calendar) and [Streak Badge](/docs/components/streak-badge). Display daily streak, longest streak record, and optional section for streak rules. Ideal for fitness trackers, productivity apps, and other habit tracking UIs.
+The Streak Card is a full streak gamification surface for React, composed of [Streak Calendar](/docs/components/streak-calendar) and [Streak Badge](/docs/components/streak-badge). Display daily streak, longest streak record, and optional streak rules—ideal for fitness, productivity, and other habit gamification experiences.
 
 <ComponentPreview name="streak-card" />
 

From 2c940fef45684f7c401ac4c0005993e6a8d02a01 Mon Sep 17 00:00:00 2001
From: Charlie Hopkins-Brinicombe <charlie@trophy.so>
Date: Fri, 15 May 2026 12:00:10 +0100
Subject: [PATCH 7/8] Replace 'Trophy UI' everywhere

---
 CONTRIBUTING.md                            |  4 ++--
 README.md                                  | 14 +++++++-------
 apps/www/app/(app)/(root)/page.tsx         |  2 +-
 apps/www/app/layout.tsx                    |  2 +-
 apps/www/app/manifest.json                 |  6 +++---
 apps/www/components/docs-copy-page.tsx     |  2 +-
 apps/www/content/docs/components/index.mdx |  4 ++--
 apps/www/content/docs/index.mdx            |  2 +-
 apps/www/content/docs/styles.mdx           |  4 ++--
 apps/www/content/docs/usage.mdx            |  4 ++--
 apps/www/lib/config.ts                     |  3 +--
 apps/www/lib/docs-metadata.ts              |  3 +--
 12 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 801288b..533e772 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,6 @@
-# Contributing to Trophy UI
+# Contributing to Gamification UI Kit by Trophy
 
-Thank you for helping improve [Trophy UI](https://ui.trophy.so). This document explains how to set up the repo locally, run the site and tooling, and what we look for in contributions.
+Thank you for helping improve [Gamification UI Kit by Trophy](https://ui.trophy.so). This document explains how to set up the repo locally, run the site and tooling, and what we look for in contributions.
 
 ## Prerequisites
 
diff --git a/README.md b/README.md
index 280e993..e72819e 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
-![Trophy UI](./assets/readme-hero.png)
+![Gamification UI Kit by Trophy](./assets/readme-hero.png)
 
-# Trophy UI
+# Gamification UI Kit by Trophy
 
-[Trophy UI](https://ui.trophy.so) is a component library built on top of [shadcn/ui](https://ui.shadcn.com/) to help you build gamification experiences faster.
+[Gamification UI Kit by Trophy](https://ui.trophy.so) is a component library built on top of [shadcn/ui](https://ui.shadcn.com/) to help you build gamification experiences faster.
 
 ## Overview
 
-Trophy UI provides pre-built, customizable React components for gamification—streaks, achievements, leaderboards, points, XP charts, event banners, and more. The [shadcn/ui](https://ui.shadcn.com/) CLI pulls components straight from the registry so you can own the code and tailor it to your product.
+Trophy's Gamification UI Kit provides pre-built, customizable React components for gamification—streaks, achievements, leaderboards, points, XP charts, event banners, and more. The [shadcn/ui](https://ui.shadcn.com/) CLI pulls components straight from the registry so you can own the code and tailor it to your product.
 
 ## Installation
 
@@ -18,7 +18,7 @@ npx shadcn@latest add https://ui.trophy.so/streak-badge
 
 ## Prerequisites
 
-Before using Trophy UI, ensure your project meets these requirements:
+Before using Trophy's Gamification UI Kit, ensure your project meets these requirements:
 
 - **Node.js 18** or later
 - **React 18+** — components are client-side React
@@ -35,7 +35,7 @@ Install every registry component at once:
 npx shadcn@latest add https://ui.trophy.so/all
 ```
 
-This adds Trophy UI components (and any shared primitives they depend on) into your configured components directory.
+This adds components (and any shared primitives they depend on) into your configured components directory.
 
 ### Install specific components
 
@@ -65,7 +65,7 @@ Browse the full set on the docs site: [Components](https://ui.trophy.so/docs/com
 
 ## Contributing
 
-If you would like to contribute to Trophy UI:
+If you would like to contribute to Gamification UI Kit by Trophy:
 
 1. Fork the repository
 2. Create a branch for your change
diff --git a/apps/www/app/(app)/(root)/page.tsx b/apps/www/app/(app)/(root)/page.tsx
index df102c5..970824c 100644
--- a/apps/www/app/(app)/(root)/page.tsx
+++ b/apps/www/app/(app)/(root)/page.tsx
@@ -45,7 +45,7 @@ export const metadata: Metadata = {
 const jsonLd = {
   "@context": "https://schema.org",
   "@type": "SoftwareApplication",
-  name: "Trophy UI",
+  name: "Gamification UI Kit by Trophy",
   applicationCategory: "DeveloperApplication",
   operatingSystem: "Any",
   description: siteConfig.description,
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index 9d976da..e574483 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -31,7 +31,7 @@ export default function RootLayout({
           }}
         />
         <meta name="theme-color" content={META_THEME_COLORS.light} />
-        <meta name="apple-mobile-web-app-title" content="Trophy UI" />
+        <meta name="apple-mobile-web-app-title" content="Gamification UI Kit by Trophy" />
       </head>
       <body
         className={cn(
diff --git a/apps/www/app/manifest.json b/apps/www/app/manifest.json
index 47ab15a..ddaa476 100644
--- a/apps/www/app/manifest.json
+++ b/apps/www/app/manifest.json
@@ -1,6 +1,6 @@
 {
-  "name": "Trophy UI",
-  "short_name": "Trophy UI",
+  "name": "Gamification UI Kit by Trophy",
+  "short_name": "Gamification UI Kit by Trophy",
   "icons": [
     {
       "src": "/web-app-manifest-192x192.png",
@@ -18,4 +18,4 @@
   "theme_color": "#ffffff",
   "background_color": "#ffffff",
   "display": "standalone"
-}
+}
\ No newline at end of file
diff --git a/apps/www/components/docs-copy-page.tsx b/apps/www/components/docs-copy-page.tsx
index f8b4ac1..c159e7d 100644
--- a/apps/www/components/docs-copy-page.tsx
+++ b/apps/www/components/docs-copy-page.tsx
@@ -20,7 +20,7 @@ import { Separator } from "@/registry/trophy/ui/separator"
 
 function getPromptUrl(baseURL: string, url: string) {
   return `${baseURL}?q=${encodeURIComponent(
-    `I'm looking at this Trophy UI documentation: ${url}.
+    `I'm looking at this Gamification UI Kit by Trophy documentation: ${url}.
 Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.
   `
   )}`
diff --git a/apps/www/content/docs/components/index.mdx b/apps/www/content/docs/components/index.mdx
index 9ff6cf8..0dcaa74 100644
--- a/apps/www/content/docs/components/index.mdx
+++ b/apps/www/content/docs/components/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Components
-description: "Browse the Trophy UI gamification component library with React widgets for streaks, achievements, leaderboards, and points. Free, open source. Install via shadcn registry."
+description: "Browse Trophy's Gamification UI Kit with React widgets for streaks, achievements, leaderboards, and points. Free, open source. Install via shadcn registry."
 seoTitle: "Components — Gamification UI Library for React"
 keywords:
   - gamification ui library
@@ -10,7 +10,7 @@ keywords:
   - gamification widgets
 ---
 
-Trophy UI ships gamification widgets as focused React building blocks like streak counters, achievement badges, leaderboard rankings, and points surfaces rather than a monolithic SDK. Each page documents one component you can add with the shadcn CLI, then customize like any other file in your repo.
+Trophy's Gamification UI Kit ships gamification widgets as focused React building blocks like streak counters, achievement badges, leaderboard rankings, and points surfaces rather than a monolithic SDK. Each page documents one component you can add with the shadcn CLI, then customize like any other file in your repo.
 
 - [Achievement Badge](/docs/components/achievement-badge)
 - [Achievement Card](/docs/components/achievement-card)
diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx
index d29a98a..cdd3707 100644
--- a/apps/www/content/docs/index.mdx
+++ b/apps/www/content/docs/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Introduction
-description: "Trophy UI is a free, open-source gamification UI kit for React and Next.js—copy-paste streak, achievement, leaderboard, and points components via the shadcn registry. Built on shadcn/ui and Tailwind CSS."
+description: "Gamification UI Kit by Trophy is a free, open-source gamification UI kit for React and Next.js—copy-paste streak, achievement, leaderboard, and points components via the shadcn registry. Built on shadcn/ui and Tailwind CSS."
 seoTitle: "Introduction — Gamification UI Kit & React Component Library"
 keywords:
   - gamification ui kit
diff --git a/apps/www/content/docs/styles.mdx b/apps/www/content/docs/styles.mdx
index 7c39f6c..8cb6456 100644
--- a/apps/www/content/docs/styles.mdx
+++ b/apps/www/content/docs/styles.mdx
@@ -1,6 +1,6 @@
 ---
 title: Styles
-description: "Tailwind-first design tokens and theming for Trophy UI—semantic colors, typography, and spacing so gamification components stay on-brand. Part of a Tailwind + shadcn gamification stack."
+description: "Tailwind-first design tokens and theming for Trophy's Gamification UI Kit—semantic colors, typography, and spacing so gamification components stay on-brand. Part of a Tailwind + shadcn gamification stack."
 seoTitle: "Styles — Tailwind Gamification Design Tokens"
 keywords:
   - tailwind gamification
@@ -10,7 +10,7 @@ keywords:
   - gamification interface design
 ---
 
-Trophy UI components are themeable and unopinionated by default. Component styles are built on semantic tokens, not fixed palette classes, so they remain portable across customer design systems.
+Components in Trophy's Gamification UI Kit are themeable and unopinionated by default. Component styles are built on semantic tokens, not fixed palette classes, so they remain portable across customer design systems.
 
 ## Core Standards
 
diff --git a/apps/www/content/docs/usage.mdx b/apps/www/content/docs/usage.mdx
index 7aa35e7..3b6778a 100644
--- a/apps/www/content/docs/usage.mdx
+++ b/apps/www/content/docs/usage.mdx
@@ -1,6 +1,6 @@
 ---
 title: Usage
-description: "Install Trophy UI gamification components in React or Next.js with the shadcn CLI—open-code files, Tailwind v4, and client components you compose in App Router or SPA pages."
+description: "Install components in Trophy's Gamification UI Kit in React or Next.js with the shadcn CLI—open-code files, Tailwind v4, and client components you compose in App Router or SPA pages."
 seoTitle: "Usage — Next.js & React Gamification Components"
 keywords:
   - next js gamification
@@ -10,7 +10,7 @@ keywords:
   - gamification npm package
 ---
 
-Once a Trophy UI component is installed, you can import and use it like any other React component. Files are added into your project (the same [open-code](https://ui.shadcn.com/docs) model as shadcn/ui), so you can open them, adjust markup, and align styles with your design system.
+Once a component in Trophy's Gamification UI Kit is installed, you can import and use it like any other React component. Files are added into your project (the same [open-code](https://ui.shadcn.com/docs) model as shadcn/ui), so you can open them, adjust markup, and align styles with your design system.
 
 ## Example
 
diff --git a/apps/www/lib/config.ts b/apps/www/lib/config.ts
index b16c9d5..54e0153 100644
--- a/apps/www/lib/config.ts
+++ b/apps/www/lib/config.ts
@@ -38,8 +38,7 @@ export const siteConfig = {
     "leaderboard React component",
     "achievement badge React",
     "points system UI",
-    "gamification UX",
-    "Trophy UI",
+    "gamification UX"
   ],
   links: {
     github: "https://github.com/trophyso/ui",
diff --git a/apps/www/lib/docs-metadata.ts b/apps/www/lib/docs-metadata.ts
index 6d8cf09..0f7744f 100644
--- a/apps/www/lib/docs-metadata.ts
+++ b/apps/www/lib/docs-metadata.ts
@@ -30,8 +30,7 @@ export function resolveDocsMetaKeywords(
     "gamification UI component",
     "React component",
     "shadcn UI",
-    "Tailwind CSS",
-    "Trophy UI",
+    "Tailwind CSS"
   ]
   const extra = doc.keywords?.map((k) => k.trim()).filter(Boolean) ?? []
   return [...new Set([...extra, ...base])]

From 626c7cc3d531556cd3133a5e7065ea8e1bc5cbfe Mon Sep 17 00:00:00 2001
From: Charlie Hopkins-Brinicombe <charlie@trophy.so>
Date: Fri, 15 May 2026 16:10:35 +0100
Subject: [PATCH 8/8] Add homepage animations

---
 apps/www/app/(app)/(root)/page.tsx            |  12 +-
 apps/www/components/home-component-mosaic.tsx | 105 +++--
 apps/www/components/ui/blur-fade.tsx          |  94 ++++
 apps/www/components/ui/text-animate.tsx       | 445 ++++++++++++++++++
 apps/www/package.json                         |   3 +-
 pnpm-lock.yaml                                |  60 +++
 6 files changed, 673 insertions(+), 46 deletions(-)
 create mode 100644 apps/www/components/ui/blur-fade.tsx
 create mode 100644 apps/www/components/ui/text-animate.tsx

diff --git a/apps/www/app/(app)/(root)/page.tsx b/apps/www/app/(app)/(root)/page.tsx
index 970824c..744c51a 100644
--- a/apps/www/app/(app)/(root)/page.tsx
+++ b/apps/www/app/(app)/(root)/page.tsx
@@ -10,6 +10,7 @@ import {
   PageHeaderHeading,
 } from "@/components/page-header"
 import { Button } from "@/registry/trophy/ui/button"
+import { TextAnimate } from "@/components/ui/text-animate"
 
 export const dynamic = "force-static"
 export const revalidate = false
@@ -134,12 +135,15 @@ export default function IndexPage() {
         <PageHeader className="relative z-10">
           <PageHeaderHeading className="max-w-4xl">
             <span className="font-montserrat flex items-baseline gap-2 sm:gap-3">
-              <span className="leading-[0.95] font-bold tracking-[-0.03em]">
+              {/* <span className="leading-[0.95] font-bold tracking-[-0.03em]">
                 Gamification UI Kit
-              </span>
-              <span className="animate-expand-in overflow-hidden whitespace-nowrap font-normal tracking-[-0.02em]">
+              </span> */}
+              <TextAnimate animation="slideLeft" by="character">
+                Gamification UI Kit by Trophy
+              </TextAnimate>
+              {/* <span className="animate-expand-in overflow-hidden whitespace-nowrap font-normal tracking-[-0.02em]">
                 by Trophy
-              </span>
+              </span> */}
             </span>
           </PageHeaderHeading>
           <PageHeaderDescription>
diff --git a/apps/www/components/home-component-mosaic.tsx b/apps/www/components/home-component-mosaic.tsx
index 1029cf7..b6d251b 100644
--- a/apps/www/components/home-component-mosaic.tsx
+++ b/apps/www/components/home-component-mosaic.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import { useState } from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
 
 import { AchievementGrid } from "@/registry/trophy/ui/achievement-grid"
 import { AchievementList } from "@/registry/trophy/ui/achievement-list"
@@ -15,6 +14,7 @@ import { PointsBoost } from "@/registry/trophy/ui/points-boost"
 import { PointsChart } from "@/registry/trophy/ui/points-chart"
 import { PointsLevelsList } from "@/registry/trophy/ui/points-levels-list"
 import { StreakBadge } from "@/registry/trophy/ui/streak-badge"
+import { BlurFade } from "./ui/blur-fade"
 
 const chartData7Days = (() => {
   // 1 data point per day for previous 7 days, always increasing by highly variable random increments
@@ -448,24 +448,33 @@ export function HomeComponentMosaic() {
         <div className="grid auto-rows-[minmax(180px,auto)] gap-4 md:grid-cols-12">
           <div className="md:col-span-3">
             <div className="flex h-full flex-col gap-4">
-              <PointsBadge name="XP" total={19845} />
-              <StreakBadge
-                size="sm"
-                length={12}
-                frequency="daily"
-                className="border-border w-full rounded-xl"
-              />
-              <AchievementGrid
-                achievements={achievements}
-                columns={2}
-                gap="sm"
-                badgeSize="sm"
-                className="h-full"
-              />
+              <BlurFade delay={0}>
+                <PointsBadge name="XP" total={19845} />
+              </BlurFade>
+              <BlurFade delay={0.05}>
+                <StreakBadge
+                  size="sm"
+                  length={12}
+                  frequency="daily"
+                  className="border-border w-full rounded-xl"
+                />
+              </BlurFade>
+              <BlurFade delay={0.1} className="h-full">
+                <AchievementGrid
+                  achievements={achievements}
+                  columns={2}
+                  gap="sm"
+                  badgeSize="sm"
+                  className="h-full"
+                />
+              </BlurFade>
             </div>
           </div>
 
-          <div className="bg-card/60 rounded-2xl border p-4 backdrop-blur md:col-span-6">
+          <BlurFade
+            delay={0.15}
+            className="bg-card/60 rounded-2xl border p-4 backdrop-blur md:col-span-6"
+          >
             <PointsChart
               data={chartData[period as keyof typeof chartData]}
               levels={chartLevels}
@@ -489,16 +498,19 @@ export function HomeComponentMosaic() {
               height={300}
               className="h-full border-0 bg-transparent p-0"
             />
-          </div>
+          </BlurFade>
 
-          <div className="overflow-hidden md:col-span-3">
+          <BlurFade delay={0.2} className="overflow-hidden md:col-span-3">
             <PointsLevelsList
               levels={levels}
               className="py-2 [&_[role=listitem]]:grid-cols-[8rem_1fr_auto] [&_[role=listitem]]:px-3 [&_[role=listitem]]:py-2.5 [&_[role=listitem]]:pr-0"
             />
-          </div>
+          </BlurFade>
 
-          <div className="bg-card/60 overflow-hidden rounded-2xl border backdrop-blur md:col-span-4">
+          <BlurFade
+            delay={0.25}
+            className="bg-card/60 overflow-hidden rounded-2xl border backdrop-blur md:col-span-4"
+          >
             <LeaderboardRankings
               rankings={rankings}
               className="h-full border-0"
@@ -506,30 +518,38 @@ export function HomeComponentMosaic() {
               defaultPageSize={10}
               showPagination
             />
-          </div>
+          </BlurFade>
 
           <div className="flex h-full flex-col gap-4 overflow-hidden md:col-span-8">
-            <PointsBoost
-              boost={{
-                name: "Double XP Weekend",
-                status: "active",
-                description: "Enjoy double XP on all activity this weekend.",
-                multiplier: 2,
-                endDate: new Date(
-                  Date.now() + 1000 * 60 * 60 * 24 * 2
-                ).toISOString(),
-              }}
-              cta={{ link: "#", text: "Do something" }}
-            />
+            <BlurFade delay={0.3}>
+              <PointsBoost
+                boost={{
+                  name: "Double XP Weekend",
+                  status: "active",
+                  description: "Enjoy double XP on all activity this weekend.",
+                  multiplier: 2,
+                  endDate: new Date(
+                    Date.now() + 1000 * 60 * 60 * 24 * 2
+                  ).toISOString(),
+                }}
+                cta={{ link: "#", text: "Do something" }}
+              />
+            </BlurFade>
             <div className="grid auto-rows-[minmax(180px,auto)] gap-4 md:grid-cols-12">
-              <div className="bg-card/60 rounded-2xl border backdrop-blur md:col-span-7">
+              <BlurFade
+                delay={0.35}
+                className="bg-card/60 rounded-2xl border backdrop-blur md:col-span-7"
+              >
                 <PointsAwards
                   awards={awardsRows}
                   className="h-full border-0 bg-transparent"
                 />
-              </div>
+              </BlurFade>
               <div className="flex flex-col gap-4 md:col-span-5">
-                <div className="bg-card/60 flex justify-center overflow-hidden rounded-2xl border p-4 backdrop-blur">
+                <BlurFade
+                  delay={0.4}
+                  className="bg-card/60 flex justify-center overflow-hidden rounded-2xl border p-4 backdrop-blur"
+                >
                   <Button
                     variant="outline"
                     onClick={() => setAchievementModalOpen(true)}
@@ -537,8 +557,11 @@ export function HomeComponentMosaic() {
                   >
                     Unlock achievement
                   </Button>
-                </div>
-                <div className="bg-card/60 flex justify-center overflow-hidden rounded-2xl border p-4 backdrop-blur">
+                </BlurFade>
+                <BlurFade
+                  delay={0.45}
+                  className="bg-card/60 flex justify-center overflow-hidden rounded-2xl border p-4 backdrop-blur"
+                >
                   <LeaderboardPodium
                     rankings={[
                       {
@@ -566,8 +589,8 @@ export function HomeComponentMosaic() {
                     size="sm"
                     className="h-full"
                   />
-                </div>
-                <div className="overflow-hidden">
+                </BlurFade>
+                <BlurFade delay={0.5} className="overflow-hidden">
                   <AchievementList
                     achievements={[achievements[0]!]}
                     columns={2}
@@ -575,7 +598,7 @@ export function HomeComponentMosaic() {
                     badgeSize="sm"
                     className="h-full w-full"
                   />
-                </div>
+                </BlurFade>
               </div>
             </div>
           </div>
diff --git a/apps/www/components/ui/blur-fade.tsx b/apps/www/components/ui/blur-fade.tsx
new file mode 100644
index 0000000..4dd7ff0
--- /dev/null
+++ b/apps/www/components/ui/blur-fade.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { useRef } from "react"
+import {
+    AnimatePresence,
+    motion,
+    useInView,
+    type MotionProps,
+    type UseInViewOptions,
+    type Variants,
+} from "motion/react"
+
+type MarginType = UseInViewOptions["margin"]
+
+interface BlurFadeProps extends MotionProps {
+    children: React.ReactNode
+    className?: string
+    variant?: {
+        hidden: { y: number }
+        visible: { y: number }
+    }
+    duration?: number
+    delay?: number
+    offset?: number
+    direction?: "up" | "down" | "left" | "right"
+    inView?: boolean
+    inViewMargin?: MarginType
+    blur?: string
+}
+
+const getFilter = (v: Variants[string]) =>
+    typeof v === "function" ? undefined : v.filter
+
+export function BlurFade({
+    children,
+    className,
+    variant,
+    duration = 0.4,
+    delay = 0,
+    offset = 6,
+    direction = "down",
+    inView = false,
+    inViewMargin = "-50px",
+    blur = "6px",
+    ...props
+}: BlurFadeProps) {
+    const ref = useRef(null)
+    const inViewResult = useInView(ref, { once: true, margin: inViewMargin })
+    const isInView = !inView || inViewResult
+    const defaultVariants: Variants = {
+        hidden: {
+            [direction === "left" || direction === "right" ? "x" : "y"]:
+                direction === "right" || direction === "down" ? -offset : offset,
+            opacity: 0,
+            filter: `blur(${blur})`,
+        },
+        visible: {
+            [direction === "left" || direction === "right" ? "x" : "y"]: 0,
+            opacity: 1,
+            filter: `blur(0px)`,
+        },
+    }
+    const combinedVariants = variant ?? defaultVariants
+
+    const hiddenFilter = getFilter(combinedVariants.hidden)
+    const visibleFilter = getFilter(combinedVariants.visible)
+
+    const shouldTransitionFilter =
+        hiddenFilter != null &&
+        visibleFilter != null &&
+        hiddenFilter !== visibleFilter
+
+    return (
+        <AnimatePresence>
+            <motion.div
+                ref={ref}
+                initial="hidden"
+                animate={isInView ? "visible" : "hidden"}
+                exit="hidden"
+                variants={combinedVariants}
+                transition={{
+                    delay: 0.04 + delay,
+                    duration,
+                    ease: "easeOut",
+                    ...(shouldTransitionFilter ? { filter: { duration } } : {}),
+                }}
+                className={className}
+                {...props}
+            >
+                {children}
+            </motion.div>
+        </AnimatePresence>
+    )
+}
diff --git a/apps/www/components/ui/text-animate.tsx b/apps/www/components/ui/text-animate.tsx
new file mode 100644
index 0000000..46f4bfc
--- /dev/null
+++ b/apps/www/components/ui/text-animate.tsx
@@ -0,0 +1,445 @@
+"use client"
+
+import { memo } from "react"
+import {
+    AnimatePresence,
+    motion,
+    Variants,
+    type DOMMotionComponents,
+    type MotionProps,
+} from "motion/react"
+
+import { cn } from "@/lib/utils"
+
+type AnimationType = "text" | "word" | "character" | "line"
+type AnimationVariant =
+    | "fadeIn"
+    | "blurIn"
+    | "blurInUp"
+    | "blurInDown"
+    | "slideUp"
+    | "slideDown"
+    | "slideLeft"
+    | "slideRight"
+    | "scaleUp"
+    | "scaleDown"
+
+const motionElements = {
+    article: motion.article,
+    div: motion.div,
+    h1: motion.h1,
+    h2: motion.h2,
+    h3: motion.h3,
+    h4: motion.h4,
+    h5: motion.h5,
+    h6: motion.h6,
+    li: motion.li,
+    p: motion.p,
+    section: motion.section,
+    span: motion.span,
+} as const
+
+type MotionElementType = Extract<
+    keyof DOMMotionComponents,
+    keyof typeof motionElements
+>
+
+interface TextAnimateProps extends Omit<MotionProps, "children"> {
+    /**
+     * The text content to animate
+     */
+    children: string
+    /**
+     * The class name to be applied to the component
+     */
+    className?: string
+    /**
+     * The class name to be applied to each segment
+     */
+    segmentClassName?: string
+    /**
+     * The delay before the animation starts
+     */
+    delay?: number
+    /**
+     * The duration of the animation
+     */
+    duration?: number
+    /**
+     * Custom motion variants for the animation
+     */
+    variants?: Variants
+    /**
+     * The element type to render
+     */
+    as?: MotionElementType
+    /**
+     * How to split the text ("text", "word", "character")
+     */
+    by?: AnimationType
+    /**
+     * Whether to start animation when component enters viewport
+     */
+    startOnView?: boolean
+    /**
+     * Whether to animate only once
+     */
+    once?: boolean
+    /**
+     * The animation preset to use
+     */
+    animation?: AnimationVariant
+    /**
+     * Whether to enable accessibility features (default: true)
+     */
+    accessible?: boolean
+}
+
+const staggerTimings: Record<AnimationType, number> = {
+    text: 0.06,
+    word: 0.05,
+    character: 0.03,
+    line: 0.06,
+}
+
+const defaultContainerVariants = {
+    hidden: { opacity: 1 },
+    show: {
+        opacity: 1,
+        transition: {
+            delayChildren: 0,
+            staggerChildren: 0.05,
+        },
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            staggerChildren: 0.05,
+            staggerDirection: -1,
+        },
+    },
+}
+
+const defaultItemVariants: Variants = {
+    hidden: { opacity: 0 },
+    show: {
+        opacity: 1,
+    },
+    exit: {
+        opacity: 0,
+    },
+}
+
+const defaultItemAnimationVariants: Record<
+    AnimationVariant,
+    { container: Variants; item: Variants }
+> = {
+    fadeIn: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { opacity: 0, y: 20 },
+            show: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                    duration: 0.3,
+                },
+            },
+            exit: {
+                opacity: 0,
+                y: 20,
+                transition: { duration: 0.3 },
+            },
+        },
+    },
+    blurIn: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { opacity: 0, filter: "blur(10px)" },
+            show: {
+                opacity: 1,
+                filter: "blur(0px)",
+                transition: {
+                    duration: 0.3,
+                },
+            },
+            exit: {
+                opacity: 0,
+                filter: "blur(10px)",
+                transition: { duration: 0.3 },
+            },
+        },
+    },
+    blurInUp: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { opacity: 0, filter: "blur(10px)", y: 20 },
+            show: {
+                opacity: 1,
+                filter: "blur(0px)",
+                y: 0,
+                transition: {
+                    y: { duration: 0.3 },
+                    opacity: { duration: 0.4 },
+                    filter: { duration: 0.3 },
+                },
+            },
+            exit: {
+                opacity: 0,
+                filter: "blur(10px)",
+                y: 20,
+                transition: {
+                    y: { duration: 0.3 },
+                    opacity: { duration: 0.4 },
+                    filter: { duration: 0.3 },
+                },
+            },
+        },
+    },
+    blurInDown: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { opacity: 0, filter: "blur(10px)", y: -20 },
+            show: {
+                opacity: 1,
+                filter: "blur(0px)",
+                y: 0,
+                transition: {
+                    y: { duration: 0.3 },
+                    opacity: { duration: 0.4 },
+                    filter: { duration: 0.3 },
+                },
+            },
+        },
+    },
+    slideUp: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { y: 20, opacity: 0 },
+            show: {
+                y: 0,
+                opacity: 1,
+                transition: {
+                    duration: 0.3,
+                },
+            },
+            exit: {
+                y: -20,
+                opacity: 0,
+                transition: {
+                    duration: 0.3,
+                },
+            },
+        },
+    },
+    slideDown: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { y: -20, opacity: 0 },
+            show: {
+                y: 0,
+                opacity: 1,
+                transition: { duration: 0.3 },
+            },
+            exit: {
+                y: 20,
+                opacity: 0,
+                transition: { duration: 0.3 },
+            },
+        },
+    },
+    slideLeft: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { x: 20, opacity: 0 },
+            show: {
+                x: 0,
+                opacity: 1,
+                transition: { duration: 0.3 },
+            },
+            exit: {
+                x: -20,
+                opacity: 0,
+                transition: { duration: 0.3 },
+            },
+        },
+    },
+    slideRight: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { x: -20, opacity: 0 },
+            show: {
+                x: 0,
+                opacity: 1,
+                transition: { duration: 0.3 },
+            },
+            exit: {
+                x: 20,
+                opacity: 0,
+                transition: { duration: 0.3 },
+            },
+        },
+    },
+    scaleUp: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { scale: 0.5, opacity: 0 },
+            show: {
+                scale: 1,
+                opacity: 1,
+                transition: {
+                    duration: 0.3,
+                    scale: {
+                        type: "spring",
+                        damping: 15,
+                        stiffness: 300,
+                    },
+                },
+            },
+            exit: {
+                scale: 0.5,
+                opacity: 0,
+                transition: { duration: 0.3 },
+            },
+        },
+    },
+    scaleDown: {
+        container: defaultContainerVariants,
+        item: {
+            hidden: { scale: 1.5, opacity: 0 },
+            show: {
+                scale: 1,
+                opacity: 1,
+                transition: {
+                    duration: 0.3,
+                    scale: {
+                        type: "spring",
+                        damping: 15,
+                        stiffness: 300,
+                    },
+                },
+            },
+            exit: {
+                scale: 1.5,
+                opacity: 0,
+                transition: { duration: 0.3 },
+            },
+        },
+    },
+}
+
+const TextAnimateBase = ({
+    children,
+    delay = 0,
+    duration = 0.3,
+    variants,
+    className,
+    segmentClassName,
+    as: Component = "p",
+    startOnView = true,
+    once = false,
+    by = "word",
+    animation = "fadeIn",
+    accessible = true,
+    ...props
+}: TextAnimateProps) => {
+    const MotionComponent = motionElements[Component]
+
+    let segments: string[] = []
+    switch (by) {
+        case "word":
+            segments = children.split(/(\s+)/)
+            break
+        case "character":
+            segments = children.split("")
+            break
+        case "line":
+            segments = children.split("\n")
+            break
+        case "text":
+        default:
+            segments = [children]
+            break
+    }
+
+    const finalVariants = variants
+        ? {
+            container: {
+                hidden: { opacity: 0 },
+                show: {
+                    opacity: 1,
+                    transition: {
+                        opacity: { duration: 0.01, delay },
+                        delayChildren: delay,
+                        staggerChildren: duration / segments.length,
+                    },
+                },
+                exit: {
+                    opacity: 0,
+                    transition: {
+                        staggerChildren: duration / segments.length,
+                        staggerDirection: -1,
+                    },
+                },
+            },
+            item: variants,
+        }
+        : animation
+            ? {
+                container: {
+                    ...defaultItemAnimationVariants[animation].container,
+                    show: {
+                        ...defaultItemAnimationVariants[animation].container.show,
+                        transition: {
+                            delayChildren: delay,
+                            staggerChildren: duration / segments.length,
+                        },
+                    },
+                    exit: {
+                        ...defaultItemAnimationVariants[animation].container.exit,
+                        transition: {
+                            staggerChildren: duration / segments.length,
+                            staggerDirection: -1,
+                        },
+                    },
+                },
+                item: defaultItemAnimationVariants[animation].item,
+            }
+            : { container: defaultContainerVariants, item: defaultItemVariants }
+
+    return (
+        <AnimatePresence mode="popLayout">
+            <MotionComponent
+                variants={finalVariants.container as Variants}
+                initial="hidden"
+                whileInView={startOnView ? "show" : undefined}
+                animate={startOnView ? undefined : "show"}
+                exit="exit"
+                className={cn("whitespace-pre-wrap", className)}
+                viewport={{ once }}
+                aria-label={accessible ? children : undefined}
+                {...props}
+            >
+                {accessible && <span className="sr-only">{children}</span>}
+                {segments.map((segment, i) => (
+                    <motion.span
+                        key={`${by}-${segment}-${i}`}
+                        variants={finalVariants.item}
+                        custom={i * staggerTimings[by]}
+                        className={cn(
+                            by === "line" ? "block" : "inline-block whitespace-pre",
+                            by === "character" && "",
+                            segmentClassName
+                        )}
+                        aria-hidden={accessible ? true : undefined}
+                    >
+                        {segment}
+                    </motion.span>
+                ))}
+            </MotionComponent>
+        </AnimatePresence>
+    )
+}
+
+// Export the memoized version
+export const TextAnimate = memo(TextAnimateBase)
diff --git a/apps/www/package.json b/apps/www/package.json
index 4f19e49..df5319d 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -47,7 +47,8 @@
     "shiki": "3.22.0",
     "tailwind-merge": "^3.0.1",
     "yaml": "^2.8.2",
-    "zod": "^4.3.6"
+    "zod": "^4.3.6",
+    "motion": "^11.18.1"
   },
   "prettier": {
     "endOfLine": "lf",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5cc38a5..21ef5c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -138,6 +138,9 @@ importers:
       lucide-react:
         specifier: 0.474.0
         version: 0.474.0(react@19.2.1)
+      motion:
+        specifier: ^11.18.1
+        version: 11.18.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       next:
         specifier: 16.0.10
         version: 16.0.10(@babel/core@7.29.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
@@ -2556,6 +2559,20 @@ packages:
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
+  framer-motion@11.18.2:
+    resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fs-extra@7.0.1:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
@@ -3372,6 +3389,26 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  motion-dom@11.18.1:
+    resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
+
+  motion-utils@11.18.1:
+    resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
+
+  motion@11.18.2:
+    resolution: {integrity: sha512-JLjvFDuFr42NFtcVoMAyC2sEjnpA8xpy6qWPyzQvCloznAyQ8FIXioxWfHiLtgYhoVpfUqSWpn1h9++skj9+Wg==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -7141,6 +7178,15 @@ snapshots:
 
   fraction.js@5.3.4: {}
 
+  framer-motion@11.18.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+    dependencies:
+      motion-dom: 11.18.1
+      motion-utils: 11.18.1
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+
   fs-extra@7.0.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -8259,6 +8305,20 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  motion-dom@11.18.1:
+    dependencies:
+      motion-utils: 11.18.1
+
+  motion-utils@11.18.1: {}
+
+  motion@11.18.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+    dependencies:
+      framer-motion: 11.18.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+
   mri@1.2.0: {}
 
   ms@2.1.3: {}