Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/how to animation mp4 #450

Merged
merged 10 commits into from
Mar 17, 2024
Merged

Feat/how to animation mp4 #450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4ced4f5
fix pagehero
yuval-hazaz Jan 31, 2024
bcd1b86
feat: add animation on home page
yuval-hazaz Jan 31, 2024
67ff319
style hero spacing
yuval-hazaz Jan 31, 2024
ab61057
feat: use mp4
yuval-hazaz Feb 5, 2024
59dfd35
stlye:hero height
yuval-hazaz Feb 5, 2024
f17e4cb
update video
yuval-hazaz Feb 11, 2024
448e075
Merge branch 'main' into feat/how-to-animation-mp4
yuval-hazaz Feb 11, 2024
0f9411c
Merge branch 'main' into feat/how-to-animation-mp4
yuval-hazaz Mar 17, 2024
27e216d
feat:update hp animation
yuval-hazaz Mar 17, 2024
041c070
Merge branch 'main' into feat/how-to-animation-mp4
yuval-hazaz Mar 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/Common/PageHero/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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({
Expand Down
6 changes: 3 additions & 3 deletions components/Sections/About/HeroBlock/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/Sections/DbImportBeta/Hero/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
2 changes: 1 addition & 1 deletion components/Sections/Enterprise/Hero/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
100 changes: 36 additions & 64 deletions components/Sections/Enterprise/HeroBlock/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(() => {
Expand All @@ -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>
}
/>
</>
);
};
Expand Down
2 changes: 1 addition & 1 deletion components/Sections/Modernization/Hero/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions lottie/amplication-how-to-transparent.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions lottie/amplication-how-to.json
View file
Open in desktop

Large diffs are not rendered by default.

17 changes: 16 additions & 1 deletion next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},
};
Expand Down
61 changes: 31 additions & 30 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 >
</>
);
Expand Down
Binary file added public/animation/amplication-how-to.mp4
View file
Open in desktop
Binary file not shown.
1 change: 0 additions & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ module.exports = {
'max-laptop': {
max: '991px',
},
middle: '1080px',
medium: '1200px',
'max-medium': {
max: '1199px',
Expand Down
Loading