Merge pull request #9 from proxify-ab/GRC-1170-page-improvements

feat: update header of developers page

Author: dionvogliqi

.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,83 @@ 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>
+
+      <span class="footer-text">{{ partnerConfig.pageHeroBanner.footer }}</span>
     </template>
   </PageHero>
 </template>
+
+<style scoped>
+.page-hero {
+  max-width: 100%;
+}
+
+:deep(.page-hero__title) {
+  font-weight: 400;
+  font-size: 32px;
+  margin-bottom: 0;
+}
+
+:deep(.page-hero__lead) {
+  padding-top: 0;
+}
+
+.accent-button {
+  margin: 40px auto 16px;
+}
+
+.description {
+  margin-top: 24px;
+  font-weight: 400;
+}
+
+.footer-text {
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+/* Media Queries */
+@media (min-width: 768px) {
+  .page-hero {
+    padding: 48px 128px;
+  }
+
+  .accent-button {
+    margin-top: 48px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .page-hero {
+    max-width: 846px;
+    padding: 96px 0;
+  }
+
+  .description {
+    margin-top: 32px;
+  }
+}
+</style>

src/developers/partnerConfig.js

@@ -25,12 +25,14 @@ const partnerConfig = {
 
   // Hero Section
   pageHeroBanner: {
-    title: 'Vue Developers',
-    description: 'Vue Developers are certified individual freelancers. Payments, compliance and vetting are administrated by our partner Proxify. Interested to join the list?',
-    applyButton: {
-      url: applyUrl,
-      label: 'Apply here'
-    }
+    title: 'Find top Vue.js developers for your team',
+    description1: 'Access certified Vue.js developers available for your next project.',
+    description2: 'Proxify handles the vetting process to ensure top-tier quality and reliability.',
+    hireButton: {
+      url: hireUrl,
+      label: 'Find Vue.js developers now'
+    },
+    footer: "Get matched with a top Vue.js developer in less than 48 hours",
   },
 
   // Hero Section

src/partners/components/PartnerHero.vue

@@ -8,12 +8,14 @@ defineProps<{ title?: string }>()
   <PageHero>
     <template #title>{{ title || 'Vue Partners' }}</template>
     <template #lead>
-      Vue Partners are Vue-team endorsed agencies that provide first-class
-      Vue consulting and development services. If your company is
-      interested in being listed as a partner, please
-      <a class="link" href="https://airtable.com/shrCQhat57SApJI2l" target="_blank"
-        >register your interest here</a
-      >.
+      <p>
+        Vue Partners are Vue-team endorsed agencies that provide first-class
+        Vue consulting and development services. If your company is
+        interested in being listed as a partner, please
+        <a class="link" href="https://airtable.com/shrCQhat57SApJI2l" target="_blank"
+          >register your interest here</a
+        >.
+      </p>
     </template>
   </PageHero>
 </template>