feat(partners): new partners page (#1159)

Co-authored-by: Kia King Ishii <kia.king.08@gmail.com>

Author: bencodezen

package.json

@@ -11,6 +11,6 @@
   },
   "dependencies": {
     "@vue/repl": "^0.4.0",
-    "@vue/theme": "^0.1.11"
+    "@vue/theme": "^0.1.12"
   }
 }

src/.vitepress/theme/components/partner/PartnerHero.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="PartnerHero">
+    <div class="container">
+      <h1 class="title">
+        <slot name="title" />
+      </h1>
+      <p class="lead">
+        <slot name="lead" />
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.PartnerHero {
+  padding: 48px 24px;
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .PartnerHero {
+    padding: 64px 32px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 540px;
+}
+
+.title,
+.lead,
+.PartnerHero >>> .link {
+  transition: color 0.25s;
+}
+
+.title {
+  line-height: 32px;
+  font-size: 32px;
+  font-weight: 500;
+}
+
+@media (min-width: 768px) {
+  .title {
+    line-height: 40px;
+    font-size: 40px;
+  }
+}
+
+.lead {
+  padding-top: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--vt-c-text-2);
+}
+
+.PartnerHero >>> .link       { color: var(--vt-c-brand); }
+.PartnerHero >>> .link:hover { color: var(--vt-c-brand-dark); }
+</style>

src/.vitepress/theme/components/partner/PartnerList.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import partners from './partners.json'
+import PartnerListItem from './PartnerListItem.vue'
+</script>
+
+<template>
+  <div class="PartnerList">
+    <div v-for="partner in partners" :key="partner.name" class="item">
+      <PartnerListItem :partner="partner" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item + .item {
+  padding-top: 16px;
+}
+</style>