Feat/how to animation mp4 (#450)

* fix pagehero * feat: add animation on home page * style hero spacing * feat: use mp4 * stlye:hero height * update video * feat:update hp animation
amplication · Mar 17, 2024 · 3cd8a71 · 3cd8a71
1 parent 8d64e6e
commit 3cd8a71
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 104 deletions.
diff --git a/components/Common/PageHero/index.jsx b/components/Common/PageHero/index.jsx
@@ -61,7 +61,7 @@ const PageHero = ({
             )}
           </div>
         </div>
-        <div className="relative items-center justify-center middle:!max-w-[90%] w-full middle:min-h-[600px] flex medium:!max-w-[46%]">
+        <div className="relative flex items-center max-w-[600px] mb-8 w-full laptop:min-h-[600px] laptop:!max-w-[46%] laptop:mb-0 ">
           <div className="">{imageNode}</div>
         </div>
       </div>
@@ -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({

diff --git a/components/Sections/About/HeroBlock/index.jsx b/components/Sections/About/HeroBlock/index.jsx
@@ -8,7 +8,7 @@ const HeroBlock = () => {
         <div className="w-full max-w-container m-container p-container laptop:max-w-container-desktop laptop:m-container-desktop laptop:p-container-desktop">
           <div className="row align-items-center">
             <div className="col-12 text-center">
-              <div className="header-and-video middle:!flex align-items-center">
+              <div className="header-and-video laptop:!flex align-items-center">
                 <div className="content-block">
                   <div className="animated-header">
                     <h1 className="main-title mb-0">
@@ -18,8 +18,8 @@ const HeroBlock = () => {
                     </h1>
                   </div>
                 </div>
-                <div className="relative align-items-center mt-[-20vw] mb-[-15vw] middle:my-0 middle:!max-w-[90%] w-full middle:min-h-[600px] flex align-items-center middle:!max-w-[53%]">
-                  <div className="middle:absolute middle:my-auto min-w-[114vw] middle:min-w-full middle:w-[65vw] max-w-[1280px] middle:flex align-items-center">
+                <div className="relative align-items-center mt-[-20vw] mb-[-15vw] laptop:my-0 laptop:!max-w-[90%] w-full laptop:min-h-[600px] flex align-items-center laptop:!max-w-[53%]">
+                  <div className="laptop:absolute laptop:my-auto min-w-[114vw] laptop:min-w-full laptop:w-[65vw] max-w-[1280px] laptop:flex align-items-center">
                     <Image src={Screenshot3} alt={'Amplication platform'} />
                   </div>
                 </div>

diff --git a/components/Sections/DbImportBeta/Hero/index.jsx b/components/Sections/DbImportBeta/Hero/index.jsx
@@ -29,7 +29,7 @@ const Hero = () => {
                     </div>
                   </div>
                 </div>
-                <div className="relative align-items-center middle:!max-w-[90%] w-full middle:min-h-[600px] flex align-items-center medium:!max-w-[46%]">
+                <div className="relative align-items-center laptop:!max-w-[90%] w-full laptop:min-h-[600px] flex align-items-center medium:!max-w-[46%]">
                   <div className="absolute laptop:my-auto w-[50vw] -left-16 max-medium:w-full max-medium:left-0 max-medium:relative medium:flex align-items-center">
                     {/* <Image src={AppDashboard} alt={'Amplication platform'} /> */}
                     <Form />

diff --git a/components/Sections/Enterprise/Hero/index.jsx b/components/Sections/Enterprise/Hero/index.jsx
@@ -76,7 +76,7 @@ const Hero = () => {
                     </Link>
                   </div>
                 </div>
-                <div className="relative align-items-center middle:!max-w-[90%] w-full middle:min-h-[600px] flex align-items-center medium:!max-w-[46%]">
+                <div className="relative align-items-center laptop:!max-w-[90%] w-full laptop:min-h-[600px] flex align-items-center medium:!max-w-[46%]">
                   <div className="absolute laptop:my-auto w-[50vw] -left-16 max-medium:w-full max-medium:left-0 max-medium:relative medium:flex align-items-center">
                     <Image src={AppDashboard} alt={'Amplication platform'} />
                   </div>

diff --git a/components/Sections/Enterprise/HeroBlock/index.jsx b/components/Sections/Enterprise/HeroBlock/index.jsx
@@ -1,8 +1,8 @@
+import Lottie from 'lottie-react';
 import { useCallback } from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
-import VideoWatch from '../../../../public/images/video-watch.png';
 import * as analytics from '../../../../lib/analytics';
+import videoSrc from '../../../../public/animation/amplication-how-to.mp4';
+import PageHero from '../../../Common/PageHero';
 
 const HeroBlock = () => {
   const handleStartNowClick = useCallback(() => {
@@ -24,67 +24,39 @@ const HeroBlock = () => {
   }, []);
   return (
     <>
-      <div className="row align-items-center">
-        <div className="col-12 text-center">
-          <div className="header-and-video align-items-center">
-            <div className="content-block">
-              <div className="animated-header">
-                <h1 className="main-title mb-0">
-                  <span className="block font-bold">
-                    Generate Production&#8209;Ready <br /> Backend Services.
-                  </span>
-                  <span className="sub-title">
-                    Reliably. Securely. Consistently.
-                  </span>
-                </h1>
-                <div className="explainer text-sm laptop:text-base large:text-lg text-white !mt-3 !mb-4 !max-w-[720px]">
-                  Automatically generate backend services with the highest
-                  standards, consistency and scalability. Accelerate your
-                  development 20X. Never waste time on boilerplate and
-                  repetitive coding again.
-                </div>
-              </div>
-              <div className="buttons-wrapper d-flex tablet:align-items-center justify-content-start mt-2">
-                <Link href={'https://app.amplication.com'} passHref={true}>
-                  <a
-                    onClick={handleStartNowClick}
-                    className="btn btn-primary btn-sm !h-[34px] mb-2 laptop:mr-2 w-full !font-normal !text-sm !max-w-[140px]"
-                  >
-                    Start Free
-                  </a>
-                </Link>
-                <div className="spacer"></div>
-                <Link
-                  href={process.env.NEXT_PUBLIC_BOOK_MEETING_URL}
-                  passHref={true}
-                >
-                  <a
-                    onClick={handleBookDemoClick}
-                    className="btn btn-outline-light btn-sm !h-[34px] mb-2 laptop:mr-2 w-full !font-normal !text-sm !max-w-[140px] text-black80"
-                    target="_blank"
-                  >
-                    Book a Demo
-                  </a>
-                </Link>
-              </div>
-            </div>
-            <div className="video flex align-items-center">
-              <div className="relative align-items-center !max-w-[92%] w-full min-h-[600px] hidden medium:flex align-items-center laptop:!max-w-[56%]">
-                <div className="absolute laptop:my-auto !-mt-24 w-[84vw] medium:flex align-items-center">
-                  <Link
-                    href={'https://www.youtube.com/watch?v=Kn5cNlUecCs'}
-                    passHref={true}
-                  >
-                    <a data-lity={true}>
-                      <Image src={VideoWatch} alt={''} />
-                    </a>
-                  </Link>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <PageHero
+        title={
+          <>
+            Generate Production&#8209;Ready <br /> Backend Services.
+          </>
+        }
+        subTitle={'Reliably. Securely. Consistently.'}
+        subText={`Automatically generate backend services with the highest
+        standards, consistency and scalability. Accelerate your
+        development 20X. Never waste time on boilerplate and
+        repetitive coding again.`}
+        mainButton={{
+          text: ' Start Free',
+          href: 'https://app.amplication.com',
+          eventName: 'startNowClicked',
+          eventParams: {
+            buttonLocation: 'hero',
+          },
+        }}
+        secondaryButton={{
+          text: 'Book a Demo',
+          href: process.env.NEXT_PUBLIC_BOOK_MEETING_URL,
+          eventName: 'bookDemoClicked',
+          eventParams: {
+            buttonLocation: 'hero',
+          },
+        }}
+        imageNode={
+          <video autoPlay loop muted style={{ width: '100%', height: 'auto' }}>
+            <source src={videoSrc} type="video/mp4" />
+          </video>
+        }
+      />
     </>
   );
 };

diff --git a/components/Sections/Modernization/Hero/index.jsx b/components/Sections/Modernization/Hero/index.jsx
@@ -70,7 +70,7 @@ const Hero = () => {
                     </Link>
                   </div>
                 </div>
-                <div className="relative align-items-center middle:!max-w-[90%] w-full middle:min-h-[600px] flex align-items-center medium:!max-w-[46%]">
+                <div className="relative align-items-center laptop:!max-w-[90%] w-full laptop:min-h-[600px] flex align-items-center medium:!max-w-[46%]">
                   <div className="absolute laptop:my-auto w-[50vw] -left-16 max-medium:w-full max-medium:left-0 max-medium:relative medium:flex align-items-center">
                     <Image src={AppDashboard} alt={'Amplication platform'} />
                   </div>

diff --git a/lottie/amplication-how-to-transparent.json b/lottie/amplication-how-to-transparent.json
diff --git a/lottie/amplication-how-to.json b/lottie/amplication-how-to.json
diff --git a/next.config.js b/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;
   },
 };

diff --git a/pages/index.js b/pages/index.js
@@ -36,41 +36,42 @@ const Home = ({ plugins }) => {
         }}
       />
 
-      <main className="w-full font-poppins z-10 !mb-0 laptop:mb-[100px] amplication-base">
-        <PageSection className={"page-welcome !pt-10 !pb-8 large:!py-[9vh] xlg:!py-[17vh]"}>
-          <HeroBlock />
-        </PageSection>
-        <PageSection alternate className={'!pt-5 !pb-4 laptop:!py-20 '} innerClassName={"flex-grow"}>
-          <Slider />
-        </PageSection>
-        <PageSection className={"page-welcome-solution !py-20"} >
-          <Features />
-        </PageSection>
-        <PageSection alternate>
-          <PluginsPanel plugins={plugins} />
-        </PageSection>
-        <PageSection innerClassName={"flex-grow"} className={"!pt-5 !pb-4 laptop:!px-14 laptop:!pt-24 laptop:!pb-20"} >
-          <Testimonials />
-        </PageSection>
-
-        <PageSection className={"!py-10"} alternate>
-          <Facts />
-        </PageSection>
+      <main className="w-full font-poppins z-10 !mb-0 laptop:mb-[100px] ">
         <PageSection >
-          <Soc2Banner />
+          <HeroBlock />
         </PageSection>
+        <div className='amplication-base'>
+          <PageSection alternate className={'!pt-5 !pb-4 laptop:!py-20 '} innerClassName={"flex-grow"}>
+            <Slider />
+          </PageSection>
+          <PageSection className={"page-welcome-solution !py-20"} >
+            < Features />
+          </PageSection>
+          <PageSection alternate >
+            <PluginsPanel plugins={plugins} />
+          </PageSection>
+          <PageSection innerClassName={"flex-grow"} className={"!pt-5 !pb-4 laptop:!px-14 laptop:!pt-24 laptop:!pb-20"} >
+            <Testimonials />
+          </PageSection>
 
-        <PageSection alternate className={"!py-20"} >
-          <GetList />
-        </PageSection>
-        <PageSection alternate className="page-steps !py-20" >
-          <Tabs />
-        </PageSection>
+          <PageSection className={"!py-10"} alternate>
+            <Facts />
+          </PageSection>
+          <PageSection >
+            <Soc2Banner />
+          </PageSection>
 
-        <PageSection >
-          <LogoList />
-        </PageSection>
+          <PageSection alternate className={"!py-20"} >
+            <GetList />
+          </PageSection>
+          <PageSection alternate className="page-steps !py-20" >
+            <Tabs />
+          </PageSection>
 
+          <PageSection >
+            <LogoList />
+          </PageSection>
+        </div>
       </main >
     </>
   );

diff --git a/public/animation/amplication-how-to.mp4 b/public/animation/amplication-how-to.mp4
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -20,7 +20,6 @@ module.exports = {
       'max-laptop': {
         max: '991px',
       },
-      middle: '1080px',
       medium: '1200px',
       'max-medium': {
         max: '1199px',