From d19c3fe265d9b3d40a0e87c72d0e1453105123f7 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Mon, 10 Nov 2025 14:43:46 +0000
Subject: [PATCH] Add a quick report link which shows at the top on mobile

---
 templates/service-request.html | 40 ++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/templates/service-request.html b/templates/service-request.html
index 139fe4cc..dc1489d1 100644
--- a/templates/service-request.html
+++ b/templates/service-request.html
@@ -14,6 +14,13 @@
 	max-height: 80px;
 	width: auto;
 }
+.quick-report-mobile {
+	background-color: #ff9800;
+}
+.quick-report-desktop {
+	background-color: #ffefd5;
+	border-left: 4px solid #ff9800;
+}
 {{end}}
 {{define "content"}}
 <!-- Header -->
@@ -47,6 +54,19 @@
 			</div>
 		</div>
 	</section>
+	
+	<!-- Quick Report for Mobile - Only visible on small screens -->
+	<section class="py-3 quick-report-mobile d-md-none">
+		<div class="container">
+			<div class="row">
+				<div class="col-12 text-center">
+					<h4 class="mb-2">On the go?</h4>
+					<a href="/service-request-quick" class="btn btn-dark btn-lg">Make a Quick Report</a>
+					<p class="mb-0 mt-2"><small>Report mosquito issues in under 60 seconds</small></p>
+				</div>
+			</div>
+		</div>
+	</section>
 
 	<!-- Services Section -->
 	<section class="py-5">
@@ -101,6 +121,25 @@
 					</div>
 				</div>
 			</div>
+			
+			<!-- Quick Report for Desktop - Only visible on medium screens and up -->
+			<div class="row mt-4 d-none d-md-block">
+				<div class="col-12">
+					<div class="card quick-report-desktop">
+						<div class="card-body py-3">
+							<div class="row align-items-center">
+								<div class="col-md-8">
+									<h5 class="mb-1">Need to make a quick report?</h5>
+									<p class="mb-0">Use our streamlined form to report mosquito issues in under 60 seconds</p>
+								</div>
+								<div class="col-md-4 text-md-end mt-3 mt-md-0">
+									<a href="/service-request-quick" class="btn btn-warning">Quick Report</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</section>
 </main>
@@ -118,4 +157,5 @@
 		</div>
 	</div>
 </footer>
+
 {{end}}