Design language tweaks, improvements

src/lib/components/ServiceLandingPage.svelte

@@ -1,36 +1,21 @@
 <script lang="ts">
+  import { onMount, tick } from 'svelte';
   import Icon from '$lib/components/Icon.svelte';
   import { reveal } from '$lib/actions/reveal';
   import BookingSection from '$lib/components/BookingSection.svelte';
+  import PricingPlanCard from '$lib/components/PricingPlanCard.svelte';
   import ServiceHero from '$lib/components/ServiceHero.svelte';
   import TestimonialsSection from '$lib/components/TestimonialsSection.svelte';
   import { getEnhancedImage } from '$lib/enhanced-images';
+  import { decoratePlans } from '$lib/utils/pricing';
   import type { ServicePageContent, SiteSharedContent } from '$lib/types';
 
   export let content: SiteSharedContent;
   export let pageContent: ServicePageContent;
   export let currentPath = '';
   let benefitScroller: HTMLDivElement | null = null;
-
-  function numericPrice(price: string) {
-    const value = Number(price.replace(/[^0-9.]/g, ''));
-    return Number.isFinite(value) ? value : Number.POSITIVE_INFINITY;
-  }
-
-  function decoratePlans<T extends { price: string }>(plans: T[]) {
-    const sorted = [...plans]
-      .map((plan, index) => ({ plan, index, value: numericPrice(plan.price) }))
-      .sort((a, b) => a.value - b.value || a.index - b.index);
-
-    const cheapestIndex = sorted[0]?.index ?? -1;
-    const mobileOrder = new Map(sorted.map((entry, order) => [entry.index, order]));
-
-    return plans.map((plan, index) => ({
-      ...plan,
-      isPopular: index === cheapestIndex,
-      mobileOrder: mobileOrder.get(index) ?? index
-    }));
-  }
+  let activeBenefitIndex = 0;
+  let mobileBenefitObserver: IntersectionObserver | null = null;
 
   $: highlightEnhanced = pageContent.highlight ? getEnhancedImage(pageContent.highlight.imageUrl) : null;
   $: highlightCollageImages =
@@ -66,14 +51,90 @@
     }
   ];
 
-  function scrollBenefits(direction: -1 | 1) {
-    if (!benefitScroller) return;
+  function isMobileViewport() {
+    return typeof window !== 'undefined' && window.innerWidth <= 768;
+  }
 
-    benefitScroller.scrollBy({
-      left: direction * Math.round(benefitScroller.clientWidth * 0.86),
-      behavior: 'smooth'
+  async function scrollBenefits(direction: -1 | 1) {
+    if (!benefitScroller || !isMobileViewport()) return;
+
+    const nextIndex = Math.max(0, Math.min(activeBenefitIndex + direction, benefitCards.length - 1));
+    await scrollBenefitTo(nextIndex);
+  }
+
+  async function scrollBenefitTo(index: number) {
+    if (!benefitScroller || !isMobileViewport()) return;
+
+    const cards = benefitScroller.querySelectorAll<HTMLElement>('.service-benefit-card');
+    const targetCard = cards[index];
+    if (!targetCard) return;
+
+    activeBenefitIndex = index;
+    await tick();
+    targetCard.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'start'
     });
   }
+
+  function bindMobileBenefitObserver() {
+    mobileBenefitObserver?.disconnect();
+
+    if (!benefitScroller || !isMobileViewport()) return;
+
+    const cards = benefitScroller.querySelectorAll<HTMLElement>('.service-benefit-card');
+    if (!cards.length) return;
+
+    mobileBenefitObserver = new IntersectionObserver(
+      (entries) => {
+        const visibleEntry = entries
+          .filter((entry) => entry.isIntersecting)
+          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+
+        if (!visibleEntry) return;
+
+        const nextIndex = [...cards].indexOf(visibleEntry.target as HTMLElement);
+        if (nextIndex >= 0) {
+          activeBenefitIndex = nextIndex;
+        }
+      },
+      {
+        root: benefitScroller,
+        threshold: [0.6, 0.75, 0.9]
+      }
+    );
+
+    cards.forEach((card) => mobileBenefitObserver?.observe(card));
+  }
+
+  onMount(() => {
+    const handleResize = () => {
+      if (!benefitScroller) return;
+
+      if (isMobileViewport()) {
+        if (activeBenefitIndex === 0) {
+          benefitScroller.scrollTo({ left: 0, behavior: 'auto' });
+        }
+        bindMobileBenefitObserver();
+        void scrollBenefitTo(activeBenefitIndex);
+      } else {
+        mobileBenefitObserver?.disconnect();
+      }
+    };
+
+    if (benefitScroller && isMobileViewport()) {
+      benefitScroller.scrollTo({ left: 0, behavior: 'auto' });
+      bindMobileBenefitObserver();
+    }
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      mobileBenefitObserver?.disconnect();
+      window.removeEventListener('resize', handleResize);
+    };
+  });
 </script>
 
 <main class="service-page">
@@ -89,7 +150,7 @@
 
   {#if pageContent.highlight}
     <section use:reveal class="service-highlight reveal-block">
-      <div class="service-inner">
+      <div class="page-inner">
         <div class:service-highlight-layout-points={pageContent.highlight.points?.length} class="service-highlight-layout">
           <div class="service-highlight-copy">
             <p class="eyebrow service-highlight-eyebrow">{pageContent.highlight.eyebrow}</p>
@@ -144,7 +205,7 @@
   {/if}
 
   <section use:reveal class="service-benefits reveal-block">
-    <div class="service-inner">
+    <div class="page-inner">
       <div class="service-section-heading">
         <h2>{pageContent.benefits.title}</h2>
         {#if pageContent.benefits.intro}
@@ -154,8 +215,12 @@
 
       <div class="service-benefit-shell">
         <div bind:this={benefitScroller} class="service-benefit-grid">
-          {#each benefitCards as benefit}
-            <article class:service-benefit-card-featured={benefit.featured} class={`service-benefit-card ${benefit.tintClass}`}>
+          {#each benefitCards as benefit, index}
+            <article
+              class:active={index === activeBenefitIndex}
+              class:service-benefit-card-featured={benefit.featured}
+              class={`service-benefit-card ${benefit.tintClass}`}
+            >
               <div class="service-benefit-icon" aria-hidden="true">
                 <Icon name={benefit.icon ?? 'fas fa-paw'} />
               </div>
@@ -169,10 +234,34 @@
         </div>
 
         <div class="service-benefit-mobile-controls" aria-label="Benefit cards navigation">
-          <button type="button" class="service-benefit-mobile-button" aria-label="Previous benefit" on:click={() => scrollBenefits(-1)}>
+          <button
+            type="button"
+            class="service-benefit-mobile-button"
+            aria-label="Previous benefit"
+            disabled={activeBenefitIndex === 0}
+            on:click={() => scrollBenefits(-1)}
+          >
             <Icon name="fas fa-chevron-left" />
           </button>
-          <button type="button" class="service-benefit-mobile-button" aria-label="Next benefit" on:click={() => scrollBenefits(1)}>
+          <div class="service-benefit-mobile-pager" aria-label="Current benefit">
+            {#each benefitCards as _, index}
+              <button
+                type="button"
+                class:active={index === activeBenefitIndex}
+                class="service-benefit-mobile-dot"
+                aria-label={`Go to benefit ${index + 1}`}
+                aria-pressed={index === activeBenefitIndex}
+                on:click={() => scrollBenefitTo(index)}
+              />
+            {/each}
+          </div>
+          <button
+            type="button"
+            class="service-benefit-mobile-button"
+            aria-label="Next benefit"
+            disabled={activeBenefitIndex === benefitCards.length - 1}
+            on:click={() => scrollBenefits(1)}
+          >
             <Icon name="fas fa-chevron-right" />
           </button>
         </div>
@@ -181,7 +270,7 @@
   </section>
 
   <section use:reveal class="service-pricing reveal-block">
-    <div class="service-inner">
+    <div class="page-inner">
       <div class="service-section-heading">
         <h2>{pageContent.pricing.title}</h2>
         {#if pageContent.pricing.intro}
@@ -191,27 +280,7 @@
 
       <div class:service-plan-grid-three={pageContent.pricing.plans.length === 3} class="service-plan-grid">
         {#each pricingPlans as plan}
-          <article
-            class:service-plan-popular={plan.isPopular}
-            class="service-plan-card"
-            style={`--mobile-order:${plan.mobileOrder};`}
-          >
-            {#if plan.isPopular}
-              <span class="service-plan-ribbon">Popular</span>
-            {/if}
-
-            <h3>{plan.title}</h3>
-            <div class="service-plan-price">{plan.price}</div>
-            <p class="service-plan-period">{plan.period}</p>
-
-            <ul class="service-plan-features">
-              {#each plan.features as feature}
-                <li>{feature}</li>
-              {/each}
-            </ul>
-
-            <a class="btn btn-yellow service-plan-cta" href="#newlead">Book a Meet &amp; Greet</a>
-          </article>
+          <PricingPlanCard {plan} variant="service" />
         {/each}
       </div>
 
@@ -250,7 +319,7 @@
 
   {#if showRelatedServices}
     <section use:reveal class="service-related reveal-block" aria-label="Other services">
-      <div class="service-inner">
+      <div class="page-inner">
         <div class="service-section-heading">
           <h2>Explore our other services</h2>
         </div>
@@ -294,14 +363,8 @@
     background: var(--off-white);
   }
 
-  .service-inner {
-    max-width: var(--max-w);
-    margin: 0 auto;
-    padding: 0 50px;
-  }
-
   .service-related {
-    padding: 0 0 96px;
+    padding: 0 0 var(--space-section-featured-y);
   }
 
   .service-related-grid {
@@ -495,7 +558,7 @@
   }
 
   .service-highlight {
-    padding: 80px 0 96px;
+    padding: var(--space-section-page-y) 0 var(--space-section-featured-y);
   }
 
   .service-highlight-layout {
@@ -556,7 +619,7 @@
 
   .service-pricing,
   .service-benefits {
-    padding: 0 0 96px;
+    padding: 0 0 var(--space-section-featured-y);
   }
 
   .service-benefit-shell {
@@ -564,9 +627,10 @@
     overflow: visible;
   }
 
-.service-benefit-mobile-controls {
-  display: none;
-}
+  .service-benefit-mobile-controls,
+  .service-benefit-mobile-pager {
+    display: none;
+  }
 
   .service-section-heading {
     text-align: center;
@@ -588,7 +652,6 @@
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  .service-plan-card,
   .service-benefit-card {
     position: relative;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 248, 246, 0.98) 100%);
@@ -603,63 +666,10 @@
       border-color 0.22s ease;
   }
 
-  .service-plan-card {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    height: 100%;
-  }
-
-  .service-plan-popular {
-    border: 2px solid var(--yellow);
-  }
-
-  .service-plan-ribbon {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    padding: 6px 12px;
-    border-radius: 999px;
-    background: var(--yellow);
-    color: #000;
-    font-family: var(--font-head);
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-  }
-
-  @media (hover: hover) {
-    .service-plan-card:hover {
-      transform: translateY(-2px);
-      box-shadow:
-        inset 0 0 0 1px rgba(17, 20, 24, 0.055),
-        0 10px 40px rgba(0, 0, 0, 0.08);
-      filter: brightness(1.015);
-    }
-  }
-
-  .service-plan-card:active,
   .service-benefit-card:active {
     transform: translateY(-2px) scale(0.992);
   }
 
-  :global(.reveal-ready.reveal-block) {
-    opacity: 0;
-    transform: translate3d(0, var(--reveal-distance, 24px), 0);
-    transition:
-      opacity 0.55s ease,
-      transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
-    transition-delay: var(--reveal-delay, 0ms);
-  }
-
-  :global(.reveal-visible.reveal-block) {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .service-plan-card h3,
   .service-benefit-card h3 {
     margin: 0;
     font-family: var(--font-head);
@@ -668,59 +678,6 @@
     color: #000;
   }
 
-  .service-plan-price {
-    margin-top: 20px;
-    font-family: var(--font-head);
-    font-size: 44px;
-    line-height: 1;
-    color: var(--gw-green);
-  }
-
-  .service-plan-period {
-    margin: 8px 0 0;
-    color: #5d6166;
-    font-size: 14px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-  }
-
-  .service-plan-features {
-    margin: 24px 0 0;
-    padding: 0;
-    list-style: none;
-    flex: 1 1 auto;
-  }
-
-  .service-plan-features li {
-    position: relative;
-    padding-left: 24px;
-    color: #34363a;
-    font-size: 15px;
-    line-height: 1.5;
-  }
-
-  .service-plan-features li + li {
-    margin-top: 12px;
-  }
-
-  .service-plan-features li::before {
-    content: '•';
-    position: absolute;
-    left: 6px;
-    top: 0;
-    color: var(--yellow);
-    font-size: 20px;
-    line-height: 1;
-  }
-
-  .service-plan-cta {
-    display: flex;
-    width: fit-content;
-    margin: 28px auto 0;
-    font-family: var(--font-head);
-  }
-
   .service-plan-mobile-cta {
     display: none;
   }
@@ -1030,9 +987,6 @@
   }
 
   @media (max-width: 768px) {
-    .service-inner {
-      padding: 0 24px;
-    }
 
     .service-plan-grid,
     .service-plan-grid-three,
@@ -1043,16 +997,18 @@
 
     .service-benefit-grid {
       grid-auto-flow: column;
-      grid-auto-columns: minmax(272px, 84vw);
+      grid-auto-columns: calc(100% - 64px);
       grid-template-columns: none;
-      gap: 14px;
+      align-items: stretch;
+      gap: 10px;
       overflow-x: auto;
       overscroll-behavior-x: contain;
-      scroll-snap-type: x proximity;
-      scroll-padding-left: 24px;
-      padding: 0 24px 8px 0;
+      scroll-snap-type: x mandatory;
+      scroll-padding-left: 8px;
+      padding: 0 14px 8px 8px;
       scrollbar-width: none;
       -webkit-overflow-scrolling: touch;
+      touch-action: pan-x pinch-zoom;
     }
 
     .service-benefit-grid::-webkit-scrollbar {
@@ -1060,20 +1016,34 @@
     }
 
     .service-benefit-card {
-      padding: 24px 22px 22px;
+      min-height: clamp(230px, 42svh, 320px);
+      width: 100%;
+      min-width: 0;
+      padding: 20px 18px 22px;
       border-radius: 24px;
       scroll-snap-align: start;
+      scroll-snap-stop: always;
+      touch-action: pan-x;
+      user-select: none;
+      -webkit-user-select: none;
+      transition:
+        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
+        box-shadow 0.22s ease,
+        border-color 0.22s ease,
+        background 0.24s ease;
     }
 
-    .service-plan-card {
-      order: var(--mobile-order, 0);
+    .service-benefit-card.active {
+      box-shadow:
+        inset 0 0 0 1px rgba(17, 20, 24, 0.05),
+        0 12px 24px rgba(17, 20, 24, 0.08);
     }
 
-    .service-highlight {
-      padding-top: 56px;
-      padding-bottom: 72px;
+    .service-benefit-card:last-child {
+      margin-right: 2px;
     }
 
+
     .service-highlight-layout {
       gap: 24px;
     }
@@ -1103,7 +1073,7 @@
     .service-pricing,
     .service-benefits,
     .service-related {
-      padding-bottom: 72px;
+      padding-bottom: var(--space-section-featured-y);
     }
 
     .service-section-heading h2 {
@@ -1111,27 +1081,30 @@
     }
 
     .service-benefit-icon {
-      width: 50px;
-      height: 50px;
-      margin-bottom: 18px;
+      width: 56px;
+      height: 56px;
+      border-radius: 18px;
+      margin-bottom: 14px;
     }
 
     .service-benefit-card h3 {
       max-width: none;
-      font-size: 20px;
+      font-size: 21px;
+      line-height: 1.08;
     }
 
     .service-benefit-card p {
-      margin-top: 12px;
-      font-size: 15px;
-      line-height: 1.68;
+      margin-top: 8px;
+      font-size: 14px;
+      line-height: 1.55;
     }
 
     .service-benefit-mobile-controls {
       display: flex;
-      justify-content: flex-end;
-      gap: 12px;
-      margin-top: 16px;
+      align-items: center;
+      justify-content: space-between;
+      gap: 14px;
+      margin-top: 12px;
     }
 
     .service-benefit-mobile-button {
@@ -1147,9 +1120,41 @@
       box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.06);
       transition:
         background 0.18s ease,
+        opacity 0.18s ease,
         transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
     }
 
+    .service-benefit-mobile-button:disabled {
+      opacity: 0.35;
+    }
+
+    .service-benefit-mobile-pager {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      min-width: 0;
+      flex: 1;
+    }
+
+    .service-benefit-mobile-dot {
+      width: 9px;
+      height: 9px;
+      padding: 0;
+      border: none;
+      border-radius: 999px;
+      background: rgba(33, 48, 33, 0.2);
+      transition:
+        width 0.22s ease,
+        background 0.22s ease,
+        transform 0.22s ease;
+    }
+
+    .service-benefit-mobile-dot.active {
+      width: 28px;
+      background: var(--yellow);
+    }
+
     .service-benefit-mobile-button:active {
       transform: scale(0.97);
     }
@@ -1180,9 +1185,6 @@
       align-items: flex-start;
     }
 
-    .service-plan-cta {
-      display: none;
-    }
 
     .service-plan-mobile-cta {
       display: flex;