YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Laying out about page more

Browse Source
This commit is contained in:
Dominic Masters
2018-06-08 12:45:59 +10:00
parent be8e66e682
commit 7120067f48
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/language/en-AU.jsx
View File

@ -22,6 +22,10 @@ module.exports = {
"Once forgot his own birthday." "Once forgot his own birthday."
]); ]);
} }
},
"video": {
"heading": "Learn about me",
"paragraph": "Watch this short video about me, made by.. me!"
} }
}, },

23
public/page/about/AboutPage.jsx
View File

@ -29,7 +29,7 @@ import Section, { ImageSection, VideoSection, SplitSection, Split } from './../.
import FloatingContentBox from './../../content/FloatingContentBox'; import FloatingContentBox from './../../content/FloatingContentBox';
import Image from './../../image/Image'; import Image from './../../image/Image';
import Video from './../../video/Video'; import Video from './../../video/Video';
import { Title, Subtitle } from './../../typography/Typography'; import { Title, Subtitle, Paragraph, Heading1 } from './../../typography/Typography';
import ElementScrollFader from './../../animation/fade/ElementScrollFader'; import ElementScrollFader from './../../animation/fade/ElementScrollFader';
const AboutPage = (props) => { const AboutPage = (props) => {
@ -52,10 +52,10 @@ const AboutPage = (props) => {
{ /* Promo Video */ } { /* Promo Video */ }
<Section className="p-about-page__promo-video"> <Section className="p-about-page__promo-video">
<PageBoundary> <PageBoundary>
<SplitSection> <SplitSection align="center">
<Split className="u-text-center"> <Split className="u-text-center" padded>
<ElementScrollFader> <ElementScrollFader>
<Image <Video
image={ require('./../../videos/bunny/big_buck_bunny.jpg') } image={ require('./../../videos/bunny/big_buck_bunny.jpg') }
mp4={ require('./../../videos/bunny/big_buck_bunny.mp4') } mp4={ require('./../../videos/bunny/big_buck_bunny.mp4') }
controls controls
@ -63,12 +63,15 @@ const AboutPage = (props) => {
</ElementScrollFader> </ElementScrollFader>
</Split> </Split>
<Split className="u-text-center"> <Split className="u-text-center" padded>
<Video <ElementScrollFader from="bottom">
image={ require('./../../videos/bunny/big_buck_bunny.jpg') } <Heading1>
mp4={ require('./../../videos/bunny/big_buck_bunny.mp4') } { Language.get("pages.about.video.heading") }
autoPlay </Heading1>
/> <Paragraph>
{ Language.get("pages.about.video.paragraph") }
</Paragraph>
</ElementScrollFader>
</Split> </Split>
</SplitSection> </SplitSection>
</PageBoundary> </PageBoundary>