{% extends "_layouts/main" %}
{% do craft.app.view.registerCssFile('@web/js/lib/slick/slick.css') %}
{% do craft.app.view.registerCssFile('@web/js/lib/slick/slick-theme.css') %}
{% do craft.app.view.registerJsFile('@web/js/lib/slick/slick.min.js') %}


{% block titleBlock %}
{{entry.title}}
{% endblock %}

{% block main %}
{% include '/_partials/_toty-navigation.twig' with {
    activePage: 'testimonials'
} %}


<style>
	.superHeadline{
		font-size:120px;
		line-height: 120px;
		color:var(--accentYellow) !important;
	}
	
	.img-fluid img {
    max-width: 100%;
    height: auto;
	}
.nav-item.active{
font-weight:800;
}

.testimonialFeatured h2{
    font-family: var(--h1-font-family);
    font-weight: 800;
    font-size: 2.5em;
    line-height: 1em;
font-style: italic;;
    text-transform: uppercase;
    color:var(--accentYellow);
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);


}

.testimonialFeatured p{
    text-wrap: balance;
    font-size:2.5em;
    font-family: var(--h1-font-family);
    font-weight: 800;

}
</style>

<div class="container-fluid ps-0 pe-0 ms-0 me-0">
    <div class="row mt-0 ps-0 pe-0 ms-0 me-0">
        <div class="col-12 ps-0 pe-0 ms-0 me-0"><img src="images/testimonials/TOTY-testimonial-page-wip1-.jpg" class="img-fluid"></div>
    </div>
</div>
<div class="container">
    <div class="row mt-0 mb-0 pt-5 pb-5 ps-5 pe-5">
        <div class="col-12 mb-5"><img src="images/testimonials/TOTY-testimonial-page-wip1b-.jpg" class="img-fluid"></div>
    </div>
</div>
<div class="container-fluid" style="background-color: #111;">
<div class="container">
    <div class="row mt-0 mb-0 pt-5 pb-5 ps-5 pe-5">
        <div class="col-12 col-md-3 testimonialFeatured"><h2>Cash Prizes</h2></div>
        <div class="col-12 col-md-3 testimonialFeatured"><h2>All Expenses Paid Trip for You and a Guest</h2></div>
        <div class="col-12 col-md-3 testimonialFeatured"><h2>Press Releases and a Shop Owner Profile in Babcox Magazine</h2></div>
        <div class="col-12 col-md-3 testimonialFeatured"><h2>Network at the ASE Excellence Awards Banquet</h2></div>
    </div> 
</div></div>

<div class="container-fluid ps-0 pe-0 ms-0 me-0">
    <div class="row mt-0 pt-0 pb-0 ps-0 pe-0 ms-0 me-0">
        <div class="col-12 testimonialFeatured text-center ps-0 pe-0 ms-0 me-0">
            <div class="brand-strip">
                <div><img src="images/testimonials/images/row1/1.jpg" alt="1"></div>
                <div><img src="images/testimonials/images/row1/2.jpg" alt="2"></div>
                <div><img src="images/testimonials/images/row1/3.jpg" alt="3"></div>
                <div><img src="images/testimonials/images/row1/4.jpg" alt="4"></div>
                <div><img src="images/testimonials/images/row1/5.jpg" alt="5"></div>
                <div><img src="images/testimonials/images/row1/6.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row1/7.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row1/8.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row1/9.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row1/10.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row1/11.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row1/12.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row1/13.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row1/14.jpg" alt="6"></div>
            </div>
        </div>
    </div>
</div>
    
<div class="container-fluid" style="background-color: var(--accentYellow);">
    <div class="container">
        <div class="row mt-0 pt-5 pb-3">
            <div class="col-12 ps-5 pe-5 testimonialFeatured text-center"><p>"The program was a top-notch experience. I can’t think of anything that would make it better. I hope to come back next year to try again."</p></div>
        </div>
    </div>
</div>

<div class="container-fluid ps-0 pe-0 ms-0 me-0">
    <div class="row mt-0 pt-0 pb-0 ps-0 pe-0 ms-0 me-0">
        <div class="col-12 testimonialFeatured text-center ps-0 pe-0 ms-0 me-0">
            <div class="brand-strip">
                <div><img src="images/testimonials/images/row2/1.jpg" alt="1"></div>
                <div><img src="images/testimonials/images/row2/2.jpg" alt="2"></div>
                <div><img src="images/testimonials/images/row2/3.jpg" alt="3"></div>
                <div><img src="images/testimonials/images/row2/4.jpg" alt="4"></div>
                <div><img src="images/testimonials/images/row2/5.jpg" alt="5"></div>
                <div><img src="images/testimonials/images/row2/6.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row2/7.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row2/9.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row2/10.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row2/11.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row2/12.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row2/13.jpg" alt="6"></div>
            </div>
        </div>
    </div>
</div>
    
<div class="container-fluid" style="background-color: var(--accentYellow);">
    <div class="container">
        <div class="row mt-0 pt-5 pb-3">
         <div class="col-12 ps-5 pe-5 testimonialFeatured text-center"><p>"That place was so cool I would love to go back again."</p></div>
        </div>
    </div>
</div>
    


<div class="container-fluid ps-0 pe-0 ms-0 me-0">
    <div class="row mt-0 pt-0 pb-0 ps-0 pe-0 ms-0 me-0">
        <div class="col-12 testimonialFeatured text-center ps-0 pe-0 ms-0 me-0">
            <div class="brand-strip">
                <div><img src="images/testimonials/images/row3/1.jpg" alt="1"></div>
                <div><img src="images/testimonials/images/row3/2.jpg" alt="2"></div>
                <div><img src="images/testimonials/images/row3/3.jpg" alt="3"></div>
                <div><img src="images/testimonials/images/row3/4.jpg" alt="4"></div>
                <div><img src="images/testimonials/images/row3/5.jpg" alt="5"></div>
                <div><img src="images/testimonials/images/row3/6.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row3/7.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row3/8.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row3/9.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row3/10.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row3/11.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row3/12.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row3/13.jpg" alt="6"></div>
            </div>
        </div>
    </div>
</div>
    
<div class="container-fluid" style="background-color: var(--accentYellow);">
    <div class="container">
        <div class="row mt-0 pt-5 pb-3">
            <div class="col-12 ps-5 pe-5 testimonialFeatured text-center"><p>"Met some great people. I shared a lot of contacts this time which I wish I had done in 2023. Good to see some new faces as well as some familiar ones."</p></div>
        </div>
    </div>
</div>
    


<div class="container-fluid ps-0 pe-0 ms-0 me-0">
    <div class="row mt-0 pt-0 pb-0 ps-0 pe-0 ms-0 me-0">
        <div class="col-12 testimonialFeatured text-center ps-0 pe-0 ms-0 me-0">
            <div class="brand-strip">
                <div><img src="images/testimonials/images/row4/1.jpg" alt="1"></div>
                <div><img src="images/testimonials/images/row4/2.jpg" alt="2"></div>
                <div><img src="images/testimonials/images/row4/3.jpg" alt="3"></div>
                <div><img src="images/testimonials/images/row4/4.jpg" alt="4"></div>
                <div><img src="images/testimonials/images/row4/5.jpg" alt="5"></div>
                <div><img src="images/testimonials/images/row4/6.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row4/7.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row4/8.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row4/9.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row4/10.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row4/11.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row4/12.jpg" alt="6"></div>
                <div><img src="images/testimonials/images/row4/13.jpg" alt="6"></div>
            </div>
        </div>
    </div>
</div>
    
<div class="container">
    <div class="row mt-0">
        <div class="col-12"><img src="images/testimonials/TOTY-testimonial-page-wip3.jpg" class="img-fluid"></div>
    </div>

</div>

<script>
$(function () {
  $('.brand-strip').slick({
    variableWidth: true,     // let each slide keep its own width
    infinite: true,          // loop forever
    slidesToShow: 1,         // ignored for variableWidth, but keep it
    slidesToScroll: 1,
    arrows: false,
    dots: false,
    autoplay: true,
    autoplaySpeed: 0,        // <-- continuous scroll (paired with cssEase + speed)
    speed: 12000,             // higher = slower continuous movement
    cssEase: 'linear',       // smooth marquee-like motion
    pauseOnHover: false,
    pauseOnFocus: false,
    swipeToSlide: true,
    touchThreshold: 10
  });
});
</script>

<style>
/* Make images display at their natural/desired width */
.brand-strip img{
  display:block;
  height:300px;         /* set a consistent height */
  width:auto;          /* let width vary per image */
  object-fit:contain;
}
</style>

{% endblock %}