Moved About Page to homepage. Site is ready?
This commit is contained in:
@ -23,59 +23,43 @@
|
||||
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import Page, { PageBoundary } from './../Page';
|
||||
import Section, { ImageSection } from './../../section/Section';
|
||||
import FloatingContentBox from './../../content/FloatingContentBox';
|
||||
import Image from './../../image/Image';
|
||||
import { Title, Subtitle } from './../../typography/Typography';
|
||||
import { Button } from './../../input/Input';
|
||||
import Page from './../Page';
|
||||
import Language from './../../language/Language'
|
||||
|
||||
import { openModal } from './../../actions/ModalActions';
|
||||
import Modal from './../../modal/Modal';
|
||||
import BannerSection from './sections/BannerSection';
|
||||
import PromoVideoSection from './sections/PromoVideoSection';
|
||||
import ProgrammingSection from './sections/ProgrammingSection';
|
||||
import PlatformsSection from './sections/PlatformsSection';
|
||||
import ExistingWorkSection from './sections/ExistingWorkSection';
|
||||
|
||||
class Homepage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
const HomePage = (props) => {
|
||||
//Return
|
||||
return (
|
||||
<Page style="home-page" className="p-home-page" title={0}>
|
||||
|
||||
testModal() {
|
||||
console.log("oof");
|
||||
this.props.openModal(
|
||||
<Modal close>
|
||||
Hello Modal
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
{ /* Banner */ }
|
||||
<BannerSection />
|
||||
|
||||
render() {
|
||||
let lines = [];
|
||||
for(let i = 0; i < 20; i++) {
|
||||
lines.push(<br key={i} />);
|
||||
}
|
||||
{ /* Promo Video
|
||||
<PromoVideoSection />
|
||||
*/ }
|
||||
|
||||
return (
|
||||
<Page style="home-page" title={0} className="p-home-page">
|
||||
Welcome home
|
||||
{ lines }
|
||||
<Button onClick={this.testModal.bind(this)}>
|
||||
Test Modal
|
||||
</Button>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
{/* Programming */}
|
||||
<ProgrammingSection />
|
||||
|
||||
{/* Platforms */}
|
||||
<PlatformsSection />
|
||||
|
||||
{/* Existing Work */}
|
||||
<ExistingWorkSection />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
modal: state.modal
|
||||
code: state.language.code
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return bindActionCreators({
|
||||
openModal: openModal
|
||||
},dispatch);
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Homepage);
|
||||
export default connect(mapStateToProps)(HomePage);
|
||||
|
||||
49
public/page/home/sections/BannerSection.jsx
Normal file
49
public/page/home/sections/BannerSection.jsx
Normal file
@ -0,0 +1,49 @@
|
||||
// Copyright (c) 2018 Dominic Masters
|
||||
//
|
||||
// MIT License
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining
|
||||
// a copy of this software and associated documentation files (the
|
||||
// "Software"), to deal in the Software without restriction, including
|
||||
// without limitation the rights to use, copy, modify, merge, publish,
|
||||
// distribute, sublicense, and/or sell copies of the Software, and to
|
||||
// permit persons to whom the Software is furnished to do so, subject to
|
||||
// the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be
|
||||
// included in all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
import React from 'react';
|
||||
import Language from './../../../language/Language';
|
||||
import { PageBoundary } from './../../Page';
|
||||
import { ImageSection } from './../../../section/Section';
|
||||
import FloatingContentBox from './../../../content/FloatingContentBox';
|
||||
import { Title, Subtitle } from './../../../typography/Typography';
|
||||
import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
|
||||
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<ImageSection
|
||||
src={ require('./../../../images/banners/about/glasses.svg') }
|
||||
alt="domsPlace"
|
||||
>
|
||||
<PageBoundary full>
|
||||
<FloatingContentBox position="middle center" size="large" className="u-text-center">
|
||||
<ElementScrollFader from="bottom">
|
||||
<Title>{ Language.get("pages.home.banner.title") }</Title>
|
||||
<Subtitle className="u-responsive--small-up">{ Language.get("pages.home.banner.subtitle") }</Subtitle>
|
||||
</ElementScrollFader>
|
||||
</FloatingContentBox>
|
||||
</PageBoundary>
|
||||
</ImageSection>
|
||||
);
|
||||
}
|
||||
179
public/page/home/sections/ExistingWorkSection.jsx
Normal file
179
public/page/home/sections/ExistingWorkSection.jsx
Normal file
@ -0,0 +1,179 @@
|
||||
// Copyright (c) 2018 Dominic Masters
|
||||
//
|
||||
// MIT License
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining
|
||||
// a copy of this software and associated documentation files (the
|
||||
// "Software"), to deal in the Software without restriction, including
|
||||
// without limitation the rights to use, copy, modify, merge, publish,
|
||||
// distribute, sublicense, and/or sell copies of the Software, and to
|
||||
// permit persons to whom the Software is furnished to do so, subject to
|
||||
// the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be
|
||||
// included in all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
import React from 'react';
|
||||
import Language from './../../../language/Language';
|
||||
import { PageBoundary } from './../../Page';
|
||||
import Section, { SplitSection, Split, ClearSection } from './../../../section/Section';
|
||||
import ContentBox from './../../../content/ContentBox';
|
||||
import { Title, Subtitle, Paragraph, Heading1, Heading2 } from './../../../typography/Typography';
|
||||
import { Button } from './../../../input/Input';
|
||||
import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
|
||||
import Image from './../../../image/Image';
|
||||
|
||||
import Window95, {
|
||||
TitleBar, Close, Minimize,
|
||||
MenuBar, MenuOption,
|
||||
ContextMenu, ContextMenuOption,
|
||||
Frame,
|
||||
AddressBar
|
||||
} from './../../../window/Window95';
|
||||
|
||||
const ExistingWorkFrame = (props) => {
|
||||
let fakeURL = props.href;
|
||||
if(!fakeURL.startsWith("http") && typeof window !== typeof undefined) {
|
||||
fakeURL = window.location.protocol + fakeURL;
|
||||
}
|
||||
|
||||
let fakeWindow = (
|
||||
<ElementScrollFader from={props.fromLeft}>
|
||||
<Window95>
|
||||
<TitleBar buttons={[
|
||||
<Minimize key="Minimize" disabled />,
|
||||
<Close key="close" disabled />
|
||||
]}>
|
||||
{ props.title }
|
||||
</TitleBar>
|
||||
|
||||
<MenuBar>
|
||||
<MenuOption title="File" disabled />
|
||||
<MenuOption title="Visit Page" href={ props.href } target="_blank" />
|
||||
</MenuBar>
|
||||
|
||||
<AddressBar href={fakeURL} />
|
||||
<Frame>
|
||||
<a href={ props.href} target="_blank" className="p-home-page__work-link">
|
||||
<Image
|
||||
src={props.src}
|
||||
alt={props.title}
|
||||
className="p-home-page__work-link-image"
|
||||
/>
|
||||
</a>
|
||||
</Frame>
|
||||
</Window95>
|
||||
</ElementScrollFader>
|
||||
);
|
||||
|
||||
let box = (
|
||||
<ElementScrollFader from={ props.fromRight }>
|
||||
<ContentBox box>
|
||||
<Heading2>{ props.title }</Heading2>
|
||||
{ props.description }
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
);
|
||||
|
||||
let left, right;
|
||||
if(props.swap) {
|
||||
left = box;
|
||||
right = fakeWindow;
|
||||
} else {
|
||||
left = fakeWindow;
|
||||
right = box;
|
||||
}
|
||||
|
||||
return (
|
||||
<SplitSection align="center">
|
||||
<Split padded>
|
||||
{ left }
|
||||
</Split>
|
||||
|
||||
<Split padded>
|
||||
{ right }
|
||||
</Split>
|
||||
</SplitSection>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<Section className="p-home-page__promo p-home-page__promo-work">
|
||||
{/* Title */}
|
||||
<PageBoundary small>
|
||||
<ElementScrollFader from="left">
|
||||
<ContentBox box>
|
||||
<Heading1 className="u-text-center">
|
||||
{ Language.get("pages.home.work.heading") }
|
||||
</Heading1>
|
||||
<Paragraph>
|
||||
{ Language.get("pages.home.work.paragraph") }
|
||||
</Paragraph>
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
|
||||
<ClearSection />{/* Space a bit */}
|
||||
</PageBoundary>
|
||||
|
||||
<PageBoundary>
|
||||
{/* KOPA */}
|
||||
<ExistingWorkFrame
|
||||
href="//www.kopalife.com/products/kube-customise"
|
||||
fromLeft="top"
|
||||
fromRight="bottom"
|
||||
src={ require('./../../../images/work-showcase/kopalife.png') }
|
||||
title={ Language.get("pages.home.work.kopa.heading") }
|
||||
description={ Language.get("pages.home.work.kopa.description") }
|
||||
/>
|
||||
|
||||
{/* SMAI */}
|
||||
<ExistingWorkFrame
|
||||
href="//www.smai.com.au/"
|
||||
fromLeft="right"
|
||||
fromRight="right"
|
||||
swap
|
||||
src={ require('./../../../images/work-showcase/smai.svg') }
|
||||
title={ Language.get("pages.home.work.smai.heading") }
|
||||
description={ Language.get("pages.home.work.smai.description") }
|
||||
/>
|
||||
|
||||
{/* Oz Hair and Beauty */}
|
||||
<ExistingWorkFrame
|
||||
href="//www.ozhairandbeauty.com/"
|
||||
fromLeft="left"
|
||||
fromRight="left"
|
||||
|
||||
src={ require('./../../../images/work-showcase/ozhair.png') }
|
||||
title={ Language.get("pages.home.work.ozhair.heading") }
|
||||
description={ Language.get("pages.home.work.ozhair.description") }
|
||||
/>
|
||||
</PageBoundary>
|
||||
|
||||
<PageBoundary small>
|
||||
<ClearSection />{/* Space a bit */}
|
||||
|
||||
<ElementScrollFader from="bottom">
|
||||
<ContentBox box className="u-text-center">
|
||||
<Subtitle>{ Language.get("pages.home.work.footer") }</Subtitle>
|
||||
<Button size="large" to="/contact">
|
||||
{ Language.get("pages.home.work.footer-button") }
|
||||
</Button>
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
|
||||
<ClearSection />{/* Space a bit */}
|
||||
</PageBoundary>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
189
public/page/home/sections/PlatformsSection.jsx
Normal file
189
public/page/home/sections/PlatformsSection.jsx
Normal file
@ -0,0 +1,189 @@
|
||||
// Copyright (c) 2018 Dominic Masters
|
||||
//
|
||||
// MIT License
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining
|
||||
// a copy of this software and associated documentation files (the
|
||||
// "Software"), to deal in the Software without restriction, including
|
||||
// without limitation the rights to use, copy, modify, merge, publish,
|
||||
// distribute, sublicense, and/or sell copies of the Software, and to
|
||||
// permit persons to whom the Software is furnished to do so, subject to
|
||||
// the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be
|
||||
// included in all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
import React from 'react';
|
||||
import Language from './../../../language/Language';
|
||||
import { PageBoundary } from './../../Page';
|
||||
import Section, { ImageSection, VideoSection, SplitSection, Split } from './../../../section/Section';
|
||||
import FloatingContentBox from './../../../content/FloatingContentBox';
|
||||
import ContentBox from './../../../content/ContentBox';
|
||||
import Image from './../../../image/Image';
|
||||
import Video from './../../../video/Video';
|
||||
import { Title, Subtitle, Paragraph, Heading1 } from './../../../typography/Typography';
|
||||
import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
|
||||
|
||||
const Platform = (props) => {
|
||||
let children;
|
||||
let image = <Image src={props.src} className="p-home-page__brands-image" />;
|
||||
|
||||
if(props.to) {
|
||||
children = (
|
||||
<a href={props.to} target="_blank" className="p-home-page__brands-link">
|
||||
{image}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
children = image;
|
||||
}
|
||||
|
||||
return (
|
||||
<ElementScrollFader from={props.from} className="p-home-page__brands-brand">
|
||||
{children}
|
||||
</ElementScrollFader>
|
||||
);
|
||||
};
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<Section className="p-home-page__promo p-home-page__promo-platforms">
|
||||
<PageBoundary>
|
||||
<ElementScrollFader from="left">
|
||||
<Title className="u-text-center p-home-page__brands-title">
|
||||
{ Language.get("pages.home.platforms.heading") }
|
||||
</Title>
|
||||
</ElementScrollFader>
|
||||
|
||||
<div className="p-home-page__brands">
|
||||
{/* Shopify */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/shopify/shopify_glyph.svg')}
|
||||
from="left"
|
||||
to="//www.shopify.com"
|
||||
/>
|
||||
{/* React */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/react/react-logo.svg')}
|
||||
from="top"
|
||||
to="//reactjs.org"
|
||||
/>
|
||||
|
||||
{/* MonoGame */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/monogame/monogame-logo.svg')}
|
||||
from="bottom"
|
||||
to="http://www.monogame.net"
|
||||
/>
|
||||
|
||||
{/* PGSQL */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/pgsql/pgsql-logo.svg')}
|
||||
from="right"
|
||||
to="//www.postgresql.org"
|
||||
/>
|
||||
|
||||
{/* NodeJS */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/nodejs/nodejs-logo.svg')}
|
||||
from="top"
|
||||
to="//nodejs.org"
|
||||
/>
|
||||
|
||||
{/* C# */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/csharp/csharp-logo.svg')}
|
||||
from="top"
|
||||
to="//docs.microsoft.com/en-us/dotnet/csharp/"
|
||||
/>
|
||||
|
||||
{/* PHP */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/php/php-logo.svg')}
|
||||
from="top"
|
||||
to="//php.net"
|
||||
/>
|
||||
|
||||
{/* Java */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/java/java-logo.svg')}
|
||||
from="top"
|
||||
to="//java.com"
|
||||
/>
|
||||
|
||||
{/* neto */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/neto/neto-logo.svg')}
|
||||
from="bottom"
|
||||
to="http://www.monogame.net"
|
||||
/>
|
||||
|
||||
{/* MySQL */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/mysql/mysql-logo.svg')}
|
||||
from="bottom"
|
||||
to="//www.mysql.com"
|
||||
/>
|
||||
|
||||
{/* Heroku */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/heroku/heroku-logo.svg')}
|
||||
from="bottom"
|
||||
to="//heroku.com"
|
||||
/>
|
||||
|
||||
{/* OpenGL */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/opengl/opengl-logo.svg')}
|
||||
from="bottom"
|
||||
to="//www.opengl.org"
|
||||
/>
|
||||
|
||||
{/* Discord */}
|
||||
<Platform
|
||||
src={ require('./../../../images/branding/discord/discord-logo.svg') }
|
||||
from="right"
|
||||
to="//discordapp.com"
|
||||
/>
|
||||
|
||||
{/* Twitch */}
|
||||
<Platform
|
||||
src={ require('./../../../images/branding/twitch/twitch-logo.svg') }
|
||||
from="right"
|
||||
to="//twitch.tv"
|
||||
/>
|
||||
|
||||
{/* Twitter */}
|
||||
<Platform
|
||||
src={require('./../../../images/branding/twitter/twitter-logo.svg')}
|
||||
from="left"
|
||||
to="//twitter.com"
|
||||
/>
|
||||
|
||||
{/* Google Cloud */}
|
||||
<Platform
|
||||
src={
|
||||
require('./../../../images/branding/google-cloud/google-cloud-logo.svg')
|
||||
}
|
||||
from="left"
|
||||
to="//console.cloud.google.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ElementScrollFader from="bottom">
|
||||
<Subtitle className="u-text-center p-home-page__brands-title">
|
||||
{ Language.get("pages.home.platforms.footer") }
|
||||
</Subtitle>
|
||||
</ElementScrollFader>
|
||||
</PageBoundary>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
48
public/page/home/sections/ProgrammingSection.jsx
Normal file
48
public/page/home/sections/ProgrammingSection.jsx
Normal file
@ -0,0 +1,48 @@
|
||||
// Copyright (c) 2018 Dominic Masters
|
||||
//
|
||||
// MIT License
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining
|
||||
// a copy of this software and associated documentation files (the
|
||||
// "Software"), to deal in the Software without restriction, including
|
||||
// without limitation the rights to use, copy, modify, merge, publish,
|
||||
// distribute, sublicense, and/or sell copies of the Software, and to
|
||||
// permit persons to whom the Software is furnished to do so, subject to
|
||||
// the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be
|
||||
// included in all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import Language from './../../../language/Language';
|
||||
import { PageBoundary } from './../../Page';
|
||||
import Section from './../../../section/Section';
|
||||
import ContentBox from './../../../content/ContentBox';
|
||||
import { Title, Paragraph, Heading1 } from './../../../typography/Typography';
|
||||
import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<Section className="p-home-page__promo p-home-page__promo-programming">
|
||||
<PageBoundary small>
|
||||
<ElementScrollFader from="bottom">
|
||||
<ContentBox box>
|
||||
<Heading1 className="u-text-center">
|
||||
{ Language.get("pages.home.programming.heading") }
|
||||
</Heading1>
|
||||
{ Language.get("pages.home.programming.paragraph") }
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
</PageBoundary>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
68
public/page/home/sections/PromoVideoSection.jsx
Normal file
68
public/page/home/sections/PromoVideoSection.jsx
Normal file
@ -0,0 +1,68 @@
|
||||
// Copyright (c) 2018 Dominic Masters
|
||||
//
|
||||
// MIT License
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining
|
||||
// a copy of this software and associated documentation files (the
|
||||
// "Software"), to deal in the Software without restriction, including
|
||||
// without limitation the rights to use, copy, modify, merge, publish,
|
||||
// distribute, sublicense, and/or sell copies of the Software, and to
|
||||
// permit persons to whom the Software is furnished to do so, subject to
|
||||
// the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be
|
||||
// included in all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
import React from 'react';
|
||||
import Language from './../../../language/Language';
|
||||
import Page, { PageBoundary } from './../../Page';
|
||||
import Section, { SplitSection, Split } from './../../../section/Section';
|
||||
import FloatingContentBox from './../../../content/FloatingContentBox';
|
||||
import ContentBox from './../../../content/ContentBox';
|
||||
import Video from './../../../video/Video';
|
||||
import { Title, Subtitle, Paragraph, Heading1 } from './../../../typography/Typography';
|
||||
import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
|
||||
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<Section className="p-home-page__promo p-home-page__promo-video">
|
||||
<PageBoundary>
|
||||
<SplitSection align="center">
|
||||
|
||||
<Split className="u-text-center" padded>
|
||||
<ElementScrollFader>
|
||||
<Video
|
||||
image={ require('./../../../videos/bunny/big_buck_bunny.jpg') }
|
||||
mp4={ require('./../../../videos/bunny/big_buck_bunny.mp4') }
|
||||
controls
|
||||
/>
|
||||
</ElementScrollFader>
|
||||
</Split>
|
||||
|
||||
<Split className="u-text-center" padded>
|
||||
<ElementScrollFader from="bottom">
|
||||
<ContentBox box>
|
||||
<Title>
|
||||
{ Language.get("pages.home.video.heading") }
|
||||
</Title>
|
||||
<Paragraph>
|
||||
{ Language.get("pages.home.video.paragraph") }
|
||||
</Paragraph>
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
</Split>
|
||||
|
||||
</SplitSection>
|
||||
</PageBoundary>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user