diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-13 00:39:31 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-13 00:39:45 +0800 |
commit | 98325e1cfb4f6c732728fe2943895fad2cb03be5 (patch) | |
tree | 30f0c731521d7426523141e4f09ed0b20f3cb367 /packages/website/ts/@next/components/aboutPageLayout.tsx | |
parent | 356b7df534054c0e1fbe5899b953dea6c99d2081 (diff) | |
download | dexon-sol-tools-98325e1cfb4f6c732728fe2943895fad2cb03be5.tar dexon-sol-tools-98325e1cfb4f6c732728fe2943895fad2cb03be5.tar.gz dexon-sol-tools-98325e1cfb4f6c732728fe2943895fad2cb03be5.tar.bz2 dexon-sol-tools-98325e1cfb4f6c732728fe2943895fad2cb03be5.tar.lz dexon-sol-tools-98325e1cfb4f6c732728fe2943895fad2cb03be5.tar.xz dexon-sol-tools-98325e1cfb4f6c732728fe2943895fad2cb03be5.tar.zst dexon-sol-tools-98325e1cfb4f6c732728fe2943895fad2cb03be5.zip |
Tests animations on about page headers
Diffstat (limited to 'packages/website/ts/@next/components/aboutPageLayout.tsx')
-rw-r--r-- | packages/website/ts/@next/components/aboutPageLayout.tsx | 26 |
1 files changed, 20 insertions, 6 deletions
diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx index 9f55c2e81..002d35c0c 100644 --- a/packages/website/ts/@next/components/aboutPageLayout.tsx +++ b/packages/website/ts/@next/components/aboutPageLayout.tsx @@ -7,6 +7,8 @@ import { Column, Section } from 'ts/@next/components/newLayout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; +import { addFadeInAnimation } from 'ts/@next/constants/animations'; + interface Props { title: string; description: React.Node; @@ -26,18 +28,18 @@ export const AboutPageLayout = (props: Props) => ( <Column width="70%" maxWidth="800px"> <Column width="100%" maxWidth="680px"> - <Heading size="medium"> + <AnimatedHeading size="medium"> {props.title} - </Heading> + </AnimatedHeading> - <Paragraph size="medium" marginBottom="60px" isMuted={0.65}> + <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}> {props.description} - </Paragraph> + </AnimatedParagraph> {(props.linkLabel && props.linkUrl) && - <Link href={props.linkUrl} isNoBorder={true} isWithArrow={true}> + <AnimatedLink href={props.linkUrl} isNoBorder={true} isWithArrow={true}> {props.linkLabel} - </Link> + </AnimatedLink> } </Column> </Column> @@ -46,3 +48,15 @@ export const AboutPageLayout = (props: Props) => ( {props.children} </SiteWrap> ); + +const AnimatedHeading = styled(Heading)` + ${addFadeInAnimation('0.5s')} +`; + +const AnimatedParagraph = styled(Paragraph)` + ${addFadeInAnimation('0.5s', '0.15s')} +`; + +const AnimatedLink = styled(Link)` + ${addFadeInAnimation('0.6s', '0.3s')} +`; |