add pan zoom animation to app, with help text

src/components/App/App.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/media-has-caption */
 import React, { useRef, useEffect, useContext, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PanZoom } from 'react-easy-panzoom';
@@ -11,6 +12,7 @@ import RightSidebar from '../RightSidebar/RightSidebar';
 import templates from '../../templates';
 import PageController from '../../shared/PageController';
 import PrintDialog from '../../shared/PrintDialog';
+import PanZoomAnimation from '../../shared/PanZoomAnimation';
 
 const App = () => {
   const pageRef = useRef(null);
@@ -58,6 +60,7 @@ const App = () => {
 
         <RightSidebar />
 
+        <PanZoomAnimation />
         <PrintDialog />
       </div>
     </Suspense>

src/i18n/source/app/app.json

@@ -34,5 +34,8 @@
       "saveAsPdf": "Save as PDF"
     }
   },
+  "panZoomAnimation": {
+    "helpText": "You can pan and zoom around the artboard at any time to get a closer look at your resume."
+  },
   "markdownHelpText": "You can use <1>GitHub Flavored Markdown</1> to style this section of the text."
 }

src/shared/PanZoomAnimation.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import animation from '../assets/panzoom.mp4';
+
+const PanZoomAnimation = () => {
+  const { t } = useTranslation();
+  const [animationVisible, setAnimationVisible] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => setAnimationVisible(true), 500);
+    setTimeout(() => setAnimationVisible(false), 4500);
+  }, []);
+
+  return (
+    <div
+      className={`centered absolute inset-0 w-1/4 mt-24 transition-all duration-1000 ease-in-out ${
+        animationVisible ? 'opacity-100 z-20' : 'opacity-0 z-0'
+      }`}
+    >
+      <div className="px-12 rounded-lg shadow-2xl bg-white">
+        <video src={animation} autoPlay muted loop />
+        <p className="px-6 pb-6 text-sm text-gray-800 font-medium text-center">
+          {t('panZoomAnimation.helpText')}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default PanZoomAnimation;