refactor: clean up footer (#1342)

Clean up footer to use shared theme's footer instead of recreating it

There should be no user changes

Co-authored-by: mdong1909 <mdong1909@users.noreply.github.com>

Author: mdong1909

docs/.vitepress/config.mts

@@ -179,6 +179,28 @@ export default extendConfig(
         search: {
           provider: 'local',
         },
+
+        footer: {
+          copyright: `© ${new Date().getFullYear()} VoidZero Inc. and Vite+ contributors.`,
+          nav: [
+             {
+              title: "Company",
+              items: [
+                { text: "VoidZero", link: "https://voidzero.dev" },
+                { text: "Vite", link: "https://vite.dev" },
+                { text: "Vitest", link: "https://vitest.dev" },
+                { text: "Rolldown", link: "https://rolldown.rs" },
+                { text: "Oxc", link: "https://oxc.rs" },
+              ],
+            },
+          ],
+            social: [
+              { icon: "github", link: "https://github.com/voidzero-dev/vite-plus" },
+              { icon: "x", link: "https://x.com/voidzerodev" },
+              { icon: "discord", link: "https://discord.gg/cC6TEVFKSx" },
+              { icon: "bluesky", link: "https://bsky.app/profile/voidzero.dev" },
+            ],
+        }
       },
       transformHead({ page, pageData }) {
         const url = 'https://viteplus.dev/' + page.replace(/\.md$/, '').replace(/index$/, '');

docs/.vitepress/theme/components/Footer.vue

@@ -6,129 +6,19 @@
       sponsorLink="https://github.com/voidzero-dev/vite-plus/blob/main/CONTRIBUTING.md"
     />
     <section class="wrapper">
-      <div
-        class="bg-wine bg-[url(/cta-background.jpg)] bg-cover py-16 md:py-30 px-5 md:px-0 overflow-clip flex flex-col items-center justify-center gap-8 md:gap-12"
-      >
-        <h2 class="text-white w-full md:w-2xl text-center text-balance">
-          Take your team's productivity to the next level with Vite+
-        </h2>
-        <div class="flex items-center gap-5">
-          <a href="/guide" target="_self" class="button button--white">Get started</a>
-        </div>
-      </div>
-      <div
-        class="px-5 md:px-24 pt-10 md:pt-16 pb-16 md:pb-30 flex flex-col md:flex-row gap-10 md:gap-0 md:justify-between"
-      >
-        <div>
-          <p class="text-grey text-xs font-mono uppercase tracking-wide mb-8">Company</p>
-          <ul class="flex flex-col gap-3">
-            <li>
-              <a
-                href="https://voidzero.dev/"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-white text-base"
-                >VoidZero</a
-              >
-            </li>
-            <li>
-              <a
-                href="https://vite.dev/"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-white text-base"
-                >Vite</a
-              >
-            </li>
-            <li>
-              <a
-                href="https://vitest.dev/"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-white text-base"
-                >Vitest</a
-              >
-            </li>
-            <li>
-              <a
-                href="https://rolldown.rs/"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-white text-base"
-                >Rolldown</a
-              >
-            </li>
-            <li>
-              <a
-                href="https://oxc.rs/"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-white text-base"
-                >Oxc</a
-              >
-            </li>
-          </ul>
-        </div>
-        <div>
-          <p class="text-grey text-xs font-mono uppercase tracking-wide mb-8">Social</p>
-          <ul class="flex flex-col gap-3">
-            <li>
-              <a
-                href="https://github.com/voidzero-dev"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-white text-base flex gap-3 items-center"
-                ><Icon icon="simple-icons:github" aria-label="GitHub" class="size-[18px]" />
-                GitHub</a
-              >
-            </li>
-            <li>
-              <a
-                href="https://x.com/voidzerodev"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-white text-base flex gap-3 items-center"
-                ><Icon icon="simple-icons:x" aria-label="X" class="size-[18px]" />X.com</a
-              >
-            </li>
-            <li>
-              <a
-                href="https://discord.gg/cC6TEVFKSx"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-white text-base flex gap-3 items-center"
-                ><Icon
-                  icon="simple-icons:discord"
-                  aria-label="Discord"
-                  class="size-[18px]"
-                />Discord</a
-              >
-            </li>
-            <li>
-              <a
-                href="https://bsky.app/profile/voidzero.dev"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-white text-base flex gap-3 items-center"
-                ><Icon icon="simple-icons:bluesky" aria-label="Bluesky" class="size-[18px]" />
-                Bluesky</a
-              >
-            </li>
-          </ul>
-        </div>
-      </div>
-    </section>
-    <section class="wrapper wrapper--ticks border-t py-5 px-5 md:px-24">
-      <p class="text-sm">
-        © {{ new Date().getFullYear() }} VoidZero Inc.
-        <span class="hidden sm:inline">All Rights Reserved.</span>
-      </p>
+        <Footer
+          heading="Take your team's productivity to the next level with Vite+"
+          subheading=" "
+          button-text="Get started"
+          button-link="/guide"
+        />
     </section>
   </footer>
 </template>
 
 <style scoped></style>
 <script setup lang="ts">
 import Sponsors from '@components/oss/Sponsors.vue';
-import { Icon } from '@iconify/vue';
+import Footer from "@components/oss/Footer.vue";
+
 </script>