11 days ago

Design a visual, responsive and accessible form UI for setting up conditional price adjustments in a smart contract wizard. The design should follow modern UX best practices and be presented as a visual layout (wireframe or high-fidelity style). Use the attached screenshot as an inspiration, and to this add or adjust following parts in a clean and clear layout that includes: 💡 Section: “Price Adjustment” 🔲 Top area: Label: “Should this condition trigger an outcome?” Checkbox with Yes/No toggle: “Is the parameter approved?” Short explanation text box below: “Describe how approval is determined” (e.g. “Score above 80 = approved, under 80 = not approved”) 🔲 Middle section (adjustment basis): Two radio buttons or toggles: Percentage of contract value (%) Fixed fee (in €) Helper text under each option. 🔲 Next section (adjustment details): Dropdown or radio buttons: “Adjustment Type” – options: Discount / Surcharge Outcome type selector: Positive (Reward) or Negative (Penalty) Dropdown: “Who will this outcome affect?” – options: Renter, Owner Optional text field: “Reason or additional notes” ✨ Design style guidelines: Use a Tailwind-style UI with neutral colors Mobile responsive layout Accessible labels and clear visual hierarchy Card-based or section-based grouping for each logic block Include section headers and consistent spacing The final result should be a visual UX layout ready to be used as a reference for Figma or other design tools.

Fork

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates