102 lines
3.6 KiB
PHP
102 lines
3.6 KiB
PHP
<?php
|
|
$cs_slug = 'thompson';
|
|
require __DIR__ . '/../../includes/cs_header.php';
|
|
?>
|
|
|
|
<main>
|
|
|
|
<section class="cs-overview">
|
|
<div class="cs-overview-label">
|
|
<span class="section-label">Project Overview</span>
|
|
</div>
|
|
<div class="cs-overview-body">
|
|
<p class="cs-overview-text">
|
|
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.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="category-divider">
|
|
<h2>Screenshots</h2>
|
|
</div>
|
|
|
|
<section class="screenshots-section">
|
|
|
|
<div class="screenshot-hero">
|
|
<div class="browser-frame">
|
|
<div class="browser-bar">
|
|
<div class="browser-dots">
|
|
<span class="browser-dot browser-dot--red"></span>
|
|
<span class="browser-dot browser-dot--beige"></span>
|
|
<span class="browser-dot browser-dot--green"></span>
|
|
</div>
|
|
<span class="browser-url"><?php echo htmlspecialchars($p['domain']); ?></span>
|
|
</div>
|
|
<div class="browser-scroll-wrap">
|
|
<div class="browser-scroll">
|
|
<img src="/img/thompson/hero.jpg" alt="Thompson Service Centre — Homepage">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screenshots-label">
|
|
<span class="section-label">Booking Flow</span>
|
|
</div>
|
|
|
|
<div class="screenshot-grid">
|
|
|
|
<div>
|
|
<span class="screenshot-card-label">Vehicle Lookup</span>
|
|
<p class="screenshot-card-desc">Registration plate lookup pulls vehicle details instantly — reducing form friction and building user confidence from the first interaction.</p>
|
|
<div class="browser-frame">
|
|
<div class="browser-bar">
|
|
<div class="browser-dots">
|
|
<span class="browser-dot browser-dot--red"></span>
|
|
<span class="browser-dot browser-dot--beige"></span>
|
|
<span class="browser-dot browser-dot--green"></span>
|
|
</div>
|
|
<span class="browser-url"><?php echo htmlspecialchars($p['domain']); ?>/book</span>
|
|
</div>
|
|
<img src="/img/thompson/booking-lookup.jpg" alt="Thompson Service Centre — vehicle lookup step">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="screenshot-card-label">Booking Form</span>
|
|
<p class="screenshot-card-desc">A clean, single-column booking form with service selection and date picker. Designed for speed on mobile — no unnecessary steps, no dead ends.</p>
|
|
<div class="browser-frame">
|
|
<div class="browser-bar">
|
|
<div class="browser-dots">
|
|
<span class="browser-dot browser-dot--red"></span>
|
|
<span class="browser-dot browser-dot--beige"></span>
|
|
<span class="browser-dot browser-dot--green"></span>
|
|
</div>
|
|
<span class="browser-url"><?php echo htmlspecialchars($p['domain']); ?>/book</span>
|
|
</div>
|
|
<img src="/img/thompson/booking-confirm.jpg" alt="Thompson Service Centre — booking confirmation step">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<div class="category-divider">
|
|
<h2>Execution</h2>
|
|
</div>
|
|
|
|
<section class="cs-overview">
|
|
<div class="cs-overview-label">
|
|
<span class="section-label">Craft & Execution</span>
|
|
</div>
|
|
<div class="cs-overview-body">
|
|
<p class="cs-overview-text">
|
|
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.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<?php require __DIR__ . '/../../includes/cs_footer.php'; ?>
|