From a84261b000ac53fb08510901d929b4d67c28b21b Mon Sep 17 00:00:00 2001
From: CARLOS TRIGO <carlos@kryha.io>
Date: Thu, 7 Dec 2023 14:10:26 +0100
Subject: [PATCH 01/17] adjust routes based on isMobile hook

---
 .../base-route-mobile/base-route-mobile.tsx   |  76 +++++
 .../src/components/base-route-mobile/index.ts |   1 +
 .../components/base-route-mobile/styles.ts    |  78 +++++
 frontend/src/components/index.ts              |   1 +
 frontend/src/navigation/route-names.ts        |   4 +
 frontend/src/navigation/routes.tsx            |  38 ++-
 .../create-character-mobile/confirmation.tsx  |  52 +++
 .../create-character-mobile.tsx               | 125 +++++++
 .../pages/create-character-mobile/index.ts    |   1 +
 .../create-character-mobile/information.tsx   | 115 +++++++
 .../pages/create-character-mobile/payment.tsx |  91 ++++++
 .../pages/create-character-mobile/styles.ts   | 305 ++++++++++++++++++
 frontend/src/pages/index.ts                   |   3 +
 frontend/src/pages/landing-mobile/index.ts    |   1 +
 .../pages/landing-mobile/landing-mobile.tsx   | 222 +++++++++++++
 frontend/src/pages/landing-mobile/styles.ts   | 104 ++++++
 16 files changed, 1204 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/base-route-mobile/base-route-mobile.tsx
 create mode 100644 frontend/src/components/base-route-mobile/index.ts
 create mode 100644 frontend/src/components/base-route-mobile/styles.ts
 create mode 100644 frontend/src/pages/create-character-mobile/confirmation.tsx
 create mode 100644 frontend/src/pages/create-character-mobile/create-character-mobile.tsx
 create mode 100644 frontend/src/pages/create-character-mobile/index.ts
 create mode 100644 frontend/src/pages/create-character-mobile/information.tsx
 create mode 100644 frontend/src/pages/create-character-mobile/payment.tsx
 create mode 100644 frontend/src/pages/create-character-mobile/styles.ts
 create mode 100644 frontend/src/pages/landing-mobile/index.ts
 create mode 100644 frontend/src/pages/landing-mobile/landing-mobile.tsx
 create mode 100644 frontend/src/pages/landing-mobile/styles.ts

diff --git a/frontend/src/components/base-route-mobile/base-route-mobile.tsx b/frontend/src/components/base-route-mobile/base-route-mobile.tsx
new file mode 100644
index 000000000..8e9cd6fb6
--- /dev/null
+++ b/frontend/src/components/base-route-mobile/base-route-mobile.tsx
@@ -0,0 +1,76 @@
+import React, { FC, useMemo } from "react";
+
+import { text } from "../../assets";
+import { routes } from "../../navigation";
+import { Footer } from "../footer";
+import { NavigationSection, NavigationTab } from "../navigation-tab";
+import { Box, ChildrenContainer, FooterContainer, RightBox, TopbarContainer } from "./styles";
+import { useCharacterBuilder } from "../../context/character-builder-context";
+import { MAIN_MODE, Section } from "../../constants";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { SwitchSelector } from "../switch-selector";
+import { KreadContainer } from "../../pages/shop/styles";
+import { KreadIcon } from "../logo/styles";
+import { ButtonText, PrimaryButton } from "../atoms";
+import { color } from "../../design";
+import { useKadoWidget } from "../../context/filter-context";
+import styled from "@emotion/styled";
+import { BuyCryptoButton } from "../base-route/base-route";
+
+interface BaseRouteProps {
+  sideNavigation: React.ReactNode;
+  children?: React.ReactNode;
+  onboarding?: boolean;
+  isLanding?: boolean;
+  isShop?: boolean;
+}
+
+export const BaseRouteMobile: FC<BaseRouteProps> = ({ children, sideNavigation, onboarding = false, isLanding = false, isShop = false }) => {
+  const isOnboarding = onboarding ? routes.onboarding : routes.character;
+  const { interactionMode } = useCharacterBuilder();
+
+  const { pathname } = useLocation();
+  const { section } = useParams<{ section: Section }>();
+  const navigate = useNavigate();
+  const home = () => {
+    navigate(routes.character);
+  };
+
+  const pageSelector = useMemo(
+    () => (
+      <SwitchSelector
+        buttonOneText={text.character.items}
+        buttonTwoText={text.character.characters}
+        selectedSection={section || "items"}
+        path={pathname}
+      />
+    ),
+    [section, pathname],
+  );
+
+  return (
+    <>
+      {interactionMode === MAIN_MODE && (
+        <TopbarContainer isLanding={isLanding}>
+          <Box>
+            <NavigationSection route={isOnboarding}>
+              <NavigationTab title={text.navigation.character} route={isOnboarding} />
+            </NavigationSection>
+          </Box>
+          <KreadContainer onClick={home}>
+            <KreadIcon />
+          </KreadContainer>
+          <RightBox>
+            {isShop && <BuyCryptoButton />}
+            {!isLanding && <>{pageSelector}</>}
+            {sideNavigation}
+          </RightBox>
+        </TopbarContainer>
+      )}
+      <ChildrenContainer isLanding={isLanding}>{children}</ChildrenContainer>
+      <FooterContainer isLanding={isLanding}>
+        <Footer />
+      </FooterContainer>
+    </>
+  );
+};
diff --git a/frontend/src/components/base-route-mobile/index.ts b/frontend/src/components/base-route-mobile/index.ts
new file mode 100644
index 000000000..ca54df252
--- /dev/null
+++ b/frontend/src/components/base-route-mobile/index.ts
@@ -0,0 +1 @@
+export * from "./base-route-mobile";
diff --git a/frontend/src/components/base-route-mobile/styles.ts b/frontend/src/components/base-route-mobile/styles.ts
new file mode 100644
index 000000000..2068af28e
--- /dev/null
+++ b/frontend/src/components/base-route-mobile/styles.ts
@@ -0,0 +1,78 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { breakpoints, color, margins, zIndex } from "../../design";
+
+interface AnimationProps {
+  isLanding: boolean;
+}
+
+export const NavBarDivider = styled.div`
+  border: 0.5px solid ${color.grey};
+  transform: rotate(90deg);
+  width: 41px;
+`;
+
+export const TopbarContainer = styled.header<AnimationProps>`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
+  z-index: 100;
+  top: 0;
+  margin-left: ${margins.medium};
+  margin-right: ${margins.medium};
+  padding-top: ${margins.medium};
+  padding-bottom: ${margins.medium};
+  background: transparent;
+
+  @media screen and (max-width: ${breakpoints.tablet}) {
+    padding: ${margins.mini};
+  }
+`;
+
+export const Box = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+  z-index: 1;
+  align-items: center;
+`;
+
+export const RightBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+  z-index: 1;
+  align-items: center;
+  gap: 12px;
+`;
+
+export const ChildrenContainer = styled.div<AnimationProps>`
+  display: flex;
+  flex: 1;
+  ${({ isLanding }) =>
+    isLanding === true
+      ? css`
+          margin-left: 0;
+          margin-right: 0;
+        `
+      : css`
+          margin-left: ${margins.medium};
+          margin-right: ${margins.medium};
+        `};
+  @media screen and (max-width: ${breakpoints.tablet}) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+`;
+
+export const FooterContainer = styled.div<AnimationProps>`
+  display: flex;
+  flex-direction: row;
+  bottom: 0;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  background: transparent;
+  z-index: ${zIndex.overCharacter};
+`;
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 08a89d126..43182a9c3 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -9,6 +9,7 @@ export * from "./switch-selector";
 export * from "./navigation-tab";
 export * from "./price-in-ist";
 export * from "./base-route";
+export * from "./base-route-mobile";
 export * from "./equipped-item-card";
 export * from "./content-loader";
 export * from "./base-character";
diff --git a/frontend/src/navigation/route-names.ts b/frontend/src/navigation/route-names.ts
index bc4a47916..a547482b6 100644
--- a/frontend/src/navigation/route-names.ts
+++ b/frontend/src/navigation/route-names.ts
@@ -3,7 +3,11 @@ export const routes = {
   connectWallet: "/connect-wallet",
   character: "/character",
   shop: "/shop",
+  itemShop: "/shop/items",
+  characterShop: "/shop/characters",
   inventory: "/inventory",
+  inventoryItems: "/inventory/items",
+  inventoryCharacters: "/inventory/characters",
   items: "/items",
   createCharacter: "/create-character",
   buyItem: "/buy-item",
diff --git a/frontend/src/navigation/routes.tsx b/frontend/src/navigation/routes.tsx
index 57686291b..8bc7178a2 100644
--- a/frontend/src/navigation/routes.tsx
+++ b/frontend/src/navigation/routes.tsx
@@ -3,14 +3,13 @@ import { ErrorBoundary } from "react-error-boundary";
 import { Route, Routes, useNavigate } from "react-router-dom";
 
 import { routes } from "./route-names";
-import { CharacterBuy, CharacterSell, CreateCharacter, Inventory, ItemBuy, ItemSell, Landing, Onboarding, Privacy, Shop } from "../pages";
+import { CharacterBuy, CharacterSell, ConnectWallet, CreateCharacter, CreateCharacterMobile, Inventory, ItemBuy, ItemSell, Landing, LandingMobile, Onboarding, Privacy, Shop } from "../pages";
 import { ErrorFallback, ErrorView, LoadingPage, MainContainer } from "../components";
 import { AgoricStateProvider, useAgoricContext } from "../context/agoric";
 import { UseWithContext } from "../context/wrapper";
 import { MobileNotAvailable } from "../pages/mobile-not-available";
 import { useIsMobile } from "../hooks";
 import { breakpoints } from "../design";
-import { ConnectWallet } from "../pages/connect-wallet";
 
 export const InternalAppWrapper = () => {
   return (
@@ -29,19 +28,31 @@ export const InternalAppRoutes: FC = () => {
 
   if (service.isLoading) return <LoadingPage spinner={false} />;
 
+  const { onboarding, connectWallet, character, createCharacter, ...desktopOnlyPaths } = routes;
+
+  const desktopRoutes = <>
+    <Route path={routes.connectWallet} element={<ConnectWallet />} />
+    <Route path={routes.character} element={<Landing />} />
+    <Route path={routes.createCharacter} element={<CreateCharacter />} />
+    <Route path={`${routes.shop}/:section`} element={<Shop />} />
+    <Route path={`${routes.inventory}/:section`} element={<Inventory />} />
+    <Route path={`${routes.buyItem}/:id`} element={<ItemBuy />} />
+    <Route path={`${routes.buyCharacter}/:id`} element={<CharacterBuy />} />
+    <Route path={`${routes.sellItem}/:category/:name`} element={<ItemSell />} />
+    <Route path={`${routes.sellCharacter}/:id`} element={<CharacterSell />} />
+    <Route path="*" element={<ErrorView />} />
+  </>
+  const mobileRoutes = <>
+    {Object.values(desktopOnlyPaths).map((path, index) => <Route path={path} element={<MobileNotAvailable />} key={index} />)}
+    <Route path={routes.connectWallet} element={<ConnectWallet />} />
+    <Route path={routes.character} element={<LandingMobile />} />
+    <Route path={routes.createCharacter} element={<CreateCharacterMobile />} />
+    <Route path="*" element={<ErrorView />} />
+  </>
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback} onError={() => navigate(routes.character)}>
       <Routes>
-        <Route path={routes.connectWallet} element={<ConnectWallet />} />
-        <Route path={routes.character} element={<Landing />} />
-        <Route path={routes.createCharacter} element={<CreateCharacter />} />
-        <Route path={`${routes.shop}/:section`} element={isMobile ? <MobileNotAvailable /> : <Shop />} />
-        <Route path={`${routes.inventory}/:section`} element={isMobile ? <MobileNotAvailable /> : <Inventory />} />
-        <Route path={`${routes.buyItem}/:id`} element={<ItemBuy />} />
-        <Route path={`${routes.buyCharacter}/:id`} element={<CharacterBuy />} />
-        <Route path={`${routes.sellItem}/:category/:name`} element={<ItemSell />} />
-        <Route path={`${routes.sellCharacter}/:id`} element={<CharacterSell />} />
-        <Route path="*" element={<ErrorView />} />
+       { isMobile ? mobileRoutes : desktopRoutes }
       </Routes>
     </ErrorBoundary>
   );
@@ -49,12 +60,13 @@ export const InternalAppRoutes: FC = () => {
 
 export const ExternalAppRoutes: FC = () => {
   const navigate = useNavigate();
+  const isMobile = useIsMobile(breakpoints.tablet);
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback} onError={() => navigate(routes.character)}>
       <MainContainer>
         <Routes>
-          <Route path={routes.root} element={<Onboarding />} />
+          <Route path={routes.root} element={isMobile ? <Onboarding /> : <Onboarding />} />
           <Route path={routes.privacy} element={<Privacy />} />
           <Route path="*" element={<InternalAppWrapper />} />
         </Routes>
diff --git a/frontend/src/pages/create-character-mobile/confirmation.tsx b/frontend/src/pages/create-character-mobile/confirmation.tsx
new file mode 100644
index 000000000..a84e37c72
--- /dev/null
+++ b/frontend/src/pages/create-character-mobile/confirmation.tsx
@@ -0,0 +1,52 @@
+import { FC } from "react";
+import { text } from "../../assets";
+import { ButtonText, ErrorView, MenuItemName, PrimaryButton, TitleText } from "../../components";
+import { color } from "../../design";
+import { Character } from "../../interfaces";
+import { getDatefromEpoch } from "../../util";
+import { ArrowUp, ButtonContainer, ContentWrapper, InfoContainer, Tick, TickContainer } from "./styles";
+import { useUserStateDispatch } from "../../context/user";
+import { useNavigate } from "react-router-dom";
+import { routes } from "../../navigation";
+
+interface ConfirmationProps {
+  character?: Character;
+}
+
+export const Confirmation: FC<ConfirmationProps> = ({ character }) => {
+  const userStateDispatch = useUserStateDispatch();
+  const navigate = useNavigate();
+
+  if (!character) {
+    console.error("No character found");
+    return <ErrorView />;
+  }
+
+  const handleConfirm = () => {
+    userStateDispatch({ type: "SET_SELECTED", payload: character.name });
+    navigate(routes.character);
+  };
+
+  return (
+    <ContentWrapper>
+      <TickContainer>
+        <Tick />
+      </TickContainer>
+      <TitleText>{text.mint.characterSuccessfullyMinted}</TitleText>
+      <InfoContainer>
+        <ButtonText customColor={color.darkGrey}>{text.mint.characterTitle}</ButtonText>
+        <MenuItemName>{character.title}</MenuItemName>
+        <ButtonText customColor={color.darkGrey}>{text.mint.characterName}</ButtonText>
+        <MenuItemName preserveCase>{character.name}</MenuItemName>
+        <ButtonText customColor={color.darkGrey}>{text.mint.creationDate}</ButtonText>
+        <MenuItemName>{getDatefromEpoch(Date.now())}</MenuItemName>
+      </InfoContainer>
+      <ButtonContainer>
+        <PrimaryButton onClick={handleConfirm}>
+          <ButtonText customColor={color.white}>{text.mint.goToCharacter}</ButtonText>
+          <ArrowUp />
+        </PrimaryButton>
+      </ButtonContainer>
+    </ContentWrapper>
+  );
+};
diff --git a/frontend/src/pages/create-character-mobile/create-character-mobile.tsx b/frontend/src/pages/create-character-mobile/create-character-mobile.tsx
new file mode 100644
index 000000000..10eaf10b6
--- /dev/null
+++ b/frontend/src/pages/create-character-mobile/create-character-mobile.tsx
@@ -0,0 +1,125 @@
+import React, { FC, useEffect, useMemo, useState } from "react";
+import { ElephiaCitizen, text } from "../../assets";
+import { ErrorView, FadeInOut, FormHeader, LoadingPage, NotificationDetail, Overlay } from "../../components";
+import { PageContainer } from "../../components/page-container";
+import { MINTING_COST, MINT_CHARACTER_FLOW_STEPS, WALLET_INTERACTION_STEP } from "../../constants";
+import { useIsMobile, useViewport } from "../../hooks";
+import { Character, CharacterCreation, MakeOfferCallback } from "../../interfaces";
+import { routes } from "../../navigation";
+import { useCreateCharacter } from "../../service";
+import { Confirmation } from "./confirmation";
+import { Information } from "./information";
+import { Payment } from "./payment";
+import { DefaultImage, FormCard } from "./styles";
+import { breakpoints } from "../../design";
+import { useUserState } from "../../context/user";
+import { useWalletState } from "../../context/wallet";
+import { NotificationWrapper } from "../../components/notification-detail/styles";
+
+export const CreateCharacterMobile: FC = () => {
+  const createCharacter = useCreateCharacter();
+  const { width, height } = useViewport();
+  const [currentStep, setCurrentStep] = useState<number>(0);
+  const [mintedCharacter, setMintedCharacter] = useState<Character>();
+  const [error, setError] = useState<string>();
+  const [showToast, setShowToast] = useState(false);
+  const [characterData, setCharacterData] = useState<{ name: string }>({
+    name: "",
+  });
+  const { characters, fetched } = useUserState();
+  const isLoadingCharacters = !fetched;
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isOfferAccepted, setIsOfferAccepted] = useState<boolean>(false);
+  const mobile = useIsMobile(breakpoints.desktop);
+  const { ist } = useWalletState();
+
+  const notEnoughIST = useMemo(() => {
+    if (ist < MINTING_COST || !ist) {
+      return true;
+    }
+    return false;
+  }, [ist]);
+
+  useEffect(() => {
+    if (characters.map((c: any) => c.nft.name).includes(characterData.name)) {
+      setIsOfferAccepted(true);
+      const [newCharacter] = characters.filter((c: any) => c.nft.name === characterData.name);
+      setMintedCharacter(newCharacter.nft);
+      setIsLoading(false);
+    }
+  }, [characters, characterData, notEnoughIST]);
+
+  const changeStep = async (step: number): Promise<void> => {
+    setCurrentStep(step);
+  };
+
+  const errorCallback = (error: string) => {
+    setError(error);
+    setShowToast(true);
+  };
+
+  const handleResult: MakeOfferCallback = {
+    error: errorCallback,
+    accepted: () => {
+      console.info("MintCharacter call settled");
+    }
+  };
+  
+  const sendOfferHandler = async (): Promise<void> => {
+    setIsLoading(true);
+    await createCharacter.mutateAsync({
+      name: characterData.name,
+      callback: handleResult,
+    });
+  };
+
+  const setData = async (data: CharacterCreation): Promise<void> => {
+    setCharacterData(data);
+    setCurrentStep(WALLET_INTERACTION_STEP);
+  };
+
+  const perStepDisplay = (): React.ReactNode => {
+    switch (currentStep) {
+      case 0:
+        return <Information setData={setData} disabled={createCharacter.isLoading} />;
+      case 1:
+        return <Payment sendOfferHandler={sendOfferHandler} submit={changeStep} isOfferAccepted={isOfferAccepted} isLoading={isLoading} />;
+      case 2:
+        return <Confirmation character={mintedCharacter} />;
+      default:
+        return <ErrorView />;
+    }
+  };
+
+  if (isLoadingCharacters) return <LoadingPage spinner={false} />;
+
+  return (
+    <PageContainer
+      sidebarContent={
+        <FormCard>
+          <FormHeader
+            currentStep={currentStep}
+            stepAmount={MINT_CHARACTER_FLOW_STEPS}
+            title={text.mint.mintNew}
+            link={routes.character}
+            isPaymentFlow
+          />
+          {perStepDisplay()}
+        </FormCard>
+      }
+    >
+      <FadeInOut show={showToast} exiting={!showToast}>
+        {showToast && <Overlay isOnTop={true} />}
+        <NotificationWrapper showNotification={showToast}>
+          <NotificationDetail
+            title={text.error.mint.title}
+            info={text.error.mint.invalidName}
+            closeToast={() => setShowToast(false)}
+            isError
+          />
+        </NotificationWrapper>
+      </FadeInOut>
+      {!mobile && <DefaultImage src={ElephiaCitizen} alt={text.character.defaultCharacter} height={height} width={width} />}
+    </PageContainer>
+  );
+};
diff --git a/frontend/src/pages/create-character-mobile/index.ts b/frontend/src/pages/create-character-mobile/index.ts
new file mode 100644
index 000000000..9f9991fc9
--- /dev/null
+++ b/frontend/src/pages/create-character-mobile/index.ts
@@ -0,0 +1 @@
+export * from "./create-character-mobile";
diff --git a/frontend/src/pages/create-character-mobile/information.tsx b/frontend/src/pages/create-character-mobile/information.tsx
new file mode 100644
index 000000000..ba6181290
--- /dev/null
+++ b/frontend/src/pages/create-character-mobile/information.tsx
@@ -0,0 +1,115 @@
+import { CharacterCreation } from "../../interfaces";
+import { FC, useEffect, useMemo } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import {
+  ArrowUp,
+  ButtonContainer,
+  ButtonWrapper,
+  ContentWrapper,
+  ErrorContainer,
+  FormContainer,
+  FormFields,
+  InputWrapper,
+  Tick,
+  Warning,
+} from "./styles";
+import { ButtonText, FormText, Input, Label, PrimaryButton } from "../../components";
+import { text } from "../../assets";
+import { MAX_CHARACTER_LENGTH, MINTING_COST } from "../../constants";
+import { ButtonInfo } from "../../components/button-info";
+import { color } from "../../design";
+import { useWalletState } from "../../context/wallet";
+
+interface InformationProps {
+  setData: (data: CharacterCreation) => void;
+  disabled: boolean;
+}
+
+export const Information: FC<InformationProps> = ({ setData, disabled }) => {
+  const { ist, characterNameList } = useWalletState();
+  const {
+    watch,
+    register,
+    handleSubmit,
+    formState: { errors, isValid, dirtyFields, },
+  } = useForm<CharacterCreation>({
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const watchNameInput = watch("name", "");
+  const notEnoughIST = useMemo(()=>{
+    if(ist < MINTING_COST || !ist) {
+      return true;
+    }
+    return false;
+  }, [ist]);
+  
+  const nameTaken = useMemo(()=>{
+    if(characterNameList.includes(watchNameInput)) {
+      return true;
+    }
+    return false;
+  }, [characterNameList, watchNameInput]);
+  
+  const onSubmit: SubmitHandler<CharacterCreation> = (data) => setData( { name: data.name } );
+
+  return (
+    <ContentWrapper>
+      <FormContainer onSubmit={handleSubmit(onSubmit)}>
+        <FormFields>
+          <Label>{text.mint.characterName}</Label>
+          <InputWrapper>
+            <Input type="text" {...register("name", 
+            { 
+              required: true,
+              maxLength: MAX_CHARACTER_LENGTH, 
+              pattern: /^[a-zA-Z0-9_-]*$/,              
+              })} />
+            {Boolean(!errors.name && dirtyFields.name) && <Tick />}
+            <ButtonInfo info={text.general.createACharacterInfo} infoPosition={"right"} />
+          </InputWrapper>
+          {errors.name && errors.name.type === "required" && (
+            <ErrorContainer>
+              <Warning />
+              <ButtonText>{text.general.thisFieldIsRequired}</ButtonText>
+            </ErrorContainer>
+          )}
+          {errors.name && errors.name.type === "maxLength" && (
+            <ErrorContainer>
+              <Warning />
+              <ButtonText>{text.general.maxCharacterLength}</ButtonText>
+            </ErrorContainer>
+          )}
+          {errors.name && errors.name.type === "pattern" && (
+            <ErrorContainer>
+              <Warning />
+              <ButtonText>{text.general.characterNamePatternError}</ButtonText>
+            </ErrorContainer>
+          )}
+          {notEnoughIST && (
+            <ErrorContainer>
+              <Warning />
+              <ButtonText customColor={color.red}>{text.error.mint.insufficientFunds(ist)}</ButtonText>
+            </ErrorContainer>
+          )}
+          {nameTaken && (
+            <ErrorContainer>
+              <Warning />
+              <ButtonText customColor={color.red}>{text.error.mint.nameTaken}</ButtonText>
+            </ErrorContainer>
+          )}
+        </FormFields>
+        <FormText>{text.mint.theCostsOfMinting}</FormText>
+        <ButtonWrapper>
+          <ButtonContainer>
+            <PrimaryButton type="submit" disabled={!isValid || disabled || notEnoughIST || nameTaken}>
+              <ButtonText customColor={color.white}>{text.mint.next}</ButtonText>
+              <ArrowUp />
+            </PrimaryButton>
+          </ButtonContainer>
+        </ButtonWrapper>
+      </FormContainer>
+    </ContentWrapper>
+  );
+};
diff --git a/frontend/src/pages/create-character-mobile/payment.tsx b/frontend/src/pages/create-character-mobile/payment.tsx
new file mode 100644
index 000000000..2b8a2686c
--- /dev/null
+++ b/frontend/src/pages/create-character-mobile/payment.tsx
@@ -0,0 +1,91 @@
+import { FC, useState } from "react";
+import {
+  ArrowUp,
+  ButtonContainer,
+  ButtonWrapper,
+  ContentWrapper,
+  Line,
+  NumberContainer,
+  PreviousButtonContainer,
+  PricingContainer,
+  Step,
+  StepContainer,
+  StepText,
+  StepWrapper,
+  Tick,
+} from "./styles";
+import { Badge, ButtonText, FormText, LoadingPage, PriceInIst, PrimaryButton, SecondaryButton } from "../../components";
+import { text } from "../../assets";
+import { CONFIRMATION_STEP, INFORMATION_STEP, MINTING_COST } from "../../constants";
+import { color } from "../../design";
+
+interface PaymentProps {
+  submit: (step: number) => void;
+  sendOfferHandler: () => Promise<void>;
+  isOfferAccepted: boolean;
+  isLoading: boolean;
+}
+
+export const Payment: FC<PaymentProps> = ({ submit, sendOfferHandler, isOfferAccepted, isLoading }) => {
+  const [sendOffer, setSendOffer] = useState(false);
+  const [disable, setDisable] = useState(false);
+  const sendOfferToWallet = async () => {
+    setDisable(true);
+    console.info("SENDING OFFER TO WALLET");
+    await sendOfferHandler();
+    setSendOffer(true);
+  };
+
+  return (
+    <ContentWrapper>
+      <FormText>{text.mint.theCostsOfMinting}</FormText>
+      <StepContainer>
+        <StepWrapper active={sendOffer}>
+          <PricingContainer>
+            <Step>
+              <NumberContainer active={true}>{sendOffer ? <Tick /> : <ButtonText>{text.mint.stepOne}</ButtonText>}</NumberContainer>
+              <StepText>{text.mint.sendOfferToWallet}</StepText>
+            </Step>
+            {!sendOffer && (
+              <>
+                <PriceInIst price={MINTING_COST} />
+                <PrimaryButton onClick={sendOfferToWallet} disabled={disable}>
+                  <ButtonText customColor={color.white}>{text.mint.sendOffer}</ButtonText>
+                </PrimaryButton>
+              </>
+            )}
+          </PricingContainer>
+        </StepWrapper>
+        <Line />
+        <StepWrapper active={!sendOffer}>
+          <Step>
+            <NumberContainer active={sendOffer}>
+              {isOfferAccepted ? <Tick /> : <ButtonText>{text.mint.stepTwo}</ButtonText>}
+            </NumberContainer>
+            <StepText>{text.mint.acceptOfferIn}</StepText>
+          </Step>
+          {!isOfferAccepted && sendOffer && (
+            <Badge>
+              <ButtonText customColor={color.darkGrey}>{text.mint.offerPending}</ButtonText>
+            </Badge>
+          )}
+        </StepWrapper>
+      </StepContainer>
+      <ButtonWrapper>
+        {!sendOffer && (
+          <PreviousButtonContainer onClick={() => submit(INFORMATION_STEP)}>
+            <SecondaryButton>
+              <ButtonText>{text.mint.previous}</ButtonText>
+            </SecondaryButton>
+          </PreviousButtonContainer>
+        )}
+        <ButtonContainer>
+          <PrimaryButton onClick={() => submit(CONFIRMATION_STEP)} disabled={!isOfferAccepted}>
+            <ButtonText customColor={color.white}>{text.mint.confirm}</ButtonText>
+            {isLoading ? <LoadingPage /> : <ArrowUp />}
+          </PrimaryButton>
+        </ButtonContainer>
+      </ButtonWrapper>
+    </ContentWrapper>
+  );
+};
diff --git a/frontend/src/pages/create-character-mobile/styles.ts b/frontend/src/pages/create-character-mobile/styles.ts
new file mode 100644
index 000000000..6eaf68135
--- /dev/null
+++ b/frontend/src/pages/create-character-mobile/styles.ts
@@ -0,0 +1,305 @@
+import { Badge, ButtonText, CharacterImgs, fadeUp, Input, MenuItemName, PrimaryButton } from "../../components";
+import styled from "@emotion/styled";
+import { ArrowUpRightIcon, ExclamationIcon, TickIcon, WarningIcon } from "../../assets";
+import { breakpoints, color, fontSize, margins } from "../../design";
+import { Spinner } from "../../components/content-loader/styles";
+
+interface ViewProps {
+  height: number;
+  width: number;
+}
+
+export const DefaultImage = styled(CharacterImgs)<ViewProps>``;
+
+export const Exclamation = styled(ExclamationIcon)`
+  margin-right: 20px;
+  margin-bottom: 10px;
+`;
+
+export const Tick = styled(TickIcon)`
+  position: relative;
+  right: 44px;
+  margin-right: 20px;
+  height: 10px;
+  width: 20px;
+`;
+
+interface ActiveProps {
+  active: boolean;
+}
+
+export const FormCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${margins.medium};
+  background: ${color.lightGrey};
+  border: 1px solid ${color.grey};
+  border-radius: ${margins.medium};
+  margin: auto;
+  width: 500px;
+  height: 90%;
+
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    margin: auto;
+    height: 100%;
+    border-radius: 0;
+  }
+
+  animation: ${fadeUp} 1.2s ease-out 0s forwards;
+  opacity: 0;
+  transform: translate3d(0, 1rem, 0);
+`;
+
+export const Warning = styled(WarningIcon)``;
+
+export const ErrorContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+  gap: 4px;
+`;
+
+export const FormContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+export const FormFields = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
+  margin-bottom: ${margins.big};
+  position: relative;
+  ${Input} {
+    width: 100%;
+    padding-right: 10px;
+    padding-bottom: 4px;
+  }
+  ${ButtonText} {
+    margin-top: ${margins.mini};
+  }
+  ${Warning} {
+    margin-top: ${margins.mini};
+  }
+`;
+
+export const ContentWrapper = styled.div`
+  margin-top: ${margins.big};
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+export const ArrowUp = styled(ArrowUpRightIcon)`
+  path {
+    stroke: ${color.white};
+  }
+`;
+
+export const ButtonContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  gap: ${margins.small};
+  align-self: flex-end;
+  justify-content: flex-end;
+  :hover {
+    ${ArrowUp} {
+      path {
+        stroke: ${color.black};
+      }
+    }
+  }
+  ${Spinner} {
+    width: 16px;
+    height: 16px;
+    border: 2px solid ${color.white};
+    border-top: 2px solid ${color.grey};
+    margin-left: 3px;
+  }
+`;
+
+export const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-top: 8px;
+`;
+
+export const StepContainer = styled.div`
+  margin-top: ${margins.big};
+`;
+
+export const StepText = styled(ButtonText)`
+  font-size: ${fontSize.subTitle};
+  line-height: 20.5px;
+`;
+
+export const StepWrapper = styled.div<ActiveProps>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${margins.mini};
+  justify-content: space-between;
+  padding: ${margins.small};
+  border: 1px solid ${color.darkGrey};
+  border-radius: 24px;
+  ${StepText} {
+    margin: 0 ${margins.small};
+  }
+  ${PrimaryButton} {
+    margin-left: ${margins.small};
+  }
+  ${Badge} {
+    background: transparent;
+  }
+  ${({ active }): string => {
+    return active === true
+      ? `
+      background: ${color.white};
+        `
+      : `
+      background: ${color.lightGrey};
+      `;
+  }};
+`;
+
+export const Line = styled.div`
+  width: 16px;
+  border: 0.5px solid ${color.darkGrey};
+  transform: rotate(90deg);
+  margin: ${margins.small} 20px ${margins.small} 39px;
+`;
+
+export const NumberContainer = styled.div<ActiveProps>`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: ${margins.nano};
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  ${({ active }): string => {
+    return active
+      ? `
+      background: ${color.black};
+      ${ButtonText} {
+        color: ${color.white};
+      }
+        `
+      : `
+      ${ButtonText} {
+        color: ${color.black};
+      }
+      border: 1px solid ${color.grey};
+      `;
+  }};
+  ${Tick} {
+    margin: 0;
+    position: relative;
+    right: 0;
+    path {
+      stroke: ${color.white};
+    }
+  }
+`;
+
+export const PreviousButtonContainer = styled.div`
+  :hover {
+    ${ArrowUp} {
+      path {
+        stroke: ${color.black};
+      }
+    }
+  }
+`;
+
+export const TickContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: ${margins.nano};
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  border: 1px solid ${color.black};
+  ${Tick} {
+    margin: 0;
+    right: 0;
+  }
+  margin-bottom: ${margins.small};
+`;
+
+export const InfoContainer = styled.div`
+  margin-top: ${margins.big};
+  ${MenuItemName} {
+    margin-top: ${margins.mini};
+    margin-bottom: ${margins.medium};
+  }
+`;
+
+export const GeneralInfo = styled.div<ActiveProps>`
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${margins.small};
+  width: 100%;
+  background: ${color.white};
+  border: 1px solid ${color.darkGrey};
+  border-radius: 24px;
+  ${StepText} {
+    margin: 0 ${margins.small};
+  }
+  ${PrimaryButton} {
+    margin-left: ${margins.small};
+  }
+  ${Badge} {
+    background: transparent;
+  }
+  ${({ active }): string => {
+    return active
+      ? `
+      background: ${color.white};
+        `
+      : `
+      background: ${color.lightGrey};
+      `;
+  }};
+`;
+
+export const PricingContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${margins.mini};
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 100%;
+  align-items: flex-end;
+  align-content: flex-end;
+`;
+
+export const Step = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const RedButtonText = styled(ButtonText)`
+  color: red;
+`
\ No newline at end of file
diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
index b76865bab..dadf1ae12 100644
--- a/frontend/src/pages/index.ts
+++ b/frontend/src/pages/index.ts
@@ -1,8 +1,11 @@
 export * from "./landing";
+export * from "./landing-mobile";
 export * from "./inventory";
 export * from "./shop";
 export * from "./create-character";
+export * from "./create-character-mobile";
 export * from "./buy";
 export * from "./sell";
 export * from "./onboarding";
 export * from "./content";
+export * from "./connect-wallet";
diff --git a/frontend/src/pages/landing-mobile/index.ts b/frontend/src/pages/landing-mobile/index.ts
new file mode 100644
index 000000000..861f2c298
--- /dev/null
+++ b/frontend/src/pages/landing-mobile/index.ts
@@ -0,0 +1 @@
+export * from "./landing-mobile";
diff --git a/frontend/src/pages/landing-mobile/landing-mobile.tsx b/frontend/src/pages/landing-mobile/landing-mobile.tsx
new file mode 100644
index 000000000..1ac3dc015
--- /dev/null
+++ b/frontend/src/pages/landing-mobile/landing-mobile.tsx
@@ -0,0 +1,222 @@
+import React, { FC, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { text } from "../../assets";
+import { CharacterTitle } from './styles'
+import {
+  BaseRouteMobile,
+  BoldLabel,
+  ButtonText,
+  ErrorView,
+  FadeInOut,
+  LevelBoldLabel,
+  LoadingPage,
+  NotificationDetail,
+  Overlay,
+  OverviewEmpty,
+  PageSubTitle,
+  SecondaryButton,
+} from "../../components";
+import { ButtonContainer, CharacterCardWrapper, DetailContainer, ItemCardWrapper } from "./styles";
+import { CharacterDetailSection, ItemDetailSection } from "../../containers/detail-section";
+import { useEquipItem, useGetItemInInventoryByNameAndCategory, useSelectedCharacter, useUnequipItem } from "../../service";
+import { routes } from "../../navigation";
+import { NotificationWrapper } from "../../components/notification-detail/styles";
+import { Layout } from "../../containers/canvas/character-canvas/styles";
+import { CharacterCanvas } from "../../containers/canvas/character-canvas/character-canvas";
+import { useViewport } from "../../hooks";
+import { useCharacterBuilder } from "../../context/character-builder-context";
+import { CategoryMode } from "../../containers/canvas/category-mode/category-mode";
+import { CATEGORY_MODE, CHARACTER_SELECT_MODE, ITEM_MODE, MAIN_MODE } from "../../constants";
+import { ItemsMode } from "../../containers/canvas/items-mode/items-mode";
+import { CharactersMode } from "../../containers/canvas/characters-mode/characters-mode";
+import { MainMode } from "../../containers/canvas/main-mode/main-mode";
+import { calculateCharacterLevels } from "../../util";
+import { AssetTag } from "../../components/asset-card/styles";
+import { color } from "../../design";
+import { ButtonInfoWrap } from "../../components/button-info/styles";
+
+export const LandingMobile: FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [selectedCharacter, isLoading] = useSelectedCharacter();
+  const [closeDetail, setCloseDetail] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+  const { width, height } = useViewport();
+  const {
+    selectedAsset,
+    selectedAssetCategory,
+    showDetails,
+    setShowDetails,
+    characterName,
+    showItemDetails,
+    setShowItemDetails,
+    interactionMode,
+    setInteractionMode,
+  } = useCharacterBuilder();
+
+  const [item] = useGetItemInInventoryByNameAndCategory(selectedAsset, selectedAssetCategory, characterName);
+
+  const equipItem = useEquipItem();
+  const unequipItem = useUnequipItem();
+
+  if (equipItem.isError || unequipItem.isError) return <ErrorView />;
+  const equipAsset = () => {
+    setShowToast(!showToast);
+    if (item) {
+      equipItem.mutate({ item, callback: {} });
+    }
+  };
+
+  const unequipAsset = () => {
+    setShowToast(!showToast);
+    if (item) {
+      unequipItem.mutate({ item, callback: {} });
+    }
+  };
+
+  const sell = (characterId: number) => {
+    navigate(`${routes.sellCharacter}/${characterId}`, { state: location });
+  };
+
+  const sellAsset = () => {
+    navigate(`${routes.sellItem}/${item?.category}/${item?.name}`, {
+      state: location,
+    });
+  };
+
+  const assetDetailActions = () => {
+    if (item?.equippedTo !== "") {
+      return { primary: { text: text.item.unequip, onClick: unequipAsset } };
+    } else {
+      return {
+        primary: { text: text.item.equip, onClick: equipAsset },
+        secondary: { text: text.item.sell, onClick: sellAsset },
+      };
+    }
+  };
+
+  const displayToast = () => {
+    setShowToast(true);
+  };
+
+  let level = 0;
+  if (selectedCharacter) {
+    const { totalLevel } = calculateCharacterLevels(selectedCharacter);
+    level = totalLevel;
+  }
+
+  return (
+    <BaseRouteMobile
+      isLanding
+      sideNavigation={
+        <>
+          {selectedCharacter ? (
+            <SecondaryButton onClick={() => setInteractionMode(CHARACTER_SELECT_MODE)}>
+              <ButtonText>{text.navigation.myCharacters}</ButtonText>
+            </SecondaryButton>
+          ) : (
+            <></>
+          )}
+        </>
+      }
+    >
+      {isLoading ? (
+        <LoadingPage spinner={false} />
+      ) : !selectedCharacter ? (
+        <OverviewEmpty
+          headingText={text.character.youDoNotHave}
+          descriptionText={text.character.youDoNotOwnACharacter}
+          buttonText={text.character.createANewCharacter}
+          redirectRoute={routes.createCharacter}
+        />
+      ) : (
+        <>
+          {/* character info */}
+          {interactionMode === MAIN_MODE ? (
+            <DetailContainer>
+              <CharacterTitle>{selectedCharacter?.nft.name}</CharacterTitle>
+              <PageSubTitle>{selectedCharacter?.nft.title}</PageSubTitle>
+              <ButtonContainer>
+                <ButtonInfoWrap onClick={() => setShowDetails(true)}>
+                  <SecondaryButton>{text.general.info}</SecondaryButton>
+                </ButtonInfoWrap>
+                <AssetTag>
+                  <BoldLabel customColor={color.black}>lvl. </BoldLabel>
+                  <LevelBoldLabel customColor={color.black}>{level}</LevelBoldLabel>
+                </AssetTag>
+              </ButtonContainer>
+            </DetailContainer>
+          ) : (
+            <DetailContainer>
+              <CharacterTitle>{selectedCharacter?.nft.name}</CharacterTitle>
+              <PageSubTitle>{selectedCharacter?.nft.title}</PageSubTitle>
+              <ButtonContainer>
+                <AssetTag>
+                  <BoldLabel customColor={color.black}>lvl. </BoldLabel>
+                  <LevelBoldLabel customColor={color.black}>{level}</LevelBoldLabel>
+                </AssetTag>
+              </ButtonContainer>
+            </DetailContainer>
+          )}
+
+          <ItemCardWrapper>
+            {showItemDetails && (
+              <ItemDetailSection
+                item={item}
+                actions={{
+                  onClose: () => {
+                    setShowItemDetails(false);
+                  },
+                  primary: assetDetailActions()?.primary,
+                  secondary: assetDetailActions()?.secondary,
+                }}
+              />
+            )}
+          </ItemCardWrapper>
+          <CharacterCardWrapper>
+            {interactionMode !== ITEM_MODE && (
+              <FadeInOut show={showDetails} exiting={closeDetail}>
+                <CharacterDetailSection
+                  character={selectedCharacter}
+                  actions={{
+                    secondary: {
+                      text: text.character.sell,
+                      onClick: () => sell(Number(selectedCharacter.nft.id)),
+                    },
+                    onClose: () => {
+                      setShowDetails(false);
+                      setCloseDetail(true);
+                    },
+                  }}
+                  showToast={displayToast}
+                />
+              </FadeInOut>
+            )}
+          </CharacterCardWrapper>
+
+          <FadeInOut show={showDetails} exiting={closeDetail}>
+            <Overlay />
+          </FadeInOut>
+          <FadeInOut show={showToast} exiting={!showToast}>
+            {showToast && <Overlay isOnTop={true} />}
+            <NotificationWrapper showNotification={showToast}>
+              <NotificationDetail
+                title={text.general.goToYourWallet}
+                info={text.general.yourActionIsPending}
+                closeToast={() => setShowToast(false)}
+                isError
+              />
+            </NotificationWrapper>
+          </FadeInOut>
+          <Layout width={width} height={height}>
+            <CharacterCanvas width={width} height={height} />
+            {interactionMode === CATEGORY_MODE && <CategoryMode />}
+            {interactionMode === ITEM_MODE && <ItemsMode />}
+            {interactionMode === CHARACTER_SELECT_MODE && <CharactersMode />}
+            {interactionMode === MAIN_MODE && <MainMode items={selectedCharacter.equippedItems} showItems={false} />}
+          </Layout>
+        </>
+      )}
+    </BaseRouteMobile>
+  );
+};
diff --git a/frontend/src/pages/landing-mobile/styles.ts b/frontend/src/pages/landing-mobile/styles.ts
new file mode 100644
index 000000000..7accb2bc6
--- /dev/null
+++ b/frontend/src/pages/landing-mobile/styles.ts
@@ -0,0 +1,104 @@
+import styled from "@emotion/styled";
+import { CloseIcon, DownArrowIcon } from "../../assets";
+import { disappear, fadeIn, SecondaryButton } from "../../components";
+import { CharacterWrapper } from "../../components/base-character/styles";
+import { color, fontWeight, margins } from "../../design";
+import { DetailSectionWrap } from "../../containers/detail-section/styles";
+
+interface ImageProps {
+  isZoomed?: boolean;
+}
+
+export const LandingContainer = styled.div<ImageProps>`
+  ${CharacterWrapper} {
+    animation: ${fadeIn} 1.5s;
+  }
+`;
+
+export const Menu = styled(DownArrowIcon)`
+  margin: 0 0 0 11px !important;
+  width: 12px;
+`;
+
+export const Close = styled(CloseIcon)`
+  margin: 0 0 0 11px !important;
+  width: 12px;
+`;
+
+export const BaseWrapper = styled.div``;
+
+export const DetailContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
+  z-index: 100;
+  gap: ${margins.nano};
+  margin-top: ${margins.medium};
+  margin-right: ${margins.medium};
+  margin-left: ${margins.medium};
+  animation: ${disappear}, ${fadeIn};
+  animation-duration: 0.8s, 1s;
+  animation-delay: 0s, 0.8s;
+  height: fit-content;
+
+  background: transparent;
+
+  ${SecondaryButton} {
+    background: ${color.white};
+  }
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+  margin-top: 16px;
+  gap: 12px;
+`;
+
+export const ItemCardWrapper = styled.div`
+  position: absolute;
+  z-index: 1000;
+  top: 24px;
+  right: 24px;
+  ${DetailSectionWrap} {
+    height: 95vh;
+    width: 500px;
+  }
+`;
+
+export const CharacterCardWrapper = styled.div`
+  position: absolute;
+  z-index: 1000;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+export const Tag = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: ${margins.nano} ${margins.mini};
+  gap: 10px;
+
+  position: absolute;
+  width: ${margins.small};
+  height: ${margins.small};
+  left: 27px;
+  top: -3px;
+
+  background: ${color.black};
+  border-radius: ${margins.medium};
+  z-index: 1000;
+`;
+
+export const CharacterTitle = styled.h1`
+  color: ${color.black};
+  font-weight: ${fontWeight.medium};
+  font-size: 32px;
+  line-height: 52px;
+`;

From 72e4b872018cdf111e18b9b0fc618dee57422441 Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Thu, 7 Dec 2023 14:52:21 +0100
Subject: [PATCH 02/17] wip

---
 .../src/components/main-container/styles.ts   |   2 +-
 frontend/src/navigation/routes.tsx            |   3 +-
 frontend/src/pages/onboarding-mobile/index.ts |   1 +
 .../onboarding-mobile/onboarding-mobile.tsx   | 163 +++++++++
 .../src/pages/onboarding-mobile/styles.ts     | 344 ++++++++++++++++++
 frontend/src/pages/onboarding/onboarding.tsx  |   9 -
 6 files changed, 511 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/pages/onboarding-mobile/index.ts
 create mode 100644 frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
 create mode 100644 frontend/src/pages/onboarding-mobile/styles.ts

diff --git a/frontend/src/components/main-container/styles.ts b/frontend/src/components/main-container/styles.ts
index 3c694f220..ee618229f 100644
--- a/frontend/src/components/main-container/styles.ts
+++ b/frontend/src/components/main-container/styles.ts
@@ -6,7 +6,7 @@ interface MainProps {
 
 export const MainWrap = styled.div<MainProps>`
   display: flex;
-  width: 100%;
+  width: 100vw;
   height: 100vh;
   flex-direction: column;
   overflow: hidden;
diff --git a/frontend/src/navigation/routes.tsx b/frontend/src/navigation/routes.tsx
index 8bc7178a2..76886d4a4 100644
--- a/frontend/src/navigation/routes.tsx
+++ b/frontend/src/navigation/routes.tsx
@@ -10,6 +10,7 @@ import { UseWithContext } from "../context/wrapper";
 import { MobileNotAvailable } from "../pages/mobile-not-available";
 import { useIsMobile } from "../hooks";
 import { breakpoints } from "../design";
+import { OnboardingMobile } from "../pages/onboarding-mobile/onboarding-mobile";
 
 export const InternalAppWrapper = () => {
   return (
@@ -66,7 +67,7 @@ export const ExternalAppRoutes: FC = () => {
     <ErrorBoundary FallbackComponent={ErrorFallback} onError={() => navigate(routes.character)}>
       <MainContainer>
         <Routes>
-          <Route path={routes.root} element={isMobile ? <Onboarding /> : <Onboarding />} />
+          <Route path={routes.root} element={isMobile ? <OnboardingMobile /> : <Onboarding />} />
           <Route path={routes.privacy} element={<Privacy />} />
           <Route path="*" element={<InternalAppWrapper />} />
         </Routes>
diff --git a/frontend/src/pages/onboarding-mobile/index.ts b/frontend/src/pages/onboarding-mobile/index.ts
new file mode 100644
index 000000000..b6be8d89e
--- /dev/null
+++ b/frontend/src/pages/onboarding-mobile/index.ts
@@ -0,0 +1 @@
+export * from "./onboarding";
diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
new file mode 100644
index 000000000..18dd7de9c
--- /dev/null
+++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -0,0 +1,163 @@
+import React, { FC, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { DiscordIcon, KeplerIcon, text, TwitterIcon } from "../../assets";
+import { breakpoints, color } from "../../design";
+import {
+  AnimatedLogo,
+  ButtonText,
+  FadeInOut,
+  Footer,
+  Kado,
+  KeplerIconWrapper,
+  MenuText,
+  OnboardingCharacter,
+  Overlay,
+  PrimaryButton,
+  TitleText,
+} from "../../components";
+import {
+  ArrowDown,
+  ArrowUp,
+  ButtonContainer,
+  ButtonRow,
+  EndContent,
+  FooterContainer,
+  GeneralSectionContainer,
+  InfoText,
+  KreadContainer,
+  KreadLogo,
+  KryhaLink,
+  Link,
+  LogoContainer,
+  MiddleContent,
+  OnboardingContainer,
+  OnboardingWrapper,
+  ScrollContainer,
+  SectionContainer,
+  SocialsContainer,
+  TextContainer,
+} from "./styles";
+import { useIsMobile, useOnScreen, useTimer, useViewport } from "../../hooks";
+import { routes } from "../../navigation";
+import { AGORIC_LINK, DISCORD_LINK, FIRST_TIME, KRYHA_LINK, SLIDER_TIME, TWITTER_LINK } from "../../constants";
+
+export const OnboardingMobile: FC = () => {
+  const navigate = useNavigate();
+  const { width, height } = useViewport();
+  const [showSlider] = useTimer(SLIDER_TIME, true);
+  const isMobile = useIsMobile(breakpoints.tablet);
+  const ref = useRef<HTMLDivElement>(null);
+  const isConnectButtonVisible = useOnScreen(ref);
+  const [showAnimation, setShowAnimation] = useState(true);
+  const isFirstTime = localStorage.getItem(FIRST_TIME) === null;
+  const [showWidget, setShowWidget] = useState(false);
+
+  const toggleWidget = () => {
+    setShowWidget(!showWidget);
+  };
+
+  useEffect(() => {
+    if (!isFirstTime) {
+      setShowAnimation(false);
+    }
+  }, [isFirstTime]);
+
+  const connectWallet = () => {
+    navigate(routes.connectWallet);
+    localStorage.setItem(FIRST_TIME, "false");
+    setShowAnimation(false);
+  };
+
+  return (
+    <>
+      {/* {showAnimation ? (
+        <KreadContainer height={height} width={width} showSlider={showSlider}>
+          <AnimatedLogo iteration={1} />
+        </KreadContainer>
+      ) : (
+        <LogoContainer>
+          <KreadLogo />
+        </LogoContainer>
+      )} */}
+      {/* <OnboardingContainer height={height} width={width} showAnimation={showAnimation}> */}
+        {/* <ButtonContainer isVisible={isConnectButtonVisible}>
+          <ButtonRow>
+            <PrimaryButton onClick={() => connectWallet()}>
+              <KeplerIconWrapper>
+                <KeplerIcon />
+              </KeplerIconWrapper>
+              <ButtonText customColor={color.white}>{text.general.connectWallet}</ButtonText>
+              <ArrowUp />
+            </PrimaryButton>
+          </ButtonRow>
+        </ButtonContainer> */}
+        {/* <OnboardingWrapper>
+          <InfoText height={height}>
+            <SectionContainer>
+              <MenuText>{text.general.logo}</MenuText>
+              <TitleText customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TitleText>
+            </SectionContainer>
+            <SectionContainer>
+              <MenuText>{text.general.sagesBy}</MenuText>
+              <TitleText customColor={color.darkGrey}>{text.general.sagesIsTheFirst}</TitleText>
+            </SectionContainer>
+            <ScrollContainer>
+              <ButtonText>{text.general.scroll}</ButtonText>
+              <ArrowDown />
+            </ScrollContainer>
+          </InfoText>
+          <MiddleContent height={height} ref={ref}>
+            <GeneralSectionContainer>
+              <MenuText>{text.general.whoWeAre}</MenuText>
+              <TextContainer>
+                {text.general.isPartOfAgoric}
+                <Link href={AGORIC_LINK} target="_blank">
+                  {text.general.agoric}
+                </Link>
+                {text.general.anOpenSource}
+                <KryhaLink href={KRYHA_LINK} target="_blank">
+                  {text.general.kryha}.
+                </KryhaLink>
+              </TextContainer>
+              <TextContainer>{text.general.theSagesArt}</TextContainer>
+              <TextContainer>{text.general.ourLeadership}</TextContainer>
+            </GeneralSectionContainer>
+          </MiddleContent>
+          <EndContent height={height}>
+            <GeneralSectionContainer>
+              <MenuText>{text.general.contactUs}</MenuText>
+              <TitleText customColor={color.darkGrey}>{text.general.questionsBug}</TitleText>
+              <TextContainer>
+                {text.general.sendEmailTo}
+                <Link href={`mailto:${text.general.contactEmail}`}>{text.general.contactEmail}</Link>
+              </TextContainer>
+            </GeneralSectionContainer>
+            <GeneralSectionContainer>
+              <MenuText>{text.general.followUs}</MenuText>
+              <SocialsContainer>
+                <Link href={DISCORD_LINK} target="_blank">
+                  <DiscordIcon />
+                  {text.general.discord}
+                </Link>
+                <Link href={TWITTER_LINK} target="_blank">
+                  <TwitterIcon />
+                  {text.general.twitter}
+                </Link>
+              </SocialsContainer>
+            </GeneralSectionContainer>
+          </EndContent>
+        </OnboardingWrapper> */}
+        {/* {!isMobile && <OnboardingCharacter />}
+        <FooterContainer>
+          <Footer />
+        </FooterContainer> */}
+      {/* </OnboardingContainer> */}
+
+      <FadeInOut show={showWidget}>
+        <Kado show={showWidget} toggleWidget={toggleWidget} />
+        <Overlay />
+      </FadeInOut>
+    </>
+  );
+};
diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts
new file mode 100644
index 000000000..8da952187
--- /dev/null
+++ b/frontend/src/pages/onboarding-mobile/styles.ts
@@ -0,0 +1,344 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ArrowDownIcon, ArrowUpRightIcon } from "../../assets";
+import { bounce, changeSize, CharacterImgs, disappear, fadeIn, PrimaryButton, slideUp, TitleText } from "../../components";
+import { KreadIcon } from "../../components/logo/styles";
+import { breakpoints, color, fontWeight, zIndex } from "../../design";
+
+interface HeightProps {
+  height: number;
+}
+
+export const OnboardingWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  scroll-behavior: smooth;
+  overflow: auto;
+  scroll-snap-type: y mandatory;
+`;
+
+export const InfoText = styled.div<HeightProps>`
+  margin-top: 8px;
+  ${TitleText} {
+    margin-top: 8px;
+  }
+  ${({ height }): string => `height: ${height}px; min-height: ${height}px;`};
+  margin-bottom: 200px;
+  width: 100%;
+  height: 100vh;
+  background-size: cover;
+  scroll-snap-align: start;
+  transition: all 0.4s;
+`;
+
+export const ArrowUp = styled(ArrowUpRightIcon)`
+  margin: 0 0 0 13px !important;
+  path {
+    stroke: ${color.white};
+  }
+`;
+
+export const ButtonRow = styled.div`
+  position: relative;
+  display: flex;
+  gap: 16px;
+`;
+interface ButtonProps {
+  isVisible: boolean;
+}
+
+export const ButtonContainer = styled.div<ButtonProps>`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0;
+  gap: 16px;
+  z-index: 100;
+  ${PrimaryButton} {
+    max-height: 45px;
+    gap: 8px;
+    &:hover {
+      ${ArrowUp} {
+        path {
+          stroke: ${color.black};
+        }
+      }
+    }
+  }
+  ${({ isVisible }): string => {
+    return isVisible
+      ? `
+      ${ButtonRow} {
+        -webkit-transition: 0.3s ease-out;
+        transition: 0.3s ease-out;
+        will-change: transform;
+        position: absolute;
+        left: 40px;
+        top: 40px;
+      };
+      background: rgba(255, 255, 255, 0.46);
+      backdrop-filter: blur(4px);
+      padding-top: 40px;
+      padding-bottom: 40px;
+      height: 120px;
+      width: 460px;
+      position: absolute;
+        `
+      : `
+      margin-top: 46px;
+      ${ButtonRow} {
+        position: fixed;
+        left: 40px;
+        top: 620px;
+        z-index: 100;
+      }
+      `;
+  }};
+
+  ${({ isVisible }) =>
+    isVisible === true
+      ? css``
+      : css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 0.5s, 0.5s;
+          animation-delay: 0s, 0.5s;
+        `};
+`;
+
+export const ArrowUpRight = styled(ArrowUpRightIcon)`
+  margin: 0 0 0 13px !important;
+`;
+
+export const EndContent = styled.div<HeightProps>`
+  ${({ height }): string => `height: ${height - 100}px; min-height: ${height - 100}px;`};
+  ${TitleText} {
+    margin-top: 16px;
+  }
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  background-size: cover;
+  scroll-snap-align: start;
+  padding-top: 110px;
+  gap: 80px;
+`;
+
+export const MiddleContent = styled.div<HeightProps>`
+  ${({ height }): string => `height: ${height}px; min-height: ${height}px;`};
+  ${TitleText} {
+    margin-top: 16px;
+  }
+  width: 100%;
+  height: 100vh;
+  background-size: cover;
+  scroll-snap-align: start;
+  padding-top: 110px;
+`;
+
+export const FooterContainer = styled.div`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: ${zIndex.overCharacter};
+`;
+
+interface ViewProps {
+  height: number;
+  width: number;
+  showSlider?: boolean;
+  showAnimation?: boolean;
+}
+export const OnboardingContainer = styled.div<ViewProps>`
+  ${({ height }): string => `height: ${height}px;`};
+  scroll-snap-type: y mandatory;
+  max-height: 100vh;
+  transition: all 0.4s;
+  animation: ${disappear}, ${fadeIn};
+  animation-duration: 5s, 0.5s;
+  animation-delay: 0s, 5s;
+  ${({ showAnimation }) =>
+    showAnimation
+      ? css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 5s, 0.5s;
+          animation-delay: 0s, 5s;
+        `
+      : css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 0.8s, 0.5s;
+          animation-delay: 0s, 0.8s;
+        `};
+`;
+
+export const DefaultImage = styled(CharacterImgs)<ViewProps>`
+  position: absolute;
+  right: 358px;
+  top: 0;
+`;
+
+export const Link = styled.a`
+  text-decoration: underline;
+  font-weight: ${fontWeight.light};
+  font-size: 24px;
+  line-height: 31px;
+  :first-letter {
+    text-transform: capitalize;
+  }
+  color: ${color.darkGrey};
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 5px;
+`;
+
+export const KryhaLink = styled(Link)`
+  margin-left: 0;
+`;
+
+export const TextContainer = styled.span`
+  font-weight: ${fontWeight.light};
+  font-size: 24px;
+  line-height: 31px;
+  :first-letter {
+    text-transform: capitalize;
+  }
+  :first-of-type {
+    margin-top: 8px;
+  }
+  margin-top: 24px;
+  display: inline-block;
+  color: ${color.darkGrey};
+  white-space: pre-line;
+
+  @media screen and (max-width: ${breakpoints.tablet}) {
+    font-size: 16px;
+    line-height: 20px;
+  }
+`;
+
+export const KreadLogo = styled(KreadIcon)`
+  animation: ${disappear}, ${fadeIn};
+  animation-duration: 0.8s, 0.5s;
+  animation-delay: 0s, 0.8s;
+`;
+
+export const LogoContainer = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  margin-top: 40px;
+  ${KreadLogo} {
+    width: 100px;
+    height: 24px;
+  }
+`;
+
+export const KreadContainer = styled.div<ViewProps>`
+  ${KreadIcon} {
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 500px;
+    height: 150px;
+    animation: ${changeSize} 4s 1;
+    animation-fill-mode: forwards;
+    animation-delay: 3.8s;
+  }
+  ${({ showSlider }) =>
+    showSlider &&
+    css`
+      animation: ${slideUp};
+      animation-duration: 0.7s;
+      animation-delay: 0s;
+      animation-fill-mode: forwards;
+      ${KreadIcon} {
+        position: absolute;
+        left: 0;
+        transform: translate(-45%, 0);
+        top: 50%;
+        bottom: 50%;
+        width: 100px;
+        height: 24px;
+      }
+    `};
+`;
+
+export const ArrowDown = styled(ArrowDownIcon)`
+  position: absolute;
+  left: 40px;
+  bottom: -2px;
+  -webkit-animation: ${bounce} 2s;
+  animation: ${bounce} 2s;
+  -webkit-animation-iteration-count: 2;
+  animation-iteration-count: 2;
+  animation-fill-mode: backwords;
+  -webkit-animation-fill-mode: backwords;
+  animation-delay: 6s;
+  -webkit-animation-delay: 6s;
+  path {
+    stroke: ${color.black};
+  }
+  width: 24px;
+  height: 24px;
+`;
+
+export const SectionContainer = styled.div`
+  padding-left: 40px;
+  padding-top: 50px;
+  width: 460px;
+  @media screen and (max-width: ${breakpoints.tablet}) {
+    padding-left: 16px;
+    width: 100%;
+  }
+`;
+
+export const ScrollContainer = styled.div`
+  position: absolute;
+  left: 40px;
+  bottom: 73px;
+`;
+
+export const GeneralSectionContainer = styled.div`
+  padding-left: 40px;
+  width: 460px;
+`;
+
+export const ConnectContainer = styled.div<ButtonProps>`
+  ${({ isVisible }): string => {
+    return isVisible
+      ? `
+        background: rgba(255, 255, 255, 0.46);
+        backdrop-filter: blur(4px);
+        z-index: 100;
+        width: 460px;
+        padding-top: 40px;
+        padding-bottom: 40px;
+        position: relative;
+      `
+      : "";
+  }};
+  ${({ isVisible }) =>
+    isVisible === true
+      ? css``
+      : css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 0.5s, 0.5s;
+          animation-delay: 0s, 0.5s;
+        `};
+`;
+
+export const SocialsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const SocialLink = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
diff --git a/frontend/src/pages/onboarding/onboarding.tsx b/frontend/src/pages/onboarding/onboarding.tsx
index 61d02ba10..7205d4381 100644
--- a/frontend/src/pages/onboarding/onboarding.tsx
+++ b/frontend/src/pages/onboarding/onboarding.tsx
@@ -144,15 +144,6 @@ export const Onboarding: FC = () => {
           <Footer />
         </FooterContainer>
       </OnboardingContainer>
-      {showAnimation ? (
-        <KreadContainer height={height} width={width} showSlider={showSlider}>
-          <AnimatedLogo iteration={1} />
-        </KreadContainer>
-      ) : (
-        <LogoContainer>
-          <KreadLogo />
-        </LogoContainer>
-      )}
       <FadeInOut show={showWidget}>
         <Kado show={showWidget} toggleWidget={toggleWidget} />
         <Overlay />

From 2c709a1c6bc51db1feae838114439ea76135907d Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Thu, 7 Dec 2023 15:08:36 +0100
Subject: [PATCH 03/17] fix character container

---
 frontend/src/components/atoms/image.ts        |  28 +--
 .../onboarding-character.tsx                  |  44 ++---
 .../components/onboarding-character/styles.ts | 163 +-----------------
 .../onboarding-mobile/onboarding-mobile.tsx   |  32 ++--
 .../src/pages/onboarding-mobile/styles.ts     |   4 +-
 5 files changed, 41 insertions(+), 230 deletions(-)

diff --git a/frontend/src/components/atoms/image.ts b/frontend/src/components/atoms/image.ts
index c9761e60d..5986788b2 100644
--- a/frontend/src/components/atoms/image.ts
+++ b/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;
+`;
\ No newline at end of file
diff --git a/frontend/src/components/onboarding-character/onboarding-character.tsx b/frontend/src/components/onboarding-character/onboarding-character.tsx
index 5d625a5b0..cc4916963 100644
--- a/frontend/src/components/onboarding-character/onboarding-character.tsx
+++ b/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>
   );
-};
+};
\ No newline at end of file
diff --git a/frontend/src/components/onboarding-character/styles.ts b/frontend/src/components/onboarding-character/styles.ts
index 48a12738a..8ad7475b6 100644
--- a/frontend/src/components/onboarding-character/styles.ts
+++ b/frontend/src/components/onboarding-character/styles.ts
@@ -1,160 +1,18 @@
 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;
@@ -162,9 +20,6 @@ export const CharacterSwitchIcon = styled(CharacterImgs)`
   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;
@@ -198,4 +53,4 @@ export const FifthIcon = styled(FirstIcon)`
   animation: ${sequentialFadeIn} 5s ease-in-out;
   animation-iteration-count: infinite;
   animation-delay: 2.5s;
-`;
+`;
\ No newline at end of file
diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
index 18dd7de9c..30073a527 100644
--- a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
+++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -71,7 +71,7 @@ export const OnboardingMobile: FC = () => {
 
   return (
     <>
-      {/* {showAnimation ? (
+      {showAnimation ? (
         <KreadContainer height={height} width={width} showSlider={showSlider}>
           <AnimatedLogo iteration={1} />
         </KreadContainer>
@@ -79,9 +79,9 @@ export const OnboardingMobile: FC = () => {
         <LogoContainer>
           <KreadLogo />
         </LogoContainer>
-      )} */}
-      {/* <OnboardingContainer height={height} width={width} showAnimation={showAnimation}> */}
-        {/* <ButtonContainer isVisible={isConnectButtonVisible}>
+      )}
+      <OnboardingContainer height={height} width={width} showAnimation={showAnimation}>
+        <ButtonContainer isVisible={isConnectButtonVisible}>
           <ButtonRow>
             <PrimaryButton onClick={() => connectWallet()}>
               <KeplerIconWrapper>
@@ -91,21 +91,15 @@ export const OnboardingMobile: FC = () => {
               <ArrowUp />
             </PrimaryButton>
           </ButtonRow>
-        </ButtonContainer> */}
-        {/* <OnboardingWrapper>
-          <InfoText height={height}>
+        </ButtonContainer>
+        {<OnboardingWrapper>
+          <InfoText>
             <SectionContainer>
               <MenuText>{text.general.logo}</MenuText>
               <TitleText customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TitleText>
             </SectionContainer>
-            <SectionContainer>
-              <MenuText>{text.general.sagesBy}</MenuText>
-              <TitleText customColor={color.darkGrey}>{text.general.sagesIsTheFirst}</TitleText>
-            </SectionContainer>
-            <ScrollContainer>
-              <ButtonText>{text.general.scroll}</ButtonText>
-              <ArrowDown />
-            </ScrollContainer>
+            <OnboardingCharacter />
+
           </InfoText>
           <MiddleContent height={height} ref={ref}>
             <GeneralSectionContainer>
@@ -147,12 +141,12 @@ export const OnboardingMobile: FC = () => {
               </SocialsContainer>
             </GeneralSectionContainer>
           </EndContent>
-        </OnboardingWrapper> */}
-        {/* {!isMobile && <OnboardingCharacter />}
+        </OnboardingWrapper>}
+        
         <FooterContainer>
           <Footer />
-        </FooterContainer> */}
-      {/* </OnboardingContainer> */}
+        </FooterContainer>
+      </OnboardingContainer>
 
       <FadeInOut show={showWidget}>
         <Kado show={showWidget} toggleWidget={toggleWidget} />
diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts
index 8da952187..40cdef23b 100644
--- a/frontend/src/pages/onboarding-mobile/styles.ts
+++ b/frontend/src/pages/onboarding-mobile/styles.ts
@@ -18,12 +18,12 @@ export const OnboardingWrapper = styled.div`
   scroll-snap-type: y mandatory;
 `;
 
-export const InfoText = styled.div<HeightProps>`
+export const InfoText = styled.div`
   margin-top: 8px;
   ${TitleText} {
     margin-top: 8px;
   }
-  ${({ height }): string => `height: ${height}px; min-height: ${height}px;`};
+  // ${({ height }): string => `height: ${height}px; min-height: ${height}px;`};
   margin-bottom: 200px;
   width: 100%;
   height: 100vh;

From 31c4dd8bb09d350e7b45e427f2ddca0a7906c9cb Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Thu, 7 Dec 2023 15:28:22 +0100
Subject: [PATCH 04/17] move button

---
 .../onboarding-mobile/onboarding-mobile.tsx   | 21 ++++---
 .../src/pages/onboarding-mobile/styles.ts     | 61 +++++++------------
 2 files changed, 34 insertions(+), 48 deletions(-)

diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
index 30073a527..506bd8936 100644
--- a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
+++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -31,6 +31,7 @@ import {
   Link,
   LogoContainer,
   MiddleContent,
+  OnboardingCharacterWrapper,
   OnboardingContainer,
   OnboardingWrapper,
   ScrollContainer,
@@ -81,7 +82,16 @@ export const OnboardingMobile: FC = () => {
         </LogoContainer>
       )}
       <OnboardingContainer height={height} width={width} showAnimation={showAnimation}>
-        <ButtonContainer isVisible={isConnectButtonVisible}>
+        {<OnboardingWrapper>
+          <InfoText>
+            <SectionContainer>
+              <MenuText>{text.general.logo}</MenuText>
+              <TitleText customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TitleText>
+            </SectionContainer>
+            <OnboardingCharacterWrapper>
+              <OnboardingCharacter />
+            </OnboardingCharacterWrapper>
+            <ButtonContainer isVisible={isConnectButtonVisible}>
           <ButtonRow>
             <PrimaryButton onClick={() => connectWallet()}>
               <KeplerIconWrapper>
@@ -92,15 +102,8 @@ export const OnboardingMobile: FC = () => {
             </PrimaryButton>
           </ButtonRow>
         </ButtonContainer>
-        {<OnboardingWrapper>
-          <InfoText>
-            <SectionContainer>
-              <MenuText>{text.general.logo}</MenuText>
-              <TitleText customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TitleText>
-            </SectionContainer>
-            <OnboardingCharacter />
-
           </InfoText>
+
           <MiddleContent height={height} ref={ref}>
             <GeneralSectionContainer>
               <MenuText>{text.general.whoWeAre}</MenuText>
diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts
index 40cdef23b..e3f499e3a 100644
--- a/frontend/src/pages/onboarding-mobile/styles.ts
+++ b/frontend/src/pages/onboarding-mobile/styles.ts
@@ -18,6 +18,26 @@ export const OnboardingWrapper = styled.div`
   scroll-snap-type: y mandatory;
 `;
 
+export const OnboardingCharacterWrapper = styled.div`
+  display: flex;
+  position: relative;
+  width: 50%;
+
+  @media screen and (max-width: ${breakpoints.tablet}) {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 800px;
+  }
+
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 500px;
+  }
+`;
+
 export const InfoText = styled.div`
   margin-top: 8px;
   ${TitleText} {
@@ -66,44 +86,7 @@ export const ButtonContainer = styled.div<ButtonProps>`
       }
     }
   }
-  ${({ isVisible }): string => {
-    return isVisible
-      ? `
-      ${ButtonRow} {
-        -webkit-transition: 0.3s ease-out;
-        transition: 0.3s ease-out;
-        will-change: transform;
-        position: absolute;
-        left: 40px;
-        top: 40px;
-      };
-      background: rgba(255, 255, 255, 0.46);
-      backdrop-filter: blur(4px);
-      padding-top: 40px;
-      padding-bottom: 40px;
-      height: 120px;
-      width: 460px;
-      position: absolute;
-        `
-      : `
-      margin-top: 46px;
-      ${ButtonRow} {
-        position: fixed;
-        left: 40px;
-        top: 620px;
-        z-index: 100;
-      }
-      `;
-  }};
-
-  ${({ isVisible }) =>
-    isVisible === true
-      ? css``
-      : css`
-          animation: ${disappear}, ${fadeIn};
-          animation-duration: 0.5s, 0.5s;
-          animation-delay: 0s, 0.5s;
-        `};
+  
 `;
 
 export const ArrowUpRight = styled(ArrowUpRightIcon)`
@@ -289,7 +272,7 @@ export const ArrowDown = styled(ArrowDownIcon)`
 
 export const SectionContainer = styled.div`
   padding-left: 40px;
-  padding-top: 50px;
+  padding-top: 10px;
   width: 460px;
   @media screen and (max-width: ${breakpoints.tablet}) {
     padding-left: 16px;

From 44ab4baad3db8669770e1ed9981f91507aa86960 Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Thu, 7 Dec 2023 16:19:26 +0100
Subject: [PATCH 05/17] wip

---
 .../onboarding-mobile/onboarding-mobile.tsx   | 134 +++++++++---------
 .../src/pages/onboarding-mobile/styles.ts     |  17 +--
 2 files changed, 73 insertions(+), 78 deletions(-)

diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
index 506bd8936..1fa82872b 100644
--- a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
+++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -81,75 +81,73 @@ export const OnboardingMobile: FC = () => {
           <KreadLogo />
         </LogoContainer>
       )}
-      <OnboardingContainer height={height} width={width} showAnimation={showAnimation}>
-        {<OnboardingWrapper>
-          <InfoText>
-            <SectionContainer>
-              <MenuText>{text.general.logo}</MenuText>
-              <TitleText customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TitleText>
-            </SectionContainer>
-            <OnboardingCharacterWrapper>
-              <OnboardingCharacter />
-            </OnboardingCharacterWrapper>
-            <ButtonContainer isVisible={isConnectButtonVisible}>
-          <ButtonRow>
-            <PrimaryButton onClick={() => connectWallet()}>
-              <KeplerIconWrapper>
-                <KeplerIcon />
-              </KeplerIconWrapper>
-              <ButtonText customColor={color.white}>{text.general.connectWallet}</ButtonText>
-              <ArrowUp />
-            </PrimaryButton>
-          </ButtonRow>
-        </ButtonContainer>
-          </InfoText>
+      {<OnboardingWrapper>
+        <InfoText>
+          <SectionContainer>
+            <MenuText>{text.general.logo}</MenuText>
+            <TitleText customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TitleText>
+          </SectionContainer>
+          <OnboardingCharacterWrapper>
+            <OnboardingCharacter />
+          </OnboardingCharacterWrapper>
+          <ButtonContainer isVisible={isConnectButtonVisible}>
+            <ButtonRow>
+              <PrimaryButton onClick={() => connectWallet()}>
+                <KeplerIconWrapper>
+                  <KeplerIcon />
+                </KeplerIconWrapper>
+                <ButtonText customColor={color.white}>{text.general.connectWallet}</ButtonText>
+                <ArrowUp />
+              </PrimaryButton>
+            </ButtonRow>
+          </ButtonContainer>
+        </InfoText>
 
-          <MiddleContent height={height} ref={ref}>
-            <GeneralSectionContainer>
-              <MenuText>{text.general.whoWeAre}</MenuText>
-              <TextContainer>
-                {text.general.isPartOfAgoric}
-                <Link href={AGORIC_LINK} target="_blank">
-                  {text.general.agoric}
-                </Link>
-                {text.general.anOpenSource}
-                <KryhaLink href={KRYHA_LINK} target="_blank">
-                  {text.general.kryha}.
-                </KryhaLink>
-              </TextContainer>
-              <TextContainer>{text.general.theSagesArt}</TextContainer>
-              <TextContainer>{text.general.ourLeadership}</TextContainer>
-            </GeneralSectionContainer>
-          </MiddleContent>
-          <EndContent height={height}>
-            <GeneralSectionContainer>
-              <MenuText>{text.general.contactUs}</MenuText>
-              <TitleText customColor={color.darkGrey}>{text.general.questionsBug}</TitleText>
-              <TextContainer>
-                {text.general.sendEmailTo}
-                <Link href={`mailto:${text.general.contactEmail}`}>{text.general.contactEmail}</Link>
-              </TextContainer>
-            </GeneralSectionContainer>
-            <GeneralSectionContainer>
-              <MenuText>{text.general.followUs}</MenuText>
-              <SocialsContainer>
-                <Link href={DISCORD_LINK} target="_blank">
-                  <DiscordIcon />
-                  {text.general.discord}
-                </Link>
-                <Link href={TWITTER_LINK} target="_blank">
-                  <TwitterIcon />
-                  {text.general.twitter}
-                </Link>
-              </SocialsContainer>
-            </GeneralSectionContainer>
-          </EndContent>
-        </OnboardingWrapper>}
-        
-        <FooterContainer>
-          <Footer />
-        </FooterContainer>
-      </OnboardingContainer>
+        <MiddleContent height={height} ref={ref}>
+          <GeneralSectionContainer>
+            <MenuText>{text.general.whoWeAre}</MenuText>
+            <TextContainer>
+              {text.general.isPartOfAgoric}
+              <Link href={AGORIC_LINK} target="_blank">
+                {text.general.agoric}
+              </Link>
+              {text.general.anOpenSource}
+              <KryhaLink href={KRYHA_LINK} target="_blank">
+                {text.general.kryha}.
+              </KryhaLink>
+            </TextContainer>
+            <TextContainer>{text.general.theSagesArt}</TextContainer>
+            <TextContainer>{text.general.ourLeadership}</TextContainer>
+          </GeneralSectionContainer>
+        </MiddleContent>
+        <EndContent height={height}>
+          <GeneralSectionContainer>
+            <MenuText>{text.general.contactUs}</MenuText>
+            <TitleText customColor={color.darkGrey}>{text.general.questionsBug}</TitleText>
+            <TextContainer>
+              {text.general.sendEmailTo}
+              <Link href={`mailto:${text.general.contactEmail}`}>{text.general.contactEmail}</Link>
+            </TextContainer>
+          </GeneralSectionContainer>
+          <GeneralSectionContainer>
+            <MenuText>{text.general.followUs}</MenuText>
+            <SocialsContainer>
+              <Link href={DISCORD_LINK} target="_blank">
+                <DiscordIcon />
+                {text.general.discord}
+              </Link>
+              <Link href={TWITTER_LINK} target="_blank">
+                <TwitterIcon />
+                {text.general.twitter}
+              </Link>
+            </SocialsContainer>
+          </GeneralSectionContainer>
+        </EndContent>
+      </OnboardingWrapper>}
+      
+      <FooterContainer>
+        <Footer />
+      </FooterContainer>
 
       <FadeInOut show={showWidget}>
         <Kado show={showWidget} toggleWidget={toggleWidget} />
diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts
index e3f499e3a..6c57f1f90 100644
--- a/frontend/src/pages/onboarding-mobile/styles.ts
+++ b/frontend/src/pages/onboarding-mobile/styles.ts
@@ -43,10 +43,9 @@ export const InfoText = styled.div`
   ${TitleText} {
     margin-top: 8px;
   }
-  // ${({ height }): string => `height: ${height}px; min-height: ${height}px;`};
   margin-bottom: 200px;
   width: 100%;
-  height: 100vh;
+  height: 100%;
   background-size: cover;
   scroll-snap-align: start;
   transition: all 0.4s;
@@ -101,15 +100,14 @@ export const EndContent = styled.div<HeightProps>`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100vh;
+  height: 100%;
   background-size: cover;
   scroll-snap-align: start;
-  padding-top: 110px;
+  padding-top: 30px;
   gap: 80px;
 `;
 
 export const MiddleContent = styled.div<HeightProps>`
-  ${({ height }): string => `height: ${height}px; min-height: ${height}px;`};
   ${TitleText} {
     margin-top: 16px;
   }
@@ -117,7 +115,7 @@ export const MiddleContent = styled.div<HeightProps>`
   height: 100vh;
   background-size: cover;
   scroll-snap-align: start;
-  padding-top: 110px;
+  padding-top: 30;
 `;
 
 export const FooterContainer = styled.div`
@@ -164,8 +162,8 @@ export const DefaultImage = styled(CharacterImgs)<ViewProps>`
 export const Link = styled.a`
   text-decoration: underline;
   font-weight: ${fontWeight.light};
-  font-size: 24px;
-  line-height: 31px;
+  font-size: 16px;
+  line-height: 20px;
   :first-letter {
     text-transform: capitalize;
   }
@@ -273,7 +271,6 @@ export const ArrowDown = styled(ArrowDownIcon)`
 export const SectionContainer = styled.div`
   padding-left: 40px;
   padding-top: 10px;
-  width: 460px;
   @media screen and (max-width: ${breakpoints.tablet}) {
     padding-left: 16px;
     width: 100%;
@@ -288,7 +285,7 @@ export const ScrollContainer = styled.div`
 
 export const GeneralSectionContainer = styled.div`
   padding-left: 40px;
-  width: 460px;
+  width: 100%;
 `;
 
 export const ConnectContainer = styled.div<ButtonProps>`

From 93296c480bb34d6cbf14ebb70a25bf949b532806 Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Fri, 8 Dec 2023 10:51:11 +0100
Subject: [PATCH 06/17] fix heights

---
 frontend/src/pages/onboarding-mobile/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/onboarding-mobile/index.ts b/frontend/src/pages/onboarding-mobile/index.ts
index b6be8d89e..a88dac21f 100644
--- a/frontend/src/pages/onboarding-mobile/index.ts
+++ b/frontend/src/pages/onboarding-mobile/index.ts
@@ -1 +1 @@
-export * from "./onboarding";
+export * from "./onboarding-mobile";

From 121c412ec2fc9561c4116e94d9d20676873eecef Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Fri, 8 Dec 2023 10:51:17 +0100
Subject: [PATCH 07/17] fix heights 2

---
 frontend/src/pages/onboarding-mobile/styles.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts
index 6c57f1f90..a3a8ae7cd 100644
--- a/frontend/src/pages/onboarding-mobile/styles.ts
+++ b/frontend/src/pages/onboarding-mobile/styles.ts
@@ -12,7 +12,6 @@ interface HeightProps {
 export const OnboardingWrapper = styled.div`
   position: relative;
   width: 100%;
-  height: 100vh;
   scroll-behavior: smooth;
   overflow: auto;
   scroll-snap-type: y mandatory;
@@ -46,6 +45,7 @@ export const InfoText = styled.div`
   margin-bottom: 200px;
   width: 100%;
   height: 100%;
+  max-height: 100vh - 24px;
   background-size: cover;
   scroll-snap-align: start;
   transition: all 0.4s;
@@ -112,7 +112,8 @@ export const MiddleContent = styled.div<HeightProps>`
     margin-top: 16px;
   }
   width: 100%;
-  height: 100vh;
+  height: 100%;
+  max-height: 100vh - 24px;
   background-size: cover;
   scroll-snap-align: start;
   padding-top: 30;
@@ -209,7 +210,7 @@ export const LogoContainer = styled.div`
   display: flex;
   flex: 1;
   justify-content: center;
-  margin-top: 40px;
+  margin-top: 30px;
   ${KreadLogo} {
     width: 100px;
     height: 24px;

From be400666bde4b27585b2d6dfb7dc43c54579fc3e Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Fri, 8 Dec 2023 14:08:03 +0100
Subject: [PATCH 08/17] onboarding page

---
 frontend/src/components/footer/footer.tsx     |  7 +-
 frontend/src/components/footer/styles.ts      |  7 +-
 .../onboarding-mobile/onboarding-mobile.tsx   | 34 +++----
 .../src/pages/onboarding-mobile/styles.ts     | 89 ++++++-------------
 4 files changed, 51 insertions(+), 86 deletions(-)

diff --git a/frontend/src/components/footer/footer.tsx b/frontend/src/components/footer/footer.tsx
index b8926e20b..3e0ee05ad 100644
--- a/frontend/src/components/footer/footer.tsx
+++ b/frontend/src/components/footer/footer.tsx
@@ -1,13 +1,14 @@
 import React, { FC, useState } from "react";
 import { useLocation, useMatch, useResolvedPath } from "react-router-dom";
 import { text } from "../../assets";
-import { color } from "../../design";
+import { breakpoints, color } from "../../design";
 import { routes } from "../../navigation";
 import { AgoricText, FooterContainer, FooterWrapper, Link, PrivacyText } from "./styles";
 import { NetworkSelect } from "../network-selector/network-select";
 import { useNetworkConfig } from "../../hooks/useNetwork";
 import { getLabelForNetwork, NetworkSelector } from "../network-selector/network-selector";
 import { networkOptions } from "../../constants";
+import { useIsMobile } from "../../hooks";
 
 export const Footer: FC = () => {
   const resolvedShop = useResolvedPath(routes.shop);
@@ -25,9 +26,11 @@ export const Footer: FC = () => {
     setFilterId(id !== filterId ? id : "");
   };
 
+  const isMobile = useIsMobile(breakpoints.tablet);
+
   return (
     <FooterWrapper isShop={!!matchShop}>
-      { pathsWithNetworkSelector.includes(location.pathname as any) && 
+      { pathsWithNetworkSelector.includes(location.pathname as any) && !isMobile &&
         <NetworkSelector label={label} openNetworkSelector={openFilter} id={filterId} hasValue={!!network}>
           <NetworkSelect label={network} onChange={setNetworkValue} options={networkOptions} />
         </NetworkSelector>
diff --git a/frontend/src/components/footer/styles.ts b/frontend/src/components/footer/styles.ts
index 28250d0eb..c26e999dd 100644
--- a/frontend/src/components/footer/styles.ts
+++ b/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 {
@@ -17,6 +17,11 @@ export const FooterWrapper = styled.div<FooterProps>`
   width: 100%;
   z-index: 1000;
   border-radius: 100px;
+
+  @media (max-width: ${breakpoints.tablet}) {
+    margin-left: 0px;
+    justify-content: center;
+  }
 `;
 
 export const FooterContainer = styled.div`
diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
index 1fa82872b..10da56e6a 100644
--- a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
+++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -17,7 +17,6 @@ import {
   TitleText,
 } from "../../components";
 import {
-  ArrowDown,
   ArrowUp,
   ButtonContainer,
   ButtonRow,
@@ -34,7 +33,6 @@ import {
   OnboardingCharacterWrapper,
   OnboardingContainer,
   OnboardingWrapper,
-  ScrollContainer,
   SectionContainer,
   SocialsContainer,
   TextContainer,
@@ -47,7 +45,6 @@ export const OnboardingMobile: FC = () => {
   const navigate = useNavigate();
   const { width, height } = useViewport();
   const [showSlider] = useTimer(SLIDER_TIME, true);
-  const isMobile = useIsMobile(breakpoints.tablet);
   const ref = useRef<HTMLDivElement>(null);
   const isConnectButtonVisible = useOnScreen(ref);
   const [showAnimation, setShowAnimation] = useState(true);
@@ -71,7 +68,7 @@ export const OnboardingMobile: FC = () => {
   };
 
   return (
-    <>
+    <OnboardingWrapper>
       {showAnimation ? (
         <KreadContainer height={height} width={width} showSlider={showSlider}>
           <AnimatedLogo iteration={1} />
@@ -81,11 +78,10 @@ export const OnboardingMobile: FC = () => {
           <KreadLogo />
         </LogoContainer>
       )}
-      {<OnboardingWrapper>
+      <OnboardingContainer>
         <InfoText>
           <SectionContainer>
-            <MenuText>{text.general.logo}</MenuText>
-            <TitleText customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TitleText>
+            <TextContainer customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TextContainer>
           </SectionContainer>
           <OnboardingCharacterWrapper>
             <OnboardingCharacter />
@@ -104,7 +100,7 @@ export const OnboardingMobile: FC = () => {
         </InfoText>
 
         <MiddleContent height={height} ref={ref}>
-          <GeneralSectionContainer>
+          <SectionContainer>
             <MenuText>{text.general.whoWeAre}</MenuText>
             <TextContainer>
               {text.general.isPartOfAgoric}
@@ -118,18 +114,18 @@ export const OnboardingMobile: FC = () => {
             </TextContainer>
             <TextContainer>{text.general.theSagesArt}</TextContainer>
             <TextContainer>{text.general.ourLeadership}</TextContainer>
-          </GeneralSectionContainer>
+          </SectionContainer>
         </MiddleContent>
         <EndContent height={height}>
-          <GeneralSectionContainer>
+          <SectionContainer>
             <MenuText>{text.general.contactUs}</MenuText>
-            <TitleText customColor={color.darkGrey}>{text.general.questionsBug}</TitleText>
+            <TextContainer customColor={color.darkGrey}>{text.general.questionsBug}</TextContainer>
             <TextContainer>
               {text.general.sendEmailTo}
               <Link href={`mailto:${text.general.contactEmail}`}>{text.general.contactEmail}</Link>
             </TextContainer>
-          </GeneralSectionContainer>
-          <GeneralSectionContainer>
+          </SectionContainer>
+          <SectionContainer>
             <MenuText>{text.general.followUs}</MenuText>
             <SocialsContainer>
               <Link href={DISCORD_LINK} target="_blank">
@@ -141,18 +137,14 @@ export const OnboardingMobile: FC = () => {
                 {text.general.twitter}
               </Link>
             </SocialsContainer>
-          </GeneralSectionContainer>
+          </SectionContainer>
         </EndContent>
-      </OnboardingWrapper>}
-      
-      <FooterContainer>
-        <Footer />
-      </FooterContainer>
-
+      </OnboardingContainer>
+      <Footer />
       <FadeInOut show={showWidget}>
         <Kado show={showWidget} toggleWidget={toggleWidget} />
         <Overlay />
       </FadeInOut>
-    </>
+    </OnboardingWrapper>
   );
 };
diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts
index a3a8ae7cd..bac3c120a 100644
--- a/frontend/src/pages/onboarding-mobile/styles.ts
+++ b/frontend/src/pages/onboarding-mobile/styles.ts
@@ -10,31 +10,18 @@ interface HeightProps {
 }
 
 export const OnboardingWrapper = styled.div`
-  position: relative;
-  width: 100%;
-  scroll-behavior: smooth;
-  overflow: auto;
-  scroll-snap-type: y mandatory;
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+
 `;
 
 export const OnboardingCharacterWrapper = styled.div`
   display: flex;
   position: relative;
-  width: 50%;
-
-  @media screen and (max-width: ${breakpoints.tablet}) {
-    display: flex;
-    position: relative;
-    width: 100%;
-    height: 800px;
-  }
-
-  @media screen and (max-width: ${breakpoints.mobile}) {
-    display: flex;
-    position: relative;
-    width: 100%;
-    height: 500px;
-  }
+  height: 50%;
+  margin: 17% 5% 7% 5%;
 `;
 
 export const InfoText = styled.div`
@@ -71,8 +58,7 @@ export const ButtonContainer = styled.div<ButtonProps>`
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  padding: 0;
-  gap: 16px;
+  justify-content: center;
   z-index: 100;
   ${PrimaryButton} {
     max-height: 45px;
@@ -93,7 +79,6 @@ export const ArrowUpRight = styled(ArrowUpRightIcon)`
 `;
 
 export const EndContent = styled.div<HeightProps>`
-  ${({ height }): string => `height: ${height - 100}px; min-height: ${height - 100}px;`};
   ${TitleText} {
     margin-top: 16px;
   }
@@ -103,8 +88,7 @@ export const EndContent = styled.div<HeightProps>`
   height: 100%;
   background-size: cover;
   scroll-snap-align: start;
-  padding-top: 30px;
-  gap: 80px;
+  gap: 40px;
 `;
 
 export const MiddleContent = styled.div<HeightProps>`
@@ -116,13 +100,13 @@ export const MiddleContent = styled.div<HeightProps>`
   max-height: 100vh - 24px;
   background-size: cover;
   scroll-snap-align: start;
-  padding-top: 30;
 `;
 
 export const FooterContainer = styled.div`
   position: absolute;
-  right: 0;
+  left: 0;
   bottom: 0;
+  width: 100%;
   z-index: ${zIndex.overCharacter};
 `;
 
@@ -132,26 +116,12 @@ interface ViewProps {
   showSlider?: boolean;
   showAnimation?: boolean;
 }
-export const OnboardingContainer = styled.div<ViewProps>`
-  ${({ height }): string => `height: ${height}px;`};
+export const OnboardingContainer = styled.div<HeightProps>`
+  ${({ height }): string => `height: ${height - 64}px;`};
+  scroll-behavior: smooth;
+  overflow: auto;
   scroll-snap-type: y mandatory;
-  max-height: 100vh;
-  transition: all 0.4s;
-  animation: ${disappear}, ${fadeIn};
-  animation-duration: 5s, 0.5s;
-  animation-delay: 0s, 5s;
-  ${({ showAnimation }) =>
-    showAnimation
-      ? css`
-          animation: ${disappear}, ${fadeIn};
-          animation-duration: 5s, 0.5s;
-          animation-delay: 0s, 5s;
-        `
-      : css`
-          animation: ${disappear}, ${fadeIn};
-          animation-duration: 0.8s, 0.5s;
-          animation-delay: 0s, 0.8s;
-        `};
+  padding: 10px 10px 10px 10px;
 `;
 
 export const DefaultImage = styled(CharacterImgs)<ViewProps>`
@@ -179,10 +149,13 @@ export const KryhaLink = styled(Link)`
   margin-left: 0;
 `;
 
-export const TextContainer = styled.span`
+interface TextProps {
+  customColor?: string;
+}
+export const TextContainer = styled.span<TextProps>`
   font-weight: ${fontWeight.light};
-  font-size: 24px;
-  line-height: 31px;
+  font-size: 16px;
+  line-height: 22px;
   :first-letter {
     text-transform: capitalize;
   }
@@ -191,13 +164,8 @@ export const TextContainer = styled.span`
   }
   margin-top: 24px;
   display: inline-block;
-  color: ${color.darkGrey};
+  ${({ customColor }): string => `color: ${customColor || color.darkGrey};`};
   white-space: pre-line;
-
-  @media screen and (max-width: ${breakpoints.tablet}) {
-    font-size: 16px;
-    line-height: 20px;
-  }
 `;
 
 export const KreadLogo = styled(KreadIcon)`
@@ -270,12 +238,8 @@ export const ArrowDown = styled(ArrowDownIcon)`
 `;
 
 export const SectionContainer = styled.div`
-  padding-left: 40px;
-  padding-top: 10px;
-  @media screen and (max-width: ${breakpoints.tablet}) {
-    padding-left: 16px;
-    width: 100%;
-  }
+  padding-left: 20px;
+  padding-top: 4%;
 `;
 
 export const ScrollContainer = styled.div`
@@ -285,7 +249,7 @@ export const ScrollContainer = styled.div`
 `;
 
 export const GeneralSectionContainer = styled.div`
-  padding-left: 40px;
+  padding-left: 30px;
   width: 100%;
 `;
 
@@ -316,6 +280,7 @@ export const ConnectContainer = styled.div<ButtonProps>`
 export const SocialsContainer = styled.div`
   display: flex;
   flex-direction: column;
+  margin: 8px 0px;
 `;
 
 export const SocialLink = styled.div`

From 23531c66f1f99adaafa545c8b3f94ba8c0259ae6 Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Fri, 8 Dec 2023 15:27:42 +0100
Subject: [PATCH 09/17] more clean up

---
 .../onboarding-mobile/onboarding-mobile.tsx   |   8 +-
 .../src/pages/onboarding-mobile/styles.ts     | 174 +++++-------------
 frontend/src/pages/onboarding/onboarding.tsx  |   9 +
 frontend/src/reset.css                        |   8 +
 4 files changed, 69 insertions(+), 130 deletions(-)

diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
index 10da56e6a..35b320acc 100644
--- a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
+++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -2,7 +2,7 @@ import React, { FC, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { DiscordIcon, KeplerIcon, text, TwitterIcon } from "../../assets";
-import { breakpoints, color } from "../../design";
+import { color } from "../../design";
 import {
   AnimatedLogo,
   ButtonText,
@@ -14,15 +14,12 @@ import {
   OnboardingCharacter,
   Overlay,
   PrimaryButton,
-  TitleText,
 } from "../../components";
 import {
   ArrowUp,
   ButtonContainer,
   ButtonRow,
   EndContent,
-  FooterContainer,
-  GeneralSectionContainer,
   InfoText,
   KreadContainer,
   KreadLogo,
@@ -37,7 +34,7 @@ import {
   SocialsContainer,
   TextContainer,
 } from "./styles";
-import { useIsMobile, useOnScreen, useTimer, useViewport } from "../../hooks";
+import { useOnScreen, useTimer, useViewport } from "../../hooks";
 import { routes } from "../../navigation";
 import { AGORIC_LINK, DISCORD_LINK, FIRST_TIME, KRYHA_LINK, SLIDER_TIME, TWITTER_LINK } from "../../constants";
 
@@ -98,7 +95,6 @@ export const OnboardingMobile: FC = () => {
             </ButtonRow>
           </ButtonContainer>
         </InfoText>
-
         <MiddleContent height={height} ref={ref}>
           <SectionContainer>
             <MenuText>{text.general.whoWeAre}</MenuText>
diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts
index bac3c120a..2ef90ca12 100644
--- a/frontend/src/pages/onboarding-mobile/styles.ts
+++ b/frontend/src/pages/onboarding-mobile/styles.ts
@@ -1,9 +1,9 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { ArrowDownIcon, ArrowUpRightIcon } from "../../assets";
-import { bounce, changeSize, CharacterImgs, disappear, fadeIn, PrimaryButton, slideUp, TitleText } from "../../components";
+import { ArrowUpRightIcon } from "../../assets";
+import {  changeSize, CharacterImgs, disappear, fadeIn, PrimaryButton, slideUp, TitleText } from "../../components";
 import { KreadIcon } from "../../components/logo/styles";
-import { breakpoints, color, fontWeight, zIndex } from "../../design";
+import { color, fontWeight } from "../../design";
 
 interface HeightProps {
   height: number;
@@ -14,7 +14,14 @@ export const OnboardingWrapper = styled.div`
   flex-direction: column;
   width: 100vw;
   height: 100vh;
+`;
 
+export const OnboardingContainer = styled.div`
+  height: 100%;
+  scroll-behavior: smooth;
+  overflow: auto;
+  scroll-snap-type: y mandatory;
+  padding: 10px 10px 10px 10px;
 `;
 
 export const OnboardingCharacterWrapper = styled.div`
@@ -25,89 +32,39 @@ export const OnboardingCharacterWrapper = styled.div`
 `;
 
 export const InfoText = styled.div`
-  margin-top: 8px;
   ${TitleText} {
     margin-top: 8px;
   }
-  margin-bottom: 200px;
   width: 100%;
   height: 100%;
-  max-height: 100vh - 24px;
+  margin-bottom: 200px;
   background-size: cover;
   scroll-snap-align: start;
   transition: all 0.4s;
 `;
 
-export const ArrowUp = styled(ArrowUpRightIcon)`
-  margin: 0 0 0 13px !important;
-  path {
-    stroke: ${color.white};
-  }
-`;
-
-export const ButtonRow = styled.div`
-  position: relative;
-  display: flex;
-  gap: 16px;
-`;
-interface ButtonProps {
-  isVisible: boolean;
-}
-
-export const ButtonContainer = styled.div<ButtonProps>`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: center;
-  z-index: 100;
-  ${PrimaryButton} {
-    max-height: 45px;
-    gap: 8px;
-    &:hover {
-      ${ArrowUp} {
-        path {
-          stroke: ${color.black};
-        }
-      }
-    }
-  }
-  
-`;
-
-export const ArrowUpRight = styled(ArrowUpRightIcon)`
-  margin: 0 0 0 13px !important;
-`;
-
-export const EndContent = styled.div<HeightProps>`
+export const MiddleContent = styled.div<HeightProps>`
   ${TitleText} {
     margin-top: 16px;
   }
-  display: flex;
-  flex-direction: column;
+  margin-bottom: 200px;
   width: 100%;
   height: 100%;
   background-size: cover;
   scroll-snap-align: start;
-  gap: 40px;
 `;
 
-export const MiddleContent = styled.div<HeightProps>`
+export const EndContent = styled.div<HeightProps>`
   ${TitleText} {
     margin-top: 16px;
   }
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  max-height: 100vh - 24px;
   background-size: cover;
   scroll-snap-align: start;
-`;
-
-export const FooterContainer = styled.div`
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  z-index: ${zIndex.overCharacter};
+  gap: 40px;
 `;
 
 interface ViewProps {
@@ -116,13 +73,6 @@ interface ViewProps {
   showSlider?: boolean;
   showAnimation?: boolean;
 }
-export const OnboardingContainer = styled.div<HeightProps>`
-  ${({ height }): string => `height: ${height - 64}px;`};
-  scroll-behavior: smooth;
-  overflow: auto;
-  scroll-snap-type: y mandatory;
-  padding: 10px 10px 10px 10px;
-`;
 
 export const DefaultImage = styled(CharacterImgs)<ViewProps>`
   position: absolute;
@@ -218,73 +168,49 @@ export const KreadContainer = styled.div<ViewProps>`
     `};
 `;
 
-export const ArrowDown = styled(ArrowDownIcon)`
-  position: absolute;
-  left: 40px;
-  bottom: -2px;
-  -webkit-animation: ${bounce} 2s;
-  animation: ${bounce} 2s;
-  -webkit-animation-iteration-count: 2;
-  animation-iteration-count: 2;
-  animation-fill-mode: backwords;
-  -webkit-animation-fill-mode: backwords;
-  animation-delay: 6s;
-  -webkit-animation-delay: 6s;
-  path {
-    stroke: ${color.black};
-  }
-  width: 24px;
-  height: 24px;
-`;
-
 export const SectionContainer = styled.div`
   padding-left: 20px;
   padding-top: 4%;
 `;
 
-export const ScrollContainer = styled.div`
-  position: absolute;
-  left: 40px;
-  bottom: 73px;
-`;
-
-export const GeneralSectionContainer = styled.div`
-  padding-left: 30px;
-  width: 100%;
-`;
-
-export const ConnectContainer = styled.div<ButtonProps>`
-  ${({ isVisible }): string => {
-    return isVisible
-      ? `
-        background: rgba(255, 255, 255, 0.46);
-        backdrop-filter: blur(4px);
-        z-index: 100;
-        width: 460px;
-        padding-top: 40px;
-        padding-bottom: 40px;
-        position: relative;
-      `
-      : "";
-  }};
-  ${({ isVisible }) =>
-    isVisible === true
-      ? css``
-      : css`
-          animation: ${disappear}, ${fadeIn};
-          animation-duration: 0.5s, 0.5s;
-          animation-delay: 0s, 0.5s;
-        `};
-`;
-
 export const SocialsContainer = styled.div`
   display: flex;
   flex-direction: column;
   margin: 8px 0px;
 `;
 
-export const SocialLink = styled.div`
+export const ButtonRow = styled.div`
+  position: relative;
   display: flex;
-  align-items: center;
-  gap: 8px;
+  gap: 16px;
+`;
+
+export const ArrowUp = styled(ArrowUpRightIcon)`
+  margin: 0 0 0 13px !important;
+  path {
+    stroke: ${color.white};
+  }
 `;
+
+interface ButtonProps {
+  isVisible: boolean;
+}
+
+export const ButtonContainer = styled.div<ButtonProps>`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  z-index: 100;
+  ${PrimaryButton} {
+    max-height: 45px;
+    gap: 8px;
+    &:hover {
+      ${ArrowUp} {
+        path {
+          stroke: ${color.black};
+        }
+      }
+    }
+  }
+`;
\ No newline at end of file
diff --git a/frontend/src/pages/onboarding/onboarding.tsx b/frontend/src/pages/onboarding/onboarding.tsx
index 7205d4381..61d02ba10 100644
--- a/frontend/src/pages/onboarding/onboarding.tsx
+++ b/frontend/src/pages/onboarding/onboarding.tsx
@@ -144,6 +144,15 @@ export const Onboarding: FC = () => {
           <Footer />
         </FooterContainer>
       </OnboardingContainer>
+      {showAnimation ? (
+        <KreadContainer height={height} width={width} showSlider={showSlider}>
+          <AnimatedLogo iteration={1} />
+        </KreadContainer>
+      ) : (
+        <LogoContainer>
+          <KreadLogo />
+        </LogoContainer>
+      )}
       <FadeInOut show={showWidget}>
         <Kado show={showWidget} toggleWidget={toggleWidget} />
         <Overlay />
diff --git a/frontend/src/reset.css b/frontend/src/reset.css
index d7347ea8f..04035288b 100644
--- a/frontend/src/reset.css
+++ b/frontend/src/reset.css
@@ -20,11 +20,19 @@ html {
   margin: 0;
   height: 100%;
   overflow: hidden;
+  @media (max-width: 768px) {
+    max-width: 100vw;
+    min-width: auto !important;
+  }
 }
 
 body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
+  @media (max-width: 768px) {
+    max-width: 100vw;
+    min-width: auto;
+  }
 }
 
 img, picture, video, canvas, svg {

From d9952b10eaef8c32e464c489154da68e04e5e767 Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Mon, 11 Dec 2023 15:44:27 +0100
Subject: [PATCH 10/17] fix animation and connect-wallet page

---
 .../src/components/main-container/styles.ts   |   2 +-
 .../components/notification-detail/styles.ts  |   6 +-
 frontend/src/navigation/routes.tsx            |   3 +-
 .../connect-wallet-mobile.tsx                 | 110 +++++++
 .../src/pages/connect-wallet-mobile/index.ts  |   1 +
 .../src/pages/connect-wallet-mobile/styles.ts | 286 ++++++++++++++++++
 .../onboarding-mobile/onboarding-mobile.tsx   |   4 +-
 .../src/pages/onboarding-mobile/styles.ts     |  39 ++-
 8 files changed, 432 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx
 create mode 100644 frontend/src/pages/connect-wallet-mobile/index.ts
 create mode 100644 frontend/src/pages/connect-wallet-mobile/styles.ts

diff --git a/frontend/src/components/main-container/styles.ts b/frontend/src/components/main-container/styles.ts
index ee618229f..3c694f220 100644
--- a/frontend/src/components/main-container/styles.ts
+++ b/frontend/src/components/main-container/styles.ts
@@ -6,7 +6,7 @@ interface MainProps {
 
 export const MainWrap = styled.div<MainProps>`
   display: flex;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   flex-direction: column;
   overflow: hidden;
diff --git a/frontend/src/components/notification-detail/styles.ts b/frontend/src/components/notification-detail/styles.ts
index 39bfae8c2..e22ff95d6 100644
--- a/frontend/src/components/notification-detail/styles.ts
+++ b/frontend/src/components/notification-detail/styles.ts
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { CloseIcon, ExclamationIcon, TickIcon } from "../../assets";
-import { color, margins } from "../../design";
+import { breakpoints, color, margins } from "../../design";
 import { HeaderHorizontalDivider, NavigationTitle } from "../atoms";
 
 export const ToastContainer = styled.div`
@@ -18,6 +18,10 @@ export const ToastContainer = styled.div`
   position: absolute;
   left: 40px;
   height: fit-content;
+
+  @media (max-width: ${breakpoints.tablet}) {
+    width: 100vw;
+  }
 `;
 
 export const Tick = styled(TickIcon)`
diff --git a/frontend/src/navigation/routes.tsx b/frontend/src/navigation/routes.tsx
index 76886d4a4..7659fd66e 100644
--- a/frontend/src/navigation/routes.tsx
+++ b/frontend/src/navigation/routes.tsx
@@ -11,6 +11,7 @@ import { MobileNotAvailable } from "../pages/mobile-not-available";
 import { useIsMobile } from "../hooks";
 import { breakpoints } from "../design";
 import { OnboardingMobile } from "../pages/onboarding-mobile/onboarding-mobile";
+import { ConnectWalletMobile } from "../pages/connect-wallet-mobile/connect-wallet-mobile";
 
 export const InternalAppWrapper = () => {
   return (
@@ -45,7 +46,7 @@ export const InternalAppRoutes: FC = () => {
   </>
   const mobileRoutes = <>
     {Object.values(desktopOnlyPaths).map((path, index) => <Route path={path} element={<MobileNotAvailable />} key={index} />)}
-    <Route path={routes.connectWallet} element={<ConnectWallet />} />
+    <Route path={routes.connectWallet} element={<ConnectWalletMobile />} />
     <Route path={routes.character} element={<LandingMobile />} />
     <Route path={routes.createCharacter} element={<CreateCharacterMobile />} />
     <Route path="*" element={<ErrorView />} />
diff --git a/frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx b/frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx
new file mode 100644
index 000000000..eabee90cc
--- /dev/null
+++ b/frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx
@@ -0,0 +1,110 @@
+import React, { FC, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { KeplerIcon, text } from "../../assets";
+import { breakpoints, color } from "../../design";
+import {
+  ButtonText,
+  FadeInOut,
+  Footer,
+  Kado,
+  KeplerIconWrapper,
+  LoadingPage,
+  MenuText,
+  NotificationDetail,
+  OnboardingCharacter,
+  Overlay,
+  PrimaryButton,
+  TitleText,
+} from "../../components";
+import {
+  ArrowUp,
+  ButtonContainer,
+  FooterContainer,
+  InfoText,
+  KreadLogo,
+  LogoContainer,
+  OnboardingContainer,
+  OnboardingWrapper,
+  SectionContainer,
+  TextContainer,
+} from "./styles";
+import { useIsMobile, useOnScreen, useViewport } from "../../hooks";
+import { useAgoricContext } from "../../context/agoric";
+import { routes } from "../../navigation";
+import { ButtonRow } from "../onboarding/styles";
+import { NotificationWrapper } from "../../components/notification-detail/styles";
+
+export const ConnectWalletMobile: FC = () => {
+  const [service, _] = useAgoricContext();
+  const navigate = useNavigate();
+  const { width, height } = useViewport();
+  const [isLoading, setIsLoading] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const isConnectButtonVisible = useOnScreen(ref);
+  const isMobile = useIsMobile(breakpoints.tablet);
+  const [showWidget, setShowWidget] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+
+  const toggleWidget = () => {
+    setShowWidget(!showWidget);
+  };
+  const showAnimation = false;
+
+  const provisionWallet = async () => {
+    setIsLoading(true);
+    try {
+      await service.walletConnection.provisionSmartWallet();
+    } catch (e) {
+      setIsLoading(false);
+      setShowToast(true);
+    }
+  };
+
+  if (!service.walletConnection.address) return <LoadingPage spinner={false} />;
+  if (service.status.walletProvisioned) navigate(routes.character);
+
+  return (
+    <OnboardingWrapper>
+      <LogoContainer>
+        <KreadLogo />
+      </LogoContainer>
+      <OnboardingContainer height={height} width={width} showAnimation={showAnimation}>
+        <InfoText height={height}>
+          <SectionContainer>
+            <MenuText>{text.general.activateSmartWallet}</MenuText>
+            <TextContainer customColor={color.darkGrey}>{text.general.activateSmartWalletDescription}</TextContainer>
+          </SectionContainer>
+        </InfoText>
+        <ButtonContainer isVisible={isConnectButtonVisible}>
+          <PrimaryButton onClick={() => provisionWallet()}>
+            <KeplerIconWrapper>
+              <KeplerIcon />
+            </KeplerIconWrapper>
+            <ButtonText customColor={color.white}>{text.general.activateWallet}</ButtonText>
+            {isLoading ? <LoadingPage /> : <ArrowUp />}
+          </PrimaryButton>
+          <PrimaryButton onClick={toggleWidget}>
+            <ButtonText customColor={color.white}>{text.store.buyAssets}</ButtonText>
+            <ArrowUp />
+          </PrimaryButton>
+        </ButtonContainer>
+      </OnboardingContainer>
+      <Footer />
+      <FadeInOut show={showWidget}>
+        <Kado show={showWidget} toggleWidget={toggleWidget} />
+        <Overlay />
+      </FadeInOut>
+      <FadeInOut show={showToast} exiting={!showToast}>
+        {showToast && <Overlay isOnTop={true} />}
+        <NotificationWrapper showNotification={showToast}>
+          <NotificationDetail
+            title={text.error.provisionError}
+            info={text.error.notEnoughBLD}
+            closeToast={() => setShowToast(false)}
+            isError
+          />
+        </NotificationWrapper>
+      </FadeInOut>
+    </OnboardingWrapper>
+  );
+};
diff --git a/frontend/src/pages/connect-wallet-mobile/index.ts b/frontend/src/pages/connect-wallet-mobile/index.ts
new file mode 100644
index 000000000..3c5ccb427
--- /dev/null
+++ b/frontend/src/pages/connect-wallet-mobile/index.ts
@@ -0,0 +1 @@
+export * from "./connect-wallet";
diff --git a/frontend/src/pages/connect-wallet-mobile/styles.ts b/frontend/src/pages/connect-wallet-mobile/styles.ts
new file mode 100644
index 000000000..e7e24880f
--- /dev/null
+++ b/frontend/src/pages/connect-wallet-mobile/styles.ts
@@ -0,0 +1,286 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ArrowDownIcon, ArrowUpRightIcon } from "../../assets";
+import { bounce, changeSize, CharacterImgs, disappear, fadeIn, PrimaryButton, slideUp, TitleText } from "../../components";
+import { KreadIcon } from "../../components/logo/styles";
+import { color, fontWeight, zIndex } from "../../design";
+import { ButtonRow } from "../onboarding/styles";
+
+interface HeightProps {
+  height: number;
+}
+
+export const OnboardingWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+`;
+
+export const InfoText = styled.div<HeightProps>`
+${TitleText} {
+  margin-top: 8px;
+}
+width: 100%;
+margin-bottom: 200px;
+background-size: cover;
+scroll-snap-align: start;
+transition: all 0.4s;
+`;
+
+export const ArrowUp = styled(ArrowUpRightIcon)`
+  margin: 0 0 0 13px !important;
+  path {
+    stroke: ${color.white};
+  }
+`;
+
+interface ButtonProps {
+  isVisible: boolean;
+}
+
+export const ButtonContainer = styled.div<ButtonProps>`
+ display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
+  gap: 16px;
+  z-index: 100;
+  align-items: center;
+  ${PrimaryButton} {
+    gap: 8px;
+    &:hover {
+      ${ArrowUp} {
+        path {
+          stroke: ${color.black};
+        }
+      }
+    }
+  }
+  ${({ isVisible }): string => {
+    return isVisible
+      ? `
+      ${ButtonRow} {
+        -webkit-transition: 0.3s ease-out;
+        transition: 0.3s ease-out;
+        will-change: transform;
+      };
+      background: rgba(255, 255, 255, 0.46);
+      backdrop-filter: blur(4px);
+        `
+      : `
+      ${ButtonRow} {
+        z-index: 100;
+      }
+      `;
+  }};
+
+  ${({ isVisible }) =>
+    isVisible === true
+      ? css``
+      : css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 0.5s, 0.5s;
+          animation-delay: 0s, 0.5s;
+        `};
+`;
+
+export const ArrowUpRight = styled(ArrowUpRightIcon)`
+  margin: 0 0 0 13px !important;
+`;
+
+export const EndContent = styled.div<HeightProps>`
+  ${({ height }): string => `height: ${height - 100}px; min-height: ${height - 100}px;`};
+  ${TitleText} {
+    margin-top: 16px;
+  }
+  width: 100%;
+  height: 100vh;
+  background-size: cover;
+  scroll-snap-align: start;
+  padding-top: 110px;
+`;
+
+export const MiddleContent = styled.div<HeightProps>`
+  ${({ height }): string => `height: ${height}px; min-height: ${height}px;`};
+  ${TitleText} {
+    margin-top: 16px;
+  }
+  width: 100%;
+  height: 100vh;
+  background-size: cover;
+  scroll-snap-align: start;
+  padding-top: 110px;
+`;
+
+interface ViewProps {
+  height: number;
+  width: number;
+  showSlider?: boolean;
+  showAnimation?: boolean;
+}
+export const OnboardingContainer = styled.div<ViewProps>`
+  height: 100%;
+  scroll-snap-type: y mandatory;
+  padding: 10px 10px 10px 10px;
+  transition: all 0.4s;
+  animation: ${disappear}, ${fadeIn};
+  animation-duration: 5s, 0.5s;
+  animation-delay: 0s, 5s;
+  ${({ showAnimation }) =>
+    showAnimation
+      ? css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 5s, 0.5s;
+          animation-delay: 0s, 5s;
+        `
+      : css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 0.8s, 0.5s;
+          animation-delay: 0s, 0.8s;
+        `};
+`;
+
+export const DefaultImage = styled(CharacterImgs)<ViewProps>`
+  position: absolute;
+  right: 358px;
+  top: 0;
+`;
+
+export const Link = styled.a`
+  text-decoration: underline;
+  font-weight: ${fontWeight.light};
+  font-size: 24px;
+  line-height: 31px;
+  :first-letter {
+    text-transform: capitalize;
+  }
+  color: ${color.darkGrey};
+  display: inline;
+  margin-left: 5px;
+`;
+
+export const KryhaLink = styled(Link)`
+  margin-left: 0;
+`;
+
+export const TextContainer = styled.span`
+  font-weight: ${fontWeight.light};
+  font-size: 16px;
+  line-height: 22px;
+  :first-letter {
+    text-transform: capitalize;
+  }
+  display: inline-block;
+  color: ${color.darkGrey};
+  margin-top: 8px;
+`;
+
+export const KreadLogo = styled(KreadIcon)`
+  animation: ${disappear}, ${fadeIn};
+  animation-duration: 0.8s, 0.5s;
+  animation-delay: 0s, 0.8s;
+`;
+
+export const LogoContainer = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  margin-top: 30px;
+  ${KreadLogo} {
+    width: 100px;
+    height: 24px;
+  }
+`;
+
+export const KreadContainer = styled.div<ViewProps>`
+  ${KreadIcon} {
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 500px;
+    height: 150px;
+    animation: ${changeSize} 4s 1;
+    animation-fill-mode: forwards;
+    animation-delay: 3.8s;
+  }
+  ${({ showSlider }) =>
+    showSlider &&
+    css`
+      animation: ${slideUp};
+      animation-duration: 0.7s;
+      animation-delay: 0s;
+      animation-fill-mode: forwards;
+      ${KreadIcon} {
+        position: absolute;
+        left: 0;
+        transform: translate(-45%, 0);
+        top: 50%;
+        bottom: 50%;
+        width: 100px;
+        height: 24px;
+      }
+    `};
+`;
+
+export const ArrowDown = styled(ArrowDownIcon)`
+  position: absolute;
+  left: 40px;
+  bottom: -2px;
+  -webkit-animation: ${bounce} 2s;
+  animation: ${bounce} 2s;
+  -webkit-animation-iteration-count: 2;
+  animation-iteration-count: 2;
+  animation-fill-mode: backwords;
+  -webkit-animation-fill-mode: backwords;
+  animation-delay: 6s;
+  -webkit-animation-delay: 6s;
+  path {
+    stroke: ${color.black};
+  }
+  width: 24px;
+  height: 24px;
+`;
+
+export const SectionContainer = styled.div`
+  padding-left: 20px;
+  padding-top: 4%;
+`;
+
+export const ScrollContainer = styled.div`
+  position: absolute;
+  left: 40px;
+  bottom: 73px;
+`;
+
+export const GeneralSectionContainer = styled.div`
+  padding-left: 40px;
+  width: 460px;
+`;
+
+export const ConnectContainer = styled.div<ButtonProps>`
+  ${({ isVisible }): string => {
+    return isVisible
+      ? `
+        background: rgba(255, 255, 255, 0.46);
+        backdrop-filter: blur(4px);
+        z-index: 100;
+        width: 460px;
+        padding-top: 40px;
+        padding-bottom: 40px;
+        position: relative;
+      `
+      : "";
+  }};
+  ${({ isVisible }) =>
+    isVisible === true
+      ? css``
+      : css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 0.5s, 0.5s;
+          animation-delay: 0s, 0.5s;
+        `};
+`;
diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
index 35b320acc..05f908ff1 100644
--- a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
+++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -63,7 +63,7 @@ export const OnboardingMobile: FC = () => {
     localStorage.setItem(FIRST_TIME, "false");
     setShowAnimation(false);
   };
-
+  console.log(showSlider)
   return (
     <OnboardingWrapper>
       {showAnimation ? (
@@ -75,7 +75,7 @@ export const OnboardingMobile: FC = () => {
           <KreadLogo />
         </LogoContainer>
       )}
-      <OnboardingContainer>
+      <OnboardingContainer showAnimation={showAnimation}>
         <InfoText>
           <SectionContainer>
             <TextContainer customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TextContainer>
diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts
index 2ef90ca12..4b2829916 100644
--- a/frontend/src/pages/onboarding-mobile/styles.ts
+++ b/frontend/src/pages/onboarding-mobile/styles.ts
@@ -16,12 +16,28 @@ export const OnboardingWrapper = styled.div`
   height: 100vh;
 `;
 
-export const OnboardingContainer = styled.div`
+export const OnboardingContainer = styled.div<ViewProps>`
   height: 100%;
   scroll-behavior: smooth;
   overflow: auto;
   scroll-snap-type: y mandatory;
   padding: 10px 10px 10px 10px;
+  transition: all 0.4s;
+  animation: ${disappear}, ${fadeIn};
+  animation-duration: 5s, 0.5s;
+  animation-delay: 0s, 5s;
+  ${({ showAnimation }) =>
+    showAnimation
+      ? css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 5s, 0.5s;
+          animation-delay: 0s, 5s;
+        `
+      : css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 0.8s, 0.5s;
+          animation-delay: 0s, 0.8s;
+        `};
 `;
 
 export const OnboardingCharacterWrapper = styled.div`
@@ -68,8 +84,8 @@ export const EndContent = styled.div<HeightProps>`
 `;
 
 interface ViewProps {
-  height: number;
-  width: number;
+  height?: number;
+  width?: number;
   showSlider?: boolean;
   showAnimation?: boolean;
 }
@@ -143,8 +159,7 @@ export const KreadContainer = styled.div<ViewProps>`
     position: absolute;
     left: 0;
     right: 0;
-    width: 500px;
-    height: 150px;
+    width: 80%;
     animation: ${changeSize} 4s 1;
     animation-fill-mode: forwards;
     animation-delay: 3.8s;
@@ -152,16 +167,12 @@ export const KreadContainer = styled.div<ViewProps>`
   ${({ showSlider }) =>
     showSlider &&
     css`
-      animation: ${slideUp};
-      animation-duration: 0.7s;
-      animation-delay: 0s;
-      animation-fill-mode: forwards;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    margin-top: 30px;
       ${KreadIcon} {
-        position: absolute;
-        left: 0;
-        transform: translate(-45%, 0);
-        top: 50%;
-        bottom: 50%;
+        position: relative;
         width: 100px;
         height: 24px;
       }

From 3d3bf6154a4ff920d76c3715d90721a6661f66e5 Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Mon, 11 Dec 2023 16:35:16 +0100
Subject: [PATCH 11/17] fix kado popup

---
 frontend/src/components/kado-on-ramp/styles.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/kado-on-ramp/styles.ts b/frontend/src/components/kado-on-ramp/styles.ts
index a963251ce..0ec12c98c 100644
--- a/frontend/src/components/kado-on-ramp/styles.ts
+++ b/frontend/src/components/kado-on-ramp/styles.ts
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { color } from "../../design";
+import { breakpoints, color } from "../../design";
 
 export const KadoContainer = styled.div`
   display: flex;
@@ -12,6 +12,11 @@ export const KadoContainer = styled.div`
     border-radius: 24px;
     width: 500px;
     height: 700px;
+
+    @media (max-width: ${breakpoints.tablet}) {
+      width: 100vw;
+      height: 80vh;
+    }
   }
 `;
 

From eae9ebfd33b98fbc3dbb3c02cdcff12bf05e8353 Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Tue, 12 Dec 2023 11:04:55 +0100
Subject: [PATCH 12/17] fix onboarding character

---
 frontend/src/components/atoms/image.ts        |  32 +++-
 frontend/src/components/index.ts              |   1 +
 .../onboarding-character-mobile/index.ts      |   1 +
 .../onboarding-character-mobile.tsx           |  51 ++++++
 .../onboarding-character-mobile/styles.ts     |  56 ++++++
 .../onboarding-character.tsx                  |  42 ++++-
 .../components/onboarding-character/styles.ts | 164 +++++++++++++++++-
 .../connect-wallet-mobile.tsx                 |   3 -
 .../src/pages/connect-wallet-mobile/index.ts  |   2 +-
 .../src/pages/connect-wallet-mobile/styles.ts |   5 +-
 .../onboarding-mobile/onboarding-mobile.tsx   |   4 +-
 11 files changed, 337 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/onboarding-character-mobile/index.ts
 create mode 100644 frontend/src/components/onboarding-character-mobile/onboarding-character-mobile.tsx
 create mode 100644 frontend/src/components/onboarding-character-mobile/styles.ts

diff --git a/frontend/src/components/atoms/image.ts b/frontend/src/components/atoms/image.ts
index 5986788b2..bcd82d7c2 100644
--- a/frontend/src/components/atoms/image.ts
+++ b/frontend/src/components/atoms/image.ts
@@ -1,4 +1,6 @@
 import styled from "@emotion/styled";
+import { EXTRA_LARGE_SCREEN_SIZE, LARGE_SCREEN_SIZE, MEDIUM_SCREEN_SIZE, SMALL_SCREEN_SIZE } from "../../constants";
+import { breakpoints } from "../../design";
 
 export interface ImageProps {
   src?: string;
@@ -21,15 +23,43 @@ 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; ";
+    }
+  }};
+  }
+`;
+
+export interface CharacterImageMobileProps {
+  zIndex?: number;
+  src?: string;
+}
+
+export const CharacterImgsMobile = styled.img<CharacterImageMobileProps>`
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
-  object-fit: contain;
+  object-fit: contain;  
 `;
\ No newline at end of file
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 43182a9c3..8d88dc255 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -27,6 +27,7 @@ export * from "./notification-detail";
 export * from "./footer";
 export * from "./fade-in-out";
 export * from "./onboarding-character";
+export * from "./onboarding-character-mobile";
 export * from "./logo";
 export * from "./load-more";
 export * from "./kado-on-ramp";
diff --git a/frontend/src/components/onboarding-character-mobile/index.ts b/frontend/src/components/onboarding-character-mobile/index.ts
new file mode 100644
index 000000000..53c0c8d12
--- /dev/null
+++ b/frontend/src/components/onboarding-character-mobile/index.ts
@@ -0,0 +1 @@
+export * from "./onboarding-character-mobile";
diff --git a/frontend/src/components/onboarding-character-mobile/onboarding-character-mobile.tsx b/frontend/src/components/onboarding-character-mobile/onboarding-character-mobile.tsx
new file mode 100644
index 000000000..2bba95796
--- /dev/null
+++ b/frontend/src/components/onboarding-character-mobile/onboarding-character-mobile.tsx
@@ -0,0 +1,51 @@
+import { FC, useEffect, useState } from "react";
+
+import { CharacterContainer, CharacterSwitchIcon, FifthIcon, FirstIcon, FourthIcon, ThirdIcon } from "./styles";
+import { useViewport } from "../../hooks";
+import {
+  ArmaCitizen,
+  ArmaPerk_I6,
+  ArmaPerk_I7,
+  ElephiaCitizen,
+  Empty,
+  Headpiece_Arma_3,
+  Headpiece_Arma_5,
+  Headpiece_Farma_4,
+  Legendary_Garment_Arma_7,
+  Mask_Elephia_24,
+  Mask_Elephia_32,
+  Mask_Mount_3,
+  Rare_Garment_Arma_2,
+  text,
+  Uncommon_Garment_Arma_1,
+} from "../../assets";
+import { zIndex } from "../../design";
+
+const characterImages = [ArmaCitizen, ElephiaCitizen];
+const headPieceImages = [Headpiece_Arma_3, Headpiece_Farma_4, Headpiece_Arma_5, Empty];
+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];
+
+export const OnboardingCharacterMobile: FC = () => {
+  const { width, height } = useViewport();
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentIndex(Math.floor(Math.random() * 3.5));
+    }, 5000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <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>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/components/onboarding-character-mobile/styles.ts b/frontend/src/components/onboarding-character-mobile/styles.ts
new file mode 100644
index 000000000..3c449d147
--- /dev/null
+++ b/frontend/src/components/onboarding-character-mobile/styles.ts
@@ -0,0 +1,56 @@
+import styled from "@emotion/styled";
+import { CharacterImgsMobile, sequentialFadeIn } from "../atoms";
+import { zIndex as zIndexProps } from "../../design/spacing";
+import { breakpoints } from "../../design";
+
+export const CharacterContainer = styled.div`
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+  @media (max-width: ${breakpoints.tablet}) {
+    opacity: 0.5;
+  }
+`;
+
+export const CharacterSwitchIcon = styled(CharacterImgsMobile)`
+  opacity: 0;
+  animation: ${sequentialFadeIn} 5s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-delay: 1.5s;
+`;
+export const FirstIcon = styled(CharacterImgsMobile)`
+  ${({ zIndex }): string => `z-index: ${zIndex || zIndexProps.mid};`};
+  opacity: 0;
+  animation: ${sequentialFadeIn} 5s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-delay: 500ms;
+`;
+
+export const SecondIcon = styled(FirstIcon)`
+  opacity: 0;
+  animation: ${sequentialFadeIn} 5s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-delay: 1s;
+`;
+
+export const ThirdIcon = styled(FirstIcon)`
+  opacity: 0;
+  animation: ${sequentialFadeIn} 5s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-delay: 1.5s;
+`;
+
+export const FourthIcon = styled(FirstIcon)`
+  opacity: 0;
+  animation: ${sequentialFadeIn} 5s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-delay: 2s;
+`;
+
+export const FifthIcon = styled(FirstIcon)`
+  opacity: 0;
+  animation: ${sequentialFadeIn} 5s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-delay: 2.5s;
+`;
\ No newline at end of file
diff --git a/frontend/src/components/onboarding-character/onboarding-character.tsx b/frontend/src/components/onboarding-character/onboarding-character.tsx
index cc4916963..865ebbe67 100644
--- a/frontend/src/components/onboarding-character/onboarding-character.tsx
+++ b/frontend/src/components/onboarding-character/onboarding-character.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from "react";
 
-import { CharacterContainer, CharacterSwitchIcon, FifthIcon, FirstIcon, FourthIcon, ThirdIcon } from "./styles";
+import { CharacterContainer, CharacterSwitchIcon, CharacterWrapper, FifthIcon, FirstIcon, FourthIcon, ThirdIcon } from "./styles";
 import { useViewport } from "../../hooks";
 import {
   ArmaCitizen,
@@ -27,7 +27,11 @@ 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];
 
-export const OnboardingCharacter: FC = () => {
+interface Props {
+  size?: "mini" | "medium" | "half" | "normal" | "large" | "extraLarge";
+  isZoomed?: boolean;
+}
+export const OnboardingCharacter: FC<Props> = ({ size, isZoomed }) => {
   const { width, height } = useViewport();
   const [currentIndex, setCurrentIndex] = useState(0);
 
@@ -40,12 +44,32 @@ export const OnboardingCharacter: FC = () => {
   }, []);
 
   return (
-    <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>
+    <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>
   );
 };
\ No newline at end of file
diff --git a/frontend/src/components/onboarding-character/styles.ts b/frontend/src/components/onboarding-character/styles.ts
index 8ad7475b6..1f4bf25df 100644
--- a/frontend/src/components/onboarding-character/styles.ts
+++ b/frontend/src/components/onboarding-character/styles.ts
@@ -1,15 +1,162 @@
 import styled from "@emotion/styled";
-import { CharacterImgs, sequentialFadeIn } from "../atoms";
+
+import { breakpoints, margins } from "../../design";
+import { CharacterImgs, SecondaryButton, sequentialFadeIn, zoomClothing, zoomIn } from "../atoms";
 import { zIndex as zIndexProps } from "../../design/spacing";
-import { breakpoints } from "../../design";
+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;
+}
+
+interface ViewProps {
+  width: number;
+}
+
+export const ExpandButton = styled(SecondaryButton)<ViewProps>`
+  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;
+  }
+`;
+
+export const CharacterIcon = styled(CharacterImgs)`
+  position: absolute;
+  top: 0;
+  ${({ zIndex }): string => `z-index: ${zIndex || zIndexProps.character};`};
+`;
 
-export const CharacterContainer = styled.div`
+export const CharacterWrapper = styled.div<ImageProps>`
   position: absolute;
-  height: 100%;
-  width: 100%;
-  z-index: -1;
+  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``};
+
   @media (max-width: ${breakpoints.tablet}) {
-    opacity: 0.5;
+    width: 100%;
+    height: 100%;
   }
 `;
 
@@ -20,6 +167,9 @@ export const CharacterSwitchIcon = styled(CharacterImgs)`
   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;
diff --git a/frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx b/frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx
index eabee90cc..c28a0a9ea 100644
--- a/frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx
+++ b/frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx
@@ -11,15 +11,12 @@ import {
   LoadingPage,
   MenuText,
   NotificationDetail,
-  OnboardingCharacter,
   Overlay,
   PrimaryButton,
-  TitleText,
 } from "../../components";
 import {
   ArrowUp,
   ButtonContainer,
-  FooterContainer,
   InfoText,
   KreadLogo,
   LogoContainer,
diff --git a/frontend/src/pages/connect-wallet-mobile/index.ts b/frontend/src/pages/connect-wallet-mobile/index.ts
index 3c5ccb427..700139419 100644
--- a/frontend/src/pages/connect-wallet-mobile/index.ts
+++ b/frontend/src/pages/connect-wallet-mobile/index.ts
@@ -1 +1 @@
-export * from "./connect-wallet";
+export * from "./connect-wallet-mobile";
diff --git a/frontend/src/pages/connect-wallet-mobile/styles.ts b/frontend/src/pages/connect-wallet-mobile/styles.ts
index e7e24880f..ece930d2f 100644
--- a/frontend/src/pages/connect-wallet-mobile/styles.ts
+++ b/frontend/src/pages/connect-wallet-mobile/styles.ts
@@ -164,7 +164,10 @@ export const KryhaLink = styled(Link)`
   margin-left: 0;
 `;
 
-export const TextContainer = styled.span`
+interface TextProps {
+  customColor?: string;
+}
+export const TextContainer = styled.span<TextProps>`
   font-weight: ${fontWeight.light};
   font-size: 16px;
   line-height: 22px;
diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
index 05f908ff1..cefce8769 100644
--- a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
+++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -11,7 +11,7 @@ import {
   Kado,
   KeplerIconWrapper,
   MenuText,
-  OnboardingCharacter,
+  OnboardingCharacterMobile,
   Overlay,
   PrimaryButton,
 } from "../../components";
@@ -81,7 +81,7 @@ export const OnboardingMobile: FC = () => {
             <TextContainer customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TextContainer>
           </SectionContainer>
           <OnboardingCharacterWrapper>
-            <OnboardingCharacter />
+            <OnboardingCharacterMobile/>
           </OnboardingCharacterWrapper>
           <ButtonContainer isVisible={isConnectButtonVisible}>
             <ButtonRow>

From 2c1e9eef9f567a80b63f9585ef69a16aca3fdcaa Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Tue, 12 Dec 2023 11:33:30 +0100
Subject: [PATCH 13/17] fix privacy screen

---
 frontend/src/components/atoms/text.ts         |  1 +
 frontend/src/navigation/routes.tsx            |  3 +-
 frontend/src/pages/content-mobile/index.ts    |  1 +
 .../pages/content-mobile/privacy-mobile.tsx   | 30 +++++++++++++
 frontend/src/pages/content-mobile/styles.ts   | 43 +++++++++++++++++++
 .../onboarding-mobile/onboarding-mobile.tsx   |  5 ++-
 .../src/pages/onboarding-mobile/styles.ts     |  4 +-
 7 files changed, 82 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/pages/content-mobile/index.ts
 create mode 100644 frontend/src/pages/content-mobile/privacy-mobile.tsx
 create mode 100644 frontend/src/pages/content-mobile/styles.ts

diff --git a/frontend/src/components/atoms/text.ts b/frontend/src/components/atoms/text.ts
index 3c7f42fb8..813258a76 100644
--- a/frontend/src/components/atoms/text.ts
+++ b/frontend/src/components/atoms/text.ts
@@ -86,6 +86,7 @@ export const TitleText = styled.h3<TextProps>`
 
   @media screen and (max-width: ${breakpoints.tablet}) {
     font-size: 16px;
+    line-height: 23px;
   }
 `;
 
diff --git a/frontend/src/navigation/routes.tsx b/frontend/src/navigation/routes.tsx
index 7659fd66e..9f9ab47f8 100644
--- a/frontend/src/navigation/routes.tsx
+++ b/frontend/src/navigation/routes.tsx
@@ -12,6 +12,7 @@ import { useIsMobile } from "../hooks";
 import { breakpoints } from "../design";
 import { OnboardingMobile } from "../pages/onboarding-mobile/onboarding-mobile";
 import { ConnectWalletMobile } from "../pages/connect-wallet-mobile/connect-wallet-mobile";
+import { PrivacyMobile } from "../pages/content-mobile";
 
 export const InternalAppWrapper = () => {
   return (
@@ -69,7 +70,7 @@ export const ExternalAppRoutes: FC = () => {
       <MainContainer>
         <Routes>
           <Route path={routes.root} element={isMobile ? <OnboardingMobile /> : <Onboarding />} />
-          <Route path={routes.privacy} element={<Privacy />} />
+          <Route path={routes.privacy} element={isMobile ? <PrivacyMobile /> : <Privacy />} />
           <Route path="*" element={<InternalAppWrapper />} />
         </Routes>
       </MainContainer>
diff --git a/frontend/src/pages/content-mobile/index.ts b/frontend/src/pages/content-mobile/index.ts
new file mode 100644
index 000000000..322ec3e22
--- /dev/null
+++ b/frontend/src/pages/content-mobile/index.ts
@@ -0,0 +1 @@
+export * from "./privacy-mobile";
diff --git a/frontend/src/pages/content-mobile/privacy-mobile.tsx b/frontend/src/pages/content-mobile/privacy-mobile.tsx
new file mode 100644
index 000000000..fe2aacc09
--- /dev/null
+++ b/frontend/src/pages/content-mobile/privacy-mobile.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { text } from "../../assets";
+import { Footer, FormText, MenuText, TitleText } from "../../components";
+import { KreadIcon } from "../../components/logo/styles";
+import { color } from "../../design";
+import { ContentWrapper, FooterContainer, GeneralInfo, InfoContainer, KreadContainer, Title } from "./styles";
+
+// TODO: make content for privacy page
+export const PrivacyMobile: FC = () => {
+  return (
+    <>
+      <KreadContainer>
+        <KreadIcon />
+      </KreadContainer>
+      <ContentWrapper>
+        <InfoContainer>
+          <MenuText>{text.content.privacyAndTerms}</MenuText>
+          <TitleText customColor={color.darkGrey}>{text.content.weAreCommittedTo}</TitleText>
+          <GeneralInfo>
+            <Title>{text.content.whatInformationDoWe}</Title>
+            <FormText customColor={color.darkGrey}>{text.content.weCollectPersonal}</FormText>
+            <Title>{text.content.whatInformationDoWe}</Title>
+            <FormText customColor={color.darkGrey}>{text.content.weUseTheInformation}</FormText>
+          </GeneralInfo>
+        </InfoContainer>
+      </ContentWrapper>
+      <Footer />
+    </>
+  );
+};
diff --git a/frontend/src/pages/content-mobile/styles.ts b/frontend/src/pages/content-mobile/styles.ts
new file mode 100644
index 000000000..c226c2d87
--- /dev/null
+++ b/frontend/src/pages/content-mobile/styles.ts
@@ -0,0 +1,43 @@
+import styled from "@emotion/styled";
+import { FormText, TitleText } from "../../components";
+import { KreadIcon } from "../../components/logo/styles";
+import { margins } from "../../design";
+
+export const ContentWrapper = styled.div`
+  padding: 10px;
+  overflow-y: scroll;
+  width: 100vw;
+`;
+export const Title = styled(FormText)``;
+
+export const InfoContainer = styled.div`
+  padding-left: 20px;
+  padding-top: 4%;
+  ${TitleText} {
+    margin-top: ${margins.mini};
+    margin-bottom: 28px;
+  }
+  ${Title} {
+    margin-top: ${margins.mini};
+  }
+  ${FormText} {
+    margin-top: ${margins.mini};
+    margin-bottom: 28px;
+  }
+  width: 100%;
+`;
+
+export const GeneralInfo = styled.div`
+  width: 100%;
+`;
+
+export const KreadContainer = styled.div`
+display: flex;
+flex: 1;
+justify-content: center;
+margin-top: 30px;
+${KreadIcon} {
+  width: 100px;
+  height: 24px;
+}
+`;
diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
index cefce8769..3e0a6ca58 100644
--- a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
+++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -14,6 +14,7 @@ import {
   OnboardingCharacterMobile,
   Overlay,
   PrimaryButton,
+  TitleText,
 } from "../../components";
 import {
   ArrowUp,
@@ -78,7 +79,7 @@ export const OnboardingMobile: FC = () => {
       <OnboardingContainer showAnimation={showAnimation}>
         <InfoText>
           <SectionContainer>
-            <TextContainer customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TextContainer>
+            <TitleText customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TitleText>
           </SectionContainer>
           <OnboardingCharacterWrapper>
             <OnboardingCharacterMobile/>
@@ -97,6 +98,8 @@ export const OnboardingMobile: FC = () => {
         </InfoText>
         <MiddleContent height={height} ref={ref}>
           <SectionContainer>
+            <MenuText>{text.general.sagesBy}</MenuText>
+            <TextContainer customColor={color.darkGrey}>{text.general.sagesIsTheFirst}</TextContainer>
             <MenuText>{text.general.whoWeAre}</MenuText>
             <TextContainer>
               {text.general.isPartOfAgoric}
diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts
index 4b2829916..0d36a95da 100644
--- a/frontend/src/pages/onboarding-mobile/styles.ts
+++ b/frontend/src/pages/onboarding-mobile/styles.ts
@@ -125,9 +125,7 @@ export const TextContainer = styled.span<TextProps>`
   :first-letter {
     text-transform: capitalize;
   }
-  :first-of-type {
-    margin-top: 8px;
-  }
+
   margin-top: 24px;
   display: inline-block;
   ${({ customColor }): string => `color: ${customColor || color.darkGrey};`};

From a90f3fb16a8be8196627e6cded21074b3f30ce89 Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Tue, 12 Dec 2023 11:36:38 +0100
Subject: [PATCH 14/17] Fix yarn build issue

---
 frontend/src/pages/content-mobile/privacy-mobile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/content-mobile/privacy-mobile.tsx b/frontend/src/pages/content-mobile/privacy-mobile.tsx
index fe2aacc09..3b51c1542 100644
--- a/frontend/src/pages/content-mobile/privacy-mobile.tsx
+++ b/frontend/src/pages/content-mobile/privacy-mobile.tsx
@@ -3,7 +3,7 @@ import { text } from "../../assets";
 import { Footer, FormText, MenuText, TitleText } from "../../components";
 import { KreadIcon } from "../../components/logo/styles";
 import { color } from "../../design";
-import { ContentWrapper, FooterContainer, GeneralInfo, InfoContainer, KreadContainer, Title } from "./styles";
+import { ContentWrapper, GeneralInfo, InfoContainer, KreadContainer, Title } from "./styles";
 
 // TODO: make content for privacy page
 export const PrivacyMobile: FC = () => {

From c11dbdfd314b0caa8c413d16a001aa3e77c7a8d0 Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Tue, 12 Dec 2023 13:04:31 +0100
Subject: [PATCH 15/17] fix indentation in onboarding page

---
 frontend/src/assets/text/general.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/assets/text/general.ts b/frontend/src/assets/text/general.ts
index a7ebda237..56ff5feaf 100644
--- a/frontend/src/assets/text/general.ts
+++ b/frontend/src/assets/text/general.ts
@@ -34,7 +34,7 @@ export const general = {
   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.\nStart collecting SAGES NFTs to\nshape your own saga.",
   explore: "explore",
   connectWallet: "connect Keplr Wallet",
   activateWallet: "activate Wallet",
@@ -42,7 +42,7 @@ export const general = {
   ourLeadership: "Our leadership includes some of\nthe most inventive and\nexperienced executives in the technology industry.",
   isPartOfAgoric: "KREAd is a decentralized application deployed on ",
   anOpenSource:
-    ", an open-source development company launching an interoperable Proof-\nof-Stake chain and economy. The dApp is imagined, built, and\ndesigned by ",
+    ", an open-source development company launching an interoperable Proof-of-Stake chain and economy. The dApp is imagined, built, and designed by ",
   agoric: "Agoric",
   theSagesArt: "The SAGES art and comic is\ncreated by Enmanuel Heredia.",
   kryha: "Kryha",

From 80d463456bc90b3e80fc9a8f92d929e555f8df6c Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Tue, 12 Dec 2023 13:04:44 +0100
Subject: [PATCH 16/17] remove duplicate privacy section

---
 frontend/src/pages/content-mobile/privacy-mobile.tsx | 2 --
 frontend/src/pages/content/privacy.tsx               | 2 --
 2 files changed, 4 deletions(-)

diff --git a/frontend/src/pages/content-mobile/privacy-mobile.tsx b/frontend/src/pages/content-mobile/privacy-mobile.tsx
index 3b51c1542..b1fccb065 100644
--- a/frontend/src/pages/content-mobile/privacy-mobile.tsx
+++ b/frontend/src/pages/content-mobile/privacy-mobile.tsx
@@ -19,8 +19,6 @@ export const PrivacyMobile: FC = () => {
           <GeneralInfo>
             <Title>{text.content.whatInformationDoWe}</Title>
             <FormText customColor={color.darkGrey}>{text.content.weCollectPersonal}</FormText>
-            <Title>{text.content.whatInformationDoWe}</Title>
-            <FormText customColor={color.darkGrey}>{text.content.weUseTheInformation}</FormText>
           </GeneralInfo>
         </InfoContainer>
       </ContentWrapper>
diff --git a/frontend/src/pages/content/privacy.tsx b/frontend/src/pages/content/privacy.tsx
index 2198ef097..8293cd676 100644
--- a/frontend/src/pages/content/privacy.tsx
+++ b/frontend/src/pages/content/privacy.tsx
@@ -18,8 +18,6 @@ export const Privacy: FC = () => {
         <GeneralInfo>
           <Title>{text.content.whatInformationDoWe}</Title>
           <FormText customColor={color.darkGrey}>{text.content.weCollectPersonal}</FormText>
-          <Title>{text.content.whatInformationDoWe}</Title>
-          <FormText customColor={color.darkGrey}>{text.content.weUseTheInformation}</FormText>
         </GeneralInfo>
       </InfoContainer>
       <FooterContainer>

From be985016bda8678212bdcbd197c5edd5ff3521a1 Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Tue, 12 Dec 2023 13:05:20 +0100
Subject: [PATCH 17/17] add padding to "who we are" section

---
 frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
index 3e0a6ca58..6b2f83a6b 100644
--- a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
+++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -100,6 +100,8 @@ export const OnboardingMobile: FC = () => {
           <SectionContainer>
             <MenuText>{text.general.sagesBy}</MenuText>
             <TextContainer customColor={color.darkGrey}>{text.general.sagesIsTheFirst}</TextContainer>
+          </SectionContainer>
+          <SectionContainer>
             <MenuText>{text.general.whoWeAre}</MenuText>
             <TextContainer>
               {text.general.isPartOfAgoric}