<?php
$cs_slug = 'thompson';
require __DIR__ . '/../../includes/cs_header.php';
?>

<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 center: 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>

	<div class="screenshot-hero-wrap">
		<div class="browser-chrome">
			<div class="browser-dots">
				<span></span><span></span><span></span>
			</div>
			<span class="browser-url"><?= htmlspecialchars($p['domain']) ?></span>
		</div>
		<div class="screenshot-hero-scroll">
			<img
				src="/img/thompson/hero.jpg"
				alt="Thompson Service Centre — Homepage"
				class="screenshot-hero"
				loading="lazy"
			>
		</div>
	</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>
			<p class="screenshot-card__desc">Enter your registration plate to pull vehicle details automatically.</p>
			<div class="browser-chrome browser-chrome--sm">
				<div class="browser-dots">
					<span></span><span></span><span></span>
				</div>
				<span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/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>
			<p class="screenshot-card__desc">Confirm your vehicle and fill in the booking details in one clean step.</p>
			<div class="browser-chrome browser-chrome--sm">
				<div class="browser-dots">
					<span></span><span></span><span></span>
				</div>
				<span class="browser-url"><?= htmlspecialchars($p['domain']) ?>/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">
	<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/cs_footer.php'; ?>
