diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx index ea6bcbe9035a0793f8b3998421b9197eb3f0bc9f..fc42af7249c13d92fafa00ecf2899c8f9909803e 100644 --- a/src/contents/Home.tsx +++ b/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> + → What is <PreCyse/>? <br/> <br/> + → What is our strategy? <br/> <br/> + → How did we do this? <br/> <br/> + → What did we archieve? <br/> <br/> + → What parts are we contributing? <br/> <br/> + → 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> + </> ); } diff --git a/src/headers/home-h.tsx b/src/headers/home-h.tsx index cf116d8ad9b0fe5aaff5d783f7304352fe602f46..587b6c54ea92d0e661359f73b4b6003f2ce7da5b 100644 --- a/src/headers/home-h.tsx +++ b/src/headers/home-h.tsx @@ -1,52 +1,10 @@ -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> - → What is <PreCyse/>? <br/> <br/> - → What is our strategy? <br/> <br/> - → How did we do this? <br/> <br/> - → What did we archieve? <br/> <br/> - → What parts are we contributing? <br/> <br/> - → What are our special awards? - </p> - </div> - </div> - - </div> - <div className="base"> - - </div> - </div> + <></> ); diff --git a/src/pages.ts b/src/pages.ts index 9a369536c395e7a96bc73ef6230bfcb45e41bad8..35433253cf237dbca045673ca0b154c6a8d8b9ad 100644 --- a/src/pages.ts +++ b/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,