feat: add skip buttons, fix homepage image

public/lit/texts.tsx

@@ -131,6 +131,17 @@ export const toTest =
         EN: "Let's test",
         SK: "K testu"
     }
+export const skipToChapter =
+    {
+        EN: "Skip to Chapter ",
+        SK: "Preskoč na kapitolu "
+    }
+
+export const skipToTest =
+    {
+        EN: "Skip to Test",
+        SK: "Preskoč na test"
+    }
 export const correct =
     {
         EN: "Correct!",

src/components/HomePage.tsx

@@ -22,9 +22,7 @@ const Intro = () => {
 
     return (
         <>
-            <div className="flex-grow flex flex-col justify-center items-center">
-
-            <button
+                <button
                     onClick={handleClick}
                     className="mt-20 border-2 border-black font-primary bg-primary-light z-10 absolute top-28 left-28">
                     {startButtonText}
@@ -52,11 +50,12 @@ const Intro = () => {
                         </button>
                     </div>
                 )}
+            <div className="flex absolute bottom-0 left-0 z-3">
                 <div className="bg-primary-dark">
-                <img
+                    <img
                         src="src/assets/backgrounds/homepage-static.svg"
                         alt="background picture"
-                        className="mt-4"
+                        className=""
                     />
                 </div>
             </div>

src/components/Intro.tsx

 import {useRef} from 'react';
 import {AnimateCC} from 'react-adobe-animate';
 import Typewriter, {TypewriterClass} from "typewriter-effect";
-import {intro, nextButton, toChapter} from "../../public/lit/texts";
+import {intro, nextButton, skipToChapter, toChapter} from "../../public/lit/texts";
 import {useAnimate} from "../hooks/useAnimate";
 import {useTranslate} from "../hooks/useTranslate";
+import {useNavigate} from "react-router-dom";
 
 const Intro = () => {
     const nextButtonText = useTranslate(nextButton);
     const chapter1Text = useTranslate(toChapter) + "1";
     const typewriterRef = useRef<TypewriterClass>();
+    const navigate = useNavigate();
+    const skipButtonText = useTranslate(skipToChapter) + "1";
 
     const {getAnimationObject, handleClick, isAnimationComplete, isLast, onInit, paused} = useAnimate({
         typewriterRef,
@@ -42,7 +45,7 @@ const Intro = () => {
                             </div>
                         </div>
                     </div>
-                    <div className="mt-20 flex justify-center">
+                    <div className="mt-20 flex justify-evenly">
                         <button
                             onClick={handleClick}
                             className={`mt-20 border-4 border-black font-primary ${
@@ -51,6 +54,12 @@ const Intro = () => {
                         >
                             {isLast ? chapter1Text : nextButtonText}
                         </button>
+                        <button
+                            onClick={() => navigate("/insulin")}
+                            className={`mt-20 border-4 border-black font-primary bg-yellow-main`}
+                        >
+                            {skipButtonText}
+                        </button>
                     </div>
                 </div>
             </div>

src/components/Navbar.tsx

@@ -9,7 +9,7 @@ const Navbar = () => {
 
 
     return (
-        <nav className="bg-primary-main">
+        <nav className="bg-primary-main z-10 relative w-screen">
             <div className="p-2 mx-auto flex justify-between">
                 <div>
                     <img src={logo} alt="Logo"

src/components/Opening.tsx

 import {useRef} from 'react';
 import {AnimateCC} from 'react-adobe-animate';
 import Typewriter, {TypewriterClass} from "typewriter-effect";
-import {diabetesTheorem, nextButton, opening, toTest} from "../../public/lit/texts";
+import {diabetesTheorem, nextButton, opening, skipToTest, toTest} from "../../public/lit/texts";
 import {useAnimate} from "../hooks/useAnimate";
 import {useTranslate} from "../hooks/useTranslate";
+import {useNavigate} from "react-router-dom";
 
 const Opening = () => {
     const firstTheoremText = useTranslate(diabetesTheorem);
     const nextButtonText = useTranslate(nextButton);
     const testText = useTranslate(toTest);
     const typewriterRef = useRef<TypewriterClass>();
+    const skipButtonText = useTranslate(skipToTest);
+    const navigate = useNavigate();
 
     const {getAnimationObject, handleClick, isAnimationComplete, isLast, onInit, paused} = useAnimate({
         typewriterRef,
-        link: '/InsulinTest',
+        link: '/insulinTest',
         text: opening
     });
 
@@ -50,7 +53,7 @@ const Opening = () => {
                             </div>
                         </div>
                     </div>
-                    <div className="flex justify-center">
+                    <div className="flex justify-evenly">
                         <button
                             onClick={handleClick}
                             className={`border-4 border-black font-primary ${
@@ -59,6 +62,12 @@ const Opening = () => {
                         >
                             {isLast ? testText : nextButtonText}
                         </button>
+                        <button
+                            onClick={() => navigate("/insulinTest")}
+                            className={`border-4 border-black font-primary bg-yellow-main`}
+                        >
+                            {skipButtonText}
+                        </button>
                     </div>
                 </div>
             </div>

src/index.css

@@ -26,6 +26,9 @@ body {
     place-items: center;
     min-width: 320px;
     min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    position: relative;
 }
 
 h1 {
@@ -71,17 +74,6 @@ strong {
 .animate-fade-in {
     animation: fade-in 1s ease-in-out;
 }
-/*.container {*/
-/*    display: grid;*/
-/*    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;*/
-/*    grid-template-rows: 10rem 30rem 10rem;*/
-/*    gap: 0 0;*/
-/*    grid-auto-flow: row;*/
-/*    grid-template-areas:*/
-/*    ". text text text text text text text ."*/
-/*    ". . . girly girly girly . . ."*/
-/*    ". . . . buttonArea . . . .";*/
-/*}*/
 
 .button {
     /*grid-area: buttonArea;*/