Clothing Store Manager - Copy this React, Tailwind Component to your project
Design a sleek, modern, and responsive UI for a clothing store manager website. The interface should emphasize functionality, simplicity, and elegance, appealing to a professional audience while maintaining authenticity and smooth user interactions. UI Requirements 1. Login Page Full Screen Layout: Background: Gradient or abstract shapes with soft, flowing colors (e.g., soft purple to blue gradient). Centered login card with subtle shadows and rounded edges. Card Design: Inputs for Email and Password with floating labels and icons. A prominent, animated "Login" button that changes shade on hover. Subtle links for "Forgot Password?" or "Need Help?" at the bottom. Branding Area: A logo or brand name with a tagline positioned elegantly at the top of the card. 2. Dashboard Overview Page Design: Use a two column layout: Left Sidebar: A collapsible menu with icons and text for navigation (Home, Products, Orders, Settings, Logout). Main Content Area: A hero section with a greeting (e.g., "Welcome, Admin") and a quick overview. Summary Cards: Large, visually distinct cards displaying: Total Products: With an icon (e.g., a shopping bag). Total Orders: With a cart icon. Total Revenue: With a dollar or analytics icon. Smooth hover animations (e.g., scale up with subtle shadows). Typography & Styling: Use oversized numbers for stats with clear, bold headings underneath. 3. Product Management Page Header Section: A sticky header with: A search bar with a modern glassmorphism effect. A filter dropdown menu with categories like "Low Stock" or "By Price." An "Add Product" button styled as a prominent pill shaped CTA with a "+" icon. Product List Section: Display products in a card grid layout: Product Image (placeholder if not available). Product Name, Price, Stock, Category details below. Action buttons for Edit/Delete styled as icons with hover effects. Add/Edit Product Modal: A centered modal with a clean, white background, rounded corners, and a drop shadow. Inputs for product details styled with borders and subtle focus animations. 4. Order Management Page Header Section: Sticky header similar to the product page but with a "Status Filter" dropdown (e.g., Pending, Shipped, Delivered). Order List Section: Use a modern card based layout for each order: Customer Name Total Items Ordered (e.g., "3 Items") Total Cost (e.g., "$120.00") Order Status with a pill shaped badge (colored: yellow for pending, green for shipped, etc.). A "View Details" button styled as a link. Order Details Drawer: A slide out drawer from the right showing: Order Summary (Product Names, Quantities, Total Cost). Actions: Update Status (Dropdown or radio buttons). 5. Responsive Design Desktop View: Multi column layouts for dashboards, products, and orders. Hover animations and rich interactions for intuitive navigation. Mobile View: Sidebar collapses into a hamburger menu. Use single column layouts for product and order listings. Floating action buttons (FABs) for key actions like "Add Product." Style Guide Typography: Primary Font: "Poppins" or "Inter" for modern and clean text. Font Weights: Bold for headings and stats. Light or medium for descriptions. Color Palette: Primary: Soft teal or gradient tones (blue to green). Accent: Vibrant coral or deep purple for action buttons. Neutral: White and light gray for backgrounds, with dark gray text. Components Styling: Buttons: Rounded pill design with gradient fills and shadow effects. Cards: Soft shadows, rounded corners, and hover elevation. Tables: Borderless rows with alternating background colors and smooth hover transitions. Page Flow Login → Dashboard: A welcoming and professional landing experience. Dashboard links to: Product Management: Manage items efficiently with an intuitive grid layout. Order Management: Track and update orders seamlessly with card based design. Advanced Interactions (Optional) Smooth transitions between pages with slide or fade animations. Interactive tooltips or hints for first time users. Dark Mode toggle for a personalized experience.
