Add trusted logos and manual reviews

index.html

@@ -120,6 +120,86 @@
 
 <iframe style="border:none;width:100%;" id="contact-us-vjz40v" src="https://forms.beachpartyballoons.com/forms/contact-us-vjz40v"></iframe><script type="text/javascript" onload="initEmbed('contact-us-vjz40v')" src="https://forms.beachpartyballoons.com/widgets/iframe.min.js"></script>
 
+<hr class="section-divider">
+<section class="section reviews-section">
+  <div class="container has-text-centered">
+    <h2 class="is-size-3">Google Reviews</h2>
+    <p class="is-size-6 has-text-grey">See what clients are saying, or leave a review after your event.</p>
+    <div class="reviews-summary mt-4">
+      <div class="reviews-stars" aria-label="Average rating: 5.0 out of 5">
+        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
+      </div>
+      <p class="is-size-5 has-text-weight-semibold">Rated <span id="reviewsRatingValue">5.0</span> on Google</p>
+      <p class="is-size-7 has-text-grey">Based on <span id="reviewsCountValue">100+ reviews</span></p>
+    </div>
+    <div class="reviews-grid mt-5" id="reviewsGrid">
+      <article class="review-card">
+        <p>"Stunning balloon arch and super easy to work with. Our guests loved it!"</p>
+        <p class="review-author">— Jordan M., Corporate Event</p>
+      </article>
+      <article class="review-card">
+        <p>"Professional setup and gorgeous colors. Made our celebration unforgettable."</p>
+        <p class="review-author">— Maria L., Birthday Party</p>
+      </article>
+      <article class="review-card">
+        <p>"Fast, friendly, and beautiful designs. Will book again for our next event."</p>
+        <p class="review-author">— Alex T., School Event</p>
+      </article>
+    </div>
+    <div class="buttons is-centered mt-4">
+      <a class="button is-info" target="_blank" rel="noopener" href="https://www.google.com/maps/place/Beach+Party+Balloons/@41.2305385,-73.0657635,17z/data=!3m1!4b1!4m6!3m5!1s0x89e80c66edb1f163:0xd0209d75415d0e41!8m2!3d41.2305385!4d-73.0657635!16s%2Fg%2F11bxc5f6tk?entry=ttu&g_ep=EgoyMDI1MTIwOS4wIKXMDSoASAFQAw%3D%3D">Read reviews</a>
+      <a class="button is-light" target="_blank" rel="noopener" href="https://g.page/r/CUEOXUF1nSDQEBE/review">Leave a review</a>
+    </div>
+  </div>
+</section>
+
+<section class="section trusted-section">
+  <div class="container">
+    <div class="has-text-centered mb-5">
+      <h2 class="is-size-3">Trusted by</h2>
+      <p class="is-size-6 has-text-grey">Brands and organizations we have had the joy of celebrating with.</p>
+    </div>
+    <div class="trusted-logos">
+      <figure class="trusted-logo">
+        <img src="assets/trusted/512px-Subway_icon.svg.webp" alt="Subway logo" loading="lazy">
+      </figure>
+      <figure class="trusted-logo">
+        <img src="assets/trusted/Yale_press_logo.webp" alt="Yale logo" loading="lazy">
+      </figure>
+      <figure class="trusted-logo">
+        <img src="assets/trusted/256px-Quinnipiac_University_logo_(2017).svg.webp" alt="Quinnipiac University logo" loading="lazy">
+      </figure>
+      <figure class="trusted-logo">
+        <img src="assets/trusted/512px-University_of_New_Haven_logo.webp" alt="University of New Haven logo" loading="lazy">
+      </figure>
+      <figure class="trusted-logo">
+        <img src="assets/trusted/Planet_Fitness_(2).webp" alt="Planet Fitness logo" loading="lazy">
+      </figure>
+      <figure class="trusted-logo">
+        <img src="assets/trusted/Mohegan-Sun-Logo.webp" alt="Mohegan Sun logo" loading="lazy">
+      </figure>
+      <figure class="trusted-logo">
+        <img src="assets/trusted/Post_university_of_conn_logo.webp" alt="Post University logo" loading="lazy">
+      </figure>
+      <figure class="trusted-logo">
+        <img src="assets/trusted/logo-full-color.webp" alt="Edge Fitness logo" loading="lazy">
+      </figure>
+      <figure class="trusted-logo">
+        <img src="assets/trusted/lincoln-culinary.webp" alt="Lincoln Culinary Institute logo" loading="lazy">
+      </figure>
+      <figure class="trusted-logo">
+        <img src="assets/trusted/amazon.webp" alt="Amazon logo" loading="lazy">
+      </figure>
+      <figure class="trusted-logo trusted-logo--dark">
+        <img src="assets/trusted/woodwinds-2024-logo-white.webp" alt="Woodwinds logo" loading="lazy">
+      </figure>
+      <figure class="trusted-logo">
+        <img src="assets/trusted/sallys-apizza.webp" alt="Sally's Apizza logo" loading="lazy">
+      </figure>
+    </div>
+  </div>
+</section>  
+
     <footer class="footer has-background-primary-light">
       <div class="content has-text-centered">
         <div>
@@ -140,6 +220,8 @@
     </footer>
     <script src="script.js"></script>
     <script src="update.js"></script>
+    <script src="reviews-data.js"></script>
+    <script src="reviews.js?v=6"></script>
     <!-- <script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.js"></script> -->
     <script async data-nf='{"formurl":"https://forms.beachpartyballoons.com/forms/contact-us-vjz40v","emoji":"💬","position":"left","bgcolor":"#0dc9ba","width":"500"}' src='https://forms.beachpartyballoons.com/widgets/embed-min.js'></script>
 

reviews-data.js

@@ -0,0 +1,20 @@
+window.REVIEW_ROTATION_RATING = '4.9';
+window.REVIEW_ROTATION_COUNT = '185 reviews';
+window.REVIEW_ROTATION_DATA = [
+  {
+    author: 'Jessica W.',
+    text: 'If I could give Beach Party Balloons more than five stars, I would! They were super easy to talk to over the phone, worked within my small budget, and provided design suggestions. The balloons were the least stressful part of my event, but they were the highlight!'
+  },
+  {
+    author: 'Wildwolf',
+    text: 'Amazing service, super nice and patient people. Tons of options for balloon styles and arrangements. The staff showed us examples and explained everything. Balloons arrived on time and looked incredible.'
+  },
+  {
+    author: 'Karla R.-P.',
+    text: 'My balloon columns for my baby shower were beautiful. They’re still intact almost a month later. You’re paying for beauty and expertise. I’ll return for all my balloon needs.'
+  },
+  {
+    author: 'Valeska',
+    text: 'They squeezed in a last-minute request and delivered a balloon arch within a week. The decor made the event feel special. Responsive team, timely setup and take-down.'
+  }
+];

reviews.js

@@ -0,0 +1,83 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const grid = document.getElementById('reviewsGrid');
+  const ratingEl = document.getElementById('reviewsRatingValue');
+  const countEl = document.getElementById('reviewsCountValue');
+  const reviews = Array.isArray(window.REVIEW_ROTATION_DATA)
+    ? window.REVIEW_ROTATION_DATA.filter(item => item && item.text)
+    : [];
+
+  if (!grid || reviews.length === 0) {
+    return;
+  }
+
+  const buildCard = (review) => {
+    const article = document.createElement('article');
+    article.className = 'review-card';
+    const text = document.createElement('p');
+    text.textContent = `"${review.text}"`;
+    const author = document.createElement('p');
+    author.className = 'review-author';
+    author.textContent = `— ${review.author || 'Happy Client'}`;
+    article.appendChild(text);
+    article.appendChild(author);
+    return article;
+  };
+
+  const fadeSwap = (cards) => {
+    grid.classList.add('is-fading');
+    setTimeout(() => {
+      grid.innerHTML = '';
+      cards.forEach(card => grid.appendChild(card));
+      requestAnimationFrame(() => {
+        grid.classList.remove('is-fading');
+      });
+    }, 350);
+  };
+
+  const startRotation = () => {
+    let index = 0;
+    let expandedCard = null;
+    let rotationTimer = null;
+    const rotationIntervalMs = 8000;
+    const expandedHoldMs = 15000;
+
+    const showNext = () => {
+      const slice = reviews.slice(index, index + 3);
+      const display = slice.length < 3
+        ? slice.concat(reviews.slice(0, Math.max(0, 3 - slice.length)))
+        : slice;
+      fadeSwap(display.map(buildCard));
+      index = (index + 3) % reviews.length;
+    };
+
+    const scheduleNext = (delay) => {
+      if (rotationTimer) {
+        clearTimeout(rotationTimer);
+      }
+      rotationTimer = setTimeout(showNext, delay);
+    };
+
+    grid.addEventListener('click', (event) => {
+      const card = event.target.closest('.review-card');
+      if (!card) return;
+      if (expandedCard && expandedCard !== card) {
+        expandedCard.classList.remove('is-expanded');
+      }
+      card.classList.toggle('is-expanded');
+      expandedCard = card.classList.contains('is-expanded') ? card : null;
+      scheduleNext(expandedCard ? expandedHoldMs : rotationIntervalMs);
+    });
+
+    showNext();
+    scheduleNext(rotationIntervalMs);
+  };
+
+  if (ratingEl && window.REVIEW_ROTATION_RATING) {
+    ratingEl.textContent = window.REVIEW_ROTATION_RATING;
+  }
+  if (countEl && window.REVIEW_ROTATION_COUNT) {
+    countEl.textContent = window.REVIEW_ROTATION_COUNT;
+  }
+
+  startRotation();
+});

style.css

@@ -199,6 +199,122 @@ form{
   margin-bottom: 1rem;;
 }
 
+.reviews-section {
+  background: transparent;
+  border-top: none;
+  border-bottom: none;
+}
+
+.reviews-section h2,
+.reviews-section .is-size-3 {
+  color: #7585ff !important;
+}
+
+.reviews-summary {
+  display: grid;
+  gap: 0.5rem;
+  justify-items: center;
+}
+
+.reviews-stars {
+  font-size: 1.4rem;
+  color: #f2b01e;
+  letter-spacing: 0.1rem;
+}
+
+.reviews-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  transition: opacity 0.35s ease;
+}
+
+.reviews-grid.is-fading {
+  opacity: 0;
+}
+
+.review-card {
+  background: #fff;
+  border: 1px solid #e6dfc8;
+  border-radius: 14px;
+  padding: 1.1rem 1.25rem;
+  box-shadow: 0 10px 22px rgba(24, 40, 72, 0.08);
+  text-align: left;
+  min-height: 150px;
+  cursor: pointer;
+}
+
+.review-card p {
+  margin-bottom: 0.5rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.review-author {
+  color: #6b6b6b;
+  font-size: 0.9rem;
+}
+
+.review-card.is-expanded {
+  min-height: 0;
+}
+
+.review-card.is-expanded p {
+  display: block;
+  -webkit-line-clamp: unset;
+  overflow: visible;
+}
+
+.trusted-section {
+  background: transparent;
+}
+
+.trusted-section h2,
+.trusted-section .is-size-3 {
+  color: #7585ff !important;
+}
+
+.section-divider {
+  border: none;
+  border-top: 2px solid rgba(117, 133, 255, 0.35);
+  margin: 2rem auto 0;
+  max-width: 920px;
+}
+
+
+.trusted-logos {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 1.25rem;
+  align-items: center;
+}
+
+.trusted-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 96px;
+  padding: 0.85rem 1rem;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 10px 22px rgba(24, 40, 72, 0.08);
+  border: 1px solid #e6dfc8;
+}
+
+.trusted-logo img {
+  height: 52px;
+  width: 100%;
+  max-width: 150px;
+  object-fit: contain;
+}
+
+.trusted-logo--dark {
+  background: #1b1b1b;
+  border-color: #1b1b1b;
+}
+
 .gallery-hero {
   background: linear-gradient(135deg, #12b7ad, #1078c2);
   color: #fff;