gw-svelte/src/lib/components/ValuesSection.svelte

<script lang="ts">
  import Icon from '$lib/components/Icon.svelte';
  import type { IconCard } from '$lib/types';

  export let values: IconCard[];

  $: orderedValues = values
    .map((value, index) => ({ value, index }))
    .sort((a, b) => {
      const aOrder = a.value.order ?? Number.POSITIVE_INFINITY;
      const bOrder = b.value.order ?? Number.POSITIVE_INFINITY;

      if (aOrder !== bOrder) {
        return aOrder - bOrder;
      }

      return a.index - b.index;
    })
    .map(({ value }) => value);
</script>

<section id="values">
  <div class="values-inner">
    <span class="values-eyebrow">Why owners stay</span>
    <h2 class="section-heading">Calmer dogs. Clearer routines. Less worry.</h2>
    <p class="values-intro">
      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">
          <Icon name={value.icon} className="value-card-icon" />
          <h3>{value.title}</h3>
          <p>{value.body}</p>
        </div>
      {/each}
    </div>
  </div>
</section>

<style>
  .values-eyebrow {
    display: block;
    width: fit-content;
    margin: 0 auto 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--yellow);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .values-intro {
    max-width: 760px;
    margin: 18px auto 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.65;
  }

  @media (max-width: 768px) {
    .values-eyebrow {
      margin-bottom: 8px;
      padding: 6px 10px;
      font-size: 11px;
    }

    .values-intro {
      margin-top: 14px;
      font-size: 15px;
      line-height: 1.55;
    }
  }
</style>