Merge pull request #2802 from gluestack/feat/meta-titles-description-updates

Feat/meta titles description updates

Author: ujjwal2608

example/storybook-nativewind/src/apps/dashboard-app/index.stories.mdx

@@ -1,6 +1,6 @@
 ---
-title: Dashboard App | gluestack-ui
-description: A dashboard app created using all the components of gluestack-ui v2
+title: gluestack-ui Dashboard App Component | React Native Dashboard App Installation
+description: Create beautiful React Native dashboard app component using gluestack-ui. Design your ideal dashboard app with advanced components for efficient app management.
 toc: false
 ---
 

example/storybook-nativewind/src/apps/kitchensink-app/index.stories.mdx

@@ -1,6 +1,6 @@
 ---
-title: Kitchensink App | gluestack-ui
-description: Showcasing interactive examples of all Gluestack components for web and native platforms.
+title: Kitchensink App | React Native UI Components | gluestack-ui
+description: Explore gluestack’s React Native UI components library with the kitchensink app. Build beautiful apps with ready-to-use React Native libraries and UI elements.
 toc: false
 ---
 

example/storybook-nativewind/src/apps/starter-kit/index.stories.mdx

@@ -1,6 +1,6 @@
 ---
-title: Starter Kit | gluestack-ui
-description: A starter kit created using all the components of gluestack-ui v2
+title: Starter Kit | React Native UI Kit | gluestack-ui
+description: Build apps faster with our Starter Kit for React & React Native. Compatible with React Native Expo, it offers a seamless React Native UI kit for streamlined app development.
 toc: false
 ---
 

example/storybook-nativewind/src/apps/storybook-app/index.stories.mdx

@@ -1,6 +1,6 @@
 ---
-title: Storybook App | gluestack-ui
-description: A storybook app created using all the components of gluestack-ui v2
+title: Storybook App | React Native Storybook | gluestack-ui
+description: Explore the gluestack's Storybook App component for streamlined React & React Native UI design. Build, test, and showcase React Native components with ease.
 toc: false
 ---
 

example/storybook-nativewind/src/apps/todo-app/index.stories.mdx

@@ -1,6 +1,6 @@
 ---
-title: Todo App | gluestack-ui
-description: A todo app created using all the components of gluestack-ui v2
+title: Todo App | React Native Todo App | gluestack-ui
+description: Build a React & React Native Todo App component with gluestack-ui. Explore gluestack-ui menu components to create a sleek, efficient Todo app interface. Perfect for your next project.
 toc: false
 ---
 

example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: Accordion | gluestack-ui | Installation, Usage, and API
+title: Accordion Component | gluestack-ui | Installation, Usage & API
 
-description: Efficiently organize and present content in a compact, interactive interface.
+description: Explore gluestack's Accordion component for Expo, next.js, React & React Native. Build sleek, interactive accordions with ease.
 
 pageTitle: Accordion
 
-pageDescription: Efficiently organize and present content in a compact, interactive interface.
+pageDescription: Explore gluestack's Accordion component for Expo, next.js, React & React Native. Build sleek, interactive accordions with ease.
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: Actionsheet | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Actionsheet Component | Installation, Usage & API
 
-description: Quickly access options overlaying the app's content for efficient user actions.
+description: Discover the ActionSheet component for Expo, React & React Native. Easily create intuitive action sheets in your app with gluestack-ui. Learn more in our detailed documentation!
 
 pageTitle: Actionsheet
 
-pageDescription: Quickly access options overlaying the app's content for efficient user actions.
+pageDescription: Discover the ActionSheet component for Expo, React & React Native. Easily create intuitive action sheets in your app with gluestack-ui. Learn more in our detailed documentation!
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Alert Component | Installation, Usage, and API
+title: gluestack-ui Alert Component | React Native Alert Installation & API
 
-description: Status indicators notify users of important system, feature, or page conditions that require attention.
+description: gluestack-ui offers a responsive React Native Alert component with multiple styles. Easily integrate alerts into your UI with customizable React Native alert styles.
 
 pageTitle: Alert
 
-pageDescription: Status indicators notify users of important system, feature, or page conditions that require attention.
+pageDescription: gluestack-ui offers a responsive React Native Alert component with multiple styles. Easily integrate alerts into your UI with customizable React Native alert styles.
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui AlertDialog Component | Installation, Usage, and API
+title: gluestack-ui AlertDialog Component | React Native Dialog Installation
 
-description: Prompt users to take action with interruptions for confirmations or important prompts.
+description: Build seamless React Native dialogs with the AlertDialog component. Enhance user engagement with smooth and responsive modal prompts.
 
 pageTitle: AlertDialog
 
-pageDescription: Prompt users to take action with interruptions for confirmations or important prompts.
+pageDescription: Build seamless React Native dialogs with the AlertDialog component. Enhance user engagement with smooth and responsive modal prompts.
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Avatar Component | Installation, Usage, and API
+title: gluestack-ui Avatar Component | Avatar Installation, Usage & API
 
-description: Enhance UI engagement with a versatile element showing user profiles via pictures, initials, or icons
+description: Enhance your UI with our React Native Avatar component. Explore gluestack's-ui Avatar for seamless design and customization. Check out the docs to add an Avatar component to your app!
 
 pageTitle: Avatar
 
-pageDescription: Enhance UI engagement with a versatile element showing user profiles via pictures, initials, or icons
+pageDescription: Enhance your UI with our React Native Avatar component. Explore gluestack's-ui Avatar for seamless design and customization. Check out the docs to add an Avatar component to your app!
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui Badge Component | Installation, Usage, and API
 
-description: Add status indicators to your interface for clear, attention-grabbing usability cues, conveying crucial information swiftly.
+description: Enhance your app with gluestack-ui's Badge component. A versatile React Native badge with multiple variants for clear status indicators in your badges component.
 
 pageTitle: Badge
 
-pageDescription: Add status indicators to your interface for clear, attention-grabbing usability cues, conveying crucial information swiftly.
+pageDescription: Enhance your app with gluestack-ui's Badge component. A versatile React Native badge with multiple variants for clear status indicators in your badges component.
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/BottomSheet/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui BottomSheet Component | Installation, Usage, and API
+title: gluestack-ui Bottomsheet Component | React Native Bottom Sheet
 
-description: The bottomsheet component is simpler implementation of gorhom bottomsheet.
+description: Implement a dynamic bottom sheet in React & React Native with gluestack's bottomsheet component. Learn how to integrate and customize the Bottom Sheet in React Native.
 
 pageTitle: BottomSheet
 
-pageDescription: The bottomsheet component is simpler implementation of gorhom bottomsheet.
+pageDescription: Implement a dynamic bottom sheet in React & React Native with gluestack's bottomsheet component. Learn how to integrate and customize the Bottom Sheet in React Native.
 
 showHeader: true
 

example/storybook-nativewind/src/components/Box/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Box Component | Installation, Usage, and API
+title: gluestack-ui Box Components | Installation, Usage, and API
 
-description: Flexible layout tool with customizable styles and props for simple to complex structures.
+description: Use gluestack-ui Box, a powerful box component for flexible layouts. Customize styles, props, and structure easily for web and native platforms.
 
 pageTitle: Box
 
-pageDescription: Flexible layout tool with customizable styles and props for simple to complex structures.
+pageDescription: Use gluestack-ui Box, a powerful box component for flexible layouts. Customize styles, props, and structure easily for web and native platforms.
 
 showHeader: true
 

example/storybook-nativewind/src/components/Button/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Button Component | Installation, Usage, and API
+title: gluestack-ui Button Component | Button Installation in React Native
 
-description: Trigger an action or event with customizable size, shape, color, and behavior.
+description: Discover a powerful button component for React & React Native with customizable size, shape, color, and behavior. Perfect for UI design & seamless user interactions.
 
 pageTitle: Button
 
-pageDescription: Trigger an action or event with customizable size, shape, color, and behavior.
+pageDescription: Discover a powerful button component for React & React Native with customizable size, shape, color, and behavior. Perfect for UI design & seamless user interactions.
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/Card/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Card Component | Installation, Usage, and API
+title: gluestack-ui Card Component | Card Installation, Usage, and API
 
-description: A Card component serves as a visual container that groups related content and actions.
+description: Build beautiful interfaces with the gluestack-ui Card component. This React Native card offers a clean, modern design for any project. Perfect for seamless card design UI integration.
 
 pageTitle: Card
 
-pageDescription: A Card component serves as a visual container that groups related content and actions.
+pageDescription: Build beautiful interfaces with the gluestack-ui Card component. This React Native card offers a clean, modern design for any project. Perfect for seamless card design UI integration.
 
 showHeader: true
 

example/storybook-nativewind/src/components/Center/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui Center Component | Installation, Usage, and API
 
-description: Helps center-align content and can create complex layouts easily.
+description: gluestack-ui Center component helps center-align text and content in React Native. Perfect for creating responsive layouts with React Native text center support.
 
 pageTitle: Center
 
-pageDescription: Helps center-align content and can create complex layouts easily.
+pageDescription: gluestack-ui Center component helps center-align text and content in React Native. Perfect for creating responsive layouts with React Native text center support.
 
 showHeader: true
 

example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Checkbox Component | Installation, Usage, and API
+title: gluestack-ui CheckBox Component | Checkbox Installation in React Native
 
-description: Base input element to toggle options on and off, ideal for forms and data systems.
+description: Build interactive forms with a checkbox component for React & React Native. Features include hover, focus, disabled states, and multiple checkbox selection.
 
 pageTitle: Checkbox
 
-pageDescription: Base input element to toggle options on and off, ideal for forms and data systems.
+pageDescription: Build interactive forms with a checkbox component for React & React Native. Features include hover, focus, disabled states, and multiple checkbox selection.
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Divider Component | Installation, Usage, and API
+title: gluestack-ui Divider Component | React Native Divider Installation
 
-description: Organize content visually with separators for a more structured, easy-to-read interface.
+description: gluestack-ui's Divider component ensures a well-structured interface. Use the Divider component for clean content separation in your design with flexible orientation options.
 
 pageTitle: Divider
 
-pageDescription: Organize content visually with separators for a more structured, easy-to-read interface.
+pageDescription: gluestack-ui's Divider component ensures a well-structured interface. Use the Divider component for clean content separation in your design with flexible orientation options.
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/Drawer/index.nw.stories.mdx

@@ -1,10 +1,12 @@
 ---
-title: Drawer | gluestack-ui | Installation, Usage, and API
+title: gluestack-ui Drawer Component | React Native Drawer Installation
+
+description: Implement a responsive Drawer component in React & React Native for navigation and content display. Learn how to install, customize, and integrate it into your project.
 
-description: A sliding panel that emerges from the edge of the screen to reveal additional content or navigation options..
 pageTitle: Drawer
 
-pageDescription: A sliding panel that emerges from the edge of the screen to reveal additional content or navigation options..
+pageDescription: Implement a responsive Drawer component in React & React Native for navigation and content display. Learn how to install, customize, and integrate it into your project.
+
 showHeader: true
 ---
 

example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Fab Component | Installation, Usage, and API
+title: gluestack-ui Fab Component | React Native Fab Installation, Usage & API
 
-description: A dynamic button that stays visible, offering convenient access to a primary action.
+description: Improve your React Native app with the FAB component. Learn how to implement a React Native FAB button using gluestack-ui for a smooth UI experience.
 
 pageTitle: Fab
 
-pageDescription: A dynamic button that stays visible, offering convenient access to a primary action.
+pageDescription: Improve your React Native app with the FAB component. Learn how to implement a React Native FAB button using gluestack-ui for a smooth UI experience.
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui FormControl Component | Installation, Usage, and API
+title: gluestack-ui FormControl Component | React FormControl Installation
 
-description: Provide context to form elements, such as invalid, disabled, or required states.
+description: Enhance form usability with FormControl components in React. Manage validation, disabled states, and more. Easy integration for seamless form handling.
 
 pageTitle: FormControl
 
-pageDescription: Provide context to form elements, such as invalid, disabled, or required states.
+pageDescription: Enhance form usability with FormControl components in React. Manage validation, disabled states, and more. Easy integration for seamless form handling.
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Grid Component | Installation, Usage, and API
+title: gluestack-ui Grid Component | React Native Grid Installation, Usage, and API
 
-description: Utilize a versatile layout tool for creating grid-based UIs with rows and columns. Flexible and robust for diverse layout structures.
+description: Create responsive layouts with the gluestack-ui Grid component. A flexible React Native grid layout for seamless UI design in web and mobile apps with rows and columns.
 
 pageTitle: Grid
 
-pageDescription: Utilize a versatile layout tool for creating grid-based UIs with rows and columns. Flexible and robust for diverse layout structures.
+pageDescription: Create responsive layouts with the gluestack-ui Grid component. A flexible React Native grid layout for seamless UI design in web and mobile apps with rows and columns.
 
 showHeader: true
 

example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui HStack Component | Installation, Usage, and API
+title: gluestack-ui HStack Component | Hstack React Native Installation
 
-description: HStack is a layout component for arranging elements horizontally.
+description: Use the gluestack-ui HStack component in React Native to align elements horizontally. Easily customize layouts with spacing and reverse props. Learn how to install and use HStack today!
 
 pageTitle: HStack
 
-pageDescription: HStack is a layout component for arranging elements horizontally.
+pageDescription: Use the gluestack-ui HStack component in React Native to align elements horizontally. Easily customize layouts with spacing and reverse props. Learn how to install and use HStack today!
 
 showHeader: true
 

example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
 title: gluestack-ui Heading Component | Installation, Usage, and API
 
-description: Generates headings from h1 to h6 with different sizes and semantic meanings.
+description: Explore the gluestack-ui Heading Component with installation steps, API reference, and usage examples. Customize React Native headings with different sizes and styles easily for your projects.
 
 pageTitle: Heading
 
-pageDescription: Generates headings from h1 to h6 with different sizes and semantic meanings.
+pageDescription: Explore the gluestack-ui Heading Component with installation steps, API reference, and usage examples. Customize React Native headings with different sizes and styles easily for your projects.
 
 showHeader: true
 

example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Icon Component | Installation, Usage, and API
+title: gluestack-ui Icon Component | Installation, Usage & API
 
-description: Icons provide clear, intuitive visual cues for better usability and accessibility in digital products.
+description: Use gluestack-ui Icon component to enhance your web and mobile app with scalable component icons. A must-have React Native icon library for modern development!
 
 pageTitle: Icon
 
-pageDescription: Icons provide clear, intuitive visual cues for better usability and accessibility in digital products.
+pageDescription: Use gluestack-ui Icon component to enhance your web and mobile app with scalable component icons. A must-have React Native icon library for modern development!
 
 showHeader: true
 

example/storybook-nativewind/src/components/Image/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Image Component | Installation, Usage, and API
+title: gluestack-ui Image Component | Image Installation, Usage & API
 
-description: Enhance your app or website with captivating visuals using our Image feature.
+description: Enhance your app with the Image component from gluestack-ui. Build seamless UI component images in React & React Native with ease. Explore the docs now!
 
 pageTitle: Image
 
-pageDescription: Enhance your app or website with captivating visuals using our Image feature.
+pageDescription: Enhance your app with the Image component from gluestack-ui. Build seamless UI component images in React & React Native with ease. Explore the docs now!
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/Input/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Input Component | Installation, Usage, and API
+title: gluestack-ui Input Component | React Native Input Installation
 
-description: Gather user input with a sleek, user-friendly text field for forms and search features.
+description: A feature-rich React Native Input component – supports icons, validation, and styling options for seamless user input in your mobile app.
 
 pageTitle: Input
 
-pageDescription: Gather user input with a sleek, user-friendly text field for forms and search features.
+pageDescription: A feature-rich React Native Input component – supports icons, validation, and styling options for seamless user input in your mobile app.
 
 showHeader: true
 ---

example/storybook-nativewind/src/components/Link/index.nw.stories.mdx

@@ -1,11 +1,11 @@
 ---
-title: gluestack-ui Link Component | Installation, Usage, and API
+title: gluestack-ui Link Component | React Native Link Installation
 
-description: Enable seamless navigation with hyperlinked text for a user-friendly website experience.
+description: Enhance navigation with a React Native link component. Seamless UI link design for intuitive user experiences. Learn more!
 
 pageTitle: Link
 
-pageDescription: Enable seamless navigation with hyperlinked text for a user-friendly website experience.
+pageDescription: Enhance navigation with a React Native link component. Seamless UI link design for intuitive user experiences. Learn more!
 
 showHeader: true
 ---