From 5cd7b29b63990cff4aa0bf705ef2b96bc6f59aba Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Fri, 12 Jun 2026 19:38:39 -0400
Subject: [PATCH] Improve contact page layout and visual design

Add a gradient hero header, three icon-based contact tiles (address,
phone, hours), and a "Send a Message" heading above the form to give
the page more structure and visual interest.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 main-site/contact/index.html | 33 +++++++++++++++++++----
 main-site/style.css          | 51 ++++++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 5 deletions(-)

diff --git a/main-site/contact/index.html b/main-site/contact/index.html
index dc22db9..c1b20e1 100644
--- a/main-site/contact/index.html
+++ b/main-site/contact/index.html
@@ -30,14 +30,37 @@
   <div id="site-nav"></div>
   <button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button>
 
-  <div class="is-flex-direction-column is-dark">
-    <h2 class="is-size-4" style="text-align: center;">
-      <a target="_blank" href="https://maps.app.goo.gl/gRk6NztgMRUsSVJf9">554 Boston Post Road, Milford, CT 06460</a>
-    </h2>
-    <h2 class="is-size-4" style="text-align: center;"><a href="tel:2032835626">203.283.5626</a></h2>
+  <section class="contact-hero">
+    <h1 class="is-size-2 has-text-weight-bold">Contact Us</h1>
+    <p class="is-size-5 mt-2">Have questions or ready to plan your event? We'd love to hear from you.</p>
+  </section>
+
+  <div class="contact-tiles">
+    <div class="contact-tile">
+      <i class="fas fa-map-marker-alt"></i>
+      <div>
+        <div class="contact-tile-label">Visit Us</div>
+        <a target="_blank" href="https://maps.app.goo.gl/gRk6NztgMRUsSVJf9">554 Boston Post Road<br>Milford, CT 06460</a>
+      </div>
+    </div>
+    <div class="contact-tile">
+      <i class="fas fa-phone"></i>
+      <div>
+        <div class="contact-tile-label">Call Us</div>
+        <a href="tel:2032835626">203.283.5626</a>
+      </div>
+    </div>
+    <div class="contact-tile">
+      <i class="fas fa-clock"></i>
+      <div>
+        <div class="contact-tile-label">Shop Hours</div>
+        <span>Tue–Fri 10:00–5:00<br>Saturday 9:00–3:00</span>
+      </div>
+    </div>
   </div>
 
   <div class="form-container">
+  <h2 class="is-size-4 has-text-centered mb-4">Send a Message</h2>
     <form id="contactForm" novalidate>
       <!-- Honeypot: hidden from humans, filled by bots -->
       <div style="display:none;" aria-hidden="true">
diff --git a/main-site/style.css b/main-site/style.css
index 4479b6d..a641345 100644
--- a/main-site/style.css
+++ b/main-site/style.css
@@ -353,6 +353,57 @@ form{
   border-color: #1b1b1b;
 }
 
+.contact-hero {
+  background: linear-gradient(135deg, #12b7ad, #1078c2);
+  color: #fff;
+  text-align: center;
+  padding: 3rem 1.5rem 2.5rem;
+}
+
+.contact-tiles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  max-width: 820px;
+  margin: -1.5rem auto 2rem;
+  padding: 0 1rem;
+}
+
+.contact-tile {
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 10px 22px rgba(24, 40, 72, 0.08);
+  border: 1px solid #e6dfc8;
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  flex: 1;
+  min-width: 200px;
+}
+
+.contact-tile i {
+  color: #12b7ad;
+  font-size: 1.4rem;
+  margin-top: 0.15rem;
+  flex-shrink: 0;
+}
+
+.contact-tile-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #888;
+  margin-bottom: 0.25rem;
+}
+
+.contact-tile a,
+.contact-tile span {
+  color: #363636;
+  line-height: 1.5;
+}
+
 .gallery-hero {
   background: linear-gradient(135deg, #12b7ad, #1078c2);
   color: #fff;