added new WelcomePage Header and according styles for mobile optimiza…

…tion
ProjektAdLer · Dec 11, 2024 · b1ff652 · b1ff652
1 parent c4ac4b8
commit b1ff652
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/src/Assets/graphics/anim-adler-welcome.webm b/src/Assets/graphics/anim-adler-welcome.webm
diff --git a/src/Assets/graphics/welcome-screen-greeting.png b/src/Assets/graphics/welcome-screen-greeting.png
diff --git a/src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/WelcomePage.tsx b/src/Components/Core/Presentation/React/ReactRelated/ReactEntryPoint/WelcomePage.tsx
@@ -1,5 +1,7 @@
 import LoginComponent from "~ReactComponents/WelcomePage/SignInAndOutComponent/LoginComponent";
 import logo from "../../../../../../Assets/icons/adler-engine.svg";
+import welcomeGraphic from "../../../../../../Assets/graphics/welcome-screen-greeting.png";
+import welcomeVideo from "../../../../../../Assets/graphics/anim-adler-welcome.webm";
 import HelpDeskButton from "~ReactComponents/GeneralComponents/HelpDeskButton/HelpDeskButton";
 import HelpDeskModal from "~ReactComponents/GeneralComponents/HelpDeskModal/HelpDeskModal";
 import { useTranslation } from "react-i18next";
@@ -23,9 +25,22 @@ export default function WelcomePage() {
       <HelpDeskModal />
 
       <section className="flex flex-col items-center portrait:row-start-1 portrait:row-span-1 portrait:col-start-2 portrait:col-span-6 landscape:col-span-6 landscape:col-start-2 landscape:row-start-1 text-adlerdarkblue lg:landscape:col-span-7 lg:landscape:col-start-1 xl:landscape:col-start-2 xl:landscape:col-span-6 lg:landscape:row-start-1">
-        <h1 className="p-2 text-xl font-extrabold text-center justify-self-center portrait:text-xl lg:text-4xl 2xl:text-8xl">
+        <h1 className="landscape:hidden  p-2 text-xl font-extrabold text-center justify-self-center portrait:text-xl lg:text-4xl 2xl:text-8xl">
           {translate("welcome")}
         </h1>
+        <video
+          className="scale-75 lg:-mb-16 portrait:hidden"
+          src={welcomeVideo}
+          autoPlay
+          loop
+        >
+          <track
+            kind="captions"
+            srcLang="en"
+            src="path/to/captions.vtt"
+            default
+          />
+        </video>
         <LoginComponent className="flex flex-col items-center justify-around col-span-6 col-start-2 xl:pt-8 lg:pt-4" />
       </section>
 

diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -12,6 +12,8 @@ declare module "*.stl";
 declare module "*.jpeg";
 declare module "*.gif";
 declare module "*.mp4";
+declare module "*.webm";
+declare module "*.mov";
 
 // Babylon Navigation Plugin Dependency
 declare module "recast-detour";