Add prettier config, format codebase

src/components/landing/Hero/Hero.vue

@@ -2,18 +2,41 @@
   <div class="landing-content">
     <div class="hero-main-content">
       <h1 class="landing-title">
-        <ResponsiveSplitText :is-mobile="isMobile" text="Animated Vue components" class-name="hero-split"
-          split-type="chars" :delay="30" :duration="2" ease="elastic.out(0.5, 0.3)" />
+        <ResponsiveSplitText
+          :is-mobile="isMobile"
+          text="Animated Vue components"
+          class-name="hero-split"
+          split-type="chars"
+          :delay="30"
+          :duration="2"
+          ease="elastic.out(0.5, 0.3)"
+        />
+
         <br />
-        <ResponsiveSplitText :is-mobile="isMobile" text="for creative developers" class-name="hero-split"
-          split-type="chars" :delay="30" :duration="2" ease="elastic.out(0.5, 0.3)" />
+
+        <ResponsiveSplitText
+          :is-mobile="isMobile"
+          text="for creative developers"
+          class-name="hero-split"
+          split-type="chars"
+          :delay="30"
+          :duration="2"
+          ease="elastic.out(0.5, 0.3)"
+        />
       </h1>
 
-      <ResponsiveSplitText :is-mobile="isMobile" class-name="landing-subtitle" split-type="words" :delay="10"
-        :duration="1" text="Eighty-plus snippets, ready to be dropped into your Vue projects" />
+      <ResponsiveSplitText
+        :is-mobile="isMobile"
+        class-name="landing-subtitle"
+        split-type="words"
+        :delay="10"
+        :duration="1"
+        text="Eighty-plus snippets, ready to be dropped into your Vue projects"
+      />
 
       <router-link to="/text-animations/split-text" class="landing-button">
         <span>Browse Components</span>
+
         <div class="button-arrow-circle">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
             <path d="M6 12L10 8L6 4" stroke="#0b0b0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
@@ -25,8 +48,14 @@
     <div v-if="!isMobile" class="hero-cards-container">
       <div class="hero-card hero-card-1" @click="openUrl('https://vue-bits.dev/backgrounds/dot-grid')">
         <div class="w-full h-full relative hero-dot-grid">
-          <DotGrid base-color="#ffffff" active-color="rgba(138, 43, 226, 0.9)" :dot-size="8" :gap="16"
-            :proximity="50" />
+          <DotGrid
+            base-color="#ffffff"
+            active-color="rgba(138, 43, 226, 0.9)"
+            :dot-size="8"
+            :gap="16"
+            :proximity="50"
+          />
+
           <div class="placeholder-card"></div>
         </div>
       </div>
@@ -34,11 +63,13 @@
       <div class="hero-cards-row">
         <div class="hero-card hero-card-2" @click="openUrl('https://vue-bits.dev/backgrounds/letter-glitch')">
           <LetterGlitch class-name="hero-glitch" :glitch-colors="['#ffffff', '#999999', '#333333']" />
+
           <div class="placeholder-card"></div>
         </div>
 
         <div class="hero-card hero-card-3" @click="openUrl('https://vue-bits.dev/backgrounds/squares')">
           <Squares border-color="#fff" :speed="0.2" direction="diagonal" hover-fill-color="#fff" />
+
           <div class="placeholder-card"></div>
         </div>
       </div>
@@ -47,11 +78,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, h, defineComponent } from 'vue'
-import DotGrid from '@/content/Backgrounds/DotGrid/DotGrid.vue'
-import SplitText from '@/content/TextAnimations/SplitText/SplitText.vue'
-import LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue'
-import Squares from '@/content/Backgrounds/Squares/Squares.vue'
+import { ref, onMounted, onUnmounted, h, defineComponent } from 'vue';
+import DotGrid from '@/content/Backgrounds/DotGrid/DotGrid.vue';
+import SplitText from '@/content/TextAnimations/SplitText/SplitText.vue';
+import LetterGlitch from '@/content/Backgrounds/LetterGlitch/LetterGlitch.vue';
+import Squares from '@/content/Backgrounds/Squares/Squares.vue';
 
 const ResponsiveSplitText = defineComponent({
   props: {
@@ -71,7 +102,7 @@ const ResponsiveSplitText = defineComponent({
   },
   render() {
     if (this.isMobile) {
-      return h('span', { class: this.className }, this.text)
+      return h('span', { class: this.className }, this.text);
     } else {
       return h(SplitText, {
         text: this.text,
@@ -86,29 +117,29 @@ const ResponsiveSplitText = defineComponent({
         rootMargin: this.rootMargin,
         textAlign: this.textAlign,
         onLetterAnimationComplete: this.onLetterAnimationComplete as (() => void) | undefined
-      })
+      });
     }
   }
-})
+});
 
 const openUrl = (url: string) => {
-  window.open(url)
-}
+  window.open(url);
+};
 
-const isMobile = ref(false)
+const isMobile = ref(false);
 
 const checkIsMobile = () => {
-  isMobile.value = window.innerWidth <= 768
-}
+  isMobile.value = window.innerWidth <= 768;
+};
 
 onMounted(() => {
-  checkIsMobile()
-  window.addEventListener('resize', checkIsMobile)
-})
+  checkIsMobile();
+  window.addEventListener('resize', checkIsMobile);
+});
 
 onUnmounted(() => {
-  window.removeEventListener('resize', checkIsMobile)
-})
+  window.removeEventListener('resize', checkIsMobile);
+});
 </script>
 
 <style scoped>
@@ -119,4 +150,4 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
 }
-</style>
+</style>