feat: New developer page

.gitignore

@@ -3,6 +3,7 @@
 .DS_Store
 .AppleDouble
 .LSOverride
+.idea
 
 # Thumbnails
 ._*

.vitepress/config.ts

@@ -45,6 +45,7 @@ const nav: ThemeConfig['nav'] = [
         text: 'Resources',
         items: [
           { text: 'Partners', link: '/partners/' },
+          { text: 'Developers', link: '/developers/' },
           { text: 'Themes', link: '/ecosystem/themes' },
           { text: 'UI Components', link: 'https://ui-libs.vercel.app/' },
           {
@@ -125,9 +126,12 @@ const nav: ThemeConfig['nav'] = [
     link: '/sponsor/'
   },
   {
-    text: 'Partners',
-    link: '/partners/',
-    activeMatch: `^/partners/`
+    text: 'Experts',
+    activeMatch: `^/(partners|developers)/`,
+    items: [
+      { text: 'Partners', link: '/partners/' },
+      { text: 'Developers', link: '/developers/' }
+    ]
   }
 ]
 

.vitepress/theme/components/CallToActionSection.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  title?: string
+  description?: string
+  link?: string
+  linkText?: string
+  showDivider?: boolean
+}>(), {
+  showDivider: true
+})
+</script>
+
+<template>
+  <section class="cta-section">
+    <div v-if="showDivider" class="cta-divider"></div>
+    <div class="cta-content">
+      <h2 v-if="title" class="cta-title">{{ title }}</h2>
+      <p v-if="description" class="cta-description">{{ description }}</p>
+      <a v-if="link" :href="link" target="_blank" class="cta-link">{{ linkText }}</a>
+      <slot></slot>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cta-section {
+  text-align: center;
+  max-width: 688px;
+  margin: 0 auto;
+}
+
+.cta-divider {
+  width: 100px;
+  margin: 0 auto;
+  border-top: 1px solid var(--vt-c-divider-light);
+}
+
+.cta-content {
+  padding: 28px 28px 96px;
+}
+
+.cta-title {
+  font-size: 34px;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  line-height: 1.2;
+  margin: 0.5em 0 1em;
+}
+
+.cta-description {
+  color: var(--vt-c-text-2);
+}
+
+.cta-link {
+  margin-top: 2em;
+  display: inline-block;
+  padding: 12px 24px;
+  background-color: var(--vt-c-bg-mute);
+  color: var(--vt-c-text-code);
+  font-weight: 600;
+  border-radius: 6px;
+  text-decoration: none;
+  transition: background-color 0.5s, color 0.5s;
+}
+
+.cta-link:hover {
+  background-color: var(--vt-c-gray-light-4);
+}
+
+.dark .cta-link:hover {
+  background-color: var(--vt-c-gray-dark-3);
+}
+</style>

.vitepress/theme/components/CardList.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, shallowRef } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    items: Array<any>
+    filter?: (item: any) => boolean
+    cardComponent: any
+    showLinkToAll?: boolean
+    shuffleItems?: boolean
+    browseLinkText?: string
+    browseLinkUrl?: string
+    splitBy?: string
+  }>(),
+  {
+    showLinkToAll: false,
+    shuffleItems: false,
+    splitBy: 'platinum'
+  }
+)
+
+const isMounted = ref(false)
+const items = shallowRef([...props.items])
+
+const filteredItems = computed(() =>
+  props.filter ? items.value.filter(props.filter) : items.value
+)
+
+onMounted(() => {
+  isMounted.value = true
+  items.value = processItems([...items.value], props.splitBy, props.shuffleItems)
+})
+
+function processItems(items: Array<any>, splitBy: string, shouldShuffle: boolean) {
+  const splitItems = items.filter(item => item[splitBy])
+  const otherItems = items.filter(item => !item[splitBy])
+
+  if (shouldShuffle) {
+    shuffleArray(splitItems)
+    shuffleArray(otherItems)
+  }
+
+  return [...splitItems, ...otherItems]
+}
+
+function shuffleArray(array: Array<any>) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1)); // don't remove semicolon
+    [array[i], array[j]] = [array[j], array[i]]
+  }
+}
+</script>
+
+<template>
+  <div v-show="isMounted" class="card-list">
+    <!-- to skip SSG since the partners are shuffled -->
+    <ClientOnly>
+      <component
+        :is="cardComponent"
+        v-for="item in filteredItems"
+        :key="item.id || item.name"
+        :data="item"
+      />
+    </ClientOnly>
+
+    <a
+      v-if="showLinkToAll && filteredItems.length % 2"
+      :href="browseLinkUrl"
+      class="browse-all-link"
+    >
+      {{ browseLinkText }}
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.card-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.browse-all-link {
+  display: block;
+  width: 48.5%;
+  margin-bottom: 36px;
+  padding-top: 240px;
+  font-size: 1.2em;
+  text-align: center;
+  color: var(--vt-c-text-2);
+  border: 1px solid var(--vt-c-divider-light);
+  border-radius: 4px;
+  transition: color 0.5s ease;
+}
+
+.browse-all-link:hover {
+  color: var(--vt-c-text-1);
+}
+
+@media (max-width: 768px) {
+  .browse-all-link {
+    display: none;
+  }
+}
+</style>

.vitepress/theme/components/PageHero.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="page-hero">
+    <h1 class="page-hero__title">
+      <slot name="title" />
+    </h1>
+    <p class="page-hero__lead">
+      <slot name="lead" />
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.page-hero {
+  padding: 48px 24px;
+  text-align: center;
+  margin: 0 auto;
+  max-width: 688px;
+}
+
+.page-hero__title,
+.page-hero__lead,
+.page-hero :deep(.link) {
+  transition: color 0.25s;
+}
+
+.page-hero__title {
+  line-height: 32px;
+  font-size: 32px;
+  font-weight: 500;
+  margin-bottom: 0.3em;
+}
+
+.page-hero__lead {
+  padding-top: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--vt-c-text-2);
+}
+
+.page-hero__lead a {
+  color: var(--vt-c-brand);
+}
+
+.page-hero :deep(.link) {
+  color: var(--vt-c-brand);
+}
+
+.page-hero :deep(.link:hover) {
+  color: var(--vt-c-brand-dark);
+}
+
+/* Media Queries */
+@media (min-width: 768px) {
+  .page-hero {
+    padding: 64px 32px;
+  }
+
+  .page-hero__title {
+    line-height: 40px;
+    font-size: 40px;
+  }
+}
+</style>

.vitepress/theme/components/PageShowcaseListLayout.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+const props = defineProps<{
+  spotlightTitle?: string
+  featuredTitle?: string
+  browseLinkText?: string
+  browseLinkUrl?: string
+}>()
+</script>
+
+<template>
+  <div class="showcase-layout">
+    <!-- Hero Section -->
+    <slot name="hero"></slot>
+
+    <!-- Spotlight Section -->
+    <div class="showcase-layout__spotlight">
+      <div class="spotlight-content">
+        <h2 v-if="props.spotlightTitle" class="section-title">{{ props.spotlightTitle }}</h2>
+        <slot name="spotlight"></slot>
+      </div>
+    </div>
+
+    <!-- Featured Section -->
+    <div class="showcase-layout__featured">
+      <!-- Optional Actions Section -->
+      <div v-if="$slots.actions" class="featured-actions">
+        <slot name="actions"></slot>
+      </div>
+      <h2 v-if="props.featuredTitle" class="section-title">{{ props.featuredTitle }}</h2>
+      <slot name="featured-list"></slot>
+      <slot name="featured-cta">
+        <div v-if="browseLinkUrl" class="browse-more">
+          <a class="accent-button" :href="props.browseLinkUrl">{{ props.browseLinkText }}</a>
+        </div>
+      </slot>
+    </div>
+
+    <!-- Join Section -->
+    <slot name="join"></slot>
+  </div>
+</template>
+
+<style scoped>
+.showcase-layout {
+  padding-bottom: 16px;
+}
+
+.showcase-layout__spotlight {
+  background-color: var(--vt-c-bg-soft);
+}
+
+.spotlight-content {
+  padding: 36px 48px;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.section-title {
+  font-size: 1.1em;
+  font-weight: 600;
+  margin-bottom: 1.5em;
+  color: var(--vt-c-text-2);
+}
+
+.showcase-layout__featured {
+  padding: 36px 48px;
+  max-width: 960px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.featured-actions {
+  width: 100%;
+  margin-bottom: 1.5em;
+}
+
+.browse-more {
+  margin: 1.5rem auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.accent-button,
+:deep(.accent-button) {
+  display: block;
+  width: fit-content;
+  min-width: 240px;
+  text-align: center;
+  background-color: var(--vt-c-brand);
+  color: var(--vt-c-bg);
+  padding: 12px 24px;
+  font-weight: 600;
+  border-radius: 6px;
+  transition: background-color 0.5s, color 0.5s;
+  text-decoration: none;
+}
+
+.accent-button:hover,
+:deep(.accent-button):hover {
+  background-color: var(--vt-c-brand-dark);
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+  .spotlight-content,
+  .showcase-layout__featured {
+    padding: 36px 28px;
+  }
+}
+</style>