Meet & Greet nudge

src/lib/components/ValuesSection.svelte

@@ -3,6 +3,20 @@
   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">
@@ -10,7 +24,7 @@
     <h2 class="section-heading">Where dogs come first</h2>
 
     <div class="values-grid">
-      {#each values as value}
+      {#each orderedValues as value}
         <div class="value-card">
           <Icon name={value.icon} className="value-card-icon" />
           <h3>{value.title}</h3>