From 483b36999b6bde786b47ef1d841a235475e26cfd Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Fri, 12 Jun 2026 19:43:29 -0400
Subject: [PATCH] Mirror contact tiles to homepage, consolidate hours into tile

Replace plain-text address/phone/hours on the homepage with the same
three-tile card layout used on the contact page. Consolidates the
separate hours section into the tile, removing the duplicate. Dynamic
#status and #hours-* IDs are preserved inside the tile for script.js.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 main-site/index.html | 47 +++++++++++++++++++++++++++++++-------------
 main-site/style.css  |  6 +++++-
 2 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/main-site/index.html b/main-site/index.html
index 55b0e54..b8e364e 100644
--- a/main-site/index.html
+++ b/main-site/index.html
@@ -85,15 +85,39 @@
         <img class="is-overlay" src="assets/logo/BeachPartyBalloons-logo.webp" alt="Image 2" style="width: 50%; height: auto; margin: auto;">
       </figure>
     </div>
-    <div class="is-flex-direction-column is-dark">
-      <h1 class="is-size-3" style="text-align: center;">Visit our store</h1>  
-<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:203.283.5626">203.283.5626</a> </h2>
-<div class="py-2 has-text-centered">
-  <a href="#contact-form">
-    <button class="button is-info">Contact Us</button>
-  </a>
-</div>
+    <div class="has-text-centered mt-4 mb-2">
+      <h1 class="is-size-3">Visit our store</h1>
+    </div>
+    <div class="contact-tiles">
+      <div class="contact-tile">
+        <i class="fas fa-map-marker-alt"></i>
+        <div>
+          <div class="contact-tile-label">Address</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">Phone</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>
+          <p id="status"></p>
+          <p id="hours-tuesday-friday">Tuesday – Friday: 10:00–5:00</p>
+          <p id="hours-saturday">Saturday: 9:00–3:00</p>
+          <p id="hours-sunday-monday">Sunday – Monday: Closed</p>
+        </div>
+      </div>
+    </div>
+    <div class="py-2 has-text-centered">
+      <a href="#contact-form">
+        <button class="button is-info">Contact Us</button>
+      </a>
     </div>
 
     <div class="container is-justify-content-center padding">
@@ -116,11 +140,6 @@
   <img src="assets/pics/helium/img1.webp" alt="Image 1" >
 </div>
 
-<p class="has-text-centered is-size-1">Shop Hours</p>
-<p id="status" class="has-text-centered"></p>
-<p id="hours-tuesday-friday" class="has-text-centered">Tuesday - Friday: 10:00 - 5:00</p>
-<p id="hours-saturday" class="has-text-centered">Saturday:         9:00 - 3:00</p>
-<p id="hours-sunday-monday" class="has-text-centered">Sunday - Monday:  Closed</p>
 
 <div class="form-container" id="contact-form">
   <h2 class="is-size-3 has-text-centered">Contact Us</h2>
diff --git a/main-site/style.css b/main-site/style.css
index a641345..13c7c1f 100644
--- a/main-site/style.css
+++ b/main-site/style.css
@@ -366,10 +366,14 @@ form{
   gap: 1rem;
   justify-content: center;
   max-width: 820px;
-  margin: -1.5rem auto 2rem;
+  margin: 1rem auto 2rem;
   padding: 0 1rem;
 }
 
+.contact-hero + .contact-tiles {
+  margin-top: -1.5rem;
+}
+
 .contact-tile {
   background: #fff;
   border-radius: 14px;