Improvements to partnership page (#2397)

Author: jay-es

.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>
 

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>

src/developers/partnerConfig.js

@@ -25,12 +25,14 @@ const partnerConfig = {
 
   // Hero Section
   pageHeroBanner: {
-    title: 'Vue Developers',
-    description: 'Vue Developers は認定された個人フリーランサーです。支払い、コンプライアンス、審査はパートナーである Proxify によって管理されています。リストへの参加に興味がありますか？',
-    applyButton: {
-      url: applyUrl,
-      label: 'お申し込みはこちら'
-    }
+    title: 'チームのためのトップ Vue.js 開発者を見つける',
+    description1: '次のプロジェクトで利用可能な認定 Vue.js 開発者にアクセス',
+    description2: 'Proxify は、トップクラスの品質と信頼性を保証するために審査プロセスを処理します',
+    hireButton: {
+      url: hireUrl,
+      label: '今すぐ Vue.js 開発者を探す'
+    },
+    footer: "48 時間以内に Vue.js のトップ開発者とマッチング",
   },
 
   // Hero Section

src/partners/components/PartnerHero.vue

@@ -8,12 +8,14 @@ defineProps<{ title?: string }>()
   <PageHero>
     <template #title>{{ title || 'Vue Partners' }}</template>
     <template #lead>
-      Vue パートナーは、一流の Vue コンサルティングおよび
-      開発サービスを提供する、Vue チーム推奨の代理店です。
-      パートナーとしての掲載にご興味のある企業様は、
-      <a class="link" href="https://airtable.com/shrCQhat57SApJI2l" target="_blank"
-        >こちらからご登録をお願いします</a
-      >。
+      <p>
+        Vue パートナーは、一流の Vue コンサルティングおよび開発サービスを提供する、Vue
+        チームが承認した代理店です。
+        貴社がパートナーとしてリストに掲載されることにご興味がある場合は、
+        <a class="link" href="https://airtable.com/shrCQhat57SApJI2l" target="_blank"
+          >こちらからご登録ください</a
+        >。
+      </p>
     </template>
   </PageHero>
 </template>