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/constants/code/Backgrounds/balatroCode.ts

@@ -6,9 +6,9 @@ export const balatro: CodeObject = {
   installation: `npm install ogl`,
   usage: `<template>
     <Balatro
-    :is-rotate="false"
-    :mouse-interaction="true"
-    :pixel-filter="700"
+      :is-rotate="false"
+      :mouse-interaction="true"
+      :pixel-filter="700"
     />
 </template>
 

src/demo/Backgrounds/AuroraDemo.vue

@@ -14,18 +14,14 @@
         </div>
 
         <Customize>
-          <div class="space-y-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"
-                :title="`Color ${index + 1}`"
-                :model-value="color"
-                @update:model-value="value => updateColorStop(index, value)"
-              />
-            </div>
+          <div class="flex gap-2">
+            <PreviewColor
+              v-for="(color, index) in colorStops"
+              :key="index"
+              :title="`Color ${index + 1}`"
+              :model-value="color"
+              @update:model-value="value => updateColorStop(index, value)"
+            />
           </div>
 
           <PreviewSlider

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" />