Componentalization

resources/js/components/home/About.vue

@@ -28,7 +28,7 @@
 
                     <div class="about-cta">
                         <h3>Who Are We?</h3>
-                        <p>Dr Edgy was founded by two close friends who met travelling in North Korea. Both of us love adventure travel with a bit of luxury. One of us is even a doctor.</p>
+                        <p>Dr Edgy was founded by two close friends who met travelling in North Korea. Both of us love adventure travel with a bit of luxury. One of us is even an actual doctor.</p>
                         <p> You are in safe hands.</p>
                         <EdgyButton classes="btn-primary">GET TO KNOW US</EdgyButton>
                     </div>
@@ -178,9 +178,32 @@
 <script setup lang="ts">
 
 import EdgyButton from "@/components/dredgy/EdgyButton.vue";
-import GradientText from "@/components/dredgy/GradientText.vue";
 import SectionContainer from "@/components/dredgy/SectionContainer.vue";
 import SectionTitle from "@/components/dredgy/SectionTitle.vue";
+import {createIntersectionObserver} from "@/composables/useIntersectionObserver";
+import {onMounted} from "vue";
+
+onMounted(() => {
+    initAboutAnimation()
+})
+
+// About section animation
+const initAboutAnimation = (): void => {
+    const aboutContent = document.querySelector('.about-content') as HTMLElement | null;
+    if (!aboutContent) return;
+
+    const observer = createIntersectionObserver((entries: IntersectionObserverEntry[]) => {
+        entries.forEach((entry: IntersectionObserverEntry) => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('visible');
+            } else {
+                entry.target.classList.remove('visible');
+            }
+        });
+    });
+
+    observer.observe(aboutContent);
+};
 
 </script>