Design language

src/lib/components/ValuesSection.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { onMount, tick } from 'svelte';
   import Icon from '$lib/components/Icon.svelte';
   import type { IconCard } from '$lib/types';
 
   export let values: IconCard[];
+  let valuesScroller: HTMLDivElement | undefined;
 
   $: orderedValues = values
     .map((value, index) => ({ value, index }))
@@ -17,6 +19,36 @@
       return a.index - b.index;
     })
     .map(({ value }) => value);
+
+  function isMobileViewport() {
+    return typeof window !== 'undefined' && window.innerWidth <= 768;
+  }
+
+  async function scrollValues(direction: 1 | -1) {
+    if (!valuesScroller || !isMobileViewport()) {
+      return;
+    }
+
+    const firstCard = valuesScroller.querySelector<HTMLElement>('.value-card');
+    if (!firstCard) {
+      return;
+    }
+
+    const cardStyle = window.getComputedStyle(valuesScroller);
+    const gap = Number.parseFloat(cardStyle.columnGap || cardStyle.gap || '0') || 0;
+    const step = firstCard.offsetWidth + gap;
+
+    await tick();
+    valuesScroller.scrollBy({ left: direction * step, behavior: 'smooth' });
+  }
+
+  onMount(() => {
+    if (!valuesScroller || !isMobileViewport()) {
+      return;
+    }
+
+    valuesScroller.scrollTo({ left: 0, behavior: 'auto' });
+  });
 </script>
 
 <section id="values">
@@ -27,18 +59,29 @@
       Everything is designed to make life easier for busy Auckland dog owners and safer, happier for the dogs in our care.
     </p>
 
-    <div class="values-grid">
-      {#each orderedValues as value}
-        <div class="value-card">
-          <div class="value-icon-wrap">
-            <Icon name={value.icon} className="value-card-icon" />
+    <div class="values-shell">
+      <div bind:this={valuesScroller} class="values-grid">
+        {#each orderedValues as value}
+          <div class="value-card">
+            <div class="value-icon-wrap">
+              <Icon name={value.icon} className="value-card-icon" />
+            </div>
+            <div class="value-text">
+              <h3>{value.title}</h3>
+              <p>{value.body}</p>
+            </div>
           </div>
-          <div class="value-text">
-            <h3>{value.title}</h3>
-            <p>{value.body}</p>
-          </div>
-        </div>
-      {/each}
+        {/each}
+      </div>
+
+      <div class="values-mobile-controls" aria-label="Value cards navigation">
+        <button type="button" class="values-mobile-button" aria-label="Previous value" on:click={() => scrollValues(-1)}>
+          <Icon name="fas fa-chevron-left" />
+        </button>
+        <button type="button" class="values-mobile-button" aria-label="Next value" on:click={() => scrollValues(1)}>
+          <Icon name="fas fa-chevron-right" />
+        </button>
+      </div>
     </div>
   </div>
 </section>
@@ -68,7 +111,68 @@
     line-height: 1.65;
   }
 
+  .values-mobile-controls {
+    display: none;
+  }
+
   @media (max-width: 768px) {
+    .values-shell {
+      margin-top: 32px;
+    }
+
+    .values-grid {
+      grid-auto-flow: column;
+      grid-auto-columns: minmax(272px, 84vw);
+      grid-template-columns: none;
+      gap: 14px;
+      overflow-x: auto;
+      overscroll-behavior-x: contain;
+      scroll-snap-type: x proximity;
+      scroll-padding-left: 24px;
+      padding: 0 24px 8px 0;
+      scrollbar-width: none;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .values-grid::-webkit-scrollbar {
+      display: none;
+    }
+
+    .values-mobile-controls {
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+      margin-top: 16px;
+    }
+
+    .values-mobile-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 46px;
+      height: 46px;
+      border: none;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.12);
+      color: #fff;
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+      -webkit-tap-highlight-color: transparent;
+      touch-action: manipulation;
+    }
+
+    .value-card {
+      min-height: 100%;
+      padding: 24px 22px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 24px;
+      background: rgba(255, 255, 255, 0.05);
+      scroll-snap-align: start;
+    }
+
+    .value-card:nth-child(odd) {
+      border-right: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
     .values-eyebrow {
       margin-bottom: 8px;
       padding: 6px 10px;
@@ -81,4 +185,14 @@
       line-height: 1.55;
     }
   }
+
+  @media (hover: hover) {
+    .values-mobile-button:hover {
+      background: rgba(255, 255, 255, 0.18);
+    }
+  }
+
+  .values-mobile-button:active {
+    transform: scale(0.95);
+  }
 </style>