feat: add team picture & costs picture in value points

src/locales/en.json

@@ -743,10 +743,10 @@
           "title": "<strong>Cover your part of the costs:</strong> WTMG needs money in order to maintain a quality network."
         },
         "5": {
-          "title": "<strong>Keep WTMG ad-free, fully independent and member-supported:</strong> without the continued support of our community we cannot exist!"
+          "title": "<strong>Support the work of a dedicated team</strong> of four slow travel enthusiasts."
         },
         "6": {
-          "title": "<strong>Support the work of a dedicated team</strong> of four slow travel enthusiasts."
+          "title": "<strong>Keep WTMG ad-free, fully independent and member-supported:</strong> without the continued support of our community we cannot exist!"
         }
       }
     },

src/locales/fr.json

@@ -739,10 +739,10 @@
           "title": "<strong>Couvrir vos coûts d’utilisation :</strong> WTMG a besoin de fonds pour maintenir un réseau de qualité et continuer à développer la plateforme."
         },
         "5": {
-          "title": "<strong>Garder WTMG sans publicité, totalement indépendant et financé par ses membres :</strong> sans le soutien permanent de notre communauté, nous ne pouvons pas exister !"
+          "title": "<strong>Soutenir le travail d'une équipe dévouée</strong> de quatre passionné.es de voyage lent."
         },
         "6": {
-          "title": "<strong>Soutenir le travail d'une équipe dévouée</strong> de quatre passionné.es de voyage lent."
+          "title": "<strong>Garder WTMG sans publicité, totalement indépendant et financé par ses membres :</strong> sans le soutien permanent de notre communauté, nous ne pouvons pas exister !"
         }
       }
     },

src/locales/nl.json

@@ -357,10 +357,10 @@
           "title": "<strong>Dek jouw deel van de kosten:</strong> WTMG heeft geld nodig om een kwaliteitsnetwerk te onderhouden."
         },
         "5": {
-          "title": "<strong>Houd WTMG reclamevrij, volledig onafhankelijk en gesteund door leden:</strong> zonder de voortdurende steun van onze community kunnen we niet bestaan!"
+          "title": "<strong>Steun het werk van een gepassioneerd team</strong> van vier slow travel-enthousiastelingen "
         },
         "6": {
-          "title": "<strong>Steun het werk van een gepassioneerd team</strong> van vier slow travel-enthousiastelingen "
+          "title": "<strong>Houd WTMG reclamevrij, volledig onafhankelijk en gesteund door leden:</strong> zonder de voortdurende steun van onze community kunnen we niet bestaan!"
         }
       }
     },

src/routes/(marketing)/(membership)/ValuePoint.svelte

@@ -6,16 +6,20 @@
   export let imgPath: unknown[] | undefined;
   export let title: string;
   export let border = false;
+  /**
+   * Whether to contain the asset, or cover it
+   */
+  export let contain = false;
 </script>
 
-<li class="value-prop" class:border>
+<li class="value-prop" class:border class:contain>
   <p class="title">
     <span class="checkmark">✅</span>
     <span>{@html title}</span>
   </p>
   <!-- TODO: define sizes & alt-->
   {#if imgPath}
-    <Img src={imgPath} sizes="" />
+    <Img src={imgPath} sizes="" class="value-pic" />
   {/if}
 </li>
 
@@ -43,6 +47,10 @@
     object-fit: cover;
   }
 
+  .value-prop.contain :global(picture > img.value-pic) {
+    object-fit: contain;
+  }
+
   .border > p {
     padding: 1.5rem 1.5rem 0 1.5rem;
   }

src/routes/(marketing)/(membership)/membership-points.ts

@@ -2,6 +2,8 @@ import mapScreenImg from '$lib/assets/value-points/map-screenshot.png?run&width=
 import chatScreenImg from '$lib/assets/value-points/chat-screenshot.png?run&width=840';
 import featuresScreenImg from '$lib/assets/value-points/features-screenshot.png?run&width=840';
 import communityScreenImg from '$lib/assets/value-points/community-screenshot.png?run&width=840';
+import activitiesImg from '$lib/assets/value-points/activities.png?run&width=840&lqip=0';
+import teamImg from '$lib/assets/value-points/team-pic.jpg?run&width=1280';
 import type { ComponentProps } from 'svelte';
 import type ValuePoint from '$routes/(marketing)/(membership)/ValuePoint.svelte';
 import { merge, zipWith } from 'lodash-es';
@@ -23,10 +25,11 @@ export const valuePoints: (locale: string) => ValuePointProps[] = (locale) =>
         imgPath: communityScreenImg
       },
       {
-        imgPath: undefined
+        imgPath: activitiesImg,
+        contain: true
       },
       {
-        imgPath: undefined
+        imgPath: teamImg
       }
     ],
     getNodeArray('about-superfan.for-superfans-section.points', locale),