| {{define "main"}} |
| <section class="Solutions-headline"> |
| <div class="GoCarousel" id="SolutionsHeroCarousel-carousel"> |
| <div class="GoCarousel-controlsContainer"> |
| <div class="GoCarousel-wrapper SolutionsHeroCarousel-wrapper"> |
| <ul class="js-solutionsHeroCarouselSlides SolutionsHeroCarousel-slides"> |
| {{range where .Pages "Params.series" "Case Studies" | first 3}} |
| <li class="SolutionsHeroCarousel-slide"> |
| <div class="Solutions-headlineImg"> |
| <img |
| src="/images/{{.Params.carouselImgSrc}}" |
| alt="{{.LinkTitle}}" |
| /> |
| </div> |
| <div class="Solutions-headlineText"> |
| <p class="Solutions-headlineNotification">RECENTLY UPDATED</p> |
| <h2> |
| {{.LinkTitle}} |
| </h2> |
| <p class="Solutions-headlineBody"> |
| {{with .Params.quote}}{{.}}{{end}} |
| <a href="{{.RelPermalink}}" |
| >Learn more |
| <i class="material-icons Solutions-forwardArrowIcon" |
| >arrow_forward</i |
| > |
| </a> |
| </p> |
| </div> |
| </li> |
| {{end}} |
| </ul> |
| </div> |
| <button |
| class="js-solutionsHeroCarouselPrev GoCarousel-controlPrev GoCarousel-controlPrev-solutionsHero" |
| hidden |
| > |
| <i class="GoCarousel-icon material-icons">navigate_before</i> |
| </button> |
| <button |
| class="js-solutionsHeroCarouselNext GoCarousel-controlNext GoCarousel-controlNext-solutionsHero" |
| > |
| <i class="GoCarousel-icon material-icons">navigate_next</i> |
| </button> |
| </div> |
| </div> |
| </section> |
| <section class="Solutions-useCases"> |
| <div class="Container"> |
| <div class="SolutionsTabs-tabList js-solutionsTabs" role="tablist"> |
| <button |
| role="tab" |
| aria-selected="true" |
| class="SolutionsTabs-tab" |
| id="btn-companies" |
| aria-controls="tab-companies" |
| > |
| Case studies |
| </button> |
| <button |
| role="tab" |
| aria-selected="false" |
| class="SolutionsTabs-tab" |
| id="btn-tech" |
| aria-controls="tab-tech" |
| > |
| Use cases |
| </button> |
| <hr /> |
| </div> |
| <ul |
| class="js-solutionsList Solutions-cardList" |
| aria-expanded="true" |
| aria-labelledby="btn-companies" |
| id="tab-companies" |
| role="tabpanel" |
| tabindex="0" |
| > |
| {{$solutions := where .Pages "Params.series" "Case Studies"}} |
| {{range sort $solutions "Params.company" "asc"}} |
| <li class="Solutions-card"> |
| {{if isset .Params "link" }} |
| <a |
| href="{{.Params.link}}" |
| target="_blank" |
| rel="noopener" |
| class="Solutions-useCaseLink" |
| > |
| <div |
| class="Solutions-useCaseLogo Solutions-useCaseLogo--{{.Params.company}}" |
| > |
| <img |
| loading="lazy" |
| alt="{{.Params.company}}" |
| src="/images/logos/{{.Params.logoSrc}}" |
| /> |
| </div> |
| <div class="Solutions-useCaseBody"> |
| <h3 class="Solutions-useCaseTitle">{{.LinkTitle}}</h3> |
| <p class="Solutions-useCaseDescription"> |
| {{.Description}} |
| </p> |
| </div> |
| <p class="Solutions-useCaseAction"> |
| View blog post |
| <i class="material-icons Solutions-forwardArrowIcon">open_in_new</i> |
| </p> |
| </a> |
| {{else}} |
| <a href="{{.RelPermalink}}" class="Solutions-useCaseLink"> |
| <div class="Solutions-useCaseLogo"> |
| <img |
| loading="lazy" |
| alt="{{.Params.company}}" |
| src="/images/logos/{{.Params.logoSrc}}" |
| /> |
| </div> |
| <div class="Solutions-useCaseBody"> |
| <h3 class="Solutions-useCaseTitle">{{.LinkTitle}}</h3> |
| <p class="Solutions-useCaseDescription"> |
| {{with .Params.quote}}{{.}}{{end}} |
| </p> |
| </div> |
| <p class="Solutions-useCaseAction">View case study</p> |
| </a> |
| {{end}} |
| </li> |
| {{ end }} |
| </ul> |
| <ul |
| class="js-solutionsList Solutions-cardList" |
| aria-expanded="false" |
| aria-labelledby="btn-tech" |
| id="tab-tech" |
| role="tabpanel" |
| tabindex="0" |
| hidden |
| > |
| {{range where .Pages "Params.series" "Use Cases"}} |
| <li class="Solutions-card"> |
| <a href="{{.RelPermalink}}" class="Solutions-useCaseLink"> |
| <div class="Solutions-useCaseLogo"> |
| {{$icon := .Resources.GetMatch "icon"}} {{if $icon}} |
| <img |
| loading="lazy" |
| alt="{{$icon.Params.alt}}" |
| src="{{$icon.RelPermalink}}" |
| /> |
| {{end}} |
| </div> |
| <div class="Solutions-useCaseBody"> |
| <h3 class="Solutions-useCaseTitle">{{.LinkTitle}}</h3> |
| <p class="Solutions-useCaseDescription"> |
| {{.Description}} |
| </p> |
| </div> |
| <p class="Solutions-useCaseAction"> |
| Learn More |
| </p> |
| </a> |
| </li> |
| {{end}} |
| </ul> |
| <div class="Solutions-footer"> |
| <p> |
| Interested in sharing your stories? |
| <a |
| target="_blank" |
| rel="noopener" |
| href="https://forms.gle/3kkYjH2y81SR1guAA" |
| > |
| Start here. |
| </a> |
| </p> |
| </div> |
| </div> |
| </section> |
| |
| {{end}} |