Home

src/contents/Home.tsx

@@ -4,22 +4,66 @@ import { Problems } from "../components/Problems";
 import { AirbuddyAnim } from "../components/AirbuddyAnim";
 import { PrimeGuideAnimOne, PrimeGuideAnimTwo } from "../components/PrimeGuide";
 import { useTabNavigation } from "../utils/TabNavigation";
+import { H5 } from "../components/Headings";
+import PreCyse from "../components/precyse";
+import { useNavigation } from "../utils";
 
 export function Home() {
   useTabNavigation();
+  const {goToPageAndScroll} = useNavigation(); 
 
   return (
+    <>
+        <div className="col">
+          <div className="col header-container landing-page-header" id="landing-page-header">
+            <div className="row align-items-center">
+            <div className="col header-button-row">
+              <p> 
+                  <div className="col">
+                    <button  onClick={() => goToPageAndScroll("Abstract", "/description")} > <b>CLICK</b> to go directly to our Project Description.</button> 
+                  </div>
+              </p>
+              <p>
+                <div className="col">
+                    <button onClick={() => goToPageAndScroll("sciency", "")}> <b>SKIP</b> to jump straight to the scienicy part of the animation.</button>   
+                  </div>
+              </p>
+              
+              <p>
+              <div className="col">
+                    <button onClick={() => goToPageAndScroll("scrollstart", "")}> <b>SCROLL</b> to see whole animation.</button>  
+                  </div>
+              </p>
+            </div>
+              <div className="col header-button-row">
+                <div><H5 text="Or take a short tour through our highlights:"/>  </div>
+                <p>
+                  &#8594; What is <PreCyse/>? <br/> <br/> 
+                  &#8594; What is our strategy? <br/> <br/>
+                  &#8594; How did we do this? <br/> <br/>
+                  &#8594; What did we archieve? <br/> <br/>
+                  &#8594; What parts are we contributing? <br/> <br/>
+                  &#8594; What are our special awards?
+                </p>
+              </div>
+            </div>
+            
+          </div>
+        </div>
     <div className="row mt-4">
       <div className="col" id="erstecol">
         <div  className="col">
+        
           <div style={{'position': 'relative',
                        'zIndex': '1', 
                        'top': '10vh',
                        'left': '0vw',
                        'scale': '0.25'}}>
+                        <div id="scrollstart"></div>
             <img src="https://static.igem.wiki/teams/5247/landing/indicator.webp"></img>
           </div>
-          <div id="scrollstart"></div>
+       
+          
           <Breathe></Breathe>
           
           <Problems></Problems>
@@ -53,5 +97,6 @@ export function Home() {
         </div>
       </div> 
     </div> 
+    </>
   );
 }

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(); 
+export function HOMEH() { 
 
   
   return (
-    <div className="col">
-          <div className="col header-container landing-page-header">
-            <div className="row align-items-center">
-            <div className="col header-button-row">
-              <p> 
-                  <div className="col">
-                    <button  onClick={() => goToPageAndScroll("Abstract", "/description")} > <b>CLICK</b> to go directly to our Project Description.</button> 
-                  </div>
-              </p>
-              <p>
-                <div className="col">
-                    <button onClick={() => goToPageAndScroll("sciency", "")}> <b>SKIP</b> to jump straight to the scienicy part of the animation.</button>   
-                  </div>
-              </p>
-              
-              <p>
-              <div className="col">
-                    <button onClick={() => goToPageAndScroll("scrollstart", "")}> <b>SCROLL</b> to see whole animation.</button>  
-                  </div>
-              </p>
-            </div>
-              <div className="col header-button-row">
-                <div><H5 text="Or take a short tour through our highlights:"/>  </div>
-                <p>
-                  &#8594; What is <PreCyse/>? <br/> <br/> 
-                  &#8594; What is our strategy? <br/> <br/>
-                  &#8594; How did we do this? <br/> <br/>
-                  &#8594; What did we archieve? <br/> <br/>
-                  &#8594; What parts are we contributing? <br/> <br/>
-                  &#8594; What are our special awards?
-                </p>
-              </div>
-            </div>
-            
-          </div>
-          <div className="base">
-            
-          </div>
-        </div>
+   <></>
         
     
   );

src/pages.ts

@@ -243,7 +243,7 @@ export const NavPages: (Page | PageRef | Folder)[] = [
     {
       name: "Home",
       title: "Bielefeld CeBiTec",
-      path: "/home",
+      path: "/home?=scrollTo=landing-page-header",
       component: Home,
       header: HOMEH,
       navlist: NoSidebar,