Added <MagicBento /> component

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Target Cursor', 'Ripple Grid'];
+export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -59,6 +59,7 @@ export const CATEGORIES = [
     subcategories: [
       'Animated List',
       'Masonry',
+      'Magic Bento',
       'Profile Card',
       'Dock',
       'Gooey Nav',

src/constants/Components.ts

@@ -47,6 +47,7 @@ const textAnimations = {
 const components = {
   'animated-list': () => import('../demo/Components/AnimatedListDemo.vue'),
   'masonry': () => import('../demo/Components/MasonryDemo.vue'),
+  'magic-bento': () => import('../demo/Components/MagicBentoDemo.vue'),
   'profile-card': () => import('../demo/Components/ProfileCardDemo.vue'),
   'dock': () => import('../demo/Components/DockDemo.vue'),
   'gooey-nav': () => import('../demo/Components/GooeyNavDemo.vue'),

src/constants/code/Components/magicBentoCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/Components/MagicBento/MagicBento.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const magicBento: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/MagicBento`,
+  installation: `npm install gsap`,
+  usage: `<template>
+    <MagicBento
+      :text-auto-hide="true"
+      :enable-stars="true"
+      :enable-spotlight="true"
+      :enable-border-glow="true"
+      :enable-tilt="true"
+      :enable-magnetism="true"
+      :click-effect="true"
+      :spotlight-radius="300"
+      :particle-count="12"
+      glow-color="132, 0, 255"
+    />
+</template>
+
+<script setup lang="ts">
+  import MagicBento from "./MagicBento.vue";
+</script>`,
+  code
+};