presidential-innovation-fellows/code-gov-web

<section id="banner-home" class="banner large" [style.background-image]="backgroundImage">
  <div class="banner-content">
    <div class="banner-title">{{content.home.banner.motto}}</div>
    <div class="banner-subtitle">{{content.home.banner.subtitle}}</div>
    <div class="indented">
      <div class="banner-subsection width-half" [style.z-index]="30">
        <div class="banner-subsection-content">
          <div class="banner-subsection-content-padder">
            <repos-search autofocus=true buttonClasses="alt" placeholder="{{ content.home.banner.search_placeholder_text }}"></repos-search>
          </div>
        </div>
      </div>
      <div class="vertical-row" *ngIf="content.home.banner.help_wanted?.title || content.home.banner.help_wanted?.description"></div>
      <div class="banner-subsection width-half" id="banner-subsection-engage">
        <div class="banner-subsection-content">
          <div class="banner-subsection-content-padder">
            <div class="banner-subsection-title" *ngIf="content.home.banner.help_wanted.title">{{content.home.banner.help_wanted.title}}</div>
            <div class="banner-subsection-subtitle" *ngIf="content.home.banner.help_wanted.description">{{content.home.banner.help_wanted.description}}</div>
            <div class="buttons" *ngIf="content.home.banner.help_wanted.button">
                <button class="alt" routerLink="/open-tasks" [textContent]="content.home.banner.help_wanted.button"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <br/>
      <br/>
      <div class="banner-subsection">
        <div class="banner-subsection-subtitle" id="issue-banner-subsection-subtitle">
          <img class="chat" src="/assets/img/icons/chat_bubble.png" alt="">
            <span>Have questions or feedback? Open an issue on our <a class="link" href="{{content.home.banner.issue_url}}" id="issue-link" target="_blank">open source repository</a>.</span>
        </div>
      </div>
    </div>
  </div>

  <a
    class="scroll-indicator"
    title="Scroll Down"
    (click)="scrollToAbout()"
  >
    <i class="icon icon-angle-down"></i>
  </a>

</section>



<section id="about" class="about indented">
  <header>
    <h2>Our Mission</h2>
    <p>{{content.home.mission}}</p>
  </header>
  <br />
  <hr />
  <ul class="indented about-actions">
    <li class="about-action width-third" *ngFor="let item of aboutItems">
      <a [routerLink]="item.link">
        <img alt="" aria-hidden="true" [src]="item.image" />
        <h3>{{item.title}}</h3>
        <p>{{item.description}}</p>
      </a>
    </li>
  </ul>
</section>
<section class="featured-projects block block--white">
  <div id="featured-projects-title">
    <div class="indented">
        <h2>Featured Projects</h2>
    </div>
  </div>
  <div>
    <div class="block featured-project" *ngFor="let fp of featured; let i = index">
      <div class="indented">
        <div class="width-half" *ngIf="i % 2 === 0"><img [src]="fp.image" alt=""></div>
        <div class="width-half">
          <div class="featured-project-info">
            <div class="fp-short-name">{{fp.short_name}}</div>
            <div class="fp-verbose-name" *ngIf="fp.verbose_name && fp.verbose_name !== ''">{{fp.verbose_name}}</div>
            <div class="fp-developed-by">developed by the {{fp.author}}</div>
            <p class="fp-description">{{fp.description}}</p>
            <div class="buttons">
              <span *ngFor="let link of fp.links">
                <a *ngIf="link.routerLink" [routerLink]="link.routerLink"><button class="alt" [textContent]="link.name"></button></a>
                <a *ngIf="!link.routerLink" [href]="link.url"><button class="alt" [textContent]="link.name"></button></a>
              </span>
            </div>
          </div>
        </div>
        <div class="width-half" *ngIf="i % 2 === 1"><img [src]="fp.image" alt=""></div>
      </div>
    </div>
  </div>
</section>

<section class="press" *ngIf="content.home.press">
  <div class="banner medium" [style.background-attachment]="'initial'">
    <div class="banner-content">
      <div class="indented">
        <div class="banner-title">Press</div>
        <div class="press-container">
          <div class="quote light">
            <blockquote>{{content.home.press.quote}}</blockquote>
            <div class="attribution">
              <a [href]="content.home.press.attribution.url">
                <img class="press-logo" [src]="content.home.press.attribution.image" [alt]="content.home.press.attribution.alt">
              </a>
            </div>
          </div>
          <div>
            <hr />
            <ul class="press-links">
              <li>
                <a *ngFor="let link of content.home.press.links" [href]="link.url">
                  <img class="press-logo" [src]="link.image" [alt]="link.alt">
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- <modal></modal> -->