diff --git a/index.html b/index.html
index a1bd0c8397cdd92c1ce74c8f5a3fd9b3fe4fb05b..99560e4fa8632611368f0a02fefd287ef550a1ad 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
<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/public/lit/texts.tsx b/public/lit/texts.tsx
index 40d4742af15405eb85be09aeee377f16f8aa6975..7824fb9369d60371497fd801bd77b05a6f32e99b 100644
--- a/public/lit/texts.tsx
+++ b/public/lit/texts.tsx
@@ -39,7 +39,7 @@ export const opening = [
EN: "You probably don't even know what insulin is. I'll explain.",
},
{
- EN: "When we eat or drink, our body breaks down the sugar molecules and releases parts of it called glucose in our blood.",
+ EN: "When we eat or drink, our body breaks down the sugar molecules and releases parts of it called glucose into our blood.",
},
{
EN: "That's great, because we all need some glucose. It is what gives us our energy.",
@@ -47,6 +47,9 @@ export const opening = [
{
EN: "But it can only give us energy if it gets inside the cells.",
},
+ {
+ EN: "And it cannot just do so by itself.",
+ },
{
EN: "This is where the insulin comes into play!",
},
diff --git a/src/App.tsx b/src/App.tsx
index 61617e3a3ba1e3c3893d55c2e14004e85420c08d..1bc1ff8c295fe6bb0454066f415e67231c0671f5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,12 @@
import Intro from './components/Intro';
import Test from './components/Intro';
-import {Navigate, Route, Routes} from 'react-router-dom';
+import {Route, Routes} from 'react-router-dom';
import {FC} from 'react';
import Navbar from './components/Navbar';
import Chapters from './components/Chapters';
import Overview from './components/Overview';
import Opening from "./components/Opening";
+import HomePage from "./components/HomePage";
const App: FC = () => {
return (
@@ -15,7 +16,7 @@ const App: FC = () => {
<Navbar />
</header>
<Routes>
- <Route path="/" element={<Navigate to="/intro" replace />} index />
+ <Route path="/" element={<HomePage />} index />
<Route path="intro" element={<Intro />} />
<Route path="/chapters" element={<Chapters />} />
<Route path="/opening" element={<Opening />} />
diff --git a/src/assets/icons/menu-icon.svg b/src/assets/icons/menu-icon.svg
index 35459ef48a522f8ee96e11f333d8bf1cb31fc272..3f77518409b9a6993ce1ec0b7f66b64c2815ed1b 100644
--- a/src/assets/icons/menu-icon.svg
+++ b/src/assets/icons/menu-icon.svg
@@ -2,9 +2,9 @@
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
- width="22.687113mm"
- height="19.647156mm"
- viewBox="0 0 22.687113 19.647156"
+ width="22.607752mm"
+ height="19.472961mm"
+ viewBox="0 0 22.607752 19.472961"
version="1.1"
id="svg5"
inkscape:export-filename="girly.svg"
@@ -27,9 +27,9 @@
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
- inkscape:zoom="1.4770342"
- inkscape:cx="312.45044"
- inkscape:cy="1960.0087"
+ inkscape:zoom="0.52221045"
+ inkscape:cx="2065.2593"
+ inkscape:cy="3280.2867"
inkscape:window-width="1680"
inkscape:window-height="979"
inkscape:window-x="131"
@@ -43,10 +43,13 @@
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
- transform="translate(-25.642649,-518.62315)">
+ transform="translate(-25.686774,-518.7462)">
<g
id="g12210"
- inkscape:label="menu icon">
+ inkscape:label="menu icon"
+ inkscape:export-filename="girly-svgs\menu-icon.svg"
+ inkscape:export-xdpi="96"
+ inkscape:export-ydpi="96">
<rect
style="fill:#c8ab37;stroke:#000000;stroke-width:0.394057"
id="rect11951"
@@ -68,5 +71,10 @@
d="M 30.400939,532.31826 H 43.067448"
id="path12007-1" />
</g>
+ <path
+ style="fill:#aaccff;stroke:#000000;stroke-width:3.52571"
+ d="m 109.47599,2030.3809 c -4.5809,-2.2891 -7.07909,-4.8487 -9.21302,-9.4392 -1.339417,-2.8814 -1.416241,-4.1668 -1.416241,-23.6961 0,-18.1526 0.142106,-20.9637 1.175211,-23.2481 1.88995,-4.179 4.89757,-7.4823 8.76122,-9.6226 l 3.60422,-1.9965 h 27.41981 c 27.1637,0 27.44652,0.014 30.27922,1.5279 3.85935,2.0622 7.10905,5.4333 9.06203,9.4005 1.60031,3.2509 1.61921,3.5304 1.61921,23.9388 0,18.1525 -0.1421,20.9637 -1.17521,23.248 -2.03692,4.504 -5.10677,7.7149 -9.45182,9.8861 l -4.14544,2.0715 H 139.80719 113.6192 Z m 53.3503,-18.5791 c 0,-0.8837 -3.12187,-1.0156 -24.03465,-1.0156 -20.91278,0 -24.03465,0.1319 -24.03465,1.0156 0,0.8836 3.12187,1.0155 24.03465,1.0155 20.91278,0 24.03465,-0.1319 24.03465,-1.0155 z m 0,-13.5407 c 0,-0.8836 -3.12187,-1.0155 -24.03465,-1.0155 -20.91278,0 -24.03465,0.1319 -24.03465,1.0155 0,0.8836 3.12187,1.0156 24.03465,1.0156 20.91278,0 24.03465,-0.132 24.03465,-1.0156 z m 0,-14.2262 c 0,-0.8983 -2.96644,-1.0023 -24.14767,-0.8463 -18.58822,0.1369 -24.21258,0.3726 -24.42959,1.0241 -0.22205,0.6666 4.90501,0.8463 24.14768,0.8463 21.35449,0 24.42958,-0.1289 24.42958,-1.0241 z"
+ id="path574"
+ transform="scale(0.26458333)" />
</g>
</svg>
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aeeef8d03ef17fb0b7f465408cc2af7bd21fa20f
--- /dev/null
+++ b/src/components/HomePage.tsx
@@ -0,0 +1,26 @@
+import {SetStateAction, useState} from 'react';
+import {AnimateCC} from 'react-adobe-animate';
+
+const Intro = () => {
+
+ const [, setAnimationObject] = useState(null);
+ const getAnimationObject = (obj: SetStateAction<null>) => setAnimationObject(obj);
+
+
+ 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>
+ </>
+ );
+};
+export default Intro;
diff --git a/src/components/Intro.tsx b/src/components/Intro.tsx
index b34399085a1f48227f7cca790aa2de3d8bb827f8..b123567d2752dff41e08b02d363e3a8f59edf9ea 100644
--- a/src/components/Intro.tsx
+++ b/src/components/Intro.tsx
@@ -79,7 +79,7 @@ const Intro = () => {
<button
onClick={handleClick}
className={`mt-20 border-4 border-black font-primary ${
- !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
+ !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-main'
}`}
>
{currentIndex == intro.length -1 ? 'To Chapter 1' : 'Next'}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 20fe30031ccdcd8dff7e56c3664858b87d6c7d55..d25fef220d719f9b9df87e62cc61005577a57c98 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,6 +1,6 @@
-import { Link, useNavigate } from 'react-router-dom';
+import {Link, useNavigate} from 'react-router-dom';
import menuIcon from '../assets/icons/menu-icon.svg';
-import { useState } from 'react';
+import {useState} from 'react';
const Navbar = () => {
const navigate = useNavigate();
@@ -10,14 +10,12 @@ const Navbar = () => {
<nav className="bg-primary-main">
<div className="p-2">
<div className="flex justify-end">
- <Link to="/levels">
+ <Link to="/chapters">
<img
src={menuIcon}
onClick={() => {
setLevelsShown(!levelsShown);
- console.log(levelsShown);
- const page = levelsShown ? '/intro' : '/levels';
- console.log(page);
+ const page = levelsShown ? '/intro' : '/chapters';
navigate(page);
}}
/>
diff --git a/src/components/Opening.tsx b/src/components/Opening.tsx
index 0b6ac92ff3ebfb56f57fb5a7c9f75c61981f219e..a653d14b7af01e0c815a03372ea9eea2ef39f5de 100644
--- a/src/components/Opening.tsx
+++ b/src/components/Opening.tsx
@@ -49,8 +49,7 @@ const Opening = () => {
</div>
<div className="flex items-center justify-center">
-
- <div className="max-w-screen">
+ <div className="w-screen">
<div className="text mt-12">
<div id="intro-text" className="font-speech max-w-md"
style={{ position: 'absolute', top: 350, left: 200, right: 900 }}>
@@ -89,7 +88,7 @@ const Opening = () => {
<button
onClick={handleClick}
className={`border-4 border-black font-primary ${
- !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
+ !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-main'
}`}
>
{currentIndex == opening.length -1 ? 'To Chapter 2' : 'Next'}
diff --git a/tailwind.config.js b/tailwind.config.js
index ec3e24d1b85658a1b3058d32c910407df6ad0cf9..d76c8fc6edb47b8740b1da05ee6b483211fe0f5f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,10 +4,10 @@ export default {
extend: {
colors: {
primary: {
- light: '#65a30d',
- main: '#3f6212',
+ light: '#97FFF4',
+ main: '#3D348B',
// main: '#B7F0AD',
- dark: '#365314',
+ dark: '#97FFF4',
},
beige: {
light: '#e3c99f',