feat: hero animation (#607)

apps/landing/components/sections/Hero.tsx

@@ -1,25 +1,123 @@
+import {motion} from 'framer-motion';
+
 import {Button} from '../common/Button';
 
 import type {ReactElement} from 'react';
 
 //todo: ask design to remove border
 export function Hero(): ReactElement {
 	return (
-		<div className={'flex w-full justify-center'}>
+		<div className={'flex w-full justify-center overflow-hidden'}>
 			<div
 				style={{
 					backgroundImage: "url('/landing/hero-background.png')",
 					backgroundRepeat: 'no-repeat',
-					backgroundSize: 'auto 100%',
-					backgroundPosition: 'center'
+					backgroundSize: '100% 100%',
+					backgroundPosition: 'center',
+					overflow: 'hidden'
 				}}
 				className={
-					'relative mx-6 mt-6 flex h-[568px] w-full max-w-[2352px] flex-col items-center self-center rounded-lg border border-[#292929]'
+					'relative mx-6 mt-6 flex h-[568px] w-[2365px] max-w-[2352px] flex-col items-center self-center rounded-lg border border-[#292929]'
 				}>
-				<div className={'mt-[88px] text-center'}>
+				<motion.div
+					className={'absolute'}
+					style={{
+						backgroundImage: "url('/landing/yfi-bottom-right.png')",
+						backgroundRepeat: 'no-repeat',
+						width: '480px',
+						height: '160px'
+					}}
+					animate={{
+						y: ['0px', '30px', '0px']
+					}}
+					transition={{
+						duration: 4,
+						ease: 'easeInOut',
+						repeat: Infinity,
+						repeatType: 'loop'
+					}}
+					initial={{left: '70%', bottom: '0px'}}
+				/>
+				<motion.div
+					className={'absolute'}
+					style={{
+						backgroundImage: "url('/landing/yfi-top-right.png')",
+						backgroundRepeat: 'no-repeat',
+						width: '240px',
+						height: '240px'
+					}}
+					animate={{
+						y: ['0px', '-40px', '0px']
+					}}
+					transition={{
+						duration: 4,
+						ease: 'easeInOut',
+						repeat: Infinity,
+						repeatType: 'loop'
+					}}
+					initial={{left: '76%', top: '104px'}}
+				/>
+				<motion.div
+					className={'absolute'}
+					style={{
+						backgroundImage: "url('/landing/yfi-top-left.png')",
+						backgroundRepeat: 'no-repeat',
+						width: '240px',
+						height: '240px'
+					}}
+					animate={{
+						y: ['0px', '-40px', '0px']
+					}}
+					transition={{
+						duration: 4,
+						ease: 'easeInOut',
+						repeat: Infinity,
+						repeatType: 'loop'
+					}}
+					initial={{right: '70%', top: '32px'}}
+				/>
+				<motion.div
+					className={'absolute'}
+					style={{
+						backgroundImage: "url('/landing/yfi-left-center.png')",
+						backgroundRepeat: 'no-repeat',
+						width: '200px',
+						height: '290px'
+					}}
+					animate={{
+						y: ['0px', '-50px', '0px']
+					}}
+					transition={{
+						duration: 4,
+						ease: 'easeInOut',
+						repeat: Infinity,
+						repeatType: 'loop'
+					}}
+					initial={{right: '78%', top: '200px'}}
+				/>
+				<motion.div
+					className={'absolute'}
+					style={{
+						backgroundImage: "url('/landing/yfi-bottom-left.png')",
+						backgroundRepeat: 'no-repeat',
+						width: '440px',
+						height: '160px'
+					}}
+					animate={{
+						y: ['0px', '20px', '0px']
+					}}
+					transition={{
+						duration: 4,
+						ease: 'easeInOut',
+						repeat: Infinity,
+						repeatType: 'loop'
+					}}
+					initial={{right: '60%', bottom: '0px'}}
+				/>
+				<div className={'z-20 mt-[88px] text-center'}>
 					<p className={'text-[80px] font-bold leading-[80px] text-white'}>{'THE DEFI WAY'}</p>
 					<p className={'text-[80px] font-bold leading-[80px] text-white'}>{'TO EARN CRYPTO'}</p>
-					<p className={'mt-4 text-grey-400'}>
+					<p className={'text-grey-400 mt-4'}>
 						{'Yearn is DeFi’s longest running, most battle tested, and most trusted yield protocol.'}
 					</p>
 				</div>