marc-leopold/pages/services.vue

<template>
  <ContentPage heading="The Services Page Heading">
    <ul class="services-list">
      <li class="services-list__item">
        <h2 class="services-list__heading">Portraits</h2>
        <figure class="services-list__figure">
          <img class="services-list__img" src="https://via.placeholder.com/250x150" alt="">
        </figure>
        <div class="services-list__body">
          <p>Corporate portraits and publicity photos for printed materials, including annual reports and newsletters.</p>
          <a class="services-list__gallery-link" href="#">My Portraits</a>
        </div>
      </li>
      <li class="services-list__item">
        <h2 class="services-list__heading">Dance</h2>
        <figure class="services-list__figure">
          <img class="services-list__img" src="https://via.placeholder.com/250x150" alt="">
        </figure>
        <div class="services-list__body">
          <p>Photography and video production of dancers and performances for print, web, and promotion.</p>
          <a class="services-list__gallery-link" href="#">My Dance</a>
        </div>
      </li>
      <li class="services-list__item">
        <h2 class="services-list__heading">Music</h2>
        <figure class="services-list__figure">
          <img class="services-list__img" src="https://via.placeholder.com/250x150" alt="">
        </figure>
        <div class="services-list__body">
          <p>Photography and video of musical performances and portraits for print and the web, CD covers, and publicity photos.</p>
          <a class="services-list__gallery-link" href="#">My Music</a>
        </div>
      </li>
      <li class="services-list__item">
        <h2 class="services-list__heading">Events</h2>
        <figure class="services-list__figure">
          <img class="services-list__img" src="https://via.placeholder.com/250x150" alt="">
        </figure>
        <div class="services-list__body">
          <p>Photography and video production for your corporate, organisational and personal events and celebrations.</p>
          <a class="services-list__gallery-link" href="#">My Events</a>
        </div>
      </li>
    </ul>
  </ContentPage>
</template>

<script>
import ContentPage from '@/components/ContentPage'

export default {
  name: 'HomePage',

  components: {
    ContentPage
  },

  data() {
    return {
    }
  }
}
</script>

<style scoped lang="scss">
</style>