refactor: update PreviewColor props to be optional and adjust layout in demos

src/components/common/PreviewColor.vue

@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 defineProps<{
-  title: string;
+  title?: string;
   modelValue: string;
   disabled?: boolean;
 }>();
@@ -27,7 +27,6 @@ const handleColorChange = (event: Event) => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 1.5rem;
 }
 
 .color-label {

src/components/landing/Hero/Hero.vue

@@ -31,7 +31,7 @@
         split-type="words"
         :delay="10"
         :duration="1"
-        text="Eighty-plus snippets, ready to be dropped into your Vue projects"
+        text="Sixty-plus snippets, ready to be dropped into your Vue projects"
       />
 
       <router-link to="/text-animations/split-text" class="landing-button">

src/demo/Backgrounds/AuroraDemo.vue

@@ -14,10 +14,7 @@
         </div>
 
         <Customize>
-          <div class="space-y-2">
+          <div class="flex gap-2">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Color Stops</h3>
-
-            <div class="flex gap-4">
             <PreviewColor
               v-for="(color, index) in colorStops"
               :key="index"
@@ -26,7 +23,6 @@
               @update:model-value="value => updateColorStop(index, value)"
             />
           </div>
-          </div>
 
           <PreviewSlider
             title="Amplitude"

src/demo/Backgrounds/BalatroDemo.vue

@@ -14,7 +14,7 @@
       </div>
 
       <Customize>
-        <div class="flex gap-4">
+        <div class="flex gap-2">
           <PreviewColor
             v-for="(color, index) in colorStops"
             :key="index"
@@ -24,7 +24,7 @@
           />
         </div>
 
-        <PreviewSlider title="Pixelation" v-model="pixelation" :min="0" :max="2000" :step="10" />
+        <PreviewSlider title="Pixelation" v-model="pixelation" :min="100" :max="2000" :step="10" />
 
         <PreviewSwitch title="Enable Mouse Interaction" v-model="mouseInteractionEnabled" />