{% extends "base.html" %}
{% load static %}
{% block title %}{{ SITE_NAME }}{% if SITE_TAGLINE %} · {{ SITE_TAGLINE }}{% endif %}{% endblock %}
{% block og_title %}{{ SITE_NAME }}{% endblock %}
{% block twitter_title %}{{ SITE_NAME }}{% endblock %}
{% block meta_description %}{{ SITE_NAME }} — interior and exterior painting for homes and businesses in Chicagoland since 1960. Free estimates. {{ CONTACT_PHONE }}.{% endblock %}
{% block og_description %}{{ SITE_NAME }} — interior and exterior painting for homes and businesses in Chicagoland since 1960.{% endblock %}
{% block twitter_description %}{{ SITE_NAME }} — interior and exterior painting for homes and businesses in Chicagoland since 1960.{% endblock %}
{% block extra_head %}
<link rel="preload" as="image" href="{% static 'images/cc-exterior-2.jpg' %}" fetchpriority="high">
{% endblock %}
{% block structured_data %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HousePainter",
  "name": "{{ SITE_NAME|escapejs }}",
  "url": "{{ PUBLIC_SITE_URL }}/",
  "image": "{{ PUBLIC_SITE_URL }}{% static 'images/cc-exterior-2.jpg' %}",
  "telephone": "{{ CONTACT_PHONE|escapejs }}",
  "email": "{{ CONTACT_EMAIL|escapejs }}",
  {% if CONTACT_ADDRESS %}"address": "{{ CONTACT_ADDRESS|escapejs }}",{% endif %}
  "foundingDate": "1960",
  "description": "{{ SITE_TAGLINE|escapejs }}",
  "areaServed": "{{ CONTACT_SERVICE_AREA|escapejs }}"
}
</script>
{% endblock %}
{% block content %}
  <section class="section context-dark bg-image bg-mask bg-mask-2 section-fullheight section-90vh bg-sm-position" style="background-image: url({% static 'images/cc-exterior-2.jpg' %})">
    <div class="section-fullheight-inner section-md">
      <div class="container">
        <div class="row justify-xl-content-end justify-content-center">
          <div class="col-md-8 col-xl-6 text-center text-md-left">
            <div class="jumbotron-custom wow fadeInRight">
              <div class="title">Welcome<br class="d-none d-lg-block">to College Craft</div>
              <p class="heading-subtitle">Outstanding interior and exterior painting for homes and businesses in Chicagoland since 1960. Experience, people, reputation, and value — the College Craft Difference.</p>
              <a class="button-primary button-m button" href="{% url 'public:contact' %}" data-tianji-event="hero_cta" data-tianji-event-destination="contact">Get a free estimate</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section section-xl-custom image-section section-lined">
    <div class="container container-lined">
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-7 col-lg-6">
          <h3>A few words</h3>
          <div class="content-subtitle font-weight-medium">about our painting company</div>
          <p class="offset-xl-top-60 text-black">There really is a difference in painting companies. College Craft has served residential and commercial customers from our Wheaton shop since 1960 — more than 80,000 jobs, with the right preparation, coatings, and crews for a beautiful, long-lasting result.</p>
          <div class="button-wrap-2"><a class="button-primary button-md button" href="{% url 'public:about' %}">Read more about us</a></div>
        </div>
      </div>
    </div>
    <div class="image-container">
      <div class="mock-up-1">
        <div class="object object-1"><img class="wow fadeInRight" src="{% static 'images/cc-interior.jpg' %}" alt="Interior painting by College Craft" width="395" height="243"/></div>
        <div class="object object-2"><img class="wow fadeInRight" src="{% static 'images/cc-exterior.jpg' %}" alt="Exterior house painting" width="384" height="189" data-wow-delay="0.2s"/></div>
        <div class="object object-3"><img class="wow fadeInRight" src="{% static 'images/cc-dining.jpg' %}" alt="Dining room interior" width="395" height="243" data-wow-delay="0.4s"/></div>
        <div class="object object-4"><img class="wow fadeInRight" src="{% static 'images/cc-elburn.jpg' %}" alt="Elburn exterior project" width="209" height="184" data-wow-delay="0.6s"/></div>
        <div class="object object-5"><img class="wow fadeInRight" src="{% static 'images/cc-deck.jpg' %}" alt="Deck staining" width="395" height="243" data-wow-delay="0.2s"/></div>
        <div class="object object-6"><img class="wow fadeInRight" src="{% static 'images/cc-house-3.jpg' %}" alt="Chicagoland home painted by College Craft" width="275" height="184" data-wow-delay="0.4s"/></div>
      </div>
    </div>
  </section>

  <section class="section section-lg section-lg-1 bg-gray-light context-light">
    <div class="container">
      <div class="row row-50 justify-content-between">
        <div class="col-lg-7 col-xl-6">
          <div class="row row-40 row-lg-0 row-flex number-counter">
            <div class="col-sm-6 col-lg-6 wow fadeInLeft" data-wow-delay="0.2s">
              <div class="blurb-hover">
                <div class="blurb-hover-header">
                  <div class="blurb-hover-icon linearicons-pencil-ruler"></div>
                  <div class="blurb-hover-counter index-counter"></div>
                </div>
                <h5 class="blurb-hover-title">Our people</h5>
                <p class="blurb-hover-exeption font-weight-normal">Experienced crews and a job foreman on every project.</p>
              </div>
            </div>
            <div class="col-sm-6 col-lg-6 wow fadeInLeft">
              <div class="blurb-hover">
                <div class="blurb-hover-header">
                  <div class="blurb-hover-icon linearicons-color-sampler"></div>
                  <div class="blurb-hover-counter index-counter"></div>
                </div>
                <h5 class="blurb-hover-title">Since 1960</h5>
                <p class="blurb-hover-exeption font-weight-normal">Over 80,000 jobs. We know the prep, coatings, and schedule your house needs.</p>
              </div>
            </div>
            <div class="col-sm-6 col-lg-6 wow fadeInLeft" data-wow-delay="0.4s">
              <div class="blurb-hover">
                <div class="blurb-hover-header">
                  <div class="blurb-hover-icon linearicons-cube"></div>
                  <div class="blurb-hover-counter index-counter"></div>
                </div>
                <h5 class="blurb-hover-title">Our reputation</h5>
                <p class="blurb-hover-exeption font-weight-normal">Neighbors recommend us. We stand behind the work.</p>
              </div>
            </div>
            <div class="col-sm-6 col-lg-6 wow fadeInLeft" data-wow-delay="0.2s">
              <div class="blurb-hover">
                <div class="blurb-hover-header">
                  <div class="blurb-hover-icon linearicons-broom"></div>
                  <div class="blurb-hover-counter index-counter"></div>
                </div>
                <h5 class="blurb-hover-title">Our value</h5>
                <p class="blurb-hover-exeption font-weight-normal">Written estimates with exact labor and paint — no hidden fees.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-5 col-xl-5">
          <h3>Services</h3>
          <p class="big big-custom text-primary font-weight-normal">THAT WE PROVIDE</p>
          <div class="card-group-custom number-counter-1" id="accordion1" role="tablist" aria-multiselectable="false">
            <article class="card card-custom">
              <div class="card-header" role="tab">
                <div class="card-title"><a id="accordion1-card-head-ext" data-toggle="collapse" data-parent="#accordion1" href="#accordion1-card-body-ext" aria-controls="accordion1-card-body-ext" aria-expanded="true" role="button"><span class="index-counter"></span><span class="title">Exterior painting</span>
                    <div class="card-arrow"></div></a></div>
              </div>
              <div class="collapse show" id="accordion1-card-body-ext" aria-labelledby="accordion1-card-head-ext" data-parent="#accordion1" role="tabpanel">
                <div class="card-body">
                  <p>Trim and siding, cedar, aluminum, vinyl, decks, power washing, carpentry repairs, and more — from bungalows to multi-family buildings. EPA certified lead-paint restoration.</p>
                </div>
              </div>
            </article>
            <article class="card card-custom card-secondary-2">
              <div class="card-header" role="tab">
                <div class="card-title"><a class="collapsed" id="accordion1-card-head-int" data-toggle="collapse" data-parent="#accordion1" href="#accordion1-card-body-int" aria-controls="accordion1-card-body-int" aria-expanded="false" role="button"><span class="index-counter"></span><span class="title">Interior painting</span>
                    <div class="card-arrow"></div></a></div>
              </div>
              <div class="collapse" id="accordion1-card-body-int" aria-labelledby="accordion1-card-head-int" data-parent="#accordion1" role="tabpanel">
                <div class="card-body">
                  <p>Walls, ceilings, trim, cabinets, wallpaper removal, drywall, and color help from Sherwin-Williams. Thorough prep, top coatings, and a polite crew that cleans up.</p>
                </div>
              </div>
            </article>
            <article class="card card-custom card-secondary-3">
              <div class="card-header" role="tab">
                <div class="card-title"><a class="collapsed" id="accordion1-card-head-com" data-toggle="collapse" data-parent="#accordion1" href="#accordion1-card-body-com" aria-controls="accordion1-card-body-com" aria-expanded="false" role="button"><span class="index-counter"></span><span class="title">Commercial painting</span>
                    <div class="card-arrow"></div></a></div>
              </div>
              <div class="collapse" id="accordion1-card-body-com" aria-labelledby="accordion1-card-head-com" data-parent="#accordion1" role="tabpanel">
                <div class="card-body">
                  <p>Offices, churches, townhomes, condominiums, and multi-family properties — scheduled around your tenants and your calendar.</p>
                </div>
              </div>
            </article>
          </div>
          <div class="button-wrap" style="margin-top:24px"><a class="button button-primary button-md" href="{% url 'public:services' %}">View all services</a></div>
        </div>
      </div>
    </div>
  </section>

  <section class="section section-lg bg-default section-lined">
    <div class="container container-lined">
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
      </div>
    </div>
    <div class="container position-relative">
      <div class="row row-30 align-items-center">
        <div class="col-sm-12 col-lg-4">
          <h3>What we offer</h3>
        </div>
        <div class="col-sm-6 col-lg-4">
          <div class="big block-1-custom">Preparation. Products. People. The three things that decide how a paint job looks — and how long it lasts.</div>
        </div>
        <div class="col-sm-6 col-lg-4">
          <div class="block-2-custom">
            <div class="counter-minimal">
              <div class="counter-left">
                <div class="counter">66</div>
              </div>
              <div class="counter-right">
                <div class="postfix">+</div>
                <div class="title">Years in Wheaton</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-border-wrap-1 wow fadeInUp" data-wow-delay="0.2s">
        <div class="row">
          <a class="col-6 col-md-4 box-border" href="{% url 'public:services' %}">
            <div class="title text-right"><span class="d-block">Careful</span><span class="d-block">preparation</span></div>
            <div class="service-icon icon-xxl construction-icon-13"></div>
          </a>
          <a class="col-6 col-md-4 box-border" href="{% url 'public:services' %}">
            <div class="title text-right"><span class="d-block">Quality</span><span class="d-block">materials</span></div>
            <div class="service-icon icon-xxl construction-icon-05"></div>
          </a>
          <a class="col-6 col-md-4 box-border" href="{% url 'public:about' %}">
            <div class="title text-right"><span class="d-block">Foreman on</span><span class="d-block">every job</span></div>
            <div class="service-icon icon-xxl construction-icon-11"></div>
          </a>
          <a class="col-6 col-md-4 box-border" href="{% url 'public:services' %}">
            <div class="title text-right"><span class="d-block">Color</span><span class="d-block">assistance</span></div>
            <div class="service-icon icon-xxl construction-icon-07"></div>
          </a>
          <a class="col-6 col-md-4 box-border" href="{% url 'public:contact' %}">
            <div class="title text-right"><span class="d-block">Written</span><span class="d-block">estimates</span></div>
            <div class="service-icon icon-xxl construction-icon-18"></div>
          </a>
          <a class="col-6 col-md-4 box-border" href="{% url 'public:contact' %}">
            <div class="icon icon-sm linearicons-arrow-right"></div>
          </a>
        </div>
      </div>
    </div>
  </section>

  <section class="section section-lg bg-gray-light context-light">
    <div class="container">
      <div class="row row-30">
        <div class="col-sm-6">
          <h3>Customer raves</h3>
        </div>
        <div class="col-sm-6 text-sm-right"><a class="button button-gray" href="{% url 'public:testimonials' %}">Read more</a></div>
      </div>
      <div class="row row-30">
        {% for item in featured_testimonials %}
        <div class="col-md-4">
          <article class="testimonial-card">
            <blockquote>“{{ item.quote }}”</blockquote>
            <cite>{{ item.attribution }}</cite>
          </article>
        </div>
        {% endfor %}
      </div>
    </div>
  </section>
{% endblock %}