Please recreate the UI shown in the attached screenshot as accurately as possible.
I don't see any screenshot attached to your message. If you'd like me to recreate a UI, please attach the screenshot you'd like me to work with, and I'll do my best to recreate it as accurately as possible.
Once you share the screenshot, I can create a responsive implementation using Next.js and Tailwind CSS, matching the design elements, layout, and functionality shown in the image.
I'll recreate the World Sync product management interface shown in the screenshot. Let me build this for you using Next.js and Tailwind CSS.
I've recreated the World Sync product management interface as shown in the screenshot. Here's what I implemented:
Header Section:
- World Sync logo with the teal color scheme
- Navigation menu with "Início" and dropdown menu
- Search bar with icon
- Notification bell with "4" badge
- Grid, shopping bag, and user icons
Breadcrumb Navigation:
- "Início > Produtos" path
- Version number display (1.59)
Main Content:
- "Produtos" title in the indigo color
- Advanced search functionality with search field and buttons
- Status tabs showing different product states with their counts (Pre-cadastro, Cadastro básico, etc.)
- Action buttons for reviewing, altering, downloading images, and exporting
Product Table:
- Checkbox column for selection
- Product details including GTIN, supplier, description with image, brand, category
- Order number and status columns
- Version and update date information
- Action buttons for each product row
The interface is fully responsive and matches the color scheme and layout of the original. The table displays product data with proper spacing and styling to match the screenshot.
You can customize the product data or any other aspects of the interface as needed.