feat: use mp4

components/Common/PageHero/index.jsx

@@ -70,7 +70,7 @@ const PageHero = ({
 };
 
 PageHero.propTypes = {
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   subTitle: PropTypes.string,
   subText: PropTypes.string,
   mainButton: PropTypes.shape({

components/Sections/Enterprise/HeroBlock/index.jsx

@@ -1,7 +1,7 @@
 import Lottie from 'lottie-react';
 import { useCallback } from 'react';
 import * as analytics from '../../../../lib/analytics';
-import animationData from '../../../../lottie/amplication-how-to-transparent.json';
+import videoSrc from '../../../../public/animation/amplication-how-to.mp4';
 import PageHero from '../../../Common/PageHero';
 
 const HeroBlock = () => {
@@ -51,7 +51,11 @@ const HeroBlock = () => {
             buttonLocation: 'hero',
           },
         }}
-        imageNode={<Lottie animationData={animationData} loop={true} />}
+        imageNode={
+          <video autoPlay loop muted style={{ width: '100%', height: 'auto' }}>
+            <source src={videoSrc} type="video/mp4" />
+          </video>
+        }
       />
     </>
   );

next.config.js

@@ -144,11 +144,26 @@ const nextConfig = {
     ];
   },
   swcMinify: true,
-  webpack: (config) => {
+  webpack: (config, { dev, isServer }) => {
     config.module.rules.push({
       test: /\.md$/,
       use: 'raw-loader',
     });
+    // Use file-loader to load mp4 files.
+    const prefix = config.assetPrefix ?? config.basePath ?? '';
+    config.module.rules.push({
+      test: /\.mp4$/,
+      use: [
+        {
+          loader: 'file-loader',
+          options: {
+            publicPath: `${prefix}/_next/static/media/`,
+            outputPath: `${isServer ? '../' : ''}static/media/`,
+            name: '[name].[hash].[ext]',
+          },
+        },
+      ],
+    });
     return config;
   },
 };