Added <PillNav /> Component

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal'];
+export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal', 'Pill Nav'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -66,6 +66,7 @@ export const CATEGORIES = [
       'Magic Bento',
       'Scroll Stack',
       'Profile Card',
+      'Pill Nav',
       'Dock',
       'Gooey Nav',
       'Pixel Card',

src/constants/Components.ts

@@ -54,6 +54,7 @@ const components = {
   'magic-bento': () => import('../demo/Components/MagicBentoDemo.vue'),
   'profile-card': () => import('../demo/Components/ProfileCardDemo.vue'),
   'dock': () => import('../demo/Components/DockDemo.vue'),
+  'pill-nav': () => import('../demo/Components/PillNavDemo.vue'),
   'gooey-nav': () => import('../demo/Components/GooeyNavDemo.vue'),
   'pixel-card': () => import('../demo/Components/PixelCardDemo.vue'),
   'carousel': () => import('../demo/Components/CarouselDemo.vue'),

src/constants/code/Components/pillNavCode.ts

@@ -0,0 +1,30 @@
+import code from '@content/Components/PillNav/PillNav.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const pillNav = createCodeObject(code, 'Components/PillNav', {
+  installation: `npm install gsap`,
+  usage: `<template>
+  <PillNav
+    :logo="logo"
+    logoAlt="Company Logo"
+    :items="[
+      { label: 'Home', href: '/' },
+      { label: 'About', href: '/about' },
+      { label: 'Services', href: '/services' },
+      { label: 'Contact', href: '/contact' }
+    ]"
+    activeHref="/"
+    class="custom-nav"
+    ease="power2.easeOut"
+    baseColor="#000000"
+    pillColor="#ffffff"
+    hoveredPillTextColor="#ffffff"
+    pillTextColor="#000000"
+  />
+</template>
+
+<script setup lang="ts">
+  import PillNav from "./PillNav.vue";
+  import logo from '/path/to/logo.svg';
+</script>`
+});