Convert color codes to Oklch + Seo improvements in docs

.gitignore

@@ -13,3 +13,6 @@ dist/
 .DS_Store
 chromatic.log
 build-storybook.log
+
+
+LLM.md

docs/app/baseSeo.ts

@@ -0,0 +1,9 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+
+const baseSeoMetadata = generateSeoMetadata({
+    title: "Rad UI",
+    description: "Rad UI is a fast, flexible, and accessible open-source React UI library. Offering headless and unstyled components, it provides developers with the flexibility to customize and integrate seamlessly into any design system.",
+})
+
+export default baseSeoMetadata

docs/app/docs/components/accordion/seo.ts

@@ -2,7 +2,8 @@ import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
 
 const accordionMetadata = generateSeoMetadata({
     title: "Accordion - Rad UI",
-    description: "A headless Accordion, customizable component for React applications. Toggle content visibility, reduce clutter, and improve user experience. WCAG compliant.",
-})
+    description: "A headless, customizable Accordion component for React. Manage content visibility, declutter your UI, and enhance user experience, with full WCAG compliance."
+});
+
 
 export default accordionMetadata

docs/app/docs/components/aspect-ratio/page.mdx

@@ -2,6 +2,9 @@ import Documentation from "@/components/layout/Documentation/Documentation"
 import AspectRatio from "@radui/ui/AspectRatio"
 import codeUsage, { AspectRatioTable } from "./docs/codeUsage"
 import Card from "@radui/ui/Card"
+import aspectRatioMetadata from "./seo"
+
+export const metadata = aspectRatioMetadata
 
 <Documentation 
   title="AspectRatio"  

docs/app/docs/components/aspect-ratio/seo.ts

@@ -0,0 +1,9 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const aspectRatioMetadata = generateSeoMetadata({
+    title: "Aspect Ratio - Rad UI",
+    description: "A headless React component that helps maintain aspect ratios for images, videos, and other elements, offering flexibility and customization."
+});
+
+
+export default aspectRatioMetadata

docs/app/docs/components/avatar-group/page.mdx

@@ -1,6 +1,9 @@
 import Documentation from "@/components/layout/Documentation/Documentation"
 import codeUsage, { anatomy } from "./docs/codeUsage"
 import Example1 from "./docs/example_1"
+import avatarGroupMetadata from "./seo"
+
+export const metadata = avatarGroupMetadata
 
 <Documentation 
     title='Avatar Group' 

docs/app/docs/components/avatar-group/seo.ts

@@ -0,0 +1,9 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const avatarGroupMetadata = generateSeoMetadata({
+    title: "Avatar Group - Rad UI",
+    description: "A headless React Avatar Group component for displaying multiple user or team profile images in a compact layout. Fully customizable and accessible."
+});
+
+
+export default avatarGroupMetadata

docs/app/docs/components/avatar/page.mdx

@@ -1,6 +1,9 @@
 import Documentation from "@/components/layout/Documentation/Documentation"
 import AvatarExample from "./docs/AvatarExample"
 import codeUsage, { avatarBasicUsageExample } from "./docs/codeUsage"
+import avatarMetadata from "./seo"
+
+export const metadata = avatarMetadata
 
 <Documentation 
   title="Avatar" 

docs/app/docs/components/avatar/seo.ts

@@ -0,0 +1,8 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const avatarMetadata = generateSeoMetadata({
+    title: "Avatar - Rad UI",
+    description: "A headless React Avatar component for displaying user images, profile pictures, or media with flexible styling options and full customization."
+});
+
+export default avatarMetadata

docs/app/docs/components/badge/page.mdx

@@ -7,6 +7,9 @@ import { code as colorCodeUsage } from './docs/colorCodeUsage';
 import BadgeVariants from './examples/BadgeVariants';
 import BadgeSizes from './examples/BadgeSizes';
 import BadgeColor from './examples/BadgeColor';
+import badgeMetadata from "./seo"
+
+export const metadata = badgeMetadata
 
 <Documentation 
     title={`Badge`} 

docs/app/docs/components/badge/seo.ts

@@ -0,0 +1,9 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const badgeMetadata = generateSeoMetadata({
+    title: "Badge - Rad UI",
+    description: "A headless React Badge component for highlighting status, notifications, or counts. Fully customizable and easy to integrate with any design system."
+});
+
+
+export default badgeMetadata

docs/app/docs/components/blockquote/page.mdx

@@ -6,9 +6,9 @@ import { code as sizeCodeUsage } from './docs/sizeCodeUsage';
 import { code as colorCodeUsage } from './docs/colorCodeUsage';
 import BlockQuoteSizes from './examples/BlockQuoteSizes';
 import BlockQuoteColor from './examples/BlockQuoteColor';
-import seo from './docs/seo';
+import blockquoteMetadata from './seo';
 
-export const metadata = seo;
+export const metadata = blockquoteMetadata;
 
 <Documentation 
   title="BlockQuote" 

docs/app/docs/components/blockquote/seo.ts

@@ -0,0 +1,8 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const blockquoteMetadata = generateSeoMetadata({
+    title: "Blockquote - Rad UI",
+    description: "A headless React Blockquote component for rendering quotations with semantic HTML. Fully accessible, customizable, and easy to integrate into any design system."
+});
+
+export default blockquoteMetadata

docs/app/docs/components/button/page.mdx

@@ -8,9 +8,9 @@ import { code as colorCodeUsage } from './docs/colorCodeUsage';
 import ButtonVariants from './examples/ButtonVariants';
 import ButtonSizes from './examples/ButtonSizes';
 import ButtonColor from './examples/ButtonColor';
-import seo from './docs/seo';
+import buttonMetadata from './seo';
 
-export const metadata = seo;
+export const metadata = buttonMetadata;
 
 <Documentation
   title="Button" 

docs/app/docs/components/button/seo.ts

@@ -0,0 +1,8 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const buttonMetadata = generateSeoMetadata({
+    title: "Button - Rad UI",
+    description: "A headless and accessible React Button component, built for customization and seamless integration with any design system."
+});
+
+export default buttonMetadata

docs/app/docs/components/callout/page.mdx

@@ -9,9 +9,9 @@ import { code as colorCodeUsage } from './docs/colorCodeUsage';
 import CalloutVariants from './examples/CalloutVariants';
 import CalloutSizes from './examples/CalloutSizes';
 import CalloutColor from './examples/CalloutColor';
-import seo from './docs/seo';
+import calloutMetadata from './seo';
 
-export const metadata = seo;
+export const metadata = calloutMetadata;
 
 <Documentation 
   title="Callout" 

docs/app/docs/components/callout/seo.ts

@@ -0,0 +1,8 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const calloutMetadata = generateSeoMetadata({
+    title: "Callout - Rad UI",
+    description: "A headless and accessible React Callout component for highlighting important messages. Fully customizable with flexible styling to match your design system."
+});
+
+export default calloutMetadata

docs/app/docs/components/card/page.mdx

@@ -3,9 +3,9 @@ import Documentation from '@/components/layout/Documentation/Documentation';
 import Card from '@radui/ui/Card';
 import Avatar from '@radui/ui/Avatar';
 import codeUsage, { api_documentation, features } from './docs/codeUsage';
-import seo from './docs/seo';
+import cardMetadata from './seo';
 
-export const metadata = seo;
+export const metadata = cardMetadata;
 
 <Documentation 
   title="Card" 

docs/app/docs/components/card/seo.ts

@@ -0,0 +1,8 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const cardMetadata = generateSeoMetadata({
+    title: "Card - Rad UI",
+    description: "A headless React Card component for structuring content. Fully accessible, customizable, and easy to integrate into any design system."
+});
+
+export default cardMetadata

docs/app/docs/components/code/page.mdx

@@ -2,9 +2,9 @@ import PageDetails from '@/components/seo/PageDetails';
 import Documentation from '@/components/layout/Documentation/Documentation';
 import Code from '@radui/ui/Code';
 import codeUsage, { api_documentation, features } from './docs/codeUsage';
-import seo from './docs/seo';
+import codeMetadata from './seo';
 
-export const metadata = seo;
+export const metadata = codeMetadata;
 
 <Documentation
   title="Code" 

docs/app/docs/components/code/seo.ts

@@ -0,0 +1,9 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const codeMetadata = generateSeoMetadata({
+    title: "Code - Rad UI",
+    description: "A headless and accessible React Code component for rendering code snippets with full customization and seamless design system integration."
+});
+
+
+export default codeMetadata

docs/app/docs/components/em/page.mdx

@@ -4,9 +4,9 @@ import Em from "@radui/ui/Em"
 import Text from "@radui/ui/Text"
 import codeUsage, { api_documentation, features } from "./docs/codeUsage"
 import EmExample from "./docs/EmExample"
-import seo from "./docs/seo"
+import emMetadata from "./seo"
 
-export const metadata = seo;
+export const metadata = emMetadata;
 
 <Documentation  
   title="Em" 

docs/app/docs/components/em/seo.ts

@@ -0,0 +1,9 @@
+import generateSeoMetadata from "@/utils/seo/generateSeoMetadata"
+
+const emMetadata = generateSeoMetadata({
+    title: "Em - Rad UI",
+    description: "A headless React component for emphasizing inline text using the <em> element. Fully accessible, easily customizable, and design system friendly."
+});
+
+
+export default emMetadata

docs/app/docs/components/heading/page.mdx

@@ -2,9 +2,9 @@ import PageDetails from '@/components/seo/PageDetails';
 import Documentation from "@/components/layout/Documentation/Documentation"
 import Heading from "@radui/ui/Heading"
 import codeUsage, { api_documentation, features } from "./docs/codeUsage"
-import seo from "./docs/seo"
+import headingMetadata from "./seo"
 
-export const metadata = seo;
+export const metadata = headingMetadata;
 
 <Documentation 
   title="Heading"