Frontend/onboarding page

frontend/package.json

@@ -17,6 +17,7 @@
     "axios": "^1.6.0",
     "crypto-browserify": "^3.12.0",
     "eslint": "^8.48.0",
+    "framer-motion": "^10.16.4",
     "json5": "^2.2.1",
     "konva": "^9.2.0",
     "react": "^18.1.0",

frontend/src/assets/icons/index.ts

@@ -1,6 +1,7 @@
 import { ReactComponent as ErrorIcon } from "./error.svg";
 import { ReactComponent as SelectArrowIcon } from "./select-arrow.svg";
 import { ReactComponent as ArrowUpRightIcon } from "./arrow-up-right.svg";
+import { ReactComponent as ArrowUpIcon } from "./arrow-up.svg";
 import { ReactComponent as MenuIcon } from "./menu.svg";
 import { ReactComponent as CloseIcon } from "./close.svg";
 import { ReactComponent as ExpandIcon } from "./expand.svg";
@@ -46,6 +47,7 @@ import { ReactComponent as StoreIcon } from "./store.svg";
 
 export {
   StoreIcon,
+  ArrowUpIcon,
   ISTIcon,
   KeplerIcon,
   DiagonalIcon,

frontend/src/assets/text/general.ts

@@ -26,15 +26,15 @@ export const general = {
   toolTipTitle: "tool tip title",
   toolTipInfo: "maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
   thisFieldIsRequired: "this field is required",
-  mintNew: `mint new (IST)`,
+  mintNew: "mint new (IST)",
   theMinimiumAmountIs: "the minimum amount is IST 1",
   moreInfo: "more info",
   thereAreNoAssetsAvailable: "there are no assets available",
   logo: "KREAd",
   aCharcterBuilderApp:
     "KREAd is a character builder dApp, where all the characters and their items are dynamic NFTs. You have the freedom to build your character and the ownership of all the equipment attached to it. So feel free to sell them, trade them, or even burn them!",
   sagesBy: "SAGES by KREAd",
-  sagesIsTheFirst: "SAGES is the first collection\nlaunched on the KREAd dApp.\nStart collecting SAGES NFTs to\nshape your own saga.",
+  sagesIsTheFirst: "SAGES is the first collection launched on the KREAd dApp. Start collecting SAGES NFTs to shape your own saga.",
   explore: "explore",
   connectWallet: "connect Keplr Wallet",
   activateWallet: "activate Wallet",
@@ -48,7 +48,7 @@ export const general = {
   kryha: "Kryha",
   contactUs: "contact us",
   questionsBug: "questions, bug reports, \nfeedback... ? We are here for it all.",
-  sendEmailTo: "send an email to",
+  sendEmailTo: "send an email to ",
   contactEmail: "[email protected]",
   followUs: "Follow us",
   discord: "Discord",

frontend/src/components/atoms/image.ts

@@ -1,5 +1,4 @@
 import styled from "@emotion/styled";
-import { EXTRA_LARGE_SCREEN_SIZE, LARGE_SCREEN_SIZE, MEDIUM_SCREEN_SIZE, SMALL_SCREEN_SIZE } from "../../constants";
 
 export interface ImageProps {
   src?: string;
@@ -22,28 +21,15 @@ export const Img = styled.img<ImageProps>`
 `;
 
 export interface CharacterImageProps {
-  width: number;
-  height: number;
   zIndex?: number;
   src?: string;
 }
 
 export const CharacterImgs = styled.img<CharacterImageProps>`
-  ${({ height }): string => `height: ${height}px;`};
-  ${({ width }): string => {
-    if (width <= SMALL_SCREEN_SIZE) {
-      return "width: 600px;";
-    }
-    if (width <= MEDIUM_SCREEN_SIZE && width >= SMALL_SCREEN_SIZE) {
-      return "width: 742px; ";
-    }
-    if (width <= LARGE_SCREEN_SIZE && width >= MEDIUM_SCREEN_SIZE) {
-      return "width: 764px; ";
-    }
-    if (width >= EXTRA_LARGE_SCREEN_SIZE && width >= LARGE_SCREEN_SIZE) {
-      return "width: 1018px; ";
-    } else {
-      return "width: 742px; ";
-    }
-  }};
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
 `;

frontend/src/components/footer/styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { NavLink } from "react-router-dom";
-import { color } from "../../design";
+import { breakpoints, color } from "../../design";
 import { ButtonText } from "../atoms";
 
 interface FooterProps {
@@ -9,14 +9,17 @@ interface FooterProps {
 
 export const FooterWrapper = styled.div<FooterProps>`
   display: flex;
+  position: relative;
   flex-direction: row;
-  justify-content: space-between;
-  margin-left: 16px;
-  margin-top: 16px;
-  align-items: flex-start;
-  width: 100%;
+  justify-content: flex-end;
+  align-items: center;
   z-index: 1000;
-  border-radius: 100px;
+  flex-grow: 1;
+
+  @media (max-width: ${breakpoints.tablet}) {
+    align-items: center;
+    justify-content: center;
+  }
 `;
 
 export const FooterContainer = styled.div`

frontend/src/components/main-container/styles.ts

@@ -6,10 +6,9 @@ interface MainProps {
 
 export const MainWrap = styled.div<MainProps>`
   display: flex;
-  width: 100%;
+  width: 100vw;
   height: 100vh;
   flex-direction: column;
   overflow: hidden;
   position: relative;
-  // ${({ height }): string => `height: ${height}px;`};
 `;

frontend/src/components/onboarding-character/onboarding-character.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from "react";
 
-import { CharacterContainer, CharacterSwitchIcon, CharacterWrapper, FifthIcon, FirstIcon, FourthIcon, ThirdIcon } from "./styles";
+import { CharacterContainer, CharacterSwitchIcon, FifthIcon, FirstIcon, FourthIcon, ThirdIcon } from "./styles";
 import { useViewport } from "../../hooks";
 import {
   ArmaCitizen,
@@ -27,11 +27,7 @@ const perk1Images = [ArmaPerk_I6, ArmaPerk_I7, Empty];
 const maskImages = [Mask_Mount_3, Mask_Elephia_24, Mask_Elephia_32];
 const garmentImages = [Legendary_Garment_Arma_7, Rare_Garment_Arma_2, Uncommon_Garment_Arma_1];
 
-interface Props {
-  size?: "mini" | "medium" | "half" | "normal" | "large" | "extraLarge";
-  isZoomed?: boolean;
-}
-export const OnboardingCharacter: FC<Props> = ({ size, isZoomed }) => {
+export const OnboardingCharacter: FC = () => {
   const { width, height } = useViewport();
   const [currentIndex, setCurrentIndex] = useState(0);
 
@@ -44,32 +40,12 @@ export const OnboardingCharacter: FC<Props> = ({ size, isZoomed }) => {
   }, []);
 
   return (
-    <CharacterWrapper isZoomed={isZoomed} width={width} height={height}>
-      <CharacterContainer width={width} height={height} size={size} isZoomed isClothing={true}>
-        <CharacterSwitchIcon width={width} height={height} src={characterImages[currentIndex] || ArmaCitizen} />
-        <FourthIcon
-          src={perk1Images[currentIndex] || Empty}
-          alt={text.character.perk1}
-          width={width}
-          height={height}
-          zIndex={zIndex.perk1}
-        />
-        <ThirdIcon
-          src={headPieceImages[currentIndex] || Empty}
-          alt={text.character.headPiece}
-          width={width}
-          height={height}
-          zIndex={zIndex.headPiece}
-        />
-        <FifthIcon src={maskImages[currentIndex] || Empty} alt={text.character.mask} width={width} height={height} zIndex={zIndex.mask} />
-        <FirstIcon
-          src={garmentImages[currentIndex] || Empty}
-          alt={text.character.garment}
-          width={width}
-          height={height}
-          zIndex={zIndex.garment}
-        />
-      </CharacterContainer>
-    </CharacterWrapper>
+    <CharacterContainer>
+      <CharacterSwitchIcon src={characterImages[currentIndex] || ArmaCitizen} />
+      <FourthIcon src={perk1Images[currentIndex] || Empty} alt={text.character.perk1} width={width} height={height} zIndex={zIndex.perk1} />
+      <ThirdIcon src={headPieceImages[currentIndex] || Empty} alt={text.character.headPiece} zIndex={zIndex.headPiece} />
+      <FifthIcon src={maskImages[currentIndex] || Empty} alt={text.character.mask} width={width} height={height} zIndex={zIndex.mask} />
+      <FirstIcon src={garmentImages[currentIndex] || Empty} alt={text.character.garment} zIndex={zIndex.garment} />
+    </CharacterContainer>
   );
 };

frontend/src/components/onboarding-character/styles.ts

@@ -1,170 +1,25 @@
 import styled from "@emotion/styled";
-
-import { margins } from "../../design";
-import { CharacterImgs, SecondaryButton, sequentialFadeIn, zoomClothing, zoomIn } from "../atoms";
+import { CharacterImgs, sequentialFadeIn } from "../atoms";
 import { zIndex as zIndexProps } from "../../design/spacing";
-import { EXTRA_LARGE_SCREEN_SIZE, LARGE_SCREEN_SIZE, MEDIUM_SCREEN_SIZE, SMALL_SCREEN_SIZE } from "../../constants";
-import { css } from "@emotion/react";
-
-interface ImageProps {
-  width: number;
-  height: number;
-  zIndex?: number;
-  isZoomed?: boolean;
-  size?: "mini" | "medium" | "half" | "normal" | "large" | "extraLarge";
-  isClothing?: boolean;
-}
+import { breakpoints } from "../../design";
 
-interface ViewProps {
-  width: number;
-}
-
-export const ExpandButton = styled(SecondaryButton)<ViewProps>`
+export const CharacterContainer = styled.div`
   position: absolute;
-  z-index: 300;
-  ${({ width }): string => {
-    if (width <= SMALL_SCREEN_SIZE) {
-      return "left: 45%;";
-    }
-    if (width <= MEDIUM_SCREEN_SIZE && width >= SMALL_SCREEN_SIZE) {
-      return "left: 48%;";
-    }
-    if (width <= LARGE_SCREEN_SIZE && width >= MEDIUM_SCREEN_SIZE) {
-      return "left: 46%;";
-    }
-    if (width >= EXTRA_LARGE_SCREEN_SIZE && width >= LARGE_SCREEN_SIZE) {
-      return "left: 47%;";
-    } else {
-      return "left: 48%;";
-    }
-  }};
-  bottom: ${margins.big};
-  padding: 8px 16px;
-  > svg {
-    margin-left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+  @media (max-width: ${breakpoints.tablet}) {
+    opacity: 0.5;
   }
 `;
 
-export const CharacterIcon = styled(CharacterImgs)`
-  position: absolute;
-  top: 0;
-  ${({ zIndex }): string => `z-index: ${zIndex || zIndexProps.character};`};
-`;
-
-export const CharacterWrapper = styled.div<ImageProps>`
-  position: absolute;
-  right: 0;
-  top: 0;
-  margin: 0;
-  pointer-events: none;
-  ${({ isZoomed }) =>
-    isZoomed
-      ? css`
-          right: -45%;
-        `
-      : css`
-          right: 0;
-        `};
-`;
-
-export const CharacterContainer = styled.div<ImageProps>`
-  ${({ size, width, height }): string => {
-    if (size === "mini") {
-      if (width <= SMALL_SCREEN_SIZE) {
-        return `zoom: 0.18;
-        -moz-transform: scale(0.18);
-        -moz-transform-origin: 0 0;
-        `;
-      }
-      if (width >= EXTRA_LARGE_SCREEN_SIZE && width >= LARGE_SCREEN_SIZE) {
-        return `zoom: 0.055;
-        -moz-transform: scale(0.055);
-        -moz-transform-origin: 0 0;
-        `;
-      }
-      return `zoom:0.075;
-      -moz-transform: scale(0.1);
-      -moz-transform-origin: 0 0;
-      `;
-    } else if (size === "medium") {
-      if (width <= SMALL_SCREEN_SIZE) {
-        return `zoom: 0.36;
-        -moz-transform: scale(0.36);
-        -moz-transform-origin: 0 0;
-        `;
-      }
-      if (width <= MEDIUM_SCREEN_SIZE && width >= SMALL_SCREEN_SIZE) {
-        return `zoom: 0.304;
-        -moz-transform: scale(0.304);
-        -moz-transform-origin: 0 0;
-        `;
-      }
-      if (width <= LARGE_SCREEN_SIZE && width >= MEDIUM_SCREEN_SIZE) {
-        return `zoom: 0.295;
-        -moz-transform: scale(0.295);
-        -moz-transform-origin: 0 0;
-        `;
-      }
-      if (width >= EXTRA_LARGE_SCREEN_SIZE && width >= LARGE_SCREEN_SIZE) {
-        return `zoom: 0.222;
-        -moz-transform: scale(0.222);
-        -moz-transform-origin: 0 0;
-        `;
-      } else {
-        return `zoom: 0.304;
-        -moz-transform: scale(0.304);
-        -moz-transform-origin: 0 0;
-        `;
-      }
-    } else if (size === "half") {
-      return `zoom: 0.5;
-      -moz-transform: scale(0.5);
-      -moz-transform-origin: 0 0;
-      `;
-    } else if (size === "normal") {
-      return `width: ${width * 0.4}px; height: ${height}px;`;
-    } else if (size === "large") {
-      return `zoom: 2.5;
-      -moz-transform: scale(2.5);
-      -moz-transform-origin: 0 0;
-       transform: translateY(-40vh);
-
-      `;
-    } else if (size === "extraLarge") {
-      return `
-      zoom: 2.5;
-      -moz-transform: scale(2.5);
-      -moz-transform-origin: 0 0;
-
-      `;
-    } else {
-      return `width: ${width * 0.4}px; height: ${height}px;`;
-    }
-  }};
-  ${({ size, isClothing }) =>
-    size === "extraLarge" && !isClothing
-      ? css`
-          animation: ${zoomIn} 5s ease-out 1 forwards;
-        `
-      : css``};
-  ${({ size, isClothing }) =>
-    size === "extraLarge" && isClothing
-      ? css`
-          animation: ${zoomClothing} 5s ease-out 1 forwards;
-        `
-      : css``};
-`;
-
 export const CharacterSwitchIcon = styled(CharacterImgs)`
   opacity: 0;
   animation: ${sequentialFadeIn} 5s ease-in-out;
   animation-iteration-count: infinite;
   animation-delay: 1.5s;
 `;
 export const FirstIcon = styled(CharacterImgs)`
-  position: absolute;
-  top: 0;
-  left: 0;
   ${({ zIndex }): string => `z-index: ${zIndex || zIndexProps.mid};`};
   opacity: 0;
   animation: ${sequentialFadeIn} 5s ease-in-out;

frontend/src/design/sizes.ts

@@ -4,4 +4,4 @@ export const breakpoints = {
   desktop: "1024px",
   desktopLarge: "1440px",
   desktopWide: "1920px",
-};
+} as const;