Added <CardNav /> 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', 'Pill Nav'];
+export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal', 'Pill Nav', 'Card Nav'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -66,6 +66,7 @@ export const CATEGORIES = [
       'Magic Bento',
       'Scroll Stack',
       'Profile Card',
+      'Card Nav',
       'Pill Nav',
       'Dock',
       'Gooey Nav',

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'),
+  'card-nav': () => import('../demo/Components/CardNavDemo.vue'),
   'pill-nav': () => import('../demo/Components/PillNavDemo.vue'),
   'gooey-nav': () => import('../demo/Components/GooeyNavDemo.vue'),
   'pixel-card': () => import('../demo/Components/PixelCardDemo.vue'),

src/constants/code/Components/cardNavCode.ts

@@ -0,0 +1,54 @@
+import code from '@content/Components/CardNav/CardNav.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const cardNav = createCodeObject(code, 'Components/CardNav', {
+  installation: `npm install gsap`,
+  usage: `<template>
+  <CardNav
+    :logo="logo"
+    logoAlt="Company Logo"
+    :items="items"
+    baseColor="#fff"
+    menuColor="#000"
+    buttonBgColor="#111"
+    buttonTextColor="#fff"
+    ease="power3.out"
+  />
+</template>
+
+<script setup lang='ts'>
+import CardNav from './CardNav.vue'
+import logo from './logo.svg'
+
+const items = [
+  {
+    label: "About",
+    bgColor: "#0D0716",
+    textColor: "#fff",
+    links: [
+      { label: "Company", ariaLabel: "About Company" },
+      { label: "Careers", ariaLabel: "About Careers" }
+    ]
+  },
+  {
+    label: "Projects",
+    bgColor: "#170D27",
+    textColor: "#fff",
+    links: [
+      { label: "Featured", ariaLabel: "Featured Projects" },
+      { label: "Case Studies", ariaLabel: "Project Case Studies" }
+    ]
+  },
+  {
+    label: "Contact",
+    bgColor: "#271E37",
+    textColor: "#fff",
+    links: [
+      { label: "Email", ariaLabel: "Email us" },
+      { label: "Twitter", ariaLabel: "Twitter" },
+      { label: "LinkedIn", ariaLabel: "LinkedIn" }
+    ]
+  }
+]
+</script>`
+});