index.pug

//-
  output: 'index'
  chunks: [ 'main' ]
  sitemap:
    path: '/'
    priority: 0.8
    changeFreq: 'monthly'
  page:
    class: 'home'
    title: 'Home'
    description: 'The description of the homepage goes here.'
    image_url: ''
    author: ''
  ---
extends tmpls/_layout

block content
  -
    var githubRepository = 'https://github.com/bymathias/cactus-boilerplate'
    var githubReleases = 'https://github.com/bymathias/cactus-boilerplate/releases'

  section.hero.is-fullheight-with-navbar.has-bg-img
    .hero-body
      .container
        .columns
          .column.is-half.is-offset-one-quarter.has-text-centered
            h1.title.is-size-2.pb-2=app.title
            h3.subtitle.is-size-5=app.description
            .buttons
              a.button.is-github(href=githubRepository target="_blank")
                span.icon #[i.fab.fa-github]
                span View on Github
              a.button.is-primary(href=githubReleases target="_blank")
                span.icon #[i.fas.fa-download]
                span Download
            .tag-version
              .tags.has-addons.is-family-code.pl-2
                span.tag.is-primary version
                span.tag.is-info #{env.npm_package_version}

  -
    var servicesList = [
      { title: 'Service 1', description: 'Description of the service number 1' },
      { title: 'Service 2', description: 'Description of the service number 2' },
      { title: 'Service 3', description: 'Description of the service number 3' },
      { title: 'Service 4', description: 'Description of the service number 4' },
      { title: 'Service 5', description: 'Description of the service number 5' },
      { title: 'Service 6', description: 'Description of the service number 6' },
      { title: 'Service 7', description: 'Description of the service number 7' },
      { title: 'Service 8', description: 'Description of the service number 8' },
      { title: 'Service 9', description: 'Description of the service number 9' },
      { title: 'Service 10', description: 'Description of the service number 10' },
      { title: 'Service 11', description: 'Description of the service number 11' },
      { title: 'Service 12', description: 'Description of the service number 12' }
    ]

  section.section.section--services#services
    .section__block
      .container
        .has-text-centered
          h3.is-size-3.mb-6 Services
        .columns.is-multiline
          each val, index in servicesList
            .column.has-text-centered.is-half-tablet.is-one-third-widescreen.is-one-quarter-fullhd
              h4.is-size-5=val.title
              p=val.description

  section.section.section--about#about
    .section__block.is-relative
      .container-fluid
        .columns.is-gapless
          .column.is-half.img-side.img-side--left
            .img-holder
      .container
        .columns.is-vcentered
          .column.is-offset-half
            .columns
              .column.is-offset-1
                h3.is-size-3.mb-6 About
                p
                  | Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                  | Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                  | when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                  | It has survived not only five centuries, but also the leap into electronic typesetting,
                  | remaining essentially unchanged.

  section.section.section--contact#contact
    .section__block
      .container
        .has-text-centered
          h3.is-size-3.mb-6 Services
        .columns.is-multiline
          each val, index in servicesList
            .column.has-text-centered.is-half-tablet.is-one-third-widescreen.is-one-quarter-fullhd
              h4.is-size-5=val.title
              p=val.description