{% extends "base.html" %}
{% load static %}
{% block title %}About · {{ SITE_NAME }}{% endblock %}
{% block content %}
  <section class="breadcrumbs-custom bg-image context-dark" style="background-image: url({% static 'images/breadcrumbs-image-1.jpg' %});">
    <div class="breadcrumbs-custom-inner">
      <div class="container breadcrumbs-custom-container">
        <div class="breadcrumbs-custom-main">
          <h6 class="breadcrumbs-custom-subtitle title-decorated">About</h6>
          <h2 class="text-uppercase breadcrumbs-custom-title">Meet Monica</h2>
        </div>
        <ul class="breadcrumbs-custom-path">
          <li><a href="{% url 'public:home' %}">Home</a></li>
          <li class="active">About</li>
        </ul>
      </div>
    </div>
  </section>
  <section class="section section-lg">
    <div class="container">
      <div class="row row-50 justify-content-center justify-content-lg-between flex-lg-row-reverse">
        <div class="col-md-10 col-lg-6 col-xl-5">
          <h3 class="text-uppercase">Local realtor,<br>personal service</h3>
          <p class="about-subtitle">I help families buy and sell homes with clear communication and marketing that actually reaches people — not just another postcard blast.</p>
          <p>This site replaces a costly third-party campaign platform. Visitors reach me through a protected contact form; every inquiry lands in my portal with source tracking so I know which campaigns work.</p>
          <a class="button button-lg button-primary button-winona" href="{% url 'public:contact' %}" data-tianji-event="about_cta" data-tianji-event-destination="contact">Work with me</a>
        </div>
        <div class="col-md-10 col-lg-6 col-xl-6">
          <img class="img-responsive" src="{% static 'images/careers-1-570x388.jpg' %}" alt="{{ SITE_NAME }}" width="570" height="388"/>
        </div>
      </div>
    </div>
  </section>
{% endblock %}