UI Wireframes (Textual)

Purpose: Quick, high-signal blueprint of key pages and components. Audience: Designer, Developer, QA Prerequisites: See Style Guide and UI Assets Gallery for visuals.

References

• Style guide: docs/ui/style-guide.md
• UI assets gallery: docs/ui/assets-index.md

Pages

Header & Navigation

• Global header with logo, primary nav (Explore, How it works, Blog, Pricing, FAQ), dark-mode toggle, auth, quick “Add Listing” CTA.
• Components: Header, DropdownMenu, Avatar, ModeToggle, Button.

Explore Listings

• Filters: search bar, sort dropdown, modal/sidebar filters (category, price, revenue, profit, age).
• Grid/list of listing cards with image, title, price, metrics (blur-gated), category, badges.
• Pagination.
• Components: Input, Select, Dialog/Sheet, Checkbox, Slider, Card, Image, Badge, Pagination.

Listing Detail

• Breadcrumbs, title + badges, price, gallery, details (description, financials, traffic, assets), action card (Make Offer, Contact Seller, Watchlist).
• Similar listings section.
• Components: Breadcrumb, Tabs/Accordion, Table, Chart (optional), List, Card, Button, Dialog.

Pricing

• Monthly/Yearly toggle; plan comparison table with CTA.
• Components: RadioGroup/Tabs, Table, Button, Accordion.

Dashboards (Buyer/Seller)

• Sidebar navigation; overview cards; recent activity; lists/tables per feature.
• Components: Sidebar, Card, Table, Button, Chart, List.

Notes

• For exact visuals, see the UI Assets Gallery.
• Follow component patterns in Style Guide; prefer shadcn/ui primitives.