feat: added <ScrollStack /> 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'];
+export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Scroll Stack'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -62,6 +62,7 @@ export const CATEGORIES = [
       'Masonry',
       'Glass Surface',
       'Magic Bento',
+      'Scroll Stack',
       'Profile Card',
       'Dock',
       'Gooey Nav',
@@ -79,7 +80,7 @@ export const CATEGORIES = [
       'Flowing Menu',
       'Elastic Slider',
       'Stack',
-      'Chroma Grid'
+      'Chroma Grid',
     ]
   },
   {

src/constants/Components.ts

@@ -68,6 +68,7 @@ const components = {
   'tilted-card': () => import('../demo/Components/TiltedCardDemo.vue'),
   'stack': () => import('../demo/Components/StackDemo.vue'),
   'chroma-grid': () => import('../demo/Components/ChromaGridDemo.vue'),
+  'scroll-stack': () => import('../demo/Components/ScrollStackDemo.vue'),
 };
 
 const backgrounds = {

src/constants/code/Components/scrollStackCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/Components/ScrollStack/ScrollStack.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const scrollStack = createCodeObject(code, 'Components/ScrollStack', {
+  installation: `npm install lenis`,
+  usage: `<template>
+    <ScrollStack>
+        <ScrollStackItem>
+            <h2>Card 1</h2>
+            <p>This is the first card in the stack</p>
+        </ScrollStackItem>
+        <ScrollStackItem>
+            <h2>Card 2</h2>
+            <p>This is the second card in the stack</p>
+        </ScrollStackItem>
+        <ScrollStackItem>
+            <h2>Card 3</h2>
+            <p>This is the third card in the stack</p>
+        </ScrollStackItem>
+    </ScrollStack>
+</template>
+
+<script setup lang="ts">
+  import ScrollStack, { ScrollStackItem } from "./ScrollStack.vue";
+</script>`
+});