steel-landscape

As a user, I want to use the frontend Home page so that I can view the interactive zen garden centerpiece, explore features, and navigate to 'Start Designing' or 'Browse Templates'. Implement the Home (v2) JSX design exactly — including the animated raked-sand zen garden, drifting leaf ambient animations, interactive sand-raking on click/drag, dynamic rock placement, and the pulsing 'Start Designing' CTA button. Follows the Guest and Homeowner flows: Home → Templates. Remove or redirect any placeholder home page content.

As a user, I want to use the frontend Signup page so that I can create an account after trying the editor demo. Implement the Signup (v2) JSX design exactly — form fields, validation UI, branding, and navigation back to Login or forward to Dashboard. Follows the Guest flow: Editor → Signup → Dashboard.

As a user, I want to use the AI API so that I can generate realistic landscaping visuals for my rock garden design using Google Nano Banana via Langchain. Implement a FastAPI endpoint POST /api/ai/generate-visual that accepts design parameters (materials, layout dimensions, style) and returns a generated image URL or base64. Integrate Langchain prompt management for the AI model.

As a user, I want to use the backend API for PDF export so that I can download a printable summary of my rock garden design mockup. Implement FastAPI endpoint GET /api/designs/{id}/export/pdf that renders the design metadata, material list, and canvas snapshot into a PDF file (using a Python PDF library). Return the PDF as a file download.

As a user, I want to use the frontend Templates page so that I can browse pre-designed rock garden templates and select one to open in the Editor. Implement the Templates (v2) JSX design exactly — template cards with thumbnails, names, filter/search UI, and 'Use This Template' actions. Follows both flows: Home → Templates → Editor.

As a user, I want to use the frontend Dashboard page so that I can view, manage, and save my landscape design mockups, access the AI assistant, and configure settings. Implement the Dashboard (v2) JSX design exactly — overview panel with saved designs, quick stats, navigation to Editor, and sidebar links to AI Assistant and Settings sub-pages. Follows both flows: Signup/Preview → Dashboard → Save Mockup.

As a user, I want to use the frontend AI Assistant page in the dashboard so that I can chat with the AI to get landscaping suggestions, generate visuals, and receive design recommendations. Implement the chat UI with message history, input field, and integration with the AI Landscape Visuals API. Accessible from the Dashboard sidebar.

As a user, I want to use the frontend Editor page so that I can drag and drop landscaping elements, customize layouts, select materials, and visualize my rock garden design in real time. Implement the Editor (v2) JSX design exactly — canvas area, element palette, drag-and-drop interactions, undo/redo controls, material selection panel, and navigation to Preview. Follows Homeowner flow: Templates → Editor → Customize → Preview.

As a user, I want to use the frontend Templates page so that real template data is fetched from the backend and displayed dynamically. Wire up GET /api/templates with loading states, error handling, and filter/search functionality connected to API query params.

As a user, I want to use the frontend Settings page in the dashboard so that I can update my profile, preferences (measurement units: ft/in, currency: USD), and notification settings. Implement settings form with save/cancel actions, wired to a backend PATCH /api/users/me endpoint. Accessible from the Dashboard sidebar.

As a user, I want to use the frontend Editor page so that my drag-and-drop design changes are auto-saved and persisted via the Designs CRUD API. Wire up API calls: load design on open, periodic auto-save (debounced PUT), and explicit save action. Handle loading and error states in the UI.

As a user, I want to use the frontend Dashboard page so that my saved designs are loaded from the backend and I can delete or rename them. Wire up GET /api/designs, DELETE /api/designs/{id}, and PATCH for rename. Show empty state when no designs exist.

As a user, I want to use the frontend Preview page so that I can visualize my final rock garden design in a high-fidelity read-only canvas, review design stats, see suggested templates, and save or export my mockup. Implement the Preview (v2) JSX design exactly — including PreviewNavBar, DesignSummaryBanner, DesignMetaPanel, MaterialsLegend, ActionsSidebar, CanvasPreviewArea (with Day/Dusk toggle and parallax), DesignStatsBar, SuggestedTemplates, and PreviewFooter sections. Follows Homeowner flow: Editor → Preview → Dashboard.

As a user, I want to use the frontend Preview page so that real design data, material costs, stats, and the AI-generated visual are loaded from the backend. Wire up GET /api/designs/{id} for design metadata and canvas state, GET /api/designs/{id}/export/pdf for the download button, and POST /api/ai/generate-visual for the high-fidelity canvas render. Handle Day/Dusk view toggle on the client side.