Edit global style and component structure

components/HeroSection.vue

@@ -0,0 +1,95 @@
+<template>
+
+    <section class="hero" ref="hero">
+        <HeroTitle class="hero__title" />
+        <Transition name="fade-in">
+            <HeroArrowDown class="hero__arrow-down" v-show="isVisible" />
+        </Transition>
+    </section>
+
+</template>
+
+<script setup>
+
+    // --------------------------------------------------
+    // DATA
+    // --------------------------------------------------
+
+    const hero = ref();
+    const isVisible = ref(true);
+
+    // --------------------------------------------------
+    // LOGIC
+    // --------------------------------------------------
+
+    const toggleArrowDown = () => {
+        if (hero.value) {
+            if (window.innerHeight / 2 < hero.value.getBoundingClientRect().bottom) {
+                isVisible.value = true;
+            } else {
+                isVisible.value = false;
+            }
+        }
+    }
+
+    // --------------------------------------------------
+    // PROGRAM
+    // --------------------------------------------------
+
+    onMounted(() => {
+        toggleArrowDown();
+        window.addEventListener('scroll', toggleArrowDown);
+    })
+
+    onUnmounted(() => {
+        window.removeEventListener('scroll', toggleArrowDown);
+    })
+
+</script>
+
+<style lang="scss" scoped>
+
+    // --------------------------------------------------
+    // STYLE
+    // --------------------------------------------------
+
+    .hero {
+        width: 100%;
+        height: 100vh;
+        height: 100svh;
+        display: grid;
+        grid:
+            '.' 1fr
+            'title' auto
+            '.' minmax(6rem, 1fr)
+            'arrow-down' auto
+            '.' 2rem
+            / 100%;
+        place-content: center;
+        place-items: center;
+
+        &__title {
+            grid-area: title;
+        }
+
+        &__arrow-down {
+            grid-area: arrow-down;
+        }
+    }
+
+    // Transition component
+
+    .fade-in {
+
+        &-enter-from,
+        &-leave-to {
+            opacity: 0;
+        }
+
+        &-enter-active,
+        &-leave-active {
+            transition: opacity 400ms ease-in-out;
+        }
+    }
+
+</style>