lumidotnew

Create a high-fidelity, interactive web app that turns a headline rent price into the real monthly cost and real annual cost. ## Core idea Users often see a listing price and only compare monthly rent, while ignoring deposit, agent fee, utilities, move-in costs, and commuting. This calculator reveals the true cost in a clear, slightly reality check tone. ## UX goals * Fast to use, no clutter, mobile-friendly * Inputs feel like a real renting scenario * Output is instantly understandable, with transparent breakdown * Tone: calm, practical, lightly witty, never judgmental ## Layout Single page, 3 sections, sticky results card on desktop: 1. Listing Basics 2. Hidden Costs 3. Commute Cost Right side: Reality Check Summary card (on mobile, summary appears below and stays accessible via a floating “Summary” button). ## Inputs ### 1) Listing Basics * Currency selector (default: SGD) * Monthly rent (number) * Lease length (months) selector: 6 / 12 / 18 / 24 (default 12) * Move-in date (optional, only for UI polish, does not affect math) * “Is rent negotiable?” toggle (optional) If ON: show a slider “Discount” 0% to 10% to adjust rent ### 2) Hidden Costs All costs should support common patterns with friendly presets: * Deposit * Dropdown: 1 month, 2 months, Custom * If Custom: numeric input (amount) * Agent fee * Dropdown: None, Half month, 1 month, Custom * If Custom: numeric input (amount) * Utilities (monthly) * Electricity (number) * Water (number) * Internet (number) * Optional: “Other monthly fees” (number) * One-time move-in costs (optional) * Cleaning fee (number) * Furniture / appliances (number) * Moving service (number) * “Other one-time costs” (number) ### 3) Commute Cost Let users choose to include commute cost or not. * Toggle: “Include commute cost” (default ON) If ON, show: * Workdays per month (default 22) * Transport mode tabs: “Public”, “Car”, “Mixed” For each mode: * Cost per one-way trip (number) * One-way time (minutes) * Optional: “Value my time” toggle (default OFF) * If ON: hourly value (number) * Convert commute time to cost: time_cost = (minutes * 2 * workdays / 60) * hourly_value ## Calculations ### Adjusted rent * rent_adjusted = monthly_rent * (1 - discount_percent) ### Monthly recurring costs * utilities_monthly = electricity + water + internet + other_monthly_fees * commute_cash_monthly = cost_per_one_way * 2 * workdays * commute_time_monthly = (one_way_minutes * 2 * workdays / 60) * hourly_value (only if time toggle ON) * recurring_monthly = rent_adjusted + utilities_monthly + (commute toggles) ### One-time costs total * deposit_amount = preset months * rent_adjusted OR custom amount * agent_fee_amount = preset months * rent_adjusted OR custom amount * move_in_one_time = cleaning + furniture + moving + other_one_time * one_time_total = deposit_amount + agent_fee_amount + move_in_one_time ### Normalize one-time costs across lease * one_time_monthly_equivalent = one_time_total / lease_length_months ### Real monthly + annual * real_monthly = recurring_monthly + one_time_monthly_equivalent * real_annual = real_monthly * 12 ### Also show “Lease total” * lease_total = recurring_monthly * lease_length_months + one_time_total ## Outputs (Reality Check Summary card) Show big numbers: * Real Monthly Cost * Real Annual Cost * Lease Total Then a clean breakdown list: * Rent (adjusted) * Utilities * Commute (cash) * Commute (time value) if enabled * One-time costs (monthly equivalent) Also show: * “Hidden cost uplift”: real_monthly - rent_adjusted * “Uplift %”: uplift / rent_adjusted Add a small “What’s driving the cost” insight line: * Identify the largest non-rent contributor and write one sentence like: “Biggest add-on: Agent fee amortized across the lease.” ## Interactions * Instant recalculation on change * Tooltips with examples for deposit/agent fee * Preset buttons: “Typical 12-month lease”, “No agent fee”, “Barebones utilities” * A “Compare to another listing” mini feature: * Button “Save as Scenario A” * Button “Save as Scenario B” * Show A vs B difference in real_monthly and lease_total ## Visual style * Warm, modern UI, rounded cards, subtle shadows * Clear typography, accessible contrast * Micro-animations for number changes (count-up) * A small progress-style bar showing “Rent vs Hidden Costs” ratio ## Copy tone Use short, punchy labels: * Headline: “Rent Reality Check” * Subhead: “Turn the sticker price into the real monthly and yearly cost.” * CTA button: “Reality check it” * Footer note: “Estimates only. Your actual bills may vary.” ## Edge cases * Prevent negative values * If lease_length_months is very short (6) and agent fee is 1 month, highlight: “Short lease amplifies one-time fees.”