From abba095514b098f3834a001774e5fff17a5c57f8 Mon Sep 17 00:00:00 2001
From: xsieklov <xsieklov@fi.muni.cz>
Date: Thu, 31 Aug 2023 22:10:42 +0200
Subject: [PATCH] feat: homepage and language
---
index.html | 1 -
package-lock.json | 25 +
package.json | 1 +
public/lit/texts.tsx | 24 +-
src/assets/backgrounds/homepage-static.svg | 715 +++++++++++++++++++++
src/atoms/languageAtom.tsx | 6 +
src/components/HomePage.tsx | 64 +-
src/components/Intro.tsx | 15 +-
src/components/Navbar.tsx | 48 +-
src/components/Opening.tsx | 1 -
src/main.tsx | 15 +-
tailwind.config.js | 2 +-
12 files changed, 867 insertions(+), 50 deletions(-)
create mode 100644 src/assets/backgrounds/homepage-static.svg
create mode 100644 src/atoms/languageAtom.tsx
diff --git a/index.html b/index.html
index 99560e4..a1bd0c8 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,6 @@
<script src="https://code.createjs.com/1.0.0/createjs.min.js" type="text/javascript"></script>
<script src="/animations/intro.js" type="text/javascript"></script>
<script src="/animations/opening.js" type="text/javascript"></script>
- <script src="/animations/homepage.js" type="text/javascript"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
diff --git a/package-lock.json b/package-lock.json
index c6b4bd1..52c599d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.0",
"react-scripts": "^5.0.1",
+ "recoil": "^0.7.7",
"typewriter-effect": "^2.20.1"
},
"devDependencies": {
@@ -8741,6 +8742,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/hamt_plus": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+ "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA=="
+ },
"node_modules/handle-thing": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -14720,6 +14726,25 @@
"node": ">=8.10.0"
}
},
+ "node_modules/recoil": {
+ "version": "0.7.7",
+ "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz",
+ "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==",
+ "dependencies": {
+ "hamt_plus": "1.0.2"
+ },
+ "peerDependencies": {
+ "react": ">=16.13.1"
+ },
+ "peerDependenciesMeta": {
+ "react-dom": {
+ "optional": true
+ },
+ "react-native": {
+ "optional": true
+ }
+ }
+ },
"node_modules/recursive-readdir": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
diff --git a/package.json b/package.json
index 7c38d49..b6aeb5f 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.0",
"react-scripts": "^5.0.1",
+ "recoil": "^0.7.7",
"typewriter-effect": "^2.20.1"
},
"devDependencies": {
diff --git a/public/lit/texts.tsx b/public/lit/texts.tsx
index 7824fb9..5ed1ede 100644
--- a/public/lit/texts.tsx
+++ b/public/lit/texts.tsx
@@ -1,56 +1,78 @@
-export const intro = [
+interface IntroTexts {
+ EN: string;
+ SK: string;
+}
+
+export const intro: IntroTexts[] = [
{
EN: 'Hey there, super awesome friends!',
+ SK: 'Ahojte, super skvelĂ priatelia!',
},
{
EN: "I'm Blo, and I have a story to share with you.",
+ SK: "Volám sa Blo a chcem vám povedaĹĄ svoj prĂbeh.",
},
{
EN: 'My little brother got diagnosed with diabetes.',
+ SK: 'Môjmu malému bratovi diagnostikovali cukrovku.',
},
{
EN: "It's like a mischievous gremlin in his body!",
+ SK: "Je to ako taký protivný škriatok v jeho tele!",
},
{
EN: 'But we can outsmart it together.',
+ SK: 'Avšak spoločne ho môžeme premôcť.',
},
{
EN: "That's why I became a diabetes champion to teach you all about it.",
+ SK: "Keďže som najchytrejšà doktor o cukrovke, všetko vás môžem naučiť.",
},
{
EN: "We will learn how food affects us, keep our energy up, and have fun being active.",
+ SK: "NauÄŤĂme sa, ako nás ovplyvĹuje jedlo, vytvára nám energiu a akĂ© benefity má pohyb.",
},
{
EN: "No worries, learning about diabetes is not scary or boring!",
+ SK: "Bez obáv, učenie sa o cukrovke nie je strašidelné ani nudné!",
},
{
EN: "It's an exciting adventure!",
+ SK: "Je to skvelé dobrodružstvo!",
},
{
EN: "So let's dive in! Ready? Let's go!!",
+ SK: "Tak poÄŹme do toho! Ste pripravenĂ?",
},
];
export const opening = [
{
EN: "Whaaat? Wait, stop!",
+ SK: "ÄŚoĹľe? PoÄŤkaj, zastav!",
},
{
EN: "You probably don't even know what insulin is. I'll explain.",
+ SK: "Asi pravdepodobne nevieš, ÄŤo je to 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: "That's great, because we all need some glucose. It is what gives us our energy.",
+ SK: "To je fajn, pretože všetci potrebujeme trochu glukózy. Tá nám dodáva energiu.",
},
{
EN: "But it can only give us energy if it gets inside the cells.",
+ SK: "Ale energiu nám dá iba v prĂpade, Ĺľe sa vie dostaĹĄ do buniek.",
},
{
EN: "And it cannot just do so by itself.",
+ SK: "Ale nedokáže to len tak sama o sebe.",
},
{
EN: "This is where the insulin comes into play!",
+ SK: "Preto v tomto bode prichádza do hry inzulĂn!",
},
]
diff --git a/src/assets/backgrounds/homepage-static.svg b/src/assets/backgrounds/homepage-static.svg
new file mode 100644
index 0000000..7dec97e
--- /dev/null
+++ b/src/assets/backgrounds/homepage-static.svg
@@ -0,0 +1,715 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="1920mm"
+ height="833mm"
+ viewBox="0 0 1920 833"
+ version="1.1"
+ id="svg5"
+ inkscape:export-filename="girly.svg"
+ inkscape:export-xdpi="96"
+ inkscape:export-ydpi="96"
+ inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+ sodipodi:docname="prototype2.svg"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview7"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ inkscape:document-units="mm"
+ showgrid="false"
+ inkscape:zoom="0.125"
+ inkscape:cx="6248"
+ inkscape:cy="2632"
+ inkscape:window-width="1920"
+ inkscape:window-height="1009"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1"
+ showguides="true" />
+ <defs
+ id="defs2" />
+ <g
+ inkscape:label="Layer 1"
+ 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="g1844"
+ inkscape:label="blueCircles"
+ transform="translate(-20.437177,-108.04209)">
+ <ellipse
+ style="fill:#5599ff;stroke:none;stroke-width:1.37784"
+ id="path1686"
+ cx="2452.2817"
+ cy="443.12677"
+ rx="90.998795"
+ ry="91.715324" />
+ <ellipse
+ style="fill:#5599ff;stroke:none;stroke-width:4.6792"
+ id="path1686-0"
+ cx="-813.79816"
+ cy="1668.5828"
+ rx="309.51749"
+ ry="310.9841"
+ transform="matrix(0.01794811,-0.99983892,0.9998369,0.01806035,0,0)" />
+ <ellipse
+ style="fill:#5599ff;stroke:none;stroke-width:3.57854"
+ id="path1686-6"
+ cx="2415.4407"
+ cy="852.22516"
+ rx="239.92137"
+ ry="234.65106" />
+ <ellipse
+ style="fill:#5599ff;stroke:none;stroke-width:5.88549"
+ id="path1686-04"
+ cx="1964.8804"
+ cy="755.37225"
+ rx="409.79788"
+ ry="371.59998" />
+ </g>
+ <g
+ id="g2332"
+ inkscape:label="pills"
+ transform="matrix(4.1056988,0,0,3.8903141,-7760.1946,-561.25276)">
+ <rect
+ style="fill:#0044aa;stroke:none;stroke-width:1.54047"
+ id="rect1898"
+ width="64.487335"
+ height="79.176117"
+ x="2370.2678"
+ y="280.8782"
+ ry="10.942506" />
+ <rect
+ style="fill:#d5e5ff;stroke:none;stroke-width:1.29424"
+ id="rect2155"
+ width="67.961754"
+ height="18.629675"
+ x="2368.5376"
+ y="272.53314"
+ ry="3.0812349" />
+ <rect
+ style="fill:#d5e5ff;stroke:none;stroke-width:1.37784"
+ id="rect2211"
+ width="52.306396"
+ height="37.796745"
+ x="2376.8958"
+ y="297.53738"
+ ry="3.0812349" />
+ <rect
+ style="fill:#550022;stroke:none;stroke-width:1.37784"
+ id="rect2213"
+ width="43.170689"
+ height="3.7617612"
+ x="2380.8367"
+ y="301.4783"
+ ry="0" />
+ <rect
+ style="fill:#550022;stroke:none;stroke-width:1.37784"
+ id="rect2267"
+ width="30.526285"
+ height="3.9266179"
+ x="2380.8445"
+ y="307.02036" />
+ <rect
+ style="fill:#ac93a7;stroke:none;stroke-width:1.37784"
+ id="rect2269"
+ width="36.099548"
+ height="3.8632851"
+ x="2380.8601"
+ y="315.12692" />
+ <rect
+ style="fill:#ac93a7;stroke:none;stroke-width:1.34353"
+ id="rect2323"
+ width="18.366438"
+ height="3.6732874"
+ x="2380.876"
+ y="321.1593" />
+ </g>
+ <g
+ id="g4152"
+ inkscape:label="tablets"
+ transform="matrix(3.5125967,0,0,3.4054551,-6660.8926,-1599.374)">
+ <rect
+ style="fill:#b7bec8;stroke:none;stroke-width:1.4247"
+ id="rect2334"
+ width="79.821426"
+ height="116.97635"
+ x="2367.4731"
+ y="534.1701"
+ ry="6.5647831" />
+ <g
+ id="g3136"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1386.3958,291.58072)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-1"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1386.4153,304.66206)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-5"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-4" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-3"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-9"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1421.2334,291.54528)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-3"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-0" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-8"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-2"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1421.28,304.62157)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-50"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-6" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-9"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-15"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1421.32,317.83034)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-0"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-02" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-1"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-7"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1421.389,331.088)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-6"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-7" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-2"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-4"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1421.3908,344.13901)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-34"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-2" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-33"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-6"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1421.358,357.24758)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-8"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-46" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-31"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-0"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1421.3736,385.45731)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-7"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-44" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-6"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-95"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1421.369,370.85506)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-86"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-21" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-5"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-3"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1386.4189,317.83503)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-06"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-20" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-0"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-74"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1386.4104,344.19697)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-58"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-29" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-11"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-26"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1386.4417,357.25552)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-64"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-65" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-4"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-16"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1386.4207,385.45895)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-1"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-468" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-318"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-47"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1386.4239,370.87404)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-55"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-45" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-14"
+ transform="scale(0.26458333)" />
+ </g>
+ <g
+ id="g3136-22"
+ inkscape:label="pill"
+ transform="matrix(0.41541679,0,0,0.44287285,1386.4015,331.28732)">
+ <rect
+ style="fill:#ff0000;stroke:none;stroke-width:1.37784"
+ id="rect2754-9"
+ width="60.799244"
+ height="18.239773"
+ x="2384.5972"
+ y="563.91296"
+ ry="9.1198864" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:1.29686"
+ d="m 2415.7641,563.83589 0.024,18.40649"
+ id="path3006-5" />
+ <path
+ style="fill:#ffffff;stroke:#ffffff;stroke-width:0.881427"
+ d="m 9133.0823,2181.1868 c -10e-5,-10.4496 -0.051,-25.9113 -0.1126,-34.3594 l -0.1124,-15.3602 h 38.8348 c 26.0371,0 39.3074,0.059 40.269,0.1773 8.9343,1.1044 17.0533,5.5438 22.6246,12.3711 10.0636,12.3321 10.3518,29.9652 0.6975,42.6685 -4.7508,6.2511 -12.0764,10.9451 -19.7409,12.6493 -3.9116,0.8697 -3.0248,0.8526 -44.1642,0.8526 h -38.2957 z"
+ id="path3131-95"
+ transform="scale(0.26458333)" />
+ </g>
+ </g>
+ <g
+ id="g7607"
+ inkscape:label="donut"
+ transform="matrix(3.4561403,0,0,3.6036364,-6179.7817,-969.6717)">
+ <path
+ style="fill:#ff5599;stroke:none;stroke-width:1.37784"
+ id="path5369"
+ sodipodi:type="arc"
+ sodipodi:cx="2253.1089"
+ sodipodi:cy="450.32242"
+ sodipodi:rx="53.320271"
+ sodipodi:ry="51.449383"
+ sodipodi:start="0"
+ sodipodi:end="6.2831824"
+ sodipodi:arc-type="slice"
+ d="m 2306.4292,450.32242 a 53.320271,51.449383 0 0 1 -53.3203,51.44938 53.320271,51.449383 0 0 1 -53.3203,-51.44931 53.320271,51.449383 0 0 1 53.3202,-51.44945 53.320271,51.449383 0 0 1 53.3204,51.44923 l -53.3203,1.5e-4 z" />
+ <path
+ style="fill:#ff2a7f;stroke:none;stroke-width:1.85738"
+ id="path6103"
+ sodipodi:type="arc"
+ sodipodi:cx="2252.7346"
+ sodipodi:cy="447.51611"
+ sodipodi:rx="31.617985"
+ sodipodi:ry="29.934187"
+ sodipodi:start="0"
+ sodipodi:end="6.2831824"
+ sodipodi:arc-type="slice"
+ d="m 2284.3526,447.51611 a 31.617985,29.934187 0 0 1 -31.618,29.93419 31.617985,29.934187 0 0 1 -31.618,-29.93414 31.617985,29.934187 0 0 1 31.618,-29.93423 31.617985,29.934187 0 0 1 31.618,29.9341 l -31.618,8e-5 z" />
+ <path
+ style="fill:#5599ff;stroke:none;stroke-width:1.37784"
+ id="path5373"
+ sodipodi:type="arc"
+ sodipodi:cx="2252.5479"
+ sodipodi:cy="451.63208"
+ sodipodi:rx="17.212158"
+ sodipodi:ry="16.83798"
+ sodipodi:start="0"
+ sodipodi:end="6.2831824"
+ sodipodi:arc-type="slice"
+ d="m 2269.76,451.63208 a 17.212158,16.83798 0 0 1 -17.2121,16.83798 17.212158,16.83798 0 0 1 -17.2122,-16.83796 17.212158,16.83798 0 0 1 17.2121,-16.838 17.212158,16.83798 0 0 1 17.2122,16.83793 l -17.2121,5e-5 z" />
+ <g
+ id="g7575"
+ inkscape:label="sprinkles">
+ <path
+ style="fill:#d42aff;stroke:#dd55ff;stroke-width:1.87083"
+ d="m 2262.2509,488.91896 c -6.2123,5.08917 -6.2123,5.08917 -6.2123,5.08917"
+ id="path7113-5" />
+ <path
+ style="fill:#d42aff;stroke:#dd55ff;stroke-width:1.87083"
+ d="m 2210.3305,439.49638 c -5.2943,6.03849 -5.2943,6.03849 -5.2943,6.03849"
+ id="path7113-4" />
+ <path
+ style="fill:#d42aff;stroke:#dd55ff;stroke-width:1.87083"
+ d="m 2241.1683,429.44661 c -5.8511,5.50053 -5.8511,5.50053 -5.8511,5.50053"
+ id="path7113-54" />
+ <path
+ style="fill:#d42aff;stroke:#dd55ff;stroke-width:1.87083"
+ d="m 2255.5618,403.68775 c 5.0177,6.27015 5.0177,6.27015 5.0177,6.27015"
+ id="path7113" />
+ <path
+ style="fill:#d42aff;stroke:#dd55ff;stroke-width:1.87083"
+ d="m 2289.8587,431.00227 c -4.5425,6.62255 -4.5425,6.62255 -4.5425,6.62255"
+ id="path7113-1" />
+ <path
+ style="fill:#ffe680;stroke:#ffe680;stroke-width:1.87083"
+ d="m 2275.8358,412.61372 c -4.5425,6.62255 -4.5425,6.62255 -4.5425,6.62255"
+ id="path7113-1-9" />
+ <path
+ style="fill:#ffe680;stroke:#ffe680;stroke-width:1.87083"
+ d="m 2285.4448,449.63715 c -6.2981,-4.98265 -6.2981,-4.98265 -6.2981,-4.98265"
+ id="path7113-1-9-8" />
+ <path
+ style="fill:#ffe680;stroke:#ffe680;stroke-width:1.87083"
+ d="m 2264.0105,479.50047 c 7.2019,3.55323 7.2019,3.55323 7.2019,3.55323"
+ id="path7113-1-9-9" />
+ <path
+ style="fill:#ffe680;stroke:#ffe680;stroke-width:1.87083"
+ d="m 2297.4521,467.826 c -7.0293,3.88341 -7.0293,3.88341 -7.0293,3.88341"
+ id="path7113-1-9-7" />
+ <path
+ style="fill:#ffe680;stroke:#ffe680;stroke-width:1.87083"
+ d="m 2237.5747,486.66346 c -6.6015,4.57309 -6.6015,4.57309 -6.6015,4.57309"
+ id="path7113-1-9-99" />
+ <path
+ style="fill:#ffe680;stroke:#ffe680;stroke-width:1.87083"
+ d="m 2209.7387,451.7372 c 7.7955,1.92977 7.7955,1.92977 7.7955,1.92977"
+ id="path7113-1-9-1" />
+ <path
+ style="fill:#ffe680;stroke:#ffe680;stroke-width:1.87083"
+ d="m 2222.0481,415.54595 c 1.4329,7.90185 1.4329,7.90185 1.4329,7.90185"
+ id="path7113-1-9-4" />
+ <path
+ style="fill:#ffe680;stroke:#ffe680;stroke-width:1.87083"
+ d="m 2248.089,411.35168 c -7.7863,-1.96587 -7.7863,-1.96587 -7.7863,-1.96587"
+ id="path7113-1-9-15" />
+ <path
+ style="fill:#00aa00;stroke:#00d400;stroke-width:1.87083"
+ d="m 2215.5869,474.07126 c -3.9009,-7.01961 -3.9009,-7.01961 -3.9009,-7.01961"
+ id="path7113-1-9-996" />
+ <path
+ style="fill:#00aa00;stroke:#00d400;stroke-width:1.87083"
+ d="m 2294.7127,439.88867 c 3.7413,7.10599 3.7413,7.10599 3.7413,7.10599"
+ id="path7113-1-9-996-2" />
+ <path
+ style="fill:#00aa00;stroke:#00d400;stroke-width:1.87083"
+ d="m 2280.8076,419.69314 c 8.0037,-0.65711 8.0037,-0.65711 8.0037,-0.65711"
+ id="path7113-1-9-996-9" />
+ <path
+ style="fill:#00aa00;stroke:#00d400;stroke-width:1.87083"
+ d="m 2266.9723,421.60956 c -4.5425,6.62255 -4.5425,6.62255 -4.5425,6.62255"
+ id="path7113-1-9-996-83" />
+ <path
+ style="fill:#00aa00;stroke:#00d400;stroke-width:1.87083"
+ d="m 2221.1428,435.52537 c -5.4877,-5.86325 -5.4877,-5.86325 -5.4877,-5.86325"
+ id="path7113-1-9-996-23" />
+ <path
+ style="fill:#00aa00;stroke:#ff6600;stroke-width:1.87083"
+ d="m 2229.9306,451.90435 c -4.5425,6.62255 -4.5425,6.62255 -4.5425,6.62255"
+ id="path7113-1-9-996-6" />
+ <path
+ style="fill:#00aa00;stroke:#ff6600;stroke-width:1.87083"
+ d="m 2221.3091,477.03222 c 1.0589,7.96055 1.0589,7.96055 1.0589,7.96055"
+ id="path7113-1-9-996-6-5" />
+ <path
+ style="fill:#00aa00;stroke:#ff6600;stroke-width:1.87083"
+ d="m 2293.1416,454.11927 c -0.5249,8.01355 -0.5249,8.01355 -0.5249,8.01355"
+ id="path7113-1-9-996-6-3" />
+ <path
+ style="fill:#00aa00;stroke:#ff6600;stroke-width:1.87083"
+ d="m 2230.7794,414.46561 c 6.4599,4.77085 6.4599,4.77085 6.4599,4.77085"
+ id="path7113-1-9-996-6-1" />
+ <path
+ style="fill:#00aa00;stroke:#00d400;stroke-width:1.87083"
+ d="m 2256.6406,484.07123 c -7.9563,-1.09039 -7.9563,-1.09039 -7.9563,-1.09039"
+ id="path7113-1-9-996-8" />
+ <path
+ style="fill:#00aa00;stroke:#00d400;stroke-width:1.87083"
+ d="m 2281.7889,461.16477 c -4.5425,6.62255 -4.5425,6.62255 -4.5425,6.62255"
+ id="path7113-1-9-996-4" />
+ <path
+ style="fill:#d42aff;stroke:#dd55ff;stroke-width:1.87083"
+ d="m 2285.6775,475.56779 c 0.9097,7.97901 0.9097,7.97901 0.9097,7.97901"
+ id="path7113-2" />
+ <path
+ style="fill:#d42aff;stroke:#dd55ff;stroke-width:1.87083"
+ d="m 2229.3838,471.792 c 5.0177,6.27015 5.0177,6.27015 5.0177,6.27015"
+ id="path7113-9" />
+ </g>
+ </g>
+ <g
+ id="g9054"
+ inkscape:label="muffin"
+ transform="matrix(3.2368078,0,0,3.3489712,-6180.921,-1156.7154)">
+ <path
+ style="fill:#d40055;stroke:none;stroke-width:0.896578"
+ d="m 2522.0745,452.23905 15.5442,42.00261 45.7068,0.0661 14.6182,-42.1349 z"
+ id="path8471"
+ sodipodi:nodetypes="ccccc" />
+ <path
+ style="fill:#d40055;stroke:#11002b;stroke-width:0.896578"
+ d="m 2525.7125,451.90833 12.9646,34.925"
+ id="path8529" />
+ <path
+ style="fill:#d40055;stroke:#11002b;stroke-width:0.896578"
+ d="m 2530.475,452.43749 8.4666,24.60625"
+ id="path8531" />
+ <path
+ style="fill:#d40055;stroke:#11002b;stroke-width:0.896578"
+ d="m 2535.2375,452.17291 14.5521,38.36458"
+ id="path8533" />
+ <rect
+ style="fill:#ffd5e5;stroke:none;stroke-width:1.03086"
+ id="rect8587"
+ width="92.339577"
+ height="19.84375"
+ x="2512.3511"
+ y="432.32916"
+ ry="9.921875" />
+ <rect
+ style="fill:#ffd5e5;stroke:none;stroke-width:0.864777"
+ id="rect8587-5"
+ width="64.98246"
+ height="19.84375"
+ x="2527.3621"
+ y="418.96768"
+ ry="9.921875" />
+ <ellipse
+ style="fill:#d40000;stroke:none;stroke-width:0.828797"
+ id="path8928"
+ cx="2559.3335"
+ cy="404.11798"
+ rx="11.046354"
+ ry="10.484115" />
+ <rect
+ style="fill:#ffd5e5;stroke:none;stroke-width:0.648308"
+ id="rect8587-5-6"
+ width="36.521614"
+ height="19.84375"
+ x="2540.7986"
+ y="408.51666"
+ ry="9.921875" />
+ </g>
+ </g>
+</svg>
diff --git a/src/atoms/languageAtom.tsx b/src/atoms/languageAtom.tsx
new file mode 100644
index 0000000..6d8a4cc
--- /dev/null
+++ b/src/atoms/languageAtom.tsx
@@ -0,0 +1,6 @@
+import {atom} from 'recoil';
+
+export const languageAtom = atom({
+ key: 'languageState',
+ default: 'EN',
+});
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
index aeeef8d..cc74fc5 100644
--- a/src/components/HomePage.tsx
+++ b/src/components/HomePage.tsx
@@ -1,25 +1,57 @@
-import {SetStateAction, useState} from 'react';
-import {AnimateCC} from 'react-adobe-animate';
+import {useNavigate} from "react-router-dom";
+import {useState} from "react";
+import {useRecoilState} from "recoil";
+import {languageAtom} from "../atoms/languageAtom";
const Intro = () => {
-
- const [, setAnimationObject] = useState(null);
- const getAnimationObject = (obj: SetStateAction<null>) => setAnimationObject(obj);
+ const navigate = useNavigate();
+ const [showLangMenu, setShowLangMenu] = useState(false);
+ const [language, setLanguage] = useRecoilState(languageAtom);
+ const handleLanguageChange = (newLanguage: string) => {
+ setLanguage(newLanguage);
+ console.log(languageAtom);
+ setShowLangMenu(false);
+ };
+ const handleClick = () => {
+ navigate('/intro');
+ }
return (
<>
- <div className="flex items-center justify-center">
- <div
- id="animation-container"
- style={{ width: '1903px', height: '923px', position: 'relative' }}
- >
- <AnimateCC
- animationName="homepage"
- getAnimationObject={getAnimationObject}
- />
- </div>
- </div>
+ <div
+ className="relative"
+ >
+ <img src="src/assets/backgrounds/homepage-static.svg" alt="bg"/>
+ </div>
+ <div>
+ <button
+ onClick={handleClick}
+ className="mt-20 border-4 border-black font-primary bg-primary-light z-10 absolute top-28 left-28">Start
+ </button>
+ <button
+ className="mt-20 border-4 border-black font-primary bg-primary-light z-10 absolute top-44 left-28"
+ onClick={() => setShowLangMenu(!showLangMenu)}
+ >
+ {language === 'EN' ? 'English' : 'SlovenÄŤina'}
+ </button>
+ {showLangMenu && (
+ <div className="mt-2 p-2 border-4 border-black font-primary bg-primary-light z-10 absolute top-60 left-28">
+ <button
+ className="block mt-1 border-4 border-black font-primary bg-primary-light hover:bg-primary-dark"
+ onClick={() => handleLanguageChange('EN')}
+ >
+ English
+ </button>
+ <button
+ className="block mt-1 border-4 border-black font-primary bg-primary-light hover:bg-primary-dark"
+ onClick={() => handleLanguageChange('SK')}
+ >
+ SlovenÄŤina
+ </button>
+ </div>
+ )}
+ </div>
</>
);
};
diff --git a/src/components/Intro.tsx b/src/components/Intro.tsx
index b123567..d1da73c 100644
--- a/src/components/Intro.tsx
+++ b/src/components/Intro.tsx
@@ -3,8 +3,15 @@ import {AnimateCC} from 'react-adobe-animate';
import Typewriter, {TypewriterClass} from "typewriter-effect";
import {intro} from "../../public/lit/texts";
import {useNavigate} from "react-router-dom";
+import {useRecoilValue} from "recoil";
+import {languageAtom} from "../atoms/languageAtom";
+interface IntroTexts {
+ EN: string;
+ SK: string;
+}
const Intro = () => {
+ const language = useRecoilValue(languageAtom);
const [paused, setPaused] = useState(false);
const [, setAnimationObject] = useState(null);
@@ -12,7 +19,7 @@ const Intro = () => {
const [currentIndex, setCurrentIndex] = useState(0);
const [isAnimationComplete, setIsAnimationComplete] = useState(false);
- const {EN} = intro[currentIndex];
+ const line = intro[currentIndex];
const typewriterRef = useRef<TypewriterClass>();
const navigate = useNavigate();
@@ -20,14 +27,14 @@ const Intro = () => {
if (typewriterRef.current) {
typewriterRef.current.deleteAll(0.0000000000000000000001);
typewriterRef.current
- .typeString(EN)
+ .typeString(line[language as keyof IntroTexts])
.start()
.callFunction(() => {
setIsAnimationComplete(true);
setPaused(true)
});
}
- }, [EN]);
+ }, [language, currentIndex]);
const handleClick = () => {
if(currentIndex == intro.length -1) {
@@ -53,7 +60,7 @@ const Intro = () => {
onInit={(typewriter) => {
typewriterRef.current = typewriter;
typewriter
- .typeString(EN)
+ .typeString(line[language as keyof IntroTexts])
.start()
.callFunction(() => {
setIsAnimationComplete(true);
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d25fef2..975040a 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,29 +1,37 @@
import {Link, useNavigate} from 'react-router-dom';
import menuIcon from '../assets/icons/menu-icon.svg';
+import logo from '../../public/lit/logo.svg';
import {useState} from 'react';
const Navbar = () => {
- const navigate = useNavigate();
- const [levelsShown, setLevelsShown] = useState(false);
+ const navigate = useNavigate();
+ const [levelsShown, setLevelsShown] = useState(false);
+
+
+ return (
+ <nav className="bg-primary-main">
+ <div className="p-2 flex justify-between">
+ <div>
+ <img src={logo} alt="Logo"
+ onClick={() => navigate("/")}
+ className="w-52 mt-4 ml-4"/>
+ </div>
+ <div className="flex items-center justify-end">
+ <Link to="/chapters">
+ <img
+ src={menuIcon}
+ onClick={() => {
+ setLevelsShown(!levelsShown);
+ const page = levelsShown ? '/intro' : '/chapters';
+ navigate(page);
+ }}
+ alt="Chapters Icon"/>
+ </Link>
+ </div>
+ </div>
+ </nav>
+ )
- return (
- <nav className="bg-primary-main">
- <div className="p-2">
- <div className="flex justify-end">
- <Link to="/chapters">
- <img
- src={menuIcon}
- onClick={() => {
- setLevelsShown(!levelsShown);
- const page = levelsShown ? '/intro' : '/chapters';
- navigate(page);
- }}
- />
- </Link>
- </div>
- </div>
- </nav>
- );
};
export default Navbar;
diff --git a/src/components/Opening.tsx b/src/components/Opening.tsx
index a653d14..94b4e37 100644
--- a/src/components/Opening.tsx
+++ b/src/components/Opening.tsx
@@ -5,7 +5,6 @@ import {opening} from "../../public/lit/texts";
import {useNavigate} from "react-router-dom";
const Opening = () => {
-
const [paused, setPaused] = useState(false);
const [, setAnimationObject] = useState(null);
const getAnimationObject = (obj: SetStateAction<null>) => setAnimationObject(obj);
diff --git a/src/main.tsx b/src/main.tsx
index 47d351e..0c1de19 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,12 +2,15 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
-import { BrowserRouter } from 'react-router-dom';
+import {BrowserRouter} from 'react-router-dom';
+import {RecoilRoot} from "recoil";
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
- <React.StrictMode>
- <BrowserRouter>
- <App />
- </BrowserRouter>
- </React.StrictMode>
+ <React.StrictMode>
+ <RecoilRoot>
+ <BrowserRouter>
+ <App/>
+ </BrowserRouter>
+ </RecoilRoot>
+ </React.StrictMode>
);
diff --git a/tailwind.config.js b/tailwind.config.js
index d76c8fc..8edba60 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,7 +7,7 @@ export default {
light: '#97FFF4',
main: '#3D348B',
// main: '#B7F0AD',
- dark: '#97FFF4',
+ dark: '#aaccffff',
},
beige: {
light: '#e3c99f',
--
GitLab