fix: reduce number characters for description

content/en/blog/announcing-ux-patterns-launch.mdx

@@ -1,7 +1,7 @@
 ---
 title: Launching "UX Patterns for Devs"
 image: ../../../public/img/opengraph-image.png
-description: "Introducing today my new open-source resource filled with proven UX patterns, practical code snippets, and actionable tips - empowering developers to build more accessible and user-friendly interfaces."
+description: "Introducing a new open-source resource with UX patterns and code snippets to help developers build more accessible and user-friendly interfaces."
 date: 2024-12-11
 authors:
   - name: David Dias

content/en/blog/ux-patterns-gpt.mdx

@@ -1,7 +1,7 @@
 ---
 title: UX Patterns for Devs GPT
 image: ../../../public/blog/ux-patterns-gpt.jpg
-description: "I'm excited to announce the launch of UX Patterns for Devs GPT, a new AI-powered tool connected to the UX Patterns for Devs project."
+description: "Announcing UX Patterns for Devs GPT, an AI tool that enhances the UX Patterns project with intelligent pattern suggestions."
 date: 2024-12-13
 authors:
   - name: David Dias

content/en/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Build Better User Experiences"
-description: "UX Patterns for Developers is a collection of UX patterns for everyone but specially towards developers who want to understand how to build effective UI components accessible and usable."
+description: "A collection of UX patterns for developers to build effective, accessible, and usable UI components."
 searchable: false
 ---
 

content/en/pattern-guide/choosing-input-types.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Select the most appropriate HTML input type based on your data collection needs"
-description: "A comprehensive guide to choosing between different HTML input types based on factors like data structure, user experience, and validation requirements."
+description: "Guide to choosing HTML input types based on data structure, user experience, and validation needs."
 icon: FormInput
 status: complete
 ---

content/en/pattern-guide/pagination-vs-infinite-scroll.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Choose the right content loading pattern based on your user needs and content type"
-description: "An in-depth comparison and decision guide to help you choose between pagination and infinite scroll patterns based on factors like content type, user behavior, and technical requirements."
+description: "Compare pagination and infinite scroll patterns to choose the best option based on content type and user behavior."
 icon: Split
 ---
 

content/en/patterns/books.mdx

@@ -1,5 +1,5 @@
 ---
-description: "Recommended UX books for developers"
+description: "A curated list of essential UX books to help developers improve their design and implementation skills."
 icon: Book
 ---
 

content/en/patterns/content-management/drag-and-drop.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Allow users to reorder items intuitively"
-description: "Implement drag and drop functionality in your web applications. Learn best practices for creating intuitive item reordering with proper accessibility and touch support."
+description: "Build intuitive drag and drop functionality with accessibility and touch support."
 icon: Grab
 ---
 

content/en/patterns/content-management/expandable-text.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Show or hide additional text content on demand"
-description: "Learn how to implement expandable text components in your web applications. Discover best practices for progressive disclosure, accessibility, and user experience with practical examples."
+description: "Create expandable text components with progressive disclosure and accessibility features for better content management."
 icon: PlusSquare
 status: complete
 ---
@@ -198,7 +198,7 @@ Each expandable text interaction provides valuable insights into user behavior.
 
 ### Event Payload Structure
 
-To ensure consistent tracking, here’s a recommended event format:
+To ensure consistent tracking, here's a recommended event format:
 
 ```json
 {
@@ -227,7 +227,7 @@ By analyzing tracking data, we can optimize the expandable text experience:
 
 - 🚨 **Low Expand Rate?**
   → Users may not notice or feel the need to expand content.
-  **Optimization:** Adjust design cues (e.g., larger icons, clearer labels like “Read More”), or test making the content visible by default.
+  **Optimization:** Adjust design cues (e.g., larger icons, clearer labels like "Read More"), or test making the content visible by default.
 
 - ⏳ **Short Read Time After Expand?**
   → Users might not be engaging with the expanded content.
@@ -239,7 +239,7 @@ By analyzing tracking data, we can optimize the expandable text experience:
 
 - 🔁 **High Re-Expand Rate?**
   → Users may be struggling to retain information after collapsing the text.
-  **Optimization:** Consider keeping key details visible at all times or providing a “sticky” summary.
+  **Optimization:** Consider keeping key details visible at all times or providing a "sticky" summary.
 
 - ⚙️ **Auto-Expand Not Leading to Higher Engagement?**
   → Automatically expanded content may be ignored.

content/en/patterns/content-management/modal.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Display focused content or actions"
-description: "Create effective modal dialogs for your web applications. Learn best practices for implementing accessible modal windows with proper focus management and keyboard interactions."
+description: "Build accessible modal dialogs with proper focus management, keyboard interactions, and user experience best practices."
 icon: Maximize2
 status: complete
 ---
@@ -212,63 +212,63 @@ graph TD
 
 #### Forcing Users Into a Modal (No Close Option)
 
-**❌ What’s Wrong?** Users feel trapped if they can’t exit a modal.
+**❌ What's Wrong?** Users feel trapped if they can't exit a modal.
 
 **How to Fix It?** Always provide a clear **close button (X)** and support the `Esc` key for dismissal.
 
 ---
 
 #### Triggering Modals on Page Load
 
-**❌ What’s Wrong?** Unrequested modals on page load can feel like pop-ups that disrupt user flow.
+**❌ What's Wrong?** Unrequested modals on page load can feel like pop-ups that disrupt user flow.
 
 **How to Fix It?** Only show modals when the user **intentionally** initiates them.
 
 ---
 
 #### Disrupting Background Page Focus
 
-**❌ What’s Wrong?** Some modals allow interaction with background content while open, causing layered focus.
+**❌ What's Wrong?** Some modals allow interaction with background content while open, causing layered focus.
 
-**How to Fix It?** Add a **focus trap** inside the modal and prevent background interaction until it’s closed.
+**How to Fix It?** Add a **focus trap** inside the modal and prevent background interaction until it's closed.
 
 ---
 
 #### Modal Closes on Accidental Click
 
-**❌ What’s Wrong?** Clicking outside the modal might unintentionally dismiss it, frustrating or confusing users.
+**❌ What's Wrong?** Clicking outside the modal might unintentionally dismiss it, frustrating or confusing users.
 
-**How to Fix It?** Only allow closing on background click if it’s non-critical info. For important data, require an explicit close action.
+**How to Fix It?** Only allow closing on background click if it's non-critical info. For important data, require an explicit close action.
 
 ---
 
 #### Missing or Incorrect ARIA Markup (Accessibility)
 
-**❌ What’s Wrong?** If the modal isn’t announced as a dialog (e.g., missing `role="dialog"`), screen readers might not indicate it properly.
+**❌ What's Wrong?** If the modal isn't announced as a dialog (e.g., missing `role="dialog"`), screen readers might not indicate it properly.
 
 **How to Fix It?** Use `role="dialog"` or the `<dialog>` element with `aria-modal="true"`. Provide a clear heading or label.
 
 ---
 
 #### Failing to Return Focus to the Trigger (Accessibility)
 
-**❌ What’s Wrong?** When the modal closes, focus can get lost (e.g., jump to the top of the page).
+**❌ What's Wrong?** When the modal closes, focus can get lost (e.g., jump to the top of the page).
 
 **How to Fix It?** Store the element that triggered the modal and **return focus** to it after closing.
 
 ---
 
 #### No Visible Focus States (Accessibility)
 
-**❌ What’s Wrong?** Keyboard users can’t see where they are if no focus outline is visible on buttons or form fields.
+**❌ What's Wrong?** Keyboard users can't see where they are if no focus outline is visible on buttons or form fields.
 
-**How to Fix It?** Ensure a **clear, high-contrast focus indicator** is present. Validate you can “Tab” through all interactive elements.
+**How to Fix It?** Ensure a **clear, high-contrast focus indicator** is present. Validate you can "Tab" through all interactive elements.
 
 ---
 
 #### Overly Complex or Overstuffed Modals (Accessibility)
 
-**❌ What’s Wrong?** If a modal presents too much content (long forms, lots of text), users relying on screen readers may be overwhelmed.
+**❌ What's Wrong?** If a modal presents too much content (long forms, lots of text), users relying on screen readers may be overwhelmed.
 
 **How to Fix It?** Keep modals **brief and to the point**. For more complex workflows, use a dedicated page or a multi-step wizard.
 
@@ -293,7 +293,7 @@ Each modal interaction provides valuable insights into user behavior. Below are
 
 ### Event Payload Structure
 
-To ensure consistent tracking, here’s a recommended event format:
+To ensure consistent tracking, here's a recommended event format:
 
 ```json
 {
@@ -313,7 +313,7 @@ Once tracking is in place, the following metrics provide actionable insights:
 - Open Rate → Percentage of users who see the modal (manual vs. auto-open).
 - Engagement Rate → Percentage of users who interact with the modal before closing.
 - Dismissal Rate → Percentage of users who close the modal without taking any action.
-- Completion Rate → Percentage of users who complete the modal’s primary action.
+- Completion Rate → Percentage of users who complete the modal's primary action.
 - Time in Modal → Average time users spend inside the modal.
 
 ### Insights & Optimization Based on Tracking
@@ -340,7 +340,7 @@ By analyzing tracking data, we can optimize the modal experience:
   → If most users dismiss auto-open modals immediately, they may be perceived as annoying.
   **Optimization:** Make them **manual-triggered only**, delay their appearance, or ensure they are only shown when truly relevant.
 
-By continuously monitoring these metrics, we can refine the modal’s effectiveness and ensure it enhances, rather than disrupts, the user experience.
+By continuously monitoring these metrics, we can refine the modal's effectiveness and ensure it enhances, rather than disrupts, the user experience.
 
 ## Localization
 

content/en/patterns/forms/autocomplete.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Suggest options as users type"
-description: "Implement user-friendly autocomplete functionality in your web applications. Learn best practices for search suggestions, keyboard navigation, and accessibility with practical examples."
+description: "Build user-friendly autocomplete with search suggestions, keyboard navigation, and accessibility features."
 icon: Search
 status: complete
 ---

content/en/patterns/forms/button.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Trigger actions and submit forms"
-description: "Learn how to implement accessible and user-friendly buttons in your web applications. Discover best practices for button design, states, accessibility, and implementation with code examples and guidelines."
+description: "Create accessible and user-friendly buttons with proper states, design patterns, and implementation guidelines."
 icon: MousePointerClick
 ogImage: /covers/patterns/button.png
 status: complete

content/en/patterns/forms/currency-input.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Enter and format monetary values"
-description: "Implement user-friendly currency input fields in your web applications. Learn best practices for number formatting, validation, and international currency handling."
+description: "Create currency input fields with number formatting and international currency handling."
 icon: DollarSign
 ---
 

content/en/patterns/forms/date-input.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Enter dates in a structured text format"
-description: "Implement user-friendly date input fields with proper validation and formatting. Learn best practices for collecting dates in forms, including accessibility, localization, and browser compatibility considerations."
+description: "Build date input fields with validation, formatting, and localization features."
 icon: Calendar
 ---
 

content/en/patterns/forms/date-picker.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Select dates from a calendar interface"
-description: "Build user-friendly date picker components for your web applications. Learn best practices for calendar interfaces, keyboard navigation, and accessibility."
+description: "Create user-friendly date pickers with calendar interfaces and keyboard navigation."
 icon: CalendarDays
 ---
 

content/en/patterns/forms/date-range.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Select a range between two dates"
-description: "Implement date range selection components in your web applications. Learn best practices for calendar interfaces, validation, and accessibility considerations."
+description: "Build date range selection with calendar interfaces and validation features."
 icon: CalendarRange
 ---
 

content/en/patterns/forms/password.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Secure password entry with feedback"
-description: "Implement secure and user-friendly password fields in your web applications. Learn best practices for password validation, strength indicators, and accessibility with practical examples."
+description: "Build secure and user-friendly password fields with validation, strength indicators, and accessibility features."
 icon: Lock
 status: complete
 ---

content/en/patterns/forms/phone-number.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Format and validate phone numbers"
-description: "Build user-friendly phone number input fields for your web applications. Learn best practices for international number formats, validation, and accessibility."
+description: "Create phone number inputs with international format support and validation features."
 icon: Phone
 ---
 

content/en/patterns/forms/rating-input.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Rate something with a number of stars"
-description: "Create user-friendly rating input components for your web applications. Learn best practices for star ratings, numerical scales, and accessibility considerations."
+description: "Build user-friendly rating components with star ratings and accessibility features."
 icon: Star
 ---
 

content/en/patterns/forms/rich-text-editor.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Edit and format text content"
-description: "Build accessible rich text editors for your web applications. Learn best practices for text formatting, keyboard shortcuts, and accessibility considerations."
+description: "Create accessible rich text editors with text formatting tools and keyboard shortcuts."
 icon: PenTool
 ---
 

content/en/patterns/forms/signature-pad.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Allow users to sign their name"
-description: "Implement digital signature capture in your web applications. Learn best practices for touch-enabled signature pads, canvas drawing, and signature validation."
+description: "Build touch-enabled signature capture with canvas drawing and validation features."
 icon: Pen
 ---
 

content/en/patterns/forms/tag-input.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Enter and format tags"
-description: "Implement tag input components for dynamic keyword entry in your web applications. Learn best practices for tag creation, deletion, and validation with accessibility support."
+description: "Create tag input components for dynamic keyword entry with validation and accessibility support."
 icon: Tags
 ---
 

content/en/patterns/forms/text-field.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Enter and edit text content"
-description: "Learn how to implement accessible text input fields in your web applications. Discover best practices for validation, error handling, and user experience with practical examples."
+description: "Implement accessible text input fields with validation, error handling, and user experience best practices."
 icon: Text
 status: complete
 ---

content/en/patterns/forms/time-input.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Enter time in a structured format"
-description: "Create user-friendly time input fields for your web applications. Learn best practices for time selection, validation, and accessibility considerations."
+description: "Build user-friendly time input fields with validation and accessibility features."
 icon: Clock
 ---
 

content/en/patterns/navigation/back-to-top.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Quickly navigate back to the top of the page"
-description: "Learn how to implement a Back to Top button pattern to enhance user navigation on long pages. Discover best practices for placement, accessibility, and user experience with code examples and implementation guidelines."
+description: "Implement a Back to Top button for enhanced navigation on long pages with best practices for placement and accessibility."
 icon: ArrowUp
 status: complete
 ---

content/en/patterns/navigation/hambuger-menu.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Display a menu icon for mobile devices"
-description: "Learn how to implement a hamburger menu for mobile navigation. Discover best practices for creating accessible, responsive mobile menus with proper animations and touch interactions."
+description: "Create accessible mobile menus with smooth animations and touch-friendly interactions."
 icon: Menu
 ---
 

content/en/patterns/navigation/infinite-scroll.mdx

@@ -1,6 +1,6 @@
 ---
 summary: "Loads additional content automatically as users scroll down."
-description: "Implement infinite scroll for seamless content loading in your web applications. Learn best practices for performance, accessibility, and user experience with practical code examples."
+description: "Create seamless content loading with infinite scroll, focusing on performance, accessibility, and user experience best practices."
 icon: Infinity
 status: complete
 ---