feat: switched to three testimonials

Author: mwargan

src/assets/main.css

@@ -471,4 +471,15 @@ nav a[role=button] {
 [role=search]>:not(:first-child)>summary {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
+}
+
+/** Fix tooltip overflowing parent */
+[data-tooltip]:focus::after,
+[data-tooltip]:focus::before,
+[data-tooltip]:hover::after,
+[data-tooltip]:hover::before,
+
+[data-tooltip]::before {
+  white-space: pre-wrap;
+  min-width: 20ch;
 }

src/data/testimonials/en.json

@@ -4,10 +4,6 @@
         "description": "We use magic links on our QR code menus at our restaurant. We're able to redirect our guests that scan the QR codes to the right menu (breakfast, lunch, or dinner) based on the time of day that they scan the QR code. It's really helped simplify our guests first experiences at our restaurant.",
         "jobTitle": "Restaurant Manager"
     },
-    {
-        "name": "江西",
-        "description": "As a startup, we're not super sure if even our website domain name will stay the same yet - so we've used this app to generate links that we can use on our tradeshow materials. If we ever do change the domain name, we can easily update the links online without having to pay to re-print everything."
-    },
     {
         "name": "Loulan",
         "description": "We've been able to generate a single magic link that sits on our social media platforms, and it automatically redirects users to our correct website based on their current location and browser language. As an added benefit, we get to see how our links are performing and understand more about our users that use them.",
@@ -17,5 +13,9 @@
         "name": "Kate",
         "description": "At our bed and breakfast, we placed QR codes in our guest rooms to greet them and provide relevant information about their stay. Everytime a new guest arrives, we just change where the QR code redirects to without having to go into each room and physically change the QR code. It's great!",
         "jobTitle": "Floral B&B founder"
+    },
+    {
+        "name": "江西",
+        "description": "As a startup, we're not super sure if even our website domain name will stay the same yet - so we've used this app to generate links that we can use on our tradeshow materials. If we ever do change the domain name, we can easily update the links online without having to pay to re-print everything."
     }
 ]

src/data/testimonials/fr.json

@@ -4,11 +4,6 @@
         "description": "Nous utilisons des liens magiques sur nos menus QR à notre restaurant. Nous sommes en mesure de rediriger nos clients qui scannent les QR codes vers le bon menu (petit déjeuner, déjeuner ou dîner) en fonction de l'heure à laquelle ils scannent le QR code. Cela a vraiment contribué à simplifier les premières expériences de nos clients dans notre restaurant.",
         "jobTitle": "Gérant de restaurant"
     },
-    {
-        "name": "江西",
-        "description": "En tant que start-up, nous ne sommes pas sûrs que même le nom de domaine de notre site web reste le même pour le moment - nous avons donc utilisé cette application pour générer des liens que nous pouvons utiliser sur nos supports de salon. Si nous changeons jamais le nom de domaine, nous pouvons facilement mettre à jour les liens en ligne sans avoir à payer pour tout réimprimer.",
-        "jobTitle": null
-    },
     {
         "name": "Loulan",
         "description": "Nous avons été en mesure de générer un seul lien magique qui se trouve sur nos plateformes de médias sociaux, et il redirige automatiquement les utilisateurs vers notre site web correct en fonction de leur emplacement actuel et de la langue du navigateur. En outre, nous avons la possibilité de voir comment nos liens se comportent et de mieux comprendre nos utilisateurs qui les utilisent.",
@@ -18,5 +13,10 @@
         "name": "Kate",
         "description": "Dans notre maison d'hôtes, nous avons placé des codes QR dans nos chambres d'hôtes pour les saluer et leur fournir des informations pertinentes sur leur séjour. Chaque fois qu'un nouveau client arrive, nous changeons simplement l'endroit où le code QR redirige sans avoir à entrer dans chaque chambre et à changer physiquement le code QR. C'est génial!",
         "jobTitle": "Fondatrice de la maison d'hôtes florale"
+    },
+    {
+        "name": "江西",
+        "description": "En tant que start-up, nous ne sommes pas sûrs que même le nom de domaine de notre site web reste le même pour le moment - nous avons donc utilisé cette application pour générer des liens que nous pouvons utiliser sur nos supports de salon. Si nous changeons jamais le nom de domaine, nous pouvons facilement mettre à jour les liens en ligne sans avoir à payer pour tout réimprimer.",
+        "jobTitle": null
     }
 ]

src/locales/en.json

@@ -287,5 +287,7 @@
     "Claim link": "Claim link",
     "Welcome back!": "Welcome back!",
     "Create New Team": "Create New Team",
-    "Team Settings": "Team Settings"
+    "Team Settings": "Team Settings",
+    "Pricing": "Pricing",
+    "Yes": "Yes"
 }

src/locales/fr.json

@@ -287,5 +287,7 @@
     "Claim link": "Réclamer le lien",
     "Welcome back!": "Bienvenue de retour !",
     "Create New Team": "Créer une nouvelle équipe",
-    "Team Settings": "Paramètres de l'équipe"
+    "Team Settings": "Paramètres de l'équipe",
+    "Pricing": "Tarification",
+    "Yes": "Oui"
 }

src/views/HomeView.vue

@@ -95,8 +95,11 @@ const assetUrl = (asset: string, extension = "png") =>
         {{ $t("Across industries, our magic links are making a difference") }}
       </p>
     </hgroup>
-    <ul class="two-column-grid">
-      <li v-for="testimonial in testimonialData" :key="testimonial.id">
+    <ul class="three-column-grid">
+      <li
+        v-for="testimonial in testimonialData.slice(0, 3)"
+        :key="testimonial.id"
+      >
         <hgroup>
           <h3>{{ testimonial.name }}</h3>
           <p v-if="testimonial.jobTitle">{{ testimonial.jobTitle }}</p>
@@ -170,15 +173,25 @@ const assetUrl = (asset: string, extension = "png") =>
 
   <section id="features">
     <h2>{{ $t("Features") }}</h2>
-    <ul class="two-column-grid">
-      <li v-for="feature in featureData" :key="feature.id">
-        <hgroup>
-          <h3>{{ feature.name }}</h3>
-          <p>{{ feature.min_subscription === 0 ? "Free" : "Pro" }}</p>
-        </hgroup>
-        <p>{{ feature.description }}</p>
-      </li>
-    </ul>
+    <table>
+      <thead>
+        <tr>
+          <th>{{ $t("Feature") }}</th>
+          <th>{{ $t("Basic") }}</th>
+          <th>{{ $t("Tiny Tinkerer") }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="feature in featureData" :key="feature.id">
+          <td>
+            {{ feature.name }}
+            <span :data-tooltip="feature.description">?</span>
+          </td>
+          <td>{{ feature.min_subscription === 0 ? $t("Yes") : "-" }}</td>
+          <td>{{ feature.min_subscription >= 0 ? $t("Yes") : "-" }}</td>
+        </tr>
+      </tbody>
+    </table>
   </section>
 
   <section id="faq" class="two-column-grid">