Meet & Greet nudge

2026-05-02 09:43:32 +12:00
parent 8f31a3fea4
commit cd8d581f7a
11 changed files with 845 additions and 35 deletions
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
  import { reveal } from '$lib/actions/reveal';
  import BookingSection from '$lib/components/BookingSection.svelte';
  import Icon from '$lib/components/Icon.svelte';
@@ -7,6 +8,107 @@

  export let content: SiteSharedContent;
  export let pageContent: PricingPageContent;
+
+  const promptDelayMs = 10000;
+  const promptIdleMs = 6000;
+  const minPromptDwellMs = 3500;
+  const desktopPromptMediaQuery = '(min-width: 769px)';
+
+  let showMeetGreetPrompt = false;
+  let dismissMeetGreetPrompt = false;
+  let bookingInView = false;
+  let promptShown = false;
+  let canShowDesktopPrompt = false;
+
+  function revealMeetGreetPrompt() {
+    if (dismissMeetGreetPrompt || bookingInView || promptShown || !canShowDesktopPrompt) {
+      return;
+    }
+
+    showMeetGreetPrompt = true;
+    promptShown = true;
+  }
+
+  function closeMeetGreetPrompt() {
+    showMeetGreetPrompt = false;
+    dismissMeetGreetPrompt = true;
+  }
+
+  function handleMeetGreetCta() {
+    showMeetGreetPrompt = false;
+    dismissMeetGreetPrompt = true;
+  }
+
+  $: if ((!canShowDesktopPrompt || bookingInView) && showMeetGreetPrompt) {
+    showMeetGreetPrompt = false;
+  }
+
+  onMount(() => {
+    const startedAt = Date.now();
+    let lastInteractionAt = startedAt;
+    const desktopPromptQuery = window.matchMedia(desktopPromptMediaQuery);
+    canShowDesktopPrompt = desktopPromptQuery.matches;
+
+    const recordInteraction = () => {
+      lastInteractionAt = Date.now();
+    };
+
+    const handleDesktopPromptViewportChange = (event: MediaQueryListEvent) => {
+      canShowDesktopPrompt = event.matches;
+    };
+
+    const interactionEvents: Array<keyof WindowEventMap> = [
+      'pointerdown',
+      'mousemove',
+      'keydown',
+      'scroll',
+      'touchstart'
+    ];
+
+    interactionEvents.forEach((eventName) => {
+      window.addEventListener(eventName, recordInteraction);
+    });
+
+    const delayedPrompt = window.setTimeout(() => {
+      revealMeetGreetPrompt();
+    }, promptDelayMs);
+
+    const idlePromptCheck = window.setInterval(() => {
+      const now = Date.now();
+      const hasWaitedLongEnough = now - startedAt >= minPromptDwellMs;
+      const looksIdle = now - lastInteractionAt >= promptIdleMs;
+
+      if (document.visibilityState === 'visible' && hasWaitedLongEnough && looksIdle) {
+        revealMeetGreetPrompt();
+      }
+    }, 1000);
+
+    const bookingSection = document.getElementById('newlead');
+    const bookingObserver = bookingSection
+      ? new IntersectionObserver(
+          ([entry]) => {
+            bookingInView = entry.isIntersecting;
+          },
+          { threshold: 0.2 }
+        )
+      : null;
+
+    if (bookingObserver && bookingSection) {
+      bookingObserver.observe(bookingSection);
+    }
+
+    desktopPromptQuery.addEventListener('change', handleDesktopPromptViewportChange);
+
+    return () => {
+      window.clearTimeout(delayedPrompt);
+      window.clearInterval(idlePromptCheck);
+      interactionEvents.forEach((eventName) => {
+        window.removeEventListener(eventName, recordInteraction);
+      });
+      desktopPromptQuery.removeEventListener('change', handleDesktopPromptViewportChange);
+      bookingObserver?.disconnect();
+    };
+  });
 </script>

 <main class="pricing-page">
@@ -59,7 +161,7 @@
                {/each}
              </ul>

-              <a class="btn btn-yellow pricing-plan-cta" href="#reservation">Book Now</a>
+              <a class="btn btn-yellow pricing-plan-cta" href="#newlead">Book Now</a>
            </article>
          {/each}
        </div>
@@ -69,6 +171,26 @@

  <TestimonialsSection heading={pageContent.testimonialsHeading} testimonials={content.testimonials} />
  <BookingSection booking={pageContent.booking} />
+
+  {#if showMeetGreetPrompt}
+    <aside class="meet-greet-prompt" aria-label="Free meet and greet reminder">
+      <button class="meet-greet-close" type="button" aria-label="Dismiss reminder" on:click={closeMeetGreetPrompt}>
+        <Icon name="fas fa-xmark" />
+      </button>
+
+      <div class="meet-greet-copy">
+        <span class="meet-greet-kicker">
+          <Icon name="fas fa-comment-dots" />
+          Free Meet & Greet
+        </span>
+        <p>
+          Not sure which option fits best? We can talk it through together and make sure your dog ends up happy.
+        </p>
+      </div>
+
+      <a class="meet-greet-cta" href="#newlead" on:click={handleMeetGreetCta}>Let's chat</a>
+    </aside>
+  {/if}
 </main>

 <style>
@@ -239,6 +361,125 @@
    font-family: var(--font-head);
  }

+  .meet-greet-prompt {
+    position: fixed;
+    right: 24px;
+    bottom: 24px;
+    z-index: 30;
+    display: flex;
+    align-items: flex-end;
+    gap: 18px;
+    width: min(420px, calc(100vw - 32px));
+    padding: 18px 18px 18px 20px;
+    border-radius: 24px;
+    background:
+      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 243, 232, 0.98));
+    box-shadow:
+      0 20px 40px rgba(17, 20, 24, 0.16),
+      0 0 0 1px rgba(17, 20, 24, 0.06);
+    animation: meet-greet-rise 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+    backdrop-filter: blur(10px);
+  }
+
+  .meet-greet-copy {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .meet-greet-kicker {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+    padding: 6px 10px;
+    border-radius: 999px;
+    background: rgba(33, 48, 33, 0.08);
+    color: var(--green);
+    font-family: var(--font-head);
+    font-size: 12px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .meet-greet-kicker :global(.icon) {
+    font-size: 12px;
+  }
+
+  .meet-greet-copy p {
+    margin: 0;
+    color: #2f3134;
+    font-size: 15px;
+    line-height: 1.55;
+  }
+
+  .meet-greet-cta {
+    flex-shrink: 0;
+    align-self: center;
+    padding: 12px 18px;
+    border-radius: 999px;
+    background: var(--yellow);
+    color: #111;
+    font-family: var(--font-head);
+    font-size: 14px;
+    text-decoration: none;
+    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
+    transition:
+      transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
+      box-shadow 0.2s ease,
+      background 0.2s ease;
+  }
+
+  .meet-greet-close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 999px;
+    background: rgba(17, 20, 24, 0.05);
+    color: #2f3134;
+    cursor: pointer;
+    transition:
+      transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
+      background 0.2s ease;
+  }
+
+  @media (hover: hover) {
+    .meet-greet-cta:hover {
+      transform: translateY(-2px);
+      background: #ffd100;
+      box-shadow:
+        inset 0 -2px 0 rgba(0, 0, 0, 0.08),
+        0 12px 24px rgba(17, 20, 24, 0.12);
+    }
+
+    .meet-greet-close:hover {
+      transform: scale(1.05);
+      background: rgba(17, 20, 24, 0.09);
+    }
+  }
+
+  .meet-greet-cta:active,
+  .meet-greet-close:active {
+    transform: scale(0.97);
+  }
+
+  @keyframes meet-greet-rise {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 16px, 0);
+    }
+
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
  @media (hover: hover) {
    .pricing-plan-card:hover {
      transform: translateY(-8px) scale(1.012);
@@ -318,5 +559,27 @@
    .pricing-plan-price {
      font-size: 46px;
    }
+
+    .meet-greet-prompt {
+      right: 16px;
+      left: 16px;
+      bottom: 16px;
+      width: auto;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 14px;
+      padding: 18px 18px 16px;
+      border-radius: 20px;
+    }
+
+    .meet-greet-copy p {
+      font-size: 14px;
+      line-height: 1.5;
+      padding-right: 26px;
+    }
+
+    .meet-greet-cta {
+      align-self: flex-start;
+    }
  }
 </style>