added 3d text to welcomePage Buttons

ProjektAdLer · Feb 14, 2025 · 3bebe56 · 3bebe56
1 parent 2bf6087
commit 3bebe56
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git a/src/Assets/graphics/avatar-editor.png b/src/Assets/graphics/avatar-editor.png
diff --git a/src/Assets/graphics/learning-engine.png b/src/Assets/graphics/learning-engine.png
diff --git a/src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/WelcomePage.tsx b/src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/WelcomePage.tsx
@@ -2,6 +2,8 @@ import LoginComponent from "~ReactComponents/WelcomePage/SignInAndOutComponent/L
 import logo from "../../../../../../Assets/icons/adler-engine.svg";
 import welcomeVideo from "../../../../../../Assets/graphics/anim-adler-welcome.webm";
 import welcomePicture from "../../../../../../Assets/graphics/welcome-screen-greeting.png";
+import learningEngineIcon from "../../../../../../Assets/graphics/learning-engine.png";
+import avatarEditorIcon from "../../../../../../Assets/graphics/avatar-editor.png";
 import avatarButtonBackground from "../../../../../../Assets/misc/WelcomeScreenButtonBackgrounds/AvatarEditorButtonBackground.jpg";
 import learningWorldMenuButtonBackground from "../../../../../../Assets/misc/WelcomeScreenButtonBackgrounds/LearningWorldButtonBackground.jpg";
 import HelpDeskButton from "~ReactComponents/GeneralComponents/HelpDeskButton/HelpDeskButton";
@@ -48,18 +50,18 @@ export default function WelcomePage() {
         <LoginComponent className="flex flex-col items-center justify-around col-span-6 col-start-2 tablet-portrait:col-start-1 tablet-portrait:col-span-8 xl:pt-8 lg:pt-4 mobile-portrait:row-start-2 mobile-portrait:justify-start mobile-landscape:pt-0" />
       </section>
 
-      <section className="flex items-center justify-center col-span-6 col-start-2 row-span-3 row-start-3 gap-4 mb-4 portrait:h-3/4 mobile-landscape:h-3/4 mobile-landscape:self-end mobile-landscape:mb-2 portrait:row-start-3 portrait:row-span-3 portrait:col-start-2 portrait:self-center portrait-col-span-6 portrait:gap-6">
+      <section className="flex items-center justify-center col-span-6 col-start-2 row-span-3 row-start-3 gap-4 mb-4 portrait:h-3/4 mobile-landscape:h-[60%] mobile-landscape:self-end mobile-landscape:mb-2 portrait:row-start-3 portrait:row-span-3 portrait:col-start-2 portrait:self-center portrait-col-span-6 portrait:gap-6">
         <WelcomePageButton
           backgroundVideo={learningWorldButtonBackgroundVideo}
           backgroundPicture={learningWorldMenuButtonBackground}
           historyPath="/worldmenu"
-          label={translate("learningWorldButton")}
+          imageSrc={learningEngineIcon}
         />
         <WelcomePageButton
           backgroundVideo={avatarEditorButtonBackgroundVideo}
           backgroundPicture={avatarButtonBackground}
           historyPath="/avatarEditor"
-          label={translate("avatarEditorButton")}
+          imageSrc={avatarEditorIcon}
         />
       </section>
 

diff --git a/...omponents/Core/Presentation/React/WelcomePage/WelcomePageButton/WelcomePageButtonView.tsx b/...omponents/Core/Presentation/React/WelcomePage/WelcomePageButton/WelcomePageButtonView.tsx
@@ -15,8 +15,9 @@ import { useTranslation } from "react-i18next";
 type WelcomePageButtonProps = {
   backgroundVideo: string;
   backgroundPicture: string;
+  label?: string;
   historyPath: string;
-  label: string;
+  imageSrc: string;
   isPlaceholder?: boolean;
 } & AdLerUIComponent;
 
@@ -55,7 +56,7 @@ export default function WelcomePageButton(props: WelcomePageButtonProps) {
       )}
     >
       {!props.isPlaceholder && userLoggedIn ? (
-        <div className="flex justify-center w-full h-full bg-gray-100 align-center opacity-90 hover:opacity-100">
+        <div className="flex justify-center w-full h-full bg-gray-100 align-center opacity-90 hover:opacity-100 relative">
           <video
             ref={videoRef}
             src={props.backgroundVideo}
@@ -68,18 +69,18 @@ export default function WelcomePageButton(props: WelcomePageButtonProps) {
             <track kind="captions"></track>
           </video>
           <img
-            className="landscape:hidden w-full h-full object-cover"
+            className="landscape:lg:hidden w-full h-full object-cover"
             ref={pictureRef}
             src={props.backgroundPicture}
             alt="Avatar Editor"
           />
-          <p
-            className="absolute p-4 mx-auto font-bold rounded-lg !text-xs lg:text-2xl text-center bg-buttonbgblue lg:bottom-[42%] portrait:bottom-[20%] bottom-32 text-adlerdarkblue "
+          <img
+            src={props.imageSrc}
+            className="absolute p-4 mx-auto rounded-lg lg:bottom-[42%] portrait:bottom-[20%] mobile-landscape:bottom-6 bottom-32"
+            alt={props.label}
             onMouseEnter={() => videoRef.current?.play()}
             onMouseLeave={() => videoRef.current?.pause()}
-          >
-            {props.label}
-          </p>
+          />
         </div>
       ) : (
         <div className="flex justify-center w-full h-full bg-gray-100 align-center opacity-90">