home.html

<template name="home">
  <div class="page home">

    {{>nav title='Local Market' black=true}}

    <div class="content-scrollable">
      <div class="bg-image home">
        <h1 class="title-home">
          <img src="img/app/logo-local.svg" alt="Local Market"/>
        </h1>
        <span class="hours"><span class="title-callout">Hours</span>
        Mon–Fri 9-6pm, Sat 10-5pm</span>
        <span class="arrow"></span>
      </div>

      <div class="callout-news">
        <span class="title-callout">News</span>
        {{latestNews.text}}
      </div>

      <h2 class="list-title">What's Cooking</h2>
      <div class="list-subtitle">See what the community is cooking</div>
      <div class="list-activities">
        {{#each activities}}
          {{> activity}}
        {{else}}
          <div class="wrapper-message">
            <div class="title-message">No one is cooking yet!</div>
            <div class="subtitle-message">Share that you made a recipe and it will show up here.</div>
          </div>
        {{/each}}
      </div>
      <a href="{{pathFor 'feed'}}" class="btn-primary">See what's cooking</a>

      <h2 class="list-title">Our Favorite Recipes</h2>
      <div class="list-subtitle">Hand-picked by neighborhood chefs</div>
      <div class="list-recipes">
        {{#each featuredRecipes}}
          {{> recipeItem recipe=this size='small'}}
        {{/each}}
      </div>

      <a href="{{pathFor 'recipes'}}" class="btn-primary">Explore all our recipes</a>
    </div>

  </div>
</template>