From d6238ee6a06a92a30a1869cd402076114fe4ebe1 Mon Sep 17 00:00:00 2001
From: Jun Shindo <46585162+jay-es@users.noreply.github.com>
Date: Tue, 12 Nov 2024 00:02:07 +0900
Subject: [PATCH] Improvements to partnership page

---
 .vitepress/theme/components/PageHero.vue    |  4 +-
 src/developers/components/DeveloperHero.vue | 53 ++++++++++++++++++---
 src/developers/partnerConfig.js             | 14 +++---
 src/partners/components/PartnerHero.vue     | 14 +++---
 4 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/.vitepress/theme/components/PageHero.vue b/.vitepress/theme/components/PageHero.vue
index e3c1fb476..084eae086 100644
--- 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
index 8aa308cd9..9263d837b 100644
--- 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
index 956ae0628..bd15cf5e2 100644
--- a/src/developers/partnerConfig.js
+++ b/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
diff --git a/src/partners/components/PartnerHero.vue b/src/partners/components/PartnerHero.vue
index 210eef660..fb5fcc1c9 100644
--- 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>
-      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>