intro video

env.example

@@ -1 +1,12 @@
-REACT_APP_RECAPTCHA_SITE_KEY=
+REACT_APP_RECAPTCHA_SITE_KEY=
+
+REACT_APP_PRIVACY_POLICY_URL=
+
+REACT_APP_EMBED_CALENDAR_ADDRESS=
+REACT_APP_EMBED_CALENDAR_SCRIPT_ADDRESS=
+
+REACT_APP_CLARITY_PROJECT_ID=
+REACT_APP_SUPPORT_EMAIL=
+REACT_APP_ZEITADLER_HOMEPAGE_PRICING=
+
+REACT_APP_DASHBOARD_INTRODUCTION_VIDEO=""

public/locales/de/translation.json

@@ -130,6 +130,9 @@
     "paymentPlanTrailingDaysLeft": "{{daysLeft}} {{dayUnit}} verbleibend",
     "paymentPlanUpgradeButton": "Jetzt upgraden"
   },
+  "dashboard": {
+    "pageTitle": "Einführung"
+  },
   "employees": {
     "pageTitle": "Mitarbeiter",
     "addEmployee": "Mitarbeiter anlegen",

public/locales/en/translation.json

@@ -130,6 +130,9 @@
     "paymentPlanTrailingDaysLeft": "{{daysLeft}} {{dayUnit}} left",
     "paymentPlanUpgradeButton": "Upgrade now"
   },
+  "dashboard": {
+    "pageTitle": "Introduction"
+  },
   "employees": {
     "pageTitle": "Employees",
     "addEmployee": "Add employee",

src/Components/MyContainer/index.js

@@ -1,4 +1,8 @@
-export default function MyCenteredContainer({ children, fullHeight = false }) {
+export default function MyCenteredContainer({
+  children,
+  fullHeight = false,
+  height = "100vh",
+}) {
   return (
     <div
       style={{
@@ -7,7 +11,7 @@ export default function MyCenteredContainer({ children, fullHeight = false }) {
         justifyContent: "center",
         alignContent: "center",
         alignItems: "center",
-        height: fullHeight ? "100vh" : "85.3vh",
+        height: fullHeight ? height : "85.3vh",
       }}
     >
       {children}

src/Pages/Dashboard/index.js

@@ -1,13 +1,30 @@
-import { Card } from "antd";
+import { Card, Spin } from "antd";
+import { useState } from "react";
+import MyCenteredContainer from "../../Components/MyContainer";
+import { useTranslation } from "react-i18next";
 
 export default function Dashboard() {
+  const { t } = useTranslation();
+
+  const [isLoading, setIsLoading] = useState(true);
+
   return (
-    <Card title="Dashboard" style={{ height: "100%" }}>
+    <Card title={t("dashboard.pageTitle")}>
+      {isLoading && (
+        <MyCenteredContainer fullHeight height={616}>
+          <Spin size="large" />
+        </MyCenteredContainer>
+      )}
+
       <iframe
-        src="https://www.youtube.com/watch?v=iSwaz71_YkE"
+        src={process.env.REACT_APP_DASHBOARD_INTRODUCTION_VIDEO}
+        onLoad={() => setIsLoading(false)}
+        width={1096}
+        height={616}
         style={{
-          width: "100%",
+          border: "none",
-          height: "100%",
+          zIndex: 2,
+          display: isLoading ? "none" : "block",
         }}
       />
     </Card>