bootstrap-templates/northmark/case.html at main · ColorlibHQ/bootstrap-templates · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!doctype html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fieldstone — Northmark | Free Bootstrap 6 Agency Template</title>
<meta name="description" content="Case study page from the Northmark Bootstrap 6 agency template — brief, approach, results figures and a sticky project facts rail.">
<link rel="stylesheet" href="assets/vendor/bootstrap6/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

<a class="visually-hidden-focusable btn-solid theme-primary m-2" href="#main">Skip to main content</a>

<header class="site-header">
  <nav class="navbar lg:navbar-expand" aria-label="Main">
    <div class="container">
      <a class="wordmark" href="index.html">Northmark</a>

      <dialog class="drawer drawer-end" tabindex="-1" id="navDrawer" aria-labelledby="navDrawerLabel">
        <div class="drawer-header">
          <h5 class="drawer-title" id="navDrawerLabel">Menu</h5>
          <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
        </div>
        <div class="drawer-body mb-2 lg:mb-0">
          <ul class="nav navbar-nav ms-auto lg:gap-4">
            <li class="nav-item"><a class="nav-link" href="index.html#work">Work</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#capabilities">Capabilities</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#approach">Approach</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#studio">Studio</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#contact">Contact</a></li>
          </ul>
        </div>
      </dialog>

      <div class="d-flex align-items-center gap-2 ms-auto">
        <button class="btn-icon" type="button" id="themeToggle" aria-label="Toggle color mode">
          <svg class="theme-icon-light" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="3.25"/><path d="M8 1v1.5M8 13.5V15M15 8h-1.5M2.5 8H1m11-4-1 1M5 11l-1 1m0-8 1 1m6 6 1 1"/></svg>
          <svg class="theme-icon-dark" width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/></svg>
        </button>
        <a class="btn-solid theme-primary d-none md:d-inline-flex" href="index.html#contact">Start a project</a>
        <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navDrawer" aria-controls="navDrawer" aria-label="Open navigation">
          <span class="navbar-toggler-icon" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </nav>
</header>

<div class="sub-head">
  <div class="container">
    <nav aria-label="Breadcrumb" class="mb-4">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="index.html">Northmark</a></li>
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="index.html#work">Work</a></li>
        <li class="breadcrumb-item active" aria-current="page">Fieldstone</li>
      </ol>
    </nav>
    <p class="fs-sm fg-primary mb-3" style="letter-spacing:.14em;text-transform:uppercase">Brand system, website · 2026</p>
    <h1 class="tight fs-5xl mb-3">Fieldstone</h1>
    <p class="fs-lg fg-2 mb-0" style="max-width:44rem">
      A forty-year-old surveying practice that had quietly become a data business
      and was still selling itself as a surveying practice.
    </p>
  </div>
</div>

<main id="main">
  <section class="section">
    <div class="container">
      <div class="ph ph-16x9 rounded-4 mb-6">
        <img src="img/work-1.jpg" alt="Fieldstone brand system applied across print and screen" width="1400" height="788" loading="eager">
      </div>

      <div class="row g-6">
        <div class="lg:col-8">
          <div class="prose">
            <h2 class="tight fs-2xl mb-3">The problem</h2>
            <p class="fg-2">
              Fieldstone's revenue had shifted: two thirds now came from a
              subscription platform their surveyors had built for themselves and
              then started selling. Nothing about the brand said so. They were
              losing pitches to software companies a fifth their size.
            </p>

            <h2 class="tight fs-2xl mb-3 mt-6">What we did</h2>
            <p class="fg-2">
              Discovery ran three weeks and included sitting in on four sales
              calls, which is where the actual problem surfaced — the team could
              not describe the platform without first describing the surveying,
              and by then the call was half gone.
            </p>
            <ul class="fg-2">
              <li class="mb-2">Repositioned around the platform, with surveying as the proof rather than the product</li>
              <li class="mb-2">New identity system built for screen first, with a print set that follows from it</li>
              <li class="mb-2">Website rebuilt around the platform story with a real product tour</li>
              <li>Rollout across sales collateral, vehicle livery and two offices</li>
            </ul>

            <h2 class="tight fs-2xl mb-3 mt-6">Results</h2>
            <div class="row g-4 mb-4">
              <div class="sm:col-4">
                <p class="result-figure mb-1">2.4&times;</p>
                <p class="fg-3 fs-sm mb-0">Qualified inbound, first six months</p>
              </div>
              <div class="sm:col-4">
                <p class="result-figure mb-1">-38%</p>
                <p class="fg-3 fs-sm mb-0">Average sales cycle</p>
              </div>
              <div class="sm:col-4">
                <p class="result-figure mb-1">61%</p>
                <p class="fg-3 fs-sm mb-0">Of new revenue now platform</p>
              </div>
            </div>
            <p class="fg-2 mb-0">
              The number we care about most is the third one, because it was 44%
              when we started and nothing about the underlying business changed —
              only how it was described.
            </p>
          </div>

          <div class="row g-3 mt-6">
            <div class="col-6"><div class="ph ph-4x3 rounded-3"><img src="img/work-2.jpg" alt="Identity applied to print collateral" width="600" height="450" loading="lazy"></div></div>
            <div class="col-6"><div class="ph ph-4x3 rounded-3"><img src="img/work-3.jpg" alt="Website product tour" width="600" height="450" loading="lazy"></div></div>
          </div>
        </div>

        <div class="lg:col-4">
          <div class="contact-panel" style="position:sticky;top:6rem">
            <p class="fs-sm fw-semibold mb-4">Project facts</p>
            <div class="spec-row"><span class="fg-3 fs-sm">Client</span><span class="fs-sm">Fieldstone Group</span></div>
            <div class="spec-row"><span class="fg-3 fs-sm">Sector</span><span class="fs-sm">Surveying, SaaS</span></div>
            <div class="spec-row"><span class="fg-3 fs-sm">Scope</span><span class="fs-sm">Strategy, identity, web</span></div>
            <div class="spec-row"><span class="fg-3 fs-sm">Duration</span><span class="fs-sm">19 weeks</span></div>
            <div class="spec-row"><span class="fg-3 fs-sm">Team</span><span class="fs-sm">Four</span></div>
            <div class="spec-row"><span class="fg-3 fs-sm">Year</span><span class="fs-sm">2026</span></div>

            <a class="btn-solid theme-primary w-100 mt-4" href="index.html#contact">Start something similar</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<footer class="site-footer section pb-5">
  <div class="container">
    <div class="row g-5">
      <div class="md:col-4">
        <p class="wordmark d-inline-block mb-3">Northmark</p>
        <p class="fg-3 fs-sm mb-0">Second floor, 14 Kirkgate<br>Leeds LS1 6BY<br>United Kingdom</p>
      </div>
      <div class="md:col-2">
        <p class="fw-semibold fs-sm mb-3">Studio</p>
        <ul class="list-unstyled fs-sm fg-3 mb-0">
          <li class="mb-2"><a href="index.html#work">Work</a></li>
          <li class="mb-2"><a href="index.html#studio">People</a></li>
        </ul>
      </div>
      <div class="md:col-2">
        <p class="fw-semibold fs-sm mb-3">Services</p>
        <ul class="list-unstyled fs-sm fg-3 mb-0">
          <li class="mb-2"><a href="index.html#capabilities">Capabilities</a></li>
          <li class="mb-2"><a href="index.html#approach">Approach</a></li>
        </ul>
      </div>
      <div class="md:col-4">
        <p class="fw-semibold fs-sm mb-3">New business</p>
        <p class="fs-sm fg-3 mb-0"><a href="mailto:hello@northmark.example">hello@northmark.example</a></p>
      </div>
    </div>
    <hr class="my-5">
    <p class="fs-xs fg-3 mb-0">&copy; <span data-year></span> Northmark. A free Bootstrap 6 template — the studio is fictional.</p>
  </div>
</footer>

<script type="module" src="assets/js/main.js"></script>
</body>
</html>