skip button

src/components/Problems.tsx

@@ -179,6 +179,7 @@ export function Problems(){
                     <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
                     <p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}>The constant <strong>fear of suffocating</strong> makes life incredibly challenging</p>
             </div>
+            <div id="sciency"></div>
             
             </>
     );

src/contents/Home.tsx

@@ -4,9 +4,11 @@ import { Problems } from "../components/Problems";
 import { AirbuddyAnim } from "../components/AirbuddyAnim";
 import { PrimeGuideAnimOne, PrimeGuideAnimTwo } from "../components/PrimeGuide";
 import { useTabNavigation } from "../utils/TabNavigation";
+import { useNavigation } from "../utils";
 
 export function Home() {
   useTabNavigation();
+
   return (
     <div className="row mt-4">
       <div className="col" id="erstecol">
@@ -20,7 +22,7 @@ export function Home() {
           </div>
 
           <Breathe></Breathe>
-
+          
           <Problems></Problems>
           
           {/* Spacing Block */}
@@ -29,15 +31,17 @@ export function Home() {
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/200k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-1-text.webp'></FadeIn>
           
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/oneintwenty-no-bg-cropped.gif" bg=''></FadeIn>
-
+          
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/2k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-2-text.webp'></FadeIn>
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/3k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-3-text.webp'></FadeIn>
           
-          <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/treatment-2.gif" bg=''></FadeIn>
+          
+          <FadeIn  filepath="https://static.igem.wiki/teams/5247/landing/gifs/treatment-2.gif" bg=''></FadeIn>
+          
 
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/airbuddy.gif" bg=''></FadeIn>
           <AirbuddyAnim></AirbuddyAnim>
-
+          
           <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/primeguide.webp" bg=''></FadeIn>
           <PrimeGuideAnimOne></PrimeGuideAnimOne>
           <PrimeGuideAnimTwo></PrimeGuideAnimTwo>

src/headers/home-h.tsx

 import { H5 } from "../components/Headings";
 import PreCyse from "../components/precyse";
+import { useNavigation } from "../utils/useNavigation";
 
 
 export function HOMEH() {
+  const {goToPageAndScroll} = useNavigation(); 
   return (
     <div className="col">
           <div className="col header-container landing-page-header">
@@ -15,7 +17,7 @@ export function HOMEH() {
               </p>
               <p>
                 <div className="col">
-                    <button> <b>SKIP</b> to jump straight to the scienicy part of the animation.</button>   
+                    <button onClick={() => goToPageAndScroll("sciency", "")}> <b>SKIP</b> to jump straight to the scienicy part of the animation.</button>   
                   </div>
               </p>
               

src/pages.ts

@@ -116,7 +116,14 @@ const Pages: (Page | Folder)[] = [
       navlist: HpSidebar
       },
       
-    
+      {
+        name: "Home",
+        title: "Bielefeld CeBiTec",
+        path: "/home",
+        component: Home,
+        header: HOMEH,
+        navlist: NoSidebar
+        },
     {
       name: "Home",
       title: "Bielefeld CeBiTec",
@@ -236,7 +243,7 @@ export const NavPages: (Page | PageRef | Folder)[] = [
     {
       name: "Home",
       title: "Bielefeld CeBiTec",
-      path: "/",
+      path: "/home",
       component: Home,
       header: HOMEH,
       navlist: NoSidebar,