Make an enquiry

Whether you’re a landlord looking for a property manager or a tenant looking for your next home, get in touch using the form below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Property Management Pricing Table</title>
    
    <!-- Load React and ReactDOM from a CDN -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    
    <!-- Load Babel to compile JSX -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    
    <style>
      /* Minimal CSS for your table */
      .pricing-table {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f8f8f8;
        border-radius: 8px;
      }
      .pricing-table th, .pricing-table td {
        padding: 10px 20px;
        text-align: left;
      }
      .get-quote-btn {
        background-color: #3490dc;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }
      .get-quote-btn:hover {
        background-color: #1e7ed6;
      }
    </style>
</head>
<body>

  <!-- Placeholder for React App -->
  <div id="pricing-table"></div>

  <!-- React JSX in Babel script -->
  <script type="text/babel">

    const PricingTable = () => {
      const services = [
        {
          category: "Administrative Costs",
          items: [
            { name: 'Monthly admin fees', otherFirms: '$', propertyPartner: true, tooltip: 'No separate monthly administrative fees - it\'s all included.' },
            { name: 'No charge for EOFY summary statements', otherFirms: '$', propertyPartner: true, tooltip: 'End of financial year statements provided at no extra cost.' },
            { name: 'Bill management (rates/ insurance/ body corp)', otherFirms: '$', propertyPartner: true, tooltip: 'We manage all property-related bills to ensure timely payments.' },
          ]
        },
        {
          category: "Compliance Services",
          items: [
            { name: 'Compliance Management', otherFirms: '?', propertyPartner: true, tooltip: 'We handle all compliance-related tasks to keep your property up to code.' },
            { name: 'Healthy Homes Assessments for new Landlords', otherFirms: '~$200', propertyPartner: true, tooltip: 'Comprehensive assessment to ensure your property meets Healthy Homes standards.' },
          ]
        },
        {
          category: "Tenant Management",
          items: [
            { name: 'Advertising/ marketing costs', otherFirms: '0-$200', propertyPartner: true, tooltip: 'We cover all costs associated with advertising and marketing your property.' },
            { name: 'Lease preparation/ Lease renewal', otherFirms: '?', propertyPartner: true, tooltip: 'We handle all aspects of lease preparation and renewal at no extra cost.' },
            { name: 'Credit/ background checks for new Tenants', otherFirms: '~$30', propertyPartner: true, tooltip: 'Thorough screening of potential tenants to ensure quality occupancy.' },
            { name: 'No letting fees', otherFirms: '$', propertyPartner: true, tooltip: 'We do not charge tenants letting fees, making your property more attractive.' },
          ]
        }
      ];

      return (
        <div className="pricing-table">
          <table>
            <thead>
              <tr>
                <th>Services</th>
                <th>Other Firms</th>
                <th>Property Partner</th>
              </tr>
            </thead>
            <tbody>
              {services.map((category, index) => (
                <React.Fragment key={index}>
                  <tr>
                    <td colSpan="3" style={{ fontWeight: "bold", paddingTop: "20px" }}>{category.category}</td>
                  </tr>
                  {category.items.map((item, idx) => (
                    <tr key={idx}>
                      <td>{item.name}</td>
                      <td>{item.otherFirms}</td>
                      <td>{item.propertyPartner ? 'Included' : 'Extra'}</td>
                    </tr>
                  ))}
                </React.Fragment>
              ))}
            </tbody>
          </table>

          <div style={{ textAlign: "center", marginTop: "20px" }}>
            <button className="get-quote-btn">Get a Quote</button>
          </div>
        </div>
      );
    };

    // Render the PricingTable component
    ReactDOM.render(<PricingTable />, document.getElementById('pricing-table'));

  </script>
</body>
</html>