subscribe.hbs

{{!--
This template is used for the subscription page.
--}}

{{!-- This block preloads specific assets for the newsletter page --}}
{{#contentFor "preload"}}
  <link rel="preload" href="{{asset "css/newsletter.css"}}" as="style" />
{{/contentFor}}

{{!-- This block loads specific styles for the newsletter page --}}
{{#contentFor "styles"}}
  <link rel="stylesheet" type="text/css" href="{{asset "css/newsletter.css"}}" media="screen" />
{{/contentFor}}

{{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!< default}}

<main>
  <div class="l-wrapper" data-animate="fade-down">
    <a href="{{@site.url}}" class="m-back">
      <span class="m-back__icon icon-arrow-left"></span>
      <span>{{t "Back to home"}}</span>
    </a>
  </div>
  
  <div class="l-fullscreen">
    <section class="l-fullscreen__content in-subscribe-page" data-animate="fade-up">
      {{^if success}}
        <div>
          <header class="m-heading in-subscribe-page">
            <h1 class="m-heading__title">
              {{t "Subscribe to {blogtitle}" blogtitle=@site.title}}
            </h1>
            <p class="m-heading__description in-subscribe-page">
              {{t "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox."}}
            </p>
          </header>
          {{subscribe_form
              form_id="subscribe-form"
              form_class="m-subscribe-section__form"
              input_id="subscribe_input"
              input_class="m-input in-subscribe-section"
              button_id="subscribe_button"
              button_class="m-button primary block"
              placeholder=(t "Your email address")
              autofocus="true"
            }}
        </div>
      {{else}}
        <div>
          <header class="m-heading in-subscribe-page">
            <h1 class="m-heading__title">{{t "Subscribed!"}}</h1>
            <p class="m-heading__description in-subscribe-page">
              {{t "You've successfully subscribed to"}} <strong>{{@site.title}}</strong> {{t "with the email address"}}
              <strong>{{email}}</strong>
            </p>
          </header>
          <a href="{{@site.url}}" class="m-button outlined">{{t "Back to home"}}</a>
        </div>
      {{/if}}
    </section>
  </div>
</main>