New artius page

Author: gabcasanova

src/App.tsx

@@ -11,7 +11,7 @@ import Contact from "./pages/Contact";
 import About from "./pages/About";
 import EdMescDX from "./pages/EdMescDX";
 import NewArtius from "./pages/NewArtius";
-import Artius from "./pages/Artius";
+import OldArtius from "./pages/OldArtius";
 import { ParallaxProvider } from "react-scroll-parallax";
 
 function App() {
@@ -26,8 +26,8 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
           <Route path="/contact" element={<Contact />} />
-          <Route path="/artius" element={<Artius />} />
-          <Route path="/newartius" element={<NewArtius />} />
+          <Route path="/oldartius" element={<OldArtius />} />
+          <Route path="/artius" element={<NewArtius />} />
           <Route path="/edmescdx" element={<EdMescDX />} />
         </Routes>
       </Router>

src/components/ArtiusCharButton.tsx

@@ -0,0 +1,18 @@
+//import React from 'react'
+
+interface Props {
+  img?: string;
+  func?: () => void;
+}
+
+const ArtiusCharButton = (props: Props) => {
+  return (
+    <div className="flex-1
+                    bg-no-repeat bg-contain bg-center p-5 m-1
+                    hover:bg-white transition cursor-pointer"
+        style={{backgroundImage: `url(${props.img})`}}
+        onClick={() =>  props.func && props.func()}/>
+  )
+}
+
+export default ArtiusCharButton

src/locales/en.json

@@ -84,7 +84,23 @@
       "comparison1": "ARTIUS draws inspiration from real-life settings, reinterpreting them into a grounded yet fantastical game world.",
       "comparison2": "The evil art creatures offer interesting depictions of famous art pieces & day-to-day elements.",
       "tailored": "/img/tailored.png",
-      "tailoredMobile": "/img/tailored_mobile.png"
+      "tailoredMobile": "/img/tailored_mobile.png",
+      "meet": "Meet the Cast!",
+
+      "characters": {
+        "pivolo": {
+          "title": "Pivolo",
+          "subtitle": "Evil",
+          "desc": "aaaaa",
+          "img": "/img/characters/pivolo.png"
+        },
+        "pierre": {
+          "title": "Pierre",
+          "subtitle": "Good",
+          "desc": "aaaaa",
+          "img": "/img/characters/pierre.png"
+        }
+      }
     }
   },
 

src/pages/NewArtius.tsx

@@ -24,11 +24,12 @@ import SocialIcon from "../components/SocialIcon";
 import ActualPage from "../components/global/ActualPage";
 import YouTube from "react-youtube";
 import Gallery from "../components/global/Gallery";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import AOS from "aos";
 import "aos/dist/aos.css";
 import { Parallax } from "react-scroll-parallax";
 import { useTranslation } from "react-i18next";
+import ArtiusCharButton from "../components/ArtiusCharButton";
 
 const NewArtius = () => {
   useEffect(() => {
@@ -43,6 +44,20 @@ const NewArtius = () => {
   const slides = [pic1, pic2, pic3];
   const slides2 = [pic4, pic6, pic5];
 
+  const [currentCharTitle, setCurrentCharTitle] = useState(t("games.newArtius.characters.pivolo.title"))
+  const [currentCharSubtitle, setCurrentCharSubtitle] = useState("Current char title.")
+  const [currentCharDesc, setCurrentCharDesc] = useState("Current char description.")
+  const [currentCharImg, setCurrentCharImg] = useState("/")
+
+  function setCharacter(characterName: string) {
+    const path = `games.newArtius.characters.${characterName}`
+
+    setCurrentCharTitle(t(`${path}.title`))
+    setCurrentCharSubtitle(t(`${path}.subtitle`))
+    setCurrentCharDesc(t(`${path}.desc`))
+    setCurrentCharImg(t(`${path}.img`))
+  }
+
   return (
     <ActualPage singleColumn={true}>
       <div
@@ -127,7 +142,7 @@ const NewArtius = () => {
                 className="flex items-center justify-center"
               >
                 <p className="font-adlib text-pvic-blue drop-shadow-[3px_3px_0px_rgba(0,0,0,1)] text-3xl xl:text-5xl p-5 xl:mr-20 xl:p-0 text-right max-w-[800px]">
-                {t("games.newArtius.text2")}
+                  {t("games.newArtius.text2")}
                 </p>
               </div>
             </div>
@@ -137,15 +152,27 @@ const NewArtius = () => {
               {/* Desktop */}
               <div
                 data-aos="fade-up"
-                className={`mt-20 mb-20 w-full max-w-[1400px] h-screen hidden xl:inline`}
-                style={{ backgroundImage: `url(${t("games.newArtius.tailored")})`, backgroundSize: "contain", backgroundPosition: "center", backgroundRepeat: "no-repeat"}}
+                className={`mt-20 mb-20 w-full max-w-[1250px] h-screen hidden xl:inline`}
+                style={{
+                  backgroundImage: `url(${t("games.newArtius.tailored")})`,
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                }}
               />
 
               {/* Mobile */}
               <div
                 data-aos="fade-up"
                 className={`mt-10 mb-10 w-full max-w-[600px] h-screen xl:hidden`}
-                style={{ backgroundImage: `url(${t("games.newArtius.tailoredMobile")})`, backgroundSize: "contain", backgroundPosition: "center", backgroundRepeat: "no-repeat"}}
+                style={{
+                  backgroundImage: `url(${t(
+                    "games.newArtius.tailoredMobile"
+                  )})`,
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                }}
               />
             </div>
 
@@ -180,8 +207,10 @@ const NewArtius = () => {
               <Gallery picSize="325px" slides={slides} />
             </div>
 
+            
+
             {/* Final */}
-            <div className="mt-30 p-5 xl:p-0 flex flex-col items-center justify-center">
+            <div className="mt-20 p-5 xl:p-0 flex flex-col items-center justify-center">
               <img
                 data-aos="fade-up"
                 className="w-full max-w-[1250px] h-fit"
@@ -205,3 +234,4 @@ const NewArtius = () => {
 };
 
 export default NewArtius;
+

src/pages/Artius.tsx renamed to src/pages/OldArtius.tsx

@@ -9,14 +9,14 @@ import pic6 from "../assets/img/artius/pic6.png";
 import logo from "../assets/img/artius/logo.png";
 import chars_cartoon from "../assets/img/artius/chars_cartoon.png";
 import chars_3d from "../assets/img/artius/chars_3d.png";
-import pivolo from "../assets/img/artius/PIVOLO.png";
+import pivolo from "../assets/img/artius/pivolo.png";
 
 // Modules
 import ActualPage from "../components/global/ActualPage";
 import Gallery from "../components/global/Gallery";
 import { useTranslation } from "react-i18next";
 
-const Artius = () => {
+const OldArtius = () => {
   const slides = [pic1, pic2, pic3];
   const slides2 = [pic4, pic6, pic5];
 
@@ -84,4 +84,4 @@ const Artius = () => {
   );
 };
 
-export default Artius;
+export default OldArtius;