feat(contact): animate outro

app/stores/contact.ts

@@ -13,7 +13,14 @@ export const useContactStore = defineStore("contact", {
       bottomBarY: SCREEN_HEIGHT + 20,
     },
 
+    outro: {
+      stage1Opacity: 1,
+      stage2Opacity: 1,
+      stage3Opacity: 1,
+    },
+
     isIntro: true,
+    isOutro: true,
 
     notifications: [] as string[],
     notificationsYOffset: 0,
@@ -23,7 +30,7 @@ export const useContactStore = defineStore("contact", {
     animateIntro() {
       this.isIntro = true;
 
-      const start = 3;
+      const start = 2;
 
       gsap.fromTo(
         this.intro,
@@ -83,5 +90,53 @@ export const useContactStore = defineStore("contact", {
         { notificationsYOffset: 0, duration: 0.075 },
       );
     },
+
+    animateOutro() {
+      this.isOutro = true;
+
+      gsap.fromTo(
+        this.outro,
+        {
+          stage1Opacity: 1,
+        },
+        {
+          stage1Opacity: 0,
+          duration: 0.2,
+          ease: "none",
+        },
+      );
+
+      gsap.fromTo(
+        this.outro,
+        {
+          stage2Opacity: 1,
+        },
+        {
+          stage2Opacity: 0,
+          duration: 0.25,
+          delay: 0.25,
+          ease: "none",
+        },
+      );
+
+      gsap.fromTo(
+        this.outro,
+        {
+          stage3Opacity: 1,
+        },
+        {
+          stage3Opacity: 0,
+          duration: 0.3,
+          delay: 0.5,
+          ease: "none",
+          onComplete: () => {
+            setTimeout(() => {
+              this.isOutro = false;
+              navigateTo("/");
+            }, 2000);
+          },
+        },
+      );
+    },
   },
 });