Frontend Responsa: Implementando código modular: index.html.slim

index.html.slim

/ Hero
.row
  .hero
    .container
      h1.hero__title Nós sómos Waza
      h2.hero__subtitle Lorem lipsum dolor sit amet consectue lorem dorem.
      .hero__links
        = link_to 'Conheça o nosso trabalho', '/', class: 'btn'

/ About
.row
  .section.section--about
    .section__header
      h1.section__title Nossa história
      h2.section__subtitle Lorem lipsum dolor sit amet consectue lorem dorem lipsum.
    .section__body
      .video-player
        = image_tag 'video-placeholder--large.jpg'
      p Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      p Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

/ Works
.row
  .section.section--work
    .section__header
      h1.section__title Últimos trabalhos
      h2.section__subtitle Lorem lipsum dolor sit amet consectue lorem dorem lipsum.
    .section__body
      .list.list--work
        - for i in (1..4)
          .list__item
            = link_to '/', class: 'card' do
              .card__media = image_tag "work-thumb-0#{i}.jpg"
              .card__title Lorem Dorem
              .card__body
                p Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
      .cta
        = link_to 'Ver todos os projetos', '/', class: 'btn'


/ Testimonial
.row
  .section.section--testimonial
    .section__header
      h1.section__title Clientes Satisfeitos
      h2.section__subtitle Lorem lipsum dolor sit amet consectue lorem dorem lipsum.
    .section__body
      blockquote.testimonial
        .testimonial__meta
          .testimonial__media
            .avatar
              = image_tag 'testimonial-avatar.jpg'
          .testimonial__name Rafael Torales
          .testimonial__description Designer no Startaê
        .testimonial__quote
          p Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod  tincidunt ut laoreet dolore magna aliquam erat volutpat. Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.

/ Contact
.row
  .section.section--contact
    .section__header
      h1.section__title Fale com a gente
      h2.section__subtitle Lorem lipsum dolor sit amet consectue lorem dorem lipsum.
    .section__body
      form.form
        fieldset.fieldset
          .form__row
            .form__field
              input.form__input type='text' placeholder='Nome'
          .form__row
            .form__field
              input.form__input type='email' placeholder='Email'
          .form__row
            .form__field
              input.form__input type='text' placeholder='Telefone'
          .form__row
            .form__field
              textarea.form__input placeholder='Mensagem'
          .form_row
            button.btn type='submit' Enviar

      .list.list--contact
        .list__item.list__item--address
          address.address
            | Superquadra Norte 214<br>
            | Bloco A, Sala 214<br>
            | Asa Norte<br>
            | Brasília, Brasil<br>
        .list__item.list__item--email
          = link_to '[email protected]', 'mailto:[email protected]'
        .list__item.list__item--phone
          = link_to '+55 61 3344-3344', 'tel:3344-3344'