feat: homepage beginning

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>

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!",
     },

src/App.tsx

 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 />} />

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>

src/components/HomePage.tsx

+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;

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'}

src/components/Navbar.tsx

-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);
               }}
             />

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'}

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',