Sushify Admin Pro - Mobile Optimized

# Sushify Admin Pro - Mobile Optimized

{
  "summary": "A sophisticated mobile-first admin dashboard for high-intensity operations, featuring a deep black background, vibrant orange highlights, glassmorphic overlays, and fluid animations. Optimized for touch interactions with large targets and real-time feedback loops.",
  "style": {
    "description": "The style is 'Neon-Brutalist Glassmorphism'. It relies on a pure black background (#000000) to make colors pop. Typography is centered around IBM Plex Sans Thai, utilizing heavy weights (700-900) for headers and wide-tracked uppercase labels for secondary information. The primary accent is a warm orange (#D97234). Interactive elements use 'ripple' effects and 300ms cubic-bezier transitions. Status-driven components feature animated glow borders (red for urgent, orange for billing) to draw immediate attention without visual clutter.",
    "prompt": "Create a high-contrast dark mode UI with a base background of #000000 and text in #FFFFFF. **Typography:** Use 'IBM Plex Sans Thai'. Headings should be bold (600-900) with tracking-tighter (-0.05em). Labels should be uppercase, tracking-widest (0.2em), and 10px-12px. **Colors:** Primary Accent: #D97234. Success: Green-500. Alert: Red-500. **Borders & Shapes:** All containers use rounded corners (24px to 40px). Use 1px borders with white/10 opacity. **Glassmorphism:** Apply `backdrop-blur: 20px` and `background: rgba(255,255,255, 0.05)` to sidebars and headers. **Animations:** Implement pulse animations for urgent states (`pulse-red` and `pulse-orange`) and slide-up fades for page transitions. **Shadows:** Use large, soft shadows for buttons using the accent color with 20-30% opacity (e.g., `shadow-[#D97234]/20`)."
  },
  "layout_and_structure": {
    "description": "A responsive dual-navigation layout. On desktop (lg), it features a 300px fixed sidebar. On mobile, the sidebar is hidden, and a 20-24px height compact header is paired with a fixed bottom navigation bar (h-20) for thumb-reachability. Content is housed in a vertically scrollable container with hidden scrollbars.",
    "prompts": [
      {
        "part": "Desktop Sidebar",
        "prompt": "Fixed 300px width sidebar. Background #000000 with a 1px right border (white/10). Includes a logo section with a 40x40px #D97234 rounded-2xl icon. Navigation items are h-56px, rounded-2xl, with active states using #D97234 background and white text. Bottom section contains a status card with a pulsing green indicator."
      },
      {
        "part": "Mobile Header",
        "prompt": "Sticky top bar, backdrop-blur-xl, bg-black/90. Height 60px on mobile, 80px on desktop. Left side shows page hierarchy in 10px uppercase breadcrumbs. Right side features a 40x40px notification bell with a red dot and a gradient profile avatar (#D97234 to orange-300)."
      },
      {
        "part": "Mobile Bottom Navigation",
        "prompt": "Fixed at screen bottom, h-20 (80px), bg-black/90. Flex-row layout with 5 equal buttons. Each button has a 24px icon and 8px uppercase text label. Active tab is colored #D97234 with a small dot indicator at the top center of the button."
      },
      {
        "part": "Feed System (Live Cards)",
        "prompt": "Vertical stack of cards. On mobile, cards have p-4; on desktop, p-8. Cards use white/5 background and rounded-32px. Urgent cards have a pulsing border (`@keyframes pulse { 0% { border-color: rgba(239, 68, 68, 0.3); } 50% { border-color: rgba(239, 68, 68, 0.8); } }`). Each card has a header with an icon and time-ago stamp, a main section with large tracking-tighter text (4xl to 6xl for numbers), and a full-width action button at the bottom."
      },
      {
        "part": "Catalogue Grid",
        "prompt": "Responsive grid: 1 col on mobile, 2 on tablet, 3 on desktop. Cards feature a 96x96px emoji/image container with a shadow-inner effect. Includes stock progress bars (h-2px) and a split-button footer for 'Hide' and 'Edit' actions."
      },
      {
        "part": "Stats & Insights",
        "prompt": "KPI grid using rounded-32px cards. Each card contains a top-row with a 48x48px icon and a growth percentage. Center features large numeric values (text-3xl). Bottom features a sparkline SVG (path stroke-width 2) representing trends."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Interactive Floor Map",
      "description": "A real-time grid of status-aware table tiles.",
      "prompt": "A grid of aspect-square tiles (min-w-60px). Tiles are rounded-32px. Background and border colors change based on status: Empty (white/5, border-white/10), Alert (bg-red-500/20, border-red-500), Billing (bg-orange-500/20, border-orange-500). Each tile has a center-aligned table number and a bottom-aligned status dot (pulsing for active alerts)."
    },
    {
      "component": "Floating Toast Notification",
      "description": "High-contrast floating pill with undo capabilities.",
      "prompt": "A fixed floating pill at bottom-32 (above mobile nav). Pure white background, black text, rounded-full. Includes a black circular icon on the left and an 'Undo' button with #D97234 hover state. Entry animation: translate-y-20 to 0 with opacity fade."
    },
    {
      "component": "Action Bottom Sheet",
      "description": "Mobile-only modal that slides up from the bottom.",
      "prompt": "A full-width modal with rounded-t-[40px] top corners. Background is pure black. Includes a sticky header with a close button and a scrollable form body. Primary action button at the bottom is fixed, large (h-64px), and uses the #D97234 theme with a subtle shadow-xl."
    }
  ]
}