From 0a4494bc448ff4fb9d4c29ca76a4c367195670f2 Mon Sep 17 00:00:00 2001
From: George Birikorang <george.fleef@gmail.com>
Date: Thu, 18 Sep 2025 03:54:59 -0700
Subject: [PATCH] feat: add "Request a Quote" section to product comparison
 page and enhance CSS styles

- Introduced a new section for "Request a Quote" in product-comparison.html, positioned after the warranty details for better visibility.
- Updated main.css with new utility classes for widths and padding to support the new layout and improve overall styling consistency.
---
 product-comparison.html | 15 +++++++++++++++
 styles/main.css         | 24 ++++++++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/product-comparison.html b/product-comparison.html
index b00e7bc..481f729 100644
--- a/product-comparison.html
+++ b/product-comparison.html
@@ -408,6 +408,21 @@
         </div>
       </section>
 
+      <!-- Centered Request a Quote (after Warranty, before Features) -->
+      <section class="bg-white pt-16 pb-2">
+        <div class="max-w-7xl mx-auto px-5">
+          <div class="mx-auto w-1/3 h-px bg-light-silver mb-6"></div>
+          <div class="flex justify-center">
+            <a
+              href="contact.html"
+              class="inline-flex items-center justify-center w-full md:w-auto px-8 h-[64px] min-h-[64px] bg-white text-black font-playfair font-light text-[20px] leading-none rounded-[15px] border border-quick-silver hover:bg-black hover:text-white hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200 box-border whitespace-nowrap mb-2"
+            >
+              Request a Quote
+            </a>
+          </div>
+        </div>
+      </section>
+
       <!-- Action Buttons Section -->
       <div class="max-w-7xl mx-auto px-5">
         <div class="flex items-stretch py-8 ml-8">
diff --git a/styles/main.css b/styles/main.css
index fb95738..86aac5a 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1083,6 +1083,14 @@ video {
   width: 95vw;
 }
 
+.w-24 {
+  width: 6rem;
+}
+
+.w-1\/3 {
+  width: 33.333333%;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1722,6 +1730,18 @@ video {
   padding-top: 1rem;
 }
 
+.pt-16 {
+  padding-top: 4rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -2317,6 +2337,10 @@ video {
     width: auto;
   }
 
+  .md\:w-64 {
+    width: 16rem;
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }