Merge branch 'main' into feat/stepper

src/constants/code/Components/bounceCardsCode.ts

@@ -0,0 +1,39 @@
+import code from '@content/Components/BounceCards/BounceCards.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const bounceCards = createCodeObject(code, 'Components/BounceCards', {
+  installation: `npm install gsap`,
+  usage: `<template>
+  <BounceCards
+    :images="images"
+    :container-width="500"
+    :container-height="250"
+    :animation-delay="0.5"
+    :animation-stagger="0.06"
+    ease-type="elastic.out(1, 0.8)"
+    :transform-styles="transformStyles"
+    :enable-hover="true"
+    class="custom-bounce-cards"
+  />
+</template>
+
+<script setup lang="ts">
+  import BounceCards from "./BounceCards.vue";
+
+  const images = [
+    'https://picsum.photos/400/400?grayscale',
+    'https://picsum.photos/500/500?grayscale',
+    'https://picsum.photos/600/600?grayscale',
+    'https://picsum.photos/700/700?grayscale',
+    'https://picsum.photos/300/300?grayscale'
+  ];
+
+  const transformStyles = [
+    'rotate(5deg) translate(-150px)',
+    'rotate(0deg) translate(-70px)',
+    'rotate(-5deg)',
+    'rotate(5deg) translate(70px)',
+    'rotate(-5deg) translate(150px)'
+  ];
+</script>`
+});

src/constants/code/Components/counterCode.ts

@@ -0,0 +1,17 @@
+import code from '@content/Components/Counter/Counter.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const counter = createCodeObject(code, 'Components/Counter', {
+  installation: `npm i motion-v`,
+  usage: `import Counter from './Counter.vue'
+
+<Counter
+  :value="1"
+  :places="[100, 10, 1]"
+  :fontSize="80"
+  :padding="5"
+  :gap="10"
+  textColor="white"
+  :fontWeight="900"
+/>`
+});

src/constants/code/Components/rollingGalleryCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/Components/RollingGallery/RollingGallery.vue?raw';
+import { createCodeObject } from '@/types/code.ts';
+
+export const rollingGallery = createCodeObject(code, 'Components/RollingGallery', {
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <RollingGallery
+    :autoplay="true"
+    :pause-on-hover="true"
+    :images="customImages"
+  />
+</template>
+
+<script setup lang="ts">
+  import RollingGallery from "./RollingGallery.vue";
+
+  const customImages = [
+    "https://images.unsplash.com/photo-1528181304800-259b08848526?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1506665531195-3566af2b4dfa?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?q=80&w=3456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1495103033382-fe343886b671?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1506781961370-37a89d6b3095?q=80&w=3264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    // Add more images as needed
+  ];
+</script>`
+});

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>`
+});