Create a Detailed Wireframe Description for UI/UX Design

Act as a senior UX designer and information architect. Create a comprehensive, developer-ready wireframe description for the [PAGE/SCREEN NAME, e.g., homepage, user dashboard, product detail page] of a [TYPE OF APPLICATION, e.g., mobile fitness app, B2B SaaS platform, e-commerce website]. The primary user goal on this page is to [PRIMARY USER GOAL, e.g., quickly find and purchase a product, track daily progress, compare subscription plans]. The target users are [TARGET USERS]. Structure your wireframe description as follows: 1. **Page Overview**: Write a 2-3 sentence summary of the page's purpose, its role in the overall user journey, and the key conversion or engagement metric it serves. 2. **Layout Grid**: Define the layout structure — specify the grid system (e.g., 12-column grid), breakpoints for responsive design (mobile, tablet, desktop), and overall page width constraints. 3. **Section-by-Section Breakdown**: For each section of the page from top to bottom, describe: - Section name and purpose - Exact placement and dimensions (relative or percentage-based) - UI elements contained (buttons, inputs, cards, images, icons, etc.) - Content specifications (character limits for headings, placeholder text, image aspect ratios) - Interactive states (default, hover, active, disabled, loading, error) - Priority level (must-have vs. nice-to-have) 4. **Navigation Structure**: Detail the navigation pattern used (top bar, sidebar, bottom tabs, hamburger menu) and list all navigation items with their destinations. 5. **Component Inventory**: List all unique UI components needed for this page, noting which are reusable across the application and which are page-specific. 6. **User Interaction Flow**: Describe the step-by-step interaction flow a user takes to accomplish [PRIMARY USER GOAL], including micro-interactions, form validations, transitions, and feedback messages. 7. **Responsive Behavior**: Explain how the layout adapts across mobile ([MOBILE BREAKPOINT, e.g., 375px]), tablet ([TABLET BREAKPOINT, e.g., 768px]), and desktop ([DESKTOP BREAKPOINT, e.g., 1440px]). Note which elements stack, hide, or transform. 8. **Accessibility Requirements**: Specify tab order, ARIA landmark roles, keyboard navigation patterns, and any screen reader considerations for complex components. 9. **Edge Cases & Empty States**: Describe how the page handles empty states (no data), error states, and loading states. Use clear labeling conventions (e.g., [Header-01], [CTA-Primary], [Card-Product]) so the description can be directly handed to a UI designer or developer.