<app-header></app-header>
<main>
  <section id="hero-section">
    <div class="container">
      <div class="wrapper">
        <div class="hero-section__texts">
          <h1>FitLife</h1>
          <h2 class="h1">Gerencie sua dieta e treino</h2>
        </div>

        <div>
          <app-button (onClick)="redirectToSignup()" title="Criar conta"
            >Criar conta</app-button
          >
        </div>
      </div>
    </div>
  </section>

  <section id="about-section">
    <div class="container">
      <div class="image">
        <div class="rectangle"></div>
        <img
          alt="Mulher se alongando para exercícios físicos"
          src="../../../assets/images/lp/woman.png"
        />
      </div>

      <div class="wrapper">
        <header>
          <h1>
            <span class="green">Saúde</span>
            <span class="black">Treino</span>
            <span class="blue">Dieta</span>
          </h1>
          <h2>Conheça mais sobre nosso app</h2>
        </header>

        <div class="about-section__paragraphs">
          <p>
            O <span class="green">FitLife</span> auxilia no gerenciamento da sua
            rotina diária, colaborando para você alcançar suas metas de saúde
            através de dietas personalizadas com auxílio na realização de
            exercícios físicos.
          </p>
        </div>

        <div class="about-section__informations">
          <app-information
            *ngFor="let data of applicationData"
            [title]="data.quantity"
            [subtitle]="data.description"
          />
        </div>
      </div>
    </div>
  </section>
  <section id="differentials-section">
    <div class="container">
      <div class="differentials-section__paragraph">
        <h1>O que<br />nos <span class="blue">diferencia</span>?</h1>
      </div>
      <div class="differentials-section__wrapper">
        <ul>
          <li *ngFor="let differential of differentials">
            <div class="icon">
              <app-icon [name]="differential.icon" [size]="48"></app-icon>
            </div>
            <div class="text">
              <h4>{{ differential.label }}</h4>
              <span class="p1">{{ differential.text }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>
</main>
<app-footer></app-footer>
