feat: update metadata, showcase page

app/docs/accordion/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Accordion - Motion-Primitives',
   description:
-    'A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsing the sections.',
+    'A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsing the sections. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { AccordionBasic } from './accordion-basic';

app/docs/animated-background/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Animated background - Motion-Primitives',
   description:
-    'Visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the active item, making it ideal for interactive lists, menus, or navigations where clear selection feedback is important.',
+    'Visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the active item, making it ideal for interactive lists, menus, or navigations where clear selection feedback is important. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { AnimatedTabs } from './animated-tabs';

app/docs/animated-group/page.mdx

@@ -1,6 +1,6 @@
 export const metadata = {
   title: 'Animated Group - Motion-Primitives',
-  description: `A wrapper that adds animated transitions to a group of child elements. It's perfect for creating staggered animations for lists, grids, or any collection of components.`,
+  description: `A wrapper that adds animated transitions to a group of child elements. It's perfect for creating staggered animations for lists, grids, or any collection of components. Built for React, Next.js, and Tailwind CSS.`,
 };
 
 import { AnimatedGroupPreset } from './animated-group-preset';

app/docs/animated-number/page.mdx

@@ -1,6 +1,7 @@
 export const metadata = {
   title: 'Animated Number - Motion-Primitives',
-  description: 'Easily animate numbers.',
+  description:
+    'Easily animate numbers. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { AnimatedNumberBasic } from './animated-number-basic';

app/docs/border-trail/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Border Trail - Motion-Primitives',
   description:
-    'Animated border effect that moves along the edges of its parent container.',
+    'Animated border effect that moves along the edges of its parent container. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { BorderTrailCard1 } from './border-trail-card-1';

app/docs/carousel/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Carousel - Motion-Primitives',
   description:
-    'A flexible and easy-to-use carousel with customizable navigation and indicators.',
+    'A flexible and easy-to-use carousel with customizable navigation and indicators. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { CarouselBasic } from './carousel-basic';

app/docs/cursor/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Cursor - Motion-Primitives',
   description:
-    'A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.',
+    'A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { Cursor1 } from './cursor-1';

app/docs/dialog/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Dialog - Motion-Primitives',
   description:
-    'A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. Customize the dialog with variants and transition.',
+    'A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. Customize the dialog with variants and transition. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import ComponentCodePreview from '@/components/website/component-code-preview';

app/docs/disclosure/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Disclosure - Motion-Primitives',
   description:
-    'The Disclosure component allows users to toggle the visibility of content, either collapsed or expanded.',
+    'The Disclosure component allows users to toggle the visibility of content, either collapsed or expanded. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { DisclosureBasic } from './disclosure-basic';

app/docs/dock/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Dock - Motion-Primitives',
   description:
-    'A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.',
+    'A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { AppleStyleDock } from './apple-style-dock';

app/docs/glow-effect/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Glow Effect - Motion-Primitives',
   description:
-    'A customizable glow effect with animation modes, colors, blur-sm, and transitions.',
+    'A customizable glow effect with animation modes, colors, blur-sm, and transitions. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { GlowEffectCardBackground } from './glow-effect-card-background';

app/docs/image-comparison/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Image Comparison - Motion-Primitives',
   description:
-    'Interactively compare two images with a draggable slider to reveal differences.',
+    'Interactively compare two images with a draggable slider to reveal differences. Built for React, Next.js, and Tailwind CSS.',
 };
 import { ImageComparisonBasic } from './image-comparison-basic';
 import { ImageComparisonHover } from './image-comparison-hover';

app/docs/in-view/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'In view - Motion-Primitives',
   description:
-    'Easily animate elements when they come into view. You can apply animations to elements when they enter the viewport, or when they are fully visible.',
+    'Easily animate elements when they come into view. You can apply animations to elements when they enter the viewport, or when they are fully visible. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { InViewBasic } from './in-view-basic';
@@ -80,11 +80,11 @@ Images are from [cosmos - oui are one ::](https://www.cosmos.so/biancadjardins/o
 
 ## Component API
 
-| Prop        | Type                                     | Default                                               | Description                                  |
-| :---------- | :--------------------------------------- | :---------------------------------------------------- | :--------------------------------------------|
-| children    | ReactNode                                |                                                       | The content inside the `InView` component.   |
-| variants    | `{ hidden: Variant; visible: Variant; }` | `{ hidden: { opacity: 0 }, visible: { opacity: 1 } }` | Variants to define the animation states.     |
-| transition  | Transition                               |                                                       | Specifies the animation transitions.         |
-| viewOptions | UseInViewOptions                         |                                                       | Options to configure the in-view behavior.   |
-| as          | React.ElementType                        | 'div'                                                 | The HTML element to render the component as. |
-| once        | Boolean                                  | `undefined` (false)                                   | If `true`, the animation will play only once.|
+| Prop        | Type                                     | Default                                               | Description                                   |
+| :---------- | :--------------------------------------- | :---------------------------------------------------- | :-------------------------------------------- |
+| children    | ReactNode                                |                                                       | The content inside the `InView` component.    |
+| variants    | `{ hidden: Variant; visible: Variant; }` | `{ hidden: { opacity: 0 }, visible: { opacity: 1 } }` | Variants to define the animation states.      |
+| transition  | Transition                               |                                                       | Specifies the animation transitions.          |
+| viewOptions | UseInViewOptions                         |                                                       | Options to configure the in-view behavior.    |
+| as          | React.ElementType                        | 'div'                                                 | The HTML element to render the component as.  |
+| once        | Boolean                                  | `undefined` (false)                                   | If `true`, the animation will play only once. |

app/docs/infinite-slider/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Infinite Slider - Motion-Primitives',
   description:
-    'Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases.',
+    'Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases. Built for React, Next.js, and Tailwind CSS.',
 };
 import { InfiniteSliderBasic } from './infinite-slider-basic';
 import { InfiniteSliderHoverSpeed } from './infinite-slider-hover-speed';

app/docs/magnetic/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Magnetic - Motion-Primitives',
   description:
-    'A magnetic effect for elements that allows them to be attracted to the mouse cursor.',
+    'A magnetic effect for elements that allows them to be attracted to the mouse cursor. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { MagneticBasic } from './magnetic-basic';

app/docs/morphing-dialog/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Morphing Dialog - Motion-Primitives',
   description:
-    'A dialog that uses layout animations to transition content into a focused view. It supports click-outside and escape key functionalities for closing.',
+    'A dialog that uses layout animations to transition content into a focused view. It supports click-outside and escape key functionalities for closing. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { MorphingDialogBasicOne } from './morphing-dialog-basic-1';

app/docs/morphing-popover/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Morphing Popover - Motion-Primitives',
   description:
-    'A popover that transforms from its trigger into the content using layout animations. It visually morphs instead of appearing as a separate element.',
+    'A popover that transforms from its trigger into the content using layout animations. It visually morphs instead of appearing as a separate element. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { MorphingPopoverBasic } from './morphing-popover-basic';

app/docs/progressive-blur/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Progressive blur - Motion-Primitives',
   description:
-    'A Progressive Blur component creates a layered blur effect using motion and gradient masks. It progressively blurs layers based on direction and intensity, adding visual depth.',
+    'A Progressive Blur component creates a layered blur effect using motion and gradient masks. It progressively blurs layers based on direction and intensity, adding visual depth. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { ProgressiveBlurBasic } from './progressive-blur-basic';

app/docs/scroll-progress/page.mdx

@@ -1,6 +1,7 @@
 export const metadata = {
   title: 'Scroll Progress - Motion-Primitives',
-  description: 'Animated scroll progress for your web pages.',
+  description:
+    'Animated scroll progress for your web pages. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { ScrollProgress } from '@/components/core/scroll-progress';

app/docs/sliding-number/page.mdx

@@ -1,6 +1,7 @@
 export const metadata = {
   title: 'Sliding Number - Motion-Primitives',
-  description: 'A component that slides numbers.',
+  description:
+    'A component that slides numbers. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { Clock } from './clock';

app/docs/spinning-text/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Spinning Text - Motion-Primitives',
   description:
-    'Easily animate text circularly. Customize the animation with variants and transitions.',
+    'Easily animate text circularly. Customize the animation with variants and transitions. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { SpinningTextBasic } from './spinning-text-basic';

app/docs/spotlight/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Spotlight - Motion-Primitives',
   description:
-    'A dynamic spotlight effect component that follows cursor movement.',
+    'A dynamic spotlight effect component that follows cursor movement. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { SpotlightBasic } from './spotlight-basic';

app/docs/text-effect/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Text Effect - Motion-Primitives',
   description:
-    'Easily animate text content with various effects. You can apply animations per character or per word, and customize the animation effects using custom variants or preset animations.',
+    'Easily animate text content with various effects. You can apply animations per character or per word, and customize the animation effects using custom variants or preset animations. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { TextEffectPerChar } from './text-effect-per-char';

app/docs/text-loop/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Text Loop - Motion-Primitives',
   description:
-    'Text animation that transitions between multiple items, creating an engaging looping effect.',
+    'Text animation that transitions between multiple items, creating an engaging looping effect. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { TextLoopBasic } from './text-loop-basic';

app/docs/text-morph/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Text Morph - Motion-Primitives',
   description:
-    'Animates text by morphing shared letters between words, creating fluid transitions.',
+    'Animates text by morphing shared letters between words, creating fluid transitions. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { TextMorphButton } from './text-morph-button';

app/docs/text-roll/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Text Roll - Motion-Primitives',
   description:
-    'A text roll component that rotates each character, fully customizable for nice text animations.',
+    'A text roll component that rotates each character, fully customizable for nice text animations. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { TextRollBasic } from './text-roll-basic';

app/docs/text-scramble/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Text Scramble - Motion-Primitives',
   description:
-    'Text animation that transforms text by randomly cycling through characters before settling on the final content, creating an engaging cryptographic effect.',
+    'Text animation that transforms text by randomly cycling through characters before settling on the final content, creating an engaging cryptographic effect. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { TextScrambleBasic } from './text-scramble-basic';

app/docs/text-shimmer-wave/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Text Shimmer Wave - Motion-Primitives',
   description:
-    'Shimmer wave effect on text. Easily adjust the wave effect, spread, duration, and more.',
+    'Shimmer wave effect on text. Easily adjust the wave effect, spread, duration, and more. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import ComponentCodePreview from '@/components/website/component-code-preview';

app/docs/text-shimmer/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Text Shimmer - Motion-Primitives',
   description:
-    'Shimmer effect on text. Easily adjust the duration and the spread of the shimmer effect.',
+    'Shimmer effect on text. Easily adjust the duration and the spread of the shimmer effect. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { TextShimmerBasic } from './text-shimmer-basic';

app/docs/tilt/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Tilt - Motion-Primitives',
   description:
-    '3D tilt effect that responds to mouse movement, enhancing UI elements with a dynamic depth effect, customizable rotation factors and spring options.',
+    '3D tilt effect that responds to mouse movement, enhancing UI elements with a dynamic depth effect, customizable rotation factors and spring options. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import { TiltCard1 } from './tilt-card-1';

app/docs/toolbar-dynamic/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Toolbar Dynamic - Motion-Primitives',
   description:
-    'Adjusts width dynamically to accommodate varying tool requirements. Starts small and expands to offer more tools as needed.',
+    'Adjusts width dynamically to accommodate varying tool requirements. Starts small and expands to offer more tools as needed. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import ToolbarDynamic from '@/components/core/toolbar-dynamic';

app/docs/toolbar-expandable/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Toolbar Expandable - Motion-Primitives',
   description:
-    'Changes height based on content, expanding to display more tools and shrinking to save space. Keeps your screen organized and efficient.',
+    'Changes height based on content, expanding to display more tools and shrinking to save space. Keeps your screen organized and efficient. Built for React, Next.js, and Tailwind CSS.',
 };
 
 import ToolbarExpandable from '@/components/core/toolbar-expandable';

app/docs/transition-panel/page.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Transition Panel - Motion-Primitives',
   description:
-    "Easy way to switch between different pieces of content with enter and exit animations. It's perfect for enhancing user experience in areas such as onboarding card, settings adjustments, or any interactive content that requires a visual transition between states.",
+    "Easy way to switch between different pieces of content with enter and exit animations. It's perfect for enhancing user experience in areas such as onboarding card, settings adjustments, or any interactive content that requires a visual transition between states. Built for React, Next.js, and Tailwind CSS.",
 };
 
 import { TabsTransitionPanel } from './transition-panel-tabs';

app/layout.tsx

@@ -9,9 +9,10 @@ const inter = Inter({ subsets: ['latin'] });
 const geistMono = GeistMono;
 
 export const metadata: Metadata = {
-  title: 'Motion-Primitives',
+  title:
+    'Motion-Primitives - UI kit to make beautiful, animated interfaces, faster.',
   description:
-    'UI kit to make beautiful, animated interfaces, faster. Open-source and customizable.',
+    'Motion-Primitives is an open-source UI kit to make beautiful, animated interfaces, faster. Built for React, Next.js, and Tailwind CSS.',
 };
 
 export default function RootLayout({