noble-banner

As a user, I want to visit the Home page and see an interactive 3D gate preview so that I can visualize my banner on a virtual gate. Implement the Home page based on the existing JSX design (v2). Includes: NavBar, interactive gate preview tool, gate dimensions input (width/height), live banner drag-and-drop, weather simulation toggle, and micro-interactions (soft glow, text embossing). Entry point for the primary user flow: Home → Design. Reference the existing Home (v2) design.

As a user, I want to use the Design page to choose fonts, colors, and customize my banner text so that I can create a personalized signboard. Implement the Design page based on the existing JSX design (v2). Includes: font picker (with live preview), color palette selector for text and background, banner text input with real-time preview, and navigation from Home and to Preview. User flow: Design ← Home → Design → Preview.

As a user, I want to browse and select weather-resistant materials for my banner on the Materials page so that I can ensure durability in Malaysian tropical conditions. Implement the Materials page based on the existing JSX design (v2). Includes: material cards (PVC Flex, Aluminium Composite, Vinyl Mesh) with texture thumbnails, durability ratings, UV/waterproof specs, tropical climate badges, and navigation from Preview to Order. User flow: Materials ← Preview → Materials → Order.

As an installer, I want to use the Installation page to view banner specs, review the mounting method, check the material guide, and confirm installation completion so that I can correctly mount the gate banner. Implement the Installation page based on the existing JSX design (v2). Includes: banner specifications display, mounting method guide (pre-drilled holes, cable tie mounts, adhesive strips), material handling instructions, and a completion confirmation step. User flow: Installation ← Home → Installation (Installer persona flow).

As a user, I want the backend to calculate my order pricing and save my order so that I can review itemized costs and place a final order. Implement FastAPI endpoints: POST /api/orders (create order with line items), GET /api/orders/{id} (retrieve), POST /api/orders/{id}/confirm (place order). Calculate: banner printing cost, material surcharge, mounting hardware, delivery fee, SST 8%, and grand total. Store delivery details and mounting method.

As a user, I want the AI assistant to suggest fonts, colors, and banner text based on my gate type and preferences so that I can get personalized design recommendations. Integrate Langchain with Litellm to build a design suggestion chain: accept gate dimensions, material, and user preferences as input; return font recommendations, color palette suggestions, and sample banner text. Expose via POST /api/ai/suggest-design endpoint.

As a user, I want to use the Preview page to simulate weather effects and adjust my banner's size and position on the gate so that I can confirm the final look before ordering. Implement the Preview page based on the existing JSX design (v2). Includes: LivePreviewStage with gate environment, weather simulation controls (rain, sunlight, humidity), SizePositionAdjuster with range sliders and live schematic, font/color adjustments, and navigation from Design to Materials. User flow: Preview ← Design → Preview → Materials.

As a user, I want to use the Order page to confirm my banner design, review pricing, fill in delivery details, and place my order so that my custom gate banner can be produced and delivered. Implement the Order page based on the existing JSX design (v2). Includes: OrderProgressBar, DesignConfirmationPanel, MaterialAndSpecsSummary, MountingMethodSelector, DeliveryDetailsForm, OrderSummaryPanel, PricingBreakdown (with itemized costs, SST 8%, grand total in gold, Price-Lock Guarantee badge), and ConfirmationCTA. User flow: Order ← Materials → Order (end of primary user flow).

As a user, I want all frontend pages to communicate with the backend so that my design choices, material selections, and orders are persisted and retrieved correctly. Wire up: Home page gate dimensions → Design API, Design page → save/load design, Materials page → materials catalog API, Order page → order creation and pricing API, AI suggestions on Design page → AI suggest-design endpoint. Implement React Query or fetch-based API layer with loading and error states.