Add portfolio grid with 15 case studies and reusable template
This commit is contained in:
Ovidiu U
@@ -1,4 +1,5 @@
|
||||
<?php
|
||||
|
||||
/*
|
||||
* CASE STUDY PAGE TEMPLATE
|
||||
* ─────────────────────────────────────────────────────────────────
|
||||
@@ -10,103 +11,107 @@
|
||||
* Images: store in /img/{slug}/ — see naming convention in CLAUDE.md.
|
||||
* ─────────────────────────────────────────────────────────────────
|
||||
*/
|
||||
$title = 'Thompson Service Centre — Case Study';
|
||||
$title = 'Thompson Service Centre — Case Study';
|
||||
$description = 'How we built a trust-first digital presence for a 25-year Peterborough garage.';
|
||||
$extra_css = '/css/portfolio.css';
|
||||
require __DIR__ . '/../../includes/header.php';
|
||||
$extra_css = '/css/portfolio.css';
|
||||
require __DIR__.'/../../includes/header.php';
|
||||
?>
|
||||
|
||||
<div class="cs-breadcrumb">
|
||||
<a href="/portfolio/" class="cs-back">← All Work</a>
|
||||
<span class="cs-breadcrumb-label">[01 / WEB_DEV]</span>
|
||||
</div>
|
||||
<div class="cs-breadcrumb">
|
||||
<a href="/portfolio/" class="cs-back">← All Work</a>
|
||||
<span class="cs-breadcrumb-label">[01 / WEB_DEV]</span>
|
||||
</div>
|
||||
|
||||
<header class="hero">
|
||||
<div class="hero-label">Case Study — 01</div>
|
||||
<h1>Thompson<br>Service Centre</h1>
|
||||
<p class="hero-sub">Website Redesign · 2025</p>
|
||||
<ul class="cs-meta-bar">
|
||||
<li>HTML · Tailwind CSS v4 · GSAP</li>
|
||||
<li>Thompson Service Centre, Peterborough</li>
|
||||
<li>2025</li>
|
||||
</ul>
|
||||
</header>
|
||||
<header class="hero">
|
||||
<div class="hero-label">Case Study — 01</div>
|
||||
<h1>Thompson<br>Service Centre</h1>
|
||||
<p class="hero-sub">Website Redesign · 2025</p>
|
||||
<ul class="cs-meta-bar">
|
||||
<li>HTML · Tailwind CSS v4 · GSAP</li>
|
||||
<li>Thompson Service Centre, Peterborough</li>
|
||||
<li>2025</li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">Project Overview</div>
|
||||
<div class="section-content">
|
||||
<p>Thompson Service Centre needed more than a website — they needed a digital presence that matched 25 years of earned trust. We built a high-fidelity landing page that puts credibility front and centre: a bold hero section, a trust bar loaded with real credentials, and service cards that communicate competence without the usual garage-site clichés. Every element was designed to make a first-time visitor feel like they'd already found their mechanic.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">Homepage</div>
|
||||
<div class="screenshot-hero-wrap">
|
||||
<div class="browser-chrome">
|
||||
<div class="browser-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<span class="browser-url">thompsonservicecentre.co.uk</span>
|
||||
</div>
|
||||
<img
|
||||
src="/img/thompson/hero.jpg"
|
||||
alt="Thompson Service Centre — Homepage"
|
||||
class="screenshot-hero"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
<div class="section-label">Project Overview</div>
|
||||
<div class="section-content">
|
||||
<p>Thompson Service Centre needed more than a website — they needed a digital presence that matched 25 years of earned trust. We built a high-fidelity
|
||||
landing page that puts credibility front and centre: a bold hero section, a trust bar loaded with real credentials, and service cards that
|
||||
communicate competence without the usual garage-site clichés. Every element was designed to make a first-time visitor feel like they'd already found
|
||||
their mechanic.</p>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">Booking Flow</div>
|
||||
<div class="services-grid">
|
||||
<div class="service-item screenshot-card">
|
||||
<span class="service-num">Vehicle Lookup</span>
|
||||
<div class="browser-chrome browser-chrome--sm">
|
||||
<div class="browser-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<span class="browser-url">thompsonservicecentre.co.uk/book</span>
|
||||
</div>
|
||||
<img
|
||||
src="/img/thompson/booking-lookup.jpg"
|
||||
alt="Vehicle registration lookup"
|
||||
class="screenshot-screen"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div class="service-item screenshot-card">
|
||||
<span class="service-num">Booking Form</span>
|
||||
<div class="browser-chrome browser-chrome--sm">
|
||||
<div class="browser-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<span class="browser-url">thompsonservicecentre.co.uk/book</span>
|
||||
</div>
|
||||
<img
|
||||
src="/img/thompson/booking-confirm.jpg"
|
||||
alt="Vehicle confirmed and booking form"
|
||||
class="screenshot-screen"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="screenshot-hero-wrap">
|
||||
<div class="browser-chrome">
|
||||
<div class="browser-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<span class="browser-url">thompsonservicecentre.co.uk</span>
|
||||
</div>
|
||||
<img
|
||||
src="/img/thompson/hero.jpg"
|
||||
alt="Thompson Service Centre — Homepage"
|
||||
class="screenshot-hero"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-label">Craft & Execution</div>
|
||||
<div class="section-content">
|
||||
<p>Built with vanilla HTML, Tailwind CSS v4, and GSAP-powered scroll animations, the page loads fast and feels premium on every device. The design system — rooted in Workshop Navy and Safety Orange — draws from real automotive heritage rather than off-the-shelf templates. Noise overlays, layered gradients, and spring-eased micro-interactions give it a tactile warmth that sets it apart from every other garage site in the postcode.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="section-label">Booking Flow</div>
|
||||
<div class="services-grid">
|
||||
<div class="service-item screenshot-card">
|
||||
<span class="service-num">Vehicle Lookup</span>
|
||||
<div class="browser-chrome browser-chrome--sm">
|
||||
<div class="browser-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<span class="browser-url">thompsonservicecentre.co.uk/book</span>
|
||||
</div>
|
||||
<img
|
||||
src="/img/thompson/booking-lookup.jpg"
|
||||
alt="Vehicle registration lookup"
|
||||
class="screenshot-screen"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div class="service-item screenshot-card">
|
||||
<span class="service-num">Booking Form</span>
|
||||
<div class="browser-chrome browser-chrome--sm">
|
||||
<div class="browser-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<span class="browser-url">thompsonservicecentre.co.uk/book</span>
|
||||
</div>
|
||||
<img
|
||||
src="/img/thompson/booking-confirm.jpg"
|
||||
alt="Vehicle confirmed and booking form"
|
||||
class="screenshot-screen"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-cta">
|
||||
<div class="section-label">— Next</div>
|
||||
<div class="section-content">
|
||||
<a href="/portfolio/" class="cs-back cs-back--lg">← Back to All Work</a>
|
||||
<p class="large-text">Got a project in mind?</p>
|
||||
<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="section-label">Craft & Execution</div>
|
||||
<div class="section-content">
|
||||
<p>Built with vanilla HTML, Tailwind CSS v4, and GSAP-powered scroll animations, the page loads fast and feels premium on every device. The design
|
||||
system — rooted in Workshop Navy and Safety Orange — draws from real automotive heritage rather than off-the-shelf templates. Noise overlays,
|
||||
layered gradients, and spring-eased micro-interactions give it a tactile warmth that sets it apart from every other garage site in the postcode.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php require __DIR__ . '/../../includes/footer.php'; ?>
|
||||
<section class="section section-cta">
|
||||
<div class="section-label">— Next</div>
|
||||
<div class="section-content">
|
||||
<a href="/portfolio/" class="cs-back cs-back--lg">← Back to All Work</a>
|
||||
<p class="large-text">Got a project in mind?</p>
|
||||
<a href="mailto:hello@uovidiu.com" class="btn">Get in Touch →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php
|
||||
require __DIR__.'/../../includes/footer.php'; ?>
|
||||
|
||||
Reference in New Issue
Block a user