{{define "main"}}
<section class="Hero">
  <div class="Hero-gridContainer">
    <div class="Hero-blurb">
      <h1>Scale. Faster</h1>
      <h2>
        An open source programming language that helps build fast, secure, scalable applications that grow alongside your
        business.
      </h2>
    </div>
    <div class="Hero-actions">
      <a class="Primary" href="#learn">Learn More</a>
      <a href="https://golang.org/dl">Download Go</a>
    </div>
    <div class="Hero-gopher">
      <img class="Hero-gopherLadder" src="/images/gopher-ladder.svg" alt="Go Gopher climbing a ladder.">
    </div>
  </div>
</section>
<section class="WhoUses">
  {{$solutions := index (where .Pages "Section" "solutions") 0}}
  <div class="WhoUses-gridContainer">
    <div class="WhoUses-header">
      <h2>Who Uses Go</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
    </div>
    <ul class="WhoUses-caseStudyList">
      {{range where $solutions.Pages "Params.series" "Case Studies"}}
        <li class="WhoUses-caseStudy">
          <a href="{{.RelPermalink}}">
            {{$logo := .Resources.GetMatch "logo"}}
            <img src="{{$logo.RelPermalink}}" class="WhoUses-logo" alt="{{$logo.Params.alt}}">
            <p>View case study</p>
          </a>
        </li>
      {{end}}
    </ul>
  </div>
</section>
<section class="UseCases">
  {{$solutions := index (where .Pages "Section" "solutions") 0}}
  <div class="Container">
    <div class="UseCases-gridContainer">
      <div class="UseCases-header">
        <h2>Use Cases</h2>
      </div>
      {{range where $solutions.Pages "Params.series" "Use Cases"}}
        <div class="UseCase">
          <div class="UseCase-logo">
            {{$icon := .Resources.GetMatch "icon-white"}}
            {{if $icon}}
            <img alt="{{$icon.Params.alt}}" src="{{$icon.RelPermalink}}">
            {{end}}
          </div>
          <h3 class="UseCase-title">{{.LinkTitle}}</h3>
          <p class="UseCase-description">
            {{.Description}}
          </p>
          <p class="UseCase-action">
            <a href="{{.RelPermalink}}">Learn More &gt;</a>
          </p>
        </div>
      {{end}}
    </div>
  </div>
</section>
<section class="WhyGo">
  <div class="WhyGo-gridContainer">
    <div class="WhyGo-header">
      <h2>Why Go</h2>
    </div>
    <ul class="WhyGo-reasons">
      <li class="WhyGo-reason">
        <div class="WhyGo-reasonIcon" role="presentation">
          <img src="/images/star-24px.svg" alt="Star."/>
        </div>
        <div class="WhyGo-reasonText">
          <h3 class="WhyGo-reasonTitle">Scalability</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim veniam,
          </p>
        </div>
      </li>
      <li class="WhyGo-reason">
        <div class="WhyGo-reasonIcon" role="presentation">
          <img src="/images/star-24px.svg" alt="Star."/>
        </div>
        <div class="WhyGo-reasonText">
          <h3 class="WhyGo-reasonTitle">Microservices</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim veniam,
          </p>
        </div>
      </li>
      <li class="WhyGo-reason">
        <div class="WhyGo-reasonIcon" role="presentation">
          <img src="/images/star-24px.svg" alt="Star."/>
        </div>
        <div class="WhyGo-reasonText">
          <h3 class="WhyGo-reasonTitle">Efficiency</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim veniam,
          </p>
        </div>
      </li>
    </ul>
    <div class="WhyGo-gopher">
      <img src="images/gopher-biplane.png" alt="Go Gopher piloting a biplane.">
    </div>
  </div>
</section>
<section class="LearnGo">
  <div class="LearnGo-gridContainer">
    <div class="LearnGo-header">
      <h2>Learn Go</h2>
      <p>Join the Go community and start learning</p>
    </div>
    <div class="LearnGo-subHeader">
      <h3>Courses</h3>
      <p class="LearnGo-viewMore">
        {{if gt (len $.Site.Data.learn.courses.links) 4}}
          <a href="#">View More &gt;</a>
        {{end}}
      </p>
    </div>
    <ul class="LearnGo-courses">
      {{range first 4 $.Site.Data.learn.courses.links}}
      <li class="LearnGo-courseItem">
        <div class="LearnGo-course">
          <a href="{{.url}}">
            <div class="LearnGo-courseImage">
              {{if .thumbnail}}
                <img alt="{{.title}} thumbnail." src="{{.thumbnail}}">
              {{end}}
            </div>
            <p class="LearnGo-courseTitle">{{.title}}</p>
          </a>
        </div>
      </li>
      {{end}}
    </ul>
    <div class="LearnGo-subHeader">
      <h3>Events</h3>
      <p class="LearnGo-viewMore"><a href="https://www.meetup.com/pro/go">View more events &gt;</a></p>
    </div>
    <ul class="LearnGo-events">
      {{range first 3 $.Site.Data.events.all}}
        <li class="LearnGo-eventItem">
          <div class="LearnGo-eventThumbnail {{if not .thumbnailurl}}LearnGo-eventThumbnail--noimage{{end}}">
            {{if .thumbnailurl}}
              <img src="{{.thumbnailurl}}" alt="{{.name}} group photo."/>
            {{end}}
          </div>
          <div class="LearnGo-eventBody">
            <div class="LearnGo-eventDate">
              <p>{{.local_date}}</p>
              <p>{{.city}}, {{.state}} {{.country}}</p>
            </div>
            <div class="LearnGo-eventText">
              <h4 class="LearnGo-eventName">
                <a href="{{.url}}">{{.name}}</a>
              </h4>
              <p class="LearnGo-eventDescription">
                {{.description | safeHTML}}
              </p>
            </div>
            <p class="LearnGo-viewMore"><a href="{{.url}}">Learn more &gt;</a></p>
          </div>
        </li>
      {{end}}
    </ul>
  </div>
</section>
{{end}}