{#
 # Homepage template
 # ---------------
 #
 # When this template gets loaded, it will be because someone has accessed
 # http://yoursite.com/ (without any URI). Craft checks to see if you have
 # a Single section set to be the Homepage (as you do, by default), and
 # loads the section’s Template (this file). A special ‘entry’ variable
 # will already be set for you, assigned to the Homepage entry.
 #
 # It's worth noting that even if you didn't have a Homepage Single section,
 # as long as this template remains at craft/templates/index.html, it
 # would still be the one to get loaded when accessing http://yoursite.com/,
 # albeit without an ‘entry’ variable already set for you.
 #
 # See this page for more details on how Craft routes requests:
 # http://craftcms.com/docs/routing
 #}
 
 {% if entry.metaTitle|length %}
	{% set metaTitle = entry.metaTitle %}
{% else %}
	{% set metaTitle = entry.title %}
{% endif %}

{% set metaDescription = entry.metaDescription %}

{% extends "_layout" %}

{% block content %}


{% if entry.alertTitle|length %}
<div class="modal fade" tabindex="-1" id="homepageAlert">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{entry.alertTitle}}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {{entry.alertContent}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endif %}


{% cache %}
    <!-- Carousel Start -->
    <div class="container-fluid p-0 ">
        <div class="header-carousel position-relative">
            <div class="owl-carousel-item position-relative">
      
                <div class="bg-home">
                <div class="position-absolute w-100 h-100 d-flex align-items-center" style="">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-12 col-lg-8 text-center">
                            <div class="bg-black pt-5 pb-5 ps-5 pe-5">
                                <h1 class="display-3  animated slideInDown mb-4 text-white">Fence Repair, Deck Repair & ADA Safety Services</h1>
                                <p class="fs-5 fw-medium mb-4 pb-2 text-white">Wood is what we love working with. If you have a fence or deck that needs repair, we can help. </p>
                                <a href="/contact" class="btn btn-primary py-md-3 px-md-5 animated slideInRight">Request An Estimate</a>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          
        </div>
    </div>
    <!-- Carousel End -->
    
    <!-- Recent Projects -->
    <div class="container-xxl py-5">
        <div class="container">
            <div class="section-title text-center">
                <h1 class="display-5 mb-5">Recent Projects</h1>
            </div>
            <div class="row g-4">
    
			    <figure data-behold-id="Oiv4KEahnF4oVDX7Dt6L"></figure>
			<script src="https://w.behold.so/widget.js" type="module"></script>
            </div>
        </div>
    </div>
	<!-- Recent Projects End -->	  
	
		  

    
    <!-- Service Start -->
    <div class="bg-gray">
    <div class="container-xxl py-5 ">
        <div class="container">
            <div class="section-title text-center">
                <h1 class="display-5 mb-5">Our Services</h1>
            </div>
            <div class="row g-4">
            
            	{% for service in entry.servicesHomepage%}
	            <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="service-item border border-5 border-light border-top-0 h-100  bg-white">
                        <div class="overflow-hidden">
                        	{% if service.serviceImage|length %}
                        	{%set simage = service.serviceImage.one() %}
                            <img class="img-fluid max-height250" src="{{simage.getUrl('smallImages')}}" alt="{{simage.title}}">
                         
{% endif%}
                        </div>
                        <div class="p-4 text-center=">
                            <h4 class="mb-3">{{service.serviceName}}</h4>
                            
                            <p>{{service.serviceDescription}}</p>
                           {% if service.serviceEntry|length %}
                           {% for entry in service.serviceEntry %}
                            	<a class="fw-medium" href="{{entry.uri}}" >View our {{entry.title|lower}} projects<i class="fa fa-arrow-right ms-2"></i></a>
                            {% endfor %}
                            {% endif %} 
                        </div>
                    </div>
                </div>
                {% endfor %}
                
                
                           </div>
        </div>
    </div>
    </div>
    <!-- Service End -->
    
     <!-- Reviews -->
    <div class="container-xxl py-5">
        <div class="container">
          
            <div class="row g-4">
				<script src="https://widget.trustmary.com/-4PBDOQAQ"></script>
            </div>
        </div>
    </div>
	<!-- Reviews End -->
    <!--
     <div class="container-xxl py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
        <div class="container">
            <div class="section-title text-center">
                <h1 class="display-5 mb-5">Our Values &amp; What We Stand For</h1>
            </div>
            
            <div class="row">
	            <div class="col-6 col-md-2 mb-3">
		            <img class="w-100" src="https://www.hammernail.co/assets/img/Intersex-inclusive_pride_flag.webp" alt="LGBTQ+ Owned Business"/>
		            <h6 class="mt-3 text-center">We are a LGBTQ+ Owned Business</h6>
	            </div>
		            
	            <div class="col-6 col-md-2 mb-3">
		            <img src="https://www.hammernail.co/assets/img/snoqualmie-tribe-logo.jpeg" class="w-100" alt="Proud Member of the Snoqualmie Tribe">
		            <h6 class="text-center mt-3">The Owner is a proud member of the Snoqualmie Tribe</h6>
	            </div>
	            <div class="col-6 col-md-2 mb-3">
		            <img class="w-100" src="https://www.hammernail.co/assets/img/blacklivesmatter.jpg" alt="Black Lives Matter"/>
	            </div>
	            
	            <div class="col-6 col-md-2 mb-3">
		             <img class="w-100" src="https://www.hammernail.co/assets/img/bansoffbodies.jpg" alt="Planned Parenthood: Bans Off Our Bodies"/>
	            </div>
	            
	            <div class="col-6 col-md-2 mb-3">
		              <img class="w-100" src="https://www.hammernail.co/assets/img/trans-rights.jpg" alt="Trans Rights are human rights"/>
	            </div>
	            <div class="col-6 col-md-2 mb-3">
		            <img class="w-100" src="https://www.hammernail.co/assets/img/Tricolor Polyamory Pride Flag.png" alt="Poly friendly business"/>
            </div>
            
        </div>
    </div>-->
    
    <div class="container-xxl py-5 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
        <div class="container">
            <div class="section-title text-center">
                <h1 class="display-5 mb-5">A Message From The Owner</h1>
            </div>
            
            <div class="row">
	            <div class="col-12 col-md-8 mb-3">
		            <p>First and foremost, thanks for stopping by our website. I am Chris, the owner of Hammer &amp; Nail. I have always had a passion for woodworking and building things and after a decade of working on my own houses and and <a href="https://www.instagram.com/offbeat_vagabond/" target="_blank">building my very own camping caravan</a>, I decided I wanted to serve my community by offering my services at a fair rate and without judgement. </p>
		            <p>As a homeowner I know how hard it can be to call up a random company and hope that they:</p>
		            <ol>
			            <li>Show up when they say they are going to show up</li>
			             <li>Do the job you hired them to do with care</li> 
			             <li>Actually finish the job without cutting corners</li>
			             <li>Clean up after themselves</li>
		            </ol>
		            <p> This has been a major frustration for me as well when hiring people to do work on my own house. I want to ensure you that I value your time and one of your biggest investments; your home. If I don't think I can get the job done for you I will be upfront and honest about that. No gimmicks, no bait and switch pricing, no starting a job and never finishing it. I can thank all of the contractors before me who did sub-par work on my own houses because it allowed me to learn the skills that I can now utilize with my customers.</p>
		            
		            <p>I also know what it's like to have strangers (mostly cis-gender men) come into your house. It can be a nerve-wracking experience. I want to ensure you that I pass no judgement regardless of race, ethnicity, age, gender, religion, sexual orientation, gender identity, gender expression, disability, economic status or other diverse backgrounds.  I want to make sure you feel comfortable and safe to be yourself when I enter your home. </p>
		            <p>Let's be inclusive of one another and get some home repairs done!</p>
		            <p><a class="btn btn-primary" href="/contact">Request An Estimate</a></p>
		            
	            </div>
				<div class="col-12 col-md-4 mb-3">
		            <img class="w-100" src="/assets/uploads/images/chris-headshot.jpeg" alt="Chris Divyak, owner of hammer and nail"/>
	            </div>
		           
            </div>
            
        </div>
    </div>
    </div>
 {% endcache %}
{% endblock %}