feat: finish chapter 1

public/lit/texts.tsx

@@ -51,8 +51,12 @@ export const opening = [
         SK: "Asi pravdepodobne netušíš, čo je inzulín. Vysvetlím ti to.",
     },
     {
-        EN: "When we eat or drink, our body breaks down the sugar molecules and releases parts of it called glucose into our blood.",
-        SK: "Keď jeme alebo pijeme, naše telo rozkladá molekuly cukru a uvoľňuje ich časti, ktoré nazývame glukóza, do našej krvi.",
+        EN: "When we eat or drink, our body breaks down the sugar molecules.",
+        SK: "Keď jeme alebo pijeme, naše telo rozkladá molekuly cukru.",
+    },
+    {
+        EN: "Parts of it called glucose are released into our blood.",
+        SK: "Časti, ktoré nazývame glukóza, sa uvoľnia do našej krvi."
     },
     {
         EN: "That's great, because we all need some glucose. It is what gives us our energy.",

src/assets/backgrounds/homepage-static.svg

@@ -44,14 +44,11 @@
      inkscape:groupmode="layer"
      id="layer1"
      transform="translate(-914.28713,-8.5983016)">
-    <rect
-       style="fill:#aaccff;stroke:#000000;stroke-width:1.29958"
-       id="rect1580"
-       width="1920.2877"
-       height="839.70441"
-       x="914.75208"
-       y="9.0616684"
-       ry="1.8058158" />
+    <g
+       id="g42848"
+       inkscape:export-filename="insu-learn\src\assets\backgrounds\homepage-static.svg"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96">
       <g
          id="g1844"
          inkscape:label="blueCircles"
@@ -712,4 +709,5 @@
            ry="9.921875" />
       </g>
     </g>
+  </g>
 </svg>

src/components/HomePage.tsx

@@ -21,10 +21,10 @@ const Intro = () => {
 
     return (
         <>
-            <div
-                className="relative"
-            >
-                <img src="src/assets/backgrounds/homepage-static.svg" alt="bg"/>
+            <div className="bg-primary-dark h-screen">
+                <div className="absolute bottom-0">
+                    <img src="src/assets/backgrounds/homepage-static.svg" alt="background picture"/>
+                </div>
             </div>
             <div>
                 <button
@@ -39,7 +39,8 @@ const Intro = () => {
                     {language === 'EN' ? 'English' : 'Slovenčina'}
                 </button>
                 {showLangMenu && (
-                    <div className="mt-2 p-2 border-4 border-black font-primary bg-primary-main z-10 absolute top-60 left-28">
+                    <div
+                        className="mt-2 p-2 border-4 border-black font-primary bg-primary-main z-10 absolute top-60 left-28">
                         <button
                             className="block mt-1 border-2 border-black font-primary bg-primary-light hover:bg-primary-dark"
                             onClick={() => handleLanguageChange('EN')}

src/components/Opening.tsx

@@ -29,7 +29,7 @@ const Opening = () => {
                 <div className="w-screen">
                     <div className="text mt-12">
                         <div id="intro-text" className="font-speech max-w-md"
-                             style={{position: 'absolute', top: 300, left: 200, right: 900}}>
+                             style={{position: 'absolute', top: 300, left: 150, right: 900}}>
 
                             <Typewriter
                                 options={{