Version 2.1.0 (#425)

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indihu-web",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.1",

web/src/containers/about-temporary-page/TemporaryTextSection.tsx

@@ -2,6 +2,8 @@ import "./temporary-text-section.scss";
 
 import { useTranslation, Trans } from "react-i18next";
 
+import eeaGrangImg from "../../assets/img/about-page/eea_grant_black_2x.png";
+
 import ExternalLink from "i18n/ExternalLink";
 import MailLink from "i18n/MailLink";
 
@@ -60,6 +62,14 @@ const TemporaryTextSection = () => {
             />
           </p>
         </div>
+
+        <div className="flex flex-col sm:flex-row justify-center items-center sm:justify-start">
+          <img
+            alt="test"
+            src={eeaGrangImg}
+            className="w-3/5 h-auto sm:w-2/5 lg:w-1/4"
+          />
+        </div>
       </div>
     </section>
   );

web/src/containers/new-landing-page/LandingPage.tsx

@@ -7,6 +7,7 @@ import { useTranslation, Trans } from "react-i18next";
 
 // Components
 import Header from "./header/Header";
+import PreviewVideoSection from "./preview-video-section/PreviewVideoSection";
 import IntroSection from "./intro-section/IntroSection";
 import FunctionalitySection from "./functionality-section/FunctionalitySection";
 import SelectedExhibitionsSection from "./selected-exhibitions-section/SelectedExhibitionsSection";
@@ -67,6 +68,7 @@ const LandingPage = ({ oauthConfigs }: LandingPageProps) => {
       <Header oauthConfigs={oauthConfigs} />
       <IntroSection />
 
+      <PreviewVideoSection />
       <FunctionalitySection />
       <SelectedExhibitionsSection />
       <RegistrationSection oauthConfigs={oauthConfigs} />

web/src/containers/new-landing-page/footer/Footer.tsx

@@ -1,9 +1,9 @@
 import "./footer.scss";
 import { useTranslation } from "react-i18next";
 
-import indihuLogo from "../../../assets/img/landing-page/indihu-logo-white.png";
-import nahranoOtevrenoLogo from "../../../assets/img/landing-page/nahrano-otevreno-logo-white.png";
-import knihovnaLogo from "../../../assets/img/landing-page/knihovna-logo-white.png";
+import indihuLogo from "../../../assets/img/landing-page/footer/white/indihu-logo-white.png";
+import nahranoOtevrenoLogo from "../../../assets/img/landing-page/footer/white/nahrano-otevreno-logo-white.png";
+import knihovnaLogo from "../../../assets/img/landing-page/footer/white/knihovna-logo-white.png";
 
 import { BsBoxArrowUpRight } from "react-icons/bs";
 // import { BsFacebook } from "react-icons/bs";

web/src/containers/new-landing-page/functionality-section/FunctionalitySection.tsx

@@ -3,12 +3,12 @@ import { useTranslation, Trans } from "react-i18next";
 
 import ExternalLink from "i18n/ExternalLink";
 
-import f1Icon from "../../../assets/img/landing-page/functionality-section/png/icon-f-1.png";
-import f2Icon from "../../../assets/img/landing-page/functionality-section/png/icon-f-2.png";
-import f3Icon from "../../../assets/img/landing-page/functionality-section/png/icon-f-3.png";
-import f4Icon from "../../../assets/img/landing-page/functionality-section/png/icon-f-4.png";
-import f5Icon from "../../../assets/img/landing-page/functionality-section/png/icon-f-5.png";
-import f6Icon from "../../../assets/img/landing-page/functionality-section/png/icon-f-6.png";
+import f1Icon from "../../../assets/img/landing-page/functionality-section/png/blue/icon-f-1.png";
+import f2Icon from "../../../assets/img/landing-page/functionality-section/png/blue/icon-f-2.png";
+import f3Icon from "../../../assets/img/landing-page/functionality-section/png/blue/icon-f-3.png";
+import f4Icon from "../../../assets/img/landing-page/functionality-section/png/blue/icon-f-4.png";
+import f5Icon from "../../../assets/img/landing-page/functionality-section/png/blue/icon-f-5.png";
+import f6Icon from "../../../assets/img/landing-page/functionality-section/png/blue/icon-f-6.png";
 
 // - -
 

web/src/containers/new-landing-page/functionality-section/functionality-section.scss

@@ -5,8 +5,8 @@
 .functionality-section {
   position: relative;
   background-color: white;
-  overflow: hidden;
   color: $primary-color;
+  overflow: hidden;
 }
 
 .functionality-section::before {

web/src/containers/new-landing-page/preview-video-section/PreviewVideoSection.tsx

@@ -0,0 +1,29 @@
+import "./preview-video-section.scss";
+import previewVideoSrc from "../../../assets/video/INDIHU_preview_video.mp4";
+import previewVideoPoster from "../../../assets/img/landing-page/video-preview-poster.png";
+
+const PreviewVideoSection = () => {
+  return (
+    <div className="preview-video-section flex justify-center items-center">
+      <div className="px-[30px] md:px-[46px] flex flex-col gap-16 max-w-[540px] mx-auto md:max-w-none lg:max-w-[1140px]">
+        {/* <h2>TODO: Sem nejaký pekný nadpis</h2> */}
+
+        {/* Video */}
+        <div className="w-full h-full flex justify-center items-center">
+          <video
+            controls
+            playsInline
+            controlsList="nodownload"
+            disablePictureInPicture
+            poster={previewVideoPoster}
+            style={{ width: "auto", height: "auto" }}
+          >
+            <source src={previewVideoSrc} type="video/mp4" />
+          </video>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PreviewVideoSection;

web/src/containers/new-landing-page/preview-video-section/preview-video-section.scss

@@ -0,0 +1,31 @@
+@import "../variables.scss";
+
+/* -- Preview video section -- */
+.preview-video-section {
+  position: relative;
+  width: 100%;
+  height: 100svh;
+
+  background-color: $primary-color;
+  color: white;
+}
+
+.preview-video-section h2 {
+  font-weight: 300;
+  font-size: 32px;
+  line-height: 38px;
+}
+
+@media (min-width: 576px) {
+  .preview-video-section h2 {
+    font-size: 40px;
+    line-height: 58px;
+  }
+}
+
+@media (min-width: 768px) {
+  .preview-video-section h2 {
+    font-size: 48px;
+    line-height: 58px;
+  }
+}

web/src/containers/new-landing-page/registration-section/registration-section.scss

@@ -5,8 +5,8 @@
 .registration-section {
   position: relative;
   background-color: white;
-  overflow: hidden;
   color: $primary-color;
+  overflow: hidden;
 }
 
 .registration-section::before {

web/src/containers/views/view-screen-overlay/ActionsPanel/ActionsPanel.tsx

@@ -327,6 +327,7 @@ const ActionsPanel = ({
                 getTutorialEclipseClassnameByStepkeys
               }
             />
+
             {(step?.stepKey === "audio" || hasAudio) && (
               <AudioButton
                 isAudioMuted={isAudioMuted}