<script setup lang="ts">
import WelcomeSection from "../components/sections/WelcomeSection.vue";
// import HeroSection from "../components/sections/HeroSection.vue";
import ImageSection from "../components/sections/ImageSection.vue";
import TextSection from "../components/sections/TextSection.vue";

import { onMounted, nextTick } from "vue";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import ScrollSmoother from "gsap/ScrollSmoother";

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

onMounted(async () => {
  await nextTick();

  ScrollSmoother.create({
    wrapper: "#smooth-wrapper",
    content: "#smooth-content",
    smooth: 0.2,
    effects: true,
  });

  ScrollTrigger.refresh();
});
</script>

<template>
  <div id="smooth-wrapper">
    <div id="smooth-content">
      <WelcomeSection id="welcome" />
      <!-- <HeroSection id="hero" /> -->
      <ImageSection id="image" />
      <TextSection id="text" />
    </div>
  </div>
</template>

<style lang="css" scoped></style>
