Skip to content

Commit

Permalink
fix: mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@w84april
w84april committed Nov 16, 2024
1 parent 4461ab2 commit 6bad90d
Show file tree
Hide file tree
Showing 6 changed files with 218 additions and 152 deletions.
22 changes: 18 additions & 4 deletions apps/landing/components/common/EarnCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ export function EarnCard(props: {title: string; info: string; logoSrc: string; h
? '#0657F9'
: 'linear-gradient(180deg, rgba(12, 12, 12, 0.8) 0%, rgba(26, 26, 26, 0.8) 100%)'
}}
className={'group relative flex h-full overflow-hidden p-6'}>
<div className={'mt-auto flex items-end'}>
className={'group relative z-30 flex h-full overflow-hidden rounded-lg border border-[#292929] p-6'}>
<div className={'flex md:mt-auto md:items-end'}>
<div>
<p className={'text-[24px] group-hover:text-grey-900'}>{props.title}</p>
<p className={'text-grey-400 group-hover:text-grey-900'}>{props.info}</p>
Expand All @@ -26,19 +26,33 @@ export function EarnCard(props: {title: string; info: string; logoSrc: string; h
</div>
</div>
<Image
className={'absolute -top-12 right-10'}
className={'absolute -bottom-20 left-0 -z-10 md:-top-12 md:left-auto md:right-10'}
src={props.hoverLogoSrc}
width={200}
height={200}
alt={'app-logo'}
/>
<Image
className={'absolute -top-12 right-10 group-hover:opacity-0'}
className={'absolute -bottom-20 left-0 -z-10 group-hover:opacity-0 md:-top-12 md:left-auto md:right-10'}
src={props.logoSrc}
width={200}
height={200}
alt={'app-logo'}
/>
{/* <Image
className={'absolute '}
src={props.hoverLogoSrc}
width={200}
height={200}
alt={'app-logo'}
/>
<Image
className={'absolute '}
src={props.logoSrc}
width={200}
height={200}
alt={'app-logo'}
/> */}
</div>
);
}
2 changes: 1 addition & 1 deletion apps/landing/components/common/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export function LandingAppHeader(): ReactElement {
id={'head'}
className={'inset-x-0 top-0 z-50 mt-7 w-full'}>
<div className={'w-full'}>
<header className={'yearn--header mx-auto max-w-6xl !px-0'}>
<header className={'yearn--header mx-auto max-w-6xl md:!px-10'}>
<div className={'flex md:hidden'}>
<button onClick={(): void => set_isMenuOpen(!isMenuOpen)}>
<span className={'sr-only'}>{'Open menu'}</span>
Expand Down
267 changes: 153 additions & 114 deletions apps/landing/components/sections/Hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,135 +1,174 @@
import Image from 'next/image';
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 {
function AnimatedLogos(): ReactElement {
return (
<div className={'flex w-full justify-center overflow-hidden'}>
<div
<>
{' '}
<motion.div
className={'absolute'}
style={{
backgroundImage: "url('/landing/hero-background.png')",
backgroundImage: "url('/landing/yfi-bottom-right.png')",
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
backgroundPosition: 'center',
overflow: 'hidden'
width: '480px',
height: '160px'
}}
className={
'relative mx-6 mt-6 flex h-[568px] w-[2365px] max-w-[2352px] flex-col items-center self-center rounded-lg border border-[#292929]'
}>
<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'}
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'}}
/>
</>
);
}

export function Hero(): ReactElement {
return (
<>
<div className={'hidden w-full justify-center overflow-hidden md:flex'}>
<div
style={{
backgroundImage: "url('/landing/yfi-bottom-left.png')",
backgroundImage: "url('/landing/hero-background.png')",
backgroundRepeat: 'no-repeat',
width: '440px',
height: '160px'
}}
animate={{
y: ['0px', '20px', '0px']
}}
transition={{
duration: 4,
ease: 'easeInOut',
repeat: Infinity,
repeatType: 'loop'
backgroundSize: '100% 100%',
backgroundPosition: 'center',
overflow: 'hidden'
}}
initial={{right: '60%', bottom: '0px'}}
className={
'relative mx-6 mt-6 flex h-[568px] w-[2365px] max-w-[2352px] flex-col items-center self-center rounded-lg border border-[#292929]'
}>
<AnimatedLogos />
<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 ON CRYPTO'}</p>
<p className={'mt-4 text-grey-400'}>
{'Yearn is DeFi’s longest running, most battle tested, and most trusted yield protocol.'}
</p>
</div>
<div className={'mt-[72px] flex gap-2'}>
<Button className={'w-[192px] px-[15px]'}>{'DISCOVER PRODUCTS'}</Button>
<Button
variant={'secondary'}
className={'w-[192px]'}>
{'SUBMIT YOUR APP'}
</Button>
</div>
</div>
</div>
<div
className={'flex w-full flex-col items-center px-8 md:hidden'}
style={{
backgroundImage: "url('/landing/hero-background-mobile.png')",
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
backgroundPosition: 'center'
}}>
<Image
className={'mt-[88px]'}
src={'/landing/yfi-top-right.png'}
alt={'hero'}
width={277}
height={277}
/>
<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={'text-grey-400 mt-4'}>
<div className={'z-20 mt-4 text-center'}>
<p className={'text-center text-[40px] font-bold leading-[48px] text-white'}>
{'THE DEFI WAY TO EARN ON CRYPTO'}
</p>
<p className={'mt-4 text-grey-400'}>
{'Yearn is DeFi’s longest running, most battle tested, and most trusted yield protocol.'}
</p>
</div>
<div className={'mt-[72px] flex gap-2'}>
<Button className={'w-[192px] px-[15px]'}>{'DISCOVER PRODUCTS'}</Button>
<Button
variant={'secondary'}
className={'w-[192px]'}>
{'SUBMIT YOUR APP'}
</Button>
<div className={'mt-10 flex w-full flex-col gap-2'}>
<Button className={'px-[15px]'}>{'DISCOVER PRODUCTS'}</Button>
<Button variant={'secondary'}>{'SUBMIT YOUR APP'}</Button>
</div>
</div>
</div>
</>
);
}
Loading

0 comments on commit 6bad90d

Please sign in to comment.