feat: move DomeGallery styles to Tailwind classes

Author: onmax

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Liquid Ether', 'Staggered Menu', 'Pixel Blast', 'Gradual Blur', 'Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Prismatic Burst'];
+export const NEW = ['Dome Gallery', 'Liquid Ether', 'Staggered Menu', 'Pixel Blast', 'Gradual Blur', 'Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Prismatic Burst'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -86,6 +86,7 @@ export const CATEGORIES = [
       'Tilted Card',
       'Glass Icons',
       'Decay Card',
+      'Dome Gallery',
       'Flowing Menu',
       'Elastic Slider',
       'Stack',

src/constants/Components.ts

@@ -70,6 +70,7 @@ const components = {
   'infinite-scroll': () => import('../demo/Components/InfiniteScrollDemo.vue'),
   'glass-icons': () => import('../demo/Components/GlassIconsDemo.vue'),
   'decay-card': () => import('../demo/Components/DecayCardDemo.vue'),
+  'dome-gallery': () => import('../demo/Components/DomeGalleryDemo.vue'),
   'flowing-menu': () => import('../demo/Components/FlowingMenuDemo.vue'),
   'elastic-slider': () => import('../demo/Components/ElasticSliderDemo.vue'),
   'tilted-card': () => import('../demo/Components/TiltedCardDemo.vue'),

src/constants/code/Components/domeGalleryCode.ts

@@ -0,0 +1,30 @@
+import code from '@content/Components/DomeGallery/DomeGallery.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const domeGallery = createCodeObject(code, 'Components/DomeGallery', {
+  installation: `# No external dependencies required`,
+  usage: `<template>
+  <DomeGallery
+    :images="[
+      'https://images.unsplash.com/photo-1755331039789-7e5680e26e8f?q=80&w=774&auto=format&fit=crop',
+      'https://images.unsplash.com/photo-1755569309049-98410b94f66d?q=80&w=772&auto=format&fit=crop',
+      'https://images.unsplash.com/photo-1755497595318-7e5e3523854f?q=80&w=774&auto=format&fit=crop'
+    ]"
+    :fit="0.8"
+    fit-basis="auto"
+    :min-radius="600"
+    :segments="34"
+    :drag-sensitivity="20"
+    :enlarge-transition-ms="300"
+    :grayscale="true"
+    overlay-blur-color="#060010"
+    image-border-radius="30px"
+    opened-image-width="250px"
+    opened-image-height="350px"
+  />
+</template>
+
+<script setup lang="ts">
+  import DomeGallery from "./DomeGallery.vue";
+</script>`
+});