Move portfolio case studies to data-driven template system and archive old individual files

_portfolio/thompson/index.php

@@ -0,0 +1,101 @@
+<?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 &amp; 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'; ?>