Feat(partners): Improve the page #1459 (#1464)

vuejs-translations · Nov 18, 2024 · 8c46eae · 8c46eae
1 parent e3342ff
commit 8c46eae
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 14 deletions.
diff --git a/.vitepress/theme/components/PageHero.vue b/.vitepress/theme/components/PageHero.vue
@@ -3,9 +3,9 @@
     <h1 class="page-hero__title">
       <slot name="title" />
     </h1>
-    <p class="page-hero__lead">
+    <div class="page-hero__lead">
       <slot name="lead" />
-    </p>
+    </div>
   </div>
 </template>
 

diff --git a/src/developers/components/DeveloperHero.vue b/src/developers/components/DeveloperHero.vue
@@ -8,17 +8,58 @@ import { generateUTMUrl } from './utils'
 defineProps<{ title?: string }>()
 
 const route = useRoute()
-const applyLink = computed(() => generateUTMUrl(partnerConfig.pageHeroBanner.applyButton.url, route.path))
+const hireUsLink = computed(() => generateUTMUrl(partnerConfig.hireUsButtonUrl, route.path))
 </script>
 
 <template>
-  <PageHero>
+  <PageHero class="page-hero">
     <template #title>{{ title || partnerConfig.pageHeroBanner.title }}</template>
     <template #lead>
-      {{ partnerConfig.pageHeroBanner.description }}
-      <br />
-      <a v-if="applyLink" class="link" :href="applyLink"
-         target="_blank">{{ partnerConfig.pageHeroBanner.applyButton.label }}</a>.
+      <p class="description">
+        {{ partnerConfig.pageHeroBanner.description1 }}
+        <br />
+        {{ partnerConfig.pageHeroBanner.description2 }}
+        <br />
+      </p>
+
+      <a
+        v-if="hireUsLink"
+        :href="hireUsLink"
+        target="_blank"
+        class="accent-button"
+      >
+        {{ partnerConfig.pageHeroBanner.hireButton.label }}
+      </a>
+
+      <p class="description">{{ partnerConfig.pageHeroBanner.footer }}</p>
     </template>
   </PageHero>
 </template>
+
+<style scoped>
+.accent-button {
+  margin: 40px auto 16px;
+}
+
+br {
+  display: none;
+}
+
+/* Media Queries */
+@media (min-width: 768px) {
+  .accent-button {
+    margin-top: 48px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .page-hero {
+    max-width: 846px;
+    padding: 64px 0;
+  }
+
+  br {
+    display: block;
+  }
+}
+</style>
diff --git a/src/developers/partnerConfig.js b/src/developers/partnerConfig.js
@@ -25,12 +25,14 @@ const partnerConfig = {
 
   // Hero Section
   pageHeroBanner: {
-    title: 'Développeurs Vue',
-    description: 'Les développeurs Vue sont des indépendants certifiés. Les paiements, la conformité et la vérification sont administrés par notre partenaire Proxify. Vous souhaitez rejoindre la liste ?',
-    applyButton: {
-      url: applyUrl,
-      label: 'Postulez ici'
-    }
+    title: 'Trouvez les meilleurs développeurs Vue.js pour votre équipe',
+    description1: 'Accédez à des développeurs Vue.js certifiés disponibles pour votre prochain projet.',
+    description2: 'Proxify prend en charge le processus de sélection afin de garantir une qualité et une fiabilité de premier ordre..',
+    hireButton: {
+      url: hireUrl,
+      label: 'Trouver des développeurs Vue.js maintenant'
+    },
+    footer: "Vous serez mis en relation avec un développeur Vue.js de haut niveau en moins de 48 heures",
   },
 
   // Hero Section

diff --git a/src/partners/components/PartnerHero.vue b/src/partners/components/PartnerHero.vue
@@ -8,12 +8,14 @@ defineProps<{ title?: string }>()
    <PageHero>
     <template #title>{{ title || 'Vue Partners' }}</template>
     <template #lead>
+      <p>
       Les partenaires Vue sont des agences approuvées par notre équipe qui fournissent des
       services de conseil et de développement de grande qualité pour Vue. Si votre entreprise
       souhaite être listée comme partenaire, veuillez
       <a class="link" href="https://airtable.com/shrCQhat57SApJI2l" target="_blank"
         >vous enregistrer ici</a
       >.
+      </p>
     </template>
   </PageHero>
 </template>