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 #449

Closed
wants to merge 3 commits into from
Closed

Feat/how to animation #449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 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
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
8 changes: 4 additions & 4 deletions components/Common/PageHero/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const PageHero = ({
}, [secondaryButton.eventName, secondaryButton.eventParams]);
return (
<>
<div className="relative w-full flex flex-col laptop:flex-row items-center justify-between laptop:h-[calc(100vh-90px)] text-center min-h-[600px]">
<div className="relative w-full flex gap-8 flex-col laptop:flex-row items-center justify-between laptop:h-[calc(100vh-90px)] text-center min-h-[600px]">
<div className="laptop:!max-w-[50%]">
<div className="text-center laptop:text-left mt-12 laptop:mt-0 max-w-[500px] laptop:max-w-[none]">
<h1 className="text-2xl laptop:text-4xl desktop:text-5xl font-bold ">
Expand All @@ -51,16 +51,16 @@ const PageHero = ({
delayLinkMs={300}
/>
<OutlineButton
text="Try Free"
text={secondaryButton.text}
isLink={true}
onClick={handleSecondaryClick}
href={'https://app.amplication.com/login'}
href={secondaryButton.href}
delayLinkMs={300}
/>
</div>
</div>
<div className="relative items-center middle:!max-w-[90%] w-full middle:min-h-[600px] flex 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">
<div className="laptop:my-auto max-medium:w-full max-medium:left-0 max-medium:relative medium:flex align-items-center">
{imageNode}
</div>
</div>
Expand Down
96 changes: 32 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 animationData from '../../../../lottie/amplication-how-to-transparent.json';
import PageHero from '../../../Common/PageHero';

const HeroBlock = () => {
const handleStartNowClick = useCallback(() => {
Expand All @@ -24,67 +24,35 @@ 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={<Lottie animationData={animationData} loop={true} />}
/>
</>
);
};
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.

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
Loading