# Landing page

The first page of a service - what it does, what users need, and a start button.

## Preview

```html title="Service start page"
<main class="govbb-width-container govbb-main-wrapper" id="main-content">
  <h1 class="govbb-text-display">Renew your driver's licence</h1>
  <p class="govbb-text-body-lg">
    Use this service to renew a Barbados driver's licence that expires within
    the next 90 days.
  </p>
  <p class="govbb-text-body">It takes around 5 minutes.</p>

  <a class="govbb-button" href="/service/start/">Start now</a>

  <h2 class="govbb-text-h2">Before you start</h2>
  <p class="govbb-text-body">You will need:</p>
  <ul class="govbb-list govbb-list--bullet">
    <li>your current licence number</li>
    <li>a debit or credit card to pay the $50 fee</li>
  </ul>
</main>
```

The landing page is the entry point for a service. Lead with the service name,
say in one line what it does and who it is for, then give a single clear "Start
now" button. Tell users what they need before they begin so they do not get
part-way through and have to stop.

## When to use this page

Use it as the first page of any transactional service. Link to it from the
service's place in the wider site so users arrive here before the first
question.

## What to include

A plain-language name and description, roughly how long it takes, any cost, what
the user needs to hand, and one prominent start action. Keep everything else off
this page - guidance and eligibility detail belong in their own pages.