Add packages section

docs/.vitepress/components/HomeContainer.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="home-container">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.home-container {
+  position: relative;
+  padding: 24px;
+}
+
+@media (min-width: 640px) {
+  .home-container {
+    padding: 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .home-container {
+    padding: 64px;
+  }
+}
+</style>

docs/.vitepress/components/HomeInfo.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="extra-info">
-    Some Extra info hero
-  </div>
-</template>
-
-<style>
-.extra-info {
-    position: relative;
-    padding: 24px;
-}
-
-@media (min-width: 640px) {
-  .extra-info {
-    padding: 48px;
-  }
-}
-
-@media (min-width: 960px) {
-  .extra-info {
-    padding: 64px;
-  }
-}
-
-
-</style>

docs/.vitepress/components/HomePackagesSection.data.ts

@@ -0,0 +1,48 @@
+export default {
+  async load() {
+    return {
+      packages: [
+        {
+          name: 'lucide',
+          logo: '/framework-logos/js.svg',
+          label: 'Lucide documentation for JavaScript',
+        },
+        {
+          name: 'lucide-react',
+          logo: '/framework-logos/react.svg',
+          label: 'Lucide documentation for React',
+        },
+        {
+          name: 'lucide-vue-next',
+          logo: '/framework-logos/vue-next.svg',
+          label: 'Lucide documentation for Vue 3',
+        },
+        {
+          name: 'lucide-svelte',
+          logo: '/framework-logos/svelte.svg',
+          label: 'Lucide documentation for Svelte',
+        },
+        {
+          name: 'lucide-preact',
+          logo: '/framework-logos/preact.svg',
+          label: 'Lucide documentation for Preact',
+        },
+        {
+          name: 'lucide-angular',
+          logo: '/framework-logos/angular.svg',
+          label: 'Lucide documentation for Angular',
+        },
+        {
+          name: 'lucide-react-native',
+          logo: '/framework-logos/react.svg',
+          label: 'Lucide documentation for React Native',
+        },
+        {
+          name: 'lucide-flutter',
+          logo: '/framework-logos/flutter.svg',
+          label: 'Lucide documentation for Flutter',
+        },
+      ]
+    }
+  }
+}

docs/.vitepress/components/HomePackagesSection.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import HomeContainer from './HomeContainer.vue'
+import { useRouter } from 'vitepress';
+import { data } from './HomePackagesSection.data'
+
+const { go } = useRouter()
+</script>
+
+<template>
+  <HomeContainer>
+    <h2 class="section-title">Available For:</h2>
+    <div class="packages-list">
+      <a
+        v-for="{ name, logo } in data.packages"
+        :href="`/guide/packages/${name}`"
+        class="mr-4"
+        :aria-label="`Read more about: ${name} package`"
+        @click.prevent="go(`/guide/packages/${name}`)"
+      >
+        <img
+          :src="logo"
+          height="36"
+          width="36"
+          loading="lazy"
+        />
+      </a>
+    </div>
+  </HomeContainer>
+</template>
+
+<style scoped>
+.section-title {
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+  line-height: 32px;
+  font-size: 16px;
+  text-align: center;
+  margin-bottom: 16px;
+}
+.packages-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin: 0 -0.5rem;
+  gap: 16px;
+}
+</style>

docs/index.md

@@ -49,5 +49,7 @@ features:
 ---
 
 <script setup>
-import HomeInfo from './.vitepress/components/HomeInfo.vue'
+import HomePackagesSection from './.vitepress/components/HomePackagesSection.vue'
 </script>
+
+<HomePackagesSection />