over-and-text

pages/index.vue

 <template>
   <div id="index" class="test">
     <Title>Home</Title>
-    <div class=" h-screen relative" id="home page" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/home.jpg) center center / cover">
-      <h3 class="text-center pt-52 pb-5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent text-4xl lg:text-6xl font-bold">
+    <div class=" h-screen relative" id="home page"  style="background: url(https://static.igem.wiki/teams/4713/wiki/index/home.jpg) center center / cover">
+      <h3 class="tsaf text-center pt-52 pb-5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent text-4xl lg:text-6xl font-bold">
         Welcome to peking igem
       </h3>
-      <h1 class="text-center pt-32 pb-64 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent text-8xl lg:text-9xl font-bold">
+      <h1 class="tsaf text-center pt-32 pb-64 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent text-8xl lg:text-9xl font-bold">
         Crown Assassin
       </h1>
       <Indexwave class=" absolute bottom-[0] w-full"/>
@@ -130,7 +130,7 @@
     </div>
 
     <div class=" h-screen" id="Our Project3" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover">
-      <h2 class="wordfrom text-center mx-auto pt-10 font-bold" style="font-size: 40px;">Concerns and Solutions</h2>
+      <h2 class="wordfrom text-center mx-auto pt-10 font-bold text-3xl lg:text-5xl" style="">Concerns and Solutions</h2>
       <div class="wordfrom text-center mx-auto pt-[8vh]" style="display: grid; grid-template-columns: 33% 33% 33%; align-items: center; grid-column-gap: 0px; font-size: 18px; max-width: 2000px;">
           <div class="card mx-auto">
             <div class="card-inner">
@@ -200,12 +200,11 @@
       </div>  
     </div>
     <div class="h-screen" id="over" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover">
-        <div class=" relative text-center pt-72 pb-64 ; z-10" style="color: #b36d61">
-          <p class="wordfrom text-7xl lg:text-9xl font-bold">
+          <img src="https://static.igem.wiki/teams/4713/wiki/index/right-1.png" alt="right" style="width: 20% ;right: 0%" class="top-[4rem] sticky float-right arrow z-10" >
+          <p class="tsaf text-center pt-[20%] wordfrom text-7xl lg:text-9xl font-bold pb-64" style="color: #b36d61">
           discover more 
           <br>
           in our wiki</p>
-        </div>
     </div>
   </div>
 </template>
@@ -223,38 +222,23 @@
   }
 }
 @font-face {
-  font-family: 'kalam-regular';
-  src: url('../assets/font/Kalam-Regular.ttf'); 
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'kalam-bold';
-  src: url('../assets/font/Kalam-Bold.ttf'); 
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'kalam-light';
-  src: url('../assets/font/Kalam-Light.ttf'); 
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'saf-regular';
-  src: url('../assets/font/SAF-Regular.ttf'); 
+  font-family: 'fdko-regular';
+  src: url('https://static.igem.wiki/teams/4713/wiki/fonts/fredokaone-regular.ttf'); 
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
-  font-family: 'fdko-regular';
-  src: url('https://static.igem.wiki/teams/4713/wiki/fonts/fredokaone-regular.ttf'); 
+  font-family: 'saf';
+  src: url('https://static.igem.wiki/teams/4713/wiki/fonts/saf-regular.ttf'); 
   font-weight: normal;
   font-style: normal;
 }
 .test{
   font-family: 'fdko-regular';
 }
+.tsaf{
+  font-family: 'saf';
+}
 .panel {
   display: flex;
   justify-content: center;
@@ -484,6 +468,15 @@ onMounted(() => {
     ease:"circ.out",
     stagger: 0.02,
   }, "+=0");
+
+  let arrow = document.querySelector(".arrow")
+  gsap.from(arrow, {opacity:0, 
+  scrollTrigger:{
+    trigger: arrow,
+    markers: true,
+    start: "top 10%",
+    toggleActions: "play none none reverse"
+  }})
 })